*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 48px;
  --s-6: 64px;
  --s-7: 80px;
  --s-8: 104px;
  --s-9: 120px;
  --ink: #131833;
  --slate: #1D2449;
  --stone: #4B5563;
  --steel: #6B7280;
  --mist: #9CA3AF;
  /* 70-20-10: light grounds / blue / gold. Blues are dark enough for text on white. */
  --blue: #256F9E;
  --blue-mid: #2F80B3;
  --cloud: #E5E7EB;
  --snow: #F5F5F5;
  --white: #FAFAFA;
  --accent: #E6A94F;
  --accent-light: #CFE4F3;
  --accent-dark: #2F80B3;   /* darker sky blue; AA on white */
  --accent-wash: #EEF6FC;
  --serif: 'DM Serif Display', Georgia, serif;
  --sans: 'DM Sans', -apple-system, sans-serif;
  --heading: 'Montserrat', -apple-system, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s ease; }
.fade-in.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-in { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }}

/* NAV */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 20px 40px;
  display: flex; justify-content: space-between; align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, padding 0.3s ease, background-color 0.3s ease;
}
/* At rest the bar sits on the page itself, so no section can seam against it.
   The frosted panel appears only once content is moving underneath. */
nav.scrolled, nav.menu-open {
  background: rgba(250, 252, 254, 0.92);
  backdrop-filter: blur(20px);
}
nav.scrolled { border-bottom-color: var(--cloud); padding: 14px 40px; }
.nav-left { display: flex; align-items: center; gap: 14px; }
.nav-mark {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 5px;
  background: var(--ink); color: #fff;
  font-family: var(--serif); font-weight: 400; font-size: 1.1rem;
  letter-spacing: -0.02em;
}
.nav-mark span { color: #5FAEDB; }
.nav-name {
  font-family: var(--serif); font-size: 1.45rem; font-weight: 400;
  color: var(--ink); text-decoration: none; letter-spacing: 0;
}
.nav-links { display: flex; gap: 34px; align-items: center; }
/* The links sit between two boxed elements. Give the group its own air so
   it does not read as wedged between the dropdown and the button. */
.nav-menu + .nav-cta { margin-left: 12px; }
.nav-links a {
  font-size: 0.8rem; font-weight: 500; color: var(--stone);
  text-decoration: none; text-transform: uppercase;
  letter-spacing: 0.08em; transition: color 0.2s;
}
.nav-links a:hover { color: var(--ink); }
.nav-cta {
  background: var(--accent) !important; color: var(--ink) !important;
  padding: 10px 22px !important; border-radius: 4px;
  font-weight: 700 !important; transition: background 0.2s, color 0.2s !important;
}
/* Industry switch hides with [hidden]; component display rules must not undo it */
[hidden] { display: none !important; }
/* Grey-on-white read as a caption, so visitors outside MH & RV never found the
   other pages. No box and no fill: same restraint as the nav links, but the
   heaviest text in the row, marked by the gold rule the rest of the site uses
   for anything actionable. */
.nav-ind {
  font: inherit; font-size: 0.8rem; font-weight: 700; color: var(--ink);
  text-transform: uppercase; letter-spacing: 0.08em;
  background: transparent; border: 0; border-bottom: 2px solid var(--accent); border-radius: 0;
  padding: 0 2px 2px 0; height: 40px; cursor: pointer; margin-right: 12px;
  transition: color 0.2s, border-color 0.2s;
  field-sizing: content; /* width follows the chosen option, not the longest one */
}
.nav-ind:hover, .nav-ind:focus { color: var(--blue); border-bottom-color: var(--blue); }
/* Full model, folded: underwriters open it, everyone else reads past */
.sens-more { margin-top: 72px; }
.sens-more > summary {
  cursor: pointer; font-weight: 600; color: var(--ink); list-style: none;
  font-size: 0.95rem; text-decoration: underline; text-underline-offset: 4px;
}
.sens-more > summary::-webkit-details-marker { display: none; }
.sens-more .sens { margin-top: 28px; }
.cta-short { display: none; }
/* Nav never wraps: every item stays on one line and shares one baseline */
.nav-name, .nav-links a, .nav-ind { white-space: nowrap; }
/* Menu links sit in the nav row on desktop, in the burger panel on small screens */
.nav-menu { display: contents; }
.nav-burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 0 10px; cursor: pointer;
  background: transparent; border: 1px solid var(--cloud); border-radius: 4px;
}
.nav-burger span {
  display: block; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-burger:hover { border-color: var(--stone); }
@media (max-width: 960px) {
  .nav-links { gap: 16px; }
  .cta-long { display: none; }
  .cta-short { display: inline; }
  .nav-burger { display: flex; }
  .nav-menu {
    display: none; position: absolute; top: 100%; right: 24px;
    min-width: 190px; flex-direction: column; gap: 0;
    background: var(--white); border: 1px solid var(--cloud); border-radius: 6px;
    box-shadow: 0 12px 32px rgba(19, 24, 51, 0.12); padding: 6px 0;
  }
  nav.menu-open .nav-menu { display: flex; }
  .nav-menu a { padding: 13px 20px; }
  .nav-menu a:hover { background: var(--mist, #F2F6FA); }
  /* open state: top and bottom bars cross, middle bar goes */
  nav.menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  nav.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
  nav.menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
/* Hero "See assumptions" lands here, clear of the fixed nav */
#calc { scroll-margin-top: 96px; }
.hero-basis a.chip { text-decoration: none; }
.nav-cta:hover { background: var(--accent-dark) !important; color: var(--white) !important; }

/* BUTTONS */
.btn-primary {
  display: inline-block; background: var(--accent); color: var(--ink);
  padding: 15px 32px; font-family: var(--sans); font-size: 0.85rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  text-decoration: none; border-radius: 4px; border: 1px solid var(--accent);
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--white); transform: translateY(-1px); }
.btn-secondary {
  display: inline-block; background: transparent; color: var(--ink);
  padding: 15px 32px; font-family: var(--sans); font-size: 0.85rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  text-decoration: none; border: 1px solid var(--ink); border-radius: 4px;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.btn-secondary:hover { background: var(--ink); color: var(--white); transform: translateY(-1px); }

/* SECTION COMMON */
section { padding: 88px 0; }
section[id] { scroll-margin-top: 86px; }
.section-tag {
  display: inline-block; font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--blue); margin-bottom: 18px;
}
.section-title {
  font-family: var(--heading); font-size: 2.7rem; line-height: 1.12; font-weight: 800;
  letter-spacing: -0.02em; color: var(--ink); margin-bottom: 20px;
}
.section-subtitle {
  font-size: 1.08rem; color: var(--steel); max-width: 620px; line-height: 1.7;
}

.section-title::after {
  content: ''; display: block; width: 44px; height: 4px;
  background: var(--accent); margin-top: 18px;
}
.thesis h2::after {
  content: ''; display: block; width: 44px; height: 4px;
  background: var(--accent); margin-top: 18px;
}
/* HERO */
.hero {
  min-height: 100vh; display: flex; align-items: center;
  padding-top: 118px; padding-bottom: 60px; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #E6F2FA 0%, #F1F8FC 70%, var(--white) 100%);
}
.hero::before {
  content: ''; position: absolute; top: -20%; right: -10%;
  width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(95, 174, 219, 0.22) 0%, transparent 70%);
  pointer-events: none;
}
.hero-content { max-width: 780px; margin-bottom: 64px; }
/* Hero with the funnel: text left, figure right; one column on narrow screens */
.hero-grid:has(> .hero-funnel:not([hidden])) {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
  gap: 56px; margin-bottom: 64px;
  /* tops aligned: the figure starts level with the "$60K" line beside it */
  align-items: start;
}
.hero-grid:has(> .hero-funnel:not([hidden])) .hero-content { margin-bottom: 0; }
/* Hero follows the shared section rule below: headline centred across the full
   width, copy and figure in two columns under it, buttons centred below. */
.hero-head { max-width: 52rem; margin-bottom: 38px; }
.hero-head h1 { margin-bottom: 0; }
/* Hero with no visual (the funnel figure is data-ind="re" only, deleted at
   build time for every other audience): one centred column, not a dead
   empty right half. See assets/hero/README.md for the planned per-audience
   visuals that will switch a page back to the two-column layout above. */
.hero-grid:not(:has(> .hero-funnel:not([hidden]))) {
  display: grid; grid-template-columns: 1fr; margin-bottom: 64px;
}
.hero-grid:not(:has(> .hero-funnel:not([hidden]))) .hero-content {
  max-width: 40rem; margin: 0 auto; margin-bottom: 0; text-align: center;
}
.hero-grid:not(:has(> .hero-funnel:not([hidden]))) .hero-sub {
  margin-left: auto; margin-right: auto;
}
.hero-funnel {
  margin: 0; justify-self: center; width: 100%; max-width: 500px;
  background: rgba(255, 255, 255, 0.78); border: 1px solid var(--accent-light);
  border-radius: 14px; padding: 28px 26px 22px;
  box-shadow: 0 18px 40px -28px rgba(19, 24, 51, 0.35);
}
.hero-funnel svg { display: block; width: 100%; height: auto; font-family: var(--sans); }
.hero-funnel figcaption { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--cloud); text-align: center; }
.hf-spend { font-family: var(--serif); font-size: 1.45rem; line-height: 1.25; color: var(--ink); text-wrap: balance; }
.hf-spend strong { font-weight: 400; color: var(--blue); box-shadow: inset 0 -0.32em 0 rgba(230, 169, 79, 0.45); }
.hf-note { margin-top: 8px; font-size: 0.78rem; color: var(--steel); line-height: 1.5; }
@media (max-width: 1060px) {
  .hero-grid:has(> .hero-funnel:not([hidden])) { grid-template-columns: 1fr; gap: 40px; }
  .hero-grid:has(> .hero-funnel:not([hidden])) .hero-content { margin-inline: auto; }
}
@media (max-width: 640px) {
  .hero-funnel { padding: 18px 10px 16px; }
  /* SVG text scales with the chart; bump sizes so labels stay readable at phone width */
  .hero-funnel text[font-size="12"] { font-size: 15px; }
  .hero-funnel text[font-size="11"] { font-size: 14px; }
  .hero-funnel text[font-size="10.5"] { font-size: 12.5px; }
  .hero-funnel rect[fill="#E6A94F"] { x: 424px; width: 68px; height: 20px; }
}
.hero-tag {
  display: inline-block; font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.15em; color: var(--blue);
  border: 1px solid var(--blue-mid); padding: 6px 16px; border-radius: 2px; margin-bottom: 26px;
}
.hero h1 {
  font-family: var(--serif); font-size: 3.7rem; line-height: 1.13;
  letter-spacing: -0.01em; color: var(--ink); margin-bottom: 26px;
}
.hero h1 em { font-style: italic; color: var(--blue-mid); }
.hero-sub {
  font-size: 1.16rem; line-height: 1.78; color: var(--steel);
  max-width: 660px; margin-bottom: 38px;
}
.hero-sub strong { color: var(--stone); font-weight: 600; }
.hero-sub a {
  color: var(--stone); text-decoration: underline;
  text-decoration-color: var(--accent); text-decoration-thickness: 2px;
  text-underline-offset: 3px; transition: color 0.2s, text-decoration-color 0.2s;
}
.hero-sub a:hover { color: var(--ink); text-decoration-color: var(--accent-dark); }
/* Buttons sit centred under the hero columns, not inside one */
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 40px; }

/* Basis line under the headline: states the cap the number rests on */
/* Label sits above so the number and its assumptions never split across lines. */
.hero-basis {
  font-size: 1.05rem; color: var(--steel); margin-bottom: 26px;
}
.hb-lead {
  display: block; font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--stone); margin-bottom: 6px;
}
.hb-val { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; }
.hb-val strong { white-space: nowrap; }
.hero-basis .chip { flex-shrink: 0; }
.hero-basis strong {
  color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.hero-basis .eq-cap {
  font-family: var(--heading); font-weight: 800; color: var(--ink);
}
/* Small inline chip, sits right beside the cap rate it edits */
.chip {
  background: var(--white); border: 1px solid var(--cloud); border-radius: 20px;
  padding: 5px 13px; cursor: pointer; font-family: var(--sans);
  font-size: 0.72rem; font-weight: 600; color: var(--stone);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.chip:hover { border-color: var(--ink); color: var(--ink); background: var(--snow); }
.chip:focus-visible { outline: 2px solid var(--blue-mid); outline-offset: 2px; }

input[type=range] { display: block; width: 100%; }

/* Track is 4px but the control is 28px tall, so the thumb is grabbable on touch */
input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 28px; background: transparent;
  outline: none; cursor: pointer; touch-action: pan-y;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px; background: var(--cloud);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%; margin-top: -9px;
  background: var(--ink); border: 3px solid var(--accent); cursor: pointer;
}
input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--cloud); }
input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--accent);
  background: var(--ink); cursor: pointer;
}
input[type=range]:focus-visible { outline: 2px solid var(--blue-mid); outline-offset: 2px; border-radius: 4px; }

.proof-frame {
  max-width: 660px; margin: 22px auto 0; text-align: center;
  font-size: 0.95rem; line-height: 1.7; color: var(--stone);
}
@media (max-width: 700px) { .proof-frame { text-align: left; font-size: 0.9rem; } }
.hero-proof {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--cloud); border-radius: 6px; overflow: hidden;
  /* The gold rule is the block's own edge, so it needs air above it or the
     buttons read as sitting on top of it. Matches the gap above the buttons. */
  margin-top: 44px; border-top: 3px solid var(--accent);
}
.proof-card { background: var(--snow); padding: 24px 20px; text-align: center; }
.proof-number {
  font-variant-numeric: tabular-nums;
  font-family: var(--heading); font-size: 1.95rem; font-weight: 900;
  color: var(--ink); line-height: 1; margin-bottom: 7px;
}
.proof-label {
  font-size: 0.8rem; font-weight: 500; color: var(--steel);
  line-height: 1.45; text-wrap: balance; max-width: 22ch; margin: 0 auto;
}
.hero-proof.visible .proof-card { animation: rise 0.6s ease both; }
.hero-proof.visible .proof-card:nth-child(1) { animation-delay: 0ms; }
.hero-proof.visible .proof-card:nth-child(2) { animation-delay: 90ms; }
.hero-proof.visible .proof-card:nth-child(3) { animation-delay: 180ms; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; }}

/* THESIS (single dark anchor band) */
.thesis {
  padding: 88px 0; background: var(--snow); color: var(--ink);
  position: relative; overflow: hidden;
}
.thesis::after {
  content: ''; position: absolute; bottom: -40%; right: -10%;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(95, 174, 219, 0.10) 0%, transparent 70%);
  pointer-events: none;
}
.thesis-inner { max-width: 840px; position: relative; z-index: 1; }
.thesis h2 {
  font-family: var(--heading); font-size: 2.5rem; line-height: 1.16; font-weight: 800;
  letter-spacing: -0.02em; color: var(--ink); margin-bottom: 30px;
}
.thesis p { font-size: 1.08rem; line-height: 1.8; color: var(--stone); margin-bottom: 20px; }
.thesis p strong { color: var(--ink); font-weight: 600; }
/* SCORECARD: six questions as one list, answered in place */
.sc-hint { font-size: 0.95rem; color: var(--stone); margin: 28px 0 16px !important; }
.sc-hint strong { color: var(--ink); font-weight: 600; }

.sc-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1px; background: var(--cloud);
  border: 1px solid var(--cloud); border-radius: 6px; overflow: hidden;
}
.sc-row {
  display: grid; grid-template-columns: 42px 1fr 168px; align-items: center; gap: 18px;
  background: var(--white); padding: 18px 24px;
  transition: background 0.2s ease;
}
.sc-row:hover { background: var(--accent-wash); }
.sc-n {
  font-family: var(--heading); font-size: 0.82rem; font-weight: 900;
  color: var(--mist); letter-spacing: 0.02em;
}
.sc-row.answered .sc-n { color: var(--blue); }
.sc-q h3 {
  font-family: var(--heading); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--blue); margin-bottom: 5px;
}
.sc-q p { font-size: 0.97rem; line-height: 1.5; color: var(--ink); margin: 0; }

.sc-ans { display: flex; gap: 8px; }
.sc-btn {
  flex: 1; padding: 10px 0; cursor: pointer;
  background: var(--white); border: 1px solid var(--cloud); border-radius: 4px;
  font-family: var(--sans); font-size: 0.74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--steel);
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.sc-btn:hover { border-color: var(--stone); color: var(--ink); }
.sc-btn:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
/* Selected. A gap named is not a win, so only the answer that means
   "I have this" takes the gold; the other settles into grey. */
.sc-btn.on { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.sc-btn[data-v="0"].on { background: var(--cloud); border-color: var(--mist); color: var(--stone); }

@media (max-width: 700px) {
  .sc-row { grid-template-columns: 34px 1fr; gap: 10px 14px; padding: 18px 20px; }
  .sc-ans { grid-column: 2 / -1; margin-top: 4px; }
}

.sc-go {
  display: block; width: 100%; margin-top: 20px; padding: 17px 24px;
  background: var(--accent); border: 1px solid var(--accent); border-radius: 5px;
  font-family: var(--sans); font-size: 0.85rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink);
  cursor: pointer; transition: background 0.2s, opacity 0.2s;
}
.sc-go:hover:not(:disabled) { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--white); }
.sc-go:disabled {
  background: transparent; color: var(--mist);
  border-color: var(--cloud); cursor: not-allowed;
}

.sc-go[hidden] { display: none; }
.sc-go ~ p { margin-top: 28px; }

.sc-result {
  margin-top: 20px; padding: 32px 34px;
  background: var(--accent-wash); border: 1px solid var(--accent-light); border-radius: 8px;
  animation: scIn 0.4s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
.sc-result[hidden] { display: none; }
@keyframes scIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.sc-head { display: flex; align-items: center; gap: 26px; margin-bottom: 20px; }
.sc-score {
  flex-shrink: 0; font-family: var(--heading); font-size: 3.4rem; font-weight: 900;
  color: var(--blue); line-height: 0.9; letter-spacing: -0.03em;
}
.sc-score small { font-size: 1.4rem; color: var(--mist); font-weight: 700; }
.sc-verdict { flex: 1; min-width: 0; }
.sc-verdict .sc-band {
  font-family: var(--heading); font-size: 1.35rem; font-weight: 800;
  color: var(--ink); letter-spacing: -0.01em; margin-bottom: 12px;
}
.sc-bar { display: flex; gap: 4px; }
.sc-bar i { flex: 1; height: 6px; border-radius: 3px; background: var(--cloud); }
.sc-bar i.hit { background: var(--accent); }
.sc-result p { font-size: 1rem; line-height: 1.75; color: var(--stone); margin-bottom: 14px !important; }
.sc-tie { color: var(--ink) !important; font-weight: 600; }

.sc-cta { margin-top: 8px; }
@media (max-width: 640px) {
  .sc-result { padding: 26px 22px; }
  .sc-head { gap: 18px; }
  .sc-score { font-size: 2.6rem; }
  .sc-verdict .sc-band { font-size: 1.15rem; }
}

/* MATH / CALCULATOR */
.math { background: var(--snow); padding: 0 0 116px; }
.math-header { max-width: 660px; margin-bottom: 52px; }
.math-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: start; }
.math-col { align-self: stretch; }
.math-equation {
  background: var(--accent-wash); border: 1px solid var(--accent-light);
  border-radius: 8px; padding: 32px;
  position: sticky; top: 96px;
}
.eq-line {
  font-family: var(--heading); font-size: 1rem; font-weight: 700;
  color: var(--ink); line-height: 1.55; margin-bottom: 6px;
}
.eq-line span { color: var(--accent-dark); }
/* The result of each formula, so the eye lands on the output not the operators */
.eq-out { color: var(--blue); font-weight: 800; }
.math-aside { padding: 26px 4px 0; }
.math-aside p { font-size: 0.95rem; color: var(--stone); line-height: 1.75; }
.math-aside p + p { margin-top: 14px; }
.math-aside strong { color: var(--ink); font-weight: 600; }

.calc {
  background: var(--snow); border: 1px solid var(--cloud);
  border-radius: 8px; padding: 30px 30px 26px; border-top: 3px solid var(--accent);
}
.calc-title {
  font-family: var(--heading); font-size: 1.05rem; font-weight: 800;
  color: var(--ink); margin-bottom: 4px; letter-spacing: -0.01em;
}
.calc-note { font-size: 0.82rem; color: var(--steel); margin-bottom: 26px; line-height: 1.55; }
.calc-field { margin-bottom: 24px; }
.calc-field label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: 0.8rem; font-weight: 600;
  color: var(--stone); margin-bottom: 10px;
}
.calc-value { font-family: var(--heading); font-size: 0.95rem; font-weight: 800; color: var(--ink); letter-spacing: 0; }
.calc-hint { font-size: 0.72rem; font-weight: 400; color: var(--mist); }

.calc-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.calc-preset {
  font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--stone);
  background: var(--white); border: 1px solid var(--cloud); border-radius: 999px;
  padding: 6px 13px; cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.calc-preset:hover, .calc-preset:focus-visible { border-color: var(--accent-dark); color: var(--ink); background: var(--accent-wash); }
.calc-input {
  display: flex; align-items: center; gap: 0;
  border: 1px solid var(--cloud); border-radius: 5px; background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.calc-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(230,169,79,0.18); }
.calc-input .pre, .calc-input .post {
  font-family: var(--heading); font-size: 0.9rem; font-weight: 700;
  color: var(--steel); padding: 0 14px; flex-shrink: 0;
}
.calc-input .post { font-family: var(--sans); font-weight: 400; font-size: 0.8rem; }
.calc-input input[type=number] {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  font-family: var(--heading); font-size: 1.15rem; font-weight: 800; color: var(--ink);
  padding: 13px 14px; -moz-appearance: textfield;
}
.calc-input .pre + input[type=number] { padding-left: 0; }
.calc-input input[type=number]::-webkit-outer-spin-button,
.calc-input input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-field input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 2px;
  background: var(--cloud); outline: none; cursor: pointer;
}
.calc-field input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--accent); cursor: pointer;
}
.calc-field input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--accent);
  background: var(--ink); cursor: pointer;
}
.calc-field input[type=range]:focus-visible { outline: 2px solid var(--blue-mid); outline-offset: 4px; }
.calc-out {
  margin-top: 28px; border: 1px solid var(--accent-light); border-radius: 8px;
  background: var(--accent-wash); overflow: hidden;
}
.calc-out-item + .calc-out-item { border-top: 1px solid var(--accent-light); }
.calc-out-item {
  padding: 18px 22px;
}
.calc-out-item:first-child { background: var(--white); }
.calc-out-item .calc-out-label {
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--steel); margin-bottom: 6px;
}
.calc-out-item .calc-out-num {
  font-family: var(--heading); font-size: 1.7rem; font-weight: 900;
  color: var(--ink); line-height: 1.1;
}
.calc-out-item.hero-out .calc-out-label { color: var(--blue); }
.calc-out-item.hero-out .calc-out-num { color: var(--blue); font-size: 2.6rem; letter-spacing: -0.02em; }
.calc-bridge {
  margin-top: 24px; padding: 18px 20px; background: var(--accent-wash);
  border: 1px solid var(--accent-light); border-radius: 6px;
  font-size: 0.88rem; color: var(--stone); line-height: 1.65;
}
.calc-bridge strong { color: var(--ink); font-weight: 600; }
.calc-cta { display: block; width: 100%; text-align: center; margin-top: 18px; }
.calc-disclaimer { font-size: 0.72rem; color: var(--mist); margin-top: 18px; line-height: 1.55; }

/* FAQ */
/* Standalone pages open straight into a section, with no hero behind the fixed
   nav. Give the first one the hero's top band so the bar sits on colour rather
   than on a seam, and clear the nav height. Only the tint layers, so each
   section keeps its own background. */
main > section:first-child:not(.hero) {
  padding-top: 132px;
  background-image: linear-gradient(180deg, #E6F2FA 0%, rgba(230, 242, 250, 0) 100%);
  background-repeat: no-repeat;
  background-size: 100% 260px;
}
@media (max-width: 640px) {
  main > section:first-child:not(.hero) { padding-top: 112px; }
}
.faq { padding: 104px 0; background: var(--white); }
.faq-header { margin-bottom: 44px; }
.faq-list { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--cloud); }
.faq-item { border-bottom: 1px solid var(--cloud); }
.faq-item summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 22px 48px 22px 0;
  font-family: var(--heading); font-weight: 600; font-size: 1.02rem;
  line-height: 1.45; color: var(--ink); text-wrap: balance;
  transition: color .15s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent-dark); }
.faq-item summary:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 3px; border-radius: 3px; }
/* One mark, rotated when open: plus becomes minus */
.faq-item summary::after {
  content: ''; position: absolute; right: 8px; top: 50%; width: 13px; height: 13px;
  margin-top: -6.5px;
  background:
    linear-gradient(var(--accent-dark), var(--accent-dark)) center/13px 2px no-repeat,
    linear-gradient(var(--accent-dark), var(--accent-dark)) center/2px 13px no-repeat;
  transition: background-size .18s ease;
}
.faq-item[open] summary { color: var(--accent-dark); }
/* The plus loses its upright stroke: a minus, not a second icon */
.faq-item[open] summary::after { background-size: 13px 2px, 0 0; }
.faq-item > div {
  padding: 0 48px 26px 0; color: var(--stone);
  font-size: 1rem; line-height: 1.7; max-width: 64ch; text-wrap: pretty;
}
.faq-item > div strong { color: var(--ink); font-weight: 600; }
@media (max-width: 700px) {
  .faq { padding: 72px 0; }
  .faq-item summary { padding: 18px 36px 18px 0; font-size: 0.97rem; }
  .faq-item > div { padding: 0 8px 22px 0; }
}

/* Headings break symmetrically; paragraphs do not strand a last word */
h1, h2, h3, .section-title { text-wrap: balance; }
p { text-wrap: pretty; }


/* SENSITIVITY + CHART */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sens { margin-top: 72px; }
.sens-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 32px;
  margin-bottom: 32px;
}
.sens-head h3 {
  font-family: var(--heading); font-size: 1.45rem; font-weight: 800;
  color: var(--ink); letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 14px;
  max-width: 720px;
}
.sens-head p { font-size: 1rem; color: var(--steel); line-height: 1.75; max-width: 720px; }
.sens-head p em { color: var(--ink); font-style: normal; font-weight: 600; }

/* Opener sits beside the headline number in the calculator */
.calc-out-item.hero-out { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.mx-open {
  flex-shrink: 0; background: var(--white); border: 1px solid var(--ink);
  border-radius: 4px; padding: 10px 16px; cursor: pointer;
  font-family: var(--sans); font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink);
  transition: background 0.2s, color 0.2s;
}
.mx-open:hover { background: var(--ink); color: var(--white); }
.mx-open[aria-expanded="true"] { background: var(--ink); color: var(--white); }

/* Modal: the grid pops out over the page, no scrollbars, click anywhere out to dismiss */
.mx-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 28px;
  background: rgba(19, 24, 51, 0.55);
  backdrop-filter: blur(3px);
  animation: mxFade 0.18s ease both;
}
.mx-overlay[hidden] { display: none; }
@keyframes mxFade { from { opacity: 0; } to { opacity: 1; }}

.matrix-fig {
  background: var(--white); border-radius: 10px;
  padding: 30px 32px 26px; width: 100%; max-width: 1080px;
  max-height: calc(100vh - 56px); overflow-y: auto;
  box-shadow: 0 30px 80px rgba(19, 24, 51, 0.35);
  animation: mxPop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
@keyframes mxPop { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; }}

.mx-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.matrix-fig figcaption {
  font-family: var(--heading); font-size: 1.15rem; font-weight: 800;
  color: var(--ink); margin-bottom: 4px; letter-spacing: -0.01em;
}
.mx-close {
  flex-shrink: 0; margin-left: auto; background: transparent; border: 1px solid var(--cloud);
  border-radius: 5px; width: 38px; height: 38px; cursor: pointer;
  font-size: 1.4rem; line-height: 1; color: var(--steel);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.mx-close:hover { border-color: var(--ink); color: var(--ink); background: var(--snow); }
.chart-desc { font-size: 0.84rem; color: var(--steel); margin-bottom: 20px; line-height: 1.6; }
.chart-desc strong { color: var(--ink); font-weight: 600; }

/* Assumption controls, same state as the calculator */
.mx-assume {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  padding: 18px; background: var(--snow); border: 1px solid var(--cloud);
  border-radius: 6px; margin-bottom: 16px;
}
.mx-f label {
  display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--steel); margin-bottom: 7px;
}
.mx-f > input, .mx-affix {
  display: flex; align-items: center; width: 100%;
  border: 1px solid var(--cloud); border-radius: 5px; background: var(--white);
}
.mx-affix:focus-within, .mx-f > input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(230,169,79,0.18); outline: none; }
.mx-affix span { font-family: var(--heading); font-size: 0.85rem; font-weight: 700; color: var(--steel); padding: 0 10px; }
.mx-f input {
  font-family: var(--heading); font-size: 1rem; font-weight: 800; color: var(--ink);
  padding: 10px 12px; -moz-appearance: textfield; min-width: 0;
}
.mx-affix input { border: none; box-shadow: none; background: transparent; }
.mx-affix input:focus { outline: none; box-shadow: none; }
.mx-affix span + input { padding-left: 0; }
.mx-f input::-webkit-outer-spin-button, .mx-f input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Gross to net, stated before the grid capitalizes it */
.gn {
  display: flex; align-items: stretch; gap: 12px; margin-bottom: 18px;
  padding: 18px 20px; background: var(--accent-wash);
  border: 1px solid var(--accent-light); border-radius: 6px;
}
.gn-item { flex: 1; min-width: 0; }
.gn-k {
  display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--steel); margin-bottom: 5px;
}
.gn-v { display: block; font-family: var(--heading); font-size: 1.3rem; font-weight: 900; color: var(--ink); line-height: 1.1; }
.gn-edit {
  display: inline-flex; align-items: baseline;
  border-bottom: 2px dashed var(--accent-dark); transition: border-color 0.2s;
}
.gn-edit:focus-within { border-bottom-style: solid; border-color: var(--accent); }
.gn-edit > span {
  font-family: var(--heading); font-size: 1.3rem; font-weight: 900;
  color: var(--ink); line-height: 1.1;
}
.gn-edit input {
  width: 7ch; border: none; background: transparent; padding: 0 0 2px 1px;
  font-family: var(--heading); font-size: 1.3rem; font-weight: 900;
  color: var(--ink); line-height: 1.1;
}
.gn-edit input:focus { outline: none; }
.gn-item.is-net .gn-v { color: var(--blue); }
.gn-note { display: block; font-size: 0.72rem; color: var(--steel); margin-top: 4px; line-height: 1.4; }
.gn-op {
  display: flex; align-items: center; font-family: var(--heading);
  font-size: 1.15rem; font-weight: 700; color: var(--accent-dark); flex-shrink: 0;
}

/* Grid is sized to fit: no scrollbars, every cell on screen */
.matrix {
  border-collapse: separate; border-spacing: 0; width: 100%;
  font-variant-numeric: tabular-nums; table-layout: fixed;
}
.matrix th, .matrix td {
  padding: 12px 10px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--cloud); border-right: 1px solid var(--cloud);
}
.matrix thead th {
  font-family: var(--heading); font-size: 0.8rem; font-weight: 800;
  color: var(--white); background: var(--ink); border-top: 1px solid var(--ink);
  border-right-color: rgba(255,255,255,0.1); border-bottom: 2px solid var(--accent);
}
.matrix thead th:first-child { border-left: 1px solid var(--ink); border-radius: 6px 0 0 0; }
.matrix thead th:last-child { border-radius: 0 6px 0 0; }
.matrix tbody th {
  font-family: var(--heading); font-size: 0.8rem; font-weight: 800;
  color: var(--ink); background: var(--snow); text-align: left;
  border-left: 1px solid var(--cloud);
}
.matrix tbody tr:last-child th { border-radius: 0 0 0 6px; }
.matrix tbody tr:last-child td:last-child { border-radius: 0 0 6px 0; }
.matrix td { font-size: 0.82rem; color: var(--stone); cursor: pointer; transition: box-shadow 0.12s ease; }
.matrix td:hover { box-shadow: inset 0 0 0 2px var(--accent-dark); }
.matrix td:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--blue-mid); }

/* The axis steps that match their own inputs */
.matrix .is-axis { color: var(--blue); }
.matrix tbody th.is-axis { background: var(--accent-wash); }
.matrix thead th.is-axis { background: var(--slate); color: var(--accent); }
.matrix tbody tr:nth-child(even) th:not(.is-axis) { background: #EEF0F3; }

/* Where they are: the one cell the grid exists to locate */
.matrix td.is-current {
  color: var(--white); font-family: var(--heading); font-weight: 900;
  font-size: 0.92rem; background: var(--blue) !important;
  box-shadow: inset 0 0 0 2px var(--ink);
  position: relative; cursor: default;
}
.matrix td.is-current::after {
  content: 'YOU'; position: absolute; top: 3px; right: 8px;
  font-family: var(--sans); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; color: var(--accent);
}

/* Three curated scenarios first, free choice second */
.mx-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.mx-preset {
  cursor: pointer; padding: 10px 16px;
  background: var(--white); border: 1px solid var(--cloud); border-radius: 5px;
  font-family: var(--heading); font-size: 0.78rem; font-weight: 800; color: var(--stone);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.mx-preset i { font-style: normal; color: var(--accent-dark); margin: 0 2px; }
.mx-preset:hover { border-color: var(--ink); color: var(--ink); }
.mx-preset:focus-visible { outline: 2px solid var(--blue-mid); outline-offset: 2px; }
.mx-preset.on { background: var(--ink); border-color: var(--ink); color: var(--white); }
.mx-preset.on i { color: var(--accent); }
.mx-custom { margin-left: auto; font-weight: 600; color: var(--steel); }
@media (max-width: 700px) { .mx-custom { margin-left: 0; } }

/* Axis picker: choose which two inputs the grid plots */
.mx-axes {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 14px 16px;
  background: var(--snow); border: 1px solid var(--cloud); border-radius: 6px;
}
.mx-axes[hidden] { display: none; }
.mx-axes-k { font-size: 0.78rem; color: var(--steel); }
.mx-sel {
  appearance: none; -webkit-appearance: none;
  font-family: var(--heading); font-size: 0.82rem; font-weight: 800; color: var(--ink);
  background: var(--white); border: 1px solid var(--cloud); border-radius: 5px;
  padding: 9px 30px 9px 12px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--steel) 50%),
                    linear-gradient(135deg, var(--steel) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.mx-sel:hover { border-color: var(--steel); }
.mx-sel:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(230,169,79,0.18); }
.mx-swap {
  width: 34px; height: 34px; flex-shrink: 0; cursor: pointer;
  background: var(--white); border: 1px solid var(--cloud); border-radius: 5px;
  font-size: 1rem; line-height: 1; color: var(--steel);
  transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.3s;
}
.mx-swap:hover { border-color: var(--ink); color: var(--ink); background: var(--snow); }
.mx-swap:active { transform: rotate(180deg); }
.mx-swap:focus-visible { outline: 2px solid var(--blue-mid); outline-offset: 2px; }
/* Names the inputs this slice is pinning, so the grid is never ambiguous */
.mx-held {
  font-size: 0.76rem; color: var(--steel); margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
.mx-held::before { content: 'Holding fixed: '; color: var(--mist); }

/* The cube: swapping an axis turns the grid to a new face. Transform and
   opacity only, so it stays on the compositor and holds up on a phone. */
.mx-stage { perspective: 1500px; }
/* Phones: the grid keeps readable columns and scrolls sideways in its own box */
@media (max-width: 700px) {
  .mx-stage { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .matrix { min-width: 600px; }
  .matrix tbody th, .matrix thead th:first-child { position: sticky; left: 0; z-index: 2; }
}
.matrix { transform-origin: 50% 50%; }
.matrix.turn-col { animation: turnCol 0.54s cubic-bezier(0.45, 0.03, 0.25, 1) both; }
.matrix.turn-row { animation: turnRow 0.54s cubic-bezier(0.45, 0.03, 0.25, 1) both; }
@keyframes turnCol {
  0%   { transform: rotateY(0deg);   opacity: 1; }
  48%  { transform: rotateY(-82deg); opacity: 0; }
  52%  { transform: rotateY(82deg);  opacity: 0; }
  100% { transform: rotateY(0deg);   opacity: 1; }
}
@keyframes turnRow {
  0%   { transform: rotateX(0deg);  opacity: 1; }
  48%  { transform: rotateX(76deg); opacity: 0; }
  52%  { transform: rotateX(-76deg);opacity: 0; }
  100% { transform: rotateX(0deg);  opacity: 1; }
}
/* Cells bloom back in a diagonal wave once the face has landed */
.matrix.settle td { animation: cellIn 0.4s cubic-bezier(0.2, 0.8, 0.3, 1) both; animation-delay: var(--d, 0ms); }
@keyframes cellIn {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .matrix.turn-col, .matrix.turn-row, .matrix.settle td { animation: none !important; }
}

/* Excel-style corner, split by a hairline diagonal */
.matrix .mx-corner {
  width: 106px; padding: 9px 11px;
  background:
    linear-gradient(to top right, transparent calc(50% - 0.5px), var(--cloud) calc(50% - 0.5px), var(--cloud) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    var(--snow);
}
.mx-corner span {
  display: block; font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.04em; color: var(--steel); line-height: 1.7; text-transform: uppercase;
}
.mx-corner span:first-child { text-align: left; }
.mx-corner span:last-child { text-align: right; }
.matrix-foot { font-size: 0.78rem; color: var(--mist); line-height: 1.6; margin-top: 18px; }

/* Comps CTA at the end of the grid */
.mx-cta {
  margin-top: 22px; padding: 26px 28px; background: var(--ink);
  border-radius: 8px; display: flex; align-items: center; gap: 28px;
  position: relative; overflow: hidden;
}
.mx-cta::after {
  content: ''; position: absolute; top: -60%; right: -5%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(95, 174, 219, 0.12) 0%, transparent 70%);
  pointer-events: none;
}
.mx-cta-copy { flex: 1; min-width: 0; position: relative; z-index: 1; }
.mx-cta h3 { font-family: var(--heading); font-size: 1.02rem; font-weight: 800; color: var(--white); margin-bottom: 7px; }
.mx-cta p { font-size: 0.87rem; color: var(--mist); line-height: 1.65; }
.mx-cta-btn { flex-shrink: 0; position: relative; z-index: 1; }

/* Booking step */
.mx-step-title {
  font-family: var(--heading); font-size: 1.45rem; font-weight: 800;
  color: var(--ink); letter-spacing: -0.02em; margin-bottom: 8px;
}
.mx-step-sub { font-size: 0.95rem; color: var(--steel); line-height: 1.65; margin-bottom: 24px; }
.ff-fine { font-size: 0.74rem; color: var(--mist); margin-top: 14px; line-height: 1.6; }
.ff-fine a { color: var(--steel); }

.mx-body { position: relative; }
.mx-view { animation: viewIn 0.3s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; }}

/* Their own numbers, read back as a brief rather than a spreadsheet. The figures
   are editable inline, so correcting one feels like fixing a sentence. */
.bk-sum {
  margin-bottom: 20px; padding: 20px 18px;
  background: var(--accent-wash); border: 1px solid var(--accent-light); border-radius: 8px;
}
.bk-sum-k {
  display: block; font-family: var(--heading); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.13em; color: var(--blue); margin-bottom: 12px;
}
/* KPI rows: name the metric, show the formula with its live inputs, then the
   result. Same shape as the equation block on the page above. */
.bk-kpi {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 20px;
  align-items: baseline; padding: 12px 0;
  border-bottom: 1px solid var(--accent-light);
}
.bk-kpi:last-of-type { border-bottom: none; padding-bottom: 4px; }
.bk-kpi-k {
  grid-column: 1 / -1;
  font-family: var(--heading); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--steel);
}
.bk-kpi-f {
  font-size: 0.95rem; color: var(--stone); line-height: 2.1;
  font-family: var(--sans);
}
.bk-kpi-f em { font-style: normal; color: var(--accent-dark); font-weight: 700; }
.bk-kpi-f i {
  font-style: normal; font-family: var(--heading); font-weight: 900;
  color: var(--ink); font-size: 0.98rem;
}
.bk-kpi-out { text-align: right; }
.bk-kpi-cap {
  display: block; font-family: var(--heading); font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.11em; color: var(--steel); margin-top: 3px;
}
.bk-kpi-v {
  display: block;
  font-family: var(--heading); font-size: 1.12rem; font-weight: 900;
  color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bk-kpi.is-hero .bk-kpi-k { color: var(--blue); }
.bk-kpi.is-hero .bk-kpi-v { color: var(--blue); font-size: 1.5rem; letter-spacing: -0.02em; }
@media (max-width: 560px) {
  .bk-kpi { grid-template-columns: 1fr; }
  .bk-kpi-out { justify-self: start; text-align: left; }
}

.bk-in {
  background: var(--white); border: 1.5px solid var(--accent-dark); border-radius: 4px;
  padding: 3px 6px 4px;
  font-family: var(--heading); font-size: 1.02rem; font-weight: 900;
  color: var(--ink); text-align: center; line-height: 1.2;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 -2px 0 rgba(47,128,179,0.18);
  -moz-appearance: textfield; transition: border-color 0.2s, box-shadow 0.2s;
}
.bk-in.w5 { width: 6ch; }
.bk-in.w4 { width: 5ch; }
.bk-in.w3 { width: 4.5ch; }
.bk-in:hover { border-color: var(--ink); }
.bk-in:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(230,169,79,0.28);
}
.bk-in::-webkit-outer-spin-button, .bk-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Context questions: light, clearly optional, and they pay something back */
.bk-edit-hint {
  display: block; margin-top: 10px; font-size: 0.7rem; color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.09em;
}
@media (max-width: 560px) { .bk-brief { font-size: 0.98rem; line-height: 2.1; } }

.book-where { margin-bottom: 20px; }
.book-where label {
  display: block; font-size: 0.76rem; font-weight: 600; color: var(--stone); margin-bottom: 8px;
}
.book-where .opt { font-weight: 400; color: var(--mist); }
.book-where input {
  width: 100%; max-width: 380px; border: 1px solid var(--cloud); border-radius: 5px;
  background: var(--white); padding: 12px 14px; font-family: var(--sans);
  font-size: 0.98rem; color: var(--ink); transition: border-color 0.2s, box-shadow 0.2s;
}
.book-where input::placeholder { color: var(--mist); }
.book-where input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(230,169,79,0.18); }

.calendly-mount { min-height: 640px; margin: 0 -8px; }
.cal-fail { padding: 34px 4px; color: var(--steel); font-size: 0.92rem; line-height: 1.7; }
.cal-fail b { display: block; font-family: var(--heading); font-size: 1.05rem; color: var(--ink); margin-bottom: 14px; }
.cal-fail .btn-primary { margin-bottom: 12px; }
.cal-fail span { display: block; font-size: 0.82rem; color: var(--mist); }
.calendly-mount .cal-loading {
  display: flex; align-items: center; justify-content: center; gap: 7px; height: 640px;
}
.cal-loading span {
  width: 9px; height: 9px; border-radius: 50%; background: var(--cloud);
  animation: calPulse 1s ease-in-out infinite;
}
.cal-loading span:nth-child(2) { animation-delay: 0.15s; }
.cal-loading span:nth-child(3) { animation-delay: 0.3s; }
@keyframes calPulse { 0%, 100% { opacity: 0.35; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); }}

.sens-comps {
  margin-top: 28px; padding: 32px 36px; background: var(--ink);
  border-radius: 8px; position: relative; overflow: hidden;
}
.sens-comps::after {
  content: ''; position: absolute; top: -40%; right: -5%;
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(95, 174, 219, 0.1) 0%, transparent 70%);
  pointer-events: none;
}
.sens-comps h4 {
  font-family: var(--heading); font-size: 1.1rem; font-weight: 800;
  color: var(--white); margin-bottom: 10px; position: relative; z-index: 1;
}
.sens-comps p {
  font-size: 0.95rem; color: var(--mist); line-height: 1.75;
  max-width: 760px; margin-bottom: 24px; position: relative; z-index: 1;
}
.sens-comps .btn-secondary {
  color: var(--white); border-color: rgba(255,255,255,0.35);
  position: relative; z-index: 1;
}
.sens-comps .btn-secondary:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }

/* SERVICES */
.services { background: var(--snow); padding: 116px 0; }
.svc-header { max-width: 680px; margin-bottom: 52px; }
/* Three shared rows (top, deliverables, foot) so every card's "What you
   receive" starts on the same line, however long its intro runs. Padding sits
   on the three parts, not the card: padding on a subgrid item would offset its
   tracks from the parent's. */
.svc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto auto auto;
  /* Column gap only: the 1px is the divider between cards. A row gap would
     draw the same hairline straight across every card. */
  column-gap: 1px; row-gap: 0; background: var(--cloud); border-radius: 8px; overflow: hidden;
}
.svc {
  background: var(--white); padding: 0;
  display: grid; grid-row: span 5; grid-template-rows: subgrid;
  transition: background 0.25s ease;
}
/* Five shared rows: description, bullets, guarantee, deliverables, footer.
   Every card starts each part on the same line however long its prose runs,
   and a card with no guarantee simply leaves that row empty. Padding sits on
   the parts, not the card: padding on a subgrid item offsets its tracks. */
.svc-intro { display: flex; flex-direction: column; padding: 40px 34px 0; }
.svc-note:empty { display: block; }
.svc:hover { background: var(--accent-wash); }
.svc-step {
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--blue); margin-bottom: 14px;
}
.svc h3 {
  font-family: var(--heading); font-size: 1.22rem; font-weight: 800;
  color: var(--ink); letter-spacing: -0.01em; margin-bottom: 10px; line-height: 1.3;
}
.svc-meta {
  font-family: var(--heading); font-size: 0.86rem; font-weight: 700;
  color: var(--accent-dark); margin-bottom: 18px;
}
.svc-lead { font-size: 0.93rem; color: var(--stone); line-height: 1.7; margin-bottom: 20px; }
.svc > ul { list-style: none; padding: 0; margin: 0 34px 26px; }
.svc ul li {
  font-size: 0.87rem; color: var(--steel); line-height: 1.6;
  padding: 9px 0 9px 20px; border-bottom: 1px solid var(--cloud); position: relative;
}
.svc ul li::before {
  content: ''; position: absolute; left: 0; top: 17px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.svc ul li:last-child { border-bottom: none; }
.svc-foot { margin-top: auto; padding: 4px 34px 36px; }
.svc-foot a {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink); text-decoration: none;
  border-bottom: 2px solid var(--accent); padding-bottom: 3px;
  transition: color 0.2s, border-color 0.2s;
}
.svc-foot a:hover { color: var(--accent-dark); border-color: var(--accent-dark); }

/* Risk reversal, sized to sit inside a service card without crowding it */
.svc-guarantee {
  margin: 0 34px 22px; padding: 16px 18px;
  background: var(--accent-wash); border: 1px solid var(--accent-light);
  border-left: 4px solid var(--blue);
  border-radius: 6px; font-size: 0.87rem; color: var(--stone); line-height: 1.6;
}
.svc-g-label {
  display: block; font-family: var(--heading); font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--blue); margin-bottom: 8px;
}
.svc-guarantee p {
  margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--ink); font-weight: 500;
}
.svc-guarantee em {
  display: block; margin-top: 10px; padding-top: 10px; font-style: normal;
  border-top: 1px solid var(--accent-light); color: var(--steel); font-size: 0.83rem;
}

/* The DIY path: an alternative to tiers 2 and 3, not a fourth thing to buy */
.svc-diy {
  display: flex; align-items: flex-start; gap: 28px; margin-top: 20px;
  padding: 30px 36px; background: var(--accent-wash);
  border: 1px solid var(--accent-light); border-left: 4px solid var(--accent-dark); border-radius: 8px;
}
.svc-diy-tag {
  flex-shrink: 0; font-family: var(--heading); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.13em; color: var(--accent-dark);
  padding-top: 5px; max-width: 110px; line-height: 1.5;
}
.svc-diy h3 {
  font-family: var(--heading); font-size: 1.12rem; font-weight: 800;
  color: var(--ink); letter-spacing: -0.01em; margin-bottom: 10px;
}
.svc-diy p { font-size: 0.95rem; color: var(--stone); line-height: 1.75; }
.svc-diy strong { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) { .svc-diy { flex-direction: column; gap: 14px; } .svc-diy-tag { max-width: none; padding-top: 0; } }

/* WHAT YOU RECEIVE: six sprint deliverables, 2x3, each one openable.
   Closed it scans as a list; open it answers "what is actually in that". */
.deliv { margin-top: 20px; padding: 26px 30px; background: var(--white); border: 1px solid var(--cloud); border-radius: 8px; }
.deliv-head { margin-bottom: 24px; }
.deliv-tag {
  font-family: var(--heading); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.13em; color: var(--blue); margin-bottom: 8px;
}
.deliv-sub { font-size: 0.9rem; color: var(--steel); line-height: 1.65; max-width: 620px; }
.deliv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 18px; align-items: stretch; }
.deliv-set + .deliv-set { margin-top: 26px; }
.deliv-set-label {
  font-size: 0.82rem; color: var(--steel); margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--cloud);
}
.deliv-set-label b {
  font-family: var(--heading); font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-dark); margin-right: 10px;
}
.deliv-item {
  display: flex; flex-direction: column;
  border: 1px solid var(--cloud); border-radius: 6px; background: var(--snow);
  transition: border-color 0.2s, background 0.2s;
}
.deliv-item:hover { border-color: var(--accent-light); background: var(--accent-wash); }
.deliv-item[open] { border-color: var(--accent-light); background: var(--accent-wash); }
.deliv-item > summary {
  cursor: pointer; list-style: none; padding: 16px 40px 16px 18px; position: relative;
  flex: 1 0 auto;
}
.deliv-item > summary::-webkit-details-marker { display: none; }
.deliv-item > summary::after {
  content: '+'; position: absolute; right: 16px; top: 15px;
  font-family: var(--sans); font-size: 1.25rem; font-weight: 400;
  color: var(--accent-dark); line-height: 1;
}
.deliv-item[open] > summary::after { content: '\2013'; }
.deliv-name {
  display: block; font-family: var(--heading); font-size: 0.98rem; font-weight: 800;
  color: var(--ink); letter-spacing: -0.01em; margin-bottom: 4px;
}
.deliv-brief { display: block; font-size: 0.86rem; color: var(--stone); line-height: 1.5; }
.deliv-body { padding: 0 18px 18px; border-top: 1px solid var(--accent-light); margin: 0 18px; padding-left: 0; padding-right: 0; }
.deliv-body p { font-size: 0.88rem; color: var(--stone); line-height: 1.7; margin-top: 12px; }
.deliv-body .deliv-why { color: var(--ink); font-weight: 500; }
.deliv-item > summary:focus-visible { outline: 2px solid var(--blue-mid); outline-offset: -2px; border-radius: 6px; }
@media (max-width: 980px) { .deliv-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .deliv-grid { grid-template-columns: 1fr; } .deliv { padding: 28px 22px; } }
@media print { .deliv-body { display: block !important; } .deliv-item { break-inside: avoid; } }

/* SYSTEMS: answers "do you know my stack" before it becomes a call question */
.sys { margin-top: 20px; padding: 24px 30px; background: var(--white); border: 1px solid var(--cloud); border-radius: 8px; }
.sys-tag {
  font-family: var(--heading); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.13em; color: var(--blue); margin-bottom: 10px;
}
.sys-lead { font-size: 0.9rem; color: var(--steel); line-height: 1.7; max-width: 640px; margin-bottom: 24px; }
.sys-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px 28px; align-items: start; }
.sys-col h4 {
  font-family: var(--heading); font-size: 0.74rem; font-weight: 700; color: var(--stone);
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--cloud);
}
.sys-col ul { list-style: none; padding: 0; margin: 0; }
.sys-col li { font-size: 0.92rem; color: var(--ink); font-weight: 500; padding: 4px 0; }
.sys-more {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--cloud);
  font-family: var(--heading); font-size: 0.85rem; font-weight: 700; color: var(--stone);
}
@media (max-width: 1100px) { .sys-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .sys-grid { grid-template-columns: 1fr 1fr; } .sys { padding: 26px 24px; } }

/* FIT */
.fit { background: var(--snow); padding: 116px 0; }
/* The closing "after" block sits straight after Fit: invert it so the two
   snow sections do not read as one long slab. */
.after { background: var(--white); }
.after .fit-card { background: var(--snow); }
.fit-header { max-width: 680px; margin-bottom: 52px; }
.fit-scenarios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 64px; }
.fit-card { background: var(--white); border: 1px solid var(--cloud); border-radius: 8px; padding: 32px; }
.fit-card h3 {
  font-family: var(--heading); font-size: 1.15rem; font-weight: 800;
  color: var(--ink); margin-bottom: 6px; letter-spacing: -0.01em;
}
.fit-card .fit-sub { font-size: 0.85rem; color: var(--steel); margin-bottom: 24px; line-height: 1.55; }
.fit-card .fit-sub:last-child { margin-bottom: 0; }

/* ABOUT */
.about { background: var(--white); padding: 116px 0; }
.about-stat {
  display: flex; align-items: center; gap: 32px; margin-top: 44px;
  padding: 30px 36px; background: var(--accent-wash);
  border: 1px solid var(--accent-light); border-left: 4px solid var(--accent); border-radius: 8px;
}
.about-stat-num {
  font-variant-numeric: tabular-nums;
  font-family: var(--heading); font-size: 2.6rem; font-weight: 900;
  color: var(--accent-dark); line-height: 1; flex-shrink: 0; letter-spacing: -0.02em;
}
.about-stat p { font-size: 1.02rem; color: var(--steel); line-height: 1.7; }
.about-stat strong { color: var(--ink); font-weight: 600; }

.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--cloud);
  border-radius: 8px; overflow: hidden; margin-top: 20px; border-top: 3px solid var(--accent); }
.path { background: var(--snow); padding: 26px 28px; transition: background 0.25s ease; }
.path:hover { background: var(--white); }
.path h3 {
  font-family: var(--heading); font-size: 1.15rem; font-weight: 800;
  color: var(--ink); margin-bottom: 10px; letter-spacing: -0.01em;
}
.path p { font-size: 0.92rem; color: var(--steel); line-height: 1.7; }

.quotes { margin-top: 56px; }
.quotes.paths { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.quotes figure { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.quotes blockquote { margin: 0; }
.quotes blockquote p { font-size: 0.98rem; color: var(--stone); line-height: 1.7; font-style: italic; }
.quotes figcaption { font-size: 0.82rem; font-weight: 600; color: var(--ink); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; margin-top: 44px; }
.about-text p { font-size: 1.02rem; color: var(--steel); line-height: 1.8; margin-bottom: 20px; }
.who { background: var(--accent-wash); border-block: 1px solid var(--accent-light); padding-block: 26px; }
/* First mention of Isaac: centred, not pushed to the edges */
.who-inner { display: flex; align-items: center; justify-content: center; gap: 24px 48px; flex-wrap: wrap; }
.who-id { display: flex; align-items: center; gap: 16px; }
.who-photo img { display: block; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--white), 0 0 0 4px var(--accent); }
.who-name { margin: 0; font-family: var(--serif); font-size: 1.35rem; line-height: 1.1; color: var(--ink); }
.who-line { margin: 2px 0 4px; font-size: 0.92rem; color: var(--stone); }
.who-more { font-size: 0.82rem; font-weight: 600; color: var(--blue); text-decoration: none; }
.who-more:hover { text-decoration: underline; }
.who-stats { display: flex; flex-wrap: wrap; }
.who-stat { padding: 2px 28px; text-align: center; }
.who-stat + .who-stat { border-left: 1px solid var(--accent-light); }
.who-num { font-family: var(--heading); font-size: 1.45rem; font-weight: 900; color: var(--ink); line-height: 1.1; white-space: nowrap; }
.who-label { margin-top: 5px; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--steel); white-space: nowrap; }
@media (max-width: 640px) {
  .who-stats { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
  .who-stat { padding: 2px 8px; }
  .who-num { font-size: 1.1rem; }
  .who-label { white-space: normal; }
}
.section-subtitle a { color: var(--blue); text-decoration-color: var(--accent-light); text-underline-offset: 3px; }
.section-subtitle a:hover { text-decoration-color: var(--blue); }
@media (max-width: 640px) {
  .sc-btn, .chip, .who-more, footer a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}
.about-byline + p, .about-byline + [hidden] + p { font-size: 1.12rem; color: var(--stone); }
.about-byline { display: flex; align-items: center; gap: 20px; margin-bottom: 28px; }
.about-photo img { display: block; border-radius: 50%; object-fit: cover; }
.about-photo img { width: 112px; height: 112px; box-shadow: 0 0 0 4px var(--white), 0 0 0 5px var(--accent); }
.about-text .ab-name { font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; color: var(--ink); margin: 0 0 6px; }
.about-text .ab-role { font-size: 0.86rem; line-height: 1.55; color: var(--steel); margin: 0; }
.about-text strong { color: var(--ink); font-weight: 600; }
.about-timeline { background: var(--snow); border-radius: 8px; padding: 30px; border: 1px solid var(--cloud); }
.tl-item { padding: 14px 0; border-bottom: 1px solid var(--cloud); }
.tl-item:last-child { border-bottom: none; }
.tl-year {
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--accent-dark); margin-bottom: 4px;
}
.tl-item h3 { font-family: var(--heading); font-size: 1.02rem; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.tl-item p { font-size: 0.85rem; color: var(--steel); line-height: 1.55; }
.tl-metric {
  display: inline-block; margin-top: 9px; font-family: var(--heading); font-weight: 800;
  font-size: 0.76rem; color: var(--blue); background: var(--accent-light);
  padding: 3px 10px; border-radius: 3px;
}

/* CTA */
.cta-section { padding: 116px 0; text-align: center; position: relative; overflow: hidden; }
.cta-section::before {
  content: ''; position: absolute; bottom: -20%; left: 50%; transform: translateX(-50%);
  width: 820px; height: 420px;
  background: radial-gradient(circle, rgba(95, 174, 219, 0.1) 0%, transparent 70%);
  pointer-events: none;
}
.cta-section .section-title { max-width: 680px; margin: 0 auto 20px; }
.cta-section .section-title::after { margin-inline: auto; }
.cta-section .section-subtitle { max-width: 560px; margin: 0 auto 40px; }
.cta-buttons { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; position: relative; z-index: 1; }
.cta-fine { margin-top: 34px; font-size: 0.82rem; color: var(--steel); position: relative; z-index: 1; }

/* FOOTER */
footer { padding: 46px 0; background: var(--ink); color: var(--white); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer-left { display: flex; align-items: center; gap: 12px; }
.footer-mark {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 5px;
  background: var(--slate); color: #fff;
  font-family: var(--serif); font-weight: 400; font-size: 1rem;
}
.footer-mark span { color: #5FAEDB; }
.footer-name { font-family: var(--serif); font-size: 1.2rem; font-weight: 400; color: var(--white); }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links a { font-size: 0.8rem; color: var(--mist); text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: var(--white); }
.footer-copy { font-size: 0.74rem; color: var(--mist); }

/* RESPONSIVE */
@media (max-width: 1060px) {
  .finding-band { grid-template-columns: repeat(2, 1fr); }
  /* One column: each card is on its own, so the shared rows come off. */
  .svc-grid { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 1px; }
  .svc { display: flex; flex-direction: column; grid-row: auto; }
  .svc-note:empty { display: none; }
  .math-grid, .fit-scenarios { grid-template-columns: 1fr; gap: 40px; }
  .math-equation { position: static; }
}
@media (max-width: 900px) {
  .hero h1 { font-size: 3rem; }
  .section-title { font-size: 2.4rem; }
  .thesis h2 { font-size: 2.25rem; }
  .hero-proof { grid-template-columns: repeat(3, 1fr); }
  .paths { grid-template-columns: 1fr; }
  .about-stat { flex-direction: column; align-items: flex-start; gap: 16px; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .sens-head { flex-direction: column; gap: 20px; }
  .mx-assume { grid-template-columns: 1fr 1fr; }
  .gn { flex-wrap: wrap; }
  .gn-item { flex: 1 1 100%; }
  .gn-op { display: none; }
  .calc-out-item.hero-out { flex-direction: column; align-items: stretch; gap: 14px; }
  .mx-open { width: 100%; padding: 13px 16px; }
  .container { padding: 0 24px; }
  nav { padding: 16px 24px; }
  .nav-links { gap: 18px; }}
@media (max-width: 640px) {
  .container { padding: 0 20px; }
  nav { padding: 14px 20px; }
  .nav-menu { right: 20px; }
  .nav-ind { max-width: 118px; height: 44px; padding: 0 2px 2px 0; font-size: 0.72rem; letter-spacing: 0.04em; }
  .nav-links { gap: 8px; }
  .nav-name { display: none; }
  .cta-long { display: none; }
  .cta-short { display: inline; }
  .nav-name { font-size: 1rem; white-space: nowrap; }
  .nav-cta { padding: 12px 16px !important; font-size: 0.72rem; white-space: nowrap; }
  /* comfortable touch targets */
  .footer-links { gap: 6px 18px; }
  .footer-links a { display: inline-block; padding: 8px 0; }
  .svc-foot a { display: inline-block; padding: 6px 0; }
  .hero h1 { font-size: 2.5rem; }
  /* Narrow phones: shrink the pair rather than let the chip drop to its own line. */
  .hero-basis { font-size: 0.95rem; }
  .hb-val { gap: 8px; }
  .hero-basis .chip { font-size: 0.68rem; padding: 5px 10px; }
  .section-title { font-size: 2.05rem; }
  .thesis h2 { font-size: 1.95rem; }
  .hero-sub { font-size: 1.08rem; }
  .finding-band { grid-template-columns: 1fr; }
  .hero-proof { grid-template-columns: 1fr 1fr; margin-top: 32px; }
  .proof-card:first-child { grid-column: 1 / -1; }
  .proof-card { padding: 22px 12px; }
  .proof-number { font-size: 1.5rem; }
  .proof-label { font-size: 0.76rem; }
  .hero-actions, .cta-buttons { flex-direction: column; align-items: stretch; }
  .hero-actions a, .cta-buttons a { text-align: center; }
  .calc-out { grid-template-columns: 1fr; }
  .math-equation, .calc, .fit-card, .about-timeline { padding: 28px 24px; }
  .math-aside { padding-top: 20px; }
  section, .thesis { padding: 58px 0; }
  .footer-inner { flex-direction: column; text-align: center; }}

/* PRINT: the page doubles as a leave-behind. Controls go, colour stays. */
@page { margin: 0.55in 0.5in; }
@media print {
  html { font-size: 13px; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; background: #fff; }
  nav, .hero-actions, .cta-buttons, .sc-ans, .sc-go, .sc-hint, .mx-open, .mx-overlay,
  .calc-cta, .sc-cta, .svc-foot, .sens-more, .hero-basis .chip, .footer-links,
  .hero::before, .thesis::after, .cta-section::before { display: none !important; }
  .fade-in { opacity: 1 !important; transform: none !important; }
  * { animation: none !important; transition: none !important; }
  .hero { min-height: 0; padding: 0 0 24px; }
  section, .thesis, .math, .fit, .about, .cta-section { padding: 28px 0 !important; }
  .container { max-width: none; padding: 0; }
  .thesis .container { padding: 0 24px; }
  .hero, .math, .services, .fit, .about, .cta-section { background: #fff !important; }
  /* a letter page is phone-narrow; keep the desktop grids */
  .svc-grid, .paths { grid-template-columns: repeat(3, 1fr) !important; }
  .svc-grid { grid-template-rows: none !important; }
  .svc { display: flex !important; grid-row: auto !important; }
  .svc-note:empty { display: none !important; }
  .about-grid, .math-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  .fit-scenarios { grid-template-columns: 1fr !important; gap: 20px !important; }
  .hero-proof { grid-template-columns: repeat(4, 1fr) !important; }
  .svc-intro { padding: 22px 18px 0; } .svc > ul, .svc-deliv, .svc-guarantee { margin-inline: 18px; } .svc-foot { padding: 4px 18px 22px; }
  .cta-section { break-inside: avoid; }
  .section-title { font-size: 1.9rem; }
  .hero h1 { font-size: 2.4rem; }
  .sc-row { grid-template-columns: 34px 1fr; }
  .proof-card, .sc-row, .svc, .fit-card, .path, .tl-item, .calc-out-item,
  .math-equation, .svc-diy, .about-stat, .svc-guarantee { break-inside: avoid; }
  h1, h2, h3, .section-tag { break-after: avoid; }
  .about-text a::after { content: " (" attr(href) ")"; font-size: 0.85em; color: var(--steel); }
}

/* DELIVERABLES INSIDE A SERVICE CARD
   The promise and what you actually receive for it belong in one box. */
.svc-deliv { margin: 0 34px; padding-top: 18px; border-top: 1px solid var(--cloud); }
.svc-deliv-label {
  font-family: var(--heading); font-size: 0.7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--steel);
  margin-bottom: 10px;
}
.svc-deliv .deliv-grid { display: block; margin: 0; }
.svc-deliv .deliv-item { border: 0; border-bottom: 1px solid var(--cloud); border-radius: 0; margin: 0; background: none; padding: 0; }
.svc-deliv .deliv-item:last-child { border-bottom: 0; }
.svc-deliv .deliv-item summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 11px 26px 11px 0; display: block;
}
.svc-deliv .deliv-item summary::-webkit-details-marker { display: none; }
.svc-deliv .deliv-item summary::after {
  content: ''; position: absolute; right: 4px; top: 50%; width: 10px; height: 10px; margin-top: -5px;
  background:
    linear-gradient(var(--accent-dark), var(--accent-dark)) center/10px 2px no-repeat,
    linear-gradient(var(--accent-dark), var(--accent-dark)) center/2px 10px no-repeat;
  transition: background-size .18s ease;
}
.svc-deliv .deliv-item[open] summary::after { background-size: 10px 2px, 0 0; }
.svc-deliv .deliv-name {
  display: block; font-family: var(--heading); font-weight: 600;
  font-size: 0.93rem; color: var(--ink); line-height: 1.35;
}
.svc-deliv .deliv-item[open] .deliv-name { color: var(--accent-dark); }
.svc-deliv .deliv-brief { display: block; font-size: 0.86rem; color: var(--steel); line-height: 1.5; margin-top: 3px; }
.svc-deliv .deliv-body { padding: 0 26px 14px 0; }
.svc-deliv .deliv-body p { font-size: 0.87rem; line-height: 1.6; color: var(--stone); margin: 0 0 8px; }
.svc-deliv .deliv-body p:last-child { margin-bottom: 0; }
.svc-deliv .deliv-why { color: var(--accent-dark); font-weight: 600; }

/* ---------------------------------------------------------------------------
   SECTION OPENINGS
   One rule for the whole site: a section opens with its header centred, and
   anything laid out in columns beneath it reads left aligned. Add a new
   section's header wrapper to the first list and it inherits the treatment.
   --------------------------------------------------------------------------- */
.hero-head,
.faq-header,
.fit-header,
.math-header,
.svc-header,
.thesis-inner,
.about > .container { margin-inline: auto; text-align: center; }

/* The gold rule under a heading and the measure-limited subtitle are boxes,
   so they need centring as boxes, not just centred text. */
.hero-head .section-title::after,
.faq-header .section-title::after,
.fit-header .section-title::after,
.math-header .section-title::after,
.svc-header .section-title::after,
.thesis-inner h2::after,
.about > .container .section-title::after,
.hero-head .section-subtitle,
.faq-header .section-subtitle,
.fit-header .section-subtitle,
.math-header .section-subtitle,
.svc-header .section-subtitle,
.about > .container .section-subtitle { margin-inline: auto; }

/* Columns and lists under a centred header: left aligned, where reading happens. */
.hero-content,
.fit-scenarios,
.thesis-inner .sc-list, .thesis-inner .sc-result,
.about .about-grid, .about .paths, .about .about-stat { text-align: left; }