/* twentyfour / Identity 1.0 applied to the site. Round two, 2 October 2026.
   Loaded last. Source: twentyfour-identity-1_0 (tokens.css, geometry.json, WEBSITE-HANDOFF.md). */

@font-face{font-family:Interference;src:url('brand/fonts/KHInterference-Regular.woff2') format('woff2');font-display:swap}

/* 1. Palette. Frost and Ink lead, Soft Orange marks action and punctuation. */
:root{
  --paper:#F5F6F7;--ink:#18181B;--surface:#ECEDEF;--line:#18181B1c;--muted:#62626A;--accent:#F46A43;
  --peach:#F3ECE7;--apricot:#EFE5DF;--mineral:#E3ECF1;--deep-orange:#9C3F29;
  --band:#0E0E10;--night:#0A0A0B;--card:#FFFFFF;
  --label:11px/1.5 Interference,ui-monospace,Menlo,monospace;
}
body.dark{--paper:#18181B;--ink:#F5F6F7;--surface:#232327;--line:#ffffff1f;--muted:#9C9CA4;--card:#202024}
html{background:linear-gradient(var(--paper,#F5F6F7) 50%,var(--night) 50%) fixed}
html:has(body.dark){background:linear-gradient(#18181B 50%,var(--night) 50%) fixed}
body{background:var(--paper);color:var(--ink)}
::selection{background:var(--accent);color:var(--ink)}

/* 2. Type roles. Teka headlines, Basis reading, Interference annotates. No colon in labels. */
.tf-label,.studio-eyebrow,.tf-eyebrow,.footer-bottom,.agency-info .micro,.window-title,.tfp-n,.tfp-pairs dt{font:var(--label)!important;letter-spacing:.02em!important;text-transform:uppercase}
.tf-label{margin:0;color:var(--muted)}
.tf-label-dark{color:#8f9196}
.studio-eyebrow{color:var(--muted)}
.agency-heading .studio-eyebrow{margin-bottom:22px}
.agency h1,.studio-personal-heading h2,.tf-headline{color:var(--ink)}
.tf-footer .tf-headline{color:var(--tf-ink)}
.tf-dot,.tf-stop{display:inline-block;padding-left:.06em;letter-spacing:0;color:var(--accent)!important}

/* 3. Header lockup: the master SVG inline. The colon ticks with the second, like a clock. */
.site-header .brand-combined.tf-brand,.site-header.is-scrolled .brand-combined.tf-brand{background:none;-webkit-mask:none;mask:none;width:198px;aspect-ratio:5144.11475/866;transform:scale(calc(1 - .16 * var(--header-progress,0)))}
.tf-lockup{display:block;width:100%;height:auto;overflow:visible}
.tf-cb{fill:var(--accent)}
.tf-motion .tf-colon{animation:tfTick 2s linear infinite;animation-delay:var(--tick-delay,0ms)}
@keyframes tfTick{0%,46%{opacity:1}52%,96%{opacity:.18}100%{opacity:1}}
body.dark .tf-cb,body.monochrome .tf-cb{fill:currentColor}
@media(max-width:600px){.site-header .brand-combined.tf-brand,.site-header.is-scrolled .brand-combined.tf-brand{width:156px;transform:scale(calc(1 - .1 * var(--header-progress,0)))}}

/* Arrow tile from the identity: pale square, dark arrow. */
.tf-tile{display:inline-grid;place-items:center;width:1.55em;height:1.55em;background:#ECEDEF;color:#18181B;flex:none}
.tf-tile svg{width:.78em;height:.78em;fill:currentColor;transition:transform var(--t-slow) var(--ease-out)}
a:hover>.tf-tile svg,a:focus-visible>.tf-tile svg{transform:translate(2px,-2px)}
.tf-band-link:hover>.tf-tile svg,.tf-band-link:focus-visible>.tf-tile svg{transform:translateY(3px)}
.identity-link .link-arrow::before{background:#ECEDEF}

/* 4. Selected work: the original four-column grid and cards, with filters in the heading row. */
.tf-work-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.tf-filter{display:flex;flex-wrap:wrap;gap:6px}
.tf-filter button{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 13px;border:1px solid var(--line);border-radius:17px;background:transparent;color:var(--ink);font:13px/1 Basis,Arial,sans-serif;cursor:pointer;transition:background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out)}
.tf-filter button b{font:400 10px/1 Interference,monospace;color:var(--muted)}
.tf-filter button:hover{border-color:var(--ink)}
.tf-filter button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tf-filter button[aria-pressed="true"] b{color:var(--accent)}
.tf-filter button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tf-filter-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tf-work .project.is-out{display:none}
.tf-ccursor{position:fixed;left:0;top:0;z-index:70;pointer-events:none;padding:9px 12px 8px;border-radius:2px;background:var(--ink);color:var(--paper);font:13px/1 Basis,Arial,sans-serif;white-space:nowrap;opacity:0;transform:translate3d(var(--cx,0),var(--cy,0),0) translate(14px,14px);transition:opacity var(--t-fast) linear}
.tf-ccursor.is-on{opacity:1}
body.project-open .tf-ccursor,body.enquiry-open .tf-ccursor{display:none}

/* 5. Brand / Web / Commerce: a pinned stage. The screened colon reacts to the pointer,
      then opens into the studio section as you scroll. */
.tf-band.is-colon{height:260vh;height:260svh}
.tf-band{position:relative;background:var(--band);color:#F5F6F7;margin-top:56px;overflow:clip}
.tf-band-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.tf-band-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair;touch-action:pan-y}
.tf-band-copy{position:absolute;left:32px;top:50%;translate:0 -50%;width:min(46%,640px);z-index:1;will-change:opacity,transform;pointer-events:none}
.tf-band-copy a{pointer-events:auto}
.tf-band-copy h2{margin:28px 0 0;font:500 clamp(40px,5vw,84px)/1 Teka,Basis,sans-serif;letter-spacing:-.045em;max-width:13ch;text-wrap:balance;color:#F5F6F7}
.tf-band-copy>p:not(.tf-label){margin:28px 0 0;max-width:40ch;font-size:16px;line-height:1.6;color:#b4b6ba}
.tf-band-link{display:inline-flex;align-items:center;gap:14px;margin-top:40px;color:#F5F6F7;text-decoration:none;font:500 20px/1 Teka,Basis,sans-serif;letter-spacing:-.02em}
.tf-band-hint{position:absolute;right:32px;bottom:28px;margin:0;font:var(--label);letter-spacing:.02em;text-transform:uppercase;color:#6d6f74;pointer-events:none}
@media(hover:none){.tf-band-hint{display:none}}
@media(prefers-reduced-motion:reduce){.tf-band.is-colon{height:auto}.tf-band-stage{position:relative;height:min(100vh,860px)}}

/* 6. How a project runs: one step in focus. Desktop pins a card that shows the step being read. */
.tf-process3{margin-top:120px;border-top:1px solid var(--line);padding-top:40px}
.tfp-head{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px;align-items:start}
.tfp-head .tf-label{grid-column:1;padding-top:12px}
.tfp-head h2{grid-column:2/5;margin:0;font:500 clamp(34px,3.8vw,58px)/1.04 Teka,Basis,sans-serif;letter-spacing:-.04em;max-width:21ch;text-wrap:balance}
.tfp-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;margin-top:24px}
.tfp-stage{grid-column:1/7;position:sticky;top:max(96px,calc(50vh - min(18.75vw,250px)));align-self:start;margin-top:10vh}
.tfp-card{position:relative;aspect-ratio:4/3;max-height:500px;border-radius:6px;background:var(--card);box-shadow:0 0 0 1px var(--line),0 30px 60px -44px #18181B66;overflow:hidden}
.tfp-frame{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:translateY(14px) scale(.98);transition:opacity 500ms var(--ease-out),transform 700ms var(--ease-out)}
.tfp-frame.is-on{opacity:1;transform:none}
.tfp-frame svg{width:88%;height:auto;overflow:visible}
.tfp-count{position:absolute;left:24px;bottom:22px;display:flex;align-items:baseline;gap:8px}
.tfp-count b{font:500 44px/1 Teka,Basis,sans-serif;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.tfp-count span{font:var(--label);color:var(--muted)}
.tfp-bar{position:absolute;left:24px;right:24px;bottom:0;height:3px;background:var(--line)}
.tfp-bar span{display:block;height:100%;width:calc(var(--fill,0) * 100%);background:var(--accent)}
.tfp-steps{grid-column:8/13;list-style:none;margin:0;padding:10vh 0 14vh}
.tfp-step{min-height:64vh;display:flex;flex-direction:column;justify-content:center;opacity:.22;transition:opacity 500ms var(--ease-out)}
.tfp-step.is-active{opacity:1}
.tfp-n{margin:0 0 18px;font:var(--label);color:var(--accent)}
.tfp-n span{color:var(--muted)}
.tfp-step .tfp-glyph{display:none}
.tfp-step h3{margin:0 0 16px;font:500 clamp(28px,2.6vw,40px)/1.06 Teka,Basis,sans-serif;letter-spacing:-.035em;text-wrap:balance}
.tfp-what{margin:0 0 26px;font-size:17px;line-height:1.6;max-width:42ch}
.tfp-get{margin:0;padding-top:14px;border-top:1px solid var(--line);display:grid;grid-template-columns:84px 1fr;gap:12px;font-size:15px;line-height:1.5;max-width:46ch}
.tfp-get span{font:var(--label);color:var(--muted);padding-top:2px}
@media(prefers-reduced-motion:reduce){.tfp-frame{transition:none}.tfp-step{transition:none}}

/* Process scenes. Each loops while its step is in view; at rest they show a finished frame. */

.g text{font-feature-settings:"tnum"}
.g .ok-ic{transform-box:fill-box;transform-origin:center}
/* 1. Customers ask, one question at a time (dark block, dark dotted line). Then twentyfour answers each on the page, top to bottom (orange block, orange line, orange tick). 11s loop. */
.g-talk .b{transform-box:fill-box;transform-origin:50% 100%}
.g-talk .ql,.g-talk .al,.g-talk .t-ans{opacity:0}.g-talk .tick .ok-ic{transform:scale(0)}
.tf-motion .g-talk .b1{animation:tB1 11s var(--ease-out) infinite}.tf-motion .g-talk .b2{animation:tB2 11s var(--ease-out) infinite}
@keyframes tB1{0%{transform:none}4%{transform:none}6%{transform:translateY(-18px)}8%{transform:scaleY(.9)}9.5%{transform:none}14%{transform:none}16%{transform:translateY(-18px)}18%{transform:scaleY(.9)}19.5%{transform:none}24%{transform:none}26%{transform:translateY(-18px)}28%{transform:scaleY(.9)}29.5%{transform:none}34%{transform:none}36%{transform:translateY(-18px)}38%{transform:scaleY(.9)}39.5%{transform:none}100%{transform:none}}
@keyframes tB2{0%{transform:none}52%{transform:none}54%{transform:translateY(-18px)}56%{transform:scaleY(.9)}57.5%{transform:none}61%{transform:none}63%{transform:translateY(-18px)}65%{transform:scaleY(.9)}66.5%{transform:none}70%{transform:none}72%{transform:translateY(-18px)}74%{transform:scaleY(.9)}75.5%{transform:none}79%{transform:none}81%{transform:translateY(-18px)}83%{transform:scaleY(.9)}84.5%{transform:none}100%{transform:none}}
.tf-motion .g-talk .k1{animation:tK1 11s var(--ease-out) infinite}@keyframes tK1{0%,7%{opacity:0;transform:translateX(-24px)}11%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
.tf-motion .g-talk .q1{animation:tQ1 11s linear infinite}@keyframes tQ1{0%,6%{opacity:0}8%,46%{opacity:1}50%,100%{opacity:0}}
.tf-motion .g-talk .a1{animation:tA1 11s linear infinite}@keyframes tA1{0%,54%{opacity:0}56%,90%{opacity:1}94%,100%{opacity:0}}
.tf-motion .g-talk .t1 .ok-ic{animation:tT1 11s var(--ease-land) infinite}@keyframes tT1{0%,56%{transform:scale(0)}59%,92%{transform:scale(1)}97%,100%{transform:scale(0)}}
.tf-motion .g-talk .k2{animation:tK2 11s var(--ease-out) infinite}@keyframes tK2{0%,17%{opacity:0;transform:translateX(-24px)}21%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
.tf-motion .g-talk .q2{animation:tQ2 11s linear infinite}@keyframes tQ2{0%,16%{opacity:0}18%,46%{opacity:1}50%,100%{opacity:0}}
.tf-motion .g-talk .a2{animation:tA2 11s linear infinite}@keyframes tA2{0%,63%{opacity:0}65%,90%{opacity:1}94%,100%{opacity:0}}
.tf-motion .g-talk .t2 .ok-ic{animation:tT2 11s var(--ease-land) infinite}@keyframes tT2{0%,65%{transform:scale(0)}68%,92%{transform:scale(1)}97%,100%{transform:scale(0)}}
.tf-motion .g-talk .k3{animation:tK3 11s var(--ease-out) infinite}@keyframes tK3{0%,27%{opacity:0;transform:translateX(-24px)}31%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
.tf-motion .g-talk .q3{animation:tQ3 11s linear infinite}@keyframes tQ3{0%,26%{opacity:0}28%,46%{opacity:1}50%,100%{opacity:0}}
.tf-motion .g-talk .a3{animation:tA3 11s linear infinite}@keyframes tA3{0%,72%{opacity:0}74%,90%{opacity:1}94%,100%{opacity:0}}
.tf-motion .g-talk .t3 .ok-ic{animation:tT3 11s var(--ease-land) infinite}@keyframes tT3{0%,74%{transform:scale(0)}77%,92%{transform:scale(1)}97%,100%{transform:scale(0)}}
.tf-motion .g-talk .k4{animation:tK4 11s var(--ease-out) infinite}@keyframes tK4{0%,37%{opacity:0;transform:translateX(-24px)}41%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
.tf-motion .g-talk .q4{animation:tQ4 11s linear infinite}@keyframes tQ4{0%,36%{opacity:0}38%,46%{opacity:1}50%,100%{opacity:0}}
.tf-motion .g-talk .a4{animation:tA4 11s linear infinite}@keyframes tA4{0%,81%{opacity:0}83%,90%{opacity:1}94%,100%{opacity:0}}
.tf-motion .g-talk .t4 .ok-ic{animation:tT4 11s var(--ease-land) infinite}@keyframes tT4{0%,83%{transform:scale(0)}86%,92%{transform:scale(1)}97%,100%{transform:scale(0)}}
.tf-motion .g-talk .t-ask{animation:tAsk 11s linear infinite}.tf-motion .g-talk .t-ans{animation:tAns 11s linear infinite}
@keyframes tAsk{0%,48%{opacity:1}51%,97%{opacity:0}100%{opacity:1}}@keyframes tAns{0%,49%{opacity:0}52%,92%{opacity:1}96%,100%{opacity:0}}
/* 2. The page is written and laid out in the order it makes its case, revised once, then approved. */
.tf-motion .g-dir .sec,.tf-motion .g-dir .lab{animation:dIn 10s var(--ease-out) infinite}
.tf-motion .g-dir .s2,.tf-motion .g-dir .l2{animation-delay:.6s}.tf-motion .g-dir .s3,.tf-motion .g-dir .l3{animation-delay:1.2s}.tf-motion .g-dir .s4,.tf-motion .g-dir .l4{animation-delay:1.8s}
@keyframes dIn{0%,3%{opacity:0;transform:translateY(14px)}10%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
.tf-motion .g-dir .type1,.tf-motion .g-dir .type2{animation:dType 10s linear infinite}
.tf-motion .g-dir .type2{animation-delay:.3s}
@keyframes dType{0%,6%{clip-path:inset(0 100% 0 0)}14%,100%{clip-path:inset(0 0 0 0)}}
.g-dir .p2,.g-dir .p3{transition:none}
.tf-motion .g-dir .p3{animation:dP3 10s linear infinite}.tf-motion .g-dir .p2{animation:dP2 10s linear infinite}
@keyframes dP3{0%,52%{fill:#FFF6F2;stroke:#F46A43;stroke-width:1.6}56%,100%{fill:#FFFFFF;stroke:#DADCE0;stroke-width:1}}
@keyframes dP2{0%,52%{fill:#FFFFFF;stroke:#DADCE0;stroke-width:1}56%,100%{fill:#FFF6F2;stroke:#F46A43;stroke-width:1.6}}
.tf-motion .g-dir .pop{animation:dPop 10s var(--ease-inout) infinite}
@keyframes dPop{0%,50%{transform:none}57%,100%{transform:translateX(-53px)}}
.g-dir .rev{opacity:0}
.tf-motion .g-dir .rev{animation:dRev 10s var(--ease-out) infinite}
@keyframes dRev{0%,34%{opacity:0;transform:translateX(-10px)}40%,62%{opacity:1;transform:none}68%,100%{opacity:0}}
.g-dir .ok{transform-box:fill-box;transform-origin:center}
.tf-motion .g-dir .ok{animation:dOk 10s var(--ease-land) infinite}
@keyframes dOk{0%,68%{opacity:0;transform:scale(.6)}74%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
/* 3. Built into the theme, then one purchase inside the phone, then the orders arrive as notifications. 12s loop; each view is fully gone before the next returns. */
.tf-motion .g-build .row{animation:bRow 12s var(--ease-out) infinite}
.tf-motion .g-build .r1{animation-delay:.4s}.tf-motion .g-build .r2{animation-delay:.8s}.tf-motion .g-build .r3{animation-delay:1.2s}
@keyframes bRow{0%,2%{opacity:0;transform:translateX(-10px)}8%,90%{opacity:1;transform:none}94%,100%{opacity:0}}
.g-build .tk .ok-ic{transform:scale(0)}
.tf-motion .g-build .tk .ok-ic{animation:bTk 12s var(--ease-land) infinite}
@keyframes bTk{0%,12%{transform:scale(0)}17%,90%{transform:scale(1)}94%,100%{transform:scale(0)}}
.g-build .v2,.g-build .v3,.g-build .v4,.g-build .tap{opacity:0}
.g-build .tap,.g-build .v3{transform-box:fill-box;transform-origin:center}
.tf-motion .g-build .v1{animation:bV1 12s linear infinite}
@keyframes bV1{0%,36%{opacity:1}39%,96%{opacity:0}100%{opacity:1}}
.tf-motion .g-build .tap{animation:bTap 12s ease-out infinite}
@keyframes bTap{0%,32%{opacity:0;transform:scale(.4)}33.5%{opacity:.25;transform:scale(.7)}38%{opacity:0;transform:scale(2)}100%{opacity:0}}
.tf-motion .g-build .atcbg{animation:bAtc 12s linear infinite}
@keyframes bAtc{0%,33%{fill:#18181B}34%,39%{fill:#F46A43}40%,100%{fill:#18181B}}
.tf-motion .g-build .v2{animation:bV2 12s linear infinite}
@keyframes bV2{0%,39%{opacity:0;transform:translateX(14px)}42%,60%{opacity:1;transform:none}63%,100%{opacity:0;transform:none}}
.tf-motion .g-build .sw{animation:bSw 12s linear infinite}
@keyframes bSw{0%,47%{fill:#DADCE0}49%,100%{fill:#F46A43}}
.tf-motion .g-build .knob{animation:bKnob 12s var(--ease-out) infinite}
@keyframes bKnob{0%,47%{transform:none}50%,63%{transform:translateX(10px)}64%,100%{transform:none}}
.tf-motion .g-build .co{animation:bCo 12s linear infinite}
@keyframes bCo{0%,55%{fill:#18181B}56%,60%{fill:#F46A43}61%,100%{fill:#18181B}}
.tf-motion .g-build .v3{animation:bV3 12s var(--ease-out) infinite}
@keyframes bV3{0%,63%{opacity:0;transform:scale(.92)}66%,71%{opacity:1;transform:none}74%,100%{opacity:0;transform:scale(.96)}}
.tf-motion .g-build .v4{animation:bV4 12s linear infinite}
@keyframes bV4{0%,72%{opacity:0}75%,90%{opacity:1}94%,100%{opacity:0}}
.g-build .nt{opacity:0}
.tf-motion .g-build .nt{animation:bNt 12s var(--ease-out) infinite}
.tf-motion .g-build .n2{animation-delay:.42s}.tf-motion .g-build .n3{animation-delay:.84s}.tf-motion .g-build .n4{animation-delay:1.26s}
@keyframes bNt{0%,75%{opacity:0;transform:translateY(-14px)}78%,90%{opacity:1;transform:none}94%,100%{opacity:0}}
/* 4. Before, launch, after: the line is read and the next test is written. */
.g-rev .base,.g-rev .after{stroke-dasharray:1;stroke-dashoffset:0}
.tf-motion .g-rev .base{animation:rLine 10s var(--ease-inout) infinite}
.tf-motion .g-rev .after{animation:rLine2 10s var(--ease-inout) infinite}
@keyframes rLine{0%,4%{stroke-dashoffset:1}22%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes rLine2{0%,34%{stroke-dashoffset:1}58%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
.g-rev .endpt,.g-rev .lb2{transform-box:fill-box;transform-origin:center}
.tf-motion .g-rev .endpt{animation:rEnd 10s var(--ease-land) infinite}
@keyframes rEnd{0%,57%{transform:scale(0)}62%,94%{transform:scale(1)}100%{transform:scale(0)}}
.tf-motion .g-rev .lb2{animation:rMark2 10s var(--ease-out) infinite}
@keyframes rMark2{0%,58%{opacity:0}64%,94%{opacity:1}100%{opacity:0}}
.tf-motion .g-rev .mark{animation:rMark 10s var(--ease-out) infinite}
@keyframes rMark{0%,22%{opacity:0}28%,94%{opacity:1}100%{opacity:0}}
.tf-motion .g-rev .ghost{animation:rMark 10s var(--ease-out) infinite;animation-delay:.6s}
.tf-motion .g-rev .kpi{animation:rKpi 10s var(--ease-out) infinite}
@keyframes rKpi{0%,46%{opacity:0;transform:translateY(10px)}54%,94%{opacity:1;transform:none}100%{opacity:0}}
.tf-motion .g-rev .note{animation:rNote 10s var(--ease-out) infinite}
@keyframes rNote{0%,66%{opacity:0;transform:translateY(10px)}74%,94%{opacity:1;transform:none}100%{opacity:0}}

/* 7. Studio. */
.personal-chat{color:var(--ink)}

/* 8. Footer: much darker, a generated current, the colon fills from it on hover. */
.studio-footer.tf-footer{background:var(--night)}
.tf-footer{--tf-ink:#F5F6F7;--tf-muted:#8a8c91;--tf-rule:#ffffff14}
.tf-footer .tf-eyebrow{margin-bottom:26px}
.tf-grain{position:absolute;inset:0;z-index:-1;opacity:.05;mix-blend-mode:screen;pointer-events:none;background-size:160px 160px}
.tf-texture{z-index:-2!important;image-rendering:auto!important}
.tf-chat{display:inline-flex;align-items:center;gap:14px;margin-top:36px;color:#F5F6F7;text-decoration:none;font:500 20px/1 Teka,Basis,sans-serif;letter-spacing:-.02em}
.tf-option{font-family:Basis,Arial,sans-serif}
.tf-option .tf-n{font:var(--label)}
/* The colon never lifts or bends with the letters. On hover it empties, so the current shows inside it. */
.tf-fcolon path{transition:fill-opacity 500ms var(--ease-out),stroke-opacity 400ms ease-out,fill var(--t-base) var(--ease-out)}
@media(hover:hover) and (pointer:fine){
  .tf-footer.is-signed.is-drawing .tf-sign:hover .tf-word:not(.tf-under) .tf-fcolon path{fill-opacity:.06!important;fill:#F46A43!important;stroke:#F7A27E;stroke-opacity:.55!important;animation:none!important}
}
.tf-cursor{background:var(--accent);color:#18181B}
.footer-bottom{color:var(--tf-muted)}

/* 9. Enquiry and project window marks follow the identity. */
.sheet-brand{width:132px;height:22px;-webkit-mask-image:url('brand/logos/lockup-ink.svg');mask-image:url('brand/logos/lockup-ink.svg')}
.sheet-mark{display:none!important}
.window-mark{width:8px;height:18px;-webkit-mask-image:url('brand/logos/colon-ink.svg');mask-image:url('brand/logos/colon-ink.svg');background:var(--accent)}

/* 10. Smaller screens. */
@media(max-width:1100px){
  .tfp-head{grid-template-columns:1fr;row-gap:20px}
  .tfp-head .tf-label,.tfp-head h2{grid-column:1}
}
@media(max-width:900px){
  .tfp-body{display:block;margin-top:40px}
  .tfp-stage{display:none}
  .tfp-steps{padding:0}
  .tfp-step{min-height:0;padding:36px 0;border-top:1px solid var(--line);opacity:.32;transform:scale(.985);transform-origin:0 50%;transition:opacity 450ms var(--ease-out),transform 600ms var(--ease-out)}
  .tfp-step.is-active{opacity:1;transform:none}
  .tfp-step .tfp-glyph{display:grid;place-items:center;margin:0 0 24px;aspect-ratio:4/3;max-width:520px;border-radius:6px;background:var(--card);box-shadow:0 0 0 1px var(--line)}
  .tfp-step .tfp-glyph svg{width:92%;height:auto;overflow:visible}
}

@media(max-width:600px){
  .tf-work-heading{align-items:flex-start;flex-direction:column;gap:14px}
  .tf-filter{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none;padding-bottom:2px}
  .tf-filter::-webkit-scrollbar{display:none}
  .tf-filter button{flex:none;min-height:40px}
  .tf-band{margin-top:24px}
  .tf-band-copy{left:20px;right:20px;top:88px;translate:none;width:auto}
  .tf-band-copy h2{font-size:38px;margin-top:20px}
  .tf-band-copy>p:not(.tf-label){font-size:15px;margin-top:20px}
  .tf-band-link{font-size:18px;margin-top:28px}
  .tf-process3{margin-top:64px;padding-top:28px}
  .tfp-head h2{font-size:32px}
  .tfp-what{font-size:16px}
  .tf-faq{padding:72px 20px}
  .tf-faq-head h2{font-size:34px}
  .tf-q summary{font-size:19px}
  .tf-chat{font-size:18px;margin-top:28px}
}
@media(prefers-reduced-motion:reduce){
  .tf-colon{animation:none!important}
  .tfp-step{opacity:1}
}

/* Round three */
.tf-colon-ico{flex:none;display:inline-block;width:5px;height:12.2px;margin-right:10px;vertical-align:-1px;border-radius:.6px;background:linear-gradient(var(--accent) 0 41%,transparent 41% 59%,var(--accent) 59%)}
/* Filters are off by default; the review panel turns them on. */
html:not(.tf-filters-on) .tf-filter{display:none}
html.tf-filters-on .tf-explore{display:none}
.tf-explore{font-size:12px;color:var(--muted)}
/* Spectral light band. */
.tf-band.is-light .tf-band-stage{position:relative;height:auto;min-height:min(92vh,880px)}
.tf-band.is-light .tf-band-canvas{cursor:default}
.tf-band.no-gl .tf-band-stage{background:url('brand/art/spectral-blur.webp') 70% 50%/cover no-repeat}
/* FAQ. */
.tf-faq{padding:120px 32px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px;row-gap:48px}
.tf-faq-head{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px}
.tf-faq-head .tf-label{grid-column:1;padding-top:12px}
.tf-faq-head h2{grid-column:2/5;margin:0;font:500 clamp(34px,3.8vw,58px)/1.04 Teka,Basis,sans-serif;letter-spacing:-.04em}
.tf-faq-head p{grid-column:2/5;margin:16px 0 0;color:var(--muted);font-size:15px}
.tf-faq-list{grid-column:2/5;border-bottom:1px solid var(--line)}
.tf-q{border-top:1px solid var(--line)}
.tf-q summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;cursor:pointer;font:500 22px/1.25 Teka,Basis,sans-serif;letter-spacing:-.02em}
.tf-q summary::-webkit-details-marker{display:none}
.tf-q summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.tf-q summary i{position:relative;flex:none;width:14px;height:14px}
.tf-q summary i::before,.tf-q summary i::after{content:"";position:absolute;left:0;top:6.5px;width:14px;height:1.5px;background:currentColor;transition:transform var(--t-base) var(--ease-out)}
.tf-q summary i::after{transform:rotate(90deg)}
.tf-q[open] summary i::after{transform:rotate(0)}
.tf-q[open] summary i::before{background:var(--accent)}
.tf-a{padding:0 0 26px}
.tf-a p{margin:0;max-width:62ch;font-size:16px;line-height:1.6;color:var(--muted)}
.tf-q[open] .tf-a{animation:tfOpen 420ms var(--ease-out)}
@keyframes tfOpen{from{opacity:0;transform:translateY(-6px)}}
@media(max-width:900px){.tf-faq{grid-template-columns:1fr}.tf-faq-head{grid-template-columns:1fr;row-gap:16px}.tf-faq-head .tf-label,.tf-faq-head h2,.tf-faq-head p,.tf-faq-list{grid-column:1}}
.tf-q[open]>summary>span{transform:none}
.tfp-head .tf-nw,.tf-faq-head .tf-nw,.tf-band-copy .tf-nw{color:inherit}

/* ---------- Round four ---------- */
/* Non-logo colons: monotone, and the top block hops onto the bottom one now and then. */
.tf-colon-ico{position:relative;background:none!important;width:5px;height:12.2px;overflow:visible}
.tf-colon-ico::before,.tf-colon-ico::after{content:"";position:absolute;left:0;width:5px;height:5px;border-radius:.6px;background:currentColor}
.tf-colon-ico::before{top:0}.tf-colon-ico::after{bottom:0}
.tf-label .tf-colon-ico,.studio-eyebrow .tf-colon-ico{color:var(--ink)}
.tf-label-dark .tf-colon-ico{color:#F5F6F7}
.tf-motion .tf-colon-ico::before{animation:tfHop 5.2s cubic-bezier(.3,0,.2,1) infinite;animation-delay:var(--hop-delay,0s)}
.tf-motion .tf-colon-ico::after{transform-origin:50% 100%;animation:tfLand 5.2s ease-out infinite;animation-delay:var(--hop-delay,0s)}
@keyframes tfHop{0%,72%,100%{transform:none}78%{transform:translateY(-5px)}84%{transform:translateY(3.6px) scaleY(.9)}88%{transform:translateY(3.2px)}93%{transform:none}}
@keyframes tfLand{0%,82%,100%{transform:none}85%{transform:scaleY(.78)}89%{transform:none}}
/* Project window mark: smaller, Ink. */
.window-mark{width:6px!important;height:14px!important;background:currentColor!important}
/* Selected work: grid / list. */
.tf-view{display:flex;gap:4px}
.tf-view button{min-height:32px;padding:0 12px;border:1px solid transparent;border-radius:16px;background:transparent;color:var(--muted);font:13px/1 Basis,Arial,sans-serif;cursor:pointer;transition:color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out)}
.tf-view button:hover{color:var(--ink)}
.tf-view button[aria-pressed="true"]{color:var(--ink);border-color:var(--line)}
.tf-view button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
html.tf-filters-on .tf-view{display:none}
/* Project images: full-bleed with the identity's small radius. The framed grey version is a review-panel option. */
html:not(.tf-framed) .tf-work .portfolio:not(.is-list) .project-art{padding:0!important;border-radius:6px;overflow:hidden}
html:not(.tf-framed) .tf-work .portfolio:not(.is-list) .project-art>img{height:100%!important;object-fit:cover;transform-origin:50% 50%}
html:not(.tf-framed) .tf-work .portfolio .project-art>img{transition:transform 700ms var(--ease-out)!important}
@media(hover:hover) and (pointer:fine){html:not(.tf-framed) .tf-work .project:hover .project-art>img{transform:scale(1.04)}}
.tf-work .portfolio.is-list .project-art{border-radius:4px;overflow:hidden}
/* Band: the four brand inputs ride the ribbons into one point. */
.tf-band-tags{position:absolute;inset:0;pointer-events:none;z-index:1}
.tf-band-tags>*{position:absolute;left:0;top:0;font:var(--label);letter-spacing:.02em;text-transform:uppercase;color:#cfd1d5;white-space:nowrap;transform:translate3d(var(--x,0),var(--y,0),0) translate(0,-50%);opacity:var(--o,0);transition:opacity 400ms var(--ease-out)}
.tf-band-tags b{font-weight:400;color:#18181B;background:#F5F6F7;padding:5px 8px 4px;border-radius:2px;transform:translate3d(var(--x,0),var(--y,0),0) translate(-50%,-160%)}
@media(max-width:700px){.tf-band-tags span{display:none}}
/* Process card: counter sits above the card so it never covers a scene. */
.tfp-card{overflow:visible}
.tfp-count{left:0;bottom:auto;top:-58px}
.tfp-bar{left:0;right:0;border-radius:0 0 6px 6px;overflow:hidden}
.tfp-frame{border-radius:6px;overflow:hidden}
.tfp-sub{grid-column:2/5;margin:18px 0 0;color:var(--muted);font-size:15px}
/* FAQ on mobile: tighter. */
@media(max-width:600px){
  .tf-faq{padding:56px 20px 64px;row-gap:28px}
  .tf-faq-head{row-gap:10px}
  .tf-faq-head h2{font-size:32px}
  .tf-faq-head p{margin-top:4px}
  .tf-q summary{padding:17px 0;font-size:18px;gap:16px}
  .tf-a{padding-bottom:20px}
  .tf-a p{font-size:15px}
  .tfp-sub{grid-column:1}
}
@media(max-width:1100px){.tfp-sub{grid-column:1}}
@media(prefers-reduced-motion:reduce){.tf-colon-ico::before,.tf-colon-ico::after{animation:none!important}}

/* Footer: one screen, engineered to the four-column grid. Top: the invitation and the three ways in.
   Middle: the wordmark, which the field is generated from. Bottom: one line of colophon. */
.studio-footer.tf-footer{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:#0A0A0B}
.tf-footer .tf-grain{display:none}
.tf-footer .tf-inner{flex:1;display:flex;flex-direction:column;padding:clamp(56px,9vh,104px) 32px 0}
.tf-footer .tf-top{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px;align-items:start}
.tf-footer .tf-top>.tf-copy{grid-column:1/3}
.tf-footer .tf-begin{grid-column:3/5;padding-top:0}
.tf-footer .tf-headline{font-size:clamp(36px,4vw,60px);max-width:13ch}
.tf-footer .tf-sign{margin:auto 0 clamp(20px,4vh,44px);padding-top:clamp(28px,5vh,56px)}
.tf-footer .footer-colophon{position:relative;z-index:1;background:#0A0A0B;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px;align-items:center;padding:18px 32px 22px;border-top:1px solid #ffffff14}
.tf-footer .footer-links,.tf-footer .footer-bottom{display:contents}
.tf-footer .footer-bottom>span{grid-column:1;grid-row:1}
.tf-footer .footer-links>a{grid-column:2;grid-row:1;font-size:13px}
.tf-footer .footer-bottom>nav{grid-column:3;grid-row:1;display:flex;gap:20px}
.tf-footer .footer-social{grid-column:4;grid-row:1;justify-self:end;display:flex;gap:14px}
.tf-footer .footer-colophon a{color:#cfd1d5}
.tf-footer .footer-colophon a:hover{color:#F5F6F7}
.tf-footer.no-gl{background:#0A0A0B}
/* Hover: letters stay Frost and still; the colon empties and the field fills it with spectral light. */
@media(hover:hover) and (pointer:fine){
  .tf-footer.is-signed .tf-sign:hover .tf-l{transform:none!important}
  .tf-footer.is-signed.is-drawing .tf-sign:hover .tf-word:not(.tf-under) .tf-l path{fill:#F5F6F7!important;fill-opacity:1!important;animation:none!important}
  .tf-footer.is-signed.is-drawing .tf-sign:hover .tf-word:not(.tf-under) .tf-fcolon path{fill-opacity:0!important;stroke:#F5F6F7;stroke-opacity:.35!important;animation:none!important;transition:fill-opacity 600ms var(--ease-out)}
}
@media(max-width:900px){
  .tf-footer .tf-top{grid-template-columns:1fr;row-gap:36px}
  .tf-footer .tf-top>.tf-copy,.tf-footer .tf-begin{grid-column:1}
  .tf-footer .footer-colophon{grid-template-columns:1fr 1fr;row-gap:12px}
  .tf-footer .footer-links>a{grid-column:1/-1;grid-row:1}
  .tf-footer .footer-bottom>span{grid-column:1;grid-row:3}
  .tf-footer .footer-bottom>nav{grid-column:1/-1;grid-row:2}
  .tf-footer .footer-social{grid-column:2;grid-row:3}
}
@media(max-width:600px){
  .tf-footer .tf-inner{padding:64px 20px 0}
  .tf-footer .tf-headline{font-size:34px}
  .tf-footer .tf-option{min-height:52px;font-size:17px}
  .tf-footer .footer-colophon{padding:16px 20px 80px}
}
.tf-band-tags span{background:#0A0A0Bb3;padding:4px 7px 3px;border-radius:2px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@media(max-width:700px){.tf-band-tags{display:none}}
@media(max-width:600px){
  .tf-footer .tf-inner{padding:44px 20px 0}
  .tf-footer .tf-headline{font-size:30px}
  .tf-footer .tf-chat{margin-top:20px}
  .tf-footer .tf-top{row-gap:24px}
  .tf-footer .tf-eyebrow{margin-bottom:16px}
  .tf-footer .tf-option{min-height:46px;font-size:16px}
  .tf-footer .tf-sign{padding-top:20px;margin-bottom:18px}
  .tf-footer .footer-colophon{padding:14px 20px 72px;row-gap:6px}
  .tf-footer .footer-bottom>nav{grid-column:1;grid-row:2;gap:14px}
  .tf-footer .footer-social{grid-column:2;grid-row:2}
  .tf-footer .footer-bottom>span{grid-column:1/-1;grid-row:3}
  .tf-footer .footer-bottom a{min-height:36px}
}
.tf-footer .footer-bottom nav a{white-space:nowrap}

/* ---------- Round five ---------- */
/* Grid / List: quiet text control, Interference, right-aligned everywhere. */
.tf-view{gap:0;align-items:center;font:var(--label);letter-spacing:.02em;text-transform:uppercase}
.tf-view button{min-height:28px;padding:0 2px;border:0!important;border-radius:0;font:inherit;color:var(--muted);background:none}
.tf-view button[aria-pressed="true"]{color:var(--ink)}
.tf-view button+button::before{content:"/";margin:0 6px 0 4px;color:var(--muted)}
@media(max-width:600px){.tf-work-heading{flex-direction:row!important;align-items:center!important;justify-content:space-between}}
/* Project window colon: the height of the text beside it. */
.window-mark{width:4px!important;height:9px!important}
/* Colon moves: the top block hops, the pair swaps with a half turn, and now and then the blocks slide apart and back. */
.tf-motion .tf-colon-ico{animation:tfSwap 15.6s cubic-bezier(.6,0,.2,1) infinite;animation-delay:var(--hop-delay,0s)}
.tf-motion .tf-colon-ico::before{animation:tfHop2 15.6s cubic-bezier(.3,0,.2,1) infinite;animation-delay:var(--hop-delay,0s)}
.tf-motion .tf-colon-ico::after{animation:tfLand2 15.6s ease-out infinite;animation-delay:var(--hop-delay,0s)}
@keyframes tfSwap{0%,40%{transform:none}46%,72%{transform:rotate(180deg)}78%,100%{transform:rotate(360deg)}}
@keyframes tfHop2{0%,22%,100%{transform:none}24%{transform:translateY(-5px)}26%{transform:translateY(3.6px) scaleY(.9)}27.5%{transform:translateY(3.2px)}29%{transform:none}86%{transform:none}88%{transform:translateY(-2.5px)}90%,100%{transform:none}}
@keyframes tfLand2{0%,25.5%,100%{transform:none}26.5%{transform:scaleY(.78)}28%{transform:none}86%{transform:none}88%{transform:translateY(2.5px)}90%,100%{transform:none}}

/* Band: copy on the left, a real brand image resolving from screen dots into the buying experience. */
.tf-band{background:var(--band)}
.tf-band .tf-band-stage,.tf-band-tags{display:none}
.tf-band-inner{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;align-items:center;padding:clamp(88px,12vh,140px) 32px;min-height:min(92vh,900px)}
.tf-band .tf-band-copy{position:static;translate:none;width:auto;grid-column:1/7;opacity:1!important;transform:none!important;visibility:visible!important}
.tf-band-figure{grid-column:8/13;margin:0}
.tf-band-frame{position:relative;aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:#141416}
.tf-band-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
.tf-band-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.tf-band.no-canvas .tf-band-fallback{opacity:1}
.tf-band-figure figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:12px;font:var(--label);letter-spacing:.02em;text-transform:uppercase;color:#8f9196}
.tf-buy{position:absolute;left:16px;right:16px;bottom:16px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 16px;padding:14px 14px 14px 16px;border-radius:6px;background:#F5F6F7;color:#18181B;opacity:0;transform:translateY(16px);transition:opacity 600ms var(--ease-out),transform 800ms var(--ease-out);pointer-events:none}
.tf-buy.is-in{opacity:1;transform:none}
.tf-buy-name{font:500 18px/1.1 Teka,Basis,sans-serif;letter-spacing:-.02em}
.tf-buy-sub{grid-column:1;font-size:12px;color:#62626A}
.tf-buy-btn{grid-column:2;grid-row:1/3;padding:11px 16px;border-radius:4px;background:#18181B;color:#F5F6F7;font-size:13px}
@media(max-width:900px){.tf-band-inner{grid-template-columns:1fr;row-gap:48px}.tf-band .tf-band-copy,.tf-band-figure{grid-column:1}.tf-band-figure{max-width:520px}}
@media(max-width:600px){.tf-band-inner{padding:72px 20px 64px}}

/* Studio: a belief line and four things off the clock. */
.tf-belief{margin:28px 0 0!important;padding-top:18px;border-top:1px solid var(--line);font:500 22px/1.25 Teka,Basis,sans-serif!important;letter-spacing:-.02em;max-width:24ch}
.tf-offclock{margin:28px 0 24px;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;font-size:13px;line-height:1.45}
.tf-offclock div{display:flex;flex-direction:column;gap:3px;padding:0;border:0}
.tf-offclock dt{font:var(--label);letter-spacing:.02em;text-transform:uppercase;color:var(--muted);padding:0;border:0}
.tf-offclock dd{margin:0;padding:0;border:0;color:var(--ink)}
@media(max-width:600px){.tf-offclock{grid-template-columns:1fr}}
.studio-personal-heading h2{max-width:16ch;text-wrap:balance}

/* Footer: the faded under-trace sits exactly under the live one; navigation and contact in their own boxes. */
.tf-footer .tf-sign{padding-top:0!important;margin-top:auto}
.tf-footer .tf-top{margin-bottom:clamp(28px,5vh,56px)}
.tf-footer .footer-colophon{grid-template-columns:1fr auto auto;column-gap:16px}
.tf-footer .footer-bottom>span{grid-column:1;grid-row:1}
.tf-footer .footer-bottom>nav{grid-column:2;grid-row:1;display:flex;gap:0;border:1px solid #ffffff26;border-radius:3px}
.tf-footer .footer-bottom>nav a{min-height:36px!important;padding:0 14px;border-left:1px solid #ffffff1a}
.tf-footer .footer-bottom>nav a:first-child{border-left:0}
.tf-footer .tf-contact{grid-column:3;grid-row:1;display:flex;align-items:center;border:1px solid #ffffff26;border-radius:3px}
.tf-footer .tf-contact>a,.tf-footer .tf-contact .footer-social a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-left:1px solid #ffffff1a;color:#cfd1d5}
.tf-footer .tf-contact>a:first-child{border-left:0;gap:10px;font-size:13px}
.tf-footer .tf-contact .footer-social{display:flex;gap:0}
.tf-footer .tf-contact svg{width:16px;height:16px}
.tf-footer .footer-links>a,.tf-footer .footer-social{grid-column:auto;grid-row:auto;justify-self:auto}
.tf-footer .footer-colophon a:hover{background:#ffffff0d}
@media(max-width:900px){
  .tf-footer .footer-colophon{grid-template-columns:1fr;row-gap:10px}
  .tf-footer .footer-bottom>span{grid-row:3}
  .tf-footer .footer-bottom>nav{grid-column:1;grid-row:2;justify-self:start}
  .tf-footer .tf-contact{grid-column:1;grid-row:1;justify-self:start}
}

/* ---------- Round six ---------- */
/* Grid / List: smaller and quieter. */
.tf-view{font-size:9.5px!important}
.tf-view button{color:#b4b5bb;min-height:24px}
.tf-view button[aria-pressed="true"]{color:#7d7e86}
.tf-view button+button::before{color:#c9cacf}
body.dark .tf-view button{color:#6b6c73}body.dark .tf-view button[aria-pressed="true"]{color:#a9aab1}
/* Studio: short version, then the yap version on request. */
.tf-short{font-size:17px!important;line-height:1.55!important;max-width:42ch}
.tf-yap p{margin:0 0 16px}
.tf-yap-btn{display:inline-flex;align-items:center;gap:10px;margin:4px 0 0;padding:8px 0;border:0;background:none;color:var(--ink);font:var(--label);letter-spacing:.02em;text-transform:uppercase;cursor:pointer;border-bottom:1px solid var(--line)}
.tf-yap-btn i{font-style:normal;color:var(--accent);transition:transform var(--t-base) var(--ease-out)}
.tf-yap-btn[aria-expanded="true"] i{transform:rotate(45deg)}
.tf-yap-btn:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.tf-lfc{display:inline-block;height:1.15em;width:auto;vertical-align:-.22em;margin-left:4px}
/* Questions: ask your own. Looks like one more question, greyed until you type. */
.tf-ask{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;border-top:1px solid var(--line);padding:6px 0}
.tf-ask-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tf-ask input{width:100%;min-height:52px;border:0;background:transparent;padding:10px 0;font:500 22px/1.25 Teka,Basis,sans-serif;letter-spacing:-.02em;color:var(--ink);outline:none}
.tf-ask input::placeholder{color:#b9bac0}
.tf-ask input:focus::placeholder{color:#d2d3d7}
.tf-ask:focus-within{border-top-color:var(--ink)}
.tf-ask-send{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 16px;border:0;border-radius:19px;background:var(--ink);color:var(--paper);font:13px/1 Basis,Arial,sans-serif;cursor:pointer}
.tf-ask-send:hover{background:var(--accent);color:#18181B}
.tf-ask-status{grid-column:1/-1;margin:0;font-size:13px;color:var(--muted)}
.tf-ask-status:empty{display:none}
@media(max-width:600px){.tf-ask input{font-size:18px}}
/* Band image: no buy box now; the fresco carries the idea. */
.tf-band-frame{aspect-ratio:4/5}
/* Footer: both boxes the same height; bigger icons on mobile. */
.tf-footer .footer-bottom>nav,.tf-footer .tf-contact{height:40px;align-items:stretch}
.tf-footer .footer-bottom>nav a,.tf-footer .tf-contact>a,.tf-footer .tf-contact .footer-social a{min-height:0!important;height:100%;display:inline-flex;align-items:center}
.tf-footer .tf-contact .footer-social{align-items:stretch}
@media(max-width:600px){
  .tf-footer .tf-contact .footer-social a{padding:0 16px}
  .tf-footer .tf-contact svg{width:20px;height:20px}
  .tf-footer .footer-bottom>nav,.tf-footer .tf-contact{height:44px}
}
@media(hover:hover) and (pointer:fine){
  .tf-footer.is-signed.is-drawing .tf-sign:hover .tf-word:not(.tf-under) .tf-fcolon path{fill:#F46A43!important;fill-opacity:1!important;stroke-opacity:0!important;transition:fill 500ms var(--ease-out)}
}
.tf-footer .footer-colophon{background:#0A0A0B}

/* ---------- DAYMARK case study, rebuilt ---------- */
.cs-ch{display:grid!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}
.cs-ch .chapter-copy p{max-width:44ch}
.cs-fig,.cs-pair,.cs-pack,.cs-shot{margin:0;min-width:0}
.cs-wall{width:100%;height:auto;display:block}
.cs-fig figcaption,.cs-pair figcaption{margin-top:12px;font:var(--label);letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.cw-g{transition:opacity 700ms var(--ease-out)}
.cw-us{transform-box:fill-box;transform-origin:50% 100%}
.tf-motion .cs-problem.is-in .cw-g{animation:cwDim 900ms var(--ease-out) both;animation-delay:calc(300ms + var(--d) * 70ms)}
.tf-motion .cs-problem.is-in .cw-us{animation:cwRise 900ms var(--ease-land) 800ms both}
@keyframes cwDim{to{opacity:.35}}
@keyframes cwRise{0%{transform:none}100%{transform:translateY(-14px)}}
.cs-words{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
.cs-words span{display:block;font:var(--label);letter-spacing:.02em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.cs-words p{margin:0!important;font:500 17px/1.4 Teka,Basis,sans-serif!important;letter-spacing:-.01em}
.cs-words s{color:var(--muted);text-decoration-color:var(--accent);text-decoration-thickness:1.5px}
.cs-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.cs-pair img{width:100%;aspect-ratio:4/5!important;object-fit:cover;border-radius:6px;max-height:none!important}
.cs-pair img:last-of-type{margin-bottom:48px}
.cs-pair figcaption{grid-column:1/-1}
.cs-swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:26px 0 0}
.cs-swatches span{display:flex;flex-direction:column;gap:3px;font-size:12px}
.cs-swatches i{display:block;aspect-ratio:1.3;border-radius:4px;background:var(--c);box-shadow:inset 0 0 0 1px #18181B14;margin-bottom:6px}
.cs-swatches small{font:var(--label);font-size:9.5px;color:var(--muted)}
.cs-pack-frame,.cs-shot-frame{position:relative;border-radius:6px;overflow:hidden;background:var(--surface)}
.cs-pack-frame img{display:block;width:100%;height:auto!important;max-height:none!important;aspect-ratio:3/2;object-fit:cover}
.cs-pins{list-style:none;margin:0;padding:0}
.cs-pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%)}
.cs-pin button{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:0;background:#F5F6F7;color:#18181B;font:var(--label);cursor:pointer;box-shadow:0 0 0 0 #F46A4366;animation:csPulse 2.6s ease-out infinite}
.cs-pin.is-open button,.cs-pin button:hover{background:var(--accent)}
@keyframes csPulse{0%{box-shadow:0 0 0 0 #F5F6F799}80%,100%{box-shadow:0 0 0 12px #F5F6F700}}
.cs-pin span{position:absolute;left:50%;bottom:calc(100% + 10px);width:max-content;max-width:220px;padding:10px 12px;border-radius:6px;background:#18181B;color:#F5F6F7;font-size:12.5px;line-height:1.4;opacity:0;transform:translate(-50%,6px);pointer-events:none;transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out)}
.cs-pin.is-open span,.cs-pin button:hover+span,.cs-pin button:focus-visible+span{opacity:1;transform:translate(-50%,0)}
.cs-pin:nth-child(4) span{left:auto;right:-10px;transform:translate(0,6px)}
.cs-pin:nth-child(4).is-open span,.cs-pin:nth-child(4) button:hover+span{transform:none}
.cs-decs{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--line)}
.tf-dec{all:unset;box-sizing:border-box;display:grid;grid-template-columns:34px 1fr;gap:10px;width:100%;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer;opacity:.45;transition:opacity var(--t-base) var(--ease-out)}
.tf-dec b{font:var(--label);color:var(--muted);padding-top:3px}
.tf-dec strong{display:block;font:500 17px/1.25 Teka,Basis,sans-serif;letter-spacing:-.015em;margin-bottom:2px}
.tf-dec span{font-size:13.5px;line-height:1.5;color:var(--ink)}
.tf-dec[aria-pressed="true"]{opacity:1}
.tf-dec[aria-pressed="true"] b{color:var(--accent)}
.tf-dec:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.cs-shot-frame{aspect-ratio:900/1100;max-height:calc(var(--window-height,100vh) - 140px);margin-left:auto;box-shadow:0 0 0 1px var(--line),0 30px 60px -40px #18181B55}
.cs-shot-frame img{position:absolute;inset:0;width:100%;height:auto!important;max-height:none!important;object-fit:cover;object-position:top}
.cs-box{position:absolute;left:55%;right:1.5%;border:2px solid var(--accent);border-radius:6px;background:#F46A4314;opacity:0;transform:scale(.98);transition:opacity 350ms var(--ease-out),transform 450ms var(--ease-out);pointer-events:none}
.cs-box b{position:absolute;left:-14px;top:-14px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#18181B;font:var(--label)}
.cs-box.is-on{opacity:1;transform:none}
.cs-box[data-i="0"]{left:56%;right:8%}
@media(max-width:760px){
  .cs-ch{grid-template-columns:1fr}
  .cs-pair img:last-of-type{margin-bottom:24px}
  .cs-swatches{grid-template-columns:repeat(4,1fr);gap:6px}
  .cs-pin span{max-width:170px;font-size:11.5px}
  .cs-shot-frame{max-height:none;width:100%}
  .cs-decs{margin-top:16px}.tf-dec strong{font-size:15px}.tf-dec span{font-size:12.5px}
}
/* round 6 fix: social links had a fixed 44px width from style.css, which squeezed the icons once padded */
.tf-footer .tf-contact .footer-social a{width:auto}
.tf-footer .tf-contact svg{flex:none}

/* round 7: ask form, email step */
.tf-ask-more{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;border-top:1px dashed var(--line);padding-top:6px;animation:tfAskIn .35s cubic-bezier(.2,.7,.2,1)}
.tf-ask-more[hidden]{display:none}
.tf-ask .tf-ask-more input{font-size:16px;font-family:Basis,Arial,sans-serif;min-height:44px;letter-spacing:0}
.tf-ask-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.tf-ask-send[disabled]{opacity:.5;cursor:wait}
@keyframes tfAskIn{from{opacity:0;transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.tf-ask-more{animation:none}}

/* ---------- Round nine: Luma, under wraps (locked) and the case study (unlocked) ---------- */
.lm-wrap{position:relative;height:100%;min-height:420px;border-radius:6px;overflow:hidden;background:#d9cfe0;isolation:isolate;touch-action:none}
.lm-wrap-under{position:absolute;inset:-60px;background-size:cover;background-position:center;filter:blur(38px) saturate(1.7) brightness(1.05);transform:scale(1.1);animation:lmDrift 14s ease-in-out infinite alternate}
@keyframes lmDrift{to{transform:scale(1.18) translate(2%,-2%)}}
.lm-paper{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:32px;text-align:center;color:#2b2430;
  background:
    radial-gradient(120% 80% at 20% 10%,#fffaf2 0,transparent 60%),
    repeating-linear-gradient(115deg,#0000 0 46px,#00000006 46px 47px,#0000 47px 120px),
    repeating-linear-gradient(28deg,#0000 0 70px,#ffffff30 70px 72px,#0000 72px 160px),
    #F3ECE3;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--p)),calc(100% - var(--p)) 100%,0 100%);transition:clip-path .45s cubic-bezier(.2,.7,.2,1)}
.lm-paper:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .4 0 0 0 0 .35 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.lm-flap{position:absolute;right:0;bottom:0;width:var(--p);height:var(--p);z-index:2;pointer-events:none;background:linear-gradient(135deg,#0000 calc(50% - .5px),#d8cdbf 50%,#efe6da 72%,#e6dccf);box-shadow:-6px -6px 14px -6px #2b24302e;transition:width .45s cubic-bezier(.2,.7,.2,1),height .45s cubic-bezier(.2,.7,.2,1);clip-path:polygon(0 0,100% 0,0 100%);transform-origin:0 0}
.lm-wrap.is-dragging .lm-paper,.lm-wrap.is-dragging .lm-flap{transition:none}
.lm-wrap.is-snapping .lm-paper,.lm-wrap.is-snapping .lm-flap{transition-duration:.65s;transition-timing-function:cubic-bezier(.34,1.56,.64,1)}
.lm-corner{position:absolute;right:0;bottom:0;z-index:3;width:110px;height:110px;border:0;background:transparent;cursor:grab;clip-path:polygon(100% 0,100% 100%,0 100%)}
.lm-corner:active{cursor:grabbing}
.lm-corner:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.lm-seal{position:relative;width:118px;height:118px;margin-bottom:8px;animation:lmSpin 30s linear infinite}
.lm-seal svg{width:100%;height:100%;overflow:visible}
.lm-seal text{font:9.5px/1 Interference,monospace;letter-spacing:.14em;fill:#6b5a72}
.lm-lock{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:#C9A9C7;box-shadow:inset 0 0 0 1px #2b243014,0 6px 16px -8px #2b243066;animation:lmSpin 30s linear infinite reverse;display:grid;place-items:center;color:#2b2430}
.lm-lock svg{width:20px;height:20px;display:block}
@keyframes lmSpin{to{transform:rotate(360deg)}}
.lm-wrap-k{margin:0;font:var(--label);letter-spacing:.06em;text-transform:uppercase;color:#7a6b80}
.lm-wrap-h{margin:0;font:500 clamp(30px,4vw,46px)/1 Teka,Basis,sans-serif;letter-spacing:-.035em}
.lm-wrap-s{margin:0;max-width:34ch;font-size:14px;line-height:1.45;color:#5d5262}
.lm-wrap-toast{position:absolute;left:50%;bottom:22px;z-index:4;margin:0;padding:9px 14px;border-radius:20px;background:#2b2430;color:#F3ECE3;font-size:13px;white-space:nowrap;opacity:0;transform:translate(-50%,8px);transition:opacity .3s,transform .3s;pointer-events:none}
.lm-wrap.has-toast .lm-wrap-toast{opacity:1;transform:translate(-50%,0)}
.lm-wrap:not(.has-toast):hover .lm-flap{animation:lmNudge 2.4s ease-in-out infinite}
@keyframes lmNudge{50%{transform:scale(1.08)}}
dialog.is-wrapped .project-gallery{min-height:0}
.lm-locked .chapter-copy{max-width:620px}
.lm-contents{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--line);counter-reset:none}
.lm-contents li{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid var(--line)}
.lm-contents b{font:var(--label);color:var(--muted)}
.lm-contents span{font:500 18px/1.2 Teka,Basis,sans-serif;letter-spacing:-.01em;color:transparent;text-shadow:0 0 9px #18181B88;user-select:none}
.lm-contents li:first-child span,.lm-contents li:nth-child(2) span{color:var(--ink);text-shadow:none}
.lm-contents i{display:block;width:15px;height:15px;color:var(--muted)}
.lm-contents i svg{display:block;width:100%;height:100%}
.tf-wraps{position:absolute;left:10px;top:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:14px;background:#F3ECE3;color:#2b2430;font:var(--label);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase}
.tf-wraps:before{content:"";width:7px;height:7px;border-radius:50%;background:#C9A9C7;box-shadow:0 0 0 0 #C9A9C7aa;animation:csPulse 2.6s ease-out infinite}
/* unlocked case study */
.lm-frame{border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px var(--line),0 30px 60px -40px #18181B55;background:#F3ECE3}
.lm-frame img{display:block;width:100%;height:auto!important;max-height:none!important}
.lm-quote{margin:26px 0 0;padding:16px 0 0;border-top:1px solid var(--line);font:500 20px/1.3 Teka,Basis,sans-serif;letter-spacing:-.015em}
.lm-quote cite{display:block;margin-top:8px;font:var(--label);font-style:normal;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.lm-switch{display:flex;gap:8px;margin-top:24px;flex-wrap:wrap}
.lm-switch button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border:1px solid var(--line);border-radius:20px;background:transparent;color:var(--ink);font:var(--label);letter-spacing:.06em;cursor:pointer}
.lm-switch i{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px #18181B22}
.lm-switch button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.lm-cards{position:relative}
.lm-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:6px;overflow:hidden;background:var(--c);color:var(--t);animation:lmCard .5s cubic-bezier(.2,.7,.2,1)}
.lm-card[hidden]{display:none}
.lm-card img{width:100%;height:100%;aspect-ratio:2/3;object-fit:cover;max-height:none!important}
.lm-card>div{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:26px 24px}
.lm-card small{font:var(--label);letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.lm-card strong{font:500 clamp(24px,2.6vw,34px)/1.05 Teka,Basis,sans-serif;letter-spacing:-.03em}
.lm-card p{margin:0;font-size:14px;line-height:1.45}
.lm-card .lm-mg{padding-top:10px;border-top:1px solid currentColor;font:var(--label);letter-spacing:.04em;opacity:.85}
@keyframes lmCard{from{opacity:0;transform:translateY(8px)}}
.lm-wide{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr)!important}
.lm-wide2{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)!important}
.lm-shot{aspect-ratio:16/10!important;max-height:none!important;width:100%}
.lm-shot img{height:100%!important;object-fit:cover}
.lm-pins .cs-pack-frame img{aspect-ratio:auto!important}
.lm-duo{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:14px;align-items:end}
.lm-duo figcaption{grid-column:1/-1}
.lm-phone{border-radius:18px;overflow:hidden;box-shadow:0 0 0 6px #18181B,0 26px 50px -30px #18181B88;background:#18181B}
.lm-phone img{display:block;width:100%;height:auto!important;max-height:none!important}
.lm-mobile{display:block!important}
.lm-mobile .chapter-copy{max-width:640px;margin-bottom:28px}
.lm-phones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;padding:6px}
.lm-stats{margin:22px 0 0!important;display:grid!important;grid-template-columns:1fr!important;gap:0!important;border-top:1px solid var(--line)}
.lm-stats div{padding:12px 0;border-bottom:1px solid var(--line)}
.lm-stats dt{font:500 22px/1.1 Teka,Basis,sans-serif;letter-spacing:-.02em}
.lm-stats dd{margin:4px 0 0;font-size:13px;color:var(--muted)}
@media(max-width:760px){
  .lm-wrap{min-height:360px}
  .lm-wide,.lm-wide2{grid-template-columns:1fr!important}
  .lm-duo{grid-template-columns:minmax(0,1fr) 96px;gap:10px}
  .lm-phones{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .lm-card{grid-template-columns:1fr 1fr}.lm-card>div{padding:16px 14px}
  .lm-contents span{font-size:16px}
}
@media(prefers-reduced-motion:reduce){.lm-wrap-under,.lm-seal,.lm-lock,.lm-card,.lm-wrap:hover .lm-flap{animation:none}}

/* Round ten: the storefront peek stays wrapped too */
.project.is-wrapped .tf-peek img{filter:blur(16px) saturate(1.15);transform:scale(1.08)!important;transition:none!important}
.project.is-wrapped .tf-peek-frame:after{content:"";position:absolute;inset:0;background:#F3ECE355;backdrop-filter:blur(2px)}

/* Round ten: Luma's gallery is screen captures, so on phones each one keeps its own shape */
@media(max-width:760px){
  .project-gallery.is-shots .gallery-track{display:flex!important;gap:10px!important;height:auto!important;padding-right:16px!important;align-items:flex-start!important}
  .project-gallery.is-shots .gallery-image{flex:0 0 auto!important;width:auto!important;scroll-snap-align:start}
  .project-gallery.is-shots .gallery-image img{flex:none!important;height:calc((100vw - 56px) / 1.6)!important;width:auto!important;max-width:none!important;object-fit:contain!important;border-radius:6px;box-shadow:0 0 0 1px var(--line);background:#F3ECE3!important}
}
/* Round ten: on desktop the full founder note is shown; the yap button stays on phones */


/* Round eleven (d): the teaser line reads as body text */
.founder-note .tf-tease{margin-bottom:0}
.founder-note .tf-tease[hidden]{display:none}
.studio-personal-grid .founder-note .tf-yap>p{font-size:15px;line-height:1.65;margin:0 0 16px}

.tf-ask > .form-security{grid-column:1/-1}
.form-security:empty{display:none}

/* Touch focus is restored without leaving the keyboard outline behind. */
body.pointer-navigation :is(.project,.tf-option,.tf-chat,.tf-sign,.identity-link):focus{outline:none}
html:has(body.enquiry-open){background:#f4f2ec;overflow:hidden}
.sheet-delivery a,.tf-ask-privacy a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.tf-ask-privacy{font:12px/1.6 Basis,sans-serif;color:var(--muted);margin:12px 0 0}
/* Adapt annotations outside the light phone, leaving its UI colours intact. */
.g-dir .lab text{fill:var(--ink)}
.g-dir .lab path{stroke:var(--muted)}
.g-talk .ql{stroke:var(--ink)}
.g-talk .b1{fill:var(--ink)}
/* Delayed layers start at their first frame. Only the visible scene runs. */
.tf-motion .tf-process3 .g *{animation-fill-mode:both;animation-play-state:paused}
.tf-motion .tf-process3 .is-running .g *{animation-play-state:running}