:root{
  --teal:#125b6b;--teal-l:#1a7a8f;--teal-d:#0e4753;--teal-dd:#0a3540;
  --ink:#1c2522;--ink2:#2c332f;--ink-soft:rgba(28,37,34,.66);--ink-faint:rgba(28,37,34,.42);
  --paper:#e7e4dc;--paper2:#efece5;--paper3:#f4f1ea;--white:#fff;
  --teal-tint:rgba(18,91,107,.05);
  --line:rgba(28,37,34,.16);--line-2:rgba(28,37,34,.09);
  --ease:cubic-bezier(.22,1,.36,1);--ease-io:cubic-bezier(.76,0,.24,1);
  --maxw:1280px;
}
*{margin:0;padding:0;box-sizing:border-box}
html.js{overflow:hidden}
body{font-family:'Figtree',system-ui,sans-serif;background:var(--paper);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
@media(hover:hover){body{cursor:none}}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 48px}
/* headlines: generous, tasteful leading */
h1,h2,h3{font-weight:800;letter-spacing:-.025em;text-wrap:balance}
h1{line-height:1.12}h2{line-height:1.14}h3{line-height:1.2}
/* mobile: every headline is a black lead clause + a trailing teal emphasis clause
   (.t). Break at that seam so each part sits on its own balanced line(s) — a
   deliberate two-tier headline, instead of ragged wraps that orphan a word. */
@media(max-width:760px){h1 .t,h2 .t{display:block}}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;font-size:10.5px;color:var(--teal)}
.eyebrow::before{content:"";width:30px;height:1px;background:var(--teal)}
.eyebrow.on-teal{color:rgba(255,255,255,.85)}.eyebrow.on-teal::before{background:rgba(255,255,255,.55)}
.thin{font-weight:200}
.plate{display:inline-flex;align-items:center;gap:11px}
.plate .pn{font-weight:800;font-size:11px;letter-spacing:.05em;border:1px solid var(--teal);color:var(--teal);padding:3px 7px}
.plate .pt{font-weight:700;letter-spacing:.26em;text-transform:uppercase;font-size:10.5px;color:var(--teal)}
.sec-h{font-size:clamp(28px,4vw,52px)}.sec-h .t{color:var(--teal)}
/* phones: shrink section headlines so the teal emphasis clause fits on one line
   instead of orphaning a word (e.g. "not an" / "account manager."), and drop the
   desktop-tuned max-width:Nch that forced early, awkward wraps. */
@media(max-width:600px){.sec-h{font-size:clamp(23px,6.4vw,28px);max-width:none!important}}
/* phones: open the leading on body copy so paragraphs don't read clumped. Scoped
   to <section> paragraphs (footer taglines etc. are excluded); !important so it
   beats both the tighter class rules and the inline line-heights on lead copy. */
@media(max-width:600px){section p{line-height:1.72!important}}

/* cursor */
/* The outer .cur only ever gets a `transform:translate()` for position (composited, no layout).
   The visible ring is a ::before that scales via transform for the "big" hover state — animating
   width/height/margin instead (the old way) forced a layout+repaint on the cursor every time it
   swept across a link/reel, which showed up as periodic micro-stutter during continuous movement. */
.cur{position:fixed;top:0;left:0;width:28px;height:28px;margin:-14px 0 0 -14px;z-index:9000;pointer-events:none;will-change:transform;backface-visibility:hidden;transition:opacity .35s}
.cur::before{content:"";position:absolute;inset:0;border:1px solid var(--teal);border-radius:50%;background:transparent;will-change:transform;transition:transform .4s var(--ease),background .4s var(--ease),border-color .35s,box-shadow .35s}
.curdot{position:fixed;top:0;left:0;width:4px;height:4px;background:var(--teal);border-radius:50%;margin:-2px 0 0 -2px;z-index:9001;pointer-events:none;will-change:transform;transition:background .3s var(--ease)}
.cur.big::before{transform:scale(2.07);background:rgba(18,91,107,.06);border-color:rgba(18,91,107,.5)}
.cur.on-dark::before{border-color:rgba(255,255,255,.85);box-shadow:0 1px 10px rgba(0,0,0,.28)}.cur.on-dark.big::before{background:rgba(255,255,255,.12);border-color:#fff}.curdot.on-dark{background:#fff}
@media(hover:none){.cur,.curdot{display:none}}

/* frame */
.frame{position:fixed;inset:16px;z-index:300;pointer-events:none}
.frame i{position:absolute;width:15px;height:15px;border:1px solid rgba(28,37,34,.4)}
.frame i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.frame i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.frame i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.frame i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
.frame.on-dark i{border-color:rgba(255,255,255,.4)}

/* INTRO (minimal, typographic) */
.intro{position:fixed;inset:0;z-index:9999;background:var(--paper);display:flex;align-items:center;justify-content:center;flex-direction:column;overflow:hidden;clip-path:inset(0 0 0 0)}
.intro-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.intro-chev{width:148px;height:148px;margin-bottom:24px;display:block}
.intro-lbl{font-weight:700;letter-spacing:.34em;text-transform:uppercase;font-size:10px;color:var(--teal);margin-bottom:26px;opacity:0}
.intro-count{font-weight:200;font-size:clamp(64px,12vw,128px);line-height:.9;letter-spacing:-.05em;color:var(--ink);display:flex;align-items:flex-start}
.intro-count .pct{font-size:.26em;font-weight:400;color:var(--teal);margin-top:.6em;margin-left:.14em}
.intro-status{font-weight:700;letter-spacing:.32em;text-transform:uppercase;font-size:10px;color:var(--teal);min-height:13px;margin-top:26px}
.intro-line{width:min(320px,56vw);height:1px;background:var(--line);margin-top:24px;position:relative;overflow:hidden}
.intro-line .fill{position:absolute;inset:0;background:var(--teal);transform:scaleX(0);transform-origin:left}
.intro-meta{position:absolute;bottom:34px;left:0;right:0;display:flex;justify-content:space-between;padding:0 40px;color:var(--ink-soft);font-weight:700;letter-spacing:.22em;font-size:9px;text-transform:uppercase}
.intro-fig{position:absolute;top:34px;left:40px;color:var(--teal);font-weight:700;letter-spacing:.22em;font-size:9px}

/* nav */
header.nav{position:fixed;top:0;left:0;right:0;z-index:500;padding:26px 0;transition:padding .5s var(--ease),background .5s var(--ease),border-color .5s;border-bottom:1px solid transparent}
header.nav.solid{background:rgba(231,228,220,.97);padding:15px 0;border-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:11px}
.logo-ic{height:30px;width:auto;display:block;transition:height .4s var(--ease)}
.solid .logo-ic{height:26px}
.logo-wm{font-weight:800;font-size:13px;line-height:1.04;letter-spacing:.005em;color:var(--ink);text-transform:uppercase}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);position:relative;padding:5px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--teal);transition:width .35s var(--ease)}
.nav-links a:hover{color:var(--ink)}.nav-links a:hover::after{width:100%}
.nav-links a.active{color:var(--teal)}.nav-links a.active::after{width:100%}
.nav-cta{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:12px 22px;border:1px solid var(--ink);transition:.35s var(--ease)}
.nav-cta:hover{background:var(--ink);color:var(--paper)}
.nav-burger{display:none;flex-direction:column;gap:5px;background:0;border:0}
.nav-burger span{width:24px;height:1.5px;background:var(--ink);display:block}
@media(max-width:980px){.nav-links{display:none}.nav-burger{display:flex}.nav-cta{display:none}}

/* mobile nav overlay: full-screen teal panel opened by the burger */
.mnav{position:fixed;inset:0;z-index:8600;background:radial-gradient(130% 130% at 30% 20%,var(--teal-l) 0%,var(--teal) 42%,var(--teal-dd) 100%);color:#fff;display:flex;flex-direction:column;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-14px);transition:opacity .38s var(--ease),transform .42s var(--ease),visibility 0s .42s}
.mnav.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity .38s var(--ease),transform .42s var(--ease),visibility 0s}
.mnav .halftone{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.5) 1px,transparent 1.4px);background-size:14px 14px;opacity:.06;mask-image:radial-gradient(85% 75% at 50% 25%,#000,transparent);pointer-events:none}
.mnav-c{position:absolute;width:15px;height:15px;border:1px solid rgba(255,255,255,.32)}
.mnav-c.tl{top:20px;left:20px;border-right:0;border-bottom:0}
.mnav-c.tr{top:20px;right:20px;border-left:0;border-bottom:0}
.mnav-c.bl{bottom:20px;left:20px;border-right:0;border-top:0}
.mnav-c.br{bottom:20px;right:20px;border-left:0;border-top:0}
.mnav-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:22px 24px}
.mnav-top .logo{display:flex;align-items:center;gap:10px}
.mnav-top .logo-ic{height:28px}
.mnav-top .logo-wm{font-weight:800;font-size:13px;color:#fff;line-height:1.1}
.mnav-close{position:relative;width:38px;height:38px;background:transparent;border:1px solid rgba(255,255,255,.3);border-radius:50%;flex:none}
.mnav-close span{position:absolute;top:50%;left:50%;width:15px;height:1px;background:#fff}
.mnav-close span:first-child{transform:translate(-50%,-50%) rotate(45deg)}
.mnav-close span:last-child{transform:translate(-50%,-50%) rotate(-45deg)}
.mnav-links{position:relative;z-index:2;flex:1;overflow-y:auto;padding:4px 24px 20px;display:flex;flex-direction:column}
.mnav-links>a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 1px;border-bottom:1px solid rgba(255,255,255,.16);font-size:21px;font-weight:700;letter-spacing:-.01em;color:#fff}
.mnav-links>a .mn{font-size:10.5px;font-weight:700;color:rgba(255,255,255,.4);letter-spacing:.1em}
.mnav-links>a.active{color:rgba(255,255,255,.55)}
.mnav-links>a.active .mn{color:rgba(255,255,255,.3)}
.mnav-sub-wrap{border-bottom:1px solid rgba(255,255,255,.16)}
.mnav-sub-btn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 1px;background:transparent;border:0;font-family:inherit;font-size:21px;font-weight:700;letter-spacing:-.01em;color:#fff;cursor:pointer}
.mnav-sub-btn span.active{color:rgba(255,255,255,.55)}
.mnav-car{font-size:15px;color:rgba(255,255,255,.5);transition:transform .35s var(--ease)}
.mnav-sub-wrap.open .mnav-car{transform:rotate(180deg)}
.mnav-sub{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.mnav-sub-wrap.open .mnav-sub{max-height:340px}
.mnav-sub-in{padding-bottom:8px}
.mnav-sub-in a{display:block;padding:10px 1px 10px 16px;font-size:14.5px;font-weight:600;color:rgba(255,255,255,.75);border-left:1px solid rgba(255,255,255,.28)}
.mnav-sub-in a.active{color:#fff}
.mnav-bottom{position:relative;z-index:2;padding:18px 24px 26px}
.mnav-bottom .btn-solid{width:100%;justify-content:center;background:#fff;color:var(--teal-d)}
.mnav-coord{margin-top:16px;text-align:center;font-size:9px;font-weight:700;letter-spacing:.16em;color:rgba(255,255,255,.45);text-transform:uppercase}
@media(min-width:981px){.mnav{display:none!important}}
@media(prefers-reduced-motion:reduce){.mnav,.mnav *{transition:none!important}}

/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;padding:150px 0 90px;position:relative;overflow:hidden}
.hero .gridbg{position:absolute;inset:0;z-index:0;background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(120% 90% at 70% 40%,#000 25%,transparent 78%)}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.12fr .88fr;gap:64px;align-items:center;width:100%}
.hero-l .plate{margin-bottom:30px}
.hero h1{font-size:clamp(38px,5.2vw,74px);letter-spacing:-.035em;font-weight:800;line-height:1.1}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.hero h1 .ln>span{display:block;transform:translateY(110%)}
.hero h1 .t{color:var(--teal)}
.hero .sub{margin-top:30px;max-width:46ch;font-size:clamp(15px,1.5vw,18px);font-weight:400;color:var(--ink-soft);line-height:1.65}
.hero .cta-row{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:11px;font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:17px 28px;transition:transform .3s var(--ease),background .3s,color .3s,box-shadow .4s}
.btn-solid{background:var(--teal);color:#fff;box-shadow:0 10px 30px -14px rgba(18,91,107,.6)}
.btn-solid:hover{background:var(--teal-d)}
.btn-ghost{border:1px solid var(--line);color:var(--ink)}.btn-ghost:hover{border-color:var(--ink)}
.btn .arr{transition:transform .3s var(--ease)}.btn:hover .arr{transform:translateX(5px)}
.hero-meta{margin-top:50px;display:flex;gap:40px;border-top:1px solid var(--line);padding-top:24px;max-width:480px}
.hero-meta .m .k{font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}
.hero-meta .m .v{font-weight:200;font-size:32px;letter-spacing:-.03em;margin-top:8px}
.hero-meta .m .v small{font-size:.5em;font-weight:400;color:var(--ink-soft)}

/* hero particle mark */
.hero-canvas{width:100%;aspect-ratio:1/1;display:block}
.hero-cap{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:10px;padding-top:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:9px;color:var(--teal)}
/* hero department index (replaces node diagram) */
.hero-r{position:relative}
.dept-index{border-top:1px solid var(--ink)}
.di-cap{display:flex;justify-content:space-between;font-weight:700;letter-spacing:.22em;text-transform:uppercase;font-size:9px;color:var(--teal);padding:14px 2px}
.di-row{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:18px 2px;border-bottom:1px solid var(--line)}
.di-n{font-weight:200;font-size:26px;letter-spacing:-.03em;color:var(--ink-faint);transition:color .45s var(--ease)}
.di-l{font-weight:700;font-size:clamp(17px,1.7vw,21px);letter-spacing:-.02em;color:var(--ink);transition:color .45s var(--ease)}
.di-tag{font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:8.5px;color:var(--ink-faint);transition:color .45s var(--ease)}
.di-row .di-prog{position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--teal);transform:scaleX(0);transform-origin:left;opacity:0}
.di-row.on .di-n{color:var(--teal)}
.di-row.on .di-l{color:var(--teal)}
.di-row.on .di-tag{color:var(--teal)}
.di-foot{display:flex;justify-content:space-between;align-items:center;padding:16px 2px 0;color:var(--ink-soft);font-weight:600;font-size:12px;letter-spacing:.02em}
.di-foot .fig{color:var(--teal);font-weight:700;letter-spacing:.2em;font-size:9px;text-transform:uppercase}
@media(max-width:980px){.hero .wrap{grid-template-columns:1fr;gap:50px}.hero-r{max-width:520px}}

/* ticker */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper3);overflow:hidden;padding:16px 0;white-space:nowrap}
.ticker .track{display:inline-flex;will-change:transform;animation:marq 34s linear infinite}
.ticker .track span{font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);padding:0 26px;display:inline-flex;gap:26px;align-items:center}
.ticker .track span::after{content:"";width:4px;height:4px;background:var(--teal);border-radius:50%}
@keyframes marq{to{transform:translateX(-50%)}}

/* STATS */
.stats{background:var(--white);padding:110px 0}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:0 30px;border-left:1px solid var(--line)}
.stat:first-child{padding-left:0;border-left:0}
.stat .n{font-weight:200;font-size:clamp(46px,6vw,82px);letter-spacing:-.05em;line-height:.86;color:var(--ink)}
.stat .n .u{color:var(--teal);font-weight:400}
.stat .l{margin-top:16px;color:var(--ink-soft);font-size:13.5px;line-height:1.5;max-width:22ch}
@media(max-width:880px){.stat-grid{grid-template-columns:1fr 1fr;gap:44px 0}.stat:nth-child(3){padding-left:0;border-left:0}}
@media(max-width:560px){.stat-grid{gap:38px 26px;margin-top:44px!important}.stat{padding:0;border-left:0}.stat:nth-child(2),.stat:nth-child(4){padding-left:26px;border-left:1px solid var(--line)}.stat .l{margin-top:12px;max-width:none;font-size:13px}}

/* COMPARISON TABLE */
.cmp{background:var(--paper);padding:120px 0;position:relative;overflow:hidden}
.ghostnum{position:absolute;font-weight:200;color:rgba(18,91,107,.05);letter-spacing:-.06em;line-height:.8;pointer-events:none;z-index:0}
.cmp .ghostnum{right:-1%;top:1%;font-size:26vw}
.cmp .wrap{position:relative;z-index:1}
.ctable{margin-top:54px;border-top:1px solid var(--ink)}
.crow{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.15fr;border-bottom:1px solid var(--line)}
.crow.htr{border-bottom:1px solid var(--ink)}
.crow .cell{padding:20px 22px;font-size:14px;color:var(--ink-soft);line-height:1.5}
.crow .cell.rowh{color:var(--ink);font-weight:700;display:flex;gap:12px;align-items:flex-start}
.crow .cell.rowh .rn{color:var(--teal);font-weight:800;font-size:12px;margin-top:2px}
.crow .cell.us{background:var(--teal-tint);color:var(--ink);font-weight:500}
.crow.htr .cell{padding:16px 22px;font-weight:800;letter-spacing:.04em;color:var(--ink);font-size:13px;text-transform:uppercase}
.crow.htr .cell.us{color:var(--teal);position:relative}
.crow.htr .cell.us .rec{display:block;font-size:8.5px;letter-spacing:.2em;color:var(--teal);font-weight:700;margin-bottom:5px}
.ctable .crow:last-child .cell.us{box-shadow:inset 0 -2px 0 var(--teal)}
@media(max-width:880px){
  .ctable{border-top:0}
  .crow{grid-template-columns:1fr;border-bottom:0;margin-bottom:26px}
  .crow.htr{display:none}
  .crow .cell{padding:11px 14px;border:1px solid var(--line);border-bottom:0}
  .crow .cell.rowh{background:var(--ink);color:#fff;font-size:13px}
  .crow .cell.rowh .rn{color:#fff}
  .crow .cell:last-child{border-bottom:1px solid var(--line)}
  .crow .cell::before{content:attr(data-c);display:block;font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:6px}
  .crow .cell.rowh::before{display:none}
  .crow .cell.us{border-color:var(--teal)}
}

/* METHOD */
.method{background:var(--white);padding:120px 0;position:relative;overflow:hidden}
.method .ghostnum{right:2%;top:-4%;font-size:30vw}
.method .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.method h2{font-size:clamp(30px,4.2vw,54px);max-width:14ch}.method h2 .t{color:var(--teal)}
.method .body p{font-size:17px;color:var(--ink-soft);line-height:1.65;margin-bottom:20px}
.method .body p strong{color:var(--ink);font-weight:700}
@media(max-width:880px){.method .wrap{grid-template-columns:1fr;gap:34px}}

/* WORK / reel wall */
.work{background:var(--paper);padding:120px 0;position:relative;overflow:hidden}
.work .filters{display:flex;gap:10px;flex-wrap:wrap;margin-top:40px}
.work .filters button{font-family:inherit;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);background:transparent;border:1px solid var(--line);padding:11px 18px;cursor:none;transition:.3s var(--ease)}
.work .filters button.active{background:var(--teal);color:#fff;border-color:var(--teal)}
.reels{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
.reel{aspect-ratio:9/16;background:var(--paper3);border:1px solid var(--line);position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:16px;transition:border-color .3s,transform .4s var(--ease)}
.reel:hover{border-color:var(--teal);transform:translateY(-4px)}
.reel::before{content:"";position:absolute;top:14px;right:14px;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;background:linear-gradient(transparent 9px,var(--ink-faint) 9px,var(--ink-faint) 21px,transparent 21px),linear-gradient(90deg,transparent 13px,var(--ink-faint) 13px,var(--ink-faint) 17px,transparent 17px)}
.reel .rcat{font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.reel .rn{position:absolute;top:14px;left:14px;font-weight:200;font-size:22px;color:var(--ink-faint)}
.reel.live{background-size:cover;background-position:center}
.reel.live::before{display:none}
.reel.live::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,40,47,.12) 0%,transparent 32%,transparent 56%,rgba(8,40,47,.74));pointer-events:none}
.reel.live .rn{color:rgba(255,255,255,.72);font-weight:700;font-size:9px;letter-spacing:.18em;top:13px;z-index:3}
.reel.live .rcat{position:relative;z-index:3;color:#fff}
.reel.live .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px -10px rgba(0,0,0,.5);transition:transform .45s var(--ease);z-index:3}
.reel.live .play::before{content:"";width:0;height:0;border-left:13px solid var(--teal);border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px}
.reel.live:hover .play{transform:translate(-50%,-50%) scale(1.1)}
.reel.ph{background:radial-gradient(120% 100% at 30% 16%,#1c7e93,#125b6b 48%,#0d4451);border-color:rgba(255,255,255,.14);cursor:default}
.reel.ph::before{content:"";position:absolute;inset:0;top:0;right:0;width:auto;height:auto;border:0;border-radius:0;background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1.4px);background-size:12px 12px;-webkit-mask-image:radial-gradient(120% 100% at 30% 16%,#000,transparent 80%);mask-image:radial-gradient(120% 100% at 30% 16%,#000,transparent 80%);opacity:.5}
.reel.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,40,47,.5));pointer-events:none}
.reel.ph .rn{color:rgba(255,255,255,.5);font-weight:700;font-size:9px;letter-spacing:.18em;top:13px}
.reel.ph .rcat{position:relative;z-index:2;color:#fff}
.reel.ph:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.28)}
.reel-empty{margin-top:36px;font-size:13px;color:var(--ink-faint);letter-spacing:.02em;border-left:1px solid var(--teal);padding-left:14px}
.work .note{margin-top:22px;font-size:12.5px;color:var(--ink-faint);border-left:1px solid var(--teal);padding-left:14px;max-width:60ch}
@media(max-width:880px){.reels{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.work .filters{gap:8px;margin-top:30px}.work .filters button{font-size:9px;letter-spacing:.1em;padding:9px 12px}}

/* FILMS — long-form, 4:3 cinematic pieces. Distinct from the reel wall: fewer, larger,
   the same "case file" schematic language (ghost number, dimension tick, corner brackets)
   used on the case-study cover tiles, just laid out for landscape footage, not vertical. */
.filmswrap{margin-top:64px}
.filmshead{display:flex;align-items:baseline;justify-content:space-between;gap:16px 22px;flex-wrap:wrap;margin-bottom:26px}
.filmscap{font-size:12.5px;color:var(--ink-faint);max-width:48ch}
.filmgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* placeholder film card (no video wired yet): no play button, not clickable */
.filmcard.ph{cursor:default}
.filmcard.ph .play{display:none}
.filmcard{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border:1px solid rgba(255,255,255,.14);cursor:none;
  background:radial-gradient(130% 125% at 22% 14%,#1c7e93 0%,#125b6b 46%,#0a3540 100%);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.filmcard::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.5px);background-size:13px 13px;
  -webkit-mask-image:radial-gradient(120% 110% at 24% 16%,#000,transparent 78%);mask-image:radial-gradient(120% 110% at 24% 16%,#000,transparent 78%);opacity:.5;pointer-events:none}
.filmcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(6,30,36,.65));pointer-events:none}
.filmcard .gh{position:absolute;right:14px;bottom:6px;z-index:1;color:#fff;opacity:.13;font-weight:200;font-size:clamp(64px,9vw,128px);letter-spacing:-.05em;line-height:.78}
.filmcard .secl{position:absolute;top:16px;left:18px;z-index:2;font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:9px;color:rgba(255,255,255,.92)}
.filmcard .fileno{position:absolute;top:16px;right:18px;z-index:2;font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:9px;color:rgba(255,255,255,.6)}
.filmcard .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.95);
  display:flex;align-items:center;justify-content:center;box-shadow:0 14px 34px -12px rgba(0,0,0,.55);z-index:2;transition:transform .45s var(--ease)}
.filmcard .play::before{content:"";width:0;height:0;border-left:15px solid var(--teal);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:3px}
.filmcard .dim{position:absolute;left:20px;right:20px;bottom:52px;height:1px;background:rgba(255,255,255,.32);z-index:2}
.filmcard .dim::before,.filmcard .dim::after{content:"";position:absolute;bottom:-3px;width:1px;height:7px;background:rgba(255,255,255,.32)}
.filmcard .dim::before{left:0}.filmcard .dim::after{right:0}
.filmcard .ti{position:absolute;left:20px;right:20px;bottom:26px;z-index:2;font-weight:700;font-size:15px;line-height:1.25;color:#fff;letter-spacing:-.01em}
.filmcard .cl{position:absolute;left:20px;right:20px;bottom:12px;z-index:2;font-weight:700;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.filmcard .bb{position:absolute;width:16px;height:16px;border:1px solid rgba(255,255,255,.55);z-index:2}
.filmcard .bb.a{top:13px;right:13px;border-left:0;border-bottom:0}.filmcard .bb.b{bottom:13px;right:13px;border-left:0;border-top:0}
.filmcard:hover{transform:translateY(-5px);box-shadow:0 26px 54px -22px rgba(10,40,48,.5)}
.filmcard:hover .play{transform:translate(-50%,-50%) scale(1.08)}
/* wired films: a real still sits under the same teal radial grade, so it reads as footage
   (a graded cinematic frame), not a placeholder. Set via JS from the video id. */
.filmcard.live{background-size:cover;background-position:center;background-repeat:no-repeat}
.filmcard.live::before{background:radial-gradient(128% 125% at 22% 14%,rgba(28,126,147,.32) 0%,rgba(13,68,81,.5) 46%,rgba(6,30,36,.72) 100%);
  -webkit-mask-image:none;mask-image:none;opacity:1;transition:opacity .55s var(--ease)}
.filmcard.live::after{background:linear-gradient(180deg,rgba(6,30,36,0) 34%,rgba(6,30,36,.8))}
.filmcard.live .gh{opacity:.1}
.filmcard.live:hover::before{opacity:.8} /* ease the grade back on hover so the footage breathes */
@media(max-width:900px){.filmgrid{grid-template-columns:1fr}}

/* PROOF */
.proof{background:var(--white);padding:96px 0;text-align:center}
.proof .head{margin:0 auto}
/* monochrome ink logo wall on the light section */
.proof .logos{margin:56px auto 0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:26px 38px;max-width:1180px}
.proof .llogo{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:5px;will-change:transform,filter,opacity;transition:background-color .45s var(--ease)}
.proof .llogo img{max-height:40px;max-width:150px;width:auto;height:auto;object-fit:contain;display:block;filter:brightness(0);opacity:.4;transition:opacity .45s var(--ease),transform .45s var(--ease),filter .45s var(--ease)}
/* hover: ink lifts to the logo's real colours */
.proof .llogo:hover img{filter:brightness(1);opacity:1;transform:scale(1.06)}
/* white / pale logos (House of Orange, SGM) need a dark chip on hover so their true colours read */
.proof .llogo.ondark:hover{background:linear-gradient(158deg,#0e5263,#0a3744)}
@media(max-width:640px){.proof .logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 12px;place-items:center;margin-top:46px}.proof .llogo{padding:6px;width:100%;justify-content:center}.proof .llogo:last-child{grid-column:1/-1}.proof .llogo img{max-height:30px;max-width:118px}}
@media(prefers-reduced-motion:reduce){.proof .llogo img{transition:opacity .2s linear}}
/* focus-pull reveal: CSS-driven (not gsap.to) so it can never stall mid-animation and ship blank */
.proof .logos.pf-hide .llogo{opacity:0;filter:blur(18px);transform:scale(1.16) translateY(16%)}
.proof .logos.pf-hide.pf-play .llogo{animation:llogoIn 1.15s cubic-bezier(.16,1,.3,1) both}
.proof .logos.pf-hide.pf-play .llogo:nth-child(1){animation-delay:.24s}
.proof .logos.pf-hide.pf-play .llogo:nth-child(2){animation-delay:.16s}
.proof .logos.pf-hide.pf-play .llogo:nth-child(3){animation-delay:.08s}
.proof .logos.pf-hide.pf-play .llogo:nth-child(4){animation-delay:0s}
.proof .logos.pf-hide.pf-play .llogo:nth-child(5){animation-delay:.08s}
.proof .logos.pf-hide.pf-play .llogo:nth-child(6){animation-delay:.16s}
.proof .logos.pf-hide.pf-play .llogo:nth-child(7){animation-delay:.24s}
@keyframes llogoIn{to{opacity:1;filter:blur(0);transform:scale(1) translateY(0)}}
@media(prefers-reduced-motion:reduce){.proof .logos.pf-hide .llogo{opacity:1;filter:none;transform:none}}
.proof .note{margin-top:26px;font-size:12.5px;color:var(--ink-faint)}

/* TECHNOLOGY */
.tech{background:var(--paper3);padding:120px 0;position:relative;overflow:hidden}
.tech .grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.tech h2{font-size:clamp(30px,4.2vw,52px);max-width:13ch}.tech h2 .t{color:var(--teal)}
.tech .lead{margin-top:22px;max-width:46ch;color:var(--ink-soft);font-size:16.5px;line-height:1.65}
.tech .items{margin-top:30px}
.tech .it{padding:22px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.tech .it:last-child{border-bottom:1px solid var(--line)}
.tech .it .nm{font-weight:800;font-size:16px;letter-spacing:-.01em;min-width:108px}
.tech .it .nm .badge{display:block;font-size:8.5px;letter-spacing:.16em;color:var(--teal);font-weight:700;margin-top:4px}
.tech .it p{font-size:14.5px;color:var(--ink-soft);line-height:1.55}
.tech .cta-link{margin-top:30px;display:inline-flex}
.tech-vis{position:relative;aspect-ratio:4/3;border:1px solid var(--line);background:var(--white);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px}
.tech-vis .bb{position:absolute;width:15px;height:15px;border:1px solid var(--teal);opacity:.5}
.tech-vis .bb.a{top:14px;left:14px;border-right:0;border-bottom:0}.tech-vis .bb.b{bottom:14px;right:14px;border-left:0;border-top:0}
.tech-vis .lbl{font-weight:700;letter-spacing:.24em;text-transform:uppercase;font-size:10px;color:var(--teal)}
.tech-vis .sub{font-size:12px;color:var(--ink-faint);max-width:24ch;text-align:center}
@media(max-width:880px){.tech .grid{grid-template-columns:1fr;gap:44px}}

/* SCOPE */
.scope{background:var(--white);padding:120px 0;position:relative;overflow:hidden}
.scope-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:54px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.svc{padding:30px 26px 34px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;transition:background .35s var(--ease);display:flex;flex-direction:column;min-height:200px}
.svc:hover{background:var(--paper3)}
.svc .sn{font-weight:200;font-size:34px;color:var(--line);letter-spacing:-.04em}
.svc h3{font-size:16.5px;margin:14px 0 10px;letter-spacing:-.01em;line-height:1.25}
.svc p{font-size:13px;color:var(--ink-soft);line-height:1.55;flex:1}
.svc .go{margin-top:14px;color:var(--teal);font-weight:800;transition:transform .3s var(--ease)}
.svc:hover .go{transform:translateX(5px)}
@media(max-width:980px){.scope-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.scope-grid{grid-template-columns:1fr}}

/* SYSTEM / demo */
.demo{background:var(--paper);padding:120px 0}
.demo .grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.demo h2{font-size:clamp(30px,4.2vw,50px);max-width:14ch}.demo h2 .t{color:var(--teal)}
.demo .lead{margin-top:22px;max-width:46ch;color:var(--ink-soft);font-size:16.5px;line-height:1.65}
.demo .feats{margin-top:30px;display:flex;flex-direction:column}
.demo .feat{display:flex;gap:14px;align-items:center;font-size:15px;color:var(--ink);padding:16px 0;border-top:1px solid var(--line)}
.demo .feat:last-child{border-bottom:1px solid var(--line)}
.demo .feat .fn{font-weight:200;font-size:22px;color:var(--teal);min-width:34px}
.phone{justify-self:center;width:330px;max-width:100%;background:var(--white);border:1px solid var(--line);border-radius:22px;padding:16px 14px 20px;box-shadow:0 40px 80px -34px rgba(28,37,34,.3)}
.phone .bar{display:flex;align-items:center;gap:10px;padding:6px 6px 14px;border-bottom:1px solid var(--line)}
.phone .av{width:32px;height:32px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:#fff}
.phone .who{font-weight:700;font-size:13px}.phone .who small{display:block;font-weight:600;font-size:10px;color:var(--teal);margin-top:2px}
/* FIXED height (not min-height) + hidden overflow: the mock appends messages, so an uncapped box
   grew taller and pushed the whole page down (jumpy auto-scroll on mobile). Now the phone screen is
   a fixed size; the script's box.scrollTop=box.scrollHeight keeps the newest message in view while
   older ones scroll up inside the box, and the page never moves. */
.chat{padding:16px 4px 0;display:flex;flex-direction:column;gap:10px;height:340px;overflow:hidden}
.msg{max-width:82%;padding:10px 13px;border-radius:13px;font-size:13px;line-height:1.45;opacity:0;transform:translateY(8px)}
.msg.in{align-self:flex-start;background:var(--paper2);border-bottom-left-radius:3px}
.msg.out{align-self:flex-end;background:var(--teal);color:#fff;border-bottom-right-radius:3px}
.msg.typing{align-self:flex-start;background:var(--paper2);display:flex;gap:4px;padding:13px}
.msg.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-soft);animation:blink 1.2s infinite}
.msg.typing i:nth-child(2){animation-delay:.2s}.msg.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}
@media(max-width:880px){.demo .grid{grid-template-columns:1fr;gap:44px}.demo .grid>*{min-width:0}.demo .lead{max-width:none}.phone{width:100%;min-width:0;max-width:330px}}

/* CTA */
.cta{background:radial-gradient(130% 130% at 30% 20%,var(--teal-l) 0%,var(--teal) 42%,var(--teal-dd) 100%);color:#fff;padding:140px 0;text-align:center;position:relative;overflow:hidden}
.cta .halftone{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.5) 1px,transparent 1.4px);background-size:14px 14px;opacity:.05;mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent)}
.cta .corner{position:absolute;width:18px;height:18px;border:1px solid rgba(255,255,255,.4)}
.cta .corner.tl{top:30px;left:30px;border-right:0;border-bottom:0}.cta .corner.tr{top:30px;right:30px;border-left:0;border-bottom:0}
.cta .corner.bl{bottom:30px;left:30px;border-right:0;border-top:0}.cta .corner.br{bottom:30px;right:30px;border-left:0;border-top:0}
.cta .wrap{position:relative;z-index:1}
.cta .eyebrow{justify-content:center;margin-bottom:24px}
.cta h2{font-size:clamp(34px,5vw,68px);max-width:16ch;margin:0 auto;font-weight:800;line-height:1.1}
.cta h2 .thin{color:rgba(255,255,255,.7)}
.cta p{margin:26px auto 40px;max-width:48ch;color:rgba(255,255,255,.82);font-size:17px;line-height:1.6}
.cta .btn-solid{background:#fff;color:var(--teal);box-shadow:0 12px 36px -14px rgba(0,0,0,.4)}
.cta .btn-solid:hover{background:var(--paper)}

footer{position:relative;background:var(--paper);padding:0;border-top:1px solid var(--line);overflow:hidden}
footer::before{content:"";position:absolute;top:-1px;left:0;width:56px;height:2px;background:var(--teal);z-index:2}
footer .f-grid{display:grid;grid-template-columns:1.5fr repeat(4,minmax(0,1fr));gap:52px 34px;align-items:start;padding:64px 0 48px}
footer .f-brand{max-width:290px}
footer .f-logo{display:flex;align-items:center;gap:12px;margin-bottom:24px}
footer .f-logo .logo-ic{height:38px;width:auto}
footer .f-logo .logo-wm{font-weight:800;font-size:14px;line-height:1.06;letter-spacing:-.01em;color:var(--ink)}
footer .f-tag{font-size:21px;line-height:1.28;font-weight:300;letter-spacing:-.015em;color:var(--ink);max-width:15ch}
footer .f-tag b{font-weight:700;color:var(--teal)}
footer .f-est{margin-top:26px;display:flex;align-items:center;gap:10px;font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
footer .f-est::before{content:"";width:22px;height:1px;background:var(--line)}
footer .fcol h4{display:flex;align-items:baseline;gap:8px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);padding-bottom:13px;margin-bottom:17px;border-bottom:1px solid var(--line)}
footer .fcol h4 .fx{margin-left:auto;font-size:9px;font-weight:700;color:var(--ink-faint);letter-spacing:.08em}
footer .fcol a{position:relative;display:block;color:var(--ink-soft);font-size:14px;line-height:1.3;margin-bottom:11px;transition:color .2s var(--ease),padding-left .28s var(--ease)}
footer .fcol a::before{content:"";position:absolute;left:0;top:.62em;width:0;height:1px;background:var(--teal);transition:width .28s var(--ease)}
footer .fcol a:hover{color:var(--teal);padding-left:15px}
footer .fcol a:hover::before{width:9px}
footer .f-base{display:flex;justify-content:space-between;align-items:center;gap:14px 28px;flex-wrap:wrap;padding:19px 0 42px;border-top:1px solid var(--line);color:var(--ink-faint);font-size:10.5px;font-weight:600;letter-spacing:.05em}
footer .f-base .f-coord{letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
@media(max-width:900px){footer .f-grid{grid-template-columns:1fr 1fr;gap:40px 30px;padding:52px 0 40px}footer .f-brand{grid-column:1/-1;max-width:none}footer .f-tag{max-width:24ch}}
@media(max-width:480px){footer .f-grid{grid-template-columns:1fr}footer .f-base{gap:8px}}
.v2flag{position:fixed;right:14px;bottom:14px;z-index:600;background:var(--teal);color:#fff;font-weight:800;font-size:10px;letter-spacing:.1em;padding:6px 12px;text-transform:uppercase}

.rv{opacity:0;transform:translateY(30px)}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html.js{overflow:auto}.intro{display:none}
  .rv{opacity:1!important;transform:none!important}.hero h1 .ln>span{transform:none!important}
  body{cursor:auto}.cur,.curdot{display:none}
}

/* ===== interior pages (services, technology) ===== */
.phero{padding:160px 0 80px;position:relative;overflow:hidden}
.phero .gridbg{position:absolute;inset:0;z-index:0;background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(120% 90% at 70% 30%,#000 25%,transparent 78%)}
.phero .wrap{position:relative;z-index:1}
.phero .plate{margin-bottom:26px}
.phero h1{font-size:clamp(36px,5.2vw,72px);max-width:17ch;line-height:1.1}
.phero h1 .t{color:var(--teal)}
.phero .sub{margin-top:26px;max-width:54ch;font-size:clamp(16px,1.6vw,19px);color:var(--ink-soft);line-height:1.65}
.phero .cta-row{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap}
/* Hero stat panel: an elegant hairline-divided figure strip (bordered, subtle lift), shared by
   every .phero hero. Flex so it fits 3 or 4 figures. Optional .d line adds a one-word descriptor. */
.phero .pmeta{margin-top:52px;display:flex;border:1px solid var(--line);border-radius:13px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0))}
.phero .pmeta .m{flex:1;min-width:0;padding:30px clamp(22px,2.4vw,34px) 28px}
.phero .pmeta .m+.m{border-left:1px solid var(--line)}
.phero .pmeta .v{font-weight:200;font-size:clamp(30px,3.4vw,54px);letter-spacing:-.04em;line-height:.88;color:var(--ink);white-space:nowrap}
.phero .pmeta .v .u{color:var(--teal);font-weight:400}
.phero .pmeta .k{margin-top:16px;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.phero .pmeta .d{margin-top:7px;font-size:12.5px;color:var(--ink-faint);letter-spacing:.01em}
@media(max-width:720px){.phero .pmeta{flex-direction:column}.phero .pmeta .m+.m{border-left:0;border-top:1px solid var(--line)}}
/* deliverables / feature list */
.feat-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:50px}
.feat-grid .f{padding:30px 30px 34px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.feat-grid .f .fn{font-weight:200;font-size:30px;color:var(--line);letter-spacing:-.04em}
.feat-grid .f h3{font-size:18px;margin:12px 0 9px;letter-spacing:-.01em}
.feat-grid .f p{font-size:14px;color:var(--ink-soft);line-height:1.55}
@media(max-width:760px){
  /* premium tap-to-expand accordion: separated rounded cards; a circular +/- toggle (injected by
     JS as .ftog) makes it obviously tappable and spins/fills teal on open; the open card lifts on a
     soft shadow with a teal-tinted surface and teal numeral. First card open (set by JS). */
  .feat-grid{display:flex;flex-direction:column;gap:11px;border:0;margin-top:32px}
  .feat-grid .f{position:relative;cursor:pointer;padding:21px 62px 21px 22px;
    border:1px solid var(--line);border-radius:15px;background:var(--white);
    transition:background .5s var(--ease),border-color .45s var(--ease),box-shadow .5s var(--ease);
    -webkit-tap-highlight-color:transparent}
  .feat-grid .f:active{border-color:rgba(18,91,107,.4)}
  .feat-grid .f .fn{font-size:27px;color:var(--line);transition:color .45s var(--ease)}
  .feat-grid .f h3{margin:7px 0 0;font-size:18px;transition:color .45s var(--ease)}
  .feat-grid .f p{max-height:0;overflow:hidden;opacity:0;margin-top:0;transform:translateY(-5px);
    transition:max-height .55s var(--ease),opacity .4s var(--ease),margin-top .55s var(--ease),transform .55s var(--ease)}
  /* OPEN: teal-tinted surface, soft lift, teal numeral */
  .feat-grid .f.fopen{background:rgba(18,91,107,.05);border-color:rgba(18,91,107,.32);
    box-shadow:0 20px 42px -26px rgba(14,63,74,.55)}
  .feat-grid .f.fopen .fn{color:var(--teal)}
  .feat-grid .f.fopen p{max-height:360px;opacity:1;margin-top:12px;transform:translateY(0)}
  /* circular toggle button (obviously clickable): teal "+" outline closed → filled teal "-" open,
     the vertical bar spinning down to a minus */
  .feat-grid .f .ftog{position:absolute;top:20px;right:18px;width:30px;height:30px;border-radius:50%;
    border:1.5px solid rgba(18,91,107,.4);background:transparent;
    transition:background .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease)}
  .feat-grid .f .ftog::before,.feat-grid .f .ftog::after{content:"";position:absolute;top:50%;left:50%;
    width:11px;height:1.8px;border-radius:2px;background:var(--teal);transform:translate(-50%,-50%);
    transition:background .45s var(--ease),transform .5s cubic-bezier(.22,1,.36,1)}
  .feat-grid .f .ftog::after{transform:translate(-50%,-50%) rotate(90deg)} /* + */
  .feat-grid .f.fopen .ftog{background:var(--teal);border-color:var(--teal);box-shadow:0 6px 16px -6px rgba(18,91,107,.6)}
  .feat-grid .f.fopen .ftog::before,.feat-grid .f.fopen .ftog::after{background:#fff}
  .feat-grid .f.fopen .ftog::after{transform:translate(-50%,-50%) rotate(0)} /* spins to - */
}
/* case highlight */
.case-hl{margin-top:52px;border:1px solid var(--line);display:grid;grid-template-columns:1.1fr .9fr}
.case-hl .cl{padding:44px 40px;border-right:1px solid var(--line)}
.case-hl .cl .tag{font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:10px;color:var(--teal)}
.case-hl .cl h3{font-size:clamp(24px,3vw,38px);margin:14px 0 14px;letter-spacing:-.025em}
.case-hl .cl p{font-size:15.5px;color:var(--ink-soft);line-height:1.6;max-width:48ch}
.case-hl .cr{padding:44px 40px;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-content:center;background:var(--paper3)}
.case-hl .cr .v{font-weight:200;font-size:clamp(30px,4vw,52px);letter-spacing:-.04em;line-height:.9}
.case-hl .cr .v .u{color:var(--teal);font-weight:400;font-size:.5em}
.case-hl .cr .k{margin-top:8px;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
@media(max-width:760px){.case-hl{grid-template-columns:1fr}.case-hl .cl{border-right:0;border-bottom:1px solid var(--line)}}
/* phones: the 44/40px card padding, stacked inside the 48px wrap, crushed the
   copy to a ~197px column. Pull the padding in so the text and stats breathe. */
@media(max-width:560px){
  .case-hl .cl{padding:28px 20px 26px}
  .case-hl .cr{padding:24px 20px 28px;gap:24px 22px}
}
/* process steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:50px;background:var(--line)}
.steps .st{background:var(--paper);padding:30px 26px 34px}
.steps .st .sn{font-weight:200;font-size:34px;color:var(--teal);letter-spacing:-.04em}
.steps .st h3{font-size:16px;margin:12px 0 8px}
.steps .st p{font-size:13px;color:var(--ink-soft);line-height:1.55}
@media(max-width:760px){.steps{grid-template-columns:1fr 1fr}}
/* phones: the 2-col process cards squeeze the copy to ~2 words a line. Turn the
   steps into an animated vertical timeline of cards — numbered teal nodes on a
   connecting rail, each card rising in on scroll (via .rv) with a tactile press.
   NB: gsap leaves an inline transform on .rv cards, so the press animates the
   node + shadow, never a transform on .st itself. */
@media(max-width:600px){
  .steps{grid-template-columns:1fr;gap:0;background:transparent;margin-top:34px;position:relative}
  .steps::before{content:"";position:absolute;left:29px;top:18px;bottom:22px;width:2px;border-radius:2px;
    background:linear-gradient(180deg,var(--teal) 0 72%,rgba(18,91,107,.12) 100%);z-index:0}
  .steps .st{position:relative;z-index:1;background:#fff;border:1px solid var(--line);border-radius:14px;
    padding:18px 20px 20px 58px;margin-bottom:15px;
    box-shadow:0 20px 44px -30px rgba(12,20,22,.55);
    transition:box-shadow .35s var(--ease),border-color .35s var(--ease)}
  .steps .st:last-child{margin-bottom:0}
  .steps .st:active{box-shadow:0 28px 52px -26px rgba(18,91,107,.5);border-color:var(--teal-l)}
  .steps .st .sn{position:absolute;left:17px;top:18px;width:26px;height:26px;display:flex;
    align-items:center;justify-content:center;font-size:11.5px;font-weight:800;line-height:1;letter-spacing:0;
    color:#fff;background:var(--teal);border-radius:50%;
    box-shadow:0 6px 14px -5px rgba(18,91,107,.7);transition:transform .3s var(--ease)}
  .steps .st:active .sn{transform:scale(1.12)}
  .steps .st h3{margin:0 0 7px;font-size:16.5px}
  .steps .st p{font-size:14px}
  @media(prefers-reduced-motion:reduce){.steps .st,.steps .st .sn{transition:none}}
}

/* ===== nav services dropdown ===== */
.has-sub{position:relative;padding-bottom:12px;margin-bottom:-12px}
.has-sub>span{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);padding:5px 0;display:inline-flex;align-items:center;gap:7px}
.has-sub>span::after{content:"";width:5px;height:5px;border-right:1.5px solid var(--teal);border-bottom:1.5px solid var(--teal);transform:rotate(45deg);position:relative;top:-2px;transition:transform .3s var(--ease)}
.has-sub:hover>span{color:var(--ink)}
.has-sub>span.active{color:var(--teal)}
.has-sub:hover>span::after{transform:rotate(-135deg);top:1px}
.nav-sub{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);background:var(--white);border:1px solid var(--line);padding:8px;min-width:248px;opacity:0;visibility:hidden;transition:.28s var(--ease);box-shadow:0 24px 56px -28px rgba(28,37,34,.5);z-index:60}
.has-sub:hover .nav-sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(4px)}
.nav-sub a{display:block;padding:11px 14px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.nav-sub a::after{display:none!important}
.nav-sub a:hover{background:var(--paper3);color:var(--teal)}
.nav-sub a.active{background:var(--paper3);color:var(--teal)}
@media(max-width:980px){.has-sub{display:none}}

/* ===== clickable cards: scope + case files ===== */
.svc:hover{transform:translateY(-4px);box-shadow:0 20px 46px -24px rgba(28,37,34,.45);z-index:1;background:var(--paper3)}
.svc .go{margin-top:16px;display:inline-flex;align-items:center;gap:8px;color:var(--teal);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.svc:hover .go{transform:none}
.svc .go .arr,.cc .go .arr{transition:transform .3s var(--ease);display:inline-block}
.svc:hover .go .arr{transform:translateX(5px)}
a.cc{text-decoration:none;color:inherit;cursor:none;transition:background .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
a.cc:hover{transform:translateY(-4px);box-shadow:0 20px 46px -24px rgba(28,37,34,.45);z-index:1;background:var(--paper3)}
.cc .go{margin-top:18px;display:inline-flex;align-items:center;gap:8px;color:var(--teal);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
a.cc:hover .go .arr{transform:translateX(5px)}
.filters button:hover{border-color:var(--teal);color:var(--ink)}

/* ===== case study detail ===== */
.story .srow{display:grid;grid-template-columns:.42fr 1fr;gap:44px;padding:42px 0;border-top:1px solid var(--line);align-items:start}
.story .srow:first-child{border-top:0}
.story .srow .bd p{font-size:clamp(17px,1.7vw,20px);line-height:1.65;color:var(--ink2)}
.story .srow .bd p+p{margin-top:18px}
@media(max-width:820px){.story .srow{grid-template-columns:1fr;gap:16px;padding:32px 0}}
.exhibit{position:relative;aspect-ratio:16/9;border:1px solid var(--line);background:var(--paper3);display:flex;align-items:center;justify-content:center;overflow:hidden;margin-top:46px}
.exhibit .gh{font-weight:200;font-size:clamp(60px,10vw,150px);color:rgba(18,91,107,.12);letter-spacing:-.05em}
.exhibit .ex{position:absolute;bottom:20px;left:22px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:9.5px;color:var(--ink-faint)}
.exhibit .bb{position:absolute;width:16px;height:16px;border:1px solid var(--teal);opacity:.55}
.exhibit .bb.a{top:14px;left:14px;border-right:0;border-bottom:0}.exhibit .bb.b{bottom:14px;right:14px;border-left:0;border-top:0}
.casenav{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:26px;margin-top:10px}
.casenav a{font-weight:700;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--teal);display:inline-flex;gap:9px;align-items:center}

/* ===== video lightbox (shared, triggered by [data-video]) ===== */
.vmodal{position:fixed;inset:0;z-index:8000;display:flex;align-items:center;justify-content:center;padding:34px;background:rgba(8,40,47,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s}
.vmodal.open{opacity:1;visibility:visible}
/* reel box: width-driven so it stays EXACTLY 9:16 at every size (an explicit height + max-width
   clamp broke the aspect on mobile → the clip math was off → black bar). 47.25vh = 84vh*9/16 caps
   height at 84vh; 472px caps width on tall desktops. */
.vmodal .vbox{position:relative;width:min(92vw,47.25vh,472px);aspect-ratio:9/16;background:#000;border:1px solid rgba(255,255,255,.14);box-shadow:0 50px 130px -30px rgba(0,0,0,.75);overflow:hidden;transform:scale(.93) translateY(10px);opacity:0;transition:transform .55s var(--ease),opacity .45s var(--ease)}
.vmodal.open .vbox{transform:none;opacity:1}
/* 4:3 cinematic long-form films (founder stories etc), landscape not vertical: width-driven, not height-driven */
.vmodal .vbox.r43{height:auto;width:min(92vw,1180px);max-height:82vh;aspect-ratio:4/3}
.vmodal .vbox.r169{height:auto;width:min(92vw,1180px);max-height:82vh;aspect-ratio:16/9}
/* iframe overscanned + clipped so the residual YouTube title / Shorts mark fall outside the box; never interactive */
/* iframe made taller than the box so YouTube's title/logo chrome anchors to the iframe's top/bottom
   edges (outside the box, clipped by overflow:hidden) while the video fills the box with NO crop or
   zoom — so motion-graphics captions near the edges are never cut. Applies to reels and films alike. */
/* overscan the iframe by a FIXED pixel amount (not a %) so YouTube's fixed-height chrome (channel
   name top, "Watch on YouTube" + logo bottom) is always pushed outside the box and clipped, even on
   small mobile boxes. The video still fills the box exactly; only the chrome/bars fall outside. */
.vmodal .vbox iframe{position:absolute;left:0;right:0;top:-92px;bottom:auto;width:100%;height:calc(100% + 184px);border:0;display:block;transform:none;pointer-events:none}
/* 4:3 films: make the iframe taller than the box so YouTube letterboxes the video to the box
   exactly (no zoom, no crop) while its title/logo chrome anchors to the iframe's top/bottom
   edges, which sit outside the box and are clipped by overflow:hidden. */
.vmodal .vbox.r43 iframe{transform:none;height:calc(100% + 184px);top:-92px;bottom:auto}
/* 16:9 founder intro: same clip trick so YouTube chrome falls outside the box */
.vmodal .vbox.r169 iframe{transform:none;height:calc(100% + 184px);top:-92px;bottom:auto}
/* opt-in extra zoom for a specific source clip that has its own baked-in letterboxing
   (black bars burned into the actual footage, not a chrome-hiding overscan). The height/top
   overscan above only relocates YouTube's OWN chrome (title/controls) — it doesn't touch the
   video's own rendered pixels, which always fill the box at native, unmodified framing. A real
   CSS transform is required to actually zoom into baked-in bars. Set via data-crop="<scale>"
   (e.g. "1.6") on the trigger; only applies to that video, crops evenly on all 4 sides. */
.vmodal .vbox.vcrop iframe{transform:scale(var(--zs,1))}
/* letterbox fit: for a clip whose content is ultrawide, letterboxed with black bars top+bottom
   inside a 16:9 recording (content fills the full width). data-crop="lb:<fraction>" (fraction = one
   bar's height, e.g. 0.128). The box takes the CONTENT aspect and the iframe is made taller than the
   box so the black bars fall outside it and are clipped — no horizontal zoom, so nothing on the
   sides is cut. Custom props (--lbA/--lbH/--lbT) are computed in v2.js from the fraction. */
.vmodal .vbox.vlb{height:auto;width:min(94vw,1240px);max-height:86vh;aspect-ratio:var(--lbA,2.39)}
/* +184px/-92px on top of the computed baked-letterbox overscan clips YouTube's fixed-height chrome
   too (the % overscan alone isn't enough pixels on a small mobile box). The extra 92px each side is
   YouTube's own letterbox in the taller iframe; the content still aligns to the box exactly. */
.vmodal .vbox.vlb iframe{transform:none;left:0;width:100%;height:calc(var(--lbH,134%) + 184px);top:calc(var(--lbT,-17%) - 92px);bottom:auto}
/* transparent shield: catches every click so nothing reaches YouTube; routes to play/pause */
.vmodal .vshield{position:absolute;inset:0;z-index:2;cursor:none}
/* "Tap for sound" pill — shown only while the mobile player is muted (autoplay-with-sound is blocked on touch) */
.vmodal .vunmute{position:absolute;left:50%;top:16px;transform:translateX(-50%);z-index:6;display:none;align-items:center;gap:9px;padding:11px 19px;border:0;border-radius:100px;cursor:pointer;background:var(--teal);color:#fff;font-family:inherit;font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 12px 34px -10px rgba(0,0,0,.65);animation:vsndPulse 1.9s var(--ease) infinite}
.vmodal .vbox.muted .vunmute{display:inline-flex}
.vmodal .vsnd{display:inline-block;width:0;height:0;border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}
@keyframes vsndPulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.06)}}
@media(prefers-reduced-motion:reduce){.vmodal .vunmute{animation:none}}
/* fullscreen toggle for non-reel (horizontal) videos on touch — a floating pill below the
   video; "fullscreen" rotates the box to landscape (JS sizes it) so the video gets much
   bigger on a portrait phone. The pill + close stay upright (outside the rotated box). */
.vmodal .vfs{position:fixed;left:50%;bottom:44px;transform:translateX(-50%);z-index:10;display:none;align-items:center;gap:9px;padding:11px 20px;border-radius:100px;cursor:pointer;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff;font-family:inherit;font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vmodal .vfs-i{position:relative;width:14px;height:14px;flex:none}
.vmodal .vfs-i::before,.vmodal .vfs-i::after{content:"";position:absolute;width:6px;height:6px;border:1.6px solid #fff}
.vmodal .vfs-i::before{top:0;left:0;border-right:0;border-bottom:0}
.vmodal .vfs-i::after{right:0;bottom:0;border-left:0;border-top:0}
.vmodal.vfs-on{background:#000;padding:0}
.vmodal.vfs-on .vbox{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) rotate(90deg);max-width:none;max-height:none;border:0;border-radius:0}
/* desktop fullscreen: box grows (inline width/height via sizeBig) to fill the viewport, no rotation */
.vmodal.vfs-big{background:#000;padding:0}
.vmodal.vfs-big .vbox{max-width:none!important;max-height:none!important;border:0;border-radius:0;transform:none}
/* page-transition (mobile menu nav): an app-like slide — a teal panel sweeps in from the RIGHT
   to cover, the page loads, then the panel sweeps off to the LEFT revealing the destination. z
   above the mobile-nav overlay (8600). pointer-events:none so it never blocks taps. */
/* custom control bar */
.vmodal .vctrl{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:13px;padding:30px 16px 15px;background:linear-gradient(0deg,rgba(6,30,36,.9),rgba(6,30,36,.5) 55%,transparent);opacity:0;transition:opacity .35s var(--ease)}
.vmodal.open .vctrl{opacity:1}
.vmodal .vpp{width:30px;height:30px;flex:none;border:0;background:transparent;cursor:none;position:relative;padding:0}
.vmodal .vpp i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.vmodal .vpp i.play{width:0;height:0;border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:3px}
.vmodal .vpp i.pause{display:none;width:14px;height:16px}
.vmodal .vpp i.pause::before,.vmodal .vpp i.pause::after{content:"";position:absolute;top:0;width:4px;height:16px;background:#fff}
.vmodal .vpp i.pause::before{left:1px}.vmodal .vpp i.pause::after{right:1px}
.vmodal .vpp.playing i.play{display:none}.vmodal .vpp.playing i.pause{display:block}
.vmodal .vprog{flex:1;height:26px;display:flex;align-items:center;cursor:none}
.vmodal .vbar{position:relative;width:100%;height:3px;background:rgba(255,255,255,.26);border-radius:3px}
.vmodal .vfill{position:absolute;left:0;top:0;height:100%;width:0;background:var(--teal-l);border-radius:3px}
.vmodal .vhead{position:absolute;top:50%;left:0;width:12px;height:12px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 1px 5px rgba(0,0,0,.5)}
.vmodal .vtime{flex:none;font-weight:700;font-size:11px;letter-spacing:.04em;color:#fff;min-width:36px;text-align:right;font-variant-numeric:tabular-nums}
.vmodal .vclose{position:fixed;top:24px;right:26px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.06);color:#fff;font-size:17px;line-height:1;cursor:none;display:flex;align-items:center;justify-content:center;z-index:4;transition:background .3s var(--ease),transform .3s var(--ease),border-color .3s}
.vmodal .vclose:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.6);transform:rotate(90deg)}
@media(max-width:760px){.vmodal{padding:18px}.vmodal .vclose{top:14px;right:14px}}
@media(prefers-reduced-motion:reduce){.vmodal,.vmodal .vbox,.vmodal .vctrl,.vmodal .vclose{transition:opacity .2s}}

/* a reel cell wired to a real video shows its poster instead of the gradient */
.rcell.live{background-size:cover!important;background-position:center}
.rcell.live::before{opacity:.22}
.rcell.live::after{background:linear-gradient(180deg,rgba(8,40,47,.15) 0%,transparent 32%,rgba(8,40,47,.62))}

/* ===== base section shell (interior pages: services, tech, about, case studies, web) ===== */
.sec{padding:108px 0;position:relative}
.sec.white{background:var(--white)}
.sec.paper{background:var(--paper)}
.sec.paper3{background:var(--paper3)}
@media(max-width:760px){.sec{padding:72px 0}}

/* ============ "Let's talk" brief modal (same form as contact.html, as a popup) ============ */
.cmodal{position:fixed;inset:0;z-index:8700;display:flex;align-items:flex-start;justify-content:center;padding:44px 22px;overflow-y:auto;background:rgba(8,40,47,.82);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;-webkit-overflow-scrolling:touch}
.cmodal.open{opacity:1;visibility:visible}
.cmodal-panel{position:relative;width:100%;max-width:648px;margin:0 auto;transform:translateY(20px) scale(.985);opacity:0;transition:transform .6s var(--ease),opacity .45s var(--ease)}
.cmodal.open .cmodal-panel{transform:none;opacity:1}
/* field entrance: compositor-driven CSS animation, re-fired each open by toggling .anim on the
   modal. Fields are visible by DEFAULT (no .anim = no-JS safe); animation-fill-mode:both holds the
   visible end so a field can NEVER be stranded hidden. Replaces a gsap stagger whose rAF tween got
   starved during the open composite over the heavy lower page, leaving the form looking un-animated. */
@keyframes briefIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.cmodal.anim #briefForm>.brief-head,.cmodal.anim #briefForm>.frow,.cmodal.anim #briefForm>.fld,.cmodal.anim #briefForm>.btn,.cmodal.anim #briefForm>.formnote{animation:briefIn .5s var(--ease) both}
.cmodal.anim #briefForm>:nth-child(6){animation-delay:.04s}
.cmodal.anim #briefForm>:nth-child(7){animation-delay:.08s}
.cmodal.anim #briefForm>:nth-child(8){animation-delay:.12s}
.cmodal.anim #briefForm>:nth-child(9){animation-delay:.16s}
.cmodal.anim #briefForm>:nth-child(10){animation-delay:.20s}
.cmodal.anim #briefForm>:nth-child(11){animation-delay:.24s}
.cmodal.anim #briefForm>:nth-child(12){animation-delay:.28s}
.cmodal.anim #briefForm>:nth-child(13){animation-delay:.32s}
@media(prefers-reduced-motion:reduce){.cmodal.anim #briefForm>*{animation:none}}
.cmodal-intro{text-align:center;margin-bottom:22px;color:#fff}
.cmodal-intro .plate{justify-content:center;margin-bottom:16px}
.cmodal-intro .plate .pn,.cmodal-intro .plate .pt{color:#fff}
.cmodal-intro .plate::before{background:rgba(255,255,255,.4)}
.cmodal-intro h2{font-size:clamp(26px,3.4vw,36px);font-weight:800;letter-spacing:-.03em;line-height:1.08}
.cmodal-intro h2 .t{color:#7fd0dd}
.cmodal-intro p{margin:12px auto 0;max-width:44ch;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.8)}
.cmodal-close{position:fixed;top:22px;right:24px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.06);color:#fff;font-size:17px;line-height:1;cursor:none;display:flex;align-items:center;justify-content:center;z-index:2;transition:background .3s var(--ease),transform .3s var(--ease),border-color .3s}
.cmodal-close:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.6);transform:rotate(90deg)}
/* the brief form, lifted verbatim from contact.html so the popup is the exact same sheet */
form.brief{position:relative;background:var(--white);border:1px solid var(--line);padding:40px 38px;
  box-shadow:0 60px 120px -50px rgba(0,0,0,.6),0 8px 26px -18px rgba(12,20,22,.3);
  transition:opacity .42s ease,transform .42s cubic-bezier(.22,1,.36,1)}
form.brief.sent{opacity:0;transform:translateY(-10px) scale(.99);pointer-events:none}
form.brief.hide{display:none}
form.brief .bc{position:absolute;width:13px;height:13px;border:1.5px solid var(--teal);opacity:.5;pointer-events:none}
form.brief .bc.tl{top:12px;left:12px;border-right:0;border-bottom:0}
form.brief .bc.tr{top:12px;right:12px;border-left:0;border-bottom:0}
form.brief .bc.bl{bottom:12px;left:12px;border-right:0;border-top:0}
form.brief .bc.br{bottom:12px;right:12px;border-left:0;border-top:0}
.brief-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;padding-bottom:15px;border-bottom:1px solid var(--line)}
.brief-head .bh-l{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);display:inline-flex;align-items:center;gap:9px}
.brief-head .bh-l::before{content:"";width:22px;height:1px;background:var(--teal)}
.brief-head .bh-r{font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint)}
.fld{margin-bottom:22px}
.fld>label{display:flex;align-items:center;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:9px;transition:color .25s}
.fld>label::before{content:"";width:0;height:1px;background:var(--teal);transition:width .3s cubic-bezier(.22,1,.36,1),margin-right .3s cubic-bezier(.22,1,.36,1)}
.fld:focus-within>label{color:var(--teal)}
.fld:focus-within>label::before{width:14px;margin-right:8px}
.ctrl{position:relative;display:block}
.ctrl::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:left center;transition:transform .4s cubic-bezier(.22,1,.36,1);pointer-events:none;z-index:1}
.ctrl:focus-within::after{transform:scaleX(1)}
.fld input,.fld select,.fld textarea{width:100%;font-family:inherit;font-size:15px;color:var(--ink);background-color:var(--paper3);border:1px solid var(--line);padding:14px 15px;outline:none;transition:background-color .25s,border-color .25s,box-shadow .3s}
.fld input::placeholder,.fld textarea::placeholder{color:var(--ink-faint)}
.ctrl:focus-within input,.ctrl:focus-within select,.ctrl:focus-within textarea{background-color:#fff;border-color:var(--teal-l);box-shadow:0 10px 28px -14px rgba(18,91,107,.5)}
.fld textarea{display:block;resize:vertical;min-height:100px;line-height:1.55}
.fld select{appearance:none;-webkit-appearance:none;cursor:none;padding-right:40px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23125b6b' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;background-size:12px 8px}
.phone-ctrl{display:flex}
.phone-ctrl .ccode{flex:none;width:clamp(140px,44%,244px);font-size:13px;padding-right:30px;background-position:right 11px center;border-right:1px solid var(--line)}
.phone-ctrl input{flex:1;min-width:0;border-left:0}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fld>label .lopt{text-transform:none;letter-spacing:.01em;font-weight:600;font-size:10px;color:var(--ink-faint);margin-left:6px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:2px}
.opt{position:relative;display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);padding:13px 14px;cursor:none;transition:border-color .25s,background-color .25s}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt .ob{flex:none;width:18px;height:18px;border:1.5px solid var(--line);border-radius:4px;margin-top:1px;position:relative;transition:border-color .25s,background-color .25s}
.opt .ob::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.7 2.7L12.4 5' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px 11px no-repeat;opacity:0;transform:scale(.4);transition:opacity .18s ease,transform .3s cubic-bezier(.34,1.56,.64,1)}
.opt .ot{display:flex;flex-direction:column;gap:2px;min-width:0}
.opt .ot b{font-size:13.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink);line-height:1.2}
.opt .ot small{font-size:11.5px;color:var(--ink-soft);line-height:1.35;letter-spacing:0;text-transform:none;font-weight:400}
.opt:hover{border-color:var(--teal)}
.opt input:checked~.ob{background-color:var(--teal);border-color:var(--teal)}
.opt input:checked~.ob::after{opacity:1;transform:scale(1)}
.opt input:focus-visible~.ob{box-shadow:0 0 0 3px rgba(18,91,107,.28)}
.opt:has(input:checked){border-color:var(--teal);background-color:var(--teal-tint)}
/* the flagship option. Full Marketing Management IS the offer the whole site argues for, so it
   spans both columns and sits first, rather than reading as one more checkbox in a list of eight.
   Teal border + tint only · same language as the Difference table's recommended column. */
.opt.opt-hero{grid-column:1/-1;border-color:var(--teal);background-color:var(--teal-tint);padding:15px 15px 14px}
.opt.opt-hero .ob{border-color:var(--teal)}
.opt.opt-hero .ot b{font-size:14.5px}
.opt-rec{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);font-weight:700;line-height:1}
.opts-err{display:none;margin-top:11px;font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--teal)}
.opts.invalid .opt{border-color:var(--teal)}
.brief .btn{width:100%;justify-content:center;border:0;cursor:none;margin-top:14px}
.brief .btn[disabled]{opacity:.92}
.brief .btn .spin{width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;display:none;animation:spin .7s linear infinite}
.brief .btn.loading .spin{display:inline-block}
.brief .btn.loading .arr{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.formnote{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-faint);text-align:center}
.formnote a{color:var(--teal);font-weight:700}
.success{display:none;text-align:center;padding:56px 24px;background:var(--white);border:1px solid var(--line);box-shadow:0 60px 120px -50px rgba(0,0,0,.6)}
.success.on{display:block}
.success .mk{position:relative;width:64px;height:64px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center;margin:0 auto 24px;transform:scale(.5);opacity:0}
.success.on .mk{animation:mkpop .55s cubic-bezier(.22,1,.36,1) .05s forwards}
@keyframes mkpop{to{transform:scale(1);opacity:1}}
.success .mk::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--teal);opacity:0}
.success.on .mk::after{animation:mkring 1.1s cubic-bezier(.22,1,.36,1) .35s}
@keyframes mkring{0%{transform:scale(.8);opacity:.55}100%{transform:scale(1.55);opacity:0}}
.success .mk path{stroke-dasharray:1;stroke-dashoffset:1}
.success.on .mk path{animation:mkdraw .5s .3s cubic-bezier(.65,0,.35,1) forwards}
@keyframes mkdraw{to{stroke-dashoffset:0}}
.success h3{font-size:27px;letter-spacing:-.02em;opacity:0}
.success p{margin:12px auto 0;color:var(--ink-soft);font-size:15.5px;max-width:38ch;line-height:1.6;opacity:0}
.success.on h3{animation:srise .55s .32s cubic-bezier(.22,1,.36,1) forwards}
.success.on p{animation:srise .55s .44s cubic-bezier(.22,1,.36,1) forwards}
@keyframes srise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:560px){.opts{grid-template-columns:1fr}.cmodal{padding:30px 14px}.cmodal-close{top:12px;right:12px}form.brief{padding:32px 22px}.frow{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .cmodal,.cmodal-panel{transition:opacity .2s}
  .ctrl::after,.opt .ob::after,.fld>label::before,form.brief{transition:none}
  .success .mk,.success h3,.success p{opacity:1;transform:none;animation:none}
  .success .mk path{stroke-dashoffset:0;animation:none}
  .success .mk::after{animation:none}
  .brief .btn .spin{animation-duration:1.4s}
}

/* ===== TDB Assistant chat widget (injected by v2.js on every page). A
   middle-right DOCK (teaser pill + pulsing launcher, eye level - deliberately
   not the usual bottom corner) + the panel. z 8400: under .mnav (8600) and
   .cmodal (8700) so the menu and the brief modal always win; the home intro
   (9999) covers it. ===== */
/* Lower right, but lifted clear of the very bottom edge so it stays in eye line instead of
   sinking into the footer. Draggable: JS bakes a dropped position into inline left/top and
   neutralises right/bottom, so these two are the DEFAULT only. touch-action:none stops a
   touch-drag from scrolling the page instead of moving the dock. */
.tchat-dock{position:fixed;right:22px;bottom:104px;z-index:8400;
  display:flex;align-items:center;gap:11px;cursor:grab;touch-action:none;user-select:none;
  transition:opacity .3s var(--ease)}
.tchat-dock.hide{opacity:0;pointer-events:none}
/* only while actually dragging: own compositor layer, and no transition to fight the drag */
.tchat-dock.drag{cursor:grabbing;transition:none;will-change:transform}
.tchat-tease{border:1px solid var(--line);border-radius:100px;background:var(--white);cursor:pointer;
  padding:10px 16px;font-family:inherit;font-weight:700;font-size:12.5px;letter-spacing:.01em;color:var(--ink);
  box-shadow:0 16px 38px -18px rgba(12,20,22,.4);white-space:nowrap;
  transition:opacity .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.tchat-tease:hover{color:var(--teal);border-color:rgba(18,91,107,.45)}
.tchat-tease.swap span{opacity:0}
.tchat-tease span{transition:opacity .25s var(--ease)}
.tchat-tease.gone{opacity:0;pointer-events:none}
.tchat-fab{position:relative;flex:none;width:58px;height:58px;border-radius:50%;
  border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 30% 25%,#1a7a8f 0%,var(--teal) 55%,var(--teal-d) 100%);
  box-shadow:0 14px 34px -12px rgba(14,71,83,.65),0 3px 10px -4px rgba(14,71,83,.4);
  transition:box-shadow .35s var(--ease)}
.tchat-fab:hover{box-shadow:0 20px 44px -14px rgba(14,71,83,.75),0 4px 12px -4px rgba(14,71,83,.45)}
.tchat-fab svg{display:block}
/* attention pulse: a soft teal ring breathing out of the launcher */
.tchat-fab::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  animation:tchatPulse 3.4s var(--ease) infinite}
@keyframes tchatPulse{
  0%{box-shadow:0 0 0 0 rgba(18,91,107,.42)}
  55%{box-shadow:0 0 0 16px rgba(18,91,107,0)}
  100%{box-shadow:0 0 0 0 rgba(18,91,107,0)}
}
/* Bottom-anchored to match the launcher, and it rises into place. The dock gets .hide while
   the panel is open, so the panel is free to use the full column. JS flips left/right to
   whichever half the dragged launcher sits in. */
.tchat{position:fixed;right:20px;bottom:20px;z-index:8400;width:384px;max-width:calc(100vw - 40px);
  height:min(600px,calc(100vh - 40px));display:flex;flex-direction:column;overflow:hidden;
  background:var(--paper3);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 40px 90px -40px rgba(12,20,22,.5),0 10px 30px -18px rgba(12,20,22,.3);
  opacity:0;visibility:hidden;transform:translateY(12px);pointer-events:none;
  transition:opacity .32s var(--ease),transform .32s var(--ease),visibility 0s linear .32s}
.tchat.open{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.tchat-head{position:relative;flex:none;padding:16px 44px 15px 18px;color:#fff;
  background:radial-gradient(135% 150% at 28% 18%,#13697e 0%,var(--teal-d) 62%,var(--teal-dd) 100%)}
.tchat-head::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.5px);background-size:13px 13px;opacity:.5}
.tchat-title{position:relative;z-index:1;font-weight:800;font-size:15px;letter-spacing:-.01em}
.tchat-sub{display:block;margin-top:3px;font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#7fd0dd}
.tchat-x{position:absolute;top:12px;right:12px;z-index:2;width:28px;height:28px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background .3s var(--ease)}
.tchat-x:hover{background:rgba(255,255,255,.24)}
.tchat-msgs{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.tmsg{max-width:84%;padding:10px 13px;border-radius:12px;font-size:14px;line-height:1.55;white-space:pre-line;overflow-wrap:break-word}
.tmsg.user{align-self:flex-end;background:var(--teal);color:#fff;border-bottom-right-radius:4px}
.tmsg.bot{align-self:flex-start;background:var(--white);color:var(--ink);border:1px solid var(--line);border-bottom-left-radius:4px}
.tmsg.bot a{color:var(--teal);font-weight:700}
.tmsg .tdots{display:inline-flex;gap:4px;padding:3px 0}
.tmsg .tdots i{width:6px;height:6px;border-radius:50%;background:var(--ink-faint);animation:tchatDot 1.1s infinite var(--ease)}
.tmsg .tdots i:nth-child(2){animation-delay:.15s}
.tmsg .tdots i:nth-child(3){animation-delay:.3s}
@keyframes tchatDot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.tchat-act{display:block;width:100%;margin-top:8px;padding:9px 14px;text-align:center;cursor:pointer;
  font-family:inherit;font-weight:700;font-size:12px;letter-spacing:.04em;text-decoration:none;
  color:var(--teal);background:var(--white);border:1px solid rgba(18,91,107,.4);border-radius:100px;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.tchat-act:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.tcb-form{align-self:stretch;max-width:none;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:13px}
.tcb-form label{display:block;margin:8px 0 4px;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.tcb-form label:first-child{margin-top:0}
.tcb-form input{width:100%;font-family:inherit;font-size:14px;color:var(--ink);background:var(--paper3);
  border:1px solid var(--line);border-radius:7px;padding:9px 11px;outline:none;transition:border-color .25s,background .25s}
.tcb-form input:focus{border-color:var(--teal-l);background:#fff}
.tcb-form .tcb-send{margin-top:12px;width:100%;padding:10px 14px;border:0;border-radius:100px;cursor:pointer;
  font-family:inherit;font-weight:700;font-size:12.5px;letter-spacing:.04em;color:#fff;background:var(--teal);
  transition:background .3s var(--ease)}
.tcb-form .tcb-send:hover{background:var(--teal-d)}
.tcb-form .tcb-send:disabled{opacity:.6;cursor:default}
.tcb-form .tcb-note{margin:8px 0 0;font-size:11.5px;color:var(--ink-soft)}
.tcb-form .tcb-intro{margin:0 0 4px;font-size:12.5px;line-height:1.5;color:var(--ink-soft)}
.tchat-bar.locked{display:none}
.tchat-chips{flex:none;display:flex;flex-wrap:wrap;gap:7px;padding:0 14px 12px}
.tchat-chip{padding:7px 13px;cursor:pointer;font-family:inherit;font-weight:700;font-size:11.5px;color:var(--teal);
  background:var(--white);border:1px solid rgba(18,91,107,.35);border-radius:100px;
  transition:background .3s var(--ease),color .3s var(--ease)}
.tchat-chip:hover{background:var(--teal);color:#fff}
.tchat-bar{flex:none;display:flex;gap:8px;padding:11px 12px;background:var(--white);border-top:1px solid var(--line)}
.tchat-bar input{flex:1;min-width:0;font-family:inherit;font-size:14px;color:var(--ink);background:var(--paper3);
  border:1px solid var(--line);border-radius:100px;padding:10px 15px;outline:none;transition:border-color .25s}
.tchat-bar input:focus{border-color:var(--teal-l)}
.tchat-bar button{flex:none;width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;color:#fff;
  background:var(--teal);font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background .3s var(--ease)}
.tchat-bar button:hover{background:var(--teal-d)}
@media(max-width:600px){
  .tchat{right:0;bottom:0;left:0;top:auto;width:100%;max-width:none;height:min(86vh,640px);
    border-radius:14px 14px 0 0;border-left:0;border-right:0;border-bottom:0;
    transform:translateY(12px)}
  .tchat.open{transform:none}
  .tchat-dock{right:12px;bottom:96px}
  .tchat-tease{font-size:11.5px;padding:9px 13px;max-width:56vw;overflow:hidden;text-overflow:ellipsis}
  .tchat-fab{width:54px;height:54px}
}
@media(prefers-reduced-motion:reduce){
  .tchat{transition:opacity .2s;transform:none}
  .tchat.open{transform:none}
  .tmsg .tdots i{animation:none;opacity:.6}
  .tchat-fab::after{animation:none}
  .tchat-tease span{transition:none}
}