/* ============================================================
   site.css — scrolling layers that sit under hero.css
   Design language inherited from hero-v3: deep violet-black
   ground, Plus Jakarta Sans, white pill CTAs, hairline borders.
   Hero uses the locked --u unit; everything below uses a fluid
   clamp() scale so long-form pages breathe at every width.
   ============================================================ */

:root{
  --violet:#7C55E8;
  --violet-lt:#B9A2FF;
  --violet-dim:#6B48C9;
  --ground:#06030D;
  --ground-2:#0A0617;
  --card:rgba(255,255,255,.032);
  --card-hi:rgba(255,255,255,.055);
  --line:rgba(255,255,255,.075);
  --line-hi:rgba(255,255,255,.14);
  --txt:#f4f2fa;
  --txt-2:#b9b4c8;
  --txt-3:#8b8699;
  --gutter:clamp(20px, 5vw, 76px);
  --section-y:clamp(68px, 9vw, 132px);
  --maxw:1196px;
}

body{background:var(--ground);color:var(--txt)}

/* ---------------- primitives ---------------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.section{position:relative;padding:var(--section-y) 0}
.section--tint{background:var(--ground-2)}
.section--tint::before,.section--tint::after{
  content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent)}
.section--tint::before{top:0} .section--tint::after{bottom:0}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;
  font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--violet-lt)}
.eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--violet)}

h2.h-sec{
  margin:0;font-weight:500;font-size:clamp(29px, 4.1vw, 50px);
  line-height:1.08;letter-spacing:-.025em;color:#fff}
h3.h-sub{
  margin:0;font-weight:500;font-size:clamp(19px, 2.1vw, 23px);
  line-height:1.2;letter-spacing:-.018em;color:#fff}
.lede{
  margin:20px 0 0;max-width:64ch;font-weight:300;
  font-size:clamp(15.5px, 1.35vw, 17.6px);line-height:1.62;
  letter-spacing:-.008em;color:var(--txt-2)}
.sec-head{max-width:72ch}
.sec-head .lede{margin-top:18px}

/* ---------------- compact hero for inner pages ---------------- */
.hero--compact{height:auto;min-height:min(58vh, 520px);display:flex;align-items:flex-end}
.hero--compact .bg{height:100%;width:100%;left:0;top:0;transform:none}
.hero--compact .globe{opacity:.62}
.hero--compact .hero-inner{
  position:relative;left:auto;top:auto;transform:none;
  width:100%;max-width:var(--maxw);margin:0 auto;text-align:left;
  padding:calc(96px + 5vw) var(--gutter) clamp(44px, 6vw, 78px)}
.hero--compact h1{
  font-size:clamp(36px, 6.4vw, 78px);line-height:1.04;letter-spacing:-.03em}
.hero--compact .sub{
  margin-top:18px;max-width:58ch;font-size:clamp(15.5px, 1.45vw, 18px);
  line-height:1.6;letter-spacing:-.008em}
.hero--compact .sub br{display:none}
.hero--compact + .section{padding-top:clamp(34px,4.4vw,62px)}
.hero--compact::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(to bottom,transparent,var(--ground));pointer-events:none}

/* nav gains a backdrop once the page scrolls under it */
.nav.is-stuck{
  background:rgba(8,5,16,.82);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}

/* ---------------- credential strip ---------------- */
.creds{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:16px;overflow:hidden}
.cred{background:var(--ground);padding:clamp(20px,2.4vw,30px) clamp(18px,2vw,26px)}
.cred dt{
  margin:0 0 9px;font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--txt-3)}
.cred dd{
  margin:0;font-size:clamp(15px,1.6vw,18.5px);font-weight:500;
  letter-spacing:-.01em;color:#fff;line-height:1.3}
.cred dd small{display:block;margin-top:4px;font-size:13px;font-weight:300;color:var(--txt-2);letter-spacing:0}

/* ---------------- service groups ---------------- */
.group{margin-top:clamp(40px,5vw,64px)}
.group + .group{margin-top:clamp(44px,5.4vw,72px)}
.group-head{
  display:flex;align-items:baseline;gap:14px;
  padding-bottom:16px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.group-head h3{margin:0;font-size:clamp(17px,1.9vw,21px);font-weight:500;letter-spacing:-.015em;color:#fff}
.group-head span{font-size:12.5px;font-weight:400;color:var(--txt-3);letter-spacing:.02em}

.cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.card{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(20px,2.1vw,27px);background:var(--card);
  border:1px solid var(--line);border-radius:18px;text-decoration:none;
  transition:background .25s var(--e-soft),border-color .25s var(--e-soft),transform .25s var(--e-soft)}
a.card:hover{background:var(--card-hi);border-color:var(--line-hi);transform:translateY(-2px)}
.card h4{
  margin:0;font-size:16.6px;font-weight:500;letter-spacing:-.014em;color:#fff;
  display:flex;align-items:center;gap:9px}
.card p{margin:11px 0 0;font-size:14.3px;font-weight:300;line-height:1.56;color:var(--txt-2)}
.card .arw{width:12px;height:10px;opacity:0;transform:translateX(-3px);
  transition:opacity .25s var(--e-soft),transform .25s var(--e-soft);color:var(--violet-lt)}
a.card:hover .arw{opacity:1;transform:none}
.card--lift{background:linear-gradient(160deg,rgba(124,85,232,.14),rgba(124,85,232,.03) 58%,transparent);
  border-color:rgba(185,162,255,.2)}

/* ---------------- split feature ---------------- */
.split{display:grid;gap:clamp(32px,4.5vw,68px);grid-template-columns:1fr 1fr;align-items:center}
.split--narrow{grid-template-columns:.92fr 1.08fr}
.panel{
  position:relative;padding:clamp(24px,3vw,40px);border-radius:22px;
  background:linear-gradient(155deg,rgba(124,85,232,.11),rgba(10,6,23,.6) 62%);
  border:1px solid rgba(185,162,255,.16);overflow:hidden}
.panel::after{
  content:"";position:absolute;right:-28%;top:-48%;width:72%;height:132%;
  background:radial-gradient(circle,rgba(124,85,232,.3),transparent 68%);pointer-events:none}
.steps{margin:0;padding:0;list-style:none;counter-reset:s}
.steps li{
  position:relative;counter-increment:s;padding:0 0 0 46px;
  margin:0 0 clamp(20px,2.4vw,27px)}
.steps li:last-child{margin-bottom:0}
.steps li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--violet-lt);
  font-variant-numeric:tabular-nums}
.steps li::after{
  content:"";position:absolute;left:11px;top:22px;bottom:-22px;width:1px;
  background:linear-gradient(to bottom,var(--line-hi),transparent)}
.steps li:last-child::after{display:none}
.steps strong{display:block;font-size:16.2px;font-weight:500;letter-spacing:-.012em;color:#fff}
.steps span{display:block;margin-top:7px;font-size:14.3px;font-weight:300;line-height:1.55;color:var(--txt-2)}

/* ---------------- detail prose ---------------- */
.prose{max-width:70ch}
.prose h3{margin:clamp(34px,4vw,50px) 0 0;font-size:clamp(19px,2.1vw,23px);font-weight:500;letter-spacing:-.018em;color:#fff}
.prose h3:first-child{margin-top:0}
.prose p{margin:15px 0 0;font-size:15.9px;font-weight:300;line-height:1.68;color:var(--txt-2)}
.prose ul{margin:17px 0 0;padding:0;list-style:none}
.prose li{position:relative;padding-left:21px;margin:0 0 11px;font-size:15.5px;font-weight:300;line-height:1.6;color:var(--txt-2)}
.prose li::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--violet)}
.prose strong{color:var(--txt);font-weight:500}
.prose a{color:var(--violet-lt);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* ---------------- contact ---------------- */
.contact-grid{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:1.05fr .95fr;align-items:start}
.detail-list{margin:0;padding:0}
.detail-list div + div{margin-top:clamp(22px,2.6vw,30px);padding-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--line)}
.detail-list dt{margin:0 0 8px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3)}
.detail-list dd{margin:0;font-size:16px;font-weight:300;line-height:1.56;color:var(--txt-2)}
.detail-list dd a{color:#fff;font-weight:400;text-decoration:none;border-bottom:1px solid var(--line-hi);padding-bottom:1px;transition:border-color .2s ease}
.detail-list dd a:hover{border-color:var(--violet-lt)}

.form{display:grid;gap:15px;padding:clamp(22px,2.8vw,34px);background:var(--card);border:1px solid var(--line);border-radius:22px}
.field{display:grid;gap:8px}
.field label{font-size:12.5px;font-weight:500;letter-spacing:.01em;color:var(--txt-2)}
.field label .req{color:var(--violet-lt)}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:15px;font-weight:300;color:#fff;
  background:rgba(0,0,0,.42);border:1px solid var(--line);border-radius:12px;
  padding:13px 15px;transition:border-color .2s ease,background .2s ease}
.field textarea{min-height:124px;resize:vertical;line-height:1.55}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--txt-3) 50%),linear-gradient(135deg,var(--txt-3) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:40px}
.field input::placeholder,.field textarea::placeholder{color:#8e89a0}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:rgba(185,162,255,.5);background:rgba(0,0,0,.6)}
.form .btn{height:46px;border-radius:23px;font-size:14.6px;font-weight:500;gap:9px;margin-top:4px}
.form .btn .arw{width:13px;height:11px}
.form-note{margin:0;font-size:12.6px;font-weight:300;line-height:1.55;color:var(--txt-3)}
.form-note a{color:var(--txt-2)}

/* ---------------- closing CTA ---------------- */
.cta{text-align:center;padding:clamp(52px,7vw,92px) clamp(22px,4vw,64px);
  border:1px solid rgba(185,162,255,.17);border-radius:26px;
  background:radial-gradient(118% 150% at 50% 0%,rgba(124,85,232,.19),rgba(10,6,23,.35) 56%,transparent)}
.cta h2{margin:0 auto;max-width:22ch}
.cta .lede{margin:18px auto 0;text-align:center}
.cta .ctas{display:flex;justify-content:center;gap:10px;margin-top:30px;flex-wrap:wrap}
.cta .btn-lg{height:46px;border-radius:23px;font-size:14.8px;gap:9px}
.cta .btn-primary{padding:0 21px} .cta .btn-ghost{padding:0 20px}
.cta .btn-lg .arw{width:13px;height:11px}

/* ---------------- footer ---------------- */
.foot{border-top:1px solid var(--line);background:#040209;padding:clamp(48px,6vw,78px) 0 clamp(30px,3.4vw,44px)}
.foot-top{display:grid;gap:clamp(30px,4vw,56px);grid-template-columns:1.35fr 1fr 1fr}
.foot-brand .logo{font-size:17px;letter-spacing:.2px;transform:none;display:inline-block}
.foot-brand p{margin:15px 0 0;max-width:34ch;font-size:14px;font-weight:300;line-height:1.62;color:var(--txt-3)}
.foot-col h3{margin:0 0 15px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3)}
.foot-col ul{margin:0;padding:0;list-style:none}
.foot-col li + li{margin-top:11px}
.foot-col a{font-size:14.3px;font-weight:300;color:var(--txt-2);text-decoration:none;transition:color .2s ease}
.foot-col a:hover{color:#fff}
.foot-col address{font-style:normal;font-size:14.3px;font-weight:300;line-height:1.66;color:var(--txt-2)}
.foot-bar{margin-top:clamp(40px,5vw,64px);padding-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--line)}
.foot-reg{margin:0;font-size:13.2px;font-weight:400;line-height:1.62;color:var(--txt-2)}
.foot-disc{margin:14px 0 0;max-width:94ch;font-size:12.3px;font-weight:300;line-height:1.66;color:#8b8699}

/* ---------------- scroll reveal ---------------- */
.reveal{opacity:0;transform:translateY(18px)}
.reveal.in{opacity:1;transform:none;transition:opacity .72s var(--e-reveal),transform .72s var(--e-reveal)}
.reveal[data-d="1"].in{transition-delay:.07s}
.reveal[data-d="2"].in{transition-delay:.14s}
.reveal[data-d="3"].in{transition-delay:.21s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ---------------- responsive ---------------- */
@media (max-width:1000px){
  .creds{grid-template-columns:repeat(2,1fr)}
  .split,.split--narrow,.contact-grid{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:620px){
  .creds{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr;gap:34px}
  .hero--compact{min-height:0}
  .hero--compact .hero-inner{padding-top:calc(76px + 9vw);padding-bottom:40px}
  .group-head{flex-direction:column;gap:5px;align-items:flex-start}
}

/* skip link — visible only on keyboard focus */
.skip{position:absolute;left:-9999px;top:0;z-index:60;color:var(--btn-ink);background:var(--white-btn)}
.skip:focus{left:12px;top:12px;padding:11px 16px;border-radius:12px;
  background:var(--white-btn);color:var(--btn-ink);font-size:14px;font-weight:500;
  text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.5)}

/* contact form: status banner and honeypot */
.gj-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-notice{padding:14px 16px;border-radius:13px;font-size:14.2px;font-weight:400;
  line-height:1.52;margin:0 0 4px}
.form-notice--ok{background:rgba(124,85,232,.16);border:1px solid rgba(185,162,255,.34);color:#efeafd}
.form-notice--err{background:rgba(232,85,85,.13);border:1px solid rgba(255,162,162,.32);color:#ffe4e4}

/* ------------------------------------------------------------------
   Hero-to-page transition.
   The hero's violet used to stop dead at the section boundary, leaving a
   hard horizontal seam. Both sides now meet at one handoff colour: the
   hero settles into it, the section below starts from it and dissolves
   down to the page colour, so the join itself is invisible.
   ------------------------------------------------------------------ */
:root{ --handoff:23,16,47; }

.hero:not(.hero--compact)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:52%;
  z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(var(--handoff),0) 0%,
    rgba(var(--handoff),.42) 52%,
    rgba(var(--handoff),.82) 80%,
    rgb(var(--handoff)) 100%)}

.hero + .section{position:relative;background:transparent}
.hero + .section::before{
  content:"";position:absolute;left:0;right:0;top:0;height:min(620px,82%);
  z-index:0;pointer-events:none;
  background:linear-gradient(to bottom,
    rgb(var(--handoff)) 0%,
    rgba(var(--handoff),.74) 20%,
    rgba(var(--handoff),.38) 48%,
    rgba(var(--handoff),.12) 74%,
    rgba(var(--handoff),0) 100%)}
.hero + .section > *{position:relative;z-index:1}