/* ==========================================================================
   Influent Academy - core stylesheet
   Design tokens follow the Raisul Builds visual system.
   Orange (#FF4D00) is a signal, not a wallpaper: target 5-15% of visible colour.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --accent: #FF4D00;
  --accent-deep: #E04400;      /* background + hover only, not text on light */
  /* Primary CTA. Exact brand orange with an off-white label at the user's
     request. Note: #F9F9F9 on #FF4D00 is 3.0:1, which meets AA for graphics and
     large text but not for button-size text. */
  --accent-cta: #FF4D00;
  --accent-cta-hover: #E04400;
  --accent-cta-ink: #F9F9F9;
  --accent-text: #BE3A00;      /* orange that passes 4.5:1 as text on light surfaces */
  --accent-wash: #FFF0E9;
  --accent-ink: #000001;      /* text placed on orange */

  /* Surfaces */
  --ink: #000001;             /* primary dark */
  --ink-raised: #121110;      /* layered surface on dark sections */
  --ink-line: rgba(255, 255, 255, 0.14);
  /* One light surface across the whole site. Section rhythm comes from white
     cards, dark bands and spacing rather than from two near-identical greys. */
  --paper: #F9F9F9;
  --paper-2: #F9F9F9;
  --card: #FFFFFF;
  /* Sunken fill for component interiors (table headings, progress tracks, inert
     cells). Distinct from a section background: it must read on white AND on
     --paper, so it cannot be #F9F9F9 itself. */
  --fill: #EFEFEE;

  /* Text */
  --text: #16150F;
  --text-muted: #56544E;
  --text-faint: #6E6B63;
  /* Dark sections use one text colour. Hierarchy there comes from size and
     weight, not from a dimmer grey. */
  --text-on-ink: #F9F9F9;
  --text-on-ink-muted: #F9F9F9;

  /* Lines */
  --line: rgba(22, 21, 15, 0.12);
  --line-strong: rgba(22, 21, 15, 0.22);

  /* Semantic - deliberately distinct from brand orange */
  --ok: #0F6B45;
  --ok-wash: #ECF6F1;
  --warn: #8A5A00;
  --warn-wash: #FBF3E4;
  --err: #A5231B;
  --err-wash: #FCEEEC;
  --info: #1F4E79;
  --info-wash: #EDF3F8;

  /* Type */
  --font-display: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Spacing rhythm: 8px base */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 40px;
  --s6: 56px;
  --s7: 72px;
  --s8: 96px;
  --s9: 128px;

  /* Shape */
  --radius: 20px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  --shadow: 0 1px 2px rgba(22, 21, 15, 0.04), 0 8px 24px rgba(22, 21, 15, 0.05);
  --shadow-lift: 0 2px 4px rgba(22, 21, 15, 0.05), 0 16px 40px rgba(22, 21, 15, 0.08);

  /* Layout */
  /* Section-label icons. Each section names its own via .eyebrow--<name>;
     the diamond is only the fallback for an unlabelled section. */
  --ico-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5v15'/%3E%3Cpath d='M5.5 13.5 12 20l6.5-6.5'/%3E%3C/svg%3E");
  --ico-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l8 8-8 8-8-8z'/%3E%3C/svg%3E");
  --ico-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2l1.9 5.4 5.4 1.9-5.4 1.9L12 17.8l-1.9-5.4L4.7 10.5l5.4-1.9z'/%3E%3C/svg%3E");
  --ico-cap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-4 9 4-9 4z'/%3E%3Cpath d='M7 11.6V16c0 1.2 2.2 2.1 5 2.1s5-.9 5-2.1v-4.4'/%3E%3C/svg%3E");
  --ico-compass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M15.6 8.4l-2.1 5.1-5.1 2.1 2.1-5.1z'/%3E%3C/svg%3E");
  --ico-question: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M9.6 9.3a2.6 2.6 0 015 .9c0 1.7-2.5 2.2-2.5 3.9'/%3E%3Cpath d='M12 17.3h.01'/%3E%3C/svg%3E");
  --ico-target: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='3.8'/%3E%3Cpath d='M12 12h.01'/%3E%3C/svg%3E");
  --ico-layers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2l8.4 4.4-8.4 4.4-8.4-4.4z'/%3E%3Cpath d='M3.6 12.4L12 16.8l8.4-4.4'/%3E%3C/svg%3E");
  --ico-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 7.4a2 2 0 012-2h3.1l2 2.6h7.7a2 2 0 012 2v7a2 2 0 01-2 2h-12.8a2 2 0 01-2-2z'/%3E%3C/svg%3E");
  --ico-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.2' cy='8.8' r='3.2'/%3E%3Cpath d='M3.6 19.6c0-3 2.5-5.2 5.6-5.2s5.6 2.2 5.6 5.2'/%3E%3Cpath d='M16.2 7a3 3 0 010 5.7M17.7 19.6c0-2.1-.6-3.7-1.7-4.8'/%3E%3C/svg%3E");
  --ico-split: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-7.6'/%3E%3Cpath d='M12 13.4L6.2 7.6V3.2'/%3E%3Cpath d='M12 13.4l5.8-5.8V3.2'/%3E%3C/svg%3E");
  --ico-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.8 20.4c0-4 3.3-6.4 7.2-6.4s7.2 2.4 7.2 6.4'/%3E%3C/svg%3E");
  --ico-scales: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.2V20'/%3E%3Cpath d='M5.4 8.2h13.2'/%3E%3Cpath d='M5.4 8.2L3 13.2h4.8z'/%3E%3Cpath d='M18.6 8.2l-2.4 5h4.8z'/%3E%3Cpath d='M8.4 20h7.2'/%3E%3C/svg%3E");
  --ico-clipboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5.9h2.4a1.5 1.5 0 011.5 1.5v11a1.5 1.5 0 01-1.5 1.5H6.6a1.5 1.5 0 01-1.5-1.5v-11a1.5 1.5 0 011.5-1.5H9'/%3E%3Cpath d='M9.2 4.4h5.6v3H9.2z'/%3E%3Cpath d='M8.9 13.2l2 2 4.2-4.2'/%3E%3C/svg%3E");
  --ico-send: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 3.2L10.4 13.6'/%3E%3Cpath d='M20.8 3.2l-6.7 17.6-3.7-7.2-7.2-3.7z'/%3E%3C/svg%3E");
  --ico-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 5.6a1.5 1.5 0 011.5-1.5H11v15.8H5.7a1.5 1.5 0 01-1.5-1.5z'/%3E%3Cpath d='M19.8 5.6a1.5 1.5 0 00-1.5-1.5H13v15.8h5.3a1.5 1.5 0 001.5-1.5z'/%3E%3C/svg%3E");
  --ico-briefcase: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.6' y='7.6' width='16.8' height='11.8' rx='2'/%3E%3Cpath d='M9.2 7.6V6.1a1.5 1.5 0 011.5-1.5h2.6a1.5 1.5 0 011.5 1.5v1.5'/%3E%3Cpath d='M3.6 12.4h16.8'/%3E%3C/svg%3E");
  --ico-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.4V12l3.2 2'/%3E%3C/svg%3E");
  --ico-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.6' y='5.6' width='16.8' height='14.8' rx='2'/%3E%3Cpath d='M3.6 10.4h16.8M8.2 3.6v4M15.8 3.6v4'/%3E%3C/svg%3E");
  --ico-wrench: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.6 4.4a5 5 0 00-6.2 6.6L4 15.4v4.4h4.4l4.4-4.4a5 5 0 006.6-6.2l-2.8 2.8-2.9-.7-.7-2.9z'/%3E%3C/svg%3E");
  --ico-timeline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.2 4v16'/%3E%3Ccircle cx='6.2' cy='8.4' r='2'/%3E%3Ccircle cx='6.2' cy='16' r='2'/%3E%3Cpath d='M10.6 8.4h8.4M10.6 16h6.2'/%3E%3C/svg%3E");
  --ico-brackets: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.4 4.6H6.4a1.5 1.5 0 00-1.5 1.5v11.8a1.5 1.5 0 001.5 1.5h2'/%3E%3Cpath d='M15.6 4.6h2a1.5 1.5 0 011.5 1.5v11.8a1.5 1.5 0 01-1.5 1.5h-2'/%3E%3C/svg%3E");
  --ico-exchange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.2h13M14 6.2l3 3-3 3'/%3E%3Cpath d='M20 14.8H7M10 11.8l-3 3 3 3'/%3E%3C/svg%3E");
  --ico-swap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 8.6A7.6 7.6 0 0117 6.2'/%3E%3Cpath d='M17 3v3.4h-3.4'/%3E%3Cpath d='M19.4 15.4A7.6 7.6 0 017 17.8'/%3E%3Cpath d='M7 21v-3.4h3.4'/%3E%3C/svg%3E");
  --ico-route: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.4 20.6c0-3.4 2.6-4.4 5.6-4.4s5.6-1 5.6-4.4-2.6-4.4-5.6-4.4-5.6-1-5.6-4.4'/%3E%3Ccircle cx='6.4' cy='3.6' r='1.6'/%3E%3Ccircle cx='17.6' cy='20.6' r='1.6'/%3E%3C/svg%3E");
  --ico-lightbulb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.4 17.4h5.2'/%3E%3Cpath d='M10.2 20.4h3.6'/%3E%3Cpath d='M12 3.6a5.5 5.5 0 00-3 10.1v1.4h6v-1.4A5.5 5.5 0 0012 3.6z'/%3E%3C/svg%3E");
  --ico-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.8s6.4-5.9 6.4-10.8a6.4 6.4 0 10-12.8 0C5.6 14.9 12 20.8 12 20.8z'/%3E%3Ccircle cx='12' cy='9.8' r='2.4'/%3E%3C/svg%3E");
  --ico-nodes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5.6' r='2.5'/%3E%3Ccircle cx='5.6' cy='18' r='2.5'/%3E%3Ccircle cx='18.4' cy='18' r='2.5'/%3E%3Cpath d='M10.6 7.7L7 15.9M13.4 7.7L17 15.9'/%3E%3C/svg%3E");
  --ico-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6l7 2.5v5.9c0 4-3 7-7 8.4-4-1.4-7-4.4-7-8.4V6.1z'/%3E%3Cpath d='M9.2 11.9l2 2 3.8-3.8'/%3E%3C/svg%3E");
  --ico-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.6' y='5.6' width='16.8' height='12.8' rx='2'/%3E%3Cpath d='M4.2 7.2l7.8 5.8 7.8-5.8'/%3E%3C/svg%3E");
  --eyebrow-mark: var(--ico-diamond);

  --wrap: 1200px;
  --measure: 68ch;
  --header-h: 72px;
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.14;
  margin: 0 0 var(--s2);
  text-wrap: balance;
}

/* Display scale, capped so a hero headline stays a headline at 1440px+ rather
   than becoming a poster: 48 / 33 / 21 / 16 against a 16px body. */
h1 { font-size: clamp(1.95rem, 1.35rem + 2.1vw, 3rem); letter-spacing: -0.03em; line-height: 1.08; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.15vw, 2.05rem); line-height: 1.16; }
h3 { font-size: clamp(1.08rem, 1rem + 0.4vw, 1.3rem); letter-spacing: -0.015em; line-height: 1.28; }
h4 { font-size: 1rem; letter-spacing: -0.01em; }

/* Two-tone headline: the accent carries the phrase that states the payoff.
   Only ever used on h1/h2, so the bright brand orange clears the 3:1 large-text
   threshold. Body copy still uses the deeper --accent-text. */
.hl { color: var(--accent); }

/* Semantic level differs from visual size: use on headings demoted for correct
   document outline (h3 where the design wants h4 sizing). */
.h-sm { font-size: 1rem; letter-spacing: -0.01em; line-height: 1.34; }

p { margin: 0 0 var(--s2); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }

ul, ol { margin: 0 0 var(--s2); padding-left: 1.15em; }
li { margin-bottom: 6px; }
li:last-child { margin-bottom: 0; }

strong { font-weight: 600; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s5) 0; }

::selection { background: var(--accent); color: var(--accent-ink); }

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

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 200;
  background: var(--ink);
  color: var(--text-on-ink);
  padding: 12px 18px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600;
  font-size: 0.9375rem;
  transition: top 0.18s ease;
}
.skip-link:focus { top: 0; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}
.wrap--narrow { max-width: 860px; }

.section { padding-block: clamp(56px, 7vw, 104px); }
.section--tight { padding-block: clamp(40px, 5vw, 72px); }
.section--paper2 { background: var(--paper-2); }
.section--wash { background: var(--accent-wash); }

.section--ink {
  background: var(--ink);
  color: var(--text-on-ink);
}
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }
.section--ink .lede, .section--ink .muted { color: var(--text-on-ink-muted); }

.measure { max-width: var(--measure); }

.grid { display: grid; gap: var(--s3); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Copy beside an illustration: the artwork is taller than a short paragraph, so
   centring the text against it avoids a deep well of space under the copy. */
.split--middle { align-items: center; }
/* Stacks earlier than a plain .split. Between 901px and 1040px the second column
   is only ~350px, which shrinks the logos inside the artwork past legibility;
   full width one column reads better than two cramped ones. */
@media (max-width: 1040px) {
  .split--middle { grid-template-columns: minmax(0, 1fr); }
  .split--middle .section-illo { margin-top: var(--s2); }
  .split--middle .section-illo img { max-width: 460px; }
}

.stack > * + * { margin-top: var(--s3); }

/* --------------------------------------------------------------------------
   4. Typographic utilities
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 var(--s2);
  display: flex;
  /* flex-start, not center: a long label (the homepage hero eyebrow) wraps to
     three lines at mobile width, and centring floats the mark in the middle of
     the block instead of on the first line. */
  align-items: flex-start;
  gap: 9px;
}
/* A single orange mark in front of every section label. One CSS rule rather
   than an icon per section, so the cue is identical on all six pages. */
.eyebrow::before {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  margin-top: 3px;   /* optical alignment to the first line's cap height */
  background-color: var(--accent);
  -webkit-mask: var(--eyebrow-mark) center / contain no-repeat;
  mask: var(--eyebrow-mark) center / contain no-repeat;
}
.eyebrow--bare::before { display: none; }
.eyebrow--spark { --eyebrow-mark: var(--ico-spark); }
.eyebrow--cap { --eyebrow-mark: var(--ico-cap); }
.eyebrow--compass { --eyebrow-mark: var(--ico-compass); }
.eyebrow--question { --eyebrow-mark: var(--ico-question); }
.eyebrow--target { --eyebrow-mark: var(--ico-target); }
.eyebrow--layers { --eyebrow-mark: var(--ico-layers); }
.eyebrow--folder { --eyebrow-mark: var(--ico-folder); }
.eyebrow--users { --eyebrow-mark: var(--ico-users); }
.eyebrow--split { --eyebrow-mark: var(--ico-split); }
.eyebrow--person { --eyebrow-mark: var(--ico-person); }
.eyebrow--scales { --eyebrow-mark: var(--ico-scales); }
.eyebrow--clipboard { --eyebrow-mark: var(--ico-clipboard); }
.eyebrow--send { --eyebrow-mark: var(--ico-send); }
.eyebrow--book { --eyebrow-mark: var(--ico-book); }
.eyebrow--briefcase { --eyebrow-mark: var(--ico-briefcase); }
.eyebrow--clock { --eyebrow-mark: var(--ico-clock); }
.eyebrow--calendar { --eyebrow-mark: var(--ico-calendar); }
.eyebrow--wrench { --eyebrow-mark: var(--ico-wrench); }
.eyebrow--timeline { --eyebrow-mark: var(--ico-timeline); }
.eyebrow--brackets { --eyebrow-mark: var(--ico-brackets); }
.eyebrow--exchange { --eyebrow-mark: var(--ico-exchange); }
.eyebrow--swap { --eyebrow-mark: var(--ico-swap); }
.eyebrow--route { --eyebrow-mark: var(--ico-route); }
.eyebrow--lightbulb { --eyebrow-mark: var(--ico-lightbulb); }
.eyebrow--pin { --eyebrow-mark: var(--ico-pin); }
.eyebrow--nodes { --eyebrow-mark: var(--ico-nodes); }
.eyebrow--shield { --eyebrow-mark: var(--ico-shield); }
.eyebrow--mail { --eyebrow-mark: var(--ico-mail); }
.section--ink .eyebrow { color: var(--accent); }
.eyebrow--accent { color: var(--accent-text); }

.lede {
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  line-height: 1.58;
  color: var(--text-muted);
  max-width: var(--measure);
}

.muted { color: var(--text-muted); }
.small { font-size: 0.875rem; line-height: 1.58; }
.xsmall { font-size: 0.78rem; line-height: 1.5; }

.section-head { max-width: 760px; margin-bottom: var(--s6); }
.section-head p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   5. Signature component: the commitment ledger
   The brand thesis is honesty about effort, so the numbers are rendered as a
   visible accounting artifact rather than hidden in body copy.
   -------------------------------------------------------------------------- */
.ledger {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  overflow: hidden;
}
.section--ink .ledger { background: var(--ink-raised); border-color: var(--ink-line); }

.ledger__item {
  flex: 1 1 155px;
  padding: 18px 20px;
  border-right: 1px solid var(--line);
}
.section--ink .ledger__item { border-right-color: var(--ink-line); }
.ledger__item:last-child { border-right: 0; }

.ledger__val {
  font-family: var(--font-display);
  white-space: nowrap;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  display: block;
}
.ledger__val .unit {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-faint);
  margin-left: 3px;
}
.section--ink .ledger__val .unit { color: var(--text-on-ink-muted); }

.ledger__key {
  display: block;
  margin-top: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.section--ink .ledger__key { color: var(--text-on-ink-muted); }

.ledger__item--accent { background: var(--accent-wash); }
.section--ink .ledger__item--accent { background: rgba(255, 77, 0, 0.14); }
.ledger__item--accent .ledger__val { color: var(--accent-text); }
.section--ink .ledger__item--accent .ledger__val { color: var(--accent); }

/* Hour bar: the practicum maths, drawn to scale */
.hourbar { display: grid; gap: var(--s3); }
.hourbar__row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: var(--s3);
  align-items: center;
}
.hourbar__label { font-weight: 600; font-size: 0.9375rem; }
.hourbar__label .xsmall { display: block; font-weight: 400; color: var(--text-muted); }
.hourbar__track {
  position: relative;
  height: 44px;
  background: var(--fill);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  overflow: hidden;
}
.hourbar__seg {
  display: flex;
  align-items: center;
  padding-inline: 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 0;
}
.hourbar__seg--academic { background: var(--ink); color: #fff; }
.hourbar__seg--practicum { background: var(--accent); color: var(--accent-ink); }
.hourbar__seg--over { background: repeating-linear-gradient(45deg, #E7E4DE, #E7E4DE 6px, #DAD6CF 6px, #DAD6CF 12px); color: var(--text); }
.hourbar__total { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Seven-day strip: the shape of a week, one card per day. Seven is prime, so
   every wrap leaves an orphan; the last card spans the remainder instead. */
.daystrip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
}
.daycard {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  /* Clears the global list-item bottom margin, which is zeroed on :last-child
     and would otherwise make the last card 6px taller than the other six. */
  margin: 0;
  padding: 14px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-on-ink);
  text-align: center;
}
.daycard--class { background: var(--accent); }
.daycard--work { background: var(--ink); }
/* 19px/700 is above the 18.66px bold threshold for WCAG large text, so the day
   name clears 3:1 on the brand orange. Do not reduce this size. */
.daycard__d {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.daycard__m {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.02em;
}
/* Meta text is small, so it cannot rely on the large-text threshold: on orange
   it uses the near-black ink (6.3:1) rather than the near-white (3.0:1). */
.daycard--class .daycard__m { color: var(--accent-ink); }
.daycard--work .daycard__m { color: var(--text-on-ink); opacity: 0.72; }
@media (max-width: 900px) {
  .daystrip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .daycard:last-child { grid-column: span 2; }
}
@media (max-width: 560px) {
  .daystrip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .daycard { padding: 12px 10px; }
  .daycard__d { font-size: 1.1875rem; }
}

.legend { display: flex; flex-wrap: wrap; gap: var(--s3); font-size: 0.8125rem; color: var(--text-muted); }
.legend__item { display: flex; align-items: center; gap: 8px; }
.legend__swatch { width: 14px; height: 14px; border-radius: 4px; flex: none; }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.14s ease, background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--accent-cta); color: var(--accent-cta-ink); }
.btn--primary:hover { background: var(--accent-cta-hover); color: var(--accent-cta-ink); }
.btn--apply-desktop { gap: 7px; }
.btn svg { flex: none; }
/* The default orange focus ring is invisible on an orange button. */
.btn--primary:focus-visible { outline-color: var(--ink); outline-offset: 3px; }
.section--ink .btn--primary:focus-visible, .apply-bar .btn--primary:focus-visible { outline-color: #fff; }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #2A2723; }

.btn--ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--text); background: rgba(22, 21, 15, 0.04); }
.section--ink .btn--ghost { color: #fff; border-color: var(--ink-line); }
.section--ink .btn--ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.4); }

/* Solid light button. Its job is to be the secondary CTA on a dark band, where a
   ghost outline is too quiet against black. */
.btn--light { background: var(--paper); color: var(--text); }
.btn--light:hover { background: #fff; }
.btn--light:focus-visible { outline-color: #fff; outline-offset: 3px; }

.btn--wide { width: 100%; }
/* Small pills sit in narrow sidebar columns, where a wrapped label breaks the
   pill shape; keep them on one line. */
.btn--sm { min-height: 44px; padding: 10px 18px; font-size: 0.875rem; white-space: nowrap; }

.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

.textlink {
  font-weight: 600;
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-color: rgba(190, 61, 13, 0.4);
}
.textlink:hover { text-decoration-color: currentColor; }
.section--ink .textlink { color: var(--accent); text-decoration-color: rgba(255, 77, 0, 0.4); }

/* --------------------------------------------------------------------------
   7. Header and navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 250, 250, 0.88);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  color: var(--text);
  flex: none;
}
.wordmark__mark {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-size: 0.875rem;
  font-weight: 700;
  flex: none;
}
.wordmark__sub { font-family: var(--font-body); font-weight: 500; color: var(--text-faint); font-size: 0.9375rem; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 9px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}
.nav a:hover { color: var(--text); background: rgba(22, 21, 15, 0.05); }
.nav a[aria-current="page"] { color: var(--text); font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: var(--s2); flex: none; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 4px; width: 16px; }
.nav-toggle__bars span { height: 2px; background: currentColor; border-radius: 2px; }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding: var(--s2) 0 var(--s3);
}
.mobile-nav[data-open="true"] { display: block; }
.mobile-nav a {
  display: block;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  font-weight: 500;
  color: var(--text);
}
.mobile-nav a[aria-current="page"] { font-weight: 700; }
.mobile-nav .btn { margin-top: var(--s3); }

/* Cohort status strip */
.statusbar {
  background: var(--ink);
  color: var(--text-on-ink);
  font-size: 0.875rem;
}
.statusbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding-block: 10px;
}
.statusbar__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  flex: none;
  box-shadow: 0 0 0 4px rgba(255, 77, 0, 0.22);
}
.statusbar__item { display: inline-flex; align-items: center; gap: 8px; }
.statusbar__sep { color: rgba(255,255,255,0.24); }
.statusbar strong { color: #fff; font-weight: 600; }

/* --------------------------------------------------------------------------
   8. Placeholders (must stay visibly unfinished)
   -------------------------------------------------------------------------- */
.ph {
  display: inline;
  background: var(--warn-wash);
  border-bottom: 1px dashed var(--warn);
  color: var(--warn);
  font-size: 0.9em;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
}
.section--ink .ph { background: rgba(255, 200, 120, 0.14); color: #F0C58A; border-bottom-color: #F0C58A; }

.ph-block {
  border: 1px dashed var(--warn);
  background: var(--warn-wash);
  color: var(--warn);
  border-radius: var(--radius-sm);
  padding: var(--s3);
  font-size: 0.9375rem;
}
.ph-block strong { color: var(--warn); }

.ph-media {
  position: relative;
  border: 1px dashed var(--line-strong);
  background:
    linear-gradient(135deg, rgba(255,77,0,0.05), rgba(255,77,0,0)),
    var(--fill);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  padding: var(--s4);
  text-align: center;
  color: var(--text-faint);
  overflow: hidden;
}
.ph-media__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ph-media__note { font-size: 0.875rem; margin-top: 8px; max-width: 34ch; color: var(--text-muted); }
/* Two-column page hero. Slightly copy-weighted so the headline keeps a strong
   measure, and the illustration is not asked to fill a half-page column. */
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 900px) {
  .hero-split { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
}

/* Delivered illustration in a two-column section. Transparent PNG on the page
   background, no card or border: the artwork carries its own shadows. */
.section-illo { display: flex; justify-content: center; align-items: flex-start; }
.section-illo picture { display: contents; }
.section-illo img { width: 100%; height: auto; }
/* Portrait artwork: capped so a tall image does not out-scale the copy beside it. */
.section-illo--portrait img { max-width: 430px; }
.section-illo--sticky { position: sticky; top: calc(var(--header-h) + 24px); }
@media (max-width: 900px) {
  .section-illo--sticky { position: static; }
  .section-illo img { max-width: 420px; }
}

/* In an editorial two-column section the prose column is far taller than the
   illustration, which would leave the aside half empty. Stretching the aside lets
   the sticky illustration track the paragraph being read. */
.split__aside { align-self: stretch; }
@media (max-width: 900px) {
  .split__aside { align-self: start; }
}

/* Delivered photograph. Fills the same framed box the placeholder occupied, so
   section rhythm is unchanged; object-fit crops instead of distorting. */
.photo {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--fill);
}
.photo picture { display: contents; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo--portrait { aspect-ratio: 4 / 5; }

/* Hero proof cards: fast credibility under the intro paragraph. Deliberately
   flatter than .card so they read as part of the hero rather than the start of
   a new section. The warm glow sits low and wide, so it reads as light bouncing
   off the page under the card rather than as a drop shadow. */
.prooflist {
  list-style: none;
  margin: var(--s5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.proof {
  margin: 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow:
    0 1px 2px rgba(22, 21, 15, 0.04),
    0 10px 22px -14px rgba(255, 77, 0, 0.5);
  transition: border-color 0.18s ease, box-shadow 0.24s ease, transform 0.18s ease;
}
.proof:hover {
  border-color: rgba(255, 77, 0, 0.32);
  box-shadow:
    0 1px 2px rgba(22, 21, 15, 0.04),
    0 14px 30px -14px rgba(255, 77, 0, 0.7);
  transform: translateY(-2px);
}
/* Reuses the .eyebrow icon system, so the mark and label match every other
   section label on the site. */
.proof .eyebrow { margin-bottom: 10px; }
.proof__v {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
}
.proof__d { font-size: 0.8125rem; line-height: 1.5; color: var(--text-muted); margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .proof:hover { transform: none; }
}
@media (max-width: 560px) {
  .prooflist { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* With four cards added, the copy column outgrows a 4:5 portrait. Letting the
   portrait fill the column keeps the hero balanced without scaling the image
   past a sensible height. */
@media (min-width: 901px) {
  .hero-portrait { align-self: stretch; display: flex; }
  .hero-portrait .photo { aspect-ratio: auto; width: 100%; max-height: 660px; }
}
.photo--square { aspect-ratio: 1 / 1; }

.ph-media--portrait { aspect-ratio: 4 / 5; }
.ph-media--wide { aspect-ratio: 16 / 10; }
.ph-media--square { aspect-ratio: 1 / 1; }

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s4);
  transition: border-color 0.18s ease, box-shadow 0.24s ease, transform 0.18s ease;
}
/* Warm accent glow on hover. Applied to static content cards as well as links:
   the brand accent is the only colour doing this job, so it reads as one
   consistent behaviour rather than a hint that everything is clickable. */
.card:hover, .project:hover, .route:hover, .fit__col:hover {
  border-color: rgba(255, 77, 0, 0.42);
  box-shadow:
    0 1px 2px rgba(22, 21, 15, 0.04),
    0 10px 30px rgba(255, 77, 0, 0.14),
    0 0 0 1px rgba(255, 77, 0, 0.1);
  transform: translateY(-2px);
}
.section--ink .card { background: var(--ink-raised); border-color: var(--ink-line); }
.section--ink .card:hover, .section--ink .project:hover, .section--ink .fit__col:hover {
  border-color: rgba(255, 77, 0, 0.5);
  box-shadow:
    0 12px 34px rgba(255, 77, 0, 0.2),
    0 0 0 1px rgba(255, 77, 0, 0.18);
}
.card h3 { margin-bottom: 10px; }
.card h3.h-sm { margin-bottom: 6px; }
.card--pad-sm { padding: var(--s3); }

.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.card-link:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }

/* Phase cards with a week rail */
.phase {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--s4);
  padding: var(--s4) 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.phase:last-child { border-bottom: 1px solid var(--line); }
.phase__rail { position: relative; }
/* Week range: calendar mark, the range, then the unit. Sized to hold
   "01-04 Weeks" on ONE line inside the 150px rail: the range dropped from 22px
   to 17px and the unit is body-size, so the range still leads. */
.phase__weeks {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
/* Two-colour calendar (orange header, near-black body) as a single background
   image, so the icon is one rule rather than twelve inline SVGs. */
.phase__weeks::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.1' y='5.3' width='17.8' height='15.6' rx='2.6' fill='%23FFFFFF' stroke='%2316150F' stroke-width='1.8'/%3E%3Cpath d='M3.1 7.9a2.6 2.6 0 012.6-2.6h12.6a2.6 2.6 0 012.6 2.6v2.5H3.1z' fill='%23FF4D00'/%3E%3Cpath d='M3.1 10.4h17.8' stroke='%2316150F' stroke-width='1.8'/%3E%3Cpath d='M8.1 3.3v3.4M15.9 3.3v3.4' stroke='%2316150F' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.phase__unit {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
  line-height: 1;
}
.phase__month {
  display: block;
  margin-top: 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.phase__tick {
  margin-top: 14px;
  height: 3px;
  width: 44px;
  border-radius: 2px;
  background: var(--accent);
}
.phase__out {
  margin-top: var(--s2);
  padding: 14px 16px;
  background: var(--paper-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  font-size: 0.9375rem;
}
.phase__out strong { display: block; font-size: 0.6875rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 4px; }

/* Project cards */
.project {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.project__no {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-text);
  text-transform: uppercase;
}
.project__body { padding: var(--s3); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.project__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: var(--s2); }

.tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--fill);
  border: 1px solid var(--line);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
}
.section--ink .tag { background: rgba(255,255,255,0.06); border-color: var(--ink-line); color: var(--text-on-ink-muted); }
.tag--accent { background: var(--accent-wash); border-color: rgba(255,77,0,0.45); color: var(--accent-text); }

/* Route cards (the two ways to join) */
.routes {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);
  gap: var(--s3);
  align-items: start;
}
.route {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s5);
  position: relative;
}
.route--primary {
  border: 2px solid var(--accent);
  box-shadow: var(--shadow-lift);
}
.route__flag {
  position: absolute;
  top: -13px;
  left: var(--s5);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}
.route__price {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}
.route__price .sub { font-size: 0.9375rem; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }

/* The marker is absolutely positioned rather than a grid column, so a list item
   containing inline elements (a link, a <strong>) stays one continuous run of
   text instead of splitting into separate grid items. */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.checklist li {
  display: block;
  position: relative;
  padding-left: 30px;
  font-size: 0.9375rem;
  margin: 0;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 18px; height: 18px;
  border-radius: 50%;
  /* Solid brand orange with a white tick: the mark reads as the accent at 13px,
     which a thin orange stroke on a pale wash did not. */
  background-color: var(--accent);
  border: 1px solid var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2l2.2 2.2 4.7-4.8' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.section--ink .checklist li::before {
  background-color: var(--accent);
  border-color: var(--accent);
}
.checklist--no li::before,
.section--ink .checklist--no li::before {
  background-color: var(--err-wash);
  border-color: rgba(165, 35, 27, 0.3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.6 3.6l4.8 4.8M8.4 3.6l-4.8 4.8' fill='none' stroke='%23A5231B' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.checklist--neutral li::before,
.section--ink .checklist--neutral li::before {
  background-color: var(--fill);
  border-color: var(--line-strong);
  background-image: none;
}

/* Plain link list: same rhythm as the checklist, no marker. */
.linklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.linklist li { margin: 0; border-top: 1px solid var(--line); }
.linklist li:last-child { border-bottom: 1px solid var(--line); }
.linklist a, .linklist > li > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  min-height: 44px;
  padding: 11px 0;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--text);
}
.linklist a:hover { color: var(--accent-text); }

/* Two-column for-you / not-for-you */
.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.fit__col {
  padding: var(--s4);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--card);
  transition: border-color 0.18s ease, box-shadow 0.24s ease, transform 0.18s ease;
}
.fit__col--no { background: var(--fill); }
/* Scope columns on a dark band. These carry their own resting border, so they
   must be classes: an inline border-color would outrank the hover rule. */
.fit__col--ink { background: var(--ink-raised); border-color: var(--ink-line); }
.fit__col--err { background: rgba(165, 35, 27, 0.12); border-color: rgba(165, 35, 27, 0.35); }

/* Steps, base: a divided list with a counter number. Used inside cards and
   panels (the application confirmation), where a card treatment would mean a
   card inside a card. */
.steps { counter-reset: step; display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: var(--s3);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.step:first-child { border-top: 1px solid var(--line); }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
  padding-top: 2px;
}
.step h3, .step h4 { margin-bottom: 4px; }

/* Steps, flow variant: light cards joined by a downward arrow, so the sequence
   reads as a process. Requires an explicit .step__n per item. The gap carries
   the arrow, so it is larger than a normal stack gap. */
.steps--flow { gap: 30px; }
.steps--flow .step {
  position: relative;
  grid-template-columns: 38px minmax(0, 1fr);
  padding: var(--s3);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--text);
  transition: border-color 0.18s ease, box-shadow 0.24s ease, transform 0.18s ease;
}
.steps--flow .step:first-child { border-top: 1px solid transparent; }
.steps--flow .step::before { content: none; }
.steps--flow .step:hover {
  border-color: rgba(255, 77, 0, 0.42);
  box-shadow:
    0 12px 34px rgba(255, 77, 0, 0.2),
    0 0 0 1px rgba(255, 77, 0, 0.18);
  transform: translateY(-2px);
}
/* Connector sits in the gap below every card but the last. */
.steps--flow .step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  translate: -50% 0;
  width: 15px;
  height: 30px;
  background-color: var(--accent);
  -webkit-mask: var(--ico-arrow-down) center / 15px 15px no-repeat;
  mask: var(--ico-arrow-down) center / 15px 15px no-repeat;
}
.step__n {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
/* The flow cards are light, so they opt out of the dark section's text colours. */
.section--ink .steps--flow .step h3, .section--ink .steps--flow .step h4 { color: var(--text); }
.section--ink .steps--flow .step .ph {
  background: var(--warn-wash);
  color: var(--warn);
  border-bottom-color: var(--warn);
}
.steps--flow .step .small { color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) {
  .steps--flow .step:hover { transform: none; }
}

/* Timeline (practicum) */
.timeline { display: grid; gap: 0; }
.tl {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: var(--s4);
  padding: var(--s3) 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.tl:last-child { border-bottom: 1px solid var(--line); }
.tl__when {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  padding-top: 3px;
}
.section--ink .tl { border-color: var(--ink-line); }
.section--ink .tl__when { color: var(--accent); }

/* Callout */
.callout {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  background: var(--card);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--s3) var(--s4);
}
.callout--quiet { border-left-color: var(--line-strong); background: var(--fill); }
.callout--legal { border-left-color: var(--info); background: var(--info-wash); }
.callout--warn { border-left-color: var(--warn); background: var(--warn-wash); }
.callout h4 { margin-bottom: 6px; }

/* Founder note */
.founder-note {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: var(--s3);
  align-items: start;
}
.founder-note .ph-media { border-radius: 50%; aspect-ratio: 1; padding: 12px; }

/* Quote */
.pullquote {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.85rem);
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: -0.02em;
  max-width: 22ch;
}

/* Facts / definition rows */
.deflist { display: grid; gap: 0; }
.deflist__row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--s3);
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.deflist__row:last-child { border-bottom: 1px solid var(--line); }
.deflist__k { font-weight: 600; font-size: 0.9375rem; }
.section--ink .deflist__row { border-color: var(--ink-line); }

/* Table */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--card); }
table.data { width: 100%; border-collapse: collapse; font-size: 0.9375rem; min-width: 560px; }
table.data th, table.data td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data thead th { background: var(--fill); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --------------------------------------------------------------------------
   10. Accordion / FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
  padding: 20px 4px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.35;
}
.faq__q:hover { color: var(--accent-text); }
.faq__icon {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  position: relative;
  margin-top: 2px;
  transition: background-color 0.16s ease, border-color 0.16s ease;
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.faq__icon::before { width: 10px; height: 1.5px; }
.faq__icon::after { width: 1.5px; height: 10px; }
.faq__q[aria-expanded="true"] .faq__icon { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: scaleY(0); opacity: 0; }
.faq__a { display: none; padding: 0 4px 22px; max-width: var(--measure); }
.faq__a[data-open="true"] { display: block; }
.faq__a p { font-size: 0.9375rem; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   11. Forms
   -------------------------------------------------------------------------- */
.field { margin-bottom: var(--s3); }
.field:last-child { margin-bottom: 0; }

.label {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 6px;
}
.label .req { color: var(--err); margin-left: 2px; }
.hint { display: block; font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 8px; line-height: 1.5; }

.input, .select, .textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--card);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%2356544E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
  padding-right: 40px;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 77, 0, 0.18);
  outline: none;
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--err);
  background: var(--err-wash);
}

.err-msg {
  display: none;
  margin-top: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--err);
}
.err-msg[data-show="true"] { display: block; }

/* Choice controls */
.choice {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--card);
  cursor: pointer;
  margin-bottom: 10px;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}
.choice:last-child { margin-bottom: 0; }
.choice:hover { border-color: var(--text-faint); }
.choice input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.choice__t { font-weight: 600; font-size: 0.9375rem; display: block; }
.choice__d { font-size: 0.8125rem; color: var(--text-muted); display: block; margin-top: 3px; line-height: 1.5; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.choice:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }

.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choice-grid .choice { margin-bottom: 0; }

/* Wizard */
.wizard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 44px); }

.progress { margin-bottom: var(--s5); }
.progress__meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); margin-bottom: 10px; }
.progress__step { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-faint); }
.progress__name { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; }
.progress__track { height: 6px; background: var(--fill); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.progress__fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.3s ease; }

.wizard__panel { display: none; }
.wizard__panel[data-active="true"] { display: block; }
.wizard__actions {
  display: flex;
  gap: var(--s2);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

.error-summary {
  display: none;
  border: 1px solid var(--err);
  background: var(--err-wash);
  border-radius: var(--radius-sm);
  padding: var(--s3);
  margin-bottom: var(--s4);
}
.error-summary[data-show="true"] { display: block; }
.error-summary h2, .error-summary h3 { font-size: 1rem; color: var(--err); margin-bottom: 8px; }
.error-summary ul { margin: 0; padding-left: 1.1em; }
.error-summary a { color: var(--err); font-weight: 600; }

.conditional { display: none; margin-top: var(--s3); }
.conditional[data-show="true"] { display: block; }

.confirm { display: none; text-align: left; }
.confirm[data-show="true"] { display: block; }
.confirm__badge {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--accent);
  border: 1px solid var(--accent);
  display: grid; place-items: center;
  margin-bottom: var(--s3);
}

/* Contact reason chips. Labels must not wrap: a two-line label inside a pill
   destroys the pill shape and makes the row read as broken. */
.reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.reasons .choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 999px;
  grid-template-columns: none;
  white-space: nowrap;
}
.reasons .choice input { width: 16px; height: 16px; margin: 0; flex: none; }
.reasons .choice .choice__t { white-space: nowrap; }

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--text-on-ink); padding-block: var(--s7) var(--s4); }
.site-footer a { color: var(--text-on-ink-muted); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.footer-brand .wordmark { color: #fff; }
.footer-col h3 { font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-on-ink-muted); margin-bottom: var(--s2); font-weight: 600; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-col li { margin: 0; font-size: 0.9375rem; }
.footer-bottom {
  margin-top: var(--s6);
  padding-top: var(--s3);
  border-top: 1px solid var(--ink-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--text-on-ink-muted);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); }

.scam-notice {
  margin-top: var(--s4);
  padding: var(--s3);
  border: 1px solid var(--ink-line);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.875rem;
  color: var(--text-on-ink-muted);
}
.scam-notice strong { color: #fff; }

/* --------------------------------------------------------------------------
   13. Hero
   -------------------------------------------------------------------------- */
.hero { padding-block: clamp(48px, 6vw, 88px) clamp(48px, 6vw, 80px); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  /* Separate axes. The column gutter is wide; the row gap reuses the hero's own
     bottom padding value so the ledger sits an equal distance from the buttons
     above it and the dark section below it. */
  column-gap: clamp(32px, 5vw, 72px);
  row-gap: clamp(48px, 6vw, 80px);
  /* Baseline the two columns on their bottom edge. The illustration is taller
     than the copy, so centring left the copy floating and pushed the ledger
     further from the buttons than it sits from the dark section below. */
  align-items: end;
}
.hero h1 { margin-bottom: var(--s3); }
/* The ledger spans the full hero width, under both columns, so the four numbers
   sit on one line. Each cell gets ~300px at the 1200px cap, which holds the
   longest key ("Internship maximum") without wrapping. */
.hero__ledger {
  grid-column: 1 / -1;
  flex-wrap: nowrap;
}
.hero__ledger .ledger__item { flex: 1 1 0; }

.hero__media picture { display: contents; }
/* Height-capped rather than width-filled, so the illustration stays in
   proportion to the copy beside it instead of towering over it. Both
   constraints are maxima, so the aspect ratio is never forced. */
.hero__media img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 450px;
  margin-inline: auto;
}

.page-hero { padding-block: clamp(44px, 5vw, 76px) clamp(32px, 4vw, 52px); }
/* Hero illustration. The artwork is a transparent PNG in portrait 3:4, so it
   sits directly on the page background with no card or border. Capped well
   below its native width: at full column width it would tower over the
   headline it is meant to support. */
.hero__illo { display: flex; justify-content: center; }
.hero__illo picture { display: contents; }
.hero__illo img { width: 100%; max-width: 340px; height: auto; }
@media (max-width: 900px) {
  .hero__illo img { max-width: 280px; }
}
.page-hero h1 { max-width: 20ch; }

/* --------------------------------------------------------------------------
   14. Motion
   -------------------------------------------------------------------------- */
/* Progressive enhancement: content is visible by default. The hidden start state
   only applies once JS has confirmed it can reveal it again. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; }
.js .reveal[data-seen="true"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .btn:hover, .card-link:hover { transform: none; }
  .card:hover, .project:hover, .route:hover, .fit__col:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1040px) {
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
  .routes { grid-template-columns: 1fr; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { max-width: 460px; }
  /* Stacked: two rows of two rather than four cramped columns. */
  .hero__ledger { flex-wrap: wrap; }
  .hero__ledger .ledger__item { flex: 1 1 50%; }
  .hero__ledger .ledger__item:nth-child(2n) { border-right: 0; }
  .hero__ledger .ledger__item:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-actions .btn--apply-desktop { display: none; }
  .split, .split--even { grid-template-columns: 1fr; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deflist__row { grid-template-columns: 1fr; gap: 4px; }
  .hourbar__row { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .wrap { padding-inline: 20px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .fit { grid-template-columns: 1fr; }
  .phase { grid-template-columns: 1fr; gap: var(--s2); }
  .phase__tick { display: none; }
  .phase__rail { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .phase__month { margin-top: 0; }
  .tl { grid-template-columns: 1fr; gap: 6px; }
  .step { grid-template-columns: 36px minmax(0, 1fr); gap: var(--s2); }
  .steps--flow .step { grid-template-columns: 34px minmax(0, 1fr); }
  .step__n { width: 34px; height: 34px; font-size: 0.8125rem; }
  .route { padding: var(--s4) var(--s3); }
  .choice-grid { grid-template-columns: 1fr; }
  .ledger__item { flex: 1 1 50%; border-bottom: 1px solid var(--line); }
  .ledger__item:nth-child(2n) { border-right: 0; }
  .founder-note { grid-template-columns: 72px minmax(0, 1fr); gap: var(--s2); }
  .wizard__actions .btn { flex: 1 1 auto; }
  /* Stacked status items read better than a wrapped inline row with
     orphaned separators. */
  .statusbar__inner { font-size: 0.8125rem; flex-direction: column; align-items: flex-start; gap: 4px; padding-block: 8px; }
  .statusbar__sep { display: none; }
  .hero__media { max-width: none; }
}

/* Mobile sticky apply bar */
.apply-bar {
  display: none;
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 90;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  padding: 8px 8px 8px 20px;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22);
}
.apply-bar__t { font-size: 0.8125rem; font-weight: 600; line-height: 1.3; }
.apply-bar__t span { display: block; color: var(--text-on-ink-muted); font-weight: 400; font-size: 0.75rem; }

@media (max-width: 680px) {
  .apply-bar { display: flex; }
  body:not(.no-applybar) .site-footer { padding-bottom: 88px; }
}

@media print {
  .site-header, .apply-bar, .statusbar { display: none; }
}

/* ==========================================================================
   16. Elementor bridge
   The sections above are the design system exactly as it was prototyped.
   Everything below adapts it to Elementor containers and widgets, so the
   builder stays the editing surface and the tokens stay the source of truth.
   ========================================================================== */

/* Astra wraps content in its own padded container. Elementor containers carry
   their own width, so hand the full viewport back to them. */
.ast-container,
.site-content .ast-container { max-width: none; padding-inline: 0; }
.ast-page-builder-template .site-content > .ast-container { padding: 0; }
#primary { padding: 0; margin: 0; }
.site-content #primary { padding: 0; }

/* Section rhythm as a container class. .section itself is kept intact above for
   the prototype pages; this is the same scale applied to an Elementor container
   without also imposing a background. */
.e-con.ia-section { padding-block: clamp(56px, 7vw, 104px); }
.e-con.ia-section--tight { padding-block: clamp(40px, 5vw, 72px); }

/* Dark bands. Elementor headings carry .elementor-heading-title on the heading
   element itself, so the descendant rules in section 3 already reach them. */
.e-con.section--ink { background: var(--ink); color: var(--text-on-ink); }
.e-con.section--wash { background: var(--accent-wash); }
.section--ink .elementor-widget-text-editor,
.section--ink .elementor-widget-text-editor p { color: var(--text-on-ink); }
.section--ink .elementor-widget-heading .elementor-heading-title { color: #fff; }

/* Buttons. The Button widget stays native so it remains editable; these classes
   go in the widget's CSS Classes field and restate the three brand variants.
   Specificity is raised once here rather than fighting Elementor per widget. */
.ia-cta .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  /* Buttons are Inter 600, not the display face. Matches .btn in section 6. */
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.ia-cta .elementor-button:hover { transform: translateY(-1px); }
.ia-cta .elementor-button:active { transform: translateY(0); }

.ia-cta--primary .elementor-button { background: var(--accent-cta); color: var(--accent-cta-ink); }
.ia-cta--primary .elementor-button:hover { background: var(--accent-cta-hover); color: var(--accent-cta-ink); }
/* The global focus ring is the brand orange, which disappears on an orange
   button. Ink on light, white on the dark bands. */
.ia-cta--primary .elementor-button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.section--ink .ia-cta--primary .elementor-button:focus-visible { outline-color: #fff; }

.ia-cta--dark .elementor-button { background: var(--ink); color: #fff; }
.ia-cta--dark .elementor-button:hover { background: #2A2723; color: #fff; }

.ia-cta--ghost .elementor-button { background: transparent; color: var(--text); border-color: var(--line-strong); }
.ia-cta--ghost .elementor-button:hover { border-color: var(--text); background: rgba(22, 21, 15, 0.04); color: var(--text); }

.ia-cta--light .elementor-button { background: var(--paper); color: var(--text); }
.ia-cta--light .elementor-button:hover { background: #fff; color: var(--text); }
.ia-cta--light .elementor-button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.ia-cta--sm .elementor-button { min-height: 44px; padding: 10px 18px; font-size: 0.875rem; white-space: nowrap; }

/* Text Editor widgets carry the utility class on the wrapper; font-size and
   colour inherit down to the paragraphs inside. */
.elementor-widget-text-editor.lede { font-size: 1.1rem; line-height: 1.58; color: var(--text-muted); }
.elementor-widget-text-editor.small { font-size: 0.875rem; line-height: 1.58; }
.elementor-widget-text-editor.muted { color: var(--text-muted); }
.section--ink .elementor-widget-text-editor.lede,
.section--ink .elementor-widget-text-editor.muted { color: var(--text-on-ink-muted); }

/* The eyebrow is a Heading widget so it stays editable. Section 4 styles the
   class; this restates the inline-flex on the heading element itself. */
.elementor-widget-heading.eyebrow .elementor-heading-title {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

/* Accordion. The native widget carries the accessibility wiring; this restyles
   it to the prototype's FAQ rather than replacing it. */
.ia-faq .e-n-accordion-item {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.ia-faq .e-n-accordion-item:last-child { border-bottom: 1px solid var(--line); }
.ia-faq .e-n-accordion-item-title {
  padding: var(--s3) 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--text);
}
.ia-faq .e-n-accordion-item-title:hover { color: var(--accent-text); }
.ia-faq .e-n-accordion-item-title-text { flex: 1; }
.ia-faq .e-n-accordion-item > .e-con { padding: 0 0 var(--s3); }
.ia-faq p { font-size: 0.9375rem; color: var(--text-muted); }

/* The four-up and three-up card grids stack on the design's own breakpoints
   rather than Elementor's defaults. */
@media (max-width: 900px) {
  .e-con.ia-grid-4 { --e-con-grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .e-con.ia-grid-4,
  .e-con.ia-grid-3 { --e-con-grid-template-columns: minmax(0, 1fr); }
}

/* Entrance animation is off by design: six phase rows animating in sequence
   reads as a template, and the reveal must never gate content. */
.e-con [data-settings*="animation"] { opacity: 1 !important; }

/* ==========================================================================
   17. Container and component reconciliation
   The prototype's classes carry their own padding. When one is applied to an
   Elementor container, Elementor's padding lands on .e-con-inner and the two
   stack: the hero was rendering 86.4px + 80px of top padding, the footer
   72px + 72px. The rule from here on is one owner per box. Section padding
   belongs to Elementor, so it stays editable in the builder; component padding
   belongs to the stylesheet, because it is part of the component.
   ========================================================================== */
.e-con.hero,
.e-con.site-footer { padding-block: 0; }

/* Component classes on a container keep their stylesheet padding; the matching
   Elementor padding on these is set to zero. */
.e-con.route { padding: var(--s5); }

/* Equal-height cards.
   The Elementor HTML widget is the grid item and already stretches to the row
   height, but the card inside it did not fill that wrapper, so cards sharing a
   row rendered at different heights. Pass the height through instead of fixing
   a pixel height, which would break at the next copy edit. */
.e-con.e-grid > .elementor-widget-html { display: flex; flex-direction: column; }
.e-con.e-grid > .elementor-widget-html > .card,
.e-con.e-grid > .elementor-widget-html > .project,
.e-con.e-grid > .elementor-widget-html > .footer-col { flex: 1 1 auto; }

/* .card is not a flex container in the prototype, so content stays top-aligned
   when the card stretches, which is what the reference does. .project already
   distributes its own body and tag row. */

/* ==========================================================================
   18. Button states
   Astra styles bare `a` elements on hover. Any button built as a plain link
   inside an HTML widget therefore inherited Astra's link colour on hover
   instead of the brand colour. Every interactive state is pinned here on both
   button families, so no future button can pick up the theme default by
   accident, whichever way it is built.
   ========================================================================== */
.btn:link,
.btn:visited,
.btn:hover,
.btn:active,
.btn:focus,
.btn:focus-visible,
.ia-cta .elementor-button:link,
.ia-cta .elementor-button:visited,
.ia-cta .elementor-button:hover,
.ia-cta .elementor-button:active,
.ia-cta .elementor-button:focus,
.ia-cta .elementor-button:focus-visible { text-decoration: none; }

/* Primary: brand orange with the off-white label. */
.btn--primary:link,
.btn--primary:visited,
.btn--primary:active,
.btn--primary:focus,
.btn--primary:focus-visible,
.ia-cta--primary .elementor-button:link,
.ia-cta--primary .elementor-button:visited,
.ia-cta--primary .elementor-button:active,
.ia-cta--primary .elementor-button:focus,
.ia-cta--primary .elementor-button:focus-visible {
  background: var(--accent-cta);
  color: var(--accent-cta-ink);
}
.btn--primary:hover,
.ia-cta--primary .elementor-button:hover {
  background: var(--accent-cta-hover);
  color: var(--accent-cta-ink);
}

/* Dark: ink fill, white label. */
.btn--dark:link,
.btn--dark:visited,
.btn--dark:active,
.btn--dark:focus,
.btn--dark:focus-visible,
.ia-cta--dark .elementor-button:link,
.ia-cta--dark .elementor-button:visited,
.ia-cta--dark .elementor-button:active,
.ia-cta--dark .elementor-button:focus,
.ia-cta--dark .elementor-button:focus-visible {
  background: var(--ink);
  color: #fff;
}
.btn--dark:hover,
.ia-cta--dark .elementor-button:hover {
  background: #2A2723;
  color: #fff;
}

/* Ghost: transparent with an ink label and a hairline border. */
.btn--ghost:link,
.btn--ghost:visited,
.btn--ghost:active,
.btn--ghost:focus,
.btn--ghost:focus-visible,
.ia-cta--ghost .elementor-button:link,
.ia-cta--ghost .elementor-button:visited,
.ia-cta--ghost .elementor-button:active,
.ia-cta--ghost .elementor-button:focus,
.ia-cta--ghost .elementor-button:focus-visible {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn--ghost:hover,
.ia-cta--ghost .elementor-button:hover {
  background: rgba(22, 21, 15, 0.04);
  color: var(--text);
  border-color: var(--text);
}

/* Light: used on the dark bands. */
.btn--light:link,
.btn--light:visited,
.btn--light:active,
.btn--light:focus,
.btn--light:focus-visible,
.ia-cta--light .elementor-button:link,
.ia-cta--light .elementor-button:visited,
.ia-cta--light .elementor-button:active,
.ia-cta--light .elementor-button:focus,
.ia-cta--light .elementor-button:focus-visible {
  background: var(--paper);
  color: var(--text);
}
.btn--light:hover,
.ia-cta--light .elementor-button:hover {
  background: #fff;
  color: var(--text);
}

/* ==========================================================================
   19. FAQ inside an Elementor HTML widget
   The accordion is the prototype component verbatim (section 10), driven by
   the small accordion script in this theme. Nothing to restyle; this only
   stops the widget wrapper from constraining it.
   ========================================================================== */
.elementor-widget-html > .faq { width: 100%; }

/* The "Primary route" flag is absolutely positioned against .route (top:-13px)
   so it straddles the card's top border. Elementor gives every widget
   position:relative, which made the widget the containing block instead and
   dropped the flag inside the card. Take the widget out of the positioning
   chain so the flag anchors to the card, as the reference does. */
.e-con.route > .elementor-widget { position: static; }

/* ==========================================================================
   20. Section head spacing
   Same double-spacing clash as the hero: .section-head carries margin-bottom
   56px in the stylesheet, and the Elementor container adds its own 56px
   padding-bottom, so every section ran 112px between the heading and its
   content. Elementor owns section spacing, so drop the stylesheet's margin
   when the class sits on a container.
   ========================================================================== */
.e-con.section-head { margin-bottom: 0; }

/* ==========================================================================
   21. FAQ question states
   The FAQ question is a real <button>, and Astra styles bare buttons: its
   inline CSS gives button:focus a blue background (--ast-global-color-1) with
   white text, so clicking a question turned it into an Astra button. Pin every
   state here, the same way the CTA states are pinned in section 18.
   ========================================================================== */
.faq__q,
.faq__q:link,
.faq__q:visited,
.faq__q:hover,
.faq__q:focus,
.faq__q:focus-visible,
.faq__q:active,
.faq__q[aria-expanded="true"] {
  background: none;
  border: 0;
  box-shadow: none;
}

/* Focus and active alone keep the resting ink colour, so a question the user
   has just closed does not stay highlighted. */
.faq__q:focus,
.faq__q:focus-visible,
.faq__q:active { color: var(--text); }

/* Hover and the open state share one colour, so an expanded question reads as
   active instead of reverting to body ink. The open state is an addition to
   the reference, which colours on hover only. */
.faq__q:hover,
.faq__q[aria-expanded="true"] { color: var(--accent-text); }

/* Astra's focus background was doubling as the focus affordance. With it gone,
   restore a real focus ring for keyboard users. */
.faq__q:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ==========================================================================
   22. Contact Form 7
   The form template carries the reference markup and attaches the design's own
   classes with CF7's class: option, so .input, .textarea and .btn come through
   untouched. What is left is CF7's own wrappers, mapped here onto the form
   components in section 11 rather than restyled from scratch.
   ========================================================================== */
.wpcf7-form-control-wrap { display: block; }

/* Radio group: the seven reason chips. CF7 renders each option as a
   .wpcf7-list-item wrapping a label, so the label becomes the .choice pill. */
.reasons .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 8px; }
.reasons .wpcf7-list-item { margin: 0; }
.reasons .wpcf7-list-item > label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--card);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}
.reasons .wpcf7-list-item > label:hover { border-color: var(--text-faint); }
.reasons .wpcf7-list-item input {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: none;
  accent-color: var(--accent);
  cursor: pointer;
}
.reasons .wpcf7-list-item-label { font-weight: 600; font-size: 0.9375rem; white-space: nowrap; }
.reasons .wpcf7-list-item > label:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.reasons .wpcf7-list-item > label:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Consent acceptance: the stacked checkbox card from .choice. */
.ia-consent .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.ia-consent .wpcf7-acceptance label {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--card);
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.5;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}
.ia-consent .wpcf7-acceptance label:hover { border-color: var(--text-faint); }
.ia-consent .wpcf7-acceptance input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.ia-consent .wpcf7-acceptance label:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }

/* Validation. CF7's inline tip replaces the prototype's .err-msg. */
.wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--err);
}
.wpcf7-not-valid { border-color: var(--err); background: var(--err-wash); }

/* The response banner reuses the callout shape, tinted by outcome. */
.wpcf7 form .wpcf7-response-output {
  margin: var(--s3) 0 0;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  border-left: 4px solid var(--text-faint);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.9375rem;
}
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--ok); border-left-color: var(--ok); background: var(--ok-wash); color: var(--ok); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: var(--err); border-left-color: var(--err); background: var(--err-wash); color: var(--err); }

.wpcf7-spinner { margin-left: 10px; }
.wpcf7 .ia-consent { margin-bottom: var(--s3); }

/* Section-padding classes must not double up with Elementor's own padding.
   Same ownership rule as .hero and .site-footer in section 17: Elementor owns
   section spacing, the stylesheet owns component spacing. */
.e-con.page-hero { padding-block: 0; }
.e-con.card { padding: var(--s4); }
.e-con.card--pad-sm { padding: var(--s3); }
.e-con.fit__col { padding: var(--s4); }

/* ==========================================================================
   23. Submit controls
   A submit control is <input type="submit">, not a link, so the :link-based
   rules in section 18 never match it and Astra's input[type="submit"] rule
   (0,1,1) outranked the plain .btn--primary class (0,1,0), painting the button
   Astra blue with a 4px radius. Restate the variants at element+class
   specificity so form buttons match every other button on the site.
   ========================================================================== */
input[type="submit"].btn,
input[type="button"].btn,
button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.14s ease;
}

input[type="submit"].btn--primary,
button.btn--primary {
  background: var(--accent-cta);
  color: var(--accent-cta-ink);
}
input[type="submit"].btn--primary:hover,
input[type="submit"].btn--primary:focus,
input[type="submit"].btn--primary:active,
button.btn--primary:hover,
button.btn--primary:focus,
button.btn--primary:active {
  background: var(--accent-cta-hover);
  color: var(--accent-cta-ink);
}
input[type="submit"].btn--primary:focus-visible,
button.btn--primary:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

input[type="submit"].btn--dark,
button.btn--dark { background: var(--ink); color: #fff; }
input[type="submit"].btn--dark:hover,
button.btn--dark:hover { background: #2A2723; color: #fff; }

input[type="submit"].btn--ghost,
button.btn--ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
input[type="submit"].btn--ghost:hover,
button.btn--ghost:hover { background: rgba(22, 21, 15, 0.04); color: var(--text); border-color: var(--text); }

input[type="submit"].btn--wide,
button.btn--wide { width: 100%; }

/* CF7 keeps the submit button disabled until the consent box is ticked. Make
   that state legible rather than leaving it looking like a live button. */
input[type="submit"].btn[disabled],
button.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ==========================================================================
   24. Screen-reader-only utility
   curriculum.html marks the sample-week table caption with .visually-hidden,
   but the class is never defined in the source stylesheet, so the caption
   renders as visible text above the table on the reference page too. The class
   name states the intent, so define it rather than reproduce the defect: the
   caption stays available to screen readers and out of the visual design.
   ========================================================================== */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   25. Framed photos in Elementor containers
   .photo sets a 4:5 crop and expects the <img> as a direct child. With an
   Elementor Image widget between the two, the ratio had nothing to constrain
   and the portrait rendered at its own 3:4 instead. Raise the specificity past
   .e-con and pass the height through the widget wrapper.
   ========================================================================== */
.e-con.photo--portrait { aspect-ratio: 4 / 5; }
.e-con.photo--square { aspect-ratio: 1 / 1; }
.photo > .elementor-widget-image { height: 100%; width: 100%; }
.photo > .elementor-widget-image img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   26. FAQ measure
   The source caps an answer at var(--measure), 68 characters, while the
   question row runs the full width of the block. At the width these sections
   actually render, that left the answer stopping around 60% of the way across
   and reading as a broken line-break rather than a deliberate measure. Let the
   answer fill the same width as the question it belongs to.
   ========================================================================== */
.faq__a { max-width: none; }

/* ==========================================================================
   27. Application form
   Elementor Pro supplies the five-step wizard; the route acknowledgements are
   shown and hidden by the conditional-fields script, which also lifts their
   required flag while they are out of view.
   ========================================================================== */
.elementor-field-group[hidden] { display: none !important; }

/* The wizard card and the progress bar, matched to the prototype. */
.wizard .elementor-form { --e-form-steps-indicators-spacing: 24px; }
.wizard .e-form__indicators__indicator__progress { background: var(--fill); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; height: 6px; }
.wizard .e-form__indicators__indicator__progress__meter { background: var(--accent); border-radius: 999px; }
.wizard .e-form__indicators__indicator__label { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; color: var(--text); }

/* Field chrome reuses the form components in section 11. */
.wizard .elementor-field-group > label.elementor-field-label {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 6px;
  color: var(--text);
}
.wizard .elementor-field-textual {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--card);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
}
.wizard textarea.elementor-field-textual { min-height: 120px; line-height: 1.55; }
.wizard .elementor-field-textual:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 77, 0, 0.18);
  outline: none;
}

/* Radios and acceptance boxes reuse the .choice card. */
.wizard .elementor-field-subgroup .elementor-field-option,
.wizard .elementor-field-type-acceptance .elementor-field-option {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--card);
  cursor: pointer;
  margin-bottom: 10px;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}
.wizard .elementor-field-option:hover { border-color: var(--text-faint); }
.wizard .elementor-field-option input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.wizard .elementor-field-option label { font-size: 0.9375rem; line-height: 1.5; cursor: pointer; }
.wizard .elementor-field-option:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.wizard .elementor-field-option:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }

/* The wizard shell itself. */
.e-con.wizard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 44px); }

.wizard .elementor-message.elementor-message-danger { color: var(--err); }
.wizard .elementor-message.elementor-message-success { color: var(--ok); }

/* --------------------------------------------------------------------------
   28. Founder portrait
   -------------------------------------------------------------------------- */
/* The homepage founder note now carries a real photograph rather than the
   dashed placeholder. The 104px grid track (72px below 680px) is unchanged, so
   this only has to make the image fill and round that track. */
/* Elementor ships `.elementor img { border-radius: 0 }` at (0,1,1), which beats
   a bare class, so the circle has to be claimed at higher specificity. */
.founder-note img.founder-note__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  background: var(--ink-raised);
}