/* ===================================================================
   Inkwell homepage v2 — animated diagrams
   Loads AFTER hero.css and inherits its tokens, nav, footer, hero shell,
   .wrap, .section, .section-title, .hero-cta and .door.

   Motion contract, per the visual spec:
     · transform and opacity only, no exceptions
     · everything plays once on entry and holds its end state
     · the END state is the default in markup. Start states live under
       .js only, so no-JS and reduced-motion both get the finished diagram
   =================================================================== */

:root {
  /* text-safe brand variants, per Brand Guidelines §3.3 */
  --blue-deep: #1C6E9D;
  --teal-deep: #13746C;
  --navy:      #1A478F;
  --coral:     #F0503C;
  --coral-txt: #AD1F0D;
  --mint:      #D2F4EA;

  --n-25:  #F7F9F9;
  --n-50:  #F2F6F5;
  --n-100: #ECEEEE;
  --n-200: #E2E4E4;
  --n-300: #B8B8BA;
  --n-500: #767679;
  --n-600: #56565A;
  --n-700: #3D3D3F;
  --n-800: #2C2C2E;
  --n-900: #171717;

  /* motion */
  --t-micro: 120ms;
  --t-enter: 320ms;
  --t-step:  400ms;
  --t-count: 900ms;
  --ease-out:    cubic-bezier(.16, 1, .30, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --stagger: 90ms;

  --card-shadow:    0 20px 30px -22px rgba(20, 40, 60, .55);
  --card-shadow-up: 0 30px 44px -24px rgba(20, 40, 60, .55);
}

/* ============ SHARED ============ */

.overline {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal-deep);
}

.section-tint { background: var(--n-25); }
.section-close { padding-bottom: clamp(76px, 7vw, 110px); }

.section-copy--tight { margin-top: clamp(26px, 2.8vw, 40px); }

.card {
  max-width: 1040px;
  margin: clamp(30px, 3.4vw, 48px) auto 0;
  padding: clamp(24px, 3vw, 44px);
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
}

.card-note {
  max-width: 62ch;
  margin: clamp(20px, 2.2vw, 30px) auto 0;
  text-align: center;
  font-size: var(--body-sm);
  line-height: 1.5;
  color: var(--n-600);
}

.fine-print {
  max-width: 800px;
  margin: clamp(20px, 2.2vw, 30px) auto 0;
  text-align: center;
  font-size: var(--body-sm);
  line-height: 1.55;
  color: var(--n-600);
}
.fine-print--left { text-align: left; max-width: none; }
.fine-print a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 3px; }

/* The connector between sections. Each one states the question the next
   section answers, so the page reads as one argument rather than nine
   separate ones. The rule beneath it carries the eye down. */
.handoff {
  max-width: 720px;
  margin: clamp(34px, 3.8vw, 54px) auto 0;
  text-align: center;
  font-size: var(--body-size);
  font-weight: 600;
  line-height: 1.5;
  color: var(--n-600);
}
.handoff::after {
  content: "";
  display: block;
  width: 1.5px;
  height: clamp(26px, 3.2vw, 44px);
  margin: clamp(16px, 1.8vw, 24px) auto 0;
  border-radius: 999px;
  background: linear-gradient(to bottom, var(--n-300), rgba(184, 184, 186, 0));
}
.section-close .handoff::after { display: none; }

/* generic entrance used by cards, tiles and list rows */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
}
.js .is-live .reveal,
.js .reveal.is-live {
  opacity: 1;
  transform: none;
  transition:
    opacity   var(--t-enter) var(--ease-out) calc(var(--i, 0) * var(--stagger)),
    transform var(--t-enter) var(--ease-out) calc(var(--i, 0) * var(--stagger));
}


/* ===================================================================
   1 · HERO — type scale, the pointer glow and the queue visual
   =================================================================== */

/* hero.css sets the section deck at up to 35px, which now outsizes the
   hero's own deck and competes with the headings above it. Brought down so
   the order reads heading, deck, body. */
.section-sub {
  font-size: clamp(15.5px, 1.3vw, 18px);
  font-weight: 500;
  line-height: 1.5;
  max-width: 760px;
  color: var(--n-700);
}
.section-sub.sub-narrow { max-width: 700px; }


/* The hero headline is the one Display-size element on the page, per
   Brand Guidelines §4.1 and §4.2. The deck under it drops to body size so
   the headline clearly outranks it. */
.hero-title {
  font-size: clamp(33px, 5.1vw, 64px);
  line-height: 1.05;
  letter-spacing: -.026em;
}

.hero-sub--tight {
  max-width: 700px;
  font-size: clamp(16px, 1.42vw, 19px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--n-700);
}

.hero-visual {
  max-width: 880px;
  margin: clamp(38px, 4.2vw, 58px) auto 0;
}

/* ---- the queue: work handed over, and work coming back ---- */
.queue {
  max-width: 580px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: 16px;
  box-shadow: 0 30px 60px -34px rgba(20, 40, 60, .55);
  overflow: hidden;
  text-align: left;
}

.q-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  background: var(--n-25);
  border-bottom: 1px solid var(--n-200);
}
.q-dots { display: inline-flex; gap: 5px; flex: none; }
.q-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--n-200); }
.q-title {
  margin: 0; flex: 1;
  font-size: 12.5px; font-weight: 700; color: var(--n-700);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.q-count {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--mint);
  border: 1px solid var(--teal-deep);
  font-size: 10.5px; font-weight: 700;
  color: var(--teal-deep);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.q-count b { font-weight: 800; }

.q-rows { padding: 8px; }

.q-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
}
.q-row + .q-row { border-top: 1px solid var(--n-100); }

/* END STATE: delivered */
.q-tick {
  flex: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--teal-deep);
  position: relative;
}
.q-tick::after {
  content: "";
  position: absolute;
  left: 6.5px; top: 4.5px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(42deg);
}

.q-what { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.q-what b { font-size: 13.5px; font-weight: 700; color: var(--n-800); }
.q-what em {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--n-500);
}

.q-statewrap { position: relative; flex: none; display: inline-flex; }
.q-state {
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.q-state--was {
  border: 1px solid var(--n-200);
  background: var(--n-25);
  color: var(--n-500);
  opacity: 0;
}
.q-state--done {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--teal-deep);
  background: var(--teal-deep);
  color: #fff;
}

.q-foot {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  line-height: 1.45;
  margin: 0;
  padding: 13px 18px;
  background: var(--mint);
  border-top: 1px solid var(--n-200);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--teal-deep);
}
.q-foot-tick {
  flex: none;
  margin-top: 1px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--teal-deep);
  position: relative;
}
.q-foot-tick::after {
  content: "";
  position: absolute;
  left: 5.5px; top: 4px;
  width: 4px; height: 7.5px;
  border: solid #fff;
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(42deg);
}

.hv-note {
  max-width: 540px;
  margin: 18px auto 0;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--n-500);
}

/* ---- motion: the jobs come back one by one ---- */
.js .queue      { opacity: 0; transform: translateY(16px); }
.js .q-row      { opacity: 0; transform: translateY(8px); }
.js .q-tick     { background: var(--n-200); }
.js .q-tick::after { opacity: 0; }
.js .q-state--was  { opacity: 1; }
.js .q-state--done { opacity: 0; }
.js .q-count    { opacity: 0; }
.js .q-foot     { opacity: 0; }

.js .is-live .queue {
  opacity: 1; transform: none;
  transition: opacity var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out);
}
.js .is-live .q-row {
  opacity: 1; transform: none;
  transition:
    opacity   var(--t-enter) var(--ease-out) calc(300ms + var(--i) * 110ms),
    transform var(--t-enter) var(--ease-out) calc(300ms + var(--i) * 110ms);
}
.js .is-live .q-tick {
  background: var(--teal-deep);
  transition: background 220ms var(--ease-out) calc(900ms + var(--i) * 300ms);
}
.js .is-live .q-tick::after {
  opacity: 1;
  transition: opacity 160ms linear calc(980ms + var(--i) * 300ms);
}
.js .is-live .q-state--was {
  opacity: 0;
  transition: opacity var(--t-micro) linear calc(920ms + var(--i) * 300ms);
}
.js .is-live .q-state--done {
  opacity: 1;
  transition: opacity var(--t-enter) var(--ease-out) calc(960ms + var(--i) * 300ms);
}
.js .is-live .q-count {
  opacity: 1;
  transition: opacity var(--t-enter) var(--ease-out) 2150ms;
}
.js .is-live .q-foot {
  opacity: 1;
  transition: opacity var(--t-enter) var(--ease-out) 2300ms;
}

/* ---- the breadth strip, static so the panel is the only motion here ---- */
.rolestrip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: clamp(30px, 3.4vw, 44px) 0 0;
}
.rolestrip li {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--n-200);
  background: rgba(255, 255, 255, .72);
  font-size: clamp(12px, .98vw, 13.5px);
  font-weight: 600;
  color: var(--n-600);
  white-space: nowrap;
  backdrop-filter: blur(2px);
}

.rolegrid-note {
  margin: clamp(14px, 1.5vw, 20px) 0 0;
  text-align: center;
  font-size: var(--body-sm);
  color: var(--n-600);
}


/* ===================================================================
   2 · HIRING TIMELINES
   =================================================================== */

.timeline-card { max-width: 940px; }

.tl-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
}

.tl-label {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--body-sm);
  line-height: 1.3;
}
.tl-label b { font-weight: 700; }
.tl-label em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--n-500);
  font-variant-numeric: tabular-nums;
}
.tl-label--warm { color: var(--coral-txt); }
.tl-label--cool { color: var(--teal-deep); }

.tl-track {
  position: relative;
  height: 58px;
  background: var(--n-50);
  border-radius: 8px;
}

.tl-seg,
.tl-rule {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: calc(var(--from) * 1%);
  width: calc((var(--to) - var(--from)) * 1%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  overflow: hidden;
}

.tl-seg b {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  color: #fff;
  padding: 0 7px;
  text-align: center;
  overflow: hidden;
}

.tl-seg--a1 { background: rgba(240, 80, 60, .42); }
.tl-seg--a2 { background: rgba(240, 80, 60, .62); }
.tl-seg--a3 { background: rgba(240, 80, 60, .82); }
.tl-seg--a4 { background: var(--coral); }
.tl-seg--a1 b { color: var(--coral-txt); }

.tl-seg--b1 { background: rgba(19, 116, 108, .55); }
.tl-seg--b2 { background: var(--teal-deep); }

.tl-rule {
  top: 50%;
  bottom: auto;
  height: 3px;
  transform: translateY(-50%);
  background: #A0E1DC;
  border-radius: 999px;
  overflow: visible;
}
.tl-rule b {
  position: absolute;
  left: 10px;
  top: -18px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--teal-deep);
}

/* start state: collapsed to the left edge */
.js .tl-seg,
.js .tl-rule { transform: scaleX(0); transform-origin: left center; }
.js .tl-rule { transform: scaleX(0) translateY(-50%); }

.js .is-live .tl-seg { animation: wipeX var(--t-step) var(--ease-out) forwards; animation-delay: calc(240ms + var(--i) * 340ms); }
.js .is-live .tl-rule { animation: wipeXRule var(--t-step) var(--ease-out) forwards; animation-delay: calc(240ms + var(--i) * 340ms); }

@keyframes wipeX     { to { transform: scaleX(1); } }
@keyframes wipeXRule { to { transform: scaleX(1) translateY(-50%); } }

.tl-axis {
  position: relative;
  margin-left: 178px;
  height: 20px;
}
.tl-axis span {
  position: absolute;
  left: calc(var(--at) * 1%);
  transform: translateX(-50%);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--n-500);
}
.tl-axis-unit {
  margin: 0 0 0 178px;
  font-size: 11.5px;
  color: var(--n-500);
}

.tl-delta {
  margin: clamp(18px, 2vw, 26px) 0 0;
  text-align: center;
  font-size: var(--body-sm);
  color: var(--n-600);
}
.tl-delta-num {
  display: block;
  font-size: clamp(26px, 2.9vw, 40px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--n-900);
  font-variant-numeric: tabular-nums;
}
.js .tl-delta { opacity: 0; transform: translateY(8px); }
.js .is-live .tl-delta {
  opacity: 1; transform: none;
  transition: opacity var(--t-enter) var(--ease-out) 2200ms,
              transform var(--t-enter) var(--ease-out) 2200ms;
}


/* ===================================================================
   3 · DOORS — mini diagrams on the existing .door shell
   =================================================================== */

.door-for {
  margin-top: 6px !important;
  font-size: 11.5px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--n-600);
}

.minidiag {
  margin: clamp(18px, 2vw, 26px) 0 clamp(4px, 1vw, 10px);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  position: relative;
}

.md-node {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  background: #fff;
  border: 1px solid var(--n-200);
  color: var(--n-800);
}
.md-node--faint {
  color: var(--n-500);
  border-style: dashed;
  background: transparent;
}
.md-link {
  width: 18px;
  height: 1.5px;
  background: var(--n-300);
  flex: none;
}
.md-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 10px;
}
.md-box--dashed { border: 1.5px dashed var(--blue-deep); background: rgba(28, 110, 157, .04); }
.md-box--solid  { border: 1.5px solid  var(--teal-deep); background: rgba(19, 116, 108, .05); }

.md-cap {
  flex-basis: 100%;
  font-size: 10.5px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--n-500);
}

.door { transition: transform .25s var(--ease-out), box-shadow .25s ease; }
.door:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-up); }
.door p { margin-top: clamp(12px, 1.2vw, 16px); }


/* ===================================================================
   4 · THE LADDER — drawn as a process. A rail fills left to right and
   each rung switches on as the fill reaches its node.
   =================================================================== */

.ladder {
  position: relative;
  max-width: 1120px;
  margin: clamp(34px, 3.8vw, 54px) auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: 16px;
  padding-bottom: 34px;
}

/* the unfilled rail, and the gradient that travels along it */
.ladder-track,
.ladder-fill {
  position: absolute;
  left: 0;
  bottom: 12px;
  height: 4px;
  width: 100%;
  border-radius: 999px;
}
.ladder-track { background: var(--n-200); }
.ladder-fill {
  background: linear-gradient(90deg, #4BA9DF 0%, #1FBBAE 100%);
  transform-origin: left center;
}

.rung {
  position: relative;
  padding: clamp(18px, 1.9vw, 26px) clamp(16px, 1.7vw, 24px);
  border-radius: 14px;
  background: #fff;
}

/* stem from the card down to the rail */
.rung::after {
  content: "";
  position: absolute;
  left: 30px;
  top: 100%;
  width: 2px;
  height: calc(var(--stem) * 1px);
  background: var(--n-200);
  transform-origin: top center;
}

/* the node sitting on the rail */
.rung::before {
  content: "";
  position: absolute;
  left: 25px;
  top: calc(100% + var(--stem) * 1px - 5px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--ink-teal-deep, var(--teal-deep));
  z-index: 2;
}

.rung h3 {
  margin: 8px 0 0;
  font-size: clamp(15px, 1.32vw, 18px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--n-900);
}
.rung p {
  margin: 9px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--n-700);
}
.rung-step {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: var(--n-500);
}

/* the brand gets louder as the rung rises, per Brand Guidelines §1.2 */
.rung--0 { margin-bottom: 0;    border: 1px dashed var(--n-300); }
.rung--1 { margin-bottom: 26px; border: 1px solid  var(--n-300); background: var(--n-25); }
.rung--2 { margin-bottom: 52px; border: 1.5px solid var(--blue-deep); background: var(--mint); }
.rung--3 { margin-bottom: 78px; border: 2px solid  var(--navy); background: var(--navy); }

.rung--3 h3 { color: #fff; }
.rung--3 p { color: rgba(255, 255, 255, .82); }
.rung--3 .rung-step { color: #73B8E0; }

/* ---- the sequence ---- */
.js .ladder-fill { transform: scaleX(0); }
.js .rung        { opacity: 0; transform: translateY(20px); }
.js .rung::after { transform: scaleY(0); }
.js .rung::before{ transform: scale(0); border-color: var(--n-300); }

.js .is-live .ladder-fill {
  animation: wipeX 2000ms linear 300ms forwards;
}
.js .is-live .rung {
  opacity: 1;
  transform: none;
  transition:
    opacity   var(--t-enter) var(--ease-out) calc(300ms + var(--i) * 495ms),
    transform var(--t-enter) var(--ease-out) calc(300ms + var(--i) * 495ms);
}
.js .is-live .rung::after {
  transform: scaleY(1);
  transition: transform 260ms var(--ease-out) calc(340ms + var(--i) * 495ms);
}
.js .is-live .rung::before {
  transform: scale(1);
  border-color: var(--teal-deep);
  transition:
    transform    260ms cubic-bezier(.34, 1.56, .64, 1) calc(540ms + var(--i) * 495ms),
    border-color 200ms linear calc(540ms + var(--i) * 495ms);
}


/* ===================================================================
   5 · CONTINUITY TRACKS
   =================================================================== */

/* Deliberately NOT a horizontal track. The hiring timeline in §2 already
   owns that form, so continuity runs vertically, as two rosters. The left
   column is broken into three tenures by two handovers; the right column is
   one unbroken block of the same total height. */

.cont-card { max-width: 880px; }

.cont {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.4vw, 34px);
}

.cont-head {
  margin: 0 0 12px;
  font-size: var(--body-sm);
  font-weight: 700;
  text-align: center;
}
.cont-head--warm { color: var(--coral-txt); }
.cont-head--cool { color: var(--teal-deep); }

.cont-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: clamp(290px, 30vw, 360px);
}

.cont-person {
  flex-grow: var(--grow);
  flex-basis: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--n-25);
  border: 1px solid var(--n-200);
  transform-origin: top center;
  overflow: hidden;
}
.cont-person svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--n-500);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cont-person b {
  font-size: 13px;
  font-weight: 700;
  color: var(--n-700);
  line-height: 1.25;
}
.cont-person em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--n-500);
  font-variant-numeric: tabular-nums;
}

.cont-person--ours {
  background: var(--mint);
  border: 1.5px solid var(--teal-deep);
}
.cont-person--ours svg { stroke: var(--teal-deep); width: 24px; height: 24px; }
.cont-person--ours b { color: var(--n-900); font-size: 15px; }
.cont-person--ours em { color: var(--teal-deep); font-weight: 600; }

.cont-break {
  flex: none;
  height: 26px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--coral-txt);
}
.cont-break::before,
.cont-break::after {
  content: "";
  flex: 1;
  border-top: 1.5px dashed var(--coral);
}

.cont-foot {
  margin: 14px 0 0;
  text-align: center;
  font-size: var(--body-sm);
  font-weight: 700;
}
.cont-foot--warm { color: var(--coral-txt); }
.cont-foot--cool { color: var(--teal-deep); }

/* vertical growth, so the motion differs from §2 as well as the form */
.js .cont-person { transform: scaleY(0); opacity: 0; }
.js .cont-break  { opacity: 0; }

.js .is-live .cont-person {
  animation: growY var(--t-step) var(--ease-out) forwards;
  animation-delay: calc(300ms + var(--i) * 520ms);
}
.js .is-live .cont-person--ours {
  animation-duration: var(--t-count);
  animation-delay: 1900ms;
}
.js .is-live .cont-break {
  opacity: 1;
  transition: opacity var(--t-enter) var(--ease-out) calc(600ms + var(--i) * 520ms);
}

@keyframes growY { to { transform: scaleY(1); opacity: 1; } }


/* ===================================================================
   6 · BENTO GRID
   =================================================================== */

.bento {
  max-width: 1120px;
  margin: clamp(30px, 3.4vw, 48px) auto 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.bento-tile {
  grid-column: span 4;
  padding: clamp(22px, 2.3vw, 32px);
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: 16px;
  transition: transform .25s var(--ease-out), border-color var(--t-micro) ease, box-shadow .25s ease;
}
.bento-tile--wide { grid-column: span 7; }
.bento-tile:nth-child(2) { grid-column: span 5; }

.bento-tile:hover {
  transform: translateY(-4px);
  border-color: var(--blue-deep);
  box-shadow: var(--card-shadow-up);
}

.bento-icon {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--n-600);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--t-micro) ease;
}
.bento-tile:hover .bento-icon { stroke: var(--blue-deep); }

.bento-tile h3 {
  margin: 14px 0 0;
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--n-900);
}
.bento-tile h3 a { transition: color var(--t-micro) ease; }
.bento-tile:hover h3 a { color: var(--blue-deep); }

.bento-tile p {
  margin: 10px 0 0;
  font-size: var(--body-sm);
  line-height: 1.55;
  color: var(--n-700);
}

.bento-roles {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bento-roles li {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--n-50);
  border: 1px solid var(--n-200);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--n-600);
}


/* ===================================================================
   8 · METRICS BAND
   =================================================================== */

.metrics {
  max-width: 1060px;
  margin: clamp(30px, 3.4vw, 48px) auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px) 20px;
  padding: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 34px);
  background: var(--mint);
  border-radius: 16px;
}
.metric { text-align: center; }
.metric-num {
  margin: 0;
  font-size: clamp(28px, 3.1vw, 44px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--n-900);
  font-variant-numeric: tabular-nums;
}
.metric-num--pending { color: var(--n-500); }
.metric-pre {
  font-size: .48em;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--n-600);
}
.metric-suf {
  font-size: .52em;
  font-weight: 800;
  letter-spacing: -.01em;
}
.metric-label {
  margin: 10px auto 0;
  max-width: 30ch;
  font-size: var(--body-sm);
  line-height: 1.45;
  color: var(--n-700);
}
.metric-flag {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--n-300);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--n-500);
}


/* ===================================================================
   ACCESSIBILITY FIX — Brand Guidelines §3.2 and open item 6.
   White on the bright gradient measures 2.61:1 and fails everywhere.
   Dark text on the same gradient measures 6.86:1 and clears AAA, and it
   keeps the gradient, which is the distinctive part of the brand.
   =================================================================== */
.hero-cta {
  color: var(--n-900);
  text-shadow: none;
}
.hero-cta:hover { color: var(--n-900); }


/* ===================================================================
   RESPONSIVE
   =================================================================== */

@media (max-width: 900px) {
  .ladder { grid-template-columns: repeat(2, 1fr); gap: 14px; padding-bottom: 0; }
  .ladder-rule { display: none; }
  .rung--0, .rung--1, .rung--2, .rung--3 { margin-bottom: 0; }

  .bento-tile,
  .bento-tile--wide,
  .bento-tile:nth-child(2) { grid-column: span 6; }

  .metrics { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
}

@media (max-width: 760px) {
  .q-head { flex-wrap: wrap; }
  .q-title { white-space: normal; flex: 1 1 100%; order: -1; }
  .q-what b { font-size: 12.5px; }
  .q-what em { font-size: 10px; }
  .q-state { padding: 3px 8px; font-size: 9.5px; }

  .tl-row, .cont-row { grid-template-columns: 1fr; gap: 8px; }
  .tl-axis, .tl-axis-unit { margin-left: 0; }
  .tl-seg b { font-size: 10px; }

  .cont-chip { font-size: 10.5px; padding: 0 8px; }
  .cont-row { margin-bottom: 40px; }

  .bento-tile,
  .bento-tile--wide,
  .bento-tile:nth-child(2) { grid-column: span 12; }

  .rolestrip { gap: 6px; }
  .rolestrip li { padding: 6px 11px; font-size: 11.5px; }

  .cont { gap: 12px; }
  .cont-person { padding: 8px 10px; }
  .cont-person b { font-size: 11.5px; }
  .cont-person--ours b { font-size: 13px; }
  .cont-person em { font-size: 10.5px; }
  .cont-person svg { width: 16px; height: 16px; }
  .cont-break { font-size: 9px; letter-spacing: .03em; }
}

@media (max-width: 560px) {
  .ladder { grid-template-columns: 1fr; }
  .minidiag { gap: 6px; }
  .md-node { font-size: 11px; padding: 5px 9px; }
}


/* ===================================================================
   REDUCED MOTION — every diagram renders its FINAL frame, not its first
   =================================================================== */

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .is-live .reveal,
  .js .rung,
  .js .tl-delta {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  .js .tl-seg,
  .js .ladder-rule,
  .js .cont-chip {
    transform: scaleX(1) !important;
    animation: none !important;
  }
  .js .tl-rule { transform: scaleX(1) translateY(-50%) !important; animation: none !important; }

  .js .cont-mark {
    opacity: 1 !important;
    transform: translateX(-50%) !important;
    transition: none !important;
  }

  /* the queue renders finished, all four jobs back */
  .js .queue,
  .js .q-row,
  .js .q-count,
  .js .q-foot,
  .js .q-state--done,
  .js .q-tick::after {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .js .q-state--was { opacity: 0 !important; transition: none !important; }
  .js .q-tick { background: var(--teal-deep) !important; }

  /* continuity: both rosters render complete */
  .js .cont-person {
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
  }
  .js .cont-break { opacity: 1 !important; transition: none !important; }
}


/* ===================================================================
   9 · OBJECTIONS — copy and call to action left, answers right
   =================================================================== */

.qa-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.3fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  max-width: 1120px;
  margin: 0 auto;
}

.qa-aside { position: sticky; top: calc(var(--nav-h) + 28px); }

.qa-aside .section-title {
  margin: 0;
  text-align: left;
}

.qa-sub {
  margin: clamp(16px, 1.8vw, 24px) 0 0;
  font-size: var(--body-size);
  line-height: var(--body-leading);
  color: var(--n-700);
}

.qa-aside .hero-cta { margin-top: clamp(24px, 2.6vw, 34px); }

.qa-note {
  margin: 16px 0 0;
  font-size: var(--body-sm);
  line-height: 1.5;
  color: var(--n-500);
}

.qa-grid .faq-list {
  margin: 0;
  max-width: none;
}

@media (max-width: 900px) {
  .qa-grid { grid-template-columns: 1fr; gap: 30px; }
  .qa-aside { position: static; text-align: center; }
  .qa-aside .section-title { text-align: center; }
  .qa-sub { text-align: center; }
  .qa-note { text-align: center; }
}


/* ===================================================================
   HERO GLOW — the cream bloom follows the pointer.
   hero.css paints a fixed cream corner inside .hero-field; that stop is
   dropped here so the moving layer is the only warm light in the field.
   =================================================================== */

.hero-field {
  background:
    radial-gradient(90% 70% at 4% 34%, #CDF3E8 0%, rgba(205, 243, 232, 0) 68%),
    linear-gradient(105deg, var(--field-mint) 0%, #E3FAF0 32%, #F7FCEE 62%, var(--field-cream) 100%);
}

.hero-glow {
  position: absolute;
  inset: 0;                    /* matches the hero exactly, so the pointer
                                  percentages land where the pointer is */
  pointer-events: none;
  background: radial-gradient(
    42% 48% at var(--mx, 92%) var(--my, 8%),
    rgba(255, 249, 205, .95) 0%,
    rgba(255, 250, 214, .78) 24%,
    rgba(255, 252, 230, .40) 46%,
    rgba(255, 252, 230, 0) 72%);
  will-change: background;
}

/* hero.css paints a static cream blob here. The moving light replaces it,
   so two warm sources do not fight each other. */
.aurora.ha-3 { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .hero-glow {
    background: radial-gradient(42% 48% at 92% 8%,
      rgba(255, 249, 205, .95) 0%, rgba(255, 250, 214, .78) 24%,
      rgba(255, 252, 230, .40) 46%, rgba(255, 252, 230, 0) 72%);
  }
  .aurora.ha-3 { opacity: 1; }
}


/* ===================================================================
   GETTING STARTED — four tiles, one row. Headings only, so the section
   reads as a short path rather than a contract.
   =================================================================== */

.steps-grid {
  max-width: 1120px;
  margin: clamp(30px, 3.4vw, 48px) auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.step-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 1.5vw, 20px);
  padding: clamp(22px, 2.3vw, 30px);
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: 16px;
  box-shadow: 0 3px 8px -6px rgba(20, 40, 60, .5);
  transition: transform .25s var(--ease-out), border-color var(--t-micro) ease, box-shadow .25s ease;
}
.step-tile:hover {
  transform: translateY(-4px);
  border-color: var(--blue-deep);
  box-shadow: var(--card-shadow-up);
}

.step-tile h3 {
  margin: 0;
  font-size: clamp(15px, 1.32vw, 18px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--n-900);
}

@media (max-width: 900px) {
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .steps-grid { grid-template-columns: 1fr; gap: 12px; }
  .step-tile { flex-direction: row; align-items: center; gap: 16px; }
}


/* ===================================================================
   DOOR CARDS — the two cards stretch to equal height, so margin-top:auto
   on the button collapses to nothing in whichever card has more copy.
   These give every card the same internal rhythm regardless of length.
   =================================================================== */

.door > p:last-of-type { margin-bottom: clamp(24px, 2.6vw, 34px); }

/* the diagrams differ in node count; a shared floor keeps the body copy
   in both cards starting on the same line */
.minidiag { min-height: 84px; align-content: flex-start; }

.door-for { max-width: 30ch; }


/* ===================================================================
   DECK SIZE — one size for every line that sits directly under a
   heading, whether it is marked up as .hero-sub, .section-sub,
   .section-copy or .qa-sub. Weight is left alone: the decks stay at 500,
   running body paragraphs stay at 400.
   =================================================================== */

.hero-sub--tight,
.section-sub,
.section-sub.sub-narrow,
.section-copy,
.qa-sub {
  font-size: clamp(15.5px, 1.3vw, 18px);
  line-height: 1.55;
}


/* ===================================================================
   LOGO — new wordmark, with a sheen that sweeps across the letterforms.
   The highlight is masked by the logo's own alpha channel, so it is
   confined to the strokes instead of washing over a rectangle.

   The sweep animates `transform`, which the compositor owns, rather than
   `background-position`, which it does not. The first version animated
   background-position on an element sitting inside .navbar — and .navbar
   carries backdrop-filter: blur(12px). A paint-property animation running
   forever inside a backdrop-filtered box forces that blur to re-render
   every frame, which is what made the bar shimmer. Hence the extra span:
   a pseudo-element cannot hold both the mask and a separately moving
   highlight, so the mask lives on .logo-sheen and the highlight is its
   ::after, free to translate underneath it.
   =================================================================== */

.logo,
.footer-logo {
  position: relative;
  display: block;
  line-height: 0;              /* the anchor hugs the image, so inset:0
                                  on the sheen lines up with the artwork */
  isolation: isolate;
}

.logo-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;

  -webkit-mask: url("../assets/images/inkwell_wordmark_mask.png") center / contain no-repeat;
          mask: url("../assets/images/inkwell_wordmark_mask.png") center / contain no-repeat;
}

/* the highlight itself: parked off the left edge, swept across, parked
   again. 60% of the mark wide, so it reads as a band rather than a wash. */
.logo-sheen::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 60%;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0)     0%,
    rgba(255, 255, 255, .45)  22%,
    rgba(255, 255, 255, .88)  50%,
    rgba(255, 255, 255, .45)  78%,
    rgba(255, 255, 255, 0)   100%);

  /* travel = the mark's width plus its own, expressed against its own
     width: (100% + 60%) / 60% = 267% */
  animation: logoSheen 6.5s ease-in-out infinite;
}

/* mostly at rest: the sweep occupies roughly a second of each cycle */
@keyframes logoSheen {
  0%, 64%   { transform: translate3d(0, 0, 0); }
  90%, 100% { transform: translate3d(267%, 0, 0); }
}

/* a sweep on demand when someone points at it */
.logo:hover .logo-sheen::after,
.footer-logo:hover .logo-sheen::after { animation-duration: 1.4s; }

@media (prefers-reduced-motion: reduce) {
  .logo-sheen::after { animation: none; transform: translate3d(0, 0, 0); }
}

/* The new mark is a two-line stack where the old one was a single script
   line, so the same height renders it about 40% smaller to the eye.
   hero.js remeasures --logo-shift from the live layout, so the centred
   pre-scroll position still lands correctly. */
:root { --logo-h: clamp(34px, 3.1vw, 44px); }

/* Before the first scroll the mark sits alone over the hero with plenty of
   room, so it runs large; once the bar collapses into its pill it drops
   back to a size that fits.

   Deliberately not transitioned. hero.js watches .logo with a
   ResizeObserver to keep --logo-shift honest, so animating the height
   made the observer fire every frame, and each call rewrote --logo-shift
   — which .logo itself transitions over .5s. Retargeting a half-second
   eased transition twenty times a second is what made the mark judder on
   the way back up. Snapping the height means the observer fires once and
   the glide back to centre stays smooth. */
html:not(.nav-scrolled) .logo img { height: clamp(60px, 5.9vw, 84px); }

/* the enlarged mark is taller than the bar it floats in, so the hero copy
   needs a little more air beneath it. Constant, not state-dependent, so
   nothing shifts when the bar collapses on first scroll. */
.hero-content { padding-top: clamp(18px, 2.6vw, 40px); }