/* Recommendations preview, 26 September 2026.
   Everything new lives here and in claude.js. The copied studio-grid files
   keep their structure; their transitions now point at the motion tokens. */

/* 1. Motion tokens. Three durations, one entrance curve, one scroll curve. */
:root{
  --t-fast:160ms;
  --t-base:360ms;
  --t-slow:600ms;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
  --ease-land:cubic-bezier(.34,1.5,.64,1);
}


/* 3. Hero panel. The screen and OS readout goes; toggles read On / Off. */
.settings button>span,.sound-state{display:none!important}
.settings button::after,.sound-label::after{content:"Off";margin-left:7px;opacity:.6}
.settings button[aria-pressed="true"]::after,.sound-toggle[aria-pressed="true"] .sound-label::after{content:"On";opacity:1}

/* 4. The orange full stop lands last. */
.tf-dot{display:inline-block;color:var(--accent)!important}
.tf-dots-ready .tf-dot{transform:translateY(-.75em);opacity:0;transition:transform var(--t-slow) var(--ease-land),opacity var(--t-fast) linear}
.tf-dots-ready .tf-dot.is-landed{transform:none;opacity:1}

/* 5. Storefront peek on project cards. */
.project-art{position:relative}
.tf-peek{position:absolute;inset:0;padding:9% 9% 0;background:#ecebe8;opacity:0;pointer-events:none;transition:opacity var(--t-base) var(--ease-out);display:flex}
.tf-peek-frame{position:relative;flex:1;overflow:hidden;border-radius:6px 6px 0 0;background:#fff;box-shadow:0 18px 40px -18px #0004,0 0 0 1px #0000000d;padding-top:14px}
.tf-peek-frame:before{content:"";position:absolute;inset:0 0 auto;height:14px;background:#f3f2ef;border-bottom:1px solid #0000000f;z-index:1;background-image:radial-gradient(circle at 9px 7px,#d6d4cf 2.5px,transparent 3px),radial-gradient(circle at 19px 7px,#d6d4cf 2.5px,transparent 3px),radial-gradient(circle at 29px 7px,#d6d4cf 2.5px,transparent 3px)}
.tf-peek img{display:block;width:100%;height:auto!important;min-height:0!important;object-fit:initial!important;transform:translateY(0)!important;transition:transform var(--t-slow) var(--ease-out)}
.tf-peek-label{position:absolute;left:12px;bottom:12px;z-index:2;font-size:10px;letter-spacing:.04em;text-transform:uppercase;background:#282828;color:#fff;padding:5px 8px 4px;border-radius:2px;transform:translateY(6px);opacity:0;transition:transform var(--t-base) var(--ease-out),opacity var(--t-base) var(--ease-out)}
@media(hover:hover) and (pointer:fine){
  .project>.project-art>img{transition:transform var(--t-slow) var(--ease-out)!important}
  .project:hover>.project-art>img{transform:scale(1.03)}
  .has-peek:hover .tf-peek,.has-peek:focus-visible .tf-peek{opacity:1}
  .has-peek:hover .tf-peek-label,.has-peek:focus-visible .tf-peek-label{transform:none;opacity:1}
  .has-peek:hover .tf-peek img{transform:translateY(var(--peek-travel,0))!important;transition:transform var(--peek-time,6s) cubic-bezier(.45,0,.4,1) .35s}
}

/* 6. Footer. The wordmark draws on scroll and becomes the call to action. */
.tf-footer{--tf-ink:#ecebe4;--tf-muted:#a9aca8;--tf-rule:#ffffff22}
.tf-inner{padding:120px var(--page-edge,32px) 28px}
.tf-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:64px;align-items:end}
.tf-eyebrow{margin:0 0 22px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--tf-muted)}
.tf-headline{margin:0;font:500 clamp(40px,5vw,76px)/1.02 Teka,Basis,sans-serif;letter-spacing:-.04em;color:var(--tf-ink)}
.tf-context{margin:28px 0 0;max-width:470px;font-size:15px;line-height:1.55;color:#c9cbc6}
@keyframes tfFade{from{opacity:0;transform:translateY(8px)}}
.tf-begin ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--tf-rule)}
.tf-option{display:grid;grid-template-columns:34px 1fr auto 20px;align-items:center;gap:12px;min-height:64px;border-bottom:1px solid var(--tf-rule);color:var(--tf-ink);text-decoration:none;font-size:clamp(18px,1.6vw,24px);letter-spacing:-.02em;transition:color var(--t-fast) var(--ease-out),padding var(--t-base) var(--ease-out)}
.tf-n{font-size:10px;color:var(--tf-muted);letter-spacing:0}
.tf-a{font-size:13px;transition:transform var(--t-base) var(--ease-out)}
@media(hover:hover) and (pointer:fine){
  .tf-option:hover{padding-left:8px}
  .tf-option:hover .tf-a{transform:translate(3px,-3px)}
  .tf-option:hover .tf-n{color:var(--accent)}
}

.tf-sign{position:relative;display:block;margin:96px 0 0;color:var(--tf-ink);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;outline-offset:10px}
.tf-word{display:block;width:100%;height:auto;overflow:visible}
.tf-word path{fill:var(--tf-ink);fill-opacity:0;stroke:var(--tf-ink);stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;stroke-opacity:.75;transition:fill var(--t-base) var(--ease-out)}
.tf-l{transition:transform var(--t-base) var(--ease-out);transition-delay:calc(var(--i)*22ms)}
.tf-under{position:absolute;inset:0;pointer-events:none;opacity:.22}
.tf-under path{fill:none;stroke:var(--tf-ink);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:.6}
.tf-cursor{position:absolute;left:0;top:0;pointer-events:none;display:inline-flex;gap:10px;align-items:center;white-space:nowrap;padding:10px 14px 9px;background:var(--accent);color:#1d1d1b;font-size:13px;border-radius:2px;opacity:0;transform:translate3d(var(--cx,0),var(--cy,0),0) translate(-50%,-150%) scale(.9);transition:opacity var(--t-fast) linear,scale var(--t-fast) var(--ease-out)}
.tf-cursor i{font-style:normal}
@media(hover:hover) and (pointer:fine){
  .tf-footer.is-signed .tf-sign:hover .tf-word path{fill:var(--accent)}
  .tf-footer.is-signed .tf-sign:hover .tf-l{transform:translateY(-26px)}
  .tf-footer.is-signed .tf-sign.has-cursor:hover{cursor:none}
  .tf-footer.is-signed .tf-sign:hover .tf-cursor{opacity:1;transform:translate3d(var(--cx,0),var(--cy,0),0) translate(-50%,-150%)}
}
@media(hover:none),(pointer:coarse){
  .tf-footer.is-signed .tf-sign:active .tf-word path{fill:var(--accent)}
}
.tf-footer .footer-colophon{padding-top:28px}

/* Enquiry grows from whatever was pressed. */
dialog.contact-sheet.tf-morphing{overflow:hidden}

/* 7. Mobile. Photos fill the cards, targets reach 44px, footer stacks. */
@media(max-width:600px){
  .portfolio .project-art{padding:7% 7% 0!important;height:62vw}
  .portfolio .project-art>img{height:100%!important;min-height:0!important;object-fit:cover}
  .section-heading>span{display:inline-flex;align-items:center;min-height:44px;font-size:12px!important}
  .footer-links{font-size:12px!important}
  .footer-bottom{font-size:11px!important}
  .tf-inner{padding:84px 20px 20px}
  .tf-top{grid-template-columns:1fr;gap:48px}
  .tf-headline{font-size:40px}
  .tf-context{font-size:14px}
  .tf-option{min-height:58px;font-size:19px}
  .tf-sign{margin-top:64px}
}
@media(max-width:1100px) and (min-width:601px){.tf-top{grid-template-columns:1fr;gap:48px}}

/* 8. Review panel (preview only). */
.tf-review{position:fixed;left:16px;bottom:16px;z-index:60;font:12px/1.45 Basis,Arial,sans-serif;color:#1f1f1d}
.tf-review-toggle{display:inline-flex;gap:10px;align-items:center;min-height:40px;padding:0 14px;background:#1f1f1d;color:#f4f2ec;border:0;border-radius:20px;cursor:pointer;box-shadow:0 8px 24px -8px #0006}
.tf-review-toggle b{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:10px;background:var(--accent);color:#1f1f1d;font-weight:500;font-size:11px}
.tf-review-panel{position:absolute;left:0;bottom:52px;width:min(380px,calc(100vw - 32px));max-height:min(70vh,640px);overflow:auto;background:#f4f2ec;border-radius:8px;box-shadow:0 24px 60px -20px #0007,0 0 0 1px #0000000f;padding:18px 18px 12px;transform-origin:0 100%;transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out)}
.tf-review:not(.is-open) .tf-review-panel{opacity:0;transform:translateY(8px) scale(.98);pointer-events:none;visibility:hidden}
.tf-review h2{margin:0 0 4px;font-size:15px;font-weight:500;letter-spacing:-.01em}
.tf-review>div>p{margin:0 0 12px;color:#6c6a64}
.tf-review ol{margin:0;padding:0;list-style:none;counter-reset:c}
.tf-review li{border-top:1px solid #0000001a;padding:10px 0;display:grid;grid-template-columns:22px 1fr;gap:6px;counter-increment:c}
.tf-review li:before{content:counter(c,decimal-leading-zero);font-size:10px;color:var(--accent);padding-top:2px}
.tf-review li a{color:inherit;font-weight:500;text-decoration:none}
.tf-review li a:hover{text-decoration:underline}
.tf-review li span{display:block;color:#5d5b55}
.tf-review-actions{display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid #0000001a;padding-top:12px;margin-top:4px}
.tf-review-actions button{min-height:34px;padding:0 12px;border:1px solid #0000002a;background:transparent;border-radius:17px;cursor:pointer;font:inherit}
body.enquiry-open .tf-review,body.project-open .tf-review{display:none}

@media(prefers-reduced-motion:reduce){
  .tf-dots-ready .tf-dot{transform:none;opacity:1;transition:none}
  .tf-peek img{transition:none!important;transform:none!important}
  .tf-l,.tf-option,.tf-cursor{transition:none}
  .tf-footer.is-signed .tf-sign:hover .tf-l{transform:none}
}
@media(max-width:600px){
  .tf-footer .footer-colophon{padding-bottom:76px}
  .tf-review-toggle{min-height:36px;padding:0 12px;font-size:11px}
}

/* Round two */
.tf-footer{position:relative;isolation:isolate}
.tf-texture{position:absolute;inset:0;width:100%;height:100%;z-index:-1;image-rendering:pixelated;pointer-events:none}
.tf-seen-label{margin:0 0 10px;font-size:12px}
.tf-seen-label small{opacity:.55;margin-left:6px}
.tf-chips{display:flex;flex-wrap:wrap;gap:8px}
.tf-chip{display:inline-flex;align-items:center;gap:10px;min-height:34px;padding:0 12px;border:1px solid #3d3a302a;border-radius:17px;background:#fffdf8;font:inherit;font-size:12px;cursor:pointer;transition:background var(--t-fast) var(--ease-out)}
.tf-chip span{opacity:.5}
.tf-chip:hover{background:#ebe8df}

/* Round three */
.studio-footer.tf-footer{background:#111213}
.tf-footer{--tf-muted:#8d8f8b;--tf-rule:#ffffff17}
.tf-footer .footer-links,.tf-footer .footer-bottom{border-color:#ffffff17}
.tf-top{align-items:start}
.tf-begin{padding-top:6px}

/* Round four */
.tf-word path{fill-opacity:0;transition:fill-opacity 450ms var(--ease-out),stroke-opacity 450ms var(--ease-out),fill var(--t-base) var(--ease-out)}
.tf-under{transition:opacity 700ms var(--ease-out)}
.tf-footer.is-signed .tf-under{opacity:0}
.tf-sound-opts{border-top:1px solid #0000001a;padding:12px 0 4px}
.tf-sound-opts p{margin:0 0 8px;font-weight:500}
.tf-sound-opts small{font-weight:400;color:#8a877f;margin-left:6px}
.tf-sound-opts div{display:flex;flex-wrap:wrap;gap:6px}
.tf-sound-opts button{min-height:32px;padding:0 12px;border:1px solid #0000002a;background:transparent;border-radius:16px;cursor:pointer;font:inherit}
.tf-sound-opts .tf-sub{margin:12px 0 8px;font-weight:500}
.tf-sound-opts .tf-mixl{display:block;margin-top:10px}
.tf-sound-opts .tf-mixl span{display:flex;justify-content:space-between;margin-bottom:4px}
.tf-sound-opts .tf-mixl b{font-weight:400;color:#8a877f}
.tf-sound-opts .tf-mixl input{width:100%;accent-color:#e8663a}
.tf-sound-opts button[aria-pressed="true"]{background:#1f1f1d;color:#f4f2ec;border-color:#1f1f1d}

/* Round five */
/* The studio: portrait under the eyebrow, note under the headline. */
.studio-personal-grid{grid-template-columns:1fr 1.18fr;gap:7vw}
.studio-personal-grid .founder-introduction{display:contents}
.studio-personal-grid .founder-portrait{grid-column:1;max-width:340px;width:100%}
.studio-personal-grid .founder-note{grid-column:2;max-width:520px;padding-top:4px}
.studio-personal-grid .founder-note .personal-salutation{font-size:34px}
.studio-personal-grid .founder-note>p{font-size:15px;line-height:1.65}

/* How a project runs: one step in focus at a time. */
.tf-process{margin-top:120px;display:grid;grid-template-columns:1fr 1.18fr;gap:7vw;border-top:1px solid var(--line);padding-top:32px}
.tf-process-head{position:sticky;top:120px;align-self:start}
.tf-process-head h3{margin:0 0 10px}
.tf-process-head p{margin:0;font-size:12px;color:var(--muted);max-width:260px}
.tf-steps-wrap{position:relative}
.tf-rail{position:absolute;left:13px;top:13px;bottom:13px;width:1px;background:var(--line)}
.tf-rail span{position:absolute;left:0;top:0;width:1px;height:calc(var(--rail,0)*100%);background:var(--accent);transition:height var(--t-base) var(--ease-out)}
.tf-steps{list-style:none;margin:0;padding:0}
.tf-step{position:relative;padding:0 0 34px;opacity:.42;filter:blur(2.2px);transition:opacity var(--t-slow) var(--ease-out),filter var(--t-slow) var(--ease-out)}
.tf-step.is-focus{opacity:1;filter:none}
.tf-step:not(.is-focus):hover{opacity:.7;filter:blur(.6px)}
.tf-step-head{all:unset;box-sizing:border-box;display:grid;grid-template-columns:26px 1fr auto;column-gap:22px;align-items:baseline;width:100%;cursor:pointer}
.tf-step-head:focus-visible{outline:2px solid currentColor;outline-offset:6px}
.tf-node{position:relative;z-index:1;align-self:center;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--paper);border:1px solid var(--line);font-size:9px;color:var(--muted);transition:color var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease-out),background var(--t-base) var(--ease-out)}
.tf-step.is-focus .tf-node{color:#fff;background:var(--accent);border-color:var(--accent)}
.tf-step-title{font:500 clamp(26px,2.6vw,40px)/1.05 Teka,Basis,sans-serif;letter-spacing:-.035em}
.tf-time{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.tf-step.is-focus .tf-time{color:var(--accent)}
.tf-step-body{display:grid;grid-template-rows:0fr;margin-left:48px;transition:grid-template-rows var(--t-slow) var(--ease-out)}
.tf-step-body>*{overflow:hidden;min-height:0}
.tf-step-body{grid-template-rows:auto}
.tf-what{margin:14px 0 14px;font-size:16px;line-height:1.55;max-width:44ch}
.tf-pair{margin:0;display:grid;grid-template-columns:120px 1fr;gap:16px;padding:10px 0;border-top:1px solid var(--line);font-size:14px;max-width:560px}
.tf-pair span{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:3px}
@media(max-width:1100px){.tf-process{grid-template-columns:1fr;gap:32px}.tf-process-head{position:static}}
@media(max-width:600px){
  .studio-personal-grid .founder-introduction{display:grid}
  .studio-personal-grid .founder-portrait,.studio-personal-grid .founder-note{grid-column:auto}
  .tf-process{margin-top:64px}
  .tf-step-head{grid-template-columns:26px 1fr;row-gap:4px}
  .tf-time{grid-column:2}
  .tf-step-title{font-size:26px}
  .tf-step-body{margin-left:48px}
  .tf-pair{grid-template-columns:1fr;gap:2px}
}
@media(prefers-reduced-motion:reduce){.tf-step{transition:none}}

/* Enquiry: custom dropdowns. */
.tf-native{position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;border:0!important}
.tf-select{position:relative}
.tf-select-btn{width:100%;min-height:50px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:#ffffff30;border:1px solid #d3cfc5;border-radius:2px;font:400 16px/1.5 Basis,sans-serif;color:var(--sheet-ink,#292822);cursor:pointer;text-align:left;transition:border-color var(--t-fast) var(--ease-out),background var(--t-fast) var(--ease-out)}
.tf-select-btn:hover{border-color:#b7b2a6;background:#ffffff60}
.tf-select-btn:focus{outline:none}
.tf-select-btn:focus-visible{outline:1px solid #6b726a;outline-offset:1px;border-color:#6b726a}
.tf-select.is-open .tf-select-btn{border-color:#6b726a;background:#fffdf8}
.tf-select-value.is-placeholder{color:#858075}
.tf-select-btn svg{width:12px;height:12px;flex:none;transition:transform var(--t-base) var(--ease-out);opacity:.7}
.tf-select.is-open .tf-select-btn svg{transform:rotate(180deg)}
.tf-select-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:6;margin:0;padding:6px;list-style:none;background:#fbfaf6;border:1px solid #dcd8cd;border-radius:6px;box-shadow:0 22px 44px -20px #29282255,0 2px 8px -4px #2928221f;opacity:0;visibility:hidden;transform:translateY(-6px) scale(.985);transform-origin:50% 0;transition:opacity var(--t-fast) var(--ease-out),transform var(--t-base) var(--ease-out),visibility 0s linear var(--t-base);max-height:300px;overflow:auto;outline:none}
.tf-select.up .tf-select-list{top:auto;bottom:calc(100% + 6px);transform-origin:50% 100%;transform:translateY(6px) scale(.985)}
.tf-select.is-open .tf-select-list{opacity:1;visibility:visible;transform:none;transition:opacity var(--t-fast) var(--ease-out),transform var(--t-base) var(--ease-out),visibility 0s}
.tf-select-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:42px;padding:0 12px;border-radius:4px;font-size:15px;cursor:pointer;color:#3a3830;transition:background var(--t-fast) var(--ease-out)}
.tf-select-list li.is-active{background:#efece4}
.tf-select-list li[aria-selected="true"]{color:#1f1e1a;font-weight:500}
.tf-select-list li .tick{width:14px;height:14px;color:var(--accent);opacity:0;transform:scale(.6);transition:opacity var(--t-fast) var(--ease-out),transform var(--t-base) var(--ease-land)}
.tf-select-list li[aria-selected="true"] .tick{opacity:1;transform:none}
.tf-select-list li.is-custom{margin-top:6px;position:relative;color:#6f6c64}
.tf-select-list li.is-custom:before{content:"";position:absolute;left:8px;right:8px;top:-4px;height:1px;background:#e3dfd5}
.sheet-field select:focus{outline:none}

/* Round six */
@media(max-width:600px){.agency-info{min-height:220px;grid-template-rows:auto auto 1fr auto;align-content:stretch;padding-bottom:16px!important}.agency-info .settings{grid-row:4;align-self:end}}
/* Warm fill: the whole word fills together, arriving warm and settling to paper white. */
.tf-word:not(.tf-under) path{transition:fill-opacity 280ms ease-out,stroke-opacity 400ms ease-out,fill var(--t-base) var(--ease-out)}
.tf-footer.is-signed .tf-word:not(.tf-under) path{fill-opacity:1;stroke-opacity:.1;animation:tfWarmFill 1.3s var(--ease-out) both}
@keyframes tfWarmFill{0%{fill:var(--warm-from,#f08a55)}35%{fill:var(--warm-mid,#f4b48d)}100%{fill:var(--tf-ink)}}
@media(hover:hover) and (pointer:fine){.tf-footer.is-signed .tf-sign:hover .tf-word path{animation:none;fill:var(--accent)}}
@media(prefers-reduced-motion:reduce){.tf-footer.is-signed .tf-word:not(.tf-under) path{animation:none}}

/* Round seven */
.studio-personal-grid .portrait-frame img{transform:scale(1.55);transform-origin:44% 36%;object-position:50% 50%;filter:saturate(.8) brightness(1.1) contrast(.98)}
@media(prefers-reduced-motion:reduce){.tf-step{filter:none}}

/* Round eight: How a project runs, one row per step with a small animated scene. */
.tf-journey{margin-top:120px;border-top:1px solid var(--line);padding-top:40px}
.tf-journey-head{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:48px}
.tf-journey-head h2{font:500 clamp(38px,4vw,62px)/1.02 Teka,Basis,sans-serif;letter-spacing:-.04em;margin:0}
.tf-journey-head p{margin:0;font-size:12px;color:var(--muted);max-width:260px;text-align:right}
.tf-rows{list-style:none;margin:0;padding:0}
.tf-row{display:grid;grid-template-columns:180px minmax(0,1fr) minmax(0,1.3fr);gap:48px;align-items:start;padding:36px 0;border-top:1px solid var(--line);opacity:.4;transition:opacity var(--t-slow) var(--ease-out)}
.tf-row.is-active{opacity:1}
.tf-index{display:flex;align-items:center;gap:12px;margin:4px 0 0;font:11px/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase}
.tf-ring{width:22px;height:22px;flex:none}
.tf-ring .fillring{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,0))}
.tf-copy h3{margin:0 0 8px;font:500 clamp(24px,2.2vw,34px)/1.08 Teka,Basis,sans-serif;letter-spacing:-.03em}
.tf-copy .tf-time{margin:0 0 20px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.tf-copy .tf-what{margin:0 0 20px;font-size:16px;line-height:1.55;max-width:40ch}
.tf-copy .tf-pair{display:block;margin:0;padding-top:12px;border-top:1px solid var(--line);font-size:14px;max-width:40ch}
.tf-copy .tf-pair span{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.tf-scene{margin:0;aspect-ratio:16/10;background:#f0eee8;border-radius:6px;overflow:hidden;display:grid;place-items:center}
.tf-scene svg{width:100%;height:100%;display:block}
@media(max-width:1100px){.tf-row{grid-template-columns:120px 1fr;gap:28px}.tf-scene{grid-column:1/-1}}
@media(max-width:600px){
  .tf-journey{margin-top:64px;padding-top:28px}
  .tf-journey-head{display:block;margin-bottom:28px}.tf-journey-head h2{font-size:34px}.tf-journey-head p{text-align:left;margin-top:10px}
  .tf-row{grid-template-columns:1fr;gap:18px;padding:28px 0}
  .tf-copy .tf-what{font-size:15px}
}

/* Scenes: every animation waits for its row to be active. */
.tf-row:not(.is-active) .sc *{animation:none!important}
/* At rest (row not active) each scene shows its finished frame. */
.sc-talk .ring,.sc-talk .arrow,.sc-improve .line{stroke-dasharray:1;stroke-dashoffset:0}
.sc-build .tap,.sc-build .lab2{opacity:0}
.sc-explore .cur{opacity:0}
.sc-improve .cb{fill:#f26532;stroke:#f26532}
.sc-talk .t1,.sc-talk .t2,.sc-talk .t3,.sc-talk .t4{animation:scType 8s linear infinite}
.sc-talk .t2{animation-name:scType2}.sc-talk .t3{animation-name:scType3}.sc-talk .t4{animation-name:scType4}
@keyframes scType{0%,4%{clip-path:inset(0 100% 0 0)}14%,90%{clip-path:inset(0 0 0 0)}97%,100%{clip-path:inset(0 100% 0 0)}}
@keyframes scType2{0%,16%{clip-path:inset(0 100% 0 0)}28%,90%{clip-path:inset(0 0 0 0)}97%,100%{clip-path:inset(0 100% 0 0)}}
@keyframes scType3{0%,30%{clip-path:inset(0 100% 0 0)}42%,90%{clip-path:inset(0 0 0 0)}97%,100%{clip-path:inset(0 100% 0 0)}}
@keyframes scType4{0%,66%{opacity:0;transform:translateY(6px)}72%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
.sc-talk .ring,.sc-talk .arrow{animation:scDraw 8s var(--ease-inout) infinite}
.sc-talk .arrow{animation-name:scDraw2}
@keyframes scDraw{0%,46%{stroke-dashoffset:1}58%,90%{stroke-dashoffset:0}97%,100%{stroke-dashoffset:1;opacity:0}}
@keyframes scDraw2{0%,58%{stroke-dashoffset:1}66%,90%{stroke-dashoffset:0}97%,100%{stroke-dashoffset:1;opacity:0}}
.sc-explore .b1,.sc-explore .b2,.sc-explore .b3{animation:scRise 8s var(--ease-out) infinite}
.sc-explore .b2{animation-name:scRise2}.sc-explore .b3{animation-name:scRise3}
@keyframes scRise{0%,4%{opacity:0;transform:translateY(16px)}14%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes scRise2{0%,14%{opacity:0;transform:translateY(16px)}24%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes scRise3{0%,24%{opacity:0;transform:translateY(16px)}34%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
.sc-explore .s1,.sc-explore .s2,.sc-explore .s3{transform-box:fill-box;transform-origin:center;animation:scPop 8s var(--ease-land) infinite}
.sc-explore .s2{animation-delay:.12s}.sc-explore .s3{animation-delay:.24s}
@keyframes scPop{0%,18%{transform:scale(0)}26%,90%{transform:scale(1)}97%,100%{transform:scale(0)}}
.sc-explore .cur{animation:scCursor 8s var(--ease-inout) infinite}
@keyframes scCursor{0%,36%{transform:translate(120px,250px);opacity:0}40%{opacity:1}56%{transform:translate(372px,150px)}62%{transform:translate(372px,150px) scale(.9)}66%,86%{transform:translate(372px,150px);opacity:1}92%,100%{opacity:0;transform:translate(420px,260px)}}
.sc-explore .pin{animation:scPin 8s var(--ease-land) infinite}
@keyframes scPin{0%,60%{opacity:0;transform:translateY(-14px)}68%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
.sc-build .tap{transform-box:fill-box;transform-origin:center;opacity:0;animation:scTap 7s ease-out infinite}
@keyframes scTap{0%,30%{opacity:0;transform:scale(.4)}33%{opacity:.25;transform:scale(.6)}42%{opacity:0;transform:scale(1.8)}100%{opacity:0}}
.sc-build .btn-bg{animation:scBtn 7s var(--ease-out) infinite}
@keyframes scBtn{0%,32%{fill:#282828}38%,88%{fill:#f26532}95%,100%{fill:#282828}}
.sc-build .lab1{animation:scLab1 7s linear infinite}.sc-build .lab2{opacity:0;animation:scLab2 7s linear infinite}
@keyframes scLab1{0%,32%{opacity:1}35%,90%{opacity:0}95%,100%{opacity:1}}
@keyframes scLab2{0%,34%{opacity:0}38%,88%{opacity:1}92%,100%{opacity:0}}
.sc-build .badge{transform-box:fill-box;transform-origin:center;opacity:0;animation:scBadge 7s var(--ease-land) infinite}
@keyframes scBadge{0%,40%{opacity:0;transform:scale(0)}46%,88%{opacity:1;transform:scale(1)}94%,100%{opacity:0}}
.sc-build .toast{animation:scToast 7s var(--ease-out) infinite}
@keyframes scToast{0%,55%{opacity:0;transform:translateX(20px)}63%,88%{opacity:1;transform:none}95%,100%{opacity:0}}
.sc-improve .line{animation:scLine 8s var(--ease-inout) infinite}
@keyframes scLine{0%,6%{stroke-dashoffset:1}50%,90%{stroke-dashoffset:0}97%,100%{stroke-dashoffset:1}}
.sc-improve .dot{transform-box:fill-box;transform-origin:center;animation:scDot 8s var(--ease-land) infinite}
@keyframes scDot{0%,48%{transform:scale(0)}54%,90%{transform:scale(1)}97%,100%{transform:scale(0)}}
.sc-improve .cb{animation:scChip 8s steps(1) infinite}
@keyframes scChip{0%,30%{fill:transparent;stroke:#dcd8ce}31%,100%{fill:#f26532;stroke:#f26532}}
.sc-improve .mail{animation:scMail 8s var(--ease-out) infinite}
@keyframes scMail{0%,60%{opacity:0;transform:translateY(14px)}68%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.sc *{animation:none!important}.sc-talk .ring,.sc-talk .arrow,.sc-improve .line{stroke-dashoffset:0}.sc-build .tap,.sc-build .lab2{opacity:0}}

/* Round nine: journey polish */
.tf-row{transition:opacity var(--t-slow) var(--ease-out)}
.tf-row .tf-scene{transition:transform var(--t-slow) var(--ease-out),box-shadow var(--t-slow) var(--ease-out)}
.tf-row.is-active .tf-scene{box-shadow:0 1px 0 #0000000a,0 24px 48px -32px #28282840}
.tf-copy .tf-time{display:inline-block;padding:4px 9px 3px;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:999px;margin-bottom:22px}
.tf-row:not(.is-active) .tf-copy .tf-time{border-color:var(--line);color:var(--muted)}
.tf-index span{transition:color var(--t-base) var(--ease-out)}
.tf-row.is-active .tf-index span{color:var(--accent)}
.sc-explore .rev{animation:scRev 8s var(--ease-out) infinite}
@keyframes scRev{0%,70%{opacity:0}76%,90%{opacity:1}97%,100%{opacity:0}}
.sc-talk .t4{font-size:20px}
@media(max-width:600px){.tf-row .tf-scene{order:3}.tf-index{margin:0}}
/* Footer fill: faster arrival */
.tf-word:not(.tf-under) path{transition:fill-opacity var(--fill-ms,60ms) linear,stroke-opacity 300ms ease-out,fill var(--t-base) var(--ease-out)}
.tf-footer.is-signed .tf-word:not(.tf-under) path{animation-duration:var(--warm-s,1.8s)}

/* Round ten: footer */
.tf-reassure{margin:16px 0 0;font-size:12px;color:var(--tf-muted)}
.tf-option .tf-t{max-width:30ch}
.tf-headline{font-size:clamp(38px,4.3vw,64px);text-wrap:balance;max-width:14ch}.tf-nw{white-space:nowrap}
@media(max-width:600px){.tf-headline{font-size:36px}}
@media(max-width:600px){.tf-option{font-size:17px}}

/* Round eleven */
html{background:linear-gradient(var(--paper,#fff) 50%,#111213 50%) fixed}
html:has(body.dark){background:linear-gradient(#282828 50%,#111213 50%) fixed}
.tf-tune{border-top:1px solid #0000001a;padding:12px 0 6px}
.tf-tune>p{margin:0 0 8px;font-weight:500}.tf-tune>p small{font-weight:400;color:#8a877f;margin-left:6px}
.tf-tune label{display:block;margin:0 0 8px}
.tf-tune label span{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#5d5b55}
.tf-tune label b{font-weight:500;color:#1f1f1d;font-variant-numeric:tabular-nums}
.tf-tune input[type=range]{width:100%;accent-color:var(--accent);margin:4px 0 0}
.tf-tune-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.tf-tune-actions button{min-height:30px;padding:0 10px;border:1px solid #0000002a;background:transparent;border-radius:15px;cursor:pointer;font:inherit;font-size:11px}

.tf-rainmix{margin-top:12px;border-top:1px solid #0000001a;padding-top:10px}
.tf-rainmix summary{cursor:pointer;font-weight:500;list-style:none}
.tf-rainmix summary::-webkit-details-marker{display:none}
.tf-rainmix summary::after{content:' +';color:#8a877f}
.tf-rainmix[open] summary::after{content:' \2212'}
.tf-sound-opts .tf-rainrows{display:block}
.tf-sound-opts .tf-rainmix .tf-tune-actions{display:flex;gap:6px;margin-top:10px}