/* =============================================================================
   Cyber Auctoritas — marketing site (layered / motion build)
   Palette: imperial ink · oxblood · burnished gold · parchment · steel · plasma
   ============================================================================= */

/* Self-hosted. No third-party font CDN: keeps the site standalone and avoids the
   Google Fonts data-transfer problem a security practice should not have to explain. */
@font-face{
  font-family:'Fraunces';src:url('../fonts/fraunces-var-latin.woff2') format('woff2-variations');
  font-weight:300 700;font-stretch:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'InterVar';src:url('../fonts/inter-var-latin.woff2') format('woff2-variations');
  font-weight:300 700;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --ink:#0B1020; --ink-2:#0E1530; --ink-3:#131C3A; --line:#1E2A4A;
  --oxblood:#7A1F2B; --oxblood-lt:#9A2C3A;
  --gold:#C6A15B; --gold-lt:#E7C87C; --gold-dk:#A97C3A;
  --parchment:#F4EFE6; --steel:#8A94A6; --steel-dk:#5A6684;
  --patina:#5BBFA8;
  --text:#E9E4D8; --muted:#98A0B4;
  /* surface ladder — depth comes from tone, not from stacked black shadows */
  --s-0:#0B1020; --s-1:#0E1530; --s-2:#131C3A; --s-3:#18224A;
  --serif:'Fraunces','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --sans:'InterVar','Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:ui-monospace,'Cascadia Code','JetBrains Mono','SF Mono',Consolas,'Liberation Mono',monospace;
  --wrap:1160px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 30px 80px -30px rgba(0,0,0,.7);
}

/* Fraunces axes dialled to the engraved end: WONK 0 and SOFT 0 give sharp,
   struck terminals rather than the friendly-wonky default this face is known for. */
h1,h2,h3,h4,.brand__word,.foot__latin{
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 120;
  font-synthesis:none;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--ink);color:var(--text);line-height:1.6;font-size:17px;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.06;letter-spacing:-.01em}
.gold{color:var(--gold-lt)}
.wrap{width:min(100% - 48px, var(--wrap));margin-inline:auto;position:relative}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:#000;padding:10px 16px;z-index:100}
.skip:focus{left:12px;top:12px}
::selection{background:var(--gold);color:#000}

body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(1200px 700px at 78% -8%,rgba(198,161,91,.10),transparent 60%),
    radial-gradient(900px 600px at 8% 12%,rgba(122,31,43,.16),transparent 55%),
    linear-gradient(180deg,#0A0E1C,#0B1020 40%)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 0,#000,transparent 75%);mask-image:radial-gradient(circle at 50% 0,#000,transparent 75%);opacity:.14}

/* ---------- scroll progress + cursor spotlight ---------- */
.scrollbar{position:fixed;top:0;left:0;height:2px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--gold-dk),var(--gold-lt));box-shadow:0 0 12px rgba(198,161,91,.55)}
.spot{position:fixed;top:0;left:0;width:560px;height:560px;border-radius:50%;pointer-events:none;z-index:0;
  transform:translate(-50%,-50%);opacity:0;transition:opacity .6s;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(198,161,91,.07),transparent 62%)}

/* =========================== BUTTONS =========================== */
.btn{--bg:transparent;--fg:var(--text);--bd:transparent;display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--sans);font-weight:600;font-size:.94rem;letter-spacing:.01em;padding:.85em 1.4em;border-radius:2px;
  border:1px solid var(--bd);background:var(--bg);color:var(--fg);cursor:pointer;position:relative;white-space:nowrap;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease),color .3s}
.btn--lg{font-size:1rem;padding:1em 1.7em}
.btn--gold{--bg:linear-gradient(180deg,var(--gold-lt),var(--gold));--fg:#231809;--bd:var(--gold-lt);font-weight:700;
  box-shadow:0 8px 30px -8px rgba(198,161,91,.5),inset 0 1px 0 rgba(255,255,255,.4)}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 16px 40px -10px rgba(198,161,91,.6),inset 0 1px 0 rgba(255,255,255,.5)}
.btn--ghost{--bd:rgba(198,161,91,.4);--fg:var(--gold-lt);background:rgba(198,161,91,.05)}
.btn--ghost:hover{--bd:var(--gold-lt);background:rgba(198,161,91,.12);transform:translateY(-2px)}

/* =========================== NAV =========================== */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .4s,backdrop-filter .4s,border-color .4s;border-bottom:1px solid transparent}
.nav.is-stuck{background:rgba(9,13,26,.8);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--line)}
.nav__inner{width:min(100% - 40px,1280px);margin-inline:auto;display:flex;align-items:center;gap:24px;height:74px}
.brand{display:flex;align-items:center;gap:11px;color:var(--gold-lt);font-family:var(--serif);font-weight:600}
.brand__seal{display:grid;place-items:center;color:var(--gold)}
.brand__word{font-size:1.16rem;letter-spacing:.02em;color:var(--parchment)}
.nav__links{margin-left:auto;display:flex;gap:26px}
.nav__links a{font-size:.92rem;color:var(--muted);font-weight:500;position:relative;padding:4px 0;transition:color .25s}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--gold);transition:width .3s var(--ease)}
.nav__links a:hover{color:var(--text)}.nav__links a:hover::after{width:100%}
.nav__cta{padding:.62em 1.15em;font-size:.86rem}
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav__burger span{width:24px;height:2px;background:var(--gold-lt);transition:.3s}

/* =========================== HERO =========================== */
.hero{position:relative;min-height:100svh;display:grid;align-items:center;padding:120px 0 80px;isolation:isolate;overflow:hidden}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.hero__mesh{position:absolute;inset:-12%;z-index:-1;filter:blur(34px);opacity:.85;
  background:radial-gradient(38% 40% at 22% 32%,rgba(122,31,43,.30),transparent 70%),radial-gradient(34% 36% at 80% 42%,rgba(198,161,91,.16),transparent 70%)}
.hero__veil{position:absolute;inset:0;z-index:-1;background:radial-gradient(closest-side at 50% 42%,transparent 28%,rgba(11,16,32,.55) 78%,var(--ink) 100%)}
.hero__inner{width:min(100% - 48px,980px);margin-inline:auto;text-align:center;position:relative;z-index:2}
.hero__seal{display:flex;justify-content:center;margin-bottom:24px;filter:drop-shadow(0 10px 40px rgba(198,161,91,.25))}
.hero__seal svg{animation:sealSpin 1.6s var(--ease) both;opacity:.96}
@keyframes sealSpin{from{opacity:0;transform:rotate(-14deg) scale(.9)}to{opacity:.96;transform:none}}
.hero__eyebrow{font-family:var(--mono);font-size:.8rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.hero__title{font-size:clamp(3rem,9vw,6.6rem);letter-spacing:-.025em;margin-bottom:24px}
.hero__title span{display:block;transform:translateY(46px);opacity:0;animation:lineUp 1.05s var(--ease) forwards}
.hero__title span:first-child{animation-delay:.25s}.hero__title span.gold{animation-delay:.42s}
@keyframes lineUp{to{transform:none;opacity:1}}
.hero__sub{font-size:clamp(1.05rem,2.1vw,1.28rem);color:var(--muted);max-width:660px;margin:0 auto 32px;line-height:1.65}
.hero__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
.hero__creds{list-style:none;display:flex;gap:10px 24px;justify-content:center;flex-wrap:wrap;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel-dk)}
.hero__creds li{position:relative}
.hero__creds li:not(:last-child)::after{content:"·";position:absolute;right:-14px;color:var(--gold-dk)}
.hero__scroll{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:.68rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--steel-dk);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:2}
.hero__scroll span{width:1px;height:34px;background:linear-gradient(var(--gold),transparent);animation:scrollPulse 2s var(--ease) infinite}
@keyframes scrollPulse{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* floating data shards (depth) */
.shard{position:absolute;z-index:1;background:rgba(14,21,48,.5);border:1px solid rgba(198,161,91,.22);border-radius:9px;
  padding:11px 15px;text-align:left;backdrop-filter:blur(9px);box-shadow:var(--shadow);animation:shardIn 1s var(--ease) both;animation-delay:1.1s}
.shard small{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;color:var(--steel);display:block;margin-bottom:2px}
.shard b{font-family:var(--serif);font-size:1.45rem;color:var(--gold-lt);display:block;line-height:1}
.shard i{font-family:var(--mono);font-size:.58rem;color:var(--gold-dk);font-style:normal}
.shard--a{top:19%;left:5%}.shard--b{top:24%;right:6%}.shard--c{bottom:23%;left:8%}.shard--d{bottom:27%;right:5%}
@keyframes shardIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1}}

/* seal draw-on */
.draw{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 2.6s var(--ease) forwards}
.seal-rays.draw{animation-delay:.5s}.laurel.draw{animation-delay:.9s;animation-duration:2s}.mono.draw{animation-delay:1.2s;animation-duration:1.4s}
@keyframes draw{to{stroke-dashoffset:0}}
.brand__seal .seal-ring,.brand__seal .seal-ticks,.brand__seal .seal-mono{stroke-dasharray:300;stroke-dashoffset:300;animation:draw 2s var(--ease) forwards}
.brand__seal .seal-mono{animation-delay:.4s}

/* =========================== SECTION SHELL =========================== */
section{position:relative;padding:clamp(78px,10vw,140px) 0}
.kicker{font-family:var(--mono);font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:12px;margin-bottom:20px}
.kicker i{font-style:normal;color:var(--steel-dk);border:1px solid var(--line);padding:2px 8px;border-radius:2px;font-size:.72rem}
.section-title{font-size:clamp(2.1rem,5.2vw,3.8rem);margin-bottom:22px;max-width:18ch}
.lede{font-size:clamp(1.05rem,2vw,1.26rem);color:var(--muted);max-width:64ch;line-height:1.66}
.lede em{color:var(--parchment);font-style:normal}

/* =========================== AUTHORITY =========================== */
.auth-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:46px}
.auth-cell{border-left:2px solid var(--gold-dk);padding:4px 0 4px 22px}
.auth-cell b{font-family:var(--serif);font-size:1.24rem;color:var(--parchment);display:block;margin-bottom:8px}
.auth-cell span{color:var(--muted);font-size:.95rem}

/* =========================== REFRAME / MORPH =========================== */
.reframe .lede{margin-bottom:54px}
.morph{display:grid;grid-template-columns:1fr auto 1.3fr;gap:26px;align-items:center;
  background:linear-gradient(180deg,var(--ink-2),rgba(14,21,48,.4));border:1px solid var(--line);border-radius:8px;padding:34px;box-shadow:var(--shadow)}
.morph__label{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--steel);display:block;margin-bottom:18px}
.morph__label--gold{color:var(--gold)}
.morph__checklist ul{list-style:none;display:grid;gap:12px}
.morph__checklist li{display:flex;align-items:center;gap:12px;color:var(--steel);font-size:.96rem;opacity:.5;transition:opacity .5s;
  padding:9px 12px;border:1px solid var(--line);border-radius:3px;background:rgba(0,0,0,.15)}
.is-in .morph__checklist li{opacity:1}
.morph .tick{width:20px;height:20px;border-radius:50%;background:rgba(138,148,166,.15);color:var(--steel);display:grid;place-items:center;font-size:.7rem;flex:0 0 auto}
.morph__arrow{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--gold);font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase}
.morph__arrow .chev{width:12px;height:12px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dash-cell{background:linear-gradient(180deg,rgba(198,161,91,.08),rgba(0,0,0,.2));border:1px solid rgba(198,161,91,.22);border-radius:4px;padding:16px;
  opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.is-in .dash-cell{opacity:1;transform:none}
.is-in .dash-cell:nth-child(2){transition-delay:.08s}.is-in .dash-cell:nth-child(3){transition-delay:.16s}
.is-in .dash-cell:nth-child(4){transition-delay:.24s}.is-in .dash-cell:nth-child(5){transition-delay:.32s}
.dash-cell b{font-family:var(--serif);font-size:1.7rem;color:var(--gold-lt);display:block;line-height:1}
.dash-cell small{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.dash-cell--wide{grid-column:1/-1}
.spark{display:flex;align-items:flex-end;gap:5px;height:38px;margin-bottom:8px}
.spark i{flex:1;height:var(--h);background:linear-gradient(180deg,var(--gold-lt),var(--gold-dk));border-radius:2px 2px 0 0;transform:scaleY(0);transform-origin:bottom;transition:transform .7s var(--ease)}
.is-in .spark i{transform:scaleY(1)}
.is-in .spark i:nth-child(2){transition-delay:.06s}.is-in .spark i:nth-child(3){transition-delay:.12s}.is-in .spark i:nth-child(4){transition-delay:.18s}
.is-in .spark i:nth-child(5){transition-delay:.24s}.is-in .spark i:nth-child(6){transition-delay:.3s}.is-in .spark i:nth-child(7){transition-delay:.36s}

/* =========================== DOORS =========================== */
.doors__grid{display:grid;grid-template-columns:1.15fr 1.15fr .9fr;gap:20px;margin-top:20px}
.door{position:relative;background:linear-gradient(180deg,var(--ink-2),rgba(12,18,40,.5));border:1px solid var(--line);border-radius:10px;
  padding:34px 30px;overflow:hidden;transition:border-color .4s,box-shadow .4s}
.door--lg{padding:40px 34px}
.door::before{content:"";position:absolute;inset:0;background:radial-gradient(360px 200px at 50% -10%,rgba(198,161,91,.12),transparent 70%);opacity:0;transition:opacity .4s}
.door:hover{border-color:rgba(198,161,91,.45);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.door:hover::before{opacity:1}
.door__tag{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  border:1px solid rgba(198,161,91,.3);border-radius:2px;padding:4px 8px;display:inline-block;margin-bottom:20px}
.door__ix{font-size:1.9rem;color:var(--gold);display:block;margin-bottom:14px}
.door h3{font-size:1.55rem;margin-bottom:12px}.door--lg h3{font-size:1.85rem}
.door p{color:var(--muted);margin-bottom:22px}
.door__link{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:var(--gold-lt);border-bottom:1px solid rgba(198,161,91,.4);padding-bottom:2px;transition:.3s}
.door__link:hover{border-color:var(--gold-lt);color:var(--parchment)}

/* =========================== METHOD =========================== */
.method__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}
.mcard{background:linear-gradient(180deg,var(--ink-2),rgba(12,18,40,.4));border:1px solid var(--line);border-radius:9px;padding:28px 26px;transition:border-color .4s,transform .4s var(--ease)}
.mcard:hover{border-color:rgba(198,161,91,.35)}
.mcard--wide{grid-column:1/3}
.mcard__no{font-family:var(--serif);font-style:italic;font-size:1.5rem;color:var(--gold-dk)}
.mcard h3{font-size:1.34rem;margin:8px 0 10px}
.mcard p{color:var(--muted);font-size:.95rem}
.pillars{margin-top:22px;display:grid;gap:14px;max-width:560px}
.pillar span{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);display:block;margin-bottom:6px}
.pillar .bar{height:8px;border-radius:4px;background:rgba(255,255,255,.06);position:relative;overflow:hidden;display:block}
.pillar .bar::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--v);background:linear-gradient(90deg,var(--gold-dk),var(--gold-lt));border-radius:4px;transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease)}
.is-in .pillar .bar::after{transform:scaleX(1)}
.is-in .pillar:nth-child(2) .bar::after{transition-delay:.12s}.is-in .pillar:nth-child(3) .bar::after{transition-delay:.24s}
.pillar-out{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.pillar-out small{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.pillar-out b{font-family:var(--serif);font-size:1.6rem;color:var(--gold-lt)}
.phases{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.ph{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:2px;border:1px solid var(--line);color:var(--steel)}
.ph--1{border-color:rgba(154,44,58,.55);color:var(--oxblood-lt)}.ph--2{border-color:rgba(198,161,91,.4);color:var(--gold)}.ph--3{border-color:var(--line);color:var(--steel-dk)}

/* =========================== SERVICES =========================== */
.svc__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
.svc{position:relative;border:1px solid var(--line);border-radius:9px;padding:32px 28px;background:linear-gradient(180deg,var(--ink-2),transparent);
  transition:border-color .4s,box-shadow .4s;overflow:hidden}
.svc::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,var(--gold),transparent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.svc:hover{border-color:rgba(198,161,91,.4);box-shadow:0 26px 50px -30px rgba(0,0,0,.8)}
.svc:hover::before{transform:scaleX(1)}
.svc h3{font-size:1.4rem;color:var(--gold-lt);margin-bottom:10px;padding-right:80px}
.svc p{color:var(--muted)}
.svc__meta{position:absolute;top:24px;right:26px;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel-dk);border:1px solid var(--line);padding:3px 7px;border-radius:2px}

/* =========================== PRODUCTS (accordion) =========================== */
.products__list{display:grid;gap:12px;margin-top:20px}
.prod{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--ink-2);transition:border-color .35s,box-shadow .35s}
.prod.is-open{border-color:rgba(198,161,91,.45);box-shadow:0 24px 50px -34px rgba(0,0,0,.8)}
.prod__head{width:100%;display:flex;align-items:center;gap:16px;padding:22px 26px;background:none;border:0;cursor:pointer;text-align:left;color:var(--text);transition:background .3s}
.prod__head:hover{background:rgba(198,161,91,.05)}
.prod__name{font-family:var(--serif);font-size:1.28rem;color:var(--parchment)}
.prod__tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-dk);margin-left:auto;text-align:right}
.prod__chev{width:11px;height:11px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg);transition:transform .35s var(--ease);flex:0 0 auto}
.prod.is-open .prod__chev{transform:rotate(-135deg)}
.prod__body{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.prod__body p{padding:2px 26px 0;color:var(--muted);font-size:.96rem}
.prod__list{list-style:none;padding:14px 26px 26px;display:grid;gap:9px}
.prod__list li{position:relative;padding-left:22px;color:var(--muted);font-size:.93rem}
.prod__list li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:1px;background:var(--gold)}

/* =========================== PLATFORM / CARDS =========================== */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
.card{background:linear-gradient(180deg,var(--ink-2),rgba(12,18,40,.5));border:1px solid var(--line);border-radius:9px;padding:30px 28px;position:relative;overflow:hidden;
  transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(400px 200px at var(--mx,50%) var(--my,0%),rgba(198,161,91,.1),transparent 70%);opacity:0;transition:opacity .4s}
.card:hover{transform:translateY(-6px);border-color:rgba(198,161,91,.4);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.card:hover::before{opacity:1}
.card__ix{font-family:var(--mono);font-size:.72rem;color:var(--gold-dk);letter-spacing:.12em}
.card h3{font-size:1.4rem;margin:12px 0 10px}
.card p{color:var(--muted);font-size:.96rem}
.ir-ticker{display:flex;gap:6px;margin-top:20px;flex-wrap:wrap}
.ir-ticker span{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--steel-dk);border:1px solid var(--line);padding:4px 8px;border-radius:2px}
.is-in .ir-ticker span{animation:phase 5s var(--ease) infinite}
.ir-ticker span:nth-child(1){animation-delay:0s}.ir-ticker span:nth-child(2){animation-delay:.4s}.ir-ticker span:nth-child(3){animation-delay:.8s}
.ir-ticker span:nth-child(4){animation-delay:1.2s}.ir-ticker span:nth-child(5){animation-delay:1.6s}
@keyframes phase{0%,80%,100%{color:var(--steel-dk);border-color:var(--line);background:transparent}8%,16%{color:#231809;border-color:var(--gold);background:var(--gold)}}

/* =========================== FRAMEWORKS =========================== */
.frameworks{text-align:center}
.frameworks .section-title,.frameworks .lede{margin-inline:auto}
.lattice{position:relative;height:320px;margin:14px 0 30px}
.lattice canvas{position:absolute;inset:0;width:100%;height:100%}
.fw-grid{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.fw-grid li{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:12px 8px;background:rgba(14,21,48,.4);transition:.35s var(--ease)}
.fw-grid li:hover{color:var(--gold-lt);border-color:rgba(198,161,91,.5);transform:translateY(-3px);background:rgba(198,161,91,.06)}

/* =========================== PRICING =========================== */
.pricing{background:linear-gradient(180deg,transparent,rgba(198,161,91,.04),transparent)}
.price__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px;align-items:stretch}
.price{position:relative;border:1px solid var(--line);border-radius:12px;padding:34px 30px;background:linear-gradient(180deg,var(--ink-2),rgba(12,18,40,.4));
  display:flex;flex-direction:column;transition:border-color .4s,box-shadow .4s}
.price:hover{border-color:rgba(198,161,91,.4)}
.price--feature{border-color:rgba(198,161,91,.5);box-shadow:0 30px 70px -34px rgba(198,161,91,.35);transform:translateY(-8px)}
.price__badge{position:absolute;top:-11px;left:30px;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#231809;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold));padding:4px 10px;border-radius:2px;font-weight:700}
.price h3{font-size:1.5rem}
.price__for{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-dk);margin:4px 0 20px}
.price__amt{display:flex;align-items:baseline;gap:8px;margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.price__amt span{font-family:var(--mono);font-size:.7rem;color:var(--steel)}
.price__amt b{font-family:var(--serif);font-size:2.6rem;color:var(--gold-lt);line-height:1}
.price__amt i{font-family:var(--mono);font-size:.7rem;color:var(--muted);font-style:normal}
.price ul{list-style:none;display:grid;gap:11px;margin-bottom:26px;flex:1}
.price li{position:relative;padding-left:22px;color:var(--muted);font-size:.94rem}
.price li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:1px;background:var(--gold)}
.price .btn{width:100%;justify-content:center}

/* =========================== PROOF =========================== */
.proof{text-align:center}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:60px}
.metric b{font-family:var(--serif);font-size:clamp(2.6rem,5vw,4rem);color:var(--gold-lt);display:block;line-height:1}
.metric small{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pull{font-family:var(--serif);font-size:clamp(1.4rem,3vw,2rem);line-height:1.4;max-width:26ch;margin:0 auto;color:var(--parchment)}
.pull cite{display:block;margin-top:22px;font-family:var(--mono);font-size:.8rem;font-style:normal;letter-spacing:.06em;color:var(--gold)}

/* =========================== CTA =========================== */
.cta{text-align:center;background:radial-gradient(700px 400px at 50% 0,rgba(198,161,91,.1),transparent 65%)}
.cta__inner{position:relative}
.cta__seal{display:flex;justify-content:center;margin-bottom:22px;opacity:.9;filter:drop-shadow(0 6px 24px rgba(198,161,91,.3))}
.cta h2{font-size:clamp(2.2rem,5.5vw,4rem);margin-bottom:18px}
.cta>.wrap>p,.cta__inner>p{color:var(--muted);max-width:56ch;margin:0 auto 32px;font-size:1.1rem}
.cta__form{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;max-width:760px;margin:0 auto}
.cta__form input{flex:1 1 190px;background:var(--ink-2);border:1px solid var(--line);border-radius:3px;padding:1em 1.1em;color:var(--text);font-family:var(--sans);font-size:.96rem;transition:border-color .3s}
.cta__form input::placeholder{color:var(--steel-dk)}
.cta__form input:focus{outline:none;border-color:var(--gold)}
.cta__form .btn{flex:0 0 auto}
.cta__field{flex:1 1 190px;display:flex;flex-direction:column;text-align:left}
.cta__field input{width:100%;flex:none}
.cta__form input[aria-invalid="true"]{border-color:var(--oxblood-lt)}
.cta__err{min-height:1.2em;margin-top:6px;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:#E38B96}
.cta__status{min-height:1.4em;margin-top:14px;color:var(--gold-lt);font-size:.95rem}
.cta__status a{color:var(--gold-lt);text-decoration:underline}
.cta__fine a{color:var(--gold);text-decoration:underline}
.btn__spin{display:none;width:1em;height:1em;margin-left:.6em;border:2px solid rgba(11,16,32,.35);border-top-color:var(--ink);border-radius:50%;animation:spin .8s linear infinite}
.btn.is-loading{pointer-events:none;opacity:.85}.btn.is-loading .btn__spin{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* sticky call to action on phones: shown below 860px, where the nav CTA is hidden */
.mcta{display:none}
@media(max-width:860px){
  .mcta{display:flex;justify-content:center;align-items:center;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:55;
    padding:.95em 1em;border-radius:3px;background:linear-gradient(180deg,var(--gold-lt),var(--gold));color:var(--ink);font-weight:600;font-size:.95rem;
    box-shadow:0 14px 34px -12px rgba(0,0,0,.7);transition:transform .35s,opacity .35s}
  .mcta.is-hidden{transform:translateY(140%);opacity:0;pointer-events:none}
  body{padding-bottom:76px}
}
.cta__fine{margin-top:20px;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--steel-dk)}

/* =========================== FOOTER =========================== */
.foot{border-top:1px solid var(--line);padding:64px 0 32px;background:rgba(8,11,22,.6)}
.foot__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:32px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.foot__brand .brand__word{font-size:1.3rem;color:var(--parchment);font-family:var(--serif)}
.foot__brand p{color:var(--muted);font-size:.92rem;margin-top:12px;max-width:36ch}
.foot__col h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;font-weight:600}
.foot__col a{display:block;color:var(--muted);font-size:.92rem;padding:5px 0;transition:color .25s}
.foot__col a:hover{color:var(--gold-lt)}
.foot__base{display:flex;justify-content:space-between;align-items:center;padding-top:26px;font-size:.82rem;color:var(--steel-dk);flex-wrap:wrap;gap:10px}
.foot__latin{font-family:var(--serif);font-style:italic;color:var(--gold-dk)}

/* =========================== REVEAL =========================== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
[data-stagger].is-in>.reveal,[data-stagger] .reveal.is-in{transition-delay:calc(var(--i,0)*.07s)}

/* =========================== BENTO (platform) =========================== */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:176px;gap:16px;margin-top:20px}
.bento__tile{padding:26px 26px}
.bento__tile--feature{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column}
.bento__tile--wide{grid-column:span 2}
.bento__tile .ir-ticker{margin-top:auto}
.ring{position:relative;width:132px;height:132px;margin:auto auto 0}
.ring svg{transform:rotate(-90deg)}
.ring__bg{fill:none;stroke:rgba(255,255,255,.07);stroke-width:8}
.ring__fg{fill:none;stroke:var(--gold);stroke-width:8;stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:327;transition:stroke-dashoffset 1.5s var(--ease);filter:drop-shadow(0 0 6px rgba(198,161,91,.5))}
.is-in .ring__fg,.bento__tile.is-in .ring__fg{stroke-dashoffset:105}
.ring__lbl{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring__lbl b{font-family:var(--serif);font-size:1.8rem;color:var(--gold-lt);line-height:1}
.ring__lbl small{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* =========================== PROGRAMS (tiles + panel) =========================== */
.prog{display:grid;grid-template-columns:300px 1fr;gap:22px;margin-top:20px;align-items:start}
.prog__tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.prog__tile{aspect-ratio:1;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:18px;text-align:left;color:var(--text);cursor:pointer;
  background:linear-gradient(180deg,var(--ink-2),rgba(12,18,40,.4));border:1px solid var(--line);border-radius:12px;transition:border-color .3s,transform .3s var(--ease),background .3s}
.prog__tile:hover{transform:translateY(-3px);border-color:rgba(198,161,91,.35)}
.prog__tile.is-active{border-color:var(--gold);background:linear-gradient(180deg,rgba(198,161,91,.14),rgba(12,18,40,.5))}
.prog__tile .ic{width:26px;height:26px;color:var(--gold);margin-bottom:auto}
.prog__tile h4{font-family:var(--serif);font-size:1.1rem;color:var(--parchment);line-height:1.05}
.prog__tile small{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-dk)}
.prog__tile:nth-child(5){grid-column:1/-1;aspect-ratio:auto;flex-direction:row;align-items:center;gap:12px}
.prog__tile:nth-child(5) .ic{margin:0}
.prog__tile:nth-child(5) h4{flex:0 0 auto}
.prog__panels{position:relative;min-height:300px}
.prog__panel{position:absolute;inset:0;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .45s var(--ease),transform .45s var(--ease);
  background:linear-gradient(180deg,var(--ink-2),rgba(12,18,40,.4));border:1px solid var(--line);border-radius:13px;padding:32px 34px;box-shadow:var(--shadow)}
.prog__panel.is-active{opacity:1;transform:none;pointer-events:auto;position:relative}
.prog__phead{display:flex;align-items:center;gap:16px;margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.prog__phead .ic--lg{margin:0;width:40px;height:40px}
.prog__phead h3{font-size:1.5rem}
.prog__phead span{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-dk)}
.prog .prod__list{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0}

/* =========================== VOICES CAROUSEL =========================== */
.voices__wrap{position:relative;margin-top:26px}
.voices__nav{position:absolute;top:-64px;right:0;display:flex;gap:8px;z-index:2}
.caro__btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--ink-2);cursor:pointer;position:relative;transition:border-color .3s,background .3s}
.caro__btn:hover{border-color:var(--gold);background:rgba(198,161,91,.1)}
.caro__btn::before{content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold)}
.caro__btn[data-caro="next"]::before{transform:translate(-65%,-50%) rotate(-45deg)}
.caro__btn[data-caro="prev"]::before{transform:translate(-35%,-50%) rotate(135deg)}
.voices__track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 2px 22px;-ms-overflow-style:none;scrollbar-width:none}
.voices__track::-webkit-scrollbar{display:none}
.voices__track .quote{flex:0 0 clamp(300px,33%,380px);scroll-snap-align:start}

/* =========================== MARQUEE (frameworks) =========================== */
.marquee{display:grid;gap:14px;margin:16px 0 12px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee__row{display:flex;width:max-content;gap:12px;animation:marq 42s linear infinite}
.marquee__row--rev{animation-direction:reverse;animation-duration:54s}
.marquee:hover .marquee__row{animation-play-state:paused}
.marquee__set{display:flex;gap:12px;padding-right:12px}
.fw-chip{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:12px 18px;background:rgba(14,21,48,.5);white-space:nowrap;transition:color .3s,border-color .3s,background .3s}
.fw-chip:hover{color:var(--gold-lt);border-color:rgba(198,161,91,.5);background:rgba(198,161,91,.06)}
@keyframes marq{to{transform:translateX(-50%)}}

/* =========================== ICONS =========================== */
.ic{width:1.2em;height:1.2em;display:inline-block;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.ic--lg{width:38px;height:38px;color:var(--gold);stroke-width:1.5;display:block;margin-bottom:16px}
.door .ic--lg,.svc .ic--lg{color:var(--gold)}
.card__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.card__top .ic{width:26px;height:26px;color:var(--gold)}
.mcard__head{display:flex;align-items:center;gap:12px;margin-bottom:2px}
.mcard__head .ic{width:26px;height:26px;color:var(--gold)}
.prod__ic{width:22px;height:22px;color:var(--gold)}
.price__ic{display:inline-grid;place-items:center;width:48px;height:48px;border:1px solid rgba(198,161,91,.3);border-radius:11px;margin-bottom:16px;background:rgba(198,161,91,.05)}
.price__ic .ic{width:24px;height:24px;color:var(--gold)}

/* authority visual tiles (override the earlier 3-col text layout) */
.auth-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.atile{background:linear-gradient(180deg,var(--ink-2),rgba(12,18,40,.4));border:1px solid var(--line);border-radius:11px;
  padding:28px 22px;text-align:center;transition:border-color .4s,transform .4s var(--ease),box-shadow .4s}
.atile:hover{border-color:rgba(198,161,91,.4);transform:translateY(-5px);box-shadow:0 26px 50px -32px rgba(0,0,0,.8)}
.atile .ic{width:30px;height:30px;color:var(--gold);margin:0 auto 12px;stroke-width:1.5}
.atile b{font-family:var(--serif);font-size:1.9rem;color:var(--gold-lt);display:block;line-height:1;margin-bottom:8px}
.atile span{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:block;line-height:1.5}

/* =========================== VOICES / TESTIMONIALS =========================== */
.voices__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.quote{position:relative;background:linear-gradient(180deg,var(--ink-2),rgba(12,18,40,.45));border:1px solid var(--line);
  border-radius:13px;padding:30px 28px 26px;overflow:hidden;transition:border-color .4s,transform .4s var(--ease),box-shadow .4s}
.quote:hover{border-color:rgba(198,161,91,.4);transform:translateY(-5px);box-shadow:0 30px 60px -34px rgba(0,0,0,.8)}
.quote--feature{border-color:rgba(198,161,91,.5);background:linear-gradient(180deg,rgba(122,31,43,.16),rgba(12,18,40,.55))}
.quote__mark{position:absolute;top:18px;right:20px;width:36px;height:36px;color:rgba(198,161,91,.22)}
.quote__stars{display:flex;gap:3px;margin-bottom:16px}
.quote__stars .ic{width:15px;height:15px;color:var(--gold)}
.quote blockquote{font-family:var(--serif);font-size:1.14rem;line-height:1.5;color:var(--parchment);margin-bottom:24px}
.quote figcaption{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:13px;align-items:center}
.quote__ini{grid-row:1/3;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:.82rem;
  color:var(--gold-lt);background:linear-gradient(180deg,rgba(198,161,91,.18),rgba(198,161,91,.05));border:1px solid rgba(198,161,91,.35)}
.quote figcaption b{font-family:var(--sans);font-size:.9rem;color:var(--text);font-weight:600;align-self:end}
.quote figcaption i{font-family:var(--mono);font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-dk);font-style:normal;align-self:start}

/* =========================== RESPONSIVE =========================== */
@media(max-width:980px){
  .cards,.method__grid,.svc__grid,.price__grid,.doors__grid{grid-template-columns:1fr 1fr}
  .bento{grid-template-columns:repeat(2,1fr)}
  .prog{grid-template-columns:1fr}.prog__tiles{grid-template-columns:repeat(4,1fr)}.prog__tile:nth-child(5){grid-column:auto}
  .mcard--wide{grid-column:1/-1}
  .fw-grid{grid-template-columns:repeat(4,1fr)}
  .metrics{grid-template-columns:1fr 1fr;gap:40px 24px}
  .auth-strip,.voices__grid{grid-template-columns:1fr 1fr}
  .foot__grid{grid-template-columns:1fr 1fr}
  .price--feature{transform:none}
  .shard{display:none}
}
@media(max-width:860px){
  .nav__links,.nav__cta{display:none}.nav__burger{display:flex;margin-left:auto}
  .morph{grid-template-columns:1fr;gap:20px}.morph__arrow{flex-direction:row}
  .doors__grid,.cards,.method__grid,.svc__grid,.price__grid,.voices__grid{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr;grid-auto-rows:auto}
  .bento__tile--feature,.bento__tile--wide{grid-column:auto;grid-row:auto}
  .prog__tiles{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  body{font-size:16px}
  .fw-grid{grid-template-columns:repeat(2,1fr)}.metrics{grid-template-columns:1fr}
  .dash-grid{grid-template-columns:1fr}.foot__grid{grid-template-columns:1fr 1fr}
  .cta__form{flex-direction:column}.cta__form input,.cta__form .btn{flex:1 1 auto;width:100%}
  .hero__cta .btn{width:100%;justify-content:center}
  .prod__head{flex-wrap:wrap}.prod__tag{margin-left:0;width:100%;text-align:left}
}

/* =========================== REDUCED MOTION =========================== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .draw{stroke-dashoffset:0}.hero__title span{transform:none;opacity:1}
  .reveal{opacity:1;transform:none}.dash-cell,.spark i{opacity:1;transform:none}
  .shard{opacity:1}.spot{display:none}.pillar .bar::after{transform:none}
  .marquee__row{animation:none;transform:none}.ring__fg{stroke-dashoffset:105}
}

/* ============================================================================
   MOTION LAYER v2 — cohesion, colour bands, live data, continuous movement
   ============================================================================ */
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes perim{to{--a:360deg}}
@keyframes rot{to{transform:rotate(360deg)}}
@keyframes rotcc{to{transform:rotate(-360deg)}}
@keyframes shine{to{background-position:-200% 0}}
@keyframes scan{0%{transform:translateX(-130%)}55%,100%{transform:translateX(340%)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes drift{to{background-position:340px 0,-260px 0}}

/* tighten the dead vertical gaps between sections */
section{padding:clamp(64px,7.6vw,116px) 0}

/* --- per-section colour bands (kills the flat uniform darkness) --- */
.authority,.reframe,.doors,.method,.services,.products,.platform,.frameworks,.pricing,.proof,.voices{isolation:isolate}
.wrap{z-index:1}
.reframe::before,.doors::before,.method::before,.services::before,.products::before,.platform::before,.frameworks::before,.pricing::before,.proof::before,.authority::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
.authority::before{background:radial-gradient(680px 400px at 88% 8%,rgba(198,161,91,.05),transparent 60%)}
.reframe::before{background:radial-gradient(720px 460px at 10% 18%,rgba(91,191,168,.055),transparent 60%),radial-gradient(560px 400px at 96% 96%,rgba(122,31,43,.07),transparent 62%)}
.doors::before{background:radial-gradient(760px 480px at 90% 6%,rgba(198,161,91,.07),transparent 60%)}
.method::before{background:radial-gradient(760px 520px at 4% 44%,rgba(122,31,43,.12),transparent 60%)}
.services::before{background:radial-gradient(640px 420px at 94% 24%,rgba(198,161,91,.05),transparent 60%)}
.products::before{background:radial-gradient(760px 500px at 8% 30%,rgba(91,191,168,.05),transparent 60%)}
.platform::before{background:radial-gradient(820px 540px at 92% 12%,rgba(91,191,168,.06),transparent 60%),radial-gradient(520px 360px at 4% 92%,rgba(198,161,91,.045),transparent 62%)}
.frameworks::before{background:radial-gradient(980px 620px at 50% -4%,rgba(198,161,91,.07),transparent 60%)}
.pricing::before{background:radial-gradient(820px 540px at 50% 4%,rgba(198,161,91,.06),transparent 60%)}
.proof::before{background:radial-gradient(700px 320px at 50% 50%,rgba(91,191,168,.05),transparent 62%)}

/* thin luminous top rule with a travelling shimmer between middle sections */
.reframe,.doors,.method,.services,.products,.platform,.frameworks,.pricing{border-top:1px solid transparent}
.reframe::after,.doors::after,.method::after,.services::after,.products::after,.platform::after,.frameworks::after,.pricing::after{}
.rule-top{position:absolute;top:0;left:0;right:0;height:1px;z-index:1;pointer-events:none;overflow:hidden;
  background:linear-gradient(90deg,transparent,rgba(198,161,91,.35) 30%,rgba(231,200,124,.55) 50%,rgba(198,161,91,.35) 70%,transparent)}


/* --- section titles: shimmering gold + HUD corner mark --- */
/* heading shimmer removed — reserved for the hero line only */
.kicker i{position:relative;overflow:hidden}


/* --- rotating "authority perimeter" on the hero-tier cards --- */
.price--feature::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:2;pointer-events:none;
  background:conic-gradient(from var(--a),transparent 0 48%,rgba(198,161,91,.5) 57%,var(--gold-lt) 71%,#fff8ea 79%,var(--patina) 85%,rgba(198,161,91,.45) 91%,transparent 98% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:.9;filter:drop-shadow(0 0 5px rgba(231,200,124,.6));animation:perim 5.5s linear infinite}
.price--feature::after{opacity:1;filter:drop-shadow(0 0 7px rgba(91,191,168,.55))}
.price--feature:hover::after{opacity:1;filter:drop-shadow(0 0 9px rgba(91,191,168,.7))}

/* --- authority tiles: filling meter + idle float --- */
.atile{position:relative;overflow:hidden}
.atile .ic{animation:floaty 5s var(--ease) infinite}
.atile:nth-child(2) .ic{animation-delay:.4s}.atile:nth-child(3) .ic{animation-delay:.8s}.atile:nth-child(4) .ic{animation-delay:1.2s}
.atile::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--patina),var(--gold-lt));box-shadow:0 0 10px rgba(91,191,168,.55);transition:width 1.2s var(--ease) .1s}
.auth-strip.is-in .atile::after{width:100%}
.auth-strip.is-in .atile:nth-child(2)::after{transition-delay:.24s}.auth-strip.is-in .atile:nth-child(3)::after{transition-delay:.38s}.auth-strip.is-in .atile:nth-child(4)::after{transition-delay:.52s}

/* --- reframe dashboard: cyan scan sweep + live pulse + brighter spark --- */
.morph__dash{position:relative;overflow:hidden}
.morph__dash::after{content:"";position:absolute;top:0;bottom:0;left:0;width:44%;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(91,191,168,.10),transparent);transform:translateX(-130%)}
.morph.is-in .morph__dash::after{opacity:1;animation:scan 4.6s var(--ease) infinite}
.morph__label--gold{display:flex;align-items:center;gap:9px}
.morph__label--gold::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--patina);box-shadow:0 0 9px var(--patina);animation:blink 1.5s infinite}
.spark i{background:linear-gradient(180deg,var(--patina),var(--gold))!important;box-shadow:0 0 8px rgba(91,191,168,.25)}

/* --- proof counters: rotating conic ring behind each number --- */
.metric{position:relative;isolation:isolate}
/* counter rings removed — the number is the event, not the ring around it */

/* --- frameworks: rotating radar sweep + brighter, livelier chips --- */
.frameworks{overflow:hidden}
.frameworks .fw-radar{display:none}
.lattice{height:400px;opacity:1;z-index:1}
.marquee{position:relative;z-index:1;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.fw-chip{border-color:rgba(198,161,91,.24);background:rgba(14,21,48,.66);color:var(--parchment);transition:color .3s,border-color .3s,background .3s,transform .3s,box-shadow .3s}
.fw-chip:hover{transform:translateY(-3px);border-color:var(--patina);color:#fff;box-shadow:0 12px 28px -14px rgba(91,191,168,.6),inset 0 0 12px rgba(91,191,168,.08)}

/* --- global spine: a system rail with a scroll-linked pulse --- */
.spine{position:fixed;left:calc(max(20px,(100vw - var(--wrap))/2) - 30px);top:15vh;height:70vh;width:2px;z-index:4;pointer-events:none;border-radius:2px;
  background:linear-gradient(180deg,transparent,rgba(198,161,91,.16) 10%,rgba(198,161,91,.16) 90%,transparent)}
.spine i{position:absolute;left:50%;top:0;width:9px;height:9px;margin-left:-4.5px;margin-top:-4.5px;border-radius:50%;
  background:var(--gold-lt);box-shadow:0 0 12px 3px rgba(231,200,124,.7),0 0 3px #fff}
@media(max-width:1120px){.spine{display:none}}

/* motion-layer reduced-motion guards */
@media(prefers-reduced-motion:reduce){
  .section-title .gold{-webkit-text-fill-color:var(--gold-lt);color:var(--gold-lt);animation:none;background:none}
  .door::after,.price--feature::after,.bento__tile--feature::after,.fw-radar,.metric::before,.atile .ic,.kicker i::after,.rule-top::before,.morph__dash::after,.morph__label--gold::before{animation:none}
  .metric.is-in::before{opacity:.4}
  .atile::after{width:100%;transition:none}
}


/* ============================================================================
   MOTION LAYER v2 — endcaps: intensify the hero + CTA to match the middle
   ============================================================================ */
/* hero title: keep the entrance, then shimmer on loop */
.hero__title span.gold{
  animation:lineUp 1.05s var(--ease) .42s forwards, shine 7s linear 1.7s infinite;
  background:linear-gradient(100deg,var(--gold-dk) 0 38%,var(--gold-lt) 50%,var(--gold-dk) 62% 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* rotating cyan radar behind the hero seal */
.hero__seal{position:relative;isolation:isolate}
/* hero seal halos removed — the armillary canvas provides the orbit */

/* floating shards: authority perimeter + brighter shell */
.shard{overflow:hidden;background:rgba(14,21,48,.6);border-color:rgba(198,161,91,.3)}
.shard i{color:var(--patina)}
/* shard conic shells removed in the restraint pass — the armillary owns rotation */

/* CTA: dual-tone band + radar seal + shimmer + cyan focus */
.cta{background:radial-gradient(780px 440px at 50% 0,rgba(198,161,91,.13),transparent 62%),radial-gradient(640px 400px at 50% 104%,rgba(91,191,168,.07),transparent 66%)}
.cta__inner{isolation:isolate}
.cta h2 .gold{background:linear-gradient(100deg,var(--gold-dk) 0 38%,var(--gold-lt) 50%,var(--gold-dk) 62% 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:shine 6.5s linear infinite}
.cta__seal{position:relative;isolation:isolate}
.cta__seal svg{animation:floaty 5.5s var(--ease) infinite}

.cta__form input{transition:border-color .3s,box-shadow .3s}
.cta__form input:focus{border-color:var(--patina);box-shadow:0 0 0 3px rgba(91,191,168,.13)}

@media(prefers-reduced-motion:reduce){
  .hero__title span.gold{-webkit-text-fill-color:var(--gold-lt);animation:none;background:none}
  .cta h2 .gold{-webkit-text-fill-color:var(--gold-lt);color:var(--gold-lt);animation:none;background:none}
  .hero__seal::before,.hero__seal::after,.shard::after,.cta__seal svg,.cta__seal::before{animation:none}
}

/* ============================================================================
   REFINEMENT PASS — typography, depth, and ambient life
   Direction taken from the two reference systems the brief named:
     · hierarchy from scale, not weight
     · aggressive negative tracking on display sizes, wide tracking on labels
     · depth from surface tone, not from stacked black shadows
     · one signature motion object, ambient movement kept below the content
   ============================================================================ */

/* ---------- type ---------- */
h1,h2,h3,h4{font-weight:400}                       /* scale carries hierarchy now */
.hero__title{font-size:clamp(3.1rem,9.6vw,7.2rem);letter-spacing:-.042em;line-height:.94}
.hero__title span{display:block}
.section-title{font-size:clamp(2.2rem,5.4vw,4rem);letter-spacing:-.032em;line-height:1.02;max-width:17ch}
.cta h2{letter-spacing:-.034em;line-height:1}
.door h3,.door--lg h3,.card h3,.mcard h3,.svc h3,.price h3,.prog__phead h3{letter-spacing:-.018em}
.quote blockquote{letter-spacing:-.012em;font-weight:400}
.hero__sub,.lede{font-weight:300}                  /* airy body, per the reference systems */
.hero__sub{max-width:62ch;letter-spacing:.004em}
/* numerals should read as instrument readouts, not prose */
.shard b,.dash-cell b,.metric b,.atile b,.price__amt b,.ring__lbl b,.pillar-out b{
  font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.02em}

/* ---------- depth: surface ladder instead of drop shadows ---------- */
:root{--shadow:0 18px 44px -28px rgba(0,0,0,.6)}
.door,.card,.mcard,.svc,.price,.atile,.quote,.prog__tile,.prog__panel{
  background:linear-gradient(180deg,var(--s-2),var(--s-1));
  border-color:#1B2748;
  box-shadow:inset 0 1px 0 rgba(231,200,124,.055);   /* struck top edge, not a glow */
}
.door:hover,.card:hover,.svc:hover,.atile:hover,.quote:hover,.mcard:hover{
  background:linear-gradient(180deg,var(--s-3),var(--s-2));
  border-color:rgba(198,161,91,.34);
  box-shadow:inset 0 1px 0 rgba(231,200,124,.11),0 22px 48px -34px rgba(0,0,0,.75)}
.price--feature{background:linear-gradient(180deg,#1A1430,var(--s-2))}
.morph{background:linear-gradient(180deg,var(--s-2),var(--s-1));box-shadow:inset 0 1px 0 rgba(231,200,124,.05)}

/* ---------- ambient: the nine static sections get slow-drifting light ---------- */
@keyframes bandDrift{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(2.5%,-1.8%,0) scale(1.06)}
  100%{transform:translate3d(0,0,0) scale(1)}
}
.authority::before,.reframe::before,.doors::before,.method::before,.services::before,
.products::before,.platform::before,.frameworks::before,.pricing::before,.proof::before{
  animation:bandDrift 26s ease-in-out infinite;will-change:transform}
.reframe::before{animation-duration:31s}.method::before{animation-duration:29s;animation-delay:-6s}
.services::before{animation-duration:34s;animation-delay:-12s}.platform::before{animation-duration:27s;animation-delay:-4s}
.pricing::before{animation-duration:33s;animation-delay:-9s}.doors::before{animation-duration:30s;animation-delay:-16s}

/* ---------- hero: let the instrument breathe ---------- */
.hero__mesh{opacity:.5}
.hero__veil{background:radial-gradient(closest-side at 50% 44%,transparent 34%,rgba(11,16,32,.42) 76%,var(--ink) 100%)}
.hero__seal svg{opacity:.99}
.hero__eyebrow{letter-spacing:.3em;color:var(--gold-dk)}
/* the one place shimmer is still allowed */
.hero__title span.gold{animation:lineUp 1.05s var(--ease) .42s forwards,shine 9s linear 1.9s infinite}

/* shards read as instrument readouts pinned to the frame, not floating chrome */
.shard{background:rgba(11,16,32,.62);border-color:rgba(198,161,91,.2);border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(231,200,124,.07)}
.shard i{color:var(--patina)}
.shard b{font-size:1.5rem}

/* ---------- frameworks: the field is the argument, so give it room ---------- */
.frameworks .lattice{height:440px;margin-top:-10px}
.frameworks .section-title{position:relative;z-index:2}

/* ---------- focus visibility (quality floor) ---------- */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--gold-lt);outline-offset:3px;border-radius:2px}

@media(prefers-reduced-motion:reduce){
  .authority::before,.reframe::before,.doors::before,.method::before,.services::before,
  .products::before,.platform::before,.frameworks::before,.pricing::before,.proof::before{animation:none}
  .hero__title span.gold{animation:none}
}

/* ---------- overflow fix: grid items default to min-content and pushed the
   programs block past the wrap at 390px. Also collapse the two-column
   deliverable list on small screens. ---------- */
.prog,.prog__tiles,.prog__panels,.doors__grid,.method__grid,.svc__grid,
.price__grid,.bento,.metrics,.auth-strip,.foot__grid{min-width:0}
.prog__tiles>*,.prog__panels>*,.doors__grid>*,.method__grid>*,.svc__grid>*,
.price__grid>*,.bento>*,.metrics>*,.auth-strip>*{min-width:0}
.prog__tile h4{min-width:0;overflow-wrap:anywhere}
@media(max-width:720px){
  .prog .prod__list{grid-template-columns:1fr}
  .prog__tile:nth-child(5){flex-wrap:wrap}
}






/* ============================================================================
   SECTION CHOREOGRAPHY
   A section announces itself in sequence: rule, heading, hairline, content.
   Sequencing is what makes arrival feel directed. Everything is one-shot on
   entry rather than looping, so the page stays calm once you have read it.
   ============================================================================ */

/* 1. the divider draws across */
.rule-top{transform:scaleX(0);transform-origin:left;transition:transform 1.25s var(--ease)}
section.is-in .rule-top{transform:scaleX(1)}

/* 2. the heading wipes in rather than fading up: a struck line, not a fade */
/* Driven off the SECTION's in-view class, never the heading's own. Clipping the
   heading to zero width drops its intersection ratio below the observer
   threshold, so a self-triggered wipe never un-clips itself. */
.section-title.reveal,.cta h2.reveal{opacity:1;transform:none;
  clip-path:inset(0 102% -12% -2%);transition:clip-path 1.15s var(--ease) .18s}
section.is-in .section-title.reveal,section.is-in .cta h2.reveal,
.cta.is-in h2.reveal{clip-path:inset(0 -2% -12% -2%)}

/* 3. a hairline extends out of the kicker, pointing into the section */
.kicker{position:relative}
.kicker::after{content:"";position:absolute;left:calc(100% + 18px);top:50%;height:1px;width:0;
  background:linear-gradient(90deg,var(--gold-dk),transparent);
  transition:width 1.3s var(--ease) .35s;pointer-events:none}
.kicker.is-in::after{width:min(300px,20vw)}
.frameworks .kicker::after,.proof .kicker::after{display:none}   /* centred sections */

/* 4. numerals read as instrument output while they settle */
.atile b,.dash-cell b,.pillar-out b,.ring__lbl b,.price__amt b,.shard b{
  font-variant-numeric:tabular-nums lining-nums}

/* 5. capability moments, one per section, all one-shot on entry */

/* doors: a light passes across the three, left to right, once */
.doors.is-in .door{position:relative;overflow:hidden}
.doors.is-in .door::before{opacity:1;transform:translateX(0)}
.door::after{content:"";position:absolute;top:0;bottom:0;left:0;width:38%;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(231,200,124,.09),transparent);
  transform:translateX(-140%);opacity:0}
.doors.is-in .door::after{opacity:1;animation:sweepOnce 1.5s var(--ease) forwards}
.doors.is-in .door:nth-child(2)::after{animation-delay:.18s}
.doors.is-in .door:nth-child(3)::after{animation-delay:.36s}
@keyframes sweepOnce{to{transform:translateX(320%)}}

/* services: the accent rule on each card draws itself on arrival, not on hover */
.services.is-in .svc::before{transform:scaleX(1);transition-delay:.35s}
.services.is-in .svc:nth-child(2)::before{transition-delay:.5s}
.services.is-in .svc:nth-child(3)::before{transition-delay:.65s}

/* products: the open programme's deliverables arrive in order */
.prog__panel.is-active .prod__list li{opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.products.is-in .prog__panel.is-active .prod__list li{opacity:1;transform:none}
.products.is-in .prog__panel.is-active .prod__list li:nth-child(2){transition-delay:.07s}
.products.is-in .prog__panel.is-active .prod__list li:nth-child(3){transition-delay:.14s}
.products.is-in .prog__panel.is-active .prod__list li:nth-child(4){transition-delay:.21s}
.products.is-in .prog__panel.is-active .prod__list li:nth-child(5){transition-delay:.28s}

/* pricing: the featured plan lifts and its perimeter ignites as it arrives */
.price--feature{transition:transform .9s var(--ease),box-shadow .9s var(--ease),border-color .4s}
.pricing.is-in .price--feature{transform:translateY(-8px);
  box-shadow:0 34px 74px -34px rgba(198,161,91,.42)}
.price--feature::after{opacity:0;transition:opacity 1.1s var(--ease) .55s}
.pricing.is-in .price--feature::after{opacity:1}

/* frameworks: the marquee starts once the section is actually being read */
.marquee__row{animation-play-state:paused}
.frameworks.is-in .marquee__row{animation-play-state:running}

/* voices: quotes arrive in sequence rather than all at once */
.voices .quote{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.voices.is-in .quote{opacity:1;transform:none}
.voices.is-in .quote:nth-child(2){transition-delay:.09s}
.voices.is-in .quote:nth-child(3){transition-delay:.18s}
.voices.is-in .quote:nth-child(4){transition-delay:.27s}
.voices.is-in .quote:nth-child(5){transition-delay:.36s}
.voices.is-in .quote:nth-child(6){transition-delay:.45s}

@media(prefers-reduced-motion:reduce){
  .rule-top{transform:none}
  .section-title.reveal,.cta h2.reveal{clip-path:none}
  .kicker::after{width:min(300px,20vw);transition:none}
  .door::after{display:none}
  .services .svc::before{transform:scaleX(1)}
  .prog__panel.is-active .prod__list li,.voices .quote{opacity:1;transform:none;transition:none}
  .marquee__row{animation:none}
  .pricing.is-in .price--feature{transform:none}
  .price--feature::after{opacity:1;transition:none}
}

/* ============================================================================
   HERO — the brand section
   Centred column: seal with its sonar rings, then the claim beneath it. This is
   the page's most important moment, so it gets the largest type, the widest
   breathing room, and the only looping motion left on the site.
   ============================================================================ */
.hero__inner{width:min(100% - 48px,1000px);text-align:center;display:block}
.hero__seal{display:flex;justify-content:center;margin:0 0 30px}
.hero__seal svg{width:clamp(178px,19vw,232px);height:auto}

.hero__eyebrow{margin-bottom:22px;letter-spacing:.26em;font-size:.76rem;color:var(--gold-dk)}
.hero__title{font-size:clamp(3rem,8.4vw,7.4rem);letter-spacing:-.044em;line-height:.92;margin-bottom:28px}
.hero__title span{display:block;transform:translateY(46px);opacity:0;animation:lineUp 1.05s var(--ease) forwards}
.hero__title span:nth-child(1){animation-delay:.24s}
.hero__title span:nth-child(2){animation-delay:.36s}
.hero__title span:nth-child(3){animation-delay:.48s}

.hero__sub{max-width:56ch;margin:0 auto 36px;font-size:clamp(1.05rem,1.6vw,1.26rem)}
.hero__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
.hero__creds{justify-content:center;gap:9px 22px;font-size:.7rem;letter-spacing:.11em}

/* readouts sit at the corners of the frame, clear of the centred column */
.hero .shard{position:absolute}
.shard--a{top:18%;left:4%}.shard--b{top:23%;right:5%}
.shard--c{bottom:22%;left:6%}.shard--d{bottom:26%;right:4%}

.hero__scroll{left:50%;transform:translateX(-50%);margin-left:0;bottom:26px;
  flex-direction:column;align-items:center;gap:8px}
.hero__scroll span{width:1px;height:32px;background:linear-gradient(var(--gold),transparent);
  animation:scrollPulse 2.4s var(--ease) infinite}

@media(max-width:1180px){.shard--a,.shard--b,.shard--c,.shard--d{display:none}}
@media(max-width:640px){
  .hero__title{font-size:clamp(2.6rem,12vw,4rem)}
  .hero__seal svg{width:clamp(148px,38vw,190px)}
}

/* ---- brand section must fit the fold ----
   Every element the brand moment needs (seal, claim, promise, both actions and
   the framework row) has to be visible without scrolling, so the display sizes
   are capped against viewport HEIGHT as well as width. Sizing on vw alone made
   the headline tall enough to push the actions off-screen on a laptop. */
.hero{padding:96px 0 64px}
.hero__seal{margin:0 0 20px}
.hero__seal svg{width:clamp(132px,min(15vw,17vh),206px)}
.hero__eyebrow{margin-bottom:16px;font-size:.72rem}
.hero__title{font-size:clamp(2.5rem,min(7.6vw,10.4vh),6.6rem);margin-bottom:20px}
.hero__sub{margin:0 auto 26px;font-size:clamp(1rem,min(1.5vw,2.1vh),1.2rem);max-width:54ch}
.hero__cta{margin-bottom:24px}
.hero__creds{font-size:.68rem;gap:8px 20px}
@media(max-width:640px){
  .hero{padding:88px 0 56px}
  .hero__title{font-size:clamp(2.4rem,11vw,3.6rem)}
  .hero__seal svg{width:clamp(126px,32vw,168px)}
}

/* ---- hero mesh: drop the blur filter ----
   filter:blur(34px) over an element larger than the viewport was costing more
   frame time than the rest of the page combined, and it sat behind an animated
   hero so it recomposited constantly. The mesh is two radial gradients, which
   are already soft, so the blur bought almost nothing. Wider stops give the
   same falloff for free. */
.hero__mesh{filter:none;inset:-6%;opacity:.62;
  background:radial-gradient(46% 54% at 22% 30%,rgba(122,31,43,.26),transparent 72%),
             radial-gradient(42% 50% at 80% 44%,rgba(198,161,91,.13),transparent 74%)}

/* ---- the passage ----
   A single fixed field behind the whole page. Scrolling is travel through it,
   which is what gives the site depth between sections rather than each one
   being a flat panel. Sits above the base wash, below the survey grid. */
.starfield{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
body::before{z-index:-3}

/* =============================================================================
   DEPTH PASS (October 2026)
   The page was one plane: every surface within a few shades of the same ink,
   so cards, sections and the field behind them blended together. This pass
   gives it a lit, layered space. Three tools, each borrowed from a reference
   that does dark depth well and translated into this palette:
   a surface ladder with a lit top edge (cards read as objects, not outlines),
   stronger atmospheric colour fields per section (the light the objects sit
   in), and real elevation shadows. Scroll drives the rest through two CSS
   variables written by app.js: --sp per section and --enter per card grid.
   ============================================================================= */
:root{
  --s-1:#121A3A; --s-2:#18224A; --s-3:#202C5C;
  --edge:rgba(255,232,180,.15);
  --lift:0 1px 0 rgba(0,0,0,.5),0 12px 24px -12px rgba(0,0,0,.75),0 36px 72px -30px rgba(0,0,0,.9);
  --lift-hi:0 1px 0 rgba(0,0,0,.5),0 20px 38px -14px rgba(0,0,0,.8),0 56px 96px -34px rgba(0,0,0,.95),
            0 0 0 1px rgba(231,200,124,.30),0 24px 70px -26px rgba(198,161,91,.42);
  --muted:#AAB2C5;
}

/* ---------- the floor: lifted mid-page so sections have room to separate ---------- */
body::before{
  background:radial-gradient(1300px 760px at 80% -6%,rgba(198,161,91,.16),transparent 60%),
    radial-gradient(1000px 680px at 6% 14%,rgba(122,31,43,.26),transparent 56%),
    radial-gradient(1200px 900px at 50% 120%,rgba(46,72,150,.22),transparent 60%),
    linear-gradient(180deg,#0A0F22,#0E1634 34%,#0C1228 68%,#0F1736)}
body::after{opacity:.2}

/* alternate sections sit on a raised band, so the page reads as stacked tiers */
.reframe,.method,.products,.pricing,.voices{
  background:linear-gradient(180deg,transparent,rgba(30,44,96,.34) 14%,rgba(30,44,96,.34) 86%,transparent)}

/* ---------- atmospheric fields: three times the light, and they move with scroll ---------- */
.authority::before{background:radial-gradient(760px 460px at 88% 8%,rgba(198,161,91,.16),transparent 60%),radial-gradient(620px 420px at 6% 90%,rgba(91,191,168,.10),transparent 62%)}
.reframe::before{background:radial-gradient(760px 480px at 10% 18%,rgba(91,191,168,.14),transparent 60%),radial-gradient(640px 440px at 96% 96%,rgba(154,44,58,.22),transparent 62%)}
.doors::before{background:radial-gradient(820px 520px at 90% 6%,rgba(198,161,91,.17),transparent 60%),radial-gradient(640px 420px at 4% 96%,rgba(70,100,200,.16),transparent 62%)}
.method::before{background:radial-gradient(820px 560px at 4% 44%,rgba(154,44,58,.28),transparent 60%),radial-gradient(560px 380px at 96% 10%,rgba(198,161,91,.10),transparent 62%)}
.services::before{background:radial-gradient(720px 460px at 94% 24%,rgba(198,161,91,.16),transparent 60%),radial-gradient(600px 400px at 6% 80%,rgba(91,191,168,.10),transparent 62%)}
.products::before{background:radial-gradient(820px 540px at 8% 30%,rgba(91,191,168,.15),transparent 60%),radial-gradient(560px 380px at 94% 90%,rgba(198,161,91,.12),transparent 62%)}
.platform::before{background:radial-gradient(880px 580px at 92% 12%,rgba(91,191,168,.16),transparent 60%),radial-gradient(600px 420px at 4% 92%,rgba(198,161,91,.14),transparent 62%)}
.frameworks::before{background:radial-gradient(1040px 660px at 50% 0%,rgba(198,161,91,.18),transparent 60%),radial-gradient(800px 500px at 50% 100%,rgba(70,100,200,.16),transparent 64%)}
.pricing::before{background:radial-gradient(880px 580px at 50% 4%,rgba(198,161,91,.17),transparent 60%),radial-gradient(600px 420px at 2% 90%,rgba(154,44,58,.16),transparent 62%)}
.proof::before{background:radial-gradient(760px 360px at 50% 50%,rgba(91,191,168,.14),transparent 62%)}
/* fields are larger than their section so no glow is clipped into a hard edge;
   `translate` is independent of the `transform` the drift animation owns */
.authority::before,.reframe::before,.doors::before,.method::before,.services::before,
.products::before,.platform::before,.frameworks::before,.pricing::before,.proof::before{
  inset:-30% 0;translate:0 calc(var(--sp,0) * -90px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}

/* ---------- the surface ladder: every card is an object with a lit top edge ---------- */
.door,.mcard,.svc,.card,.price,.atile,.quote,.prog__tile{
  background:linear-gradient(180deg,var(--s-3) 0%,var(--s-2) 42%,var(--s-1) 100%);
  border-color:rgba(231,200,124,.14);
  box-shadow:var(--lift),inset 0 1px 0 var(--edge),inset 0 -1px 0 rgba(0,0,0,.4)}
.door:hover,.mcard:hover,.svc:hover,.card:hover,.price:hover,.atile:hover,.quote:hover,.prog__tile:hover{
  border-color:rgba(231,200,124,.42);
  box-shadow:var(--lift-hi),inset 0 1px 0 rgba(255,232,180,.26),inset 0 -1px 0 rgba(0,0,0,.4)}
.prog__tile.is-active{background:linear-gradient(180deg,rgba(198,161,91,.26),var(--s-2) 70%);border-color:var(--gold)}
.price--feature{background:linear-gradient(180deg,#2A2648 0%,#1E2450 45%,var(--s-1) 100%);
  box-shadow:var(--lift-hi),inset 0 1px 0 rgba(255,232,180,.3)}
.door p,.mcard p,.svc p,.card p,.price li,.quote p,.atile span{color:var(--muted)}
.fw-chip{background:linear-gradient(180deg,var(--s-3),var(--s-1));border-color:rgba(231,200,124,.18)!important;
  box-shadow:0 8px 18px -10px rgba(0,0,0,.8),inset 0 1px 0 var(--edge)}

/* ---------- grids rise out of depth as they enter ----------
   rotate / translate / scale are individual properties, so they compose with
   each child's own reveal and hover transforms instead of replacing them. */
section,section>.wrap{perspective:1600px}
.dgrid{transform-origin:50% 0;
  rotate:x calc(var(--enter,0) * 18deg);
  translate:0 calc(var(--enter,0) * 70px) calc(var(--enter,0) * -140px);
  scale:calc(1 - var(--enter,0) * .04)}

/* ---------- the seal: struck heavier, lit harder, and it turns like a coin ---------- */
.hero__mesh{opacity:.95}
.hero__veil{background:radial-gradient(closest-side at 50% 44%,transparent 40%,rgba(11,16,32,.30) 80%,rgba(11,16,32,.85) 100%)}
.hero__seal{perspective:900px;
  filter:drop-shadow(0 0 12px rgba(231,200,124,.5)) drop-shadow(0 14px 40px rgba(0,0,0,.55))}
.hero__seal svg{animation:sealSpin 1.6s var(--ease) both,sealTurn 11s ease-in-out 2.2s infinite}
@keyframes sealTurn{0%,100%{rotate:y -14deg}50%{rotate:y 14deg}}

/* the colour fields, warp and 3D entries all reach past the edges by design;
   clip at the root so none of it can ever become sideways scroll on a phone */
html,body{overflow-x:clip}

@media (prefers-reduced-motion:reduce){
  .dgrid{rotate:none;translate:none;scale:none}
  .hero__seal svg{animation:none}
  .authority::before,.reframe::before,.doors::before,.method::before,.services::before,
  .products::before,.platform::before,.frameworks::before,.pricing::before,.proof::before{translate:none}
}

/* =========================== PRODUCT EDITIONS (October 2026) =========================== */
.prog__eds{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0;padding:0}
.prog__eds li{display:flex;align-items:baseline;gap:10px;padding:9px 14px;border:1px solid rgba(198,161,91,.3);border-radius:9px;background:rgba(198,161,91,.06)}
.prog__eds b{font-family:var(--serif);font-weight:500;font-size:1rem;color:var(--parchment)}
.prog__eds span{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-lt)}
.prog__foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.prog__foot small{font-size:.82rem;color:var(--muted)}
@media(max-width:560px){.prog .prod__list{grid-template-columns:1fr}.prog__panel{padding:24px 20px}}

/* Framework packages wear verdigris green, matching their covers and documents,
   so they read as a different family from the gold practitioner series. */
.fw{--gold:#44A57A;--gold-lt:#9BD9B9;--gold-dk:#5FB08A}
.prog__tile.fw:hover{border-color:rgba(68,165,122,.45)}
.prog__tile.fw.is-active{background:linear-gradient(180deg,rgba(68,165,122,.24),var(--s-2) 70%);border-color:var(--gold)}
.prog__panel.fw .prog__eds li{border-color:rgba(68,165,122,.35);background:rgba(68,165,122,.07)}
.prog__panel.fw .btn--ghost{--bd:rgba(68,165,122,.45);background:rgba(68,165,122,.06)}
.prog__panel.fw .btn--ghost:hover{--bd:var(--gold-lt);background:rgba(68,165,122,.14)}

/* ── focused assessments, pricing note, contact actions (content pass 2026-10-16) ── */
.assess{margin-top:28px;border:1px solid var(--line);border-radius:12px;padding:32px 30px;background:linear-gradient(180deg,var(--ink-2),transparent)}
.assess h3{font-size:1.5rem;color:var(--gold-lt);margin-bottom:10px}
.assess>p{color:var(--muted);max-width:72ch}
.assess__list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 32px;margin:24px 0}
.assess__list li{position:relative;padding-left:22px;color:var(--muted);font-size:.94rem}
.assess__list li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:1px;background:var(--gold)}
.assess__list b{display:block;color:var(--parchment);font-weight:600}
.assess__list span{display:block;font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--steel);margin-top:2px}
.assess__levels{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}
.assess__levels div{border:1px solid var(--line);border-radius:8px;padding:16px 18px}
.assess__levels span{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
.assess__levels b{display:block;font-family:var(--serif);font-size:1.7rem;color:var(--gold-lt);line-height:1.2;margin-top:6px}
.assess__levels small{display:block;color:var(--muted);font-size:.86rem;margin-top:4px}
.assess__foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.assess__foot small{color:var(--muted);font-size:.9rem;max-width:56ch}
.price__note{margin:28px auto 0;text-align:center;color:var(--muted);font-size:.95rem;max-width:72ch}
.cta__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
@media(max-width:760px){
  .assess{padding:26px 20px}
  .assess__list,.assess__levels{grid-template-columns:1fr}
  .cta__actions .btn,.assess__foot .btn{width:100%;justify-content:center}
}