/* ============================================================
   ANNANSEC DESIGN SYSTEM v1.0 (token appendix §12.1)
   Self-hosted fonts — see @font-face block below.
   ============================================================ */

@font-face{font-family:"Outfit";src:url("/assets/fonts/outfit-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Outfit";src:url("/assets/fonts/outfit-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Outfit";src:url("/assets/fonts/outfit-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/ibmplexmono-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}

:root{
  --navy-900:#0B1420; --navy-800:#0E1A28; --navy-700:#12202F;
  --navy-600:#1C2E42; --navy-500:#2A3F56;
  --steel-400:#8296A9; --steel-300:#A9BAC9; --ice-100:#E9F0F7; --white:#FFFFFF;
  --paper:#FFFFFF; --surface-1:#F6F8FA; --surface-2:#EEF2F6;
  --border:#DCE3EA; --border-strong:#C3CDD6;
  --text-primary:#0B1420; --text-secondary:#4A5A6A; --text-muted:#74838F;
  --cyan-300:#9BEAF4; --cyan-400:#6FD8EA; --cyan-500:#3FC7E0;
  --cyan-600:#2AA6C0; --cyan-700:#0E6E82; --cyan-800:#0B5464;
  --cyan-tint-d:#0F2A33; --cyan-tint-l:#E6F7FB;
  --risk-high:#E5484D; --risk-high-ink:#B4232A;
  --risk-med:#E0A23C; --risk-med-ink:#9A6B12;
  --risk-low:#3FB98A; --risk-low-ink:#1E7C5A;
  --info:#3FC7E0; --info-ink:#0E6E82;
  --font-display:"Outfit","Helvetica Neue",Arial,sans-serif;
  --font-body:"Inter","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
  --radius-sharp:0; --radius-sm:6px; --radius-md:10px; --radius-lg:14px;
  --radius-xl:20px; --radius-pill:999px;
  --space-0-5:4px; --space-1:8px; --space-1-5:12px; --space-2:16px;
  --space-2-5:20px; --space-3:24px; --space-4:32px; --space-5:40px; --space-6:48px;
  --space-8:64px; --space-10:80px; --space-12:96px; --space-16:128px;
  --shadow-sm:0 1px 2px rgba(11,20,32,.06);
  --shadow-md:0 4px 14px rgba(11,20,32,.10);
  --ease:cubic-bezier(.4,0,.2,1); --dur-1:150ms; --dur-2:250ms; --dur-3:400ms;
  --container:1200px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;font-family:var(--font-body);font-size:1rem;line-height:1.6;
  background:var(--navy-900);color:var(--ice-100);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;font-weight:500}
p{margin:0}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}

/* ---------- theme surfaces §12.1 ---------- */
.band{padding:var(--space-12) 0}
.band--navy{background:var(--navy-900);color:var(--ice-100)}
.band--paper{background:var(--paper);color:var(--text-primary)}
.band--surface{background:var(--surface-1);color:var(--text-primary)}
.band--tight{padding:var(--space-5) 0}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--space-4)}

/* ---------- type scale §4.2 ---------- */
.display-xl{font-size:3.5rem;line-height:1.05;font-weight:600;letter-spacing:-.015em}
.display-l{font-size:2.75rem;line-height:1.1;font-weight:600;letter-spacing:-.01em}
.h1{font-size:2.25rem;line-height:1.15;font-weight:600}
.h2{font-size:1.75rem;line-height:1.2;font-weight:500}
.h3{font-size:1.375rem;line-height:1.3;font-weight:500}
.h4{font-size:1.125rem;line-height:1.4;font-weight:500}
.body-l{font-size:1.125rem;line-height:1.6}
.small{font-size:.875rem;line-height:1.5}
.mono{font-family:var(--font-mono);font-size:.875rem;line-height:1.5}
.measure{max-width:64ch}
.measure-narrow{max-width:52ch}

/* signature move §4.4: cyan tracked caps overline */
.overline{font-family:var(--font-display);font-size:.75rem;line-height:1.3;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--cyan-500);
  display:flex;align-items:center;gap:var(--space-1-5);margin-bottom:var(--space-2)}
.band--paper .overline,.band--surface .overline{color:var(--cyan-700)}
.overline svg{flex:none}

.muted{color:var(--steel-400)}
.band--paper .muted,.band--surface .muted{color:var(--text-secondary)}

/* ---------- buttons §7.1 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);
  min-height:44px;padding:12px 20px;border-radius:var(--radius-sm);
  font-family:var(--font-display);font-size:.9375rem;font-weight:500;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.btn--primary{background:var(--cyan-500);color:var(--navy-900)}
.btn--primary:hover{background:var(--cyan-400)}
.btn--secondary{background:transparent;color:var(--ice-100);border-color:var(--navy-500)}
.btn--secondary:hover{border-color:var(--cyan-500);color:var(--cyan-400)}
.btn--light{background:transparent;color:var(--text-primary);border-color:var(--border-strong)}
.btn--light:hover{border-color:var(--cyan-700);color:var(--cyan-700)}
:focus-visible{outline:2px solid var(--cyan-500);outline-offset:2px;border-radius:2px}

/* ---------- header §7.10 ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(11,20,32,.88);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--navy-600)}
.site-header .wrap{display:flex;align-items:center;gap:var(--space-4);height:72px}
.brand{display:flex;align-items:center;gap:var(--space-1-5);text-decoration:none;flex:none}
.brand__word{font-family:var(--font-display);font-weight:600;font-size:1.0625rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ice-100)}
.brand__word span{color:var(--cyan-500)}
.nav{display:flex;gap:var(--space-3);margin-left:auto}
.nav a{font-size:.9375rem;color:var(--steel-300);text-decoration:none;
  transition:color var(--dur-1) var(--ease)}
.nav a:hover{color:var(--cyan-400)}
.header-cta{flex:none}

/* ---------- hero §11.2 ---------- */
.hero{position:relative;overflow:hidden;padding:var(--space-16) 0 var(--space-12)}
.hero__bg{position:absolute;inset:0;pointer-events:none}
.hero .wrap{position:relative;z-index:1}
.hero__grid{display:grid;grid-template-columns:1.35fr .65fr;gap:var(--space-8);align-items:center}
.hero h1{margin-bottom:var(--space-3)}
.hero__sub{color:var(--steel-300);margin-bottom:var(--space-5)}
.hero__actions{display:flex;gap:var(--space-2);flex-wrap:wrap}
.hero__mark{display:flex;justify-content:center}

/* ---------- trust strip §11.2 ---------- */
.trust{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-5);
  justify-content:center}
.trust__item{display:flex;align-items:center;gap:var(--space-1);
  font-family:var(--font-display);font-size:.8125rem;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary)}
.trust__item svg{color:var(--cyan-700)}

/* ---------- section head ---------- */
.sechead{margin-bottom:var(--space-6);max-width:60ch}
.sechead p{margin-top:var(--space-2)}

/* ---------- cards §7.3 ---------- */
.grid{display:grid;gap:var(--space-3)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.card{border-radius:var(--radius-lg);padding:var(--space-3);
  border:1px solid var(--border);background:var(--surface-2);
  display:flex;flex-direction:column;gap:var(--space-1-5)}
.card--dark{background:var(--navy-800);border-color:var(--navy-600)}
.card__icon{color:var(--cyan-700);margin-bottom:var(--space-0-5)}
.card--dark .card__icon{color:var(--cyan-500)}
.card h3{margin-bottom:2px}
.card ul{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:var(--space-1)}
.card li{display:flex;gap:var(--space-1);font-size:.875rem;color:var(--text-secondary)}
.card--dark li{color:var(--steel-400)}
.card li svg{flex:none;margin-top:5px;color:var(--cyan-700)}
.card--dark li svg{color:var(--cyan-500)}

/* ---------- thesis band ---------- */
.thesis{position:relative;overflow:hidden}
.thesis__bg{position:absolute;inset:0;pointer-events:none}
.thesis .wrap{position:relative;z-index:1}
.thesis__quote{font-family:var(--font-display);font-weight:500;font-size:1.75rem;
  line-height:1.35;max-width:26ch;letter-spacing:-.005em}
.thesis__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:start}
.thesis__body p+p{margin-top:var(--space-2)}
.rule{height:1px;background:var(--navy-600);margin:var(--space-4) 0}

/* decision-to-consequence ledger: the client's story, not a service list */
.ledger{margin-top:var(--space-6)}
.ledger__cap{font-family:var(--font-mono);font-size:.8125rem;color:var(--steel-400);
  margin-bottom:var(--space-2)}
.ledger__head,.ledger__row{display:grid;grid-template-columns:1fr 1.15fr;gap:var(--space-5)}
.ledger__head{padding-bottom:var(--space-1-5);border-bottom:1px solid var(--navy-500)}
.ledger__head span{font-family:var(--font-display);font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--cyan-500)}
.ledger__head span:last-child{color:var(--steel-400)}
.ledger__row{padding:var(--space-2-5) 0;border-bottom:1px solid var(--navy-600);
  align-items:start}
.ledger__d{display:grid;grid-template-columns:auto 1fr;gap:var(--space-1-5);
  font-size:.9375rem;color:var(--ice-100)}
.ledger__d svg{margin-top:6px;color:var(--cyan-500);flex:none}
.ledger__c{font-size:.9375rem;color:var(--steel-400)}
.ledger__k{display:none;font-family:var(--font-mono);font-size:.6875rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--cyan-400);margin-bottom:6px}
.thesis__close{display:grid;grid-template-columns:auto 1fr;gap:var(--space-2);
  margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--navy-500)}
.thesis__close svg{margin-top:8px;color:var(--cyan-500);flex:none}
.thesis__close p{font-family:var(--font-display);font-weight:500;font-size:1.375rem;
  line-height:1.4;max-width:44ch}
.thesis__close b{color:var(--cyan-400);font-weight:500}

/* ---------- orbital timeline (signature) §6 ---------- */
.orbit-timeline{position:relative;margin-top:var(--space-6)}
.orbit-timeline svg{width:100%;height:auto;overflow:visible}
.step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);
  margin-top:var(--space-3)}
.step{padding-top:var(--space-2);border-top:1px solid var(--border)}
.step__n{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;
  color:var(--cyan-700);text-transform:uppercase}
.step h3{margin:var(--space-1) 0 6px}
.step p{font-size:.875rem;color:var(--text-secondary)}

/* ---------- proof / case study ---------- */
.proof__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:start}
.finding{display:grid;grid-template-columns:28px 1fr;gap:var(--space-2);
  padding:var(--space-2) 0;border-bottom:1px solid var(--border)}
.finding:last-child{border-bottom:0}
.finding__n{font-family:var(--font-mono);font-size:.8125rem;color:var(--cyan-700);padding-top:2px}
.finding h4{margin-bottom:2px}
.finding p{font-size:.875rem;color:var(--text-secondary)}
.pullquote{border-left:3px solid var(--cyan-500);padding:var(--space-2) 0 var(--space-2) var(--space-3);
  font-family:var(--font-display);font-weight:500;font-size:1.375rem;line-height:1.35}
.pullquote cite{display:block;font-family:var(--font-body);font-size:.8125rem;
  font-style:normal;color:var(--text-muted);margin-top:var(--space-2)}

/* ---------- pricing §7.6 ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin-top:var(--space-5)}
.tier{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-1-5)}
.tier--feature{border-color:var(--cyan-600);border-top:2px solid var(--cyan-600)}
.tier__name{font-family:var(--font-display);font-weight:600;font-size:1.125rem}
.tier__price{font-family:var(--font-display);font-size:2rem;font-weight:600;line-height:1.1}
.tier__price small{font-family:var(--font-body);font-size:.8125rem;font-weight:400;
  color:var(--text-muted);display:block;margin-top:4px}
.tier__days{font-family:var(--font-mono);font-size:.8125rem;color:var(--cyan-700);
  padding-bottom:var(--space-1-5);border-bottom:1px solid var(--border)}
.tier ul{display:flex;flex-direction:column;gap:8px}
.tier li{display:flex;gap:var(--space-1);font-size:.875rem;color:var(--text-secondary)}
.tier li svg{flex:none;margin-top:5px;color:var(--cyan-700)}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-pill);
  padding:4px 10px;font-size:.75rem;font-weight:500;
  background:var(--cyan-tint-l);color:var(--cyan-700);align-self:flex-start}

/* callout §7.7 */
.callout{display:grid;grid-template-columns:auto 1fr;gap:var(--space-2);
  background:var(--cyan-tint-l);border-left:3px solid var(--cyan-600);
  padding:var(--space-2) var(--space-3);margin-top:var(--space-4);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.callout svg{color:var(--cyan-700);margin-top:2px}
.callout strong{font-family:var(--font-display);font-weight:600}
.callout p{font-size:.9375rem;color:var(--text-secondary)}

/* ---------- CTA band ---------- */
.ctaband{position:relative;overflow:hidden;text-align:center}
.ctaband__bg{position:absolute;inset:0;pointer-events:none}
.ctaband .wrap{position:relative;z-index:1}
.ctaband .hero__actions{justify-content:center}

/* ---------- footer §7.10 ---------- */
.site-footer{background:var(--navy-900);border-top:1px solid var(--navy-600);
  padding:var(--space-8) 0 var(--space-5)}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-5)}
.foot h4{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--steel-400);font-weight:600;margin-bottom:var(--space-2)}
.foot ul{display:flex;flex-direction:column;gap:10px}
.foot a{font-size:.9375rem;color:var(--ice-100);text-decoration:none}
.foot a:hover{color:var(--cyan-400);text-decoration:underline}
.foot__legal{margin-top:var(--space-6);padding-top:var(--space-3);
  border-top:1px solid var(--navy-600);display:flex;justify-content:space-between;
  gap:var(--space-3);flex-wrap:wrap}
.foot__legal p{font-family:var(--font-mono);font-size:.75rem;color:var(--steel-400)}

/* ---------- motion §8 ---------- */
.reveal{opacity:0;transform:translateY(16px);
  transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease)}
.reveal.in{opacity:1;transform:none}
.drift{animation:drift 26s linear infinite}
@keyframes drift{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- responsive §5.4 ---------- */
@media (max-width:1024px){
  .display-xl{font-size:2.75rem}
  .hero__grid{grid-template-columns:1fr}
  .hero__mark{display:none}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .thesis__grid,.proof__grid{grid-template-columns:1fr;gap:var(--space-5)}
  .step-grid{grid-template-columns:repeat(2,1fr)}
  .tiers{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr 1fr}
  .nav{display:none}
}
@media (max-width:768px){
  .ledger__head{display:none}
  .ledger__row{grid-template-columns:1fr;gap:var(--space-1-5)}
  .ledger__k{display:block}
  .ledger__c{padding-left:calc(12px + var(--space-1-5))}
}
@media (max-width:640px){
  .band{padding:var(--space-8) 0}
  .thesis__close p{font-size:1.125rem}
  .display-xl{font-size:2.25rem}
  .display-l{font-size:2rem}
  .thesis__quote{font-size:1.375rem}
  .grid--4,.grid--3,.grid--2,.step-grid,.foot__grid{grid-template-columns:1fr}
  .wrap{padding:0 var(--space-2-5)}
  .header-cta{display:none}
}