/* =====================================================
   CreativeMentor - Global Stylesheet (v3: brutalist editorial)
   Palette: highlighter #D6E445 + tomato #E1432B + off-black + white.
   ===================================================== */

:root {
  /* Surfaces */
  --bg: #ffffff;            /* page base — pure white, no warmth */
  --bg-alt: #f6f6f4;        /* faint cool grey for alternating sections */
  --bg-warm: #fff7d8;       /* highlighter at 12% — rare warm wash */
  --bg-peach: #fde0d6;      /* tomato at ~15% — rare warm accent wash */
  --bg-dark: #1a1a1a;       /* off-black — same as nav */
  --bg-dark-2: #0e0e0e;
  /* Type */
  --ink: #1a1a1a;
  --ink-2: #2a2a2a;
  --muted: #6e6e6c;
  --line: rgba(26,26,26,.14);
  --line-soft: rgba(26,26,26,.07);
  /* Accents */
  --accent: #e1432b;        /* TOMATO — the secondary brand colour */
  --accent-2: #d6e445;      /* HIGHLIGHTER — the primary brand colour */
  --accent-3: #1a1a1a;
  --success: #1f8a5a;
  --shadow-sm: 0 1px 2px rgba(26,26,26,.06);
  --shadow: 0 6px 18px rgba(26,26,26,.10);
  --shadow-lg: 0 24px 60px rgba(26,26,26,.18);
  /* Sharper corners — brutalist UI is mostly squared */
  --radius-sm: 3px;
  --radius: 6px;
  --radius-lg: 10px;
  --max: 1280px;
  --container-pad: 28px;
  /* Type stack — only three fonts allowed sitewide.
     Archivo Narrow 700 for poster headlines, Inter for body + wordmark, DM Mono for metadata. */
  --display: "Archivo Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--ink); color: var(--bg); }

img, svg { max-width: 100%; display: block; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: .95;
  color: var(--ink);
  margin: 0 0 .35em;
  text-transform: uppercase;
}
/* Archivo Narrow 700 — exact mockup spec: tight line-height, slightly negative tracking. */
h1 { font-size: clamp(3rem, 7.2vw, 5rem); font-weight: 700; letter-spacing: -.015em; line-height: .88; }
h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); font-weight: 700; letter-spacing: -.012em; line-height: .92; }
h3 { font-size: 1.4rem; font-weight: 700; letter-spacing: -.01em; line-height: 1; }
h4 { font-size: 1rem; font-weight: 700; letter-spacing: 0; }
/* "em" in a heading: solid colour emphasis, never outlined.
   Default = tomato. Dark sections override to yellow (highlighter pops on dark). */
h1 em, h2 em, h3 em, h4 em, .italic {
  font-style: normal;
  font-weight: inherit;
  text-transform: uppercase;
  letter-spacing: inherit;
  color: var(--accent);
}
/* Opt-in see-through outline for poster-style headlines (used in hero blocks).
   Must be applied explicitly via <span class="outline">. */
.outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
  text-stroke: 2px var(--ink);
  font-style: normal;
  font-weight: inherit;
  text-transform: uppercase;
  letter-spacing: inherit;
}
.section-dark .outline,
.section-disciplines .outline,
.cta-banner .outline { -webkit-text-stroke-color: #ffffff; }
/* Body paragraphs use Inter — readable, neutral, matches the nav wordmark font.
   DM Mono stays reserved for metadata: eyebrows, numbered prefixes, marquee, lede. */
p {
  margin: 0 0 1em;
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: .95rem;
  line-height: 1.55;
  letter-spacing: 0;
}
.muted { color: var(--muted); }
small { color: var(--muted); }

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

.section { padding: clamp(64px, 9vw, 130px) 0; }
.section-tight { padding: clamp(40px, 5vw, 72px) 0; }
.section-soft { background: var(--bg-alt); }

/* Cream section variant — same bg as section-soft but with tomato accent
   circles to break up monotony when stacked between other cream sections. */
.section-soft--accents {
  position: relative;
  overflow: hidden;
}
.section-soft--accents::before {
  content: ""; position: absolute; pointer-events: none;
  right: -180px; top: -150px;
  width: 540px; height: 540px;
  border: 1px solid rgba(225,67,43,.32);
  border-radius: 50%;
  z-index: 0;
}
.section-soft--accents::after {
  content: ""; position: absolute; pointer-events: none;
  right: -80px; top: -40px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(225,67,43,.18), transparent 70%);
  border-radius: 50%;
  z-index: 0;
}
.section-soft--accents > .container { position: relative; z-index: 1; }
.section-warm { background: var(--bg-warm); }
.section-peach { background: var(--bg-peach); }
.section-dark { background: var(--bg-dark); color: var(--bg); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--bg); }
.section-dark p { color: rgba(242,237,226,.78); }

/* =================== TOMATO SECTION =================== */
/* Full tomato-red section with a highlighter-yellow radial glow + thin
   outline circle — same atmospheric vocabulary as the dark disciplines
   section but in the warm half of the palette. */
.section-tomato {
  background: var(--accent);
  color: #ffffff;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(0,0,0,.18);
  border-bottom: 1px solid rgba(0,0,0,.18);
}
.section-tomato::before {
  content: ""; position: absolute; pointer-events: none;
  width: 720px; height: 720px;
  right: -220px; top: -220px;
  background: radial-gradient(circle, rgba(214,228,69,.45), transparent 70%);
  border-radius: 50%;
  z-index: 0;
}
.section-tomato::after {
  content: ""; position: absolute; pointer-events: none;
  width: 520px; height: 520px;
  left: -160px; bottom: -180px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  z-index: 0;
}
.section-tomato > .container { position: relative; z-index: 1; }
.section-tomato h1, .section-tomato h2, .section-tomato h3 { color: #ffffff; }
.section-tomato h2 em { color: var(--accent-2); }
.section-tomato p, .section-tomato .lede { color: rgba(255,255,255,.92); }
.section-tomato .eyebrow {
  background: transparent;
  color: var(--accent-2);
  border-color: var(--accent-2);
}
.section-tomato .btn-ghost { color: #ffffff; border-color: #ffffff; }
.section-tomato .btn-ghost:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--ink); }
/* Article cards on tomato — white cards pop against the saturated bg */
.section-tomato .article-card { background: #ffffff; border-color: var(--ink); }
.section-tomato .article-card h3 { color: var(--ink); }
.section-tomato .article-card p { color: var(--ink-2); }
.section-tomato .article-cat { color: var(--accent); }
.section-tomato .article-meta { color: var(--muted); }

/* Disciplines: dark band with atmospheric depth — tomato radial glow top-right,
   thin outline circle bottom-left. Same vocabulary as the mentor application
   section that Jordan likes. Overflow visible so the flare can bleed upward
   into the floating hero section above. */
.section-disciplines {
  background: var(--bg-dark);
  color: #ffffff;
  position: relative;
  border-top: 0;
  border-bottom: 1px solid var(--ink);
  overflow: visible;
}
.section-disciplines::before {
  content: ""; position: absolute; pointer-events: none;
  right: -200px; top: -560px;
  width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(225,67,43,.42), transparent 65%);
  border-radius: 50%;
  z-index: 0;
}
.section-disciplines::after {
  content: ""; position: absolute; pointer-events: none;
  left: -160px; bottom: -160px;
  width: 500px; height: 500px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  z-index: 0;
}
.section-disciplines > .container { position: relative; z-index: 1; }
/* Flat variant — dark bg only, no radial glow or outline circle decorations */
.section-disciplines--flat::before,
.section-disciplines--flat::after { display: none; }
/* Eyebrow on the flat journal-style dark section uses tomato instead of yellow */
.section-disciplines--flat .eyebrow {
  color: var(--accent);
  border-color: var(--accent);
}
/* Variant — flip the tomato bloom to the left, drop the outline circle entirely */
.section-disciplines--flip::before { right: auto; left: -180px; }
.section-disciplines--flip::after  { display: none; }
.section-disciplines h1, .section-disciplines h2, .section-disciplines h3 { color: var(--bg); }
.section-disciplines h2 em { color: var(--accent-2); }
.section-disciplines .lede,
.section-disciplines .section-head .lede,
.section-disciplines p { color: rgba(242,237,226,.92); }
.section-disciplines .eyebrow { background: var(--accent-2); color: var(--ink); border-color: var(--accent-2); }
.section-disciplines .eyebrow.minimal { color: rgba(242,237,226,.7); border: 0; background: transparent; padding: 0; }
.section-disciplines .btn-ghost { color: var(--bg); border-color: rgba(242,237,226,.5); }
.section-disciplines .btn-ghost:hover { background: var(--accent); color: #ffffff; border-color: var(--accent); }
/* Disciplines cards sit on the dark section bg as separate rounded cards.
   Grid itself is transparent so the dark section bg shows through the gaps. */
.section-disciplines .cat-grid { background: transparent; }
.section-disciplines .cat-tile,
.section-disciplines .cat-tile h3,
.section-disciplines .cat-tile p { color: var(--ink); }
/* Hover on dark section keeps the white card + lets the tomato hard-shadow do
   the visual work — same vocabulary as mentor cards. */
.section-disciplines .cat-tile:hover { background: var(--bg); color: var(--ink); }
.section-disciplines .cat-tile:hover h3 { color: var(--ink); }
.section-disciplines .cat-tile.session-tile.active {
  background: var(--ink); color: var(--accent-2);
}
.section-disciplines .cat-tile.session-tile.active h3 { color: var(--accent-2); }
/* On dark sections, each tri-block card is its own white rounded card with the
   dark section bg showing through the gaps — same vocabulary as the cat-tile
   grid on the homepage disciplines section. */
.section-disciplines .hiw-grid,
.section-dark .hiw-grid { background: transparent; }
.section-disciplines .hiw-step,
.section-dark .hiw-step {
  background: var(--bg);
  border: 1px solid var(--line);
}
.section-disciplines .hiw-step h3,
.section-dark .hiw-step h3 { color: var(--ink); }
.section-disciplines .hiw-step p,
.section-dark .hiw-step p { color: var(--ink); }
.section-disciplines .hiw-step .num,
.section-dark .hiw-step .num { color: var(--accent); }

/* Eyebrow — outline pill chip. Uniform pill size shared with .ps-pill, .btn, .chip. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  background: transparent;
  margin-bottom: 22px;
  padding: 11px 22px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  line-height: 1;
}
.eyebrow::before { content: ""; }
/* Outline-only variant — used on every dark-background section */
.cta-banner .eyebrow,
.section-dark .eyebrow,
.section-disciplines .eyebrow {
  background: transparent;
  color: var(--accent-2);
  border-color: var(--accent-2);
}
.eyebrow.minimal {
  background: transparent;
  border: 0;
  padding: 4px 0;
  color: var(--muted);
  border-radius: 0;
}
.eyebrow.minimal::before { content: ""; }

/* =================== BUTTONS — same pill dimensions as .eyebrow / .ps-pill =================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: .82rem;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
}
.btn:hover { transform: translateY(-1px); }
/* Every non-orange clickable pill turns tomato on hover — unified feedback */
.btn-primary { background: var(--ink); color: #ffffff; }
.btn-primary:hover { background: var(--accent); color: #ffffff; border-color: var(--accent); }
.btn-accent { background: var(--accent); color: #ffffff; }
.btn-accent:hover { background: var(--ink); color: #ffffff; border-color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--accent); color: #ffffff; border-color: var(--accent); }
.btn-outline-light { background: transparent; color: var(--bg); border-color: rgba(255,255,255,.4); }
.btn-outline-light:hover { background: var(--accent); color: #ffffff; border-color: var(--accent); }
/* .btn-lg only used on hero CTAs — slightly taller for hierarchy */
.btn-lg { padding: 15px 28px; font-size: .9rem; }
.btn-sm { padding: 11px 22px; font-size: .82rem; }
.btn-block { width: 100%; }

/* =================== NAV =================== */
/* The nav is an off-black bar — the central design move of the brand.
   It anchors every page no matter what colour block comes next.
   Full-width edge-to-edge with tight gutters so brand sits close to viewport edge. */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg-dark);
  color: #ffffff;
  border-bottom: 0;
}
.site-nav > .container {
  max-width: none;
  padding-left: 28px;
  padding-right: 28px;
}
.nav-inner {
  display: flex; align-items: flex-end; justify-content: space-between;
  height: 110px; padding-bottom: 14px; gap: 24px;
}
/* Mockup spec: Inter 700, uppercase, .06em letter-spacing, yellow asterisk */
.brand-logo {
  display: inline-flex; align-items: baseline; gap: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .06em;
  color: #ffffff;
  text-transform: uppercase;
}
.brand-logo:hover { color: var(--accent-2); }
.brand-mark { display: none; }
.brand-logo [data-brand]::after { content: "*"; color: var(--accent-2); margin-left: 1px; }
/* Nav links — Inter 600 (heavier than the mockup's 500 because we render at a larger size).
   .06em letter-spacing, all yellow, no active-state distinction. */
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a {
  font-family: var(--sans);
  font-size: .85rem; font-weight: 600;
  color: var(--accent-2);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.nav-links a:hover { color: #ffffff; }
.nav-links a.is-active { color: var(--accent-2); }
.nav-links a.is-active::before { content: ""; }
.nav-actions { display: flex; align-items: center; gap: 18px; }
.nav-actions .nav-link {
  font-family: var(--sans); font-size: .78rem; font-weight: 500;
  color: var(--accent-2); letter-spacing: .06em; text-transform: uppercase;
}
.nav-actions .nav-link:hover { color: #ffffff; }

/* =================== MARQUEE =================== */
/* Scrolling ribbon between sections. The tomato accent stripe. */
.marquee {
  background: var(--accent);
  color: #ffffff;
  padding: 11px 0;
  overflow: hidden;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.marquee-track {
  display: inline-flex; gap: 36px;
  font-family: var(--mono);
  font-size: .78rem; font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: marquee 48s linear infinite;
  padding-left: 36px;
}
.marquee-track span { display: inline-flex; align-items: center; gap: 36px; }
.marquee-track .star { color: var(--accent-2); }
/* Highlighter yellow variant — used on become-a-mentor under the tomato hero
   so the two stripes invert the homepage palette. */
.marquee--yellow { background: var(--accent-2); color: var(--ink); }
.marquee--yellow .marquee-track .star { color: var(--accent); }
/* White variant — for use under a tomato hero where the default tomato marquee
   would blend in. Tomato text with off-black asterisks for contrast. */
.marquee--white { background: #ffffff; color: var(--accent); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.marquee--white .marquee-track .star { color: var(--ink); }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* Block hero — exact mockup spec.
   Highlighter yellow band, big Archivo Narrow poster headline,
   sits flush below the off-black nav. Fixed min-height ensures all three key
   pages render at identical block height regardless of content length
   (homepage has pills, mentors/become-a-mentor don't). */
.hero-block {
  background: var(--accent-2);
  padding: clamp(48px, 6vw, 90px) 0 clamp(48px, 6vw, 90px);
  min-height: 720px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.hero-block > .container { width: 100%; }
@media (max-width: 880px) {
  .hero-block { min-height: 560px; }
}
.hero-block h1 {
  color: var(--ink);
  font: 700 clamp(3.2rem, 9.5vw, 7rem)/.86 var(--display);
  letter-spacing: -.018em;
  text-transform: uppercase;
  margin: 0;
  max-width: 17ch;
}
/* See-through outline-stroke for highlighted phrases in the hero — the mockup vocabulary */
.hero-block h1 em,
.hero-block h1 .outline {
  -webkit-text-stroke: 2px var(--ink);
  color: transparent;
  font-style: normal;
  font-weight: 700;
  letter-spacing: inherit;
}
/* Tagline under the headline — DM Mono, larger than the marquee so it earns
   its place as a real subheading. Width capped to roughly match the headline
   column so the two blocks read as a single stack. */
.hero-block .lede {
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  max-width: 44rem;
  margin: 28px 0 0;
  line-height: 1.55;
  text-align: left;
}
.hero-block .hero-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.hero-block .btn-primary { background: var(--ink); color: #ffffff; }
.hero-block .btn-primary:hover { background: var(--accent); }
.hero-block .btn-ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.hero-block .btn-ghost:hover { background: var(--accent); color: #ffffff; border-color: var(--accent); }

/* Floating variant — the yellow block sits as a card on a dark off-black bg
   instead of being full-bleed. Dark margins frame the highlighter block. */
.hero-block--floating {
  background: var(--bg-dark);
  padding: clamp(28px, 4vw, 56px) 0;
  min-height: auto;
  display: block;
  overflow: visible;
  position: relative;
}
.hero-block--floating > .container {
  background: var(--accent-2);
  border-radius: var(--radius-lg);
  padding: clamp(48px, 6vw, 90px) clamp(28px, 5vw, 60px);
  min-height: 660px;
  width: auto;
  /* Match the standard container content width (1280 minus 2 × container-pad)
     so the floating card edges line up with the section content below it. */
  max-width: calc(var(--max) - (var(--container-pad) * 2));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
@media (max-width: 880px) {
  .hero-block--floating > .container { min-height: 520px; }
}

/* White variant — for pages where the floating block houses a form / auth
   widget rather than a poster headline. White card with ink border. */
.hero-block--floating.hero-block--white > .container {
  background: #ffffff;
  border: 1px solid var(--ink);
}
.hero-block--floating.hero-block--white h1 { color: var(--ink); }
.hero-block--floating.hero-block--white .lede { color: var(--ink); }

/* Floating + tomato combo — outer section stays dark, inner card becomes
   tomato with the radial glow + outline circle moved INSIDE the card. */
.hero-block--floating.hero-block--tomato { background: var(--bg-dark); }
.hero-block--floating.hero-block--tomato::before,
.hero-block--floating.hero-block--tomato::after { display: none; }
.hero-block--floating.hero-block--tomato > .container { background: var(--accent); }
.hero-block--floating.hero-block--tomato > .container::before {
  content: ""; position: absolute; pointer-events: none;
  right: -180px; top: -180px;
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(214,228,69,.45), transparent 70%);
  border-radius: 50%;
  z-index: 0;
}
.hero-block--floating.hero-block--tomato > .container::after {
  content: ""; position: absolute; pointer-events: none;
  right: -220px; top: -220px;
  width: 640px; height: 640px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  z-index: 0;
}
.hero-block--floating.hero-block--tomato > .container > * { position: relative; z-index: 1; }

/* Tomato variant — used on become-a-mentor.html to differentiate the mentor
   journey from the mentee journey. Highlighter yellow radial glow + outline
   circle give the same atmospheric depth as the disciplines section. */
.hero-block--tomato {
  background: var(--accent);
}
.hero-block--tomato::before {
  content: ""; position: absolute; pointer-events: none;
  right: -180px; top: -180px;
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(214,228,69,.45), transparent 70%);
  border-radius: 50%;
  z-index: 0;
}
.hero-block--tomato::after {
  content: ""; position: absolute; pointer-events: none;
  right: -220px; top: -220px;
  width: 640px; height: 640px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  z-index: 0;
}
.hero-block--tomato > .container { position: relative; z-index: 1; }
.hero-block--tomato h1 { color: #ffffff; }
.hero-block--tomato h1 .outline { -webkit-text-stroke-color: #ffffff; color: transparent; }
.hero-block--tomato .lede { color: #ffffff; }
/* Tomato hero buttons — uniform pill size; primary fills highlighter yellow,
   ghost stays see-through white. Both flip white on hover. */
.hero-block--tomato .btn-primary {
  background: var(--accent-2); color: var(--ink); border-color: var(--accent-2);
}
.hero-block--tomato .btn-primary:hover {
  background: #ffffff; color: var(--accent); border-color: #ffffff;
}
.hero-block--tomato .btn-ghost {
  background: transparent; color: #ffffff; border-color: #ffffff;
}
.hero-block--tomato .btn-ghost:hover {
  background: #ffffff; color: var(--accent); border-color: #ffffff;
}
.hero-block--tomato .profile-actions .btn { padding: 11px 22px; font-size: .78rem; }

/* Page switcher — pills now live INSIDE the hero block, below the lede.
   Mono uppercase, left-aligned with the heading. */
.page-switcher { background: transparent; padding: 0; position: static; border: 0; }
.ps-inner { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start; padding: 0; }
.ps-pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 22px;
  font-family: var(--mono); font-weight: 500; font-size: .82rem;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
  transition: all .15s ease;
}
/* Active pill = ink/black filled with white text. Inactive = see-through outline.
   Any pill hovered turns tomato — consistent clickable feedback across the system. */
.ps-pill-active { background: var(--ink); color: #ffffff; border-color: var(--ink); }
.ps-pill:hover,
.ps-pill-active:hover { background: var(--accent); color: #ffffff; border-color: var(--accent); }
/* When inside the yellow hero block, give pills breathing room above */
.hero-block .page-switcher { margin-top: 26px; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px; }

@media (max-width: 880px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .site-nav.open .nav-links {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: 76px; left: 0; right: 0;
    background: var(--bg); padding: 18px 24px;
    border-bottom: 1px solid var(--line);
    gap: 16px;
  }
}

/* =================== ASK BAND (homepage AI/router prompt) =================== */
.ask-band {
  background: var(--ink);
  color: var(--bg);
  padding: clamp(48px, 7vw, 88px) 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  position: relative;
  overflow: hidden;
}
.ask-band::before {
  content: ""; position: absolute; pointer-events: none;
  width: 600px; height: 600px; right: -240px; top: -240px;
  background: radial-gradient(circle, rgba(223,255,77,.12), transparent 65%);
  border-radius: 50%;
}
.ask-band::after {
  content: ""; position: absolute; pointer-events: none;
  width: 480px; height: 480px; left: -180px; bottom: -200px;
  border: 1px solid rgba(242,237,226,.08);
  border-radius: 50%;
}
.ask-band-inner { position: relative; z-index: 1; }
.ask-band .eyebrow { color: var(--ink); }
.ask-copy { max-width: 760px; margin-bottom: 24px; }
.ask-title {
  color: var(--bg); font-family: var(--display); font-weight: 400;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.1;
  margin: 0;
}
.ask-title em { color: var(--accent-2); font-style: italic; }
.ask-form {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch;
  background: rgba(242,237,226,.05);
  border: 1px solid rgba(242,237,226,.2);
  padding: 8px;
  border-radius: 999px;
  max-width: 760px;
}
.ask-form input {
  flex: 1; min-width: 220px;
  background: transparent; border: 0; outline: 0;
  color: var(--bg); font: inherit; font-size: 1rem;
  padding: 12px 18px;
}
.ask-form input::placeholder { color: rgba(242,237,226,.5); }
.ask-form .btn-primary { background: var(--accent-2); color: var(--ink); border-color: var(--accent-2); }
.ask-form .btn-primary:hover { background: #d2f23a; color: var(--ink); }
@media (max-width: 640px) {
  .ask-form { border-radius: 14px; }
  .ask-form .btn { width: 100%; }
}
.ask-result { margin-top: 24px; opacity: 0; transition: opacity .3s ease; max-height: 0; overflow: hidden; }
.ask-result.show { opacity: 1; max-height: 2000px; }
.ask-result-head { margin-bottom: 14px; }
.ask-result-head .eyebrow { color: var(--bg); }
.ask-result-head p { color: rgba(242,237,226,.7); }
.ask-result-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 880px) { .ask-result-grid { grid-template-columns: 1fr; } }
.ask-pick {
  display: flex; gap: 14px; align-items: center;
  padding: 14px;
  background: rgba(242,237,226,.05);
  border: 1px solid rgba(242,237,226,.15);
  border-radius: var(--radius);
  transition: all .2s ease;
}
.ask-pick:hover { background: rgba(242,237,226,.1); border-color: rgba(242,237,226,.3); }
.ask-pick-photo {
  width: 56px; height: 56px; border-radius: 8px;
  background-size: cover; background-position: center;
  flex-shrink: 0;
}
.ask-pick-name {
  font-family: var(--display); font-weight: 500; font-size: 1.1rem;
  color: var(--bg); letter-spacing: -0.01em;
}
.ask-pick-role { color: rgba(242,237,226,.7); font-size: .82rem; margin-top: 2px; }
.ask-pick-cta { color: var(--accent-2); font-size: .8rem; margin-top: 4px; }

/* =================== SESSION CARDS (browse) =================== */
.session-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
@media (max-width: 980px) { .session-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .session-grid { grid-template-columns: 1fr; } }
.session-card {
  display: flex; flex-direction: column;
  padding: 24px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: all .2s ease;
  min-height: 220px;
}
.session-card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.session-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.session-tag {
  font-size: .7rem; padding: 3px 9px; border-radius: 999px;
  background: var(--bg-alt); color: var(--ink-2);
  border: 1px solid var(--line-soft);
  letter-spacing: .04em;
}
.session-tag-accent { background: var(--accent-2); color: var(--ink); border-color: var(--ink); }
.session-card h3 {
  font-family: var(--display); font-weight: 500;
  font-size: 1.4rem; margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.session-card p { font-size: .92rem; color: var(--ink-2); margin: 0 0 16px; line-height: 1.4; }
.session-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; gap: 10px;
  padding-top: 14px; border-top: 1px solid var(--line-soft);
}
.session-for { font-size: .78rem; color: var(--muted); flex: 1; }
.session-price { font-family: var(--display); font-weight: 500; font-size: 1.05rem; color: var(--ink); white-space: nowrap; }

/* =================== FAQ TABS =================== */
.faq-tabs {
  display: flex; gap: 0; padding: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}
.faq-tab {
  padding: 14px 22px;
  background: transparent; border: 0; cursor: pointer;
  font: inherit; font-weight: 400; font-size: 1rem;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--display);
}
.faq-tab.active { color: var(--ink); border-bottom-color: var(--accent); }
.faq-q {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 10px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.faq-q:hover {
  transform: translate(-4px, -4px);
  box-shadow: 8px 8px 0 var(--accent);
  border-color: var(--ink);
}
.faq-q summary {
  font-weight: 700; cursor: pointer;
  font-family: var(--display); font-size: 1.25rem;
  letter-spacing: -.005em;
  color: var(--ink);
}
.faq-q p { margin: 12px 0 0; }

/* =================== HERO =================== */
.hero {
  position: relative;
  padding: clamp(48px, 6vw, 90px) 0 clamp(48px, 6vw, 90px);
  /* Background intentionally not set — .hero-block (added on the same element) supplies the highlighter yellow */
}
.hero-grid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 { margin-bottom: 24px; }
.hero h1 .accent { color: var(--accent); }
.hero .lede {
  font-family: var(--sans);
  font-size: 1.15rem;
  max-width: 540px;
  color: var(--ink-2);
  margin-bottom: 32px;
  line-height: 1.45;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* Homepage variant: centred hero text stack (still allows side collage on wide screens) */
.hero-grid--centered .hero-copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-grid--centered .hero-copy .lede { margin-left: auto; margin-right: auto; }
.hero-grid--centered .hero-cta { justify-content: center; }

/* =================== HERO COLLAGE (cool, contained) =================== */
.hero-art {
  position: relative;
  aspect-ratio: 4/5;
  width: 100%;
  max-width: 460px;
  margin-left: auto;
  margin-right: 0;
}
@media (max-width: 980px) {
  .hero-art { margin: 32px auto 0; max-width: 380px; }
}
.hero-art .frame {
  position: absolute;
  border-radius: 6px;
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow-lg);
}
.hero-art .frame .img {
  width: 100%; height: 100%;
  background-size: cover; background-position: center;
  filter: contrast(1.05) saturate(1.05);
}
.hero-art .frame .label {
  position: absolute; left: 10px; bottom: 10px;
  background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: .72rem;
  padding: 5px 10px; border-radius: 999px;
  letter-spacing: 0;
}
.hero-art .frame-1 {
  width: 60%; height: 60%;
  top: 0; left: 0;
  transform: rotate(-3deg);
  z-index: 1;
}
.hero-art .frame-2 {
  width: 56%; height: 56%;
  top: 18%; right: 0;
  transform: rotate(2deg);
  z-index: 2;
}
.hero-art .frame-3 {
  width: 52%; height: 52%;
  bottom: 0; left: 12%;
  transform: rotate(-1deg);
  z-index: 3;
}
.hero-art .sticker {
  position: absolute;
  z-index: 4;
  background: var(--accent-2);
  color: var(--ink);
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: .95rem;
  padding: 14px 18px;
  border-radius: 999px;
  bottom: 8%;
  right: 4%;
  transform: rotate(-6deg);
  border: 1px solid var(--ink);
}

/* =================== CATEGORIES — separate rounded cards, same as hiw-step =================== */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  background: transparent;
  border: 0;
  position: relative;
  margin-top: 22px;
  counter-reset: discipline;
}
.cat-grid::before { display: none; }
@media (max-width: 980px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .cat-grid { grid-template-columns: 1fr; } }

.cat-tile {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 28px;
  min-height: 0;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--ink);
  counter-increment: discipline;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, background .15s ease, border-color .15s ease;
  box-shadow: 0 0 0 transparent;
}
/* Lift + reveal a tomato block behind it — same vocabulary as the mentor cards */
.cat-tile:hover {
  background: var(--bg);
  border-color: var(--ink);
  transform: translate(-4px, -4px);
  box-shadow: 8px 8px 0 var(--accent);
}

/* Tomato mono numbered prefix — "01 /", "02 /", etc. */
.cat-tile::before {
  content: counter(discipline, decimal-leading-zero) " /";
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 12px;
  line-height: 1;
}
.cat-tile .ico { display: none; }
.cat-tile h3 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: -.005em;
  line-height: 1.05;
  margin: 0 0 10px;
  color: var(--ink);
}
.cat-tile p {
  display: block;
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  line-height: 1.5;
  margin: 0;
  opacity: .72;
}

/* Compact variant: single line, icon + name only (used on mentors browse) */
.cat-grid--compact { margin-bottom: 28px; }
.cat-grid--compact .cat-tile {
  flex-direction: row; align-items: center; gap: 10px;
  min-height: 0; padding: 12px 16px;
  cursor: pointer;
}
.cat-grid--compact .cat-tile .ico { margin: 0; font-size: 20px; }
.cat-grid--compact .cat-tile h3 { font-size: 1rem; margin: 0; line-height: 1.1; letter-spacing: -0.01em; }
.cat-grid--compact .cat-tile p { display: none; }
.cat-grid--compact .cat-tile.active {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}
.cat-grid--compact .cat-tile.active h3 { color: var(--bg); }

/* Sessions page: active discipline tile */
.cat-tile.session-tile.active {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}
.cat-tile.session-tile.active h3 { color: var(--bg); }
.cat-tile.session-tile.active p { color: rgba(242,237,226,.7); }

/* =================== MENTOR CARDS =================== */
.mentor-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 980px) { .mentor-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .mentor-grid { grid-template-columns: 1fr; } }

.mentor-card {
  background: var(--bg);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 4px 4px 0 var(--ink);
}
.mentor-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--accent);
}
.mentor-card .photo,
.mentor-card .mentor-photo {
  aspect-ratio: 4/3; background: var(--bg-alt);
  background-size: cover; background-position: center;
  position: relative;
  border-bottom: 1px solid var(--ink);
  filter: contrast(1.05);
}
/* Real-DB overlay class names (parallel to the static .body/.name/.role) */
.mentor-card .mentor-info {
  padding: 18px 20px 20px; flex: 1;
  display: flex; flex-direction: column;
}
.mentor-card .mentor-name {
  font-family: var(--display); font-weight: 700;
  font-size: 1.5rem; line-height: .95;
  text-transform: uppercase;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin-bottom: 4px;
}
.mentor-card .mentor-role {
  font-family: var(--mono);
  color: var(--muted); font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 6px;
}
.mentor-card .mentor-meta { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.mentor-card .mentor-meta .muted { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; }
.mentor-card .photo .badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--bg); color: var(--ink);
  font-size: .72rem; font-weight: 500;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--ink);
}
.mentor-card .body { padding: 22px 20px; flex: 1; display: flex; flex-direction: column; }
/* Mentor name — Inter 800 uppercase, same vocabulary as the discipline + hiw-step titles */
.mentor-card .name {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: -.005em;
  line-height: 1.05;
  margin-bottom: 6px;
  color: var(--ink);
}
/* Mentor role — DM Mono small for the metadata feel */
.mentor-card .role {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
  line-height: 1.4;
}
.mentor-card .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.tag {
  font-size: .72rem; padding: 4px 10px; border-radius: 999px;
  background: transparent; color: var(--ink);
  border: 1px solid var(--line);
}
.mentor-card .meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-soft);
}
.mentor-card .price { font-family: var(--display); font-weight: 500; font-size: 1.15rem; color: var(--ink); }
.mentor-card .price small { color: var(--muted); font-weight: 400; font-family: var(--sans); font-size: .82rem; }
.mentor-card .rating { color: var(--ink-2); font-size: .85rem; }

.stars { color: var(--accent); letter-spacing: 1px; }

/* =================== HOW IT WORKS =================== */
/* Separate rounded cards — no shared borders, no hard-bordered block frame.
   Each card stands alone with its own subtle border, gap between them. */
.hiw-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  background: transparent;
  border: 0;
  position: relative;
  margin-top: 22px;
}
.hiw-grid::before { display: none; }
@media (max-width: 880px) { .hiw-grid { grid-template-columns: 1fr; } }
/* hiw-step cards are informational, not clickable — no hover lift. */
/* Tri-block cards — cream/light by default, with ink text. Section overrides
   handle yellow/dark/tomato contexts where needed. */
.hiw-step {
  padding: 28px 26px 30px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  position: relative;
}
/* Clickable variant — used on the mentor profile session cards. Same brutalist
   lift-and-tomato-shadow hover as mentor cards / discipline tiles. */
.hiw-step--clickable,
a.hiw-step {
  cursor: pointer;
  text-decoration: none;
  display: block;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 0 0 transparent;
}
.hiw-step--clickable:hover,
a.hiw-step:hover {
  transform: translate(-4px, -4px);
  box-shadow: 8px 8px 0 var(--accent);
}
/* Numbered mono label — sentence case "01 / Pick" matches mockup */
.hiw-step .num {
  font-family: var(--mono);
  font-style: normal;
  font-weight: 500;
  font-size: .85rem;
  color: var(--accent);
  letter-spacing: .02em;
  text-transform: none;
  margin-bottom: 12px;
  line-height: 1;
}
.hiw-step h3 {
  font-family: var(--sans);
  font-size: 1.35rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.005em;
  line-height: 1.05;
  margin-bottom: 10px;
  color: var(--ink);
}
.hiw-step p {
  font-family: var(--sans);
  font-size: .92rem;
  font-weight: 400;
  color: var(--ink-2);
  line-height: 1.55;
  letter-spacing: 0;
  margin: 0;
}

/* =================== PRICING / PLAN CARDS =================== */
.plan-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
@media (max-width: 880px) { .plan-grid { grid-template-columns: 1fr; } }
.plan {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 32px;
  display: flex; flex-direction: column;
}
.plan.popular {
  border-color: var(--ink); position: relative;
  background: var(--ink); color: var(--bg);
}
.plan.popular h3 { color: var(--bg); }
.plan.popular p { color: rgba(242,237,226,.8); }
.plan.popular .price-big { color: var(--bg); }
.plan.popular .price-big small { color: rgba(242,237,226,.7); }
.plan.popular ul li { color: rgba(242,237,226,.85); }
.plan.popular ul li::before { border-color: var(--accent-2); }
.plan.popular .btn-ghost { background: transparent; color: var(--bg); border-color: var(--bg); }
.plan.popular .btn-ghost:hover { background: var(--bg); color: var(--ink); }
.plan.popular .pop-badge {
  position: absolute; top: -12px; left: 24px;
  background: var(--accent-2); color: var(--ink);
  padding: 5px 12px; font-size: .68rem; font-weight: 500;
  border-radius: 999px; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--ink);
}
.plan h3 { font-family: var(--display); font-weight: 500; font-size: 1.5rem; margin-bottom: 4px; letter-spacing: -0.01em; }
.plan .price-big { font-family: var(--display); font-size: 3rem; font-weight: 400; line-height: 1; margin: 14px 0 4px; letter-spacing: -0.02em; }
.plan .price-big small { font-family: var(--sans); font-size: .9rem; color: var(--muted); font-weight: 400; }
.plan ul { list-style: none; padding: 0; margin: 22px 0; }
.plan li { padding: 7px 0; padding-left: 24px; position: relative; color: var(--ink-2); font-size: .94rem; }
.plan li::before {
  content: ""; position: absolute; left: 0; top: 13px;
  width: 12px; height: 7px; border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}
.plan .btn { margin-top: auto; }

/* =================== CTA BANNER =================== */
.cta-banner {
  border-radius: var(--radius);
  padding: clamp(40px, 6vw, 80px);
  background: var(--ink);
  color: var(--bg);
  position: relative;
  overflow: hidden;
}
.cta-banner h2 { color: var(--bg); }
.cta-banner h2 em { font-style: italic; color: var(--accent-2); }
.cta-banner p { color: rgba(242,237,226,.8); font-size: 1.05rem; max-width: 580px; margin: 0 0 28px; }
.cta-banner .btns { display: flex; gap: 12px; flex-wrap: wrap; }
/* Tomato radial glow in the top-right corner + faint outline circle — same
   atmospheric depth as the mentor application + disciplines sections. */
.cta-banner::before {
  content: ""; position: absolute; pointer-events: none;
  width: 360px; height: 360px;
  right: -120px; top: -120px;
  background: radial-gradient(circle, rgba(225,67,43,.32), transparent 70%);
  border-radius: 50%;
  z-index: 0;
}
.cta-banner::after {
  content: ""; position: absolute; pointer-events: none;
  width: 520px; height: 520px;
  right: -200px; top: -200px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  z-index: 0;
}
.cta-banner > * { position: relative; z-index: 1; }
/* Flat variant — same dark CTA banner but with the radial glow + outline circle suppressed */
.cta-banner--flat::before,
.cta-banner--flat::after { display: none; }

/* Yellow alternate colourway — for pages where the parent section is already
   dark and the standard dark CTA banner would disappear. Glow stays in the
   yellow-green spectrum (deep olive) so the palette doesn't fight itself. */
.cta-banner--yellow {
  background: var(--accent-2);
  color: var(--ink);
}
.cta-banner--yellow h2, .cta-banner--yellow p { color: var(--ink); }
.cta-banner--yellow h2 em { color: var(--accent); }
.cta-banner--yellow::before {
  /* Big box ensures the 100%-transparent stop happens well outside the visible
     area — so no hard circular edge inside the banner. Centre still sits at
     ~60px inside the top-right corner of the banner. */
  width: 900px; height: 900px;
  right: -390px; top: -390px;
  background: radial-gradient(circle 336px at center,
    rgba(75,95,5,.7)  0%,
    rgba(75,95,5,.55) 25%,
    rgba(75,95,5,.35) 50%,
    rgba(75,95,5,.15) 75%,
    rgba(75,95,5,.05) 88%,
    transparent       100%);
}
.cta-banner--yellow::after { border-color: rgba(26,26,26,.22); }
.cta-banner--yellow .btn-primary { background: var(--ink); color: var(--accent-2); }
.cta-banner--yellow .btn-primary:hover { background: var(--accent); color: #ffffff; }

/* Tomato red alternate colourway — pops loud against the cream sections it sits
   between. Yellow-green radial glow + white outline circle for atmospheric depth. */
.cta-banner--tomato {
  background: var(--accent);
  color: #ffffff;
}
.cta-banner--tomato h2, .cta-banner--tomato p { color: #ffffff; }
.cta-banner--tomato h2 em { color: var(--accent-2); }
.cta-banner--tomato::before {
  background: radial-gradient(circle, rgba(214,228,69,.45), transparent 70%);
}
.cta-banner--tomato::after { border-color: rgba(255,255,255,.22); }
.cta-banner--tomato .eyebrow {
  background: transparent;
  color: #ffffff;
  border-color: #ffffff;
}
.cta-banner--tomato .btn-accent { background: var(--ink); color: #ffffff; border-color: var(--ink); }
.cta-banner--tomato .btn-accent:hover { background: var(--accent-2); color: var(--ink); border-color: var(--accent-2); }
.cta-banner--tomato .btn-outline-light { color: #ffffff; border-color: #ffffff; }
.cta-banner--tomato .btn-outline-light:hover { background: #ffffff; color: var(--accent); border-color: #ffffff; }
/* When this yellow banner sits inside a section-disciplines wrapper, suppress
   that wrapper's tomato glow so it doesn't bleed past the banner edges. */
.section-disciplines:has(.cta-banner--yellow)::before,
.section-disciplines:has(.cta-banner--yellow)::after { display: none; }

/* Filter bar on dark section: drop the white wrapper, only the search input
   itself stays white. Discipline pills become see-through outlines until hover. */
.section-disciplines .filter-bar--bold {
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.section-disciplines .search-box--bold {
  background: var(--bg);
  border-color: var(--bg);
}
.section-disciplines .chip {
  background: transparent;
  border-color: rgba(255,255,255,.4);
  color: rgba(255,255,255,.85);
}
.section-disciplines .chip:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}
.section-disciplines .chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

/* =================== FOOTER (slim) =================== */
.site-foot {
  background: var(--bg-dark); color: var(--bg);
  padding: 56px 0 32px; margin-top: 0;
}
.site-foot a { color: rgba(242,237,226,.75); }
.site-foot a:hover { color: var(--bg); }
.foot-inner {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px; padding-bottom: 32px;
  border-bottom: 1px solid rgba(242,237,226,.1);
}
@media (max-width: 1100px) { .foot-inner { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 720px) { .foot-inner { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 480px) { .foot-inner { grid-template-columns: 1fr; } }
/* Footer column headers — mono uppercase, same vocabulary as the nav links */
.foot-inner h4 {
  color: #ffffff;
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 500;
  margin-bottom: 16px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.foot-inner ul { list-style: none; padding: 0; margin: 0; }
.foot-inner li { padding: 5px 0; font-size: .9rem; font-family: var(--sans); }
/* Brand tagline next to the wordmark — DM Mono uppercase like the hero lede */
.site-foot .foot-inner > div:first-child p {
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.5;
  color: rgba(255,255,255,.75);
}
.foot-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px; font-size: .82rem; color: rgba(242,237,226,.55);
}
.foot-bottom .brand-logo { color: var(--bg); }
.foot-bottom .brand-mark { background: var(--bg); color: var(--ink); }
@media (max-width: 540px) { .foot-bottom { flex-direction: column; gap: 12px; } }

/* =================== FILTER BAR (browse) =================== */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 18px; border-radius: var(--radius); background: var(--bg);
  border: 1px solid var(--line); margin-bottom: 28px;
}
.filter-bar--bold {
  flex-direction: column; align-items: stretch; gap: 16px;
  padding: 22px;
  border-radius: var(--radius-lg);
  background: var(--bg);
  border: 0;
  box-shadow: 0 18px 48px rgba(14,13,12,.08);
}
.search-box {
  flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; background: var(--bg-alt);
}
.search-box--bold {
  background: var(--bg);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 14px 22px;
  gap: 12px;
  transition: box-shadow .15s ease;
}
.search-box--bold:focus-within { box-shadow: 0 0 0 6px rgba(14,13,12,.06); }
.search-box--bold svg { color: var(--ink); }
.search-box input {
  flex: 1; border: 0; background: transparent; outline: none;
  font: inherit; padding: 4px 0; color: var(--ink);
}
.search-box--bold input { font-size: 1.05rem; }
.search-box--bold input::placeholder { color: var(--muted); }
/* Filter chips — same pill dimensions as the rest of the system */
.chip {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-weight: 500; font-size: .82rem;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: all .15s ease;
  line-height: 1;
}
.chip:hover { background: var(--accent); color: #ffffff; border-color: var(--accent); }
.chip.active { background: var(--accent); color: #ffffff; border-color: var(--accent); }

/* =================== MENTOR PROFILE =================== */
/* When the main mentor-profile section uses a dark background, flip the content
   colours so bio + headings + tabs stay legible. The plan-side (booking sticky)
   already lives on a yellow card so it pops naturally on dark. */
.section[style*="bg-dark"] .tab-panel,
.section[style*="bg-dark"] .tab-panel h3,
.section[style*="bg-dark"] .tab-panel p,
.section[style*="bg-dark"] .tab-panel li { color: rgba(255,255,255,.92); }
.section[style*="bg-dark"] .tab-panel ul.bullets li::marker { color: var(--accent-2); }
.section[style*="bg-dark"] .tabs .tab {
  border-color: rgba(255,255,255,.4);
  color: #ffffff;
}
.section[style*="bg-dark"] .tabs .tab:hover,
.section[style*="bg-dark"] .tabs .tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}
.section[style*="bg-dark"] .pf-skills span,
.section[style*="bg-dark"] .pf-skills .tag {
  background: transparent;
  border: 1px solid rgba(255,255,255,.4);
  color: #ffffff;
}

/* Large profile block — photo on left, name/role/meta/actions on right.
   Sits inside the .hero-block--floating.hero-block--tomato wrapper. */
.profile-block {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 48px;
  align-items: start;
  width: 100%;
}
@media (max-width: 880px) { .profile-block { grid-template-columns: 1fr; gap: 32px; } }
/* Frozen lift-and-shadow under the photo — the "clickable in situ" look. */
.profile-block-img {
  width: 100% !important; height: 360px !important;
  border-radius: var(--radius); object-fit: cover;
  border: 1px solid var(--ink);
  background: var(--accent-2) !important;
  flex-shrink: 0;
  box-shadow: 10px 10px 0 var(--ink);
  position: relative;
  z-index: 1;
}
@media (max-width: 880px) {
  .profile-block-img { height: 280px !important; max-width: 360px; box-shadow: 6px 6px 0 var(--ink); }
}
.profile-block-body { display: flex; flex-direction: column; align-items: flex-start; }
.profile-block-body h1 {
  font-size: clamp(3.2rem, 6.5vw, 5.4rem);
  margin: 0; color: #ffffff;
  line-height: .9;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.profile-block-body .meta-row {
  display: flex; gap: 20px; flex-wrap: wrap;
  font-family: var(--mono); font-size: .76rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: #ffffff;
}
.profile-block-body .meta-row span { color: #ffffff; }
.profile-block-bio {
  font-family: var(--sans);
  font-size: 1.05rem;
  line-height: 1.6;
  color: #ffffff;
  margin: 0;
  max-width: 70ch;
}
/* Bio + highlights + topics + skills section beneath the profile head row,
   contained inside the same floating block. No divider line — let the spacing
   do the separating instead. */
.profile-detail {
  width: 100%;
  margin-top: 56px;
  padding-top: 0;
  border-top: 0;
}
.profile-detail-main {
  max-width: 760px;
  color: #ffffff;
}
.profile-detail-main p {
  color: #ffffff;
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.65;
}
.profile-detail-h3 {
  font-family: var(--sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.005em;
  font-size: 1.05rem;
  margin: 36px 0 14px;
  color: var(--accent-2);
}
.profile-detail .bullets {
  padding-left: 18px;
  margin: 0;
  color: #ffffff;
  font-family: var(--sans);
  line-height: 1.65;
  font-size: 1rem;
}
.profile-detail .bullets li { padding: 4px 0; }
.profile-detail .bullets li::marker { color: var(--accent-2); }
.profile-detail .pf-skills .tag {
  background: transparent;
  border: 1px solid rgba(255,255,255,.5);
  color: #ffffff;
}

/* Dark band at the top of the page — short header strip that the tomato block
   crosses into from below. Tall enough to give the tomato's top half a dark
   backdrop while the bottom half sits on the white main section. */
.profile-dark-band {
  background: var(--bg-dark);
  padding: clamp(16px, 2vw, 24px) 0;
  min-height: clamp(440px, 42vw, 560px);
  position: relative;
  z-index: 1;
}

/* White main section — naturally placed below the dark band. The tomato block
   inside extends UP via negative margin-top to overlap the dark band's bottom. */
.profile-main-section {
  position: relative;
  background: #ffffff;
  padding-top: 0;
  overflow: visible;
}

/* Tomato block — crosses the dark/white boundary. Top half sits on dark band,
   bottom half on white main section. Z-index above dark band so it stays visible.
   Decorative yellow-green radial flare + thin white outline circle in the
   top-right corner — same atmospheric vocabulary as the disciplines section. */
.profile-tomato-block {
  background: var(--accent);
  border-radius: var(--radius-lg);
  padding: clamp(48px, 6vw, 90px) clamp(28px, 5vw, 60px);
  margin-top: clamp(-500px, -44vw, -360px);
  margin-bottom: clamp(48px, 6vw, 80px);
  position: relative;
  z-index: 3;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.profile-tomato-block::before {
  content: "";
  position: absolute;
  right: -180px; top: -180px;
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(214,228,69,.45), transparent 70%);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
.profile-tomato-block::after {
  content: "";
  position: absolute;
  right: -220px; top: -220px;
  width: 640px; height: 640px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
.profile-tomato-block > * { position: relative; z-index: 1; }
/* Eyebrow + ghost button on tomato bg — white outline */
.profile-tomato-block .eyebrow {
  background: transparent;
  color: #ffffff;
  border-color: #ffffff;
}
.profile-tomato-block .btn-ghost {
  background: transparent;
  color: #ffffff;
  border-color: #ffffff;
}
.profile-tomato-block .btn-ghost:hover {
  background: #ffffff;
  color: var(--accent);
  border-color: #ffffff;
}
.profile-grid-main {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 48px;
  align-items: start;
  position: relative;
  /* Inset the grid from the right so the booking card sits inboard of the
     tomato block's right edge — creates a layered staircase look. */
  padding-right: clamp(0px, 4vw, 56px);
}
@media (max-width: 980px) { .profile-grid-main { grid-template-columns: 1fr; } }
.profile-main { padding-top: 0; padding-left: 10%; color: var(--ink); margin-top: clamp(-40px, -3vw, -20px); }
.profile-main .eyebrow { background: transparent; border-color: var(--accent); color: var(--accent); }
.profile-bio-text {
  font-family: var(--sans);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
  max-width: 64ch;
}
.profile-main .profile-detail-h3 {
  font-family: var(--sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.005em;
  font-size: 1.05rem;
  margin: 32px 0 12px;
  color: var(--ink);
}
.profile-main .bullets {
  padding-left: 18px; margin: 0;
  color: var(--ink); font-family: var(--sans); line-height: 1.6;
}
.profile-main .bullets li { padding: 4px 0; }
.profile-main .bullets li::marker { color: var(--accent); }
.profile-main p {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
}
.profile-main .pf-skills .tag {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
}

/* =================================================================
   HOW MENTORING WORKS — tomato overhang block (become-a-mentor page)
   Same dark-band + overhanging tomato pattern as the mentor profile.
   Block contains: heading + lede, then a 2-col grid with the three
   01/02/03 steps on the left and a stripped-down "this is your
   profile" preview card on the right.
   ================================================================= */
.howmentor-dark-band {
  background: var(--bg-dark);
  padding: clamp(16px, 2vw, 24px) 0;
  min-height: clamp(360px, 36vw, 480px);
  position: relative;
  z-index: 1;
}
.howmentor-main-section {
  position: relative;
  background: #ffffff;
  padding-top: 0;
  padding-bottom: clamp(48px, 6vw, 80px);
  overflow: visible;
}
.howmentor-tomato-block {
  background: var(--accent);
  border-radius: var(--radius-lg);
  padding: clamp(48px, 6vw, 84px) clamp(28px, 5vw, 56px);
  margin-top: clamp(-420px, -36vw, -300px);
  margin-bottom: 0;
  position: relative;
  z-index: 3;
  overflow: hidden;
}
.howmentor-tomato-block::before {
  content: "";
  position: absolute;
  right: -180px; top: -180px;
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(214,228,69,.45), transparent 70%);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
.howmentor-tomato-block::after {
  content: "";
  position: absolute;
  right: -220px; top: -220px;
  width: 640px; height: 640px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
.howmentor-tomato-block > * { position: relative; z-index: 1; }
.howmentor-tomato-block .eyebrow {
  background: transparent;
  color: #ffffff;
  border-color: #ffffff;
}

/* Copy block — full-width hero-style headline + mono lede */
.howmentor-copy { margin-bottom: clamp(40px, 5vw, 64px); }
.howmentor-copy h2 {
  color: #ffffff;
  font: 700 clamp(3rem, 8vw, 7rem)/.92 var(--display);
  letter-spacing: -.018em;
  text-transform: uppercase;
  margin: 18px 0 0;
}
.howmentor-copy h2 .outline {
  -webkit-text-stroke: 2px #ffffff;
  text-stroke: 2px #ffffff;
  color: transparent;
  font-style: normal;
  font-weight: 700;
}
.howmentor-lede {
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: rgba(255,255,255,.86);
  margin-top: 28px;
  max-width: 760px;
  line-height: 1.55;
}

/* Emotional intro lede — sits between the big headline and the step strip.
   Sans-serif (not mono) so it reads as a sentence/voice instead of a label.
   Introduces the mentees so mentors can picture who they'll be helping. */
.howmentor-intro {
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255,255,255,.92);
  margin: clamp(28px, 4vw, 40px) 0 0;
  max-width: 62ch;
}

/* Process strip — vertical stack of white step cards with hard ink shadow.
   Sits between the headline and the mockup. Tells the operational journey
   (offer → availability → booking → session → payout). */
.howmentor-process {
  list-style: none;
  padding: 0;
  margin: clamp(64px, 7vw, 96px) 0 0 clamp(32px, 5vw, 80px);
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.howmentor-step-card {
  background: #ffffff;
  border: 1px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  box-shadow: 10px 10px 0 var(--ink);
  color: var(--ink);
  text-decoration: none;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: start;
  transition: transform .18s ease, box-shadow .18s ease;
}
/* Cards 01-05 are informational only — no hover lift, no click. Only the
   CTA card (06) has interactive treatment. */

/* Card 06 — CTA card. Yellow-green bg signals "this is the action".
   Same shape as the other step cards so it stays in the visual sequence,
   but with a big arrow on the right that slides on hover. */
.howmentor-step-card--cta {
  background: var(--accent-2);
  grid-template-columns: 56px 1fr auto;
}
.howmentor-step-card--cta:hover {
  transform: translate(-4px, -4px);
  box-shadow: 14px 14px 0 var(--ink);
}
.howmentor-step-card--cta .howmentor-step-num { color: var(--ink); }
.howmentor-step-card--cta .howmentor-step-label,
.howmentor-step-card--cta .howmentor-step-desc { color: var(--ink); }
.howmentor-step-arrow {
  font-family: var(--display);
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  align-self: center;
  padding-right: 8px;
  transition: transform .18s ease;
}
.howmentor-step-card--cta:hover .howmentor-step-arrow {
  transform: translateX(6px);
}
.howmentor-step-num {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--accent);
  padding-top: 4px;
}
.howmentor-step-body { min-width: 0; }
.howmentor-step-label {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.005em;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.05;
}
.howmentor-step-desc {
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}
@media (max-width: 540px) {
  .howmentor-step-card { grid-template-columns: 1fr; gap: 4px; padding: 20px 22px; }
}

/* =================================================================
   FAQ — narrow white section (become-a-mentor page)
   Sits between the howmentor tomato section and the apply form on a
   continuous white background. Width matches the original /mentor-faq
   page (~920px) so the heading and Q&As feel like a focused column,
   not a full-bleed block.
   ================================================================= */
.faq-floating-section {
  background: #ffffff;
  padding: clamp(16px, 2vw, 28px) 0 clamp(48px, 6vw, 88px);
  position: relative;
}
.faq-floating-block {
  max-width: 690px;
  margin: 0 auto;
  color: var(--ink);
}
/* Heading group inherits global h1-h4 (Archivo Narrow display) + p (Inter sans)
   + .eyebrow (DM Mono pill). Only context-specific overrides go here. */
.faq-floating-head { margin-bottom: clamp(24px, 3vw, 36px); }
.faq-floating-head .eyebrow { margin-bottom: 16px; }
.faq-floating-head h2 { text-transform: uppercase; margin: 0; max-width: 720px; }
.faq-floating-head .lede { margin-top: 16px; }
.faq-floating-head .lede a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.faq-floating-head .lede a:hover { color: var(--ink); }
.faq-floating-list { display: flex; flex-direction: column; gap: 10px; }

/* Footer row + promise strip removed — card 06 (CTA) now carries the action
   inside the process sequence, so no separate footer is needed. */
.howmentor-cta .btn-primary {
  background: var(--accent-2);
  color: var(--ink);
  border-color: var(--accent-2);
}
.howmentor-cta .btn-primary:hover {
  background: #ffffff;
  color: var(--accent);
  border-color: #ffffff;
}

/* Mentor-page mockup — faithful miniature of mentor.html: mini tomato block
   with photo+name, white bio area beneath, booking card overhanging the
   tomato/white boundary on the right. Lives below the headline, scaled up. */
.howmentor-mockup { position: relative; max-width: 880px; }
.howmentor-mockup-tag {
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(255,255,255,.9);
  margin-top: 28px;
  margin-left: 32px;
}
.howmentor-mockup-frame {
  background: #ffffff;
  border: 1px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 12px 12px 0 var(--ink);
  overflow: hidden;
  color: var(--ink);
}
.hm-page { position: relative; }

/* Mini tomato block — the mentor profile header in miniature */
.hm-tomato {
  background: var(--accent);
  padding: 28px 28px 36px;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 22px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.hm-tomato::before {
  content: ""; position: absolute; pointer-events: none;
  right: -80px; top: -80px;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(214,228,69,.45), transparent 70%);
  border-radius: 50%;
}
.hm-tomato::after {
  content: ""; position: absolute; pointer-events: none;
  right: -100px; top: -100px;
  width: 310px; height: 310px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
}
.hm-tomato > * { position: relative; z-index: 1; }
.hm-photo {
  width: 120px; height: 120px;
  background: linear-gradient(135deg, var(--accent-2) 0%, #c9d65a 100%);
  border: 1px solid var(--ink);
  border-radius: 10px;
  box-shadow: 6px 6px 0 var(--ink);
}
.hm-tomato-body { min-width: 0; padding-right: 200px; }
.hm-role {
  display: inline-block;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 4px 12px;
  border: 1px solid #ffffff;
  color: #ffffff;
  border-radius: 999px;
  margin-bottom: 10px;
}
.hm-name {
  font-family: var(--sans);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.85rem;
  letter-spacing: -.01em;
  margin: 0 0 6px;
  line-height: 1;
  color: #ffffff;
}
.hm-meta {
  font-family: var(--mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.82);
}

/* White bio area beneath the mini tomato */
.hm-body {
  padding: 30px 220px 30px 28px;
  background: #ffffff;
}
.hm-eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 4px 12px;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 999px;
  margin-bottom: 14px;
}
.hm-body p {
  font-family: var(--sans);
  font-size: .92rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 14px;
}
.hm-skills {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.hm-skills span {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 500;
  padding: 4px 11px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  background: #ffffff;
}

/* Booking card — absolutely positioned to overhang the tomato/white boundary,
   mirroring the real mentor.html booking-card overhang. */
.hm-booking {
  position: absolute;
  right: 24px; top: 80px;
  width: 184px;
  background: #ffffff;
  border: 1px solid var(--ink);
  border-radius: 10px;
  padding: 16px 16px 18px;
  box-shadow: 6px 6px 0 var(--ink);
  z-index: 2;
}
.hm-booking-title {
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 10px;
}
.hm-session {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0;
  border-bottom: 1px dashed var(--line);
  font-family: var(--sans);
  font-size: .68rem;
  color: var(--ink);
  gap: 8px;
}
.hm-session span { line-height: 1.25; }
.hm-session:last-of-type { border-bottom: 0; }
.hm-session strong {
  font-weight: 800;
  font-size: .76rem;
  white-space: nowrap;
}
.hm-book-btn {
  background: var(--accent);
  color: #ffffff;
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 7px 12px;
  text-align: center;
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 600;
  margin-top: 10px;
}

@media (max-width: 640px) {
  .hm-tomato { grid-template-columns: 80px 1fr; padding: 20px 20px 24px; gap: 14px; }
  .hm-photo { width: 80px; height: 80px; }
  .hm-tomato-body { padding-right: 0; }
  .hm-name { font-size: 1.3rem; }
  .hm-body { padding: 22px 20px; }
  .hm-booking { position: static; width: auto; margin: -16px 20px 18px; }
}

/* Booking card — pulls UP via negative margin-top so it overlaps the bottom of
   the tomato block above (creates the "layered card over the hero" look from
   the Mentor Cruise reference). Sticky positioning locks it at viewport-middle
   as you scroll past, then unsticks when its parent's bottom is reached. */
.profile-booking {
  margin-top: clamp(-220px, -18vw, -160px);
  position: sticky;
  top: 25vh;
  z-index: 5;
}
@media (max-width: 980px) {
  .profile-booking { margin-top: -40px; position: static; }
}
.booking-card {
  background: #ffffff;
  border: 1px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  box-shadow: 10px 10px 0 var(--ink);
}
.booking-sessions {
  display: flex; flex-direction: column; gap: 8px;
  margin: 0;
}
.booking-session {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .12s ease;
}
.booking-session:hover { border-color: var(--ink); }
.booking-session input[type="radio"] { accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; }
.booking-session:has(input:checked) {
  border-color: var(--accent);
  background: rgba(225,67,43,.05);
}
.booking-session-body { flex: 1; }
.booking-session-name {
  font-family: var(--sans);
  font-weight: 700;
  font-size: .92rem;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: -.005em;
  line-height: 1.15;
}
.booking-session-meta {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Profile head inside the floating hero block — image + name + role + actions */
.profile-grid {
  display: grid; grid-template-columns: 1fr 360px; gap: 48px; align-items: start;
}
@media (max-width: 980px) { .profile-grid { grid-template-columns: 1fr; } }
.profile-head { display: flex; gap: 28px; align-items: center; margin-bottom: 0; flex-wrap: wrap; }
.profile-head img,
.profile-head [data-pf-img] {
  width: 200px !important; height: 200px !important;
  border-radius: var(--radius); object-fit: cover;
  border: 1px solid var(--ink);
  background: var(--bg-alt);
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .profile-head [data-pf-img] { width: 140px !important; height: 140px !important; }
}
.profile-head h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  margin: 0 0 6px;
  color: var(--ink);
  line-height: .92;
}
.profile-head .role,
.hero-block--floating .eyebrow[data-pf-role] {
  font-family: var(--mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 8px;
}
.profile-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.profile-head .meta-row {
  display: flex; gap: 20px; flex-wrap: wrap;
  font-family: var(--mono); font-size: .76rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink);
}
.profile-head .meta-row span { display: inline-flex; align-items: center; gap: 6px; }
.profile-head .stars { color: var(--accent); letter-spacing: 1px; }

/* Profile-page tabs — brutalist pill style matching .chip and .ps-pill. */
.tabs {
  display: flex; gap: 8px; border: 0;
  margin: 24px 0 28px;
  flex-wrap: wrap;
}
.tab {
  display: inline-flex; align-items: center;
  padding: 9px 18px; cursor: pointer;
  font-family: var(--mono); font-weight: 500; font-size: .76rem;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1;
  color: var(--ink); background: transparent;
  border: 1px solid var(--ink); border-radius: 999px;
  transition: all .15s ease;
}
.tab:hover { background: var(--accent); color: #ffffff; border-color: var(--accent); }
.tab.active { background: var(--accent); color: #ffffff; border-color: var(--accent); }

.tab-panel { display: none; }
.tab-panel.active { display: block; }
.tab-panel h3 {
  font-family: var(--sans); font-weight: 800;
  text-transform: uppercase; letter-spacing: -.005em;
  font-size: 1.2rem; margin-top: 32px; margin-bottom: 10px;
}
.tab-panel ul.bullets { padding-left: 18px; color: var(--ink-2); }
.tab-panel ul.bullets li { padding: 5px 0; }

.service-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px; border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 12px; background: var(--bg);
  gap: 16px;
}
.service-row .meta { font-size: .85rem; color: var(--muted); margin-top: 2px; }
.service-row .price-tag { font-family: var(--display); font-size: 1.3rem; white-space: nowrap; }

/* sticky plan card - brutalist hard-shadow on highlighter yellow */
.plan-side {
  position: sticky; top: 96px;
  background: var(--accent-2);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: 6px 6px 0 var(--ink);
  position: -webkit-sticky;
  position: sticky;
  overflow: hidden;
}
/* No decoration — let the highlighter yellow do the work */
.plan-side::before { display: none; }
.plan-side::after { display: none; }
.plan-side select, .plan-side .btn { width: 100%; }
.plan-side select {
  padding: 12px 14px; border-radius: 8px; border: 1px solid var(--line);
  font: inherit; margin-bottom: 14px; background: var(--bg);
  width: 100%;
}

/* plan / sessions tab toggle - punchier */
.ps-toggle {
  display: grid; grid-template-columns: 1fr 1fr;
  background: rgba(14,13,12,.06);
  border-radius: 999px;
  padding: 4px;
  margin: 6px 0 22px;
}
.ps-toggle-btn {
  background: transparent; border: 0; cursor: pointer;
  padding: 10px 14px; border-radius: 999px;
  font: inherit; font-size: .88rem; font-weight: 500;
  color: var(--ink-2);
  letter-spacing: -0.005em;
  transition: all .15s ease;
}
.ps-toggle-btn:hover { color: var(--ink); }
.ps-toggle-btn.active {
  background: var(--accent); color: #fff;
  box-shadow: 0 4px 14px rgba(255,58,31,.3);
}
.ps-toggle-btn.active[data-pf-tab="sessions"] {
  background: var(--accent-2); color: var(--ink);
  box-shadow: 0 4px 14px rgba(223,255,77,.45);
}
.pf-tab-panel { animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* sessions list inside the sticky card */
.pf-sessions { display: flex; flex-direction: column; gap: 6px; }
.pf-session {
  text-align: left; cursor: pointer;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  font: inherit; color: var(--ink);
  transition: all .15s ease;
}
.pf-session:hover { border-color: var(--ink); }
.pf-session.active { border-color: var(--ink); background: var(--bg-alt); }
.pf-session-name { font-weight: 500; font-size: .92rem; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-session-meta { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.pf-session-live {
  display: inline-block;
  background: var(--accent-2);
  color: var(--ink);
  font-size: .65rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
}

/* Skills + similar mentors sections on profile */
.pf-skills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pf-skills .tag { font-size: .85rem; padding: 6px 13px; }
.pf-similar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 18px; }
@media (max-width: 980px) { .pf-similar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pf-similar { grid-template-columns: 1fr; } }

/* =================================================================
   COMMUNITY GUIDELINES — numbered rows on the community-guidelines page
   ================================================================= */
.guideline {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 24px;
  align-items: start;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}
.guideline:last-of-type { border-bottom: 1px solid var(--line); }
.guideline-num {
  font-family: var(--mono);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--accent);
  padding-top: 6px;
}
.guideline-body h3 {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 12px;
}
.guideline-body p {
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  max-width: 62ch;
}
@media (max-width: 640px) {
  .guideline { grid-template-columns: 1fr; gap: 12px; }
  .guideline-num { padding-top: 0; }
}

/* Modal (message mentor) */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(14,13,12,.55);
  display: none; align-items: center; justify-content: center;
  z-index: 100; padding: 20px;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--bg); border-radius: var(--radius-lg);
  padding: 28px; width: 100%; max-width: 520px;
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
  position: relative;
}
.modal h3 { font-family: var(--display); font-weight: 500; font-size: 1.5rem; margin-bottom: 6px; }
.modal .modal-close {
  position: absolute; top: 14px; right: 14px;
  background: transparent; border: 0; font-size: 1.2rem; cursor: pointer;
  color: var(--muted); padding: 6px 10px; border-radius: 999px;
}
.modal .modal-close:hover { background: var(--bg-alt); color: var(--ink); }
.modal textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 8px; font: inherit; min-height: 130px; resize: vertical;
  background: var(--bg);
}
.modal textarea:focus { outline: 0; border-color: var(--ink); }

/* =================== FORMS =================== */
.form {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px);
  box-shadow: 0 18px 40px rgba(14,13,12,.06), 0 1px 2px rgba(14,13,12,.04);
  position: relative;
}
.form::before {
  /* subtle lime accent rule across the top, like the .plan-side */
  content: ""; position: absolute;
  top: 0; left: clamp(28px, 4vw, 44px); right: clamp(28px, 4vw, 44px);
  height: 3px; background: var(--accent-2);
  border-radius: 0 0 4px 4px;
}
.form-row { margin-bottom: 18px; }
.form-row label { display: block; font-size: .85rem; font-weight: 500; margin-bottom: 6px; color: var(--ink); letter-spacing: .04em; text-transform: uppercase; }
.form-row input, .form-row textarea, .form-row select {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-row input:hover, .form-row textarea:hover, .form-row select:hover {
  border-color: rgba(14,13,12,.32);
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
  outline: 0; border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(14,13,12,.06);
}
.form-row textarea { resize: vertical; min-height: 130px; }
.form-row.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 540px) { .form-row.row-2 { grid-template-columns: 1fr; } }
.form .btn { margin-top: 8px; }
.form-help { font-size: .82rem; color: var(--muted); margin-top: 6px; }

/* Modern variant: lift the form on dark sections, full-width feel */
.form.form-modern {
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 40px);
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  border: 0;
}
.form.form-modern::before { left: clamp(28px, 4vw, 40px); right: clamp(28px, 4vw, 40px); }
.form.form-modern .form-row textarea { min-height: 150px; }
.form.form-modern button[type="submit"] { width: 100%; padding: 16px; font-size: 1.05rem; }

/* =================== UTIL =================== */
.section-head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 24px; margin-bottom: 44px; flex-wrap: wrap;
}
.section-head .lede { color: var(--ink-2); max-width: 560px; margin: 8px 0 0; font-size: 1.05rem; }
.flex-col { display: flex; flex-direction: column; }
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-2 { margin-top: 16px; } .mt-4 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 16px; } .mb-4 { margin-bottom: 32px; }

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

.avatar-svg { width: 100%; height: 100%; display: block; }

/* details / accordion (used in footer FAQ) */
details { transition: background .15s ease; }
details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }

/* =================== ARTICLES / JOURNAL =================== */
.article-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1100px) { .article-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .article-grid { grid-template-columns: 1fr; } }
.article-card {
  display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--ink);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .15s ease;
  box-shadow: 0 0 0 transparent;
}
/* Same clickable lift + tomato hard-shadow as mentor cards + discipline tiles */
.article-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 8px 8px 0 var(--accent);
  border-color: var(--ink);
}
.article-cover {
  aspect-ratio: 4/3; background: var(--bg-alt);
  background-size: cover; background-position: center;
  filter: contrast(1.05);
}
.article-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.article-cat {
  display: inline-block;
  font-family: var(--sans); font-size: .68rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.article-card h3 {
  font-family: var(--display); font-weight: 500;
  font-size: 1.25rem; line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
}
.article-card p { font-size: .9rem; color: var(--ink-2); margin: 0 0 14px; }
.article-meta { font-size: .78rem; color: var(--muted); margin-top: auto; }

/* article detail page */
.article-page { padding: 0 0 80px; }
.article-hero {
  width: 100%; aspect-ratio: 16/6;
  background-size: cover; background-position: center;
  filter: contrast(1.05);
}
.article-container { max-width: 760px; padding-top: 48px; }
.article-container h1 {
  font-size: clamp(2rem, 4vw, 3.4rem);
  margin: 12px 0 18px;
}
.article-meta-line { color: var(--muted); font-size: .9rem; margin-bottom: 32px; }
.article-body-prose p {
  font-size: 1.08rem; line-height: 1.7;
  color: var(--ink-2);
  margin: 0 0 1.2em;
}
.article-body-prose strong { color: var(--ink); }
.article-foot { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }

/* =================== SITEMAP =================== */
.sitemap-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 32px 48px;
}
@media (max-width: 880px) { .sitemap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .sitemap-grid { grid-template-columns: 1fr; } }
.sitemap-grid h3 {
  font-family: var(--sans); font-size: .82rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}
.sitemap-grid ul { list-style: none; padding: 0; margin: 0; }
.sitemap-grid li { padding: 7px 0; font-size: .98rem; }