/* ============================================================
   TYR VISUAL — "STORM FORGE" design system
   Vanilla CSS. Mobile-first.
   Direction: the studio mark is a rune struck in hot steel.
   Hot (ember) against cold (arc), on wet iron. Fire and ice —
   the two halves Norse myth says everything was forged between.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:ital,wght@0,400..700;1,400..700&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Martian+Mono:wdth,wght@75..112.5,100..800&display=swap');

/* ---------- tokens ----------
   Near-monochrome. Light does the work, not colour: one warm accent, held
   back for the mark, focus rings and a single ambient glow. Buttons are
   white on black, because that reads as confidence rather than volume.   */
:root{
  /* surfaces */
  --iron:#060607;
  --iron-2:#09090B;
  --anvil:#0C0D10;
  --anvil-2:#121318;
  --scale:#1C1E24;

  /* ink */
  --bone:#F4F4F5;
  --ash:#9A9CA3;
  --ash-2:#6B6D75;

  /* the one accent, used sparingly */
  --ember:#E0562B;
  --ember-hot:#F08A5D;
  --ember-deep:#A93A17;
  /* kept for the few components that need a second, cooler signal */
  --arc:#B9C4D6;
  --arc-deep:#7C8798;

  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.14);

  /* legacy aliases — old component CSS keeps working on the new palette */
  --void:var(--iron);
  --void-2:var(--iron-2);
  --panel:var(--anvil);
  --panel-2:var(--anvil-2);
  --ink:var(--bone);
  --muted:var(--ash);
  --muted-2:var(--ash-2);
  --accent:var(--ember);
  --accent-2:var(--arc);
  --signal:var(--ember-hot);

  /* gradients are now near-flat: a hint of warmth, not a rainbow */
  --grad-accent:linear-gradient(112deg,var(--ember-deep),var(--ember) 60%);
  --grad-arc:linear-gradient(112deg,var(--arc-deep),var(--arc));
  --grad-strike:none;
  --glass:rgba(12,13,16,.72);
  --glass-line:rgba(255,255,255,.10);

  --maxw:1120px;
  --gut:clamp(20px,5vw,56px);
  --radius:10px;

  --f-display:'Familjen Grotesk',system-ui,sans-serif;
  --f-body:'Instrument Sans',system-ui,sans-serif;
  --f-mono:'Martian Mono',ui-monospace,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-strike:cubic-bezier(.16,1.02,.24,1);

  --nav-h:72px;
}

/* ---------- reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  font-family:var(--f-body);
  background:var(--void);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit}
ul{list-style:none}
::selection{background:var(--accent);color:#fff}

/* One light source, well above the fold. Everything else is black. */
body::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:120vh;z-index:-2;pointer-events:none;
  background:
    radial-gradient(52vw 44vh at 50% -8%,rgba(224,86,43,.10),transparent 66%),
    radial-gradient(80vw 30vh at 50% 0%,rgba(255,255,255,.035),transparent 70%);
}
/* a single hairline horizon under the nav, instead of a full grid */
body::after{
  content:"";position:fixed;top:var(--nav-h);left:0;right:0;height:1px;z-index:-1;
  pointer-events:none;background:var(--line);opacity:0;
}

/* ---------- custom cursor ---------- */
.cursor-dot,.cursor-ring{
  position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  border-radius:50%;mix-blend-mode:difference;
  transform:translate(-50%,-50%);
}
.cursor-dot{width:6px;height:6px;background:#fff;
  transition:transform .12s var(--ease)}
.cursor-ring{width:34px;height:34px;border:1px solid rgba(255,255,255,.6);
  transition:transform .22s var(--ease),width .22s,height .22s,border-color .22s}
.cursor-ring.is-active{width:54px;height:54px;border-color:var(--accent-2)}
.cursor-ring.is-hidden,.cursor-dot.is-hidden{opacity:0}
@media (hover:none),(pointer:coarse){
  body,a,button{cursor:auto}
  .cursor-dot,.cursor-ring{display:none}
}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(72px,11vw,140px);position:relative}
.section--tight{padding-block:clamp(48px,7vw,88px)}

.section--globe-feature .globe-feature{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:2.5rem;
  align-items:center;
}
.section--globe-feature .globe-feature__copy .lead{max-width:52ch}
.section--globe-feature .globe-feature__visual{
  display:flex;
  justify-content:center;
}
.section--globe-feature .globe-feature__card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:1.2rem;
  padding:2rem;
  max-width:28rem;
  font-family:var(--f-mono);font-variation-settings:'wdth' 82;
  color:var(--ink);
  box-shadow:0 0 0 1px rgba(255,255,255,.02);
}
@media(max-width:900px){
  .section--globe-feature .globe-feature{grid-template-columns:1fr}
}

/* ---------- type ----------
   Display is Anybody: a variable face with a real width axis. Headlines sit
   expanded (wdth 118-125) so they read like letters stamped into a plate.
   Utility text is Martian Mono held narrow so the long labels still fit.     */
/* Labels are small and quiet: 11px mono, wide tracking, no ornament.
   The rune tick stays as the single mark that says whose page this is. */
.eyebrow{
  font-family:var(--f-mono);font-variation-settings:'wdth' 78,'wght' 500;
  font-size:.63rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ash-2);
  display:inline-flex;align-items:center;gap:.7em;
}
.eyebrow::before{
  content:"";flex:none;width:7px;height:8px;background:var(--ember);
  clip-path:polygon(50% 0,100% 100%,0 100%);
}
.eyebrow--plain::before{content:none}

h1,h2,h3,h4{
  font-family:var(--f-display);font-weight:600;line-height:1.08;letter-spacing:-.02em;
  color:var(--bone);text-wrap:balance;
}
/* Headlines sit around 36-54px, sentence case. The old 96px uppercase was
   the loudest thing on the page; at this size the words do the work. */
.h-display{font-size:clamp(2.05rem,4.2vw,3.35rem);line-height:1.04;letter-spacing:-.032em;font-weight:600}
.h-1{font-size:clamp(1.7rem,3vw,2.4rem);letter-spacing:-.028em;font-weight:600}
.h-2{font-size:clamp(1.35rem,2.2vw,1.75rem);letter-spacing:-.022em;font-weight:600}
.h-3{font-size:clamp(1.08rem,1.5vw,1.22rem);letter-spacing:-.015em;font-weight:600}
.lead{font-size:1.0625rem;color:var(--ash);max-width:56ch;line-height:1.6}
.muted{color:var(--ash)}
/* accent text is now just the accent — no gradient fill */
.accent-text{color:var(--ember)}
.strike-text{color:var(--bone)}

/* ---------- buttons ---------- */
/* Two buttons only: a solid white one and a hairline one. No glow, no
   gradient — on black, white already is the loudest thing available. */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--f-body);font-size:.9375rem;font-weight:500;letter-spacing:-.005em;
  padding:.66em 1.15em;border-radius:999px;
  border:1px solid var(--line-2);color:var(--bone);
  background:transparent;
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.btn:hover{background:rgba(255,255,255,.06);border-color:var(--line-2);color:var(--bone)}
.btn--primary{
  background:var(--bone);color:#08080A;border-color:var(--bone);
}
.btn--primary:hover{background:#fff;border-color:#fff;color:#08080A}
.btn .arrow{transition:transform .25s var(--ease);opacity:.75}
.btn:hover .arrow{transform:translate(2px,-2px)}

.link-underline{position:relative;font-family:var(--f-body);font-size:.9375rem;color:var(--ink)}
.link-underline::after{
  content:"";position:absolute;left:0;bottom:-3px;height:1px;width:100%;
  background:var(--grad-accent);transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease);
}
.link-underline:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .4s var(--ease),border-color .4s,backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(6,6,7,.7);backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-bottom-color:var(--line);
}
.nav__inner{width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gut);display:flex;align-items:center;justify-content:space-between;gap:2rem}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--f-display);font-variation-settings:'wdth' 115;
  font-weight:700;letter-spacing:-.02em;font-size:1.05rem}
.brand__mark{width:26px;height:26px;flex:0 0 26px}
.brand__mark path{stroke:var(--accent-2);stroke-width:6;fill:none}
.brand small{font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-weight:400;font-size:.62rem;
  letter-spacing:.18em;color:var(--muted);text-transform:uppercase}

.nav__links{display:none;align-items:center;gap:.4rem}
@media(min-width:760px){.nav__links{display:flex}}
.nav__links a{
  font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-size:.82rem;letter-spacing:.04em;
  color:var(--muted);padding:.5em .9em;border-radius:8px;position:relative;
  transition:color .3s var(--ease);
}
.nav__links a:hover{color:var(--ink)}
.nav__links a.active{color:var(--ink)}
.nav__links a.active::before{
  content:"";position:absolute;left:.9em;right:.9em;bottom:.1em;height:1px;
  background:var(--grad-accent);
}
.nav__cta{display:none}
@media(min-width:900px){.nav__cta{display:inline-flex}}

.nav__toggle{display:flex;flex-direction:column;gap:5px;width:30px;padding:6px 0}
.nav__toggle span{height:1.5px;background:var(--ink);transition:transform .4s var(--ease),opacity .3s}
.nav__toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav__toggle.open span:nth-child(2){opacity:0}
.nav__toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(min-width:760px){.nav__toggle{display:none}}

/* mobile menu */
.nav__mobile{
  position:fixed;inset:0;z-index:190;background:rgba(6,6,7,.96);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:flex;flex-direction:column;justify-content:center;gap:.4rem;
  padding:var(--gut);
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
}
.nav__mobile.open{opacity:1;visibility:visible}
.nav__mobile a{
  font-family:var(--f-display);font-variation-settings:'wdth' 115;font-size:clamp(2rem,9vw,3rem);font-weight:600;
  letter-spacing:-.02em;color:var(--ink);padding:.18em 0;
  display:flex;align-items:baseline;gap:1rem;
  opacity:0;transform:translateY(20px);
}
.nav__mobile.open a{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.nav__mobile.open a:nth-child(1){transition-delay:.08s}
.nav__mobile.open a:nth-child(2){transition-delay:.14s}
.nav__mobile.open a:nth-child(3){transition-delay:.2s}
.nav__mobile.open a:nth-child(4){transition-delay:.26s}
.nav__mobile.open a:nth-child(5){transition-delay:.32s}
.nav__mobile.open a:nth-child(6){transition-delay:.38s}

@media(min-width:760px){.nav__mobile{display:none}}

/* ---------- loader (index only) ----------
   Names the three crafts and gets out of the way. The Higgsfield plate
   sits far back; the only moving parts are the rail and the label that
   is currently lit.                                                     */
.loader{
  position:fixed;inset:0;z-index:1000;background:var(--iron);
  display:flex;align-items:center;justify-content:center;
  padding:var(--gut);overflow:hidden;
}
.loader__plate{position:absolute;inset:0;z-index:0;overflow:hidden}
.loader__plate video{
  width:100%;height:100%;object-fit:cover;
  opacity:.11;filter:saturate(.2) contrast(1.05) blur(1px);transform:scale(1.12);
}
/* the plate should register as texture at the edge of vision, nothing more */
.loader__grade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(44% 30% at 50% 48%,var(--iron) 30%,rgba(6,6,7,.9) 70%,transparent 100%),
    radial-gradient(85% 75% at 50% 50%,transparent 18%,rgba(6,6,7,.8) 62%,var(--iron) 100%);
}
.loader__stage{position:relative;z-index:2;width:min(520px,92vw);text-align:center}

.loader__mark{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.35rem,3.4vw,1.9rem);letter-spacing:.01em;
  color:var(--bone);margin-bottom:1.6rem;
  opacity:0;transform:translateY(8px);
  animation:loaderIn .7s var(--ease-out) .1s forwards;
}
.loader__mark .sp{display:inline-block;width:.32em}

.loader__crafts{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.5rem 1.4rem;margin-bottom:2rem;
  opacity:0;animation:loaderIn .7s var(--ease-out) .28s forwards;
}
.loader__craft{
  position:relative;
  font-family:var(--f-mono);font-variation-settings:'wdth' 78,'wght' 400;
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ash-2);transition:color .45s var(--ease);
}
.loader__craft::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;
  background:var(--ember);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.loader__craft.is-live{color:var(--bone)}
.loader__craft.is-live::after{transform:scaleX(1)}
.loader__craft.is-done{color:var(--ash)}
.loader__craft.is-done::after{transform:scaleX(1);background:var(--line-2)}

.loader__foot{display:flex;align-items:center;gap:1rem;
  opacity:0;animation:loaderIn .7s var(--ease-out) .4s forwards}
.loader__rail{flex:1;height:1px;background:var(--scale);position:relative;overflow:hidden}
.loader__rail i{
  position:absolute;inset:0;background:var(--bone);
  transform:scaleX(0);transform-origin:left;transition:transform .3s linear;
}
.loader__pct{
  font-family:var(--f-mono);font-variation-settings:'wdth' 78;font-size:.62rem;
  color:var(--ash-2);min-width:3.5ch;text-align:right;font-variant-numeric:tabular-nums;
}

.loader.done{animation:loaderOut .6s var(--ease) forwards}

@keyframes loadIn{to{transform:translateY(0);opacity:1}}
@keyframes fadeIn{to{opacity:1}}
@keyframes loaderIn{to{opacity:1;transform:none}}
@keyframes termIn{to{opacity:1;transform:none}}
@keyframes caretBlink{50%{opacity:0}}
@keyframes penDraw{to{stroke-dashoffset:0}}
@keyframes loaderOut{to{opacity:0;visibility:hidden}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
#hero-canvas{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%}
.hero__inner{position:relative;z-index:2;width:100%}
.hero__eyebrow{margin-bottom:1.4rem;opacity:0}
.hero h1{margin-bottom:1.6rem}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line > span{display:inline-block;transform:translateY(105%);opacity:0}
.hero.ready h1 .line > span{animation:loadIn .9s var(--ease-out) forwards}
.hero.ready h1 .line:nth-child(2) > span{animation-delay:.08s}
.hero.ready h1 .line:nth-child(3) > span{animation-delay:.16s}
.hero.ready .hero__eyebrow{animation:fadeIn .8s ease .3s forwards}
.hero__wordmark{font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-weight:700;font-size:clamp(.85rem,1.1vw,1rem);
  letter-spacing:.22em;text-transform:uppercase;margin-bottom:.8rem;opacity:0;
  background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero.ready .hero__wordmark{animation:fadeIn .8s ease .42s forwards}
.hero__lead{opacity:0}
.hero.ready .hero__lead{animation:fadeIn .9s ease .55s forwards}
.hero__actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.4rem;opacity:0}
.hero.ready .hero__actions{animation:fadeIn .9s ease .7s forwards}
.hero__scroll{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:2;
  font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-size:.68rem;letter-spacing:.2em;color:var(--muted);
  text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:.6rem;opacity:0;
}
.hero.ready .hero__scroll{animation:fadeIn 1s ease 1s forwards}
.hero__scroll i{width:1px;height:38px;background:linear-gradient(var(--accent-2),transparent);
  animation:scrollLine 1.8s ease infinite}
@keyframes scrollLine{0%{transform:scaleY(.3);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(.3);transform-origin:bottom}}

.explore-btn{
  position:absolute;bottom:3.5rem;left:50%;transform:translateX(-50%);z-index:2;
  display:flex;align-items:center;gap:.6em;font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-size:.75rem;
  letter-spacing:.06em;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  padding:.85em 1.4em;border-radius:100px;cursor:pointer;opacity:0;
  transition:all .3s cubic-bezier(.22,.61,.36,1);backdrop-filter:blur(10px);
}
.hero.ready .explore-btn{animation:fadeIn .8s ease 2s forwards}
.explore-btn:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4);transform:translateX(-50%) translateY(-2px)}
.explore-arrow{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px}
.explore-arrow svg{transition:transform .3s ease}
.explore-btn:hover .arrow-svg{transform:translateY(2px)}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(28px);
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal-stagger]>*{opacity:0;transform:translateY(28px);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
[data-reveal-stagger].in>*{opacity:1;transform:none}
[data-reveal-stagger].in>*:nth-child(1){transition-delay:.05s}
[data-reveal-stagger].in>*:nth-child(2){transition-delay:.12s}
[data-reveal-stagger].in>*:nth-child(3){transition-delay:.19s}
[data-reveal-stagger].in>*:nth-child(4){transition-delay:.26s}
[data-reveal-stagger].in>*:nth-child(5){transition-delay:.33s}
[data-reveal-stagger].in>*:nth-child(6){transition-delay:.4s}

/* tool rail — the studio's actual bench, read as a data strip not a headline */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:.85rem;
  background:linear-gradient(180deg,rgba(12,13,16,.5),transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee__track{display:flex;gap:0;width:max-content;animation:marquee 46s linear infinite}
.marquee__track span{font-family:var(--f-mono);font-variation-settings:'wdth' 78,'wght' 500;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);
  display:inline-flex;align-items:center;gap:1.6rem;padding-inline:1.6rem}
.marquee__track span::after{content:"";width:5px;height:6px;background:var(--ember);opacity:.55;
  clip-path:polygon(50% 0,100% 100%,0 100%)}
.marquee__track b{display:inline-flex;align-items:center;gap:.6em;font-weight:inherit}
.marquee__track img{height:15px;width:auto;flex:none;opacity:.72;filter:saturate(.75)}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- section heading block ---------- */
.sec-head{display:grid;gap:1rem;margin-bottom:clamp(2.4rem,5vw,4rem)}
.sec-head .lead{margin-top:.4rem}
@media(min-width:820px){
  .sec-head{grid-template-columns:1fr 1fr;align-items:end;gap:2rem}
  .sec-head .lead{justify-self:end}
}

/* ---------- teaser cards (index) ---------- */
.teasers{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
@media(min-width:760px){.teasers{grid-template-columns:1fr 1fr}}
.teaser{
  background:var(--panel);padding:clamp(1.8rem,4vw,2.6rem);min-height:240px;
  display:flex;flex-direction:column;justify-content:space-between;gap:2rem;
  position:relative;overflow:hidden;transition:background .4s var(--ease);
}
.teaser::before{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;
  background:radial-gradient(60% 60% at 80% 0%,rgba(224,86,43,.12),transparent 70%);
  transition:opacity .5s var(--ease)}
.teaser:hover{background:var(--panel-2)}
.teaser:hover::before{opacity:1}
.teaser__n{font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-size:.78rem;color:var(--accent-2)}
.teaser h3{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:600}
.teaser p{color:var(--muted);max-width:42ch}
.teaser__go{display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-size:.8rem;color:var(--ink)}
.teaser__go .arrow{transition:transform .3s var(--ease)}
.teaser:hover .teaser__go .arrow{transform:translate(4px,-4px)}

/* ---------- orbital timeline (index) ---------- */
.orbital-timeline{position:relative;width:100%;height:560px;border-radius:18px;
  border:1px solid var(--line);overflow:hidden;
  background:radial-gradient(60% 60% at 50% 42%,rgba(224,86,43,.10),transparent 70%)}
.orbital-timeline__stage{position:absolute;inset:0}
.orbital-core{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px;
  border-radius:50%;background:var(--grad-accent);display:flex;align-items:center;justify-content:center;z-index:5}
.orbital-core::before,.orbital-core::after{content:"";position:absolute;left:50%;top:50%;
  border-radius:50%;border:1px solid var(--line-2);animation:orbitPing 2.4s ease-out infinite}
.orbital-core::before{width:84px;height:84px;margin:-42px}
.orbital-core::after{width:104px;height:104px;margin:-52px;animation-delay:.5s}
@keyframes orbitPing{0%{transform:scale(.8);opacity:.6}100%{transform:scale(1.3);opacity:0}}
.orbital-core span{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.85)}
.orbital-ring{position:absolute;left:50%;top:50%;width:420px;height:420px;margin:-210px;
  border-radius:50%;border:1px solid var(--line)}

.orbital-node{position:absolute;left:50%;top:50%;margin:-20px;width:40px;height:40px;
  cursor:pointer;transition:transform .7s var(--ease-out),opacity .7s var(--ease-out)}
.orbital-node__glow{position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 70%)}
.orbital-node__glow.is-pulsing{animation:orbitGlowPulse 1.3s ease-in-out infinite}
@keyframes orbitGlowPulse{0%,100%{opacity:.5}50%{opacity:1}}
.orbital-node__dot{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--panel);color:var(--ink);border:2px solid var(--line-2);
  transition:transform .3s var(--ease),background .3s,border-color .3s,color .3s}
.orbital-node__dot svg{width:16px;height:16px}
.orbital-node.is-related .orbital-node__dot{background:rgba(255,255,255,.12);border-color:var(--accent-2);
  animation:orbitGlowPulse 1.2s ease-in-out infinite}
.orbital-node.is-expanded .orbital-node__dot{background:#fff;color:#060607;border-color:#fff;transform:scale(1.4)}
.orbital-node__label{position:absolute;top:48px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-size:.72rem;letter-spacing:.06em;color:var(--muted);
  transition:color .3s,transform .3s}
.orbital-node.is-expanded .orbital-node__label{color:var(--ink);transform:translateX(-50%) scale(1.1)}

.orbital-card{position:absolute;top:78px;left:50%;transform:translateX(-50%);width:260px;
  background:var(--panel-2);border:1px solid var(--line-2);border-radius:14px;padding:1.1rem 1.2rem;
  z-index:200;box-shadow:0 24px 60px -20px rgba(0,0,0,.6);cursor:auto}
.orbital-card::before{content:"";position:absolute;top:-10px;left:50%;width:1px;height:10px;background:var(--line-2)}
.orbital-card__top{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.orbital-card__badge{font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-size:.62rem;letter-spacing:.08em;
  padding:.2em .6em;border-radius:99px;border:1px solid var(--line-2);text-transform:uppercase}
.orbital-card__badge--completed{background:#fff;color:#060607;border-color:#fff}
.orbital-card__badge--progress{background:transparent;color:var(--accent-2);border-color:var(--accent-2)}
.orbital-card__badge--pending{background:transparent;color:var(--muted)}
.orbital-card__date{font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-size:.68rem;color:var(--muted-2)}
.orbital-card h4{margin-top:.6rem;font-size:1.05rem;font-weight:600}
.orbital-card p{margin-top:.5rem;font-size:.84rem;color:var(--muted);line-height:1.5}
.orbital-card__energy{margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--line)}
.orbital-card__energy-top{display:flex;justify-content:space-between;font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-size:.7rem;color:var(--muted);margin-bottom:.4rem}
.orbital-card__bar{height:3px;border-radius:99px;background:var(--line);overflow:hidden}
.orbital-card__bar i{display:block;height:100%;background:var(--grad-accent)}
.orbital-card__related{margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--line)}
.orbital-card__related-label{font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.orbital-card__related-list{display:flex;flex-wrap:wrap;gap:.4rem}
.orbital-card__related-btn{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-size:.7rem;
  padding:.3em .6em;border:1px solid var(--line-2);border-radius:8px;background:transparent;color:var(--ink);
  cursor:pointer;transition:background .25s,border-color .25s}
.orbital-card__related-btn:hover{background:var(--panel);border-color:var(--accent-2)}
.orbital-card__cta{margin-top:.9rem;display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-size:.78rem;color:var(--accent-2)}

@media(max-width:640px){
  .orbital-timeline{height:460px}
  .orbital-ring{width:260px;height:260px;margin:-130px}
  .orbital-card{width:220px}
}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--panel);padding:clamp(1.4rem,3vw,2rem)}
.stat b{font-family:var(--f-display);font-variation-settings:'wdth' 115;font-weight:700;font-size:clamp(2rem,5vw,3rem);
  display:block;letter-spacing:-.03em}
.stat span{font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}

/* ---------- team (about) ---------- */
.team{display:grid;gap:1.4rem}
@media(min-width:760px){.team{grid-template-columns:repeat(3,1fr)}}
.member{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  overflow:hidden;position:relative;transition:transform .5s var(--ease),border-color .5s}
.member:hover{transform:translateY(-6px);border-color:var(--line-2)}
.member__photo{aspect-ratio:4/4.6;position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--panel-2),#0a0b10)}
.member__photo svg{position:absolute;inset:0;width:100%;height:100%}
.member__photo .ring{transition:transform 6s linear}
.member:hover .member__photo .ring{transform:rotate(360deg)}
.member__init{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-variation-settings:'wdth' 115;font-weight:700;font-size:clamp(3rem,8vw,5rem);
  color:rgba(255,255,255,.06);letter-spacing:-.04em}
.member__body{padding:1.5rem}
.member__role{font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-2);margin-bottom:.5rem}
.member h3{font-size:1.4rem;margin-bottom:.6rem}
.member p{color:var(--muted);font-size:.94rem}
.member__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.member__tags span{font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-size:.66rem;color:var(--muted);
  border:1px solid var(--line);border-radius:100px;padding:.3em .8em}

/* ---------- story split ---------- */
.split{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(min-width:880px){.split{grid-template-columns:1fr 1fr}}
.split__media{aspect-ratio:1/1;border:1px solid var(--line);border-radius:20px;
  position:relative;overflow:hidden;background:var(--panel)}
.split__media svg{position:absolute;inset:0;width:100%;height:100%}

/* ---------- graphic design grid ---------- */
.gd-grid{display:grid;gap:1.4rem}
@media(min-width:620px){.gd-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.gd-grid{grid-template-columns:repeat(3,1fr)}}
.gd-item{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  transition:transform .5s var(--ease),border-color .5s;
}
.gd-item:hover{transform:translateY(-6px);border-color:var(--line-2)}
.gd-item__art{aspect-ratio:1/1;overflow:hidden;position:relative;background:var(--panel-2)}
.gd-item__art svg,.gd-item__art img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease)}
.gd-item:hover .gd-item__art svg,.gd-item:hover .gd-item__art img{transform:scale(1.05)}

.vertical-stack{position:relative;display:flex;justify-content:center;overflow:hidden}
.vertical-stack__frame{position:relative;width:min(100%,480px);max-width:480px;min-height:300px;margin-inline:auto}
.vertical-stack__cards{position:relative;height:280px;display:flex;align-items:center;justify-content:center}
.vertical-stack__card{position:absolute;top:50%;left:50%;width:min(100%,480px);aspect-ratio:16/9;transform:translate(-50%,-50%);border-radius:28px;overflow:hidden;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 80px -36px rgba(0,0,0,.7);transition:transform .55s cubic-bezier(.22,.61,.36,1),opacity .45s ease,z-index .1s;will-change:transform,opacity;touch-action:pan-y;user-select:none}
.vertical-stack__card:active{cursor:grabbing}
.vertical-stack__card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 40%);pointer-events:none}
.vertical-stack__card-inner{position:relative;width:100%;height:100%}
.vertical-stack__card-inner img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.vertical-stack__counter{position:absolute;left:-76px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:.45rem;color:var(--muted);font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-size:.85rem}
.vertical-stack__counter .count-current{font-family:var(--f-display);font-variation-settings:'wdth' 115;font-size:2.1rem;line-height:1;color:var(--ink)}
.vertical-stack__counter .count-total{letter-spacing:.24em;text-transform:uppercase}
.vertical-stack__dots{position:absolute;right:-62px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:.75rem}
.vertical-stack__dot{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.2);border:none;cursor:pointer;transition:all .25s ease}
.vertical-stack__dot.active{width:10px;height:34px;background:var(--ink)}
.vertical-stack__hint{margin-top:2rem;text-align:center;color:var(--muted);font-size:.92rem;line-height:1.4}
.vertical-stack__hint-icon{display:flex;justify-content:center;margin-bottom:.85rem;color:var(--muted)}
@media (max-width:760px){.vertical-stack__counter{left:50%;bottom:auto;right:auto;top:auto;transform:translate(-50%,0);position:static;margin-top:1.2rem}.vertical-stack__dots{position:static;transform:none;flex-direction:row;justify-content:center;gap:.75rem;margin-top:1rem}.vertical-stack__hint{font-size:.95rem;max-width:90%;margin-inline:auto}.vertical-stack__frame{min-height:220px}}
.orbit-gallery{position:relative;display:flex;flex-direction:column;align-items:center}
.orbit-gallery__frame{position:relative;width:100%;aspect-ratio:16/10;max-height:640px;border-radius:28px;overflow:hidden;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 80px -36px rgba(0,0,0,.7)}
.orbit-gallery__frame canvas{display:block;width:100%;height:100%;cursor:grab}
.orbit-gallery__frame canvas:active{cursor:grabbing}
.orbit-gallery__hint{margin-top:1.6rem;text-align:center;color:var(--muted);font-size:.92rem;line-height:1.4}
.orbit-gallery__hint-icon{display:flex;justify-content:center;margin-bottom:.85rem;color:var(--muted)}
.gd-item__cap{padding:1.3rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:.4rem}
.gd-item__tag{font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-2)}
.gd-item h3{font-size:1.25rem;font-weight:600}









/* ---------- portfolio ---------- */
.grid-projects{display:grid;gap:1.4rem}
@media(min-width:680px){.grid-projects{grid-template-columns:repeat(2,1fr)}}
.project{
  position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);
  background:var(--panel);aspect-ratio:16/11;display:block;
  transition:border-color .5s var(--ease);
}
.project.tall{aspect-ratio:16/20}
@media(min-width:680px){.project.wide{grid-column:span 2;aspect-ratio:16/8}}
.project:hover{border-color:var(--line-2)}
.project__art{position:absolute;inset:0;transition:transform .8s var(--ease)}
.project__art svg{width:100%;height:100%}
.project:hover .project__art{transform:scale(1.04)}
.project__veil{position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(6,6,7,.4) 60%,rgba(6,6,7,.92))}
.project__meta{position:absolute;inset:auto 0 0 0;padding:clamp(1.2rem,3vw,1.8rem);
  display:flex;flex-direction:column;gap:.5rem;transform:translateY(0);transition:transform .5s var(--ease)}
.project__tag{font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-2)}
.project h3{font-size:clamp(1.3rem,2.6vw,1.8rem)}
.project__desc{color:var(--muted);font-size:.92rem;max-width:46ch;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s var(--ease),opacity .5s var(--ease),margin .5s}
.project:hover .project__desc{max-height:120px;opacity:1;margin-top:.2rem}
.project__row{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.4rem}
.project__year{font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-size:.74rem;color:var(--muted)}
.project__open{font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-size:.78rem;display:inline-flex;gap:.4rem;align-items:center}
.project:hover .project__open .arrow{transform:translate(3px,-3px)}
.project__open .arrow{transition:transform .3s var(--ease)}

/* ---------- services ---------- */
.svc{display:grid;gap:1.4rem}
@media(min-width:900px){.svc{grid-template-columns:repeat(3,1fr)}}
.svc-card{
  background:var(--panel);border:1px solid var(--line);border-radius:20px;
  padding:clamp(1.8rem,3.5vw,2.4rem);position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:1.2rem;min-height:340px;
  transition:transform .5s var(--ease),border-color .5s,background .5s;
}
.svc-card::after{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;
  background:radial-gradient(70% 60% at 50% -10%,rgba(224,86,43,.16),transparent 70%);
  transition:opacity .5s var(--ease)}
.svc-card:hover{transform:translateY(-6px);border-color:var(--line-2);background:var(--panel-2)}
.svc-card:hover::after{opacity:1}
.svc-card__icon{width:54px;height:54px;border:1px solid var(--line-2);border-radius:14px;
  display:grid;place-items:center;color:var(--accent-2);
  transition:transform .5s var(--ease),color .5s}
.svc-card:hover .svc-card__icon{transform:rotate(-8deg) scale(1.05);color:var(--ink)}
.svc-card__icon svg{width:26px;height:26px}
.svc-card__n{position:absolute;top:1.4rem;right:1.6rem;font-family:var(--f-mono);font-variation-settings:'wdth' 82;
  font-size:.8rem;color:var(--muted-2)}
.svc-card h3{font-size:1.4rem}
.svc-card p{color:var(--muted);font-size:.95rem}
.svc-card ul{margin-top:auto;display:grid;gap:.5rem}
.svc-card li{font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-size:.78rem;color:var(--muted);
  display:flex;gap:.6rem;align-items:center}
.svc-card li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent-2);flex:0 0 5px}

/* process strip */
.steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
@media(min-width:760px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{background:var(--panel);padding:clamp(1.4rem,3vw,2rem);display:flex;flex-direction:column;gap:.8rem}
.step b{font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-size:.8rem;color:var(--accent-2)}
.step h4{font-size:1.1rem;font-weight:600}
.step p{color:var(--muted);font-size:.88rem}

/* ---------- contact ---------- */
.contact-grid{display:grid;gap:clamp(2rem,5vw,4rem)}
@media(min-width:900px){.contact-grid{grid-template-columns:.85fr 1.15fr}}
.contact-aside h2{margin-bottom:1.2rem}
.contact-aside .lead{margin-bottom:2rem}
.contact-list{display:grid;gap:1.2rem;margin-top:2rem}
.contact-list a,.contact-list div{display:flex;flex-direction:column;gap:.2rem}
.contact-list .k{font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.contact-list .v{font-size:1.05rem}
.location-card{margin-top:2rem;padding:1.6rem;border:1px solid rgba(255,255,255,.08);border-radius:22px;background:rgba(255,255,255,.03);box-shadow:0 20px 50px -30px rgba(0,0,0,.6)}
.location-card__label{display:inline-flex;font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);margin-bottom:.75rem}
.location-card h3{font-family:var(--f-display);font-variation-settings:'wdth' 115;font-size:1.4rem;line-height:1.05;margin-bottom:.65rem}
.location-card p{color:var(--muted);font-size:.95rem;line-height:1.6}
.location-map-card{position:relative;cursor:pointer;margin-top:2rem;transform-style:preserve-3d}
.location-map-card__surface{position:relative;overflow:hidden;border-radius:28px;background:rgba(12,13,16,.9);border:1px solid rgba(255,255,255,.08);box-shadow:0 28px 90px -40px rgba(0,0,0,.7);transition:transform .35s cubic-bezier(.22,.61,.36,1),height .35s ease,background .35s ease;min-height:220px}
.location-map-card__surface::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 15% 20%,rgba(224,86,43,.16),transparent 24%),radial-gradient(circle at 80% 10%,rgba(255,255,255,.10),transparent 18%);pointer-events:none}
.location-map-card__map-layer{position:absolute;inset:0;overflow:hidden;border-radius:28px}
.location-map-card__map-preview{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,9,11,.95),rgba(9,9,11,.75)),radial-gradient(circle at 20% 20%,rgba(224,86,43,.16),transparent 18%),radial-gradient(circle at 85% 25%,rgba(255,255,255,.08),transparent 16%);opacity:.92}
.location-map-card__map-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;color:var(--muted);opacity:1;transition:opacity .3s ease;pointer-events:none}
.location-map-card__map-placeholder svg{width:48px;height:48px;color:var(--accent-2)}
.location-map-card__map-placeholder p{font-size:.9rem;letter-spacing:.03em}
.location-map-card__iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;pointer-events:none;transition:opacity .4s ease}
.location-map-card__content{position:relative;z-index:1;padding:1.6rem 1.4rem 1.4rem;display:grid;gap:.55rem}
.location-map-card__subtext{color:var(--muted);font-size:.95rem;line-height:1.5;max-width:30rem}
.location-map-card__coords{font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-2);opacity:0;max-height:0;overflow:hidden;transition:opacity .3s ease,max-height .3s ease}
.location-map-card__hint{margin-top:.95rem;font-size:.82rem;color:var(--muted);text-align:center;transition:opacity .2s ease}
.location-map-card.is-expanded .location-map-card__surface{min-height:280px}
.location-map-card.is-expanded .location-map-card__coords{opacity:1;max-height:4rem}
.location-map-card.is-expanded .location-map-card__hint{opacity:0}
.location-map-card.is-expanded .location-map-card__map-placeholder{opacity:0;pointer-events:none}
.location-map-card:hover .location-map-card__surface{transform:translateY(-1px)}

.form{background:var(--panel);border:1px solid var(--line);border-radius:20px;
  padding:clamp(1.6rem,4vw,2.6rem);display:grid;gap:1.2rem}
.field{display:grid;gap:.5rem}
.field label{font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.field input,.field textarea,.field select{
  width:100%;background:var(--void-2);border:1px solid var(--line);border-radius:12px;
  padding:.95em 1em;color:var(--ink);font-family:var(--f-body);font-size:1rem;
  transition:border-color .3s var(--ease),background .3s;resize:vertical;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--accent);background:#0a0c11}
.field textarea{min-height:140px}
.field--row{display:grid;gap:1.2rem}
@media(min-width:560px){.field--row{grid-template-columns:1fr 1fr}}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.form__status{font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-size:.82rem;min-height:1.2em}
.form__status.ok{color:var(--signal)}
.form__status.err{color:#ff6b7d}
.btn[disabled]{opacity:.5;pointer-events:none}
.spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:none}
.btn.loading .spinner{display:inline-block}
.btn.loading .btn__label{opacity:.6}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- CTA band ---------- */
.cta-band{position:relative;border:1px solid var(--line);border-radius:24px;overflow:hidden;
  background:var(--panel);padding:clamp(2.4rem,6vw,4.5rem);text-align:center}
.cta-band::before{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 120% at 50% 0%,rgba(224,86,43,.18),transparent 60%)}
.cta-band>*{position:relative}
.cta-band h2{margin-bottom:1rem}
.cta-band .lead{margin-inline:auto;margin-bottom:2rem}
.cta-band .hero__actions{justify-content:center;margin-top:0;opacity:1}

/* ---------- WhatsApp floating button ---------- */
.whatsapp-fab{position:fixed;right:1.4rem;bottom:1.4rem;z-index:150;
  display:flex;align-items:center;gap:.6rem;padding:.7em 1.1em .7em .8em;
  background:#1FAE52;color:#fff;border-radius:999px;text-decoration:none;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.55);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.whatsapp-fab:hover{transform:translateY(-2px);box-shadow:0 18px 40px -10px rgba(0,0,0,.65)}
.whatsapp-fab__icon{width:26px;height:26px;flex:none;fill:#fff}
.whatsapp-fab__label{font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-size:.72rem;font-weight:600;
  letter-spacing:.04em;line-height:1.25;max-width:148px}
@media(max-width:640px){
  .whatsapp-fab{right:1rem;bottom:1rem;padding:.7em;gap:0}
  .whatsapp-fab__label{display:none}
}

/* ---------- scroll progress ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:210;
  background:var(--grad-accent);
  transform:scaleX(0);transform-origin:left;pointer-events:none;
}

/* ---------- back to top ---------- */
.to-top{
  position:fixed;left:1.4rem;bottom:1.4rem;z-index:150;
  width:44px;height:44px;border-radius:50%;
  background:var(--glass);border:1px solid var(--glass-line);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--ink);font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-size:1.05rem;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),
    visibility .35s,border-color .3s var(--ease),color .3s var(--ease);
}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{border-color:var(--accent-2);color:var(--accent-2)}
@media(max-width:640px){.to-top{left:1rem;bottom:1rem}}

/* ---------- faq ---------- */
.faq{display:grid;gap:.8rem;max-width:820px}
.faq__item{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;transition:border-color .3s var(--ease);
}
.faq__item[open],.faq__item:hover{border-color:var(--line-2)}
.faq__item summary{
  list-style:none;cursor:none;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.3rem;
  font-family:var(--f-display);font-variation-settings:'wdth' 115;font-weight:600;font-size:1.02rem;color:var(--ink);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__icon{font-family:var(--f-mono);font-variation-settings:'wdth' 82;color:var(--accent-2);flex:none;
  transition:transform .3s var(--ease)}
.faq__item[open] .faq__icon{transform:rotate(45deg)}
.faq__item p{padding:0 1.3rem 1.2rem;color:var(--muted);max-width:65ch}

/* ---------- glow border (vanilla port of shadcn GlowingEffect) ---------- */
[data-glow]{position:relative}
.glow-fx{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  --start:0;--active:0;--glow-spread:40;--glow-bw:2px;
}
.glow-fx::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  border:var(--glow-bw) solid transparent;
  background:
    radial-gradient(circle,#E0562B 10%,#E0562B00 20%),
    radial-gradient(circle at 40% 40%,#B9C4D6 5%,#B9C4D600 15%),
    radial-gradient(circle at 60% 60%,#F08A5D 10%,#F08A5D00 20%),
    radial-gradient(circle at 40% 60%,#7C8798 10%,#7C879800 20%),
    repeating-conic-gradient(from 236.84deg at 50% 50%,
      #E0562B 0%,#B9C4D6 5%,#F08A5D 10%,#7C8798 15%,#E0562B 20%);
  background-attachment:fixed;
  opacity:var(--active);transition:opacity .3s var(--ease);
  mask-clip:padding-box,border-box;
  mask-composite:intersect;
  mask-image:linear-gradient(#0000,#0000),
    conic-gradient(from calc((var(--start) - var(--glow-spread))*1deg),
      #00000000 0deg,#fff,#00000000 calc(var(--glow-spread)*2deg));
  -webkit-mask-clip:padding-box,border-box;
  -webkit-mask-composite:source-in;
  -webkit-mask-image:linear-gradient(#0000,#0000),
    conic-gradient(from calc((var(--start) - var(--glow-spread))*1deg),
      #00000000 0deg,#fff,#00000000 calc(var(--glow-spread)*2deg));
}

/* ---------- glare card (vanilla port of GlareCard tilt + foil) ---------- */
[data-glare][data-glare]{
  --m-x:50%;--m-y:50%;--r-x:0deg;--r-y:0deg;--bg-x:50%;--bg-y:50%;
  --gc-o:0;--gc-dur:.3s;--gc-lift:0px;
  transform:perspective(600px) rotateY(var(--r-x)) rotateX(var(--r-y)) translateY(var(--gc-lift));
  transition:transform var(--gc-dur) ease,border-color .5s var(--ease);
  will-change:transform;
}
[data-glare]:hover{--gc-o:.5}
.member[data-glare]:hover{--gc-lift:-6px}
.glare-shine,.glare-foil{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  opacity:var(--gc-o);transition:opacity .3s ease;
}
.glare-shine{
  mix-blend-mode:soft-light;
  background:radial-gradient(farthest-corner circle at var(--m-x) var(--m-y),
    rgba(255,255,255,.8) 10%,rgba(255,255,255,.65) 20%,rgba(255,255,255,0) 90%);
}
.glare-foil{
  mix-blend-mode:color-dodge;opacity:calc(var(--gc-o)*.5);
  background:
    repeating-linear-gradient(0deg,
      rgb(255,119,115) 5%,rgb(255,237,95) 10%,rgb(168,255,95) 15%,
      rgb(131,255,247) 20%,rgb(120,148,255) 25%,rgb(216,117,255) 30%,
      rgb(255,119,115) 35%) 0% var(--bg-y)/200% 700% no-repeat,
    repeating-linear-gradient(128deg,
      #0e152e 0%,hsl(180,10%,60%) 3.8%,hsl(180,10%,60%) 4.5%,
      hsl(180,10%,60%) 5.2%,#0e152e 10%,#0e152e 12%)
      var(--bg-x) var(--bg-y)/300% no-repeat;
  background-blend-mode:hue,overlay;
}

/* ---------- film grain overlay ---------- */
.grain{
  position:fixed;inset:-100%;z-index:2000;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
  animation:grainShift 7s steps(9) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}
  20%{transform:translate(-8%,4%)}
  40%{transform:translate(5%,-9%)}
  60%{transform:translate(-4%,-6%)}
  80%{transform:translate(9%,7%)}
  100%{transform:translate(0,0)}
}
@media(prefers-reduced-motion:reduce){.grain{animation:none}}

/* ---------- page transition wipe ---------- */
.page-wipe{
  position:fixed;inset:0;z-index:900;pointer-events:none;
  background:linear-gradient(180deg,var(--void-2),var(--void));
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .42s var(--ease);
}
.page-wipe::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1.5px;
  background:var(--grad-accent);opacity:0;transition:opacity .2s .1s;
}
.page-wipe.on{transform:scaleY(1);pointer-events:auto}
.page-wipe.on::before{opacity:1}

/* ---------- footer studio clock ---------- */
.footer__clock{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-size:.72rem;color:var(--muted);letter-spacing:.04em;
}
.footer__clock i{
  width:7px;height:7px;border-radius:50%;background:var(--signal);flex:none;
  box-shadow:0 0 0 0 rgba(255,255,255,.5);animation:clockPulse 2.4s ease infinite;
}
@keyframes clockPulse{70%{box-shadow:0 0 0 8px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
@media(prefers-reduced-motion:reduce){.footer__clock i{animation:none}}

/* ---------- scrollbar ---------- */
html{scrollbar-width:thin;scrollbar-color:var(--panel-2) var(--void)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--void)}
::-webkit-scrollbar-thumb{background:var(--panel-2);border-radius:99px;border:2px solid var(--void)}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}

/* ---------- polish ---------- */
/* Display type is solid bone. The old gradient fade clipped to the text,
   which silently blanked any headline whose lines are transformed (the
   hero) — and a washed-out headline is the opposite of what this brief
   wants. The one place hot-to-cold gradient appears is .strike-text. */
.h-display,.h-1,.h-2{color:var(--bone)}

/* stats: framed panels, gradient numbers */
.stat{border:1px solid var(--line);border-radius:var(--radius)}
.stat b{color:var(--bone)}

/* cards: hairline top highlight */
.svc-card,.member,.faq__item,.step,.teaser,.stat,.map-block,.contact-aside,.form{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

/* nav: a plain hairline once scrolled */
.nav.scrolled{border-bottom-color:var(--line)}

/* form: quiet focus */
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--line-2);
  box-shadow:0 0 0 3px rgba(255,255,255,.05);
}

/* ---------- CTA band: particles + mouse glow ---------- */
.cta-band--particles{--mouse-x:50%;--mouse-y:0px}
.cta-band__particles{position:absolute;inset:0;z-index:0;pointer-events:none}
.cta-band__particles canvas{display:block;width:100%;height:100%}
.cta-band__glow{position:absolute;left:0;top:0;z-index:1;pointer-events:none;
  width:480px;height:480px;margin:-240px;border-radius:50%;
  background:radial-gradient(circle,rgba(224,86,43,.35) 0%,rgba(224,86,43,0) 70%);
  opacity:0;transform:translate(var(--mouse-x),var(--mouse-y));
  transition:opacity .4s var(--ease)}
.cta-band--particles:hover .cta-band__glow{opacity:1}
.cta-band--particles>:not(.cta-band__particles):not(.cta-band__glow){position:relative;z-index:2}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);padding-block:clamp(3rem,6vw,4.5rem);margin-top:2rem}
.footer__top{display:grid;gap:2.5rem}
@media(min-width:820px){.footer__top{grid-template-columns:1.4fr 1fr 1fr}}
.footer__brand .brand{margin-bottom:1rem}
.footer__brand p{color:var(--muted);max-width:34ch;font-size:.92rem}
.footer__col h5{font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:1.1rem}
.footer__col a{display:block;padding:.3em 0;color:var(--muted);font-size:.94rem;transition:color .3s}
.footer__col a:hover{color:var(--ink)}
.footer__bottom{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  align-items:center;margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.footer__bottom small{font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-size:.72rem;color:var(--muted-2);letter-spacing:.04em}
.footer__credit{font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-size:.72rem;color:var(--muted-2)}
.footer__credit b{color:var(--muted);font-weight:500}

/* page hero (interior) */
.page-hero{padding-top:calc(var(--nav-h) + clamp(40px,8vw,90px));
  padding-bottom:clamp(30px,5vw,50px)}
.page-hero h1{margin-block:1rem .8rem}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .marquee__track{animation:none}
  [data-reveal],[data-reveal-stagger]>*{opacity:1!important;transform:none!important}
  .hero h1 .line>span,.hero__eyebrow,.hero__lead,.hero__actions,.hero__scroll{opacity:1!important;animation:none!important}
  .hero h1 .line>span{transform:none!important}
}

/* focus visibility */
:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;z-index:1100;background:var(--accent);color:#fff;
  padding:.7em 1.2em;border-radius:0 0 10px 0;font-family:var(--f-mono);font-variation-settings:'wdth' 82;font-size:.8rem}
.skip:focus{left:0}

/* ============================================================
   MOBILE HARDENING — added for phone reliability
   ============================================================ */

/* kill any accidental horizontal scroll on small screens */
html,body{max-width:100%;overflow-x:hidden}

/* tap targets: make nav + buttons comfortable to press */
@media (max-width:760px){
  :root{--nav-h:64px}

  /* hero text never overflows the viewport */
  .h-display{font-size:clamp(2.3rem,11vw,3.4rem);line-height:1.0}
  .hero h1{margin-bottom:1.2rem}
  .hero__lead,.lead{font-size:1.02rem}

  /* hero actions stack full-width and are easy to tap */
  .hero__actions{flex-direction:column;align-items:stretch;gap:.7rem}
  .hero__actions .btn{justify-content:center;width:100%;padding:1em 1.4em}

  /* disable magnetic transform jitter on touch (no hover anyway) */
  [data-magnetic]{transform:none!important}

  /* section padding a touch tighter */
  .section{padding-block:clamp(56px,14vw,90px)}

  /* page hero spacing under fixed nav */
  .page-hero{padding-top:calc(var(--nav-h) + 70px)}

  /* CTA + form buttons full width */
  .cta-band .btn,.form__foot .btn{width:100%;justify-content:center}
  .form__foot{flex-direction:column;align-items:stretch}
  .form__status{order:2;text-align:center}

  /* hide the floating "scroll" hint on phones (saves space) */
  .hero__scroll{display:none}

  /* contact details easier to read */
  .contact-list .v{font-size:1rem}

  /* ---- HEADER on mobile ---- */
  /* the bar itself: solid backing so links never bleed through */
  .nav{background:rgba(6,6,7,.82);backdrop-filter:blur(12px) saturate(120%);
    -webkit-backdrop-filter:blur(12px) saturate(120%);border-bottom:1px solid var(--line)}
  .nav__inner{gap:1rem}

  /* brand slightly smaller so it always fits next to the toggle */
  .brand{font-size:.98rem;gap:.5rem}
  .brand__mark{width:24px;height:24px;flex:0 0 24px}

  /* bigger, easier-to-tap hamburger */
  .nav__toggle{width:34px;padding:8px 2px;margin:-8px -2px;z-index:210;position:relative}
  .nav__toggle span{height:2px}

  /* mobile menu: clear the header and give the close affordance room */
  .nav__mobile{padding-top:calc(var(--nav-h) + 24px);justify-content:flex-start}
  .nav__mobile a{font-size:clamp(1.8rem,8vw,2.6rem);padding:.22em 0}
}

/* Narrow screens: pull the width axis in rather than only shrinking the
   size. Long compounds — PRIMOPREDAJA, ÜBERGABEN, AUSGELIEFERT — overflow
   at wdth 125 on a 375px screen; condensing keeps the headline big.      */
@media (max-width:600px){
  .h-display{font-size:clamp(1.85rem,9vw,2.7rem);font-variation-settings:'wdth' 94,'wght' 800}
  .h-1{font-size:clamp(1.6rem,7vw,2.2rem);font-variation-settings:'wdth' 96,'wght' 750}
}
@media (max-width:380px){
  .h-display{font-size:clamp(1.7rem,8.4vw,2.3rem);font-variation-settings:'wdth' 88,'wght' 800}
  .nav__cta{display:none}
}
/* last-resort guard so no single long word can ever break the layout */
h1,h2,h3,h4{overflow-wrap:break-word}

/* on touch devices, make the 3D hero lighter (it's decorative) */
@media (hover:none),(pointer:coarse){
  #hero-canvas{opacity:.45}
}

/* ============================================================
   STORM FORGE — layer 2
   Language switcher, hero, struck rules, depth cards.
   Appended last on purpose: these are the overrides.
   ============================================================ */

/* ---------- language switcher ---------- */
.nav__inner{justify-content:flex-start}
.nav__links{margin-left:auto}
.lang--nav{margin-left:.5rem;position:relative}
@media(max-width:759px){.lang--nav{margin-left:auto;margin-right:.25rem}}

.lang__toggle{
  display:flex;align-items:center;gap:.45rem;
  padding:.4rem .55rem;border:1px solid var(--line);border-radius:8px;
  background:rgba(12,13,16,.6);color:var(--ash);
  font-family:var(--f-mono);font-variation-settings:'wdth' 78;
  font-size:.66rem;letter-spacing:.1em;
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease);
}
.lang__toggle:hover,.lang.is-open .lang__toggle{color:var(--bone);border-color:var(--line-2);background:rgba(18,19,24,.85)}
.lang__toggle:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.lang__chev{width:9px;height:6px;opacity:.7;transition:transform .28s var(--ease)}
.lang.is-open .lang__chev{transform:rotate(180deg)}

.lang__flag{
  display:block;width:20px;height:14px;flex:none;border-radius:2px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.22);line-height:0;
}
.lang__flag svg{display:block;width:100%;height:100%}
@media(max-width:759px){.lang--nav .lang__code{display:none}}

.lang__list{
  position:absolute;top:calc(100% + 10px);right:0;z-index:220;min-width:172px;
  display:flex;flex-direction:column;padding:.32rem;
  border:1px solid var(--line-2);border-radius:10px;
  background:rgba(9,9,11,.96);
  backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%);
  box-shadow:0 28px 70px -30px rgba(0,0,0,.9);
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top right;
  transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s;
}
.lang.is-open .lang__list{opacity:1;visibility:visible;transform:none}
.lang__btn{
  display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;
  padding:.52rem .6rem;border-radius:7px;
  font-family:var(--f-mono);font-variation-settings:'wdth' 78;
  font-size:.7rem;color:var(--ash);
  transition:background .22s var(--ease),color .22s var(--ease);
}
.lang__btn:hover{background:rgba(255,255,255,.06);color:var(--bone)}
.lang__btn:focus-visible{outline:2px solid var(--ember);outline-offset:-2px}
.lang__btn.is-on{color:var(--bone);background:rgba(224,86,43,.14)}
.lang__btn.is-on .lang__flag{box-shadow:0 0 0 1px var(--ember)}

/* mobile menu row */
.lang--mobile{display:flex;gap:.5rem;margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.lang--mobile .lang__btn{width:auto;padding:.6rem .8rem;border:1px solid var(--line);border-radius:9px;font-size:.72rem}
@media(min-width:760px){.lang--mobile{display:none}}

/* ---------- hero: centred, with the mark set above the type ---------- */
.hero{min-height:100svh;display:flex;align-items:center}
.hero__inner{text-align:center;padding-top:clamp(84px,15vh,148px);padding-bottom:clamp(40px,6vh,72px)}
.hero__eyebrow{margin-bottom:1.5rem}
.hero__title{margin-bottom:1.35rem;max-width:20ch;margin-inline:auto}
.hero__lead{max-width:52ch;margin-inline:auto;font-size:1.0625rem}
.hero__actions{justify-content:center;gap:.6rem;margin-top:2.2rem}
.hero__title .line > span{will-change:transform}

/* ---------- section heads ---------- */
.sec-head{position:relative;padding-top:1.5rem}
.sec-head::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--line);
}

/* ---------- depth cards ----------
   The tilt is deliberately small now: enough to feel like a surface
   catching light, not enough to read as a toy.                          */
[data-depth]{
  transform-style:preserve-3d;
  transition:transform .45s var(--ease),border-color .45s var(--ease);
  will-change:transform;
}
[data-depth].is-tilting{transition:transform .14s linear,border-color .45s var(--ease)}
.project[data-depth]:hover{border-color:var(--line-2)}
.svc-card[data-depth]:hover{transform:none}

@media (prefers-reduced-motion:reduce){
  [data-depth]{transform:none !important}
  .loader__plate video{display:none}
}


/* ---------- focus: one visible ring everywhere ---------- */
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:3px}
.skip:focus{
  position:fixed;top:12px;left:12px;z-index:1200;
  padding:.7rem 1rem;border-radius:8px;
  background:var(--ember);color:#0b0b0b;
  font-family:var(--f-mono);font-variation-settings:'wdth' 80;font-size:.72rem;
}

/* ---------- cinematic plate on the studio page ---------- */
.page-hero--plate{position:relative;isolation:isolate;padding-bottom:clamp(48px,7vw,86px)}
/* full-bleed out of the centred .wrap container */
.page-hero__plate{
  position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
  z-index:-1;pointer-events:none;overflow:hidden;
}
.page-hero__plate video{
  width:100%;height:100%;object-fit:cover;
  opacity:.16;filter:saturate(1.1) contrast(1.15);
}
.page-hero__plate::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(80% 90% at 22% 50%,var(--iron) 12%,rgba(6,6,7,.72) 55%,transparent 88%),
    linear-gradient(180deg,var(--iron),transparent 30%,transparent 62%,var(--iron));
}
@media (prefers-reduced-motion:reduce){.page-hero__plate{display:none}}

/* ---------- standalone terminal panel (404) ---------- */
.term{
  max-width:560px;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:linear-gradient(180deg,rgba(12,13,16,.9),rgba(6,6,7,.94));
  box-shadow:0 30px 80px -40px rgba(0,0,0,.9);
}
.term__bar{
  display:flex;align-items:center;gap:7px;
  padding:.6rem .8rem;border-bottom:1px solid var(--line);
  background:rgba(18,19,24,.7);
}
.term__dot{width:9px;height:9px;border-radius:50%;flex:none}
.term__dot--r{background:#A93A17}
.term__dot--y{background:var(--ember-hot)}
.term__dot--g{background:var(--arc-deep)}
.term__title{
  margin-inline:auto;font-family:var(--f-mono);font-variation-settings:'wdth' 78;
  font-size:.62rem;letter-spacing:.12em;color:var(--ash-2);
}
.term__body{
  padding:.9rem 1rem;
  font-family:var(--f-mono);font-variation-settings:'wdth' 78;
  font-size:.68rem;line-height:2;color:var(--ash);text-align:left;
}
.term__body .ln{display:block;white-space:pre-wrap;word-break:break-word}
.term__body .ln--cmd{color:var(--bone)}
.term__body .ln--cmd::before{content:"\276F ";color:var(--ember)}
.term__body .ln--out{color:var(--ash-2)}

/* ============================================================
   MINIMAL LAYER — final pass
   Quieter nav, calmer cards, plain link grid.
   ============================================================ */

/* ---------- nav ---------- */
.nav{height:64px}
:root{--nav-h:64px}
.nav.scrolled{background:rgba(6,6,7,.78);backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%)}
.brand{font-family:var(--f-display);font-weight:600;font-size:.98rem;letter-spacing:-.015em;gap:.55rem}
.brand__mark{width:20px;height:20px;flex:0 0 20px}
.brand__mark path{stroke:var(--bone);stroke-width:5}
.brand small{font-family:var(--f-mono);font-variation-settings:'wdth' 78;font-size:.55rem;
  letter-spacing:.18em;color:var(--ash-2)}
.nav__links a{font-family:var(--f-body);font-size:.9rem;letter-spacing:-.005em;color:var(--ash);padding:.45em .7em}
.nav__links a:hover,.nav__links a.active{color:var(--bone)}
.nav__links a.active::before{display:none}

/* ---------- where-to-go-next grid ---------- */
.ways{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
@media(min-width:680px){.ways{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.ways{grid-template-columns:repeat(4,1fr)}}
.way{
  display:flex;flex-direction:column;gap:.7rem;
  background:var(--anvil);padding:1.5rem 1.4rem 1.3rem;
  transition:background .3s var(--ease);
}
.way:hover{background:var(--anvil-2)}
.way__label{
  font-family:var(--f-display);font-weight:600;font-size:1.05rem;
  letter-spacing:-.015em;color:var(--bone);
}
.way p{font-size:.9rem;line-height:1.55;color:var(--ash);flex:1}
.way__go{
  font-family:var(--f-mono);font-variation-settings:'wdth' 78;
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash-2);
  display:inline-flex;align-items:center;gap:.45em;transition:color .3s var(--ease);
}
.way:hover .way__go{color:var(--bone)}
.way .arrow{transition:transform .3s var(--ease)}
.way:hover .arrow{transform:translate(2px,-2px)}

/* ---------- cards: smaller radii, flatter surfaces ---------- */
.svc-card,.member,.faq__item,.step,.teaser,.map-block,.contact-aside,.form,
.project,.location-card,.tcard{border-radius:var(--radius)}
.svc-card:hover,.member:hover{border-color:var(--line-2)}
.svc-card__icon{border-radius:8px;width:40px;height:40px;color:var(--ash)}
.svc-card__icon svg{width:19px;height:19px}
.svc-card:hover .svc-card__icon{transform:none;color:var(--bone)}
.svc-card__n{color:var(--ash-2)}
.svc-card li::before{background:var(--ash-2);width:3px;height:3px;flex-basis:3px}
.project__tag,.member__role{color:var(--ash-2)}
.stat b{font-family:var(--f-display);font-weight:600;font-size:clamp(1.6rem,3vw,2.1rem);letter-spacing:-.03em}
.teaser__n,.orbital-card__cta{color:var(--ash-2)}

/* ---------- footer ---------- */
.footer__hero{display:none}          /* the giant SVG wordmark was shouting */
.footer__col h5{font-family:var(--f-mono);font-variation-settings:'wdth' 78;
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ash-2)}
.footer__col a,.footer__brand p{font-size:.9rem;color:var(--ash)}
.footer__col a:hover{color:var(--bone)}

/* ---------- WhatsApp: a quiet pill, not a green blob ---------- */
.whatsapp-fab{
  background:rgba(12,13,16,.9);border:1px solid var(--line-2);color:var(--bone);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:none;
}
.whatsapp-fab:hover{background:rgba(18,19,24,.95);border-color:var(--line-2)}
.whatsapp-fab__label{font-family:var(--f-body);font-size:.82rem;letter-spacing:-.005em;text-transform:none}
.whatsapp-fab__icon{fill:var(--bone)}

/* ---------- language switcher: match the button language ---------- */
.lang__toggle{border-radius:999px;font-family:var(--f-body);font-size:.82rem;letter-spacing:-.005em}
.lang__btn{font-family:var(--f-body);font-size:.875rem;letter-spacing:-.005em}
.lang__list{border-radius:var(--radius)}
.lang__btn.is-on{background:rgba(255,255,255,.07)}
.lang__btn.is-on .lang__flag{box-shadow:0 0 0 1px var(--line-2)}

/* ---------- section rhythm ---------- */
.section{padding-block:clamp(64px,9vw,116px)}
.section--tight{padding-block:clamp(44px,6vw,76px)}
.page-hero{padding-top:calc(var(--nav-h) + clamp(56px,10vw,110px));padding-bottom:clamp(24px,4vw,40px)}

/* micro-labels: Martian Mono is wide, so hold it narrow and small */
.stat span,.project__year,.project__open,.orbital-card__badge{
  font-variation-settings:'wdth' 75,'wght' 400;
  font-size:.58rem;letter-spacing:.13em;color:var(--ash-2);
}
.project__tag{font-variation-settings:'wdth' 75;font-size:.58rem;letter-spacing:.13em}
.member__tags span{font-variation-settings:'wdth' 75;font-size:.58rem;letter-spacing:.1em}
.svc-card li{font-variation-settings:'wdth' 78;font-size:.72rem;letter-spacing:.02em;color:var(--ash)}
.step b{font-family:var(--f-mono);font-variation-settings:'wdth' 75;font-size:.58rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ash-2)}

/* globe feature: give the copy room to breathe */
.section--globe-feature .globe-feature{gap:clamp(2rem,4vw,3.5rem)}
.section--globe-feature .globe-feature__copy .h-1{margin-top:.9rem}
.section--globe-feature .globe-feature__copy .lead{margin-top:1.1rem}
.split > div > .h-1,.sec-head .h-1{margin-top:.9rem}

/* spec lists read better in the body face — mono here was costume, not signal */
.svc-card li{font-family:var(--f-body);font-size:.875rem;letter-spacing:-.005em;
  color:var(--ash);line-height:1.5}
.svc-card li::before{background:var(--ash-2)}

/* ============================================================
   CLIENT WORK — case rows
   Copy first, then the screenshot full width beneath it. One
   case per screen-ish, so each build gets read rather than
   scanned past in a grid.
   ============================================================ */
.cases{display:flex;flex-direction:column;gap:clamp(72px,11vw,150px)}
.case{position:relative}
.case__head{max-width:64ch}
.case__title{margin-top:.85rem}
.case__desc{margin-top:1rem;max-width:60ch}

.case__stat{
  margin-top:1.15rem;display:inline-flex;align-items:baseline;gap:.5em;flex-wrap:wrap;
  font-size:.9rem;color:var(--ash);
  padding:.5rem .8rem;border:1px solid var(--line);border-radius:999px;
}
.case__stat strong{color:var(--bone);font-weight:600;font-size:.98rem}
.case__stat span{color:var(--ash-2);font-size:.82rem}

.case__meta{
  margin-top:1.6rem;display:flex;flex-wrap:wrap;align-items:center;
  gap:1rem 1.6rem;justify-content:space-between;
}
.case__chips{display:flex;flex-wrap:wrap;gap:.45rem}
.case__chips li{
  font-family:var(--f-mono);font-variation-settings:'wdth' 75;
  font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ash-2);
  padding:.42em .7em;border:1px solid var(--line);border-radius:6px;
}
.case__go{
  display:inline-flex;align-items:center;gap:.45em;flex:none;
  font-family:var(--f-body);font-size:.9375rem;font-weight:500;color:var(--bone);
  padding-bottom:2px;border-bottom:1px solid var(--line-2);
  transition:border-color .25s var(--ease);
}
.case__go:hover{border-color:var(--bone)}
.case__go .arrow{transition:transform .25s var(--ease);opacity:.75}
.case__go:hover .arrow{transform:translate(2px,-2px)}

/* the screenshot: full column width, hairline frame, quiet lift on hover */
.case__art{
  display:block;margin-top:clamp(1.8rem,3.5vw,2.6rem);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--anvil);
  transition:border-color .5s var(--ease),transform .5s var(--ease);
}
.case__art img{
  width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover;object-position:top center;
  transition:transform .8s var(--ease);
}
.case:hover .case__art{border-color:var(--line-2)}
.case:hover .case__art img{transform:scale(1.015)}
@media(min-width:900px){
  /* let the image break past the text column — it is the evidence */
  .case__art{margin-inline:calc(var(--gut) * -0.5)}
}

/* ---------- testimonials: a fanned deck ----------
   Cards sit on one spot and fan out from the active one. Only the card in
   front is interactive and only it carries the voice note, so nothing off
   to the side can start playing under you.
   ---------------------------------------------------------------- */
.section--voices{overflow:hidden;padding-block:clamp(64px,9vw,116px)}
.voices__head{margin-bottom:clamp(2.2rem,5vw,3.4rem);align-items:start}
.voices__head .lead{max-width:46ch}
.voices__head .link-all{align-self:start;margin-top:.4rem;white-space:nowrap}

.reviews__preview{
  margin:0 auto clamp(1.4rem,3vw,2rem);max-width:var(--maxw);
  padding:.6rem .85rem;border-radius:8px;
  border:1px dashed var(--line-2);background:rgba(224,86,43,.06);
  font-family:var(--f-mono);font-variation-settings:'wdth' 75;
  font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);
}

.voices{
  position:relative;height:clamp(380px,46vw,440px);
  perspective:1400px;touch-action:pan-y;cursor:grab;
}
.voices:active{cursor:grabbing}
.voices:focus-visible{outline:none}
.voices:focus-visible .review.is-active{border-color:var(--ember)}

.review{
  position:absolute;top:50%;left:50%;
  width:min(430px,84vw);
  display:flex;flex-direction:column;gap:.9rem;
  padding:1.5rem 1.45rem;
  border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(180deg,var(--anvil-2),var(--anvil));
  box-shadow:0 30px 70px -30px rgba(0,0,0,.95);
  transform-origin:center center;
  transition:transform .55s var(--ease),opacity .45s var(--ease),
             filter .45s var(--ease),border-color .35s var(--ease);
  will-change:transform,opacity;
}
.review.is-active{
  border-color:var(--line-2);
  box-shadow:0 40px 90px -28px rgba(0,0,0,1);
}
.review:not(.is-active){cursor:pointer}

/* attribution sits at the top, the way a recommendation reads */
.review__foot{display:flex;align-items:center;gap:.75rem}
.review__avatar{
  width:38px;height:38px;flex:none;border-radius:50%;
  display:grid;place-items:center;overflow:hidden;
  background:var(--scale);border:1px solid var(--line-2);
  font-family:var(--f-mono);font-variation-settings:'wdth' 78;font-size:.6rem;color:var(--ash);
}
.review__avatar img{width:100%;height:100%;object-fit:cover}
.review__who{min-width:0;flex:1}
.review__who strong{display:block;font-size:.9rem;color:var(--bone);font-weight:600;line-height:1.3}
.review__who span{display:block;font-size:.75rem;color:var(--ash-2);line-height:1.45}
.review__src{
  flex:none;align-self:flex-start;
  font-family:var(--f-mono);font-variation-settings:'wdth' 75;
  font-size:.52rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ash-2);
  padding:.32em .58em;border:1px solid var(--line);border-radius:999px;
}

.review__quote{font-size:.95rem;line-height:1.62;color:var(--bone);flex:1}
.review--voice .review__quote{font-size:.9rem;color:var(--ash)}

/* ---------- the voice note ---------- */
.vnote{
  display:flex;align-items:center;gap:.85rem;margin-top:auto;
  padding:.6rem .7rem;border-radius:999px;
  background:var(--iron);border:1px solid var(--line);
}
.vnote__btn{
  width:36px;height:36px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  background:var(--bone);color:#08080A;
  transition:background .22s var(--ease),transform .22s var(--ease);
}
.vnote__btn:hover{background:#fff;transform:scale(1.05)}
.vnote__btn svg{width:14px;height:14px;fill:currentColor;grid-area:1/1}
.vnote__pause{display:none}
.is-playing .vnote__play{display:none}
.is-playing .vnote__pause{display:block}

.vnote__wave{position:relative;flex:1;min-width:0;height:24px;cursor:pointer}
.vnote__wave:focus-visible{outline:2px solid var(--ember);outline-offset:4px;border-radius:4px}
.vnote__bars{
  position:absolute;inset:0;display:flex;align-items:center;gap:2px;
  width:100%;pointer-events:none;
}
.vnote__bars i{
  flex:1;min-width:1px;border-radius:1px;background:var(--scale);
  transition:background .18s linear;
}
.vnote__bars i.is-lit{background:var(--bone)}
.vnote__time{
  flex:none;font-family:var(--f-mono);font-variation-settings:'wdth' 75;
  font-size:.6rem;color:var(--ash-2);font-variant-numeric:tabular-nums;
  min-width:3.2ch;text-align:right;
}

/* ---------- deck controls ---------- */
.voices__nav{
  display:flex;align-items:center;justify-content:center;gap:1.1rem;
  margin-top:clamp(1.4rem,3vw,2.2rem);
}
.voices__arrow{
  width:38px;height:38px;flex:none;display:grid;place-items:center;
  border:1px solid var(--line-2);border-radius:50%;color:var(--ash);
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}
.voices__arrow:hover{color:var(--bone);background:rgba(255,255,255,.06)}
.voices__arrow svg{width:15px;height:15px}
.voices__dots{display:flex;align-items:center;gap:.45rem}
.voices__dot{
  width:6px;height:6px;border-radius:50%;background:var(--scale);
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.voices__dot:hover{background:var(--ash-2)}
.voices__dot.is-on{background:var(--bone);transform:scale(1.35)}

@media(max-width:560px){
  .voices{height:clamp(400px,120vw,470px)}
  .review{width:min(360px,88vw);padding:1.3rem 1.2rem}
  .vnote{gap:.65rem;padding:.55rem .6rem}
  .vnote__bars{gap:1px}
  .vnote__btn{width:32px;height:32px}
}

@media (prefers-reduced-motion:reduce){
  .review{transition:opacity .15s linear}
  .vnote__btn,.vnote__bars i{transition:none}
}

/* ---------- work CTA ---------- */
.work-cta{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(2rem,5vw,3.2rem);text-align:center;background:var(--anvil);
}
.work-cta p{margin-top:.7rem;font-size:.95rem}
.work-cta__actions{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:1.8rem}

/* ============================================================
   STUDIO ASSISTANT
   Sits above the WhatsApp button. Same surfaces and type as the
   rest of the site — it should read as part of the studio, not a
   third-party widget dropped on top.
   ============================================================ */
.chat-launch{
  position:fixed;right:clamp(14px,3vw,26px);bottom:calc(clamp(14px,3vw,26px) + 62px);
  z-index:300;display:inline-flex;align-items:center;gap:.55rem;
  padding:.62rem .95rem;border-radius:999px;
  background:var(--bone);color:#08080A;border:1px solid var(--bone);
  font-family:var(--f-body);font-size:.875rem;font-weight:500;letter-spacing:-.005em;
  box-shadow:0 12px 34px -14px rgba(0,0,0,.9);
  transition:transform .25s var(--ease),background .25s var(--ease);
}
.chat-launch:hover{transform:translateY(-1px);background:#fff}
.chat-launch__icon{width:17px;height:17px;flex:none}
body.chat-open .chat-launch{opacity:0;pointer-events:none;transform:translateY(6px)}
@media(max-width:520px){
  .chat-launch__label{display:none}
  .chat-launch{padding:.72rem;bottom:calc(clamp(14px,3vw,26px) + 58px)}
}

.chat{
  position:fixed;right:clamp(14px,3vw,26px);bottom:clamp(14px,3vw,26px);z-index:310;
  width:min(384px,calc(100vw - 28px));max-height:min(620px,calc(100dvh - 90px));
  display:flex;flex-direction:column;overflow:hidden;
  background:rgba(9,9,11,.96);
  backdrop-filter:blur(20px) saturate(130%);-webkit-backdrop-filter:blur(20px) saturate(130%);
  border:1px solid var(--line-2);border-radius:14px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95);
  opacity:0;visibility:hidden;transform:translateY(12px) scale(.985);transform-origin:bottom right;
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
}
.chat.is-open{opacity:1;visibility:visible;transform:none}
@media(max-width:520px){
  .chat{right:8px;left:8px;bottom:8px;width:auto;max-height:calc(100dvh - 80px)}
}

.chat__head{
  display:flex;align-items:center;gap:.65rem;flex:none;
  padding:.85rem .9rem;border-bottom:1px solid var(--line);
}
.chat__mark{width:24px;height:24px;flex:none}
.chat__mark svg{width:100%;height:100%;fill:none;stroke:var(--bone);stroke-width:5}
.chat__id{min-width:0;flex:1}
.chat__id strong{display:block;font-family:var(--f-display);font-weight:600;font-size:.9rem;color:var(--bone)}
.chat__id span{display:block;font-size:.72rem;color:var(--ash-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat__clear{
  font-family:var(--f-mono);font-variation-settings:'wdth' 75;
  font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ash-2);
  padding:.35em .55em;border-radius:6px;transition:color .25s,background .25s;
}
.chat__clear:hover{color:var(--bone);background:rgba(255,255,255,.06)}
.chat__close{width:28px;height:28px;flex:none;display:grid;place-items:center;
  border-radius:7px;color:var(--ash);transition:color .25s,background .25s}
.chat__close:hover{color:var(--bone);background:rgba(255,255,255,.06)}
.chat__close svg{width:15px;height:15px}

.chat__log{
  flex:1;min-height:190px;overflow-y:auto;overscroll-behavior:contain;
  padding:1rem .9rem;display:flex;flex-direction:column;gap:.85rem;
  scrollbar-width:thin;
}
.chat__row{display:flex;flex-direction:column;gap:.5rem;max-width:100%}
.chat__row--user{align-items:flex-end}
.chat__msg{
  max-width:86%;padding:.65rem .85rem;border-radius:12px;
  font-size:.875rem;line-height:1.55;
  background:var(--anvil-2);color:var(--ash);border:1px solid var(--line);
}
.chat__msg strong{color:var(--bone);font-weight:600}
.chat__msg a{color:var(--bone);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--line-2);transition:text-decoration-color .25s}
.chat__msg a:hover{text-decoration-color:var(--bone)}
.chat__row--user .chat__msg{
  background:var(--bone);color:#08080A;border-color:var(--bone);border-bottom-right-radius:4px;
}
.chat__row--bot .chat__msg{border-bottom-left-radius:4px}

.chat__chips{display:flex;flex-wrap:wrap;gap:.4rem;max-width:100%}
.chat__chip{
  font-family:var(--f-body);font-size:.8rem;color:var(--ash);
  padding:.42em .7em;border:1px solid var(--line-2);border-radius:999px;
  transition:color .22s,background .22s,border-color .22s;
}
.chat__chip:hover{color:var(--bone);background:rgba(255,255,255,.06)}

.chat__handoff{display:flex;flex-wrap:wrap;gap:.4rem}
.chat__handoff-btn{
  font-family:var(--f-body);font-size:.8rem;font-weight:500;color:#08080A;
  background:var(--bone);padding:.45em .8em;border-radius:999px;
  transition:background .22s;
}
.chat__handoff-btn:hover{background:#fff}

.chat__dots{display:flex;gap:4px;align-items:center;padding:.8rem .85rem}
.chat__dots i{width:5px;height:5px;border-radius:50%;background:var(--ash-2);
  animation:chatDot 1.1s ease-in-out infinite}
.chat__dots i:nth-child(2){animation-delay:.16s}
.chat__dots i:nth-child(3){animation-delay:.32s}
@keyframes chatDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.chat__form{display:flex;gap:.5rem;padding:.75rem .9rem 0;flex:none}
.chat__input{
  flex:1;min-width:0;font-family:var(--f-body);font-size:.875rem;color:var(--bone);
  background:var(--anvil);border:1px solid var(--line-2);border-radius:999px;
  padding:.62em .95em;transition:border-color .25s;
}
.chat__input::placeholder{color:var(--ash-2)}
.chat__input:focus{outline:none;border-color:var(--ash-2)}
.chat__send{
  width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--bone);color:#08080A;transition:background .22s;
}
.chat__send:hover{background:#fff}
.chat__send svg{width:16px;height:16px}
.chat__note{
  flex:none;padding:.6rem .9rem .85rem;
  font-family:var(--f-mono);font-variation-settings:'wdth' 75;
  font-size:.52rem;letter-spacing:.1em;line-height:1.7;color:var(--ash-2);
}

/* the WhatsApp pill steps aside while the panel is open */
body.chat-open .whatsapp-fab{opacity:0;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .chat,.chat-launch{transition:opacity .12s linear}
  .chat__dots i{animation:none;opacity:.6}
}

/* narrow screens: tighten the gap so 42 bars stay legible */
@media(max-width:520px){
  .vnote{gap:.65rem;padding:.6rem .7rem}
  .vnote__bars{gap:1px}
  .vnote__btn{width:34px;height:34px}
}

/* ============================================================
   CLIENTS — real names, real screenshots, real links
   A quiet 4-up strip. The image is a thin window onto the build,
   not a hero; the name does the talking.
   ============================================================ */
.sec-head .link-all{
  align-self:start;justify-self:end;flex:none;
  display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--f-body);font-size:.875rem;color:var(--ash);
  padding-bottom:2px;border-bottom:1px solid transparent;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.sec-head .link-all:hover{color:var(--bone);border-bottom-color:var(--line-2)}
.sec-head .link-all .arrow{transition:transform .25s var(--ease);opacity:.7}
.sec-head .link-all:hover .arrow{transform:translate(2px,-2px)}

.clients{display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
@media(min-width:600px){.clients{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.clients{grid-template-columns:repeat(4,1fr)}}

.client{
  display:flex;flex-direction:column;gap:.55rem;
  padding:1rem 1rem 1.15rem;background:var(--anvil);
  transition:background .3s var(--ease);
}
.client:hover{background:var(--anvil-2)}
.client__art{
  display:block;border-radius:7px;overflow:hidden;
  border:1px solid var(--line);background:var(--iron-2);margin-bottom:.35rem;
}
.client__art img{
  width:100%;height:auto;display:block;aspect-ratio:16/10;
  object-fit:cover;object-position:top center;
  filter:saturate(.75) brightness(.85);
  transition:filter .45s var(--ease),transform .6s var(--ease);
}
.client:hover .client__art img{filter:none;transform:scale(1.02)}
.client__name{font-family:var(--f-display);font-weight:600;font-size:.95rem;
  letter-spacing:-.015em;color:var(--bone);line-height:1.25}
.client__what{
  font-family:var(--f-mono);font-variation-settings:'wdth' 75;
  font-size:.55rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ash-2);
}

/* ---------- narration cards ----------
   The studio talking about its own build. Marked with the studio's own
   glyph rather than a person's initials, and the chip says plainly that
   the voice is synthetic — a listener should never be in doubt about who
   is speaking.
   ---------------------------------------------------------------- */
.review__avatar--mark{background:transparent;border-color:var(--line-2)}
.review__avatar--mark svg{width:17px;height:17px;fill:none;stroke:var(--bone);stroke-width:5}
.review--narration .review__quote{color:var(--bone);font-size:.925rem}
.review__src--narration{
  color:var(--ember);border-color:rgba(224,86,43,.4);
  background:rgba(224,86,43,.08);
}

/* ============================================================
   MOBILE MENU — rebuilt
   Two bars that cross into an X, and a sheet that comes up from
   the bottom the way a phone expects rather than a flat overlay.
   ============================================================ */
.nav__toggle{
  width:42px;height:42px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:12px;
  background:rgba(18,19,24,.6);
  -webkit-tap-highlight-color:transparent;
  transition:border-color .25s var(--ease),background .25s var(--ease);
  padding:0;margin:0;position:relative;z-index:220;
}
.nav__toggle:hover,.nav__toggle.open{border-color:var(--line-2);background:rgba(28,30,36,.85)}
.nav__toggle-box{position:relative;width:17px;height:12px;display:block}
.nav__toggle-box span{
  position:absolute;left:0;width:100%;height:1.5px;border-radius:2px;
  background:var(--bone);
  transition:transform .38s var(--ease-strike),width .38s var(--ease);
}
.nav__toggle-box span:nth-child(1){top:0}
.nav__toggle-box span:nth-child(2){bottom:0;width:64%}
.nav__toggle.open .nav__toggle-box span:nth-child(1){transform:translateY(5.25px) rotate(45deg)}
.nav__toggle.open .nav__toggle-box span:nth-child(2){width:100%;transform:translateY(-5.25px) rotate(-45deg)}
@media(min-width:760px){.nav__toggle{display:none}}

/* the sheet */
.nav__mobile{
  position:fixed;inset:0;z-index:190;
  background:rgba(6,6,7,.92);
  backdrop-filter:blur(26px) saturate(140%);-webkit-backdrop-filter:blur(26px) saturate(140%);
  display:flex;flex-direction:column;justify-content:flex-end;
  gap:0;padding:0 var(--gut) calc(env(safe-area-inset-bottom,0px) + 2rem);
  opacity:0;visibility:hidden;
  transition:opacity .34s var(--ease),visibility .34s;
}
.nav__mobile.open{opacity:1;visibility:visible}
.nav__mobile a{
  position:relative;display:flex;align-items:center;gap:.9rem;
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.5rem,7vw,2rem);letter-spacing:-.025em;line-height:1;
  color:var(--bone);padding:.62em 0;
  border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(18px);
}
.nav__mobile a:last-of-type{border-bottom:none}
.nav__mobile.open a{
  opacity:1;transform:none;
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
}
.nav__mobile.open a:nth-of-type(1){transition-delay:.06s}
.nav__mobile.open a:nth-of-type(2){transition-delay:.11s}
.nav__mobile.open a:nth-of-type(3){transition-delay:.16s}
.nav__mobile.open a:nth-of-type(4){transition-delay:.21s}
.nav__mobile.open a:nth-of-type(5){transition-delay:.26s}
.nav__mobile.open a:nth-of-type(6){transition-delay:.31s}

/* a small ember dot that slides in on the active/pressed item */
.nav__mobile-i{
  width:6px;height:7px;flex:none;background:var(--ember);
  clip-path:polygon(50% 0,100% 100%,0 100%);
  opacity:.32;transform:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.nav__mobile a:hover .nav__mobile-i,
.nav__mobile a:focus-visible .nav__mobile-i,
.nav__mobile a.is-current .nav__mobile-i{opacity:1;transform:scale(1.2)}
.nav__mobile a.is-current{color:var(--bone)}
.nav__mobile a:not(.is-current){color:var(--ash)}

.lang--mobile{
  display:flex;gap:.5rem;order:99;
  margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line);
  opacity:0;transform:translateY(14px);
}
.nav__mobile.open .lang--mobile{
  opacity:1;transform:none;
  transition:opacity .5s var(--ease-out) .36s,transform .5s var(--ease-out) .36s;
}
@media(min-width:760px){.lang--mobile{display:none}}

/* stop the page scrolling behind the sheet */
body.nav-open{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .nav__mobile a,.nav__toggle-box span,.lang--mobile{transition-duration:.01ms}
}

/* the signal mesh sits behind everything, above the flat black */
.mesh{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  opacity:0;animation:meshIn 1.4s var(--ease) .3s forwards;
}
@keyframes meshIn{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.mesh{animation:none;opacity:1}}

/* ============================================================
   STUDIO PAGE
   The roster is the argument, so it gets display-size treatment.
   ============================================================ */
.studio-hero{
  padding-top:calc(var(--nav-h) + clamp(64px,12vw,124px));
  padding-bottom:clamp(32px,5vw,52px);
}
.studio-hero__title{margin-top:1rem;max-width:16ch}
.studio-hero__lead{margin-top:1.4rem;max-width:62ch}

.studio-hero__facts{
  display:grid;gap:1px;background:var(--line);margin-top:clamp(2.4rem,5vw,3.4rem);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  grid-template-columns:repeat(2,1fr);
}
@media(min-width:760px){.studio-hero__facts{grid-template-columns:repeat(4,1fr)}}
.fact{background:var(--anvil);padding:1.15rem 1.2rem}
.fact b{
  display:block;font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.03em;color:var(--bone);
}
.fact span{
  display:block;margin-top:.35rem;
  font-family:var(--f-mono);font-variation-settings:'wdth' 75;
  font-size:.55rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ash-2);
}

/* ---------- roster ---------- */
.roster{list-style:none;display:flex;flex-direction:column;margin:0;padding:0}
.person{
  display:grid;gap:1.1rem;align-items:start;
  padding:clamp(1.8rem,4vw,2.6rem) 0;
  border-top:1px solid var(--line);
  grid-template-columns:1fr;
}
.person:last-child{border-bottom:1px solid var(--line)}
@media(min-width:720px){.person{grid-template-columns:clamp(90px,11vw,140px) 1fr;gap:clamp(1.6rem,4vw,3rem)}}

.person__mark{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(3.4rem,9vw,6.4rem);line-height:.8;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1px var(--line-2);
  transition:color .45s var(--ease),-webkit-text-stroke-color .45s var(--ease);
  display:block;
}
.person:hover .person__mark{color:var(--ember);-webkit-text-stroke-color:transparent}

.person__name{font-size:clamp(1.4rem,2.6vw,1.9rem);letter-spacing:-.025em}
.person__role{
  margin-top:.3rem;
  font-family:var(--f-mono);font-variation-settings:'wdth' 75;
  font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ember);
}
.person__what{margin-top:.9rem;font-size:.95rem;line-height:1.6;color:var(--ash);max-width:60ch}
.person__tags{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.1rem;padding:0}
.person__tags li{
  font-family:var(--f-mono);font-variation-settings:'wdth' 75;
  font-size:.55rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ash-2);
  padding:.4em .65em;border:1px solid var(--line);border-radius:6px;
}

/* ---------- the handoff chain ---------- */
.chain{display:flex;flex-direction:column;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.chain__row{background:var(--anvil);padding:clamp(1.4rem,3vw,2rem)}
.chain__row--us{background:var(--anvil-2)}
.chain__label{
  font-family:var(--f-mono);font-variation-settings:'wdth' 75;
  font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash-2);
}
.chain__row--us .chain__label{color:var(--ember)}
.chain__steps{
  list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .35rem;
  margin:.9rem 0 0;padding:0;
}
.chain__steps li{
  font-family:var(--f-body);font-size:.85rem;color:var(--ash);
  padding:.42em .8em;border:1px solid var(--line-2);border-radius:999px;white-space:nowrap;
}
.chain__steps li + li::before{
  content:"";display:inline-block;width:12px;height:1px;background:var(--line-2);
  margin-right:.8em;vertical-align:middle;margin-left:-.35em;
}
.chain__steps li.is-break{
  color:var(--ash-2);border-style:dashed;border-color:rgba(224,86,43,.4);
}
.chain__row--us .chain__steps li{color:var(--bone);border-color:var(--line-2)}
.chain__note{margin-top:1rem;font-size:.875rem;color:var(--ash-2);max-width:64ch}
.chain__row--us .chain__note{color:var(--ash)}

/* ---------- rules ---------- */
.rules{display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
@media(min-width:680px){.rules{grid-template-columns:repeat(2,1fr)}}
.rule{background:var(--anvil);padding:clamp(1.4rem,3vw,1.9rem);transition:background .3s var(--ease)}
.rule:hover{background:var(--anvil-2)}
.rule h4{font-size:1.05rem;letter-spacing:-.02em}
.rule p{margin-top:.6rem;font-size:.9rem;line-height:1.6;color:var(--ash)}