/* RaiseFM: shared styles */

:root {
  /* Brand */
  --navy: #03133E;
  --navy-2: #0B2160;
  --blue: #0084FF;          /* logo blue: large text on light, accents, text on navy */
  --blue-display: #0074F5;  /* large headline text on light */
  --blue-ink: #0062D6;      /* buttons with white text, links on light */
  --orange: #FF7900;        /* decoration, and text on navy only */
  --orange-display: #D45A00;/* large orange text on light */
  --orange-ink: #B84E00;    /* small orange text on light */
  --ice: #D9F6FC;

  /* Neutrals: one very pale ice canvas behind every light section, dark cards on top
     (homepage widget handoff, Alex 2026-10-29) */
  --bg: #EAF7FE;
  --surface: #F9FCFF;
  --ink: var(--navy);
  --body: #344B72;          /* paragraph text on the canvas */
  --muted: #46597D;         /* small text; passes AA on the canvas */
  --rule: #CBDDEA;
  --on-dark-muted: #B9C3DA;

  /* Dark cards and panels */
  --card: #061744;
  --card-deep: #03123A;
  --card-line: #244979;
  --card-blue: #4DA8FF;     /* labels and accents on navy */

  /* Type */
  --font-display: "Inter Tight", "Inter", Arial, sans-serif;
  --font-body: "Inter", system-ui, Arial, sans-serif;
  /* small uppercase labels and numbers, styled like the hero eyebrow */
  --font-label: "Inter", system-ui, Arial, sans-serif;

  /* Spacing (spacious) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6.5rem;

  --radius: 6px;
  --radius-card: 8px;
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(2.75rem, 1.5rem + 3vw, 3.75rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--blue-ink); }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -3rem;
  background: var(--navy);
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 100;
}
.skip-link:focus { top: 1rem; }

/* ---------- Buttons and links ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.6rem 1.15rem;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 200ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: 0.9rem 1.6rem; font-size: 1.05rem; }

.btn-primary { background: var(--blue-ink); color: #fff; }
.btn-primary:hover { background: #0052B4; box-shadow: 0 4px 0 var(--navy); transform: translateY(-2px); }

.btn-orange { background: var(--orange); color: var(--navy); }
.btn-orange:hover { background: #FF8A1F; box-shadow: 0 4px 0 #000; transform: translateY(-2px); }
.btn-outline-light { background: transparent; border-color: rgba(255, 255, 255, 0.6); color: #fff; }
.btn-outline-light:hover { background: #fff; border-color: #fff; color: var(--navy); transform: translateY(-2px); }

.text-link {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  padding: 0.6rem 0;
  background-image: linear-gradient(var(--orange), var(--orange));
  background-size: 100% 2px;
  background-position: 0 calc(100% - 0.35rem);
  background-repeat: no-repeat;
  transition: background-size 250ms var(--ease);
}
.text-link:hover { background-size: 40% 2px; }
.text-link::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.5rem;
  color: var(--orange);
  transition: transform 200ms var(--ease);
}
.text-link:hover::after { transform: translateX(3px); }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(234, 247, 254, 0.92);  /* the ice canvas, once the page scrolls */
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms;
}
.site-header.is-scrolled { border-bottom-color: var(--rule); }

.header-inner {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4.5rem);
  min-height: 76px;
}
/* The header and hero use a wider frame than the content sections, matching the concept */
.header-inner,
.hero .container {
  max-width: 1520px;
  padding: 0 clamp(1rem, 6.4vw, 7rem);
}
.brand img { width: clamp(132px, 12.5vw, 210px); height: auto; }

.site-nav { flex: 1; display: flex; align-items: center; gap: var(--space-4); }
.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3.25rem);
  list-style: none;
  margin: 0 auto 0 0; padding: 0;
}
.nav-list > li > a,
.nav-trigger {
  color: var(--navy);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  padding: 0.5rem 0;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  transition: border-color 200ms;
}
.nav-list > li > a:hover,
.nav-trigger:hover,
.nav-trigger.is-current { border-bottom-color: var(--orange); }
.nav-trigger { display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; }
.nav-trigger::after {
  content: "";
  width: 0.4rem; height: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 200ms var(--ease);
}
.nav-trigger[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.nav-cta { white-space: nowrap; }
@media (min-width: 861px) and (max-width: 1080px) {
  .header-inner, .nav-list { gap: 1.25rem; }
  .nav-list > li > a, .nav-trigger { font-size: 0.95rem; }
}

/* Large menus under Services and Raise Types (stacked lists inside the phone menu) */
.mega {
  position: absolute;
  top: calc(100% - 4px);
  left: 50%;
  width: min(880px, calc(100vw - 2rem));
  padding: var(--space-3);
  background: var(--navy);
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(3, 19, 62, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity 160ms ease, transform 220ms var(--ease), visibility 0s linear 220ms;
}
/* Bridges the gap so the pointer stays in the menu on its way down from the trigger */
.mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 16px; }
.nav-item-menu.is-open .mega {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
.mega-services { width: min(700px, calc(100vw - 2rem)); }
.mega-types { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-3); }
.mega-label {
  margin: 0 0 var(--space-1);
  padding: 0 0.75rem;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mega-group-path .mega-label { color: #4DA8FF; }
.mega-group-sector .mega-label { color: var(--orange); }
/* Services panel: platform pages in their own group under the four services */
.mega-group-platform { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid rgba(255, 255, 255, 0.12); }
.mega-group-platform .mega-label { color: #4DA8FF; }
.mega-list { list-style: none; margin: 0; padding: 0; }
.mega-services .mega-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem var(--space-2); }
.mega-list a {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.8rem 0.75rem;
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  transition: background-color 160ms;
}
.mega-list a:hover,
.mega-list a:focus-visible { background: rgba(255, 255, 255, 0.08); }
.mega-icon,
.mega-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: #4DA8FF;
}
.mega-group-sector .mega-icon { color: var(--orange); }
.mega-num { font-family: var(--font-label); font-weight: 600; font-size: 0.85rem; color: var(--orange); }
.mega-text { display: grid; gap: 0.2rem; }
.mega-title { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; }
.mega-list a[aria-current="page"] .mega-title { color: var(--ice); }
.mega-desc { color: var(--on-dark-muted); font-size: 0.9rem; line-height: 1.45; }
.mega-foot {
  grid-column: 1 / -1;
  display: block;
  margin-top: var(--space-2);
  padding: var(--space-2) 0.75rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
}
.mega-foot::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.5rem;
  color: var(--orange);
  transition: transform 200ms var(--ease);
}
.mega-foot:hover::after, .mega-foot:focus-visible::after { transform: translateX(4px); }

/* Work: the word links to the homepage's Prior Work section; the chevron (or hover) opens a
   smaller menu that sits under it, level with the other menus */
.nav-item-split { position: relative; display: flex; align-items: center; gap: 0.3rem; }
.nav-list > li > a.is-current { border-bottom-color: var(--orange); }
.nav-trigger.nav-trigger-split { gap: 0; justify-content: center; min-width: 24px; min-height: 44px; padding: 0.5rem 0.2rem; }
.nav-trigger.nav-trigger-split:hover { border-bottom-color: transparent; }
.mega-work { top: calc(50% + 34px); width: min(470px, calc(100vw - 2rem)); }
/* Services and Raise Types (Alex, 2026-11-09): the word links to a homepage section like Work, but their
   large panels keep centering on the nav, not on the item */
.nav-item-split.nav-item-wide { position: static; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  position: absolute;
  left: 11px;
  width: 22px; height: 2px;
  background: var(--navy);
  transition: transform 250ms var(--ease), opacity 200ms;
}
.nav-toggle-bars { top: 21px; }
.nav-toggle-bars::before { content: ""; left: 0; top: -7px; }
.nav-toggle-bars::after { content: ""; left: 0; top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Shared type ---------- */

/* Small uppercase label with a short orange rule, like the hero eyebrow */
.eyebrow {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-ink);
  margin: 0 0 var(--space-2);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.eyebrow::after {
  content: "";
  flex: none;
  width: 48px; height: 2px;
  background: var(--orange);
}
.eyebrow-on-dark { color: var(--orange); }
/* On navy, highlighted words use the brand orange, which passes on dark (the display orange is for light backgrounds) */
.dark-panel .hl-orange { color: var(--orange); }

.section { padding: var(--section-y) 0; }
/* Homepage: sections sit a little closer together (Alex, 2026-11-09) */
.has-hero { --section-y: clamp(2.2rem, 1.2rem + 2.4vw, 3rem); }

.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-3);
  max-width: 20ch;
  text-wrap: balance;
}
/* Highlighted words in a headline: bright blue, or orange where a design calls for it */
.hl { color: var(--blue-display); }
.hl-orange { color: var(--orange-display); }

.section-lede {
  font-size: 1.1rem;
  color: var(--body);
  max-width: 58ch;
  margin: 0 0 var(--space-4);
}

/* Navy panel on the ice canvas, used where a whole section's content sits on dark (Why Alex, the
   contact widget). Its background is the shared Prior Work one (see .story below). */
.dark-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  border-radius: var(--radius-card);
  padding: clamp(1.75rem, 1rem + 3.5vw, 4rem);
}
.dark-panel .section-title { color: #fff; }

/* Pale radio arcs at a section's edge, behind the content, with one orange dot */
.has-arcs { position: relative; isolation: isolate; overflow: clip; }
.has-arcs::before,
.has-arcs::after {
  content: "";
  position: absolute;
  z-index: -1;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}
.has-arcs::before {
  top: -9rem; right: -14rem;
  width: 34rem;
  border: 1px solid rgba(0, 116, 245, 0.16);
  background: radial-gradient(circle at 14.6% 85.4%, var(--orange) 0 4px, transparent 5px);
}
.has-arcs::after {
  top: -4rem; right: -9rem;
  width: 24rem;
  border: 1px solid rgba(0, 116, 245, 0.1);
}
/* the FAQ's arcs rise from the lower left, below the heading */
.faq.has-arcs::before { top: auto; right: auto; bottom: -26rem; left: -18rem; background: radial-gradient(circle at 85.4% 14.6%, var(--orange) 0 4px, transparent 5px); }
.faq.has-arcs::after { top: auto; right: auto; bottom: -20rem; left: -12rem; }

.section-kicker {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-4);
}

.fine-print {
  font-size: 0.85rem;
  color: var(--muted);
  margin: var(--space-4) 0 0;
}

/* ---------- Hero ---------- */

/* Tokens from the hero handoff package (reference/hero-handoff/hero-tokens.css) */
.hero {
  --rf-ivory: #fefefa;
  --rf-ink: #06113c;
  --rf-body: #101a48;
  --rf-button-blue: #003afd;
  --rf-deep-blue: #102693;
  --rf-orange: #ff4b12;
  --rf-dial-white: #eaf4ff;
  --rf-font-heading: "Inter Tight", "Inter", Arial, sans-serif;
  --rf-font-body: "Inter", Arial, sans-serif;
  --rf-font-tuner: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  /* the scene is 16:9, so the hero matches it on most desktops */
  --hero-h: clamp(640px, 56.25vw, 941px);

  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: var(--hero-h);
  margin-top: -76px;           /* run under the header */
  padding: calc(76px + var(--space-4)) 0 var(--space-5);
  background: var(--rf-ivory);
  color: var(--rf-ink);
  font-family: var(--rf-font-body);
}

/* Scene: always covers the whole hero, whatever its height, anchored bottom right.
   .hero-scene is the 16:9 photo drawn as a real box (the same size and position as
   background-size: cover), so the radio inside it grows and shrinks with the photo
   and stays on the ledge at every screen size. */
.hero-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  container-type: size;
}
.hero-scene {
  --scene-w: max(100cqw, 100cqh * 16 / 9);
  position: absolute;
  width: var(--scene-w);
  aspect-ratio: 16 / 9;
  left: calc(100cqw - var(--scene-w));
  top: calc(100cqh - var(--scene-w) * 9 / 16);
  background: url("../assets/images/hero-scene.webp") center / 100% 100% no-repeat;
}
/* Warm ivory over the calm left side, for legibility */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(254, 254, 250, 0.96) 0%, rgba(254, 254, 250, 0.9) 30%, rgba(254, 254, 250, 0.5) 42%, rgba(254, 254, 250, 0) 54%);
}

/* Radio standing on the stone ledge, lower right; the right edge crops near the knob.
   Placed in the photo's own proportions (Alex, 2026-11-04: smaller and lower, so its feet rest on
   the stone instead of its back edge). The ::before is the contact shadow under the feet. */
.hero-radio {
  position: absolute;
  right: -1.5%;
  bottom: 13.8%;
  width: 33.5%;
  aspect-ratio: 2098 / 750;
  z-index: 2;
  filter: drop-shadow(0 10px 14px rgba(30, 10, 0, 0.35));
}
.hero-radio::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 3%;
  right: 2%;
  bottom: 0;
  height: 13%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(28, 10, 0, 0.75), rgba(28, 10, 0, 0.35) 70%, rgba(28, 10, 0, 0));
}
.hero-radio img { width: 100%; height: auto; display: block; }

/* Live tuner, in the radio cutout's own 2098 x 750 coordinates */
.hero-tuner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  font-family: var(--rf-font-tuner);
  overflow: visible;
}
.tuner-glass { fill: url(#tuner-glass-fill); stroke: rgba(0, 0, 0, 0.6); stroke-width: 2; }
.tuner-ticks { stroke: #2f8fff; stroke-width: 3; fill: none; filter: url(#tuner-glow); }
.tuner-line { stroke: #2f8fff; stroke-width: 3; filter: url(#tuner-glow); }
.tuner-value {
  fill: var(--rf-dial-white);
  font-size: 58px;
  font-weight: 600;
  text-anchor: middle;
}
.tuner-label {
  fill: var(--rf-dial-white);
  font-size: 80px;
  font-weight: 700;
  transition: fill 400ms ease;
}
.tuner-sub { fill: rgba(234, 244, 255, 0.6); font-size: 32px; font-weight: 600; letter-spacing: 3px; }
.tuner-needle {
  fill: #ff7a1a;
  filter: url(#tuner-glow);
  transition: transform 2200ms cubic-bezier(0.45, 0, 0.25, 1);
}
.tuner-needle.is-resetting { transition-duration: 900ms; }
.tuner-band.is-on .tuner-label { fill: #ff8a3d; }
.tuner-button rect { fill: #070d1f; stroke: rgba(255, 255, 255, 0.12); stroke-width: 2; transition: stroke 400ms ease; }
.tuner-button text {
  fill: var(--rf-dial-white);
  font-size: 40px;
  font-weight: 600;
  text-anchor: middle;
  transition: fill 400ms ease;
}
.tuner-button.is-on rect { stroke: #ff7a1a; stroke-width: 4; filter: url(#tuner-glow); }
.tuner-button.is-on text { fill: #ff8a3d; }

/* Copy */
.hero-inner { position: relative; z-index: 3; }
.hero-copy { max-width: 37.5rem; }

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: 0 0 var(--space-3);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--rf-button-blue);
}
.hero-eyebrow::after { content: ""; flex: none; width: 64px; height: 2px; background: var(--rf-orange); }

.hero-title {
  margin: 0 0 var(--space-4);
  font-family: var(--rf-font-heading);
  font-weight: 800;
  font-size: clamp(2.7rem, 1rem + 4.4vw, 5.3rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--rf-ink);
}
.hero-title em { font-style: italic; color: var(--rf-orange); padding-right: 0.04em; }
.hero-title-l3 { color: var(--rf-deep-blue); }
.hero-title-l4 { color: var(--rf-button-blue); }

.hero-lede {
  max-width: 31rem;
  margin: 0 0 var(--space-5);
  font-size: clamp(1.15rem, 0.9rem + 0.6vw, 1.5rem);
  line-height: 1.35;
  color: var(--rf-body);
}
.hero-byline {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 var(--space-3);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rf-ink);
}
.hero-byline::after { content: ""; flex: none; width: 104px; height: 1.5px; background: var(--rf-button-blue); }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}
.hero-btn {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0.95rem 2rem;
  border-radius: 8px;
  background: var(--rf-button-blue);
  color: #fff;
  font-weight: 500;
  font-size: 1.15rem;
  text-decoration: none;
  transition: background-color 200ms, transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.hero-btn:hover { background: #002fd0; transform: translateY(-2px); box-shadow: 0 4px 0 var(--rf-ink); }
.btn-arrow::after {
  content: "\2192";
  margin-left: 0.75rem;
  transition: transform 200ms var(--ease);
}
.btn-arrow:hover::after { transform: translateX(3px); }
.hero-link {
  padding: 0.4rem 0;
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--rf-button-blue);
  text-decoration: none;
  border-bottom: 2px solid var(--rf-orange);
}
.hero-link:hover { border-bottom-color: var(--rf-button-blue); }

/* Header floats over the hero until the page scrolls */
.has-hero .site-header:not(.is-scrolled) { background: transparent; backdrop-filter: none; }
.has-hero .site-header:not(.is-scrolled) .nav-cta,
.has-subhero .site-header:not(.is-scrolled) .nav-cta {
  background: rgba(255, 255, 255, 0.92);
  color: #003afd;
  border-color: #003afd;
}

/* ---------- Subpage hero ---------- */

/* Alex's Cornflower Mist handoff (2026-11-05; Website Concepts/RaiseFM Subpage Hero Handoff in the vault).
   Every subpage except Contact and the individual case studies, which keep their photo heroes.
   A flat light-blue band: the page's own copy across the full container width (Alex, 2026-11-05),
   a static radio dial under it, and the page's place on the site (RaiseFM / Services) under the dial
   at the left. No arcs, gradients, shadows, images or motion. The dial markup is the same on every page.
   Alex found the handoff's #D3E5F8 read as grey and asked for a clearer blue (2026-11-05). */
.subhero {
  --sub-bg: #c8e4ff;
  --sub-ink: #06113c;
  --sub-blue: #003afd;
  --sub-orange: #ff4b12;
  --dial-h: 64px;
  --needle-x: calc(740 / 1080 * 100%);   /* the needle's place on the 1080-wide dial; the same on every page */
  background: var(--sub-bg);
  color: var(--sub-ink);
  padding: clamp(40px, 5vw, 72px) 0 24px;
}
/* the header continues the band until the page scrolls */
.has-subhero .site-header:not(.is-scrolled) { background: #c8e4ff; backdrop-filter: none; }

.subhero-copy { max-width: none; }
.subhero .eyebrow {
  margin: 0 0 16px;
  color: var(--sub-blue);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}
.subhero .eyebrow::after { display: none; }
.subhero .page-title {
  max-width: none;
  margin: 0;
  font-weight: 800;
  font-size: clamp(2.5rem, 4.6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
  text-wrap: pretty;
}
.subhero .page-title em { color: var(--sub-orange); font-style: italic; padding-right: 0.04em; }
.subhero .page-lede {
  max-width: none;
  margin: 22px 0 0;
  text-wrap: pretty;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.5;
  color: var(--sub-ink);
}
.subhero .intro-actions { margin-top: 26px; gap: 1rem 1.75rem; }
.subhero .btn-primary {
  min-height: 48px;
  padding: 0.8rem 1.4rem;
  border-radius: 5px;
  background: var(--sub-blue);
  font-size: 1rem;
}
.subhero .btn-primary:hover { background: #002dc9; }
.subhero .btn:focus-visible { outline: 3px solid var(--sub-ink); outline-offset: 4px; }
.subhero .intro-proof {
  max-width: 22rem;
  color: #2b3a66;
  border-left: 2px solid var(--sub-blue);
}
.subhero .jump-links { margin-top: 26px; }
.subhero .jump-links a { border-color: var(--sub-ink); }
.subhero .jump-links a span { color: var(--sub-blue); }
.subhero .jump-links a:hover span { color: var(--card-blue); }

/* The dial: floating ticks with no baseline or box, stretched to the container's width.
   The ticks and needle keep their stroke widths as the dial stretches; the triangle above
   the needle is drawn here so it keeps its shape. */
.subhero-dial {
  position: relative;
  height: var(--dial-h);
  margin-top: 32px;
}
.dial-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.dial-svg path { fill: none; vector-effect: non-scaling-stroke; }
.dial-ticks { stroke: #0074f5; stroke-opacity: 0.65; stroke-width: 1.4px; }
.dial-needle { stroke: var(--sub-orange); stroke-width: 2.5px; }
.subhero-dial::before {
  content: "";
  position: absolute;
  left: var(--needle-x);
  top: calc(var(--dial-h) * 5 / 72);
  width: calc(var(--dial-h) * 14 / 72);
  height: calc(var(--dial-h) * 12 / 72);
  transform: translateX(-50%);
  background: var(--sub-orange);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.dial-fm {
  position: absolute;
  right: calc(20 / 1080 * 100%);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1;
}

/* the station line under the dial is the page's breadcrumb */
.subhero .subhero-station {
  margin: 12px 0 0;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sub-ink);
}
.subhero .subhero-station a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(6, 17, 60, 0.35);
  text-underline-offset: 3px;
}
.subhero .subhero-station a:hover { color: var(--sub-blue); text-decoration-color: currentColor; }

@media (max-width: 767px) {
  .subhero { --dial-h: 48px; padding: 36px 0 22px; }
  .subhero .page-title { font-size: clamp(2.25rem, 8.5vw, 3.25rem); }
  .subhero .page-lede { margin-top: 18px; }
  .subhero-dial { margin-top: 28px; }
  .dial-fm { font-size: 0.6875rem; }
  .subhero .subhero-station { font-size: 0.625rem; letter-spacing: 0.14em; }
}

/* ---------- Platform experience row ---------- */

.platforms-row { padding: calc(var(--section-y) * 1.1) 0 var(--section-y); }
/* Homepage: no divider under the logo row (Alex, 2026-11-09) */
.platforms-row .platform-logos { padding-bottom: 0; border-bottom: 0; }
.platforms-title { max-width: none; }
/* Seven marks in one row, sized to a shared optical height (--h on each img), not a shared width.
   Each mark takes its own width plus an equal share of the spare room, with tight side padding, so all
   seven fit (Alex, 2026-11-06). No cards or pills; a thin divider below. */
.platform-logos {
  list-style: none;
  display: flex;
  align-items: center;
  margin: var(--space-4) 0 0;
  padding: 0 0 var(--space-4);
  border-bottom: 1px solid var(--rule);
  font-size: 1rem;
}
.platform-logos li {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 4.5rem;
  padding: 0 0.45rem;
}
.platform-logos li + li { border-left: 1px solid var(--rule); }
.platform-logos img {
  height: var(--h, 2em);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
/* footnote marker: a small orange asterisk that links to the footer footnote */
.fn-ref { font-size: 0.55em; font-weight: 700; line-height: 0; vertical-align: super; margin-left: 0.1em; }
.fn-ref a { color: var(--orange-ink); text-decoration: none; padding: 0 0.15em; border-radius: 3px; }
.fn-ref a:hover { color: var(--navy); }
/* The platform heading's asterisk matches its blue highlight (Alex, 2026-11-09) */
.fn-ref-blue a { color: var(--blue-display); }

/* ---------- Problem: parts of a raise ---------- */

/* Copy on the left, the seven parts as a stacked tab list, then the navy readout */
.problem-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr);
  gap: var(--space-5);
  align-items: start;
}
.problem-head .section-lede { margin-bottom: 0; }
.parts {
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
  gap: 1rem;
  align-items: stretch;
}
.parts-list {
  display: grid;
  gap: 0.5rem;
  align-content: start;
}
.part {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 46px;
  padding: 0.5rem 0.85rem 0.5rem 0.6rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(3, 19, 62, 0.06);
  font: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.25;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 200ms, background-color 200ms, color 200ms;
}
/* chevron at the right of each row */
.part::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 0.45rem; height: 0.45rem;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.7;
}
.part:hover { border-color: var(--navy); }
.part-num {
  flex: none;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.74rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  transition: background-color 200ms, color 200ms;
}
.part[aria-selected="true"] {
  background: var(--card);
  border-color: var(--card);
  color: #fff;
}
.part[aria-selected="true"]::after { opacity: 1; }
.part[aria-selected="true"] .part-num { background: var(--orange); border-color: var(--orange); color: var(--navy); }

.parts-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  border-radius: var(--radius-card);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  box-shadow: 7px 7px 0 var(--orange);
  margin: 0 7px 7px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4);
}
.parts-panel-grid { display: grid; gap: var(--space-3); }
.parts-label {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-ink);
  margin: 0 0 0.5rem;
}
.parts-panel .parts-label { color: var(--orange); }
.parts-covers {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.6rem);
  line-height: 1.25;
  margin: 0;
}
.parts-missing {
  border-top: 1px solid #23396F;
  padding-top: var(--space-3);
}
.parts-missing p:last-child { margin: 0; color: #E4E9F5; font-size: 1.05rem; }
.parts-panel.is-changing .parts-panel-grid { animation: readout 350ms var(--ease); }

/* the seven parts as a connected track; lit segments show what's selected */
.parts-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.parts-track li {
  height: 6px;
  border-radius: 3px;
  background: #23396F;
  transition: background-color 300ms var(--ease);
}
.parts-track li.is-on { background: var(--orange); }

/* ---------- Engagement journey ---------- */

/* Copy, picker and scope button on the left; three navy stage cards on the right */
.journey-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.32fr) minmax(0, 0.68fr);
  gap: var(--space-5);
  align-items: start;
}
.journey-head .section-lede { margin-bottom: var(--space-4); }
.journey-picker { margin-bottom: var(--space-4); }
.journey-picker-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.journey-picker-options button {
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1.5px solid var(--navy);
  border-radius: 999px;
  background: transparent;
  color: var(--navy);
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color 200ms, color 200ms;
}
.journey-picker-options button:hover { background: var(--surface); }
.journey-picker-options button[aria-pressed="true"] { background: var(--navy); color: #fff; }

.journey-stages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.journey-stage {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(90% 45% at 100% 0%, rgba(0, 132, 255, 0.14), transparent 70%),
    var(--card);
  color: #fff;
  border: 1px solid var(--card-line);
  border-radius: var(--radius-card);
  padding: 1.4rem 1.25rem 1.25rem;
  transition: border-color 300ms var(--ease), box-shadow 300ms var(--ease), opacity 300ms var(--ease), transform 300ms var(--ease);
}
.stage-num {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--orange);
}
.stage-num::after { content: ""; width: 2rem; height: 2px; background: var(--orange); }
/* "Start here" sits on the top edge of the picked card, so it takes no height (Alex, 2026-11-05) */
.journey-here {
  position: absolute;
  top: 0; right: 1rem;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--orange);
  color: var(--navy);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(calc(-50% + 4px));
  transition: opacity 250ms var(--ease), transform 250ms var(--ease);
}
.journey-stage h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 0.8rem;
}
.journey-stage dl { margin: 0; flex: 1; display: flex; flex-direction: column; font-size: 0.92rem; line-height: 1.5; }
.journey-stage dl div { padding: 0.75rem 0; border-top: 1px solid var(--card-line); }
.journey-stage dt {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  margin-bottom: 0.3rem;
}
.journey-stage dd { margin: 0; color: #DCE4F3; }
/* "What you keep": an inset deeper panel with a bright blue rule, at the bottom of each card so the three line up */
.journey-stage dl .journey-output {
  margin: auto 0 0;
  padding: 0.8rem 0.9rem;
  background: var(--card-deep);
  border: 0;
  border-left: 3px solid var(--blue);
  border-radius: 4px;
}
.journey-output dt { color: var(--card-blue); }
.journey-output dd { color: #fff; font-weight: 600; }
.journey-stage .text-link { align-self: flex-start; color: #fff; }

/* Clicking a card picks it, like its button in the picker (Alex, 2026-11-09) */
.journey-stage[data-stage-card] { cursor: pointer; }
.journey-stages.has-pick .journey-stage { opacity: 0.6; }
.journey-stages.has-pick .journey-stage.is-picked {
  opacity: 1;
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange), 0 14px 30px -14px rgba(255, 121, 0, 0.55);
  transform: translateY(-4px);
}
.journey-stage.is-picked .journey-here { opacity: 1; transform: translateY(-50%); }
.journey-more { margin-top: 0; }

/* ---------- Raise types (homepage #paths) ---------- */

/* Six navy cards on the ice canvas, then a full-width "Start here" card. Offering paths carry
   blue accents and specialized raises orange. Hover or focus brightens a card's border;
   no card is selected by default. */
.paths-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-2) var(--space-5);
  align-items: end;
  margin-bottom: var(--space-4);
}
.paths-head .section-title { margin-bottom: 0; max-width: 22ch; }
.paths-head .section-lede { margin-bottom: 0; }
/* Blue accents for the three offering paths, orange for the three specialized raises. The cards carry no
   category badge and the section no legend (Alex, 2026-11-06); the colors alone tell them apart. */
.path-card { --path-accent: var(--card-blue); --path-glow: rgba(0, 132, 255, 0.5); }
.path-card-sector { --path-accent: var(--orange); --path-glow: rgba(255, 121, 0, 0.5); }

.path-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}
.path-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 17rem;
  padding: 1.6rem 1.5rem 1.4rem;
  color: #fff;
  text-decoration: none;
  background:
    radial-gradient(75% 85% at 100% 100%, rgba(0, 132, 255, 0.22), transparent 70%),
    var(--card);
  border: 1px solid rgba(77, 168, 255, 0.35);
  border-radius: var(--radius-card);
  transition: border-color 250ms, transform 250ms var(--ease), box-shadow 250ms var(--ease);
}
.path-card-sector {
  background:
    radial-gradient(75% 85% at 100% 100%, rgba(255, 121, 0, 0.2), transparent 70%),
    var(--card);
  border-color: rgba(255, 121, 0, 0.35);
}
/* Each card's illustration (cut from Alex's approved concept, assets/images/paths/) fills the right
   half; its left edge fades into the card, and a soft shade keeps the text over it readable */
.path-img {
  position: absolute;
  z-index: -2;
  top: 0; right: 0;
  width: 52%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 45%);
  mask-image: linear-gradient(90deg, transparent 0, #000 45%);
  transition: transform 500ms var(--ease);
}
.path-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, var(--card) 40%, rgba(6, 23, 68, 0.55) 62%, rgba(6, 23, 68, 0) 82%);
}
.path-kind {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  margin-bottom: 0.75rem;
}
/* small signal-bars mark after each category label */
.path-kind::after {
  content: "";
  flex: none;
  width: 1.1rem; height: 0.8rem;
  background: var(--path-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M0 16V7h3.5v9zm6 0V2h3.5v14zm6 0V0h3.5v16zm6 0V5h3.5v11z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M0 16V7h3.5v9zm6 0V2h3.5v14zm6 0V0h3.5v16zm6 0V5h3.5v11z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.path-tag {
  align-self: flex-start;
  font-family: var(--font-display);
  font-weight: 850;
  font-size: clamp(1.7rem, 1.3rem + 0.9vw, 2.1rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--blue-display);
  margin-bottom: 0.8rem;
}
.path-card .path-tag { color: var(--path-accent); }
.path-card h3 { font-size: 1.1rem; line-height: 1.3; margin: 0 0 0.55rem; color: #fff; max-width: 70%; }
.path-card p { color: var(--on-dark-muted); font-size: 0.92rem; line-height: 1.55; margin: 0 0 var(--space-3); flex: 1; max-width: 68%; }
.path-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  color: var(--path-accent);
  padding-bottom: 0.15rem;
  border-bottom: 1.5px solid currentColor;
}
.path-link::after { content: "\2192"; transition: transform 200ms var(--ease); }

.path-card:hover,
.path-card:focus-visible {
  border-color: var(--path-accent);
  box-shadow: 0 0 0 1px var(--path-accent), 0 18px 36px -18px var(--path-glow);
  transform: translateY(-3px);
}
.path-card:hover .path-img,
.path-card:focus-visible .path-img { transform: scale(1.05); }
.path-card:hover .path-link::after,
.path-card:focus-visible .path-link::after { transform: translateX(4px); }
.path-card:focus-visible { outline: 2px solid var(--path-accent); outline-offset: 3px; }

/* full-width "Start here" card under the six; its CTA looks like a button, but the whole card is one link */
.path-card.path-start {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "kind link" "title link" "body link";
  column-gap: var(--space-5);
  min-height: 0;
  margin-top: 1.1rem;
  padding: 1.6rem clamp(1.5rem, 3vw, 2.5rem);
}
/* the start-here scene sits between the copy and the button, fading out at both ends */
.path-start .path-img {
  right: clamp(9rem, 14vw, 13rem);
  width: 38%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 35%, #000 70%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 35%, #000 70%, transparent 100%);
}
.path-start .path-kind { grid-area: kind; }
.path-start h3 { grid-area: title; font-size: clamp(1.2rem, 1rem + 0.7vw, 1.5rem); max-width: none; }
.path-start p { grid-area: body; max-width: 34rem; margin: 0; }
.path-start .path-link {
  grid-area: link;
  align-self: center;
  white-space: nowrap;
  padding: 0.8rem 1.35rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--blue-ink);
  color: #fff;
  transition: background-color 200ms;
}
.path-start:hover .path-link,
.path-start:focus-visible .path-link { background: #0052B4; }

/* ---------- Workstreams ---------- */

.ws-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.3fr) minmax(0, 0.7fr);
  gap: var(--space-5);
  align-items: start;
}
.ws-head .section-lede { margin-bottom: 0; }
.ws-table {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 18px 40px -28px rgba(3, 19, 62, 0.45);
}
.ws-row {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.1fr) minmax(0, 1.1fr);
  border-bottom: 1px solid var(--rule);
  font-size: 0.92rem;
  line-height: 1.42;
}
.ws-row:last-child { border-bottom: 0; }
.ws-row > span { padding: 0.6rem 1rem; }
.ws-row > span + span { border-left: 1px solid var(--rule); }
.ws-header { background: var(--card); border-bottom: 0; box-shadow: inset -4px 0 0 var(--orange); }
.ws-header > span + span { border-left-color: rgba(255, 255, 255, 0.1); }
.ws-header span {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}
.ws-name { font-weight: 700; }
.ws-decision { font-style: italic; color: var(--body); }
.ws-decision q::before, .ws-decision q::after { color: var(--orange-ink); }
.ws-keep { color: var(--ink); }
/* column names repeated inside each row on phones, where the header row is hidden */
.ws-label { display: none; }

/* Interactive rows (Alex, 2026-11-06): a row turns navy with white text on hover or keyboard focus.
   On the homepage the whole row is one link (the workstream name, stretched over the row) to the same
   row on the Services page, with an arrow that slides in. */
.ws-row:not(.ws-header) { position: relative; transition: background-color 200ms, color 200ms; }
.ws-row:not(.ws-header) > span { transition: border-color 200ms, color 200ms; }
.ws-row:not(.ws-header):hover,
.ws-row:not(.ws-header):focus-within { background: var(--card); color: #fff; }
.ws-row:not(.ws-header):hover > span,
.ws-row:not(.ws-header):focus-within > span { color: #fff; border-color: var(--card-line); }
.ws-row:not(.ws-header):hover .ws-decision q::before,
.ws-row:not(.ws-header):hover .ws-decision q::after,
.ws-row:not(.ws-header):focus-within .ws-decision q::before,
.ws-row:not(.ws-header):focus-within .ws-decision q::after { color: var(--orange); }
.ws-row:not(.ws-header):hover .ws-label,
.ws-row:not(.ws-header):focus-within .ws-label,
.ws-row:not(.ws-header):hover .ws-more,
.ws-row:not(.ws-header):focus-within .ws-more,
.ws-row:not(.ws-header):hover .ws-scope,
.ws-row:not(.ws-header):focus-within .ws-scope { color: var(--on-dark-muted); }
.ws-link { color: inherit; text-decoration: none; }
.ws-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ws-link:focus-visible { outline: 0; }
.ws-row-link:focus-within { outline: 2px solid var(--blue); outline-offset: -2px; }
.ws-row-link > .ws-keep { padding-right: 2.6rem; }
.ws-row-link::after {
  content: "\2192";
  position: absolute;
  right: 1rem; top: 50%;
  font-weight: 700;
  color: var(--orange);
  opacity: 0;
  transform: translate(-6px, -50%);
  transition: opacity 200ms, transform 250ms var(--ease);
}
.ws-row-link:hover::after,
.ws-row-link:focus-within::after { opacity: 1; transform: translate(0, -50%); }

/* Services page version: the same table, full width, with more detail in each box */
.ws-table-full .ws-row { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 1.1fr); }
.ws-table-full .ws-row:not(.ws-header) > span { padding: 1rem 1.25rem; }
.ws-table-full .ws-header > span { padding: 0.7rem 1.25rem; }
.ws-table-full .ws-row { scroll-margin-top: 96px; }
.ws-scope, .ws-more { display: block; font-weight: 400; font-style: normal; color: var(--muted); }
.ws-scope { margin-top: 0.3rem; font-size: 0.86rem; line-height: 1.45; }
.ws-more { margin-top: 0.45rem; font-size: 0.88rem; line-height: 1.5; color: var(--body); }
.ws-table-full .ws-name { font-family: var(--font-display); font-size: 1.05rem; }
/* arriving from a homepage row: that row is marked with an orange edge */
.ws-row:target { box-shadow: inset 4px 0 0 var(--orange); }

/* ---------- Work and proof ---------- */

.work-meta {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-1);
}
.story-list { display: grid; gap: var(--space-4); }
/* Prior Work background (Alex, 2026-11-05): an orange glow, a faint grid and a radio arc in the lower
   left. On every full-width navy box (the Prior Work cards, .dark-panel, the homepage "Start here" card)
   and, of the smaller boxes, only the campaign plan readout. */
.story, .dark-panel, .path-card.path-start, .parts-panel, .aside-block.aside-la {
  background:
    radial-gradient(40% 60% at 0% 100%, rgba(255, 121, 0, 0.18), transparent 70%),
    var(--card);
}
.story::before, .dark-panel::before, .path-card.path-start::before, .parts-panel::before, .aside-la::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto auto -11rem -8rem;
  width: 22rem;
  aspect-ratio: 1;
  background: none;
  border-radius: 50%;
  border: 1px solid rgba(77, 168, 255, 0.25);
  pointer-events: none;
}
.story::after, .dark-panel::after, .path-card.path-start::after, .parts-panel::after, .aside-la::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0; bottom: 0;
  width: 45%; height: 65%;
  background-image:
    linear-gradient(rgba(77, 168, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 168, 255, 0.1) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(circle at 0 100%, #000 0, transparent 72%);
  mask-image: radial-gradient(circle at 0 100%, #000 0, transparent 72%);
  pointer-events: none;
}

/* Navy case-study panel: the campaign image and title on the left, the four facts on the right, an orange edge */
.story {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
  color: #fff;
  border-left: 4px solid var(--orange);
  border-radius: var(--radius-card);
}
.story-lead { display: flex; flex-direction: column; min-width: 0; }
/* The image runs to the card's edges. --focus (set on the img) picks which part of a square shows. */
.story-media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  border-bottom: 1px solid var(--card-line);
}
.story-head { padding: var(--space-3) clamp(1.25rem, 3vw, 2.5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.story .work-meta { color: var(--orange); }
.story h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.45rem, 1.1rem + 1vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}
.story .text-link { color: #fff; }
.story-body { margin: 0; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1.25rem, 3vw, 2.5rem); border-left: 1px solid var(--card-line); }
.story-body div {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: var(--space-3);
  padding: 0.85rem 0;
  border-top: 1px solid var(--card-line);
  font-size: 0.95rem;
}
.story-body div:first-child { border-top: 0; padding-top: 0; }
.story-body dt { font-weight: 600; color: #fff; }
.story-body dd { margin: 0; color: #E4E9F5; }

/* Homepage Prior Work: one story card at a time. The track scrolls sideways (swipe on touch
   screens) and snaps to each card; js/main.js adds the arrows and hides the scrollbar.
   Arrows sit under the cards on desktop and above them on smaller screens, where a card is
   taller than the screen. */
.work-slider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "track track" "controls more";
  align-items: center;
  gap: var(--space-3);
}
.story-track {
  grid-area: track;
  position: relative;
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
.slider-controls { grid-area: controls; }
.work-more { grid-area: more; }
.js .story-track { scrollbar-width: none; }
.js .story-track::-webkit-scrollbar { display: none; }
.story-track > .story { flex: 0 0 100%; scroll-snap-align: start; }
.slider-controls { display: none; align-items: center; gap: 0.6rem; }
.js .slider-controls { display: flex; }
.slider-arrow {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  padding: 0;
  border: 1.5px solid var(--navy);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--navy);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 200ms var(--ease), color 200ms var(--ease), opacity 200ms;
}
.slider-arrow[hidden] { display: none; }
.slider-prev::before { content: "\2190"; }
.slider-next::before { content: "\2192"; }
.slider-arrow:hover { background: var(--navy); color: #fff; }
/* Pause: two bars. Play, once paused: a triangle. */
.slider-toggle::before {
  content: "";
  width: 14px; height: 14px;
  background: linear-gradient(90deg, currentColor 0 36%, transparent 36% 64%, currentColor 64%);
}
.slider-toggle.is-paused::before {
  background: currentColor;
  clip-path: polygon(14% 0, 100% 50%, 14% 100%);
}
.slider-count {
  margin-left: 0.4rem;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* Experience in numbers: three columns split by thin rules, blue figures */
.proof-title { margin: var(--space-6) 0 var(--space-3); }
.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.proof { margin: 0; padding: 0 clamp(1rem, 2.5vw, 2rem); }
.proof:first-child { padding-left: 0; }
.proof:last-child { padding-right: 0; }
.proof + .proof { border-left: 1px solid var(--rule); }
.proof-figure {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 1.8rem + 2.4vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--blue-display);
  margin: 0 0 var(--space-2);
}
.proof-what { font-weight: 500; margin: 0 0 var(--space-3); max-width: 24rem; }
.proof dl { margin: 0; font-size: 0.85rem; }
.proof dl div {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 0.5rem;
  padding: 0.55rem 0;
  border-top: 1px dashed var(--rule);
}
.proof dt { font-family: var(--font-label); font-weight: 600; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); padding-top: 0.15rem; }
.proof dd { margin: 0; color: var(--muted); }
/* Homepage: the definition as a plain line, no label (Alex, 2026-11-09) */
.proof-def { margin: 0; padding-top: 0.55rem; border-top: 1px dashed var(--rule); font-size: 0.85rem; color: var(--muted); max-width: 24rem; }

/* ---------- Brands ---------- */

/* Logo wall: full-color marks in a ruled grid, 5 across (4 on tablets, 2 on phones).
   Each img sets --h in em so the marks look the same size; the grid's font-size scales them all,
   and --logo-max caps the widest wordmarks. Alex, 2026-11-05: the space around each logo is 25% less
   than at first (smaller padding, larger logos), at every screen size. */
.brand-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--surface);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  border-radius: var(--radius-card);
  overflow: hidden;
  font-size: 1.2rem;
  --logo-max: 9.6em;
}
.brand-grid .brand-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 7.25rem;
  padding: 1.125rem 0.75rem;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.brand-grid img {
  display: block;
  height: var(--h, 2em);
  width: auto;
  max-width: min(100%, var(--logo-max));
  object-fit: contain;
}
/* "More companies worked with": small name tiles until their logos arrive */
.brand-grid-more {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.5rem;
}
.brand-grid-more .brand-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-align: center;
}
.brand-mark {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 0.86rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--navy);
}
.brand-grid-more img { display: block; max-width: 100%; height: 1.5rem; width: auto; object-fit: contain; }
.brands-more { margin-top: var(--space-4); }
.brands-more summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1.5px solid var(--navy);
  border-radius: 999px;
  background: var(--surface);
  font-weight: 600;
}
.brands-more summary::-webkit-details-marker { display: none; }
.brands-more summary::after { content: "+"; font-family: var(--font-label); font-weight: 600; color: var(--orange-ink); }
.brands-more[open] summary::after { content: "\2212"; }
.brands-more[open] summary { margin-bottom: var(--space-3); }

/* ---------- Dark sections ---------- */

.dark {
  background: var(--navy);
  color: #fff;
}
.dark .section-title { color: #fff; }

/* Why Alex (Alex, 2026-11-06): copy on the left in the wider column; on the right a smaller portrait,
   cropped less tightly (head to chest), then "You work directly with Alex" and one button. */
.alex-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: var(--space-5);
  align-items: center;
}
.alex .dark-panel { padding: clamp(1.75rem, 1rem + 2.6vw, 3.25rem); }
.alex-text .alex-copy { margin-bottom: 0; max-width: none; }
.alex-portrait { margin: 0 0 var(--space-4); max-width: 23rem; }
.alex-portrait img {
  width: calc(100% - 12px);
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 50% 0%;
  background: var(--ice);
  border-radius: var(--radius-card);
  box-shadow: 12px 12px 0 var(--orange);
}
.alex-side .access-list li { padding: 0.55rem 0 0.55rem 1.4rem; }
.alex-side .access-list li::before { top: 1.05rem; }
.list-title-on-dark { color: var(--on-dark-muted) !important; }
.access-list {
  list-style: none;
  margin: 0;
  padding: 0;
  color: #E4E9F5;
}
.access-list li {
  padding: 0.7rem 0 0.7rem 1.4rem;
  border-top: 1px solid var(--card-line);
  position: relative;
}
.access-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.2rem;
  width: 8px; height: 8px;
  border-radius: 1px;
  background: var(--orange);
}
.access-list strong { color: #fff; }

.alex-copy {
  font-size: 1.2rem;
  color: #E4E9F5;
  max-width: 40rem;
  margin: 0 0 var(--space-4);
}
.alex-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* ---------- FAQ ---------- */

/* Heading on the left; questions in a pale stack on the right, orange chevrons */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-5);
  align-items: start;
}
.faq-list {
  background: rgba(249, 252, 255, 0.88);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 40px -30px rgba(3, 19, 62, 0.45);
}
.faq details { border-bottom: 1px solid var(--rule); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.05rem 3.25rem 1.05rem 1.5rem;
  font-weight: 600;
  font-size: 1.02rem;
  position: relative;
  min-height: 44px;
  border-radius: var(--radius-card);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 1.6rem; top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid var(--orange-ink);
  border-bottom: 2px solid var(--orange-ink);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 250ms var(--ease);
}
.faq summary:focus-visible { outline-offset: -3px; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { margin: 0; padding: 0 1.5rem 1.25rem; color: var(--body); max-width: 62ch; }

/* ---------- Final ---------- */

/* Closing contact widget (every page but Home, Contact, and the legal pages): a navy panel on the canvas */
.final-title {
  font-family: var(--font-display);
  font-weight: 850;
  font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 auto var(--space-3);
  max-width: 18ch;
  text-wrap: balance;
}
.final-title span { color: var(--orange); }
.final-copy {
  color: #E4E9F5;
  font-size: 1.12rem;
  max-width: 42rem;
  margin: 0 auto var(--space-4);
}

/* Copy and steps beside a contact card, inside the navy panel */
.final-split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-5) var(--space-6);
  align-items: center;
}
.final-split .final-title { margin-left: 0; max-width: 15ch; }
.final-split .final-copy { margin: 0; max-width: 34rem; }
.final-steps {
  list-style: none;
  counter-reset: step;
  margin: var(--space-4) 0 0;
  padding: var(--space-4) 0 0;
  max-width: 34rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.final-steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 var(--space-3) 2.6rem;
  color: var(--on-dark-muted);
}
.final-steps li:last-child { padding-bottom: 0; }
.final-steps li strong { color: #fff; font-weight: 600; }
.final-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: -0.05rem;
  width: 1.8rem; height: 1.8rem;
  border: 1.5px solid var(--orange);
  border-radius: 50%;
  color: var(--orange);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.8rem;
  display: grid;
  place-items: center;
}

/* Contact widget (Alex, 2026-11-05): kept short. Both columns stretch to the same height. Since 2026-11-06
   the left column has no button and its copy sits centered beside the card; the heading is the longer
   positioning line, so it runs wider and a little smaller. */
.contact-widget .dark-panel { padding: clamp(1.5rem, 1rem + 2.2vw, 3rem); }
.contact-widget .final-split-grid { --card-pad: var(--space-4); grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: stretch; gap: var(--space-4) 2.5rem; }
.contact-widget .final-title { font-size: clamp(1.85rem, 1.25rem + 1.7vw, 2.6rem); max-width: 22ch; }
.contact-widget .final-steps { margin-top: var(--space-3); padding-top: var(--space-3); }
.final-split-copy { display: flex; flex-direction: column; align-items: flex-start; }
.contact-widget .final-split-copy { justify-content: center; }
.final-more { margin-top: auto; }
.contact-widget .final-steps { margin-bottom: 0; }
.contact-widget .final-steps li { padding-bottom: var(--space-2); }
.contact-widget .final-steps li:last-child { padding-bottom: 0; }

.contact-card {
  justify-self: end;
  display: flex;
  flex-direction: column;
  width: calc(100% - 12px);
  max-width: 30rem;
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-4) var(--card-pad, var(--space-4));
  text-align: center;
  box-shadow: 12px 12px 0 var(--orange);
}
.contact-card-photo {
  width: 6.5rem;
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ice);
}
/* Crops the 4:5 cutout to head and shoulders */
.contact-card-photo img { width: 134%; max-width: none; margin: -7% 0 0 -17%; }
.contact-card-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  margin: var(--space-2) 0 0.15rem;
}
.contact-card-role { margin: 0 auto; max-width: 22rem; color: var(--muted); font-size: 0.95rem; }
.contact-card-list {
  list-style: none;
  margin: var(--space-3) 0;
  padding: var(--space-2) 0 0;
  border-top: 1px solid var(--rule);
  text-align: left;
}
.contact-card-list li { position: relative; padding: 0.3rem 0 0.3rem 2.1rem; }
.contact-card-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.4rem;
  width: 1.3rem; height: 1.3rem;
  border-radius: 50%;
  background: var(--blue-ink);
}
.contact-card-list li::after {
  content: "";
  position: absolute;
  left: 0.4rem; top: 0.75rem;
  width: 0.5rem; height: 0.28rem;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
.contact-card .btn { width: 100%; margin-top: auto; }
.btn-outline { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; transform: translateY(-2px); }

/* ---------- Footer ---------- */

/* Dark navy, with restrained radio arcs and a small orange glow at the right edge */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #020C28;
  color: var(--on-dark-muted);
  padding: clamp(2.5rem, 2rem + 2vw, 3.5rem) 0;
}
.site-footer::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -8rem; top: -14rem;
  width: 28rem;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(77, 168, 255, 0.22);
  box-shadow: inset 0 0 0 5rem #020C28, inset 0 0 0 calc(5rem + 1px) rgba(77, 168, 255, 0.14);
  pointer-events: none;
}
.site-footer::after {
  content: "";
  position: absolute;
  z-index: -2;
  right: -8rem; bottom: -10rem;
  width: 22rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 121, 0, 0.32), rgba(255, 121, 0, 0) 100%);
  pointer-events: none;
}
.footer-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "logo nav" "note nav" "legal legal";
  align-items: center;
  gap: var(--space-2) var(--space-4);
}
.footer-inner > img { grid-area: logo; width: clamp(120px, 10vw, 150px); height: auto; }
.footer-inner > nav { grid-area: nav; justify-self: end; }
.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem clamp(1.25rem, 2.5vw, 2.5rem);
  list-style: none;
  margin: 0; padding: 0;
}
.site-footer a { color: #fff; font-weight: 500; text-decoration: none; display: inline-block; padding: 0.6rem 0; }
.site-footer a:hover { color: var(--orange); }
.footer-note { grid-area: note; margin: 0; font-size: 0.88rem; }
/* The site's standing footnotes, then the copyright line and legal links */
.footer-legal {
  grid-area: legal;
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.82rem;
  line-height: 1.55;
}
.footer-footnote { max-width: 60rem; margin: 0 0 0.6rem; }
.footer-footnote .fn-mark { color: var(--orange); font-weight: 700; }
.footer-footnote:target { color: #fff; }
.footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-4);
  margin-top: var(--space-2);
}
.footer-base p { margin: 0; }
.site-footer .footer-legal-links { gap: 0 var(--space-3); }
.footer-legal-links a { font-size: 0.82rem; }
.footer-consent-btn {
  background: none; border: 0; padding: 0.6rem 0; cursor: pointer;
  font: 500 0.82rem var(--font-body); color: #fff;
}
.footer-consent-btn:hover { text-decoration: underline; }

/* ---------- Cookie notice (shown only once GA_MEASUREMENT_ID is set in js/main.js) ---------- */

.consent {
  position: fixed; z-index: 90;
  left: var(--space-2); right: var(--space-2); bottom: var(--space-2);
  max-width: 34rem; margin-left: auto;
  display: grid; gap: var(--space-2);
  padding: var(--space-3);
  background: #fff; color: var(--ink);
  border: 1px solid rgba(3, 19, 62, 0.14); border-top: 3px solid var(--orange);
  border-radius: var(--radius-card);
  box-shadow: 0 12px 32px rgba(3, 19, 62, 0.18);
}
.consent[hidden] { display: none; }
.consent-text { margin: 0; font-size: 0.92rem; line-height: 1.5; }
.consent-text a { color: var(--blue-ink); font-weight: 600; }
.consent-actions { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.consent-actions .btn { flex: 1 1 8rem; }
@media (max-width: 560px) {
  .consent { left: var(--space-1); right: var(--space-1); bottom: var(--space-1); padding: var(--space-2); }
}

/* ---------- Terms of Use and Privacy Policy ---------- */

.legal-body { max-width: 46rem; }
.legal-body h2 {
  margin: var(--space-5) 0 var(--space-1);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--navy);
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body ul { margin: 0 0 var(--space-2); }
.legal-body li { margin-bottom: 0.4rem; }
.legal-body a { color: var(--blue-ink); }
.legal-updated { font-size: 0.9rem; color: var(--muted); }

/* ---------- Services page ---------- */

/* the page's intro is the subpage hero (see "Subpage hero") */
.jump-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: var(--space-4);
}
.jump-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1.5px solid var(--navy);
  border-radius: 999px;
  background: var(--surface);
  color: var(--navy);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background-color 200ms, color 200ms;
}
.jump-links a span { font-family: var(--font-label); font-weight: 600; font-size: 0.8rem; color: var(--orange-ink); }
.jump-links a:hover { background: var(--navy); color: #fff; }
.jump-links a:hover span { color: var(--orange); }

.engagement-detail, #raise-types { scroll-margin-top: 80px; }
.engagement-intro { font-size: 1.05rem; margin: 0 0 var(--space-4); max-width: 40rem; }
/* every section on the same canvas; a thin rule separates the three stages */
.engagement-detail + .engagement-detail { border-top: 1px solid var(--rule); }
.engagement-detail .section-lede, .engagement-intro { color: var(--body); }
.engagement-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-6);
  align-items: start;
}
.engagement-head { position: sticky; top: 110px; }
/* styled like the eyebrows: orange label, number first, short rule after */
.engagement-kicker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-ink);
  margin: 0 0 var(--space-2);
}
.engagement-kicker::after { content: ""; flex: none; width: 48px; height: 2px; margin-left: 0.4rem; background: var(--orange); }
.engagement-kicker span { color: var(--ink); }
.engagement-promise {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 var(--space-4);
  max-width: 28ch;
}
.engagement-facts { margin: 0; border-top: 1px solid var(--navy); }
.engagement-facts div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: var(--space-2);
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
}
.engagement-facts dt { font-family: var(--font-label); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--orange-ink); padding-top: 0.2rem; }
.engagement-facts dd { margin: 0; color: var(--muted); }

.list-title {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-2);
}
/* deliverables sit in a pale panel, two columns */
.deliverables {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0.35rem 1.25rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-3);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
}
.deliverables li {
  padding: 0.7rem 0 0.7rem 1.4rem;
  border-bottom: 1px solid var(--rule);
  position: relative;
  font-weight: 500;
}
/* no rule under the last row of either column */
.deliverables li:last-child,
.deliverables li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.deliverables li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.15rem;
  width: 8px; height: 8px;
  border-radius: 1px;
  background: var(--blue);
}
/* "You keep": a navy panel with a bright blue rule, like the homepage stage cards */
.handoff {
  background: var(--card);
  color: #fff;
  border-left: 4px solid var(--blue);
  border-radius: var(--radius-card);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
.handoff h3 {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--card-blue);
  margin: 0 0 0.4rem;
}
.handoff p { margin: 0; font-size: 1.1rem; }
.gate { margin: 0; color: var(--body); font-size: 0.97rem; }
.gate strong { color: var(--ink); }

.brief {
  margin: 0 0 var(--space-4);
  border: 1.5px dashed #9FB6CC;
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: var(--space-3);
}
.brief figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem var(--space-2);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: var(--space-2);
}
.brief-tag {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  white-space: nowrap;
}
.brief dl { margin: 0; }
.brief dl div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: var(--space-2);
  padding: 0.55rem 0;
  border-top: 1px solid var(--rule);
  font-size: 0.95rem;
}
.brief dt { font-weight: 600; }
.brief dd { margin: 0; color: var(--muted); }

/* Focused starting points: navy cards on the canvas */
.focused { border-top: 1px solid var(--rule); }
.focused-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.focused-item {
  color: #fff;
  border: 1px solid var(--card-line);
  border-top: 3px solid var(--orange);
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-3);
  background:
    radial-gradient(90% 45% at 100% 0%, rgba(0, 132, 255, 0.14), transparent 70%),
    var(--card);
}
.focused-item h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.15;
  margin: 0 0 var(--space-2);
}
.focused-problem { color: var(--orange); font-weight: 600; margin: 0 0 var(--space-2); }
.focused-item p { color: #E4E9F5; }
.focused-result {
  margin-bottom: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--card-line);
  font-size: 0.95rem;
}
.focused-result strong { color: #fff; }

.split-top {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-6);
  align-items: start;
}
/* heading and lede side by side in equal columns, with the full-width content below (Services, Alex 2026-11-06) */
.split-even {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2) var(--space-5);
  align-items: end;
  margin-bottom: var(--space-4);
}
.split-even .section-title, .split-even .section-lede { margin-bottom: 0; }
/* capability rows in a pale table-like panel, like the homepage workstream table */
.capability-list {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--card);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 40px -30px rgba(3, 19, 62, 0.45);
}
.capability-list div {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: var(--space-3);
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--rule);
}
.capability-list div:last-child { border-bottom: 0; }
.capability-list dt { font-weight: 700; }
.capability-list dd { margin: 0; color: var(--body); }
/* default for every white multi-row table: a row turns navy with white text on hover,
   like the homepage workstream rows (Alex, 2026-11-06) */
.capability-list { overflow: hidden; }
.capability-list div { transition: background-color 200ms, border-color 200ms; }
.capability-list dt, .capability-list dd { transition: color 200ms; }
.capability-list div:hover { background: var(--card); border-bottom-color: var(--card-line); }
.capability-list div:hover dt,
.capability-list div:hover dd { color: #fff; }

/* case study messaging examples (Innovega): the quoted line above its role in the campaign */
.cs-messaging { margin-block: var(--space-3); }
.cs-messaging div { grid-template-columns: 10rem 1fr; }
.cs-messaging dd strong { display: block; margin-bottom: 0.2rem; }
.cs-video { margin-top: var(--space-3); }

/* Who does what: four navy cards */
.roles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
/* Alex, 2026-11-06: livelier. On hover the card lifts, turns blue with an orange offset shadow, and its top
   bar fills; the RaiseFM team card starts with a full blue bar. Flat colors only. */
.role {
  position: relative;
  overflow: hidden;
  padding: calc(var(--space-3) + 4px) var(--space-3) var(--space-3);
  background: var(--card);
  color: #fff;
  border: 1px solid var(--card-line);
  border-radius: var(--radius-card);
  transition: background-color 250ms, border-color 250ms, transform 250ms var(--ease), box-shadow 250ms var(--ease);
}
.role::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 2.5rem; height: 4px;
  background: var(--orange);
  transition: width 400ms var(--ease), background-color 250ms;
}
.role-tag {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange) !important;
  margin: 0 0 0.6rem !important;
  transition: color 250ms;
}
.role h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  margin: 0 0 0.4rem;
  transition: color 250ms;
}
.role p { margin: 0; color: var(--on-dark-muted); transition: color 250ms; }
.role-alex::before { width: 100%; background: var(--blue); }
.role-alex h3 { color: var(--card-blue); }
.role:hover {
  background: var(--blue-ink);
  border-color: var(--blue-ink);
  transform: translateY(-6px);
  box-shadow: 8px 8px 0 var(--orange);
}
.role:hover::before { width: 100%; background: #fff; }
.role:hover h3 { color: #fff; }
.role:hover p { color: #E4F0FF; }
.role:hover .role-tag { color: #fff !important; }
@media (prefers-reduced-motion: reduce) {
  .role, .role::before { transition: none; }
  .role:hover { transform: none; }
}

/* ---------- Offering-path pages ---------- */

.crumbs {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: var(--space-3);
}
.crumbs a { color: var(--blue-ink); }
.intro-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
}
.intro-proof {
  margin: 0;
  max-width: 28rem;
  font-size: 0.92rem;
  color: var(--muted);
  padding-left: var(--space-2);
  border-left: 3px solid var(--orange);
}
.prose { font-size: 1.1rem; max-width: 40rem; color: var(--body); }
.prose p { margin: 0 0 var(--space-3); }
.prose h3 { font-size: 1.15rem; margin: var(--space-4) 0 0.5rem; color: var(--ink); }
/* formerly a white band; every section now shares the canvas, so a thin rule marks the change */
.alt-surface { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

.phases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 2px solid var(--navy);
}
.phases-five { grid-template-columns: repeat(5, 1fr); }
.phases li {
  position: relative;
  padding: var(--space-3) var(--space-3) var(--space-2) 0;
}
.phases li + li { padding-left: var(--space-3); border-left: 1px solid var(--rule); }
/* a marker on the line shows each step's place in the sequence */
.phases li::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--orange);
  border: 2px solid var(--bg);
}
.phases li + li::before { left: var(--space-3); }
.phases h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; margin: 0.35rem 0 0.4rem; }
.phases p { margin: 0; color: var(--muted); }

.rule-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.rule-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--blue);
  border-radius: var(--radius-card);
  padding: var(--space-4);
}
.rule-card + .rule-card { border-top-color: var(--orange); }
.rule-card-muted { background: var(--bg); }
.rule-card h3 { font-size: 1.2rem; margin: 0 0 0.5rem; }
.rule-card > p:not(.path-tag) { color: var(--muted); margin: 0 0 var(--space-3); }
.rule-card .list-title { margin-top: var(--space-2); }
.deliverables-one { grid-template-columns: 1fr; margin-bottom: 0; }

.rule-compare-three { grid-template-columns: repeat(3, 1fr); }
.rule-compare-three .rule-card:nth-child(3) { border-top-color: var(--navy); }
.rule-card a { color: var(--blue-ink); }
.reg-box a, .section-lede a { color: var(--blue-ink); }

.related-section { border-top: 1px solid var(--rule); }
/* related pages as small navy cards, like the homepage raise-type cards */
.related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
/* four related pages (the Innovega case study): one row of four on desktop, two by two on tablets, one column on phones */
@media (min-width: 1101px) { .related-list:has(> li:nth-child(4)) { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 861px) and (max-width: 1100px) { .related-list:has(> li:nth-child(4)) { grid-template-columns: repeat(2, 1fr); } }
/* case study raise records (KingsCrowd links): the related-page cards, two across */
@media (min-width: 861px) { .related-list.cs-records { grid-template-columns: repeat(2, 1fr); } }
.cs-records { margin-top: var(--space-3); }
.related-list a {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  height: 100%;
  padding: var(--space-3);
  color: #fff;
  text-decoration: none;
  background:
    radial-gradient(80% 90% at 100% 100%, rgba(0, 132, 255, 0.16), transparent 70%),
    var(--card);
  border: 1px solid rgba(77, 168, 255, 0.35);
  border-radius: var(--radius-card);
  transition: border-color 200ms, box-shadow 250ms var(--ease), transform 250ms var(--ease);
}
.related-kind {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.related-list strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--card-blue);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.related-list strong::after { content: "\2192"; font-size: 1rem; transition: transform 200ms var(--ease); }
.related-list span:last-child { color: var(--on-dark-muted); }
.related-list a:hover, .related-list a:focus-visible {
  border-color: var(--card-blue);
  box-shadow: 0 0 0 1px var(--card-blue), 0 18px 36px -18px rgba(0, 132, 255, 0.5);
  transform: translateY(-3px);
}
.related-list a:hover strong::after, .related-list a:focus-visible strong::after { transform: translateX(4px); }

.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--navy);
}
.check-list li {
  position: relative;
  padding: 0.8rem 0 0.8rem 2rem;
  border-bottom: 1px solid var(--rule);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0.3rem; top: 1.05rem;
  width: 10px; height: 6px;
  border-left: 2px solid var(--blue-ink);
  border-bottom: 2px solid var(--blue-ink);
  transform: rotate(-45deg);
}

.reg-context-section { padding: var(--space-5) 0; }
.reg-box {
  border: 1.5px dashed #9FB6CC;
  border-radius: var(--radius-card);
  padding: var(--space-4);
  background: var(--surface);
  max-width: 56rem;
}
.reg-box h2 {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-ink);
  margin: 0 0 var(--space-2);
}
.reg-box p { margin: 0 0 var(--space-2); }
.reg-box .reg-sources { margin: 0; font-size: 0.9rem; color: var(--muted); }
/* Offering-path rules boxes in solid brand blue (Alex, 2026-11-09). --blue-ink keeps white body text above WCAG AA. */
.reg-box-blue { background: var(--blue-ink); border: 0; color: #fff; }
.reg-box-blue h2 { color: #fff; }
.reg-box-blue .reg-sources { color: rgba(255, 255, 255, 0.85); }
.reg-box-blue a { color: #fff; text-decoration: underline; }
.reg-box-blue a:hover { color: var(--ice); }

/* ---------- Apply page ---------- */

.apply-intro { padding: var(--space-6) 0 var(--space-2); }   /* closer to the form (Alex, 2026-11-09) */
.page-title {
  font-family: var(--font-display);
  font-weight: 850;
  font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-3);
  max-width: 16ch;
}
.page-lede {
  font-size: 1.2rem;
  max-width: 44rem;
  margin: 0;
}

.apply-body { padding: var(--space-3) 0 var(--space-7); }
.apply-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
.apply-form,
.form-done { grid-column: 1; grid-row: 1; }
.apply-aside { grid-column: 2; grid-row: 1; position: sticky; top: 110px; }

.form-group {
  border: 0;
  margin: 0 0 var(--space-5);
  padding: 0;
  min-width: 0;
}
.form-legend {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.45rem;
  padding: 0;
  margin-bottom: var(--space-3);
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  width: 100%;
  border-bottom: 1px solid var(--navy);
  padding-bottom: 0.6rem;
}
.form-step {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--orange-ink);
}
.form-legend .optional { margin-left: auto; }
.form-group-note { margin: -0.5rem 0 var(--space-3); color: var(--muted); font-size: 0.95rem; }

.field { margin-bottom: var(--space-3); }
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-3);
}
.field label,
.choice-field legend {
  display: block;
  font-weight: 600;
  font-size: 0.98rem;
  margin-bottom: 0.4rem;
  padding: 0;
}
.optional {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 0.35rem;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="url"],
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid #7D93AE;
  border-radius: var(--radius);
  transition: border-color 200ms, box-shadow 200ms;
}
.field textarea { resize: vertical; min-height: 130px; }
.field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--navy) 50%),
    linear-gradient(135deg, var(--navy) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--navy); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--blue-ink);
  box-shadow: 0 0 0 3px rgba(0, 98, 214, 0.25);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #B42318; }

.field-hint { margin: 0.4rem 0 0; font-size: 0.88rem; color: var(--muted); }
.field-error {
  margin: 0.4rem 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #B42318;
}

.choice-field { border: 0; padding: 0; margin: 0 0 var(--space-3); min-width: 0; }
.choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}
.choice { position: relative; cursor: pointer; }
.choice input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.choice > span {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid #7D93AE;
  border-radius: var(--radius);
  background: var(--surface);
  font-weight: 500;
  line-height: 1.3;
  transition: border-color 200ms, background-color 200ms, box-shadow 200ms;
}
.choice:hover > span { border-color: var(--navy); }
.choice input:checked + span {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
  box-shadow: 0 4px 0 var(--orange);
}
.choice input:focus-visible + span {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
.choice-field.is-invalid .choice > span { border-color: #B42318; }
/* Four short answers in one row (the budget and raise target questions) */
.choices-4 { grid-template-columns: repeat(4, 1fr); }
/* "Reg A+ - $20M+ Max": the dash is drawn, not typed (the copy rules ban em dashes), as on the questionnaire radio */
.choice-dash { display: inline-block; flex: none; width: 0.8em; height: 1.5px; margin: 0 0.35em; background: currentColor; }
/* Cal.com calendar for step 03 (js/main.js loads it); Cal sizes its own frame to fit */
.cal-embed { min-height: 34rem; border: 1px solid var(--rule); border-radius: var(--radius); background: #fff; overflow: hidden; }
.cal-fallback { margin: 0; padding: var(--space-4); color: var(--muted); }
/* Before the visitor asks for the calendar, the box only holds the button (nothing loads from Cal.com) */
.cal-embed.is-gated { min-height: 0; }
.cal-gate { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); }
.cal-gate .cal-fallback { padding: 0; }
/* After sending, the done message takes the place of steps 01 and 02 */
.apply-form .form-done { margin-bottom: var(--space-5); }
.apply-form [hidden] { display: none; }

.more-details {
  border: 1.5px dashed #7D93AE;
  border-radius: var(--radius);
  padding: 0 var(--space-3);
  margin: 0 0 var(--space-4);
  background: var(--surface);
}
.more-details summary {
  cursor: pointer;
  list-style: none;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
}
.more-details summary::-webkit-details-marker { display: none; }
.more-details summary::before {
  content: "+";
  font-family: var(--font-label);
  font-weight: 600;
  color: var(--orange-ink);
  width: 1rem;
}
.more-details[open] summary::before { content: "\2212"; }
.more-details[open] { padding-bottom: var(--space-2); }
.more-details .form-group-note { margin: 0 0 var(--space-3); }

.form-summary {
  border: 2px solid #B42318;
  border-left-width: 6px;
  background: #FEF3F2;
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  margin-bottom: var(--space-4);
  font-weight: 600;
  color: #7A1A12;
}
.form-summary p { margin: 0; }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}
.form-actions button[disabled] { opacity: 0.6; cursor: wait; }
.form-status { margin: 0; font-size: 0.95rem; color: var(--muted); }
.form-status.is-error { color: #B42318; font-weight: 600; }

.form-done {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--orange);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-4);
}
.form-done p:not(.eyebrow) { max-width: 40rem; font-size: 1.08rem; }

.aside-block {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.aside-block + .aside-block { margin-top: var(--space-3); }
.aside-block h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  margin: 0 0 var(--space-2);
}
.next-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.next-steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 var(--space-3) 2.6rem;
  color: var(--muted);
  font-size: 0.97rem;
}
.next-steps li:last-child { padding-bottom: 0; }
.next-steps li strong { color: var(--ink); display: block; }
.next-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 1.8rem; height: 1.8rem;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.8rem;
  display: grid;
  place-items: center;
}
.aside-contact { background: var(--navy); color: #E4E9F5; border-color: var(--navy); }
.aside-contact h2 { color: #fff; }
.aside-contact p { margin: 0 0 0.5rem; }
/* "In Los Angeles? Let's meet." (Alex, 2026-11-09): the homepage's navy box, with its orange glow, grid and radio arc */
.aside-block.aside-la { position: relative; isolation: isolate; overflow: hidden; color: #E4E9F5; border-color: var(--card); }
.aside-la h2 { color: #fff; }
.aside-la p { margin: 0; }
.placeholder {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px dashed #3A5293;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
}

/* ---------- Case study page ---------- */

/* Hero: full-bleed photo under a navy wash, copy at the lower left, running into the figures band */
.cs-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: clamp(440px, 62vh, 620px);
  padding: var(--space-6) 0 var(--space-5);
  background: var(--navy);
  color: #fff;
}
.cs-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
/* For an image with its own type: it stays on the right, fading into the navy behind the title */
.cs-hero-media.cs-hero-media-side {
  left: auto;
  right: 0;
  width: 58%;
  object-position: 50% 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 45%);
  mask-image: linear-gradient(90deg, transparent 0, #000 45%);
}
.cs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, var(--navy) 0%, rgba(3, 19, 62, 0.82) 32%, rgba(3, 19, 62, 0.4) 72%, rgba(3, 19, 62, 0.3) 100%),
    linear-gradient(90deg, rgba(3, 19, 62, 0.7) 0%, rgba(3, 19, 62, 0) 62%);
}
.cs-hero .crumbs { color: var(--on-dark-muted); margin-bottom: var(--space-1); }
.cs-hero .crumbs a { color: #fff; }
.cs-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}
.cs-back::before { content: "\2190"; color: var(--orange); transition: transform 200ms var(--ease); }
.cs-back:hover::before, .cs-back:focus-visible::before { transform: translateX(-3px); }
.cs-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: var(--space-2) 0 var(--space-3);
  padding: 0;
}
.cs-tags li {
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cs-tags .cs-tag-path { background: var(--blue); color: var(--navy); }
.cs-title {
  font-family: var(--font-display);
  font-weight: 850;
  font-size: clamp(3rem, 1.6rem + 5vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0 0 var(--space-2);
}
.cs-lede {
  max-width: 34rem;
  margin: 0 0 var(--space-3);
  font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem);
  line-height: 1.3;
  color: #E4E9F5;
  text-wrap: balance;
}
.cs-role {
  max-width: 36rem;
  margin: 0;
  padding-left: var(--space-2);
  border-left: 3px solid var(--orange);
  font-size: 0.92rem;
  color: var(--on-dark-muted);
}

/* Headline figures, on the same navy as the bottom of the hero */
.cs-stats-band { background: var(--navy); color: #fff; padding: 0 0 var(--space-5); }
.cs-stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  text-align: center;
}
.cs-stat-value {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 1.5rem + 2.2vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.cs-stats .cs-stat-value { color: var(--orange); }
/* Three headline figures (Legion M): three across, and on narrow screens the third spans both columns */
.cs-stats:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
.cs-stat-label {
  margin: 0;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cs-stat-note { margin: 0.35rem 0 0; font-size: 0.88rem; color: var(--muted); }
.cs-stats .cs-stat-note { color: var(--on-dark-muted); }
.cs-stats-def {
  max-width: 52rem;
  margin: var(--space-4) auto 0;
  text-align: center;
  font-size: 0.88rem;
  color: var(--on-dark-muted);
}

/* Body: the story in one column, "On this page" sticky beside it */
.cs-body { padding: var(--space-4) 0 var(--space-6); }
.cs-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14rem;
  gap: var(--space-6);
  align-items: start;
}
.cs-content { max-width: 48rem; }
.cs-block { padding: var(--space-5) 0; border-top: 1px solid var(--rule); scroll-margin-top: 96px; }
.cs-block:first-child { border-top: 0; }
.cs-block > p { margin: 0 0 var(--space-3); max-width: 44rem; }
.cs-intro { font-size: 1.3rem; line-height: 1.5; }
.cs-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}
.cs-note { color: var(--muted); }

.cs-figure { margin: var(--space-4) 0 0; }
.cs-figure img { width: 100%; border: 1px solid var(--rule); border-radius: 10px; background: #FEFEFA; transition: border-color 200ms; }
/* js/main.js makes each figure image open larger on the same page (Alex, 2026-11-05) */
.cs-figure img.is-zoomable { cursor: zoom-in; }
.cs-figure img.is-zoomable:hover { border-color: var(--navy); }
.cs-figure img.is-zoomable:focus-visible { outline: 3px solid var(--blue-ink); outline-offset: 3px; }
.cs-figure figcaption { margin-top: var(--space-1); font-size: 0.88rem; color: var(--muted); }
/* A chart drawn in the page: thin blue bars, the peak in orange, quiet grid and labels */
.cs-chart {
  display: block;
  width: 100%;
  height: auto;
  padding: var(--space-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--surface);
  font-family: var(--font-body);
}
.cs-chart-grid { stroke: var(--rule); stroke-width: 1; }
.cs-chart-axis { fill: var(--muted); font-size: 20px; }
.cs-chart-value { fill: var(--navy); font-size: 22px; font-weight: 600; text-anchor: middle; }
.cs-chart-bar { fill: var(--blue); }
.cs-chart-bar.is-peak { fill: var(--orange); }
.cs-chart-col:hover .cs-chart-bar { filter: brightness(0.88); }
.cs-chart-track { fill: var(--ice); }
.cs-chart-label { fill: var(--navy); font-size: 20px; font-weight: 600; }
.cs-chart-sub { fill: var(--muted); font-size: 15px; }
.cs-chart-num { fill: var(--navy); font-size: 21px; font-weight: 700; }

/* Partner logos inside a case study step, single-color navy */
.cs-logos { margin-top: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.cs-logos-label {
  margin: 0 0 var(--space-2);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.cs-logos-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
/* undo .cs-steps li, which also matches these nested items */
.cs-steps .cs-logos-list li { display: block; padding: 0; border: 0; }
.cs-logos-list img { display: block; height: var(--h, 2.2rem); width: auto; max-width: 100%; }

.cs-scope { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.cs-list-gap { margin-top: var(--space-4); }
.cs-pills { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; }
.cs-pills li {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: var(--ice);
  font-weight: 600;
  font-size: 0.9rem;
}
.cs-pills-quiet li { background: transparent; border: 1.5px solid var(--rule); font-weight: 500; }

.cs-steps { list-style: none; margin: 0; padding: 0; }
.cs-steps li {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--rule);
}
.cs-steps li:first-child { border-top: 0; padding-top: var(--space-1); }
.cs-step-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--blue-display);
}
.cs-steps h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; line-height: 1.2; margin: 0.2rem 0 0.5rem; }
.cs-steps p { margin: 0; color: var(--muted); }
.cs-steps p + p { margin-top: var(--space-2); }
.cs-steps .cs-figure, .cs-steps .cs-figure-pair { margin-top: var(--space-3); }

/* Images side by side at the same height: each figure's --ar is its width / height */
.cs-figure-pair { display: flex; gap: var(--space-3); align-items: flex-start; margin-top: var(--space-4); }
.cs-figure-pair .cs-figure { flex: var(--ar, 1) 1 0; min-width: 0; margin: 0; }
.cs-figure-narrow { max-width: 20rem; }
/* a small screenshot, shown near its own width so it stays sharp */
.cs-figure-mid { max-width: 30.5rem; }
/* keeps the lowercase letter of a rule name, such as 506(c), inside an uppercase tag */
.cs-tags .keep-case { text-transform: none; }

.cs-moves {
  list-style: none;
  counter-reset: move;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}
.cs-moves li {
  counter-increment: move;
  display: flex;
  gap: 0.9rem;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
}
.cs-moves li::before { content: counter(move) "."; font-family: var(--font-label); font-weight: 600; color: var(--orange-ink); }

.cs-results {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
}
.cs-results li {
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--blue);
  border-radius: var(--radius);
}
/* platform counts get orange; invested amounts stay blue */
.cs-results li:nth-child(n+4) { border-top-color: var(--orange); }
.cs-results > li:nth-child(3):last-child { grid-column: 1 / -1; }
.cs-results .cs-stat-value { color: var(--blue-display); font-size: clamp(1.8rem, 1.4rem + 1vw, 2.3rem); }

.cs-timeline { list-style: none; position: relative; margin: 0; padding: 0 0 0 1.9rem; }
.cs-timeline::before {
  content: "";
  position: absolute;
  left: 0.45rem; top: 0.6rem; bottom: 0.6rem;
  width: 2px;
  background: var(--rule);
}
.cs-timeline li { position: relative; padding: 0 0 var(--space-3); }
.cs-timeline li:last-child { padding-bottom: 0; }
.cs-timeline li::before {
  content: "";
  position: absolute;
  left: -1.9rem; top: 0.15rem;
  width: 1rem; height: 1rem;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--orange);
}
.cs-timeline p { margin: 0; }
.cs-timeline .cs-when {
  margin-bottom: 0.2rem;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-ink);
}

.cs-learnings { list-style: none; counter-reset: learn; display: grid; gap: var(--space-2); margin: 0; padding: 0; }
.cs-learnings li {
  counter-increment: learn;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
}
.cs-learnings li::before {
  content: counter(learn);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 1.1;
  color: var(--blue-ink);
}

/* A testimonial after case study cards in the same section (StartEngine case study, Alex 2026-11-12) */
.cs-cards + .cs-quote { margin-top: var(--space-5); }
.cs-quotes-gap { margin-top: var(--space-3); }
/* A quote about Alex's work, navy like the story cards */
.cs-quote {
  margin: 0;
  padding: var(--space-4);
  background: var(--navy);
  color: #fff;
  border-left: 4px solid var(--orange);
  border-radius: var(--radius);
}
.cs-quote blockquote { margin: 0 0 var(--space-3); }
.cs-quote blockquote p { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; line-height: 1.45; }
.cs-quote blockquote p + p { margin-top: var(--space-2); }
.cs-quote figcaption { display: flex; align-items: center; gap: 0.9rem; font-size: 0.95rem; color: var(--on-dark-muted); }
.cs-quote figcaption strong { display: block; color: #fff; }
.cs-quote-photo { flex: none; width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; border: 2px solid var(--orange); background: var(--ice); }
.cs-quotes { display: grid; gap: var(--space-3); }
/* Press quote (Forbes on Bitcoin IRA, Alex 2026-11-12): the article title links out under the name, then a one-line context */
.cs-quote figcaption a { color: #fff; text-underline-offset: 3px; }
.cs-quote-context { margin: var(--space-3) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--card-line); font-size: 0.9rem; color: var(--on-dark-muted); }
.cs-quotes .cs-quote blockquote p { font-size: 1.12rem; }

/* Enlarged figure image, opened by js/main.js */
.lightbox {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(3.5rem, 6vw, 4.5rem) clamp(0.75rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2rem);
  border: 0;
  background: transparent;
  color: #fff;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(3, 19, 62, 0.9); }
.lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; max-width: 100%; max-height: 100%; }
.lightbox img {
  width: auto;
  height: auto;
  max-width: min(100%, 1600px);
  max-height: calc(100dvh - 9rem);
  object-fit: contain;
  border-radius: 8px;
  background: #FEFEFA;
}
.lightbox figcaption { max-width: 60ch; text-align: center; font-size: 0.92rem; color: #E4E9F5; }
.lightbox-close {
  position: fixed;
  top: 0.9rem; right: 0.9rem;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: rgba(3, 19, 62, 0.6);
  color: #fff;
  cursor: pointer;
}
.lightbox-close:hover { background: #fff; color: var(--navy); }
.lightbox-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* Built by js/main.js, so it only shows with scripts on */
.cs-toc { display: none; }
.js .cs-toc { display: block; position: sticky; top: 100px; padding-top: var(--space-5); }
.cs-toc-title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.cs-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.cs-toc a {
  display: block;
  margin-left: -1px;
  padding: 0.4rem 0 0.4rem 1rem;
  border-left: 2px solid transparent;
  color: var(--muted);
  font-size: 0.92rem;
  text-decoration: none;
  transition: color 160ms, border-color 160ms;
}
.cs-toc a:hover { color: var(--navy); }
.cs-toc a[aria-current] { color: var(--navy); font-weight: 600; border-left-color: var(--orange); }

.story-link { display: inline-block; margin-top: var(--space-2); }

/* ---------- Case Studies page ---------- */

.cs-index { padding-top: var(--space-5); }
.cs-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
/* Each card opens its case study: the "Read" link stretches over the whole card */
.cs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 200ms, transform 250ms var(--ease);
}
.cs-card:hover, .cs-card:focus-within { border-color: var(--navy); transform: translateY(-3px); }
/* The case study's campaign image, unobstructed. A square logo tile (.cs-card-logo) sits on its own
   teal, so it fills the frame. --focus and --zoom (set on the img) crop without editing the file. */
.cs-card-media {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--navy);
}
.cs-card-media img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  transform: scale(var(--zoom, 1));
  transform-origin: var(--focus, 50% 50%);
  transition: transform 600ms var(--ease);
}
.cs-card:hover .cs-card-media img { transform: scale(calc(var(--zoom, 1) * 1.04)); }
.cs-card-media .cs-card-logo { object-fit: contain; background: #45C2C6; }
.cs-card-body .cs-tags { margin: 0 0 var(--space-2); }
.cs-card-body .cs-tags li { background: var(--ice); color: var(--navy); }
.cs-card-body .cs-tags .cs-tag-path { background: var(--blue); color: var(--navy); }
.cs-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
}
.cs-card-title {
  font-family: var(--font-display);
  font-weight: 850;
  font-size: clamp(1.9rem, 1.5rem + 1.1vw, 2.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-1);
}
/* three lines reserved, so the figures line up across cards side by side */
.cs-card-lede { min-height: 4.2em; margin: 0 0 var(--space-3); font-size: 1.1rem; line-height: 1.4; text-wrap: balance; }
.cs-card-stats {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--rule);
}
.cs-card-stats .cs-stat-value { font-size: clamp(1.6rem, 1.3rem + 0.8vw, 2rem); color: var(--blue-display); }
.cs-card-role { margin: 0 0 var(--space-3); font-size: 0.9rem; color: var(--muted); }
.cs-card-link { margin-top: auto; align-self: flex-start; }
.cs-card-link::after { content: ""; position: absolute; inset: 0; }
.cs-index-note { margin-top: var(--space-5); }
/* One case study card below a raise-type page's stories (Alex, 2026-11-06): the same card, laid on its
   side so a single card fills the row like the stories above it. It stacks again on phones. */
.cs-cards.cs-cards-feature { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-4); }
/* the DealMaker page's Reg CF and Reg A+ case studies (six since LiquidPiston, 2026-11-09): two by two rather than three and one */
@media (min-width: 861px) { .cs-cards.dm-cards:has(> li:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* An odd last card sits centered under the pairs at the same width */
@media (min-width: 861px) { .cs-cards.dm-cards > li:last-child:nth-child(odd):not(:first-child) { grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--space-4)) / 2); } }
.cs-cards-feature .cs-card { flex-direction: row; }
.cs-cards-feature .cs-card-media { flex: 0 0 48%; aspect-ratio: auto; min-height: 20rem; }
.cs-cards-feature .cs-card-body { padding: var(--space-4); }
.cs-cards-feature .cs-card-lede { min-height: 0; }

@media (max-width: 1100px) {
  .cs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .cs-grid { grid-template-columns: 1fr; }
  .js .cs-toc { display: none; }
}
@media (max-width: 860px) {
  .cs-cards { grid-template-columns: 1fr; }
  /* Its own type can't sit behind the title on a narrow screen: the image becomes a banner above it */
  .cs-hero:has(.cs-hero-media-side) { flex-direction: column; align-items: stretch; padding-top: 0; }
  .cs-hero:has(.cs-hero-media-side)::before { display: none; }
  .cs-hero-media.cs-hero-media-side {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--space-3);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .work-slider { grid-template-columns: minmax(0, 1fr); grid-template-areas: "controls" "track" "more"; }
  .work-more { justify-self: start; }
  .cs-card-lede { min-height: 0; }
  .cs-cards-feature .cs-card { flex-direction: column; }
  .cs-cards-feature .cs-card-media { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
  .cs-cards-feature .cs-card-body { padding: var(--space-3); }
  .cs-stats { grid-template-columns: 1fr 1fr; row-gap: var(--space-4); }
  .cs-stats:has(> li:nth-child(3):last-child) { grid-template-columns: 1fr 1fr; }
  .cs-stats > li:nth-child(3):last-child { grid-column: 1 / -1; }
  .cs-scope { grid-template-columns: 1fr; gap: var(--space-4); }
  .cs-moves { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cs-hero { min-height: 440px; padding: var(--space-5) 0 var(--space-4); }
  .cs-card-body { padding: var(--space-3); }
  .cs-stats-def { text-align: left; }
  .cs-block { padding: var(--space-4) 0; }
  .cs-intro { font-size: 1.15rem; }
  .cs-steps li { grid-template-columns: 1fr; gap: 0.25rem; }
  .cs-step-num { font-size: 1.6rem; }
  .cs-results { grid-template-columns: 1fr; }
  .cs-moves li, .cs-learnings li, .cs-results li { padding: var(--space-2) var(--space-3); }
  .cs-figure-pair { flex-direction: column; }
  .cs-figure-pair .cs-figure { flex: none; width: 100%; }
  .cs-figure-pair .cs-figure-tall { max-width: 18rem; }
  .cs-quote { padding: var(--space-3); }
  .cs-quote blockquote p { font-size: 1.12rem; }
}

/* ---------- Reveal on scroll ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */

/* Below wide desktops the copy columns move above their widgets */
@media (max-width: 1180px) {
  .problem-grid, .journey-grid, .ws-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .problem-head, .journey-head, .ws-head { max-width: 46rem; }
}

/* The seven platform marks: rows of 4 and 3 on tablets, 2 per row on phones, the last row centered */
@media (max-width: 1100px) {
  .platform-logos { flex-wrap: wrap; justify-content: center; row-gap: var(--space-3); }
  .platform-logos li { flex: 0 0 25%; }
  .platform-logos li + li { border-left: 0; }
}

@media (max-width: 1024px) {
  .alex-grid, .faq-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .alex-portrait { max-width: 23rem; }
  .paths-head { grid-template-columns: 1fr; }
  .path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .parts { grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr); }
  .story { grid-template-columns: 1fr; }
  /* image beside the title, so the card stays short enough to read in one view */
  .story-lead { flex-direction: row; align-items: stretch; }
  .story-media { flex: 0 0 42%; width: 42%; border-bottom: 0; }
  .story-head { flex: 1; align-self: center; padding: var(--space-3); }
  .story-body { padding: var(--space-3); border-left: 0; border-top: 1px solid var(--card-line); }
  .apply-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .apply-form, .form-done, .apply-aside { grid-column: 1; grid-row: auto; }
  .apply-aside { position: static; }
  .engagement-grid, .split-top { grid-template-columns: 1fr; gap: var(--space-4); }
  .split-even { grid-template-columns: 1fr; }
  .engagement-head { position: static; }
  .focused-grid { grid-template-columns: 1fr; }
  .roles { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .final-split-grid, .contact-widget .final-split-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .contact-card { justify-self: start; }
  .nav-toggle { display: block; margin-left: auto; }
  .site-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding: var(--space-2) 1.5rem var(--space-4);
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
    display: none;
    max-height: calc(100vh - 76px);
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
  }
  .site-nav.is-open { display: flex; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
  .nav-list > li > a,
  .nav-trigger {
    display: flex;
    width: 100%;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--rule);
    font-size: 1.05rem;
  }
  .nav-trigger { justify-content: space-between; }
  .nav-trigger.is-current, .nav-list > li > a.is-current { border-bottom-color: var(--rule); }
  .nav-item-split { flex-wrap: wrap; align-items: stretch; gap: 0; }
  .nav-list > .nav-item-split > a { flex: 1; width: auto; }
  .nav-trigger.nav-trigger-split { width: 48px; min-height: 0; padding: 0.85rem 0; justify-content: flex-end; }
  .mega,
  .nav-item-menu.is-open .mega {
    position: static;
    width: auto;
    padding: var(--space-1) 0 var(--space-2);
    background: transparent;
    color: var(--ink);
    border-radius: 0;
    border-bottom: 1px solid var(--rule);
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    display: none;
  }
  .nav-item-menu.is-open .mega { display: block; }
  .mega::before { display: none; }
  .mega-services .mega-list { grid-template-columns: 1fr; gap: 0; }
  .mega-work { flex-basis: 100%; }
  .mega-group + .mega-group { margin-top: var(--space-2); }
  .mega-label { padding: 0; }
  .mega-group-path .mega-label { color: var(--blue-ink); }
  .mega-group-sector .mega-label { color: var(--orange-ink); }
  .mega-group-platform { margin-top: var(--space-2); padding-top: 0; border-top: 0; }
  .mega-group-platform .mega-label { color: var(--blue-ink); }
  .mega-list a { color: var(--ink); padding: 0.6rem 0; }
  .mega-list a:hover, .mega-list a:focus-visible { background: transparent; }
  .mega-list a[aria-current="page"] .mega-title { color: var(--blue-ink); }
  .mega-icon, .mega-num { width: 2.25rem; height: 2.25rem; background: var(--ice); color: var(--blue-ink); }
  .mega-group-sector .mega-icon { background: #FFE6CF; color: var(--orange-ink); }
  .mega-num { color: var(--orange-ink); }
  .mega-desc { color: var(--muted); }
  .mega-foot { margin-top: var(--space-1); padding: 0.4rem 0 0; border-top: 0; color: var(--blue-ink); }
  .mega-foot::after { color: var(--orange-ink); }
  .nav-cta { width: 100%; }

  /* two per row keeps the explanation close to the part that was tapped */
  .parts { grid-template-columns: 1fr; }
  .parts-list { grid-template-columns: 1fr 1fr; gap: 0.4rem; }
  .journey-stages, .proof-grid, .rule-compare, .rule-compare-three, .related-list { grid-template-columns: 1fr; }
  .proof, .proof:first-child, .proof:last-child { padding: 0; }
  .proof + .proof { border-left: 0; border-top: 1px solid var(--rule); margin-top: var(--space-3); padding-top: var(--space-3); }
  .path-card { min-height: 0; }
  .brand-grid { grid-template-columns: repeat(4, 1fr); font-size: 1.03rem; --logo-max: 9.2em; }
  .brand-grid .brand-item { min-height: 6.25rem; padding: 0.75rem 0.375rem; }
  .brand-grid-more { grid-template-columns: repeat(4, 1fr); }
  .phases, .phases-five { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid var(--navy); }
  .phases li, .phases li + li { padding: 0 0 var(--space-3) var(--space-3); border-left: 0; }
  .phases li::before, .phases li + li::before { top: 0.3rem; left: -7px; }
  /* the work table becomes one card per workstream, with the column names repeated inside */
  .ws-table { display: grid; gap: 0.6rem; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
  .ws-header { display: none !important; }
  .ws-row, .ws-row:last-child { display: block; padding: 0.85rem 1rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-card); }
  .ws-row > span { display: block; padding: 0; }
  .ws-row > span + span { margin-top: 0.55rem; padding-top: 0.55rem; border-left: 0; border-top: 1px solid var(--rule); }
  .ws-name { font-family: var(--font-display); font-size: 1.1rem; }
  .ws-row:not(.ws-header):hover, .ws-row:not(.ws-header):focus-within { border-color: var(--card); }
  .ws-table-full .ws-row:not(.ws-header) > span { padding: 0; }
  .ws-table-full .ws-row:not(.ws-header) > span + span { padding-top: 0.55rem; }
  .ws-row-link > .ws-keep { padding-right: 0; }
  .ws-row-link > .ws-name { padding-right: 2rem; }
  .ws-row-link::after { top: 0.85rem; transform: translateX(-6px); }
  .ws-row-link:hover::after, .ws-row-link:focus-within::after { transform: none; }
  .ws-label {
    display: block;
    margin-bottom: 0.2rem;
    font-family: var(--font-label);
    font-style: normal;
    font-weight: 600;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .footer-inner { grid-template-columns: 1fr; grid-template-areas: "logo" "note" "nav" "legal"; }
  .footer-inner > nav { justify-self: start; }
}

@media (max-width: 560px) {
  .header-inner { padding: 0 1rem; }
  .contact-card { padding: var(--space-4) var(--space-3) var(--space-3); box-shadow: 8px 8px 0 var(--orange); width: calc(100% - 8px); }
  .brand img { width: 132px; }
  .eyebrow::after { display: none; }
  .dark-panel { padding: var(--space-4) 1.25rem; }
  .alex-portrait img { box-shadow: 8px 8px 0 var(--orange); }
  /* on a narrow screen the section arcs would cross the text */
  .has-arcs::before, .has-arcs::after { display: none; }

  .platform-logos { font-size: 0.85rem; }
  .platform-logos li { flex-basis: 50%; }
  .parts-panel { padding: var(--space-3); }
  .part { min-height: 48px; padding: 0.45rem 0.55rem; gap: 0.5rem; font-size: 0.88rem; }
  .part::after { display: none; }
  .part-num { width: 1.45rem; height: 1.45rem; font-size: 0.7rem; }
  .journey-stage { padding: var(--space-3); }
  .story-lead { flex-direction: column; }
  .story-media { flex: none; width: 100%; border-bottom: 1px solid var(--card-line); }
  .story-head { align-self: stretch; }
  .path-grid { grid-template-columns: 1fr; }
  .path-card.path-start { grid-template-columns: 1fr; grid-template-areas: "kind" "title" "body" "link"; padding: var(--space-4) var(--space-3) var(--space-3); }
  .path-start .path-img {
    right: 0;
    width: 75%;
    opacity: 0.45;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60%);
    mask-image: linear-gradient(90deg, transparent 0, #000 60%);
  }
  .path-start p { margin-bottom: var(--space-3); }
  .path-start .path-link { justify-self: start; white-space: normal; }
  .story-body div { grid-template-columns: 1fr; gap: 0.15rem; }
  .work-more { width: 100%; }
  .alex-actions .btn, .final-more { width: 100%; }
  .brand-grid { grid-template-columns: repeat(2, 1fr); font-size: 0.85rem; --logo-max: 10.3em; }
  .brand-grid .brand-item { min-height: 4.5rem; padding: 0.5625rem 0.375rem; }
  .brand-grid-more { grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
  .brand-grid-more .brand-item { min-height: 3rem; padding: 0.4rem 0.35rem; }
  .brand-mark { font-size: 0.76rem; }
  .faq summary { padding: 1rem 2.75rem 1rem 1.1rem; }
  .faq summary::after { right: 1.2rem; }
  .faq details p { padding: 0 1.1rem 1.1rem; }
  .field-row, .choices { grid-template-columns: 1fr; }
  .choices-4 { grid-template-columns: repeat(2, 1fr); }
  .deliverables { grid-template-columns: 1fr; }
  .deliverables li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--rule); }
  .capability-list div, .brief dl div { grid-template-columns: 1fr; gap: 0.2rem; }
  .roles { grid-template-columns: 1fr; }
  .handoff { padding: var(--space-3); }
  .choice > span { min-height: 48px; }
  .form-actions .btn { width: 100%; }
  .aside-block, .form-done { padding: var(--space-3); }
}

/* Smaller desktops: keep the concept's side-by-side composition, with a narrower copy column */
@media (min-width: 861px) and (max-width: 1200px) {
  .hero-copy { max-width: 46vw; }
  .hero-eyebrow { font-size: 0.78rem; letter-spacing: 0.18em; }
  .hero-actions { gap: var(--space-3) var(--space-4); }
}

/* Tablets and phones: copy first, then the scene with the radio below it.
   The photo is shown closer up so the radio is large enough to read every tuner label;
   the radio still scales with the photo. The knob may crop. */
@media (max-width: 860px) {
  .hero {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding-bottom: 0;
  }
  .hero::before { display: none; }
  .hero-stage {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 16 / 10;
    margin-top: var(--space-4);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 14%);
  }
  /* Right edge of the photo on the right edge of the screen; the radio's middle
     (75.6% down the photo) sits 58% down the stage */
  .hero-scene {
    --scene-w: calc(100cqw * 2.6);
    left: calc(100cqw - var(--scene-w));
    top: calc(58cqh - var(--scene-w) * 9 / 16 * 0.756);
  }
  .hero-inner { order: -1; }
}

@media (max-width: 560px) {
  .hero-stage { aspect-ratio: 4 / 3; }
  .hero-scene { --scene-w: calc(100cqw * 2.8); }
  .hero-title { font-size: 2.55rem; }
  .hero-eyebrow { font-size: 0.72rem; letter-spacing: 0.2em; }
  .hero-eyebrow::after, .hero-byline::after { display: none; }
  .hero-actions { gap: var(--space-2) var(--space-4); }
  .hero-btn { width: 100%; justify-content: center; }
}

/* ---------- StartEngine page (startengine.html, Alex 2026-11-05) ---------- */

/* Experience in numbers below the intro: the homepage's .proof-grid, unchanged */

/* the four stages (Alex, 2026-11-06): navy cards with the homepage's "Where is your raise?" picker, which
   lifts the picked card and dims the rest (js/main.js). Four across the full width, unlike the homepage,
   where the cards share the row with the copy; two across on tablets and one on phones. */
.journey-stages.se-stages { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.se-stages .stage-num { margin-bottom: 0.5rem; }
.se-stages .journey-stage h3 { font-size: 1.3rem; }
.phase-list { list-style: none; margin: 0; padding: 0; }
.phase-list li {
  position: relative;
  padding: 0.6rem 0 0.6rem 1rem;
  border-top: 1px solid var(--card-line);
  font-size: 0.92rem;
  line-height: 1.45;
  color: #DCE4F3;
}
.phase-list li::before {
  content: "";
  position: absolute;
  top: 1.1rem;
  left: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--card-blue);
}

/* campaign updates: copy on the left, the two cadences on the right */
.se-updates {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: var(--space-5);
  align-items: center;
}
.se-updates-copy > p:not(.eyebrow) { max-width: 60ch; margin: 0 0 var(--space-2); color: #E4E9F5; }
.se-updates-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.se-updates-list li {
  position: relative;
  padding: 0.7rem 0 0.7rem 1.75rem;
  border-top: 1px solid var(--card-line);
  font-weight: 500;
}
.se-updates-list li::before {
  content: "";
  position: absolute;
  left: 0.2rem; top: 1rem;
  width: 10px; height: 6px;
  border-left: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(-45deg);
}
.se-cadence { display: grid; gap: 1rem; margin: 0; }
.se-cadence div {
  padding: var(--space-3);
  background: rgba(3, 18, 58, 0.55);
  border: 1px solid var(--card-line);
  border-top: 3px solid var(--blue);
  border-radius: var(--radius-card);
}
.se-cadence div + div { border-top-color: var(--orange); }
.se-cadence dt {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--card-blue);
}
.se-cadence div + div dt { color: var(--orange); }
.se-cadence dd { margin: 0.5rem 0 0; color: var(--on-dark-muted); }
.se-updates-side { display: grid; gap: 1rem; }
.se-cadence strong,
.se-update-proof-figure {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-display);
  font-weight: 850;
  font-size: clamp(2.3rem, 1.8rem + 1.6vw, 3.1rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
}
/* one raise's result under the cadences (Hylio, Alex 2026-11-06), with its role and definition like the homepage proof figures */
.se-update-proof {
  margin: 0;
  padding: var(--space-3);
  background: rgba(3, 18, 58, 0.55);
  border: 1px solid var(--card-line);
  border-top: 3px solid var(--ice);
  border-radius: var(--radius-card);
}
.se-update-proof-label {
  margin: 0 0 0.5rem;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ice);
}
.se-update-proof .se-update-proof-figure { margin: 0 0 0.5rem; }
.se-update-proof figcaption > p { margin: 0 0 0.75rem; color: #E4E9F5; }
.se-update-proof dl { margin: 0; font-size: 0.85rem; }
.se-update-proof dl div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.5rem; padding: 0.5rem 0; border-top: 1px solid var(--card-line); }
.se-update-proof dt { font-family: var(--font-label); font-weight: 600; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--on-dark-muted); padding-top: 0.15rem; }
.se-update-proof dd { margin: 0; color: var(--on-dark-muted); }

/* followers: four steps from visitor to investor, with arrows between */
.se-funnel {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}
.se-funnel li {
  position: relative;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--blue);
  border-radius: var(--radius-card);
}
.se-funnel li:last-child { background: var(--card); border-color: var(--card-line); border-top-color: var(--orange); color: #fff; }
.se-funnel li + li::before {
  content: "\2192";
  position: absolute;
  top: 50%;
  left: -1.55rem;
  transform: translateY(-50%);
  font-weight: 700;
  color: var(--orange-ink);
}
.se-stage {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-ink);
}
.se-funnel li:last-child .se-stage { color: var(--orange); }
.se-funnel h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; line-height: 1.2; margin: 0.4rem 0 0.5rem; }
.se-funnel p { margin: 0; font-size: 0.95rem; color: var(--muted); }
.se-funnel li:last-child p { color: var(--on-dark-muted); }
.se-contacts { margin-top: var(--space-6); }
/* Wefunder page: the scope note under its Experience in numbers band */
.wf-numbers-note { margin: var(--space-3) 0 0; max-width: 60ch; font-size: 0.85rem; color: var(--muted); }
.se-subtitle {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
  text-wrap: balance;
}

/* the livestream: a navy poster that loads the YouTube player only when pressed (js/main.js) */
.se-video-grid { align-items: center; }
.se-video { margin: 0; }
/* Two videos in one case study section (Legion M): space between them */
.se-video.cs-video + .se-video.cs-video { margin-top: var(--space-4); }
.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--card);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-poster {
  position: absolute;
  inset: 0;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.35rem;
  padding: clamp(1.1rem, 3vw, 2rem);
  color: #fff;
  text-decoration: none;
  background:
    radial-gradient(55% 75% at 0% 100%, rgba(255, 121, 0, 0.22), transparent 70%),
    var(--card);
}
/* radio arcs in the upper right */
.video-poster::before,
.video-poster::after {
  content: "";
  position: absolute;
  z-index: -1;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(77, 168, 255, 0.22);
  pointer-events: none;
}
.video-poster::before { top: -55%; right: -18%; width: 70%; }
.video-poster::after { top: -30%; right: -6%; width: 44%; border-color: rgba(77, 168, 255, 0.14); }
/* a poster with a photo (Innovega case study): the photo fills the box, darkened at the bottom so the title reads */
.video-poster-photo { background: var(--card); }
.video-poster-photo::before, .video-poster-photo::after { display: none; }
.video-poster-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.video-poster-photo::after {
  display: block;
  inset: 0; top: auto; right: auto; width: 100%; height: 55%;
  aspect-ratio: auto; border: 0; border-radius: 0;
  background: linear-gradient(to top, rgba(3, 19, 62, 0.92), rgba(3, 19, 62, 0));
}
.video-play {
  position: absolute;
  top: 44%;
  left: 50%;
  display: grid;
  place-items: center;
  width: clamp(56px, 8vw, 78px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--orange);
  transform: translate(-50%, -50%);
  transition: transform 250ms var(--ease);
}
.video-play::before {
  content: "";
  width: 32%;
  height: 38%;
  margin-left: 8%;
  background: var(--navy);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.video-poster:hover .video-play,
.video-poster:focus-visible .video-play { transform: translate(-50%, -50%) scale(1.07); }
.video-poster:focus-visible { outline-offset: -4px; }
.video-kicker {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
}
.video-title {
  max-width: 30ch;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.45rem);
  line-height: 1.2;
}
.se-video figcaption { margin-top: 0.75rem; font-size: 0.9rem; color: var(--muted); }

/* proof: the testimonial, then the StartEngine case study cards in their own row below it */
.se-proof { display: grid; gap: var(--space-4); }
/* the cards share the row however many there are; one column on phones */
.se-proof .cs-cards { grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }
/* Four or more StartEngine case studies (five since LiquidPiston, 2026-11-09): two by two, and an odd
   last card sits centered under the pairs at the same width, as on the DealMaker page */
@media (min-width: 861px) {
  .se-proof .cs-cards:has(> li:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .se-proof .cs-cards:has(> li:nth-child(4)) > li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--space-4)) / 2); }
}
.se-quote { display: flex; flex-direction: column; justify-content: center; }
.se-quote blockquote p { font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.8rem); }
.se-quote blockquote::before {
  content: "\201C";
  display: block;
  height: 2.6rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 5rem;
  line-height: 1;
  color: var(--orange);
}
.se-quote-context { margin: var(--space-3) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--card-line); font-size: 0.9rem; color: var(--on-dark-muted); }
.se-quote-context a { color: #fff; font-weight: 600; text-underline-offset: 3px; }
/* the testimonial sits at the end of the Inside knowledge section (Alex, 2026-11-10) */
.se-quote-wrap { margin-top: var(--space-6); }
/* Leon Hounshell's quote, then the Forbes press quote (Alex, 2026-11-12) */
.se-quotes { display: grid; gap: var(--space-3); }

/* landing page and ad examples under paid media (Alex, 2026-11-10): three columns, the landing page across two of them
   (about as tall as a square ad) beside the first ad, then three ads; each opens larger in the lightbox (js/main.js) */
.se-examples { margin-top: var(--space-6); }
.se-examples-grid { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
.se-example-wide { grid-column: span 2; }
.se-example .cs-figure { margin: 0; }
.se-example:not(.se-example-wide) img { aspect-ratio: 1 / 1; object-fit: cover; }
.se-examples-note { margin: var(--space-3) 0 0; font-size: 0.88rem; color: var(--muted); max-width: 70ch; }
@media (max-width: 860px) {
  .se-examples-grid { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
}

@media (min-width: 861px) and (max-width: 1100px) {
  .journey-stages.se-stages { grid-template-columns: 1fr 1fr; row-gap: 1.25rem; }
  .se-funnel { grid-template-columns: 1fr 1fr; }
  .se-funnel li:nth-child(3)::before { display: none; }
}
@media (max-width: 1024px) {
  .se-updates { grid-template-columns: 1fr; gap: var(--space-4); }
  .se-cadence { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .journey-stages.se-stages { grid-template-columns: 1fr; }
  .se-funnel { grid-template-columns: 1fr; gap: 2rem; }
  .se-funnel li + li::before { content: "\2193"; top: -1.75rem; left: var(--space-3); transform: none; }
  .se-contacts { margin-top: var(--space-5); }
}
@media (max-width: 560px) {
  .se-cadence { grid-template-columns: 1fr; }
  .video-play { top: 34%; }
}


/* ---------- Equity crowdfunding page (equity-crowdfunding.html, Alex 2026-11-10) ---------- */
/* the three offering paths below the basics: the homepage raise-type cards, three across */
.ec-paths { margin-top: var(--space-6); }
.ec-paths > .list-title { margin-bottom: var(--space-3); }
.ec-paths .fine-print { margin-top: var(--space-3); }
/* "What it asks of you" below the benefit cards, laid out like the StartEngine contacts block */
.ec-asks { margin-top: var(--space-6); }
/* Experience in numbers: one band of three under the section heading (Alex, 2026-11-10) */
#experience .proof-grid { margin-top: var(--space-5); }
.ec-more { margin: var(--space-5) 0 0; text-align: center; }
@media (max-width: 860px) {
  .ec-paths, .ec-asks { margin-top: var(--space-5); }
}

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