/* ========================================================================
   The Creativity Lab - Systems Studio
   Measured tokens, own content.
   ======================================================================== */
:root{
  --bg:#F0F0F0;
  --bg-alt:#E3E3E3;
  --dark:#181818;
  --darker:#0A0A0A;
  --ink:#000;
  --dim:#A6A6A6;
  --body:#5f5f5f;
  --blue:#0274DE;
  --blue-deep:#0000EE;
  --card:#FDFDFD;
  --r-card:20px;
  --r-pill:50px;
  --ease:cubic-bezier(.4,0,.2,1);
  --spring:cubic-bezier(.16,1,.3,1);
  --wrap-pad:40px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:"Plus Jakarta Sans",sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}
.wrap{padding-left:var(--wrap-pad);padding-right:var(--wrap-pad);max-width:1600px;margin:0 auto}

/* type scale (measured) */
.h2{font-size:60px;font-weight:600;line-height:1.1;letter-spacing:-.04em;color:var(--ink)}
.h2-dim{color:var(--dim)}
.h2-light{color:#fff}
.blue{color:var(--blue)}
.label{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:var(--ink);margin-bottom:22px}
.label-bar{width:3px;height:14px;border-radius:2px;background:var(--blue)}
.label-light{color:#fff}
.sec-sub{font-size:17px;line-height:1.55;color:var(--body);max-width:620px;margin-top:22px}
.sub-light{color:rgba(255,255,255,.65)}

/* buttons */
.btn-blue{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 30px;border-radius:var(--r-pill);
  background:var(--blue);color:#fff;font-size:15px;font-weight:600;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease)}
.btn-blue:hover{background:#0263bf;transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(2,116,222,.55)}
.btn-ghost-light{display:inline-flex;align-items:center;height:52px;padding:0 28px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.22);color:#fff;font-size:15px;font-weight:600;transition:background .25s var(--ease),border-color .25s var(--ease)}
.btn-ghost-light:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4)}
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:var(--r-pill);
  background:#F4F5F7;border:1px solid rgba(20,40,70,.07);font-size:12.5px;font-weight:600;letter-spacing:.01em;color:#3a3a3a}
.chip svg{color:var(--blue);flex:none}

/* ========================================================================
   NAV (fixed, flips theme via .nav-dark)
   ======================================================================== */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:20px var(--wrap-pad);color:#fff;transition:color .35s var(--ease)}
.nav-logo{display:inline-flex;align-items:center;gap:11px;font-size:18px;font-weight:700;letter-spacing:-.02em}
/* One parent brand, two worlds. The wordmark is World 1's exactly: a quieter "The", the name at
   full weight, and the orange point that belongs to the studio, not to this world. Only the
   electric signal and the AI LAB capsule after it say which world you are in.
   The registered mark is gone: nothing verifies that claim, so it should not be on the page.
   Adding "The " widens the name, so the logo steps 19px -> 18px and the gap 14px -> 11px, which
   keeps the whole lockup within its old footprint instead of pushing the nav wider. */
.nav-name{white-space:nowrap}
.nav-name .nav-the{font-weight:400;opacity:.82}
.nav-name .nav-dot{color:#ed4609}
/* ========================================================================
   IDENTITY: CreativityLab(R) | THE LAB SIGNAL | AI LAB
   CreativityLab = the studio. The signal = the portal. AI LAB = the second world.
   main.js upgrades the markup at runtime (signal internals, SVG text with the
   crossbar cut, refraction layer); these rules also degrade cleanly without it.
   Environment: default = over dark (nav on hero/bands); .nav.nav-dark and .ft = over light.
   ======================================================================== */
.nav-logo{position:relative;--sig-core:#EAF3FF;--ink:#A8CBFF;--edge:rgba(170,205,255,.62);--edge2:rgba(120,170,255,.22);--vio:rgba(160,120,255,.26);--hl:rgba(225,238,255,.95);--x:0px}
/* THE LAB SIGNAL: 1px optical line, tiny core, violet hairline refraction; no blob */
.nav-sep{position:relative;width:1px;height:26px;flex:none;background:linear-gradient(180deg,transparent 0%,rgba(95,168,255,0) 12%,rgba(95,168,255,.55) 38%,rgba(95,168,255,.9) 50%,rgba(95,168,255,.55) 62%,rgba(95,168,255,0) 88%,transparent);
  transform:translateX(var(--x));transition:transform .28s cubic-bezier(.3,.7,.3,1)}
.nav-sep i.v{position:absolute;left:1px;top:0;width:1px;height:100%;background:linear-gradient(180deg,transparent 20%,rgba(150,110,255,0) 34%,rgba(160,120,255,.42) 50%,rgba(150,110,255,0) 66%,transparent 80%);opacity:.55}
.nav-sep::after{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff 0%,var(--sig-core) 45%,rgba(140,190,255,.9) 100%);
  box-shadow:0 0 0 .5px rgba(255,255,255,.4),0 0 4px 1px rgba(140,190,255,.9),0 0 10px 2px rgba(95,150,255,.35);
  transition:box-shadow .3s cubic-bezier(.3,.7,.3,1),transform .3s cubic-bezier(.3,.7,.3,1)}
.nav-sep .clm-trace{position:absolute;left:0;top:50%;height:1px;width:14px;margin-top:-.5px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,rgba(120,180,255,0),rgba(190,220,255,.95) 60%,rgba(120,180,255,0))}
/* AI LAB: a small slab of optical glass, lit from above */
.nav-ailab{position:relative;isolation:isolate;display:inline-flex;align-items:center;height:29px;padding:0 11px 0 15px;border-radius:999px;
  font-size:11px;font-weight:600;letter-spacing:.34em;line-height:1;color:var(--ink);white-space:nowrap;text-shadow:0 0 6px rgba(90,150,255,.35);
  background:
    radial-gradient(120% 90% at 30% -20%,rgba(200,225,255,.30),rgba(200,225,255,0) 60%),
    linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.03) 45%,rgba(60,110,220,.10) 75%,rgba(40,80,200,.18) 100%);
  box-shadow:inset 0 1px 0 rgba(220,236,255,.55),inset 0 -1px 0 rgba(0,10,40,.45),inset 0 -6px 10px -8px rgba(0,10,50,.55),
             0 1px 0 rgba(120,170,255,.10),0 3px 6px -3px rgba(0,5,30,.6),0 10px 20px -14px rgba(60,120,255,.35);
  transition:letter-spacing .5s cubic-bezier(.3,.7,.3,1)}
.nav-ailab svg{display:block;height:1em;width:auto;overflow:visible}
.nav-ailab svg text{fill:currentColor;font-family:"Plus Jakarta Sans",sans-serif;font-weight:600;font-size:11px;letter-spacing:.34em;transition:letter-spacing .5s cubic-bezier(.3,.7,.3,1)}
.nav-ailab::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(180deg,var(--edge) 0%,rgba(120,170,255,.42) 40%,var(--edge2) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.nav-ailab::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.95;
  background:
    linear-gradient(90deg,transparent 10%,var(--hl) 34%,rgba(255,255,255,0) 62%) top/100% 1px no-repeat,
    radial-gradient(60% 120% at 6% 50%,var(--vio),transparent 70%),
    radial-gradient(70% 55% at 32% 8%,rgba(255,255,255,.22),transparent 70%),
    linear-gradient(90deg,transparent 30%,rgba(120,170,255,.28) 55%,transparent 80%) bottom/100% 1px no-repeat}
.nav-ailab .rf{position:absolute;inset:0;border-radius:inherit;pointer-events:none;overflow:hidden}
.nav-ailab .rf::before{content:"";position:absolute;top:-1px;height:1px;left:0;width:32%;border-radius:1px;opacity:0;background:linear-gradient(90deg,transparent,rgba(210,232,255,.95),transparent)}
.nav-ailab .rf::after{content:"";position:absolute;inset:0;opacity:0;transform:translateX(-60%);background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.14) 48%,rgba(150,120,255,.10) 52%,transparent 66%)}
/* over light: same object, quieter edge, the site's ink blue */
.nav.nav-dark .nav-logo,.ft .nav-logo{--ink:#0274DE;--edge:rgba(2,116,222,.42);--edge2:rgba(2,116,222,.12);--vio:rgba(120,90,255,.16);--hl:rgba(255,255,255,.95)}
.nav.nav-dark .nav-sep,.ft .nav-sep{background:linear-gradient(180deg,transparent 0%,rgba(2,116,222,0) 12%,rgba(2,116,222,.5) 38%,rgba(2,116,222,.85) 50%,rgba(2,116,222,.5) 62%,rgba(2,116,222,0) 88%,transparent)}
.nav.nav-dark .nav-sep::after,.ft .nav-sep::after{box-shadow:0 0 0 .5px rgba(2,116,222,.5),0 0 3px 1px rgba(2,116,222,.6),0 0 7px 1px rgba(2,116,222,.18)}
.nav.nav-dark .nav-ailab,.ft .nav-ailab{text-shadow:none;
  background:
    radial-gradient(120% 90% at 30% -20%,rgba(255,255,255,.75),rgba(255,255,255,0) 60%),
    linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.18) 45%,rgba(2,116,222,.05) 75%,rgba(2,116,222,.11) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(2,80,180,.16),inset 0 -6px 10px -8px rgba(2,80,180,.22),
             0 1px 0 rgba(255,255,255,.7),0 3px 6px -3px rgba(2,60,140,.22),0 10px 20px -14px rgba(2,60,140,.28)}
/* HOVER (<=500ms): the signal brightens, one refraction crosses the glass, spacing breathes */
@media (hover:hover) and (pointer:fine){
  .nav-logo:hover .nav-sep::after{box-shadow:0 0 0 .5px rgba(255,255,255,.5),0 0 4px 1.5px rgba(140,190,255,.95),0 0 10px 2px rgba(95,150,255,.4)}
  .nav.nav-dark .nav-logo:hover .nav-sep::after,.ft .nav-logo:hover .nav-sep::after{box-shadow:0 0 0 .5px rgba(2,116,222,.6),0 0 4px 1.5px rgba(2,116,222,.75),0 0 8px 1px rgba(2,116,222,.25)}
  .nav-logo:hover .nav-ailab,.nav-logo:hover .nav-ailab svg text{letter-spacing:.355em}
  .nav-logo:hover .nav-ailab .rf::after{animation:clmRefract .5s cubic-bezier(.4,.1,.2,1) both}
}
@keyframes clmRefract{0%{opacity:0;transform:translateX(-60%)}20%{opacity:1}100%{opacity:0;transform:translateX(120%)}}
/* ACTIVATION, once on first appearance: 0-300 rest, 300-650 signal, 650-950 trace, 950-1200 capsule catches, then still */
.nav-logo.act .nav-sep::after{animation:clmSig 1.2s cubic-bezier(.3,.7,.3,1) .3s both}
@keyframes clmSig{0%{transform:scale(.6);opacity:.4}30%{transform:scale(1.35);opacity:1;box-shadow:0 0 0 .5px rgba(255,255,255,.55),0 0 6px 2px rgba(150,195,255,1),0 0 14px 3px rgba(95,150,255,.45)}100%{transform:scale(1);opacity:1}}
.nav-logo.act .nav-sep{animation:clmSigLine .9s cubic-bezier(.3,.7,.3,1) .3s both}
@keyframes clmSigLine{0%{opacity:.15;transform:scaleY(.4)}60%{opacity:1;transform:scaleY(1.06)}100%{opacity:1;transform:scaleY(1)}}
.nav-logo.act .clm-trace{animation:clmTrace .3s cubic-bezier(.4,.1,.2,1) .65s both}
@keyframes clmTrace{0%{opacity:0;transform:translateX(0)}30%{opacity:1}100%{opacity:0;transform:translateX(16px)}}
.nav-logo.act .nav-ailab .rf::before{animation:clmCatch .3s cubic-bezier(.4,.1,.2,1) .95s both}
@keyframes clmCatch{0%{opacity:0;transform:translateX(0)}30%{opacity:1}100%{opacity:0;transform:translateX(105%)}}
.nav-logo.act .nav-ailab::before{animation:clmEdge .55s cubic-bezier(.4,.1,.2,1) .95s both}
@keyframes clmEdge{0%{filter:brightness(1)}40%{filter:brightness(1.35)}100%{filter:brightness(1)}}
@media (prefers-reduced-motion:reduce){
  .nav-logo,.nav-logo *,.nav-logo *::before,.nav-logo *::after{animation:none!important;transition:none!important}
}
/* links: every item is a 40px pill-shaped hit area on ONE vertical axis, so plain links, the
   active pill, the language capsule and the CTA all share the same centre line. Text-to-text
   rhythm stays 34px (14px padding + 6px gap). Hover = a quiet tinted pill, not a fade. */
.nav-links{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:600;margin-left:auto;margin-right:20px}
.nav-links a{position:relative;display:inline-flex;align-items:center;height:40px;padding:0 14px;border-radius:var(--r-pill);color:inherit;opacity:1;
  transition:background .28s var(--ease),color .28s var(--ease),transform .28s var(--ease)}
.nav-links a:hover{background:rgba(255,255,255,.10)}
.nav.nav-dark .nav-links a:hover{background:rgba(10,10,10,.06)}
.nav-links a:active{transform:scale(.97)}
.nav-links a:focus-visible{outline:2px solid #8FC0FF;outline-offset:2px}
/* ---- Language Capsule: a tiny piece of the AI LAB operating system ---- */
.lang-cap{position:relative;display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;margin-right:16px;border-radius:999px;
  background:rgba(10,18,32,.72);border:1px solid rgba(150,190,255,.26);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(190,220,255,.10);
  font-size:11px;font-weight:700;letter-spacing:.08em;color:#DCE8FA;cursor:pointer;
  overflow:hidden;isolation:isolate;transition:border-color .25s var(--ease)}
/* generous touch area without growing the visual */
.lang-cap::before{content:"";position:absolute;inset:-8px}
.lc-now{position:relative}
.lc-dots{display:inline-flex;align-items:center;gap:3px;transition:opacity .2s var(--ease),max-width .25s var(--ease);max-width:20px}
.lc-dots i{width:2.5px;height:2.5px;border-radius:50%;background:rgba(150,190,255,.4)}
.lc-dots i:first-child{background:#5FA8FF;box-shadow:0 0 4px 1px rgba(95,168,255,.55)}
.lc-track{position:relative;width:0;max-width:0;height:1px;background:rgba(150,190,255,.28);opacity:0;
  transition:max-width .28s var(--ease),width .28s var(--ease),opacity .2s var(--ease)}
.lc-track i{position:absolute;top:-1.5px;left:0;width:4px;height:4px;border-radius:50%;background:#8FC0FF;
  box-shadow:0 0 6px 1.5px rgba(95,168,255,.75)}
.lc-next{max-width:0;opacity:0;overflow:hidden;color:rgba(214,230,255,.5);
  transition:max-width .28s var(--ease),opacity .25s var(--ease),color .3s var(--ease),text-shadow .3s var(--ease)}
/* engaged: capsule unfolds, the light crosses, the new language lights up */
.lang-cap.go .lc-dots{opacity:0;max-width:0}
.lang-cap.go .lc-track{width:24px;max-width:24px;opacity:1}
.lang-cap.go .lc-track i{animation:lcTravel .34s cubic-bezier(.4,.1,.3,1) .12s forwards}
@keyframes lcTravel{to{left:calc(100% - 4px)}}
.lang-cap.go .lc-next{max-width:26px;opacity:1}
.lang-cap.lit2 .lc-next{color:#fff;text-shadow:0 0 9px rgba(95,168,255,.85)}
@media (hover:hover) and (pointer:fine){
  .lang-cap:hover{border-color:rgba(170,205,255,.5)}
  .lang-cap:hover .lc-dots i:first-child{box-shadow:0 0 6px 2px rgba(95,168,255,.8)}
  .lang-cap::after{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(100deg,transparent 32%,rgba(150,200,255,.14) 50%,transparent 68%);
    transform:translateX(-160%)}
  .lang-cap:hover::after{animation:lcSheen .7s var(--ease) forwards}
  @keyframes lcSheen{to{transform:translateX(160%)}}
}
.lang-cap:focus-visible{outline:2px solid #8FC0FF;outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .lang-cap.go .lc-track i,.lang-cap:hover::after{animation:none}
}
/* nav CTA: luminous blue optical glass, the one primary action in the nav */
@property --nav-spark{syntax:"<angle>";initial-value:120deg;inherits:false}
.nav-cta{position:relative;display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 24px;border-radius:var(--r-pill);
  background:linear-gradient(165deg,rgba(22,42,76,.82),rgba(9,17,34,.9));
  -webkit-backdrop-filter:blur(10px) saturate(1.25);backdrop-filter:blur(10px) saturate(1.25);
  border:1px solid rgba(120,180,255,.5);
  box-shadow:inset 0 1px 0 rgba(200,228,255,.22),0 0 16px -5px rgba(40,130,255,.5),0 6px 20px -10px rgba(0,10,30,.5);
  color:#fff;font-size:15px;font-weight:600;overflow:hidden;isolation:isolate;
  transition:transform .3s cubic-bezier(.25,.6,.3,1),box-shadow .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.nav-cta-arrow{display:inline-flex}
.nav-cta-arrow svg{width:14px;height:14px;fill:none;stroke:#BFD9FF;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s cubic-bezier(.25,.6,.3,1)}
/* the second-look detail: every few seconds one tiny light passes a short arc of the border */
.nav-cta::before{content:"";position:absolute;inset:-1px;border-radius:999px;padding:1px;pointer-events:none;opacity:0;
  background:conic-gradient(from var(--nav-spark),transparent 0 95%,rgba(200,228,255,.95) 97.5%,transparent 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
  animation:navSpark 6.5s linear infinite}
@keyframes navSpark{
  0%,64%{opacity:0;--nav-spark:120deg}
  70%{opacity:1}
  86%{opacity:1;--nav-spark:300deg}
  91%,100%{opacity:0;--nav-spark:320deg}
}
/* hover sheen surface */
.nav-cta::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(170,210,255,.16) 50%,transparent 70%);transform:translateX(-160%)}
@media (hover:hover) and (pointer:fine){
  .nav-cta:hover{transform:translateY(-1.5px);border-color:rgba(150,200,255,.72);
    background:linear-gradient(165deg,rgba(28,52,92,.86),rgba(12,22,42,.92));
    box-shadow:inset 0 1px 0 rgba(200,228,255,.28),0 0 22px -4px rgba(50,140,255,.62),0 8px 24px -10px rgba(0,10,30,.55)}
  .nav-cta:hover .nav-cta-arrow svg{transform:translateX(3.5px)}
  .nav-cta:hover::after{animation:lcSheen .6s var(--ease) forwards}
}
.nav-cta:active{transform:scale(.985)}
.nav-cta:focus-visible{outline:2px solid #8FC0FF;outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .nav-cta::before,.nav-cta:hover::after{animation:none}
}
.nav.nav-dark{color:#000}

/* ---- scrolled state: the atmosphere around the nav condenses into glass ----
   Two states, one nav. State 1 (top): exactly as before, weightless. State 2 (.is-glass,
   past ~56px): the right-hand cluster becomes a contained optical-glass capsule and the
   identity on the left gets a soft-edged blur field. main.js wraps the cluster in
   .nav-cap at runtime and toggles .is-glass with hysteresis so it never flickers.
   Layers: nav 100 (unchanged), capsule surfaces below their own content via z-index -1. */
.nav-cap{position:relative;display:flex;align-items:center;margin-left:auto;margin-right:-6px;padding:6px 6px 6px 22px;border-radius:999px;isolation:isolate;
  transition:margin .4s cubic-bezier(.32,.72,.24,1)}
.nav-cap::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:rgba(255,255,255,.74);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);
  border:1px solid rgba(255,255,255,.62);
  box-shadow:0 0 0 1px rgba(10,20,40,.045),inset 0 1px 0 rgba(255,255,255,.85),0 10px 26px -14px rgba(10,20,40,.22),0 2px 6px -3px rgba(10,20,40,.08);
  opacity:0;transform:scale(.985);transition:opacity .42s cubic-bezier(.32,.72,.24,1),transform .42s cubic-bezier(.32,.72,.24,1)}
/* the small blue optical highlight along part of the upper edge */
.nav-cap::after{content:"";position:absolute;left:14%;right:52%;top:-1px;height:1px;z-index:0;pointer-events:none;border-radius:1px;
  background:linear-gradient(90deg,transparent,rgba(120,178,255,.0) 8%,rgba(140,190,255,.85) 45%,rgba(120,178,255,.0) 92%,transparent);
  opacity:0;transition:opacity .5s .1s cubic-bezier(.32,.72,.24,1)}
.nav .nav-links,.nav .lang-cap{transition:margin .4s cubic-bezier(.32,.72,.24,1),gap .4s cubic-bezier(.32,.72,.24,1)}
.nav{transition:color .35s var(--ease),transform .42s cubic-bezier(.32,.72,.24,1)}
/* state 2 */
.nav.is-glass{transform:translateY(-4px)}
.nav.is-glass .nav-cap{margin-right:0}
.nav.is-glass .nav-cap::before{opacity:1;transform:none}
.nav.is-glass .nav-cap::after{opacity:1}
.nav.is-glass .nav-links{gap:0;margin-right:12px}
.nav.is-glass .lang-cap{margin-right:10px}
/* one-time reflection travelling ~28% along the upper border when the glass forms */
.nav-cap .nav-cap-sheen{position:absolute;top:-1px;left:0;width:26%;height:1px;z-index:1;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(210,232,255,.95),transparent)}
.nav.is-glass.glass-enter .nav-cap-sheen{animation:navCapSheen .9s cubic-bezier(.4,.1,.2,1) .18s both}
@keyframes navCapSheen{0%{transform:translateX(-30%);opacity:0}25%{opacity:1}100%{transform:translateX(280%);opacity:0}}
/* left: a soft-edged optical blur field behind the identity, no second pill */
.nav-logo{position:relative;isolation:isolate}
.nav-logo::before{content:"";position:absolute;inset:-9px -22px -9px -18px;z-index:-1;border-radius:999px;pointer-events:none;
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  -webkit-mask:linear-gradient(90deg,transparent,#000 16%,#000 82%,transparent);mask:linear-gradient(90deg,transparent,#000 16%,#000 82%,transparent);
  opacity:0;transition:opacity .42s cubic-bezier(.32,.72,.24,1)}
.nav.is-glass .nav-logo::before{opacity:1}
/* keep the existing dark-blue CTA readable and seated in the glass: no size change */
.nav.is-glass .nav-cta{box-shadow:0 6px 18px -8px rgba(2,60,140,.45),0 0 0 1px rgba(255,255,255,.35)}
/* over dark sections (homepage bands) the nav is white-on-dark: glass flips to smoked so text stays readable */
.nav.is-glass:not(.nav-dark) .nav-cap::before{background:rgba(10,14,22,.58);border-color:rgba(255,255,255,.14);
  box-shadow:0 0 0 1px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.12),0 10px 26px -14px rgba(0,0,0,.6)}
.nav.is-glass:not(.nav-dark) .nav-logo::before{background:rgba(10,14,22,.5)}
@media (prefers-reduced-motion:reduce){
  .nav,.nav-cap,.nav-cap::before,.nav-cap::after,.nav-logo::before,.nav .nav-links,.nav .lang-cap{transition:none}
  .nav.is-glass.glass-enter .nav-cap-sheen{animation:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav-cap::before{background:rgba(255,255,255,.94)}
  .nav-logo::before{background:rgba(255,255,255,.9)}
}

/* ========================================================================
   HERO  (flower pins for the whole stretch; content + next section glide over)
   ======================================================================== */
.hero{position:relative}
.hero-bg{position:sticky;top:0;height:100vh;margin-bottom:-100vh;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover}
/* living-organism layer: media wrapper carries the cursor parallax, video fades in over the poster img */
.hero-bg-media{position:absolute;inset:0;transform:scale(1.025);will-change:transform}
.hero-bg-media img{position:absolute;inset:0}
.hero-bg-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease}
.hero-bg-media video.live{opacity:1}
.hero-bg-glow{position:absolute;left:0;top:0;width:920px;height:920px;margin:-460px 0 0 -460px;border-radius:50%;pointer-events:none;opacity:0;mix-blend-mode:screen;will-change:transform,opacity;
  background:radial-gradient(circle,rgba(150,195,255,.15),rgba(150,195,255,.05) 42%,rgba(150,195,255,0) 70%)}
@media (prefers-reduced-motion: reduce){
  .hero-bg-media{transform:none}
  .hero-bg-media video{display:none}
  .hero-bg-glow{display:none}
}
.hero-screen{position:relative;z-index:1;height:100vh;min-height:640px;display:flex;flex-direction:column;
  padding:108px var(--wrap-pad) 40px;color:#fff}
.hero-title{font-size:clamp(52px,7.4vw,106px);font-weight:600;line-height:1;letter-spacing:-.04em;color:#fff;max-width:1300px}
.hero-sub{margin-top:34px;font-size:20px;font-weight:500;line-height:1.4}
.hero-actions{margin-top:42px;align-self:flex-start;display:inline-flex;padding:6px;gap:6px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn-hero-primary{display:inline-flex;align-items:center;height:54px;padding:0 42px;border-radius:50px 0 0 50px;
  background:#fff;color:#181818;font-size:16px;font-weight:700}
.btn-hero-ghost{display:inline-flex;align-items:center;height:54px;padding:0 42px;border-radius:0 50px 50px 0;
  background:rgba(255,255,255,.16);color:#fff;font-size:16px;font-weight:600;transition:background .3s var(--ease)}
.btn-hero-ghost:hover{background:rgba(255,255,255,.26)}
.hero-bottom{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:48px;padding-top:24px}
/* ---- World Gate: portal to the Creative Studio (the first world) ---- */
.world-gate{position:relative;flex:0 0 auto;width:378px;height:164px;display:block;border-radius:16px;
  overflow:hidden;isolation:isolate;border:1px solid rgba(150,190,255,.18);
  box-shadow:0 10px 40px -18px rgba(0,0,0,.6);
  transition:border-color .45s var(--ease),box-shadow .45s var(--ease)}
.world-gate img,.wg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;
  transition:transform .7s var(--ease),filter .7s var(--ease)}
.wg-video{opacity:0;transition:opacity 1.2s var(--ease),transform .7s var(--ease),filter .7s var(--ease)}
.wg-video.on{opacity:1}
.world-gate::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(4,8,18,0) 44%,rgba(4,8,18,.74) 100%)}
.wg-label{position:absolute;left:14px;right:12px;bottom:11px;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.wg-text{display:flex;flex-direction:column;gap:2px}
.wg-eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(190,215,255,.78)}
.wg-title{font-size:17px;font-weight:700;color:#fff;letter-spacing:-.01em}
.wg-chip{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#fff;font-size:15px;transition:background .35s var(--ease),transform .45s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .world-gate:hover{border-color:rgba(255,196,130,.44);
    box-shadow:0 0 0 1px rgba(255,190,120,.22),0 14px 52px -16px rgba(255,170,90,.28)}
  .world-gate:hover img,.world-gate:hover .wg-video{transform:scale(1.055);filter:brightness(1.08)}
  .world-gate:hover .wg-chip{background:var(--blue);transform:translate(2px,-2px)}
}
.world-gate:focus-visible{outline:2px solid #8FC0FF;outline-offset:3px}
/* stepping-through overlay, driven by main.js on gate click */
.ws-veil{position:fixed;inset:0;z-index:200;pointer-events:none;opacity:0;
  background:radial-gradient(60% 60% at 22% 78%,rgba(255,236,210,.96) 0%,rgba(200,220,255,.9) 42%,rgba(6,12,26,.97) 100%);
  transition:opacity .45s var(--ease)}
body.ws-leaving .ws-veil{opacity:1}
.hero-strip{flex:1 1 auto;display:flex;align-items:flex-end;min-width:0}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ---- Intelligence Rail: capability rail with a continuous travelling signal ----
   labels above, one 1px line below; the amber beam decides which capability is
   "processing". States: idle .38 / upcoming .55 / active .95 (hierarchy, never
   everything lit at once). */
.hero-rail{flex:1 1 auto;min-width:0;position:relative}
.hr-viewport{position:relative;overflow:hidden;padding:20px 0 26px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
/* the infrastructure line */
.hr-viewport::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1px;background:rgba(255,255,255,.10)}
.hr-track{display:flex;align-items:center;width:max-content;will-change:transform}
.hr-cap{position:relative;display:flex;align-items:center;gap:9px;flex:none;padding:6px 2px;border-radius:6px;outline:none}
.hr-cap + .hr-cap{margin-left:58px}
.hr-glyph{width:19px;height:19px;flex:none;color:rgba(160,180,210,.45);overflow:visible;transition:color .32s ease}
.hr-glyph line,.hr-glyph rect,.hr-glyph circle{stroke:currentColor;stroke-width:.8;fill:none;transition:color .32s ease,stroke .32s ease,fill .32s ease}
.hr-glyph .f{fill:currentColor;stroke:none}
.hr-name{font-size:12.5px;font-weight:600;letter-spacing:.04em;white-space:nowrap;color:rgba(255,255,255,.38);transition:color .32s ease}
.hr-tech{position:absolute;left:28px;bottom:100%;margin-bottom:5px;font-size:9.5px;font-weight:500;letter-spacing:.16em;white-space:nowrap;color:rgba(168,203,255,.6);
  opacity:0;transform:translateY(3px);transition:opacity .32s ease .18s,transform .32s ease .18s;pointer-events:none}
.hr-fiber{display:none}
/* the amber node on the line under an active capability */
.hr-cap::after{content:"";position:absolute;left:50%;bottom:-15px;width:4px;height:4px;margin-left:-2px;border-radius:50%;
  background:#FFB46A;box-shadow:0 0 8px 2px rgba(255,140,60,.4);
  opacity:0;transform:scale(.4);transition:opacity .3s ease,transform .3s ease}
/* state ladder: upcoming -> active (JS drives .up/.on from the beam position) */
.hr-cap.up .hr-name{color:rgba(255,255,255,.55)}
.hr-cap.up .hr-glyph{color:rgba(190,210,240,.62)}
.hr-cap.on .hr-name,.hr-cap:hover .hr-name,.hr-cap:focus-visible .hr-name{color:rgba(255,255,255,.95)}
.hr-cap.on .hr-glyph,.hr-cap:hover .hr-glyph,.hr-cap:focus-visible .hr-glyph{color:#5FA8FF}
.hr-cap.on::after,.hr-cap:hover::after,.hr-cap:focus-visible::after{opacity:1;transform:scale(1)}
.hr-cap:hover,.hr-cap:focus-visible{z-index:1}
.hr-cap .hr-glyph [data-g="1"]{transition-delay:0s}
.hr-cap .hr-glyph [data-g="2"]{transition-delay:.07s}
.hr-cap .hr-glyph [data-g="3"]{transition-delay:.15s}
.hr-cap:hover .hr-tech,.hr-cap:focus-visible .hr-tech{opacity:1;transform:none}
.hr-cap:focus-visible{box-shadow:0 0 0 2px rgba(120,170,255,.55)}
/* cursor proximity: whole rail lifts a whisper */
.hero-rail.near .hr-name{color:rgba(255,255,255,.5)}
.hero-rail.near .hr-cap.on .hr-name{color:rgba(255,255,255,.95)}
/* the travelling beam: a short amber trail with a bright head, riding the line */
.hr-beam{position:absolute;bottom:8px;left:0;width:120px;height:3px;margin-bottom:-1px;pointer-events:none;will-change:transform;
  background:linear-gradient(90deg,transparent,rgba(255,122,50,.0) 8%,rgba(255,122,50,.45) 72%,#FF7A32 100%);
  border-radius:2px}
.hr-beam::after{content:"";position:absolute;right:-2px;top:50%;width:4.5px;height:4.5px;margin-top:-2.25px;border-radius:50%;
  background:#FFC08A;box-shadow:0 0 9px 2px rgba(255,140,60,.55)}
/* reduced motion: calm static rail, no beam (beam is JS-created) */
@media (prefers-reduced-motion:reduce){
  .hr-name{color:rgba(255,255,255,.55)}
}
/* flower -> rail particle */
.hero-particle{position:absolute;width:3px;height:3px;border-radius:50%;pointer-events:none;opacity:0;
  background:#a9ccff;box-shadow:0 0 6px 1px rgba(110,165,255,.8);will-change:transform,opacity}
.hero-particle.amber{background:#FFB46A;box-shadow:0 0 7px 1.5px rgba(255,150,60,.8)}

/* scrub screen (per-character reveal over the pinned flower; text scrolls 1:1
   never pinned, the white runs through it as you scroll) */
.hero-scrub{position:relative;z-index:1;padding:32vh 0 36vh;pointer-events:none}
.scrub-text{max-width:900px;margin:0 auto;text-align:center;
  font-size:56px;font-weight:600;line-height:1.08;letter-spacing:-.03em;color:#fff;padding:0 20px}
.scrub-text .sw{display:inline-block;white-space:nowrap}
.scrub-text .c{display:inline-block;color:#E3E3E3;filter:blur(7px);transition:color .3s var(--ease),filter .3s var(--ease)}
.scrub-text .c.on{color:#fff;filter:blur(0)}

/* about lives inside the hero, over the pinned flower */
.hero .about{position:relative;z-index:1;padding:40px 0 140px;color:#fff;background:none}
.hero-tail{height:100vh}

/* ========================================================================
   SERVICES
   ======================================================================== */
.svc{position:relative;z-index:2;margin-top:-100vh;background:var(--bg-alt);padding:110px 0 60px}
.svc .sec-sub{margin-bottom:30px}
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:64px}
.svc-card{background:var(--card);border-radius:var(--r-card);padding:34px;display:flex;flex-direction:column;align-items:flex-start;min-height:470px}
.svc-card h3{font-size:32px;font-weight:600;letter-spacing:-.02em;margin:18px 0 12px}
.svc-card p{font-size:16px;line-height:1.6;color:#454545;max-width:500px}
.svc-card ul{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;gap:9px}
.svc-card li{font-size:15px;color:#3c3c3c;padding-left:16px;position:relative;
  transition:transform .2s var(--ease)}
.svc-card li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--blue);
  transition:box-shadow .2s var(--ease),background .2s var(--ease)}
.svc-card li:hover{transform:translateX(2px)}
.svc-card li:hover::before{background:#2f8ae6;box-shadow:0 0 6px rgba(2,116,222,.55)}

/* ---- service card: idle calm, quietly alive on interaction ---- */
.svc-card{transition:background .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .svc-card:hover{background:#FBFCFE;transform:translateY(-2px);
    box-shadow:inset 0 0 0 1px rgba(2,116,222,.13),0 14px 34px rgba(10,30,60,.05)}
  .svc-card:hover .chip svg,.svc-card:hover h3 .blue{filter:brightness(1.12)}
  /* adjacent visual joins in: whisper of scale on the media in the same row */
  .svc-card:hover + .svc-media .gm-window video,
  .svc-card:hover + .svc-media .gm-window img,
  .svc-media:has(+ .svc-card:hover) .gm-window video,
  .svc-media:has(+ .svc-card:hover) .gm-window img{transform:scale(1.012)}
}
.svc-media .gm-window video,.svc-media .gm-window img{transition:transform .7s var(--ease)}

/* ---- signature AI Lab CTA ---- */
.svc-cta{position:relative;display:inline-flex;align-items:center;gap:10px;margin-top:24px;height:46px;padding:0 18px 0 15px;
  background:#fff;border:1px solid #E2E6EB;border-radius:var(--r-pill);overflow:hidden;
  font-size:14.5px;font-weight:600;color:#0a0a0a;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.sc-mark{display:inline-flex;color:var(--blue);transition:transform .35s var(--ease)}
.sc-arr{display:inline-flex;color:#6e6e6e;transition:transform .3s var(--ease),color .3s var(--ease)}
.svc-cta::after{content:"";position:absolute;top:0;bottom:0;width:44%;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent,rgba(2,116,222,.07),transparent);transform:translateX(-140%)}
.svc-cta:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){
  .svc-cta:hover{border-color:rgba(2,116,222,.45);transform:translateY(-1px);
    box-shadow:0 8px 20px rgba(2,116,222,.13)}
  .svc-cta:hover .sc-mark{transform:rotate(90deg)}
  .svc-cta:hover .sc-arr{transform:translateX(4px);color:var(--blue)}
  .svc-cta:hover::after{animation:ctaSweep .55s var(--ease)}
}
@keyframes ctaSweep{from{opacity:1;transform:translateX(-140%)}to{opacity:1;transform:translateX(340%)}}

/* ---- entrance choreography: eyebrow -> title -> copy -> list -> CTA ---- */
.svc-card[data-nv-reveal]{transform:translateY(12px);transition-duration:.7s}
.svc-card[data-nv-reveal] .chip,.svc-card[data-nv-reveal] h3,.svc-card[data-nv-reveal] p,.svc-card[data-nv-reveal] .svc-cta{
  opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.svc-card[data-nv-reveal] li{opacity:0;transform:translateY(5px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.svc-card[data-nv-reveal] h3{transition-delay:.08s}
.svc-card[data-nv-reveal] p{transition-delay:.16s}
.svc-card[data-nv-reveal] li:nth-child(1){transition-delay:.24s}
.svc-card[data-nv-reveal] li:nth-child(2){transition-delay:.295s}
.svc-card[data-nv-reveal] li:nth-child(3){transition-delay:.35s}
.svc-card[data-nv-reveal] li:nth-child(4){transition-delay:.405s}
.svc-card[data-nv-reveal] li:nth-child(5){transition-delay:.46s}
.svc-card[data-nv-reveal] li:nth-child(6){transition-delay:.515s}
.svc-card[data-nv-reveal] .svc-cta{transition-delay:.56s}
.svc-card.in .chip,.svc-card.in h3,.svc-card.in p,.svc-card.in li,.svc-card.in .svc-cta{opacity:1;transform:none}
.svc-media[data-nv-reveal]{opacity:0;transform:scale(.985);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.svc-media[data-nv-reveal].in{opacity:1;transform:none}
/* glass frame: blurred bleed copy behind a
   translucent 5px glass rim with the sharp media in an inset window */
.svc-media{position:relative;border-radius:var(--r-card);overflow:hidden;min-height:470px;background:#0a0a0a}
.svc-media img,.svc-media video{width:100%;height:100%;object-fit:cover}
.gm-blur{position:absolute;inset:-20px;border-radius:16px;overflow:hidden;filter:blur(10px)}
.gm-pane{position:absolute;inset:40px;border-radius:20px;background:rgba(255,255,255,.15)}
.gm-window{position:absolute;inset:45px;border-radius:16px;overflow:hidden}
/* growth card: whisper of light responds to the cursor (desktop only) */
.svc-growth .gm-window::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(60% 55% at 50% 42%,rgba(210,230,255,.16),rgba(210,230,255,0) 70%);
  transition:opacity .5s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .svc-growth:hover .gm-window::after{opacity:1}
  .svc-growth .gm-window video{transition:filter .5s var(--ease)}
  .svc-growth:hover .gm-window video{filter:brightness(1.025)}
}

/* ========================================================================
   PROCESS
   ======================================================================== */
.proc{background:var(--bg);padding:110px 0}
.proc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:60px;margin-bottom:56px}
.proc-side{display:flex;flex-direction:column;align-items:flex-start;gap:26px;max-width:460px}
.proc-side .sec-sub{margin-top:0}
.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.proc-card{background:var(--card);border-radius:var(--r-card);padding:28px;min-height:290px;display:flex;flex-direction:column}
.step{font-size:13px;font-weight:600;color:var(--blue)}
.proc-card h3{font-size:22px;font-weight:600;letter-spacing:-.01em;margin:14px 0 auto}
.proc-card p{font-size:15px;line-height:1.55;color:var(--body);padding-top:26px}

/* ---- How it works: process choreography (layout untouched) ----
   States: upcoming (default) -> .is-active -> .is-done, driven by scroll. */
.proc-top{display:flex;align-items:center;gap:12px}
.step{transition:color .3s var(--ease)}
.proc-card .step{color:#4A6076}
.proc-card.is-active .step,.proc-card.is-done .step{color:var(--blue)}
.proc-sig{display:inline-flex;align-items:center;gap:8px}
.ps-node{position:relative;width:6px;height:6px;border-radius:50%;background:rgba(2,116,222,.32);
  transition:background .35s var(--ease),box-shadow .35s var(--ease)}
.ps-node::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1px solid var(--blue);opacity:0}
.ps-line{position:relative;display:block;width:26px;height:1px;background:rgba(10,10,10,.13);border-radius:1px;overflow:hidden}
.ps-line u{position:absolute;inset:0;background:var(--blue);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease)}
.proc-card.is-active .ps-node,.proc-card.is-done .ps-node{background:var(--blue)}
.proc-card.is-active .ps-node{box-shadow:0 0 7px 1px rgba(2,116,222,.5)}
.proc-card.is-active .ps-line u,.proc-card.is-done .ps-line u{transform:scaleX(1)}

/* card states: cooler white + blue hairline while active, calm when done */
.proc-card{position:relative;overflow:hidden;
  transition:background .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease)}
.proc-card.is-active{background:#FBFCFE;transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px rgba(2,116,222,.16),0 12px 28px rgba(10,30,60,.06)}
.proc-card.is-done{box-shadow:inset 0 0 0 1px rgba(2,116,222,.07)}
/* content becomes "ready": title then description gain full contrast */
.proc-card h3{opacity:.9;transition:opacity .35s var(--ease) .08s,transform .3s var(--ease)}
.proc-card p{opacity:.84;transition:opacity .35s var(--ease) .16s}
.proc-card.is-active h3,.proc-card.is-done h3,.proc-card.is-active p,.proc-card.is-done p{opacity:1}
/* one-shot light sweep along the top edge when a step activates */
.proc-card::before{content:"";position:absolute;top:0;left:0;width:25%;height:1px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(2,116,222,.9),transparent)}
.proc-card.is-active::before{animation:procSweep .9s var(--ease)}
@keyframes procSweep{0%{opacity:0;transform:translateX(-100%)}20%{opacity:1}100%{opacity:0;transform:translateX(400%)}}
/* pointer-follow illumination, barely there */
.proc-card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s var(--ease);
  background:radial-gradient(220px 180px at var(--px,50%) var(--py,50%),rgba(2,116,222,.055),transparent 70%)}

/* step-specific micro motifs, each fires once on activation */
.proc-card[data-step="1"].is-active .ps-node::after{animation:sigFind .8s var(--ease)}
@keyframes sigFind{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(2.6)}}
.proc-card[data-step="2"].is-active .ps-line u{animation:sigDraw .8s var(--ease)}
@keyframes sigDraw{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.proc-card[data-step="3"] .ps-line u{transform-origin:center}
.proc-card[data-step="3"].is-active .ps-line u{animation:sigJoin .75s var(--ease)}
@keyframes sigJoin{0%{transform:scaleX(0)}45%{transform:scaleX(.34)}100%{transform:scaleX(1)}}
.proc-card[data-step="4"].is-active .ps-node::after{animation:sigLift .8s var(--ease)}
@keyframes sigLift{0%{opacity:.9;transform:translateY(0) scale(.5)}100%{opacity:0;transform:translateY(-9px) scale(.5)}}

@media (hover:hover) and (pointer:fine){
  .proc-card:hover{transform:translateY(-2px);background:#FBFCFE;
    box-shadow:inset 0 0 0 1px rgba(2,116,222,.16),0 14px 30px rgba(10,30,60,.07)}
  .proc-card:hover::after{opacity:1}
  .proc-card:hover .ps-node{background:var(--blue);box-shadow:0 0 7px 1px rgba(2,116,222,.5)}
  .proc-card:hover .ps-line u{transform:scaleX(1)}
  .proc-card:hover h3{opacity:1;transform:translateX(1px)}
  .proc-card:hover p,.proc-card:hover .step{opacity:1}
}

/* entrance choreography: label -> headline -> grey line -> copy -> CTA -> cards */
.proc [data-nv-reveal]{transition-duration:.7s}
.proc .h2[data-nv-reveal]{transition-duration:.82s;transition-delay:.09s}
.proc .label[data-nv-reveal],.proc .h2[data-nv-reveal]{transform:translateY(14px)}
.proc .sec-sub[data-nv-reveal]{transform:translateY(12px);transition-delay:.3s}
.proc .proc-cta[data-nv-reveal]{transform:translateY(12px);transition-delay:.42s}
/* the scoped entrance rules outrank the global [data-nv-reveal].in reset,
   so restore the settled position at matching specificity */
.proc .label[data-nv-reveal].in,.proc .h2[data-nv-reveal].in,
.proc .sec-sub[data-nv-reveal].in,.proc .proc-cta[data-nv-reveal].in{transform:none}
.proc .h2 .h2-dim{display:inline-block;opacity:0;clip-path:inset(0 100% 0 0);
  transition:clip-path .8s var(--ease) .22s,opacity .5s var(--ease) .22s}
.proc .h2.in .h2-dim{opacity:1;clip-path:inset(0 0 0 0)}
.proc .label.in .label-bar{animation:barSignal .45s var(--ease)}
@keyframes barSignal{0%{transform:scaleY(.3)}60%{filter:brightness(1.6)}100%{transform:scaleY(1)}}
.proc-card[data-nv-reveal]{transform:translateY(12px) scale(.992);transition-duration:.62s}
.proc-card[data-nv-reveal].in{transform:none}

/* the section's CTA: arrow sits in existing padding, so nothing reflows */
.proc-cta{padding-right:34px}
.pc-label{display:inline-block;transition:transform .3s var(--ease)}
.pc-arr{position:absolute;right:14px;top:50%;display:inline-flex;margin-top:-7px;opacity:0;
  transform:translateX(-4px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.proc .proc-side .proc-cta:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){
  /* must outrank both the site-wide .btn-blue:hover reset and the .in position reset */
  .proc .proc-side .proc-cta:hover{box-shadow:0 12px 26px -10px rgba(2,116,222,.55);transform:translateY(-2px)}
  .proc-cta:hover .pc-label{transform:translateX(-5px)}
  .proc-cta:hover .pc-arr{opacity:1;transform:translateX(3px)}
}

/* ========================================================================
   BEFORE / AFTER
   ======================================================================== */
.ba{background:var(--bg-alt);padding:110px 0}
.ba-title{text-align:center;margin:0 auto 60px;max-width:1000px}
/* 1000px block = 31px bar | 8 | card | 6 | card | 8 | 31px bar */
.ba-grid{display:grid;grid-template-columns:31px 8px 1fr 6px 1fr 8px 31px;gap:0;max-width:1000px;margin:0 auto;align-items:stretch}
.ba-tab-after{grid-column:1}
.ba-card.ba-after{grid-column:3}
.ba-card.ba-before{grid-column:5}
.ba-tab-before{grid-column:7}
.ba-tab{border-radius:12px}
.ba-tab-after{background:var(--blue)}
.ba-tab-before{background:transparent}
.ba-card{background:var(--card);border-radius:20px;padding:21px 22px 22px}
.ba-after{border:1px solid var(--blue)}
.ba-before{background:#F0F0F0;border:0}
.ba-kicker{font-size:14px;font-weight:500;color:#6e6e6e;margin-bottom:6px}
.ba-card h3{font-size:24px;font-weight:600;line-height:1.3;color:#0a0a0a;margin-bottom:52px}
.ba-card h3 sup{font-size:.62em;top:-.42em}
.ba-card ul{display:flex;flex-direction:column;gap:6px}
.ba-card li{font-size:14px;font-weight:500;line-height:20px;color:#6e6e6e;padding-left:18px;position:relative}
/* outlined circle icons: same grey text both sides */
.ba-card li::before{content:"";position:absolute;left:0;top:3px;width:13px;height:13px;border-radius:50%;border:1px solid currentColor}
.ba-after li::before{border-color:var(--blue)}
.ba-before li::before{border-color:#9a9a9a}
.ba-after li::after{content:"";position:absolute;left:4px;top:7px;width:4.5px;height:2.5px;
  border-left:1.2px solid var(--blue);border-bottom:1.2px solid var(--blue);transform:rotate(-45deg)}
.ba-before li::after{content:"";position:absolute;left:4px;top:7px;width:5px;height:5px;
  background:linear-gradient(45deg,transparent 43%,#9a9a9a 43%,#9a9a9a 57%,transparent 57%),
             linear-gradient(-45deg,transparent 43%,#9a9a9a 43%,#9a9a9a 57%,transparent 57%)}

/* ========================================================================
   DARK BAND: FEATURED CASE
   ======================================================================== */
.dark{position:relative;background:var(--dark);padding:200px 0 120px;overflow:clip}
.dark-bg{position:absolute;inset:0}
.dark-bg img{width:100%;height:100%;object-fit:cover;opacity:.9}
/* scrim: keeps the case heading legible and blends the band into the grid below */
.dark-bg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 42%,rgba(8,10,14,.55) 74%,var(--dark) 100%)}
.dark .wrap{position:relative}
.scrub-dark{position:static;font-size:52px;max-width:980px;margin:0 auto 140px;display:block}
.case-feature{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
/* blue optical glass: cool tint + restrained internal bloom, the photo stays readable through it */
.cf-card{position:relative;overflow:hidden;border-radius:var(--r-card);padding:32px;min-height:560px;display:flex;flex-direction:column;
  background:linear-gradient(168deg,rgba(10,20,38,.62) 0%,rgba(6,12,24,.74) 100%);
  border:1px solid rgba(150,190,255,.14);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);color:#fff;
  box-shadow:inset 0 1px 0 rgba(190,220,255,.10),inset 0 26px 50px -34px rgba(160,200,255,.16)}
.cf-card::before{content:"";position:absolute;inset:-30%;pointer-events:none;opacity:.55;
  background:radial-gradient(44% 38% at var(--cf-x,28%) 82%, var(--cf-tint,rgba(2,116,222,.26)), transparent 72%);
  transition:opacity .6s var(--ease),transform .8s var(--ease)}
.cf-card>*{position:relative}
.cf-build{--cf-tint:rgba(2,116,222,.28);--cf-x:26%}
.cf-process{--cf-tint:rgba(46,104,236,.24);--cf-x:52%}
.cf-founder{--cf-tint:rgba(88,90,232,.22);--cf-x:74%}
.case-feature .cf-card:hover::before{opacity:.78;transform:translate(0,-4%) scale(1.04)}
.cf-card h3{font-size:34px;font-weight:600;letter-spacing:-.02em}
.cf-desc{font-size:19px;line-height:1.45;margin-top:auto}
.cf-row{display:flex;justify-content:space-between;align-items:center}
.cf-year{font-size:15px;color:rgba(255,255,255,.7)}
.cf-meta{margin-top:auto;display:flex;flex-direction:column;gap:14px}
.cf-meta dt{font-size:13.5px;color:rgba(255,255,255,.5)}
.cf-meta dd{font-size:16px;font-weight:600;margin-top:2px}
.cf-card blockquote{font-size:26px;font-weight:500;line-height:1.35;letter-spacing:-.01em;margin-top:26px}
.cf-person{display:flex;align-items:center;gap:12px;margin-top:auto}
.cf-person img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.cf-person div{display:flex;flex-direction:column;gap:2px}
.cf-person strong{font-size:16px}
.cf-person span{font-size:13.5px;color:rgba(255,255,255,.65)}
.cf-person .cf-loc{color:rgba(255,255,255,.45)}

/* ---- AI Lab intro cards (authentic content, restrained micro-interactions) ---- */
.cf-card{transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
@media (hover:hover) and (pointer:fine){
  /* .case-feature prefix outranks the later [data-nv-reveal].in transform reset */
  .case-feature .cf-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.14);
    box-shadow:0 18px 40px rgba(0,0,0,.28)}
}
.cf-eyebrow{font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.cf-build h3{margin-top:16px}
.cf-caps{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:22px;font-size:14px;font-weight:600}
.cf-caps span{color:rgba(255,255,255,.75);transition:color .3s var(--ease)}
.cf-caps i{font-style:normal;color:rgba(255,255,255,.3)}
@media (hover:hover) and (pointer:fine){
  .cf-build:hover .cf-caps span{color:#fff}
  .cf-build:hover .cf-caps span:nth-child(1){transition-delay:0s}
  .cf-build:hover .cf-caps span:nth-child(3){transition-delay:.07s}
  .cf-build:hover .cf-caps span:nth-child(5){transition-delay:.14s}
  .cf-build:hover .cf-caps span:nth-child(7){transition-delay:.21s}
}
.cf-brand{font-size:19px;font-weight:700;letter-spacing:-.02em}
.cf-proc-main{font-size:25px;font-weight:600;letter-spacing:-.01em;margin-top:auto;line-height:1.35}
.cf-proc-main i{font-style:normal;color:var(--blue);font-weight:400;margin:0 2px}
.cf-proc-sub{font-size:15px;color:rgba(255,255,255,.6);margin-top:10px}
.cf-progress{position:relative;display:block;height:1px;margin-top:24px;background:rgba(255,255,255,.14);overflow:hidden}
.cf-progress u{position:absolute;inset:0;background:var(--blue);transform:scaleX(0);transform-origin:left;
  transition:transform 1s var(--ease) .35s}
.cf-card.in .cf-progress u{transform:scaleX(1)}
.cf-steps{margin-top:24px;gap:12px}
.cf-steps dt{color:var(--blue);font-weight:600;font-size:13px}
.cf-steps div:last-child dt{font-size:16px;line-height:.9}
.cf-steps dd{font-size:15.5px}
.cf-founder blockquote{margin-top:auto;padding-bottom:26px}
.cf-founder{position:relative}
.cf-founder::after{content:"";position:absolute;inset:0;border-radius:var(--r-card);pointer-events:none;opacity:0;
  background:radial-gradient(260px 220px at var(--fx,70%) var(--fy,20%),rgba(255,255,255,.07),transparent 70%);
  transition:opacity .5s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cf-founder:hover::after{opacity:1}
}
.cf-person strong{display:block;font-size:14.5px}
.cf-person span{font-size:12.5px;color:rgba(255,255,255,.6)}

/* ========================================================================
   CASE GRID  (dark #181818)
   ======================================================================== */
/* the case heading rides on the dark band, so band and grid read as one block */
.dark-caseshead{margin-top:130px}
.cases2{background:var(--dark);padding:56px 0 110px;color:#fff}
.cases2-head{display:flex;justify-content:space-between;align-items:flex-end;gap:60px;margin-bottom:0}
.dark-caseshead .cases2-head{margin-bottom:0}
.cases2-side{display:flex;flex-direction:column;align-items:flex-start;gap:24px;max-width:460px}
.cases2-side .sec-sub{margin-top:0}
.cg-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cg-card{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);border-radius:var(--r-card);padding:28px;display:flex;flex-direction:column;min-height:440px}
/* one published case: span the row and size to content instead of leaving a half-empty
   grid with a 440px hole in it. No :has() needed, so this holds in every browser. */
.cg-card:only-child{grid-column:1/-1;min-height:0}
.cg-card:only-child .cg-desc{padding-top:30px}
.cg-top{display:flex;justify-content:space-between;gap:24px}
.cg-top>div{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.cg-logo{height:22px;margin-bottom:26px;filter:brightness(0) invert(1);opacity:.9}
.cg-card h3{font-size:32px;font-weight:600;letter-spacing:-.02em}
.cg-tag{font-size:15px;color:rgba(255,255,255,.55);margin-top:6px}
.cg-year{font-size:14px;color:rgba(255,255,255,.4);margin-top:8px}
.cg-top figure{flex:0 0 215px;border-radius:12px;overflow:hidden;height:160px}
.cg-top figure img,.cg-top figure video{width:100%;height:100%;object-fit:cover}
.cg-desc{font-size:19px;line-height:1.45;color:rgba(255,255,255,.85);margin-top:auto;padding-top:44px;max-width:560px}
.cg-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.cg-chips span{padding:7px 13px;border-radius:var(--r-pill);background:rgba(255,255,255,.07);font-size:13px;color:rgba(255,255,255,.7)}
.cg-chips strong{color:#fff;font-weight:700;margin-right:4px}
/* CalcAI flagship card: same skeleton as the other cases, no special hover
   (case cards give no hover response at all) */
.cg-wordmark{display:block;height:22px;margin-bottom:26px;font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:22px;color:#fff}
.cg-wordmark::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#FF8A3C;margin-left:7px;vertical-align:8px}
.csl-wordmark{color:#0a0a0a}

/* ========================================================================
   TESTIMONIALS (darker, slider)
   ======================================================================== */

/* ========================================================================
   PRICING (white)
   ======================================================================== */
.pricing{background:#fff;padding:110px 0}
.pr-head{display:flex;justify-content:space-between;align-items:flex-end;gap:60px;margin-bottom:52px}
.pr-toggle{display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:var(--r-pill);background:var(--bg);font-size:14.5px;color:#8a8a8a}
.pr-toggle .on{color:#000;font-weight:600}
.pr-switch{position:relative;width:46px;height:26px;border-radius:20px;background:#cfcfcf;transition:background .25s var(--ease)}
.pr-switch span{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .25s var(--ease)}
.pr-switch.on{background:var(--blue)}
.pr-switch.on span{transform:translateX(20px)}
.pr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.pr-card{background:var(--bg);border-radius:var(--r-card);padding:30px;display:flex;flex-direction:column;border:1.5px solid transparent}
.pr-popular{background:#fff;border-color:var(--blue);box-shadow:0 24px 60px -30px rgba(2,116,222,.25)}
.pr-pop{color:var(--blue);font-size:13.5px;font-weight:600;margin-left:10px}
.pr-card .chip{align-self:flex-start;background:#fff;border-color:rgba(0,0,0,.08)}
.pr-popular .chip{background:var(--bg)}
.pr-price{display:flex;align-items:baseline;gap:10px;margin-top:26px}
.pr-old{font-size:22px;font-weight:600;color:#b3b3b3;text-decoration:line-through}
.pr-price strong{font-size:40px;font-weight:600;letter-spacing:-.02em}
.pr-per{font-size:14px;color:#8a8a8a}
.pr-for{font-size:15px;color:var(--body);margin:16px 0 26px;min-height:44px}
.pr-btn{display:flex;align-items:center;justify-content:center;height:54px;border-radius:var(--r-pill);background:#fff;
  color:var(--blue);font-size:15.5px;font-weight:700;border:1px solid rgba(0,0,0,.06);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.pr-btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(0,0,0,.25)}
.pr-btn-blue{background:var(--blue);color:#fff}
.pr-incl{font-size:13.5px;color:#8a8a8a;margin:28px 0 14px}
.pr-card ul{display:flex;flex-direction:column;gap:11px}
.pr-card li{font-size:15px;color:#333;padding-left:24px;position:relative}
.pr-card li::before{content:"";position:absolute;left:2px;top:3px;width:13px;height:13px;border-radius:50%;background:var(--blue);opacity:.85}
.pr-card li::after{content:"";position:absolute;left:6px;top:7px;width:4px;height:2.5px;border-left:1.4px solid #fff;border-bottom:1.4px solid #fff;transform:rotate(-45deg)}

/* ========================================================================
   TEAM
   ======================================================================== */
/* FDR: the founder feature (replaces the fictional team grid). Warm, editorial,
   one real person. The orange rule between portrait and story draws downward on
   entry: experience flowing into the independent studio. */
.fdr{background:#F7F5F1;padding:130px 0;color:#141210}
.fdr-eyebrow{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#8a8378}
.fdr-dot{width:6px;height:6px;border-radius:50%;background:#FF7A32;flex:none}
.fdr-h{margin-top:22px;font-size:clamp(38px,3.9vw,56px);font-weight:600;letter-spacing:-.03em;line-height:1.12;color:#141210;max-width:720px}
.fdr-comp{display:grid;grid-template-columns:minmax(0,42fr) 1px minmax(0,54fr);gap:0 60px;margin-top:76px;align-items:stretch}
.fdr-portrait{margin:0}
/* entrance per brief: fade + settle from 1.02, no big slide */
.fdr-portrait[data-nv-reveal]{transform:scale(1.02);transition-duration:.8s}
.fdr-frame{display:block;border-radius:20px;overflow:hidden;aspect-ratio:3/4;background:#151310}
.fdr-frame img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .fdr .fdr-frame:hover img{transform:scale(1.015)}
}
.fdr-note{margin-top:16px;font-size:15px;font-style:italic;color:#8a8378;transform:rotate(-1.2deg);transform-origin:left}
/* the signature rule: draws top to bottom, ends in a small orange point */
.fdr-rule{position:relative;width:1px}
.fdr-rule i{display:block;width:1px;height:100%;background:rgba(255,122,50,.55);
  transform:scaleY(0);transform-origin:top;transition:transform 1.1s cubic-bezier(.6,.05,.3,1) .25s}
.fdr-rule::after{content:"";position:absolute;left:50%;bottom:-2px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;
  background:#FF7A32;opacity:0;transition:opacity .4s ease 1.3s}
.fdr-portrait.in ~ .fdr-rule i{transform:scaleY(1)}
.fdr-portrait.in ~ .fdr-rule::after{opacity:1}
.fdr-story{max-width:560px}
.fdr-name{font-size:24px;font-weight:600;letter-spacing:-.01em}
.fdr-role{margin-top:7px;font-size:12.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:#8a8378}
.fdr-text{margin-top:32px;display:flex;flex-direction:column;gap:16px}
.fdr-text p{font-size:18.5px;line-height:1.62;color:#37332c}
.fdr-direct{margin-top:28px;font-size:15.5px;line-height:1.65;color:#6d675e;max-width:500px}
.fdr-exp{margin-top:46px;padding-top:26px;border-top:1px solid rgba(20,18,16,.09)}
.fdr-exp-label{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#9a938a}
.fdr-exp-line{margin-top:11px;font-size:15px;color:#37332c}
.fdr-exp-line i{font-style:normal;color:#c9c2b6;margin:0 13px}
.fdr-meta{margin-top:13px;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#b3ab9f}
.fdr-cta-row{margin-top:46px}
.fdr-q{font-size:15px;color:#6d675e}
.fdr-cta{display:inline-flex;align-items:center;gap:9px;margin-top:10px;padding:6px 0;font-size:17px;font-weight:600;color:#141210;
  background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1.5px;transition:background-size .28s var(--ease)}
.fdr-cta i{width:5px;height:5px;border-radius:50%;background:#FF7A32;flex:none;opacity:0;transform:scale(.5);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.fdr-cta span{font-size:13px;color:#8a8378;transition:transform .25s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .fdr .fdr-cta:hover{background-size:100% 1.5px}
  .fdr .fdr-cta:hover i{opacity:1;transform:scale(1)}
  .fdr .fdr-cta:hover span{transform:translate(3px,-3px)}
}
.fdr-cta:focus-visible{outline:2px solid #FF9A5C;outline-offset:4px}
@media (prefers-reduced-motion:reduce){
  .fdr-rule i{transition:none;transform:scaleY(1)}
  .fdr-rule::after{transition:none;opacity:1}
}

/* ========================================================================
   FAQ
   ======================================================================== */
.faq{background:var(--bg-alt);padding:110px 0}
/* centered heading + one 638px panel holding tabs, items and the contact foot */
.faq-head{text-align:center;max-width:1000px;margin:0 auto}
.faq-head .label{justify-content:center}
.faq-head .sec-sub{max-width:600px;margin:14px auto 0;text-align:center}
.faq-panel{max-width:638px;margin:44px auto 0;border-radius:24px;padding:16px;
  background:linear-gradient(180deg,#FBFBFB 0%,#F1F1F1 100%);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.faq-tabs{display:flex;gap:6px;margin:0 0 12px;padding:0 4px}
.faq-tab{padding:8px 12px;border-radius:var(--r-pill);background:transparent;font-size:14px;font-weight:600;color:#6e6e6e;transition:background .25s var(--ease),color .25s var(--ease)}
.faq-tab:hover{color:#0a0a0a}
.faq-tab.on{background:var(--darker);color:#fff}
.faq-list{display:flex;flex-direction:column;gap:8px}
.faq-item{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.faq-item[hidden]{display:none}
.faq-item summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:18px 20px;font-size:18px;font-weight:500;color:#0a0a0a;cursor:pointer}
.faq-item summary::-webkit-details-marker{display:none}
/* chevron */
.faq-item summary::after{content:"";flex:0 0 auto;width:9px;height:9px;margin-right:4px;
  border-right:1.8px solid var(--blue);border-bottom:1.8px solid var(--blue);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s var(--ease)}
.faq-item[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.faq-item p{padding:0 20px 20px;font-size:15px;line-height:1.6;color:#6e6e6e}
.faq-foot{padding:22px 20px 6px}
.faq-foot-lead{font-size:15px;line-height:1.55;color:#4f4f4f}
.faq-foot-row{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:18px}
.faq-person{display:flex;align-items:center;gap:10px}
.faq-person img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.faq-person strong{display:block;font-size:14px;font-weight:600;color:#0a0a0a}
.faq-person span span{font-size:13px;color:#6e6e6e}
.faq-ask{padding:8px 20px;height:46px;display:inline-flex;align-items:center;font-size:15px;font-weight:600}

/* ========================================================================
   BLOG
   ======================================================================== */
.blog{background:var(--bg);padding:110px 0}
.blog-head{display:flex;justify-content:space-between;align-items:flex-end;gap:60px;margin-bottom:56px}
.blog-side{display:flex;flex-direction:column;align-items:flex-start;gap:24px;max-width:460px}
.blog-side .sec-sub{margin-top:0}
.blog-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.blog-card{position:relative;border-radius:var(--r-card);overflow:hidden;aspect-ratio:16/9.6;display:block;background:#111}
.blog-card figure{position:absolute;inset:0}
.blog-card img,.blog-card video{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
/* journal living stills: the loop sits over its own poster JPG and only fades in once
   it is actually playing, so there is never a black frame or a layout shift */
.blog-card figure video.jl{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease),transform .6s var(--ease)}
.blog-card figure video.jl.is-live{opacity:1}
@media (prefers-reduced-motion:reduce){.blog-card figure video.jl{display:none}}
.blog-card:hover img,.blog-card:hover video{transform:scale(1.04)}
.blog-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,.08) 45%)}
.blog-meta{position:absolute;left:24px;right:24px;bottom:22px;z-index:1;color:#fff}
.blog-meta p{font-size:13.5px;color:rgba(255,255,255,.75);margin-bottom:8px}
.blog-meta h3{font-size:28px;font-weight:600;letter-spacing:-.015em;line-height:1.15}

/* ========================================================================
   FOOTER / CTA
   ======================================================================== */
/* ==== FT: the quiet ending. Light architectural footer; hierarchy comes from
   spacing and 1px lines, never from size. ==== */
.ft{position:relative;background:#F7F7F5;color:#141412;padding:0 0 34px;overflow:clip}
/* barely-there warm falloff near the CTA: only noticeable if removed */
.ft::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(46% 34% at 16% 14%,rgba(255,150,80,.05),transparent 70%)}
/* the boundary between the dark world and the light ending */
.ft-edge{position:relative;height:1px;background:rgba(2,116,222,.30);overflow:hidden}
.ft-edge i{position:absolute;top:0;left:-90px;width:90px;height:1px;opacity:0;
  background:linear-gradient(90deg,transparent,#5FA8FF 55%,#fff)}
.ft.pulsed .ft-edge i{animation:ftPulse 1.5s cubic-bezier(.5,.08,.35,1) forwards}
@keyframes ftPulse{0%{opacity:0;transform:translateX(0)}10%{opacity:1}86%{opacity:1}100%{opacity:0;transform:translateX(calc(100vw + 90px))}}
.ft .wrap{position:relative}
/* contact composition: one asymmetric grid, no cards */
.ft-contact{display:grid;grid-template-columns:minmax(0,58%) minmax(0,27%);justify-content:space-between;padding:104px 0 96px}
.ft-eyebrow{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#8b8b85}
.ft-h{font-size:clamp(34px,3.2vw,46px);font-weight:600;letter-spacing:-.02em;line-height:1.12;color:#0f0f0d;margin-top:18px}
.ft-sub{margin-top:20px;font-size:16px;line-height:1.65;color:#5f5f58}
.ft-actions{margin-top:38px;display:flex;align-items:center;gap:30px}
.ft-cta{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 26px;border-radius:50px;
  background:#0A0A0A;color:#fff;font-size:15px;font-weight:600;
  transition:background .25s var(--ease),transform .3s cubic-bezier(.25,.6,.3,1);will-change:transform}
.ft-cta i{width:6px;height:6px;border-radius:50%;background:#FF7A32;flex:none}
.ft-cta span{font-size:13px;opacity:.72;transition:transform .2s var(--ease)}
.ft-cta:hover{background:#1d1d1b}
.ft-cta:hover span{transform:translate(2px,-2px)}
.ft-call{font-size:15px;font-weight:600;color:#141412;padding:10px 0;
  background:linear-gradient(currentColor,currentColor) no-repeat 0 calc(100% - 8px)/0 1px;transition:background-size .24s var(--ease)}
.ft-call:hover{background-size:100% 1px}
.ft-call span{font-size:12px;color:#8b8b85}
/* direct-contact module: hairline, not a card */
.ft-direct{border-left:1px solid rgba(0,0,0,.10);padding-left:32px;padding-top:4px;align-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.ft-label{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#8b8b85}
.ft-mail{font-size:17px;font-weight:600;color:#0f0f0d;
  background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1.5px;transition:background-size .28s var(--ease)}
.ft-mail:hover{background-size:100% 1.5px}
.ft-meta{font-size:14px;line-height:1.7;color:#6e6e66}
.ft-status{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#6e6e66;margin-top:4px}
.ft-status i,.ft-online i{width:5px;height:5px;border-radius:50%;flex:none;animation:ftBreath 3.4s ease-in-out infinite}
.ft-status i{background:#FF7A32}
@keyframes ftBreath{0%,100%{opacity:1}50%{opacity:.4}}
/* signature: one studio, two worlds */
.ft-worlds{padding-bottom:88px}
.ft-wline{display:flex;align-items:center;gap:14px}
.ft-node{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#8b8b85;transition:color .2s var(--ease)}
.ft-node i{width:5px;height:5px;border-radius:50%;flex:none;transition:box-shadow .25s var(--ease)}
.ft-node-cs i{background:#FF7A32}
.ft-node-ai i{background:#0274DE}
a.ft-node:hover{color:#141412}
a.ft-node-cs:hover i{box-shadow:0 0 8px 1.5px rgba(255,122,50,.5)}
a.ft-node-ai:hover i{box-shadow:0 0 8px 1.5px rgba(2,116,222,.5)}
.ft-rail{position:relative;flex:1;height:1px;background:rgba(0,0,0,.10)}
.ft-runner{position:absolute;top:-1.5px;left:0;width:4px;height:4px;border-radius:50%;background:#b3b3ab;animation:ftRun 13s ease-in-out infinite}
@keyframes ftRun{0%{left:0}50%{left:calc(100% - 4px)}100%{left:0}}
.ft-caption{margin-top:14px;text-align:center;font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#9a9a92}
/* navigation: precise 12-column grid, small type */
.ft-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:28px 24px;padding:56px 0 76px;border-top:1px solid rgba(0,0,0,.08)}
.ft-brand{grid-column:1/6}
.ft-brand p{margin-top:16px;font-size:13.5px;line-height:1.7;color:#6e6e66;max-width:250px}
.ft .nav-name{color:#0f0f0d}
.ft-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.ft-col:nth-of-type(2){grid-column:7/9}
.ft-col:nth-of-type(3){grid-column:9/11}
.ft-col:nth-of-type(4){grid-column:11/13}
.ft-col p{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#8b8b85;margin-bottom:12px}
.ft-col a{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:#3f3f39;padding:2px 0;white-space:nowrap;
  transition:transform .2s var(--ease),color .2s var(--ease)}
.ft-col a::after{content:"\2197";font-size:10px;color:#8b8b85;opacity:0;transform:translate(-3px,2px);transition:opacity .2s var(--ease),transform .2s var(--ease)}
.ft-col a:hover{transform:translateX(2px);color:#0f0f0d}
.ft-col a:hover::after{opacity:1;transform:none}
/* bottom bar */
.ft-bottom{display:flex;align-items:center;gap:26px;padding-top:22px;border-top:1px solid rgba(0,0,0,.08);font-size:12px;color:#8b8b85}
.ft-bottom nav{display:flex;gap:18px;margin-left:auto}
.ft-bottom nav a{color:#8b8b85;transition:color .2s var(--ease)}
.ft-bottom nav a:hover{color:#141412}
.ft-online{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#8b8b85}
.ft-online i{background:#0274DE}
@media (prefers-reduced-motion:reduce){
  .ft-runner,.ft-status i,.ft-online i,.ft.pulsed .ft-edge i{animation:none}
}

/* ========================================================================
   REVEALS  (opacity 0 + y100 -> spring)
   ======================================================================== */
[data-nv-reveal]{opacity:0;transform:translateY(100px);transition:opacity .9s var(--spring),transform .9s var(--spring)}
[data-nv-reveal].in{opacity:1;transform:none}
[data-nv-delay="1"]{transition-delay:.12s}
[data-nv-delay="2"]{transition-delay:.24s}
[data-nv-delay="3"]{transition-delay:.36s}
figure[data-nv-reveal],.svc-media[data-nv-reveal]{transform:none;opacity:.5}
figure[data-nv-reveal].in,.svc-media[data-nv-reveal].in{opacity:1}

/* ========================================================================
   RESPONSIVE
   ======================================================================== */
@media (max-width:1180px){
  .h2{font-size:46px}
  .hero-title{font-size:clamp(48px,8vw,84px)}
  .svc-grid,.cg-grid,.blog-grid{grid-template-columns:1fr}
  /* founder feature: own mobile art direction (portrait 4:5, rule hidden) */
  .fdr-comp{grid-template-columns:1fr;gap:44px 0;margin-top:52px}
  .fdr-rule{display:none}
  .fdr-frame{aspect-ratio:4/5}
  .fdr-story{max-width:none}
  .proc-grid{grid-template-columns:1fr 1fr}
  .case-feature{grid-template-columns:1fr}
  .cf-card{min-height:0;gap:26px}
  .pr-grid{grid-template-columns:1fr}
  .proc-head,.cases2-head,.pr-head,.faq-head,.blog-head{flex-direction:column;align-items:flex-start;gap:26px}
  .hero-bottom{flex-direction:column;align-items:stretch}
  .world-gate{width:auto}
  .hero-strip{justify-content:space-between}
  .scrub-text{font-size:40px}
  .scrub-dark{font-size:38px}
}
@media (max-width:720px){
  :root{--wrap-pad:20px}
  .h2{font-size:34px}
  .hero-title{font-size:44px}
  .hero-sub{font-size:17px}
  .hero-actions{flex-direction:column;border-radius:26px;align-self:stretch}
  .btn-hero-primary,.btn-hero-ghost{justify-content:center;border-radius:50px}
  .world-gate{height:118px}
  .wg-title{font-size:15.5px}
  .hero-scrub{padding:24vh 0 28vh}
  .scrub-text{font-size:28px}
  .scrub-dark{font-size:26px}
  .svc-card{min-height:0}
  .svc-media{min-height:280px}
  .gm-blur{inset:-12px}
  .gm-pane{inset:22px;border-radius:16px}
  .gm-window{inset:26px;border-radius:12px}
  .proc-grid{grid-template-columns:1fr}
  .ba-grid{grid-template-columns:1fr;gap:12px}
  .ba-card.ba-after,.ba-card.ba-before{grid-column:1}
  .ba-tab{display:none}
  .ba-res-head{flex-direction:column;align-items:flex-start;gap:14px}
  .fdr{padding:96px 0}
  .fdr-text p{font-size:17px}
  .fdr-exp-line i{margin:0 9px}
  .cg-top{flex-direction:column}
  .cg-top figure{flex:none;width:100%;height:200px}
  .cg-desc{padding-top:26px}
  /* footer: art-directed stack, not shrunk columns */
  .ft-contact{grid-template-columns:1fr;row-gap:52px;padding:80px 0 72px}
  .ft-direct{border-left:0;border-top:1px solid rgba(0,0,0,.10);padding-left:0;padding-top:30px}
  .ft-grid{grid-template-columns:1fr 1fr;gap:40px 24px;padding:48px 0 60px}
  .ft-brand{grid-column:1/3}
  .ft-col:nth-of-type(2){grid-column:1/2}
  .ft-col:nth-of-type(3){grid-column:2/3}
  .ft-col:nth-of-type(4){grid-column:1/2}
  .ft-col a{padding:12px 0}
  .ft-bottom nav a{padding:10px 0}
  .ft-bottom{flex-wrap:wrap;row-gap:12px}
  .ft-bottom nav{margin-left:0;width:100%}
  .ft-worlds{padding-bottom:68px}
  /* compact mobile nav: identity stays whole, language + CTA form one small glass capsule,
     nothing wraps and nothing leaves the viewport */
  .nav{padding:calc(14px + env(safe-area-inset-top)) 16px 14px}
  .nav-logo{gap:8px;font-size:16px}
  .nav-ailab{white-space:nowrap;font-size:9px;letter-spacing:.2em;height:22px;padding:0 7px 0 10px}
  .nav-ailab svg text{letter-spacing:.2em}
  .nav-cap{padding:4px 4px 4px 8px;margin-right:-4px}
  .nav.is-glass .nav-cap{margin-right:0}
  .lang-cap{margin-right:8px;padding:0 10px;height:30px}
  .lang-cap .lc-dots{display:none}
  .nav.is-glass .lang-cap{margin-right:8px}
  .nav.is-glass{transform:translateY(-3px)}
  .nav-cta{white-space:nowrap;height:38px;padding:0 14px;font-size:14px;gap:6px}
  .nav-cta-arrow{display:none}
  .nav-logo::before{inset:-6px -12px -6px -10px}
  .faq-tabs{flex-wrap:wrap}
  .nav-logo{gap:9px;font-size:17px}
  .nav-sep{height:20px}
  .nav-sep i.v{display:none}
  .nav-ailab{font-size:9.5px;letter-spacing:.26em;height:24px;padding:0 8px 0 11px;text-shadow:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,20,60,.22)}
  .nav-ailab svg text{letter-spacing:.26em}
  .nav-ailab::after{background:radial-gradient(60% 120% at 6% 50%,var(--vio),transparent 70%)}
  .hero-strip{flex-direction:column;align-items:flex-start;gap:14px}
  .hero-rail{width:100%;flex:none;align-self:stretch}
  .hr-viewport{padding-bottom:0}
  .hr-tech{display:none}
  .hr-cap + .hr-cap{margin-left:34px}
  .hr-glyph{width:17px;height:17px}
  .hr-name{font-size:11.5px;letter-spacing:.04em}
}
@media (prefers-reduced-motion: reduce){
  [data-nv-reveal]{opacity:1;transform:none;transition:none}
  .hr-sig,.hero-particle{display:none}
  .svc-card[data-nv-reveal] .chip,.svc-card[data-nv-reveal] h3,.svc-card[data-nv-reveal] p,
  .svc-card[data-nv-reveal] li,.svc-card[data-nv-reveal] .svc-cta{opacity:1;transform:none;transition:none}
  .svc-card,.svc-cta,.sc-mark,.sc-arr,.svc-card li,.svc-media .gm-window video,.svc-media .gm-window img{transition:none}
  .svc-cta:hover::after{animation:none}
  .proc .h2 .h2-dim{opacity:1;clip-path:none;transition:none}
  .proc .label.in .label-bar{animation:none}
  .proc-card,.proc-card[data-nv-reveal],.proc-card h3,.proc-card p,.proc-card .step,
  .ps-node,.ps-line u,.pc-arr,.pc-label{transition:none}
  .proc-card.is-active{transform:none}
  .proc-card.is-active::before,.proc-card.is-active .ps-node::after,.proc-card.is-active .ps-line u{animation:none}
  .proc-card::after{display:none}
  .proc-card[data-nv-reveal]{transform:none}
  .cf-card,.cf-caps span,.cf-progress u{transition:none}
  .cf-card .cf-progress u,.cf-card.in .cf-progress u{transform:scaleX(1)}
  .cf-founder::after{display:none}
  .cf-card:hover{transform:none}
  .svc-card:hover{transform:none}
  .svc-card:hover + .svc-media .gm-window video,.svc-card:hover + .svc-media .gm-window img,
  .svc-media:has(+ .svc-card:hover) .gm-window video,.svc-media:has(+ .svc-card:hover) .gm-window img{transform:none}
  .scrub-text .c{color:#fff;filter:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---- reconciliation pass (dump-spec details) ---- */
/* grain overlay over everything, barely there */
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.02;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/></filter><rect width='256' height='256' filter='url(%23n)'/></svg>");
  background-size:256px 256px}

/* about / stats block */
.about-head{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:56px}
.about-head .h2{color:#fff}
.about .label{color:#fff}
.about-desc{color:rgba(255,255,255,.7)}
.about-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:6px}
.reel{position:relative;border-radius:var(--r-card);overflow:hidden;min-height:300px;background:#0a0a0a;display:block;width:100%;
  appearance:none;-webkit-appearance:none;border:0;padding:0;text-align:inherit;font:inherit;cursor:pointer}
.reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75;transition:opacity .4s var(--ease),transform .6s var(--ease)}
.reel:hover img,.reel:focus-visible img{opacity:.9;transform:scale(1.03)}
.reel:focus-visible{outline:2px solid #0274DE;outline-offset:3px}
.reel-glow{position:absolute;inset:-20%;pointer-events:none;opacity:0;transition:opacity .6s var(--ease);
  background:radial-gradient(42% 38% at 32% 68%, rgba(2,116,222,.20), transparent 70%),
             radial-gradient(26% 22% at 72% 30%, rgba(255,138,42,.10), transparent 70%)}
.reel:hover .reel-glow,.reel:focus-visible .reel-glow{opacity:1}
.reel-label{transition:background .35s var(--ease),transform .35s var(--ease),border-color .35s var(--ease)}
.reel:hover .reel-label,.reel:focus-visible .reel-label{background:rgba(255,255,255,.30);border-color:rgba(255,255,255,.28);transform:translate(-50%,-50%) scale(1.045)}
.nvp-open .reel{visibility:hidden}
.reel-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:8px;
  padding:12px 20px;border-radius:var(--r-pill);background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-size:15px;font-weight:600}
.reel-min{position:absolute;right:14px;bottom:14px;padding:6px 12px;border-radius:var(--r-pill);background:rgba(10,10,10,.5);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:12px;color:#e3e3e3}
.stat-card{position:relative;overflow:hidden;border-radius:var(--r-card);padding:26px;color:#fff;display:flex;flex-direction:column;min-height:300px;
  background:linear-gradient(168deg,rgba(13,18,32,.58) 0%,rgba(8,11,20,.74) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid rgba(168,203,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 22px 44px -30px rgba(255,255,255,.10),0 18px 44px -18px rgba(0,0,0,.5);
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.stat-card::before{content:"";position:absolute;inset:-30%;pointer-events:none;opacity:.5;
  background:radial-gradient(46% 40% at var(--sc-x,26%) 84%, var(--sc-tint,rgba(2,116,222,.22)), transparent 72%);
  transition:opacity .6s var(--ease),transform .8s var(--ease)}
.stat-card:nth-of-type(1){--sc-tint:rgba(2,116,222,.24);--sc-x:24%}
.stat-card:nth-of-type(2){--sc-tint:rgba(58,92,240,.22);--sc-x:50%}
.stat-card:nth-of-type(3){--sc-tint:rgba(104,78,236,.20);--sc-x:74%}
.about-grid .stat-card:hover{transform:translateY(-2px);border-color:rgba(180,210,255,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 22px 44px -30px rgba(255,255,255,.14),0 24px 52px -18px rgba(0,0,0,.55)}
.about-grid .stat-card:hover::before{opacity:.75;transform:translate(0,-4%) scale(1.05)}
.stat-num{font-size:32px;font-weight:600;font-variant-numeric:tabular-nums;position:relative;color:#fff}
.stat-card h3{font-size:18px;font-weight:600;margin-top:auto;position:relative;color:#fff}
.stat-desc{font-size:14px;line-height:1.55;color:rgba(255,255,255,.72);margin-top:10px;position:relative}
@media (prefers-reduced-motion:reduce){.stat-card,.stat-card::before{transition:none}.about-grid .stat-card:hover{transform:none}}
.about-quote{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:56px}
.aq-text{font-size:24px;font-weight:500;line-height:1.4;max-width:600px}
.aq-side{display:flex;align-items:center;gap:14px}
.aq-side img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.aq-side strong{display:block;font-size:15px}
.aq-side span{font-size:13px;color:rgba(255,255,255,.6)}
.aq-side .btn-blue{margin-left:16px}

/* why-us ROI side bars with rotated labels */
/* track + fill: After = blue track with a white fill leaving a 25px cap, Before = 60% grey fill */
.ba-tab{position:relative;overflow:hidden}
.ba-tab i{position:absolute;left:0;right:0;bottom:0;height:0;border-radius:12px;
  display:flex;align-items:center;justify-content:center;transition:height 1.1s var(--spring)}
.ba-tab-after i{background:#fff}
.ba-tab-before i{background:#F0F0F0}
.ba-grid.in .ba-tab-after i{height:calc(100% - 25px)}
.ba-grid.in .ba-tab-before i{height:60%}
.ba-tab em{font-style:normal;font-size:12px;font-weight:500;white-space:nowrap;transform:rotate(-90deg)}
.ba-tab-after em{color:var(--blue)}
.ba-tab-before em{color:#4f4f4f}

/* results chips ticker */
.ba-results{max-width:1000px;margin:60px auto 0}
.ba-res-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:22px}
.ba-res-lead{font-size:22px;font-weight:500;line-height:1.35;letter-spacing:-.02em;color:#0a0a0a}
.ba-res-mark{font-size:14px;font-weight:500;color:#6e6e6e;white-space:nowrap}
.ba-res-mark sup{font-size:.7em;top:-.3em}
.ba-ticker{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.ba-track{display:flex;gap:6px;width:max-content;animation:ticker 30s linear infinite}
.ba-track span{padding:16px 22px;border-radius:var(--r-card);background:#F0F0F0;font-size:14px;color:#4f4f4f;white-space:nowrap}
.ba-track strong{color:#000;font-weight:600;margin-right:6px}

/* button ripple hover (signature interaction) */
.btn-blue,.pr-btn,.btn-hero-primary{position:relative;overflow:hidden;isolation:isolate;transition:color .3s ease .1s}
.btn-blue::after,.pr-btn::after,.btn-hero-primary::after{content:"";position:absolute;left:28px;top:calc(100% - 6px);z-index:-1;
  width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%) scale(0);transition:transform .55s cubic-bezier(.3,.7,.3,1)}
.btn-blue::after{background:#fff}
.pr-btn::after,.btn-hero-primary::after{background:var(--blue)}
.btn-blue:hover::after,.pr-btn:hover::after,.btn-hero-primary:hover::after{transform:translate(-50%,-50%) scale(52)}
.btn-blue:hover{background:var(--blue);color:var(--blue);transform:none;box-shadow:none}
.pr-btn:hover,.btn-hero-primary:hover{color:#fff;transform:none;box-shadow:none}
.pr-btn-blue::after{background:#fff}
.pr-btn-blue:hover{color:var(--blue)}

/* hero split pill: both halves carry the same fill,
   it grows from wherever the cursor enters (so moving between them reads as one
   wave washing across), ~480px circle, inverted colours per half. */
.hero-actions .btn-hero-primary,.hero-actions .btn-hero-ghost{
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .3s ease .05s,background .3s var(--ease)}
.hero-actions .btn-hero-primary::after,.hero-actions .btn-hero-ghost::after{
  content:"";position:absolute;left:var(--hx,50%);top:var(--hy,50%);z-index:-1;
  width:488px;height:488px;margin:-244px 0 0 -244px;border-radius:50%;
  transform:scale(0);transition:transform .43s cubic-bezier(.45,.02,.22,1)}
.hero-actions .btn-hero-primary::after{background:var(--blue)}
.hero-actions .btn-hero-ghost::after{background:#fff}
.hero-actions .btn-hero-primary:hover::after,.hero-actions .btn-hero-ghost:hover::after{transform:scale(1)}
.hero-actions .btn-hero-primary:hover{color:#fff}
.hero-actions .btn-hero-ghost:hover{color:#0a0a0a;background:rgba(255,255,255,.16)}

/* hero H1 char rise */
.hero-title .c{display:inline-block;opacity:0;transform:translateY(120px);transition:opacity .8s var(--spring),transform .8s var(--spring)}
.hero-title.risen .c{opacity:1;transform:none}
.hero-title .word{white-space:nowrap;display:inline-block}

@media (max-width:1180px){
  .about-grid{grid-template-columns:1fr 1fr}
  .about-quote{flex-direction:column;align-items:flex-start}
}
@media (max-width:720px){
  .about-grid{grid-template-columns:1fr}
  .reel{min-height:240px}
  .ba-results{margin-top:28px}
}
@media (prefers-reduced-motion: reduce){
  .ba-track{animation:none}
  .hero-title .c{opacity:1;transform:none;transition:none}
  .btn-blue::after,.pr-btn::after,.btn-hero-primary::after{transition:none}
  .hero-actions .btn-hero-primary::after,.hero-actions .btn-hero-ghost::after{transition:none}
  .ba-tab i{transition:none}
}

/* ========================================================================
   CONTACT PAGE  (light hero + white panel + glass form)
   ======================================================================== */
.nav-links a.on{background:#0A0A0A;color:#fff;padding:0 18px;margin:0 -4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.18)}
.nav-links a.on:hover,.nav.nav-dark .nav-links a.on:hover{background:#151515}
.nav.nav-dark .nav-links a.on{background:#0A0A0A;color:#fff}
/* dark contact world: the AI flower breathes behind blue optical glass */
.ctc{position:relative;background:var(--dark);padding:150px 0 120px;color:#fff;overflow:clip}
.ctc-bg{position:absolute;inset:0;pointer-events:none}
/* the AI flower: screen-blended so the wireframe bloom glows out of the black */
.ctc-bg img{position:absolute;right:-14%;top:-10%;width:92%;min-width:900px;opacity:.85;
  filter:blur(14px) saturate(1.35) brightness(1.1);mix-blend-mode:screen;transform:scale(1.05)}
.ctc-bg::before{content:"";position:absolute;left:-20%;bottom:-30%;width:78%;aspect-ratio:16/9;opacity:.55;
  background:url("../assets/hero-flower.jpg") center/cover no-repeat;
  filter:blur(30px) saturate(1.3) brightness(1.05);mix-blend-mode:screen;transform:scale(1.2) rotate(10deg)}
.ctc-bg i{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,8,12,.30) 0%,rgba(6,8,12,.44) 58%,var(--dark) 100%)}
.ctc .wrap{position:relative}
.ctc-title{font-size:clamp(52px,7.4vw,106px);font-weight:600;line-height:1.05;letter-spacing:-.04em;color:#fff}
.ctc-title .blue{color:#5FA8FF}
.ctc-sub{margin-top:26px;color:rgba(255,255,255,.62)}
.ctc-info{display:flex;align-items:flex-end;gap:60px;margin:64px 0 28px}
.ctc-info-col p{font-size:15px;color:rgba(255,255,255,.68)}
.ctc-info-label{font-size:13.5px;color:rgba(255,255,255,.42);margin-bottom:4px}
.ctc-mail{font-size:20px;font-weight:600;color:#fff;border-bottom:1.5px solid rgba(255,255,255,.32);padding-bottom:2px;transition:border-color .25s var(--ease),color .25s var(--ease)}
.ctc-mail:hover{color:#8FC0FF;border-color:#8FC0FF}
.ctc-info-right{margin-left:auto}
.ctc-studio{font-size:14px;font-weight:600;color:rgba(255,255,255,.62);transition:color .2s var(--ease)}
.ctc-studio:hover{color:#8FC0FF}
.ctc-panels{display:grid;grid-template-columns:1fr 598px;gap:24px;align-items:stretch}
.ctc-left,.ctc-form{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-card);
  background:linear-gradient(168deg,rgba(10,20,38,.62) 0%,rgba(6,12,24,.74) 100%);
  border:1px solid rgba(150,190,255,.14);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);
  box-shadow:inset 0 1px 0 rgba(190,220,255,.10),inset 0 26px 50px -34px rgba(160,200,255,.16)}
.ctc-left::before,.ctc-form::before{content:"";position:absolute;inset:-30%;z-index:-1;opacity:.5;pointer-events:none;
  background:radial-gradient(44% 38% at var(--cf-x,30%) 84%,rgba(2,116,222,.24),transparent 72%)}
.ctc-form{--cf-x:70%}
.ctc-left{padding:56px;display:flex;flex-direction:column;align-items:flex-start}
.ctc-left h2{font-size:32px;font-weight:600;letter-spacing:-.03em;line-height:1.3;max-width:460px;color:#fff}
.ctc-left-quote{font-size:19px;line-height:1.45;color:rgba(255,255,255,.66);margin-top:40px;max-width:420px}
.ctc-person{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:48px}
.ctc-person img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.ctc-person strong{display:block;font-size:15px;color:#fff}
.ctc-person span{font-size:13px;color:rgba(255,255,255,.5)}
.ctc-left .btn-blue{margin-top:26px}
.ctc-form{padding:32px;display:flex;flex-direction:column;gap:20px;color-scheme:dark}
.cf-field{display:flex;flex-direction:column;gap:9px}
.cf-field label,.cf-radios legend{font-size:14.5px;font-weight:500;color:rgba(255,255,255,.88)}
.cf-field input,.cf-field select,.cf-field textarea{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.055);border-radius:20px;
  padding:15px 20px;font-family:inherit;font-size:15px;color:#fff;outline:none;transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);width:100%;resize:vertical}
.cf-field input::placeholder,.cf-field textarea::placeholder{color:rgba(255,255,255,.38)}
.cf-field select:invalid,.cf-field select option[value=""]{color:rgba(255,255,255,.38)}
.cf-field select option{color:#181818;background:#fff}
.cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{border-color:#5FA8FF;background:rgba(255,255,255,.08);box-shadow:0 0 0 3px rgba(95,168,255,.22)}
.cf-radios{border:0;display:flex;flex-direction:row;flex-wrap:wrap;gap:8px}
.cf-radios legend{margin-bottom:10px}
.cf-pill{position:relative;cursor:pointer}
.cf-pill input{position:absolute;opacity:0;pointer-events:none}
.cf-pill span{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-size:13.5px;color:rgba(255,255,255,.66);transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.cf-pill span::before{content:"";width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.28);transition:background .25s var(--ease)}
.cf-pill input:checked + span{background:rgba(190,215,255,.16);color:#fff;border-color:rgba(150,190,255,.4)}
.cf-pill input:checked + span::before{background:#5FA8FF}
.cf-pill input:focus-visible + span{box-shadow:0 0 0 3px rgba(95,168,255,.35)}
.cf-submit{position:relative;overflow:hidden;isolation:isolate;align-self:stretch;height:56px;border-radius:var(--r-pill);
  background:#fff;color:#0A0A0A;font-size:16px;font-weight:700;transition:color .3s ease .1s}
.cf-submit:hover{color:#fff}
.cf-submit::after{content:"";position:absolute;left:28px;top:calc(100% - 6px);z-index:-1;width:12px;height:12px;border-radius:50%;
  background:var(--blue);transform:translate(-50%,-50%) scale(0);transition:transform .55s cubic-bezier(.3,.7,.3,1)}
.cf-submit:hover::after{transform:translate(-50%,-50%) scale(60)}
.cf-err{font-size:14px;color:#FF8A6B}
.cf-note{font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.42)}

/* page transition: old page lifts away, new page staggers in (SPA-feel) */
/* ---- page transition: the PUSH (home -> contact) ----
   Old page slides up out of the viewport while the NEXT page slides in directly beneath
   it, contiguous, nav travelling with each page; one ease-out curve (boundary 35% at
   120ms, 67% at 240ms, 87% at 360ms, settled ~950ms). main.js prefetches the destination
   into a fixed iframe (on hover/touch), so on click both halves move together like one
   long page; when the slide has settled the browser navigates and the real document takes
   over in the identical resting state (html.pt-arrived skips its entrance animations). */
html.pt-lock{overflow:hidden}
body.pt-out{position:fixed;inset:0;height:100vh;overflow:hidden;transition:transform .9s cubic-bezier(.2,.9,.3,1);pointer-events:none}
body.pt-out.go{transform:translateY(-100vh)}
.pt-next{position:fixed;inset:0;width:100vw;height:100vh;border:0;margin:0;background:var(--bg);z-index:2000;transform:translateY(100vh);pointer-events:none;
  transition:transform .9s cubic-bezier(.2,.9,.3,1)}
.pt-next.go{transform:translateY(0)}
/* arriving after a push: land in the resting state the preview already reached */
html.pt-arrived [data-nv-reveal],html.pt-arrived [data-nv-reveal] *,html.pt-arrived .hero-title .c{transition:none!important}
@media (prefers-reduced-motion:reduce){body.pt-out{transition:none;transform:none}.pt-next{display:none}}

/* ========================================================================
   CASE STUDIES PAGE  (light overview: logo strip, filter bar, white cards)
   ======================================================================== */
.csp{background:var(--bg);padding:150px 0 120px}
.csp-title{font-size:clamp(48px,7.4vw,106px);font-weight:600;line-height:1.05;letter-spacing:-.04em;color:#0a0a0a}
.csp-logos{overflow:hidden;margin:72px 0 52px;opacity:.35;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.csp-logo-track{display:flex;align-items:center;gap:110px;width:max-content;animation:ticker 40s linear infinite}
.csp-logo-track img{height:26px;filter:brightness(0);opacity:.8}
.csp-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:26px}
.csp-tabs{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.csp-tab{font-size:14.5px;font-weight:600;color:#4f4f4f;padding:10px 4px;border-radius:var(--r-pill);transition:color .25s var(--ease),background .25s var(--ease),padding .25s var(--ease)}
.csp-tab:hover{color:#000}
.csp-tab.on{background:#0A0A0A;color:#fff;padding:10px 18px}
.csp-search{display:flex;align-items:center;gap:9px;background:#fff;border-radius:var(--r-pill);padding:11px 18px;color:#a6a6a6;flex:0 0 200px}
.csp-search input{border:0;outline:none;background:none;font-family:inherit;font-size:14px;color:#181818;width:100%}
.csp-search input::placeholder{color:#a6a6a6}
.csp-search:focus-within{box-shadow:0 0 0 3px rgba(2,116,222,.16)}
.csp-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* same rule for the case-studies index while one case is published */
.csl-card:only-child{grid-column:1/-1;min-height:0}
.csl-card:only-child .csl-desc{padding-top:30px}
.csl-card{background:#fff;border-radius:var(--r-card);padding:26px;display:flex;flex-direction:column;min-height:440px;
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.csl-card.hide{display:none}
.csl-top{display:flex;justify-content:space-between;gap:24px}
.csl-top>div{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.csl-logo{height:22px;margin-bottom:26px}
.csl-card h3{font-size:32px;font-weight:600;letter-spacing:-.02em;color:#0a0a0a}
.csl-tag{font-size:15px;color:#6e6e6e;margin-top:6px}
.csl-year{font-size:14px;color:#a6a6a6;margin-top:8px}
.csl-top figure{flex:0 0 215px;border-radius:12px;overflow:hidden;height:160px;background:#0a0a0a}
.csl-top figure img,.csl-top figure video{width:100%;height:100%;object-fit:cover}
.csl-desc{font-size:19px;line-height:1.45;color:#4f4f4f;margin-top:auto;padding-top:44px;max-width:560px}
.csl-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.csl-chips span{padding:7px 13px;border-radius:var(--r-pill);background:#F0F0F0;font-size:13px;color:#6e6e6e}
.csl-chips strong{color:#0a0a0a;font-weight:700;margin-right:4px}
.csp-empty{margin-top:36px;font-size:16px;color:#6e6e6e}
/* ---- /journal index: the blog page grid ----
   3 columns of portrait image cards (449x487 @1440 = ratio .922), 6px gaps, r20, meta 14px + title 24px
   over the image; 2 columns under 1200, 1 column under 900 (original: 2 @1024, 1 @768). */
.blg .csp-title{margin-top:8px}
.blg-intro{max-width:600px}
.blg-bar{margin:44px 0 26px}
.blg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.blg-card.blog-card{aspect-ratio:449/487;border-radius:20px}
.blg-card .blog-meta{left:20px;right:20px;bottom:21px}
.blg-card .blog-meta p{font-size:14px;font-weight:500;color:#e3e3e3;margin-bottom:10px}
.blg-card .blog-meta h3{font-size:24px;font-weight:600;letter-spacing:-.03em;line-height:1.3}
.blg-card.hide{display:none}
@media (hover:hover) and (pointer:fine){
  .blg-card.blog-card:hover img,.blg-card.blog-card:hover video{transform:scale(1.15)}
}
@media (max-width:1200px){.blg-grid{grid-template-columns:1fr 1fr}}
@media (max-width:900px){
  .blg-grid{grid-template-columns:1fr}
  .blg-bar{flex-direction:column;align-items:flex-start;gap:14px}
  .blg-bar .csp-search{flex:0 0 auto;width:180px}
  .blg-card .blog-meta h3{font-size:20px}
}
@media (max-width:1180px){
  .csp-grid{grid-template-columns:1fr}
  .csp-bar{flex-direction:column;align-items:flex-start}
  .csp-search{flex:0 0 auto;width:100%}
}
@media (max-width:720px){
  .csp{padding:130px 0 80px}
  .csp-title{font-size:40px}
  .csl-top{flex-direction:column}
  .csl-top figure{flex:none;width:100%;height:200px}
  .csl-desc{padding-top:26px}
  .csl-card{min-height:0}
  .csp-logos{margin:44px 0 36px}
}
@media (prefers-reduced-motion: reduce){
  .csp-logo-track{animation:none}
}

/* ========================================================================
   SCROLL SIGNAL  (custom scroll-position indicator; native scrollbar hidden)
   A dormant fiber on the right edge; energy enters it while you scroll.
   Element is created by js/main.js, energy is driven via --ss-e (0..1).
   ======================================================================== */
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none;width:0;height:0}
.scroll-signal{position:fixed;top:16px;bottom:16px;right:8px;width:1px;z-index:80;pointer-events:none;--ss-e:0}
.ss-rail{position:absolute;inset:0;width:1px;
  background:linear-gradient(180deg,transparent,rgba(110,160,255,.13) 7%,rgba(110,160,255,.13) 93%,transparent)}
.ss-node{position:absolute;left:50%;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;background:rgba(150,190,255,.22);transition:background .5s ease,box-shadow .5s ease}
.ss-top{top:-1px}
.ss-bot{bottom:-1px}
.scroll-signal.at-top .ss-top,.scroll-signal.at-bot .ss-bot{background:rgba(190,218,255,.6);box-shadow:0 0 5px rgba(110,165,255,.5)}
.ss-seg{position:absolute;left:0;top:0;width:1px;height:36px;will-change:transform;
  background:linear-gradient(180deg,transparent,#6FA8FF 32%,#EAF3FF 50%,#6FA8FF 68%,transparent);
  opacity:calc(.22 + var(--ss-e)*.78)}
.ss-halo{position:absolute;left:-3px;right:-3px;top:-8px;bottom:-8px;border-radius:4px;filter:blur(3px);
  background:linear-gradient(180deg,transparent,rgba(96,150,255,.85) 50%,transparent);
  opacity:calc(var(--ss-e)*.55)}
.ss-dot{position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;
  background:#EAF4FF;box-shadow:0 0 5px 1px rgba(140,190,255,.85);
  opacity:calc(.3 + var(--ss-e)*.7)}
/* light sections: same blue identity, a touch more pigment for contrast */
.scroll-signal.light .ss-rail{background:linear-gradient(180deg,transparent,rgba(2,116,222,.2) 7%,rgba(2,116,222,.2) 93%,transparent)}
.scroll-signal.light .ss-seg{background:linear-gradient(180deg,transparent,#0274DE 32%,#5EA8F5 50%,#0274DE 68%,transparent)}
.scroll-signal.light .ss-dot{background:#2f8ae6;box-shadow:0 0 4px rgba(2,116,222,.6)}
.scroll-signal.light .ss-halo{background:linear-gradient(180deg,transparent,rgba(2,116,222,.5) 50%,transparent)}
.scroll-signal.light .ss-node{background:rgba(2,116,222,.3)}
@media (max-width:720px){
  .scroll-signal{display:none}
}
@media (prefers-reduced-motion: reduce){
  .ss-halo{display:none}
  .ss-seg,.ss-dot{opacity:.5}
}

/* ========================================================================
   CASE STUDY DETAIL  (project header, problem/solution/results, gallery)
   ======================================================================== */
a.csl-card,a.cg-card{color:inherit}
a.csl-card:hover{transform:translateY(-6px)}
a.csl-card:focus-visible,a.cg-card:focus-visible{outline:3px solid rgba(2,116,222,.5);outline-offset:3px}
a.cg-card{transition:transform .35s var(--ease)}
a.cg-card:hover{transform:translateY(-6px)}
.cf-link{display:inline-block;margin-top:20px;font-size:15px;font-weight:600;color:#fff;opacity:.85;transition:opacity .25s var(--ease)}
.cf-link:hover{opacity:1;color:var(--blue)}

.csd{background:var(--bg);padding:150px 0 0}
.csd-title{font-size:clamp(48px,7.4vw,106px);font-weight:600;line-height:1.02;letter-spacing:-.04em;color:#0a0a0a;margin-top:6px}
.csd-lead{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:26px}
.csd-lead p{font-size:21px;line-height:1.5;color:#4f4f4f;max-width:480px}
.csd-lead img{height:26px;flex:none;filter:brightness(0);opacity:.85}
.csd-meta{display:flex;align-items:flex-start;gap:24px;margin:46px 0 0;padding-top:26px;border-top:1px solid rgba(10,10,10,.12)}
.csd-meta>div{flex:1;min-width:0}
.csd-meta dt{font-size:14.5px;color:#6e6e6e;margin-bottom:8px}
.csd-meta dd{font-size:16px;color:#181818}
.csd-back{white-space:nowrap;font-size:15px;font-weight:600;color:#0a0a0a;align-self:center;transition:color .25s var(--ease)}
.csd-back:hover{color:var(--blue)}
.csd-hero{margin-top:30px;border-radius:var(--r-card);overflow:hidden;background:#0a0a0a;aspect-ratio:1360/800}
.csd-hero img,.csd-hero video{width:100%;height:100%;object-fit:cover;display:block}
.csd-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.csd-kpi{background:#fff;border-radius:var(--r-card);padding:30px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;gap:26px}
.csd-kpi strong{font-size:44px;font-weight:600;letter-spacing:-.02em;color:#0a0a0a}
.csd-kpi>span{font-size:16px;color:#4f4f4f}
.csd-note{margin-top:22px;font-size:14px;color:#a6a6a6;max-width:640px}
.csd-block{padding-top:110px}
.csd-h{font-size:clamp(34px,4.2vw,60px);font-weight:600;line-height:1.12;letter-spacing:-.03em;color:#0a0a0a;max-width:980px;margin-top:16px}
.csd-bullets{margin-top:32px;padding-left:22px;display:flex;flex-direction:column;gap:9px}
.csd-bullets li{font-size:17px;color:#4f4f4f;line-height:1.5;list-style:disc}
.csd-par{font-size:17px;line-height:1.6;color:#4f4f4f;max-width:620px;margin-top:26px}
.csd-full{margin-top:70px;border-radius:var(--r-card);overflow:hidden;background:#0a0a0a}
.csd-full img{width:100%;display:block;aspect-ratio:1360/740;object-fit:cover}
.csd-gal{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:70px}
.csd-gal-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.csd-gal img{width:100%;display:block;border-radius:var(--r-card);object-fit:cover}
.csd-gal .g-tall{aspect-ratio:676/880}
.csd-gal .g-mid{aspect-ratio:676/560}
.csd-gal .g-short{aspect-ratio:676/440}
.csd-quote{background:#fff;border-radius:var(--r-card);padding:56px;margin-top:110px}
.csd-quote blockquote{font-size:clamp(24px,2.5vw,32px);font-weight:500;line-height:1.3;letter-spacing:-.015em;color:#0a0a0a;max-width:900px;margin-top:18px}
.csd-person{display:flex;align-items:center;gap:14px;margin-top:36px}
.csd-person i{width:46px;height:46px;border-radius:50%;background:#0A0A0A;color:#fff;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:600;font-size:15px;flex:none}
.csd-person strong{display:block;font-size:16px;color:#0a0a0a}
.csd-person span{font-size:14.5px;color:#6e6e6e}
.csd-cta{margin-top:56px;text-align:center}
.csd-more{padding:120px 0 130px}
.csd-more-head{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-bottom:40px}
.csd-more-head .h2{max-width:none}
.csd-all{white-space:nowrap;font-size:15px;font-weight:600;color:#0a0a0a;transition:color .25s var(--ease)}
.csd-all:hover{color:var(--blue)}
/* Journal articles reuse the .csd page frame exactly (title, lead, meta, hero,
   par, bullets, cta, more). A long read has many more sections than a case
   study, so only the section-heading step is article-scale here: same family,
   weight, colour and tracking, one size down the same scale. */
.csd-article .csd-block{padding-top:54px}
.csd-article .csd-h{font-size:clamp(24px,2.4vw,30px);letter-spacing:-.02em}
.csd-article .csd-sub{font-size:19px;font-weight:600;color:#0a0a0a;margin-top:30px}
.csd-article .csd-par{margin-top:18px}
.csd-article .csd-hero{aspect-ratio:16/9}
@media (max-width:1180px){
  .csd-kpis{grid-template-columns:1fr}
  .csd-kpi{min-height:0}
  .csd-meta{flex-wrap:wrap}
  .csd-meta>div{flex:1 1 40%}
}
@media (max-width:720px){
  .csd{padding:130px 0 0}
  .csd-title{font-size:44px}
  .csd-lead{flex-direction:column;align-items:flex-start;gap:20px}
  .csd-block{padding-top:80px}
  .csd-gal{grid-template-columns:1fr}
  .csd-quote{padding:32px}
  .csd-more{padding:90px 0 100px}
  .csd-more-head{flex-direction:column;align-items:flex-start;gap:14px}
  .csd-hero{aspect-ratio:4/3}
}

/* ============ NV VIDEO PLAYER (How We Work) ============ */
.nvp-backdrop{position:fixed;inset:0;z-index:200;background:rgba(6,8,12,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .45s var(--ease)}
.nvp-backdrop.on{opacity:1}
.nvp-stage{position:fixed;inset:0;z-index:201;pointer-events:none}
.nvp-frame{position:fixed;overflow:hidden;border-radius:var(--r-card);background:#0a0a0a;pointer-events:auto;
  box-shadow:0 30px 90px -20px rgba(0,0,0,.65),0 6px 24px rgba(0,0,0,.35);
  transition:top .55s cubic-bezier(.32,.72,.28,1),left .55s cubic-bezier(.32,.72,.28,1),width .55s cubic-bezier(.32,.72,.28,1),height .55s cubic-bezier(.32,.72,.28,1),border-radius .55s cubic-bezier(.32,.72,.28,1),opacity .3s var(--ease)}
.nvp-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0a0a0a;display:block}
.nvp-frame.is-expanded video{object-fit:contain}
.nvp-close{position:absolute;top:14px;right:14px;z-index:5;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  background:rgba(14,16,22,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;transition:background .3s var(--ease),border-color .3s var(--ease),opacity .35s var(--ease)}
.nvp-close:hover,.nvp-close:focus-visible{background:rgba(30,34,44,.75);border-color:rgba(255,255,255,.38)}
.nvp-close svg{width:15px;height:15px;display:block}
.nvp-controls{position:absolute;left:12px;right:12px;bottom:12px;z-index:4;display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:14px;background:rgba(12,14,20,.55);border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transform:translateY(6px);
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.nvp-frame.ui-on .nvp-controls{opacity:1;transform:none}
.nvp-frame.ui-on .nvp-close{opacity:1}
.nvp-frame.ui-off .nvp-close{opacity:0;pointer-events:none}
.nvp-btn{appearance:none;border:0;background:none;color:#fff;width:34px;height:34px;min-width:34px;border-radius:9px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;transition:background .25s var(--ease)}
.nvp-btn:hover,.nvp-btn:focus-visible{background:rgba(255,255,255,.12)}
.nvp-btn svg{width:16px;height:16px;display:block;fill:currentColor}
.nvp-time{font-size:12px;color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums;white-space:nowrap}
.nvp-track{position:relative;flex:1;height:26px;display:flex;align-items:center;cursor:pointer}
.nvp-track::before{content:"";position:absolute;left:0;right:0;height:3px;border-radius:2px;background:rgba(255,255,255,.22)}
.nvp-fill{position:absolute;left:0;height:3px;border-radius:2px;background:#0274DE;width:0%;pointer-events:none}
.nvp-dot{position:absolute;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(2,116,222,.35);
  transform:translateX(-50%);pointer-events:none;left:0%}
.nvp-lock,.nvp-lock body{overflow:hidden!important;height:100%}
@media (max-width:720px){
  .nvp-controls{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));gap:6px;padding:8px 10px}
  .nvp-btn{width:44px;height:44px;min-width:40px}
  .nvp-close{top:calc(10px + env(safe-area-inset-top,0px));right:12px;width:44px;height:44px}
  .nvp-time{display:none}
}
@media (prefers-reduced-motion:reduce){
  .nvp-frame{transition:opacity .25s ease}
  .nvp-backdrop{transition:opacity .2s ease}
}

/* nav breakpoints (kept last so they win over the generic 720px block above) */
@media (max-width:900px){
  .nav-links{display:none}
  .nav-cap{margin-left:14px}
}
@media (max-width:430px){
  .nav-logo{font-size:15px}
  .nav-ailab{letter-spacing:.16em;padding:0 6px 0 9px}
  .nav-ailab svg text{letter-spacing:.16em}
  .nav-cap{margin-left:10px}
  .nav{padding-left:12px;padding-right:12px}
  .lang-cap{padding:0 9px;margin-right:6px}
  .nav.is-glass .lang-cap{margin-right:6px}
  .nav-cta{padding:0 12px;font-size:13.5px}
}

/* ---------- Navigation in the AI Concierge's optical glass (same tokens as /concierge/concierge.css, mode ai) ----------
   Two capsules, always present: identity (left) and links + language + CTA (right). Deep midnight glass with an electric-blue
   rim and a violet refraction at the opposite corner over dark sections; over light sections (.nav-dark) the same glass turns
   luminous white with the azure rim, exactly like World 1. Type = Inter, like the concierge. */
.nav{--nv-glass:rgba(13,20,56,.58);--nv-ink:#F7F9FF;--nv-hair:rgba(190,208,255,.16);--nv-blur:blur(30px) saturate(1.4);
  --nv-rim:0 0 0 1px rgba(130,170,255,.42),0 0 0 2px rgba(110,77,255,.16),0 0 30px rgba(36,107,255,.28),0 18px 44px rgba(2,6,24,.5),inset 0 1px 0 rgba(170,205,255,.42),inset 0 0 0 1px rgba(255,255,255,.07);
  --nv-spec:radial-gradient(60% 60% at 0% 0%,rgba(70,140,255,.30),transparent 62%),linear-gradient(180deg,rgba(150,190,255,.14),rgba(150,190,255,0) 40%),radial-gradient(60% 60% at 100% 100%,rgba(110,77,255,.24),transparent 62%);
  --nv-hover:rgba(95,168,255,.16)}
.nav.nav-dark{--nv-glass:rgba(238,246,255,.5);--nv-ink:#0F172A;--nv-hair:rgba(15,23,42,.08);--nv-blur:blur(30px) saturate(1.45) brightness(1.12);
  --nv-rim:0 0 0 1px rgba(255,255,255,.85),0 0 0 2px rgba(150,200,255,.28),0 0 30px rgba(120,185,255,.32),0 18px 44px rgba(6,26,54,.16),inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.35);
  --nv-spec:linear-gradient(118deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.1) 30%,rgba(255,255,255,0) 55%),linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 40%);
  --nv-hover:rgba(42,143,255,.1)}
/* identity capsule */
.nav-logo{height:56px;padding:0 22px 0 20px;border-radius:999px;background:var(--nv-glass);box-shadow:var(--nv-rim);-webkit-backdrop-filter:var(--nv-blur);backdrop-filter:var(--nv-blur);transition:background .35s var(--ease),box-shadow .35s var(--ease)}
.nav-logo::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:var(--nv-spec);z-index:-1}
.nav-logo{isolation:isolate}
/* cluster capsule: the runtime wrapper (.nav-cap) is glass from the first pixel, not only after scrolling */
.nav-cap{margin-right:0;padding:6px 6px 6px 8px}
.nav-cap::before{opacity:1;transform:none;background:var(--nv-glass);border:0;box-shadow:var(--nv-rim);-webkit-backdrop-filter:var(--nv-blur);backdrop-filter:var(--nv-blur);transition:background .35s var(--ease),box-shadow .35s var(--ease)}
.nav-cap::after{display:none}
.nav-cap .nav-cap-sheen{display:none}
.nav.is-glass{transform:none}
.nav.is-glass .nav-cap{margin-right:0}
.nav.is-glass .nav-links{gap:2px;margin-right:12px}
.nav-links{gap:2px;margin-right:12px;font-family:Inter,"Plus Jakarta Sans",sans-serif;font-size:15px;font-weight:500;letter-spacing:-.02em;color:var(--nv-ink)}
.nav-links a{height:44px;padding:0 16px;color:var(--nv-ink)}
.nav-links a:hover,.nav.nav-dark .nav-links a:hover{background:var(--nv-hover)}
.nav-links::after{content:"";width:1px;height:22px;margin:0 6px 0 8px;background:var(--nv-hair)}
.lang-cap{margin-right:10px;height:32px;background:rgba(255,255,255,.07);border-color:rgba(160,190,255,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.nav.nav-dark .lang-cap{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.85);color:#0F172A;box-shadow:inset 0 1px 0 #fff,0 1px 0 rgba(15,23,42,.06)}
.nav.is-glass .lang-cap{margin-right:10px}
/* CTA: the concierge's electric-blue capsule, white type */
.nav-cta{height:44px;padding:0 20px 0 22px;font-family:Inter,"Plus Jakarta Sans",sans-serif;font-weight:500;letter-spacing:-.02em;border:0;background:linear-gradient(135deg,#3B86FF,#246BFF);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 20px rgba(36,107,255,.32),0 0 0 1px rgba(160,195,255,.25)}
.nav-cta-arrow svg{stroke:#fff}
.nav-cta::before{inset:-1px}
@media (hover:hover) and (pointer:fine){
  .nav-cta:hover{transform:translateY(-1px);background:linear-gradient(135deg,#4A93FF,#2C74FF);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 26px rgba(36,107,255,.4),0 0 0 1px rgba(160,195,255,.4)}
  .nav-logo:hover{box-shadow:var(--nv-rim),0 0 40px rgba(36,107,255,.25)}
}
@media (max-width:1048px){
  .nav-logo{height:44px;padding:0 14px 0 14px}
  .nav-cap{padding:4px 4px 4px 4px}
  .nav-links::after{display:none}
  .lang-cap{margin-right:6px}
  .nav-cta{height:36px;padding:0 14px}
}

/* ============================ FOOTER v2: one midnight glass card (the AI Concierge material) ============================ */
.ft.ft-glass{background:linear-gradient(180deg,#070B1B 0%,#0A1024 100%);color:#F7F9FF;padding:120px 0 40px;overflow:visible}
.ft.ft-glass .wrap{max-width:1600px}
.ft2{--f-hair:rgba(190,208,255,.14);--f-mute:rgba(214,224,255,.62);--f-blue:#5FA8FF;--f-vio:#8B7CFF;position:relative;isolation:isolate;display:grid;grid-template-columns:44fr 56fr;grid-template-rows:auto auto auto auto;border-radius:28px;background:rgba(13,20,56,.58);
  box-shadow:0 0 0 1px rgba(130,170,255,.42),0 0 0 2px rgba(110,77,255,.14),0 0 60px rgba(36,107,255,.22),0 40px 100px rgba(2,6,24,.6),inset 0 1px 0 rgba(170,205,255,.42),inset 0 0 0 1px rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(30px) saturate(1.4);backdrop-filter:blur(30px) saturate(1.4);overflow:hidden}
.ft2::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:radial-gradient(55% 45% at 0% 0%,rgba(70,140,255,.32),transparent 62%),linear-gradient(180deg,rgba(150,190,255,.12),rgba(150,190,255,0) 24%),radial-gradient(60% 50% at 100% 100%,rgba(255,150,80,.16),transparent 62%),radial-gradient(45% 40% at 100% 0%,rgba(110,77,255,.18),transparent 62%)}
.ft2::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1.5px;background:linear-gradient(200deg,rgba(150,195,255,.85),rgba(150,195,255,0) 28%,rgba(255,150,80,0) 70%,rgba(255,150,80,.55));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.9}
.ft2>*{position:relative;padding:60px 64px}
.ft2-news{grid-column:1;grid-row:1;border-right:1px solid var(--f-hair);border-bottom:1px solid var(--f-hair)}
.ft2-state{grid-column:2;grid-row:1;border-bottom:1px solid var(--f-hair)}
.ft2-social{grid-column:1;grid-row:2;border-right:1px solid var(--f-hair);border-bottom:1px solid var(--f-hair);padding-top:44px;padding-bottom:44px}
.ft2-nav{grid-column:2;grid-row:2/4;padding-top:44px}
.ft2-legal{grid-column:1;grid-row:3;border-right:1px solid var(--f-hair);padding-top:36px;padding-bottom:40px}
.ft2-bar{grid-column:1/3;grid-row:4;display:flex;align-items:center;gap:0;padding:0;border-top:1px solid var(--f-hair)}
.ft2 .nav-logo{--ink:#A8CBFF;height:auto;padding:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;font-size:19px}
.ft2 .nav-logo::after{display:none}
.ft2-h{margin-top:56px;font-size:34px;font-weight:400;line-height:1.15;letter-spacing:-.03em;color:#F7F9FF}
.ft2-sub{margin-top:18px;font-size:19px;line-height:1.5;color:var(--f-mute);letter-spacing:-.01em}
.ft2-form{margin-top:30px;display:flex;align-items:center;height:56px;padding:0 5px 0 0;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(160,190,255,.26),inset 0 1px 0 rgba(255,255,255,.12);max-width:480px}
.ft2-form input{flex:1;min-width:0;height:100%;border:0;background:none;padding:0 26px;font:inherit;font-size:16px;color:#F7F9FF;outline:none}
.ft2-form input::placeholder{color:var(--f-mute)}
/* Live region under the subscribe field. Empty until submit, so it takes no space. */
.ft2-note{margin-top:12px;font-size:13px;line-height:1.5;letter-spacing:-.015em;color:#B9CCF5}
.ft2-note:empty{display:none}
.ft2-note.bad{color:#FF9C86}
.ft2-form button{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 24px;border-radius:999px;background:linear-gradient(135deg,rgba(60,110,230,.55),rgba(63,42,143,.45));box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px rgba(160,195,255,.35),0 0 20px rgba(36,107,255,.25);color:#fff;font-size:16px;font-weight:600;letter-spacing:-.02em;transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.ft2-form button:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px rgba(160,195,255,.55),0 0 28px rgba(36,107,255,.4)}
.ft2-form button i,.ft2-book i,.ft2-mail i,.ft2-orange{width:7px;height:7px;border-radius:50%;flex:none;background:radial-gradient(circle at 34% 30%,#eaf5ff 0,#8cc2ff 30%,#4f9dff 58%,#1f6fe0 100%);box-shadow:inset 0 -1px 1px rgba(10,40,120,.35),0 0 8px rgba(95,168,255,.7)}
.ft2-orange{background:radial-gradient(circle at 34% 30%,#ffd9c6 0,#ff9660 30%,#ff6a2b 58%,#d24a12 100%);box-shadow:inset 0 -1px 1px rgba(120,30,0,.35),0 0 8px rgba(255,106,43,.6);display:inline-block;margin:0 10px 0 8px;vertical-align:middle}
.ft2-agree{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:15px;color:var(--f-mute)}
.ft2-agree input{appearance:none;width:16px;height:16px;border-radius:4px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(160,190,255,.4);margin:0;flex:none}
.ft2-agree input:checked{background:linear-gradient(135deg,#3B86FF,#246BFF);box-shadow:none}
.ft2-agree a{color:#F7F9FF;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(160,190,255,.5)}
.ft2-state-top{display:flex;justify-content:space-between;align-items:flex-start;gap:30px}
.ft2-lead{font-size:29px;line-height:1.35;letter-spacing:-.025em;color:var(--f-mute);font-weight:400}
.ft2-lead b{color:#F7F9FF;font-weight:600}
.ft2-hl{color:var(--f-vio);font-weight:500}
.ft2-book{flex:none;display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 24px;border-radius:999px;background:linear-gradient(135deg,rgba(40,74,170,.55),rgba(63,42,143,.38));box-shadow:0 0 0 1px rgba(130,170,255,.5),0 0 0 2px rgba(110,77,255,.18),0 0 30px rgba(36,107,255,.3),inset 0 1px 0 rgba(170,205,255,.4);color:#fff;font-size:16px;font-weight:600;letter-spacing:-.02em;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.ft2-book:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(160,195,255,.75),0 0 0 2px rgba(110,77,255,.28),0 0 40px rgba(36,107,255,.45),inset 0 1px 0 rgba(170,205,255,.55)}
.ft2-founder{display:flex;align-items:center;gap:14px;margin-top:44px}
.ft2-founder img{width:52px;height:52px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(7,11,27,.9),0 0 0 3px rgba(130,170,255,.5),0 0 20px rgba(36,107,255,.35)}
.ft2-founder span{display:flex;flex-direction:column;gap:2px}
.ft2-founder b{font-size:17px;font-weight:600;letter-spacing:-.02em}
.ft2-founder small{font-size:14px;color:var(--f-mute)}
.ft2-meta{margin-top:40px;font-size:17px;color:#F7F9FF;letter-spacing:-.01em}
.ft2-mail{display:inline-flex;align-items:center;gap:12px;margin-top:22px;font-size:25px;font-weight:400;letter-spacing:-.02em;color:#F7F9FF;transition:color .25s}
.ft2-mail:hover{color:var(--f-blue)}
.ft2-eyebrow{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--f-mute)}
.ft2-socials{margin-top:24px;display:flex;gap:16px}
.ft2-socials a{width:50px;height:50px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(160,190,255,.3),inset 0 1px 0 rgba(255,255,255,.1);color:#F7F9FF;transition:background .25s,box-shadow .25s,transform .25s var(--ease)}
.ft2-socials a:hover{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(160,190,255,.6),0 0 18px rgba(36,107,255,.3);transform:translateY(-1px)}
.ft2-socials svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ft2-nav-grid{margin-top:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px 0}
.ft2-nav-grid a{display:flex;align-items:center;justify-content:space-between;padding:0 40px 0 0;font-size:21px;letter-spacing:-.02em;color:#F7F9FF;transition:color .25s}
.ft2-nav-grid a:nth-child(3n+2),.ft2-nav-grid a:nth-child(3n){padding-left:40px;border-left:1px solid var(--f-hair)}
.ft2-nav-grid a span{font-size:15px;color:var(--f-mute);transition:transform .25s var(--ease),color .25s}
.ft2-nav-grid a:hover{color:var(--f-blue)}
.ft2-nav-grid a:hover span{transform:translate(2px,-2px);color:var(--f-blue)}
.ft2-nav-grid a.ft2-cs{justify-content:flex-start;gap:0}
.ft2-nav-grid a.ft2-cs span{margin-left:auto}
.ft2-legal-links{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px 36px;font-size:16px;letter-spacing:-.01em}
.ft2-legal-links a{color:#F7F9FF;transition:color .25s}
.ft2-legal-links a:hover{color:var(--f-blue)}
.ft2-bar p{padding:0 40px;font-size:15px;color:var(--f-mute)}
.ft2-mark{position:relative;display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;margin:12px 0 12px 40px;border-radius:14px;background:linear-gradient(145deg,rgba(28,60,170,.72),rgba(63,42,143,.78)),var(--cg-flower,linear-gradient(145deg,#1B3FA8,#3F2A8F)) center/cover;box-shadow:inset 0 1px 0 rgba(170,205,255,.4),0 6px 16px rgba(36,107,255,.35),0 0 0 1px rgba(130,170,255,.35);font:600 18px/1 Inter,var(--font,"Plus Jakarta Sans"),sans-serif;letter-spacing:-.05em;color:#fff}
.ft2-mark i{font-style:normal;color:#8CC0FF}
.ft2-mark::after{content:"";position:absolute;right:-3px;top:-3px;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#eaf5ff 0,#8cc2ff 30%,#4f9dff 58%,#1f6fe0 100%);box-shadow:0 0 0 2px rgba(7,11,27,.95),0 0 8px rgba(95,168,255,.7)}
.ft2-bar::before{content:"";width:1px;height:100%;background:var(--f-hair);order:1;margin-left:40px}
.ft2-bar p{order:2}
@media (max-width:1100px){.ft2>*{padding:44px 36px}.ft2-h{font-size:30px}.ft2-lead{font-size:24px}.ft2-nav-grid{grid-template-columns:1fr 1fr}.ft2-nav-grid a:nth-child(3n),.ft2-nav-grid a:nth-child(3n+2){padding-left:0;border-left:0}.ft2-nav-grid a:nth-child(2n){padding-left:30px;border-left:1px solid var(--f-hair)}}
@media (max-width:820px){.ft.ft-glass{padding:80px 0 24px}.ft2{grid-template-columns:1fr;grid-template-rows:auto}.ft2>*{grid-column:1!important;grid-row:auto!important;border-right:0!important;border-bottom:1px solid var(--f-hair);padding:36px 24px}.ft2-state-top{flex-direction:column}.ft2-lead{font-size:22px}.ft2-mail{font-size:20px}.ft2-nav-grid{grid-template-columns:1fr}.ft2-nav-grid a{padding-left:0!important;border-left:0!important;padding-right:0}.ft2-bar{flex-wrap:wrap;padding:12px 24px;border-bottom:0}.ft2-mark{margin:0}.ft2-bar::before{display:none}.ft2-bar p{padding:0 0 0 16px}}
.ft2-nav-grid a{white-space:nowrap;font-size:19px;padding-right:22px}
.ft2-nav-grid a:nth-child(3n+2),.ft2-nav-grid a:nth-child(3n){padding-left:28px}
@media (max-width:820px){.ft2-form{max-width:100%;height:52px}.ft2-form input{padding:0 16px;font-size:15px}.ft2-form button{height:42px;padding:0 16px;font-size:15px}.ft2-h{font-size:28px}.ft2-sub{font-size:16px}.ft2-agree{font-size:13px}}

/* ============================ CONTACT v2: the AI Concierge glass, expanded (two modes in one panel) ============================ */
.ctc-v2{--c-glass:rgba(13,20,56,.58);--c-hair:rgba(190,208,255,.14);--c-mute:rgba(214,224,255,.64);--c-ink:#F7F9FF;--c-blue:#5FA8FF;--c-blue2:#8CC0FF;--c-vio:#8B7CFF;--c-card:rgba(255,255,255,.065);--c-card-h:rgba(255,255,255,.11);--c-line:rgba(160,190,255,.22);--c-line-h:rgba(160,190,255,.42);
  --c-rim:0 0 0 1px rgba(130,170,255,.42),0 0 0 2px rgba(110,77,255,.14),0 0 46px rgba(36,107,255,.24),0 34px 90px rgba(2,6,24,.55),inset 0 1px 0 rgba(170,205,255,.42),inset 0 0 0 1px rgba(255,255,255,.06);
  --c-out:cubic-bezier(.2,.7,.2,1);grid-template-columns:1fr 640px;gap:24px;font-family:Inter,"Plus Jakarta Sans",sans-serif;letter-spacing:-.018em;font-feature-settings:"cv11","ss01","calt"}
.ctc-v2 .ctc-left,.ctc-v2 .ctc-panel{position:relative;isolation:isolate;border-radius:32px;background:var(--c-glass);box-shadow:var(--c-rim);-webkit-backdrop-filter:blur(30px) saturate(1.4);backdrop-filter:blur(30px) saturate(1.4);color:var(--c-ink);overflow:hidden;border:0}
.ctc-v2 .ctc-left::before,.ctc-v2 .ctc-panel::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:1;background:radial-gradient(60% 40% at 0% 0%,rgba(70,140,255,.30),transparent 62%),linear-gradient(180deg,rgba(150,190,255,.14),rgba(150,190,255,0) 22%),radial-gradient(60% 45% at 100% 100%,rgba(110,77,255,.24),transparent 62%)}
.ctc-v2 .ctc-panel::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1.5px;background:linear-gradient(200deg,rgba(150,195,255,.85),rgba(150,195,255,0) 30%,rgba(110,77,255,0) 70%,rgba(110,77,255,.7));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.9;transition:opacity .3s}
/* left: calm, purposeful */
.ctc-v2 .ctc-left{padding:52px 52px 48px;display:flex;flex-direction:column;align-items:flex-start;gap:0}
.ctc-eyebrow{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--c-blue2)}
.ctc-v2 .ctc-left h2{margin-top:22px;font-size:34px;font-weight:400;line-height:1.12;letter-spacing:-.035em;max-width:520px;color:var(--c-ink)}
.ctc-left-sub{margin-top:18px;font-size:16px;line-height:1.55;color:var(--c-mute);max-width:440px}
.ctc-v2 .ctc-left-quote{margin-top:40px;font-size:24px;line-height:1.3;letter-spacing:-.025em;color:var(--c-ink);font-weight:400;max-width:420px}
.ctc-v2 .ctc-person{margin-top:22px;padding-top:0}
.ctc-v2 .ctc-person img{width:44px;height:44px;box-shadow:0 0 0 2px rgba(13,20,56,.9),0 0 0 3px rgba(130,170,255,.5)}
.ctc-v2 .ctc-person strong{font-size:15px;font-weight:600;letter-spacing:-.02em}.ctc-v2 .ctc-person span{font-size:13px;color:var(--c-mute)}
.ctc-trust{list-style:none;margin:40px 0 0;padding:0;width:100%;max-width:440px}
.ctc-trust li{display:grid;grid-template-columns:34px 1fr;gap:2px 10px;padding:14px 0;border-top:1px solid var(--c-hair)}
.ctc-trust li:last-child{border-bottom:1px solid var(--c-hair)}
.ctc-trust span{grid-row:1/3;font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--c-blue2);padding-top:3px;font-variant-numeric:tabular-nums}
.ctc-trust b{font-size:15px;font-weight:500;letter-spacing:-.02em;color:var(--c-ink)}
.ctc-trust small{font-size:13px;color:var(--c-mute);line-height:1.45}
.ctc-bookbtn,.cf-submit{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 22px;border-radius:14px;background:linear-gradient(135deg,rgba(60,110,230,.55),rgba(63,42,143,.45));box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px rgba(160,195,255,.35),0 0 20px rgba(36,107,255,.22);color:#fff;font-size:15px;font-weight:500;letter-spacing:-.02em;transition:transform .3s var(--c-out),box-shadow .3s var(--c-out);cursor:pointer}
.ctc-bookbtn:hover,.cf-submit:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px rgba(160,195,255,.6),0 0 28px rgba(36,107,255,.36)}
.ctc-bookbtn i,.cf-submit i,.ctc-tab-dot{width:7px;height:7px;border-radius:50%;flex:none;background:radial-gradient(circle at 34% 30%,#eaf5ff 0,#8cc2ff 30%,#4f9dff 58%,#1f6fe0 100%);box-shadow:inset 0 -1px 1px rgba(10,40,120,.35),0 0 8px rgba(95,168,255,.7)}
.ctc-bookbtn{margin-top:34px}
/* right: the panel */
.ctc-v2 .ctc-panel{padding:26px 34px 34px;display:flex;flex-direction:column;min-height:0}
.ctc-tabs{position:relative;display:inline-flex;align-self:flex-start;gap:2px;padding:4px;border-radius:999px;background:var(--c-card);box-shadow:inset 0 0 0 1px var(--c-line),inset 0 1px 0 rgba(255,255,255,.1)}
.ctc-tabs [role=tab]{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;font-size:14.5px;font-weight:500;letter-spacing:-.02em;color:var(--c-mute);background:none;border:0;cursor:pointer;transition:color .25s;font-family:inherit}
.ctc-tabs [role=tab][aria-selected=true]{color:#fff}
.ctc-tabs [role=tab]:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(95,168,255,.5)}
.ctc-tab-sel{position:absolute;left:4px;top:4px;height:40px;width:0;border-radius:999px;background:linear-gradient(135deg,rgba(60,110,230,.6),rgba(63,42,143,.5));box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px rgba(160,195,255,.35),0 0 18px rgba(36,107,255,.25);transform:translateX(var(--x,0));transition:transform .28s var(--c-out),width .28s var(--c-out)}
.ctc-pane{margin-top:26px}
.ctc-pane.in-fwd{animation:cpIn .26s var(--c-out) both}
.ctc-pane.in-back{animation:cpBack .26s var(--c-out) both}
@keyframes cpIn{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:none}}
@keyframes cpBack{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.ctc-panel.is-book::after{background:linear-gradient(160deg,rgba(150,195,255,.5),rgba(150,195,255,0) 30%,rgba(110,77,255,0) 60%,rgba(110,77,255,.9))}
/* form surfaces: embedded in the glass */
.ctc-v2 .ctc-form{padding:0;background:none;box-shadow:none;border:0;gap:22px;overflow:visible;isolation:auto;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0}
.ctc-v2 .ctc-form::before{display:none}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ctc-v2 .cf-field{gap:8px}
.ctc-v2 .cf-field label,.ctc-v2 .cf-q legend{font-size:12.5px;font-weight:500;color:var(--c-mute);letter-spacing:-.005em}
.ctc-v2 .cf-q legend{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--c-blue2);margin-bottom:10px;padding:0}
.ctc-v2 .cf-field label em,.ctc-v2 .cf-q legend em{font-style:normal;font-weight:400;color:var(--c-mute);text-transform:none;letter-spacing:0;margin-left:4px}
.ctc-v2 .cf-field label small{display:block;font-size:13px;font-weight:400;color:var(--c-mute);line-height:1.5;margin-top:4px}
.ctc-v2 .cf-field input,.ctc-v2 .cf-field textarea{height:48px;border:0;border-radius:14px;padding:0 14px;background:var(--c-card);box-shadow:inset 0 0 0 1px var(--c-line),inset 0 1px 0 rgba(255,255,255,.1);font:inherit;font-size:14.5px;font-weight:450;color:var(--c-ink);letter-spacing:-.016em;transition:box-shadow .2s,background .2s}
.ctc-v2 .cf-field textarea{height:auto;min-height:104px;padding:12px 14px;resize:vertical}
.ctc-v2 .cf-field input::placeholder,.ctc-v2 .cf-field textarea::placeholder{color:var(--c-mute)}
.ctc-v2 .cf-field input:focus,.ctc-v2 .cf-field textarea:focus{outline:none;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px var(--c-blue),0 0 0 3px rgba(110,77,255,.14)}
.cf-chips{display:flex;flex-wrap:wrap;gap:8px}
.cf-chip{position:relative;cursor:pointer}
.cf-chip input{position:absolute;opacity:0;pointer-events:none}
.cf-chip span{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px;border-radius:14px;background:var(--c-card);box-shadow:inset 0 0 0 1px var(--c-line);font-size:14px;font-weight:500;letter-spacing:-.015em;color:var(--c-ink);transition:background .14s,box-shadow .14s}
.cf-chip:hover span{background:var(--c-card-h);box-shadow:inset 0 0 0 1px var(--c-line-h)}
.cf-chip input:checked+span{background:var(--c-card-h);box-shadow:inset 0 0 0 1px var(--c-blue)}
.cf-chip input:checked+span::after{content:"";width:6px;height:6px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#eaf5ff 0,#8cc2ff 30%,#4f9dff 58%,#1f6fe0 100%);box-shadow:0 0 6px rgba(95,168,255,.7)}
.cf-chip input:focus-visible+span{box-shadow:inset 0 0 0 1px var(--c-blue),0 0 0 3px rgba(95,168,255,.35)}
.cf-q.q-in{animation:cpIn .3s var(--c-out) both;animation-name:cqIn}
@keyframes cqIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cf-snap{padding:4px 0 2px}
.cf-snap-eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--c-blue2);margin-bottom:4px}
.cf-snap-rows>div{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:9px 0;border-top:1px solid var(--c-hair)}
.cf-snap-rows>div:last-child{border-bottom:1px solid var(--c-hair)}
.cf-snap-rows small{font-size:12.5px;color:var(--c-mute)}
.cf-snap-rows b{font-size:14px;font-weight:500;letter-spacing:-.02em;color:var(--c-ink)}
.cf-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ctc-v2 .cf-submit{align-self:auto;height:48px;flex:none}
.ctc-v2 .cf-submit::after{display:none}
.ctc-v2 .cf-note{font-size:12.5px;line-height:1.5;color:var(--c-mute);flex:1;min-width:200px}
.ctc-v2 .cf-err{font-size:13px;color:#FFB59A}
.cf-done{display:flex;flex-direction:column;gap:12px;padding:20px 0 6px}
.cf-done-h{font-size:34px;font-weight:400;letter-spacing:-.035em;color:var(--c-ink)}
.cf-done-p{font-size:16px;line-height:1.55;color:var(--c-ink);max-width:460px}
.cf-done-sub{font-size:14px;color:var(--c-mute)}
.cf-done-cta{align-self:flex-start;margin-top:8px}
/* booking pane */
.cb-h{font-size:30px;font-weight:400;letter-spacing:-.035em;line-height:1.1;color:var(--c-ink)}
.cb-sub{margin-top:-6px;font-size:15.5px;line-height:1.55;color:var(--c-mute);max-width:480px}
.cb-meta{list-style:none;margin:-4px 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cb-meta li{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px;border-radius:12px;background:var(--c-card);box-shadow:inset 0 0 0 1px var(--c-line);font-size:13px;font-weight:500;color:var(--c-ink)}
.cb-meta li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--c-blue);box-shadow:0 0 6px rgba(95,168,255,.7)}
.cb-days{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cb-day span{height:auto;flex-direction:column;align-items:center;gap:1px;padding:10px 4px 9px;width:100%}
.cb-day small{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c-mute)}
.cb-day b{font-size:19px;font-weight:500;letter-spacing:-.03em;line-height:1.1}
.cb-day em{font-style:normal;font-size:11px;color:var(--c-mute)}
.cb-day input:checked+span::after{display:none}
.cb-embed{width:100%;min-height:640px;border:0;border-radius:20px;background:#fff}
@media (max-width:1100px){.ctc-v2{grid-template-columns:1fr}.ctc-v2 .ctc-left{padding:40px 32px}.ctc-v2 .ctc-panel{padding:22px 24px 28px}}
@media (max-width:820px){.ctc-v2 .ctc-left{padding:32px 22px}.ctc-v2 .ctc-panel{padding:16px 16px 22px;border-radius:26px}.ctc-tabs{align-self:stretch}.ctc-tabs [role=tab]{flex:1;justify-content:center;padding:0 10px;font-size:13.5px}.cf-row{grid-template-columns:1fr}.cb-days{grid-template-columns:repeat(4,1fr)}.cf-snap-rows>div{grid-template-columns:110px 1fr}.ctc-v2 .ctc-left h2{font-size:28px}.ctc-v2 .ctc-left-quote{font-size:20px}}
@media (prefers-reduced-motion:reduce){.ctc-pane.in-fwd,.ctc-pane.in-back,.cf-q.q-in{animation:none}.ctc-tab-sel{transition:none}}
.ctc-v2 fieldset{border:0;padding:0;margin:0;min-width:0}
.ctc-trust b,.ctc-trust small{display:block}
/* decorative social marks: no verified profile URLs exist yet, so they are not focusable (see footer markup) */
.ft2-socials .ft2-soc{width:50px;height:50px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(160,190,255,.3),inset 0 1px 0 rgba(255,255,255,.1);color:rgba(214,224,255,.5)}
.ft2-socials .ft2-soc svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}