/* ==========================================================================
   NEXUS SOFTWORKS - main.css
   Aesthetic: "Baltic Night" - deep pine ink, Baltic amber, aurora mint.

   MOTION POLICY: this stylesheet deliberately contains NO
   `prefers-reduced-motion` overrides, and app.js force-enables transitions.
   Animation stays ON even when the operating system has animations switched
   off (Windows Settings > Accessibility > Visual effects > Animation effects).
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root{
  --ink-950:#040908;
  --ink-900:#060D0C;
  --ink-850:#08110F;
  --ink-800:#0B1614;
  --ink-750:#0E1C1A;
  --ink-700:#12221F;
  --ink-600:#193029;

  --line:rgba(160,214,200,.10);
  --line-soft:rgba(160,214,200,.06);
  --line-amber:rgba(240,169,59,.22);

  --chalk:#E9F3EF;
  --chalk-dim:#C6D6D1;
  --fog:#93AAA4;
  --fog-deep:#6B837D;

  --amber:#F0A93B;
  --amber-hi:#FFD08A;
  --amber-deep:#C97D19;
  --mint:#3FE0B0;
  --mint-deep:#0F6B57;
  --mint-dim:#1B7A63;

  --f-display:'Bricolage Grotesque',Georgia,serif;
  --f-body:'Instrument Sans',-apple-system,'Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;

  --shell:1240px;
  --gutter:clamp(20px,4vw,48px);
  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:32px;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  --nav-h:76px;
}

*,*::before,*::after{box-sizing:border-box;}
*{margin:0;padding:0;}

html{-webkit-text-size-adjust:100%;color-scheme:dark;overflow-x:clip;}

body{
  font-family:var(--f-body);
  background:var(--ink-900);
  color:var(--chalk);
  font-size:clamp(15.5px,.55vw + 14px,17px);
  line-height:1.65;
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  position:relative;
}

/* ---------- 2. AMBIENCE -------------------------------------------------- */
body::before{
  content:"";
  position:fixed;inset:-10%;
  background-image:radial-gradient(circle at 1px 1px, rgba(160,214,200,.15) 1px, transparent 0);
  background-size:34px 34px;
  opacity:.45;pointer-events:none;z-index:0;
  animation:gridDrift 44s linear infinite;
  -webkit-mask-image:radial-gradient(ellipse 92% 74% at 50% 26%, #000 18%, transparent 78%);
  mask-image:radial-gradient(ellipse 92% 74% at 50% 26%, #000 18%, transparent 78%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:9000;pointer-events:none;
  opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 5.5s steps(6) infinite;
}
@keyframes gridDrift{to{background-position:34px 34px;}}
@keyframes grainShift{
  0%{transform:translate(0,0)}   16%{transform:translate(-2%,1%)}
  33%{transform:translate(1%,-2%)}50%{transform:translate(-1%,2%)}
  66%{transform:translate(2%,1%)} 83%{transform:translate(-2%,-1%)}
  100%{transform:translate(0,0)}
}

.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.aurora span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.30;will-change:transform;}
.aurora span:nth-child(1){width:46vw;height:46vw;left:-12vw;top:-10vh;background:radial-gradient(circle,#0F6B57,transparent 66%);animation:drift1 26s var(--ease-in-out) infinite;}
.aurora span:nth-child(2){width:38vw;height:38vw;right:-8vw;top:6vh;background:radial-gradient(circle,#B4731A,transparent 66%);opacity:.24;animation:drift2 32s var(--ease-in-out) infinite;}
.aurora span:nth-child(3){width:52vw;height:52vw;left:26vw;bottom:-26vh;background:radial-gradient(circle,#0C4C6B,transparent 68%);opacity:.20;animation:drift3 38s var(--ease-in-out) infinite;}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(9vw,7vh,0) scale(1.16)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1.08)}50%{transform:translate3d(-8vw,10vh,0) scale(.9)}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-11vw,-8vh,0) scale(1.2)}}

/* ---------- 3. TYPE ------------------------------------------------------ */
h1,h2,h3,h4,h5{
  font-family:var(--f-display);font-weight:700;line-height:1.03;
  letter-spacing:-.035em;font-variation-settings:'wdth' 92;text-wrap:balance;
}
h1{font-size:clamp(2.6rem,5.5vw,4.85rem);}
h2{font-size:clamp(2rem,4vw,3.5rem);}
h3{font-size:clamp(1.3rem,1.7vw,1.68rem);letter-spacing:-.022em;}
h4{font-size:1.08rem;letter-spacing:-.012em;}
p{text-wrap:pretty;}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
ul,ol{list-style:none;}
button,input,textarea,select{font:inherit;color:inherit;}
::selection{background:var(--amber);color:#0A0F0E;}

.mono{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500;}
.amber{color:var(--amber);}
.mint{color:var(--mint);}
.muted{color:var(--fog);}

.grad{
  background:linear-gradient(98deg,#FFE7C2 0%,#FFC873 26%,var(--amber) 58%,#E08F22 100%);
  background-size:210% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:gradPan 9s var(--ease-in-out) infinite;
}
@keyframes gradPan{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ---------- 4. LAYOUT ---------------------------------------------------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter);position:relative;z-index:2;}
main{position:relative;z-index:2;}
section{position:relative;}
.band{padding-block:clamp(70px,9vw,138px);}
.band-tight{padding-block:clamp(50px,6vw,86px);}

.eyebrow{display:inline-flex;align-items:center;gap:.7rem;color:var(--fog);margin-bottom:1.3rem;}
.eyebrow .ring{position:relative;width:16px;height:16px;flex:none;border-radius:50%;}
.eyebrow .ring::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,var(--amber) 90deg,transparent 190deg);
  animation:spin 3.4s linear infinite;}
.eyebrow .ring::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--ink-900);
  box-shadow:0 0 0 1px rgba(240,169,59,.35), inset 0 0 6px rgba(240,169,59,.5);}
@keyframes spin{to{transform:rotate(360deg)}}

.sec-head{max-width:64ch;margin-bottom:clamp(36px,4.5vw,62px);}
.sec-head p{color:var(--fog);margin-top:1.05rem;font-size:1.04rem;max-width:58ch;}

.rule{height:1px;width:100%;border:0;position:relative;
  background:linear-gradient(90deg,transparent,var(--line-amber) 18%,var(--line-amber) 82%,transparent);}
.rule::after{content:"";position:absolute;top:-1px;left:-15%;width:120px;height:3px;
  background:linear-gradient(90deg,transparent,var(--amber),transparent);filter:blur(1px);
  animation:runner 7s var(--ease-in-out) infinite;}
@keyframes runner{0%{left:-15%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}

/* ---------- 5. BUTTONS --------------------------------------------------- */
.btn{
  --bg:transparent;--fg:var(--chalk);--bd:var(--line);
  position:relative;display:inline-flex;align-items:center;gap:.6rem;
  padding:.92rem 1.55rem;border-radius:100px;background:var(--bg);color:var(--fg);
  border:1px solid var(--bd);font-weight:600;font-size:.93rem;
  cursor:pointer;overflow:hidden;isolation:isolate;white-space:nowrap;
  transition:transform .5s var(--ease-spring),color .35s ease,border-color .35s ease,box-shadow .5s var(--ease-out);
}
.btn svg{width:15px;height:15px;flex:none;transition:transform .45s var(--ease-out);}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,var(--amber-hi),var(--amber) 55%,var(--mint));
  transform:translateY(101%);transition:transform .55s var(--ease-out);}
.btn:hover::before{transform:translateY(0);}
.btn:hover{color:#07110F;border-color:transparent;box-shadow:0 14px 40px -12px rgba(240,169,59,.55);}
.btn:hover svg{transform:translateX(4px);}
.btn:active{transform:scale(.97);}

.btn-primary{background:linear-gradient(100deg,var(--amber-hi),var(--amber) 60%,#E9963A);color:#07110F;
  border-color:transparent;box-shadow:0 12px 34px -14px rgba(240,169,59,.7);}
.btn-primary::before{background:linear-gradient(100deg,var(--mint),#7CF0CE);}
.btn-primary:hover{color:#04120E;box-shadow:0 16px 44px -12px rgba(63,224,176,.55);}
.btn-ghost{border-color:var(--line);background:rgba(233,243,239,.02);backdrop-filter:blur(8px);}
.btn-sm{padding:.62rem 1.1rem;font-size:.84rem;}

.tlink{position:relative;display:inline-flex;align-items:center;gap:.45rem;color:var(--amber);font-weight:600;}
.tlink::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:100%;background:currentColor;
  transform-origin:right;transform:scaleX(0);transition:transform .45s var(--ease-out);}
.tlink:hover::after{transform-origin:left;transform:scaleX(1);}
.tlink svg{width:13px;height:13px;transition:transform .4s var(--ease-out);}
.tlink:hover svg{transform:translate(3px,-3px);}

/* ---------- 6. BOOT SCREEN ----------------------------------------------- */
.boot{position:fixed;inset:0;z-index:10000;background:var(--ink-950);display:grid;place-items:center;
  transition:opacity .7s var(--ease-out),visibility .7s;}
.boot.done{opacity:0;visibility:hidden;}
.boot-inner{display:flex;flex-direction:column;align-items:center;gap:1.5rem;}
.boot svg{width:64px;height:64px;overflow:visible;}
.boot .bar{width:180px;height:2px;background:var(--ink-700);overflow:hidden;border-radius:2px;}
.boot .bar i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--amber),var(--mint));animation:bootBar 1s var(--ease-out) forwards;}
@keyframes bootBar{to{transform:scaleX(1)}}
.boot .cap{color:var(--fog-deep);}

/* ---------- 7. PROGRESS + CURSOR ----------------------------------------- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:9500;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--amber),var(--mint));box-shadow:0 0 14px rgba(240,169,59,.6);pointer-events:none;}
.cursor,.cursor-dot{position:fixed;top:0;left:0;z-index:9600;pointer-events:none;border-radius:50%;
  mix-blend-mode:screen;will-change:transform;opacity:0;transition:opacity .4s ease,width .35s var(--ease-out),height .35s var(--ease-out),background .35s ease;}
.cursor{width:34px;height:34px;border:1px solid rgba(240,169,59,.55);}
.cursor-dot{width:5px;height:5px;background:var(--amber);}
body.has-cursor .cursor,body.has-cursor .cursor-dot{opacity:1;}
body.cursor-lg .cursor{width:62px;height:62px;background:rgba(240,169,59,.10);border-color:rgba(240,169,59,.85);}

/* ---------- 8. NAV ------------------------------------------------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:900;height:var(--nav-h);display:flex;align-items:center;
  border-bottom:1px solid transparent;
  transition:background .45s ease,border-color .45s ease,height .45s var(--ease-out);}
.nav.stuck{background:rgba(6,13,12,.74);backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);border-bottom-color:var(--line);height:64px;}
.nav .shell{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;}

.brand{display:flex;align-items:center;gap:.72rem;flex:none;}
.brand svg{width:36px;height:36px;overflow:visible;}
.brand-txt{display:flex;flex-direction:column;line-height:1;}
.brand-txt b{font-family:var(--f-display);font-size:1.02rem;font-weight:700;letter-spacing:-.022em;font-variation-settings:'wdth' 88;}
.brand-txt span{font-family:var(--f-mono);font-size:.53rem;letter-spacing:.34em;color:var(--fog-deep);text-transform:uppercase;margin-top:3px;}

.menu{display:flex;align-items:center;gap:.3rem;}
.menu > a,.menu .has-sub > a{position:relative;padding:.5rem .8rem;border-radius:8px;font-size:.9rem;font-weight:500;
  color:var(--chalk-dim);transition:color .3s ease;display:inline-flex;align-items:center;gap:.35rem;}
.menu > a::after,.menu .has-sub > a::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.28rem;height:1px;
  background:var(--amber);transform:scaleX(0);transform-origin:right;transition:transform .42s var(--ease-out);}
.menu > a:hover,.menu .has-sub > a:hover{color:var(--chalk);}
.menu > a:hover::after,.menu .has-sub:hover > a::after,
.menu .has-sub.open > a::after{transform:scaleX(1);transform-origin:left;}
.menu .has-sub.open > a{color:var(--chalk);}
.menu a.on{color:var(--amber);}
.menu > a.on::after{transform:scaleX(1);}
.menu .caret{width:9px;height:9px;transition:transform .35s var(--ease-out);}
.has-sub:hover .caret,.has-sub.open .caret{transform:rotate(180deg);}

.has-sub{position:relative;}
.has-sub::before{content:"";position:absolute;top:100%;left:50%;
  transform:translateX(-50%);width:340px;height:20px;
  opacity:0;pointer-events:none;}
.has-sub:hover::before,.has-sub:focus-within::before,.has-sub.open::before{pointer-events:auto;}
.sub{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-8px);
  width:340px;padding:.55rem;background:rgba(9,20,18,.95);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 26px 60px -22px rgba(0,0,0,.9);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .35s var(--ease-out),transform .35s var(--ease-out),visibility .35s;}
.has-sub:hover .sub,.has-sub:focus-within .sub,.has-sub.open .sub{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.sub a{display:flex;gap:.75rem;align-items:flex-start;padding:.68rem .78rem;border-radius:10px;transition:background .3s ease;}
.sub a:hover{background:rgba(240,169,59,.08);}
.sub a i{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  background:rgba(240,169,59,.10);border:1px solid var(--line-amber);color:var(--amber);font-style:normal;}
.sub a i svg{width:15px;height:15px;}
.sub a b{display:block;font-size:.9rem;font-weight:600;color:var(--chalk);}
.sub a small{display:block;font-size:.76rem;color:var(--fog);line-height:1.45;}

.burger{display:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--line);
  background:rgba(233,243,239,.03);cursor:pointer;place-items:center;}
.burger span{display:block;width:17px;height:1.5px;background:var(--chalk);border-radius:2px;
  transition:transform .4s var(--ease-out),opacity .3s;}
.burger span+span{margin-top:4.5px;}
body.menu-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg);}
body.menu-open .burger span:nth-child(2){opacity:0;}
body.menu-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.drawer{position:fixed;inset:var(--nav-h) 0 0;z-index:880;background:rgba(5,11,10,.97);
  backdrop-filter:blur(22px);padding:2rem var(--gutter) 3rem;display:flex;flex-direction:column;gap:.1rem;
  opacity:0;visibility:hidden;transform:translateY(-12px);overflow-y:auto;
  transition:opacity .4s var(--ease-out),transform .4s var(--ease-out),visibility .4s;}
body.menu-open .drawer{opacity:1;visibility:visible;transform:translateY(0);}
body.menu-open{overflow:hidden;}
.drawer a{font-family:var(--f-display);font-size:1.6rem;font-weight:600;letter-spacing:-.03em;
  padding:.6rem 0;border-bottom:1px solid var(--line-soft);opacity:0;transform:translateY(14px);}
body.menu-open .drawer a{animation:drawerIn .55s var(--ease-out) forwards;}
@keyframes drawerIn{to{opacity:1;transform:translateY(0)}}
.drawer .btn{margin-top:1.5rem;align-self:flex-start;}

/* ---------- 9. HERO ------------------------------------------------------ */
.hero{padding-top:calc(var(--nav-h) + clamp(46px,7vw,96px));padding-bottom:clamp(56px,7vw,110px);overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(32px,4vw,66px);align-items:center;}
.hero h1{margin-bottom:1.5rem;}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;}
.hero h1 .w > i{display:inline-block;font-style:normal;transform:translateY(105%);
  animation:wordUp .95s var(--ease-out) forwards;}
@keyframes wordUp{to{transform:translateY(0)}}
.hero h1 .w > i.grad{animation:wordUp .95s var(--ease-out) forwards, gradPan 9s var(--ease-in-out) infinite;}
.hero-lede{font-size:clamp(1.02rem,1.15vw,1.16rem);color:var(--fog);max-width:52ch;margin-bottom:2.1rem;}
.hero-cta{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center;}

.pill{display:inline-flex;align-items:center;gap:.6rem;padding:.42rem .9rem .42rem .55rem;
  border:1px solid var(--line);border-radius:100px;background:rgba(233,243,239,.03);
  backdrop-filter:blur(8px);margin-bottom:1.6rem;color:var(--chalk-dim);font-size:.79rem;}
.pill .dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--mint);flex:none;margin-left:.25rem;}
.pill .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--mint);
  animation:ping 2.1s var(--ease-out) infinite;}
@keyframes ping{0%{transform:scale(1);opacity:.75}70%,100%{transform:scale(3.2);opacity:0}}

.hero-meta{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--line-soft);}
.hero-meta div b{display:block;font-family:var(--f-display);font-size:1.5rem;font-weight:700;letter-spacing:-.03em;}
.hero-meta div span{color:var(--fog-deep);font-size:.74rem;}

.art{position:relative;}
.art svg{width:100%;height:auto;overflow:visible;}

/* floating micro-chips around art */
.chip{position:absolute;display:inline-flex;align-items:center;gap:.42rem;
  padding:.4rem .7rem;border-radius:9px;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.13em;
  text-transform:uppercase;background:rgba(9,20,18,.82);border:1px solid var(--line);
  backdrop-filter:blur(10px);color:var(--chalk-dim);white-space:nowrap;z-index:3;
  box-shadow:0 12px 28px -16px rgba(0,0,0,.9);}
.chip s{width:5px;height:5px;border-radius:50%;background:var(--amber);text-decoration:none;flex:none;}
.chip.m s{background:var(--mint);}
.chip.f1{top:6%;right:-2%;animation:float1 7s var(--ease-in-out) infinite;}
.chip.f2{bottom:14%;left:-5%;animation:float2 8.5s var(--ease-in-out) infinite;}
.chip.f3{bottom:-2%;right:12%;animation:float3 6.5s var(--ease-in-out) infinite;}
@keyframes float1{0%,100%{transform:translateY(0) rotate(1.5deg)}50%{transform:translateY(-14px) rotate(-1deg)}}
@keyframes float2{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(12px) rotate(1.5deg)}}
@keyframes float3{0%,100%{transform:translate(0,0)}50%{transform:translate(9px,-9px)}}
/* inner pages: the scenes are denser, so the chips sit just outside the frame */
.svc-hero .chip.f1{top:-3%;right:-2%;}
.svc-hero .chip.f2{bottom:-5%;left:-2%;}

/* ---------- 10. SVG ILLUSTRATION PRIMITIVES ------------------------------ */
.dash{stroke-dasharray:5 7;animation:dashRun 2.6s linear infinite;}
@keyframes dashRun{to{stroke-dashoffset:-48}}
.draw{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);
  animation:drawIn 2.4s var(--ease-out) forwards;}
@keyframes drawIn{to{stroke-dashoffset:0}}
.pulseNode{animation:nodePulse 2.8s var(--ease-in-out) infinite;transform-box:fill-box;transform-origin:center;}
@keyframes nodePulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.32);opacity:.62}}
.orbit{transform-box:fill-box;transform-origin:center;animation:spin 26s linear infinite;}
.orbit-rev{transform-box:fill-box;transform-origin:center;animation:spin 34s linear infinite reverse;}
.bob{animation:bob 4.6s var(--ease-in-out) infinite;transform-box:fill-box;transform-origin:center;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.blink{animation:blink 2.2s steps(1) infinite;}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.18}}
.flow{offset-rotate:0deg;animation:flowPath 4.4s linear infinite;}
@keyframes flowPath{0%{offset-distance:0%;opacity:0}10%{opacity:1}90%{opacity:1}100%{offset-distance:100%;opacity:0}}
.sheen{animation:sheen 5s var(--ease-in-out) infinite;}
@keyframes sheen{0%,100%{opacity:.15}50%{opacity:.55}}
.riseBar{transform-box:fill-box;transform-origin:bottom;animation:riseBar 3.6s var(--ease-in-out) infinite alternate;}
@keyframes riseBar{from{transform:scaleY(.34)}to{transform:scaleY(1)}}
.tick{animation:tick 3s steps(1) infinite;}
.growX{transform-box:fill-box;transform-origin:left center;
  animation:growX 1s var(--ease-out) backwards;}
@keyframes growX{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:.38}}
@keyframes tick{0%,32%{opacity:0}33%,100%{opacity:1}}

/* ---------- 11. MARQUEE -------------------------------------------------- */
.marquee{position:relative;overflow:hidden;padding-block:1.05rem;
  border-block:1px solid var(--line-soft);background:rgba(8,17,15,.55);}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:17%;z-index:2;pointer-events:none;}
.marquee::before{left:0;background:linear-gradient(90deg,var(--ink-900),transparent);}
.marquee::after{right:0;background:linear-gradient(270deg,var(--ink-900),transparent);}
.mq-track{display:flex;width:max-content;animation:mqRun 34s linear infinite;}
.marquee:hover .mq-track{animation-play-state:paused;}
@keyframes mqRun{to{transform:translateX(-50%)}}
.mq-track span{display:inline-flex;align-items:center;gap:.8rem;padding-inline:1.5rem;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fog);}
.mq-track span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--amber-deep);}

/* ---------- 12. CARDS / SURFACES ----------------------------------------- */
.surface{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(165deg,rgba(18,34,31,.7),rgba(8,17,15,.55));
  backdrop-filter:blur(6px);overflow:hidden;}

/* spotlight follows pointer, set via --mx/--my in JS */
.spot::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(240,169,59,.13), transparent 62%);
  transition:opacity .45s ease;}
.spot:hover::before{opacity:1;}

/* corner brackets */
.brk::after{content:"";position:absolute;top:14px;right:14px;width:16px;height:16px;
  border-top:1px solid var(--line-amber);border-right:1px solid var(--line-amber);
  opacity:.5;transition:width .45s var(--ease-out),height .45s var(--ease-out),opacity .45s ease;}
.brk:hover::after{width:30px;height:30px;opacity:1;}

/* service card */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.6vw,22px);}
.svc{display:flex;flex-direction:column;padding:clamp(24px,2.4vw,34px);min-height:100%;
  transition:transform .6s var(--ease-out),border-color .5s ease,box-shadow .6s var(--ease-out);}
.svc:hover{transform:translateY(-8px);border-color:var(--line-amber);
  box-shadow:0 34px 70px -34px rgba(0,0,0,.95),0 0 0 1px rgba(240,169,59,.08);}
.svc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.7rem;position:relative;z-index:1;}
.svc-ico{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;flex:none;
  background:linear-gradient(150deg,rgba(240,169,59,.16),rgba(63,224,176,.07));
  border:1px solid var(--line-amber);}
.svc-ico svg{width:30px;height:30px;overflow:visible;}
.svc-no{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.2em;color:var(--fog-deep);}
.svc h3{margin-bottom:.6rem;position:relative;z-index:1;}
.svc > p{color:var(--fog);font-size:.95rem;margin-bottom:1.4rem;position:relative;z-index:1;}
.svc ul{display:flex;flex-direction:column;gap:.55rem;margin-bottom:1.8rem;position:relative;z-index:1;}
.svc li{display:flex;gap:.6rem;font-size:.87rem;color:var(--chalk-dim);align-items:flex-start;}
.svc li svg{width:14px;height:14px;flex:none;margin-top:.36rem;color:var(--mint);}
.svc-foot{margin-top:auto;padding-top:1.3rem;border-top:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;position:relative;z-index:1;}
.price{font-family:var(--f-display);font-size:1.75rem;font-weight:700;letter-spacing:-.035em;}
.price small{font-family:var(--f-body);font-size:.7rem;font-weight:500;color:var(--fog-deep);
  display:block;letter-spacing:.06em;text-transform:uppercase;margin-top:2px;}
.svc-go{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;
  border:1px solid var(--line);color:var(--chalk);
  transition:background .45s var(--ease-out),color .45s ease,transform .5s var(--ease-spring),border-color .4s;}
.svc-go svg{width:15px;height:15px;transition:transform .45s var(--ease-out);}
.svc:hover .svc-go{background:var(--amber);color:#07110F;border-color:transparent;transform:rotate(-45deg);}

/* ---------- 13. STATS ---------------------------------------------------- */
.stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden;}
.stat{background:rgba(8,17,15,.72);padding:clamp(20px,2.2vw,30px);text-align:left;position:relative;}
.stat b{display:block;font-family:var(--f-display);font-size:clamp(1.9rem,3vw,2.7rem);font-weight:700;
  letter-spacing:-.04em;line-height:1;margin-bottom:.45rem;}
.stat span{color:var(--fog);font-size:.83rem;}
.stat::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--amber),transparent);transition:width 1.4s var(--ease-out);}
.stat.in::after{width:100%;}

/* ---------- 14. PROCESS -------------------------------------------------- */
.proc{--pg:clamp(14px,1.6vw,22px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--pg);position:relative;}
.proc::before{content:"";position:absolute;top:27px;left:27px;
  right:calc((100% - 3 * var(--pg)) / 4 - 27px);height:1px;
  background:repeating-linear-gradient(90deg,var(--line-amber) 0 6px,transparent 6px 12px);z-index:0;}
.step{position:relative;z-index:1;}
.step i{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  font-family:var(--f-mono);font-size:.82rem;font-weight:700;color:var(--amber);
  background:var(--ink-850);border:1px solid var(--line-amber);margin-bottom:1.1rem;
  transition:transform .55s var(--ease-spring),background .4s,color .4s;}
.step:hover i{transform:scale(1.12) rotate(8deg);background:var(--amber);color:#07110F;}
.step i::after{content:"";position:absolute;width:54px;height:54px;border-radius:50%;
  border:1px solid var(--line-amber);animation:ping 3.4s var(--ease-out) infinite;}
.step h4{margin-bottom:.5rem;}
.step p{color:var(--fog);font-size:.9rem;}

/* ---------- 15. BENTO ---------------------------------------------------- */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(14px,1.5vw,20px);}
.cell{padding:clamp(22px,2.2vw,32px);display:flex;flex-direction:column;gap:.7rem;
  transition:transform .55s var(--ease-out),border-color .45s;}
.cell:hover{transform:translateY(-5px);border-color:var(--line-amber);}
.cell h4{position:relative;z-index:1;}
.cell p{color:var(--fog);font-size:.92rem;position:relative;z-index:1;}
.c-4{grid-column:span 4;} .c-3{grid-column:span 3;} .c-2{grid-column:span 2;}

.viz{margin-top:auto;padding-top:1.4rem;position:relative;z-index:1;}
.viz svg{width:100%;max-width:232px;height:auto;overflow:visible;}

/* wide bento cells run text | visual side by side instead of leaving dead air */
.cell-row{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(18px,2.2vw,36px);align-items:center;}
.cell-row .cell-txt{display:flex;flex-direction:column;gap:.7rem;min-width:0;position:relative;z-index:1;}
.cell-row .viz{margin-top:0;padding-top:0;}
.cell-row .viz svg{max-width:100%;}

/* equalizer micro element */
.eq{display:flex;align-items:flex-end;gap:5px;height:52px;}
.eq i{width:7px;border-radius:3px;background:linear-gradient(180deg,var(--amber),var(--amber-deep));
  animation:eqBar 1.4s var(--ease-in-out) infinite alternate;}
.eq i:nth-child(1){height:40%;animation-delay:0s}
.eq i:nth-child(2){height:75%;animation-delay:.14s;background:linear-gradient(180deg,var(--mint),var(--mint-deep))}
.eq i:nth-child(3){height:55%;animation-delay:.28s}
.eq i:nth-child(4){height:95%;animation-delay:.42s}
.eq i:nth-child(5){height:62%;animation-delay:.56s;background:linear-gradient(180deg,var(--mint),var(--mint-deep))}
.eq i:nth-child(6){height:34%;animation-delay:.7s}
@keyframes eqBar{from{transform:scaleY(.4)}to{transform:scaleY(1)}}

/* ---------- 16. TESTIMONIALS --------------------------------------------- */
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.5vw,20px);}
.quote{padding:clamp(22px,2.2vw,30px);display:flex;flex-direction:column;gap:1.1rem;
  transition:transform .55s var(--ease-out),border-color .45s;}
.quote:hover{transform:translateY(-6px);border-color:var(--line-amber);}
.quote .qm{font-family:var(--f-display);font-size:2.6rem;line-height:.6;color:var(--amber);opacity:.4;}
.quote p{font-size:.96rem;color:var(--chalk-dim);position:relative;z-index:1;}
.who{display:flex;align-items:center;gap:.8rem;margin-top:auto;padding-top:1rem;border-top:1px solid var(--line-soft);}
.who .av{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;
  font-family:var(--f-display);font-weight:700;font-size:.9rem;color:#07110F;
  background:linear-gradient(140deg,var(--amber-hi),var(--amber));}
.who b{display:block;font-size:.88rem;font-weight:600;}
.who span{display:block;font-size:.76rem;color:var(--fog-deep);}
.stars{display:flex;gap:2px;color:var(--amber);}
.stars svg{width:13px;height:13px;animation:starPop .5s var(--ease-spring) backwards;}

@keyframes starPop{from{transform:scale(0) rotate(-40deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}

/* ---------- 17. FAQ ------------------------------------------------------ */
.faq{border-top:1px solid var(--line-soft);}
.qa{border-bottom:1px solid var(--line-soft);}
.qa button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.4rem;
  padding:1.35rem 0;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--f-display);font-size:clamp(1.02rem,1.3vw,1.22rem);font-weight:600;letter-spacing:-.018em;
  transition:color .3s ease;}
.qa button:hover{color:var(--amber);}
.qa .sign{position:relative;width:20px;height:20px;flex:none;}
.qa .sign::before,.qa .sign::after{content:"";position:absolute;left:50%;top:50%;background:var(--amber);
  transform:translate(-50%,-50%);transition:transform .45s var(--ease-out),opacity .35s;}
.qa .sign::before{width:14px;height:1.5px;}
.qa .sign::after{width:1.5px;height:14px;}
.qa.open .sign::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0;}
.qa .ans{max-height:0;overflow:hidden;transition:max-height .55s var(--ease-in-out);}
.qa .ans p{padding-bottom:1.35rem;color:var(--fog);font-size:.96rem;max-width:74ch;}

/* ---------- 18. CTA BAND ------------------------------------------------- */
.cta{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:clamp(38px,5vw,76px);
  border:1px solid var(--line-amber);
  background:linear-gradient(150deg,rgba(240,169,59,.11),rgba(63,224,176,.05) 55%,rgba(8,17,15,.6));}
.cta::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  right:-140px;top:-200px;background:radial-gradient(circle,rgba(240,169,59,.2),transparent 66%);
  animation:drift2 22s var(--ease-in-out) infinite;}
.cta-in{position:relative;z-index:1;max-width:60ch;}
.cta h2{margin-bottom:1.05rem;}
.cta p{color:var(--chalk-dim);margin-bottom:2rem;}
.cta .hero-cta{gap:.8rem;}

/* ---------- 19. FOOTER --------------------------------------------------- */
.foot{border-top:1px solid var(--line);margin-top:clamp(50px,6vw,90px);
  padding-block:clamp(48px,5vw,74px) 2rem;position:relative;z-index:2;
  background:linear-gradient(180deg,transparent,rgba(4,9,8,.85));}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.35fr;gap:clamp(26px,3vw,48px);margin-bottom:3rem;}
.foot h5{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--fog-deep);font-weight:500;margin-bottom:1.1rem;}
.foot-col a,.foot-col li{display:block;font-size:.9rem;color:var(--fog);padding-block:.34rem;
  transition:color .3s ease,transform .4s var(--ease-out);}
.foot-col a:hover{color:var(--amber);transform:translateX(4px);}
.foot-about p{color:var(--fog);font-size:.9rem;margin:1.1rem 0 1.4rem;max-width:38ch;}
.legal-box{font-size:.8rem;color:var(--fog-deep);line-height:1.85;}
.legal-box b{color:var(--chalk-dim);font-weight:500;}
.foot-bot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  padding-top:1.7rem;border-top:1px solid var(--line-soft);font-size:.8rem;color:var(--fog-deep);}
.foot-bot nav{display:flex;flex-wrap:wrap;gap:1.2rem;}
.foot-bot nav a:hover{color:var(--amber);}

/* ---------- 20. PAGE HEADER (inner pages) -------------------------------- */
.phead{padding-top:calc(var(--nav-h) + clamp(40px,5.5vw,74px));padding-bottom:clamp(30px,4vw,54px);}
.crumb{display:flex;align-items:center;gap:.5rem;color:var(--fog-deep);margin-bottom:1.5rem;flex-wrap:wrap;}
.crumb a{transition:color .3s;}
.crumb a:hover{color:var(--amber);}
.crumb svg{width:11px;height:11px;opacity:.5;}

.svc-hero{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(30px,4vw,62px);align-items:center;}
.svc-hero h1{font-size:clamp(2.4rem,5.2vw,4.4rem);margin-bottom:1.3rem;}
.svc-hero .art-legal{width:min(100%,460px);justify-self:end;}
.svc-hero .hero-lede{margin-bottom:1.9rem;}

.tagline{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem;}
.tag{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.36rem .7rem;border-radius:100px;border:1px solid var(--line);color:var(--fog);
  background:rgba(233,243,239,.02);transition:border-color .4s,color .4s,transform .4s var(--ease-out);}
.tag:hover{border-color:var(--line-amber);color:var(--amber);transform:translateY(-2px);}

/* price panel */
.pricebox{padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;gap:1.15rem;}
.pricebox .big{font-family:var(--f-display);font-size:clamp(2.6rem,4.4vw,3.5rem);font-weight:700;
  letter-spacing:-.045em;line-height:1;}
.pricebox .big em{font-style:normal;font-size:1rem;font-family:var(--f-body);color:var(--fog);
  font-weight:500;letter-spacing:0;margin-left:.4rem;}
.pricebox ul{display:flex;flex-direction:column;gap:.6rem;}
.pricebox li{display:flex;gap:.65rem;font-size:.9rem;color:var(--chalk-dim);}
.pricebox li svg{width:15px;height:15px;flex:none;margin-top:.3rem;color:var(--mint);}

/* phase blocks */
.phases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);}
.phase{padding:clamp(24px,2.4vw,34px);display:flex;flex-direction:column;gap:.85rem;
  transition:transform .55s var(--ease-out),border-color .45s;}
.phase:hover{transform:translateY(-6px);border-color:var(--line-amber);}
.phase .lab{display:flex;align-items:center;gap:.7rem;color:var(--amber);}
.phase .lab i{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-style:normal;
  background:rgba(240,169,59,.12);border:1px solid var(--line-amber);font-family:var(--f-mono);font-size:.66rem;}
.phase p{color:var(--fog);font-size:.95rem;position:relative;z-index:1;}
.phase h3{position:relative;z-index:1;}

/* deliverables list */
.deliver{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden;}
.deliver div{background:rgba(8,17,15,.7);padding:clamp(18px,2vw,26px);
  transition:background .45s ease,transform .5s var(--ease-out);}
.deliver div:hover{background:rgba(18,34,31,.9);}
.deliver b{display:flex;align-items:center;gap:.55rem;font-size:.93rem;font-weight:600;margin-bottom:.35rem;}
.deliver b svg{width:14px;height:14px;color:var(--amber);flex:none;}
.deliver span{font-size:.84rem;color:var(--fog);}

/* timeline */
.tl{display:flex;flex-direction:column;gap:0;border-left:1px solid var(--line-amber);padding-left:clamp(22px,3vw,38px);margin-left:9px;}
.tl li{position:relative;padding-block:clamp(16px,1.8vw,24px);}
.tl li+li{border-top:1px solid var(--line-soft);}
.tl li::before{content:"";position:absolute;left:calc(-1 * clamp(22px,3vw,38px) - 5px);top:calc(clamp(16px,1.8vw,24px) + 8px);
  width:9px;height:9px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px rgba(240,169,59,.13);
  animation:nodePulse 3s var(--ease-in-out) infinite;}
.tl .wk{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);}
.tl h4{margin:.4rem 0 .3rem;}
.tl p{color:var(--fog);font-size:.9rem;}

/* ---------- 21. CONTACT -------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(26px,3.4vw,54px);align-items:start;}
.ccard{display:flex;gap:1rem;padding:clamp(18px,1.9vw,24px);align-items:flex-start;
  transition:transform .5s var(--ease-out),border-color .45s;}
.ccard:hover{transform:translateX(5px);border-color:var(--line-amber);}
.ccard i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;font-style:normal;
  background:linear-gradient(150deg,rgba(240,169,59,.16),rgba(63,224,176,.07));border:1px solid var(--line-amber);color:var(--amber);}
.ccard i svg{width:18px;height:18px;}
.ccard b{display:block;font-size:.72rem;font-family:var(--f-mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--fog-deep);margin-bottom:.3rem;font-weight:500;}
.ccard span{display:block;font-size:.98rem;color:var(--chalk);}
.ccard small{display:block;font-size:.78rem;color:var(--fog-deep);margin-top:.2rem;}

.form{padding:clamp(24px,2.8vw,38px);}
.field{margin-bottom:1.15rem;position:relative;}
.field label{display:block;font-family:var(--f-mono);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fog-deep);margin-bottom:.5rem;}
.field input,.field textarea,.field select{
  width:100%;padding:.85rem 1rem;border-radius:12px;background:rgba(4,9,8,.55);
  border:1px solid var(--line);color:var(--chalk);font-size:.95rem;outline:none;
  transition:border-color .4s ease,background .4s ease,box-shadow .4s ease;}
.field textarea{min-height:132px;resize:vertical;}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--amber);background:rgba(4,9,8,.8);box-shadow:0 0 0 4px rgba(240,169,59,.1);}
.field input::placeholder,.field textarea::placeholder{color:var(--fog-deep);}
.field.bad input,.field.bad textarea{border-color:#E5634D;box-shadow:0 0 0 4px rgba(229,99,77,.1);}
.err{display:block;font-size:.75rem;color:#E5634D;margin-top:.4rem;opacity:0;transform:translateY(-4px);
  transition:opacity .3s,transform .3s;}
.field.bad .err{opacity:1;transform:translateY(0);}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem;}
.form-note{font-size:.78rem;color:var(--fog-deep);margin-top:1rem;}
.sent{display:none;align-items:center;gap:.7rem;padding:.9rem 1.1rem;border-radius:12px;margin-top:1rem;
  background:rgba(63,224,176,.09);border:1px solid rgba(63,224,176,.3);color:var(--mint);font-size:.88rem;}
.sent.show{display:flex;animation:drawerIn .5s var(--ease-out) backwards;}
.sent svg{width:16px;height:16px;flex:none;}

/* ---------- 22. LEGAL PAGES ---------------------------------------------- */
.legal-wrap{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:start;}
.toc{position:sticky;top:calc(var(--nav-h) + 22px);padding:1.3rem;}
.toc h5{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fog-deep);margin-bottom:.9rem;font-weight:500;}
.toc a{display:block;font-size:.85rem;color:var(--fog);padding:.34rem 0 .34rem .8rem;
  border-left:1px solid var(--line);transition:color .3s,border-color .3s,padding-left .35s var(--ease-out);}
.toc a:hover,.toc a.on{color:var(--amber);border-left-color:var(--amber);padding-left:1.05rem;}

.prose h2{font-size:clamp(1.35rem,2vw,1.85rem);margin:2.6rem 0 .9rem;scroll-margin-top:calc(var(--nav-h) + 24px);}
.prose h2:first-child{margin-top:0;}
.prose h3{font-size:1.05rem;margin:1.7rem 0 .6rem;}
.prose p,.prose li{color:var(--fog);font-size:.95rem;}
.prose p{margin-bottom:1rem;}
.prose ul{margin:0 0 1.2rem;display:flex;flex-direction:column;gap:.5rem;}
.prose ul li{display:flex;gap:.7rem;}
.prose ul li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--amber);
  flex:none;margin-top:.62rem;}
.prose a{color:var(--amber);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:rgba(240,169,59,.4);transition:text-decoration-color .3s;}
.prose a:hover{text-decoration-color:var(--amber);}
.prose strong{color:var(--chalk-dim);font-weight:600;}
.tbl{overflow-x:auto;margin-bottom:1.4rem;-webkit-overflow-scrolling:touch;
  border-radius:var(--r-sm);}
.prose table{width:100%;min-width:460px;border-collapse:collapse;margin-bottom:0;font-size:.87rem;}
.prose th,.prose td{text-align:left;padding:.75rem .9rem;border-bottom:1px solid var(--line-soft);vertical-align:top;}
.prose th{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fog-deep);font-weight:500;}
.prose td{color:var(--fog);}
.prose td:first-child{color:var(--chalk-dim);white-space:nowrap;}
.callout{padding:1.15rem 1.3rem;border-radius:var(--r-md);margin-bottom:1.5rem;
  border:1px solid var(--line-amber);background:rgba(240,169,59,.055);}
.callout p{color:var(--chalk-dim);margin:0;font-size:.9rem;}
.updated{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fog-deep);}

/* ---------- 23. REVEAL --------------------------------------------------- */
[data-rise]{opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease-out),transform .85s var(--ease-out);
  transition-delay:var(--d,0ms);}
[data-rise].in{opacity:1;transform:none;}
[data-rise="left"]{transform:translateX(-26px);}
[data-rise="right"]{transform:translateX(26px);}
[data-rise="zoom"]{transform:scale(.94);}
[data-rise="clip"]{opacity:1;transform:none;clip-path:inset(0 100% 0 0);
  transition:clip-path 1.1s var(--ease-out);transition-delay:var(--d,0ms);}
[data-rise="clip"].in{clip-path:inset(0 0 0 0);}

/* ---------- 24. RESPONSIVE ----------------------------------------------- */
@media (max-width:1080px){
  .foot-grid{grid-template-columns:1fr 1fr;}
  .bento{grid-template-columns:repeat(4,minmax(0,1fr));}
  .c-4,.c-3{grid-column:span 4;} .c-2{grid-column:span 2;}
  .legal-wrap{grid-template-columns:minmax(0,1fr);}
  .toc{position:relative;top:0;}
}
@media (max-width:940px){
  .menu{display:none;}
  .burger{display:grid;}
  /* the header CTA collides with the burger once the menu collapses;
     the drawer carries its own "Start a project" button */
  .nav .shell > .btn{display:none;}
  .hero-grid,.svc-hero,.contact-grid{grid-template-columns:minmax(0,1fr);}
  [data-rise="left"],[data-rise="right"]{transform:translateY(26px);}
  .art{order:-1;max-width:520px;margin-inline:auto;width:100%;}
  .svc-grid,.quotes,.deliver{grid-template-columns:1fr;}
  .proc{grid-template-columns:repeat(2,minmax(0,1fr));}
  .proc::before{display:none;}
  .stat-row{grid-template-columns:repeat(2,minmax(0,1fr));}
  .phases{grid-template-columns:1fr;}
  .chip.f2,.svc-hero .chip.f2{left:0;bottom:-4%;}
  .chip.f1,.svc-hero .chip.f1{right:0;top:-2%;}
}
@media (max-width:760px){
  .cell-row{grid-template-columns:1fr;}
  .cell-row .viz{margin-top:.4rem;}
  .cell-row .viz svg{max-width:300px;}
}
@media (max-width:620px){
  .bento{grid-template-columns:1fr;}
  .c-4,.c-3,.c-2{grid-column:span 1;}
  .proc{grid-template-columns:1fr;}
  .two{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
  .hero-meta{gap:1.2rem;}
  .chip{font-size:.55rem;padding:.32rem .55rem;}
  .cursor,.cursor-dot{display:none;}
}

/* utility: shared SVG gradient defs live in a zero-size svg at the top of body */
.defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none;}