/* Calon — shared stylesheet
   Dark editorial · Instrument Serif + Geist · cyan accent */

:root{
  --ink:#000000;           /* pure black base (matches brand) */
  --ink-1:#05030C;         /* primary surface — deep ink */
  --ink-2:#0B0818;         /* card surface */
  --ink-3:#120E24;         /* elevated */
  --line:rgba(255,255,255,0.08);
  --line-2:rgba(255,255,255,0.16);
  --paper:#EDE9DC;
  --paper-2:#F5F2EA;
  --text:#E6E8EC;
  --text-muted:#9AA0B0;
  --text-faded:#5A6276;
  --accent:#5BC8E8;        /* Calon cyan — matches logo */
  --accent-2:#37B5D9;      /* deeper cyan */
  --accent-3:#8FE0F2;      /* light cyan highlight */
  --accent-ink:#0B2B3A;
  --amber:#E8B35C;
  --ok:#5BD9A3;
  --red:#E8735C;
  --maxw:1280px;
  --maxw-narrow:1040px;
  --radius:4px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:radial-gradient(ellipse 100% 80% at 50% 0%, #0E0A1E 0%, #05030C 60%) fixed, #05030C;
  color:var(--text);
  font-family:'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"ss01","cv11";
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- Typography ---------- */
.serif{font-family:'Instrument Serif', 'Times New Roman', serif; font-weight:400; letter-spacing:-0.015em;}
.mono{font-family:'Geist Mono', ui-monospace, monospace; font-feature-settings:"ss01";}
.eyebrow{
  font-family:'Geist Mono', monospace;
  font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--text-muted);
}
h1,h2,h3,h4{margin:0; color:#fff;}
.h-display{font-family:'Instrument Serif',serif; font-weight:400; line-height:1.08; letter-spacing:-0.025em; font-size:clamp(48px, 7.6vw, 112px); padding-bottom:0.22em;}
.h1{font-family:'Instrument Serif',serif; font-weight:400; font-size:clamp(44px, 6vw, 84px); line-height:1; letter-spacing:-0.02em;}
.h2{font-family:'Instrument Serif',serif; font-weight:400; font-size:clamp(34px, 4.2vw, 56px); line-height:1.02; letter-spacing:-0.018em;}
.h3{font-family:'Instrument Serif',serif; font-weight:400; font-size:clamp(24px, 2.2vw, 32px); line-height:1.1; letter-spacing:-0.01em;}
em, .italic{font-family:'Instrument Serif',serif; font-style:italic;}
.text-accent{color:var(--accent)}
.text-muted{color:var(--text-muted)}
p{margin:0 0 1em; color:#C6CBD6; max-width:62ch;}
p.lead{font-family:'Instrument Serif',serif; font-size:clamp(22px, 2vw, 28px); line-height:1.35; color:#DDE1E8; max-width:28ch;}
strong{color:#fff; font-weight:600;}
ul, ol{padding-left:20px; margin:0 0 1em;}
li{margin:4px 0;}

/* ---------- Layout ---------- */
.container{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
.container.narrow{max-width:var(--maxw-narrow)}
section{padding:120px 0;}
section.pad-lg{padding:160px 0;}
section.pad-sm{padding:80px 0;}

/* Rule separator */
.rule{height:1px; background:var(--line); margin:0;}
.rule-ink{height:1px; background:var(--line-2);}

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  background:rgba(5,8,15,0.55);
  border-bottom:1px solid var(--line);
  transition:background 0.3s ease, border-color 0.3s ease;
}
.nav-inner{
  max-width:var(--maxw); margin:0 auto;
  padding:20px 32px;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
}
.nav-logo{display:flex; align-items:center; gap:0; color:#fff;}
.nav-logo img{height:68px; width:auto; display:block;}
.nav-links{display:flex; gap:28px; list-style:none; padding:0; margin:0; align-items:center;}
.nav-links > li{position:relative;}
.nav-links > li > a, .nav-links > li > button{
  font-size:14px; color:var(--text-muted); transition:color 0.2s;
  background:none; border:none; font-family:inherit; cursor:pointer; padding:0;
  display:inline-flex; align-items:center; gap:5px;
}
.nav-links > li > a:hover, .nav-links > li > a.active,
.nav-links > li > button:hover, .nav-links > li.open > button{color:#fff;}
.nav-links > li > button::after{content:"▾"; font-size:9px; opacity:0.7; transition:transform 0.2s;}
.nav-links > li.open > button::after{transform:rotate(180deg);}

.nav-drop{
  position:absolute; top:calc(100% + 14px); left:-18px;
  min-width:220px; padding:8px;
  background:rgba(15,21,36,0.96); border:1px solid var(--line-2); border-radius:8px;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:0 20px 40px -10px rgba(0,0,0,0.5);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity 0.18s, transform 0.18s, visibility 0.18s;
  list-style:none; margin:0;
}
.nav-links > li:hover > .nav-drop, .nav-links > li.open > .nav-drop{opacity:1; visibility:visible; transform:none;}
.nav-drop li{margin:0;}
.nav-drop a{
  display:block; padding:10px 14px; font-size:14px; color:#C6CBD6;
  border-radius:4px; transition:background 0.15s, color 0.15s;
}
.nav-drop a:hover{background:rgba(55,198,240,0.08); color:var(--accent);}
.nav-drop a .desc{display:block; font-size:11px; color:var(--text-faded); margin-top:2px;}

/* Logo strip */
.logos{padding:60px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden;}
.logos .head{text-align:center; margin-bottom:36px;}
.logos .head .eyebrow{display:block; margin-bottom:10px;}
.logos .head h3{font-family:'Instrument Serif',serif; font-weight:400; font-size:clamp(22px,2vw,28px); color:#B8BECA;}
.logo-track-wrap{position:relative; mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);}
.logo-track{display:flex; gap:32px; align-items:center; animation:logoscroll 55s linear infinite; width:max-content;}
.logo-track:hover{animation-play-state:paused;}
.logo-track .logo-item{
  flex:0 0 auto;
  height:56px; width:auto; max-width:180px;
  object-fit:contain; display:block;
  padding:14px 22px;
  background:#fff;
  border-radius:10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
  opacity:0.85;
  transition: opacity .25s, transform .25s, box-shadow .25s;
}
.logo-track .logo-item:hover{opacity:1; transform:translateY(-2px); box-shadow:0 6px 24px rgba(245,176,138,0.25);}
@keyframes logoscroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* Testimonials */
.testimonials{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.tm{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 28px; background:var(--ink-2);
  display:flex; flex-direction:column; gap:20px;
  transition:border-color 0.3s;
}
.tm:hover{border-color:var(--line-2);}
.tm .quote-mark{font-family:'Instrument Serif',serif; font-size:64px; line-height:0.5; color:var(--accent); opacity:0.4; height:28px;}
.tm p{font-family:'Instrument Serif',serif; font-size:19px; line-height:1.4; color:#DDE1E8; margin:0; flex:1;}
.tm .who{display:flex; align-items:center; gap:12px; padding-top:16px; border-top:1px solid var(--line);}
.tm .who .av{width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); display:flex; align-items:center; justify-content:center; font-family:'Geist Mono',monospace; font-size:12px; color:var(--ink); font-weight:600;}
.tm .who .nm{font-size:14px; color:#fff; font-weight:500;}
.tm .who .ro{font-size:11px; color:var(--text-muted); font-family:'Geist Mono',monospace; letter-spacing:0.08em; margin-top:2px;}
@media (max-width:880px){.testimonials{grid-template-columns:1fr;}}

/* Latest cards — richer than .proof */
.latest-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.latest{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--ink-2); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform 0.3s, border-color 0.3s;
}
.latest:hover{transform:translateY(-3px); border-color:var(--accent);}
.latest .thumb{
  aspect-ratio:16/10; position:relative;
  background:linear-gradient(135deg, #0F1524 0%, #1a2340 100%);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.latest .thumb::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 30% 40%, rgba(55,198,240,0.2), transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(123,97,255,0.15), transparent 50%);
}
.latest .thumb .badge{
  position:absolute; top:14px; right:14px;
  width:34px; height:34px; border-radius:50%;
  background:var(--accent); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:'Geist Mono',monospace; font-size:10px; font-weight:600; letter-spacing:0.05em;
  z-index:1;
}
.latest .thumb .mock{
  position:absolute; inset:20% 15%;
  border:1px solid rgba(55,198,240,0.3); border-radius:4px;
  background:rgba(10,14,26,0.6);
  display:flex; align-items:center; justify-content:center;
  font-family:'Geist Mono',monospace; font-size:10px; color:var(--accent); letter-spacing:0.15em;
}
.latest .body{padding:24px 24px 26px; flex:1; display:flex; flex-direction:column;}
.latest .sector{font-family:'Geist Mono',monospace; font-size:10px; letter-spacing:0.18em; color:var(--accent); text-transform:uppercase; margin-bottom:10px;}
.latest h3{font-family:'Instrument Serif',serif; font-size:22px; font-weight:400; line-height:1.2; margin-bottom:10px;}
.latest .desc{font-size:13.5px; color:#B8BECA; line-height:1.55; margin-bottom:18px; flex:1;}
.latest .stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding-top:16px; border-top:1px solid var(--line);}
.latest .stats .s{text-align:left;}
.latest .stats .num{font-family:'Instrument Serif',serif; font-size:20px; color:var(--accent); line-height:1;}
.latest .stats .lbl{font-family:'Geist Mono',monospace; font-size:9px; color:var(--text-faded); letter-spacing:0.1em; text-transform:uppercase; margin-top:6px; line-height:1.3;}
@media (max-width:880px){.latest-grid{grid-template-columns:1fr;}}

/* ---------- Horizontal auto-scroll marquees (Latest + Testimonials) ---------- */
.marquee-wrap{
  position:relative;
  overflow:hidden;
  margin:0 -32px;
  padding:0 32px;
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track{
  display:flex; gap:20px;
  width:max-content;
  animation: marquee-scroll 60s linear infinite;
  will-change:transform;
}
.marquee-track:hover{animation-play-state:paused;}
.marquee-track.tm-marquee{animation-duration:80s;}
@keyframes marquee-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.marquee-track .latest{
  flex:0 0 420px;
  display:flex; flex-direction:column;
}
.marquee-track .tm{
  flex:0 0 400px;
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none;}
}
@media (max-width:680px){
  .marquee-track .latest{flex-basis:320px;}
  .marquee-track .tm{flex-basis:300px;}
}
.nav-cta{
  font-family:'Geist',sans-serif; font-size:13px; font-weight:600;
  padding:10px 18px 10px 20px; color:#0a0e1a;
  background:linear-gradient(135deg, #5BC8E8 0%, #37B5D9 100%);
  border-radius:999px;
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none;
  transition:transform .2s, box-shadow .2s;
  box-shadow:0 4px 18px -4px rgba(91,200,232,0.45);
}
.nav-cta::after{content:"↗"; width:22px; height:22px; border-radius:50%; background:#0a0e1a; color:#5BC8E8; display:inline-flex; align-items:center; justify-content:center; font-size:12px;}
.nav-cta:hover{transform:translateY(-1px); box-shadow:0 8px 24px -6px rgba(91,200,232,0.6);}
.nav-burger{display:none; background:none; border:none; color:#fff; font-size:24px; cursor:pointer;}

/* Hide JS-injected mobile-only nodes on desktop */
.nav-main-cta{display:none;}
.nav-menu-label{display:none;}
.nav-contact-block{display:none;}
.drop-header{display:none;}
.drop-cta-wrap{display:none;}

@media (max-width:880px){
  /* Kill backdrop-filter on mobile — it creates a containing block that
     traps our position:fixed overlays inside the nav's ~100px box. */
  .nav{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:rgba(5,8,15,0.92);
  }
  .nav.scrolled{ background:#05080F; }

  .nav-links{
    display:none;
    flex-direction:column;
    position:fixed;
    top:0; left:0;
    width:100vw; height:100vh; height:100dvh;
    z-index:49;
    background:
      radial-gradient(1200px 800px at 100% 100%, rgba(91,200,232,0.10), transparent 60%),
      radial-gradient(900px 600px at 0% 0%, rgba(245,176,138,0.06), transparent 60%),
      #05080F;
    padding:100px 28px 32px;
    gap:0;
    justify-content:flex-start;
    align-items:stretch;
    text-align:left;
    overflow-y:auto;
  }
  .nav-links.open{display:flex;}

  /* "Menu" eyebrow label injected by JS */
  .nav-menu-label{
    display:block;
    padding:8px 0 14px;
    font-family:'Geist Mono',monospace;
    font-size:12px; letter-spacing:0.22em; text-transform:uppercase;
    color:var(--text-muted);
    border:none;
  }

  .nav-links > li{
    width:100%;
    padding:12px 0;
    border:none;
  }
  .nav-links > li > a, .nav-links > li > button{
    display:flex; width:100%; padding:4px 0;
    font-family:'Geist', sans-serif;
    font-weight:400;
    font-size:26px; letter-spacing:-0.01em;
    color:#fff;
    justify-content:space-between;
    align-items:center;
    text-align:left;
    gap:12px;
  }
  .nav-links > li > button::after{
    content:"→";
    font-size:18px; opacity:0.7; color:#fff;
    transform:none;
    transition:transform .2s, opacity .2s;
  }
  .nav-links > li:hover > button::after{ opacity:1; transform:translateX(4px); }
  .nav-links > li.open > button::after{ transform:rotate(0deg); }
  /* Full-screen dropdown panel on mobile */
  .nav-drop{
    position:fixed;
    top:0; left:0;
    width:100vw; height:100vh; height:100dvh;
    z-index:200;
    display:none; flex-direction:column;
    background:
      radial-gradient(1200px 800px at 100% 100%, rgba(91,200,232,0.10), transparent 60%),
      radial-gradient(900px 600px at 0% 0%, rgba(245,176,138,0.06), transparent 60%),
      #05080F;
    border:none; border-radius:0; box-shadow:none;
    padding:100px 28px 32px;
    margin:0;
    opacity:1; visibility:visible; transform:none;
    overflow-y:auto;
  }
  .nav-links > li.open > .nav-drop{display:flex;}

  /* Back header injected by JS — plain "< Back" like the reference */
  .drop-header{
    display:flex; align-items:center; gap:8px;
    padding:8px 0 18px;
    border:none;
    background:transparent;
  }
  .drop-back{
    background:none; border:none; color:#fff;
    font-size:18px; line-height:1; padding:4px 6px 4px 0;
    cursor:pointer; font-family:'Geist',sans-serif;
    display:inline-flex; align-items:center; gap:6px;
  }
  .drop-back::before{ content:"‹"; font-size:22px; line-height:1; }
  .drop-back{ font-size:0; }
  .drop-back::after{ content:"Back"; font-size:16px; }

  .drop-title{ display:none; }

  .drop-links{ flex:1; display:flex; flex-direction:column; padding:0; list-style:none; }
  .drop-links li{ padding:0; margin:0; }
  .nav-drop a{
    display:block; padding:14px 0;
    font-family:'Geist',sans-serif;
    font-size:24px; font-weight:400; color:#fff;
    border:none; border-radius:0;
    transition:color .15s, transform .15s;
  }
  .nav-drop a:hover, .nav-drop a:active{
    background:transparent; color:var(--accent); transform:translateX(4px);
  }
  .nav-drop a .desc{ display:block; font-size:13px; color:var(--text-muted); margin-top:4px; font-weight:400; }
  /* CTA injected by JS */
  .drop-cta-wrap{
    display:block;
    padding:24px 28px 40px;
    margin-top:auto;
    border-top:1px solid var(--line);
  }
  .drop-cta-wrap a,
  .nav-main-cta a{
    display:inline-flex; align-items:center; justify-content:flex-start; gap:14px;
    width:auto; align-self:flex-start;
    padding:10px 10px 10px 22px;
    background:transparent;
    color:#fff; font-family:'Geist',sans-serif;
    font-size:15px; font-weight:400; letter-spacing:0.01em;
    border-radius:999px; text-decoration:none;
    border:1px solid rgba(255,255,255,0.35);
    transition:border-color .2s, background .2s, transform .15s;
  }
  .drop-cta-wrap a:hover,
  .nav-main-cta a:hover{
    border-color:var(--accent);
    background:rgba(91,200,232,0.06);
  }
  .drop-cta-wrap a:active,
  .nav-main-cta a:active{
    transform:scale(0.98);
  }
  .drop-cta-wrap a .cta-pill,
  .nav-main-cta a .cta-pill{
    width:30px; height:30px; flex:0 0 30px;
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--accent); color:#06121A;
    border-radius:50%;
    font-size:14px; line-height:1; font-weight:600;
    box-shadow:0 2px 12px rgba(91,200,232,0.45);
    transition:transform .2s;
  }
  .drop-cta-wrap a:hover .cta-pill,
  .nav-main-cta a:hover .cta-pill{ transform:rotate(-8deg); }

  /* Contact block injected by JS into mobile menu */
  .nav-contact-block{
    padding:24px 0 28px;
    border:none;
    display:flex; flex-direction:column; gap:22px;
    margin-top:8px;
  }
  .nav-contact-block .nc-field{ display:flex; flex-direction:column; gap:6px; }
  .nav-contact-block .nc-label{
    font-family:'Geist',sans-serif;
    font-size:14px; font-weight:400;
    color:#fff; letter-spacing:0.01em;
  }
  .nav-contact-block .nc-val,
  .nav-contact-block .nc-val a{
    font-family:'Geist',sans-serif;
    font-size:15px; color:var(--text-muted); letter-spacing:0.01em;
    text-decoration:none; word-break:break-all;
  }
  .nav-contact-block .nc-socials{
    display:flex; gap:18px; align-items:center; padding-top:2px;
  }
  .nav-contact-block .nc-socials a{
    color:var(--text-muted);
    transition:color .15s, transform .15s;
  }
  .nav-contact-block .nc-socials a:hover{ color:var(--accent); transform:translateY(-2px); }

  /* Bottom CTA wrapper — only the container; the button styling above
     is shared between .nav-main-cta a and .drop-cta-wrap a */
  .nav-main-cta{
    display:block;
    width:100%;
    margin-top:0;
    padding:0 0 12px;
    border:none;
    list-style:none;
  }
  .nav-burger{display:block; position:relative; z-index:60;}
  .nav-logo{position:relative; z-index:60;}
  .nav-inner{padding:18px 20px; position:relative; z-index:60;}
  .nav-cta{display:none;}
}
.nav.scrolled{
  background:rgba(5,8,15,0.88);
  border-bottom-color:rgba(255,255,255,0.12);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px;
  font-family:'Geist',sans-serif; font-size:14px; font-weight:500;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer; transition:all 0.25s ease;
}
.btn-primary{background:linear-gradient(135deg, #2E9FE8 0%, #5B8FE6 100%); color:#fff; border-color:transparent; box-shadow:0 4px 20px -6px rgba(46,159,232,0.5);}
.btn-primary:hover{background:linear-gradient(135deg, #4AAEEB 0%, #6FA0EB 100%); transform:translateY(-1px); box-shadow:0 12px 32px -8px rgba(46,159,232,0.6);}
.btn-ghost{border-color:var(--line-2); color:#fff;}
.btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,0.04);}
.btn .arr{transition:transform 0.25s;}
.btn:hover .arr{transform:translateX(3px);}
.btn-lg{padding:18px 28px; font-size:15px;}

/* ---------- Hero — Scroll-driven 3D ---------- */
.hero{
  position:relative;
  height: 200vh; /* scrollable runway */
  background:#0A0A0A;
  overflow:hidden;
}
.hero-canvas{
  position:absolute; inset:0; z-index:1;
}
.hero-canvas canvas{width:100%; height:100%; display:block;}
.hero-canvas.hero-fallback{
  background: radial-gradient(ellipse at 50% 55%, rgba(245,176,138,0.35) 0%, rgba(232,115,92,0.12) 30%, rgba(10,10,10,0) 65%);
}
.hero-vignette{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(10,10,10,0) 30%, rgba(10,10,10,0.55) 75%, rgba(10,10,10,0.95) 100%),
    linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0) 18%, rgba(10,10,10,0) 75%, rgba(10,10,10,0.9) 100%);
}
.hero-sticky{
  position:sticky;
  top:0;
  height:100vh;
  display:flex; align-items:center;
  padding-top:96px; /* clear the fixed nav */
  z-index:3;
  /* content fades as scrollProgress increases — driven by JS-set --p */
  opacity: calc(1 - var(--p, 0) * 1.2);
  transform: translateY(calc(var(--p, 0) * -30px));
  transition: opacity .1s linear;
}
.hero-inner{
  display:flex; flex-direction:column; align-items:flex-start;
  max-width:1280px;
}
.hero-eyebrow{
  font-family:'Geist Mono',monospace;
  font-size:11px; letter-spacing:0.22em;
  color: rgba(255,255,255,0.65);
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 14px;
  border:1px solid rgba(255,255,255,0.14);
  border-radius:100px;
  margin-bottom:32px;
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,0.03);
}
.hero-eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent);}
.hero-display{
  font-family:'Geist',sans-serif;
  font-weight:700;
  font-size: clamp(40px, 6.8vw, 104px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color:#fff;
  margin:0 0 32px;
  text-shadow: 0 2px 40px rgba(0,0,0,0.5);
  max-width: 16ch;
}
.hero-display .chev{
  color:var(--accent);
  display:inline-block;
  transform:translateY(-0.02em) scaleY(1.05);
  text-shadow: 0 0 40px rgba(245,176,138,0.6);
}
.hero-display .chev-word{
  background:linear-gradient(135deg, #F5B08A 0%, #E8735C 60%, #F5B08A 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  background-size:200% 100%;
  animation:hueshift 8s ease-in-out infinite;
  font-style:italic;
  font-family:'Instrument Serif',serif;
  font-weight:400;
  letter-spacing:-0.01em;
}
.hero-display .accent-word{
  background:linear-gradient(135deg, var(--accent-3) 0%, var(--accent) 50%, var(--accent-2) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  background-size:200% 100%;
  animation:hueshift 8s ease-in-out infinite reverse;
  font-style:italic;
  font-family:'Instrument Serif',serif;
  font-weight:400;
  letter-spacing:-0.01em;
}
@keyframes hueshift{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}
.hero-sub{
  font-family:'Geist',sans-serif;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height:1.55;
  color: rgba(255,255,255,0.78);
  max-width: 560px;
  margin: 0 0 40px;
  text-wrap: pretty;
}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
.btn-primary{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 26px;
  background: var(--accent);
  color:#0A0A0A;
  font-family:'Geist',sans-serif; font-weight:600; font-size:15px;
  border-radius:100px;
  text-decoration:none;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 8px 40px rgba(245,176,138,0.25);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 48px rgba(245,176,138,0.45);}
.btn-primary .chev{font-weight:700;}
.btn-ghost{
  display:inline-flex; align-items:center;
  padding:16px 26px;
  background: transparent;
  color:#fff;
  font-family:'Geist',sans-serif; font-weight:500; font-size:15px;
  border:1px solid rgba(255,255,255,0.22);
  border-radius:100px;
  text-decoration:none;
  transition: border-color .2s, background .2s;
}
.btn-ghost:hover{border-color:rgba(255,255,255,0.5); background:rgba(255,255,255,0.04);}
.hero-scroll{
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  font-family:'Geist Mono',monospace; font-size:10px; letter-spacing:0.2em;
  color: rgba(255,255,255,0.5);
  z-index:4; display:flex; flex-direction:column; align-items:center; gap:8px;
  opacity: calc(1 - var(--p, 0) * 2);
}
.hero-scroll .line{width:1px; height:40px; background:linear-gradient(to bottom, transparent, rgba(255,255,255,0.5));}
@media (max-width: 768px){
  .hero{height: 160vh;}
  .hero-display{font-size: clamp(44px, 13vw, 80px);}
}

/* ---------- Meta strip ---------- */
.metastrip{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:18px 0;
  font-family:'Geist Mono',monospace; font-size:11px; letter-spacing:0.12em;
  color:var(--text-muted);
}
.metastrip .inner{display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap;}

/* ---------- Sections & cards ---------- */
.section-head{
  display:grid; grid-template-columns:200px 1fr; gap:32px;
  padding-bottom:40px; margin-bottom:60px;
  border-top:1px solid var(--line-2); padding-top:24px;
}
.section-head .num{font-family:'Geist Mono',monospace; font-size:11px; letter-spacing:0.2em; color:var(--text-muted);}
.section-head h2{max-width:16ch;}
.section-head .sub{margin-top:14px; color:var(--text-muted); font-size:15px; max-width:50ch;}

@media (max-width:720px){
  .section-head{grid-template-columns:1fr; gap:14px;}
}

/* Lane cards */
.lanes{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;}
.lane{
  position:relative;
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(15,21,36,0.6) 0%, rgba(10,14,26,0.3) 100%);
  padding:32px 28px 36px;
  transition:border-color 0.3s, transform 0.3s;
}
.lane:hover{border-color:var(--line-2); transform:translateY(-2px);}
.lane .n{font-family:'Geist Mono',monospace; font-size:10px; letter-spacing:0.2em; color:var(--accent); text-transform:uppercase;}
.lane h3{margin:10px 0 12px; font-family:'Instrument Serif',serif; font-size:30px; font-weight:400;}
.lane .tag{font-family:'Geist Mono',monospace; font-size:10px; letter-spacing:0.16em; color:var(--text-faded); text-transform:uppercase; margin-bottom:18px;}
.lane p{font-size:14.5px; color:#BEC4D0;}
.lane ul{list-style:none; padding:0; margin-top:18px; border-top:1px solid var(--line);}
.lane ul li{padding:10px 0; border-bottom:1px solid var(--line); font-size:13.5px; color:var(--text-muted); display:flex; gap:10px;}
.lane ul li::before{content:"→"; color:var(--accent); font-family:'Geist Mono',monospace;}
.lane ul li:last-child{border-bottom:none;}

@media (max-width:880px){.lanes{grid-template-columns:1fr;}}

/* Proof cards */
.proof-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.proof{
  position:relative;
  border:1px solid var(--line); border-radius:var(--radius);
  padding:32px; background:var(--ink-2);
  transition:all 0.3s;
  min-height:320px; display:flex; flex-direction:column;
}
.proof:hover{border-color:var(--accent); background:var(--ink-3);}
.proof .sector{font-family:'Geist Mono',monospace; font-size:10px; letter-spacing:0.18em; color:var(--accent); text-transform:uppercase;}
.proof h3{margin:12px 0 16px; font-family:'Instrument Serif',serif; font-size:28px; font-weight:400;}
.proof .bbs{display:grid; grid-template-columns:90px 1fr; gap:10px 18px; margin-top:auto; padding-top:20px; border-top:1px solid var(--line); font-size:13.5px;}
.proof .bbs dt{font-family:'Geist Mono',monospace; font-size:10px; letter-spacing:0.14em; color:var(--text-faded); text-transform:uppercase; padding-top:3px;}
.proof .bbs dd{margin:0; color:#C6CBD6;}
@media (max-width:760px){.proof-grid{grid-template-columns:1fr;}}

/* Process rail */
.process{display:grid; grid-template-columns:repeat(5, 1fr); gap:2px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.process .step{padding:28px 22px; background:var(--ink-2); position:relative;}
.process .step:not(:last-child)::after{content:""; position:absolute; right:-1px; top:24px; bottom:24px; width:1px; background:var(--line);}
.process .step .n{font-family:'Geist Mono',monospace; font-size:10px; letter-spacing:0.18em; color:var(--accent);}
.process .step h4{font-family:'Instrument Serif',serif; font-size:22px; font-weight:400; margin:6px 0 10px;}
.process .step p{font-size:13px; color:var(--text-muted); margin:0;}
@media (max-width:880px){.process{grid-template-columns:1fr; gap:1px;}}

/* Symptom list — qualifying section */
.symptoms{display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--line-2);}
.symptoms .s{
  padding:24px 0; border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:36px 1fr; gap:18px; align-items:start;
}
.symptoms .s:nth-child(odd){padding-right:24px; border-right:1px solid var(--line);}
.symptoms .s:nth-child(even){padding-left:24px;}
.symptoms .s .n{font-family:'Geist Mono',monospace; font-size:11px; color:var(--text-faded); padding-top:4px;}
.symptoms .s h4{font-family:'Instrument Serif',serif; font-size:22px; font-weight:400; margin-bottom:6px;}
.symptoms .s p{font-size:14px; color:var(--text-muted); margin:0;}
@media (max-width:760px){
  .symptoms{grid-template-columns:1fr;}
  .symptoms .s:nth-child(odd){padding-right:0; border-right:none;}
  .symptoms .s:nth-child(even){padding-left:0;}
}

/* CTA block */
.cta-block{
  position:relative; overflow:hidden;
  border:1px solid var(--line-2); border-radius:var(--radius);
  padding:80px 64px;
  background:
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(55,198,240,0.08), transparent 70%),
    linear-gradient(135deg, var(--ink-2), var(--ink-3));
  text-align:left;
}
.cta-block h2{max-width:18ch;}
.cta-block p{margin:18px 0 32px; max-width:46ch; color:var(--text-muted);}
@media (max-width:720px){.cta-block{padding:48px 28px;}}

/* Footer */
.footer{
  border-top:1px solid var(--line);
  padding:80px 0 40px;
  background:var(--ink);
}
.footer-top{display:grid; grid-template-columns:2.2fr 1fr 1fr 1fr 1fr; gap:48px; margin-bottom:56px;}
.footer-brand img{height:72px; width:auto; display:block; margin-bottom:20px;}
.footer-brand .brand-tagline{font-size:14px; line-height:1.6; color:var(--text-muted); max-width:38ch; margin:0 0 24px;}
.footer-brand .socials{display:flex; gap:12px;}
.footer-brand .socials a{
  width:40px; height:40px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  color:var(--text-muted);
  transition:all .2s;
}
.footer-brand .socials a:hover{
  background:var(--accent); color:#0a0e1a; border-color:var(--accent);
  transform:translateY(-2px);
}
.footer-col h5{font-family:'Geist Mono',monospace; font-size:10px; letter-spacing:0.2em; color:#fff; text-transform:uppercase; margin:0 0 18px;}
.footer-col ul{list-style:none; padding:0; margin:0;}
.footer-col ul li{margin-bottom:12px; font-size:14px;}
.footer-col ul a{color:#B4BBC8; transition:color 0.2s; text-decoration:none;}
.footer-col ul a:hover{color:var(--accent);}
.footer-bottom{
  padding-top:28px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-family:'Geist Mono',monospace; font-size:11px; color:var(--text-faded); letter-spacing:0.1em;
}
.footer-sub-link{
  padding-top:14px; text-align:center;
  font-family:'Geist Mono',monospace; font-size:11px; color:var(--text-faded); letter-spacing:0.08em;
}
.footer-sub-link a{ color:var(--accent); text-decoration:none; opacity:0.75; }
.footer-sub-link a:hover{ opacity:1; }
@media (max-width:960px){.footer-top{grid-template-columns:1fr 1fr 1fr; gap:32px;} .footer-brand{grid-column:1 / -1;}}
@media (max-width:560px){.footer-top{grid-template-columns:1fr 1fr;}}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(24px); transition:opacity 0.9s ease, transform 0.9s ease;}
.reveal.in{opacity:1; transform:none;}
.reveal.delay-1{transition-delay:0.08s;}
.reveal.delay-2{transition-delay:0.16s;}
.reveal.delay-3{transition-delay:0.24s;}

/* Generic page hero (interior pages) */
.page-hero{padding:180px 0 100px; border-bottom:1px solid var(--line); position:relative; overflow:hidden;}
.page-hero .bg{position:absolute; inset:0; opacity:0.4; pointer-events:none;
  background:
    radial-gradient(ellipse 50% 60% at 10% 10%, rgba(55,198,240,0.15), transparent 60%),
    radial-gradient(ellipse 40% 50% at 90% 80%, rgba(123,97,255,0.08), transparent 60%);
}
.page-hero .inner{position:relative; z-index:1;}
.page-hero .kicker{font-family:'Geist Mono',monospace; font-size:11px; letter-spacing:0.22em; color:var(--accent); text-transform:uppercase; margin-bottom:20px;}
.page-hero h1{max-width:18ch;}
.page-hero p.lead{margin-top:24px; color:#B8BECA;}

/* Two-col article layout */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;}
@media (max-width:880px){.two-col{grid-template-columns:1fr; gap:32px;}}

/* Tables */
table.data{width:100%; border-collapse:collapse; font-size:14px; margin:20px 0;}
table.data th,table.data td{text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:top;}
table.data th{font-family:'Geist Mono',monospace; font-size:10px; letter-spacing:0.14em; color:var(--text-muted); text-transform:uppercase; font-weight:500;}
table.data td{color:#C6CBD6;}

/* Form styles */
form.diagnostic{display:grid; gap:20px; max-width:560px;}
form.diagnostic label{display:block; font-family:'Geist Mono',monospace; font-size:10px; letter-spacing:0.18em; color:var(--text-muted); text-transform:uppercase; margin-bottom:8px;}
form.diagnostic input, form.diagnostic textarea, form.diagnostic select{
  width:100%; background:var(--ink-2); border:1px solid var(--line-2);
  border-radius:var(--radius); padding:14px 16px;
  font-family:'Geist',sans-serif; font-size:15px; color:#fff;
  transition:border-color 0.2s, background 0.2s;
}
form.diagnostic input:focus, form.diagnostic textarea:focus, form.diagnostic select:focus{
  outline:none; border-color:var(--accent); background:var(--ink-3);
}
form.diagnostic textarea{min-height:120px; resize:vertical;}
form.diagnostic .row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:600px){form.diagnostic .row{grid-template-columns:1fr;}}
form.diagnostic button{justify-self:start; margin-top:8px;}

/* Utility */
.stack-8{display:grid; gap:8px;}
.stack-16{display:grid; gap:16px;}
.stack-24{display:grid; gap:24px;}
.stack-40{display:grid; gap:40px;}
.flex{display:flex;} .gap-16{gap:16px;} .gap-24{gap:24px;}
.mt-24{margin-top:24px;} .mt-40{margin-top:40px;} .mt-80{margin-top:80px;}
.center{text-align:center;}

/* Blink caret */
@keyframes blink{50%{opacity:0;}}
.caret{display:inline-block; width:2px; height:0.9em; background:var(--accent); vertical-align:baseline; margin-left:3px; animation:blink 1s infinite;}


/* ---------- Team people cards (About) ---------- */
.people{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:32px;
}
.person{
  display:grid;
  grid-template-columns: 200px 1fr;
  gap:28px;
  padding:28px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(15,21,36,0.6) 0%, rgba(10,14,26,0.3) 100%);
  align-items:start;
}
.person-photo{
  width:180px; height:180px;
  border-radius:50%;
  overflow:hidden;
  background:#1a1f2e;
  border:2px solid rgba(245,176,138,0.25);
  box-shadow: 0 10px 40px rgba(245,176,138,0.15);
}
.person-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.person-body h3{
  margin:0 0 4px;
  font-family:'Instrument Serif',serif;
  font-size:30px; font-weight:400;
  color:#fff;
}
.person-body .role{
  font-family:'Geist Mono',monospace;
  font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--accent);
  margin-bottom:18px;
}
.person-body p{
  font-size:14.5px; line-height:1.65;
  color:#BEC4D0;
  margin:0 0 20px;
  text-wrap:pretty;
}
.person-link{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px;
  border:1px solid rgba(245,176,138,0.35);
  border-radius:100px;
  color:var(--accent);
  text-decoration:none;
  font-family:'Geist',sans-serif; font-size:13px; font-weight:500;
  transition: background .2s, border-color .2s;
}
.person-link:hover{background:rgba(245,176,138,0.08); border-color:var(--accent);}
@media (max-width: 880px){
  .people{grid-template-columns:1fr;}
  .person{grid-template-columns:120px 1fr; gap:20px; padding:20px;}
  .person-photo{width:120px; height:120px;}
  .person-body h3{font-size:24px;}
}
@media (max-width: 520px){
  .person{grid-template-columns:1fr; text-align:left;}
  .person-photo{width:120px; height:120px;}
}

/* ---------- Where we work (world map) ---------- */
.where-we-work .world-map{
  position:relative;
  width:100%;
  aspect-ratio: 2 / 1;
  max-width:1000px;
  margin: 0 auto;
  background: radial-gradient(ellipse at 50% 50%, rgba(245,176,138,0.05) 0%, rgba(10,14,26,0) 60%);
}
.world-svg{width:100%; height:100%; display:block; opacity:0.9;}
.pin{
  position:absolute;
  width:10px; height:10px;
  transform: translate(-50%, -50%);
  pointer-events:auto;
}
.pin::before{
  content:'';
  position:absolute; inset:0;
  border-radius:50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(245,176,138,0.18), 0 0 14px rgba(245,176,138,0.55);
  animation: pin-pulse 2.6s ease-in-out infinite;
}
.pin[data-hq="true"]::before{
  background:#fff;
  box-shadow: 0 0 0 4px rgba(245,176,138,0.35), 0 0 18px rgba(245,176,138,0.8);
}
@keyframes pin-pulse{
  0%,100%{ box-shadow: 0 0 0 3px rgba(245,176,138,0.18), 0 0 14px rgba(245,176,138,0.55); }
  50%    { box-shadow: 0 0 0 8px rgba(245,176,138,0), 0 0 22px rgba(245,176,138,0.9); }
}
.pin .label{
  position:absolute;
  left:50%; top:-8px;
  transform:translate(-50%, -100%);
  font-family:'Geist Mono',monospace;
  font-size:10px; letter-spacing:0.12em; text-transform:uppercase;
  color:#fff;
  background: rgba(10,14,26,0.85);
  padding:4px 10px;
  border:1px solid rgba(245,176,138,0.3);
  border-radius:100px;
  white-space:nowrap;
  opacity:0; transition: opacity .2s;
  pointer-events:none;
}
.pin:hover .label,
.pin[data-hq="true"] .label{ opacity:1; }
.cities-list{
  display:flex; flex-wrap:wrap; gap:10px 8px;
  justify-content:center;
  margin-top:40px;
}
.cities-list span{
  font-family:'Geist Mono',monospace;
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color: rgba(255,255,255,0.55);
  padding:6px 14px;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:100px;
}


/* ---------- Solution sub-pages ---------- */
.page-hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Geist Mono',monospace; font-size:11px; letter-spacing:0.22em;
  color:var(--accent); text-transform:uppercase; margin-bottom:28px;
}
.page-hero-eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 16px var(--accent);}
.page-hero-h1{
  font-family:'Instrument Serif', serif; font-weight:400;
  font-size: clamp(52px, 8vw, 108px);
  line-height:0.95; letter-spacing:-0.02em;
  color:#fff; max-width:16ch;
}
.page-hero-h1 em{font-style:italic; color:var(--accent);}
.page-hero-sub{
  margin-top:32px; max-width:60ch;
  font-size:clamp(17px, 1.5vw, 20px); line-height:1.55; color:#B8BECA;
}
.page-hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-top:44px;}

/* Case cards (example systems) */
.case-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;}
.case-card{
  position:relative; padding:32px 28px 36px;
  background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--radius);
  transition: border-color .25s, background .25s, transform .25s;
}
.case-card:hover{border-color:var(--accent); background:var(--ink-3); transform:translateY(-2px);}
.case-card .tag{
  display:inline-block; font-family:'Geist Mono',monospace; font-size:10px;
  letter-spacing:0.18em; color:var(--text-muted); text-transform:uppercase;
  padding:6px 10px; border:1px solid var(--line-2); border-radius:999px; margin-bottom:22px;
}
.case-card h3{font-family:'Instrument Serif',serif; font-weight:400; font-size:26px; line-height:1.1; margin-bottom:14px; color:#fff;}
.case-card p{color:#B8BECA; font-size:15px; line-height:1.55;}
@media (max-width:960px){.case-grid{grid-template-columns:1fr;}}

/* Deliverables list */
.deliverables{
  list-style:none; padding:0; margin:0;
  display:grid; gap:0;
  border-top:1px solid var(--line);
}
.deliverables li{
  padding:22px 0; border-bottom:1px solid var(--line);
  color:#C6CBD6; font-size:17px; line-height:1.5;
  display:flex; align-items:flex-start; gap:18px;
}
.deliverables li::before{
  content:""; flex-shrink:0; width:8px; height:8px; margin-top:10px;
  background:var(--accent); border-radius:50%;
  box-shadow:0 0 12px rgba(245,176,138,0.5);
}

/* Pricing strip */
.pricing-strip{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:0;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.pricing-strip .p-col{
  padding:36px 32px; border-right:1px solid var(--line);
  background:var(--ink-2);
}
.pricing-strip .p-col:last-child{border-right:none;}
.pricing-strip .p-tag{
  display:inline-block; font-family:'Geist Mono',monospace; font-size:10px;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--text-muted);
  margin-bottom:16px;
}
.pricing-strip h3{font-family:'Instrument Serif',serif; font-weight:400; font-size:28px; margin-bottom:10px; color:#fff;}
.pricing-strip .p-price{
  font-family:'Geist Mono',monospace; font-size:14px;
  color:var(--accent); margin-bottom:18px; letter-spacing:0.02em;
}
.pricing-strip p{color:#B8BECA; font-size:14px; line-height:1.55;}
@media (max-width:880px){
  .pricing-strip{grid-template-columns:1fr;}
  .pricing-strip .p-col{border-right:none; border-bottom:1px solid var(--line);}
  .pricing-strip .p-col:last-child{border-bottom:none;}
}

/* CTA eyebrow */
.cta-eyebrow{
  font-family:'Geist Mono',monospace; font-size:11px; letter-spacing:0.22em;
  color:var(--accent); text-transform:uppercase;
}
.cta-inner{text-align:left;}


/* Founder / origin block */
.founder-block{display:grid; gap:22px; max-width:70ch;}
.founder-block p{font-size:17px; line-height:1.65; color:#C6CBD6;}
.founder-block p:first-child{color:#E2E6EE;}


/* ---------- Real work photo section ---------- */
.real-work{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}
.real-work-img{
  border-radius:12px;
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--ink-2);
  border:1px solid var(--line);
}
.real-work-img img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}
.real-work-body p{ max-width:48ch; }
@media (max-width:880px){
  .real-work{
    grid-template-columns:1fr;
    gap:36px;
  }
  .real-work-img{ aspect-ratio:16/10; }
}

/* ---------- NEW: supporting copy & CTAs ---------- */
.cred-sub{
  margin-top:14px;
  font-family:'Geist',sans-serif; font-size:15px; line-height:1.6;
  color:#9AA0B0; max-width:62ch; text-align:center; margin-left:auto; margin-right:auto;
}
.friction-result{
  margin-top:64px;
  font-family:'Instrument Serif',serif; font-weight:400;
  font-size:clamp(22px, 2.2vw, 30px); line-height:1.35;
  color:#DDE1E8; max-width:70ch;
}
.friction-result em{
  font-style:italic;
  background:linear-gradient(135deg,var(--accent-3),var(--accent));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.lane{ display:flex; flex-direction:column; position:relative; overflow:hidden; }
.lane::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(900px 300px at 0% 0%, rgba(91,200,232,0.08), transparent 60%);
  opacity:0; transition:opacity .35s;
  pointer-events:none;
}
.lane:hover::before{ opacity:1; }
.lane-sub{
  font-family:'Instrument Serif',serif; font-style:italic; font-weight:400;
  font-size:15px; color:var(--accent-3); letter-spacing:0.01em;
  margin:0 0 18px;
  opacity:0.85;
}
.lane-cta{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:auto; padding-top:24px;
  font-family:'Geist',sans-serif; font-size:14px; font-weight:600;
  color:var(--accent); text-decoration:none;
  border-top:1px solid var(--line);
  padding-top:22px; margin-top:24px;
  transition:color .2s, gap .25s;
}
.lane-cta .arr{ transition:transform .25s; display:inline-block; }
.lane-cta:hover{ color:var(--accent-3); gap:14px; }
.lane-cta:hover .arr{ transform:translateX(3px); }
.sectors-note{
  margin-top:48px;
  font-family:'Instrument Serif',serif; font-weight:400;
  font-size:clamp(18px, 1.6vw, 22px); line-height:1.5;
  color:#B8BECA; max-width:64ch;
}

/* ---------- VIBRANCE: section accents & glows ---------- */

/* Soft animated gradient glow painted behind the friction cards */
.symptoms{
  position:relative;
}
.symptoms::before{
  content:""; position:absolute; inset:-40px;
  background:
    radial-gradient(600px 300px at 10% 0%, rgba(91,200,232,0.08), transparent 70%),
    radial-gradient(500px 280px at 90% 100%, rgba(245,176,138,0.07), transparent 70%);
  filter:blur(24px);
  z-index:-1;
  pointer-events:none;
}

/* Gradient accent on the section number badge */
.num{
  background:linear-gradient(135deg, var(--accent) 0%, #F5B08A 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  font-weight:600;
}

/* Vibrant glow border on lane cards */
.lane{
  background:linear-gradient(180deg, var(--ink-2) 0%, #0A0614 100%);
  transition:border-color .3s, transform .35s, box-shadow .35s;
}
.lane:hover{
  border-color:rgba(91,200,232,0.3);
  box-shadow:
    0 20px 60px -20px rgba(91,200,232,0.25),
    0 0 0 1px rgba(91,200,232,0.15) inset;
  transform:translateY(-4px);
}

/* Process step numbers in gradient */
.step .n{
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-3) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* Primary button — richer gradient */
.btn-primary{
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow:
    0 8px 32px -6px rgba(91,200,232,0.5),
    0 0 0 1px rgba(143,224,242,0.25) inset;
}
.btn-primary:hover{
  box-shadow:
    0 14px 44px -6px rgba(91,200,232,0.7),
    0 0 0 1px rgba(143,224,242,0.4) inset;
}

/* Section-head emphasis — make 'em' inside h2 pop */
.section-head h2 em, .h2 em{
  font-style:italic;
  background:linear-gradient(135deg, var(--accent-3) 0%, var(--accent) 45%, #F5B08A 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  background-size:180% 100%;
}

/* Subtle ambient hue panels for rhythm */
section:nth-of-type(3n+2){
  position:relative;
}
section:nth-of-type(3n+2)::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(1200px 500px at 50% 0%, rgba(91,200,232,0.04), transparent 70%);
  pointer-events:none; z-index:0;
}
section:nth-of-type(3n+2) > *{ position:relative; z-index:1; }

/* Cta-block richer bg */
.cta-block{
  background:
    radial-gradient(800px 400px at 0% 0%, rgba(91,200,232,0.08), transparent 60%),
    radial-gradient(800px 400px at 100% 100%, rgba(245,176,138,0.07), transparent 60%),
    linear-gradient(180deg, var(--ink-2), #0A0614);
  border:1px solid rgba(91,200,232,0.12);
  border-radius:16px;
  padding:64px 56px;
  position:relative; overflow:hidden;
}
.cta-block::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(91,200,232,0.4), transparent);
  height:1px; top:0;
}
@media (max-width:880px){
  .cta-block{ padding:40px 28px; }
}

/* Data table vibrance for "Why Calon" comparison */
.data{ width:100%; border-collapse:collapse; }
.data th, .data td{
  padding:14px 16px; text-align:left; font-size:14px;
  border-bottom:1px solid var(--line);
}
.data thead th{
  font-family:'Geist Mono',monospace; font-size:11px; letter-spacing:0.18em;
  color:var(--text-muted); text-transform:uppercase;
  border-bottom:1px solid var(--line-2);
}
.data thead th:last-child{
  color:var(--accent);
}
.data tbody tr:hover{ background:rgba(91,200,232,0.03); }
.data tbody td:first-child{ color:var(--text-muted); }
.data tbody td:last-child{ color:#fff; font-weight:500; }

/* Legal pages */
.legal-body{max-width:760px; margin:0 auto; padding:64px 0 96px;}
.legal-body h2{font-family:'Instrument Serif',serif; font-weight:400; font-size:clamp(22px,2vw,28px); color:var(--text); margin:48px 0 16px;}
.legal-body h3{font-size:15px; font-weight:600; color:var(--text); margin:32px 0 10px; letter-spacing:0.01em;}
.legal-body p{font-size:15px; line-height:1.75; color:var(--text-mid); margin:0 0 16px;}
.legal-body ul{padding-left:20px; margin:0 0 16px;}
.legal-body ul li{font-size:15px; line-height:1.75; color:var(--text-mid); margin-bottom:8px;}
.legal-body a{color:var(--accent); text-decoration:none;}
.legal-body a:hover{text-decoration:underline;}
.legal-body .updated{font-family:'Geist Mono',monospace; font-size:11px; color:var(--text-faded); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:48px; display:block;}
.legal-body hr{border:none; border-top:1px solid var(--line); margin:40px 0;}
