*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;min-height:100vh}html,body{color:#e9e9ed;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#161826}::selection{background:#9184d94d}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:#161826}::-webkit-scrollbar-thumb{background:#3f424d;border:3px solid #161826;border-radius:8px}::-webkit-scrollbar-thumb:hover{background:#5d5294}


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ──────────────────────────────────────────────────────────────────────────
   36Forts.si — Nocturne brand tokens (Brand identity v1).
   One accent, used sparingly: the core dot, the ".si", focus rings and key
   actions. Everything else stays in the neutral ramp.
   ────────────────────────────────────────────────────────────────────────── */
:root{
  /* — named brand colours — */
  --ground:#161826;        /* Night Ground — primary dark surface        */
  --ground-deep:#12131F;   /* deepest step of the same family            */
  --surface:#232532;       /* raised card surface                        */
  --keep:#2B2741;          /* Deep Keep — icon ground, tinted fills      */
  --accent:#9184D9;        /* Rampart Violet — marks, lines, cores       */
  --accent-2:#A7A1DB;      /* machine-derived stand-in                   */
  --limestone:#F3F5FE;     /* light surface, mark on dark                */
  --granite:#9397AB;       /* muted text, secondary UI                   */

  /* — accent ramp — */
  --accent-100:#F5F4FF; --accent-200:#E7E5FE; --accent-300:#D2CEFD;
  --accent-400:#B5ABFC; --accent-500:#968AE0; --accent-600:#796CBF;
  --accent-700:#5D5294; --accent-800:#423A6A; --accent-900:#2B2741;

  /* — neutral ramp — */
  --n100:#F3F5FE; --n200:#E4E7F5; --n300:#CFD3E5; --n400:#B2B6CA;
  --n500:#9397AB; --n600:#75798C; --n700:#595D6C; --n800:#3F424D; --n900:#292B31;

  /* — section-divider ground (deck-scale fills only) — */
  --section:#262A60; --section-glow:#353B80; --section-ghost:#4C5397;

  /* — elevation, derived from the ground — */
  --shadow-sm:0 0 0 1px #3F424D;
  --shadow-md:0 0 0 1px #595D6C, 0 6px 18px rgba(0,0,0,.55);
  --shadow-lg:0 0 0 1px #9397AB, 0 16px 40px rgba(0,0,0,.65);

  /* — compatibility aliases: the old palette names now resolve to Nocturne — */
  --white:var(--ground); --paper:var(--ground-deep);
  --royal:var(--accent); --royal-hover:var(--accent-2); --royal-deep:var(--keep);
  --coral:var(--accent-2); --coral-deep:var(--accent-500);
  --ink:#E9E9ED; --slate:#B2B6CA; --slate-light:#9397AB;
  --line:rgba(233,233,237,0.14); --line-dark:rgba(233,233,237,0.10);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
.tf-root{background:var(--ground);color:var(--ink);font-family:'Inter',system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:clip;position:relative}
.tf-wrap{max-width:1200px;margin:0 auto;padding:0 28px;position:relative;z-index:1}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:'Space Grotesk','Inter',sans-serif;font-weight:500;line-height:1.12;letter-spacing:-.015em;color:var(--ink)}
::selection{background:color-mix(in srgb,var(--accent) 30%,transparent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.band-light{background:var(--ground);color:var(--slate)}
.band-paper{background:var(--ground-deep);color:var(--slate)}

.tf-eyebrow{font-family:'Inter';font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-300);display:inline-flex;align-items:center;gap:10px}
.tf-eyebrow::before{content:"";width:22px;height:1px;background:var(--accent);display:inline-block}

.tf-btn{font-family:'Space Grotesk','Inter',sans-serif;font-weight:500;font-size:14px;padding:12px 22px;border-radius:8px;cursor:pointer;border:1px solid transparent;transition:transform .15s,background .2s,border-color .2s,color .2s;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;text-align:center}
.tf-btn-primary{background:var(--accent);color:var(--ground);border-color:var(--accent)}
.tf-btn-primary:hover{background:var(--accent-400);border-color:var(--accent-400);transform:translateY(-2px)}
.tf-btn-ghost{border:1px solid var(--line);color:var(--ink);background:transparent}
.tf-btn-ghost:hover{border-color:var(--accent);color:var(--accent-300);background:color-mix(in srgb,var(--accent) 10%,transparent);transform:translateY(-2px)}
.tf-btn-white{background:var(--limestone);color:var(--keep)}
.tf-btn-white:hover{background:var(--accent-200);transform:translateY(-2px)}

.tf-nav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--ground) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.tf-nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:70px}
.tf-brand{display:flex;align-items:center;gap:0;flex:none;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:20px;letter-spacing:-.01em;cursor:pointer;color:var(--ink);white-space:nowrap}
.tf-brand svg{width:26px;height:26px;flex:none;color:var(--n100);margin-right:12px}
.tf-brand b{color:var(--accent-300);font-weight:500}
.tf-links{display:flex;gap:clamp(14px,2vw,30px);align-items:center}
.tf-links :is(button,a){background:none;border:none;color:var(--n300);font-size:14px;cursor:pointer;font-family:inherit;transition:color .2s,transform .2s;padding:4px 0;position:relative;display:inline-block}
.tf-links :is(button,a):hover{color:var(--accent-300);transform:scale(1.12)}
.tf-links :is(button,a)::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:center;transition:transform .3s ease}
/* The nav CTA is a button, not a link — restate it above .tf-links :is(button,a),
   and take the outlined accent pill from the guidelines' web-header sample. */
.tf-links :is(button,a).tf-btn-primary{background:transparent;color:var(--accent-300);border:1px solid var(--accent-700);border-radius:8px;padding:8px 18px}
.tf-links :is(button,a).tf-btn-primary:hover{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:var(--accent);color:var(--accent-200);transform:none}
.tf-links :is(button,a).tf-btn-primary::after{display:none}
.tf-links :is(button,a):hover::after{transform:scaleX(1)}
.tf-hasmenu{position:relative;display:flex;align-items:center}
.tf-mega{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);min-width:820px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:38px 40px;opacity:0;visibility:hidden;transition:opacity .25s,transform .25s;z-index:40}
.tf-caret{display:inline-block;margin-left:6px;font-size:11px;transition:transform .25s;transform:translateY(-1px)}
.tf-hasmenu:hover .tf-caret{transform:rotate(180deg)}
.tf-hasmenu:hover .tf-mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(6px)}
.tf-mega::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.tf-mega-in{display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
.tf-mega-col h5{font-family:'Inter';font-weight:600;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-300);margin-bottom:12px}
.tf-mega-col :is(button,a){display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:inherit;font-size:15px;color:var(--n300);padding:9px 0;transition:color .2s,padding-left .2s}
.tf-mega-flat{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:inherit;font-size:15px;color:var(--n300);padding:10px 0;transition:color .2s,padding-left .2s}
.tf-mega-flat:hover{color:var(--accent-300);padding-left:5px}
.tf-mega-col :is(button,a):hover{color:var(--accent-300);padding-left:5px}
@media(max-width:900px){.tf-mega{display:none}}
.tf-burger{display:none;background:none;border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:8px 10px;cursor:pointer}

.tf-hero-band{position:relative;overflow:hidden;background:radial-gradient(ellipse 80% 70% at 72% 38%,rgba(145,132,217,.20) 0%,rgba(43,39,65,.55) 45%,var(--ground) 78%)}
.tf-hero-band::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(145,132,217,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(145,132,217,.09) 1px,transparent 1px);background-size:60px 60px;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000,transparent 72%);mask-image:radial-gradient(ellipse at 70% 40%,#000,transparent 72%)}
.tf-hero{padding:118px 0 72px}
.tf-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center;min-height:70vh}
.tf-hero h1{font-size:clamp(42px,6vw,74px);margin:22px 0 20px}
.tf-hero h1 em{font-style:normal;color:var(--accent-300)}
/* — capability banner above the hero — */
.tf-banner{position:relative;padding:64px 0 58px;overflow:hidden;
  background:
    radial-gradient(ellipse 90% 140% at 12% 0%, color-mix(in srgb,var(--accent) 13%,transparent), transparent 62%),
    var(--ground-deep);
  border-bottom:1px solid var(--line)}
.tf-banner::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(145,132,217,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(145,132,217,.06) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse at 20% 0%,#000,transparent 72%);
  mask-image:radial-gradient(ellipse at 20% 0%,#000,transparent 72%)}
/* Two slow accent blooms drifting behind the words. Plain radial gradients
   moved with transform — no blur() filter, which is what makes this kind of
   thing stutter on a mid-range phone. */
.tf-banner-glow{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.tf-banner-glow::before,.tf-banner-glow::after{content:"";position:absolute;border-radius:50%;will-change:transform}
.tf-banner-glow::before{width:54vw;height:54vw;left:-14vw;top:-64%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 26%,transparent) 0%,transparent 62%);
  animation:tf-bloom-a 23s ease-in-out infinite}
.tf-banner-glow::after{width:42vw;height:42vw;right:-10vw;bottom:-72%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent-2) 20%,transparent) 0%,transparent 64%);
  animation:tf-bloom-b 29s ease-in-out infinite}
@keyframes tf-bloom-a{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6vw,4vh,0) scale(1.14)}}
@keyframes tf-bloom-b{0%,100%{transform:translate3d(0,0,0) scale(1.06)}50%{transform:translate3d(-7vw,-5vh,0) scale(.92)}}

/* A light travelling along the bottom rule. */
.tf-banner::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 90%,transparent),transparent);
  background-size:34% 100%;background-repeat:no-repeat;
  animation:tf-sweep 7.5s cubic-bezier(.5,0,.5,1) infinite}
@keyframes tf-sweep{0%{background-position:-40% 0}100%{background-position:140% 0}}

/* A fine grain over everything. 200 bytes of inline SVG noise, and the one
   thing that stops a large flat dark panel looking like flat dark paint. */
.tf-banner-grain{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* The light the pointer carries. Radius collapses to nothing when the pointer
   is off the block, which is also the state a touch device stays in. */
.tf-banner-beam{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  transition:opacity .45s ease;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb,var(--accent) 17%,transparent) 0%,
    color-mix(in srgb,var(--accent) 6%,transparent) 38%,
    transparent 68%)}
.tf-banner.lit .tf-banner-beam{opacity:1}

.tf-banner .tf-wrap{position:relative;z-index:1}
.tf-banner-kicker{margin-bottom:20px}
.tf-banner-type{position:relative}
.tf-banner-list{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:0;
  font-family:'Space Grotesk',sans-serif;font-weight:500;
  font-size:clamp(27px,4.1vw,52px);line-height:1.16;letter-spacing:-.02em;color:var(--n200)}
.tf-banner-w{display:inline-flex;align-items:center;white-space:nowrap;
  background:none;border:0;padding:0;margin:0;cursor:pointer;color:inherit;
  font:inherit;letter-spacing:inherit;line-height:inherit}
.tf-banner-word{position:relative;display:inline-block;padding-bottom:2px}
/* the rule that draws itself in under a word on hover or focus */
.tf-banner-word::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .42s cubic-bezier(.16,1,.3,1)}
.tf-banner-w.on .tf-banner-word::after{transform:scaleX(1)}
.tf-banner-w:focus{outline:none}
.tf-banner-w:focus-visible .tf-banner-word{outline:2px solid var(--accent);outline-offset:6px;border-radius:3px}
.tf-banner-dot{display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--accent);opacity:.35;margin:0 clamp(14px,1.5vw,22px);flex:none}

/* The accent copy of the line, revealed only where the pointer's light is. */
.tf-banner-ghost{position:absolute;inset:0;z-index:1;pointer-events:none;
  color:var(--accent-300);
  -webkit-mask-image:radial-gradient(240px circle at var(--mx,-999px) var(--my,-999px),#000 0%,#000 26%,rgba(0,0,0,.5) 58%,transparent 78%);
  mask-image:radial-gradient(240px circle at var(--mx,-999px) var(--my,-999px),#000 0%,#000 26%,rgba(0,0,0,.5) 58%,transparent 78%);
  opacity:0;transition:opacity .35s ease}
.tf-banner.lit .tf-banner-ghost{opacity:1}
.tf-banner-ghost .tf-banner-dot{opacity:1}
/* Two lines' worth of room is held open so swapping the copy on hover cannot
   move the row underneath it. */
.tf-banner-sub{margin:0;max-width:56ch;font-size:16px;line-height:1.7;color:var(--n400);
  min-height:calc(2 * 1.7em);animation:tf-swap .34s cubic-bezier(.16,1,.3,1) both}
@keyframes tf-swap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* The line and the way into the detail, on one row — it balances the block
   and gives the banner somewhere to send people. */
.tf-banner-foot{display:flex;justify-content:space-between;align-items:flex-end;
  gap:28px;flex-wrap:wrap;margin-top:26px}
.tf-banner-more{background:none;border:0;padding:10px 0;cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;flex:none;
  font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent-300);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 38%,transparent);
  transition:color .3s,border-color .3s}
.tf-banner-more i{font-style:normal;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.tf-banner-more:hover{color:var(--limestone);border-color:var(--accent)}
.tf-banner-more:hover i{transform:translateX(6px)}
.tf-banner-more:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* The words don't move — the banner is meant to hold still. Instead a light
   walks along them, one at a time, so the line reads as a row of things that
   are switched on rather than a list. Eight words at 1.1s each; the entrance
   fade-up runs first and the walk starts once it has finished. Hovering the
   line holds the light where it is. */
.tf-banner-list.in .tf-banner-w{opacity:0;transform:translateY(16px);
  animation:
    tf-rise .62s cubic-bezier(.16,1,.3,1) calc(var(--i) * .06s) forwards,
    tf-lit 8.8s linear calc(1.2s + var(--i) * 1.1s) infinite}
.tf-banner-list.in .tf-banner-dot{
  animation:tf-dot 8.8s linear calc(1.2s + var(--i) * 1.1s) infinite}
/* Pointer on the block: the automatic walk stands down and the reader drives.
   It is switched off rather than paused, because a paused animation still
   holds the colour and would beat the hover state. */
.tf-banner.lit .tf-banner-list.in .tf-banner-w{animation:none;opacity:1;transform:none}
.tf-banner.lit .tf-banner-list.in .tf-banner-dot{animation:none}
.tf-banner-w{transition:color .3s ease}
.tf-banner-w.on{color:var(--accent-300);
  text-shadow:0 0 34px color-mix(in srgb,var(--accent) 34%,transparent)}
.tf-banner-dot{transition:opacity .3s ease,transform .3s cubic-bezier(.16,1,.3,1)}
.tf-banner-w.on .tf-banner-dot{opacity:1;transform:scale(1.45)}
@keyframes tf-lit{
  0%,100%{color:var(--n200);text-shadow:none}
  2%,9%{color:var(--accent-300);
        text-shadow:0 0 16px color-mix(in srgb,var(--accent) 62%,transparent),
                    0 0 58px color-mix(in srgb,var(--accent) 38%,transparent)}
  12.5%{color:var(--n200);text-shadow:none}
}
@keyframes tf-dot{
  0%,100%{opacity:.35;transform:scale(1)}
  2%,9%{opacity:1;transform:scale(1.55)}
  12.5%{opacity:.35;transform:scale(1)}
}

@media(max-width:820px){
  .tf-banner{padding:46px 0 42px}
  .tf-banner-dot{width:6px;height:6px;margin:0 11px}
  .tf-banner-sub{font-size:15px;margin-top:18px}
  .tf-banner-glow::before{width:110vw;height:110vw;top:-80%}
  .tf-banner-glow::after{width:90vw;height:90vw;bottom:-90%}
  .tf-banner-sub{min-height:0}
  .tf-banner-ghost{display:none}   /* no pointer to chase */
  .tf-banner-foot{margin-top:20px}
  .tf-banner-more{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .tf-banner-list.in .tf-banner-w{animation:none;opacity:1;transform:none}
  .tf-banner-list.in .tf-banner-dot,.tf-banner-glow::before,.tf-banner-glow::after,.tf-banner::after{animation:none}
  .tf-banner-w:nth-child(3n+2){color:var(--accent-300)}
  .tf-banner-dot{opacity:.8}
  .tf-banner-sub{animation:none}
  .tf-banner-word::after{transition:none}
}
/* A device that cannot hover gets no pointer light and no hover-only copy. */
@media(hover:none){
  .tf-banner-ghost,.tf-banner-beam{display:none}
}

/* Rotating deliverable in the hero headline. Reserves its own line so the
   block below never reflows as the word changes length. */
.tf-rot{display:block;color:var(--accent-300);min-height:1.12em;white-space:nowrap}
.tf-rot em{font-style:normal;display:inline-block;animation:tf-rot-in .5s cubic-bezier(.16,1,.3,1)}
@keyframes tf-rot-in{from{opacity:0;transform:translateY(.22em)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.tf-rot em{animation:none}}
.tf-lead{font-size:19px;color:var(--n400);max-width:500px}
.tf-hero-cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.tf-annot{display:flex;gap:24px;margin-top:40px;flex-wrap:wrap}
.tf-annot span{font-size:13px;color:var(--n400);display:flex;align-items:center;gap:9px}
.tf-annot span::before{content:"";width:7px;height:7px;background:var(--accent);border-radius:50%;box-shadow:0 0 10px rgba(145,132,217,.7)}
.tf-stage{position:relative;height:520px;width:100%;margin-top:56px}
.tf-stage canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
.tf-stage::before,.tf-stage::after{content:"";position:absolute;width:26px;height:26px;pointer-events:none;border-color:var(--accent);opacity:.6}
.tf-stage::before{top:8px;left:8px;border-top:1px solid;border-left:1px solid}
.tf-stage::after{bottom:8px;right:8px;border-bottom:1px solid;border-right:1px solid}
.tf-stage-tag{position:absolute;bottom:10px;left:14px;font-family:'Inter';font-weight:600;font-size:11px;letter-spacing:.14em;color:var(--accent-300);opacity:.8;z-index:2}

.tf-sec{padding:90px 0;position:relative}
.tf-sec-head{max-width:640px;margin-bottom:48px}
.tf-sec-head h1,.tf-sec-head h2{font-size:clamp(30px,4vw,46px);margin:18px 0 16px;font-family:'Space Grotesk','Inter',sans-serif;font-weight:500;line-height:1.12;letter-spacing:-.015em;color:var(--ink)}
.tf-sec-head p{color:var(--n400);font-size:17px}

/* — "What we build" / Services: full-bleed hover rows ─────────────────────
   Eight edge-to-edge rows. At rest each is a single line — numeral, kicker,
   title. The open row floods with an accent wash, lights its numeral and
   unfolds its description. Deliberately unlike the step cards, industry
   tiles and difference cards elsewhere on the page. */
.tf-rows{border-top:1px solid var(--line)}
.tf-row{position:relative;border-bottom:1px solid var(--line);transition:background .45s cubic-bezier(.22,1,.36,1)}
.tf-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);transform:scaleY(0);transform-origin:50% 0;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.tf-row.open{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 17%,transparent),color-mix(in srgb,var(--accent) 5%,transparent) 55%,transparent)}
.tf-row.open::before{transform:scaleY(1)}
.tf-row-in{max-width:1200px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:96px 186px 1fr 44px;align-items:center;gap:20px;min-height:88px;cursor:pointer}
.tf-row-more{background:none;border:0;padding:0;margin-left:4px;font:inherit;font-weight:600;color:var(--accent-300);cursor:pointer;white-space:nowrap}
.tf-row-more:hover{text-decoration:underline;text-underline-offset:3px}
.tf-row-n{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:34px;line-height:1;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.2px var(--n700);transition:color .4s,-webkit-text-stroke-color .4s}
.tf-row.open .tf-row-n{color:var(--accent);-webkit-text-stroke-color:var(--accent)}
.tf-row-k{font-family:'Inter';font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--n600);transition:color .4s}
.tf-row.open .tf-row-k{color:var(--accent-300)}
.tf-row-t{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:clamp(20px,2.1vw,30px);line-height:1.1;letter-spacing:-.015em;margin:0;color:var(--n400);transition:color .4s,transform .5s cubic-bezier(.22,1,.36,1)}
.tf-row.open .tf-row-t{color:var(--n100);transform:translateX(7px)}
.tf-row-go{justify-self:end;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--n600);font-size:13px;font-style:normal;transition:background .4s,border-color .4s,color .4s,transform .5s cubic-bezier(.22,1,.36,1)}
.tf-row.open .tf-row-go{background:var(--accent);border-color:var(--accent);color:var(--ground);transform:rotate(45deg)}
.tf-row-body{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.22,1,.36,1)}
.tf-row.open .tf-row-body{max-height:200px}
.tf-row-body-in{max-width:1200px;margin:0 auto;padding:0 28px 28px;display:grid;grid-template-columns:96px 186px 1fr 44px;gap:20px}
.tf-row-body-in p{grid-column:3;margin:0;color:var(--n400);font-size:15.5px;line-height:1.7;max-width:62ch}
@media(max-width:820px){
  .tf-row-in{grid-template-columns:52px 1fr 34px;grid-template-rows:auto auto;gap:3px 14px;min-height:0;padding:17px 20px}
  .tf-row-n{grid-row:1/3;align-self:center;font-size:26px}
  .tf-row-k{grid-column:2;grid-row:1}
  .tf-row-t{grid-column:2;grid-row:2;font-size:19px}
  .tf-row.open .tf-row-t{transform:none}
  .tf-row-go{grid-column:3;grid-row:1/3;align-self:center;width:30px;height:30px}
  .tf-row-body-in{grid-template-columns:52px 1fr;padding:0 20px 20px;gap:14px}
  .tf-row-body-in p{grid-column:2;font-size:14px}
}

.tf-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.tf-step{position:relative;padding:26px 22px;border-radius:14px;border:1px solid var(--line);background:var(--surface);overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s}
.tf-step::before{content:"";position:absolute;top:0;left:0;height:4px;width:0;background:var(--accent);transition:width .4s ease}
.tf-step:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:var(--accent)}
.tf-step:hover::before{width:100%}
.tf-step .num{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:56px;line-height:1;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.5px var(--n600);transition:color .3s,-webkit-text-stroke-color .3s}
.tf-step:hover .num{color:var(--accent);-webkit-text-stroke-color:var(--accent)}
.tf-step:hover h3{color:var(--accent-300)}
.tf-step h3{font-size:20px;margin:14px 0 10px;color:var(--ink)}
.tf-step p{color:var(--n400);font-size:15px}

.tf-demos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tf-demo{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);transition:transform .25s,border-color .25s,box-shadow .25s;cursor:pointer}
.tf-demo:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow-md)}
.tf-demo .thumb{height:150px;position:relative;overflow:hidden;background:linear-gradient(140deg,var(--keep) 0%,var(--section) 60%,var(--accent-700) 100%)}
.tf-demo .thumb::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(145,132,217,.30),transparent 58%)}
.tf-demo .thumb .scan{position:absolute;inset:0;z-index:1;background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.4) 50%,transparent 60%);transform:translateX(-100%);transition:transform .6s}
.tf-demo .thumb .tf-demo-ph{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:rgba(255,255,255,.9)}
.tf-demo .thumb .tf-demo-ph svg{width:48px;height:48px;opacity:.95}
.tf-demo .thumb .tf-demo-ph span{font-family:'Inter';font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase}

.tf-demo:hover .thumb .scan{transform:translateX(100%)}
.tf-demo .meta{padding:16px 18px}
.tf-demo .meta .tag{font-family:'Inter';font-weight:600;font-size:10px;letter-spacing:.1em;color:var(--accent-300)}
.tf-demo .meta h4{font-family:'Space Grotesk',sans-serif;font-size:17px;margin:6px 0 0;font-weight:500;color:var(--ink)}

.tf-chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.tf-chip{font-family:'Inter';font-weight:500;font-size:12px;letter-spacing:.02em;padding:8px 16px;border:1px solid var(--line);border-radius:20px;color:var(--n400);cursor:pointer;background:var(--surface);transition:.2s}
.tf-chip:hover{color:var(--ink);border-color:var(--accent)}
.tf-chip.active{background:var(--accent);color:var(--ground);border-color:var(--accent)}

.tf-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.tf-tier{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:32px 28px;position:relative}
.tf-tier.feature{border:1px solid var(--accent);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 12%,var(--surface)),var(--surface))}
.tf-tier .badge{position:absolute;top:-11px;left:28px;background:var(--accent-800);color:var(--accent-100);font-family:'Inter';font-weight:600;font-size:10px;letter-spacing:.1em;padding:5px 11px;border-radius:6px}
.tf-tier h3{font-size:24px;margin-bottom:6px;color:var(--ink)}
.tf-tier .desc{color:var(--n400);font-size:14px;min-height:40px;margin-bottom:22px}
.tf-tier ul{list-style:none;margin-bottom:26px}
.tf-tier li{font-size:14px;color:var(--n200);padding:9px 0 9px 26px;position:relative;border-bottom:1px solid var(--line)}
.tf-tier li:last-child{border-bottom:none}
.tf-tier li::before{content:"";position:absolute;left:0;top:14px;width:11px;height:6px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.tf-tier .tf-btn{width:100%;justify-content:center}
.tf-pricing-note{text-align:center;color:var(--n500);font-size:14px;margin-top:30px;font-family:'Inter'}

.tf-cta-grad{background:linear-gradient(120deg,var(--section) 0%,var(--section-glow) 55%,var(--accent-800) 100%)}
.tf-band-cta{text-align:center;padding:80px 32px}
.tf-band-cta .tf-eyebrow{color:var(--accent-200)}
.tf-band-cta .tf-eyebrow::before{background:var(--accent-200)}
.tf-band-cta h2{font-size:clamp(30px,4vw,44px);margin:16px 0;color:var(--n100)}
.tf-band-cta p{color:var(--accent-200);font-size:17px;max-width:520px;margin:0 auto 28px}

.tf-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:640px}
.tf-form .full{grid-column:1/-1}
.tf-form label{display:block;font-family:'Inter';font-weight:600;font-size:11px;letter-spacing:.08em;color:var(--accent-300);margin-bottom:8px;text-transform:uppercase}
.tf-form input,.tf-form textarea{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px 14px;color:var(--ink);font-family:inherit;font-size:15px}
.tf-form input::placeholder,.tf-form textarea::placeholder{color:var(--n600)}
.tf-form input:focus,.tf-form textarea:focus{outline:none;border-color:var(--accent);caret-color:var(--accent);box-shadow:0 0 0 3px rgba(145,132,217,.18)}
.tf-form textarea{min-height:120px;resize:vertical}
.tf-start-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:0;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg)}
.tf-start-left{background:var(--keep);padding:48px 40px}
.tf-start-list{list-style:none;margin-top:26px;display:flex;flex-direction:column;gap:0}
.tf-start-list li{display:flex;align-items:center;gap:14px;color:var(--n100);font-size:15px;padding:14px 0;border-bottom:1px solid rgba(233,233,237,.10)}
.tf-start-list li:last-child{border-bottom:none}
.tf-start-list .tick{flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--keep);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.tf-start-right{background:var(--surface);padding:48px 40px}
.tf-start-right h3{font-size:26px;color:var(--ink)}
.tf-start-right .sub{color:var(--n400);font-size:14px;margin-top:6px;margin-bottom:24px}
.tf-start-form{display:flex;flex-direction:column;gap:16px}
.tf-start-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tf-start-form label{display:block;font-weight:500;font-size:12px;color:var(--n300);margin-bottom:7px}
.tf-start-form input,.tf-start-form select,.tf-start-form textarea{width:100%;background:var(--ground);border:1px solid var(--line);border-radius:8px;padding:12px 14px;color:var(--ink);font-family:inherit;font-size:15px}
.tf-start-form input::placeholder,.tf-start-form textarea::placeholder{color:var(--n600)}
.tf-start-form option{background:var(--ground);color:var(--ink)}
.tf-start-form input:focus,.tf-start-form select:focus,.tf-start-form textarea:focus{outline:none;border-color:var(--accent);caret-color:var(--accent);box-shadow:0 0 0 3px rgba(145,132,217,.18);background:var(--ground-deep)}
.tf-start-form textarea{min-height:90px;resize:vertical}
.tf-start-note{font-size:12px;color:var(--n500);text-align:center}
.tf-start-done{background:var(--ground);border:1px solid var(--accent);border-radius:12px;padding:28px}
.tf-start-done h4{font-size:20px;color:var(--ink);margin-bottom:8px}
.tf-start-done p{color:var(--n400);font-size:14px}
@media(max-width:900px){.tf-start-grid{grid-template-columns:1fr}.tf-start-form .row2{grid-template-columns:1fr}}
.tf-ind-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:56px;align-items:start}
.tf-ind-left h2{font-size:clamp(30px,4vw,44px);margin:16px 0 16px}
.tf-ind-left p{color:var(--n400);font-size:16px;line-height:1.7}
.tf-ind-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.tf-ind-card{position:relative;border-radius:16px;padding:26px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;cursor:pointer;transition:transform .3s,box-shadow .3s}
.tf-ind-card .tf-ind-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .5s ease}
.tf-ind-card::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(160deg,rgba(22,24,38,.45),rgba(43,39,65,.88))}
.tf-ind-card:hover .tf-ind-img{transform:scale(1.08)}
.tf-ind-card::after{content:"";position:absolute;right:-20px;bottom:-20px;width:80px;height:80px;border-radius:50%;background:rgba(145,132,217,.08);transition:background .3s}
.tf-ind-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.tf-ind-card:hover::after{background:var(--accent);opacity:.18}
.tf-ind-ic{position:relative;z-index:2;width:50px;height:50px;border-radius:12px;background:rgba(243,245,254,.12);display:flex;align-items:center;justify-content:center;transition:background .3s}
.tf-ind-ic svg{width:26px;height:26px;color:var(--n100)}
.tf-ind-card:hover .tf-ind-ic{background:var(--accent)}
.tf-ind-card:hover .tf-ind-ic svg{color:var(--keep)}
.tf-ind-card h4{position:relative;z-index:2;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:18px;color:var(--n100)}
@media(max-width:900px).tf-ind-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:56px;align-items:start}
.tf-ind-left{position:sticky;top:100px}
@media(max-width:520px){.tf-ind-cards{grid-template-columns:1fr}}
.tf-diff{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tf-diff-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:30px 26px;transition:transform .3s,box-shadow .3s,border-color .3s}
.tf-diff-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:var(--accent)}
.tf-diff-ic{width:52px;height:52px;border-radius:12px;background:var(--keep);display:flex;align-items:center;justify-content:center;margin-bottom:20px;transition:background .3s}
.tf-diff-ic svg{width:26px;height:26px;color:var(--accent);transition:color .3s}
.tf-diff-card:hover .tf-diff-ic{background:var(--accent)}
.tf-diff-card:hover .tf-diff-ic svg{color:var(--keep)}
.tf-diff-card h3{font-size:19px;color:var(--ink);margin-bottom:10px}
.tf-diff-card p{color:var(--n400);font-size:14px;line-height:1.65}
@media(max-width:1100px){.tf-diff{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.tf-diff{grid-template-columns:1fr}}
.tf-showcase{background:radial-gradient(ellipse at 50% -10%,var(--keep),var(--ground-deep) 72%);text-align:center;overflow:hidden}
.tf-showcase .tf-sec-head h2{color:var(--n100)}
.tf-showcase .tf-sec-head p{color:var(--n400)}
.tf-sc-scene{perspective:1200px;max-width:560px;height:400px;margin:0 auto}
.tf-sc-card{position:relative;width:100%;height:100%;border-radius:22px;transform-style:preserve-3d;transition:transform .18s ease-out;box-shadow:0 45px 90px rgba(0,0,0,.65);overflow:hidden}
.tf-sc-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tf-sc-shine{position:absolute;inset:0;background:radial-gradient(circle at 70% 15%,rgba(243,245,254,.16),transparent 55%);pointer-events:none}
.tf-sc-meta{position:absolute;left:0;right:0;bottom:0;text-align:left;padding:30px;background:linear-gradient(transparent,rgba(22,24,38,.94));transform:translateZ(40px)}
.tf-sc-meta h3{color:var(--n100);font-size:27px}
.tf-sc-meta p{color:var(--n300);font-size:15px;margin-top:6px}
.tf-sc-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:30px}
.tf-sc-arrow{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--n200);font-size:22px;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.tf-sc-arrow:hover{border-color:var(--accent);color:var(--accent-300);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.tf-sc-dots{display:flex;gap:8px}
.tf-sc-dots button{width:9px;height:9px;border-radius:50%;border:none;background:var(--n700);cursor:pointer;padding:0;transition:width .3s,background .3s}
.tf-sc-dots button.on{width:26px;border-radius:5px;background:var(--accent)}
@media(max-width:760px){.tf-sc-scene{height:300px}}
.tf-detail-list{list-style:none;display:grid;gap:12px}
.tf-detail-list li{position:relative;padding-left:30px;color:var(--n400);font-size:16px;line-height:1.6}
.tf-detail-list li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:7px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.tf-faq2{display:flex;flex-direction:column;gap:14px}
.tf-faq2-item{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .3s,box-shadow .3s,transform .3s}
.tf-faq2-item:hover{border-color:var(--accent);box-shadow:var(--shadow-md)}
.tf-faq2-item.open{border-color:var(--accent);box-shadow:var(--shadow-md)}
.tf-faq2-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;background:none;border:none;cursor:pointer;font-family:'Inter';font-weight:500;font-size:17px;color:var(--ink);text-align:left;padding:22px 24px;transition:color .25s}
.tf-faq2-item.open .tf-faq2-q{color:var(--accent-300)}
.tf-faq2-btn{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:400;background:var(--keep);color:var(--accent-300);transition:background .3s,color .3s,transform .3s}
.tf-faq2-item:hover .tf-faq2-btn{background:var(--accent);color:var(--keep)}
.tf-faq2-item.open .tf-faq2-btn{background:var(--accent);color:var(--keep);transform:rotate(180deg)}
.tf-faq2-a{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.22,1,.36,1)}
.tf-faq2-item.open .tf-faq2-a{max-height:300px}
.tf-faq2-a-in{padding:0 24px 24px;color:var(--n400);font-size:15px;line-height:1.7}
.tf-faq .q{padding:20px 0;border-bottom:1px solid var(--line);cursor:pointer}
.tf-faq .q h4{font-size:17px;font-weight:500;color:var(--ink);display:flex;justify-content:space-between;gap:16px;font-family:'Inter'}
.tf-faq .q p{color:var(--n400);font-size:15px;margin-top:12px}
.tf-faq .q .plus{color:var(--accent);font-weight:400}

.tf-values{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tf-value{padding:26px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.tf-value h3{font-size:19px;margin:12px 0 8px;color:var(--ink)}
.tf-value p{color:var(--n400);font-size:14px}
.tf-value .ic{width:38px;height:38px;color:var(--accent)}

.tf-foot{background:var(--keep);color:var(--n400);padding:60px 0 40px}
.tf-foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;margin-bottom:40px}
.tf-foot .tf-brand{color:var(--n100)}
.tf-foot .tf-brand svg{color:var(--n100)}
.tf-foot .tf-brand b{color:var(--accent-300)}
.tf-foot p.tag{color:var(--n400);font-size:14px;margin-top:14px;max-width:260px}
.tf-foot h5{font-family:'Inter';font-weight:600;font-size:10px;letter-spacing:.12em;color:var(--accent-300);text-transform:uppercase;margin-bottom:16px}
.tf-foot-drop{position:relative}
.tf-foot-menu{position:absolute;bottom:calc(100% + 8px);left:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:12px;min-width:220px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .25s;z-index:40}
.tf-foot-drop:hover .tf-foot-menu{opacity:1;visibility:visible;transform:translateY(0)}
.tf-foot-menu::after{content:"";position:absolute;top:100%;left:0;right:0;height:10px}
.tf-foot-menu button{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:inherit;font-size:14px;color:var(--n300);padding:8px 10px;border-radius:8px;transition:background .2s,color .2s}
.tf-foot-menu button:hover{background:var(--ground);color:var(--accent-300)}
.tf-foot .fl{display:block;background:none;border:none;color:var(--n400);font-size:14px;padding:6px 0;cursor:pointer;font-family:inherit;transition:color .2s;text-align:left}
.tf-foot .fl:hover{color:var(--accent-300)}
.tf-foot-bottom{border-top:1px solid var(--line-dark);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.tf-foot-bottom span{font-family:'Inter';font-size:12px;color:var(--n500)}


.reveal{opacity:0;transform:translateY(48px) scale(0.97);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
.tf-ind-cards.in > *,.tf-rows.in > *,.tf-steps.in > *,.tf-tiers.in > *,.tf-values.in > *,.tf-why.in > *,.tf-faq2.in > *{opacity:0;transform:translateY(30px);animation:tf-rise .7s cubic-bezier(.16,1,.3,1) forwards}
.tf-rows.in > *:nth-child(1),.tf-steps.in > *:nth-child(1),.tf-tiers.in > *:nth-child(1),.tf-values.in > *:nth-child(1),.tf-why.in > *:nth-child(1),.tf-faq2.in > *:nth-child(1){animation-delay:.05s}
.tf-rows.in > *:nth-child(2),.tf-steps.in > *:nth-child(2),.tf-tiers.in > *:nth-child(2),.tf-values.in > *:nth-child(2),.tf-why.in > *:nth-child(2),.tf-faq2.in > *:nth-child(2){animation-delay:.15s}
.tf-rows.in > *:nth-child(3),.tf-steps.in > *:nth-child(3),.tf-tiers.in > *:nth-child(3),.tf-values.in > *:nth-child(3),.tf-why.in > *:nth-child(3),.tf-faq2.in > *:nth-child(3){animation-delay:.25s}
.tf-rows.in > *:nth-child(4),.tf-steps.in > *:nth-child(4),.tf-why.in > *:nth-child(4),.tf-faq2.in > *:nth-child(4){animation-delay:.35s}
.tf-rows.in > *:nth-child(5),.tf-steps.in > *:nth-child(5),.tf-faq2.in > *:nth-child(5){animation-delay:.45s}
.tf-rows.in > *:nth-child(6),.tf-steps.in > *:nth-child(6),.tf-faq2.in > *:nth-child(6){animation-delay:.55s}
.tf-rows.in > *:nth-child(7),.tf-faq2.in > *:nth-child(7){animation-delay:.65s}
.tf-rows.in > *:nth-child(8){animation-delay:.75s}
.tf-ind-cards.in > *:nth-child(1){animation-delay:.05s}
.tf-ind-cards.in > *:nth-child(2){animation-delay:.13s}
.tf-ind-cards.in > *:nth-child(3){animation-delay:.21s}
.tf-ind-cards.in > *:nth-child(4){animation-delay:.29s}
.tf-ind-cards.in > *:nth-child(5){animation-delay:.37s}
.tf-ind-cards.in > *:nth-child(6){animation-delay:.45s}
.tf-ind-cards.in > *:nth-child(7){animation-delay:.61s}
.tf-ind-cards.in > *:nth-child(8){animation-delay:.61s}
@keyframes tf-rise{to{opacity:1;transform:none}}
.tf-stack{display:flex;flex-wrap:wrap;gap:14px}
.tf-marquee{width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tf-marquee-track{display:flex;gap:60px;width:max-content;animation:tf-scroll 30s linear infinite}
.tf-marquee:hover .tf-marquee-track{animation-play-state:paused}
.tf-stack-logo{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:130px;transition:transform .25s}
.tf-stack-logo:hover{transform:translateY(-5px)}
.tf-stack-logo img{width:46px;height:46px;object-fit:contain;opacity:.85;transition:opacity .25s}
.tf-stack-logo:hover img{opacity:1}
.tf-stack-logo span{font-family:'Inter';font-weight:500;font-size:13px;color:var(--n400)}
.tf-stack-chip:hover{border-color:var(--accent);color:var(--accent-300)}
.tf-marquee-track.rev{animation:tf-scroll-rev 30s linear infinite}
@keyframes tf-scroll-rev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes tf-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tf-why{display:flex;gap:16px;height:440px}
.tf-why-card{position:relative;flex:1;border-radius:16px;overflow:hidden;cursor:pointer;transition:flex .5s cubic-bezier(.22,1,.36,1);background:linear-gradient(160deg,var(--section),var(--keep));display:flex;align-items:flex-end;min-width:0}
.tf-why-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,24,38,.25),rgba(43,39,65,.90));z-index:1}
.tf-why-card:hover{flex:3.2}
.tf-why-card .tf-why-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.tf-why-card:hover .tf-why-img{transform:scale(1.08)}
.tf-why-card .in{position:relative;z-index:2;padding:28px;color:var(--n100)}
.tf-why-card .in .ic{width:42px;height:42px;margin-bottom:16px;color:var(--accent-300)}
.tf-why-card .in h4{font-family:'Space Grotesk',sans-serif;font-size:24px;font-weight:500;letter-spacing:-.015em;color:var(--n100);white-space:nowrap}
.tf-why-card .in p{margin-top:14px;font-size:14px;line-height:1.7;color:var(--n300);max-width:520px;opacity:0;max-height:0;overflow:hidden;transition:opacity .4s ease .1s,max-height .5s ease}
.tf-why-card:hover .in p{opacity:1;max-height:300px}
@media(max-width:900px){.tf-why{flex-direction:column;height:auto}.tf-why-card{flex:none;height:auto}.tf-why-card .in p{opacity:1;max-height:none}.tf-why-card:hover{flex:none}}


/* ══════════════════════════════════════════════════════════════════════════
   Contact, article pages, legal pages, consent and the mobile action bar
   ══════════════════════════════════════════════════════════════════════ */

/* — accessibility — */
.tf-skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:var(--ground);padding:10px 18px;border-radius:0 0 8px 0;font-weight:600}
.tf-skip:focus{left:0}
.tf-muted{color:var(--n500)}
.tf-ic-ph{width:15px;height:15px;flex:none}
.tf-btn-block{width:100%;justify-content:center}
.tf-lnk{background:none;border:0;padding:0;color:var(--accent-300);cursor:pointer;font:inherit;text-decoration:underline;text-underline-offset:3px}

/* — phone number in the nav — */

/* — sticky call/enquire bar, phones only — */
.tf-stickybar{display:none}
@media(max-width:820px){
  .tf-stickybar{
    display:grid;grid-template-columns:1fr 1.4fr;gap:10px;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--ground) 94%,transparent);
    backdrop-filter:blur(12px);border-top:1px solid var(--line);
  }
  .tf-stickybar .tf-btn{justify-content:center;padding:12px 14px}
  .tf-foot{padding-bottom:104px}   /* clear the bar */
}

/* — cookie consent — */
.tf-consent{
  position:fixed;left:14px;right:14px;bottom:14px;z-index:70;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  max-width:840px;margin:0 auto;padding:16px 20px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-lg);
}
.tf-consent p{margin:0;font-size:13.5px;color:var(--n300);max-width:54ch}
.tf-consent-btns{display:flex;gap:10px;flex:none}
@media(max-width:820px){
  .tf-consent{bottom:calc(74px + env(safe-area-inset-bottom));flex-direction:column;align-items:stretch;gap:12px}
  .tf-consent-btns .tf-btn{flex:1;justify-content:center}
}

/* — footer identity — */
.tf-foot-id{font-style:normal;margin-top:18px;font-size:13.5px;line-height:1.85;color:var(--n400)}
.tf-foot-id strong{color:var(--n200);font-weight:600}
.tf-foot-id a{color:var(--n300)}
.tf-foot-id a:hover{color:var(--accent-300)}
.tf-foot-hours{color:var(--n600);font-size:12.5px}

/* — "would rather just talk" callout under the form — */
.tf-callout{
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  margin-top:26px;padding:22px 24px;border-radius:14px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 14%,var(--surface)),var(--surface));
  border:1px solid var(--line);
}
.tf-callout h3{font-size:19px;margin:0 0 4px;color:var(--ink)}
.tf-callout p{margin:0;font-size:14px;color:var(--n400)}
.tf-callout-btns{display:flex;gap:10px;flex-wrap:wrap}
.tf-start-actions{display:flex;gap:10px;margin-top:6px}
.tf-start-actions .tf-btn{flex:1;justify-content:center}

/* — contact sidebar — */
.tf-contact-side{color:var(--n400);font-size:15px;line-height:1.9}
.tf-contact-h{font-family:'Inter';font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-300);margin-bottom:14px}
.tf-contact-side address{font-style:normal;margin-bottom:14px}
.tf-contact-side strong{color:var(--n200)}
.tf-contact-lnk{display:inline-flex;align-items:center;gap:8px;color:var(--n200)}
.tf-contact-lnk:hover{color:var(--accent-300)}

/* ── article pages ─────────────────────────────────────────────────────── */
.tf-art-hero{position:relative;overflow:hidden;background:var(--keep);padding:92px 0 56px;display:flex;align-items:flex-end;min-height:340px}
.tf-art-hero.has-img{min-height:420px}
.tf-art-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.tf-art-hero.has-img::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(22,24,38,.55) 0%,rgba(22,24,38,.72) 45%,rgba(22,24,38,.96) 100%)}
.tf-art-hero:not(.has-img)::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 70% 90% at 78% 30%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%)}
.tf-art-glyph{position:absolute;right:6%;top:50%;transform:translateY(-50%);width:240px;height:240px;color:var(--accent);opacity:.32;z-index:1}
.tf-art-hero-in{position:relative;z-index:2}
.tf-art-hero h1{font-size:clamp(30px,4.6vw,54px);margin:14px 0 14px;max-width:16ch;color:var(--n100)}
.tf-art-lead{font-size:clamp(16px,1.6vw,19px);color:var(--n300);max-width:60ch;margin:0 0 26px}
.tf-art-hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.tf-crumb{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--n500)}
.tf-crumb :is(button,a){background:none;border:0;padding:0;color:var(--n400);cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit}
.tf-crumb :is(button,a):hover{color:var(--accent-300)}
.tf-crumb em{font-style:normal;color:var(--accent-300)}

.tf-art-body{padding-top:56px}
.tf-art-cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:start}
.tf-art-main{min-width:0}
.tf-art-main p{color:var(--n400);font-size:16.5px;line-height:1.8;margin:0 0 18px;max-width:68ch}
.tf-art-standfirst{font-size:19px!important;line-height:1.7!important;color:var(--n300)!important}
.tf-art-sec{margin-top:40px}
.tf-art-sec h2{font-size:clamp(21px,2.3vw,28px);margin:0 0 16px;color:var(--n100)}
.tf-art-fig{margin:0 0 20px;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.tf-art-fig img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.tf-art-cta{margin-top:48px;padding:30px 32px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.tf-art-cta h2{font-size:23px;margin:0 0 8px;color:var(--ink)}
.tf-art-cta p{margin-bottom:20px!important}
.tf-art-cta-btns{display:flex;gap:11px;flex-wrap:wrap}

.tf-art-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:18px}
.tf-art-card{padding:24px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.tf-art-card h3{font-size:17px;margin:0 0 6px;color:var(--ink)}
.tf-art-card p{font-size:13.5px;color:var(--n400);margin:0 0 16px}
.tf-art-card .tf-btn{margin-bottom:9px}
.tf-art-hours{font-size:12px!important;color:var(--n600)!important;margin:6px 0 0!important;text-align:center}
.tf-art-rel{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tf-art-rel li{border-bottom:1px solid var(--line)}
.tf-art-rel li:last-child{border-bottom:0}
.tf-art-rel :is(button,a){display:block;width:100%;text-align:left;background:none;border:0;padding:11px 0;color:var(--n300);font:inherit;font-size:14.5px;cursor:pointer;transition:color .2s,padding-left .2s}
.tf-art-rel :is(button,a):hover{color:var(--accent-300);padding-left:5px}

/* ── legal pages ───────────────────────────────────────────────────────── */
.tf-legal{max-width:820px}
.tf-legal h1{font-size:clamp(28px,4vw,44px);margin:16px 0 10px}
.tf-legal-meta{font-size:13px;color:var(--n500);margin:0}
.tf-legal-intro{font-size:17px;line-height:1.8;color:var(--n300);margin:0 0 10px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.tf-legal-sec{margin-top:34px}
.tf-legal-sec h2{font-size:21px;margin:0 0 12px;color:var(--n100)}
.tf-legal-sec p{color:var(--n400);font-size:15.5px;line-height:1.8;margin:0 0 14px}
.tf-legal-contact{margin-top:46px;padding:28px 30px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.tf-legal-contact h2{font-size:19px;margin:0 0 14px;color:var(--ink)}
.tf-legal-contact p{color:var(--n400);font-size:15px;line-height:1.85;margin:0 0 16px}
.tf-legal-contact strong{color:var(--n200)}
.tf-legal-contact a{color:var(--accent-300)}

/* ── responsive ────────────────────────────────────────────────────────── */
@media(max-width:1000px){
  .tf-art-cols{grid-template-columns:1fr;gap:38px}
  .tf-art-side{position:static;flex-direction:row;flex-wrap:wrap}
  .tf-art-card{flex:1 1 260px}
}
@media(max-width:820px){
  .tf-art-hero{padding:76px 0 40px;min-height:0}
  .tf-art-hero.has-img{min-height:320px}
  .tf-art-glyph{width:150px;opacity:.2;right:-10px}
  .tf-art-hero h1{max-width:none}
  .tf-art-body{padding-top:40px}
  .tf-art-main p{font-size:15.5px}
  .tf-art-standfirst{font-size:17px!important}
  .tf-art-cta{padding:24px 22px}
  .tf-art-cta-btns .tf-btn,.tf-callout-btns .tf-btn{flex:1 1 100%;justify-content:center}
  .tf-callout{padding:20px}
  .tf-start-actions{flex-direction:column}
  .tf-legal-contact{padding:22px 20px}
  .tf-foot-grid{gap:28px}
}
/* Tap targets. Phones need ~44px of reachable height; the desktop footer
   links and nav items are far smaller than that by default. */
@media(max-width:820px){
  .tf-foot .fl{padding:11px 0;font-size:15px}
  .tf-links :is(button,a){padding:12px 0;font-size:16px}
  .tf-links.open{gap:2px;padding:10px 20px 18px}
  .tf-burger{padding:10px 13px;font-size:17px}
  .tf-mega-flat,.tf-mega-col :is(button,a){padding:12px 0}
  .tf-foot h5{margin-bottom:10px}
  .tf-sc-dots button,.tf-cf-dots button{min-height:22px;padding:6px 0;background-clip:content-box}
  .tf-chip{padding:11px 18px}
}
@media(max-width:560px){
  .tf-wrap{padding:0 20px}
  .tf-sec{padding:64px 0}
  .tf-sec-head{margin-bottom:34px}
  .tf-art-hero-cta{flex-direction:column;align-items:stretch}
  .tf-art-hero-cta .tf-btn{justify-content:center}
  .tf-art-side{flex-direction:column}
  .tf-crumb{font-size:10.5px;gap:6px}
}

@media(max-width:900px){
  .tf-hero-grid,.tf-steps,.tf-demos,.tf-tiers,.tf-values,.tf-foot-grid,.tf-form,.tf-contact-grid,.tf-diff{grid-template-columns:1fr!important}
  .tf-start-grid{grid-template-columns:1fr!important}
  .tf-stage{height:360px;order:-1;margin-top:0}
  .tf-hero{padding:56px 0 40px}
  .tf-links{display:none}
  .tf-links.open{display:flex;position:absolute;top:70px;left:0;right:0;flex-direction:column;align-items:flex-start;background:var(--surface);padding:16px 28px;border-bottom:1px solid var(--line);box-shadow:var(--shadow-md)}
  .tf-burger{display:inline-block}
}


.tf-work{background:var(--ground-deep);color:var(--n400);padding:120px 0 110px;position:relative;overflow:clip}
.tf-work::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(145,132,217,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(145,132,217,.07) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000,transparent 70%);mask-image:radial-gradient(ellipse at 50% 0%,#000,transparent 70%);pointer-events:none}
.tf-work .tf-eyebrow{color:var(--accent-300)}
.tf-work .tf-eyebrow::before{background:var(--accent)}
.tf-work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:64px;flex-wrap:wrap}
.tf-work-head h2{color:var(--n100);font-size:clamp(38px,5.4vw,68px);margin:18px 0 18px;letter-spacing:-.02em}
.tf-work-head h2 em{font-style:normal;color:var(--accent-300)}
.tf-work-head p{font-size:17px;max-width:520px;color:var(--n400)}

/* — the two counters — */
.tf-counts{display:flex;gap:40px;flex:none}
.tf-count{display:flex;align-items:baseline;gap:12px;color:var(--n100)}
.tf-count b{font-family:'Space Grotesk',sans-serif;font-size:72px;line-height:.9;font-weight:500;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.4px var(--n500)}
.tf-count.live b{-webkit-text-stroke-color:var(--accent);color:transparent}
.tf-count span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--n500);line-height:1.5}

/* ── the grid ──────────────────────────────────────────────────────────
   Boxes show sector + name only. Detail arrives on hover / focus / tap. */
.tf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tf-box{
  --acc:var(--accent); --pg:var(--keep);
  position:relative;display:block;overflow:hidden;
  aspect-ratio:4/3.1;border-radius:18px;text-decoration:none;color:inherit;cursor:pointer;
  background:
    radial-gradient(ellipse 120% 90% at 82% 8%, color-mix(in srgb,var(--acc) 30%,transparent), transparent 62%),
    linear-gradient(165deg, color-mix(in srgb,var(--acc) 9%,var(--pg)) 0%, var(--pg) 62%);
  border:1px solid rgba(233,233,237,.10);
  transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .35s,box-shadow .45s;
}
.tf-box:hover,.tf-box:focus-visible{transform:translateY(-7px);border-color:color-mix(in srgb,var(--acc) 65%,transparent);box-shadow:0 26px 60px rgba(0,0,0,.6)}
.tf-box:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* ── the client's own hero picture ────────────────────────────────────
   Sits above the brand gradient, below everything that carries text. If
   the file is missing or the request fails the <img> is dropped and the
   gradient underneath is what you see, so a card is never broken. */
.tf-box-shot{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.tf-box-shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.95) brightness(.95);
  transform:scale(1.01);
  /* Only a hint of movement: the picture is a screenshot with a colour band
     baked into it, and a big zoom drags that band around. */
  transition:transform .85s cubic-bezier(.22,1,.36,1),filter .5s;
}
.tf-box:hover .tf-box-shot img,.tf-box:focus-visible .tf-box-shot img,.tf-box.shown .tf-box-shot img{
  transform:scale(1.05);filter:saturate(1) brightness(1.03);
}

/* A light brand tint over the picture. The picture already dissolves into the
   brand colour where the type sits, so this only has to tie the card to the
   client's accent and settle the very bottom — it deliberately leaves the
   screenshot itself alone. */
.tf-box-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,
      transparent 0%,
      transparent 44%,
      color-mix(in srgb,var(--pg) 34%,transparent) 74%,
      color-mix(in srgb,var(--pg) 72%,transparent) 100%),
    linear-gradient(150deg, color-mix(in srgb,var(--acc) 13%,transparent), transparent 46%);
}

/* faint brand motif, top-right */
.tf-box-motif{position:absolute;right:-38px;top:-38px;width:190px;height:190px;border-radius:50%;border:26px solid var(--acc);opacity:.16;pointer-events:none;transition:opacity .45s,transform .6s cubic-bezier(.22,1,.36,1)}
.tf-box:hover .tf-box-motif{opacity:.26;transform:scale(1.12)}
/* over a photograph the ring reads as clutter — keep it, quietly */
.tf-box.has-shot .tf-box-motif{opacity:.09;z-index:1}
.tf-box.has-shot:hover .tf-box-motif{opacity:.16}

/* Top-RIGHT, and on its own pill: it now sits over a screenshot of the
   client's own home page, which has its own eyebrow text up the left. */
.tf-box-live{position:absolute;top:14px;right:14px;z-index:3;display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--n200)}
.tf-box.has-shot .tf-box-live{
  padding:5px 10px 5px 9px;border-radius:999px;color:#fff;
  background:color-mix(in srgb,var(--pg) 66%,transparent);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.tf-box-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 26%,transparent)}

/* resting face */
.tf-box-face{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;gap:8px;transition:opacity .35s,transform .45s cubic-bezier(.22,1,.36,1)}
/* The client's mark belongs in the brand-coloured band with the sector and
   the name, not floating over the screenshot — up there it landed on their
   own headline, and a pale wordmark on a pale hero vanished. */
.tf-box-logo{height:26px;display:flex;align-items:center;margin-bottom:4px}
.tf-box-logo img{height:26px;width:auto;max-width:150px;object-fit:contain;display:block}
.tf-box-logo.plate{background:#FBF6EF;border-radius:7px;padding:4px 9px;height:32px;align-self:flex-start;margin-bottom:4px}
.tf-box-logo.plate img{height:22px;max-width:130px}
.tf-box-sector{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.tf-box-name{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:clamp(22px,2.2vw,28px);line-height:1.1;letter-spacing:-.02em;color:#fff}
/* a shadow only where there is a picture to read against */
.tf-box.has-shot .tf-box-name{text-shadow:0 2px 18px rgba(0,0,0,.55)}
.tf-box.has-shot .tf-box-sector{text-shadow:0 1px 10px rgba(0,0,0,.6)}
.tf-box.has-shot .tf-box-live{text-shadow:0 1px 10px rgba(0,0,0,.7)}
.tf-box:hover .tf-box-face,.tf-box:focus-visible .tf-box-face{opacity:0;transform:translateY(-10px)}

/* detail, revealed */
.tf-box-detail{
  position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;
  padding:26px;gap:12px;opacity:0;transform:translateY(14px);pointer-events:none;
  /* Opaque enough at the bottom that a paragraph stays readable over a
     photograph, still letting the top of the picture through. */
  background:linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb,var(--pg) 55%,transparent) 20%,
    color-mix(in srgb,var(--pg) 90%,transparent) 44%,
    color-mix(in srgb,var(--pg) 97%,transparent) 100%);
  transition:opacity .35s ease .05s,transform .45s cubic-bezier(.22,1,.36,1) .05s;
}
.tf-box:hover .tf-box-detail,.tf-box:focus-visible .tf-box-detail{opacity:1;transform:none}
.tf-box-detail .tf-box-sector{margin-bottom:-4px}
.tf-box-detail h3{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:21px;line-height:1.15;letter-spacing:-.015em;color:#fff;margin:0}
.tf-box-detail p{margin:0;font-size:13px;line-height:1.6;color:rgba(255,255,255,.78)}
.tf-box-tags{display:flex;flex-wrap:wrap;gap:6px}
.tf-box-tags span{font-size:10px;letter-spacing:.02em;color:#fff;background:color-mix(in srgb,var(--acc) 42%,transparent);padding:4px 9px;border-radius:999px}
.tf-box-go{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--acc);margin-top:2px}
.tf-box-go i{font-style:normal;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--acc);color:var(--pg);font-size:11px;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.tf-box:hover .tf-box-go i{transform:rotate(45deg)}

/* On touch there is no hover: the first tap reveals the detail (the box gets
   .shown), the second follows the link. */
.tf-box.shown .tf-box-face{opacity:0;transform:translateY(-10px)}
.tf-box.shown .tf-box-detail{opacity:1;transform:none}
.tf-box.shown{border-color:color-mix(in srgb,var(--acc) 65%,transparent)}

@media(max-width:1000px){ .tf-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:820px){
  .tf-work{padding:90px 0 80px}
  .tf-work-head{margin-bottom:44px}
  .tf-counts{gap:28px}
  .tf-count b{font-size:54px}
}
@media(max-width:560px){
  .tf-grid{grid-template-columns:1fr;gap:16px}
  .tf-box{aspect-ratio:4/3.4}
  .tf-box-detail p{font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){
  .tf-box,.tf-box-face,.tf-box-detail,.tf-box-motif,.tf-box-shot img{transition:none}
  .tf-box:hover .tf-box-shot img{transform:scale(1.04)}
}