/* ==========================================================================
   eProofficials — Concept 10a / charcoal + burnt orange, dark presentation
   Brand hexes from 03_Color/eproofficials-design-tokens.json, mapped to
   semantic surface tokens so the whole site can shift together.
   ========================================================================== */

:root {
  /* Brand palette (unchanged, straight from the kit) */
  --charcoal: #252525;
  --ink: #1C1C1C;
  --orange: #E95A24;
  --deep-orange: #C74418;
  --warm-white: #FFF9F5;
  --paper: #F4F1EE;
  --ash: #D8D3CF;
  --stone: #6C6865;
  --white: #FFFFFF;

  /* Semantic surfaces — dark presentation */
  --bg: #1C1C1C;          /* page base — Ink */
  --bg-2: #252525;        /* raised sections — Charcoal */
  --bg-3: #2C2B2A;        /* cards, inputs, cube faces */
  --bg-deep: #151514;     /* footer */
  --border: #3A3937;
  --border-strong: #55534F;

  /* Semantic text — all checked against their ground for WCAG AA */
  --text: #FFF9F5;        /* 15.4:1 on --bg */
  --text-2: #B5AEA9;      /*  7.8:1 on --bg */
  --accent: #E95A24;      /*  4.8:1 on --bg — safe for body text */
  --accent-text: #F2703B; /*  5.2:1 on --bg-2 — for labels on raised panels */
  --on-accent: #1C1C1C;   /*  4.8:1 on --orange, and the kit mandates Ink here */

  /* Type */
  --font-display: 'Sora', 'Aptos', Arial, sans-serif;
  --font-body: 'Manrope', 'Aptos', Arial, sans-serif;

  /* Radius */
  --radius-control: 8px;
  --radius-card: 12px;

  /* Spacing scale */
  --s1: 4px;  --s2: 8px;  --s3: 16px; --s4: 24px;
  --s5: 32px; --s6: 48px; --s7: 64px; --s8: 96px;

  /* Layout */
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: .18s;
  --dur: .32s;
  --dur-slow: .6s;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.625;
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }
::selection { background: var(--orange); color: var(--on-accent); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0;
  line-height: 1.08;
  color: var(--text);
}
h1 { font-size: clamp(2.25rem, 1.3rem + 3.9vw, 3.5rem); line-height: 1.07; }
h2 { font-size: clamp(1.75rem, 1.15rem + 2.5vw, 2.5rem); line-height: 1.15; font-weight: 700; }
h3 { font-size: clamp(1.25rem, 1.05rem + .85vw, 1.75rem); line-height: 1.21; font-weight: 700; }
h4 { font-size: 1.375rem; line-height: 1.27; font-weight: 700; }
p  { margin: 0; }

.tnum, .metric__value, table { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(56px, 9vw, 112px); }
.section--tight { padding-block: clamp(40px, 6vw, 72px); }
.section--raised { background: var(--bg-2); }
/* Legacy aliases so older markup keeps working */
.section--paper { background: var(--bg-2); }
.section--dark  { background: var(--bg-2); }

.stack > * + * { margin-top: var(--s4); }

.list {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 10px;
  color: var(--text-2);
  font-size: .9375rem;
}
.list li::marker { color: var(--orange); }
/* .list zeroes its own margin, which ties with `.stack > * + *` on specificity
   and wins on source order — so restore the gap explicitly. */
.stack > * + .list { margin-top: var(--s4); }

.measure { max-width: 62ch; }
.measure-narrow { max-width: 48ch; }

.lead { font-size: clamp(1.0625rem, 1rem + .3vw, 1.125rem); line-height: 1.6; color: var(--text-2); }
.muted { color: var(--text-2); }

.label {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.33;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0;
}

.eyebrow { display: flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--orange); flex: none; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--orange);
  --btn-fg: var(--on-accent);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border: 2px solid transparent;
  border-radius: var(--radius-control);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .9375rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
              color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); background: #F2703B; }
.btn:active { transform: translateY(0); }
.btn__arrow { transition: transform var(--dur) var(--ease); flex: none; }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: var(--border-strong);
}
.btn--ghost:hover { background: var(--bg-3); border-color: var(--text); }
/* Legacy aliases */
.btn--onDark { --btn-fg: var(--on-accent); }
.btn--ghostOnDark { --btn-bg: transparent; --btn-fg: var(--text); border-color: var(--border-strong); }
.btn--ghostOnDark:hover { background: var(--bg-3); border-color: var(--text); }

.tlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--orange), var(--orange));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size var(--dur) var(--ease);
}
.tlink:hover { background-size: 100% 2px; }
.tlink svg { transition: transform var(--dur) var(--ease); }
.tlink:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(28, 28, 28, .78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.header.is-stuck { border-bottom-color: var(--border); background: rgba(28, 28, 28, .94); }
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); min-height: 76px;
  transition: min-height var(--dur) var(--ease);
}
.header.is-stuck .header__inner { min-height: 64px; }

.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 34px; width: auto; transition: height var(--dur) var(--ease); }
.header.is-stuck .brand img { height: 30px; }

.nav { display: flex; align-items: center; gap: var(--s5); }
.nav__list { display: flex; align-items: center; gap: var(--s5); list-style: none; margin: 0; padding: 0; }
.nav__link {
  position: relative; font-weight: 600; font-size: .9375rem;
  text-decoration: none; color: var(--text-2); padding-block: 6px;
  transition: color var(--dur) var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: var(--orange);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover { color: var(--text); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--text); }

.nav__toggle {
  display: none; width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--border-strong);
  border-radius: var(--radius-control); cursor: pointer; color: var(--text);
}
.nav__toggle span { display: block; position: relative; width: 18px; height: 2px; background: currentColor; transition: background-color var(--dur-fast) var(--ease); }
.nav__toggle span::before, .nav__toggle span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px;
  background: currentColor; transition: transform var(--dur) var(--ease);
}
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after  { top: 6px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 880px) {
  .nav__toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: 76px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--s4) var(--gutter) var(--s6);
    background: var(--bg); border-bottom: 1px solid var(--border);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link { padding-block: 14px; border-bottom: 1px solid var(--border); font-size: 1.0625rem; }
  .nav__link::after { display: none; }
  .nav .btn { margin-top: var(--s4); justify-content: center; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(64px, 10vw, 128px) clamp(48px, 7vw, 88px); }
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { margin-top: var(--s4); }
.hero h1 .accent { color: var(--orange); }
.hero__lead { margin-top: var(--s4); font-size: clamp(1.0625rem, 1rem + .4vw, 1.1875rem); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

/* Corner wedges lifted from the kit's background system, dialled back */
.hero__wedge { position: absolute; pointer-events: none; z-index: 0; }
.hero__wedge--tr { top: 0; right: 0; width: clamp(160px, 26vw, 400px); opacity: .5; }
.hero__wedge--bl { left: 0; bottom: 0; width: clamp(110px, 16vw, 230px); opacity: .5; }

/* --------------------------------------------------------------------------
   Trust strip
   -------------------------------------------------------------------------- */
.trust { border-block: 1px solid var(--border); background: var(--bg-2); }
.trust__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s7); padding-block: var(--s4); }
.trust__item { display: flex; align-items: baseline; gap: 10px; }
.trust__k { font-family: var(--font-display); font-weight: 800; font-size: 1.375rem; color: var(--text); }
.trust__v { font-size: .875rem; color: var(--text-2); }

/* --------------------------------------------------------------------------
   Scroll-driven cube showcase
   Default (no JS / narrow / reduced motion): a plain stacked section.
   `.is-enhanced` is added by JS only when pinning is appropriate.
   -------------------------------------------------------------------------- */
.showcase { position: relative; }
.showcase__sticky { padding-block: clamp(48px, 7vw, 80px); }
.showcase__grid { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 6vw, 72px); align-items: center; }
.showcase__panels { position: relative; }
.showcase__panel + .showcase__panel { margin-top: var(--s6); }
.showcase__index {
  font-family: var(--font-display); font-weight: 800; font-size: .875rem;
  color: var(--accent-text); font-variant-numeric: tabular-nums; letter-spacing: .06em;
}
.showcase__panel h3 { margin-top: var(--s3); }
.showcase__panel p  { margin-top: var(--s3); color: var(--text-2); }
.showcase__panel .list { margin-top: var(--s4); }

/* Progress rail — also the accessible control for jumping between faces */
.showcase__rail { display: flex; gap: 10px; margin-top: var(--s6); padding: 0; list-style: none; }
.showcase__dot {
  appearance: none; border: 0; padding: 0; cursor: pointer;
  width: 46px; height: 4px; border-radius: 2px;
  background: var(--border-strong);
  transition: background-color var(--dur) var(--ease);
}
.showcase__dot[aria-selected="true"] { background: var(--orange); }
.showcase__dot:hover { background: var(--text-2); }
.showcase__dot[aria-selected="true"]:hover { background: var(--orange); }

/* The cube itself */
.cube-stage {
  display: grid; place-items: center;
  perspective: 1400px;
  min-height: clamp(300px, 42vw, 440px);
}
.cube {
  --size: clamp(200px, 26vw, 300px);
  --half: calc(var(--size) / 2);
  position: relative;
  width: var(--size);
  height: var(--size);
  transform-style: preserve-3d;
  transform: rotateX(-14deg) rotateY(var(--ry, -22deg));
  transition: transform var(--dur-slow) var(--ease-out);
}
.showcase.is-enhanced .cube { transition: none; } /* scroll drives it directly */

.cube__face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(16px, 2.2vw, 24px);
  background: var(--bg-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card);
  transition: background-color var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease);
}
.cube__face--front  { transform: translateZ(var(--half)); }
.cube__face--right  { transform: rotateY(90deg)  translateZ(var(--half)); }
.cube__face--back   { transform: rotateY(180deg) translateZ(var(--half)); }
.cube__face--left   { transform: rotateY(-90deg) translateZ(var(--half)); }
.cube__face--top    { transform: rotateX(90deg)  translateZ(var(--half)); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(var(--half)); }
.cube__face--top, .cube__face--bottom { background: var(--bg-2); }

.cube__face.is-active { background: var(--orange); border-color: var(--orange); }
.cube__face.is-active .cube__label,
.cube__face.is-active .cube__num { color: var(--on-accent); }
.cube__face.is-active .cube__icon { background: rgba(28, 28, 28, .16); color: var(--on-accent); }

.cube__icon {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: var(--radius-control);
  background: rgba(255, 249, 245, .07);
  color: var(--text);
  transition: background-color var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease);
}
.cube__icon svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 2; }
.cube__num { font-family: var(--font-display); font-weight: 800; font-size: .8125rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cube__label { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.0625rem, 1.6vw, 1.375rem); color: var(--text); line-height: 1.15; }

/* Enhanced: pin the stage and let scroll drive rotation */
.showcase.is-enhanced .showcase__sticky {
  position: sticky; top: 0;
  height: 100vh;
  display: grid; align-items: center;
  padding-block: 0;
}
.showcase.is-enhanced .showcase__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.showcase.is-enhanced .showcase__panels { min-height: 330px; }
.showcase.is-enhanced .showcase__panel {
  position: absolute; inset: 0 0 auto 0;
  margin-top: 0;
  opacity: 0; transform: translateY(16px);
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.showcase.is-enhanced .showcase__panel.is-active { opacity: 1; transform: none; pointer-events: auto; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--s4); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s5);
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card::after {
  content: ""; position: absolute; left: 0; top: 0;
  width: 3px; height: 100%;
  background: var(--orange);
  border-radius: var(--radius-card) 0 0 var(--radius-card);
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--dur-slow) var(--ease-out);
}
.card:hover { transform: translateY(-4px); border-color: var(--border-strong); }
.card:hover::after { transform: scaleY(1); }
.card__icon {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: var(--radius-control);
  background: rgba(255, 249, 245, .07);
  color: var(--text);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.card__icon svg { width: 22px; height: 22px; stroke: currentColor; }
.card:hover .card__icon { background: var(--orange); color: var(--on-accent); }
.card p { color: var(--text-2); font-size: .9375rem; }

/* --------------------------------------------------------------------------
   Numbered process
   -------------------------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  counter-increment: step;
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--s4);
  padding-block: var(--s5);
  border-top: 1px solid var(--border);
}
.step:last-child { border-bottom: 1px solid var(--border); }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display); font-weight: 800; font-size: 1.25rem;
  color: var(--orange); font-variant-numeric: tabular-nums;
}
.step p { color: var(--text-2); margin-top: var(--s2); }
@media (max-width: 620px) { .step { grid-template-columns: 48px minmax(0, 1fr); gap: var(--s3); } }

/* --------------------------------------------------------------------------
   Metrics
   -------------------------------------------------------------------------- */
.metric { padding: var(--s5) 0; }
.metric + .metric { border-top: 1px solid var(--border); }
.metric__value {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
  line-height: 1; color: var(--orange); letter-spacing: -0.02em;
}
.metric__label { margin-top: var(--s2); font-size: .9375rem; color: var(--text-2); }

/* --------------------------------------------------------------------------
   Quote
   -------------------------------------------------------------------------- */
.quote { border-left: 3px solid var(--orange); padding-left: var(--s5); }
.quote blockquote {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.625rem);
  line-height: 1.32; letter-spacing: -0.01em; color: var(--text);
}
.quote figcaption { margin-top: var(--s4); font-size: .9375rem; color: var(--text-2); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--s2); }
.field label { font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.field .req { color: var(--accent-text); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--text);
  padding: 13px 15px;
  background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: var(--radius-control); width: 100%;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input::placeholder, .field textarea::placeholder { color: var(--stone); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(233, 90, 36, .25);
}
.field__error { font-size: .8125rem; font-weight: 600; color: var(--accent-text); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--accent-text); }
.form__note { font-size: .8125rem; color: var(--text-2); }
.form__status {
  padding: var(--s3) var(--s4); border-radius: var(--radius-control);
  background: var(--bg); border: 1px solid var(--border-strong); font-size: .9375rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer { background: var(--bg-deep); color: var(--text-2); padding-block: var(--s7) var(--s5); border-top: 1px solid var(--border); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--s6); }
@media (max-width: 780px) { .footer__grid { grid-template-columns: 1fr; gap: var(--s5); } }
.footer img { height: 32px; width: auto; }
.footer h2 { font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text); font-weight: 700; font-family: var(--font-body); }
.footer ul { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: 10px; }
.footer a { color: var(--text-2); text-decoration: none; font-size: .9375rem; transition: color var(--dur-fast) var(--ease); }
.footer a:hover { color: var(--orange); }
.footer__bottom {
  margin-top: var(--s7); padding-top: var(--s4);
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
  justify-content: space-between; font-size: .8125rem; color: var(--text-2);
}
/* Required by the brand guidelines — independence statement */
.disclaimer { font-size: .8125rem; line-height: 1.55; color: var(--text-2); max-width: 62ch; }

/* --------------------------------------------------------------------------
   Accessibility helpers
   -------------------------------------------------------------------------- */
.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  padding: 12px 18px; background: var(--orange); color: var(--on-accent);
  border-radius: var(--radius-control); font-weight: 700; text-decoration: none;
}
.skip:focus { left: 16px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 2px; }

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Hero growth visual
   Flat shapes only — the kit forbids gradients, glow and bevels, so depth
   comes from stacking and opacity rather than effects.
   -------------------------------------------------------------------------- */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { max-width: 460px; }
}

.hero__visual { width: 100%; height: auto; }
.g-grid  { opacity: 0; animation: fadeIn .8s var(--ease-out) .15s forwards; }
.g-base  { opacity: 0; animation: fadeIn .8s var(--ease-out) .15s forwards; }
.g-bar   { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0);
           animation: barRise .85s var(--ease-out) forwards; animation-delay: var(--d, 0ms); }
.g-line  { stroke-dasharray: 440; stroke-dashoffset: 440;
           animation: draw 1.5s var(--ease-out) .75s forwards; }
.g-head  { opacity: 0; animation: pop .5s var(--ease-out) 2.1s forwards; }
.g-dot   { opacity: 0; animation: pop .4s var(--ease-out) 2.25s forwards; }
.g-cube  { animation: floatY 7s ease-in-out infinite; }

@keyframes barRise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes draw    { to { stroke-dashoffset: 0; } }
@keyframes fadeIn  { to { opacity: 1; } }
@keyframes pop     { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes floatY  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-33px); } }
@keyframes spin    { to { transform: translate(-50%, -50%) translateY(calc(var(--size) * .44)) rotateX(74deg) rotateZ(360deg); } }

/* --------------------------------------------------------------------------
   Cube — orbit ring, ground plate, richer faces
   -------------------------------------------------------------------------- */
.cube-stage { position: relative; --size: clamp(200px, 26vw, 300px); }

.cube-orbit {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--size) * 1.62); height: calc(var(--size) * 1.62);
  border: 1px dashed #6A6762;
  border-radius: 50%;
  /* Sits at the base of the cube rather than its centre, otherwise the box
     hides most of the ring. */
  transform: translate(-50%, -50%) translateY(calc(var(--size) * .44)) rotateX(74deg) rotateZ(0deg);
  animation: spin 28s linear infinite;
  opacity: .75;
  pointer-events: none;
}
/* --size floors at 200px, so the ring stops shrinking while the viewport does
   not; perspective then paints it wider than its box and the document overflows
   below ~414px. Scoped here rather than to --size, which is declared twice. */
@media (max-width: 700px) {
  .cube-orbit { width: calc(var(--size) * 1.15); height: calc(var(--size) * 1.15); }
}
.cube-orbit::after {
  content: ""; position: absolute; top: -5px; left: 50%;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--orange); transform: translateX(-50%);
}
/* Flat ground plate — reads as weight without using a blurred shadow. */
.cube-plate {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--size) * .96); height: calc(var(--size) * .2);
  background: #141413; border-radius: 50%;
  transform: translate(-50%, calc(var(--size) * .56));
  opacity: .55; pointer-events: none;
}

.cube { position: relative; z-index: 1; }
/* A lighter top edge suggests a lit face without a bevel or gradient. */
.cube__face { border-top-color: rgba(255, 249, 245, .17); color: var(--text); }
.cube__face.is-active { color: var(--on-accent); }

.cube__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cube__viz { width: 100%; height: auto; stroke: currentColor; fill: none; opacity: .9; }
.cube__label { margin-top: 2px; }

/* Below the pinning breakpoint the cube never rotates, so it shows one face and
   a sliver of a second whose label reads sideways, and its 3D faces paint past
   the viewport edge. The four panels are all visible there and say everything
   the faces did, so the stage and its rail — a control with nothing left to
   control once no panel is hidden — come out.  */
@media (max-width: 899.98px) {
  .cube-stage, .showcase__rail { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cube-orbit { animation: none; }
  .g-bar { transform: none; }
  .g-line { stroke-dashoffset: 0; }
  .g-head, .g-dot, .g-grid, .g-base { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Process timeline — a rail that fills as each step comes into view
   -------------------------------------------------------------------------- */
.timeline { position: relative; list-style: none; margin: 0; padding: 0; }
.timeline__rail, .timeline__fill {
  position: absolute; left: 22px; width: 2px;
  top: 46px; bottom: 46px;
  pointer-events: none;
}
.timeline__rail { background: var(--border); }
.timeline__fill {
  bottom: auto; height: 0;
  background: var(--orange);
  transition: height .7s var(--ease-out);
}
.timeline__item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: var(--s4);
  padding-block: var(--s4);
}
.timeline__item:first-child { padding-top: 0; }
.timeline__item:last-child  { padding-bottom: 0; }
.timeline__node {
  position: relative; z-index: 1;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg-2);
  border: 2px solid var(--border);
  color: var(--text-2);
  font-family: var(--font-display); font-weight: 800; font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease),
              color var(--dur-slow) var(--ease);
}
.timeline__item.is-done .timeline__node {
  background: var(--orange); border-color: var(--orange); color: var(--on-accent);
}
.timeline__body p { color: var(--text-2); margin-top: var(--s2); }
/* Semantic level is h3 (these sit under a section h2); visual level stays the
   1.375rem the scale already defines for h4. No new size is introduced. */
.step h3, .timeline__body h3 { font-size: 1.375rem; line-height: 1.27; }
.timeline__out {
  display: inline-block;
  margin-top: var(--s3) !important;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .75rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent-text) !important;
  transition: border-color var(--dur-slow) var(--ease);
}
.timeline__item.is-done .timeline__out { border-color: var(--accent-text); }
@media (max-width: 620px) {
  .timeline__item { grid-template-columns: 38px minmax(0, 1fr); gap: var(--s3); }
  .timeline__node { width: 38px; height: 38px; font-size: .75rem; }
  .timeline__rail, .timeline__fill { left: 18px; top: 38px; }
}

/* --------------------------------------------------------------------------
   Stat cards
   -------------------------------------------------------------------------- */
.stat {
  position: relative;
  padding-top: var(--s5);
  border-top: 1px solid var(--border);
}
.stat::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 100%; height: 2px; background: var(--orange);
  transform: scaleX(0); transform-origin: left;
  transition: transform .9s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.stat.is-in::before { transform: scaleX(1); }
.stat__index {
  font-family: var(--font-display); font-weight: 800; font-size: .75rem;
  letter-spacing: .08em; color: var(--text-2); font-variant-numeric: tabular-nums;
}
.stat__value {
  margin-top: var(--s3);
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.5rem, 1.7rem + 3vw, 3.75rem);
  line-height: 1; letter-spacing: -0.025em;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}
.stat__label { margin-top: var(--s3); font-size: .9375rem; color: var(--text-2); }

@media (prefers-reduced-motion: reduce) {
  .stat::before { transform: scaleX(1); }
  .timeline__fill { transition: none; }
}

/* Intro rides alongside the timeline instead of leaving a column of dead space. */
@media (min-width: 981px) {
  .process__intro { position: sticky; top: 108px; }
}