/* ─────────────────────────────────────────────────────────────────────
   AIBC Consulting – base + sections
   Palette + typography + paper texture lifted from royal-corp-prep.html
   ───────────────────────────────────────────────────────────────────── */

/* ── Fonts ───────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Advercase';
  src: url('../assets/fonts/Advercase-Font-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Advercase';
  src: url('../assets/fonts/Advercase-Font-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Switzer (400/500/600) — self-hosted woff2 (was Fontshare CDN). */
@font-face {
  font-family: 'Switzer';
  src: url('../assets/fonts/Switzer-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('../assets/fonts/Switzer-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('../assets/fonts/Switzer-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ──────────────────────────────────────────────────────────── */
:root {
  /* Palette */
  --parchment: #f5f2ed;
  --parchment-deep: #ebe7e1;
  --ink: #0A0913;
  --royal-navy: #1e3154;
  --navy: var(--royal-navy);
  --navy-light: #2a4068;
  --mint: #5a9e8b;
  --mint-dark: #4a8575;
  --peach: #f0a090;
  --peach-dark: #e08878;
  --clay: #d97757;   /* primary action colour (topbar Quote, hero Start) */
  --steel: #6b7178;
  --focus-ring: rgba(112, 203, 255, 0.78);

  /* Roles – on light */
  --heading-light: var(--navy);
  --body-light: rgba(10, 9, 19, 0.62);
  --overline-light: var(--steel);
  --rule-light: var(--mint);
  --meta-light: var(--steel);

  /* Roles – on dark */
  --heading-dark: var(--parchment);
  --body-dark: rgba(245, 242, 237, 0.65);

  /* Type stacks */
  --font-display: 'Advercase', Georgia, serif;
  --font-body: 'Switzer', system-ui, -apple-system, sans-serif;

  /* Spacing */
  --section-y: 96px;
  --section-y-tight: 64px;

  /* Radii + motion */
  --radius-btn: 6px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Global environment adaptations ────────────────────────────────── */
@media (max-width: 640px) {
  :root { --section-y: 64px; --section-y-tight: 48px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: #fbfaf8;
  color: var(--ink);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Paper texture + vignette ────────────────────────────────────────── */
body::before,
body::after {
  content: none;
}

section,
footer {
  position: relative;
  z-index: 1;
}

.site-main {
  container: site / inline-size;
}

/* ── Container ───────────────────────────────────────────────────────── */
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 clamp(24px, 6cqi, 60px);
}

.container--wide {
  max-width: 1100px;
}


/* ── Typography scale ────────────────────────────────────────────────── */
.type-hero {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 38px;
  letter-spacing: 0.02em;
  color: var(--parchment);
  line-height: 1.08;
}

.type-body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--body-dark);
}

.type-body em {
  font-style: italic;
  color: var(--parchment);
}

.overline {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 242, 237, 0.55);
}

.overline--peach { color: var(--peach-dark); }

.section-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.6cqi, 40px);
  letter-spacing: 0.02em;
  color: var(--parchment);
  line-height: 1.12;
  margin-bottom: 32px;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--parchment);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: gap 0.2s ease, color 0.2s ease;
}
.link-arrow__text {
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.2s ease;
}
.link-arrow::after {
  content: '→';
  font-family: var(--font-display);
  transition: transform 0.2s ease;
}
.link-arrow:hover {
  color: var(--mint);
  gap: 10px;
}
.link-arrow:hover .link-arrow__text {
  border-bottom-color: var(--mint);
}
.link-arrow--muted {
  color: rgba(245, 242, 237, 0.55);
  cursor: default;
  pointer-events: none;
}
.link-arrow--muted::after { content: ''; }

/* ── A11y helpers ────────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

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

/* Scroll reveal – the `reveal` class is added by JS only, so no-JS / reduced-motion
   users see content fully visible (these blocks are all below the fold). */
.reveal {
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(16px);
}

/* ─── TOP BAR (body-level site chrome) ─────────────────────────────────
   Fixed, floating above every section. Lives OUTSIDE .site-main and .hero
   (both are CSS query containers — `container: … / inline-size` — which would
   become the containing block for a fixed child and break persist-on-scroll).
   Menu-only: the pill permanently shows the two action buttons — Quote
   snug to the right edge, Contact centred in the space to its left. The
   identity chip that used to live here moved to the hero — see
   sections/topbar.md. */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  justify-content: center;       /* the persistent pill, centred */
  padding: 20px clamp(20px, 4vw, 40px);
  pointer-events: none;          /* transparent bar; only the pill takes clicks */
}

/* Persistent white pill — it STAYS put and the same size; only its inner
   content swaps (identity → two buttons). The pill IS the overlap grid: both
   content states are pinned to one cell (grid-area 1/1) so they cross-fade in
   place, and the pill sizes to the larger (identity) so it never resizes.
   White fill + warm hairline, the site's pill material. */
.topbar__pill {
  pointer-events: auto;
  position: relative;            /* containing block for the overlaid buttons */
  display: flex;
  align-items: center;
  padding: 5px;                  /* one even ring around the 44px Quote button
                                    (was 8px; tightened 2026-09-06) */
  background: #ffffff;
  border: 1.5px solid #efe9e2;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(40, 30, 20, 0.05), 0 6px 18px rgba(40, 30, 20, 0.06);
}

/* The two buttons — the pill's permanent content, in normal flow so they size
   the pill directly. The clay Quote action sits snug against the pill's right
   inner edge: the pill's own 5px padding is the only gap on every side, so the
   space to the right of Quote equals the space above and below it (an extra
   8px padding-right here used to double the right gap — removed 2026-09-06);
   Contact takes all the space to its left (flex:1) and centres its label there. */
.topbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  padding-right: 0;
}

.topbar__btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;                  /* WCAG-sized touch target at every width */
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.2s var(--ease-out), background 0.2s var(--ease-out), transform 0.12s ease;
}
.topbar__btn:active { transform: translateY(1px); }

/* Contact — quiet navy text button (secondary), sits inside the white pill.
   Hover is a simple underline (no background wash — that read as a faint pill
   inside the pill); offset so it sits clear of the text. */
.topbar__btn--contact {
  flex: 1;                       /* fill the space left of Quote; the label
                                    auto-centres (the btn is inline-flex,
                                    justify-content:center) so "Contact" sits
                                    midway between the pill's left inner edge and
                                    the clay button's left edge */
  background: transparent;
  color: var(--navy);
  padding: 0 14px;
}
.topbar__btn--contact:hover {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* Quote - the clay primary button, same colour as the hero; jumps to the
   roadmap-entry section (the AI roadmap scoping funnel). */
.topbar__btn--quote {
  background: var(--clay);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(40, 30, 20, 0.12), inset 0 1.5px 0 hsla(0, 0%, 100%, 0.25);
}
.topbar__btn--quote:hover { filter: brightness(1.04); }
.topbar__btn-mark { width: 15px; height: 15px; flex-shrink: 0; }

/* The two buttons fit beside each other on mobile too — no separate
   small-screen treatment needed. */

/* In-page jump targets for the top-bar buttons — offset so the fixed bar
   (~76px) doesn't land on top of them. */
#roadmap-entry,
#contact { scroll-margin-top: 96px; }

/* The chip is the .author-line component verbatim (same avatar, gaps, type,
   sizes — David asked for exactly that shape). Only the container and the
   on-light colours differ. */
/* Compound selector (0,2,0) so this actually beats the base `.author-line`
   margin-bottom:72px, which is declared later in the file. Without this the
   identity's bottom margin inflates the top-bar pill from inside. */
.author-line.author-line--chip { margin-bottom: 0; }
/* Hero identity card — a larger avatar with a whisper shadow, and a single
   grey identity line "David Robb, AIBC Consulting" at 13px / regular weight.
   Scoped to --chip so the About author-line (40px, plain) is untouched. */
.author-line--chip .author-line__name {
  color: var(--steel);
  font-size: 13px;
  font-weight: 400;
}
/* Hero avatar edge: a 1px navy hairline at 16% (option B of the 2026-09-06
   comparison — David's pick) plus the original whisper shadow. Box-shadow only,
   so the image keeps its size and the About avatar is untouched. */
.author-line--chip .author-line__avatar {
  width: 56px;
  height: 56px;
  box-shadow:
    0 0 0 1px rgba(30, 49, 84, 0.16),
    0 2px 8px rgba(10, 9, 19, 0.08);
}

@media (prefers-reduced-motion: no-preference) {
  /* One-time drop-in entrance on the persistent pill. It never fades on scroll
     (only its inner content does), so the forwards-filled opacity is fine. */
  .topbar__pill {
    opacity: 0;
    animation: topbarDrop 0.7s var(--ease-out) 0.02s forwards;
  }
  @keyframes topbarDrop {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ─── HERO · contact-first ─────────────────────────────────────────────
   Ben Mather's shape (avatar chip → headline → subhead → free-text "ask"
   pill + Start → quick-pick chips), rebuilt in AIBC's light-cream language.
   A single centred column — no split portrait. Sized with the named `hero`
   query container (adaptations at the foot of this block), never viewport
   width; viewport media queries are reserved for reduced motion. */
.hero {
  container: hero / inline-size;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* Content is TOP-ALIGNED and the hero takes its natural height (no forced
     100svh), so the headline sits at the upper-third eyeline and section 2 rides
     up close under the fold instead of a full screen down. Top padding clears
     the floating top bar and drops the headline about a third of the way down.
     Mobile keeps its own padding in the hero container block below. */
  min-height: auto;
  overflow: hidden;
  color: var(--ink);
  padding: clamp(150px, 16cqi, 200px) 0 clamp(72px, 9cqi, 108px);
  background: #fbfaf8;
}

/* Canary Wharf establishes a quiet sense of place without competing with the
   conversion content. The source is a 2400px WebP (233KB); the explicit size
   prevents layout shift, while cover keeps one asset useful at every width. */
.hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  opacity: 0.25;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 66%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 66%, transparent 100%);
  pointer-events: none;
  user-select: none;
}

/* Ben's reference treatment uses a 25% image below a 60% cream veil. Keep that
   measured relationship, then add the existing AIBC peach/mint atmosphere on
   the same layer so the photograph feels native to the site. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(66% 50% at 50% 33%, rgba(240, 160, 144, 0.10), transparent 62%),
    radial-gradient(125% 90% at 50% -4%, rgba(90, 158, 139, 0.06), transparent 58%),
    rgba(251, 250, 248, 0.60);
}

/* An extremely subtle paper grain over the wash — adds depth without colour.
   Uniformly faint; the radial washes above carry the "strongest behind the
   headline" gradient. data: URI is allowed by the img-src CSP. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 38%, #000 0%, transparent 78%);
  mask-image: radial-gradient(80% 70% at 50% 38%, #000 0%, transparent 78%);
}

.hero__inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(24px, 6cqi, 60px);
  text-align: center;
}

/* Identity chip — column layout (avatar over the single grey name line). Its
   spacing DOWN to the H1 is owned by .hero__headline's margin-top, so the chip
   stays margin-bottom:0 here. Scoped `.hero .hero__chip` (0,2,0) so it beats the
   shared `.author-line`/`.author-line--chip` base rules that otherwise leak a
   72px bottom margin and 14px gap into this chip. */
.hero .hero__chip {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  gap: 10px;
}
.hero__chip .author-line__text {
  margin-left: 0;
  align-items: center;
}

.author-line {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 72px;
}

.author-line__avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.author-line__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.author-line__name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--parchment);
  line-height: 1;
}

.author-line__role {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: rgba(245, 242, 237, 0.55);
  line-height: 1.25;
}

.hero__headline {
  /* Symmetric air above and below the headline (David's spec). The top margin
     is what actually creates the chip → H1 gap, since the chip is margin-0.
     32px matches Ben's identity → H1 gap. Flex column = no margin collapse. */
  margin: 32px 0;
  width: 100%;
  max-width: none;
  min-width: 0;
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 400;
  /* Big editorial display, tight leading, slightly negative tracking. Scales
     with the hero container (cqi), not the viewport. */
  font-size: clamp(44px, 7.4cqi, 72px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  /* The headline is two lines now ("Running your business should feel easy.",
     2026-09-06); balance them so neither line is left with an orphan word. */
  white-space: normal;
  text-wrap: balance;
}

/* (The author identity now lives in the hero chip — .author-line--chip in the
   TOP BAR block above carries the on-light recolour it shares with the chip.) */

.hero__subhead {
  margin: 0 0 32px;
  max-width: 800px;
  min-width: 0;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.9cqi, 19px);
  line-height: 1.6;
  color: rgba(10, 9, 19, 0.66);
}
.hero__subhead em {
  font-style: italic;
  font-weight: 500;
  color: inherit;
}

/* ── Hero "ask" — free-text pill + Start ────────────────────────────────
   Its own component: white pill, warm #efe9e2 hairline, inset highlight,
   clay action button. A plain text input (the pain phrase). */
.hero-ask {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 672px;
  min-width: 0;
  margin: 0 auto 20px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Desktop: the field wrapper */
.hero-ask__field {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  padding-left: 20px;
  padding-right: 20px;
  background: #ffffff;
  border: 1.5px solid #efe9e2;
  border-radius: 999px;
  box-shadow: inset 0 1.5px 0 hsla(0, 0%, 100%, 0.9), 0 1px 2px rgba(40, 30, 20, 0.04);
  transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.hero-ask__field:focus-within {
  border-color: var(--clay);
  box-shadow: 0 0 0 4px rgba(217, 119, 87, 0.12);
}

.hero-ask__input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  text-align: left;
  padding: 0;
}
.hero-ask__input::placeholder { color: #a59e95; opacity: 1; }

.hero-ask__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--clay);
  color: #ffffff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.005em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(40, 30, 20, 0.12), inset 0 1.5px 0 hsla(0, 0%, 100%, 0.25);
  transition: filter 0.2s var(--ease-out), transform 0.12s ease;
}
.hero-ask__btn:hover { filter: brightness(1.04); transform: translateY(-1px); }
.hero-ask__btn:active { transform: translateY(1px); }
/* H5 — keyboard focus for the Start button (the pill's focus-within covers the
   input; the button is a separate control and needs its own ring). */
.hero-ask__btn:focus-visible {
  outline: none;
  box-shadow: 0 1px 2px rgba(40, 30, 20, 0.12), inset 0 1.5px 0 hsla(0, 0%, 100%, 0.25),
              0 0 0 3px rgba(217, 119, 87, 0.35);
}
.hero-ask__btn-mark { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Hero quick-pick chips ──────────────────────────────────────────── */
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 548px;
}
/* H4 — the primary quick-picks carry the house pill material (white fill, warm
   hairline, inset highlight + soft shadow) with comfortable padding; hover
   lifts and warms the border to clay, and keyboard focus gets a ring. */
/* H4 — the quick-picks are light OUTLINE pills (Ben pattern): transparent fill,
   a single hairline border and no shadow, so they sit quietly beneath the ask
   and don't compete with the clay Start button. Hover warms the border to clay,
   lifts, and fills to a faint white; keyboard focus gets a ring. */
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 19px;
  border: 1px solid rgba(30, 49, 84, 0.18);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  color: var(--steel);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none;
  transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out),
              color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out),
              transform 0.12s ease;
}
.hero-chip:hover {
  border-color: var(--clay);
  background: rgba(255, 255, 255, 0.55);
  color: var(--navy);
  box-shadow: 0 4px 14px rgba(40, 30, 20, 0.06);
  transform: translateY(-2px);
}
.hero-chip:active { transform: translateY(0); }
.hero-chip svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.55;
}
.hero-chip:focus-visible {
  outline: none;
  border-color: var(--clay);
  box-shadow: inset 0 1.5px 0 hsla(0, 0%, 100%, 0.9), 0 0 0 3px rgba(217, 119, 87, 0.28);
}

/* ── Visually-hidden utility (labels for screen readers) ───────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Staggered entrance — the "click" feel, above the fold, on load */
@media (prefers-reduced-motion: no-preference) {
  .hero--enter > * {
    opacity: 0;
    animation: heroRise 0.7s var(--ease-out) forwards;
  }
  .hero--enter > .hero__chip     { animation-delay: 0.04s; }
  .hero--enter > .hero__headline { animation-delay: 0.10s; }
  .hero--enter > .hero__subhead  { animation-delay: 0.18s; }
  .hero--enter > .hero-ask       { animation-delay: 0.26s; }
  .hero--enter > .hero-chips     { animation-delay: 0.34s; }
}
@keyframes heroRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero container adaptations ─────────────────────────────────────────
   Sized by the named `hero` query container. Below ~560cqi the ask pill
   splits: the field stays inline with a compact Start beside it. */
@container hero (max-width: 640px) {
  .hero {
    /* Natural height on small screens — no forced full-viewport scroll trap.
       Padding defines the rhythm; the content breathes on its own. */
    min-height: auto;
    padding: clamp(144px, 26cqi, 180px) 0 clamp(56px, 12cqi, 88px);
  }
  /* Chip bottom spacing is owned by .hero__headline's margin-top (desktop rule);
     nothing to set on the chip here. */
  /* One line on mobile too: a container-relative font-size keeps
     "You don't have to learn AI." on a single row with no overflow from 375px down.
     Symmetric top/bottom margins keep equal air above and below the headline. */
  .hero__headline {
    margin: 26px 0;
    white-space: normal;
    text-wrap: balance;
    font-size: clamp(30px, 9.2cqi, 44px);
    letter-spacing: -0.02em;
  }
  .hero__subhead { margin-bottom: 30px; }
  .hero__backdrop { object-position: 56% 50%; }
}

@container hero (max-width: 560px) {
  /* Ben-mobile ask: the field stays flex-1 and a COMPACT Start sits inline to
     its right (not a full-width stacked button). */
  .hero-ask {
    flex-direction: row;
    align-items: stretch;
    height: auto;
    gap: 10px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  /* the pill ring no longer applies to the form — it lives on the field now */
  .hero-ask:focus-within { border: 0; box-shadow: none; }

  .hero-ask__field {
    flex: 1 1 auto;
    min-width: 0;
    height: 50px;
    padding-left: 18px;
    padding-right: 14px;
    background: #ffffff;
    border: 1.5px solid #efe9e2;
    border-radius: 14px;
    box-shadow: inset 0 1.5px 0 hsla(0, 0%, 100%, 0.9), 0 1px 2px rgba(40, 30, 20, 0.04);
    transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
  }
  .hero-ask__field:focus-within {
    border-color: var(--clay);
    box-shadow: 0 0 0 4px rgba(217, 119, 87, 0.12);
  }

  .hero-ask__input {
    height: 100%;
    font-size: 16px;
    padding-left: 0;
  }
  .hero-ask__btn {
    flex-shrink: 0;
    width: auto;
    height: 50px;
    padding: 0 18px;
    border-radius: 14px;
  }

  /* The 3 quick-picks can't share one readable row at 375px — the longest label
     ("Drowning in admin") forces a ~11px/no-icon row that clips both edges. So
     wrap cleanly (tightened) rather than clip. Flagged for David. */
  .hero-chips {
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
  }
  .hero-chip {
    padding: 9px 14px;
    font-size: 13px;
    gap: 6px;
  }
  .hero-chip svg { width: 14px; height: 14px; }
}

/* ─── COMPANY BRAIN ────────────────────────────────────────────────── */
.brain-section {
  container: brain / inline-size;
  --brain-bg: #0e1826;
  --brain-grid: rgba(112, 203, 255, 0.055);
  --brain-blue: #70cbff;
  --brain-muted: #6b7178;
  --brain-pill: rgba(24, 32, 42, 0.96);
  --brain-pill-text: rgba(246, 248, 250, 0.92);
  padding: 0;
  background: var(--brain-bg);
}

.brain-shell {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(72px, 7cqi, 104px) clamp(36px, 5cqi, 96px) 74px;
  overflow: hidden;
  background-image:
    linear-gradient(var(--brain-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--brain-grid) 1px, transparent 1px);
  background-size: 48px 48px;
}

.brain-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  opacity: 0.65;
  pointer-events: none;
  border-color: rgba(246, 248, 250, 0.25);
}

.brain-corner--tl {
  left: 40px;
  top: 40px;
  border-left: 1px solid;
  border-top: 1px solid;
}

.brain-corner--tr {
  right: 40px;
  top: 40px;
  border-right: 1px solid;
  border-top: 1px solid;
}

.brain-corner--bl {
  left: 40px;
  bottom: 40px;
  border-left: 1px solid;
  border-bottom: 1px solid;
}

.brain-corner--br {
  right: 40px;
  bottom: 40px;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

.brain-main {
  display: grid;
  grid-template-columns: minmax(340px, 0.9fr) minmax(500px, 1.1fr);
  align-items: center;
  gap: clamp(32px, 5cqi, 76px);
}

.brain-copy {
  position: relative;
  z-index: 4;
}

.brain-eyebrow-row {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin-bottom: clamp(54px, 6cqi, 82px);
}

.brain-stripline {
  width: 72px;
  height: 2px;
  margin-top: 12px;
  background: var(--brain-blue);
}

.brain-eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.2cqi, 18px);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brain-blue);
}

.brain-intro {
  max-width: 760px;
  margin: 0 auto 96px;
  text-align: center;
}

.about-intro {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}

.brain-intro h2,
.about-intro h2 {
  margin: 0 auto 18px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4cqi, 48px);
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--parchment);
}

.brain-intro p,
.about-intro p {
  max-width: 620px;
  margin: 0 auto;
  font-family: var(--font-body);
  color: rgba(245, 242, 237, 0.62);
}

.brain-title {
  margin: 0 0 34px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(78px, 8cqi, 128px);
  line-height: 0.88;
  letter-spacing: 0;
}

.brain-title span {
  display: block;
}

.brain-title span:first-child { color: var(--parchment); }
.brain-title span:last-child { color: var(--mint); }

.brain-body {
  max-width: 620px;
  margin: 0 0 34px;
  font-family: var(--font-body);
  color: rgba(245, 242, 237, 0.62);
}

.brain-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 30px;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  color: var(--brain-muted);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.brain-graph {
  position: relative;
  z-index: 2;
  width: min(100%, 640px);
  aspect-ratio: 1.15 / 1;
  justify-self: center;
}

.brain-edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.edge-glow {
  stroke: rgba(112, 203, 255, 0.16);
  stroke-width: 2.4;
  stroke-linecap: round;
  fill: none;
  filter: blur(2px);
}

.edge-main {
  stroke: rgba(112, 203, 255, 0.85);
  stroke-width: 0.35;
  stroke-linecap: round;
  fill: none;
}

.edge-dim {
  stroke: rgba(112, 203, 255, 0.35);
  stroke-width: 0.28;
  stroke-linecap: round;
  stroke-dasharray: 1.5 2;
  fill: none;
}

.brain-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  line-height: 1;
  color: var(--brain-pill-text);
  background: var(--brain-pill);
  border: 1px solid rgba(112, 203, 255, 0.55);
  border-radius: 13px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.brain-node--primary {
  padding: 14px 24px;
  font-size: clamp(15px, 1.45cqi, 19px);
  color: #1e3154;
  background: var(--parchment);
}

.brain-node--parent {
  padding: 13px 23px;
  font-size: clamp(13px, 1.45cqi, 18px);
}

.brain-node--child {
  padding: 9px 16px;
  font-size: clamp(11px, 1.1cqi, 14px);
}

.brain-node--business { --x: 50%; --y: 50%; }
.brain-node--strategy { --x: 23%; --y: 17%; }
.brain-node--customers { --x: 78%; --y: 18%; }
.brain-node--automations { --x: 14%; --y: 54%; }
.brain-node--team { --x: 86%; --y: 48%; }
.brain-node--fulfilment { --x: 23%; --y: 79%; }
.brain-node--marketing { --x: 78%; --y: 79%; }
.brain-node--pricing { --x: 42%; --y: 8%; }
.brain-node--positioning { --x: 9%; --y: 5%; }
.brain-node--competitors { --x: 46%; --y: 26%; }
.brain-node--feedback { --x: 63%; --y: 4%; }
.brain-node--icp { --x: 91%; --y: 6%; }
.brain-node--transactions { --x: 92%; --y: 32%; }
.brain-node--documentation { --x: 3%; --y: 68%; }
.brain-node--deployments { --x: 16%; --y: 35%; }
.brain-node--roles { --x: 75%; --y: 38%; }
.brain-node--functions { --x: 88%; --y: 65%; }
.brain-node--principles { --x: 46%; --y: 75%; }
.brain-node--sops { --x: 26%; --y: 94%; }
.brain-node--sales-calls { --x: 58%; --y: 89%; }
.brain-node--ads { --x: 80%; --y: 94%; }
.brain-node--campaigns { --x: 96%; --y: 85%; }

.brain-footer {
  text-align: center;
  margin: 96px 0 0;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.6cqi, 25px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brain-muted);
}

/* ── Company Brain container adaptations ───────────────────────────── */
@container brain (max-width: 1180px) {
  .brain-shell {
    padding: 64px 24px 56px;
  }

  .brain-main {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .brain-eyebrow-row {
    margin-bottom: 56px;
  }

  .brain-graph {
    min-height: 420px;
    max-width: 720px;
    margin: 0 auto;
  }

  .brain-footer {
    text-align: center;
    margin: 0;
  }

  .panel-grid { grid-template-columns: 1fr; gap: 24px; }
  .services-list { grid-template-columns: 1fr; }
}

@container brain (max-width: 640px) {
  .brain-corner { display: none; }
  .brain-intro {
    margin-bottom: 72px;
  }
  .brain-eyebrow-row {
    gap: 14px;
    margin-bottom: 42px;
  }
  .brain-stripline {
    width: 48px;
  }
  .brain-eyebrow {
    font-size: 13px;
    letter-spacing: 0.14em;
  }
  .brain-title {
    font-size: clamp(58px, 20cqi, 82px);
    margin-bottom: 24px;
  }
  .brain-graph {
    min-height: 320px;
    aspect-ratio: 1 / 0.9;
  }
  .brain-node--child,
  .brain-edges .edge-dim {
    display: none;
  }
  .brain-node {
    border-radius: 10px;
  }
  .brain-node--primary {
    padding: 11px 14px;
    font-size: 12.5px;
  }
  .brain-node--parent {
    padding: 9px 11px;
    font-size: 10.5px;
  }
  .brain-node--child {
    padding: 6px 8px;
    font-size: 8.5px;
  }
  .brain-footer {
    font-size: 13px;
    line-height: 1.5;
  }
}

/* ─── ABOUT ──────────────────────────────────────────────────────── */
.about-section {
  container: about / inline-size;
  padding: var(--section-y) 0;
}

.about-copy {
  max-width: 720px;
  margin: 0 auto;
}

.about-profile {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.about-profile__image {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto clamp(32px, 3.8cqi, 36px);
  border: 1px solid rgba(30, 49, 84, 0.18);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 5px rgba(30, 49, 84, 0.035);
}

.about-profile h2 {
  margin: 0 0 clamp(26px, 3cqi, 30px);
  font-family: var(--font-display);
  font-size: clamp(36px, 4cqi, 48px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--navy);
}

.about-profile__copy {
  max-width: 660px;
  margin: 0 auto;
}

.about-profile__copy p {
  margin: 0;
  font-size: clamp(16px, 1.35cqi, 18px);
  line-height: 1.62;
  color: rgba(10, 9, 19, 0.72);
}

.about-profile__copy p + p {
  margin-top: 16px;
}

.about-profile__copy strong {
  font-weight: 650;
  color: var(--navy);
}

.about-profile__copy em {
  color: var(--navy);
}

/* The cue now sits under the chart (2026-09-06); the chart's own margin-top
   carries the gap down from the profile copy that the cue used to own. */
.gantt__prompt {
  margin: 22px auto 0;
  text-align: center;
  font-size: 14px;
  color: var(--steel);
}

.about-section .arc-track {
  margin: 44px 0;
}

.about-section .arc-node--current .arc-node__role,
.about-section .arc-node__year {
  color: var(--parchment);
}

.panel-overline { margin-bottom: 12px; }
.panel-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: 0.02em;
  color: var(--parchment);
  line-height: 1.2;
  margin-bottom: 22px;
  max-width: 640px;
}

.panel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.panel-grid__copy .type-body,
.panel-outro .type-body,
.panel-bio .type-body { margin-bottom: 20px; }
.panel-grid__copy .type-body:last-child,
.panel-outro .type-body:last-child { margin-bottom: 0; }
.panel-bio .type-body:last-of-type { margin-bottom: 28px; }

.panel-rows {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.panel-list {
  list-style: decimal;
  padding-left: 22px;
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--body-dark);
}
.panel-list li { margin-bottom: 6px; }
.panel-list li:last-child { margin-bottom: 0; }
.panel-list li::marker { color: rgba(245, 242, 237, 0.55); font-weight: 500; }
.panel-list--bullets { list-style: disc; padding-left: 18px; }
.panel-list--bullets li { margin-bottom: 14px; }
.panel-list--bullets li:last-child { margin-bottom: 0; }
.panel-grid__copy .type-body + .panel-list { margin-top: -8px; }

/* Flow strip – Cloudflare → n8n → Kit → Vercel → Supabase */
.flow-strip {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  padding: 16px 0 8px;
  flex-wrap: nowrap;
  max-width: 100%;
}
.flow-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  width: 64px;
}
.flow-tile__icon-wrap {
  height: 26px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flow-tile__icon {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
}
/* Optical sizing – tuned per viewBox + visual mass */
.flow-tile__icon--cloudflare { max-height: 16px; }
.flow-tile__icon--n8n        { max-height: 22px; }
.flow-tile__icon--kit        { max-height: 16px; }
.flow-tile__icon--vercel     { max-height: 24px; }
.flow-tile__icon--supabase   { max-height: 22px; }
.flow-tile__label {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(245, 242, 237, 0.55);
  line-height: 1;
  white-space: nowrap;
}
.flow-arrow {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(107, 113, 120, 0.4);
  user-select: none;
  line-height: 26px;
  flex-shrink: 0;
}
.panel-grid__visual:has(.flow-strip) {
  display: flex;
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
}

@container brain (max-width: 480px) {
  .flow-strip { gap: 1px; }
  .flow-tile { width: 56px; }
  .flow-tile__label { font-size: 8.5px; letter-spacing: 0.02em; }
}

/* Services list */
.services-list {
  list-style: none;
  margin: 24px 0 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.service {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 16px 0;
  border-top: 1px solid rgba(245, 242, 237, 0.12);
}
.service__num {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  color: var(--parchment);
  flex-shrink: 0;
}
.service__name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  color: var(--parchment);
  line-height: 1.3;
  margin-bottom: 8px;
}
.service__desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--body-dark);
}
.service__desc + .service__desc { margin-top: 20px; }
.service__chip {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(90, 158, 139, 0.3);
  color: var(--mint);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Timeline (arc track) */
.arc-track {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: flex-start;
  gap: 0;
  position: relative;
  margin: 32px 0 56px;
  padding: 0 8px;
}
.arc-track::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 8px;
  right: 8px;
  top: 7px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--mint) 50%, transparent 100%);
  opacity: 0.5;
}
.arc-node {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
  gap: 12px;
}
.arc-node__dot {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(rgba(245, 242, 237, 0.18), rgba(245, 242, 237, 0.18)), var(--navy);
  border: 1px solid rgba(245, 242, 237, 0.4);
  z-index: 2;
}
.arc-node--current .arc-node__dot {
  background: var(--mint);
  border-color: var(--mint-dark);
}
.arc-node__year {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(245, 242, 237, 0.55);
}
.arc-node__role {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  color: rgba(245, 242, 237, 0.72);
}

@container about (max-width: 640px) {
  .about-copy .author-line {
    justify-content: flex-start;
    margin-bottom: 48px;
  }
  .arc-track {
    display: grid;
    grid-template-columns: auto auto 1fr;
    column-gap: 16px;
    row-gap: 18px;
    align-items: center;
    padding-left: 13px;
  }
  .arc-track::before {
    left: 20px;
    right: auto;
    top: 8px;
    bottom: 8px;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, transparent 0%, var(--mint) 50%, transparent 100%);
  }
  .arc-node {
    display: contents;
  }
  .arc-node__year,
  .arc-node__role {
    text-align: left;
  }
}

/* ─── CONTACT FORM ──────────────────────────────────────────────────── */
.contact-section {
  container: contact / inline-size;
  padding: var(--section-y) 0;
}
.contact-section__sub {
  max-width: 540px;
  margin-bottom: 36px;
}

.contact-form {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 0;
  height: 0;
  opacity: 0;
}
.form-row { display: block; }
.form-input,
.form-textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 14px 16px;
  background: #ffffff;
  color: var(--ink);
  border: 1px solid rgba(10, 9, 19, 0.12);
  border-radius: 4px;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--steel);
  opacity: 0.85;
}
.form-input:focus,
.form-textarea:focus {
  border-color: var(--peach);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(240, 160, 144, 0.22);
}
.form-input:focus-visible,
.form-textarea:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.form-textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.5;
}

.field-error {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--peach-dark);
  font-style: italic;
}

.btn-send {
  align-self: flex-start;
  margin-top: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--parchment);
  border: 0;
  border-radius: var(--radius-btn);
  padding: 14px 28px;
  cursor: pointer;
  transition: background 0.2s var(--ease-out);
}
.btn-send:hover { background: var(--parchment-deep); }
.btn-send:disabled { opacity: 0.6; cursor: progress; }

.form-success,
.form-error {
  display: none;
  max-width: 560px;
  margin-top: 24px;
  padding: 16px 18px;
  font-family: var(--font-body);
  font-size: 14.5px;
  border-radius: 4px;
  line-height: 1.5;
}
.form-success.visible,
.form-error.visible { display: block; }
.form-success {
  background: rgba(90, 158, 139, 0.12);
  color: var(--mint);
  border: 1px solid rgba(90, 158, 139, 0.4);
}
.form-error {
  background: rgba(240, 160, 144, 0.12);
  color: var(--peach-dark);
  border: 1px solid rgba(240, 160, 144, 0.4);
}
.form-error a { color: inherit; }

.contact-direct {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(245, 242, 237, 0.12);
  max-width: 560px;
}
.contact-direct__email {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--parchment);
  margin-bottom: 6px;
  transition: color 0.2s var(--ease-out);
}
.contact-direct__email #copy-email-text {
  border-bottom: 1px solid rgba(245, 242, 237, 0.4);
  padding-bottom: 2px;
  transition: border-color 0.2s var(--ease-out);
}
.contact-direct__email svg { width: 14px; height: 14px; }
.contact-direct__email:hover { color: var(--mint); }
.contact-direct__email:hover #copy-email-text,
.contact-direct__email.copied #copy-email-text { border-color: var(--mint); }
.contact-direct__email.copied { color: var(--mint); }
.contact-direct__note {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(245, 242, 237, 0.55);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.pulse-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mint);
  flex-shrink: 0;
}
.pulse-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--mint);
  animation: pulse-dot 1.8s ease-out infinite;
}
@keyframes pulse-dot {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(2.4); opacity: 0;   }
}
@media (prefers-reduced-motion: reduce) {
  .pulse-dot::after { animation: none; }
}

/* ─── FOOTER ────────────────────────────────────────────────────────── */
.site-footer {
  container: footer / inline-size;
  padding: 48px 0 56px;
  border-top: 1px solid rgba(90, 158, 139, 0.2);
  margin-top: 32px;
}
.site-footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-footer__copy {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(245, 242, 237, 0.55);
}
.socials {
  list-style: none;
  display: flex;
  gap: 6px;
  align-items: center;
  margin-right: -10px;
}
.socials a {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: rgba(245, 242, 237, 0.55);
  transition: color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.socials a:hover { color: var(--mint); transform: translateY(-1px); }
.socials svg { width: 18px; height: 18px; display: block; }

@container footer (max-width: 640px) {
  .site-footer .container { flex-direction: column; gap: 16px; }
}

/* ─── LIGHT PAGE SECTIONS ──────────────────────────────────────────── */
.about-section,
.contact-section,
.site-footer {
  background: #fbfaf8;
  color: var(--ink);
}

.section-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
}

.section-eyebrow-index {
  flex: none;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clay);
}

.section-eyebrow-glyph {
  flex: none;
  width: 12px;
  height: 12px;
  color: var(--peach-dark);
}

.section-eyebrow-kicker {
  margin: 0;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--steel);
}

.section-eyebrow-rule {
  flex: 1;
  height: 1px;
  background: rgba(30, 49, 84, 0.16);
}

@container site (max-width: 780px) {
  .section-eyebrow-row {
    margin-bottom: 24px;
  }
}

.about-section > .container > .section-eyebrow-row,
.contact2__shell > .section-eyebrow-row,
.roadmap-entry > .container > .section-eyebrow-row {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.about-section > .container > .section-eyebrow-row {
  margin-bottom: clamp(48px, 5cqi, 58px);
}

.contact-section .type-body {
  color: rgba(10, 9, 19, 0.68);
}

.contact-section .section-heading {
  color: var(--navy);
}

.about-section .arc-node--current .arc-node__role,
.about-section .arc-node__year,
.arc-node__year {
  color: var(--navy);
}

.arc-node__role {
  color: rgba(10, 9, 19, 0.62);
}

.arc-node__dot {
  background: #ffffff;
  border-color: rgba(30, 49, 84, 0.26);
}

.panel-heading,
.service__num,
.service__name {
  color: var(--navy);
}

.panel-list,
.service__desc {
  color: rgba(10, 9, 19, 0.66);
}

.panel-list li::marker {
  color: rgba(30, 49, 84, 0.46);
}

.flow-tile__label {
  color: rgba(10, 9, 19, 0.56);
}

.service {
  border-top-color: rgba(30, 49, 84, 0.12);
}

.contact-section .section-heading {
  color: var(--navy);
}

.contact-direct {
  border-top-color: rgba(30, 49, 84, 0.12);
}

.contact-direct__email {
  color: var(--navy);
}

.contact-direct__email #copy-email-text {
  border-bottom-color: rgba(30, 49, 84, 0.28);
}

.contact-direct__note {
  color: rgba(10, 9, 19, 0.56);
}

.btn-send {
  color: #ffffff;
  background: var(--navy);
}

.btn-send:hover {
  background: var(--navy-light);
}

.site-footer {
  margin-top: 0;
  border-top-color: rgba(30, 49, 84, 0.14);
}

.site-footer__copy,
.socials a {
  color: rgba(10, 9, 19, 0.58);
}

.socials a:hover {
  color: var(--mint-dark);
}

/* Marker-pen highlight (slide-08 pattern, peach variant) */
.highlight {
  background: linear-gradient(to top, rgba(240, 160, 144, 0.6) 12%, transparent 40%);
}

/* Panel-outro spacing rhythm – tonal pivot + setup-payoff + CTA breathing */
.panel-outro {
  margin-top: 24px;                    /* additive to .panel-rows 40px gap → 64px total before outro */
}
.panel-outro .type-body:first-child {
  margin-bottom: 14px;                 /* tighten "It started with..." → "Then turned into..." for setup-payoff beat */
}
.panel-outro .link-arrow {
  margin-top: 12px;                    /* additive to previous p's 20px mb → ~32px before CTA */
  color: var(--mint);                  /* energetic green CTA */
  align-items: baseline;               /* typographic alignment with pulse-dot */
  gap: 6px;                            /* lock – override base hover gap-expand */
}
.panel-outro .link-arrow::after {
  content: none;                       /* drop the arrow */
}
.panel-outro .link-arrow .pulse-dot {
  margin-right: 8px;                   /* tighter pulse-to-CTA gap */
}
.panel-outro .link-arrow .link-arrow__text {
  border-bottom-color: currentColor;   /* permanent underline (replaces arrow as link affordance) */
}
.panel-outro .link-arrow:hover {
  color: var(--mint);             /* subtle darken on hover */
  gap: 6px;                            /* lock */
}
.panel-outro .link-arrow:hover .link-arrow__text {
  border-bottom-color: currentColor;   /* lock – underline stays */
}

.about-section .arc-track { margin: 40px 0 52px; }

.arc-node { gap: 13px; }

.arc-node__dot {
  width: 12px;
  height: 12px;
  background: #fbfaf8;
  border: 1px solid rgba(30, 49, 84, 0.3);
  box-shadow: 0 0 0 4px #fbfaf8;
}

.arc-node--current .arc-node__dot {
  background: var(--mint);
  border-color: var(--mint-dark);
  animation: arc-here-pulse 2.8s var(--ease-out) infinite;
}

@keyframes arc-here-pulse {
  0% { box-shadow: 0 0 0 4px #fbfaf8, 0 0 0 5px rgba(90, 158, 139, 0.35); }
  70% { box-shadow: 0 0 0 4px #fbfaf8, 0 0 0 12px rgba(90, 158, 139, 0); }
  100% { box-shadow: 0 0 0 4px #fbfaf8, 0 0 0 5px rgba(90, 158, 139, 0); }
}

.arc-track::before { opacity: 0.42; }

.arc-node__year {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: rgba(30, 49, 84, 0.55);
}

.arc-node--current .arc-node__year { color: var(--mint-dark); }

.arc-node__role {
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(10, 9, 19, 0.6);
}

.about-section .arc-node--current .arc-node__role {
  color: var(--navy);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .arc-node--current .arc-node__dot { animation: none; }
}

/* ─── ABOUT · CAREER GANTT ─────────────────────────────────────── */
.gantt {
  margin: clamp(58px, 7cqi, 68px) 0 0;
  padding: 0;
  /* hairline divider under the chart removed 2026-09-06 — the "Tap the bars"
     cue closes the chart instead */
}

/* ── Axis: year ticks, evenly spaced across 2018 -> Now (2026) ── */
.gantt__axis {
  position: relative;
  height: 20px;
  margin-bottom: 12px;
}
.gantt__tick {
  position: absolute;
  top: 0;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--steel);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.gantt__tick--2018 { left: 0%; }
.gantt__tick--2019 { left: 12.5%; }
.gantt__tick--2020 { left: 25%; }
.gantt__tick--2021 { left: 37.5%; }
.gantt__tick--2022 { left: 50%; }
.gantt__tick--2023 { left: 62.5%; }
.gantt__tick--2024 { left: 75%; }
.gantt__tick--2025 { left: 87.5%; }
.gantt__tick--now {
  right: 0;
  left: auto;
  font-weight: 600;
  color: var(--clay);
}

/* ── Rows track: faint vertical gridlines echo the axis ticks ── */
.gantt__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  isolation: isolate;
}

/* Seven internal year lines. The 2018 and Now edge labels remain above,
   but their boundary lines are deliberately omitted so the chart stays open. */
.gantt__rows::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, transparent calc(12.5% - 0.5px), rgba(30, 49, 84, 0.09) calc(12.5% - 0.5px) calc(12.5% + 0.5px), transparent calc(12.5% + 0.5px)),
    linear-gradient(to right, transparent calc(25% - 0.5px), rgba(30, 49, 84, 0.09) calc(25% - 0.5px) calc(25% + 0.5px), transparent calc(25% + 0.5px)),
    linear-gradient(to right, transparent calc(37.5% - 0.5px), rgba(30, 49, 84, 0.09) calc(37.5% - 0.5px) calc(37.5% + 0.5px), transparent calc(37.5% + 0.5px)),
    linear-gradient(to right, transparent calc(50% - 0.5px), rgba(30, 49, 84, 0.09) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to right, transparent calc(62.5% - 0.5px), rgba(30, 49, 84, 0.09) calc(62.5% - 0.5px) calc(62.5% + 0.5px), transparent calc(62.5% + 0.5px)),
    linear-gradient(to right, transparent calc(75% - 0.5px), rgba(30, 49, 84, 0.09) calc(75% - 0.5px) calc(75% + 0.5px), transparent calc(75% + 0.5px)),
    linear-gradient(to right, transparent calc(87.5% - 0.5px), rgba(30, 49, 84, 0.09) calc(87.5% - 0.5px) calc(87.5% + 0.5px), transparent calc(87.5% + 0.5px));
}

.gantt__row {
  position: relative;
  z-index: 1;
  padding: 4px 0;
}

.gantt__row:has(.gantt__bar[aria-expanded="true"]) {
  z-index: 2;
}

/* ── Bars ── */
.gantt__bar {
  /* position:relative is LOAD-BEARING: the outside labels, years, dot
     and the ::after hit band are abs-positioned CHILDREN of this button.
     The button must be their containing block PERMANENTLY, because the
     hover filter/transform would otherwise create one on hover and
     re-anchor them mid-interaction (labels jumped onto the bar whenever
     the cursor rested on it - e.g. right after a click). With the button
     always the containing block, hover moves bar + caption as one unit.
     (Outside labels use white-space:nowrap or an explicit width so the
     narrow button box cannot collapse them to min-content.) */
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 36px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-family: var(--font-body);
  cursor: pointer;
  scroll-margin-top: 104px;
  -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
  transition: filter 0.15s var(--ease-out), transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
.gantt__bar:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(112, 203, 255, 0.85);
}

/* Extend the tap target to a 44px-tall band centred on the visual bar
   without enlarging it (WCAG touch-target min). Anchored to the button
   (its permanent containing block); +-10px sideways keeps even the
   narrowest bar (bar 5 at 375px) past 44px wide. Clicks on the outside
   labels also toggle: they are DOM children of the button. */
.gantt__bar::after {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* Navy tint ramp deepening era by era, finishing on the current role in
   brand mint. */
/* The four past bars keep their light → dark navy ramp but are now OPAQUE
   (2026-09-06, David: same colours, no transparency). Each value is the old
   rgba(30,49,84, 0.38 / 0.56 / 0.72 / 0.88) pre-blended over the section's
   #fbfaf8 field, so the tones are unchanged and the gridlines no longer show
   through the bars. */
.gantt__bar--1 { margin-left: 0;     width: 50%;   background: #a7aeba; padding-left: 16px; }
.gantt__bar--2 { margin-left: 52%;   width: 18%;   background: #7f899c; }
.gantt__bar--3 { margin-left: 62.5%; width: 29.2%; background: #5c6982; }
.gantt__bar--4 { margin-left: 87.5%; width: 12.5%; background: #394968; }
.gantt__bar--5 { margin-left: 91.7%; width: 8.3%; background: var(--mint); }

.gantt__bar[aria-expanded="true"] {
  filter: saturate(1.08);
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px rgba(30, 49, 84, 0.35), 0 8px 20px rgba(30, 49, 84, 0.12);
}
.gantt__bar--5[aria-expanded="true"] {
  box-shadow: 0 0 0 2px rgba(90, 158, 139, 0.5), 0 8px 20px rgba(90, 158, 139, 0.18);
}

@media (hover: hover) and (pointer: fine) {
  .gantt__bar:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
  }
}

/* ── Label / years ── */
.gantt__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
}
.gantt__years {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--steel);
}

/* Bar 1: label + years live inside the fill. Navy on the light .38 fill
   (composited on the cream section ~5.5:1, WCAG AA) -- white failed AA. */
.gantt__bar--1 .gantt__label {
  color: var(--navy);
}
.gantt__bar--1 .gantt__years {
  margin-left: 8px;
  color: var(--navy);
}

/* Bars 2-5: label + years sit outside, in the clear space left of the bar.
   Anchored to the BUTTON (position:relative above): one uniform
   right: calc(100% + 10px) puts each caption 10px left of its own bar,
   and top: 50% centres on the bar itself, so the geometry is identical
   whether the panel is open or closed and the caption moves with the
   bar's 1px hover lift as one unit. nowrap keeps shrink-to-fit at full
   text width even though the button box is narrower than the caption. */
.gantt__bar--2 .gantt__label,
.gantt__bar--3 .gantt__label,
.gantt__bar--4 .gantt__label,
.gantt__bar--5 .gantt__label {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-100%) translateY(-1px);
  white-space: nowrap;
  color: var(--navy);
  text-align: right;
}
.gantt__bar--2 .gantt__years,
.gantt__bar--3 .gantt__years,
.gantt__bar--4 .gantt__years,
.gantt__bar--5 .gantt__years {
  position: absolute;
  right: calc(100% + 10px);
  top: calc(50% + 1px);
  white-space: nowrap;
  text-align: right;
}

/* ── Panel: grid-template-rows collapse technique (about3 pattern) ──
   Base state is CLOSED (0fr). JS removes [hidden], forces a reflow,
   then flips data-open="true" so the 0fr -> 1fr transition actually runs. */
.gantt__panel {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  margin: 10px 0 2px;
  background: rgba(245, 242, 237, 0.76);
  border: 1px solid rgba(30, 49, 84, 0.12);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 14px 32px rgba(30, 49, 84, 0.05);
  transition: grid-template-rows 0.22s var(--ease-out);
}
.gantt__panel[data-open="true"] {
  grid-template-rows: 1fr;
}
.gantt__panel[data-open="false"] {
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.15s ease-in;
}
.gantt__panel[hidden] {
  display: none;
}
.gantt__panel-inner {
  min-height: 0;
  padding: 18px 20px;
}

.gantt__beat {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  font-style: italic;
  color: rgba(30, 49, 84, 0.72);
}
.gantt__job {
  margin: 14px 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}
.gantt__job:first-of-type {
  margin-top: 0;
}
.gantt__points {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(10, 9, 19, 0.82);
}
.gantt__points li::marker {
  color: rgba(30, 49, 84, 0.46);
}
.gantt__points + .gantt__job {
  margin-top: 14px;
}

/* ── Mobile: thin the axis, wrap outside labels instead of overflowing ── */
@container about (max-width: 640px) {
  .about-section > .container > .section-eyebrow-row {
    margin-bottom: 36px;
  }

  .about-profile__image {
    width: 88px;
    height: 88px;
    margin-bottom: 28px;
  }

  .about-profile h2 {
    margin-bottom: 24px;
  }

  .about-profile__copy p {
    font-size: 16px;
    line-height: 1.58;
  }

  .gantt {
    margin: 0;
    padding: 0 0 14px;
  }

  .gantt__prompt {
    margin: 20px auto 0;
  }
  .gantt { margin-top: 48px; }

  .gantt__axis {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 0;
  }

  .gantt__tick {
    position: static;
  }

  .gantt__tick--2019,
  .gantt__tick--2021,
  .gantt__tick--2023,
  .gantt__tick--2025 {
    display: none;
  }

  .gantt__bar--1,
  .gantt__bar--2,
  .gantt__bar--3,
  .gantt__bar--4,
  .gantt__bar--5 {
    height: 30px;
  }
  .gantt__bar--1 { padding-left: 10px; }
  .gantt__row { padding: 7px 0; }

  .gantt__label {
    font-size: 12.5px;
  }
  .gantt__years {
    display: none;
  }

  /* Bar 2's outside-left zone is the tightest at 375px; give it (and bar
     3, as a safety margin) a wrap fallback instead of letting text run
     past the row's own left edge. Bars 4 and 5 start further right and
     have plenty of clear space, so nowrap is safe as-is.
     EXPLICIT width, not max-width: these labels are abs-positioned in
     the narrow button box, so shrink-to-fit available space is negative
     and a wrapping max-width label would collapse to min-content (one
     word per line). A fixed width sidesteps shrink-to-fit entirely;
     text-align:right keeps the lines right-anchored. */
  .gantt__bar--2 .gantt__label { width: 128px; white-space: normal; }
  .gantt__bar--3 .gantt__label { width: 178px; white-space: normal; }

  /* No years line on mobile, so re-centre the label on the bar instead
     of sitting it in the upper half. */
  .gantt__bar--2 .gantt__label,
  .gantt__bar--3 .gantt__label,
  .gantt__bar--4 .gantt__label,
  .gantt__bar--5 .gantt__label {
    transform: translateY(-50%);
  }

  .gantt__panel-inner {
    padding: 16px 16px;
  }
}

/* ============================================================
   CONTACT (contact2 · Hive cream-glass)
   Moved here from the partial's inline <style> on 2026-06-30 so it
   is served from the external sheet (the hardened CSP blocks inline
   styles). A partial is HTML only — same as every other section.
   ============================================================ */
/* ── Local tokens (standalone-safe) ───────────────────────────── */
      .contact2 {
        --c2-parchment: #f5f2ed;
        --c2-parchment-deep: #ebe7e1;
        --c2-ink: #0A0913;
        --c2-navy: #1e3154;
        --c2-navy-light: #2a4068;
        --c2-mint: #5a9e8b;
        --c2-mint-dark: #4a8575;
        --c2-peach: #f0a090;
        --c2-peach-dark: #e08878;
        --c2-steel: #6b7178;
        --c2-blue: #70cbff;

        --c2-glass: rgba(255, 255, 255, 0.55);
        --c2-glass-strong: rgba(255, 255, 255, 0.7);
        --c2-glass-line: rgba(30, 49, 84, 0.14);
        --c2-hair: rgba(30, 49, 84, 0.12);
        --c2-mint-wash: rgba(90, 158, 139, 0.12);
        --c2-peach-wash: rgba(224, 136, 120, 0.12);
        --c2-shadow: 0 1px 2px rgba(30,49,84,.05), 0 18px 50px -28px rgba(30,49,84,.28);

        --c2-font-display: 'Advercase', Georgia, serif;
        --c2-font-body: 'Switzer', system-ui, -apple-system, sans-serif;
        --c2-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
        --c2-ease: cubic-bezier(0.16, 1, 0.3, 1);

        container: contact2 / inline-size;
        display: block;
        position: relative;
        font-family: var(--c2-font-body);
        color: var(--c2-ink);
        /* cream page band */
        background:
          radial-gradient(120% 80% at 15% -10%, rgba(90,158,139,.07), transparent 60%),
          linear-gradient(180deg, var(--c2-parchment) 0%, var(--c2-parchment-deep) 100%);
      }

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

      .contact2__shell {
        max-width: 1100px;
        margin: 0 auto;
        padding: clamp(64px, 9cqi, 120px) clamp(20px, 5cqi, 64px) clamp(56px, 7cqi, 96px);
      }

      /* ── Intro band ───────────────────────────────────────────────── */
      .contact2__intro {
        max-width: 680px;
        margin: 0 auto clamp(36px, 5cqi, 60px);
        text-align: center;
      }
      .contact2__eyebrow {
        margin: 0 0 18px;
        font-size: clamp(11px, 1cqi, 12.5px);
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--c2-mint-dark);
      }
      .contact2__intro-h {
        margin: 0 0 16px;
        font-family: var(--c2-font-display);
        font-weight: 400;
        font-size: clamp(30px, 4cqi, 48px);
        line-height: 1.3;
        letter-spacing: 0.01em;
        color: var(--c2-navy);
      }
      .contact2__intro-sub {
        max-width: 540px;
        margin: 0 auto;
        font-size: clamp(15px, 1.5cqi, 17px);
        line-height: 1.6;
        color: rgba(10, 9, 19, 0.6);
      }

      /* ── Glass form card ──────────────────────────────────────────── */
      .contact2__card {
        display: grid;
        grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
        gap: clamp(28px, 4cqi, 56px);
        align-items: stretch;
        padding: clamp(24px, 3.4cqi, 48px);
        border: 1px solid var(--c2-glass-line);
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.5);
        box-shadow: var(--c2-shadow);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
      }

      /* ── Left rail ────────────────────────────────────────────────── */
      .contact2__rail {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        min-width: 0;
      }
      .contact2__kicker {
        margin: 0 0 16px;
        font-family: var(--c2-mono);
        font-size: 11.5px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--c2-steel);
      }
      .contact2__status {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        margin: 0 0 auto;
        padding: 8px 14px;
        border: 1px solid var(--c2-glass-line);
        border-radius: 999px;
        background: var(--c2-glass);
        font-family: var(--c2-mono);
        font-size: 12px;
        letter-spacing: 0.02em;
        color: var(--c2-navy);
      }
      .contact2__dot {
        width: 7px; height: 7px;
        border-radius: 50%;
        background: var(--c2-mint);
        box-shadow: 0 0 0 0 rgba(90, 158, 139, 0.5);
        animation: contact2-pulse 2.4s var(--c2-ease) infinite;
      }
      @keyframes contact2-pulse {
        0%   { box-shadow: 0 0 0 0 rgba(90, 158, 139, 0.45); }
        70%  { box-shadow: 0 0 0 8px rgba(90, 158, 139, 0); }
        100% { box-shadow: 0 0 0 0 rgba(90, 158, 139, 0); }
      }

      /* Direct line block */
      .contact2__direct {
        margin-top: clamp(28px, 4cqi, 44px);
        padding-top: clamp(20px, 3cqi, 28px);
        border-top: 1px solid var(--c2-hair);
        width: 100%;
      }
      .contact2__email {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        margin: 0 0 14px;
        padding: 10px 16px;
        border: 1px solid var(--c2-glass-line);
        border-radius: 12px;
        background: var(--c2-glass);
        font-family: var(--c2-mono);
        font-size: clamp(13px, 1.3cqi, 14.5px);
        letter-spacing: 0.01em;
        color: var(--c2-navy);
        cursor: pointer;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        transition: background 0.2s var(--c2-ease), border-color 0.2s var(--c2-ease),
                    color 0.2s var(--c2-ease), box-shadow 0.2s var(--c2-ease);
      }
      .contact2__email svg {
        width: 15px; height: 15px;
        flex: 0 0 auto;
        color: var(--c2-mint-dark);
        transition: color 0.2s var(--c2-ease);
      }
      .contact2__email:hover {
        background: var(--c2-glass-strong);
        border-color: rgba(90, 158, 139, 0.4);
        color: var(--c2-mint-dark);
      }
      .contact2__email:hover svg { color: var(--c2-mint); }
      .contact2__email:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px var(--c2-parchment), 0 0 0 4px var(--c2-mint);
      }
      /* main.js adds the `copied` class on a successful copy; keep is-copied too. */
      .contact2__email.copied,
      .contact2__email.is-copied {
        background: var(--c2-mint-wash);
        border-color: rgba(90, 158, 139, 0.5);
        color: var(--c2-mint-dark);
      }
      .contact2__note {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        font-size: 13px;
        line-height: 1.5;
        color: rgba(10, 9, 19, 0.6);
      }
      .contact2__pulse {
        width: 7px; height: 7px;
        flex: 0 0 auto;
        border-radius: 50%;
        background: var(--c2-mint);
        box-shadow: 0 0 0 0 rgba(90, 158, 139, 0.5);
        animation: contact2-pulse 2.4s var(--c2-ease) infinite;
      }

      /* ── Form column ──────────────────────────────────────────────── */
      .contact2__form-col {
        display: flex;
        flex-direction: column;
        min-width: 0;
      }
      .contact2__form {
        display: flex;
        flex-direction: column;
        gap: clamp(12px, 1.6cqi, 16px);
      }
      .contact2__row {
        display: flex;
        flex-direction: column;
        position: relative;
      }

      /* Visually-hidden labels (keep accessible) */
      .contact2 .sr-only {
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      /* Honeypot: hidden visually, kept in DOM for main.js */
      .contact2 .form-honeypot {
        position: absolute !important;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
        opacity: 0;
        pointer-events: none;
      }

      /* Glass inputs */
      .contact2__input,
      .contact2__textarea {
        width: 100%;
        min-height: 52px;
        padding: 14px 16px;
        border: 1px solid var(--c2-glass-line);
        border-radius: 12px;
        background: var(--c2-glass);
        font-family: var(--c2-font-body);
        font-size: 16px; /* avoids iOS auto-zoom */
        line-height: 1.5;
        color: var(--c2-ink);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        transition: background 0.2s var(--c2-ease), border-color 0.2s var(--c2-ease),
                    box-shadow 0.2s var(--c2-ease);
      }
      .contact2__textarea {
        min-height: 132px;
        resize: vertical;
      }
      .contact2__input::placeholder,
      .contact2__textarea::placeholder {
        color: rgba(10, 9, 19, 0.42);
      }
      .contact2__input:hover,
      .contact2__textarea:hover {
        background: var(--c2-glass-strong);
        border-color: rgba(30, 49, 84, 0.22);
      }
      .contact2__input:focus-visible,
      .contact2__textarea:focus-visible {
        outline: none;
        background: var(--c2-glass-strong);
        border-color: var(--c2-mint);
        box-shadow: 0 0 0 3px rgba(90, 158, 139, 0.22);
      }
      /* Invalid state set by main.js (aria-invalid) */
      .contact2__input[aria-invalid="true"],
      .contact2__textarea[aria-invalid="true"] {
        border-color: var(--c2-peach-dark);
        background: var(--c2-peach-wash);
      }
      .contact2__input[aria-invalid="true"]:focus-visible,
      .contact2__textarea[aria-invalid="true"]:focus-visible {
        box-shadow: 0 0 0 3px rgba(224, 136, 120, 0.24);
      }

      /* Per-field error (main.js injects .field-error into the row) */
      .contact2 .field-error {
        margin: 7px 2px 0;
        font-size: 12.5px;
        line-height: 1.4;
        letter-spacing: 0.01em;
        color: var(--c2-peach-dark);
      }

      /* Send button (navy solid) */
      .contact2__send {
        align-self: flex-start;
        min-height: 46px;
        margin-top: clamp(4px, 1cqi, 8px);
        padding: 13px 32px;
        border: 1px solid var(--c2-navy);
        border-radius: 12px;
        background: var(--c2-navy);
        font-family: var(--c2-font-body);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.01em;
        color: var(--c2-parchment);
        cursor: pointer;
        box-shadow: 0 6px 16px -8px rgba(30, 49, 84, 0.65);
        transition: background 0.2s var(--c2-ease), border-color 0.2s var(--c2-ease),
                    box-shadow 0.2s var(--c2-ease), transform 0.12s var(--c2-ease);
      }
      .contact2__send:hover {
        background: var(--c2-navy-light);
        border-color: var(--c2-navy-light);
        box-shadow: 0 10px 22px -10px rgba(30, 49, 84, 0.7);
      }
      .contact2__send:active { transform: translateY(1px); }
      .contact2__send:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px var(--c2-parchment), 0 0 0 4px var(--c2-mint);
      }
      .contact2__send:disabled {
        opacity: 0.62;
        cursor: progress;
        box-shadow: none;
      }

      /* ── Alerts (hidden until main.js adds .visible) ──────────────── */
      .contact2 .form-success,
      .contact2 .form-error {
        display: none;
      }
      .contact2 .form-success.visible,
      .contact2 .form-error.visible {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        animation: contact2-rise 0.34s var(--c2-ease) both;
      }
      .contact2__alert {
        margin-top: 18px;
        padding: 14px 16px;
        border: 1px solid var(--c2-glass-line);
        border-radius: 12px;
        font-size: 14.5px;
        line-height: 1.5;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
      }
      .contact2 .form-success {
        background: var(--c2-mint-wash);
        border-color: rgba(90, 158, 139, 0.4);
        color: var(--c2-mint-dark);
      }
      .contact2 .form-error {
        background: var(--c2-peach-wash);
        border-color: rgba(224, 136, 120, 0.4);
        color: var(--c2-peach-dark);
      }
      .contact2__alert-icon {
        flex: 0 0 auto;
        margin-top: 1px;
      }
      .contact2__alert-icon svg { width: 16px; height: 16px; display: block; }
      .contact2 .form-error a {
        color: var(--c2-navy);
        text-decoration: underline;
        text-underline-offset: 2px;
      }
      .contact2 .form-error a:focus-visible {
        outline: 2px solid var(--c2-mint);
        outline-offset: 2px;
        border-radius: 3px;
      }
      @keyframes contact2-rise {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: translateY(0); }
      }

      /* ── Responsive ───────────────────────────────────────────────── */
      @container contact2 (max-width: 760px) {
        .contact2__card {
          grid-template-columns: 1fr;
          gap: clamp(24px, 5cqi, 36px);
        }
        .contact2__rail {
          order: 2;
          padding-top: clamp(20px, 4cqi, 28px);
          border-top: 1px solid var(--c2-hair);
        }
        .contact2__status { margin-bottom: 0; }
        .contact2__direct {
          margin-top: 18px;
          padding-top: 0;
          border-top: 0;
        }
        .contact2__form-col { order: 1; }
        .contact2__send { align-self: stretch; text-align: center; }
      }

      /* Fallback when container queries unsupported */
      @media (max-width: 760px) {
        .contact2__card { grid-template-columns: 1fr; }
        .contact2__send { align-self: stretch; }
      }

      /* Polish pass: refined type, materials, inputs, states */
      .contact2__shell { max-width: 1080px; }
      .contact2__eyebrow { letter-spacing: 0.22em; }
      .contact2__intro { margin-bottom: clamp(40px, 5.5cqi, 64px); }
      .contact2__intro-h { font-size: clamp(30px, 4cqi, 48px); line-height: 1.3; }
      .contact2__intro-sub { color: rgba(10, 9, 19, 0.58); }

      /* Divided glass: rail + form share one engraved sheet */
      .contact2__card {
        grid-template-columns: max-content minmax(0, 1fr);
        gap: 0;
        padding: 0;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.55);
        box-shadow: 0 1px 2px rgba(30, 49, 84, 0.05), 0 40px 80px -46px rgba(30, 49, 84, 0.42);
      }
      .contact2__rail {
        width: max-content;
        padding-block: clamp(28px, 3.6cqi, 44px);
        padding-inline: clamp(28px, 3cqi, 36px);
        border-right: 1px solid var(--c2-hair);
      }
      .contact2__form-col {
        min-width: 0;
        padding: clamp(28px, 3.6cqi, 44px);
      }
      .contact2__kicker { margin-bottom: 20px; letter-spacing: 0.2em; }
      .contact2__status { padding: 8px 15px; background: rgba(255, 255, 255, 0.6); }
      .contact2__whatsapp {
        display: grid;
        gap: 0;
        width: max-content;
        align-content: start;
      }
      .contact2__qr-card {
        display: block;
        width: 220px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        text-decoration: none;
      }
      .contact2__qr-card:focus-visible,
      .contact2__wa-button:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px var(--c2-parchment), 0 0 0 4px rgba(90, 158, 139, 0.34);
      }
      .contact2__qr-card img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        border-radius: 0;
      }
      .contact2__qr-note {
        margin-top: 14px;
        color: rgba(10, 9, 19, 0.58);
      }
      .contact2__mobile-response {
        display: none;
        color: rgba(10, 9, 19, 0.58);
      }
      .contact2__wa-button {
        display: none;
        align-items: center;
        justify-content: center;
        gap: 9px;
        min-height: 50px;
        width: min(100%, 252px);
        padding: 0 24px;
        border: 0;
        border-radius: 12px;
        background: var(--c2-mint);
        color: #f8fff9;
        font-family: var(--c2-font-body);
        font-size: 16px;
        font-weight: 600;
        letter-spacing: -0.005em;
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        touch-action: manipulation;
        box-shadow: 0 1px 2px rgba(74, 133, 117, 0.16), inset 0 1.5px 0 rgba(255, 255, 255, 0.22);
        transition: filter 0.2s var(--c2-ease), transform 0.12s ease, background 0.2s var(--c2-ease);
      }
      .contact2__wa-button:hover {
        background: var(--c2-mint-dark);
        filter: brightness(1.03);
      }
      .contact2__wa-button:active { transform: translateY(1px); }
      .contact2__wa-mark {
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
      }
      .contact2__form-kicker { margin-bottom: 20px; }

      /* Inputs: quieter fill, tighter radius, calm focus */
      .contact2__input,
      .contact2__textarea {
        min-height: 54px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.45);
        border-color: rgba(30, 49, 84, 0.16);
      }
      .contact2__textarea { min-height: 144px; }
      .contact2__input:focus-visible,
      .contact2__textarea:focus-visible {
        background: rgba(255, 255, 255, 0.82);
        border-color: var(--c2-mint);
        box-shadow: 0 0 0 3px rgba(90, 158, 139, 0.18);
      }

      /* Send: navy, with a quiet arrow that resolves on hover */
      .contact2__send {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        border-radius: 10px;
        padding: 0 26px;
      }
      .contact2__send::after {
        content: '\2192';
        font-family: var(--c2-font-display);
        font-size: 16px;
        line-height: 1;
        transition: transform 0.28s var(--c2-ease);
      }
      .contact2__send:hover::after { transform: translateX(4px); }
      .contact2__email { border-radius: 10px; }

      @container contact2 (max-width: 760px) {
        .contact2__card { grid-template-columns: 1fr; }
        .contact2__rail {
          width: auto;
          order: 2;
          border-right: 0;
          border-top: 1px solid var(--c2-hair);
        }
        .contact2__qr-card { display: none; }
        .contact2__whatsapp { width: 100%; }
        .contact2__wa-button {
          display: inline-flex;
          width: 100%;
        }
        .contact2__qr-note { display: none; }
        .contact2__form-col { order: 1; }
        .contact2__send {
          justify-content: center;
          min-height: 50px;
          padding-block: 0;
        }
        .contact2__mobile-response { display: flex; }
      }
      @media (max-width: 760px) {
        .contact2__card { grid-template-columns: 1fr; }
        .contact2__qr-card { display: none; }
        .contact2__whatsapp { width: 100%; }
        .contact2__wa-button {
          display: inline-flex;
          width: 100%;
        }
        .contact2__qr-note { display: none; }
        .contact2__send {
          min-height: 50px;
          padding-block: 0;
        }
        .contact2__mobile-response { display: flex; }
      }

      @media (prefers-reduced-motion: reduce) {
        .contact2 *,
        .contact2 *::before,
        .contact2 *::after {
          animation: none !important;
          transition: none !important;
        }
      }

/* ===== ROADMAP-ENTRY — homepage side-entrance to the AI Roadmap quiz ===== */
/* 1:1 visual clone of funnel §4 ("AI Install Roadmap"): values ported from  */
/* aibc-quiz-funnel app/critical.css + public/styles/roadmap.css             */
/* (.landing-mid-quiz + .landing-question--mid families). When §4 changes    */
/* on /roadmap, cascade here. Namespace <-> source map lives in              */
/* systems/aibc-website-main/sections/roadmap-entry.md ("CSS map").          */
.roadmap-entry {
  padding: var(--section-y) 0;
  background: #fbfaf8;
  color: var(--ink);
}

/* Funnel intro: centered heading + one body line above the grid
   (mirrors .landing-mid-quiz__intro). */
.roadmap-entry__intro {
  max-width: 860px;
  margin: 0 auto clamp(42px, 6vw, 72px);
  text-align: center;
}

/* Mirrors the funnel's .landing-section-heading recipe. */
.roadmap-entry__headline {
  max-width: 780px;
  margin: 0 auto 18px;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-align: center;
  text-wrap: balance;
}

.roadmap-entry__intro-body {
  max-width: 660px;
  margin: 0 auto;
  color: rgba(10, 9, 19, 0.62);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
}

/* Panel LEFT (wider track) / benefits RIGHT — funnel .landing-mid-quiz__grid. */
.roadmap-entry__grid {
  display: grid;
  grid-template-columns: minmax(520px, 1.12fr) minmax(360px, 0.88fr);
  gap: clamp(40px, 4vw, 56px);
  align-items: start;
}

.roadmap-entry__copy {
  min-width: 0;
}

/* ── Benefits list (funnel .landing-mid-quiz__benefits: mint ✓ chips) ──── */
.roadmap-entry__benefits {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.roadmap-entry__benefits li {
  position: relative;
  display: grid;
  min-height: 38px;
  gap: 6px;
  padding-left: 52px;
}

.roadmap-entry__benefits li::before {
  content: '\2713';
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--mint);
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}

.roadmap-entry__benefits strong {
  color: rgba(10, 9, 19, 0.8);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}

.roadmap-entry__benefits span {
  max-width: 620px;
  color: rgba(10, 9, 19, 0.62);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
}

/* ── Question panel (funnel .landing-question--mid: white glass card) ──── */
.roadmap-entry__panel {
  width: 100%;
  max-width: 620px;
  margin: 0;
  border: 1.5px solid #efe9e2;
  border-radius: 16px;
  background: #ffffff;
  color: var(--ink);
  padding: clamp(22px, 3.2vw, 36px);
  box-shadow:
    inset 0 1.5px 0 hsla(0, 0%, 100%, 0.9),
    0 1px 2px rgba(40, 30, 20, 0.04),
    0 14px 34px rgba(30, 49, 84, 0.14);
}

/* Funnel kicker: mono, uppercase, 0.2em (the landing eyebrow signature). */
.roadmap-entry__panel-kicker {
  margin: 0 0 10px;
  color: var(--steel);
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
}

/* Funnel panel heading: the quiz-screen treatment (25px / 600 / Switzer),
   NOT the display font — the funnel's high-specificity shared rule
   (.roadmap-landing .question-block.landing-question .question-heading)
   owns this everywhere on /roadmap. */
.roadmap-entry__question {
  margin: 0 0 12px;
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 25px;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.015em;
  text-align: center;
}

.roadmap-entry__panel-helper {
  margin: 0 0 18px;
  color: rgba(10, 9, 19, 0.62);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
}

.roadmap-entry__options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.roadmap-entry__option {
  /* Anchor reset — the quiz's options are <button>s (free from UA link
     styles); ours are <a href="/roadmap"> for the no-JS/storage-blocked
     fallback, so restore button-like behaviour explicitly. */
  color: var(--navy);
  text-decoration: none;
  cursor: pointer;

  position: relative;
  display: flex;
  min-height: 92px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 14px;
  text-align: left;
  border: 1px solid rgba(30, 49, 84, 0.16);
  border-radius: 8px; /* quiz --radius-md */
  background: #ffffff;
  box-shadow: none;
  touch-action: manipulation;
  transition:
    border-color 0.2s var(--ease-out),
    box-shadow 0.2s var(--ease-out),
    transform 0.2s var(--ease-out),
    background 0.2s var(--ease-out);
}

.roadmap-entry__option:hover {
  border-color: rgba(30, 49, 84, 0.35);
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(30, 49, 84, 0.1);
  transform: translateY(-1px);
}

.roadmap-entry__option[aria-disabled="true"]:not(.is-selected) {
  opacity: 0.56;
}

/* JS toggles is-locked on the options list while advancing — anchors have no
   disabled attribute, so the click lock is a class (no el.style.*, CSP-safe). */
.roadmap-entry__options.is-locked {
  pointer-events: none;
}

.roadmap-entry__option.is-selected {
  border-color: var(--mint);
  background: rgba(90, 158, 139, 0.12); /* quiz --mint-tint */
  color: var(--ink);
  box-shadow: none;
}

.roadmap-entry__option.is-advancing {
  cursor: progress;
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(90, 158, 139, 0.36),
    0 16px 34px rgba(30, 49, 84, 0.2);
}

.roadmap-entry__option:focus-visible {
  outline: 3px solid rgba(112, 203, 255, 0.78);
  outline-offset: 3px;
}

.roadmap-entry__option-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(30, 49, 84, 0.14);
  border-radius: 9px;
  background: var(--parchment);
  color: rgba(30, 49, 84, 0.72);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease;
}

.roadmap-entry__option-icon > svg {
  width: 18px;
  height: 18px;
}

.roadmap-entry__option:hover .roadmap-entry__option-icon {
  background: var(--parchment-deep);
}

.roadmap-entry__option.is-selected .roadmap-entry__option-icon {
  border-color: rgba(90, 158, 139, 0.4);
  background: rgba(90, 158, 139, 0.16);
  color: var(--mint-dark);
}

.roadmap-entry__option.is-advancing .roadmap-entry__option-icon {
  transform: scale(1.04);
}

/* Two-line tile text (label + sublabel), funnel .radio-option__text. */
.roadmap-entry__option-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.roadmap-entry__option-label {
  min-width: 0;
  overflow-wrap: anywhere;
  color: rgba(10, 9, 19, 0.8);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.28;
  text-align: left;
}

.roadmap-entry__option-sublabel {
  min-width: 0;
  overflow-wrap: anywhere;
  color: rgba(10, 9, 19, 0.56);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
}

/* ── Start CTA (funnel .landing-question-start: full-width navy, no arrow,
   retained as harmless mirror CSS even though the current panel has no Start
   control) ─────────────────────────────────────────────────────────────── */
.roadmap-entry__start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  border: 0;
  border-radius: 11px;
  background: var(--navy);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}

.roadmap-entry__start[aria-disabled="true"] {
  cursor: default;
}

.roadmap-entry__start:focus-visible {
  outline: 3px solid rgba(112, 203, 255, 0.78);
  outline-offset: 3px;
}

/* ── Responsive (funnel breakpoints: 1040 stack / 640 tighten / 430 phone) ─ */
@media (max-width: 1040px) {
  .roadmap-entry__grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .roadmap-entry__panel {
    justify-self: center;
  }

  .roadmap-entry__copy {
    max-width: 640px;
    margin: 0 auto;
  }

  .roadmap-entry__benefits {
    width: min(100%, 680px);
    margin-inline: auto;
    text-align: left;
  }
}

@media (max-width: 640px) {
  .roadmap-entry {
    padding-top: var(--section-y-tight);
  }

  .roadmap-entry__intro {
    margin-bottom: 34px;
  }

  .roadmap-entry__benefits {
    gap: 30px;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }

  .roadmap-entry__benefits li {
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: 24px;
    min-height: 38px;
    padding-left: 0;
  }

  .roadmap-entry__benefits li::before {
    position: static;
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .roadmap-entry__benefits strong,
  .roadmap-entry__benefits span {
    grid-column: 2;
  }
}

@media (max-width: 430px) {
  .roadmap-entry__panel {
    padding: 18px 16px;
  }

  .roadmap-entry__panel-kicker {
    margin-bottom: 6px;
  }
}