/* =============================================================================
   Hectic Solutions — site.css
   One stylesheet, one palette, three breakpoints (640 / 1024 / 1280, mobile-first).
   Order: tokens+fonts → reset/base → typography → layout → components →
          header/nav → footer → hero → home → flagship → article → utilities → print
   Naming: BEM-lite (.block__element--modifier), is-* states, u-* utilities,
           data-* JS hooks, page accents via the --accent custom property.
   Visual target: the V9 look (docs/legacy/styles-v9.css), transcribed.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. FONTS + TOKENS
   --------------------------------------------------------------------------- */
@font-face{font-family:"Fjalla One";src:url("../fonts/FjallaOne-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/IBMPlexSans.woff2") format("woff2");font-weight:100 700;font-style:normal;font-display:swap}

:root{
  /* colour: brand board */
  --navy:#071525;
  --navy-900:#030A12;
  --navy-700:#0B1928;
  --navy-600:#102B43;
  --gold:#D4AF37;
  --gold-light:#F1CF68;      /* gold text on navy only */
  --gold-ink:#7F6419;        /* gold text on light, 5.3:1 */
  --crimson:#C8102E;
  --crimson-light:#FF4D5A;   /* small red text on navy, 5.7:1 */
  --crimson-display:#EF202E; /* display-size red on navy */
  --blue:#0097DF;
  --blue-display:#008ED2;    /* display-size blue on light only: 3.3:1 on --soft, 3.6:1 on --surface (blue itself is 2.9:1 on --soft) */
  --blue-ink:#0B557F;        /* blue text on light */
  --white:#F7F8FA;
  --surface:#fff;
  --soft:#F2F4F7;
  --ink:#122033;
  --muted:#5B6B7B;
  --line:#DCE3EA;
  --line-dark:rgba(255,255,255,.11);
  /* colour: derivatives for copy on navy (not on the brand board) */
  --text-on-dark:#DCE5EE;
  --muted-on-dark:#B9C6D2;
  --resolve-gradient:linear-gradient(90deg,var(--crimson),var(--navy) 50%,var(--gold));

  /* type */
  --font-display:"Fjalla One","IBM Plex Sans",sans-serif;
  --font-text:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-0:.78rem;
  --fs-1:.86rem;
  --fs-2:.94rem;
  --fs-3:1rem;
  --fs-4:1.08rem;
  --fs-5:1.28rem;
  --fs-6:clamp(1.7rem,3vw,2.65rem);
  --fs-7:clamp(2.2rem,4.2vw,3.8rem);
  --fs-8:clamp(3rem,7vw,6rem);

  /* spacing, 4px base */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:24px;
  --sp-6:32px;
  --sp-7:48px;
  --sp-8:64px;
  --sp-9:96px;
  --section-y:clamp(56px,8vw,96px);
  --gutter:16px;

  /* radii */
  --radius-sm:2px;
  --radius:8px;
  --radius-lg:14px;
  --radius-pill:999px;

  /* shadows */
  --shadow-sm:0 10px 30px rgba(13,32,52,.055);
  --shadow:0 14px 34px rgba(7,24,47,.10);
  --shadow-lg:0 18px 55px rgba(0,0,0,.20);

  /* layout */
  --container:1180px;
  --header-h:64px;

  /* motion */
  --ease:cubic-bezier(.2,.8,.2,1);
  --dur-micro:200ms;
  --dur-reveal:500ms;
  --dur-draw:700ms;

  /* page accent (flagship pages override: blue / crimson) */
  --accent:var(--blue);
  --accent-ink:var(--blue-ink); /* accent for small text on light: blue-ink 8:1, crimson 5.9:1 (blue is 3.2:1) */
  --accent-display:var(--blue-display); /* accent for h1/h2 on light: blue-display 3.3:1 on --soft, crimson 5.3:1 */
  --accent-on-dark:var(--blue);          /* accent text on navy at any size: blue 5.7:1, crimson-light 5.7:1 */
}
/* Breakpoint overrides live on body, not the root token block above: every consumer
   of these tokens is inside body, and body{} beats the root value on specificity. */
@media (min-width:640px){
  body{--gutter:22px}
}
@media (min-width:1024px){
  body{--header-h:80px}
}
/* Page accent switch. Put it on <main> (technology: is-blue, billing: is-crimson) so every
   accent-driven component on the page (problem grid, method grid, scenario cards, pull quote,
   cta-band--accent, button--accent) follows; .hero--flagship also reads it for its grid tint. */
.is-blue{--accent:var(--blue);--accent-ink:var(--blue-ink);--accent-display:var(--blue-display);--accent-on-dark:var(--blue)}
.is-crimson{--accent:var(--crimson);--accent-ink:var(--crimson);--accent-display:var(--crimson);--accent-on-dark:var(--crimson-light)}

/* ---------------------------------------------------------------------------
   2. RESET / BASE
   --------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
body{
  margin:0;
  font-family:var(--font-text);
  font-size:var(--fs-3);
  line-height:1.6;
  color:var(--ink);
  background:var(--surface);
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto}
img{display:block}
figure{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
strong,b{font-weight:600}
em{font-style:normal}
[id]{scroll-margin-top:calc(var(--header-h) + var(--sp-4))}
a,button{transition:color var(--dur-micro) var(--ease),background-color var(--dur-micro) var(--ease),border-color var(--dur-micro) var(--ease),transform var(--dur-micro) var(--ease),box-shadow var(--dur-micro) var(--ease)}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:2px;
}
.button--primary:focus-visible{outline-color:var(--navy)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    animation-delay:0ms!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.skip-link{
  position:absolute;left:var(--sp-2);top:-100px;z-index:300;
  padding:var(--sp-2) var(--sp-3);
  background:var(--gold);color:var(--navy);
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.09em;
  border-radius:var(--radius-sm);
}
.skip-link:focus{top:var(--sp-2)}

/* ---------------------------------------------------------------------------
   3. TYPOGRAPHY
   --------------------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.005em;
  margin:0;
}
h1{font-size:var(--fs-8);line-height:.92}
h2{font-size:var(--fs-7);line-height:1}
h3{font-size:var(--fs-5);line-height:1.15}
h4{font-size:var(--fs-4);line-height:1.2}

.kicker{
  display:flex;align-items:center;gap:var(--sp-2);
  font-family:var(--font-display);
  font-size:var(--fs-0);
  letter-spacing:.18em;
  text-transform:uppercase;
  line-height:1.2;
  color:var(--crimson);
  margin:0 0 var(--sp-3);
}
.kicker::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--crimson)}
.kicker--accent{color:var(--accent-ink)} /* not --accent: blue on light is 3.2:1 */
.kicker--plain{color:var(--muted)}
.kicker--plain::before{display:none}

.lead{font-size:var(--fs-4);line-height:1.72;color:var(--muted);max-width:60ch}

.text-gold{color:var(--gold-ink)}
.text-crimson{color:var(--crimson)}
.text-blue{color:var(--blue-ink)}
.text-accent{color:var(--accent-ink)} /* body size on light: never raw --accent (blue is 3.2:1) */
h1 .text-accent,h2 .text-accent,.guide-hero-title .text-accent{color:var(--accent-display)} /* display size only: AA large (3:1) */
.text-muted{color:var(--muted)}

/* everything that sits on navy */
.section--dark,.hero,.footer,.split__panel--dark,.card--dark,.cta-band,.clarity-band,.solutions,.story,.proof,.scenarios{color:#fff}
.section--dark .kicker,.hero .kicker,.split__panel--dark .kicker,.card--dark .kicker,.story .kicker,.proof .kicker,.scenarios .kicker{color:var(--gold-light)}
.section--dark .lead,.hero .lead,.split__panel--dark .lead,.story .lead,.proof .lead,.scenarios .lead{color:var(--muted-on-dark)}
.section--dark .text-gold,.hero .text-gold,.footer .text-gold,.split__panel--dark .text-gold,.card--dark .text-gold,.story .text-gold,.proof .text-gold,.solutions .text-gold,.cta-band .text-gold{color:var(--gold-light)}
.section--dark .text-crimson,.hero .text-crimson,.split__panel--dark .text-crimson,.card--dark .text-crimson,.story .text-crimson,.proof .text-crimson{color:var(--crimson-light)} /* body-size red on navy: 5.7:1 */
.section--dark h1 .text-crimson,.section--dark h2 .text-crimson,.hero h1 .text-crimson,.hero h2 .text-crimson,.split__panel--dark h1 .text-crimson,.split__panel--dark h2 .text-crimson,.card--dark h1 .text-crimson,.card--dark h2 .text-crimson,.story h1 .text-crimson,.story h2 .text-crimson,.proof h1 .text-crimson,.proof h2 .text-crimson{color:var(--crimson-display)} /* display size only: 4.3:1 clears AA large (3:1), not body AA */
.section--dark .text-blue,.hero .text-blue,.split__panel--dark .text-blue,.story .text-blue{color:var(--blue)}
.section--dark .text-accent,.hero .text-accent,.split__panel--dark .text-accent,.card--dark .text-accent,.story .text-accent,.proof .text-accent{color:var(--accent-on-dark)} /* 5.7:1 at any size; .hero--flagship overrides below */
.section--dark .text-muted,.hero .text-muted,.footer .text-muted,.split__panel--dark .text-muted,.card--dark .text-muted{color:var(--muted-on-dark)}
.cta-band .kicker{color:#fff}
.cta-band .kicker::before{background:#fff}

/* a heading line break that only exists on wide screens */
.br-desktop{display:inline}
@media (min-width:1024px){
  .br-desktop{display:block}
}

/* ---------------------------------------------------------------------------
   4. LAYOUT
   --------------------------------------------------------------------------- */
.container{width:min(var(--container),100% - 2*var(--gutter));margin-inline:auto}

.section{padding:var(--section-y) 0}
.section--light{background:var(--surface)}
.section--soft{background:var(--soft)}
.section--dark{background:var(--navy)}
.section--crimson-dark{background:#100A0D}

.section__head{max-width:840px;margin:0 0 var(--sp-7)}
.section__head h2{margin:0 0 var(--sp-3)}
.section__head p{max-width:700px;line-height:1.72;color:var(--muted);margin:0}
.section--dark .section__head p,.story .section__head p,.proof .section__head p{color:var(--muted-on-dark)}
.section__head--center{margin-inline:auto;text-align:center}
.section__head--center .kicker{justify-content:center}
.section__head--center p{margin-inline:auto}
/* two-column head: heading left, intro paragraph right, bottoms aligned */
.section__head--split{max-width:none;display:grid;gap:var(--sp-5)}
.section__head--split h2{margin:0}
.section__head--split>p{max-width:620px;line-height:1.75}
@media (min-width:1024px){
  .section__head--split{grid-template-columns:1.05fr .95fr;gap:var(--sp-8);align-items:end}
}
/* .copy: a plain prose column (kicker, heading, paragraphs) that sits inside a grid instead of a
   .section__head, e.g. the services "What we do" column and the contact intro. Restores the heading gap
   that the h1-h4{margin:0} reset removes, at the same size .section__head gives its h2. */
.copy h2{margin:0 0 var(--sp-3)}

.grid{display:grid;gap:var(--sp-4)}
.grid--2,.grid--3,.grid--4{display:grid;gap:var(--sp-4)}
@media (min-width:640px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* before / after split: two panels that share one padding by construction */
.split{display:grid}
.split__panel{padding:var(--sp-7) var(--sp-5)}
.split__panel--dark{background:var(--navy);color:#fff}
.split__panel--light{background:var(--surface)}
.split__panel .kicker{margin-bottom:var(--sp-4)}
.split__quote{font-family:var(--font-display);text-transform:uppercase;font-size:var(--fs-6);line-height:1.02;letter-spacing:.005em;margin:0 0 var(--sp-4)}
.split__panel--light .split__quote em{color:var(--gold-ink)}
.split__panel--dark .split__quote em{color:var(--gold-light)}
.split__panel--dark p{color:var(--text-on-dark)}
@media (min-width:640px){
  .split__panel{padding:var(--sp-7)}
}
@media (min-width:1024px){
  .split{grid-template-columns:1fr 1fr}
}

/* ---------------------------------------------------------------------------
   5. COMPONENTS
   --------------------------------------------------------------------------- */
/* Buttons */
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-3);
  padding:14px 22px;
  border:1px solid transparent;border-radius:var(--radius-sm);
  font-family:var(--font-display);font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;line-height:1.2;
  cursor:pointer;text-align:center;white-space:nowrap;
}
.button svg{width:1em;height:1em;flex:0 0 auto}
.button--primary{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.button--primary:hover{background:var(--gold-light);border-color:var(--gold-light);transform:translateY(-1px)}
.button--secondary{border-color:var(--navy);color:var(--navy);background:transparent}
.button--secondary:hover{background:rgba(7,21,37,.06)}
.section--dark .button--secondary,.hero .button--secondary,.footer .button--secondary,.split__panel--dark .button--secondary,.card--dark .button--secondary,.story .button--secondary,.solutions .button--secondary{border-color:var(--gold);color:#fff}
.section--dark .button--secondary:hover,.hero .button--secondary:hover,.footer .button--secondary:hover,.split__panel--dark .button--secondary:hover,.card--dark .button--secondary:hover,.story .button--secondary:hover{background:rgba(212,175,55,.12)}
.button--ghost{border-color:rgba(255,255,255,.32);color:#fff;background:transparent}
.button--ghost:hover{background:rgba(255,255,255,.08)}
.button--dark{background:var(--navy);border-color:var(--navy);color:#fff}
.button--dark:hover{background:var(--navy-600);border-color:var(--navy-600)}
.button--accent{background:var(--accent);border-color:var(--accent);color:#fff}
.button--accent:hover{filter:brightness(1.1);transform:translateY(-1px)}
.button--block{width:100%}

/* Card */
.card{
  position:relative;overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:var(--sp-5);
}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold)}
.grid--2>.card:nth-child(even)::before,.grid--3>.card:nth-child(even)::before,.grid--4>.card:nth-child(even)::before{background:var(--crimson)}
.card--plain::before{display:none}
.card h3{margin:var(--sp-3) 0 var(--sp-2)}
.card>h3:first-child{margin-top:0}
.card p{color:var(--muted);line-height:1.65}
.card .text-gold{font-family:var(--font-display);font-size:var(--fs-0);letter-spacing:.12em}
.card--dark{background:var(--navy-700);border-color:var(--line-dark);color:#fff}
.card--dark::before{display:none}
.card--dark p,.card--dark li{color:var(--muted-on-dark)}
.card--dark h2,.card--dark h3{color:#fff}
@media (min-width:640px){
  .card{padding:var(--sp-6) var(--sp-5)}
  .grid--3>.card,.grid--4>.card{min-height:210px}
}
@media (hover:hover){
  .card{transition:transform var(--dur-micro) var(--ease),box-shadow var(--dur-micro) var(--ease)}
  .card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
}

/* Pill */
.pill{
  display:inline-block;padding:6px 11px;
  border:1px solid rgba(127,100,25,.45);border-radius:var(--radius-pill);
  color:var(--gold-ink);
  font-size:.68rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;line-height:1.2;
}
.pill--crimson{border-color:rgba(200,16,46,.5);color:var(--crimson)}
.section--dark .pill,.card--dark .pill,.hero .pill{border-color:rgba(212,175,55,.38);color:var(--gold-light)}
.section--dark .pill--crimson,.card--dark .pill--crimson,.hero .pill--crimson{border-color:rgba(255,77,90,.55);color:var(--crimson-light)}

/* Answer box */
.answer-box{
  background:var(--soft);
  border-left:4px solid var(--gold);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:22px 26px;
  margin:var(--sp-5) 0;
  color:#243447;
}
.answer-box strong{color:var(--navy)}
.section--dark .answer-box,.card--dark .answer-box{background:#0D2034;color:var(--text-on-dark)}
.section--dark .answer-box strong,.card--dark .answer-box strong{color:var(--gold-light)}

/* Lists with focus-dot bullets (crimson) or signal-line bullets (gold) */
.list{list-style:none;padding:0;margin:var(--sp-4) 0}
.list li{position:relative;padding:7px 0 7px 23px}
.list li::before{content:"";position:absolute;left:0;top:14px;width:8px;height:8px;border-radius:50%;background:var(--crimson)}
.list--signal li::before{top:17px;width:14px;height:2px;border-radius:0;background:var(--gold)}
.list--icons li{display:flex;align-items:center;gap:var(--sp-3);padding-left:0}
.list--icons li::before{display:none}

/* FAQ (wraps <details>) */
.faq{max-width:1000px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;font-weight:600;color:var(--navy);padding:2px 0}
.faq details p{margin:10px 0 0;color:var(--muted);line-height:1.65}
.section--dark .faq details{border-color:var(--line-dark)}
.section--dark .faq summary{color:#fff}
.section--dark .faq details p{color:var(--muted-on-dark)}

/* Form */
.form{display:grid;gap:var(--sp-4)}
.form__field{display:grid;gap:7px}
.form label{font-size:var(--fs-0);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.form input,.form textarea,.form select{
  width:100%;padding:14px 15px;
  border:1px solid #CFD7DF;border-radius:var(--radius);
  font:inherit;color:var(--ink);background:var(--surface);
}
.form textarea{min-height:150px;resize:vertical}
.form__status{
  margin:var(--sp-4) 0 0;padding:14px 18px;
  background:var(--soft);border-left:4px solid var(--gold);border-radius:0 var(--radius) var(--radius) 0;
  color:#243447;font-size:var(--fs-2);
}
.form__status--error{border-left-color:var(--crimson)}
/* two columns only once the form card is wide enough (the contact page puts it in a .grid--2 that splits at 640) */
@media (min-width:1024px){
  .form{grid-template-columns:1fr 1fr}
  .form__field--full,.form__status,.form__actions{grid-column:1/-1}
}

/* Icon: 52px ring holding a 24px line icon from the sprite (assets/img/icons.svg).
   site.js swaps <span class="icon" data-icon="x"> for <svg class="icon"><use href="#icon-x">; the
   ring is the element itself (border + padding, box-sizing so the content box is the 24px grid).
   The symbols carry no stroke-width: it is inherited from here, so the ring is 1.75px and a
   160px hero device can set its own. Colour is currentColor: gold ink on light, gold on dark,
   or the page accent via .icon--blue / .icon--crimson / .solution__icon / .why__icon. */
.icon{
  width:52px;height:52px;flex:0 0 auto;box-sizing:border-box;
  display:grid;place-items:center;
  border:1px solid currentColor;border-radius:50%;
  color:var(--gold-ink);
  font-size:1.2rem;font-weight:600;line-height:1;
}
svg.icon{display:block;padding:13px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.icon--sm{width:36px;height:36px}
svg.icon--sm{padding:8px}
.icon--sm svg{width:20px;height:20px}
.icon--crimson{color:var(--crimson)}
.icon--blue{color:var(--blue-ink)}
.section--dark .icon,.card--dark .icon,.hero .icon,.split__panel--dark .icon{color:var(--gold-light)}
.section--dark .icon--crimson,.card--dark .icon--crimson{color:var(--crimson-light)}
.section--dark .icon--blue,.card--dark .icon--blue{color:var(--blue)}

/* CTA band (the one crimson band) */
.cta-band{position:relative;background:var(--crimson);color:#fff;padding:var(--sp-7) 0}
.cta-band__inner{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-5)}
.cta-band h2{font-size:var(--fs-6);line-height:1.05;max-width:760px;margin:0}
.cta-band p{color:#FFE4E8;margin:10px 0 0;max-width:680px}
.cta-band .button{flex:0 0 auto}
.cta-band--accent{background:var(--accent)}
.cta-band--home{background:linear-gradient(100deg,#8C0B14 0%,#E51D2B 48%,#A20E18 100%)}
.cta-band--home::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--resolve-gradient)}
@media (min-width:1024px){
  .cta-band__inner{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--sp-7)}
}

/* Breadcrumb (nav > ol) */
.breadcrumb{margin:0 0 var(--sp-4)}
.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--sp-2)}
.breadcrumb li{display:flex;align-items:center;gap:var(--sp-2);font-family:var(--font-display);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.breadcrumb li+li::before{content:"/";color:var(--line)}
.breadcrumb a{color:var(--gold-ink)}
.breadcrumb a:hover{text-decoration:underline}
.hero .breadcrumb li,.section--dark .breadcrumb li{color:#8998A7}
.hero .breadcrumb li+li::before,.section--dark .breadcrumb li+li::before{color:#465360}
.hero .breadcrumb a,.section--dark .breadcrumb a{color:var(--gold-light)}
.breadcrumb [aria-current="page"]{color:inherit}

/* ---------------------------------------------------------------------------
   6. HEADER / NAV
   --------------------------------------------------------------------------- */
.header{
  position:sticky;top:0;z-index:100;
  background:var(--navy-900);color:#fff;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.header__inner{min-height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}
.logo{display:flex;align-items:center;flex:0 0 auto;color:#fff}
.logo img{width:200px;height:auto;display:block}

.nav-toggle{
  display:inline-grid;place-items:center;
  width:44px;height:44px;margin-right:-8px;
  background:none;border:0;color:#fff;
}
.nav-toggle svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.nav-toggle .nav-toggle__close{display:none}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{display:none}
.nav-toggle[aria-expanded="true"] .nav-toggle__close{display:block}

.nav{
  position:fixed;inset:var(--header-h) 0 0 0;z-index:90;
  display:none;flex-direction:column;
  padding:var(--sp-4) var(--gutter) var(--sp-5);
  background:var(--navy-900);
  overflow-y:auto;
}
.nav.is-open{display:flex}
.nav a{
  position:relative;display:block;
  padding:var(--sp-4) 0;
  border-bottom:1px solid var(--line-dark);
  font-family:var(--font-display);font-size:1.25rem;letter-spacing:.05em;text-transform:uppercase;line-height:1.2;
  color:#fff;
}
/* current-page colour is for text links only; the Contact Us .button keeps its own navy-on-gold */
.nav a:not(.button)[aria-current="page"]{color:var(--gold-light)}
.nav .button{margin-top:auto;border-bottom:0;font-size:.82rem;padding:16px 25px}
.nav .button--primary{color:var(--navy)}
body.nav-open{overflow:hidden}

@media (min-width:1024px){
  .logo img{width:230px}
  .nav-toggle{display:none}
  .nav{
    position:static;inset:auto;display:flex;flex-direction:row;align-items:center;gap:28px;
    padding:0;background:none;overflow:visible;
  }
  .nav a{
    display:inline-flex;align-items:center;
    height:var(--header-h);padding:0;border:0;
    font-size:var(--fs-1);letter-spacing:.07em;
    opacity:.92;
  }
  .nav a:not(.button):hover{opacity:1;color:var(--gold-light)}
  /* signal-line underline: gold line that ends in a crimson dot on the current page */
  .nav a:not(.button)::after{content:"";position:absolute;left:0;right:100%;bottom:22px;height:2px;background:var(--gold);transition:right var(--dur-micro) var(--ease)}
  .nav a:not(.button):hover::after{right:0}
  .nav a:not(.button)[aria-current="page"]{color:#fff;opacity:1}
  .nav a:not(.button)[aria-current="page"]::after{right:10px}
  .nav a:not(.button)[aria-current="page"]::before{content:"";position:absolute;right:0;bottom:20px;width:6px;height:6px;border-radius:50%;background:var(--crimson)}
  .nav .button{margin:0 0 0 var(--sp-2);height:auto}
  .nav .button::after,.nav .button::before{display:none}
}
@media (min-width:1280px){
  .logo img{width:260px}
  .nav{gap:31px}
}

/* ---------------------------------------------------------------------------
   7. FOOTER
   --------------------------------------------------------------------------- */
.footer{background:var(--navy-900);color:#D9E1EA;padding:var(--sp-8) 0 var(--sp-5);border-top:3px solid var(--crimson)}
.footer__grid{display:grid;gap:var(--sp-6)}
.footer__logo{display:block;width:min(260px,100%);margin-bottom:var(--sp-4)}
.footer__logo img{width:100%;height:auto}
.footer__tagline{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;color:#fff;margin:0 0 var(--sp-2)}
.footer p{color:#AEBBC8;font-size:var(--fs-2);line-height:1.6}
.footer h3{color:#fff;font-size:var(--fs-1);letter-spacing:.14em;margin:0 0 var(--sp-2)}
/* the three link columns sit inside one <nav aria-label="Footer">; contents keeps them grid items */
.footer__nav{display:contents}
.footer h3 a{display:inline;color:inherit;font-size:inherit;padding:0}
.footer h3 a:hover{color:var(--gold-light)}
.footer nav a,.footer__col a:not(.button){display:block;color:#AEBBC8;padding:5px 0;font-size:.88rem}
.footer nav a:hover,.footer__col a:not(.button):hover{color:#fff}
.footer .button{margin-top:var(--sp-3)}
.footer__bottom{
  display:grid;gap:var(--sp-2);
  margin-top:var(--sp-7);padding-top:var(--sp-5);
  border-top:1px solid rgba(255,255,255,.09);
  color:#7F8C9A;font-size:.77rem;
}
@media (min-width:640px){
  .footer__grid{grid-template-columns:1fr 1fr;gap:var(--sp-7) var(--sp-6)}
  .footer__brand{grid-column:1/-1}
  .footer__bottom{grid-template-columns:1fr auto;justify-content:space-between}
}
@media (min-width:1024px){
  .footer__grid{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--sp-7)}
  .footer__brand{grid-column:auto}
}

/* ---------------------------------------------------------------------------
   8. HERO (base + five variants)
   --------------------------------------------------------------------------- */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--navy);color:#fff;
  border-bottom:1px solid rgba(255,255,255,.09);
}
/* system grid + one radial glow */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(circle at 74% 46%,rgba(200,16,46,.18),transparent 34%),
    linear-gradient(rgba(0,151,223,.065) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,151,223,.065) 1px,transparent 1px);
  background-size:auto,28px 28px,28px 28px;
}
.hero__inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-7);align-items:center;
  padding:clamp(48px,7vw,72px) 0;
  min-height:var(--hero-min-h,380px);
}
.hero__copy{position:relative;max-width:700px}
.hero__copy .kicker{margin-bottom:var(--sp-3)}
.hero h1{max-width:20ch}
.hero__lead{max-width:60ch;margin:20px 0 0;font-size:var(--fs-4);line-height:1.72;color:#C7D3DE}
.hero__actions{display:grid;grid-template-columns:1fr;gap:var(--sp-3);margin-top:28px}
.hero__media{position:relative;display:flex;align-items:center;justify-content:center;min-width:0}
.hero__media img,.hero__media svg{max-width:100%;height:auto}
.hero__strip{width:240px;max-width:60%;margin:0 0 var(--sp-4);opacity:.9}
.hero__strip img{width:100%;height:auto}
.hero .breadcrumb{margin-bottom:var(--sp-4)}
@media (min-width:640px){
  .hero__actions{grid-template-columns:auto auto;justify-content:start}
}
@media (min-width:1024px){
  .hero__inner{grid-template-columns:minmax(0,1fr) minmax(0,.62fr)}
}

/* --home: animated signal mark on the grid, chaos network behind the copy */
.hero--home{--hero-min-h:560px;--hero-t:1}
.hero--home .hero__media img,.hero--home .hero__media svg{width:100%;max-width:440px}
.hero--home .hero__media svg{overflow:visible}
.hero--home h1 span,.hero--home h1 strong,.hero--home h1 em{display:block}
.hero--home h1 strong{color:var(--crimson-display);font-weight:400}
.hero--home h1 em{color:var(--gold-light)}
/* "The Signal Resolves" (site.js initHeroTimeline adds is-playing, then is-done; the finished
   frame is the default so no-JS and reduced-motion visitors see the complete mark).
   Every delay/duration is multiplied by --hero-t (1 desktop, .667 below 640px = 1.6s total).
   0.0s bars at minimum height jittering +-20%  ->  0.3s bars grow to profile over .5s, jitter
   fades, CHAOS tints  ->  0.9s zigzag stroke-draws .6s  ->  1.5s gold line extends .5s,
   CLARITY. tints  ->  2.0s dot scales in with overshoot, glow fades up  ->  2.4s rest. */
.hero-mark__bars,.hero-mark__bars rect,.hero-mark__dot{transform-box:fill-box;transform-origin:center}
.hero-mark__zigzag{stroke-dasharray:290;stroke-dashoffset:0}
.hero-mark__line{stroke-dasharray:92;stroke-dashoffset:0}
.hero-mark__glow{opacity:1;filter:blur(10px)}
.hero--home.is-playing h1 strong:not(.is-crimson),.hero--home.is-playing h1 em:not(.is-gold){color:#fff;transition:none}
.hero--home.is-playing h1 strong.is-crimson,.hero--home.is-playing h1 em.is-gold{transition:color .45s var(--ease)}
.hero--home.is-playing .hero-mark__bars{animation:hero-bars-grow calc(.5s * var(--hero-t)) var(--ease) calc(.3s * var(--hero-t)) both}
.hero--home.is-playing .hero-mark__bars rect{animation:hero-bar-jitter calc(.9s * var(--hero-t)) linear both}
.hero--home.is-playing .hero-mark__bars rect:nth-child(even){animation-name:hero-bar-jitter-b}
.hero--home.is-playing .hero-mark__zigzag{stroke-dashoffset:290;animation:hero-draw-zigzag calc(.6s * var(--hero-t)) var(--ease) calc(.9s * var(--hero-t)) forwards}
.hero--home.is-playing .hero-mark__line{stroke-dashoffset:92;animation:hero-draw-line calc(.5s * var(--hero-t)) var(--ease) calc(1.5s * var(--hero-t)) forwards}
.hero--home.is-playing .hero-mark__dot{transform:scale(0);animation:hero-dot-in calc(.4s * var(--hero-t)) var(--ease) calc(2s * var(--hero-t)) forwards}
.hero--home.is-playing .hero-mark__glow{opacity:0;animation:hero-glow-in calc(.5s * var(--hero-t)) var(--ease) calc(2s * var(--hero-t)) forwards}
@keyframes hero-bars-grow{from{transform:scaleY(.14)}to{transform:scaleY(1)}}
@keyframes hero-bar-jitter{0%{transform:scaleY(1.2)}8%{transform:scaleY(.8)}16%{transform:scaleY(1.2)}24%{transform:scaleY(.8)}33%{transform:scaleY(1.18)}42%{transform:scaleY(.86)}50%{transform:scaleY(1.12)}58%{transform:scaleY(.9)}66%{transform:scaleY(1.08)}75%{transform:scaleY(.94)}83%{transform:scaleY(1.04)}91%{transform:scaleY(.98)}100%{transform:scaleY(1)}}
@keyframes hero-bar-jitter-b{0%{transform:scaleY(.8)}8%{transform:scaleY(1.2)}16%{transform:scaleY(.8)}24%{transform:scaleY(1.2)}33%{transform:scaleY(.82)}42%{transform:scaleY(1.14)}50%{transform:scaleY(.88)}58%{transform:scaleY(1.1)}66%{transform:scaleY(.92)}75%{transform:scaleY(1.06)}83%{transform:scaleY(.96)}91%{transform:scaleY(1.02)}100%{transform:scaleY(1)}}
@keyframes hero-draw-zigzag{to{stroke-dashoffset:0}}
@keyframes hero-draw-line{to{stroke-dashoffset:0}}
@keyframes hero-dot-in{0%{transform:scale(0)}70%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes hero-glow-in{to{opacity:1}}
@keyframes hero-bar-ripple{0%{transform:scaleY(1)}45%{transform:scaleY(1.22)}100%{transform:scaleY(1)}}
@keyframes hero-redraw-zigzag{from{stroke-dashoffset:290}to{stroke-dashoffset:0}}
@media (hover:hover){
  .hero--home.is-done [data-hero-mark]:hover .hero-mark__bars rect{animation:hero-bar-ripple .4s var(--ease) both}
  .hero--home.is-done [data-hero-mark]:hover .hero-mark__bars rect:nth-child(2){animation-delay:15ms}
  .hero--home.is-done [data-hero-mark]:hover .hero-mark__bars rect:nth-child(3){animation-delay:30ms}
  .hero--home.is-done [data-hero-mark]:hover .hero-mark__bars rect:nth-child(4){animation-delay:45ms}
  .hero--home.is-done [data-hero-mark]:hover .hero-mark__bars rect:nth-child(5){animation-delay:60ms}
  .hero--home.is-done [data-hero-mark]:hover .hero-mark__bars rect:nth-child(6){animation-delay:75ms}
  .hero--home.is-done [data-hero-mark]:hover .hero-mark__bars rect:nth-child(7){animation-delay:90ms}
  .hero--home.is-done [data-hero-mark]:hover .hero-mark__bars rect:nth-child(8){animation-delay:105ms}
  .hero--home.is-done [data-hero-mark]:hover .hero-mark__bars rect:nth-child(9){animation-delay:120ms}
  .hero--home.is-done [data-hero-mark]:hover .hero-mark__bars rect:nth-child(10){animation-delay:135ms}
  .hero--home.is-done [data-hero-mark]:hover .hero-mark__bars rect:nth-child(11){animation-delay:150ms}
  .hero--home.is-done [data-hero-mark]:hover .hero-mark__bars rect:nth-child(12){animation-delay:165ms}
  .hero--home.is-done [data-hero-mark]:hover .hero-mark__bars rect:nth-child(13){animation-delay:180ms}
  .hero--home.is-done [data-hero-mark]:hover .hero-mark__zigzag{animation:hero-redraw-zigzag .4s var(--ease) .1s both}
}
@media (max-width:639.98px){
  .hero--home{--hero-t:.667}
  .hero-mark__glow{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero--home .hero-mark__bars,.hero--home .hero-mark__bars rect,.hero--home .hero-mark__zigzag,.hero--home .hero-mark__line,.hero--home .hero-mark__dot,.hero--home .hero-mark__glow{animation:none!important;transform:none;stroke-dashoffset:0;opacity:1}
  .hero--home h1 strong{color:var(--crimson-display)!important}
  .hero--home h1 em{color:var(--gold-light)!important}
}
.hero--home .hero__lead{color:#D9E3ED}
.hero--home .hero__lead b{color:#fff}
@media (min-width:1024px){
  /* right half: system grid fading to navy; left half: chaos network fading out at the column boundary */
  .hero--home::before{
    inset:0 0 0 50%;opacity:.88;
    background:
      linear-gradient(rgba(0,151,223,.12) 1px,transparent 1px),
      linear-gradient(90deg,rgba(0,151,223,.12) 1px,transparent 1px),
      linear-gradient(90deg,transparent 0%,rgba(4,13,24,.15) 45%,rgba(4,13,24,.65) 100%);
    background-size:27px 27px,27px 27px,100% 100%;
  }
  .hero--home::after{
    content:"";position:absolute;inset:0 50% 0 0;z-index:-1;pointer-events:none;opacity:.72;
    background:
      linear-gradient(90deg,rgba(3,9,17,.16),rgba(3,9,17,.42)),
      url("../img/hero-chaos-network.svg") center/cover no-repeat;
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 64%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 0%,#000 64%,transparent 100%);
  }
  .hero--home .hero__inner{grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);gap:var(--sp-4)}
  .hero--home .hero__media img,.hero--home .hero__media svg{width:min(560px,90%);max-width:none}
}

/* --flagship: page device + accent glow (technology --accent blue, billing --accent crimson) */
.hero--flagship{--hero-min-h:560px}
.hero--flagship::before{
  background:
    linear-gradient(90deg,rgba(6,17,31,.1),rgba(6,17,31,.08) 45%,rgba(6,17,31,.65)),
    linear-gradient(var(--hero-grid-line,rgba(0,151,223,.08)) 1px,transparent 1px),
    linear-gradient(90deg,var(--hero-grid-line,rgba(0,151,223,.08)) 1px,transparent 1px);
  background-size:auto,28px 28px,28px 28px;
}
.hero--flagship::after{
  content:"";position:absolute;left:-250px;top:-120px;z-index:-1;pointer-events:none;
  width:700px;height:700px;border-radius:50%;
  background:radial-gradient(circle,rgba(239,32,46,.45),rgba(200,16,46,.12) 34%,transparent 70%);
  filter:blur(12px);
}
.hero--flagship.is-crimson{--accent:var(--crimson);--hero-grid-line:rgba(200,16,46,.08)}
.hero--flagship.is-blue{--accent:var(--blue)}
.hero__chaos{
  position:absolute;left:-5%;top:-10%;width:62%;height:120%;z-index:-1;pointer-events:none;
  background:url("../img/hero-chaos-network.svg") center/cover no-repeat;
  opacity:.85;mix-blend-mode:screen;
}
.hero--flagship .text-accent{color:var(--accent)}
.hero--flagship.is-crimson .text-accent{color:#EF3345}
.hero--flagship.is-blue .text-accent{color:#00A7ED}
.hero--flagship .hero__lead{color:#C5D1DC;max-width:650px}
.hero--flagship .hero__media img,.hero--flagship .hero__media svg{width:240px}
@media (min-width:1024px){
  .hero--flagship .hero__inner{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:var(--sp-5)}
  .hero--flagship .hero__media img,.hero--flagship .hero__media svg{width:min(600px,100%)}
}

/* --standard: about, industries, services */
.hero--standard{--hero-min-h:380px}
.hero--standard h1{font-size:clamp(2.45rem,5vw,4.7rem);line-height:.96}
.hero--standard .hero__media{display:none}
@media (min-width:1024px){
  .hero--standard .hero__media{display:flex;justify-content:flex-end}
  .hero--standard .hero__media img,.hero--standard .hero__media svg{width:min(420px,100%)}
  .hero--standard .hero__media .device--service,.hero--standard .hero__media .device--about{width:min(300px,100%)}
}

/* Hero devices and figures (P8): inline SVGs built from the vocabulary. .device text is Fjalla via
   CSS so the labels stay live text. .device__icon is a <use> of a sprite icon at 160px; the
   stroke-width set here is inherited by the symbol (which carries none), so the 24-grid stroke
   renders at ~6px instead of the 12px a scaled 1.75 would give. */
.device{display:block;width:100%;height:auto;overflow:visible}
.device text{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;fill:#fff}
.device .device__label{fill:var(--muted-on-dark);letter-spacing:.14em}
.device__icon{fill:none;stroke:currentColor;stroke-width:.9;stroke-linecap:round;stroke-linejoin:round}
.device--tech .device__icon,.device--service.is-blue .device__icon{color:var(--blue)}
.device--billing .device__icon,.device--service.is-crimson .device__icon{color:var(--crimson-display)}

/* --article: knowledge center */
.hero--article{--hero-min-h:300px}
.hero--article h1{font-size:var(--fs-7);max-width:26ch}
.hero--article .hero__inner{grid-template-columns:minmax(0,1fr)}
.hero--article .hero__media{display:none}
.hero--article .hero__lead{color:#C7D1DC}

/* --utility: contact, brand */
.hero--utility{--hero-min-h:260px}
.hero--utility h1{font-size:var(--fs-7)}
.hero--utility .hero__inner{grid-template-columns:minmax(0,1fr);padding:clamp(40px,6vw,56px) 0}
.hero--utility .hero__media{display:none}

/* ---------------------------------------------------------------------------
   9. HOME SECTIONS
   --------------------------------------------------------------------------- */
/* Solutions: two destination cards with a centre badge */
.solutions{background:var(--navy);padding:var(--section-y) 0}
.solutions__head{text-align:center;max-width:850px;margin:0 auto var(--sp-7)}
.solutions__head .kicker{justify-content:center;color:var(--crimson-light)} /* small text on navy: crimson-display is 4.3:1 */
.solutions__head .kicker::before{background:var(--crimson-light)}
.solutions__head h2{margin:6px 0 8px}
.solutions__head p{color:#AEBDCA;max-width:690px;margin:12px auto 0;line-height:1.45}
.solutions__cards{position:relative;display:grid;gap:var(--sp-4)}

.solution{
  position:relative;overflow:hidden;
  border:1px solid var(--accent);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  --accent:var(--blue);
}
.solution--tech{--accent:var(--blue);border-color:rgba(0,168,239,.58);background:linear-gradient(135deg,#061A2C,#07111C)}
.solution--billing{--accent:var(--crimson-light);border-color:rgba(239,32,46,.68);background:linear-gradient(135deg,#270910,#11070A)}
.solution__bg{position:absolute;inset:0;opacity:.42;pointer-events:none}
.solution--tech .solution__bg{
  background:
    linear-gradient(125deg,rgba(0,151,223,.12),transparent 60%),
    repeating-linear-gradient(90deg,transparent 0 38px,rgba(0,151,223,.10) 39px 40px),
    repeating-linear-gradient(0deg,transparent 0 38px,rgba(0,151,223,.10) 39px 40px);
}
.solution--billing .solution__bg{
  background:
    radial-gradient(circle at 80% 75%,rgba(239,35,60,.18),transparent 48%),
    repeating-linear-gradient(158deg,transparent 0 35px,rgba(239,35,60,.10) 36px 37px);
}
/* content: 52px icon column + text column */
.solution__content{
  position:relative;z-index:2;
  display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:var(--sp-5);align-items:center;
  padding:var(--sp-5);
}
.solution__icon{
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--accent);color:var(--accent);
  box-shadow:0 0 25px color-mix(in srgb,var(--accent) 18%,transparent);
  font-size:1.35rem;
}
.solution__icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.solution__title{min-width:0}
.solution__title h3{font-size:var(--fs-5);letter-spacing:.01em;line-height:1.05;margin:0}
.solution__subtitle{margin-top:5px;font-family:var(--font-display);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--accent)}
.solution__rule,.solution p,.solution__link{grid-column:1/-1}
.solution__rule{width:38px;height:2px;margin:var(--sp-4) 0;background:var(--accent)}
.solution p{max-width:480px;color:#C6D3DF;line-height:1.65;margin:0}
.solution__link{
  justify-self:start;display:inline-flex;align-items:center;gap:10px;
  margin-top:var(--sp-4);padding:12px 15px;
  border:1px solid currentColor;color:var(--accent);
  font-family:var(--font-display);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
}
.solution__link:hover{background:rgba(255,255,255,.06)}

.solutions__badge{display:none}
@media (min-width:640px){
  .solution__content{padding:30px 30px 28px}
}
@media (min-width:1024px){
  .solutions__cards{grid-template-columns:1fr 1fr;gap:var(--sp-4)}
  .solution{min-height:330px}
  .solutions__badge{
    display:block;position:absolute;left:50%;top:50%;z-index:5;
    width:112px;height:112px;transform:translate(-50%,-50%);pointer-events:none;
  }
  /* navy disc holding the full strip (64px: at 40px the mark is an illegible squiggle inside a
     100px disc); one continuous gold signal line runs through it from card edge to card edge
     (the pseudo-elements sit behind the disc) */
  .solutions__badge-ring{
    position:relative;z-index:1;
    width:104px;height:104px;border-radius:50%;
    display:grid;place-items:center;
    background:var(--navy);border:1px solid var(--gold);
    box-shadow:0 0 30px rgba(212,175,55,.18);
  }
  .solutions__badge-ring img,.solutions__badge-ring svg{width:64px;height:auto}
  .solutions__badge-ring .strip{color:#fff;--strip-bars:var(--crimson-display);--strip-line:var(--gold);--strip-dot:var(--crimson-display)}
  .solutions__badge::before,.solutions__badge::after{content:"";position:absolute;top:50%;height:2px;width:calc(50% + 16px);transform:translateY(-50%);background:var(--gold);z-index:0}
  .solutions__badge::before{right:50%}
  .solutions__badge::after{left:50%}
}

/* Clarity band: lead + three stations */
.clarity-band{background:var(--navy-900);border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.clarity-band__grid{display:grid}
.clarity-band__lead,.clarity-band__item{display:flex;flex-direction:column;justify-content:flex-start;padding:20px 24px} /* top-aligned: labels share a line whatever the description wraps to */
.clarity-band__item{border-top:1px solid rgba(255,255,255,.10)}
.clarity-band__label,.clarity-band__item b{font-family:var(--font-display);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;line-height:1.2}
.clarity-band__label{color:var(--crimson-display);margin-bottom:6px}
.clarity-band__lead strong{font-size:1.1rem;color:#fff;font-weight:600}
.clarity-band__item b{color:var(--gold-light);margin-bottom:5px;font-weight:400}
.clarity-band__item span{font-size:.76rem;color:#91A2B2;line-height:1.4}
@media (min-width:640px){
  .clarity-band__grid{grid-template-columns:1fr 1fr}
  .clarity-band__lead{grid-column:1/-1}
  .clarity-band__item:nth-child(3){border-left:1px solid rgba(255,255,255,.10)}
}
@media (min-width:1024px){
  .clarity-band__grid{grid-template-columns:1.25fr repeat(3,1fr);min-height:116px}
  .clarity-band__lead{grid-column:auto}
  .clarity-band__item{border-top:0;border-left:1px solid rgba(255,255,255,.10)}
}

/* Why Hectic: intro + four steps (2×2 on phones) */
.why{background:var(--soft)}
.why__intro,.knowledge__intro{display:grid;gap:var(--sp-5);margin-bottom:var(--sp-7)}
.why__intro h2,.knowledge__intro h2{margin:0}
.why__intro>p{margin:0;color:#526273;line-height:1.75}
.why__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.why__card{
  position:relative;
  background:var(--surface);border:1px solid var(--line);
  padding:var(--sp-4);
}
.why__index{position:absolute;right:14px;top:12px;font-family:var(--font-display);font-size:.72rem;letter-spacing:.1em;color:var(--muted)} /* was #C3CCD5, 1.6:1 */
.why__icon{font-size:1.35rem;color:var(--gold-ink);margin-bottom:var(--sp-4)}
.why__icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.why__card h3{font-size:var(--fs-4);margin:0 0 var(--sp-2)}
.why__card p{font-size:.86rem;line-height:1.65;color:#617080;margin:0}
@media (min-width:640px){
  .why__card{padding:26px}
  .why__index{right:18px;top:16px}
  .why__icon{margin-bottom:24px}
}
@media (min-width:1024px){
  .why__intro,.knowledge__intro{grid-template-columns:1.15fr .85fr;gap:60px;align-items:end}
  .why__grid{grid-template-columns:repeat(4,1fr);gap:14px}
  .why__card{min-height:275px}
}
@media (hover:hover){
  .why__card{transition:transform var(--dur-micro) var(--ease),box-shadow var(--dur-micro) var(--ease)}
  .why__card:hover{transform:translateY(-4px);box-shadow:0 16px 35px rgba(6,17,31,.08)}
}

/* Industries: list + one diagram */
.industries__grid{display:grid;gap:var(--sp-6)}
.industries__copy h2{margin:0 0 var(--sp-4)}
.industries__copy>p{color:var(--muted);line-height:1.75;max-width:52ch}
.industries__list{margin:var(--sp-5) 0 var(--sp-6)}
.industries__list li{display:flex;align-items:center;gap:var(--sp-3);padding:8px 0;font-weight:600}
.industries__list li::before{position:static;flex:0 0 auto}
.industries__list .icon{width:36px;height:36px;font-size:1rem}
.industries__list .icon svg{width:20px;height:20px}
.industries__figure{
  order:-1;margin:0;
  display:flex;flex-direction:column;justify-content:center;min-height:260px;padding:0;
  background:var(--navy);
  border:1px solid rgba(0,151,223,.22);color:#fff;
}
.industries__figure svg,.industries__figure img{width:100%;max-width:none;height:auto}
.industries__figure figcaption{padding:0 var(--sp-4) var(--sp-4);font-family:var(--font-display);font-size:var(--fs-0);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-on-dark);text-align:center}
@media (min-width:1024px){
  .industries__grid{grid-template-columns:1fr 1fr;gap:60px;align-items:center}
  .industries__figure{order:0;min-height:360px}
}

/* Clarity story: copy + Resolution Diagram slot */
.story{background:var(--navy);color:#fff;overflow:hidden}
.story__grid{display:grid;gap:var(--sp-7)}
.story__copy h2{font-size:clamp(2.8rem,5vw,4.6rem);line-height:.92;margin:0 0 22px}
.story__copy p{color:var(--muted-on-dark);max-width:600px;line-height:1.75}
.story__copy strong{color:#fff}
.story__lead{font-family:var(--font-display);font-size:var(--fs-0);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light)}
.story__copy .button{margin-top:var(--sp-2)}
.story__figure{
  position:relative;margin:0;min-height:300px;
  display:grid;place-items:center;padding:0;
  background:rgba(3,10,18,.45);
  border:1px solid rgba(0,151,223,.22);
}
.story__figure svg,.story__figure img{width:100%;max-width:none;height:auto}
.story__figure figcaption{position:absolute;left:0;right:0;bottom:var(--sp-3);text-align:center;font-family:var(--font-display);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-on-dark)}
/* Resolution Diagram: wide (520x360) at 640px and up, tall (320x520, chaos on top) below.
   Crimson "before" chips drift 2-3px on a 6s loop; gold "after" chips never move. */
.rd--tall{display:none}
.rd__drift{animation:rd-drift 6s ease-in-out infinite}
.rd__drift:nth-of-type(2){animation-delay:-2s;animation-direction:reverse}
.rd__drift:nth-of-type(3){animation-delay:-4s}
@keyframes rd-drift{0%,100%{transform:translate(0,0)}35%{transform:translate(2px,-3px)}70%{transform:translate(-2px,2px)}}
@media (max-width:639.98px){
  .rd--wide{display:none}
  .rd--tall{display:block}
}
@media (prefers-reduced-motion:reduce){
  .rd__drift{animation:none}
}
@media (min-width:1024px){
  .story__grid{grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}
  .story__figure{min-height:360px}
}

/* Knowledge: topic tabs on a signal line + featured rows */
.knowledge{background:var(--surface)}
.knowledge__intro>p{margin:0;color:#5D6C7B;line-height:1.75}
.knowledge__tabs{display:flex;flex-wrap:wrap;gap:0 var(--sp-2);margin:0 0 var(--sp-5);padding:0;list-style:none;border-bottom:2px solid var(--gold)}
.knowledge__tab{
  position:relative;display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:12px 16px 12px 0;margin-right:var(--sp-4);
  font-family:var(--font-display);font-size:var(--fs-1);letter-spacing:.1em;text-transform:uppercase;color:var(--navy);
}
.knowledge__tab::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:transparent}
.knowledge__tab:hover{color:var(--crimson)}
.knowledge__tab.is-active,.knowledge__tab[aria-current="true"]{color:var(--crimson)}
.knowledge__tab.is-active::before,.knowledge__tab[aria-current="true"]::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--crimson);flex:0 0 auto}
.knowledge__featured{display:grid;gap:var(--sp-3)}
.knowledge__row{
  display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--sp-3) var(--sp-4);align-items:center;
  padding:18px 22px;
  background:#F8FAFC;border:1px solid var(--line);
}
svg.icon.knowledge__row-icon{width:40px;height:40px;padding:8px;box-sizing:border-box;border:1.5px solid var(--gold);border-radius:50%;color:var(--gold-ink);stroke-width:1.75}
.knowledge__row-category{font-family:var(--font-display);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--crimson)}
.knowledge__row h3{font-size:var(--fs-3);line-height:1.35;margin:4px 0 0;text-transform:none;font-family:var(--font-text);font-weight:600}
.knowledge__row-link{grid-column:2;font-family:var(--font-display);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--blue-ink);white-space:nowrap}
.knowledge__row-link svg{width:1em;height:1em;vertical-align:-.1em;stroke:var(--gold)}
.knowledge__more{text-align:center;margin-top:var(--sp-7)}
@media (min-width:640px){
  .knowledge__row{grid-template-columns:40px minmax(0,1fr) auto}
  .knowledge__row-link{grid-column:auto}
}
@media (min-width:1024px){
  .knowledge__featured{grid-template-columns:repeat(3,1fr);gap:14px}
  .knowledge__row{grid-template-columns:40px minmax(0,1fr);align-content:start;min-height:170px}
  .knowledge__row-link{grid-column:2;align-self:end}
}

/* Section divider: centred one-colour Noise-to-Signal strip (site.js drops <svg class="strip"><use
   href="#icon-strip"> into every empty [data-strip]); navy on light, white on dark, 240px at 40%. */
.strip{display:block;width:100%;height:auto;overflow:visible;color:inherit}
.divider{display:flex;justify-content:center;padding:var(--sp-5) 0;background:var(--surface);color:var(--navy)}
.divider img,.divider svg{width:240px;max-width:72%;height:auto;opacity:.4}
.divider--dark{background:var(--navy);color:#fff}

/* ---------------------------------------------------------------------------
   10. FLAGSHIP SECTIONS (technology, billing) — de-versioned from V8.3/8.4
   --------------------------------------------------------------------------- */
/* Problem grid: four numbered articles */
.problem-grid{display:grid;gap:14px}
.problem-grid article{
  background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent);
  padding:25px;
}
.problem-grid article:nth-child(even){border-top-color:var(--gold)}
.problem-grid article>span,.method-grid article>span,.scenario-cards article>span,.discipline-card__number{
  display:block;font-family:var(--font-display);font-size:.66rem;letter-spacing:.12em;color:var(--muted);line-height:1.2; /* was #A1ADBA, 2.3:1 */
}
.problem-grid h3{font-size:var(--fs-4);margin:20px 0 9px}
.problem-grid p{font-size:.84rem;line-height:1.65;color:#637181;margin:0}
@media (min-width:640px){
  .problem-grid{grid-template-columns:1fr 1fr}
}
@media (min-width:1024px){
  .problem-grid{grid-template-columns:repeat(4,1fr)}
  .problem-grid article{min-height:220px}
}

/* Pull quote */
.pull-quote{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3);
  margin-top:28px;padding:24px 28px;
  background:var(--navy);color:#fff;border-left:4px solid var(--accent);
}
.pull-quote strong{font-size:1.2rem}
.pull-quote span{color:var(--muted-on-dark);border-top:1px solid rgba(255,255,255,.2);padding-top:13px}
@media (min-width:640px){
  .pull-quote{flex-direction:row;align-items:center;gap:18px}
  .pull-quote span{border-top:0;border-left:1px solid rgba(255,255,255,.2);padding:0 0 0 18px}
}

/* Discipline grid: three tall cards on navy */
.discipline-grid{display:grid;gap:var(--sp-4)}
.discipline-card{
  display:flex;flex-direction:column;
  padding:30px;
  background:var(--navy-700);border:1px solid var(--line-dark);border-top:4px solid var(--accent);color:#fff;
}
.discipline-card--blue{border-top-color:var(--blue)}
.discipline-card--gold{border-top-color:var(--gold)}
.discipline-card--crimson{border-top-color:var(--crimson)}
.section--crimson-dark .discipline-card{background:#170D11}
.discipline-card__number{color:#7F91A2;font-size:.64rem}
.discipline-card__icon{font-size:1.7rem;color:var(--gold-light);margin:22px 0 13px}
.discipline-card__icon svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.discipline-card h3{font-size:var(--fs-3);letter-spacing:.09em;margin:0}
.discipline-card p{color:#AEBDCA;font-size:.84rem;line-height:1.6}
.discipline-card ul{margin:12px 0 22px;padding-left:17px;color:#D0D9E1;font-size:.8rem;line-height:1.85}
.discipline-card .list{padding-left:0;margin:12px 0 22px}
/* service links inside the card list (the primary inbound path to services/) */
.discipline-card li a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35)}
.discipline-card li a:hover{color:var(--gold-light);text-decoration-color:currentColor}
.discipline-card>a:last-child{margin-top:auto;color:#fff;font-family:var(--font-display);font-size:.65rem;letter-spacing:.09em;text-transform:uppercase}
.discipline-card>a:last-child:hover{color:var(--gold-light)}
@media (min-width:1024px){
  .discipline-grid{grid-template-columns:repeat(3,1fr)}
  .discipline-card{min-height:410px}
}

/* Method grid: four steps, edge to edge */
.method-grid{display:grid;gap:0;margin-top:42px}
.method-grid article{
  padding:28px;background:var(--surface);
  border-top:2px solid var(--accent);border-right:1px solid var(--line);border-bottom:1px solid var(--line);
}
.method-grid article:nth-child(even){border-top-color:var(--gold)}
.method-grid h3{font-size:.9rem;letter-spacing:.12em;margin:20px 0 9px}
.method-grid p{font-size:.82rem;line-height:1.65;color:#637181;margin:0}
@media (min-width:640px){
  .method-grid{grid-template-columns:1fr 1fr}
}
@media (min-width:1024px){
  .method-grid{grid-template-columns:repeat(4,1fr)}
  .method-grid article{min-height:210px;border-bottom:0}
}

/* Scenario cards */
.scenario-cards{display:grid;gap:14px;margin-top:42px}
.scenario-cards article{
  display:flex;flex-direction:column;
  padding:27px;background:var(--surface);
  border:1px solid var(--line);border-top:3px solid var(--accent);
}
.scenario-cards article:nth-child(2){border-top-color:var(--gold)}
.scenario-cards article:nth-child(3){border-top-color:var(--crimson)}
.scenario-cards article>span{font-size:.61rem;letter-spacing:.14em;color:var(--muted)} /* was #8998A6, 3.0:1 */
.scenario-cards h3{font-size:1.05rem;line-height:1.3;margin:18px 0 10px;text-transform:none;font-family:var(--font-text);font-weight:600}
.scenario-cards p{font-size:.82rem;color:#637181;line-height:1.65;margin:0}
.scenario-cards a{margin-top:auto;padding-top:18px;font-family:var(--font-display);font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:var(--blue-ink)}
@media (min-width:640px){
  .scenario-cards{grid-template-columns:1fr 1fr}
}
@media (min-width:1024px){
  .scenario-cards{grid-template-columns:repeat(4,1fr)}
  .scenario-cards article{min-height:265px}
}

/* Scenarios: copy + list on navy */
.scenarios{background:var(--navy)}
.scenarios__grid{display:grid;gap:35px}
.scenarios__grid h2{font-size:clamp(2.1rem,4vw,3.4rem);line-height:.98;margin:0 0 18px}
.scenarios__grid p{color:#B7C4CF;line-height:1.75}
.scenarios__grid strong{color:#fff}
.scenario-list{border:1px solid var(--line-dark)}
.scenario-list>div,.scenario-list>li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;padding:22px 24px;border-bottom:1px solid rgba(255,255,255,.1)}
.scenario-list>div:last-child,.scenario-list>li:last-child{border-bottom:0}
.scenario-list b{font-size:.88rem}
.scenario-list span{color:var(--gold-light);font-size:.76rem}
ul.scenario-list,ol.scenario-list{list-style:none;margin:0;padding:0}
@media (min-width:1024px){
  .scenarios__grid{grid-template-columns:1fr 1fr;gap:80px;align-items:center}
}

/* Proof: copy + case-study framework */
.proof{background:var(--navy)}
.proof__grid{display:grid;gap:35px}
.proof__grid h2{font-size:var(--fs-7);line-height:.95;margin:0 0 18px}
.proof__grid p{color:#B7C4CF;line-height:1.75}
.proof__panel{border:1px solid rgba(255,255,255,.14);background:var(--navy-700)}
.proof__label{padding:17px 22px;border-bottom:1px solid rgba(255,255,255,.12);color:var(--gold-light);font-family:var(--font-display);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase}
.proof__row{display:grid;gap:7px;padding:19px 22px;border-bottom:1px solid rgba(255,255,255,.08)}
.proof__row b{font-family:var(--font-display);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:400}
.proof__row span{color:#B2BFCA;font-size:.78rem;line-height:1.5}
.proof__panel small{display:block;padding:17px 22px;color:#748596;font-size:.68rem;line-height:1.5}
@media (min-width:640px){
  .proof__row{grid-template-columns:.7fr 1.3fr;gap:18px}
}
@media (min-width:1024px){
  .proof__grid{grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
}

/* Trust grid */
.trust-grid{display:grid;gap:14px}
.trust-grid>div,.trust-grid>article{background:var(--surface);border:1px solid var(--line);padding:25px}
.trust-grid b{display:block;font-family:var(--font-display);font-size:.65rem;letter-spacing:.12em;color:var(--crimson);font-weight:400}
.trust-grid strong{display:block;margin:20px 0 8px;font-size:.95rem}
.trust-grid span{display:block;color:#637181;font-size:.78rem;line-height:1.6}
@media (min-width:640px){
  .trust-grid{grid-template-columns:1fr 1fr}
}
@media (min-width:1024px){
  .trust-grid{grid-template-columns:repeat(4,1fr)}
  .trust-grid>div,.trust-grid>article{min-height:175px}
}

/* Revenue flow: ordered list of seven steps with drawn arrows between them.
   Columns are explicit (2 / 4 / 7) so the row-end cell of each row is known
   and its arrow can be hidden instead of pointing into the gutter. */
.revenue-flow{
  list-style:none;margin:35px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
  counter-reset:step;
}
.revenue-flow li{
  position:relative;counter-increment:step;
  display:flex;flex-direction:column;justify-content:center;
  min-height:92px;padding:18px 12px;
  background:var(--surface);border:1px solid var(--line);
}
.revenue-flow li::before{content:counter(step,decimal-leading-zero);font-family:var(--font-display);font-size:.62rem;letter-spacing:.1em;color:#9BA8B4}
.revenue-flow li>span{font-family:var(--font-display);font-size:.62rem;letter-spacing:.1em;color:#9BA8B4}
.revenue-flow li>b{font-size:.72rem;margin-top:8px}
.revenue-flow li:has(>span)::before{display:none}
.revenue-flow li:not(:last-child)::after{
  content:"";position:absolute;top:50%;right:-9px;z-index:2;
  width:7px;height:7px;border-top:2px solid var(--crimson);border-right:2px solid var(--crimson);
  transform:translateY(-50%) rotate(45deg);
}
.revenue-flow li:nth-child(2n)::after{display:none}
.revenue-flow .is-hot{border-top:3px solid var(--crimson);background:#FFF6F7}
@media (min-width:640px){
  .revenue-flow{grid-template-columns:repeat(4,minmax(0,1fr))}
  .revenue-flow li:nth-child(2n)::after{display:block}
  .revenue-flow li:nth-child(4n)::after{display:none}
}
@media (min-width:1024px){
  .revenue-flow{grid-template-columns:repeat(7,minmax(0,1fr))}
  .revenue-flow li:nth-child(4n)::after{display:block}
}

/* Contrarian: copy + three options */
.contrarian{display:grid;gap:35px}
.contrarian h2{font-size:var(--fs-7);line-height:.96;margin:0 0 18px}
.contrarian>div>p{color:#5D6D7D;line-height:1.75}
.contrarian__options{display:grid;gap:12px}
.contrarian__options article{
  padding:23px 25px;background:var(--surface);
  border:1px solid var(--line);border-left:4px solid var(--crimson);
}
.contrarian__options article:nth-child(2){border-left-color:var(--gold)}
.contrarian__options article:nth-child(3){border-left-color:var(--blue)}
.contrarian__options b{display:block;font-family:var(--font-display);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:400}
.contrarian__options span{display:block;color:#687788;font-size:.82rem;line-height:1.55;margin-top:7px}
@media (min-width:1024px){
  .contrarian{grid-template-columns:.9fr 1.1fr;gap:70px;align-items:start}
}

/* ---------------------------------------------------------------------------
   11. ARTICLE / KNOWLEDGE CENTER
   --------------------------------------------------------------------------- */
.article{max-width:850px;margin:0 auto}
.article__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-4);margin:0 0 var(--sp-5);font-size:var(--fs-0);color:var(--muted)}
.article__meta .kicker{margin:0}
.article__intro{font-size:1.25rem;line-height:1.6;color:#425064}
.article__section{padding:20px 0;border-bottom:1px solid #E1E5EA}
.article__section h2{font-size:1.55rem;margin:0 0 var(--sp-3)}
.article__section p{color:#2E3D4E;line-height:1.7}
.article__section ul,.article__section ol{padding-left:20px;color:#2E3D4E;line-height:1.7}
.article__cta{margin-top:var(--sp-7)}
.article__cta h2{font-size:var(--fs-5);margin:0 0 var(--sp-3)}
.article__cta .button{margin-top:var(--sp-3)}
.related{margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:1px solid var(--line)}
.related h2{font-size:var(--fs-5);margin:0 0 var(--sp-3)}
.related ul{list-style:none;margin:0;padding:0}
.related li{border-bottom:1px solid var(--line)}
.related li a{display:flex;justify-content:space-between;gap:var(--sp-4);padding:12px 0;font-weight:600;color:var(--navy)}
.related li a:hover{color:var(--crimson)}
.related li a span{font-family:var(--font-display);font-size:var(--fs-0);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:400;white-space:nowrap}
.kc-grid .card h3{font-size:1.1rem;line-height:1.3;margin:var(--sp-3) 0 var(--sp-2);text-transform:none;font-family:var(--font-text);font-weight:600}
.kc-grid .card>a:last-child{display:inline-block;margin-top:var(--sp-3);font-family:var(--font-display);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-ink)}
.kc-grid .card>a:last-child svg{width:1.1em;height:1.1em;vertical-align:-.2em;margin-left:.25em;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ---------------------------------------------------------------------------
   12. UTILITIES
   --------------------------------------------------------------------------- */
.u-center{text-align:center}
.u-mt-1{margin-top:var(--sp-1)}
.u-mt-2{margin-top:var(--sp-2)}
.u-mt-3{margin-top:var(--sp-3)}
.u-mt-4{margin-top:var(--sp-4)}
.u-mt-5{margin-top:var(--sp-5)}
.u-mt-6{margin-top:var(--sp-6)}
.u-mt-7{margin-top:var(--sp-7)}
.u-mt-8{margin-top:var(--sp-8)}
.u-mt-9{margin-top:var(--sp-9)}
.u-mb-0{margin-bottom:0}
.u-max-60ch{max-width:60ch}
.u-hidden{display:none!important}

/* Scroll reveal (site.js): [data-reveal] rises 16px and fades in once it is 20% visible.
   data-reveal="stagger" reveals the element's children 100ms apart via --reveal-i (set by JS).
   Gated on html.js so no-JS visitors see everything; reduced motion renders the finished state. */
@media (prefers-reduced-motion:no-preference){
  html.js [data-reveal]:not([data-reveal="stagger"]),
  html.js [data-reveal="stagger"]>*{
    opacity:0;transform:translateY(16px);
    transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease);
  }
  html.js [data-reveal="stagger"]>*{transition-delay:calc(var(--reveal-i,0) * 100ms)}
  html.js [data-reveal].is-visible:not([data-reveal="stagger"]),
  html.js [data-reveal="stagger"].is-visible>*{opacity:1;transform:none}
}

/* ---------------------------------------------------------------------------
   12b. STYLE GUIDE (brand/index.html only, noindex)
   Specimen furniture for the internal style guide: logo stages, token swatches,
   type-scale and spacing rows, the icon roster and the reduced-height hero demos.
   Everything else on that page is a real component from the sections above.
   --------------------------------------------------------------------------- */
.guide-label{font-size:var(--fs-1);letter-spacing:.14em;color:var(--muted);margin-bottom:var(--sp-3)} /* margin-top left free for u-mt-* */
.section--dark .guide-label{color:var(--muted-on-dark)}
.guide-demo+.guide-demo{margin-top:var(--sp-7)}
.guide-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.guide-files{font-size:var(--fs-1);color:var(--muted);margin:var(--sp-3) 0 0}
.guide-files a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.guide-files a:hover{color:var(--crimson)}

/* logo stages */
.guide-stage{display:grid;place-items:center;padding:clamp(24px,5vw,48px);border-radius:var(--radius-lg);background:var(--navy)}
.guide-stage img{width:min(520px,100%)}
.guide-stage--sm img{width:min(380px,100%)}
.guide-stage--light{background:var(--white);border:1px solid var(--line)}
.guide-stage+.guide-stage{margin-top:var(--sp-4)}
.guide-fav-row{display:flex;flex-wrap:wrap;gap:var(--sp-5);align-items:center;padding:var(--sp-6);background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg)}

/* colour swatches: each item carries its token as --swatch; --ink marks light swatches */
.guide-swatches{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
.guide-swatch{
  display:flex;flex-direction:column;justify-content:flex-end;gap:2px;
  min-height:104px;padding:var(--sp-4);
  background:var(--swatch);color:#fff;
  border:1px solid transparent;border-radius:var(--radius);
}
.guide-swatch b{font-family:var(--font-display);font-weight:400;font-size:var(--fs-0);letter-spacing:.1em;text-transform:uppercase}
.guide-swatch code{font-size:var(--fs-0);opacity:.85}
.guide-swatch--ink{color:var(--ink);border-color:var(--line)}
@media (min-width:640px){
  .guide-swatches{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1024px){
  .guide-swatches{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* type scale and spacing rows */
.guide-scale,.guide-spacing{list-style:none;margin:0;padding:0}
.guide-scale li{display:flex;align-items:baseline;gap:var(--sp-4);padding:8px 0;border-bottom:1px solid var(--line);line-height:1.1}
.guide-scale code,.guide-spacing code{flex:0 0 6em;font-size:var(--fs-0);color:var(--muted)}
.guide-scale span{font-family:var(--font-display);text-transform:uppercase;min-width:0;overflow-wrap:anywhere}
.guide-spacing li{display:flex;align-items:center;gap:var(--sp-4);padding:6px 0}
.guide-spacing i{display:block;height:12px;width:var(--w);background:var(--gold);border-radius:var(--radius-sm)}
/* p.* so the specimens beat .card p */
p.guide-sample-display{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(2.2rem,4vw,3rem);line-height:.95;color:var(--navy);margin:0 0 var(--sp-4)}
p.guide-sample-text{font-size:var(--fs-4);line-height:1.6;color:var(--ink);margin:0 0 var(--sp-4)}

/* icon roster: every data-icon name the sprite (P8) must provide */
.guide-icons{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5) var(--sp-3)}
.guide-icons li{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);text-align:center}
.guide-icons code{font-size:var(--fs-0);color:var(--muted);overflow-wrap:anywhere}
@media (min-width:640px){
  .guide-icons{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1024px){
  .guide-icons{grid-template-columns:repeat(6,minmax(0,1fr))}
}

/* hero demos: the five variants at reduced height, title as a <p> so the page keeps one h1 */
.guide-heroes .hero{--hero-min-h:0;border:1px solid var(--line);border-radius:var(--radius-lg)}
.guide-heroes .hero__inner{min-height:0;padding:28px 0}
.guide-hero-title{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.005em;font-size:clamp(2rem,4vw,3.4rem);line-height:.95;max-width:20ch;margin:0}
.guide-heroes .hero--home .guide-hero-title span,.guide-heroes .hero--home .guide-hero-title strong,.guide-heroes .hero--home .guide-hero-title em{display:block}
.guide-heroes .hero--home .guide-hero-title strong{color:var(--crimson-display);font-weight:400}
.guide-heroes .hero--home .guide-hero-title em{color:var(--gold-light)}
.guide-heroes .hero--article .guide-hero-title,.guide-heroes .hero--utility .guide-hero-title{font-size:clamp(1.7rem,3vw,2.65rem)}
.guide-heroes .hero__lead{margin-top:12px}
.guide-heroes .hero__actions{margin-top:20px}
.guide-heroes .hero--home .hero__media img{max-width:220px}
.guide-heroes .hero--flagship .hero__media img{width:min(220px,100%)}
@media (min-width:1024px){
  .guide-heroes .hero--home .hero__media img{width:min(300px,90%);max-width:none}
  .guide-heroes .hero--flagship .hero__media img{width:min(320px,100%)}
  .guide-heroes .hero--standard .hero__media img{width:min(240px,100%)}
}

/* ---------------------------------------------------------------------------
   13. PRINT
   --------------------------------------------------------------------------- */
@media print{
  .header,.footer,.nav-toggle,.skip-link,.cta-band,.hero__media,.solutions__badge,.divider{display:none!important}
  body{background:#fff;color:#000}
  .hero,.section--dark,.solutions,.story,.proof,.scenarios,.clarity-band,.split__panel--dark,.card--dark,.discipline-card{background:none!important;color:#000!important;border-color:#999!important}
  .hero::before,.hero::after{display:none}
  .hero .kicker,.hero .text-gold,.hero .text-crimson,.section--dark .kicker,.section--dark .text-gold{color:#000}
  .hero__lead,.section--dark p,.card--dark p,.discipline-card p,.discipline-card ul{color:#222!important}
  .article a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
  .faq details{page-break-inside:avoid}
  .faq details[open] summary::marker{content:""}
}

/* ---- Hero: type resolve (from hero concept 4). Finished state is the default; .is-playing arms it once. ---- */
.hero--home h1 strong.hero__word{display:block}
.hero--home .hero__letter{display:inline-block}

.hero--home .hero__rule{height:3px;width:min(420px,60%);background:linear-gradient(90deg,var(--crimson),var(--gold));margin:6px 0 22px}
.hero--home.is-playing .hero__letter{transform:translate(var(--jx),var(--jy)) rotate(var(--jr));opacity:.7;animation:hero-type-snap .7s var(--ease) calc(var(--d) * var(--hero-t)) forwards}
.hero--home.is-playing h1 em{transform:translateY(18px);opacity:0;animation:hero-type-rise .7s var(--ease) calc(1.3s * var(--hero-t)) forwards}
.hero--home.is-playing .hero__rule{width:0;animation:hero-type-line .9s var(--ease) calc(1.9s * var(--hero-t)) forwards}
@keyframes hero-type-snap{to{transform:none;opacity:1}}
@keyframes hero-type-rise{to{transform:none;opacity:1}}
@keyframes hero-type-line{to{width:min(420px,60%)}}
@media (prefers-reduced-motion:reduce){.hero--home.is-playing .hero__letter,.hero--home.is-playing h1 em{transform:none;opacity:1;animation:none}.hero--home.is-playing .hero__rule{width:min(420px,60%);animation:none}}

/* ---- Story: lattice figure (from hero concept 5). Finished state is the default; .is-lattice-playing arms it once. ---- */
.story__figure--lattice{padding:var(--sp-5) var(--sp-5) var(--sp-7)}
.lattice__grid{stroke:rgba(0,151,223,.14);stroke-width:1;fill:none}
.lattice__nodes circle{fill:var(--gold);transform-box:fill-box;transform-origin:center}
.lattice__link{stroke:var(--gold);stroke-width:2}
.lattice__end{fill:var(--crimson);transform-box:fill-box;transform-origin:center}
.is-lattice-playing .lattice__nodes circle{fill:var(--crimson-display);transform:translate(var(--dx),var(--dy));animation:lattice-lock 1.6s var(--ease) var(--d) forwards}
.is-lattice-playing .lattice__link{stroke-dasharray:640;stroke-dashoffset:640;animation:lattice-draw 1.2s var(--ease) 1.7s forwards}
.is-lattice-playing .lattice__end{transform:scale(0);animation:lattice-pop .45s cubic-bezier(.3,1.6,.5,1) 2.9s forwards}
@keyframes lattice-lock{60%{fill:var(--crimson-display)}to{transform:none;fill:var(--gold)}}
@keyframes lattice-draw{to{stroke-dashoffset:0}}
@keyframes lattice-pop{to{transform:none}}
@media (prefers-reduced-motion:reduce){.is-lattice-playing .lattice__nodes circle,.is-lattice-playing .lattice__link,.is-lattice-playing .lattice__end{animation:none;transform:none;stroke-dashoffset:0}.is-lattice-playing .lattice__nodes circle{fill:var(--gold)}}

/* About: the four promises as a 2x2 grid inside one dark card */
.card--pillars .list{margin:0}
@media (min-width:640px){.card--pillars .list{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5) var(--sp-7)}}

/* ---- Technology hero: blue lattice. Finished state is the default; animations fill backwards so the
   scattered frame shows during each element's delay, then settle. Reduced motion shows the finished frame. ---- */
.tech-lattice .tl__web{stroke:var(--blue);stroke-width:1;stroke-opacity:0}
.tech-lattice .tl__nodes circle{fill:var(--navy);stroke:var(--blue);stroke-width:2;transform-box:fill-box;transform-origin:center}
.tech-lattice .tl__link{stroke:var(--blue);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.tech-lattice .tl__end{fill:var(--crimson);transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .tech-lattice .tl__web{animation:tl-web 1.6s var(--ease) both}
  .tech-lattice .tl__nodes circle{animation:tl-lock 1.6s var(--ease) calc(.2s + var(--d)) both}
  .tech-lattice .tl__link{stroke-dasharray:1100;animation:tl-draw 1.2s var(--ease) 1.9s both}
  .tech-lattice .tl__end{animation:tl-pop .45s cubic-bezier(.3,1.6,.5,1) 3.1s both}
}
@keyframes tl-web{0%,30%{stroke-opacity:.35}to{stroke-opacity:0}}
@keyframes tl-lock{from{transform:translate(var(--dx),var(--dy));stroke-opacity:.55}to{transform:none;stroke-opacity:1}}
@keyframes tl-draw{from{stroke-dashoffset:1100}to{stroke-dashoffset:0}}
@keyframes tl-pop{from{transform:scale(0)}to{transform:scale(1)}}

/* ---- Billing hero: claim slips straighten into one stack (hero concept 8) ---- */
.bill-stack{position:relative;width:min(440px,100%);height:300px;margin:0 auto}
.bill-stack__slip{position:absolute;left:50%;top:50%;width:200px;height:120px;margin:-60px 0 0 -100px;border:1.5px solid var(--gold);border-radius:3px;background:var(--navy);color:var(--gold);transform:translate(0,var(--stack))}
.bill-stack__slip:nth-child(2),.bill-stack__slip:nth-child(4){background:var(--navy-700)}
.bill-stack__slip::before,.bill-stack__slip::after{content:"";position:absolute;left:18px;right:18px;height:2px;background:currentColor;opacity:.35}
.bill-stack__slip::before{top:26px}
.bill-stack__slip::after{top:44px;right:60px}
.bill-stack__check{position:absolute;left:calc(50% + 86px);top:calc(50% - 60px - 44px - 14px);width:28px;height:28px;border-radius:50%;background:var(--crimson)}
@media (prefers-reduced-motion:no-preference){
  .bill-stack__slip{animation:bs-stack 1.5s var(--ease) var(--d) both}
  .bill-stack__check{animation:tl-pop .45s cubic-bezier(.3,1.6,.5,1) 2s both}
}
@keyframes bs-stack{from{transform:translate(var(--dx),var(--dy)) rotate(var(--r));border-color:var(--crimson-display);color:var(--crimson-display)}to{transform:translate(0,var(--stack)) rotate(0);border-color:var(--gold);color:var(--gold)}}
@media (max-width:639.98px){.bill-stack{transform:scale(.72);transform-origin:center top;height:230px}}

/* ---- Contact form honeypot: off-screen, not display:none, so naive bots still fill it ---- */
.form__hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}