/* =====================================================================
   Straightline — shared styles for the SUB-PAGES (beta, ratecard).
   Mirrors the design system in index.html: same fonts, colours, header,
   footer, section chrome and card language. index.html is self-contained
   and does NOT use this file.
   ===================================================================== */

/* Self-hosted, latin subset. No third-party font requests. */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/SpaceGrotesk-var.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/IBMPlexMono-400.woff2) format('woff2');
}
:root {
  --navy: #151B33;
  --navy-card: #1C2440;
  --cream: #F2EDE3;
  --gold: #E0B33C;
  --gold-border: rgba(224, 179, 60, 0.18);
  --gold-rail: rgba(224, 179, 60, 0.28);
  --hairline: rgba(242, 237, 227, 0.1);
  --section-line: rgba(242, 237, 227, 0.08);
  --muted: rgba(242, 237, 227, 0.62);
  --body-text: rgba(242, 237, 227, 0.85);
  --header-h: 68px;
}
@media (max-width: 640px) {
  :root { --header-h: 58px; }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--navy);
  color: var(--cream);
  font-family: 'Space Grotesk', Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--gold); text-decoration: none; }

.mono {
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-size: 11px;
}

/* ---- Persistent header (identical to index.html) ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 clamp(16px, 4vw, 40px);
  background: rgba(21, 27, 51, 0);
  border-bottom: 1px solid transparent;
  transition: background 300ms ease, border-color 300ms ease, backdrop-filter 300ms ease;
}
.site-header.is-stuck {
  background: rgba(21, 27, 51, 0.86);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom-color: var(--gold-border);
}
.wordmark {
  color: var(--cream);
  font-weight: 700;
  font-size: clamp(19px, 2.4vw, 26px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  white-space: nowrap;
}
.wordmark:hover { color: var(--cream); }
/* The wordmark per the design system: typed Space Grotesk Bold, "Straight"
   off-white on navy, "line" gold text with no box. */
.sl-wordmark {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #f6f4ef;
}
.sl-wordmark b { font-weight: 700; color: #e0b33c; }
.header-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  border: 1px solid rgba(224, 179, 60, 0.35);
  border-radius: 999px;
  padding: 6px 8px 6px 20px;
}
.pill-label {
  font-size: 15px;
  font-weight: 400;
  color: var(--cream);
  white-space: nowrap;
}
.pill-divider {
  width: 1px;
  height: 22px;
  background: var(--gold-border);
  flex: 0 0 auto;
}
.ico-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  transition: background 220ms ease, transform 220ms ease;
}
.ico-link:hover {
  background: var(--cream);
  transform: translateY(-1px);
}
.ico-link svg { display: block; }

@media (max-width: 560px) {
  .header-pill { gap: 9px; padding: 5px 6px 5px 14px; }
  .pill-label { font-size: 13px; }
  .ico-link { width: 30px; height: 30px; }
  .ico-link svg { width: 17px; height: 17px; }
}
@media (max-width: 400px) {
  .header-pill { gap: 7px; padding: 4px 5px 4px 11px; }
  .pill-label { font-size: 12px; }
  .wordmark { font-size: 17px; }
  .ico-link { width: 29px; height: 29px; }
}

/* ---- Rail sections (page hero + closing) ----
   Same rail as the main site's 01 and 05. The sub-page hero is shorter
   than the main hero: these pages exist to be read, not to make an
   entrance, so the content starts within the first screen. */
.rail-section {
  display: grid;
  grid-template-columns: clamp(42px, 9vw, 88px) 1fr;
  align-items: center;
  padding-right: clamp(20px, 6vw, 90px);
}
.rail-section.page-hero { min-height: clamp(380px, 58svh, 620px); }
.rail-section.page-closing { min-height: clamp(420px, 70svh, 760px); }
.rail {
  align-self: stretch;
  border-right: 1px solid var(--gold-rail);
  display: flex;
  justify-content: center;
}
.rail-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

/* ---- Hero ---- */
.hero-body {
  padding: clamp(40px, 8vh, 90px) 0 clamp(40px, 8vh, 90px) clamp(20px, 5vw, 56px);
  max-width: 1000px;
}
.hero-kicker {
  font-size: 13px;
  color: rgba(242, 237, 227, 0.72);
  margin-bottom: clamp(24px, 5vh, 48px);
}
h1 {
  margin: 0;
  font-weight: 700;
  font-size: clamp(3rem, 11vw, 5.375rem); /* identical to index.html */
  line-height: 1.0;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.gold-block {
  background: var(--gold);
  color: var(--navy);
  padding: 0 0.14em;
  display: inline-block;
}
.standfirst {
  margin: clamp(26px, 4.5vh, 40px) 0 0;
  max-width: 62ch;
  font-size: clamp(17px, 2.1vw, 21px);
  font-weight: 300;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}
.standfirst strong {
  font-weight: 500;
  color: var(--cream);
}
/* Second standfirst paragraph: one blank line below the first; its two
   sentences are split with <br> so they sit on consecutive lines. */
.standfirst.follow { margin-top: 1em; }

/* ---- Section chrome ---- */
section { border-top: 1px solid var(--section-line); }
section:first-of-type { border-top: 0; }
.section-pad {
  padding: clamp(64px, 11vh, 120px) clamp(20px, 6vw, 90px) clamp(72px, 12vh, 130px);
}
.kicker-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(32px, 6vh, 60px);
}
.kicker-row.tight { margin-bottom: clamp(16px, 3vh, 24px); }
.kicker-dash {
  display: block;
  width: 26px;
  height: 1px;
  background: var(--gold);
}
.kicker-row .mono { font-size: 13px; color: var(--gold); }
/* "02 — What we ask in return" is the longest kicker on these pages; at
   13px / 0.3em it needs 304px, and a 375px phone only offers 297px. */
@media (max-width: 420px) {
  .kicker-row .mono { font-size: 12px; letter-spacing: 0.26em; }
}
.intro {
  margin: 0 0 clamp(28px, 5vh, 44px);
  max-width: 62ch;
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 300;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Shared content band — same 1240px edge as the main site's pillars. */
.band { max-width: 1240px; }

/* ---- Cards (the main site's "step" card, in a row of three) ---- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
  max-width: 1240px;
}
.card {
  background: var(--navy-card);
  border: 1px solid var(--gold-border);
  border-radius: 18px;
  padding: clamp(22px, 2.4vw, 30px) clamp(20px, 2.2vw, 26px);
  display: flex;
  flex-direction: column;
  transition: border-color 320ms ease;
}
.card:hover { border-color: rgba(224, 179, 60, 0.38); }
.card-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.card h3 {
  margin: 0;
  font-size: clamp(21px, 2.2vw, 25px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}
.card h3 em { font-style: normal; color: var(--gold); }
.card p {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--body-text);
}
/* "Asks" carry more gold than "gets" — the same light/dark flip the
   printed document makes, translated to the navy site. */
.cards.asks .card {
  border-color: rgba(224, 179, 60, 0.45);
  background: linear-gradient(180deg, rgba(224, 179, 60, 0.09), rgba(224, 179, 60, 0.03)), var(--navy-card);
}
.cards.asks .card:hover { border-color: rgba(224, 179, 60, 0.7); }
.cards.asks .card h3 { font-size: clamp(23px, 2.5vw, 28px); }
.cards.asks .card p { border-top-color: rgba(224, 179, 60, 0.22); }

@media (max-width: 920px) {
  .cards { grid-template-columns: 1fr; }
}

/* ---- Callout (gold-railed statement) ---- */
.callout {
  max-width: 1240px;
  margin-top: clamp(28px, 4vh, 40px);
  background: var(--navy-card);
  border: 1px solid var(--gold-border);
  border-left: 3px solid var(--gold);
  border-radius: 0 18px 18px 0;
  padding: clamp(22px, 3vw, 32px) clamp(22px, 3vw, 36px);
}
.callout p {
  margin: 0;
  font-size: clamp(19px, 2.4vw, 26px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.callout .hl { color: var(--gold); }
.callout .mono {
  display: block;
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--muted);
}

/* ---- Rate tables ---- */
.table-wrap { max-width: 1240px; }
.rate-table {
  width: 100%;
  border-collapse: collapse;
  /* Auto layout on purpose: the <col> widths are hints, and the browser
     widens the name column when "IMPLEMENTATION ROADMAP" needs the room. */
}
.rate-table th {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--gold);
  text-align: left;
  padding: 0 20px 14px 0;
  border-bottom: 1px solid rgba(224, 179, 60, 0.35);
  vertical-align: bottom;
}
.rate-table td {
  padding: 22px 20px 22px 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--body-text);
  text-wrap: pretty;
}
.rate-table th:last-child,
.rate-table td:last-child { padding-right: 0; }
.rate-table td.name {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--cream);
  padding-top: 25px; /* optically aligns the small caps with the 15px body text */
}
.rate-table .amt {
  display: block;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--gold);
  white-space: nowrap;
}
.rate-table .from {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  margin-bottom: 2px;
}
.rate-table .unit {
  display: block;
  margin-top: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.rate-table .flat {
  display: block;
  font-size: clamp(17px, 1.8vw, 20px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--cream);
  padding-top: 2px;
}

/* Under 800px the tables become a stack of cards, one per row. The
   column headings move inside each card as small mono labels. */
@media (max-width: 800px) {
  .rate-table, .rate-table tbody, .rate-table tr, .rate-table td { display: block; }
  .rate-table thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .rate-table tr {
    background: var(--navy-card);
    border: 1px solid var(--gold-border);
    border-radius: 18px;
    padding: 22px 22px 8px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
  }
  .rate-table td {
    border: 0;
    padding: 0 0 16px;
  }
  .rate-table td.name {
    order: -2;
    padding-top: 0;
    padding-bottom: 8px;
    font-size: 12px;
  }
  .rate-table td.price {
    order: -1;
    padding-bottom: 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--hairline);
  }
  .rate-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 5px;
  }
  .rate-table td.name::before,
  .rate-table td.price::before { display: none; }
  .rate-table .amt { display: inline-block; font-size: 26px; }
  .rate-table .from { display: inline-block; margin: 0 6px 0 0; }
  .rate-table .unit { display: inline-block; margin: 0 0 0 10px; vertical-align: 3px; }
  .rate-table .flat { display: inline-block; padding-top: 0; font-size: 19px; }
}

/* ---- Terms list ---- */
.terms {
  max-width: 1240px;
  margin-top: clamp(40px, 7vh, 64px);
}
.terms .mono { color: var(--gold); font-size: 13px; }
.terms ul {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.terms li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--body-text);
}
.terms li::before {
  content: '';
  flex: 0 0 auto;
  width: 14px;
  height: 1px;
  background: var(--gold);
  margin-top: 0.72em;
}

/* ---- Closing ---- */
.closing-body {
  padding: clamp(64px, 12vh, 120px) 0 clamp(64px, 12vh, 120px) clamp(20px, 5vw, 56px);
  max-width: 1100px;
}
.closing-body .hero-kicker { margin-bottom: clamp(20px, 4vh, 36px); }
.closing-body h2 {
  margin: 0;
  font-weight: 700;
  font-size: clamp(3rem, 11vw, 5.375rem); /* identical to index.html */
  line-height: 1.0;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.closing-cta { margin-top: clamp(28px, 5vh, 48px); }
.closing-lede {
  margin: 0;
  max-width: 58ch;
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(242, 237, 227, 0.8);
  text-wrap: pretty;
}
.closing-lede.follow { margin-top: 1em; }
.closing-lede + .closing-cta { margin-top: clamp(24px, 4vh, 36px); }
.closing-link {
  display: inline-block;
  color: var(--gold);
  font-size: inherit;
  font-weight: 500;
  letter-spacing: -0.01em;
  border-bottom: 1px solid rgba(224, 179, 60, 0.45);
  padding-bottom: 3px;
  transition: color 220ms ease, border-color 220ms ease;
}
.closing-link:hover {
  color: var(--cream);
  border-bottom-color: var(--cream);
}
.closing-reach {
  margin: 0;
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(242, 237, 227, 0.8);
}
.closing-contact {
  margin: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.8;
  color: rgba(242, 237, 227, 0.72);
}
.closing-lede + .closing-contact { margin-top: clamp(24px, 4vh, 36px); }
.closing-contact a {
  font-weight: 400;
  letter-spacing: inherit;
  border-bottom-width: 1px;
  padding-bottom: 2px;
}
/* Name and address stack on narrow screens instead of wrapping mid-line. */
@media (max-width: 480px) {
  .closing-contact .dot { display: none; }
  .closing-contact a { display: inline-block; margin-top: 6px; }
}
.closing-note {
  margin: 16px 0 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(242, 237, 227, 0.55);
}
.fineprint {
  margin: clamp(32px, 6vh, 56px) 0 0;
  max-width: 72ch;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  /* 0.6 keeps this above AA contrast on the navy; anything lighter fails. */
  color: rgba(242, 237, 227, 0.6);
  text-wrap: pretty;
}

/* ---- Footer (identical to index.html) ---- */
footer {
  border-top: 1px solid var(--section-line);
  padding: 28px clamp(20px, 6vw, 90px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242, 237, 227, 0.6);
}
footer a { color: rgba(224, 179, 60, 0.8); }
footer a:hover { color: var(--cream); }

/* ---- Toast (email-copied confirmation) ---- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(12px);
  background: var(--navy-card);
  border: 1px solid var(--gold);
  color: var(--cream);
  font-size: 14px;
  padding: 12px 22px;
  border-radius: 999px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease, transform 260ms ease;
  z-index: 200;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.toast-action {
  color: var(--gold);
  font-weight: 500;
  border-bottom: 1px solid rgba(224, 179, 60, 0.45);
  padding-bottom: 1px;
  white-space: nowrap;
}
.toast-action:hover { color: var(--cream); border-bottom-color: var(--cream); }

/* ---- Reveal-on-scroll ---- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms cubic-bezier(.22, .7, .24, 1), transform 620ms cubic-bezier(.22, .7, .24, 1);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .ico-link, .card { transition: none; }
}
/* ---- Header links to the sub-pages ----
   Sit to the left of the "Get in touch" pill, in the same mono style as
   the section labels. margin-left:auto keeps them beside the pill, not
   centred. Hidden on narrow screens — the wordmark + pill already fill
   a phone header; the strip above the footer covers phones instead. */
.hdr-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 30px);
  margin-left: auto;
  margin-right: clamp(16px, 2.6vw, 34px);
}
.hdr-nav a {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242, 237, 227, 0.62);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid rgba(224, 179, 60, 0.45); /* always underlined so they read as links */
  white-space: nowrap;
  transition: color 200ms ease, border-color 200ms ease;
}
.hdr-nav a:hover,
.hdr-nav a:focus-visible { color: var(--gold); border-bottom-color: var(--gold); outline: none; }
.hdr-nav a[aria-current="page"] { color: var(--gold); }
@media (max-width: 980px) { .hdr-nav { display: none; } }

/* ---- Menu button + panel (phones and tablets, under 980px) ----
   Takes over from .hdr-nav once that is hidden. The panel sits outside the
   header (the stuck header's backdrop-filter would otherwise trap a fixed
   child) and fills the screen below it. Behaviour lives in menu.js. */
.menu-btn { display: none; }
.site-menu {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  background: var(--navy-card);
  border-top: 1px solid var(--gold-border);
  padding: 8px clamp(20px, 6vw, 48px) 32px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.site-menu[hidden] { display: none; }
.site-menu:focus { outline: none; }
.menu-open, .menu-open body { overflow: hidden; }
.menu-open .site-header {
  background: var(--navy);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
.menu-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--cream);
}
.menu-link:hover { color: var(--cream); }
.menu-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.menu-link-t {
  display: block;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.menu-link[aria-current="page"] .menu-link-t { color: var(--gold); }
.menu-link-d {
  display: block;
  margin-top: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.menu-arw {
  flex: 0 0 auto;
  color: var(--gold);
  font-size: 24px;
  transition: transform 200ms ease;
}
.menu-link:hover .menu-arw,
.menu-link:focus-visible .menu-arw { transform: translateX(4px); }
.menu-contact {
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.menu-contact-lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}
.menu-contact-btns { display: flex; gap: 12px; }
.menu-cta {
  flex: 1 1 0;
  min-height: 48px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
}
.menu-cta.solid { background: var(--gold); color: var(--navy); }
.menu-cta.solid:hover { background: var(--cream); color: var(--navy); }
.menu-cta.line { border: 1px solid rgba(224, 179, 60, 0.45); color: var(--cream); }
.menu-cta.line:hover { border-color: var(--gold); color: var(--cream); }
.menu-cta:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
@media (max-width: 980px) {
  .menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin: 0 -10px 0 -6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--cream);
    cursor: pointer;
  }
  .menu-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
  .menu-btn .mi-close { display: none; }
  .menu-btn[aria-expanded="true"] .mi-open { display: none; }
  .menu-btn[aria-expanded="true"] .mi-close { display: block; }
  .header-pill { margin-left: auto; }
}
/* Phones: the pill drops its "Get in touch" words to make room for the
   menu button; the two gold icons stay, and the words reappear inside
   the open menu above the WhatsApp / Email buttons. */
@media (max-width: 480px) {
  .pill-label, .pill-divider { display: none; }
  .header-pill { padding: 4px 5px; gap: 7px; }
}

/* ---- Case studies (/portfolio) ----
   Two columns: the scoreboard on the left, the story on the right, so a
   reader who only scans the numbers still gets the whole argument. Stacks
   below 900px. This is the only genuinely new block on the site — every
   other part of /portfolio reuses the classes above. */
.cases { max-width: 1240px; }
.case {
  display: grid;
  grid-template-columns: 1fr minmax(200px, 250px);
  gap: clamp(22px, 2.6vw, 38px);
  background: var(--navy-card);
  border: 1px solid var(--gold-border);
  border-radius: 18px;
  padding: clamp(24px, 3vw, 44px);
  transition: border-color 320ms ease;
}
.case:hover { border-color: rgba(224, 179, 60, 0.38); }
.case + .case { margin-top: clamp(24px, 4vh, 40px); }

.case-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.7;
  margin-bottom: clamp(16px, 2.4vh, 22px);
}
/* The function half stays whole, so the label breaks between sector and
   function rather than mid-phrase in the narrow left column. */
.case-eyebrow .fn { white-space: nowrap; }
.case-figure {
  font-size: clamp(56px, 7vw, 84px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--gold);
}
.case-figure-note {
  margin: 14px 0 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--cream);
  text-wrap: pretty;
}
.case-stats {
  list-style: none;
  margin: clamp(22px, 3.4vh, 32px) 0 0;
  padding: 0;
}
.case-stats li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
}
.case-stats .val {
  flex: 0 0 auto;
  min-width: 2.4em;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cream);
}
.case-stats .lbl {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.45;
  color: var(--muted);
}
.case-measured {
  margin-top: clamp(20px, 3vh, 28px);
  padding-top: 14px;
  border-top: 1px solid rgba(224, 179, 60, 0.22);
}
.case-measured .mono {
  display: block;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-bottom: 8px;
}
.case-measured p {
  margin: 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--muted);
}

/* The label already carries the rule above the figures. */
.case-stats-lbl + .case-stats { margin-top: 0; }
.case-stats-lbl + .case-stats li:first-child { border-top: 0; padding-top: 0; }
/* Emphasis inside a case paragraph, for a word the copy leans on. */
.case-story em { font-style: italic; color: var(--cream); }
.case-title {
  margin: 0 0 clamp(18px, 2.6vh, 26px);
  font-size: clamp(23px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}
.case-lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(242, 237, 227, 0.5);
  margin-bottom: 8px;
}
.case-story p {
  margin: 0;
  max-width: 62ch;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--body-text);
  text-wrap: pretty;
}
.case-story > * + .case-lbl { margin-top: clamp(20px, 3vh, 28px); }
.case-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 62ch;
}
.case-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--body-text);
}
.case-list li::before {
  content: '';
  flex: 0 0 auto;
  width: 14px;
  height: 1px;
  background: var(--gold);
  margin-top: 0.75em;
}

/* Sector label above the case title, on the left where reading starts. */
/* The two column headers — "Asset management" on the left, "At a glance"
   on the right — are one rule so they match in size, colour, underline and
   height, and start on the same line as each other. */
.case-sector,
.case-stats-lbl {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 clamp(14px, 2vh, 20px);
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(224, 179, 60, 0.45);
}
/* "At a glance" leads with the scale figures; the headline number closes it. */
.case-hero {
  margin-top: clamp(24px, 3.4vh, 34px);
  padding-top: clamp(18px, 2.6vh, 24px);
  border-top: 1px solid rgba(224, 179, 60, 0.22);
}
.case-hero .case-measured { border-top-color: var(--hairline); }

/* The three build steps as a flow, so the section is not four paragraphs
   of prose. Runs across the card, turns into a column under 760px. */
/* The flow sits INSIDE the story column, between the situation and the
   outcome, so the card reads in the order the work happened. The two end
   cards sit above the step panel — in at the left, out at the right — which
   leaves the three steps a full third of the width each. Grid areas place
   them, so the source order stays in → down → steps → up → out for anyone
   reading it with a screen reader. */
.case-flow {
  margin: clamp(20px, 3vh, 28px) 0 clamp(24px, 3.4vh, 32px);
}
.flow-wrap {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(10px, 1.2vw, 18px);
  grid-template-areas:
    "cin  .     cout"
    "cdn  .     cup"
    "cst  cst   cst";
}
.flow-node.in  { grid-area: cin; }
.flow-node.out { grid-area: cout; }
.flow-link.down { grid-area: cdn; }
.flow-link.up   { grid-area: cup; }
.flow-steps     { grid-area: cst; }

.flow-link {
  display: block;
  padding: 6px 0;
  text-align: center;
  color: var(--gold);
  font-size: 15px;
  line-height: 1;
}
.flow-link.down::before { content: '↓'; }
.flow-link.up::before { content: '↑'; }

.flow-steps {
  background: rgba(21, 27, 51, 0.55);
  border: 1px solid var(--gold-border);
  border-radius: 14px;
  padding: clamp(12px, 1.2vw, 16px);
}
.flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  gap: clamp(8px, 1vw, 14px);
}
.flow-node {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(242, 237, 227, 0.03);
  border: 1px solid var(--gold-border);
  border-radius: 12px;
  padding: clamp(12px, 1.2vw, 16px) clamp(11px, 1.1vw, 15px);
}
/* Colour A: the two ends, matching each other. */
.flow-node.in,
.flow-node.out {
  border-color: rgba(224, 179, 60, 0.5);
  background: linear-gradient(180deg, rgba(224, 179, 60, 0.09), rgba(224, 179, 60, 0.03));
}
.flow-step {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.flow-txt {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.45;
  color: var(--body-text);
  text-wrap: pretty;
}
.flow-arrow {
  flex: 0 0 auto;
  align-self: center;
  color: var(--gold);
  font-size: 15px;
  line-height: 1;
}
.flow-arrow::before { content: '→'; }
@media (max-width: 760px) {
  .flow-wrap {
    grid-template-columns: 1fr;
    grid-template-areas: "cin" "cdn" "cst" "cup" "cout";
  }
  .flow { flex-direction: column; }
  .flow-arrow::before { content: '↓'; }
  .flow-link.up::before { content: '↓'; }
}

/* The case card spans two columns; a before/after figure runs the full
   width underneath both. Panels sit side by side, stacking with the card. */
/* The before/after pair sits in the story column, in the same slot case 1
   gives its flow: the reader meets the picture already knowing what the
   tangle is. Each panel carries its own three lines, so the same three
   rows — chasing, checking, tracking — can be read across the pair. */
.case-viz {
  margin: 10px 0 clamp(24px, 3.4vh, 32px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.4vw, 20px);
}
.viz-panel {
  background: rgba(242, 237, 227, 0.03);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: clamp(12px, 1.6vw, 18px);
}
.viz-cap {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.viz { display: block; width: 100%; height: auto; }
.viz-legend {
  list-style: none;
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.viz-legend li { display: flex; flex-direction: column; gap: 2px; }
.viz-legend .k {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.viz-legend .v {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--body-text);
}
/* On a phone the drawing scales to about 0.45, which would render the
   11px labels at 5px and the hairlines at a third of a pixel. Bump the
   type in user units and hold the strokes at their authored width. */
@media (max-width: 480px) {
  .viz text { font-size: 22px; letter-spacing: 0.5px; }
  .viz path, .viz line { vector-effect: non-scaling-stroke; }
  /* At that size VALIDATE and DASHBOARD touch, so drop the middle one
     a line in the after panel. */
  .viz-panel:last-child .viz text:nth-of-type(2) { transform: translateY(26px); }
}
.case-list.tight li { font-size: 15px; }
.case-list .arrow { color: var(--gold); padding: 0 4px; }
.case-foot {
  margin-top: clamp(20px, 3vh, 26px) !important;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
  font-size: 13px !important;
  color: var(--muted) !important;
}
@media (max-width: 900px) {
  .case-viz { grid-template-columns: 1fr; }
}

/* Stacked: the scoreboard sits above the story, with a hairline between
   them instead of the column gap doing the separating. */
@media (max-width: 900px) {
  .case { grid-template-columns: 1fr; gap: clamp(22px, 4vw, 30px); }
  .case-score { padding-top: clamp(20px, 3vw, 26px); border-top: 1px solid var(--hairline); }
}

/* Small phones (375px iPhones and narrower): the headline floor of 3rem
   lets a long single highlighted word ("conversation.") touch or run past
   the edge, so let it scale down a little further there (45px at 375
   instead of 48). Wider screens stay identical to index.html. */
@media (max-width: 390px) {
  h1, .closing-body h2 { font-size: clamp(2.25rem, 12vw, 5.375rem); }
}