/* ──────────────────────────────────────────────────────── TOKENS */
  :root{
    /* deep blue-black — the ground */
    --ink:        hsl(220 14% 8%);
    --ink-2:      hsl(220 14% 12%);
    --ink-3:      hsl(220 8% 26%);
    --ink-mute:   hsl(220 4% 50%);
    /* warm-cool off-white — the field (matches video bg) */
    --bone:       hsl(60 8% 96%);
    --bone-2:     hsl(60 6% 92%);
    --bone-3:     hsl(60 4% 84%);
    /* brushed silver — borders, secondary, hardware tone */
    --silver:     hsl(210 6% 70%);
    --silver-2:   hsl(210 6% 60%);
    --silver-3:   hsl(210 6% 86%);
    /* electric cyan — THE accent (single-accent discipline) */
    --eucalypt:   hsl(184 90% 48%);   /* legacy alias → pulse */
    --eucalypt-2: hsl(184 78% 38%);
    --eucalypt-3: hsl(184 80% 72%);
    --pulse:      hsl(184 90% 48%);
    --solar:      hsl(184 90% 48%);   /* legacy alias → pulse */
    --solar-soft: hsl(184 90% 48% / .14);

    --display: 'Bricolage Grotesque', system-ui, sans-serif;
    --serif:   'Bricolage Grotesque', system-ui, sans-serif;  /* legacy alias */
    --sans:    'Inter', system-ui, -apple-system, sans-serif;
    --mono:    'JetBrains Mono', ui-monospace, monospace;

    --ease:   cubic-bezier(.22, 1, .36, 1);
    --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
    --ease-in:  cubic-bezier(.7, 0, .84, 0);

    --max:    1480px;
    --gut:    clamp(20px, 4vw, 56px);
    --rule:   1px solid hsl(220 14% 8% / .12);
    --rule-bone: 1px solid hsl(60 8% 96% / .14);
  }

  /* ──────────────────────────────────────────────────────── RESET */
  *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
  html{ font-size:16px; -webkit-text-size-adjust:100%; scroll-behavior:auto; }
  body{
    font-family:var(--sans);
    background:var(--bone);
    color:var(--ink);
    font-weight:400;
    font-feature-settings:"ss01","cv11","tnum";
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
    cursor:none;
  }
  a{ color:inherit; text-decoration:none; }
  img,video{ display:block; max-width:100%; }
  button{ font:inherit; color:inherit; background:none; border:0; cursor:none; }
  ::selection{ background:var(--solar); color:var(--ink); }

  /* ──────────────────────────────────────────────────────── CUSTOM CURSOR */
  .cursor,.cursor-dot{
    position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
    will-change:transform;
    mix-blend-mode:difference;
  }
  .cursor{
    width:32px; height:32px; border-radius:50%;
    border:1px solid hsl(60 8% 96% / .55);
    transform:translate3d(-50%,-50%,0);
    transition:width .45s var(--ease), height .45s var(--ease),
               background-color .35s var(--ease), border-color .35s var(--ease);
  }
  .cursor-dot{
    width:4px; height:4px; border-radius:50%;
    background:var(--bone);
    transform:translate3d(-50%,-50%,0);
  }
  body[data-cursor="hover"] .cursor{ width:64px; height:64px; background:hsl(60 8% 96% / .12); border-color:hsl(60 8% 96% / .9); }
  body[data-cursor="cta"] .cursor{ width:80px; height:80px; background:var(--solar); border-color:var(--solar); mix-blend-mode:normal; }
  body[data-cursor="cta"] .cursor-dot{ background:var(--ink); }
  body[data-cursor="text"] .cursor{ width:2px; height:22px; border-radius:2px; background:var(--bone); }
  body[data-cursor="drag"] .cursor{ width:96px; height:96px; }
  body[data-cursor="drag"] .cursor::after{
    content:"DRAG"; position:absolute; inset:0; display:grid; place-items:center;
    font:500 10px/1 var(--mono); letter-spacing:.18em; color:var(--bone);
  }
  @media (hover:none){ body{cursor:auto;} .cursor,.cursor-dot{display:none;} }

  /* ──────────────────────────────────────────────────────── LOADER */
  .loader{
    position:fixed; inset:0; z-index:9998;
    background:var(--ink); color:var(--bone);
    display:grid; grid-template-rows:1fr auto auto 1fr;
    padding:var(--gut);
    will-change:transform;
  }
  .loader-row{
    grid-row:2; display:flex; align-items:baseline; justify-content:space-between;
    border-top:var(--rule-bone); padding-top:18px;
    font:500 11px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
    color:hsl(60 8% 96% / .6);
  }
  .loader-pct{
    grid-row:3;
    font-family:var(--display); font-weight:800; font-variation-settings:"opsz" 36;
    font-size:clamp(64px, 17.6vw, 224px); line-height:.86;
    letter-spacing:-.03em; color:var(--bone);
    margin-top:18px;
  }
  .loader-pct sup{ font-size:.32em; vertical-align:top; padding-left:6px; opacity:.5; }
  .loader-bar{
    position:absolute; left:0; right:0; bottom:0;
    height:2px; background:hsl(60 8% 96% / .12);
  }
  .loader-bar i{
    display:block; height:100%; width:0%;
    background:var(--solar);
    box-shadow:0 0 24px 2px var(--solar), 0 0 4px 0 var(--eucalypt);
    transition:width .25s linear;
  }

  /* ──────────────────────────────────────────────────────── NAV */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:80;
    padding:18px var(--gut);
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px;
    color:var(--bone);
    transition:color .55s var(--ease), background-color .55s var(--ease);
    mix-blend-mode:difference;
  }
  .nav.is-light{ color:var(--ink); }
  .nav__brand{
    display:flex; align-items:center; gap:10px;
    font:500 12px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  }
  .nav__brand .glyph{
    width:14px; height:14px; position:relative;
  }
  .nav__brand .glyph::before,
  .nav__brand .glyph::after{
    content:""; position:absolute; inset:0;
    border:1.2px solid currentColor;
  }
  .nav__brand .glyph::after{
    transform:scale(.5); background:var(--solar); border-color:var(--solar);
    animation:pulse 2.4s var(--ease) infinite;
  }
  @keyframes pulse{ 0%,100%{ opacity:1; transform:scale(.45);} 50%{ opacity:.55; transform:scale(.7);} }
  .nav__menu{
    display:flex; gap:36px; justify-self:center;
    font:500 12px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  }
  .nav__menu a{ position:relative; padding:6px 0; }
  .nav__menu a::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
    background:currentColor; transform:scaleX(0); transform-origin:0 50%;
    transition:transform .55s var(--ease);
  }
  .nav__menu a:hover::after{ transform:scaleX(1); }
  .nav__right{ justify-self:end; display:flex; gap:20px; align-items:center; font:500 12px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; }
  .sound-toggle{
    display:inline-flex; align-items:center; gap:8px;
    border:1px solid currentColor; border-radius:999px; padding:7px 12px;
    font:500 10.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  }
  .sound-toggle .bars{ display:inline-flex; gap:2px; align-items:flex-end; height:10px; }
  .sound-toggle .bars i{ width:2px; background:currentColor; border-radius:1px; }
  .sound-toggle .bars i:nth-child(1){ height:4px; }
  .sound-toggle .bars i:nth-child(2){ height:7px; }
  .sound-toggle .bars i:nth-child(3){ height:10px; }
  .sound-toggle .bars i:nth-child(4){ height:6px; }
  .sound-toggle[data-on="true"] .bars i{ animation:eq 1.1s var(--ease) infinite alternate; }
  .sound-toggle[data-on="true"] .bars i:nth-child(2){ animation-delay:.12s; }
  .sound-toggle[data-on="true"] .bars i:nth-child(3){ animation-delay:.24s; }
  .sound-toggle[data-on="true"] .bars i:nth-child(4){ animation-delay:.36s; }
  @keyframes eq{ from{ transform:scaleY(.4);} to{ transform:scaleY(1);} }
  .nav__cta{
    border:1px solid currentColor; border-radius:999px;
    padding:9px 18px; font:500 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
    transition:background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
  }
  .nav__cta:hover{ background:var(--solar); border-color:var(--solar); color:var(--ink); }

  /* ──────────────────────────────────────────────────────── HERO */
  .hero{
    position:relative; min-height:100vh; min-height:100svh;
    background:var(--ink); color:var(--bone);
    overflow:hidden;
    display:grid; grid-template-rows:1fr auto;
  }
  .hero__bg{
    position:absolute; inset:0; overflow:hidden;
  }
  .hero__bg video,.hero__bg .poster{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; will-change:transform;
  }
  .hero__bg .poster{
    background:
      radial-gradient(ellipse 70% 60% at 18% 90%, hsl(184 90% 48% / .55) 0%, transparent 60%),
      radial-gradient(ellipse 50% 50% at 90% 12%, hsl(184 90% 48% / .18) 0%, transparent 60%),
      linear-gradient(180deg, #0a0a09 0%, #181613 60%, #0e0d0c 100%);
  }
  .hero__bg::after{
    content:""; position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(0,0,0,0) 35%, hsl(220 14% 8% / .65) 100%),
      linear-gradient(90deg, hsl(220 14% 8% / .35) 0%, transparent 35%);
    pointer-events:none;
  }
  .hero__bg::before{
    content:""; position:absolute; inset:0;
    background-image:
      linear-gradient(hsl(184 90% 48% / .04) 1px, transparent 1px),
      linear-gradient(90deg, hsl(60 8% 96% / .04) 1px, transparent 1px);
    background-size:64px 64px;
    mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%);
    pointer-events:none;
  }
  .hero__scan{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background-image:repeating-linear-gradient(180deg,
      transparent 0px, transparent 2px,
      hsl(184 90% 48% / .025) 2px, hsl(184 90% 48% / .025) 3px);
    mix-blend-mode:overlay;
  }
  .hero__inner{
    position:relative; z-index:2;
    align-self:end;
    padding:clamp(110px, 14vh, 160px) var(--gut) clamp(80px, 12vh, 140px);
    max-width:var(--max); margin:0 auto; width:100%;
  }
  .hero__meta{
    display:grid; grid-template-columns:auto auto auto; gap:36px;
    font:500 11px/1.4 var(--mono); letter-spacing:.18em; text-transform:uppercase;
    color:hsl(60 8% 96% / .55);
    border-top:var(--rule-bone); border-bottom:var(--rule-bone);
    padding:14px 0; margin-bottom:48px;
    width:fit-content;
  }
  .hero__meta span b{ color:var(--bone); font-weight:500; padding-left:8px; }
  .hero h1{
    font-family:var(--display); font-weight:800; font-variation-settings:"opsz" 96;
    font-size:clamp(51px, 9.9vw, 166px);
    line-height:.88; letter-spacing:-.035em;
    color:var(--bone);
    max-width:14ch;
    text-transform:uppercase;
  }
  .hero h1 em{
    color:var(--eucalypt);
    display:inline-block;
    font-style:normal;
    text-shadow:0 0 32px hsl(184 90% 48% / .35);
  }
  .hero h1 .word{ display:inline-block; overflow:hidden; vertical-align:top; }
  .hero h1 .char{
    display:inline-block; transform:translate3d(0,110%,0);
    will-change:transform;
  }
  .hero__rail{
    margin-top:48px;
    display:grid; grid-template-columns:1fr auto auto; gap:48px; align-items:end;
    border-top:var(--rule-bone); padding-top:24px;
  }
  .hero__lede{
    max-width:46ch; font-size:clamp(15px, 1.1vw, 17px); line-height:1.6;
    color:hsl(60 8% 96% / .72);
  }
  .hero__lede .ln{ display:block; overflow:hidden; }
  .hero__lede .ln span{ display:block; transform:translate3d(0,110%,0); will-change:transform; }
  .hero__cta{
    display:inline-flex; align-items:center; gap:14px;
    border:1px solid var(--bone); border-radius:999px;
    padding:18px 26px;
    font:500 12px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
    color:var(--bone);
    background:transparent;
    will-change:transform;
    transition:background-color .45s var(--ease), color .45s var(--ease);
  }
  .hero__cta:hover{ background:var(--solar); color:var(--ink); border-color:var(--solar); }
  .hero__cta .arrow{
    width:34px; height:1px; background:currentColor; position:relative;
  }
  .hero__cta .arrow::after{
    content:""; position:absolute; right:-1px; top:50%; width:9px; height:9px;
    border-top:1px solid currentColor; border-right:1px solid currentColor;
    transform:translateY(-50%) rotate(45deg);
  }
  .hero__index{
    font:500 11px/1.5 var(--mono); letter-spacing:.18em; text-transform:uppercase;
    color:hsl(60 8% 96% / .55); text-align:right; min-width:120px;
  }
  .hero__index b{ color:var(--bone); font-weight:500; display:block; font-size:32px; font-family:var(--display); font-weight:800; letter-spacing:-.02em; line-height:1; margin-top:6px; }

  .hero__scroll{
    position:absolute; left:var(--gut); bottom:24px; z-index:3;
    display:flex; flex-direction:column; align-items:center; gap:10px;
    font:500 10px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase;
    color:hsl(60 8% 96% / .5);
  }
  .hero__scroll .line{
    width:1px; height:48px; background:hsl(60 8% 96% / .3); position:relative; overflow:hidden;
  }
  .hero__scroll .line::after{
    content:""; position:absolute; left:0; right:0; top:-100%; height:50%;
    background:linear-gradient(180deg, transparent, var(--bone));
    animation:scrollPulse 2.4s var(--ease) infinite;
  }
  @keyframes scrollPulse{ 0%{ top:-100%; } 100%{ top:200%; } }

  /* ──────────────────────────────────────────────────────── MARQUEE */
  .marquee{
    background:var(--ink); color:var(--bone);
    border-top:var(--rule-bone);
    padding:34px 0; overflow:hidden;
    display:flex; gap:64px;
    white-space:nowrap;
  }
  .marquee__track{
    display:flex; gap:64px; flex-shrink:0;
    font-family:var(--display); font-weight:800; font-variation-settings:"opsz" 36;
    font-size:clamp(32px, 5.6vw, 77px); letter-spacing:-.02em;
    will-change:transform;
  }
  .marquee__track span{ display:inline-flex; align-items:center; gap:64px; }
  .marquee__track .dot{
    width:18px; height:18px; border-radius:50%; background:var(--solar);
    box-shadow:0 0 32px 4px hsl(184 90% 48% / .55);
    flex-shrink:0;
  }
  .marquee__track em{
    color:var(--eucalypt);
    font-style:normal;
  }

  /* ──────────────────────────────────────────────────────── PRINCIPLES (editorial asymmetric) */
  .principles{
    background:var(--bone); color:var(--ink);
    padding:clamp(120px, 18vh, 200px) 0;
    position:relative;
  }
  .principles__inner{
    max-width:var(--max); margin:0 auto;
    padding:0 var(--gut);
    display:grid; grid-template-columns:repeat(12, 1fr); gap:24px 24px;
  }
  .principles__eyebrow{
    grid-column:1 / span 3;
    font:500 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
    color:var(--ink-3);
    border-top:var(--rule); padding-top:14px;
  }
  .principles__head{
    grid-column:5 / span 8;
    font-family:var(--display); font-weight:800; font-variation-settings:"opsz" 36;
    font-size:clamp(34px, 5.2vw, 90px); line-height:.96; letter-spacing:-.025em;
    margin-bottom:0;
  }
  .principles__head .ln{ display:block; overflow:hidden; }
  .principles__head .ln span{ display:block; transform:translate3d(0,110%,0); will-change:transform; }
  .principles__lede{
    grid-column:5 / span 6;
    margin-top:32px; font-size:18px; line-height:1.6; color:var(--ink-3);
    max-width:50ch;
  }
  .principles__list{
    grid-column:1 / -1;
    margin-top:clamp(56px, 8vh, 100px);
    display:grid; grid-template-columns:repeat(12, 1fr); gap:0;
    border-top:var(--rule);
  }
  .principle{
    grid-column:span 4;
    border-right:var(--rule);
    padding:36px 32px 36px 0;
    display:grid; grid-template-rows:auto auto 1fr auto; gap:14px;
    min-height:340px;
    position:relative;
    transition:background-color .55s var(--ease);
  }
  .principle:nth-child(3){ border-right:0; }
  .principle:nth-child(2){ padding-left:32px; }
  .principle:nth-child(3){ padding-left:32px; }
  .principle__num{
    font:500 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
    color:var(--ink-3);
  }
  .principle__title{
    font-family:var(--display); font-weight:800; font-variation-settings:"opsz" 36;
    font-size:clamp(22px, 2.4vw, 35px); line-height:1.04; letter-spacing:-.02em;
    color:var(--ink);
  }
  .principle__body{
    font-size:15px; line-height:1.65; color:var(--ink-3);
    max-width:36ch;
  }
  .principle__tag{
    font:500 10.5px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
    color:var(--ink-3);
    display:inline-flex; align-items:center; gap:8px;
  }
  .principle__tag::before{
    content:""; width:6px; height:6px; border-radius:50%; background:var(--solar);
    box-shadow:0 0 12px 0 var(--solar);
  }
  .principle:hover{ background:var(--bone-2); }
  .principle:hover .principle__title{ color:var(--ink); }
  .principle:hover .principle__tag{ color:var(--solar); }

  /* ──────────────────────────────────────────────────────── AGENTS HORIZONTAL */
  .agents{
    background:var(--ink); color:var(--bone);
    position:relative;
    overflow:hidden;
  }
  /* Drifting cyan mesh behind the agent cards — backdrop-filter blurs it into glass */
  .agents__mesh{
    position:absolute; inset:0; z-index:0; pointer-events:none;
  }
  .agents__mesh::before,
  .agents__mesh::after{
    content:""; position:absolute; inset:-10%;
    will-change:transform;
  }
  .agents__mesh::before{
    background:radial-gradient(ellipse 50% 60% at 25% 30%, hsl(184 90% 48% / .25), transparent 60%);
    animation:meshDriftA 28s var(--ease) infinite;
  }
  .agents__mesh::after{
    background:radial-gradient(ellipse 55% 50% at 80% 70%, hsl(184 90% 48% / .18), transparent 60%);
    animation:meshDriftB 36s var(--ease) infinite;
  }
  .agents > *{ position:relative; z-index:1; }
  .agents__intro{
    max-width:var(--max); margin:0 auto;
    padding:clamp(100px, 14vh, 160px) var(--gut) clamp(60px, 8vh, 100px);
    display:grid; grid-template-columns:repeat(12, 1fr); gap:24px;
    align-items:end;
    border-bottom:var(--rule-bone);
  }
  .agents__eyebrow{
    grid-column:1 / span 3;
    font:500 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
    color:hsl(60 8% 96% / .5);
    border-top:var(--rule-bone); padding-top:14px;
  }
  .agents__title{
    grid-column:5 / span 8;
    font-family:var(--display); font-weight:800; font-variation-settings:"opsz" 36;
    font-size:clamp(34px, 4.8vw, 83px); line-height:.96; letter-spacing:-.025em;
    color:var(--bone);
  }
  .agents__title em{ color:var(--eucalypt); }
  .agents__count{
    grid-column:1 / span 4;
    margin-top:24px;
    font:500 11px/1.5 var(--mono); letter-spacing:.18em; text-transform:uppercase;
    color:hsl(60 8% 96% / .5);
  }
  .agents__count b{ color:var(--bone); font-family:var(--display); font-weight:800; font-variation-settings:"opsz" 36; font-size:42px; line-height:1; display:block; letter-spacing:-.02em; }

  .agents__pin{ position:relative; height:100vh; }
  .agents__track{
    position:absolute; top:0; left:0; height:100%;
    display:flex; align-items:center; gap:24px;
    padding:0 var(--gut);
    will-change:transform;
  }
  .agent{
    flex:0 0 clamp(300px, 30vw, 440px);
    height:62vh; min-height:440px; max-height:560px;
    /* floating glass card — translucent over the agents bg + drifting mesh behind */
    background:hsl(220 14% 12% / .38);
    backdrop-filter:blur(20px) saturate(150%);
    -webkit-backdrop-filter:blur(20px) saturate(150%);
    border:1px solid hsl(184 90% 48% / .14);
    border-radius:14px;
    overflow:hidden;
    position:relative;
    display:flex; flex-direction:column;
    padding:30px 30px 34px;
    box-shadow:
      inset 0 1px 0 hsl(60 8% 96% / .07),
      inset 0 0 0 1px hsl(184 90% 48% / .04),
      0 30px 80px -30px hsl(184 90% 48% / .18);
    transition:transform .65s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease), background-color .55s var(--ease);
  }
  .agent:hover{
    border-color:hsl(184 90% 48% / .42);
    background:hsl(220 14% 12% / .48);
    transform:translateY(-4px);
    box-shadow:
      inset 0 1px 0 hsl(60 8% 96% / .12),
      inset 0 0 0 1px hsl(184 90% 48% / .14),
      0 50px 120px -25px hsl(184 90% 48% / .4);
  }
  .agent__head{
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:auto;
  }
  .agent__num{
    font:500 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
    color:hsl(60 8% 96% / .55);
    transition:color .45s var(--ease);
  }
  .agent:hover .agent__num{ color:var(--pulse); }
  .agent__hover{
    width:34px; height:34px; border-radius:50%;
    border:1px solid hsl(60 8% 96% / .22);
    display:grid; place-items:center;
    color:hsl(60 8% 96% / .8);
    font:500 11px/1 var(--mono);
    transition:border-color .45s var(--ease), color .45s var(--ease), transform .45s var(--ease);
  }
  .agent:hover .agent__hover{
    border-color:var(--pulse); color:var(--pulse);
    transform:rotate(45deg);
  }
  .agent__core{
    margin-top:24px;
    display:flex; flex-direction:column; gap:14px;
  }
  .agent__title{
    font-family:var(--display); font-weight:800; font-variation-settings:"opsz" 36;
    font-size:clamp(21px, 2.1vw, 30px); line-height:1.04; letter-spacing:-.02em;
    color:var(--bone);
  }
  .agent__title em{ color:var(--pulse); font-style:normal; }
  .agent__lede{
    font-size:14px; line-height:1.6; color:hsl(60 8% 96% / .68);
    max-width:38ch;
  }
  .agent__caps{
    margin-top:22px; padding-top:20px;
    border-top:1px solid hsl(60 8% 96% / .08);
    display:flex; flex-wrap:wrap; gap:6px;
  }
  .cap{
    font:500 10.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
    color:hsl(60 8% 96% / .65);
    border:1px solid hsl(60 8% 96% / .14);
    padding:6px 10px; border-radius:999px;
    transition:color .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
  }
  .agent:hover .cap{ border-color:hsl(184 90% 48% / .25); }
  .cap:hover{ color:var(--pulse); border-color:var(--pulse); background:hsl(184 90% 48% / .08); }
  /* The shimmer that sweeps across each card on hover */
  .agent__shine{
    position:absolute; inset:-1px;
    background:linear-gradient(115deg,
      transparent 30%,
      hsl(184 90% 48% / .12) 45%,
      hsl(60 8% 96% / .25) 50%,
      hsl(184 90% 48% / .12) 55%,
      transparent 70%);
    transform:translateX(-130%);
    transition:transform 1.1s var(--ease);
    pointer-events:none;
    mix-blend-mode:plus-lighter;
    z-index:0;
  }
  .agent:hover .agent__shine{ transform:translateX(130%); }
  .agent > *:not(.agent__shine){ position:relative; z-index:1; }

  /* ──────────────────────────────────────────────────────── PROOF (scrubbed counters) */
  .proof{
    background:var(--bone); color:var(--ink);
    padding:clamp(100px, 14vh, 160px) 0;
    border-top:var(--rule);
  }
  .proof__inner{
    max-width:var(--max); margin:0 auto;
    padding:0 var(--gut);
    display:grid; grid-template-columns:repeat(12, 1fr); gap:24px 32px;
  }
  .proof__eyebrow{
    grid-column:1 / span 3;
    font:500 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
    color:var(--ink-3);
    border-top:var(--rule); padding-top:14px;
  }
  .proof__head{
    grid-column:1 / -1;
    margin-top:8px;
    font-family:var(--display); font-weight:800; font-variation-settings:"opsz" 36;
    font-size:clamp(29px, 3.7vw, 61px); line-height:1.02; letter-spacing:-.022em;
    max-width:18ch;
  }
  .proof__head em{ color:var(--solar); }
  .proof__metrics{
    grid-column:1 / -1;
    margin-top:clamp(60px, 9vh, 100px);
    display:grid; grid-template-columns:repeat(4, 1fr); gap:0;
    border-top:var(--rule); border-bottom:var(--rule);
  }
  .metric{
    padding:36px 24px 32px 0;
    border-right:var(--rule);
    display:grid; gap:14px;
    align-content:start;
  }
  .metric:nth-child(2),
  .metric:nth-child(3),
  .metric:nth-child(4){ padding-left:24px; }
  .metric:last-child{ border-right:0; }
  .metric__num{
    font-family:var(--display); font-weight:800; font-variation-settings:"opsz" 36;
    font-size:clamp(45px, 6.1vw, 106px); line-height:.86; letter-spacing:-.03em;
    color:var(--ink);
    font-variant-numeric:tabular-nums;
  }
  .metric__num .unit{ font-style:normal; font-family:var(--sans); font-weight:300; font-size:.32em; letter-spacing:-.01em; padding-left:6px; vertical-align:baseline; color:var(--ink-3); }
  .metric__label{
    font:500 11px/1.5 var(--mono); letter-spacing:.18em; text-transform:uppercase;
    color:var(--ink-3);
  }
  .metric__caption{
    font-size:14px; line-height:1.55; color:var(--ink-3);
    max-width:30ch;
  }

  /* ──────────────────────────────────────────────────────── PROCESS */
  .process{
    background:var(--ink); color:var(--bone);
    padding:clamp(120px, 18vh, 200px) 0;
    position:relative; overflow:hidden;
  }
  .process__bg{
    position:absolute; inset:0;
    background-image:
      linear-gradient(hsl(60 8% 96% / .035) 1px, transparent 1px),
      linear-gradient(90deg, hsl(60 8% 96% / .035) 1px, transparent 1px);
    background-size:96px 96px;
    mask-image:radial-gradient(ellipse at 30% 20%, black 30%, transparent 80%);
    pointer-events:none;
  }
  .process__inner{
    position:relative; z-index:1;
    max-width:var(--max); margin:0 auto;
    padding:0 var(--gut);
    display:grid; grid-template-columns:repeat(12, 1fr); gap:24px;
  }
  .process__eyebrow{
    grid-column:1 / span 3;
    font:500 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
    color:hsl(60 8% 96% / .5);
    border-top:var(--rule-bone); padding-top:14px;
  }
  .process__head{
    grid-column:5 / span 8;
    font-family:var(--display); font-weight:800; font-variation-settings:"opsz" 36;
    font-size:clamp(30px, 4.3vw, 74px); line-height:.98; letter-spacing:-.022em;
    color:var(--bone);
  }
  .process__head em{ color:var(--eucalypt); }
  .process__steps{
    grid-column:1 / -1;
    margin-top:clamp(60px, 9vh, 100px);
    display:grid; grid-template-columns:repeat(12, 1fr); gap:0;
    border-top:var(--rule-bone);
  }
  .step{
    grid-column:span 4;
    border-right:var(--rule-bone);
    padding:36px 28px 36px 0;
    display:grid; gap:18px;
    align-content:start;
    min-height:360px;
  }
  .step:nth-child(2),
  .step:nth-child(3){ padding-left:28px; }
  .step:last-child{ border-right:0; }
  .step__head{
    display:flex; align-items:baseline; justify-content:space-between;
    border-bottom:var(--rule-bone); padding-bottom:14px;
  }
  .step__num{
    font-family:var(--display); font-weight:800; font-variation-settings:"opsz" 36;
    font-size:clamp(38px, 4.5vw, 70px); line-height:.86; letter-spacing:-.03em;
    color:var(--bone);
  }
  .step__tag{
    font:500 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
    color:var(--eucalypt);
  }
  .step__title{
    font-family:var(--display); font-weight:800; font-variation-settings:"opsz" 36;
    font-size:clamp(18px, 1.6vw, 24px); line-height:1.1; letter-spacing:-.015em;
    color:var(--bone);
  }
  .step__body{
    font-size:15px; line-height:1.65; color:hsl(60 8% 96% / .65);
    max-width:34ch;
  }
  .step__meta{
    margin-top:auto; padding-top:20px;
    border-top:var(--rule-bone);
    font:500 11px/1.5 var(--mono); letter-spacing:.16em; text-transform:uppercase;
    color:hsl(60 8% 96% / .45);
    display:flex; justify-content:space-between;
  }

  /* ──────────────────────────────────────────────────────── MAP / LOCATIONS */
  .map{
    background:var(--bone); color:var(--ink);
    padding:clamp(100px, 14vh, 160px) 0;
    position:relative; overflow:hidden;
  }
  .map__inner{
    max-width:var(--max); margin:0 auto;
    padding:0 var(--gut);
    display:grid; grid-template-columns:repeat(12, 1fr); gap:24px;
    align-items:center;
  }
  .map__copy{ grid-column:1 / span 4; }
  .map__copy .eyebrow{
    font:500 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
    color:var(--ink-3); border-top:var(--rule); padding-top:14px; display:block;
  }
  .map__copy h2{
    margin-top:18px;
    font-family:var(--display); font-weight:800; font-variation-settings:"opsz" 36;
    font-size:clamp(29px, 3.5vw, 58px); line-height:1; letter-spacing:-.022em;
  }
  .map__copy h2 em{ color:var(--solar); }
  .map__copy p{
    margin-top:20px; font-size:15px; line-height:1.65; color:var(--ink-3); max-width:38ch;
  }
  .map__cities{
    margin-top:28px;
    display:flex; flex-wrap:wrap; gap:6px;
  }
  .map__city{
    font:500 10.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
    color:var(--ink-3);
    border:1px solid hsl(220 14% 8% / .2);
    padding:7px 12px; border-radius:999px;
    transition:color .35s var(--ease), border-color .35s var(--ease);
  }
  .map__city.is-active{
    color:var(--ink); border-color:var(--solar); background:var(--solar-soft);
  }
  .map__city.is-active::before{
    content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
    background:var(--solar); margin-right:8px; vertical-align:middle;
  }
  .map__viz{
    grid-column:6 / span 7;
    aspect-ratio:16/9; position:relative;
    background:linear-gradient(180deg, hsl(60 8% 96%) 0%, hsl(60 6% 92%) 100%);
    border-radius:14px;
    overflow:hidden;
    border:1px solid hsl(184 90% 48% / .18);
    box-shadow:
      inset 0 1px 0 hsl(60 8% 96% / .8),
      0 30px 80px -30px hsl(184 90% 48% / .35),
      0 60px 140px -50px hsl(220 14% 8% / .25);
  }
  .map__video{
    position:absolute; inset:0;
    width:100%; height:100%; object-fit:cover;
    /* nudge contrast/color so it sits naturally with our cyan accent */
    filter:contrast(1.05) saturate(1.1);
  }
  /* HUD-style metadata over the map video */
  .map__viz-meta{
    position:absolute; left:18px; top:18px; z-index:2;
    display:inline-flex; align-items:center; gap:10px;
    padding:8px 14px;
    border:1px solid hsl(184 90% 48% / .25);
    background:hsl(60 8% 96% / .55);
    backdrop-filter:blur(10px) saturate(140%);
    -webkit-backdrop-filter:blur(10px) saturate(140%);
    border-radius:999px;
    font:500 10.5px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
    color:var(--ink);
  }
  .map__viz-blink{
    width:8px; height:8px; border-radius:50%; background:var(--pulse);
    box-shadow:0 0 12px 0 var(--pulse);
    animation:blink 1.6s var(--ease) infinite;
  }
  @keyframes blink{
    0%, 100%{ opacity:1; transform:scale(1); }
    50%{ opacity:.4; transform:scale(.7); }
  }

  /* ──────────────────────────────────────────────────────── CTA */
  .cta{
    background:var(--ink); color:var(--bone);
    padding:clamp(120px, 18vh, 220px) 0;
    border-top:var(--rule-bone);
    position:relative; overflow:hidden;
  }
  .cta__bg{
    position:absolute; inset:0;
    background:
      radial-gradient(ellipse 50% 60% at 80% 30%, hsl(184 90% 48% / .15) 0%, transparent 60%),
      radial-gradient(ellipse 60% 70% at 10% 80%, hsl(184 90% 48% / .35) 0%, transparent 60%);
    pointer-events:none;
  }
  .cta__inner{
    position:relative; z-index:1;
    max-width:var(--max); margin:0 auto;
    padding:0 var(--gut);
    display:grid; grid-template-columns:repeat(12, 1fr); gap:24px;
  }
  .cta__eyebrow{
    grid-column:1 / -1;
    font:500 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
    color:hsl(60 8% 96% / .5);
    border-top:var(--rule-bone); padding-top:14px;
  }
  .cta__head{
    grid-column:1 / -1;
    margin-top:24px;
    font-family:var(--display); font-weight:800; font-variation-settings:"opsz" 96;
    font-size:clamp(51px, 9.9vw, 176px); line-height:.86; letter-spacing:-.04em;
    color:var(--bone);
    text-transform:uppercase;
  }
  .cta__head em{ color:var(--eucalypt); font-style:normal; text-shadow:0 0 40px hsl(184 90% 48% / .35); }
  .cta__rail{
    grid-column:1 / -1;
    margin-top:48px;
    display:grid; grid-template-columns:1fr auto auto; gap:32px; align-items:end;
    border-top:var(--rule-bone); padding-top:24px;
  }
  .cta__lede{
    max-width:48ch; font-size:16px; line-height:1.6; color:hsl(60 8% 96% / .68);
  }
  .magnetic{
    display:inline-block; will-change:transform;
  }
  .cta__btn{
    display:inline-flex; align-items:center; gap:14px;
    background:var(--solar); color:var(--ink);
    border-radius:999px; padding:22px 32px;
    font:500 12px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
    transition:background-color .45s var(--ease), color .45s var(--ease);
  }
  .cta__btn:hover{ background:var(--bone); }
  .cta__btn .arrow{ width:38px; height:1px; background:currentColor; position:relative; }
  .cta__btn .arrow::after{
    content:""; position:absolute; right:-1px; top:50%; width:9px; height:9px;
    border-top:1px solid currentColor; border-right:1px solid currentColor;
    transform:translateY(-50%) rotate(45deg);
  }
  .cta__note{
    font:500 11px/1.4 var(--mono); letter-spacing:.18em; text-transform:uppercase;
    color:hsl(60 8% 96% / .5); text-align:right; min-width:140px;
  }

  /* ──────────────────────────────────────────────────────── FOOTER */
  .footer{
    background:var(--ink); color:hsl(60 8% 96% / .55);
    padding:clamp(60px, 8vh, 100px) 0 24px;
    border-top:var(--rule-bone);
  }
  .footer__inner{
    max-width:var(--max); margin:0 auto;
    padding:0 var(--gut);
    display:grid; grid-template-columns:repeat(12, 1fr); gap:24px;
  }
  .footer__brand{
    grid-column:1 / span 4;
    display:flex; flex-direction:column; gap:18px;
  }
  .footer__brand .glyph{
    width:14px; height:14px; position:relative; display:inline-block;
  }
  .footer__brand .glyph::before,
  .footer__brand .glyph::after{ content:""; position:absolute; inset:0; border:1.2px solid currentColor; }
  .footer__brand .glyph::after{ transform:scale(.5); background:var(--solar); border-color:var(--solar); }
  .footer__brand .name{
    color:var(--bone);
    font:500 12px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
    display:inline-flex; gap:10px; align-items:center;
  }
  .footer__brand p{
    font-size:14px; line-height:1.6; max-width:32ch;
  }
  .footer__col{ grid-column:span 2; display:flex; flex-direction:column; gap:8px; min-width:0; }
  .footer__col a{ overflow-wrap:anywhere; }
  .footer__inner > .footer__col:nth-child(2){ grid-column:6 / span 2; }
  .footer__inner > .footer__col:nth-child(3){ grid-column:8 / span 3; }
  .footer__inner > .footer__col:nth-child(4){ grid-column:11 / span 2; }
  .footer__col h4{
    font:500 10.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
    color:var(--bone); margin-bottom:6px;
  }
  .footer__col a{
    font-size:13.5px; line-height:1.7; color:hsl(60 8% 96% / .55);
    transition:color .35s var(--ease);
  }
  .footer__col a:hover{ color:var(--bone); }
  .footer__bottom{
    grid-column:1 / -1;
    margin-top:60px; padding-top:18px; border-top:var(--rule-bone);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:18px;
    font:500 10.5px/1.4 var(--mono); letter-spacing:.16em; text-transform:uppercase;
    color:hsl(60 8% 96% / .4);
  }
  .footer__seal{
    grid-column:1 / -1;
    margin-top:60px;
    font-family:var(--display); font-weight:800;
    font-size:clamp(64px, 14.4vw, 192px); line-height:.86; letter-spacing:-.04em;
    color:hsl(60 8% 96% / .08);
    text-align:center;
    user-select:none;
    text-transform:uppercase;
  }
  .footer__seal em{ color:hsl(184 90% 48% / .18); font-style:normal; }

  /* ──────────────────────────────────────────────────────── REVEAL · scroll-scrub video */
  section.reveal{
    background:var(--bone); color:var(--ink);
    position:relative;
  }
  .reveal__stage{
    position:relative;
    height:280vh;          /* total scroll length — increase to slow scrub, decrease to speed up */
  }
  .reveal__pin{
    position:sticky; top:0;
    height:100vh; width:100%;
    overflow:hidden;
    background:var(--bone);
  }
  .reveal__video{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    will-change:auto;
    background:var(--bone);
  }
  .reveal__meta{
    position:absolute; top:0; left:var(--gut); right:var(--gut);
    z-index:2;
    display:flex; justify-content:space-between; align-items:baseline;
    padding:18px 0 14px;
    border-bottom:1px solid hsl(220 14% 8% / .12);
    font:500 11px/1.4 var(--mono); letter-spacing:.18em; text-transform:uppercase;
    color:hsl(220 14% 8% / .55);
    pointer-events:none;
  }
  .reveal__meta b{ color:var(--ink); font-weight:500; padding-left:10px; }
  .reveal__copy{
    position:absolute; left:var(--gut); bottom:64px;
    z-index:2; max-width:30ch;
    pointer-events:none;
  }
  .reveal__copy h2{
    font-family:var(--display); font-weight:800; font-variation-settings:"opsz" 96;
    font-size:clamp(32px, 4.5vw, 74px); line-height:.9; letter-spacing:-.035em;
    color:var(--ink);
    text-transform:uppercase;
  }
  .reveal__copy h2 em{
    color:var(--pulse); font-style:normal;
    text-shadow:0 0 24px hsl(184 90% 48% / .35);
  }
  .reveal__copy p{
    margin-top:18px; font-size:14px; line-height:1.65;
    color:hsl(220 14% 8% / .65);
    max-width:38ch;
  }
  .reveal__readout{
    position:absolute; right:var(--gut); bottom:64px;
    z-index:2;
    display:flex; flex-direction:column; align-items:flex-end; gap:8px;
    font:500 11px/1.2 var(--mono); letter-spacing:.18em; text-transform:uppercase;
    color:hsl(220 14% 8% / .55);
    pointer-events:none;
  }
  .reveal__readout b{
    font-family:var(--display); font-weight:800;
    font-size:clamp(32px, 3.8vw, 58px); line-height:.9; letter-spacing:-.03em;
    color:var(--ink); margin-bottom:4px;
    font-variant-numeric:tabular-nums;
  }
  .reveal__readout span{ color:hsl(220 14% 8% / .55); }
  .reveal__bar{
    position:absolute; left:0; right:0; bottom:0; height:2px;
    background:hsl(220 14% 8% / .08);
    z-index:3;
  }
  .reveal__bar i{
    display:block; height:100%; width:0%;
    background:var(--pulse);
    box-shadow:0 0 18px 0 var(--pulse), 0 0 4px 0 var(--pulse);
    transition:width .05s linear;
  }
  .reveal__loader{
    position:absolute; inset:0; z-index:4;
    background:var(--bone);
    display:grid; place-items:center;
    font:500 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
    color:var(--ink-3);
    transition:opacity .55s var(--ease);
  }
  .reveal__loader.is-hidden{ opacity:0; pointer-events:none; }
  .reveal__loader .ring{
    width:14px; height:14px; border-radius:50%;
    border:1.5px solid var(--ink-3); border-top-color:var(--pulse);
    animation:spin .9s linear infinite;
    margin-right:14px; display:inline-block; vertical-align:middle;
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  /* ──────────────────────────────────────────────────────── FX · constellation, glass, mesh, ripple */

  /* Constellation canvas — sits in hero on top of the mesh, gets gently dimmed by the dark overlay below the text */
  .hero__canvas{
    position:absolute; inset:0;
    width:100%; height:100%;
    pointer-events:none;
    opacity:.85;
  }

  /* Cursor-driven spotlight — soft cyan glow that follows the mouse in the hero */
  .hero__spot{
    position:absolute; inset:0; z-index:1;
    pointer-events:none;
    background:radial-gradient(circle 360px at var(--mx,50%) var(--my,50%),
      hsl(184 90% 48% / .14) 0%,
      hsl(184 90% 48% / .05) 28%,
      transparent 52%);
    mix-blend-mode:screen;
    transition:opacity .6s var(--ease);
  }

  /* Looping mesh gradient — slow, almost-imperceptible drift on the hero/CTA radials */
  @keyframes meshDriftA{
    0%   { transform:translate3d(0,0,0) scale(1); }
    50%  { transform:translate3d(6%,-4%,0) scale(1.08); }
    100% { transform:translate3d(0,0,0) scale(1); }
  }
  @keyframes meshDriftB{
    0%   { transform:translate3d(0,0,0) scale(1); }
    50%  { transform:translate3d(-5%,5%,0) scale(1.06); }
    100% { transform:translate3d(0,0,0) scale(1); }
  }
  .mesh-blob{
    position:absolute; inset:0;
    pointer-events:none;
    will-change:transform;
  }
  .mesh-blob.a{
    background:radial-gradient(ellipse 60% 50% at 18% 90%, hsl(184 90% 48% / .35) 0%, transparent 60%);
    animation:meshDriftA 22s var(--ease) infinite;
  }
  .mesh-blob.b{
    background:radial-gradient(ellipse 50% 45% at 90% 10%, hsl(184 90% 48% / .14) 0%, transparent 60%);
    animation:meshDriftB 30s var(--ease) infinite;
  }

  /* Drifting SVG dot grid in process section — feels like long-exposure circuit board */
  .process__drift{
    position:absolute; inset:0; z-index:0; pointer-events:none;
    opacity:.55;
    mask-image:radial-gradient(ellipse at 70% 30%, black 0%, transparent 70%);
  }
  @keyframes driftSlow{
    0%   { transform:translate3d(0,0,0); }
    50%  { transform:translate3d(60px,-40px,0); }
    100% { transform:translate3d(0,0,0); }
  }
  .process__drift svg{
    width:140%; height:140%; position:absolute; left:-20%; top:-20%;
    animation:driftSlow 38s var(--ease) infinite;
  }

  /* Click ripple — spawned on every interactive element */
  @keyframes rippleOut{
    0%   { transform:translate(-50%,-50%) scale(0); opacity:.55; }
    100% { transform:translate(-50%,-50%) scale(42); opacity:0; }
  }
  .ripple{
    position:absolute; pointer-events:none; z-index:5;
    width:10px; height:10px; border-radius:50%;
    background:hsl(184 90% 48% / .45);
    animation:rippleOut 720ms cubic-bezier(.22,1,.36,1) forwards;
    will-change:transform, opacity;
  }
  .ripple.is-light{ background:hsl(184 78% 38% / .35); }

  /* CTA button — rotating gradient ring + shimmer sweep on hover */
  .cta__btn{ position:relative; overflow:hidden; }
  /* Rotating cyan/silver ring rendered via mask-composite: only the border is visible */
  .cta__btn::before{
    content:""; position:absolute; inset:0; z-index:1;
    border-radius:inherit;
    padding:1.5px;
    background:conic-gradient(from 0deg,
      var(--pulse) 0%,
      hsl(184 90% 48% / 0) 22%,
      hsl(60 8% 96% / .9) 44%,
      hsl(184 90% 48% / 0) 66%,
      var(--pulse) 100%);
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
            mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    animation:rotateGrad 4.4s linear infinite;
    pointer-events:none;
    filter:blur(.4px);
  }
  /* Shimmer wipe — the button has lots of cyan, so the highlight is dark to read */
  .cta__btn .shimmer{
    position:absolute; inset:0;
    border-radius:inherit;
    background:linear-gradient(110deg,
      transparent 30%,
      hsl(220 14% 8% / .35) 50%,
      transparent 70%);
    transform:translateX(-110%);
    transition:transform .9s var(--ease);
    pointer-events:none; z-index:0;
  }
  .cta__btn:hover .shimmer{ transform:translateX(110%); }
  @keyframes rotateGrad{ to{ transform:rotate(360deg); } }

  /* Hero CTA — restraint version of the same shimmer */
  .hero__cta{ position:relative; isolation:isolate; overflow:hidden; }
  .hero__cta::after{
    content:""; position:absolute; inset:0;
    border-radius:inherit;
    background:linear-gradient(110deg,
      transparent 30%,
      hsl(184 90% 48% / .25) 50%,
      transparent 70%);
    transform:translateX(-110%);
    transition:transform 1s var(--ease);
    pointer-events:none;
  }
  .hero__cta:hover::after{ transform:translateX(110%); }

  /* RESPONSIVE */
  @media (max-width:980px){
    .nav__menu{ display:none; }
    .principles__head,.process__head,.agents__title{ grid-column:1 / -1; }
    .principles__eyebrow,.proof__eyebrow,.process__eyebrow,.agents__eyebrow{ grid-column:1 / -1; }
    .principles__lede,.proof__head,.cta__head{ grid-column:1 / -1; }
    .principle{ grid-column:1 / -1; border-right:0; border-bottom:var(--rule); padding:28px 0; min-height:auto; }
    .step{ grid-column:1 / -1; border-right:0; border-bottom:var(--rule-bone); padding:28px 0; min-height:auto; }
    .step:last-child{ border-bottom:0; }
    .principle:nth-child(2),.principle:nth-child(3){ padding-left:0; }
    .step:nth-child(2),.step:nth-child(3){ padding-left:0; }
    .proof__metrics{ grid-template-columns:repeat(2, 1fr); }
    .metric{ border-bottom:var(--rule); padding:24px 0; }
    .metric:nth-child(2n){ border-right:0; padding-left:24px; }
    .map__copy,.map__viz{ grid-column:1 / -1; }
    .footer__brand,.footer__col{ grid-column:1 / -1; }
    .hero__rail{ grid-template-columns:1fr; gap:24px; }
    .hero__index{ text-align:left; }
    .cta__rail{ grid-template-columns:1fr; gap:24px; }
    .cta__note{ text-align:left; }
  }

  /* ──────────────────────────────────────────────────────── REDUCED MOTION */
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
      animation-duration:.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.01ms !important;
      scroll-behavior:auto !important;
    }
    .hero h1 .char{ transform:none !important; }
    .hero__lede .ln span{ transform:none !important; }
    .principles__head .ln span{ transform:none !important; }
    body{ cursor:auto; }
    .cursor,.cursor-dot{ display:none; }
  }

/* ──────────────────────────────────────────────────────── INNER PAGE — shared scaffolding */
.page-hero{
  position:relative; min-height:78vh; min-height:78svh;
  background:var(--ink); color:var(--bone);
  overflow:hidden;
  display:grid; grid-template-rows:1fr auto;
  border-bottom:1px solid hsl(60 8% 96% / .08);
}
.page-hero__bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 55% at 18% 90%, hsl(184 90% 48% / .28) 0%, transparent 60%),
    radial-gradient(ellipse 45% 50% at 90% 5%, hsl(184 90% 48% / .14) 0%, transparent 60%),
    linear-gradient(180deg, #08090c 0%, #14161a 60%, #0e1015 100%);
}
.page-hero__bg::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(hsl(184 90% 48% / .04) 1px, transparent 1px),
    linear-gradient(90deg, hsl(60 8% 96% / .04) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.page-hero__inner{
  position:relative; z-index:2;
  align-self:end;
  max-width:var(--max); margin:0 auto; width:100%;
  padding:0 var(--gut) clamp(70px, 10vh, 120px);
}
.page-hero__crumb{
  display:flex; align-items:center; gap:16px;
  border-top:var(--rule-bone); border-bottom:var(--rule-bone);
  padding:14px 0; margin-bottom:42px;
  font:500 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:hsl(60 8% 96% / .55);
  width:fit-content;
}
.page-hero__crumb a{ color:hsl(60 8% 96% / .55); transition:color .35s var(--ease); }
.page-hero__crumb a:hover{ color:var(--bone); }
.page-hero__crumb b{ color:var(--bone); font-weight:500; }
.page-hero h1{
  font-family:var(--display); font-weight:800; font-variation-settings:"opsz" 96;
  font-size:clamp(45px, 8.0vw, 134px);
  line-height:.9; letter-spacing:-.035em;
  color:var(--bone);
  max-width:14ch;
  text-transform:uppercase;
}
.page-hero h1 em{ color:var(--pulse); font-style:normal; text-shadow:0 0 28px hsl(184 90% 48% / .35); }
.page-hero__lede{
  margin-top:32px; max-width:54ch;
  font-size:17px; line-height:1.6; color:hsl(60 8% 96% / .68);
}

/* Generic light/dark content section helpers */
.section-light{ background:var(--bone); color:var(--ink); padding:clamp(100px, 14vh, 160px) 0; position:relative; }
.section-dark{  background:var(--ink); color:var(--bone); padding:clamp(100px, 14vh, 160px) 0; position:relative; }
.section-inner{ max-width:var(--max); margin:0 auto; padding:0 var(--gut); }
.section-eyebrow{
  font:500 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3);
  border-top:var(--rule); padding-top:14px; margin-bottom:18px;
  width:fit-content;
}
.section-dark .section-eyebrow{ color:hsl(60 8% 96% / .5); border-top:var(--rule-bone); }
.section-head{
  font-family:var(--display); font-weight:800; font-variation-settings:"opsz" 64;
  font-size:clamp(29px, 4.0vw, 70px); line-height:.98; letter-spacing:-.025em;
  max-width:18ch;
}
.section-head em{ color:var(--pulse); font-style:normal; }
.section-lede{
  margin-top:24px; max-width:56ch; font-size:16px; line-height:1.65;
  color:var(--ink-3);
}
.section-dark .section-lede{ color:hsl(60 8% 96% / .65); }

/* Pricing tier card */
.tier-grid{
  margin-top:60px;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
}
.tier{
  position:relative;
  border:1px solid hsl(220 14% 8% / .14);
  border-radius:14px;
  background:var(--bone);
  padding:34px 30px 30px;
  display:flex; flex-direction:column; gap:18px;
  transition:border-color .55s var(--ease), transform .55s var(--ease), box-shadow .55s var(--ease);
}
.tier:hover{
  border-color:var(--pulse);
  transform:translateY(-4px);
  box-shadow:0 30px 80px -25px hsl(184 90% 48% / .25);
}
.tier.is-feature{
  background:var(--ink); color:var(--bone);
  border-color:var(--pulse);
  box-shadow:0 30px 80px -25px hsl(184 90% 48% / .35);
}
.tier__num{
  font:500 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3);
}
.tier.is-feature .tier__num{ color:hsl(60 8% 96% / .5); }
.tier__name{
  font-family:var(--display); font-weight:800; font-variation-settings:"opsz" 36;
  font-size:clamp(22px, 2.1vw, 30px); line-height:1.04; letter-spacing:-.02em;
}
.tier__price{
  font-family:var(--display); font-weight:800; font-variation-settings:"opsz" 64;
  font-size:clamp(32px, 4.0vw, 58px); line-height:.86; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  margin-top:8px;
}
.tier__price small{
  font-family:var(--sans); font-weight:400; font-size:14px; letter-spacing:0;
  display:block; margin-top:6px; color:var(--ink-3);
}
.tier.is-feature .tier__price small{ color:hsl(60 8% 96% / .55); }
.tier__list{
  margin-top:auto; padding-top:18px;
  border-top:1px solid hsl(220 14% 8% / .12);
  display:flex; flex-direction:column; gap:10px;
  font-size:14.5px; line-height:1.5; color:var(--ink-3);
}
.tier.is-feature .tier__list{ border-top-color:hsl(60 8% 96% / .14); color:hsl(60 8% 96% / .72); }
.tier__list li{ list-style:none; position:relative; padding-left:20px; }
.tier__list li::before{
  content:""; position:absolute; left:0; top:.7em;
  width:8px; height:1px; background:var(--pulse);
}
.tier__cta{
  display:inline-flex; justify-content:space-between; align-items:center;
  padding:14px 18px; border-radius:999px;
  border:1px solid var(--ink); color:var(--ink);
  font:500 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  transition:background-color .35s var(--ease), color .35s var(--ease);
}
.tier__cta:hover{ background:var(--pulse); border-color:var(--pulse); color:var(--ink); }
.tier.is-feature .tier__cta{ border-color:var(--pulse); color:var(--pulse); }
.tier.is-feature .tier__cta:hover{ background:var(--pulse); color:var(--ink); }

/* Belief / value block (about + pricing pages) */
.belief-grid{
  margin-top:60px;
  display:grid; grid-template-columns:repeat(2, 1fr); gap:0;
  border-top:var(--rule);
}
.belief{
  border-bottom:var(--rule);
  border-right:var(--rule);
  padding:36px 32px 36px 0;
  min-height:200px;
}
.belief:nth-child(2n){ padding-left:32px; border-right:0; }
.belief__num{
  font:500 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:14px;
  display:flex; gap:14px; align-items:center;
}
.belief__num::after{
  content:""; flex:1; height:1px; background:hsl(220 14% 8% / .14);
}
.belief__title{
  font-family:var(--display); font-weight:800; font-variation-settings:"opsz" 36;
  font-size:clamp(18px, 1.8vw, 24px); line-height:1.1; letter-spacing:-.02em;
  margin-bottom:12px;
}
.belief__title em{ color:var(--pulse); font-style:normal; }
.belief__body{
  font-size:15px; line-height:1.65; color:var(--ink-3); max-width:42ch;
}

/* Schedule timeline (bookings + about) */
.schedule{
  margin-top:60px;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:0;
  border-top:var(--rule-bone);
}
.schedule .step{ grid-column:span 1; min-height:280px; }
.schedule .step:last-child{ border-right:0; }

/* Booking form card */
.book-card{
  margin-top:60px;
  background:var(--bone);
  border:1px solid hsl(220 14% 8% / .12);
  border-radius:18px;
  padding:48px 42px;
  display:grid; grid-template-columns:1fr 1fr; gap:48px;
  position:relative; overflow:hidden;
  box-shadow:0 40px 100px -40px hsl(184 90% 48% / .28);
}
.book-card__bg{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 70% at 100% 0%, hsl(184 90% 48% / .14), transparent 60%);
}
.book-card > *{ position:relative; z-index:1; }
.book-card > .book-card__bg{ position:absolute; inset:0; z-index:0; } /* the bg wash must never occupy a grid cell */
.book-card h2{
  font-family:var(--display); font-weight:800; font-variation-settings:"opsz" 64;
  font-size:clamp(26px, 2.9vw, 45px); line-height:1; letter-spacing:-.025em;
  text-transform:uppercase;
}
.book-card h2 em{ color:var(--pulse); font-style:normal; }
.book-card p{ margin-top:18px; font-size:15px; line-height:1.65; color:var(--ink-3); max-width:46ch; }
.book-card__panel{
  background:var(--ink); color:var(--bone);
  border-radius:14px;
  padding:30px;
  display:flex; flex-direction:column; gap:18px;
  position:relative; overflow:hidden;
}
.book-card__panel::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 80% at 100% 100%, hsl(184 90% 48% / .25), transparent 60%);
  pointer-events:none;
}
.book-card__panel > *{ position:relative; z-index:1; }
.book-card__row{
  display:flex; justify-content:space-between; align-items:baseline;
  font:500 11px/1.4 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:hsl(60 8% 96% / .55);
  border-bottom:1px solid hsl(60 8% 96% / .14);
  padding-bottom:12px;
}
.book-card__row b{ color:var(--bone); font-weight:500; font-family:var(--display); font-size:14px; letter-spacing:0; text-transform:none; }

/* Roster (about — small team / role cards) */
.roster{
  margin-top:60px;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
}
.roster-card{
  background:var(--bone-2);
  border:1px solid hsl(220 14% 8% / .1);
  border-radius:12px;
  padding:30px 26px 28px;
  display:flex; flex-direction:column; gap:14px;
  transition:border-color .35s var(--ease), transform .55s var(--ease);
}
.roster-card:hover{ border-color:var(--pulse); transform:translateY(-3px); }
.roster-card__role{
  font-family:var(--display); font-weight:800; font-variation-settings:"opsz" 32;
  font-size:24px; line-height:1.1; letter-spacing:-.015em;
}
.roster-card__role em{ color:var(--pulse); font-style:normal; }
.roster-card__body{ font-size:14.5px; line-height:1.6; color:var(--ink-3); }
.roster-card__caps{ display:flex; flex-wrap:wrap; gap:5px; margin-top:auto; padding-top:14px; border-top:1px solid hsl(220 14% 8% / .12); }
.roster-card__caps span{
  font:500 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3);
  padding:5px 9px;
  border:1px solid hsl(220 14% 8% / .14);
  border-radius:999px;
}

/* Faux-form preview list (bookings page) */
.book-fields{
  display:flex; flex-direction:column; gap:6px;
  font:500 11px/1.4 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:hsl(60 8% 96% / .55);
}
.book-fields span{
  display:flex; justify-content:space-between; padding:14px 0;
  border-bottom:1px solid hsl(60 8% 96% / .12);
}
.book-fields span:last-child{ border-bottom:0; }
.book-fields b{ color:var(--bone); font-weight:500; font-family:var(--sans); font-size:14px; letter-spacing:0; text-transform:none; }

@media (max-width: 980px){
  .tier-grid, .roster, .schedule{ grid-template-columns:1fr; }
  .belief-grid{ grid-template-columns:1fr; }
  .belief, .belief:nth-child(2n){ border-right:0; padding-left:0; padding-right:0; }
  .book-card{ grid-template-columns:1fr; padding:32px 24px; }
}

/* ──────────────────────────────────────────────────────── AGENTS — 3×2 stacked grid (replaces horizontal pin) */
.agents__grid{
  position:relative;
  max-width:var(--max); margin:0 auto;
  padding:clamp(48px, 7vh, 80px) var(--gut) clamp(80px, 12vh, 140px);
}
.agents__grid-inner{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
.agents__grid .agent{
  flex:none;
  height:auto; min-height:380px; max-height:none;
}
@media (max-width: 1100px){ .agents__grid-inner{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 700px){  .agents__grid-inner{ grid-template-columns:1fr; } }

/* ──────────────────────────────────────────────────────── COVERAGE — seamless white, scroll-driven video */
.map{
  background:#fefefe;             /* match video bg exactly */
  color:var(--ink);
  position:relative;
  border-top:1px solid hsl(220 14% 8% / .06);
  border-bottom:1px solid hsl(220 14% 8% / .06);
}
/* Coverage section is a normal one-screen section — no pin, no stage.
   Video plays once on viewport entry and freezes on the last frame. */
.map{
  padding:clamp(80px, 12vh, 140px) 0;
}
.map__viz{
  background:#fefefe;              /* seamless w/ section bg */
  border:0;                        /* no frame — let the video bleed into the page */
  box-shadow:none;
  border-radius:0;
}
.map__video{
  filter:none;                     /* don't tint — the video is the truth */
}
.map__viz-meta{
  background:hsl(60 8% 96% / .65);
  border-color:hsl(184 90% 48% / .25);
}
.map__readout{
  position:absolute; right:18px; top:18px; z-index:2;
  display:flex; flex-direction:column; align-items:flex-end; gap:6px;
  font:500 10.5px/1.2 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3);
  pointer-events:none;
}
.map__readout b{
  font-family:var(--display); font-weight:800;
  font-size:28px; letter-spacing:-.02em; line-height:1;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.map__bar{
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background:hsl(220 14% 8% / .06); z-index:3;
}
.map__bar i{
  display:block; height:100%; width:0%;
  background:var(--pulse);
  box-shadow:0 0 16px 0 var(--pulse);
}
@media (max-width: 980px){
  .map{ padding:60px 0; }
}

/* ──────────────────────────────────────────────────────── INTEGRATIONS grid (web design page) */
.integ-grid{
  margin-top:60px;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:0;
  border-top:var(--rule);
}
.integ{
  border-right:var(--rule);
  border-bottom:var(--rule);
  padding:28px 28px 30px 0;
  display:flex; flex-direction:column; gap:18px;
  min-height:240px;
  transition:background-color .35s var(--ease);
}
.integ:nth-child(2),.integ:nth-child(3),.integ:nth-child(4),
.integ:nth-child(6),.integ:nth-child(7),.integ:nth-child(8){ padding-left:28px; }
.integ:nth-child(4n){ border-right:0; }
.integ:nth-child(n+5){ border-bottom:0; }
.integ:hover{ background:var(--bone-2); }
.integ__cat{
  font:500 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3);
  display:flex; align-items:center; gap:10px;
}
.integ__cat::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--pulse);
  box-shadow:0 0 10px 0 var(--pulse);
}
.integ__list{
  list-style:none;
  display:flex; flex-direction:column; gap:8px;
  font-family:var(--display); font-weight:700; font-variation-settings:"opsz" 24;
  font-size:18px; line-height:1.2; letter-spacing:-.015em;
  color:var(--ink);
}
.integ__list li{ position:relative; }
.integ__list li::before{
  content:""; position:absolute; left:-14px; top:.5em;
  width:6px; height:1px; background:var(--ink-3);
  opacity:.4;
}
@media (max-width: 1100px){ .integ-grid{ grid-template-columns:repeat(2, 1fr); }
  .integ:nth-child(4n){ border-right:var(--rule); }
  .integ:nth-child(2n){ border-right:0; padding-left:28px; }
  .integ:nth-child(2n+1){ padding-left:0; }
  .integ:nth-child(n+5){ border-bottom:var(--rule); }
  .integ:nth-last-child(-n+2){ border-bottom:0; }
}
@media (max-width: 700px){ .integ-grid{ grid-template-columns:1fr; }
  .integ{ border-right:0; border-bottom:var(--rule); padding:24px 0; }
  .integ:last-child{ border-bottom:0; }
}


/* ───────────────────────────── AGENT TILES — expandable role grid (homepage) */
.agent-tiles{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:10px;
  align-items:start;
  margin-top:8px;
}
.agent-tile{
  position:relative;
  display:flex; flex-direction:column; justify-content:center;
  text-align:left;
  min-height:96px;
  padding:16px 16px 15px;
  border:1px solid hsl(60 8% 96% / .14);
  border-radius:12px;
  background:hsl(220 14% 12% / .5);
  color:var(--bone);
  font-family:inherit;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:border-color .4s var(--ease), transform .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.agent-tile:hover{ border-color:hsl(184 90% 48% / .5); transform:translateY(-2px); }
.agent-tile.is-open{ border-color:var(--pulse); background:hsl(220 14% 12% / .82); box-shadow:0 24px 60px -28px hsl(184 90% 48% / .42); }

.agent-tile__shine{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  background:linear-gradient(115deg, transparent 35%, hsl(184 90% 48% / .22) 50%, transparent 65%);
  transform:translateX(-120%);
}
.agent-tile:hover .agent-tile__shine{ opacity:1; animation:tileShine .85s var(--ease); }
@keyframes tileShine{ to{ transform:translateX(120%); } }

.agent-tile__face{ position:relative; z-index:1; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.agent-tile__name{
  font-family:var(--display); font-weight:700; font-variation-settings:"opsz" 24;
  font-size:16px; line-height:1.14; letter-spacing:-.01em;
}
.agent-tile__plus{ position:relative; flex:none; width:13px; height:13px; margin-top:3px; opacity:.5; transition:opacity .4s var(--ease); }
.agent-tile__plus::before, .agent-tile__plus::after{ content:""; position:absolute; background:var(--pulse); border-radius:1px; }
.agent-tile__plus::before{ top:5.5px; left:0; width:13px; height:2px; }
.agent-tile__plus::after{ top:0; left:5.5px; width:2px; height:13px; transition:transform .4s var(--ease); }
.agent-tile:hover .agent-tile__plus{ opacity:.9; }
.agent-tile.is-open .agent-tile__plus{ opacity:1; }
.agent-tile.is-open .agent-tile__plus::after{ transform:scaleY(0); }

.agent-tile__detail{
  position:relative; z-index:1;
  display:grid; grid-template-rows:0fr;
  opacity:0; margin-top:0;
  transition:grid-template-rows .45s var(--ease), opacity .35s var(--ease), margin-top .45s var(--ease);
}
.agent-tile.is-open .agent-tile__detail{ grid-template-rows:1fr; opacity:1; margin-top:14px; }
.agent-tile__inner{ min-height:0; overflow:hidden; }

.agent-tile__caps{ display:flex; flex-wrap:wrap; gap:5px; }
.agent-tile__caps i{ font-style:normal; font:500 9.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:hsl(60 8% 96% / .72); border:1px solid hsl(60 8% 96% / .18); padding:5px 7px; border-radius:999px; }
.agent-tile__usp{ display:block; margin-top:11px; font-size:13px; line-height:1.5; color:hsl(60 8% 96% / .72); }
.agent-tile__foot{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:13px; padding-top:11px; border-top:1px solid hsl(60 8% 96% / .12); }
.agent-tile__tier{ font:500 9.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:hsl(60 8% 96% / .5); }
.agent-tile__price{ font-family:var(--display); font-weight:700; font-size:20px; line-height:1; color:var(--pulse); letter-spacing:-.01em; }
.agent-tile__price small{ font-size:11px; color:hsl(60 8% 96% / .5); font-weight:500; }

@media (max-width:1100px){ .agent-tiles{ grid-template-columns:repeat(4, 1fr); } }
@media (max-width:780px){  .agent-tiles{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:520px){  .agent-tiles{ grid-template-columns:repeat(2, 1fr); } .agent-tile__name{ font-size:14px; } }
@media (prefers-reduced-motion: reduce){ .agent-tile:hover .agent-tile__shine{ animation:none; } .agent-tile__detail{ transition:none; } }

/* ───────────────────────────── PRINCIPLES — card imagery */
.principle__img{
  margin:0 0 22px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid hsl(220 14% 8% / .12);
  aspect-ratio:4 / 3;
  background:hsl(220 14% 8% / .04);
}
.principle__img img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.01);
  transition:transform .8s var(--ease);
}
.principle:hover .principle__img img{ transform:scale(1.05); }

/* ───────────────────────────── SAMPLES — scrollable site cards (homepage) */
.samples{
  background:var(--ink); color:var(--bone);
  padding:clamp(80px, 12vh, 140px) 0;
  position:relative;
}
.samples .section-eyebrow{ color:hsl(184 90% 48%); }
.samples__head{
  font-family:var(--display); font-weight:800; font-variation-settings:"opsz" 76;
  font-size:clamp(29px, 3.7vw, 61px); line-height:1.02; letter-spacing:-.022em;
  text-transform:uppercase; margin-top:18px;
}
.samples__head em{ color:hsl(184 90% 48%); font-style:normal; }
.samples__lede{
  margin-top:20px; max-width:52ch; font-size:15.5px; line-height:1.65;
  color:hsl(60 8% 96% / .6);
}
.samples__grid{
  margin-top:54px;
  display:grid; grid-template-columns:repeat(2, 1fr); gap:20px;
}
.sample{
  margin:0; border:1px solid hsl(60 8% 96% / .14); border-radius:14px;
  background:hsl(220 14% 12% / .55); overflow:hidden;
  transition:border-color .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.sample:hover{
  border-color:hsl(184 90% 48% / .55); transform:translateY(-4px);
  box-shadow:0 30px 80px -30px hsl(184 90% 48% / .3);
}
.sample__chrome{
  display:flex; align-items:center; gap:6px;
  padding:11px 14px; border-bottom:1px solid hsl(60 8% 96% / .1);
}
.sample__chrome i{ width:8px; height:8px; border-radius:50%; background:hsl(60 8% 96% / .18); }
.sample__chrome span{
  margin-left:10px; flex:1;
  font:500 10px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:hsl(60 8% 96% / .45);
  background:hsl(60 8% 96% / .06); border-radius:6px; padding:6px 10px;
}
/* 16:9 iframe frame — scaler set by ResizeObserver in Samples.astro */
.sample__view{
  aspect-ratio:16/9; overflow:hidden; position:relative;
}
.sample__iframe-scaler{
  position:absolute; top:0; left:0;
  width:1280px; height:720px;
  transform-origin:0 0;
  pointer-events:none;
}
.sample__iframe-scaler iframe{
  width:1280px; height:720px;
  border:0; display:block;
}
/* transparent clickable overlay so cursor interaction works */
.sample__overlay{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:flex-end; justify-content:flex-end;
  padding:10px;
}
.sample__overlay::after{
  content:"↗ Visit"; font:500 9px/1 var(--mono); letter-spacing:.18em;
  text-transform:uppercase; color:hsl(184 90% 48%);
  background:hsl(220 14% 8% / .8); padding:6px 10px; border-radius:999px;
  opacity:0; transition:opacity .3s var(--ease);
}
.sample:hover .sample__overlay::after{ opacity:1; }
.sample__cap{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:14px 16px;
  border-top:1px solid hsl(60 8% 96% / .1);
}
.sample__cap b{
  font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:-.01em;
}
.sample__cap span{
  font:500 9.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:hsl(60 8% 96% / .45);
}
@media (max-width:900px){ .samples__grid{ grid-template-columns:1fr; } }

/* ───────────────────────────── GALLERY — gold-standard template browser */
.gallery{
  background:var(--ink); color:var(--bone);
  padding:clamp(60px, 9vh, 110px) 0 clamp(80px, 12vh, 140px);
}
.gallery__bar{
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  margin-bottom:34px;
}
.gallery__filters{ display:flex; flex-wrap:wrap; gap:7px; max-width:78%; }
.gfilter{
  font:500 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:hsl(60 8% 96% / .6);
  background:hsl(220 14% 12% / .6);
  border:1px solid hsl(60 8% 96% / .14);
  border-radius:999px; padding:9px 13px; cursor:pointer;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.gfilter i{ font-style:normal; color:hsl(184 90% 48% / .7); padding-left:4px; }
.gfilter:hover{ border-color:hsl(184 90% 48% / .5); color:var(--bone); }
.gfilter.is-active{ border-color:var(--pulse); color:var(--pulse); }
.gallery__count{
  font:500 11px/1.5 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:hsl(60 8% 96% / .45); white-space:nowrap; padding-top:9px;
}
.gallery__count b{ color:var(--pulse); font-weight:500; }
.gallery__grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;
}
.gcard{
  border:1px solid hsl(60 8% 96% / .12); border-radius:12px;
  background:hsl(220 14% 12% / .5); overflow:hidden;
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.gcard:hover{ border-color:hsl(184 90% 48% / .55); transform:translateY(-3px); }
.gcard__thumb{ aspect-ratio:16/9; overflow:hidden; background:hsl(220 14% 10%); }
.gcard__thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s var(--ease); }
.gcard:hover .gcard__thumb img{ transform:scale(1.04); }
.gcard__meta{ padding:12px 14px 13px; }
.gcard__title{
  font-family:var(--display); font-weight:700; font-size:13.5px; line-height:1.25;
  letter-spacing:-.01em; margin-bottom:8px;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.gcard__tags{ display:flex; flex-wrap:wrap; gap:4px; }
.gcard__tags span{
  font:500 8.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:hsl(60 8% 96% / .5);
  border:1px solid hsl(60 8% 96% / .14); border-radius:999px; padding:4px 7px;
}
.gcard__tags .gcard__prof{ color:hsl(184 90% 48% / .85); border-color:hsl(184 90% 48% / .3); }
.gcard__palette{ display:flex; gap:4px; margin-top:9px; }
.gcard__palette i{ width:14px; height:6px; border-radius:2px; display:block; }
@media (max-width:1200px){ .gallery__grid{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:860px){ .gallery__grid{ grid-template-columns:repeat(2, 1fr); } .gallery__filters{ max-width:100%; } .gallery__bar{ flex-direction:column; } }
@media (max-width:520px){ .gallery__grid{ grid-template-columns:1fr; } }

/* ───────────────────────────── NAV CART — order button + badge */
.cart-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:none; border:1px solid hsl(60 8% 96% / .22); border-radius:999px;
  padding:9px 14px; cursor:pointer;
  font:500 10px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:inherit; transition:border-color .3s var(--ease);
}
.cart-btn:hover{ border-color:var(--pulse); }
.cart-btn[hidden]{ display:none; }
.cart-btn__badge{
  min-width:16px; height:16px; border-radius:5px;
  background:var(--pulse); color:var(--ink);
  font:600 9.5px/16px var(--mono); text-align:center; padding:0 4px;
}
.cart-btn__badge.is-pulse{ animation:badgePulse .5s var(--ease); }
@keyframes badgePulse{ 0%{transform:scale(1);} 40%{transform:scale(1.3);} 100%{transform:scale(1);} }

/* ───────────────────────────── CART DRAWER */
.cart-overlay{
  position:fixed; inset:0; z-index:980;
  background:hsl(220 14% 8% / .55); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .45s var(--ease);
}
.cart-overlay.is-open{ opacity:1; pointer-events:auto; }
.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:990;
  width:min(440px, 100vw);
  background:var(--ink-2); color:var(--bone);
  border-left:var(--rule-bone);
  display:flex; flex-direction:column;
  transform:translateX(102%); transition:transform .6s var(--ease-out-expo);
  outline:none;
}
.cart-drawer.is-open{ transform:translateX(0); }
.cart-drawer__head{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:26px 26px 18px; border-bottom:var(--rule-bone);
}
.cart-drawer__eyebrow{
  font:500 10px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase;
  color:var(--pulse); margin-bottom:10px;
}
.cart-drawer__title{
  font-family:var(--display); font-weight:800; font-size:26px;
  letter-spacing:-.02em; text-transform:uppercase;
}
.cart-drawer__close{
  background:none; border:0; color:var(--bone); cursor:pointer;
  font-size:26px; line-height:1; width:44px; height:44px; margin:-8px -10px 0 0;
  transition:color .3s var(--ease);
}
.cart-drawer__close:hover{ color:var(--pulse); }
.cart-drawer__notice{
  margin:14px 26px 0; padding:10px 14px;
  background:hsl(184 90% 48% / .12); border:1px solid hsl(184 90% 48% / .3); border-radius:8px;
  font:500 10.5px/1.5 var(--mono); letter-spacing:.06em; color:var(--bone);
}
.cart-drawer__items{ flex:1; overflow-y:auto; padding:10px 26px; }
.cart-row{
  display:flex; justify-content:space-between; gap:14px;
  padding:16px 0; border-bottom:var(--rule-bone);
}
.cart-row__main b{
  display:block; font-family:var(--display); font-weight:700; font-size:15px;
  letter-spacing:-.01em;
}
.cart-row__sub{
  display:block; margin-top:5px;
  font:500 9.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:hsl(60 8% 96% / .45);
}
.cart-row__stepper{
  display:inline-flex; align-items:center; gap:10px; margin-top:9px;
  font:500 12px/1 var(--mono);
}
.cart-row__stepper button{
  width:24px; height:24px; border:1px solid hsl(60 8% 96% / .25); border-radius:6px;
  background:none; color:var(--bone); cursor:pointer; font-size:13px; line-height:1;
}
.cart-row__stepper button:hover{ border-color:var(--pulse); }
.cart-row__side{ display:flex; align-items:flex-start; gap:10px; }
.cart-row__price{
  font:500 12px/1.4 var(--mono); color:var(--pulse); white-space:nowrap; text-align:right;
}
.cart-row__remove{
  background:none; border:0; color:hsl(60 8% 96% / .4); cursor:pointer;
  font-size:17px; line-height:1; padding:0 2px;
  transition:color .3s var(--ease);
}
.cart-row__remove:hover{ color:var(--bone); }
.cart-row__edit{
  display:block; padding:6px 0 12px; border-bottom:var(--rule-bone);
  font:500 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:hsl(60 8% 96% / .55); text-decoration:none;
}
.cart-row__edit:hover{ color:var(--pulse); }
.cart-attach{
  margin:16px 0; padding:14px;
  border:1px dashed hsl(184 90% 48% / .4); border-radius:10px;
  font:400 13px/1.5 var(--sans); color:hsl(60 8% 96% / .8);
}
.cart-attach a{ color:var(--pulse); }
.cart-attach div{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.cart-attach button{
  border:1px solid hsl(60 8% 96% / .25); border-radius:999px; background:none;
  color:var(--bone); cursor:pointer; padding:8px 13px;
  font:500 10px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.cart-attach button:hover{ border-color:var(--pulse); color:var(--pulse); }
.cart-hint{
  padding:12px 0; font:500 10.5px/1.5 var(--mono); letter-spacing:.08em;
  color:hsl(60 8% 96% / .5);
}
.cart-hint a{ color:var(--pulse); text-decoration:none; }
.cart-empty{ padding:34px 0; }
.cart-empty p{ font:400 14.5px/1.65 var(--sans); color:hsl(60 8% 96% / .7); margin-bottom:14px; }
.cart-empty p b{ font-family:var(--display); font-size:18px; color:var(--bone); }
.cart-empty__links{ display:flex; gap:18px; margin-top:20px; }
.cart-empty__links a{
  font:500 10.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--pulse); text-decoration:none;
}
.cart-drawer__foot{ padding:18px 26px 26px; border-top:var(--rule-bone); }
.cart-totals{ margin-bottom:16px; }
.cart-totals__row{
  display:flex; justify-content:space-between; align-items:baseline; padding:7px 0;
}
.cart-totals__row span{
  font:500 10px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:hsl(60 8% 96% / .55);
}
.cart-totals__row b{
  font-family:var(--display); font-weight:800; font-size:22px; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; color:var(--pulse);
}
.cart-totals__micro{
  margin-top:8px; font:500 9.5px/1.5 var(--mono); letter-spacing:.1em;
  text-transform:uppercase; color:hsl(60 8% 96% / .4);
}
.cart-cta{
  display:flex; justify-content:center; align-items:center; gap:12px;
  background:var(--pulse); color:var(--ink); border-radius:999px;
  padding:17px 26px; text-decoration:none;
  font:500 12px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  transition:transform .3s var(--ease);
}
.cart-cta:hover{ transform:translateY(-2px); }
.cart-cta.is-blocked{
  background:none; border:1px solid hsl(60 8% 96% / .25); color:hsl(60 8% 96% / .5);
  cursor:not-allowed; transform:none;
}
.cart-alt{
  display:block; text-align:center; margin-top:13px;
  font:500 10.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:hsl(60 8% 96% / .55); text-decoration:none;
}
.cart-alt:hover{ color:var(--pulse); }
.cart-honesty{
  margin-top:14px; text-align:center;
  font:500 9.5px/1.6 var(--mono); letter-spacing:.08em;
  color:hsl(60 8% 96% / .4);
}
@media (prefers-reduced-motion: reduce){
  .cart-drawer, .cart-overlay{ transition-duration:.01s; }
  .cart-btn__badge.is-pulse{ animation:none; }
}

/* ───────────────────────────── ADD-TO-ORDER buttons on cards */
.tier__cta-row{ margin-top:auto; display:flex; flex-direction:column; gap:9px; }
a.tier__add{
  display:flex; justify-content:center; align-items:center;
  background:var(--ink); color:var(--bone); border-radius:999px;
  padding:15px 22px; text-decoration:none;
  font:500 11px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  transition:background .3s var(--ease), color .3s var(--ease);
}
a.tier__add:hover, a.tier__add.is-added{ background:var(--pulse); color:var(--ink); }
.tier.is-feature a.tier__add{ background:var(--pulse); color:var(--ink); }
.tier.is-feature a.tier__add:hover{ background:var(--bone); }
.tier__alt{
  text-align:center; font:500 9.5px/1 var(--mono); letter-spacing:.14em;
  text-transform:uppercase; color:inherit; opacity:.55; text-decoration:none;
}
.tier__alt:hover{ opacity:1; }
.belief__add{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  font:500 10.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--pulse); text-decoration:none;
  border:1px solid hsl(184 90% 48% / .4); border-radius:999px; padding:10px 16px;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.belief__add:hover, .belief__add.is-added{ background:var(--pulse); color:var(--ink); border-color:var(--pulse); }
.belief__features{
  margin:14px 0 0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:7px;
}
.belief__features li{
  position:relative; padding-left:20px;
  font:400 13.5px/1.5 var(--sans);
}
.belief__features li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:9px; height:2px; background:var(--pulse);
}

/* ───────────────────────────── COMPARE TABLE — pricing § What's included */
.compare{ margin-top:54px; border-top:var(--rule-bone); overflow-x:auto; }
.compare table{ width:100%; border-collapse:collapse; min-width:760px; }
.compare th, .compare td{
  padding:16px 18px; text-align:left; vertical-align:top;
  border-bottom:1px solid hsl(60 8% 96% / .1);
  font:400 13.5px/1.55 var(--sans); color:hsl(60 8% 96% / .78);
}
.compare th{ padding-top:24px; }
.compare thead .compare__tier{
  font-family:var(--display); font-weight:800; font-size:17px; letter-spacing:-.01em;
  text-transform:uppercase; color:var(--bone);
}
.compare thead .compare__price{
  display:block; margin-top:6px;
  font:500 11px/1 var(--mono); letter-spacing:.12em; color:var(--pulse);
}
.compare thead a.compare__add{
  display:inline-block; margin-top:12px; padding:9px 15px;
  border:1px solid hsl(184 90% 48% / .45); border-radius:999px;
  font:500 9.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--pulse); text-decoration:none;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.compare thead a.compare__add:hover, .compare thead a.compare__add.is-added{ background:var(--pulse); color:var(--ink); }
.compare tbody th{
  font:500 10px/1.5 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:hsl(60 8% 96% / .45); width:140px;
}
.compare .is-feature-col{ background:hsl(184 90% 48% / .06); }
.compare__note{
  margin-top:18px; font:500 10px/1.6 var(--mono); letter-spacing:.1em;
  text-transform:uppercase; color:hsl(60 8% 96% / .45);
}

/* ───────────────────────────── BUILD RAILS — pricing § Inside each build */
.build-rail{ margin-top:54px; border-top:var(--rule); padding-top:34px; }
.build-rail + .build-rail{ margin-top:44px; }
.build-rail__head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:14px 26px; margin-bottom:8px;
}
.build-rail__tier{
  font:500 10.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--pulse);
}
.build-rail__timeline{
  font:500 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  border:1px solid hsl(220 14% 8% / .25); border-radius:999px; padding:7px 13px;
}
.build-rail__audience{
  max-width:62ch; font:400 14.5px/1.6 var(--sans); color:hsl(220 14% 8% / .7);
  margin-bottom:8px;
}

/* ───────────────────────────── AGENT DOSSIERS — agents § Inside each tier */
.dossier{
  border:var(--rule); border-radius:16px; padding:clamp(24px, 3.4vw, 44px);
  margin-top:26px; background:hsl(60 8% 96% / .55);
}
.dossier__head{
  display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:10px;
}
.dossier__num{
  font:500 10.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--pulse);
}
.dossier__title{
  font-family:var(--display); font-weight:800; font-size:clamp(22px, 2.5vw, 34px);
  letter-spacing:-.02em; text-transform:uppercase; margin-top:14px;
}
.dossier__title em{ color:var(--pulse); font-style:normal; }
.dossier__cols{
  display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(20px, 3vw, 44px); margin-top:20px;
}
.dossier__label{
  font:500 9.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:hsl(220 14% 8% / .45); margin:18px 0 9px;
}
.dossier p{ font:400 14.5px/1.65 var(--sans); color:hsl(220 14% 8% / .78); max-width:64ch; }
.dossier ul{
  list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:7px;
}
.dossier ul li{
  position:relative; padding-left:20px; font:400 13.5px/1.5 var(--sans);
  color:hsl(220 14% 8% / .78);
}
.dossier ul li::before{
  content:""; position:absolute; left:0; top:.62em; width:9px; height:2px; background:var(--pulse);
}
.dossier__caps{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.dossier__caps .cap{
  font:500 9.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  border:1px solid hsl(220 14% 8% / .2); border-radius:999px; padding:7px 12px;
}
.dossier__not{
  margin-top:18px; padding:16px 18px; border-left:2px solid var(--pulse);
  background:hsl(220 14% 8% / .04);
  font:400 13.5px/1.6 var(--sans); color:hsl(220 14% 8% / .72);
}
.dossier__ctas{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:22px;
}
a.dossier__add{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--ink); color:var(--bone); border-radius:999px; padding:14px 24px;
  font:500 11px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; transition:background .3s var(--ease), color .3s var(--ease);
}
a.dossier__add:hover, a.dossier__add.is-added{ background:var(--pulse); color:var(--ink); }
.dossier__alt{
  font:500 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:hsl(220 14% 8% / .55); text-decoration:none;
}
.dossier__alt:hover{ color:var(--pulse); }
.dossier__small{
  width:100%; font:500 9.5px/1.5 var(--mono); letter-spacing:.1em;
  text-transform:uppercase; color:hsl(220 14% 8% / .45);
}
@media (max-width:900px){ .dossier__cols{ grid-template-columns:1fr; } }

/* ───────────────────────────── CHECKOUT */
.checkout-grid{
  display:grid; grid-template-columns:1fr 420px; gap:clamp(28px, 4vw, 64px);
  margin-top:54px;
}
.checkout-grid[hidden]{ display:none; }
.checkout-grid.is-empty .checkout-form{ display:none; }
.checkout-form label{
  display:block; margin-bottom:20px;
}
.checkout-form label > span{
  display:block; margin-bottom:8px;
  font:500 10px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:hsl(220 14% 8% / .55);
}
.checkout-form input, .checkout-form textarea{
  width:100%; padding:14px 16px;
  background:hsl(60 8% 96% / .7); border:1px solid hsl(220 14% 8% / .18); border-radius:10px;
  font:400 15px/1.5 var(--sans); color:var(--ink);
  transition:border-color .3s var(--ease);
}
.checkout-form input:focus, .checkout-form textarea:focus{
  outline:none; border-color:var(--pulse);
}
.checkout-form .is-invalid{ border-color:hsl(184 90% 38%); background:hsl(184 90% 48% / .07); }
.checkout-form .field-msg[hidden]{ display:none; }
.checkout-form .field-msg{
  display:block; margin-top:6px;
  font:500 10px/1.4 var(--mono); letter-spacing:.08em; color:hsl(184 80% 30%);
}
.checkout-form textarea{ min-height:120px; resize:vertical; }
.checkout-form .submit-msg{
  margin-top:12px; font:500 11px/1.6 var(--mono); letter-spacing:.06em; color:hsl(184 80% 30%);
}
.checkout-form button[disabled]{ opacity:.45; cursor:not-allowed; }
.checkout-summary{
  position:sticky; top:90px; align-self:start;
  background:var(--ink-2); color:var(--bone); border-radius:16px;
  padding:26px;
}
.checkout-summary .section-eyebrow{ color:var(--pulse); }
.checkout-summary .cart-totals__row b{ color:var(--pulse); }
.checkout-honesty{
  margin-top:14px; font:500 9.5px/1.6 var(--mono); letter-spacing:.08em;
  color:hsl(220 14% 8% / .5);
}
.order-pre{
  margin-top:26px; padding:20px;
  background:var(--ink-2); color:var(--bone); border-radius:12px;
  font:400 12px/1.7 var(--mono); white-space:pre-wrap; word-break:break-word;
}
.order-actions{ display:flex; align-items:center; gap:22px; margin-top:18px; flex-wrap:wrap; }
.order-actions .cart-alt{ color:hsl(220 14% 8% / .6); margin-top:0; }
.order-actions .cart-alt:hover{ color:var(--pulse); }
.order-steps{ margin-top:44px; }
@media (max-width:960px){
  .checkout-grid{ grid-template-columns:1fr; }
  .checkout-summary{ position:static; order:-1; }
}

/* gallery card add-to-order link */
.gcard__add{
  display:inline-flex; align-items:center; gap:8px; margin-top:12px;
  font:500 9.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--pulse); text-decoration:none;
  border:1px solid hsl(184 90% 48% / .35); border-radius:999px; padding:8px 13px;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.gcard__add:hover, .gcard__add.is-added{ background:var(--pulse); color:var(--ink); }

/* static-screenshot fallback inside a sample frame (16:9 crop from top) */
.sample__shot{ position:absolute; inset:0; overflow:hidden; }
.sample__shot img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; }

/* ───────────────────────────── AGENT ROSTER (agents page) — tile extensions */
.agent-tile__face-right{ display:inline-flex; align-items:center; gap:10px; flex:none; }
.agent-tile__face-price{
  font:600 11px/1 var(--mono); letter-spacing:.06em; color:hsl(184 90% 48% / .85);
  white-space:nowrap;
}
.agent-tile__face-price small{ color:hsl(60 8% 96% / .45); font-weight:500; }
.agent-tile__usp b{ color:var(--bone); font-weight:600; }
.agent-tile__text{
  display:block; margin-top:9px; font-size:13px; line-height:1.6;
  color:hsl(60 8% 96% / .66);
}
.agent-tile__best{
  display:block; margin-top:11px;
  font:500 10px/1.5 var(--mono); letter-spacing:.08em; text-transform:uppercase;
  color:hsl(60 8% 96% / .5);
}
.agent-tile__caps{ margin-top:12px; }
a.agent-tile__add{
  display:inline-flex; align-items:center; gap:8px; margin-top:13px;
  font:500 10.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--pulse); text-decoration:none;
  border:1px solid hsl(184 90% 48% / .4); border-radius:999px; padding:10px 16px;
  transition:background .3s var(--ease), color .3s var(--ease);
}
a.agent-tile__add:hover, a.agent-tile__add.is-added{ background:var(--pulse); color:var(--ink); }
.agents__footnote{
  margin-top:26px;
  font:500 10px/1.7 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:hsl(60 8% 96% / .45); max-width:72ch;
}
.agents__footnote a{ color:var(--pulse); text-decoration:none; }

/* ───────────────────────────── PACK BUILDER (social page) */
.packb{
  margin-top:54px; border:var(--rule); border-radius:16px;
  padding:clamp(20px, 3vw, 36px); background:hsl(60 8% 96% / .55);
}
.packb__quality{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:26px; }
.packb__grade{
  flex:1; min-width:230px; text-align:left; cursor:pointer;
  border:1px solid hsl(220 14% 8% / .2); border-radius:12px;
  background:none; padding:16px 18px;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.packb__grade b{
  display:block; font-family:var(--display); font-weight:700; font-size:15px;
  letter-spacing:-.01em; text-transform:uppercase;
}
.packb__grade span{
  display:block; margin-top:6px;
  font:400 12.5px/1.45 var(--sans); color:hsl(220 14% 8% / .6);
}
.packb__grade.is-active{
  border-color:var(--pulse); background:hsl(184 90% 48% / .07);
}
.packb__grade.is-active b{ color:hsl(184 78% 30%); }
.packb__row{
  display:grid; grid-template-columns:1fr 90px 120px 90px;
  gap:16px; align-items:center;
  padding:16px 0; border-top:var(--rule);
}
.packb__info b{
  display:block; font-family:var(--display); font-weight:700; font-size:15.5px;
  letter-spacing:-.01em;
}
.packb__info span{
  display:block; margin-top:4px;
  font:400 12.5px/1.45 var(--sans); color:hsl(220 14% 8% / .6);
}
.packb__unit{
  font:500 11px/1 var(--mono); letter-spacing:.08em; color:hsl(220 14% 8% / .55);
  white-space:nowrap;
}
.packb__qty{
  display:inline-flex; align-items:center; gap:12px; justify-self:center;
  font:500 14px/1 var(--mono);
}
.packb__qty button{
  width:28px; height:28px; border:1px solid hsl(220 14% 8% / .25); border-radius:7px;
  background:none; color:var(--ink); cursor:pointer; font-size:15px; line-height:1;
  transition:border-color .3s var(--ease);
}
.packb__qty button:hover{ border-color:var(--pulse); }
.packb__line{
  font:600 13px/1 var(--mono); color:hsl(184 78% 30%); text-align:right;
  font-variant-numeric:tabular-nums;
}
.packb__foot{ border-top:var(--rule); padding-top:22px; margin-top:6px; }
.packb__total{
  display:flex; justify-content:space-between; align-items:baseline; margin-bottom:18px;
}
.packb__total span{
  font:500 10px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:hsl(220 14% 8% / .55);
}
.packb__total b{
  font-family:var(--display); font-weight:800; font-size:30px; letter-spacing:-.01em;
  color:hsl(184 78% 30%); font-variant-numeric:tabular-nums;
}
.packb__add{ border:0; cursor:pointer; }
.packb__add[disabled]{ opacity:.45; cursor:not-allowed; }
.packb__note{
  margin-top:16px;
  font:500 9.5px/1.8 var(--mono); letter-spacing:.08em; text-transform:uppercase;
  color:hsl(220 14% 8% / .45);
}
@media (max-width:760px){
  .packb__row{ grid-template-columns:1fr auto; }
  .packb__unit{ grid-column:1; }
  .packb__line{ grid-column:2; }
}

/* ───────────────────────────── FLEET cards — icon + price/add foot */
.agent__icon{ flex:none; width:30px; height:30px; color:var(--pulse); opacity:.85; }
.agent__icon svg{ width:100%; height:100%; display:block; stroke-width:1.5; }
.agent__foot{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:16px; padding-top:14px; border-top:1px solid hsl(60 8% 96% / .12);
}
.agent__price{
  font-family:var(--display); font-weight:700; font-size:21px; line-height:1;
  color:var(--pulse); letter-spacing:-.01em; white-space:nowrap;
}
.agent__price small{ font-size:11px; color:hsl(60 8% 96% / .5); font-weight:500; }
a.agent__add{
  display:inline-flex; align-items:center; gap:8px;
  font:500 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--pulse); text-decoration:none;
  border:1px solid hsl(184 90% 48% / .4); border-radius:999px; padding:10px 15px;
  white-space:nowrap;
  transition:background .3s var(--ease), color .3s var(--ease);
}
a.agent__add:hover, a.agent__add.is-added{ background:var(--pulse); color:var(--ink); }

/* builder minimum-assets line */
.packb__min{
  margin-top:12px;
  font:500 10.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:hsl(220 14% 8% / .5);
}
.packb__min.is-ok{ color:hsl(184 78% 30%); }

/* ───────────────────────────── NAV — solid surface once scrolled
   (the difference-blend nav is for the hero only; scrolled content was
   colliding with brand/menu text on every page) */
.nav.is-solid{
  mix-blend-mode:normal;
  background:hsl(220 14% 8% / .9);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:var(--bone);
  border-bottom:1px solid hsl(60 8% 96% / .08);
}
.nav.is-solid.is-light{ color:var(--bone); }

/* ───────────────────────────── SCHEDULE on light sections — readable ink
   (.step__num/.step__title are bone for dark sections; light needs ink) */
.section-light .schedule{ border-top:var(--rule); }
.section-light .step{ border-right:var(--rule); }
.section-light .step__num, .section-light .step__title{ color:var(--ink); }
.section-light .step__body{ color:hsl(220 14% 8% / .7); }
.section-light .step__meta{ color:hsl(220 14% 8% / .5); }
@media (max-width: 980px){
  .section-light .step{ border-right:0; border-bottom:var(--rule); }
  .section-light .step:last-child{ border-bottom:0; }
}

/* ═══════════════════════════ AUDIT FIXES — phase 1 (polish) ═══════════════ */

/* dossier capability chips were white-on-white (global .cap is bone) */
.dossier__caps .cap{ color:hsl(220 14% 8% / .72); border-color:hsl(220 14% 8% / .22); }

/* scroll-scrub overlay: legible over busy mid-tone frames */
.reveal__copy{
  padding:22px 26px 22px 0;
}
.reveal__copy::before{
  content:""; position:absolute; inset:-20px -40px -20px -60px; z-index:-1;
  background:linear-gradient(90deg, hsl(220 14% 8% / .62), hsl(220 14% 8% / .35) 60%, transparent);
  border-radius:12px; filter:blur(2px);
}
.reveal__copy h2{ color:var(--bone); }
.reveal__copy p{ color:hsl(60 8% 96% / .8); }

/* cyan rationing: card-level titles drop the cyan word; section heads keep it */
.belief__title em{ color:inherit !important; font-style:normal; }

/* gallery: 3-up, serial eyebrows, hover lift, sticky filter bar, calmer CTA */
.gallery__grid{ grid-template-columns:repeat(3, 1fr); }
@media (max-width:1200px){ .gallery__grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:700px){ .gallery__grid{ grid-template-columns:1fr; } }
.gcard{ transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.gcard:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 60px -28px hsl(184 90% 48% / .35), 0 0 0 1px hsl(184 90% 48% / .45);
}
.gcard__serial{
  font:500 9px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:hsl(184 90% 48% / .75); margin-bottom:7px;
}
.gallery__bar{
  position:sticky; top:58px; z-index:60;
  background:hsl(220 14% 8% / .92); backdrop-filter:blur(10px);
  padding:14px 0; margin:0 calc(-1 * var(--gut)); padding-left:var(--gut); padding-right:var(--gut);
}

/* social bundle high-quality option: equal-weight ghost button */
a.tier__add--ghost{
  background:none; border:1px solid hsl(184 90% 48% / .45); color:inherit;
}
a.tier__add--ghost:hover, a.tier__add--ghost.is-added{ background:var(--pulse); color:var(--ink); border-color:var(--pulse); }
.tier.is-feature a.tier__add--ghost{ background:none; color:var(--bone); }
.tier.is-feature a.tier__add--ghost:hover{ background:var(--pulse); color:var(--ink); }

/* pack builder reset link */
.packb__reset{
  margin-left:10px; color:hsl(184 78% 30%); text-decoration:none;
  letter-spacing:.14em;
}
.packb__reset:hover{ text-decoration:underline; }

/* web integrations: text lists → mono chips (markup untouched) */
.integ__list{ display:flex; flex-wrap:wrap; gap:7px; list-style:none; padding:0; }
.integ__list li{
  font:500 10px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:hsl(220 14% 8% / .65);
  border:1px solid hsl(220 14% 8% / .18); border-radius:999px; padding:7px 12px;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.integ__list li:hover{ border-color:var(--pulse); color:hsl(184 78% 30%); }

/* pricing: fixed roman mini-index (wide screens only) */
.page-index{
  position:fixed; right:18px; top:50%; transform:translateY(-50%); z-index:70;
  display:flex; flex-direction:column; gap:10px;
}
.page-index a{
  font:500 9px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:hsl(220 4% 50% / .8); text-decoration:none; text-align:right;
  transition:color .3s var(--ease);
}
.page-index a:hover{ color:var(--pulse); }
@media (max-width:1340px){ .page-index{ display:none; } }

/* ═══════════════════════════ AUDIT FIXES — phase 2 (screenshot imagery) ═══ */

/* sample posters paint instantly under the live iframes */
.sample__shot{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.sample__shot img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.sample__iframe-scaler{ z-index:1; background:transparent; }

/* tier card thumbnails (web + pricing) */
.tier__thumb{
  margin:-6px 0 18px; border-radius:10px; overflow:hidden;
  border:1px solid hsl(220 14% 8% / .12);
  aspect-ratio:16/10;
}
.tier__thumb img{
  width:100%; height:100%; object-fit:cover; object-position:top; display:block;
  filter:saturate(.92);
  transition:transform .6s var(--ease);
}
.tier:hover .tier__thumb img{ transform:scale(1.03); }
.tier.is-feature .tier__thumb{ border-color:hsl(60 8% 96% / .15); }

/* web hero: fanned stack of real builds, right rail */
.page-hero__inner{ position:relative; }
.hero-stack{
  position:absolute; right:calc(-1 * var(--gut) + 20px); bottom:-40px; z-index:-1;
  width:min(560px, 40vw); aspect-ratio:16/11;
  pointer-events:none;
}
.hero-stack img{
  position:absolute; width:78%; aspect-ratio:16/10; object-fit:cover; object-position:top;
  border-radius:10px; border:1px solid hsl(60 8% 96% / .18);
  box-shadow:0 30px 80px -20px hsl(220 14% 8% / .8);
}
.hero-stack img:nth-child(1){ right:0; top:0; transform:rotate(2.5deg); opacity:.55; }
.hero-stack img:nth-child(2){ right:9%; top:12%; transform:rotate(-1.5deg); opacity:.75; }
.hero-stack img:nth-child(3){ right:18%; top:26%; transform:rotate(.5deg); }
@media (max-width:1100px){ .hero-stack{ display:none; } }

/* bookings proof strip */
.proof-strip{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;
}
.proof-strip figure{ margin:0; }
.proof-strip img{
  width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top;
  border-radius:10px; border:1px solid hsl(220 14% 8% / .14); display:block;
}
.proof-strip figcaption{
  margin-top:9px;
  font:500 9.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:hsl(220 14% 8% / .5);
}
@media (max-width:900px){ .proof-strip{ grid-template-columns:repeat(2, 1fr); } }

/* checkout: what-happens-next rail + browse-designs row */
.checkout-next{
  margin-top:24px; padding-top:20px; border-top:var(--rule-bone);
}
.checkout-next__label{
  font:500 10px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:hsl(60 8% 96% / .5); margin-bottom:14px;
}
.checkout-next ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.checkout-next li{ font:400 13px/1.5 var(--sans); color:hsl(60 8% 96% / .75); }
.checkout-next li b{
  font:600 10px/1 var(--mono); color:var(--pulse); margin-right:8px;
}
.checkout-browse{ margin-top:clamp(40px, 6vh, 70px); }
.checkout-browse__row{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin:20px 0 14px;
  max-width:760px;
}
.checkout-browse__row img{
  width:100%; aspect-ratio:4/3; object-fit:cover; object-position:top;
  border-radius:10px; border:1px solid hsl(220 14% 8% / .14); display:block;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.checkout-browse__row a:hover img{
  transform:translateY(-2px);
  box-shadow:0 0 0 1px hsl(184 90% 48% / .5), 0 18px 44px -22px hsl(184 90% 48% / .35);
}

/* ═══════════════════════════ AUDIT FIXES — phase 3 (generated renders) ════ */

/* hero right-rail object (agents/pricing/social/bookings/checkout) */
.hero-object{
  position:absolute; right:var(--gut); bottom:clamp(30px, 6vh, 70px); z-index:0;
  width:min(360px, 26vw); aspect-ratio:4/5; object-fit:cover;
  border-radius:14px; border:1px solid hsl(60 8% 96% / .12);
  box-shadow:0 40px 90px -30px hsl(220 14% 8% / .9);
  opacity:.92;
}
.hero-object--sm{ width:min(280px, 21vw); }
@media (max-width:1040px){ .hero-object{ display:none; } }

/* section intro right-rail object */
.section-inner{ position:relative; }
.section-object{
  position:absolute; right:0; top:0; z-index:0;
  width:min(380px, 27vw); aspect-ratio:4/3; object-fit:cover;
  border-radius:12px; border:1px solid hsl(220 14% 8% / .12);
}
.section-object--dark{ border-color:hsl(60 8% 96% / .14); }
@media (max-width:1180px){ .section-object{ display:none; } }

/* fleet lineup render under the agents-page intro */
.fleet-lineup{
  position:absolute; right:var(--gut); bottom:-20px;
  width:min(520px, 36vw); aspect-ratio:16/10; object-fit:cover;
  border-radius:12px; border:1px solid hsl(60 8% 96% / .14);
}
@media (max-width:1180px){ .fleet-lineup{ display:none; } }

/* homepage process steps: small hardware details */
.step__img{
  width:min(280px, 100%); aspect-ratio:16/9; overflow:hidden;
  border-radius:10px; border:1px solid hsl(60 8% 96% / .12); margin-bottom:6px;
}
.step__img img{ width:100%; height:100%; object-fit:cover; display:block; }

/* coverage: engraved steel plate replaces the neon video */
.map__plate{
  width:100%; border-radius:14px; display:block;
  border:1px solid hsl(220 14% 8% / .1);
}

/* CTA band: the AA box bleeds off the right edge */
.cta{ position:relative; overflow:hidden; }
.cta-object{
  position:absolute; right:-70px; bottom:-150px; z-index:0;
  width:min(320px, 21vw); aspect-ratio:4/5; object-fit:cover;
  opacity:.45; border-radius:0;
  /* lighten drops the render's near-black ground into the band gradient —
     no visible rectangle — and the radial mask feathers every edge */
  mix-blend-mode:lighten;
  -webkit-mask-image:radial-gradient(80% 80% at 48% 48%, black 38%, transparent 72%);
  mask-image:radial-gradient(80% 80% at 48% 48%, black 38%, transparent 72%);
}
.cta__inner, .cta__rail, .cta__head, .cta__eyebrow{ position:relative; z-index:2; }
@media (max-width:1040px){ .cta-object{ display:none; } }

/* agents scenario duotones */
.belief__img{
  margin-bottom:16px; border-radius:10px; overflow:hidden;
  border:1px solid hsl(220 14% 8% / .12);
  aspect-ratio:3/2;
}
.belief__img img{ width:100%; height:100%; object-fit:cover; display:block; }

/* about workshop band */
.workshop-band{
  position:relative; max-height:520px; overflow:hidden;
  border-top:1px solid hsl(60 8% 96% / .08); border-bottom:1px solid hsl(60 8% 96% / .08);
}
.workshop-band img{ width:100%; height:100%; max-height:520px; object-fit:cover; display:block; }
.workshop-band__tag{
  position:absolute; left:var(--gut); bottom:22px;
  font:500 10px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase;
  color:var(--bone); background:hsl(220 14% 8% / .72); border-radius:999px; padding:9px 15px;
}

/* sample frames: recorded scroll-animation clips */
.sample__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top; display:block; z-index:1;
}

/* ═══════════════════════════ MOBILE OVERFLOW FIX ═══════════════════════════
   The page could scroll sideways into blank space on phones: the nav row
   never collapsed, and decorative elements (blobs, hero lines) leak past the
   viewport. Clip the document horizontally (clip ≠ hidden: no scroll
   container is created, position:sticky keeps working) and collapse the nav. */
html{ overflow-x:hidden; }       /* fallback for older engines */
html{ overflow-x:clip; }
body{ overflow-x:clip; }

@media (max-width:760px){
  .nav{
    grid-template-columns:auto auto;
    justify-content:space-between;
    gap:10px;
    padding:14px 16px;
  }
  .nav__menu{ display:none; }
  .sound-toggle{ display:none; }          /* visual-only toggle — no audio wired */
  .nav__right{ gap:10px; }
  .nav__cta{
    padding:10px 13px;
    font-size:10px;
    letter-spacing:.1em;
  }
  .cart-btn{ padding:8px 10px; gap:6px; }
}
@media (max-width:430px){
  .nav__brand{ font-size:10px; letter-spacing:.12em; }
  .nav__cta{ padding:9px 11px; font-size:9.5px; }
  .cart-btn .cart-btn__label{ display:none; } /* badge-only chip when space is tight */
}

/* mobile: the hero lede/meta are pre-split into fixed-width line spans for the
   line-rise animation — wider than a phone, so they were clipped mid-word.
   Let them flow as normal wrapped text on small screens. */
@media (max-width:760px){
  .hero__lede{ max-width:100%; }
  .hero__lede .ln,
  .hero__lede .ln span{ display:inline; transform:none !important; }
  .hero__meta{
    grid-template-columns:1fr;
    gap:10px;
  }
  .hero__rail{ flex-wrap:wrap; }
}

/* ───────────────────────────── MOBILE MENU — burger + full-screen panel */
.nav__burger{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:36px; padding:8px 9px;
  background:none; border:1px solid hsl(60 8% 96% / .22); border-radius:9px;
  cursor:pointer; flex:none;
}
.nav__burger i{
  display:block; height:2px; width:100%; border-radius:1px;
  background:currentColor;
  transition:transform .35s var(--ease), opacity .25s var(--ease);
}
.nav__burger[aria-expanded="true"] i:first-child{ transform:translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] i:last-child{ transform:translateY(-3.5px) rotate(-45deg); }
@media (max-width:980px){
  .nav__burger{ display:flex; }
}

.mobile-menu{
  position:fixed; inset:0; z-index:75;            /* under the nav (80) so the burger stays tappable */
  background:hsl(220 14% 8% / .985);
  padding:calc(72px + env(safe-area-inset-top)) var(--gut) calc(28px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; justify-content:space-between;
  overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
}
.mobile-menu.is-open{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility 0s;
}
.mobile-menu__links{ display:flex; flex-direction:column; }
.mobile-menu__links a{
  display:flex; align-items:baseline; gap:16px;
  padding:15px 0; border-bottom:1px solid hsl(60 8% 96% / .1);
  font-family:var(--display); font-weight:800; font-size:clamp(26px, 7vw, 34px);
  line-height:1; letter-spacing:-.02em; text-transform:uppercase;
  color:var(--bone); text-decoration:none;
}
.mobile-menu__links a span{
  font:500 10px/1 var(--mono); letter-spacing:.2em; color:var(--pulse);
}
.mobile-menu__links a:active{ color:var(--pulse); }
.mobile-menu__foot{ margin-top:30px; display:flex; flex-direction:column; gap:18px; }
.mobile-menu__cta{
  display:flex; justify-content:center; align-items:center; gap:12px;
  background:var(--pulse); color:var(--ink); border-radius:999px;
  padding:17px 26px; text-decoration:none;
  font:500 12px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
}
.mobile-menu__mail{
  text-align:center; font:500 11px/1 var(--mono); letter-spacing:.1em;
  color:hsl(60 8% 96% / .55); text-decoration:none;
}
/* nav goes solid while the menu is open so the blend mode doesn't invert over the panel */
.nav.is-menu-open{
  mix-blend-mode:normal; background:hsl(220 14% 8%); color:var(--bone);
}
@media (prefers-reduced-motion: reduce){
  .mobile-menu{ transition-duration:.01s; }
}

/* ═══════════════════════════ MOBILE LAYOUT FIXES (375px audit) ═══════════ */

/* fleet/capability grids — were inline 3-col styles no media query could touch */
.fleet-grid{ margin-top:60px; display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.roster--three{ grid-template-columns:repeat(3, 1fr); }
@media (max-width:1100px){ .fleet-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:760px){
  .fleet-grid{ grid-template-columns:1fr; }
  .roster--three{ grid-template-columns:1fr; }
}

@media (max-width:980px){
  /* footer columns: out-specify the desktop nth-child track placements */
  .footer__inner > .footer__col:nth-child(2),
  .footer__inner > .footer__col:nth-child(3),
  .footer__inner > .footer__col:nth-child(4){ grid-column:1 / -1; }
  /* the side-column mono paragraph was left at desktop span → 1-word lines */
  .agents__count{ grid-column:1 / -1; max-width:60ch; }
}

@media (max-width:760px){
  /* desktop-scale section paddings stacked into half-screen voids */
  .section-light, .section-dark{ padding:60px 0; }
  .cta{ padding-top:60px; padding-bottom:60px; }
  .proof, .process, .map, .principles, .samples{ padding-top:60px; padding-bottom:60px; }

  /* page heroes: keep the crumb clear of the fixed nav */
  .page-hero__inner{ padding-top:96px; }

  /* hero scroll indicator overlapped the $999 price cluster */
  .hero__scroll{ display:none; }

  /* scrub section: 280vh of pin is four phone screens — tighten */
  .reveal__stage{ height:170vh; }

  /* section eyebrows: wrapped lines were touching */
  .section-eyebrow{ line-height:1.7; }

  /* footer wordmark was clipping at the right edge */
  .footer__seal{ font-size:clamp(40px, 12vw, 90px); margin-top:36px; }

  /* gallery: un-pin the filter wall, make it a one-row swipe strip */
  .gallery__bar{ position:static; margin:0; padding:14px 0; background:none; backdrop-filter:none; }
  .gallery__filters{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:8px; }
  .gallery__filters .gfilter{ flex:none; }
  .gallery__count{ display:none; }

  /* web integrations: kill the staggered indent from the 1100px rule */
  .integ:nth-child(2n){ padding-left:0; }
  .integ:nth-child(2),.integ:nth-child(3),.integ:nth-child(4),
  .integ:nth-child(6),.integ:nth-child(7),.integ:nth-child(8){ padding-left:0; }
}

@media (max-width:520px){
  /* checkout browse thumbs: 3-up desktop screenshots were unreadable slivers */
  .checkout-browse__row{ grid-template-columns:1fr; max-width:340px; }
}