/* Design pass, 6 October 2026. Loaded last so every rule here wins without editing the older layers. */

/* ---------- Type scale: the hero headline is always the largest line on the page ---------- */
.agency h1{font-size:clamp(40px,4.7vw,92px);line-height:1.04;letter-spacing:-.038em;text-wrap:balance}
#band-title{font-size:clamp(34px,3.7vw,62px)}
#studio-title,#journey-title,#faq-title,.tf-headline{font-size:clamp(30px,3.3vw,54px)}

@media (max-width:1100px) and (min-width:601px){
  .agency{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:40px;padding-top:56px}
  .agency-heading{grid-column:1/-1}
  .agency h1{grid-column:1/-1;font-size:clamp(44px,6.6vw,72px)}
  .agency-info{grid-column:2/-1}
}
@media (max-width:600px){
  .agency h1{font-size:clamp(30px,9.1vw,40px);line-height:1.08}
}

/* ---------- Hero window: controls as icons, studio status instead of screen size ---------- */
.agency-info .sound-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (min-width:601px){
  .agency-info>p{padding-right:56px}
}

.settings .theme-toggle,.settings .mono-toggle{font-size:0;line-height:0;width:22px;height:22px;display:inline-grid;place-items:center;position:relative;border-radius:50%}
.settings .theme-toggle span,.settings .mono-toggle span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.studio-status .status-label{font-family:Interference,ui-monospace,monospace;font-size:9px;letter-spacing:.06em;text-transform:uppercase;opacity:.72;margin:0}
.studio-status .status-value{font-size:11px;margin:0;white-space:nowrap}
@media (max-width:600px){
}

/* ---------- One arrow everywhere: the brand's own, never a text glyph ---------- */
.tf-arrow{width:.62em;height:.62em;fill:currentColor;display:inline-block;vertical-align:baseline;flex:none;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.tf-option .tf-a{padding:0!important;animation:none!important;display:inline-grid;place-items:center;align-self:center;font-size:14px;line-height:1}
.tf-option .tf-a .tf-arrow{width:11px;height:11px}
.tf-option:hover .tf-arrow,.tf-option:focus-visible .tf-arrow,.personal-chat:hover .tf-arrow,.tf-contact a:hover .tf-arrow{transform:translate(2px,-2px)}
.tf-cursor i .tf-arrow{width:10px;height:10px}

/* ---------- The studio: Joseph at a readable size, the facts on request ---------- */
.studio-personal-grid .founder-portrait{max-width:340px!important;width:100%}
.founder-portrait figcaption{font-size:12px}
.founder-portrait small{font-size:11px}
.tf-more{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.tf-more summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font:var(--label);letter-spacing:.02em;text-transform:uppercase;min-height:32px}
.tf-more summary::-webkit-details-marker{display:none}
.tf-more summary i{font-style:normal;color:var(--accent);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.tf-more[open] summary i{transform:rotate(45deg)}
.tf-more-card{margin-top:10px;padding:18px;background:var(--surface,#fff);border:1px solid var(--line);border-radius:6px}
.tf-more[open] .tf-more-card{animation:tf-card-in .45s cubic-bezier(.22,1,.36,1)}
.tf-more-card .tf-offclock{margin:0;grid-template-columns:1fr;gap:12px}
@keyframes tf-card-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.founder-note .tf-yap{display:block}
.studio-personal-grid .founder-note .tf-yap>p{font-size:15px;line-height:1.65}

/* ---------- Header turns dark over the footer ---------- */
.site-header{transition:background-color .35s ease,color .35s ease,border-color .35s ease}
.site-header.over-dark{--ink:#f5f6f7;color:#f5f6f7;background:#0f0f10!important;border-color:#ffffff1f!important}
.site-header.over-dark .site-nav a,.site-header.over-dark .contact{color:#f5f6f7}
.site-header.over-dark .tf-lockup g[fill]{fill:#f5f6f7}
.site-header.over-dark .link-arrow{background:#f5f6f7;color:#0f0f10}

@media (prefers-reduced-motion:reduce){.tf-more[open] .tf-more-card{animation:none}.site-header{transition:none}}

/* ---------- Process: one step in focus, but text is never left unreadably faint ---------- */
.tfp-step.tf-focus-js{transition:none!important}
@media (max-width:1100px) and (min-width:700px){
  .tfp-steps .tfp-step{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:36px;align-items:center;max-width:none}
  .tfp-steps .tfp-step>*{grid-column:2}
  .tfp-steps .tfp-step>.tfp-n{grid-column:1/-1}
  .tfp-steps .tfp-step>.tfp-glyph{grid-column:1;grid-row:2/span 4;margin:0;width:100%}
  .tfp-steps .tfp-step>h3{margin-top:0}
}

/* ---------- Scroll entrances: one shared motion for headings and copy ---------- */
.tf-rv{opacity:0}
@media (prefers-reduced-motion:reduce){.tf-rv{opacity:1}}

/* ---------- Mid widths keep two columns instead of stranding content on the left ---------- */
@media (min-width:700px) and (max-width:900px){
  .tf-band-inner{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
  .tf-band .tf-band-copy{grid-column:1}
  .tf-band-figure{grid-column:2;max-width:none}
}
.tf-footer .tf-contact a .tf-arrow{width:10px!important;height:10px!important}

/* ---------- Project proof block ---------- */
.project-proof{margin:22px 0 4px;padding:16px 0 4px;border-top:1px solid var(--line)}
.project-proof .proof-label{font:var(--label);letter-spacing:.02em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.project-proof .proof-result{margin:0;font-size:15px;line-height:1.55;max-width:44ch}
.project-proof .proof-quote{margin:16px 0 0;padding:0 0 0 14px;border-left:2px solid var(--accent)}
.project-proof .proof-quote p{margin:0;font-size:15px;line-height:1.5}
.project-proof .proof-quote footer{margin-top:6px;font-size:12px;color:var(--muted)}
.project-proof .proof-link{display:inline-flex;align-items:center;gap:8px;margin-top:14px;color:var(--ink);font-size:14px;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.project-proof .proof-link:hover .tf-arrow{transform:translate(2px,-2px)}

/* ---------- Type: Teka Light for larger list text, Regular for body (via the Basis alias), Medium for headings ---------- */
.tf-option{font-family:Teka,Arial,sans-serif;font-weight:300}

/* ---------- Hero status: open for work, with the studio's 24-hour promise ---------- */
.studio-status{color:inherit;text-decoration:none}
.studio-status .status-label{display:inline-flex;align-items:center;gap:6px}
.status-dot{width:6px;height:6px;border-radius:50%;background:#7CE38B;box-shadow:0 0 0 0 #7ce38b88;animation:tf-pulse 2.4s ease-out infinite}
@keyframes tf-pulse{0%{box-shadow:0 0 0 0 #7ce38b88}70%{box-shadow:0 0 0 6px #7ce38b00}100%{box-shadow:0 0 0 0 #7ce38b00}}
.studio-status:hover .status-value{text-decoration:underline;text-underline-offset:3px}
.studio-status .dev-info{display:none}
@media (prefers-reduced-motion:reduce){.status-dot{animation:none}}

/* ---------- Dev mode ---------- */
.dev-mode .studio-status .status-value{display:none}
.dev-mode .studio-status .dev-info{display:flex;gap:10px;font-size:11px;font-variant-numeric:tabular-nums}
.dev-mode .studio-status .status-label{color:#ff8a5c;opacity:1}
.dev-mode .status-dot{background:#ff6a2f;box-shadow:none;animation:none}

.dev-grid{position:fixed;inset:0 32px;z-index:60;pointer-events:none;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:16px;opacity:0;transition:opacity .4s}
.dev-mode .dev-grid{opacity:1}
.dev-grid i{display:block;background:#ff5a1f0a;border-left:1px solid #ff5a1f40;border-right:1px solid #ff5a1f40;transform-origin:top}
.dev-grid b{position:absolute;margin:74px 0 0 4px;font:9px/1 Interference,ui-monospace,monospace;color:#ff5a1f;opacity:.8}
@media (max-width:600px){.dev-grid{inset:0 20px;column-gap:12px}}
.dev-probe{position:fixed;z-index:61;pointer-events:none;outline:1px dashed #ff5a1f;outline-offset:2px;opacity:0;transition:opacity .15s,left .12s,top .12s,width .12s,height .12s}
.dev-probe.on{opacity:1}
.dev-tag{position:absolute;left:-3px;bottom:100%;margin-bottom:5px;background:#ff5a1f;color:#fff;font:10px/1 Interference,ui-monospace,monospace;padding:4px 6px;border-radius:3px;white-space:nowrap}
.dev-chip{position:fixed;left:16px;bottom:16px;z-index:62;display:none;align-items:center;gap:12px;padding:8px 10px 8px 12px;background:#0f0f10;color:#f5f6f7;border:1px solid #ff5a1f66;border-radius:6px;font:10px/1 Interference,ui-monospace,monospace;text-transform:uppercase;letter-spacing:.06em}
.dev-mode .dev-chip{display:flex}
.dev-chip span:first-child{display:flex;align-items:center;gap:6px;color:#ff8a5c}
.dev-chip i{width:6px;height:6px;border-radius:50%;background:#ff5a1f}
.dev-chip button{background:#f5f6f7;color:#0f0f10;border:0;border-radius:3px;padding:5px 7px;font:inherit;cursor:pointer}
@media (hover:none){.dev-probe{display:none}}


.dev-grid i{position:relative}
.dev-grid b{position:absolute;bottom:64px;left:4px;margin:0}

/* ---------- Toggle icons: dark mode sweeps to a full moon, monochrome flattens its three tones ---------- */
.settings .tg{font-size:0!important;line-height:0;width:24px;height:24px;display:inline-grid;place-items:center;position:relative;border-radius:50%;color:inherit}
.settings .tg>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tg-icon{width:19px;height:19px;overflow:visible;opacity:.82;transition:opacity .25s}
.tg:hover .tg-icon,.tg[aria-pressed=true] .tg-icon{opacity:1}
.tg-ring{fill:none;stroke:currentColor;stroke-width:1.5}
.tg-dark .tg-fill{fill:currentColor;transform-box:view-box;transform-origin:20px 10px;transition:transform .6s cubic-bezier(.65,0,.35,1)}
.tg-dark .tg-moon{fill:currentColor;transition:r .6s cubic-bezier(.22,1,.36,1)}
.theme-toggle[aria-pressed=true] .tg-fill{transform:scaleX(2)}
.tg-mono .tg-bar{fill:currentColor;fill-opacity:var(--o);transition:fill-opacity .45s ease var(--d)}
.mono-toggle[aria-pressed=true] .tg-bar{fill-opacity:.42}
.settings .tg.tg::after{content:'';margin:0;position:absolute;inset:2px;border-radius:50%;border:1px solid currentColor;opacity:0;pointer-events:none}
.settings .tg.tg.tg-pulse::after{animation:tg-ring .6s cubic-bezier(.22,1,.36,1)}
@keyframes tg-ring{from{opacity:.6;transform:scale(.7)}to{opacity:0;transform:scale(1.9)}}
.tg:focus:not(:focus-visible),.studio-status:focus:not(:focus-visible),.clock-control:focus:not(:focus-visible){outline:none;box-shadow:none}
@media (prefers-reduced-motion:reduce){.tg-dark .tg-fill,.tg-mono .tg-bar{transition:none}.tg.tg-pulse::after{animation:none}}

/* ---------- Hero window: the studio status lines up under the clock ---------- */
.agency-info>.settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;align-items:center;padding-right:0}
.agency-info>.settings .theme-toggle{grid-column:1;grid-row:1;justify-self:start}
.agency-info>.settings .mono-toggle{grid-column:1;grid-row:1;justify-self:start;margin-left:34px}
.agency-info>.settings .studio-status{grid-column:2;grid-row:1;justify-self:start;display:flex;flex-direction:column;gap:3px;margin:0;padding-right:60px}
@media (max-width:600px){
  /* 44px row whose bottom sits 16px from the panel edge, the same box as the palette swatch, so their centres line up */
  .agency-info>.settings{grid-template-columns:auto;height:44px;padding:0 20px;align-items:center}
  .agency-info>.settings .theme-toggle,.agency-info>.settings .mono-toggle{grid-row:1}
  .agency-info>.settings .studio-status{grid-column:1/-1;grid-row:1/-1;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);align-items:center;text-align:center;padding:0;white-space:nowrap}
}

/* ---------- Dev mode controls bar, rebuilt as one clean row ---------- */
.header-under-inner{display:flex!important;align-items:center;gap:18px;padding:0 32px!important}
.site-header.show-controls .header-under-inner{padding:10px 32px!important}
.header-under-inner>.settings{display:contents!important}
.header-under-inner .tg{order:1;pointer-events:auto}
.header-under-inner>.clock-block{order:2;margin:0 0 0 auto!important;padding:0!important}
.header-under-inner>.sound-control{order:3}
.header-under-inner .studio-status{order:4;pointer-events:auto;min-width:96px}
.header-under-inner .studio-status .status-label{display:none}
.header-under-inner .tg-icon{width:17px;height:17px}
@media (max-width:600px){.header-under-inner{gap:12px;padding:0 20px!important}.site-header.show-controls .header-under-inner{padding:8px 20px!important}.header-under-inner .studio-status{min-width:0}.header-under-inner .studio-status .dev-info{font-size:10px;gap:6px}}

/* ---------- Further Development and Mitho show on phones and tablets only ---------- */
/* (now shown everywhere: 12 projects make a clean 4 x 3 grid on desktop) */

/* ---------- Project URL row ---------- */
.project-facts .proof-url a{color:var(--muted);text-decoration:none}
.project-facts .proof-url a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- Off the clock window ---------- */
.tf-more{position:relative}
.tf-more-btn{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:0;padding:0;color:var(--ink);font:var(--label);letter-spacing:.02em;text-transform:uppercase;min-height:32px;cursor:pointer}
.tf-more-btn i{font-style:normal;color:var(--accent);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.tf-more-btn[aria-expanded=true] i{transform:rotate(45deg)}
.tf-window{position:absolute;left:0;bottom:calc(100% + 10px);width:min(300px,100%);z-index:20;background:var(--surface,#fff);border:1px solid var(--line);border-radius:8px;box-shadow:0 18px 50px -18px #0000004d,0 2px 8px #0000000f;overflow:hidden;transform-origin:bottom left}
.tf-window[hidden]{display:none}
.tf-window-bar{display:flex;justify-content:space-between;align-items:center;padding:9px 10px 9px 12px;border-bottom:1px solid var(--line);font:var(--label);letter-spacing:.02em;text-transform:uppercase}
.tf-window-bar>span{display:flex;align-items:center;gap:8px}
.tf-window-close{width:22px;height:22px;border-radius:50%;border:0;background:color-mix(in srgb,var(--ink) 8%,transparent);display:grid;place-items:center;cursor:pointer}
.tf-window-close span{width:8px;height:1.5px;background:var(--ink);display:block}
.tf-window-body{padding:16px}
.tf-window-body .tf-offclock{margin:0;grid-template-columns:1fr;gap:12px}

/* ---------- Ask box: privacy line once typing starts ---------- */
.tf-ask:not(.has-text) .tf-ask-privacy{display:none}

/* ---------- Dev mode button beside the copyright ---------- */
.footer-legal{display:inline-flex;align-items:center;gap:14px}
.footer-legal .dev-toggle{background:none;border:0;padding:6px 0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;opacity:.7;transition:opacity .2s}
.footer-legal .dev-toggle::before{content:'·';margin-right:14px}
.footer-legal .dev-toggle:hover,.footer-legal .dev-toggle[aria-pressed=true]{opacity:1}

/* ---------- Hero supporting line: balanced lines, no single-word orphans ---------- */
.agency-info>p{text-wrap:balance;max-width:none}
@media (max-width:600px){.agency-info>p{max-width:none;text-wrap:pretty}}
.tf-window-close:focus:not(:focus-visible),.tf-more-btn:focus:not(:focus-visible){outline:none;box-shadow:none}

/* ---------- Process step 02: loose pieces snap into a brand board, then it's approved. 10s loop ---------- */
.g-brand .bt{transform-box:view-box;transform-origin:center}
.tf-motion .g-brand .bt{animation:bbIn 10s cubic-bezier(.34,1.3,.64,1) infinite}
.tf-motion .g-brand .t2{animation-delay:.18s}.tf-motion .g-brand .t3{animation-delay:.36s}
.tf-motion .g-brand .t4{animation-delay:.54s}.tf-motion .g-brand .t5{animation-delay:.72s}.tf-motion .g-brand .t6{animation-delay:.9s}
@keyframes bbIn{0%,4%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.92)}9%{opacity:1}20%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
.tf-motion .g-brand .bb-grid{animation:bbGrid 10s ease infinite}
@keyframes bbGrid{0%,2%{opacity:0}8%,30%{opacity:1}40%,100%{opacity:0}}
.g-brand .bb-ok{transform-box:fill-box;transform-origin:center}
.tf-motion .g-brand .bb-ok{animation:bbOk 10s cubic-bezier(.34,1.5,.64,1) infinite}
@keyframes bbOk{0%,30%{opacity:0;transform:scale(.6)}35%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
.tf-motion .g-brand .bb-note{animation:bbNote 10s ease infinite}
@keyframes bbNote{0%,34%{opacity:0}39%,92%{opacity:1}97%,100%{opacity:0}}
.tf-motion .g-brand .bb-lab{animation:bbNote2 10s ease infinite}
@keyframes bbNote2{0%,3%{opacity:0}8%,92%{opacity:1}97%,100%{opacity:0}}

/* ---------- Off the clock: a proper window on phones ---------- */
@media (max-width:760px){.tf-window{width:min(360px,calc(100vw - 40px))}}

/* ---------- Mobile footer: one quiet column, no boxes, no dead space underneath ---------- */
@media (max-width:600px){
  .tf-footer .tf-copy .tf-chat{display:none}
  .tf-footer .footer-colophon{display:flex!important;flex-direction:column;align-items:stretch;gap:20px;padding:22px 20px calc(22px + env(safe-area-inset-bottom))!important;border-top:1px solid #ffffff17}
  .tf-footer .footer-links{display:block!important;border:0!important;padding:0!important}
  .tf-footer .tf-contact{display:flex!important;justify-content:space-between;align-items:center;width:100%;height:auto!important;border:0!important}
  .tf-footer .tf-contact>a{border:0!important;padding:0!important;height:auto!important;font-size:15px;gap:8px}
  .tf-footer .tf-contact .footer-social{gap:18px!important}
  .tf-footer .tf-contact .footer-social a{border:0!important;padding:0!important;height:auto!important;width:auto!important;background:none!important}
  .tf-footer .tf-contact .footer-social svg{width:19px!important;height:19px!important}
  .tf-footer .footer-bottom{display:flex!important;flex-direction:column;align-items:stretch;gap:16px;border:0!important;padding:0!important}
  .tf-footer .footer-bottom>nav{order:-1;display:flex!important;justify-content:space-between;height:auto!important;border:0!important;gap:0!important}
  .tf-footer .footer-bottom>nav a{border:0!important;padding:0!important;height:auto!important;min-height:32px!important;background:none!important}
  .tf-footer .footer-colophon a:hover{background:none}
}

/* ---------- Process step 04: launch-day orders land on the phone, then the numbers are read. 14s loop ---------- */
@keyframes rLineX{45.0%,47.2%{stroke-dashoffset:1}57.1%,96.7%{stroke-dashoffset:0}100.0%{stroke-dashoffset:1}}
@keyframes rLine2X{45.0%,63.7%{stroke-dashoffset:1}76.9%,96.7%{stroke-dashoffset:0}100.0%{stroke-dashoffset:1}}
@keyframes rEndX{45.0%,76.3%{transform:scale(0)}79.1%,96.7%{transform:scale(1)}100.0%{transform:scale(0)}}
@keyframes rMark2X{45.0%,76.9%{opacity:0}80.2%,96.7%{opacity:1}100.0%{opacity:0}}
@keyframes rMarkX{45.0%,57.1%{opacity:0}60.4%,96.7%{opacity:1}100.0%{opacity:0}}
@keyframes rKpiX{45.0%,70.3%{opacity:0;transform:translateY(10px)}74.7%,96.7%{opacity:1;transform:none}100.0%{opacity:0}}
@keyframes rNoteX{45.0%,81.3%{opacity:0;transform:translateY(10px)}85.7%,96.7%{opacity:1;transform:none}100.0%{opacity:0}}
.tf-motion .g-rev2 .base{animation:rLineX 14s var(--ease-inout) infinite}
.tf-motion .g-rev2 .after{animation:rLine2X 14s var(--ease-inout) infinite}
.tf-motion .g-rev2 .endpt{animation:rEndX 14s var(--ease-land) infinite}
.tf-motion .g-rev2 .lb2{animation:rMark2X 14s var(--ease-out) infinite}
.tf-motion .g-rev2 .mark{animation:rMarkX 14s var(--ease-out) infinite}
.tf-motion .g-rev2 .ghost{animation:rMarkX 14s var(--ease-out) infinite;animation-delay:.6s}
.tf-motion .g-rev2 .kpi{animation:rKpiX 14s var(--ease-out) infinite}
.tf-motion .g-rev2 .note{animation:rNoteX 14s var(--ease-out) infinite}
.g-rev2 .lt,.g-rev2 .lnt{opacity:0}
.tf-motion .g-rev2 .rv-chart{animation:r2Chart 14s ease infinite}
@keyframes r2Chart{0%,41%{opacity:0}45%,98%{opacity:1}100%{opacity:0}}
.tf-motion .g-rev2 .lt{animation:r2Phone 14s ease infinite}
@keyframes r2Phone{0%{opacity:0}3%,37%{opacity:1}41%,100%{opacity:0}}
.tf-motion .g-rev2 .lnt{animation:r2Nt 14s var(--ease-out) infinite}
.tf-motion .g-rev2 .l2{animation-delay:.84s}.tf-motion .g-rev2 .l3{animation-delay:1.68s}.tf-motion .g-rev2 .l4{animation-delay:2.52s}
@keyframes r2Nt{0%,5%{opacity:0;transform:translateY(-14px)}9%,36%{opacity:1;transform:none}40%,100%{opacity:0}}

/* ---------- Project windows: never trap the scroll. Snapping only guides case studies; plain projects scroll freely ---------- */
dialog:not(.contact-sheet):not(.has-case-study) .window-body{scroll-snap-type:none!important}
/* Case studies snap page to page; the first page is a tall snap area, so it scrolls freely until its end */
dialog.has-case-study .window-body{scroll-snap-type:y mandatory!important}
dialog.has-case-study .project-overview{scroll-snap-align:start;scroll-snap-stop:normal}
dialog:not(.contact-sheet) .project-gallery{overflow:clip}

/* ---------- Studio on phones: a proper portrait, then the story at full width ---------- */
@media (max-width:600px){
  .studio-personal-grid .founder-introduction{display:block!important}
  .studio-personal-grid .founder-portrait{max-width:66%!important;width:66%;margin:0 0 30px}
  .studio-personal-grid .founder-note{max-width:none}
  .studio-personal-grid .founder-note .tf-yap>p,.studio-personal-grid .founder-note>p{font-size:16px;line-height:1.6}
  .tf-window{width:min(360px,calc(100vw - 40px))!important}
}
@media (max-width:600px){.agency-info>p .br-m{display:block}}

/* ---------- Off the clock details ---------- */
.oc-meal{display:flex;align-items:center;gap:10px}
.oc-meal .oc-place,.oc-meal .oc-score{line-height:20px}
.oc-meal .oc-score{padding-bottom:1px}
.oc-place{display:inline-flex;align-items:center;gap:6px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.oc-place:hover{border-color:var(--ink)}
.oc-pin{width:10px;height:13px;fill:var(--muted);flex:none}
.oc-top{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.oc-top li{display:flex;align-items:center;gap:10px;line-height:20px}
.oc-n{width:12px;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- Process step 01: a cursor walks the store and pins where buyers hesitate. 11s loop ---------- */
.g-walk .wk-h,.g-walk .wk-n,.g-walk .wk-chip{opacity:0}
.g-walk .wk-h{transform-box:fill-box;transform-origin:center}
.tf-motion .g-walk .wk-cur{animation:wkCur 11s cubic-bezier(.65,0,.35,1) infinite}
@keyframes wkCur{
  0%{opacity:0;transform:translate(250px,330px)}4%{opacity:1;transform:translate(250px,330px)}
  12%,24%{opacity:1;transform:translate(160px,100px)}
  32%,44%{opacity:1;transform:translate(79px,200px)}
  52%,64%{opacity:1;transform:translate(77px,299px)}
  74%{opacity:1;transform:translate(300px,330px)}78%,100%{opacity:0;transform:translate(300px,330px)}}
.tf-motion .g-walk .wk-h.w1{animation:wkH1 11s cubic-bezier(.34,1.5,.64,1) infinite}
.tf-motion .g-walk .wk-h.w2{animation:wkH2 11s cubic-bezier(.34,1.5,.64,1) infinite}
.tf-motion .g-walk .wk-h.w3{animation:wkH3 11s cubic-bezier(.34,1.5,.64,1) infinite}
.tf-motion .g-walk .wk-n.w1{animation:wkN1 11s cubic-bezier(.22,1,.36,1) infinite}
.tf-motion .g-walk .wk-n.w2{animation:wkN2 11s cubic-bezier(.22,1,.36,1) infinite}
.tf-motion .g-walk .wk-n.w3{animation:wkN3 11s cubic-bezier(.22,1,.36,1) infinite}
/* each pin lands as the cursor arrives; all three clear together before the summary chip */
@keyframes wkH1{0%,12%{opacity:0;transform:scale(.3)}15%,66%{opacity:1;transform:none}70%,100%{opacity:0}}
@keyframes wkH2{0%,32%{opacity:0;transform:scale(.3)}35%,66%{opacity:1;transform:none}70%,100%{opacity:0}}
@keyframes wkH3{0%,52%{opacity:0;transform:scale(.3)}55%,66%{opacity:1;transform:none}70%,100%{opacity:0}}
@keyframes wkN1{0%,14%{opacity:0;transform:translateX(-8px)}18%,66%{opacity:1;transform:none}70%,100%{opacity:0}}
@keyframes wkN2{0%,34%{opacity:0;transform:translateX(-8px)}38%,66%{opacity:1;transform:none}70%,100%{opacity:0}}
@keyframes wkN3{0%,54%{opacity:0;transform:translateX(-8px)}58%,66%{opacity:1;transform:none}70%,100%{opacity:0}}
.g-walk .wk-chip{transform-box:fill-box;transform-origin:center}
.tf-motion .g-walk .wk-chip{animation:wkChip 11s cubic-bezier(.34,1.5,.64,1) infinite}
@keyframes wkChip{0%,70%{opacity:0;transform:scale(.7)}74%,90%{opacity:1;transform:none}94%,100%{opacity:0}}

/* ---------- Process step 03: the approved brand drops into the phone first; Add to bag lights up last ---------- */
.g-dir .dc{opacity:0;transform-box:fill-box;transform-origin:center}
.tf-motion .g-dir .dc{animation:dDrop 10s cubic-bezier(.34,1.3,.64,1) infinite}
.tf-motion .g-dir .dc2{animation-delay:.15s}.tf-motion .g-dir .dc3{animation-delay:.3s}
/* the three brand colours sit in the empty phone, then sink into the page as it builds */
@keyframes dDrop{0%{opacity:0;transform:translateY(-16px) scale(.6)}3%,12%{opacity:1;transform:none}17%,100%{opacity:0;transform:translateY(30px) scale(.4)}}
.tf-motion .g-dir .sec,.tf-motion .g-dir .lab{animation-name:dIn3}
@keyframes dIn3{0%,15%{opacity:0;transform:translateY(14px)}22%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
.tf-motion .g-dir .type1,.tf-motion .g-dir .type2{animation-name:dType3}
@keyframes dType3{0%,18%{clip-path:inset(0 100% 0 0)}26%,100%{clip-path:inset(0 0 0 0)}}
.g-dir .atc-glow{opacity:0}
.tf-motion .g-dir .atc-glow{animation:dGlow 10s ease infinite}
@keyframes dGlow{0%,76%{opacity:0}79%{opacity:1}83%{opacity:.25}86%{opacity:1}92%{opacity:1}97%,100%{opacity:0}}

/* ---------- Process step 02: Figma chip arrives with the approval ---------- */
.g-brand .bb-fig{opacity:0}
.tf-motion .g-brand .bb-fig{animation:bbFig 10s ease infinite}
@keyframes bbFig{0%,38%{opacity:0}43%,92%{opacity:1}97%,100%{opacity:0}}

/* ---------- Studio reader: words go from light grey to ink as you scroll ---------- */
.founder-note p.rd .rd-w{color:color-mix(in srgb,var(--ink) 26%,transparent);transition:color .35s ease}
.founder-note p.rd .rd-w.on{color:var(--ink)}
/* Once the gallery reaches its last image, the wheel carries on down the window instead of stopping dead */
@media (min-width:768px){dialog:not(.contact-sheet) .gallery-viewport{overscroll-behavior-y:auto}}

/* Hero toggles stay hidden until they are in place with their icons, so nothing flashes on load */
.settings .theme-toggle:not(.tg-in),.settings .mono-toggle:not(.tg-in){opacity:0}
.settings .tg.tg-in{opacity:1;transition:opacity .45s ease}
/* Portrait fades in once it has loaded instead of painting in */
.founder-portrait .portrait-frame{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.founder-portrait .portrait-frame img{opacity:0;transition:opacity .7s cubic-bezier(.22,1,.36,1)}
.founder-portrait .portrait-frame img.is-loaded{opacity:1}

/* Mobile case studies: the first page fits the window exactly, nothing to scroll; the next page snaps in below */
@media (max-width:767px){
  dialog.has-case-study .project-overview{height:100%;min-height:0;overflow:hidden;gap:14px;padding-bottom:14px}
  dialog.has-case-study .project-gallery{flex:1 1 auto;min-height:96px;display:flex;flex-direction:column}
  dialog.has-case-study .project-gallery>*:first-child{flex:1 1 auto;min-height:0}
  dialog.has-case-study .gallery-viewport{flex:1 1 auto;min-height:0;height:auto}
  dialog.has-case-study .gallery-track{height:100%}
  dialog.has-case-study .gallery-toolbar{min-height:36px}
  dialog.has-case-study .project-overview .detail-info{flex:none;padding-bottom:0}
  dialog.has-case-study .project-status{margin-bottom:10px}
  dialog.has-case-study .detail-title{font-size:clamp(24px,7vw,28px);margin-bottom:8px}
  dialog.has-case-study .detail-copy{font-size:14px;line-height:1.45;margin-bottom:12px}
  dialog.has-case-study .project-facts dt,dialog.has-case-study .project-facts dd{padding-top:7px;padding-bottom:7px}
  dialog.has-case-study .detail-scope span{display:inline}
  dialog.has-case-study .detail-scope span:not(:last-child)::after{content:' · ';color:var(--muted)}
}
@media (max-width:767px) and (max-height:760px){
  dialog.is-wrapped .lm-wrap-s{display:none}
  dialog.is-wrapped .lm-seal{display:none}
}

/* Full-site walkthrough videos in project galleries */
.gallery-video video{display:block;width:100%;height:auto;aspect-ratio:1440/800;background:var(--paper);object-fit:cover}
@media (max-width:760px){.gallery-video video{flex:1;min-height:0;height:100%;object-fit:contain}}
/* Website screenshots in galleries: a hairline frame; phone crops get phone corners */
.gallery-image.screen img{box-sizing:border-box;border:1px solid var(--line);border-radius:6px}
.gallery-image.phone img{border-radius:18px}
@media (max-width:760px){.gallery-image.screen img{object-fit:contain!important;object-position:center top;border:0;border-radius:6px}}

/* ---------- Editorial galleries: two columns that pack tall pages beside shorter pieces ---------- */
.gallery-image img[data-zoom]{cursor:zoom-in}
@media (min-width:761px){
  .gallery-track.is-editorial{display:block;columns:2;column-gap:14px}
  .gallery-track.is-editorial>.gallery-image{display:block;break-inside:avoid;margin:0 0 20px}
  .gallery-track.is-editorial>.gallery-image.wide{column-span:all}
  .gallery-track.is-editorial .gallery-image img{height:auto}
}
@media (max-width:760px){
  /* phones: full pages show their top and open whole on tap */
  .gallery-image.full img{object-fit:cover!important;object-position:center top}
  .gallery-image.full{position:relative}
  .gallery-image.full::after{content:'Tap for the full page';position:absolute;left:8px;top:8px;font:500 9px/1 Interference,monospace;letter-spacing:.04em;text-transform:uppercase;background:var(--ink);color:var(--paper);padding:5px 7px 4px;border-radius:2px;pointer-events:none}
}
.gallery-image.el img{background:#fff}

/* ---------- Zoom viewer inside the project window ---------- */
.tf-zoom{position:absolute;inset:0;z-index:30;background:var(--paper);display:flex;flex-direction:column;opacity:0;transition:opacity .25s ease}
.tf-zoom.is-open{opacity:1}
.tf-zoom[hidden]{display:none}
.tf-zoom-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:56px;padding:0 16px 0 24px;border-bottom:1px solid var(--line);font:500 10px/1 Interference,monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);flex:none}
.tf-zoom-close{width:36px;height:36px;border-radius:50%;border:0;background:color-mix(in srgb,var(--ink) 8%,transparent);position:relative;cursor:pointer}
.tf-zoom-close span::before,.tf-zoom-close span::after{content:'';position:absolute;left:11px;right:11px;top:50%;height:1.5px;background:var(--ink)}
.tf-zoom-close span::before{transform:rotate(45deg)}.tf-zoom-close span::after{transform:rotate(-45deg)}
.tf-zoom-body{flex:1;overflow:auto;overscroll-behavior:contain;display:flex;justify-content:center;align-items:flex-start;padding:24px}
.tf-zoom-body img{display:block;max-width:min(100%,1200px);height:auto;border:1px solid var(--line);border-radius:6px;box-shadow:0 20px 50px -30px #0005;margin:auto}
.tf-zoom:not(.is-tall) .tf-zoom-body img{max-height:100%;width:auto;object-fit:contain}
.tf-zoom.is-tall .tf-zoom-body img{margin:0 auto}
@media (max-width:760px){.tf-zoom-body{padding:12px}}
.tf-zoom-close:focus:not(:focus-visible){outline:none}