/* ============================================================
   GAUDI CAREER — v7 (Editorial Restraint)
   - 3 colors only: Navy / Cream / Terracotta
   - 2 fonts: Bricolage Grotesque (display) + Inter/Noto Sans JP (body)
   - 5 size tiers (no middle): mega / display / title / body / caption
   - Each section structured INDIVIDUALLY (no shared template)
   - Decoration: one Dots SVG, nothing else
   ============================================================ */

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

:root {
  /* ===== v9 Colors ===== Major Players soft pop pastel */
  --navy: #18264E;
  --navy-soft: #1F3055;

  /* Base — v12: revert to Dusty Blush */
  --blush: #EFDCD4;          /* Page background (Major Players match) */
  --blush-deep: #E0CCC3;     /* Slightly darker for dots */
  --cream: #EFDCD4;          /* Alias for backward compat */
  --off-white: #E8D5CD;      /* Section alt background — slightly deeper blush */
  --cream-warm: #F8EFE5;     /* Text on color cards */

  /* Pop palette */
  --pop-pink: #F2A6C4;
  --pop-pink-deep: #E08FAE;
  --lavender: #8488F3;
  --lavender-deep: #6C70E0;
  --sage: #88A689;
  --sage-deep: #6F8E70;

  /* Pales (for backgrounds) */
  --pink-pale: rgba(242,166,196,0.18);
  --lavender-pale: rgba(132,136,243,0.16);
  --sage-pale: rgba(136,166,137,0.20);

  /* Legacy compat — map old terracotta/sand to new pop colors */
  --terracotta: #F2A6C4;
  --terracotta-dark: #E08FAE;
  --terracotta-pale: rgba(242,166,196,0.16);
  --sand: #F2A6C4;
  --sand-pale: rgba(242,166,196,0.20);

  /* Helpers (greyscale only) */
  --text: #18264E;            /* Navy */
  --text-soft: #4A5278;
  --text-muted: #8A8FA8;
  --line: #E5E1D8;

  /* Type system */
  --font-display: 'Bricolage Grotesque', 'Noto Sans JP', sans-serif;
  --font-body: 'Inter', 'Noto Sans JP', -apple-system, sans-serif;
  --font-jp: 'Noto Sans JP', -apple-system, sans-serif;

  --ease: cubic-bezier(0.2, 0, 0, 1);
}

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--blush);
  line-height: 1.7;
  font-size: 16px;
  letter-spacing: 0;
  overflow-x: hidden;
}

/* ============================================================
   v9 Components — ticket pill / connector / dot icon
   ============================================================ */

/* Ticket-stub pill — both sides notched with bg-colored circles */
.ticket {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: var(--cream-warm);
  color: var(--navy);
  position: relative;
  white-space: nowrap;
  --notch-bg: var(--blush);
}
.ticket::before, .ticket::after {
  content: '';
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--notch-bg);
}
.ticket::before { left: -6px; }
.ticket::after { right: -6px; }
.ticket--pink { background: var(--pop-pink); color: var(--navy); }
.ticket--lavender { background: var(--lavender); color: var(--cream-warm); }
.ticket--sage { background: var(--sage); color: var(--cream-warm); }
.ticket--cream { background: var(--cream-warm); color: var(--navy); }
.ticket--navy { background: var(--navy); color: var(--cream-warm); }

/* Connector line between two elements */
.connector {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}
.connector-line {
  display: inline-block;
  width: 60px;
  height: 2px;
  background: var(--navy);
  opacity: 0.5;
}
.connector-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--blush);
  border: 2px solid var(--navy);
}

/* Dot icon (SVG of circles) — pulsing animation */
.dot-icon {
  display: inline-block;
  vertical-align: middle;
}
.dot-icon svg { display: block; overflow: visible; }
.dot-icon svg g circle,
.dot-icon svg > circle {
  animation: dotPulseV10 2s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
/* Per-circle staggered delays to create flow */
.dot-icon svg g circle:nth-child(1)  { animation-delay: 0.00s; }
.dot-icon svg g circle:nth-child(2)  { animation-delay: 0.08s; }
.dot-icon svg g circle:nth-child(3)  { animation-delay: 0.16s; }
.dot-icon svg g circle:nth-child(4)  { animation-delay: 0.24s; }
.dot-icon svg g circle:nth-child(5)  { animation-delay: 0.32s; }
.dot-icon svg g circle:nth-child(6)  { animation-delay: 0.40s; }
.dot-icon svg g circle:nth-child(7)  { animation-delay: 0.48s; }
.dot-icon svg g circle:nth-child(8)  { animation-delay: 0.56s; }
.dot-icon svg g circle:nth-child(9)  { animation-delay: 0.64s; }
.dot-icon svg g circle:nth-child(10) { animation-delay: 0.72s; }
.dot-icon svg g circle:nth-child(11) { animation-delay: 0.80s; }
.dot-icon svg g circle:nth-child(12) { animation-delay: 0.88s; }
.dot-icon svg g circle:nth-child(13) { animation-delay: 0.96s; }
.dot-icon svg g circle:nth-child(14) { animation-delay: 1.04s; }
.dot-icon svg g circle:nth-child(15) { animation-delay: 1.12s; }
.dot-icon svg g circle:nth-child(16) { animation-delay: 1.20s; }
@keyframes dotPulseV10 {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.25; transform: scale(0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .dot-icon svg g circle, .dot-icon svg > circle { animation: none; }
}

/* Large dot pattern background helper */
.dot-bg {
  background-image: radial-gradient(circle, var(--blush-deep) 22%, transparent 22%);
  background-size: 64px 64px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; }

/* ============================================================
   TYPE SCALE — 5 tiers only
   ============================================================ */

/* T0 — Mega Display (Hero only) */
.t-mega {
  font-family: var(--font-display);
  font-size: clamp(56px, 10vw, 168px);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.045em;
  color: var(--navy);
}

/* T1 — Display (section headlines) */
.t-display {
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 88px);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.04em;
  color: var(--navy);
}

/* T2 — Title (card / step / member name) */
.t-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--navy);
}

/* T3 — Body */
.t-body {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.85;
  color: var(--text-soft);
}

/* T4 — Caption / Eyebrow */
.t-caption {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--terracotta);
}

/* ============================================================
   Eyebrow utility — used at the top of every section
   ============================================================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 20px;
}
.eyebrow::before {
  content: '';
  width: 32px;
  height: 1.5px;
  background: var(--terracotta);
}

/* ============================================================
   Inline links — text + arrow (no buttons)
   ============================================================ */
.link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
  border-bottom: 2px solid var(--terracotta);
  padding-bottom: 6px;
  transition: gap 0.3s var(--ease), color 0.25s var(--ease);
}
.link::after { content: '→'; transition: transform 0.3s var(--ease); }
.link:hover { color: var(--terracotta); gap: 14px; }
.link:hover::after { transform: translateX(3px); }

.link--quiet {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border: none;
  padding: 0;
}
.link--quiet:hover { color: var(--terracotta); }
.link--quiet::after { content: ' →'; }

/* ============================================================
   Layout helpers
   ============================================================ */
.wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 48px;
}
.wrap--narrow {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 48px;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}
.site-header.is-scrolled {
  background: rgba(239, 220, 212, 0.92); /* blush 92% */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 18px -10px rgba(24, 38, 78, 0.16);
}
/* Menu open state: keep header transparent so the overlay blur takes over */
.site-header.is-menu-open {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
.header-inner {
  max-width: 1440px; margin: 0 auto; padding: 0 40px;
  height: 80px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.header-inner > .header-left {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 14px;
}
/* v18.13: header-cta is again a direct child (TOP moved to menu) — pin to start
   so it doesn't stretch across the grid column */
.header-inner > .header-cta { justify-self: start; }
.header-inner > .logo { justify-self: center; }
.header-inner > .menu-btn { justify-self: end; }

/* v18.9: "TOP" header link (text only, sits before 相談する) */
.header-link {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--navy);
  text-decoration: none;
  padding: 6px 4px;
  opacity: 0.65;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.header-link:hover { opacity: 1; color: var(--lavender); }
.site-header.is-scrolled .header-link { color: var(--navy); }
.logo img { height: 22px; display: block; }

/* "相談する" header CTA — pill, pop-pink */
.header-cta {
  background: var(--pop-pink);
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 10px 22px;
  border-radius: 100px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.header-cta:hover {
  background: var(--lavender);
  color: var(--cream-warm);
  transform: translateY(-1px);
}
@media (max-width: 640px) {
  .header-inner { padding: 0 16px; gap: 8px; }
  .header-cta { padding: 8px 13px; font-size: 11px; letter-spacing: 0.04em; }
  .header-inner > .logo img { height: 18px; }
  /* v18.21: on mobile drop the "メニュー" label entirely — show the
     hamburger icon only, as a compact square ticket. Keeps the header
     uncluttered on narrow screens. (aria-label on the button preserves
     the accessible name.) */
  .menu-btn { padding: 11px 14px; gap: 0; }
  .menu-btn-label { display: none; }
  .menu-btn-bars span { width: 18px; }
}

/* v18.19: nowrap utility — protect specific words from breaking mid-token */
.nb { white-space: nowrap; }
.header-nav { display: none; }  /* hidden — replaced by Menu button */
.header-nav > a {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 500;
  color: var(--text-soft);
  transition: color 0.2s var(--ease);
}
.header-nav > a:hover { color: var(--navy); }
.header-nav-careers { color: var(--text-muted) !important; font-size: 12px !important; }
.header-nav-contact {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: 13px !important; font-weight: 500 !important;
  color: var(--navy) !important;
  border-bottom: 2px solid var(--terracotta);
  padding-bottom: 4px !important;
  margin-left: 4px;
}
.header-nav-contact:hover { color: var(--terracotta) !important; }

/* ============================================================
   Menu button (single button, ticket-style)
   ============================================================ */
.menu-btn {
  background: var(--pop-pink);
  color: var(--navy);
  border: none;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 14px 28px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: 6px;
  position: relative;
  white-space: nowrap;   /* v18.19: prevent "メニュー" from stacking vertically when grid column is tight */
  transition: background 0.2s ease, transform 0.2s ease;
}
.menu-btn::before, .menu-btn::after {
  /* ticket notches — color follows the page's FV background, set via
     --notch-bg on <body data-fv-bg="..."> (see below). Falls back to blush. */
  content: '';
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--notch-bg, var(--blush));
  transform: translateY(-50%);
  transition: background 0.3s ease;
}
.menu-btn::before { left: -6px; }
.menu-btn::after { right: -6px; }
.menu-btn:hover { background: var(--lavender); color: var(--cream-warm); transform: translateY(-1px); }
/* Once the header turns blush (scrolled past the FV), force notch to blush
   regardless of the page's FV color */
.site-header.is-scrolled .menu-btn::before,
.site-header.is-scrolled .menu-btn::after {
  background: var(--blush);
}
/* Per-page FV background — sets the notch color while at top of page */
body[data-fv-bg="navy"]   { --notch-bg: var(--navy); }
body[data-fv-bg="blush"]  { --notch-bg: var(--blush); }
body[data-fv-bg="cream"]  { --notch-bg: var(--cream-warm); }
.menu-btn-bars {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
}
.menu-btn-bars span {
  display: block;
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.is-menu-open .menu-btn-bars span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.is-menu-open .menu-btn-bars span:nth-child(2) {
  opacity: 0;
}
.is-menu-open .menu-btn-bars span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* ============================================================
   Full-screen Menu Overlay
   ============================================================ */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;  /* below header so close button is reachable */
  background: rgba(24, 38, 78, 0.32);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.menu-overlay-inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(640px, 88vw);
  background: var(--cream-warm);
  border-radius: 28px;
  padding: 64px 56px 48px;
  box-shadow: 0 32px 80px -20px rgba(24, 38, 78, 0.35);
  max-height: 88vh;
  overflow-y: auto;
}
.menu-overlay-eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--pop-pink);
  margin: 0 0 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.menu-overlay-eyebrow::before {
  content: '';
  width: 28px;
  height: 1.5px;
  background: var(--pop-pink);
}
.menu-overlay-list {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: flex;
  flex-direction: column;
}
.menu-overlay-list li {
  border-bottom: 1px solid rgba(24, 38, 78, 0.08);
}
.menu-overlay-list li:last-child { border-bottom: none; }
.menu-overlay-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--navy);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease, padding-left 0.25s ease;
}
.menu-overlay-list a:hover {
  color: var(--lavender);
  padding-left: 12px;
}
.menu-overlay-list a .menu-overlay-arrow {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  opacity: 0.5;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.menu-overlay-list a:hover .menu-overlay-arrow {
  transform: translateX(6px);
  opacity: 1;
}
.menu-overlay-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  padding-top: 20px;
  border-top: 1px solid rgba(24, 38, 78, 0.08);
}
.menu-overlay-secondary a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.menu-overlay-secondary a:hover {
  color: var(--lavender);
  border-bottom-color: currentColor;
}
.menu-overlay-secondary span { opacity: 0.4; }

.menu-overlay-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--navy);
  color: var(--cream-warm);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 26px;
  border-radius: 999px;
  margin-bottom: 28px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.menu-overlay-cta:hover { background: var(--lavender); transform: translateY(-1px); }

/* Body scroll lock when menu is open */
body.menu-open { overflow: hidden; }

@media (max-width: 700px) {
  .menu-overlay-inner {
    width: 92vw;
    padding: 48px 32px 36px;
    border-radius: 22px;
  }
}

/* dropdowns */
.nav-dropdown { position: relative; }
.nav-trigger {
  background: none; border: none;
  font-family: var(--font-body);
  font-size: 13px; font-weight: 500;
  color: var(--text-soft);
  cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color 0.2s var(--ease);
}
.nav-trigger:hover, .nav-dropdown.is-open .nav-trigger { color: var(--navy); }
.nav-caret { font-size: 9px; transition: transform 0.25s var(--ease); }
.nav-dropdown:hover .nav-caret, .nav-dropdown.is-open .nav-caret { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 18px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 12px 0;
  box-shadow: 0 12px 32px rgba(24,38,78,0.08);
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s var(--ease);
  z-index: 200;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
  display: block; padding: 11px 22px;
  font-size: 13px; color: var(--text-soft);
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.nav-dropdown-menu a:hover { color: var(--navy); background: var(--cream); }

.menu-toggle {
  display: none; background: none; border: none; cursor: pointer;
  width: 28px; height: 20px; position: relative;
}
.menu-toggle span {
  display: block; width: 100%; height: 2px;
  background: var(--navy); position: absolute; left: 0;
  transition: 0.3s var(--ease); border-radius: 2px;
}
.menu-toggle span:nth-child(1) { top: 0; }
.menu-toggle span:nth-child(2) { top: 9px; }
.menu-toggle span:nth-child(3) { top: 18px; }
.menu-toggle.is-open span:nth-child(1) { transform: rotate(45deg); top: 9px; }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open span:nth-child(3) { transform: rotate(-45deg); top: 9px; }

/* ============================================================
   ① HERO — typography only, full presence
   ============================================================ */
.hero {
  position: relative;
  /* v16: header overlays FV, minimal top padding (= header height clearance only) */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 88px 56px 64px;
  background: var(--blush);
  /* v16-r2: patterns start exactly at top-left edge (no offset gap) */
  background-image:
    linear-gradient(90deg, transparent 49.7%, rgba(24,38,78,0.10) 49.7%, rgba(24,38,78,0.10) 50.3%, transparent 50.3%),
    linear-gradient(0deg, transparent 49.7%, rgba(24,38,78,0.10) 49.7%, rgba(24,38,78,0.10) 50.3%, transparent 50.3%),
    radial-gradient(circle, rgba(24,38,78,0.12) 18%, transparent 18%);
  background-size: 200px 200px, 200px 200px, 16px 16px;
  background-position: -100px 0, 0 -100px, -8px -8px;
  overflow: hidden;
}
.hero-inner {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.hero-brand {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 24px;
  position: relative;
  padding-left: 44px;
}
.hero-brand::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 32px; height: 1.5px;
  background: var(--terracotta);
  transform: translateY(-50%);
}
.hero-message {
  font-family: var(--font-display);
  font-size: clamp(56px, 11vw, 184px);
  font-weight: 500;
  line-height: 0.95; /* v15-r: equal spacing across 3 lines */
  letter-spacing: -0.05em;
  color: var(--navy);
  margin-bottom: 48px;
  max-width: 1300px;
}
/* v14: rotator is now a standalone first line (no inline wrap needed) */
.hero-rotator-wrap { display: contents; }
/* v15-r: 3-line structure with uniform line height */
.hero-line {
  display: block;
  line-height: inherit;
  height: 0.95em;          /* match parent line-height */
  position: relative;
  overflow: visible;
}
.hero-line--rotator { /* the 1st line that hosts the rotator */
  position: relative;
}
.hero-rotator {
  display: block;
  position: relative;
  min-width: 6em;
  height: 0.95em;
  line-height: 0.95;
  text-align: left;
  white-space: nowrap;
}
.hero-rotator-item {
  position: absolute; left: 0; top: 0;
  white-space: nowrap;
  opacity: 0;
  color: var(--lavender);
  font-weight: 500;
  line-height: 0.95;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}
.hero-rotator-item.is-visible { opacity: 1; }
/* Multi-color cycle (skip pink as first visible) */
.hero-rotator-item.rot--lavender { color: var(--lavender); }
.hero-rotator-item.rot--sage     { color: var(--sage-deep); }
.hero-rotator-item.rot--pink     { color: var(--pop-pink-deep); }
.hero-rotator-item.rot--navy     { color: var(--navy); }

.hero-sub {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--text-soft);
  line-height: 1.85;
  max-width: 540px;
  margin-bottom: 48px;
  font-weight: 400;
}

.hero-meta {
  display: flex;
  gap: 40px;
  align-items: center;
  flex-wrap: wrap;
}

/* Hero corner dot icons (v9 — small SVG dot illustrations) */
.hero-corner-icon {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
.hero-corner-icon--tr { top: 100px; right: 64px; }
.hero-corner-icon--br { bottom: 80px; right: 80px; }
.hero-corner-icon--bl { bottom: 64px; left: 56px; }
.hero-corner-icon svg { width: 56px; height: 56px; }

/* Hide legacy v8 Hero art */
.hero-dots, .hero-art, .hero-blob, .hero-art-stripe, .hero-art-blob, .hero-art-line { display: none !important; }

/* ============================================================
   Hero News strip — horizontal scroll inside FV
   ============================================================ */
.hero-news {
  margin-top: 48px;
  position: relative;
}
.hero-news-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-right: 8px;
}
.hero-news-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.hero-news-label::before {
  content: '';
  width: 28px;
  height: 1.5px;
  background: var(--navy);
}
.hero-news-hint {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
  opacity: 0.7;
}
.hero-news-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 80px), transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 80px), transparent 100%);
  scrollbar-width: thin;
}
.hero-news-track::-webkit-scrollbar { height: 6px; }
.hero-news-track::-webkit-scrollbar-track { background: transparent; }
.hero-news-track::-webkit-scrollbar-thumb { background: rgba(24,38,78,0.15); border-radius: 3px; }
.hero-news-track::-webkit-scrollbar-thumb:hover { background: rgba(24,38,78,0.35); }
.hero-news-item {
  flex: 0 0 auto;
  width: 340px;
  scroll-snap-align: start;
  background: var(--cream-warm);
  border-radius: 18px;
  padding: 22px 24px 22px;
  text-decoration: none;
  color: var(--navy);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  border: 1px solid rgba(24,38,78,0.05);
}
.hero-news-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px -18px rgba(24,38,78,0.28);
}
.hero-news-cat {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 4px;
}
.hero-news-cat--pink { background: var(--pop-pink); color: var(--navy); }
.hero-news-cat--lavender { background: var(--lavender); color: var(--cream-warm); }
.hero-news-cat--sage { background: var(--sage); color: var(--cream-warm); }
.hero-news-cat--cream { background: var(--blush); color: var(--navy); border: 1px solid rgba(24,38,78,0.16); }
.hero-news-date {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-soft);
}
.hero-news-title {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.5;
  color: var(--navy);
  margin: 0;
  flex: 1;
}
.hero-news-arrow {
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
  opacity: 0.55;
  transition: opacity 0.2s, transform 0.2s;
}
.hero-news-item:hover .hero-news-arrow { opacity: 1; transform: translate(2px, -2px); }

@media (max-width: 900px) {
  .hero-news-item { width: 280px; }
}

/* ============================================================
   Intro statement — used inside Who we are (Numbers) section
   ============================================================ */
.intro-statement {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin: 0 0 32px;
  max-width: 900px;
}
.intro-statement em {
  font-style: normal;
  color: var(--lavender);
}

/* Inline CTA on the Who we are section — quiet text link with arrow */
.who-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: -16px 0 40px;
  padding: 4px 0 6px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 2px solid var(--pop-pink);
  width: max-content;
  transition: color 0.2s var(--ease, ease),
              border-color 0.2s var(--ease, ease);
}
.who-cta-arrow {
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  transition: transform 0.25s var(--ease, ease);
}
.who-cta:hover {
  color: var(--lavender-deep, var(--lavender));
  border-bottom-color: var(--lavender);
}
.who-cta:hover .who-cta-arrow { transform: translateX(6px); }

/* ============================================================
   Park (Gaudi Career Park) — refined editorial card layout
   ============================================================ */
.park {
  background: var(--blush);
  padding: 56px 0 72px;
  position: relative;
}
.park-head {
  margin-bottom: 32px;
  max-width: 800px;
}
.park-headline {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.4vw, 60px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--navy);
  margin: 6px 0 12px;
}
.park-headline em {
  font-style: normal;
  color: var(--lavender);
}
.park-lead {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-soft);
  margin: 0;
  max-width: 640px;
}
/* v18: Major Players-style cards with animated dot art ----------- */
.mp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.mp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 36px 28px 28px;
  min-height: 420px;
  text-decoration: none;
  background: var(--lavender);
  color: var(--cream-warm);
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.3s var(--ease, ease);
}
/* Ticket notches on top center (reference: Major Players cards) */
.mp-card::before, .mp-card::after {
  content: '';
  position: absolute;
  top: -12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blush);
  z-index: 3;
}
.mp-card::before { left: 28%; }
.mp-card::after { left: 68%; }
.mp-card:hover { transform: translateY(-4px); }

.mp-icon-circle {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: 0.7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  z-index: 2;
  transition: transform 0.35s var(--ease, ease), background 0.35s var(--ease, ease), color 0.35s var(--ease, ease), opacity 0.35s var(--ease, ease);
}
.mp-card:hover .mp-icon-circle {
  background: currentColor;
  transform: rotate(45deg);
  opacity: 1;
}
.mp-card--lavender:hover .mp-icon-circle { color: var(--lavender); }
.mp-card--pink:hover .mp-icon-circle    { color: var(--pop-pink); }
.mp-card--navy:hover .mp-icon-circle    { color: var(--navy); }
.mp-card--sage:hover .mp-icon-circle    { color: var(--sage); }
.mp-card--cream:hover .mp-icon-circle   { color: var(--cream-warm); }
.mp-card--blush:hover .mp-icon-circle   { color: var(--blush); }

.mp-tag {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 8px;
  z-index: 2;
}
.mp-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.7vw, 34px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: inherit;
  margin: 0 0 14px;
  z-index: 2;
  /* v18.29: don't break mid-word (ガウディキャリ／ア). Break only at the
     intended <br>; "ガウディキャリア" stays whole. */
  word-break: keep-all;
}
.mp-desc {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.75;
  opacity: 0.85;
  margin: 0 0 24px;
  z-index: 2;
}
/* Dot-art panel — slab inside each card */
.mp-dot-panel {
  margin-top: auto;
  background: var(--blush);
  border-radius: 10px;
  padding: 18px;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  z-index: 2;
}
.mp-dot-art { width: 100%; max-width: 200px; height: auto; }

/* ---- map card photo panels (v18.17) ---- */
.mp-photo-panel {
  margin-top: auto;
  border-radius: 10px;
  min-height: 150px;
  position: relative;
  overflow: hidden;
  z-index: 2;
}
.mp-photo-panel .mp-photo {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  display: block;
}
.mp-photo-panel--logo {
  background: var(--cream-warm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mp-photo-panel--logo .mp-photo {
  position: static;
  width: auto;
  height: auto;
  max-width: 62%;
  max-height: 56px;
  object-fit: contain;
}
/* show more of the top of the image */
.mp-photo--top { object-position: center 22%; }
/* zoom in closer on the subject */
.mp-photo--zoom { transform: scale(1.28); transform-origin: center; }
.mp-dot-art circle {
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: center;
  animation: dotPulse 1.8s ease-in-out infinite;
}
/* Two motion modes — pulse (size + opacity) and wander (small drift) */
@keyframes dotPulse {
  0%, 100% { opacity: 0.3;  transform: scale(0.7); }
  50%      { opacity: 1;    transform: scale(1.4); }
}
@keyframes dotWander {
  0%, 100% { opacity: 0.55; transform: translate(0, 0)     scale(0.95); }
  25%      { opacity: 1;    transform: translate(1.2px, -1.2px) scale(1.25); }
  50%      { opacity: 0.65; transform: translate(0, 0.6px) scale(1);    }
  75%      { opacity: 1;    transform: translate(-1.2px, 0.8px) scale(1.15); }
}
@keyframes dotShimmer {
  0%, 100% { opacity: 0.4;  transform: scale(0.9); }
  20%      { opacity: 1;    transform: scale(1.5); }
  40%      { opacity: 0.5;  transform: scale(1);   }
  60%      { opacity: 1;    transform: scale(1.3); }
  80%      { opacity: 0.6;  transform: scale(0.85);}
}
/* Phase-shift delays using prime-cycle so groups never sync */
.mp-dot-art circle:nth-child(7n+1) { animation-delay: 0s;    }
.mp-dot-art circle:nth-child(7n+2) { animation-delay: 0.12s; }
.mp-dot-art circle:nth-child(7n+3) { animation-delay: 0.24s; }
.mp-dot-art circle:nth-child(7n+4) { animation-delay: 0.36s; }
.mp-dot-art circle:nth-child(7n+5) { animation-delay: 0.48s; }
.mp-dot-art circle:nth-child(7n+6) { animation-delay: 0.60s; }
.mp-dot-art circle:nth-child(7n)   { animation-delay: 0.72s; }
/* Mix in faster / slower durations on different sets */
.mp-dot-art circle:nth-child(11n)  { animation-duration: 2.6s; }
.mp-dot-art circle:nth-child(13n)  { animation-duration: 1.3s; }
.mp-dot-art circle:nth-child(17n)  { animation-delay: 0.9s; }
.mp-dot-art circle:nth-child(19n)  { animation-delay: 1.3s; }
/* Different motion: every 3rd dot wanders, every 5th shimmers */
.mp-dot-art circle:nth-child(3n) {
  animation-name: dotWander;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
}
.mp-dot-art circle:nth-child(5n) {
  animation-name: dotShimmer;
  animation-duration: 2.4s;
}
@media (prefers-reduced-motion: reduce) {
  .mp-dot-art circle { animation: none; opacity: 0.85; transform: scale(1); }
}

/* Color variants — background + on-card text + dot-panel ink */
.mp-card--lavender { background: var(--lavender); color: var(--cream-warm); }
.mp-card--lavender .mp-dot-panel { color: var(--lavender); }

.mp-card--pink     { background: var(--pop-pink); color: var(--navy); }
.mp-card--pink .mp-dot-panel { background: var(--cream-warm); color: var(--pop-pink); }

.mp-card--navy     { background: var(--navy); color: var(--cream-warm); }
.mp-card--navy .mp-dot-panel { color: var(--navy); }

.mp-card--sage     { background: var(--sage); color: var(--cream-warm); }
.mp-card--sage .mp-dot-panel { color: var(--sage); }

.mp-card--cream    { background: var(--cream-warm); color: var(--navy); }
.mp-card--cream .mp-dot-panel { background: #ede2d2; color: var(--navy); }

.mp-card--blush    { background: var(--blush); color: var(--navy); }
.mp-card--blush .mp-dot-panel { background: var(--cream-warm); color: var(--lavender); }

/* Small secondary meta line under the grid (operating company etc.) */
.park-secondary {
  margin-top: 32px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}
.park-secondary a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}
.park-secondary a:hover { color: var(--lavender); border-bottom-color: currentColor; }
.park-secondary span { opacity: 0.4; }

@media (max-width: 900px) {
  .mp-grid { grid-template-columns: 1fr 1fr; }
  .mp-card { min-height: 380px; padding: 30px 22px 22px; }
  .mp-title { font-size: 28px; }
}
@media (max-width: 640px) {
  .mp-grid { grid-template-columns: 1fr; }
  .mp-card { min-height: 360px; }
}

/* ============================================================
   Section bridge — vertical line connecting two boxes
   (used between prof-display and trust-mp)
   ============================================================ */
.section-bridge {
  background: var(--blush);
  height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 24px;
}
.section-bridge-line {
  width: 1.5px;
  background: var(--navy);
  flex: 1;
}
.section-bridge-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--blush);
  border: 1.5px solid var(--navy);
}

/* ============================================================
   Trust (CLIENTS) — v18.2: centered ticket + lavender box
   ============================================================ */
.trust {
  background: var(--blush);
  padding: 0 0 48px;
  overflow: hidden;
}
.trust-wrap {
  /* Normal block flow; centered elements use margin: auto */
}
.trust-mp-eyebrow {
  position: relative;
  display: block;
  background: var(--navy);
  color: var(--cream-warm);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  padding: 12px 28px;
  border-radius: 30px;
  margin: 0 auto 32px;
  width: max-content;
  z-index: 3;
}
.trust-mp-head {
  max-width: 760px;
  margin: 0 auto 36px;
  width: 100%;
}
.trust-mp-head--centered {
  text-align: center;
}
.trust-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.6vw, 44px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--navy);
  margin: 0 0 14px;
}
.trust-title em {
  font-style: normal;
  color: var(--lavender);
}
.trust-sub {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-soft);
  margin: 0;
  max-width: 720px;
}
/* The lavender showcase box (Trusted-by ticket header was removed in v18.1) */
.trust-mp {
  position: relative;
  background: var(--lavender);
  border-radius: 24px;
  padding: 56px 0 80px;
  overflow: hidden;
}
.trust-mp-marquee {
  display: flex;
  flex-direction: column;
  gap: 18px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.trust-mp-row {
  display: flex;
  gap: 22px;
  width: max-content;
  animation: trustSlide 56s linear infinite;
}
.trust-mp-row--rtl {
  animation-direction: reverse;
  animation-duration: 64s;
  padding-left: 120px;
}
@keyframes trustSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.trust-mp-marquee:hover .trust-mp-row { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .trust-mp-row { animation: none; }
  .trust-mp-marquee { overflow-x: auto; }
}
/* The white pill that holds an original-color logo */
.trust-mp-pill {
  flex-shrink: 0;
  background: #ffffff;
  height: 88px;
  min-width: 200px;
  padding: 0 36px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.trust-mp-pill img {
  max-height: 48px;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.trust-mp-pill--placeholder {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--navy);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.trust-mp-cta {
  position: absolute;
  bottom: 20px;
  right: 24px;
  background: var(--cream-warm);
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 26px;
  border-radius: 30px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  z-index: 3;
  box-shadow: 0 0 0 6px rgba(248,239,229,0.25);
  transition: transform 0.25s var(--ease, ease), background 0.25s var(--ease, ease), color 0.25s var(--ease, ease);
}
.trust-mp-cta::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--navy);
  background-image: radial-gradient(var(--navy) 1.5px, transparent 1.5px);
  background-size: 5px 5px;
}
.trust-mp-cta:hover {
  background: var(--pop-pink);
  transform: translateY(-2px);
}

@media (max-width: 900px) {
  .trust-mp { padding: 70px 0 90px; border-radius: 18px; }
  .trust-mp-pill { height: 72px; min-width: 160px; padding: 0 24px; }
  .trust-mp-pill img { max-height: 38px; max-width: 120px; }
  .trust-mp-cta {
    position: static;
    margin: 32px auto 0;
    display: inline-flex;
    bottom: auto; right: auto;
  }
  .trust-mp { text-align: center; }
}
@media (max-width: 540px) {
  .trust-mp-pill { height: 64px; min-width: 140px; padding: 0 20px; }
}

/* ============================================================
   Manifesto Hero (About page) — large statement-only FV
   ============================================================ */
.manifesto-hero {
  background: var(--navy);
  color: var(--cream-warm);
  padding: 96px 0 96px;
  position: relative;
  overflow: hidden;
}
.manifesto-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(248,239,229,0.06) 14%, transparent 14%);
  background-size: 18px 18px;
  background-position: -9px -9px;
  pointer-events: none;
}
.manifesto-hero-marker {
  position: absolute;
  top: 60px;
  left: 48px;
  font-family: var(--font-display);
  font-size: clamp(120px, 16vw, 240px);
  font-weight: 500;
  line-height: 0.7;
  color: var(--pop-pink);
  opacity: 0.55;
  pointer-events: none;
}
.manifesto-hero .wrap { position: relative; z-index: 2; }
.manifesto-hero-eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pop-pink);
  margin: 0 0 32px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.manifesto-hero-eyebrow::before {
  content: '';
  width: 32px;
  height: 1.5px;
  background: var(--pop-pink);
}
.manifesto-hero-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6.4vw, 96px);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.05;
  color: var(--cream-warm);
  margin: 0 0 32px;
  max-width: 1100px;
}
.manifesto-hero-title em {
  font-style: normal;
  color: var(--pop-pink);
}
.manifesto-hero-sign {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: rgba(248,239,229,0.7);
  margin: 0;
}

@media (max-width: 900px) {
  .manifesto-hero { padding: 80px 0 64px; }
  .manifesto-hero-marker { top: 40px; left: 20px; }
}

/* ============================================================
   Hero Hub (legacy — kept for completeness, no longer used on TOP)
   ============================================================ */
.hero-welcome {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--navy);
  line-height: 1.45;
  margin: 32px 0 4px;
  max-width: 720px;
}
.hero-welcome em {
  font-style: normal;
  color: var(--lavender);
}
.hero-welcome small {
  display: block;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-soft);
  margin-top: 6px;
  line-height: 1.75;
}

.hero-hub {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
  max-width: 1100px;
}
.hero-hub-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  padding: 22px 24px 24px;
  border-radius: 18px;
  background: var(--cream-warm);
  color: var(--navy);
  text-decoration: none;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  overflow: hidden;
  min-height: 168px;
}
.hero-hub-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px -18px rgba(24, 38, 78, 0.28);
}
.hero-hub-card--primary { background: var(--navy); color: var(--cream-warm); }
.hero-hub-card--lavender { background: var(--lavender); color: var(--cream-warm); }
.hero-hub-card--sage { background: var(--sage); color: var(--cream-warm); }
.hero-hub-card--pink { background: var(--pop-pink); color: var(--navy); }
.hero-hub-card--cream { background: var(--cream-warm); color: var(--navy); }
.hero-hub-card--outline {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
}
.hero-hub-card-label {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.78;
}
.hero-hub-card-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.2;
  color: inherit;
  margin: 0;
}
.hero-hub-card-sub {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.65;
  margin: 0;
  opacity: 0.78;
  flex: 1;
}
.hero-hub-card-arrow {
  position: absolute;
  top: 20px;
  right: 24px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  transition: transform 0.22s ease;
}
.hero-hub-card:hover .hero-hub-card-arrow { transform: translate(3px, -3px); }

.hero-secondary-meta {
  margin-top: 24px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}
.hero-secondary-meta a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}
.hero-secondary-meta a:hover { color: var(--lavender); border-bottom-color: currentColor; }
.hero-secondary-meta span { opacity: 0.4; }

@media (max-width: 900px) {
  .hero-hub { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .hero-hub { grid-template-columns: 1fr; }
  .hero-welcome { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-rotator-item { transition: none; }
}

/* ============================================================
   ② NUMBERS — 1 hero stat + 3 minor (NOT a grid)
   ============================================================ */
.numbers {
  padding: 200px 0;
  background: var(--cream);
  border-top: 1px solid var(--line);
}
.numbers-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 96px;
  align-items: end;
}
.num-hero-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(120px, 18vw, 280px);
  font-weight: 500;
  line-height: 0.88;
  letter-spacing: -0.06em;
  color: var(--navy);
  margin-bottom: 24px;
}
.num-hero-stat strong em {
  font-style: normal;
  color: var(--terracotta);
  font-size: 0.5em;
  vertical-align: super;
  margin-left: 8px;
  font-weight: 500;
}
.num-hero-stat-label {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  max-width: 460px;
}
.num-hero-stat-sub {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.7;
  max-width: 460px;
}

.num-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.num-list-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: baseline;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.num-list-item:last-child { border-bottom: none; }
.num-list-value {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--navy);
  min-width: 120px;
}
.num-list-value em {
  font-style: normal;
  color: var(--terracotta);
  font-size: 0.5em;
  margin-left: 4px;
  vertical-align: super;
}
.num-list-label {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.6;
  padding-top: 8px;
}
.num-list-label strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--navy);
  font-size: 15px;
  margin-bottom: 4px;
}

/* ============================================================
   ③ CLIENTS v15-r — Split card: tinted head + WHITE marquee
   ============================================================ */
.clients {
  padding: 24px 0 !important;
  background: var(--blush);
  overflow: hidden;
  border-top: none;
}
.clients-card {
  max-width: none;         /* v15-final-r2: wrapped in .wrap to match Professions effective width */
  margin: 0;
  background: var(--cream-warm);
  border-radius: 24px;
  padding: 0;
  overflow: hidden;
  color: var(--navy);
  box-shadow: 0 18px 48px -28px rgba(24, 38, 78, 0.18);
}
.clients-card-head {
  position: relative;
  padding: 32px 48px 28px;
}
.clients-card-pill {
  display: inline-block;
  margin-bottom: 18px;
  background: var(--pop-pink);
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 8px 18px;
  --notch-bg: var(--cream-warm);
}
.clients-card-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: var(--navy);
  margin: 0 0 12px;
}
.clients-card-title em {
  font-style: normal;
  color: var(--lavender);
  letter-spacing: -0.04em;
}
.clients-card-sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.85;
  max-width: 680px;
  margin: 0;
}

/* White marquee area — the WHITE strip the user requested */
.clients-marquee-wrap {
  background: #ffffff;
  padding: 28px 0;
  border-top: 1px solid rgba(24, 38, 78, 0.06);
  position: relative;
}
.clients-marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.clients-track {
  display: flex;
  gap: 80px;
  animation: clientsScroll 50s linear infinite;
  width: max-content;
  align-items: center;
}
.clients-marquee:hover .clients-track { animation-play-state: paused; }
@keyframes clientsScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.client-logo {
  flex-shrink: 0;
  height: 64px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 8px;
}
.client-logo img {
  max-height: 56px;
  max-width: 180px;
  filter: none;          /* original logo colors on white */
  opacity: 0.95;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.client-logo:hover img { opacity: 1; transform: scale(1.04); }
.client-logo--placeholder {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 500;
  color: var(--navy);
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0.6;
}
@media (prefers-reduced-motion: reduce) { .clients-track { animation: none; } }
@media (max-width: 720px) {
  .clients-card-head { padding: 36px 28px 28px; }
  .clients-marquee-wrap { padding: 28px 0; }
  .clients-track { gap: 56px; }
  .client-logo { height: 48px; }
  .client-logo img { max-height: 44px; max-width: 140px; }
}

/* ============================================================
   ④ HOW IT WORKS — vertical narrative, NOT a grid
   ============================================================ */
.how {
  padding: 200px 0;
  background: var(--cream);
}
.how-headline {
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 88px);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.04em;
  color: var(--navy);
  margin-bottom: 24px;
  max-width: 800px;
}
.how-lead {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--text-soft);
  line-height: 1.85;
  max-width: 560px;
  margin-bottom: 96px;
}
.how-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line);
}
.how-row {
  display: grid;
  grid-template-columns: 100px 1fr 1fr;
  gap: 64px;
  align-items: start;
  padding: 48px 0;
  border-bottom: 1px solid var(--line);
}
.how-row-num {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--terracotta);
  padding-top: 8px;
}
.how-row-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--navy);
}
.how-row-body {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-soft);
  line-height: 1.95;
}

/* ============================================================
   ⑤ RESOURCES — editorial list (Major Players Insights style)
   ============================================================ */
.resources {
  padding: 200px 0;
  background: var(--off-white);
}
.resources-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: end;
  margin-bottom: 80px;
}
.resources-headline {
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 88px);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.04em;
  color: var(--navy);
  max-width: 760px;
}
.resources-list {
  border-top: 1px solid var(--line);
}
.resources-row {
  display: grid;
  grid-template-columns: 120px 140px 1fr auto;
  gap: 32px;
  align-items: baseline;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  transition: padding 0.3s var(--ease);
}
.resources-row:hover { padding-left: 16px; }
.resources-row:hover .resources-row-title { color: var(--terracotta); }
.resources-row-num {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}
.resources-row-tag {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.resources-row-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--navy);
  transition: color 0.3s var(--ease);
}
.resources-row-title small {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-soft);
  letter-spacing: 0;
  margin-top: 6px;
}
.resources-row-arrow {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--terracotta);
  transition: transform 0.3s var(--ease);
}
.resources-row:hover .resources-row-arrow { transform: translateX(8px); }
.resources-row--coming { opacity: 0.45; pointer-events: none; }
.resources-row--coming .resources-row-tag { color: var(--text-muted); }

/* ============================================================
   ⑥ PROFESSIONS — 5 huge typography lines, no images
   ============================================================ */
.professions {
  padding: 200px 0;
  background: var(--cream);
}
.professions-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-bottom: 80px;
  align-items: end;
}
.professions-headline {
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 88px);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.04em;
  color: var(--navy);
}
.professions-lead {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-soft);
  line-height: 1.85;
  max-width: 520px;
}
.prof-list {
  border-top: 1px solid var(--navy);
}
.prof-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 40px;
  align-items: center;
  padding: 40px 0;
  border-bottom: 1px solid var(--navy);
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
  position: relative;
  cursor: pointer;
}
.prof-row:hover { background: var(--navy); padding-left: 32px; padding-right: 32px; margin: 0 -32px; }
.prof-row:hover .prof-name { color: var(--cream); }
.prof-row:hover .prof-num { color: var(--terracotta); }
.prof-row:hover .prof-arrow { color: var(--terracotta); transform: translateX(8px); }
.prof-num {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  transition: color 0.3s var(--ease);
}
.prof-name {
  font-family: var(--font-display);
  font-size: clamp(36px, 5.5vw, 80px);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.045em;
  color: var(--navy);
  transition: color 0.3s var(--ease);
}
.prof-arrow {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--terracotta);
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}

/* ============================================================
   ⑦ MEMBERS — 1 featured + 4 small list (NOT a grid)
   ============================================================ */
.members {
  padding: 40px 0 56px;
  background: var(--off-white);
}
.members-head {
  margin-bottom: 28px;
  max-width: 720px;
}
.members-headline {
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 88px);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.04em;
  color: var(--navy);
  margin-bottom: 12px;
}
/* v18.21: Voice lead headline (replaces the "Voice" eyebrow, mirrors
   the Members headline so the section opens with a statement) */
.voice-headline {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--navy);
  margin: 0 0 28px;
}
.members-note {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-soft);
  letter-spacing: 0.02em;
  margin: 0 0 24px;
}
.m-featured-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(24, 38, 78, 0.28);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.m-featured-link:hover {
  color: var(--lavender);
  border-color: var(--lavender);
}
.members-lead {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-soft);
  line-height: 1.85;
}
.members-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 96px;
  align-items: start;
}
/* Featured member */
.m-featured {
  display: block;
  text-decoration: none;
}
.m-featured-photo {
  width: 100%;
  aspect-ratio: 4/5;
  overflow: hidden;
  margin-bottom: 28px;
  background: var(--cream);
}
.m-featured-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
  filter: grayscale(60%);
}
.m-featured:hover .m-featured-photo img { transform: scale(1.02); filter: grayscale(0%); }
.m-featured-name {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.6vw, 44px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--navy);
  margin-bottom: 8px;
}
.m-featured-role {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-soft);
  margin-bottom: 4px;
}
.m-featured-path {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--terracotta);
  letter-spacing: 0.02em;
}

/* Member list (4 small rows) */
.m-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line);
}
.m-list-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: padding 0.3s var(--ease);
}
.m-list-item:hover { padding-left: 12px; }
.m-list-item:hover .m-list-name { color: var(--terracotta); }
.m-list-photo {
  width: 64px; height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cream);
}
.m-list-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(40%); }
.m-list-item:hover .m-list-photo img { filter: grayscale(0%); }
.m-list-photo--placeholder {
  background: var(--navy);
  color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
}
.m-list-info {}
.m-list-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 4px;
  transition: color 0.3s var(--ease);
}
.m-list-role {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-soft);
}
.m-list-arrow {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--text-muted);
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}
.m-list-item:hover .m-list-arrow { color: var(--terracotta); transform: translateX(4px); }

/* ============================================================
   ⑧ STORIES — date + tag + title list
   ============================================================ */
.stories {
  padding: 200px 0;
  background: var(--cream);
}
.stories-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: end;
  margin-bottom: 80px;
}
.stories-headline {
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 88px);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.04em;
  color: var(--navy);
  max-width: 760px;
}
.stories-list {
  border-top: 1px solid var(--line);
}
.stories-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 40px;
  align-items: baseline;
  padding: 36px 0;
  border-bottom: 1px solid var(--line);
  transition: padding 0.3s var(--ease);
}
.stories-row:hover { padding-left: 16px; }
.stories-row:hover .stories-row-title { color: var(--terracotta); }
.stories-row-tag {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--terracotta);
  text-transform: uppercase;
}
.stories-row-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--navy);
  transition: color 0.3s var(--ease);
}
.stories-row-title small {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-soft);
  letter-spacing: 0;
  margin-top: 8px;
}
.stories-row-arrow {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--terracotta);
}

/* ============================================================
   ⑨ VOICE — one featured quote + link to Google
   ============================================================ */
.voice {
  padding: 40px 0 56px;
  background: var(--cream);
  border-top: 1px solid var(--line);
}
.voice-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 56px;
  text-align: left;
}
.voice-rating {
  display: inline-flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.voice-stars {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  color: var(--terracotta);
  letter-spacing: 4px;
  line-height: 1;
}
.voice-score {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1;
}
.voice-count {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-soft);
}
.voice-quote {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 52px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.035em;
  color: var(--navy);
  margin-bottom: 32px;
  max-width: 1000px;
}
.voice-quote::before {
  content: '“';
  display: block;
  font-family: var(--font-display);
  font-size: 1.1em;
  font-weight: 500;
  line-height: 0.6;
  color: var(--terracotta);
  margin-bottom: 8px;
}
.voice-author {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-soft);
  margin-bottom: 48px;
}

/* ============================================================
   ⑩ FOR COMPANIES — dark full bleed, one statement
   ============================================================ */
.for-companies {
  padding: 200px 0;
  background: var(--navy);
  color: var(--cream);
}
.fc-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 56px;
}
.fc-headline {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 120px);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.045em;
  color: var(--cream);
  max-width: 1100px;
  margin-bottom: 64px;
}
.fc-headline em {
  font-style: normal;
  color: var(--terracotta);
  font-weight: 500;
}
.fc-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding-top: 56px;
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-bottom: 64px;
}
.fc-meta-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--cream);
  margin-bottom: 8px;
}
.fc-meta-item span {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255,255,255,0.7);
}
.for-companies .link {
  color: var(--cream);
  border-bottom-color: var(--terracotta);
}
.for-companies .link:hover { color: var(--terracotta); }
.for-companies .eyebrow { color: var(--terracotta); margin-bottom: 56px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--navy);
  color: rgba(255,255,255,0.7);
  padding: 80px 0 40px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 56px;
}
.footer-brand {
  margin-bottom: 56px;
  max-width: 480px;
}
.footer-logo { height: 24px; margin-bottom: 20px; opacity: 0.95; }
.footer-tagline {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  line-height: 1.85;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 32px;
}
.footer-col h4 {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 18px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  transition: color 0.2s var(--ease);
}
.footer-col a:hover { color: var(--terracotta); }
.footer-sns { flex-direction: row !important; flex-wrap: wrap; gap: 16px !important; }
/* v18.15: Follow sub-groups (podcast per-program) */
.footer-sns-sub {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.5);
  margin: 18px 0 8px;
}
.footer-sns--podcast { gap: 14px !important; }
.footer-sns--podcast a { font-size: 13px; }
.footer-meta {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  line-height: 1.85;
  margin-bottom: 20px;
}
.footer-copy {
  font-family: var(--font-display);
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.04em;
}

/* ============================================================
   FADE-IN
   ============================================================ */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.fade-in.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   SUBPAGES (legacy compat, simplified)
   ============================================================ */
.page-hero {
  padding: 200px 0 120px;
  background: var(--cream);
  position: relative;
}
.page-hero .container,
.page-hero .wrap { max-width: 1080px; margin: 0 auto; padding: 0 56px; }
.page-eyebrow {
  display: inline-flex;
  align-items: center; gap: 14px;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 48px;
}
.page-eyebrow::before { content: ''; width: 32px; height: 1.5px; background: var(--terracotta); }
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 104px);
  font-weight: 500;
  color: var(--navy);
  line-height: 0.96;
  letter-spacing: -0.045em;
  margin-bottom: 32px;
}
.page-hero .page-lead {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--text-soft);
  line-height: 1.85;
  max-width: 720px;
}

.page-section { padding: 120px 0; background: var(--cream); border-top: 1px solid var(--line); }
.page-section--alt { background: var(--off-white); }
.page-section .container,
.page-section .wrap { max-width: 1080px; margin: 0 auto; padding: 0 56px; }
.page-section h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 500;
  color: var(--navy);
  letter-spacing: -0.035em;
  margin-bottom: 40px;
  line-height: 1.0;
}
/* Backward compat: <h2><span class="section-title">Eyebrow</span></h2> */
.page-section h2:has(> .section-title:only-child) {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  border: none;
  padding-bottom: 0;
  margin-bottom: 32px;
  padding-left: 44px;
  position: relative;
}
.page-section h2:has(> .section-title:only-child)::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 32px; height: 1.5px;
  background: var(--terracotta);
  transform: translateY(-50%);
}
.section-title { color: inherit; font: inherit; letter-spacing: inherit; }

.page-section h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--navy);
  letter-spacing: -0.025em;
  margin: 32px 0 12px;
}
.page-section p {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text);
  line-height: 1.95;
  margin-bottom: 16px;
}
.page-section ul:not(.faq-list):not(.history-list):not(.footer-col ul):not(.footer-sns) li {
  position: relative;
  padding: 10px 0 10px 24px;
  font-size: 15px;
  color: var(--text);
  border-bottom: 1px solid var(--line);
}
.page-section ul:not(.faq-list):not(.history-list):not(.footer-col ul):not(.footer-sns) li::before {
  content: '';
  position: absolute; left: 0; top: 20px;
  width: 12px; height: 2px;
  background: var(--terracotta);
}

/* Manifesto */
.manifesto-narrative {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.95;
  margin-bottom: 40px;
  padding-left: 20px;
  border-left: 2px solid var(--terracotta);
  max-width: 720px;
}
.manifesto-promise {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 500;
  color: var(--navy);
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin: 0 0 56px;
  max-width: 860px;
}
.manifesto-body p {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text);
  line-height: 2.0;
  margin-bottom: 20px;
  max-width: 760px;
}

.origin-headline {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 500;
  color: var(--navy);
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin-bottom: 32px;
}
.origin-body p { font-family: var(--font-body); font-size: 16px; line-height: 2.05; margin-bottom: 22px; max-width: 800px; }
.origin-footnote {
  margin-top: 40px;
  padding: 16px 20px;
  background: var(--off-white);
  border-left: 2px solid var(--terracotta);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.85;
  max-width: 800px;
}
.origin-footnote a { color: var(--terracotta); font-weight: 500; }

/* History */
.history-list { padding: 0; }
.history-list li {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 32px;
  padding: 20px 0 !important;
  border-bottom: 1px solid var(--line) !important;
  align-items: baseline;
}
.history-list li::before { display: none !important; }
.history-year {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--terracotta);
  letter-spacing: 0.04em;
}
.history-event {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text);
}

.about-numbers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.number-card {}
.number-value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(40px, 4.5vw, 64px);
  font-weight: 500;
  color: var(--navy);
  letter-spacing: -0.04em;
  line-height: 1.0;
  margin-bottom: 12px;
}
.number-value strong { font-weight: 500; }
.number-value small { font-size: 0.45em; color: var(--terracotta); vertical-align: super; }
.number-label {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.6;
}
.number-label small { color: var(--text-muted); font-size: 11px; }

.corp-link-card {
  display: flex;
  align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid var(--navy);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.corp-link-card:hover { background: var(--navy); color: var(--cream); }
.corp-link-card:hover .corp-link-arrow { color: var(--terracotta); }
.corp-link-card p { flex: 1; font-size: 14px; line-height: 1.85; margin: 0; }
.corp-link-arrow { font-family: var(--font-display); font-size: 22px; color: var(--terracotta); }

/* How-it-works subpage */
.steps-detail { display: flex; flex-direction: column; gap: 24px; }
.step-detail {
  background: #fff;
  border: 1px solid var(--line);
  padding: 36px 40px;
  transition: border-color 0.3s var(--ease);
}
.step-detail:hover { border-color: var(--terracotta); }
.step-detail-num {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--terracotta);
  margin-bottom: 12px;
}
.step-detail h3 {
  font-family: var(--font-display) !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  margin: 0 0 16px !important;
  letter-spacing: -0.025em !important;
}
.step-detail-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.step-detail-meta span {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--terracotta);
  border: 1px solid var(--terracotta);
  padding: 4px 10px;
}
.step-detail-body p { font-family: var(--font-body); font-size: 15px; line-height: 1.95; margin-bottom: 12px; }

/* FAQ */
.faq-list li {
  padding: 24px 0 !important;
  border-bottom: 1px solid var(--line) !important;
}
.faq-list li::before { display: none !important; }
.faq-q {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.faq-q::before { content: 'Q. '; font-family: var(--font-display); color: var(--terracotta); font-weight: 500; }
.faq-a { font-family: var(--font-body); font-size: 15px; color: var(--text-soft); line-height: 1.95; padding-left: 28px; }

/* For-companies subpage */
.fc-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 24px 0;
}
.fc-stat-card {
  padding: 32px 28px;
  background: #fff;
  border: 1px solid var(--line);
}
.fc-stat-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--navy);
  margin-bottom: 8px;
}
.fc-stat-card span { font-family: var(--font-body); font-size: 12px; color: var(--text-soft); }
.fc-badge {
  display: inline-flex;
  align-items: center; gap: 8px;
  padding: 10px 18px;
  background: var(--terracotta);
  color: #fff;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  margin-top: 16px;
}
.fc-badge small { font-size: 11px; opacity: 0.85; }

/* Contact */
.contact-tracks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contact-track {
  display: flex; flex-direction: column;
  padding: 36px 32px;
  background: #fff;
  border: 1px solid var(--line);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.contact-track:hover { border-color: var(--terracotta); transform: translateY(-2px); }
.contact-track-num {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--terracotta);
  margin-bottom: 16px;
}
.contact-track h3 {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  margin: 0 0 12px !important;
  letter-spacing: -0.025em !important;
}
.contact-track p { font-family: var(--font-body); font-size: 14px; color: var(--text-soft); line-height: 1.85; margin-bottom: 24px; }
.contact-track-action {
  display: inline-flex;
  align-items: center; gap: 8px;
  margin-top: auto; align-self: flex-start;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--navy) !important;
  border-bottom: 2px solid var(--terracotta);
  padding-bottom: 4px;
  transition: color 0.3s var(--ease);
}
.contact-track-action:hover { color: var(--terracotta) !important; }

.subpage-cta {
  margin-top: 80px;
  padding: 80px 56px;
  background: var(--navy);
  color: var(--cream);
  text-align: left;
}
.subpage-cta h2 {
  font-family: var(--font-display) !important;
  font-size: clamp(28px, 3.6vw, 44px) !important;
  font-weight: 500 !important;
  color: var(--cream) !important;
  letter-spacing: -0.035em !important;
  margin: 0 0 20px !important;
  border: none !important;
  padding: 0 !important;
  display: block !important;
}
.subpage-cta p { color: rgba(255,255,255,0.7); font-size: 15px; margin-bottom: 36px; max-width: 540px; }
.subpage-cta .btn-primary,
.subpage-cta .link {
  display: inline-flex;
  align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--cream);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--terracotta);
  padding: 0 0 6px 0;
}
.subpage-cta .btn-primary::after { content: ' →'; }
.subpage-cta .btn-primary:hover,
.subpage-cta .link:hover { color: var(--terracotta); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .header-inner { padding: 0 32px; }
  .header-nav { gap: 22px; }
  .hero { padding: 120px 32px 64px; }
  .wrap, .wrap--narrow { padding: 0 32px; }
  .numbers-layout { grid-template-columns: 1fr; gap: 48px; }
  .resources-head { grid-template-columns: 1fr; gap: 24px; }
  .professions-head { grid-template-columns: 1fr; gap: 32px; }
  .stories-head { grid-template-columns: 1fr; gap: 24px; }
  .members-layout { grid-template-columns: 1fr; gap: 64px; }
  .voice-inner, .fc-inner, .footer-inner { padding: 0 32px; }
}

@media (max-width: 900px) {
  .header-nav { display: none; }
  .menu-toggle { display: block; }
  .header-nav.is-open {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    top: 80px; left: 0; right: 0; bottom: 0;
    background: rgba(250,247,242,0.98);
    backdrop-filter: blur(20px);
    padding: 32px 24px 80px;
    gap: 0;
    z-index: 99;
    overflow-y: auto;
  }
  .header-nav.is-open > a {
    font-size: 18px; padding: 18px 0;
    border-bottom: 1px solid var(--line);
    color: var(--navy);
  }
  .header-nav.is-open .nav-trigger {
    width: 100%; text-align: left; justify-content: space-between;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    font-size: 18px;
    color: var(--navy);
  }
  .header-nav.is-open .nav-dropdown-menu {
    position: static; opacity: 1; visibility: visible;
    transform: none; box-shadow: none; border: none;
    padding: 0 0 8px 0; min-width: 0;
    background: transparent; display: none;
  }
  .header-nav.is-open .nav-dropdown.is-open .nav-dropdown-menu { display: block; }
  .header-nav.is-open .nav-dropdown-menu a { padding: 12px 18px; font-size: 15px; }
  .header-nav.is-open .header-nav-careers,
  .header-nav.is-open .header-nav-contact {
    font-size: 18px !important;
    padding: 18px 0 !important;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    color: var(--navy) !important;
    background: transparent !important;
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .hero { min-height: auto; padding: 100px 24px 64px; }
  .hero-message { font-size: clamp(40px, 12vw, 64px); }
  .hero-dots { display: none; }
  .numbers, .how, .resources, .professions, .members, .stories, .voice, .for-companies { padding: 96px 0; }
  .num-hero-stat strong { font-size: clamp(80px, 24vw, 140px); }
  .how-row { grid-template-columns: 60px 1fr; gap: 16px; padding: 28px 0; }
  .how-row-body { grid-column: 1 / -1; padding-top: 12px; }
  .resources-row { grid-template-columns: 80px 1fr; gap: 12px; padding: 24px 0; }
  .resources-row-num, .resources-row-arrow { display: none; }
  .stories-row { grid-template-columns: 100px 1fr; gap: 12px; padding: 24px 0; }
  .stories-row-arrow { display: none; }
  .prof-row { grid-template-columns: 50px 1fr 24px; gap: 14px; padding: 24px 0; }
  .prof-row:hover { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
  .fc-meta { grid-template-columns: 1fr; gap: 28px; }
  .fc-meta-item strong { font-size: 40px; }
  .fc-stats-grid, .contact-tracks { grid-template-columns: 1fr; }
  .about-numbers-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .page-hero { padding: 130px 0 72px; }
  .page-section { padding: 80px 0; }
  .history-list li { grid-template-columns: 100px 1fr; gap: 12px; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-brand { margin-bottom: 40px; }
  .subpage-cta { padding: 48px 32px; margin-top: 56px; }
}

@media (max-width: 480px) {
  .hero-message { font-size: clamp(36px, 13vw, 48px); }
  .voice-quote { font-size: clamp(22px, 6vw, 32px); }
}

/* ============================================================
   v9 SECTION OVERRIDES — Lavender + Pop Pink + Dot Map
   ============================================================ */

/* All sections use blush base unless overridden */
.numbers, .how, .resources, .professions, .members, .stories, .voice { background: var(--blush); }
.resource-hub { background: var(--blush); }

/* ② Numbers v9 — Lavender card on the right with dot map */
/* ============================================================
   ② NEWS — latest 3 announcements (between Hero and Numbers)
   ============================================================ */
.news {
  background: var(--blush);
  padding: 24px 0 40px;
  position: relative;
}
.news-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.news-head .eyebrow { margin-bottom: 0; }
.news-head-link {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s, color 0.2s;
}
.news-head-link:hover { opacity: 1; color: var(--lavender); }
.news-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.news-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--cream-warm);
  border-radius: 16px;
  padding: 24px 26px 26px;
  text-decoration: none;
  color: var(--navy);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
}
.news-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px -18px rgba(24, 38, 78, 0.22);
}
.news-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.news-card-tag {
  font-size: 10.5px;
  padding: 4px 12px;
  letter-spacing: 0.14em;
}
.news-card-date {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-soft, #4A5278);
  opacity: 0.78;
}
.news-card-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.45;
  color: var(--navy);
  margin: 0;
  flex: 1;
}
.news-card-cta {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--navy);
  margin-top: auto;
  transition: color 0.2s, transform 0.2s;
  display: inline-block;
}
.news-card:hover .news-card-cta { color: var(--lavender); transform: translateX(3px); }

@media (max-width: 900px) {
  .news { padding: 48px 0 56px; }
  .news-list { grid-template-columns: 1fr; }
}

.numbers { padding: 40px 0 24px; position: relative; }
.numbers-layout {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: stretch;
}
.num-hero-stat {
  background: var(--pop-pink);
  border-radius: 24px;
  padding: 48px 44px;
  color: var(--navy);
  position: relative;
}
.num-hero-stat::before { display: none; }
.num-hero-stat strong { color: var(--navy); font-size: clamp(100px, 14vw, 200px); }
.num-hero-stat strong em { color: var(--navy); }
.num-hero-stat-label { color: var(--navy); }
.num-hero-stat-sub { color: var(--navy); opacity: 0.78; }

/* Right side — Lavender card with dot map */
.num-map-card {
  background: var(--lavender);
  border-radius: 24px;
  padding: 36px 36px 40px;
  color: var(--cream-warm);
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
}
.num-map-card-head { display: flex; align-items: center; justify-content: space-between; }
.num-map-card-head .ticket { --notch-bg: var(--lavender); }
.num-map-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--cream-warm);
}
.num-map-svg { width: 100%; height: auto; }
.num-map-svg circle.bg { fill: rgba(255,255,255,0.18); }
.num-map-svg circle.active { fill: var(--pop-pink); stroke: var(--cream-warm); stroke-width: 2; }
.num-map-svg text { fill: var(--cream-warm); font-family: var(--font-display); font-size: 12px; font-weight: 500; }

.num-list { display: none; } /* hide old simple list — replaced by map */

/* Old numbers-grid hidden if any */
.numbers .num-list-item { display: none; }

/* ④ How It Works v9 — chain of ticket pills */
.how { padding: 160px 0; background: var(--blush); }
.how-chain {
  display: flex; align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 64px;
}
.how-chain .ticket { font-size: 13px; padding: 14px 24px; --notch-bg: var(--blush); }
.how-rows .how-row { display: grid; grid-template-columns: 100px 1fr 1fr; gap: 48px; align-items: start; padding: 36px 0; border-bottom: 1px solid var(--line); }

/* ⑤ Resource Hub v9 — editorial white photo cards */
.resource-hub { background: var(--off-white); padding: 120px 0; }
.resource-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; }
.r-card-v8 {
  background: var(--cream-warm);
  border-radius: 16px;
  border: none;
  padding: 14px;
}
.r-card-v8-img { aspect-ratio: 4/3; border-radius: 12px; }
.r-card-v8-body { padding: 18px 12px 12px; gap: 4px; }
.r-card-v8-num { display: none; }
.r-card-v8-title { font-size: 18px; line-height: 1.2; margin-bottom: 6px; }
.r-card-v8-sub { font-size: 12.5px; margin-bottom: 18px; }
.r-card-v8-cta {
  display: inline-flex;
  background: var(--lavender);
  color: var(--cream-warm);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 7px 18px;
  position: relative;
  border: none;
  --notch-bg: var(--cream-warm);
}
.r-card-v8-cta::before, .r-card-v8-cta::after {
  content: ''; position: absolute; top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px; border-radius: 50%; background: var(--cream-warm);
}
.r-card-v8-cta::before { left: -6px; }
.r-card-v8-cta::after { right: -6px; }
.r-card-v8:nth-child(3n+1) .r-card-v8-cta { background: var(--pop-pink); color: var(--navy); }
.r-card-v8:nth-child(3n+2) .r-card-v8-cta { background: var(--lavender); color: var(--cream-warm); }
.r-card-v8:nth-child(3n+3) .r-card-v8-cta { background: var(--sage); color: var(--cream-warm); }
.r-card-v8-cta:hover { transform: translateY(-1px); transition: transform 0.2s; }

.r-card-v8--coming { background: transparent; border: 2px dashed var(--lavender); }
.r-card-v8--coming .r-card-v8-title { color: var(--navy); }
.r-card-v8-coming-tag { background: var(--navy); color: var(--cream-warm); }

/* ⑥ Professions v15-sage — Sage card with 7 ticket pills, no click-through */
.professions { background: var(--blush); padding: 40px 0 56px; }
.prof-display {
  background: var(--sage);
  border-radius: 28px;
  padding: 48px 56px 48px;
  color: var(--cream-warm);
  position: relative;
  overflow: hidden;
  margin-top: 20px;
}
.prof-display-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.prof-display-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--cream-warm);
  max-width: 600px;
  margin: 0;
}
.prof-display-lead {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--cream-warm);
  opacity: 0.88;
  line-height: 1.75;
  max-width: 360px;
  margin: 0;
}
.prof-display-tickets {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.2);
}
.prof-display .ticket {
  background: var(--cream-warm);
  color: var(--navy);
  font-size: 15px;
  font-weight: 500;
  padding: 14px 28px;
  --notch-bg: var(--sage);
}
.prof-display .ticket::before, .prof-display .ticket::after { background: var(--sage); }
.prof-display-dot {
  position: absolute;
  top: 32px;
  right: 36px;
  width: 80px; height: 60px;
}
.prof-display-dot svg { width: 100%; height: 100%; }

/* hide old prof-row list */
.professions .prof-list { display: none; }

/* Inline band variant — used inside Numbers section (no big head, just tickets) */
.prof-display--band {
  margin-top: 24px;
  padding: 36px 48px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.prof-display-band-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream-warm);
  opacity: 0.82;
}
.prof-display--band .prof-display-tickets {
  padding-top: 0;
  border-top: none;
  margin: 0;
}
.prof-display--band .prof-display-dot { display: none; }
@media (max-width: 900px) {
  .prof-display--band { padding: 28px 24px 32px; }
}
/* v18.21: on mobile, lay the 7 profession tickets out as a tidy 2-column
   grid so widths are uniform (no ragged 1-or-2-per-row wrapping). */
@media (max-width: 640px) {
  .prof-display-tickets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .prof-display .ticket {
    justify-content: center;
    text-align: center;
    padding: 14px 8px;
    font-size: 13px;
    letter-spacing: 0;
    white-space: normal;
  }
}

/* ⑧ Stories v10 — Pop Pink + BLACK text (Major Players style) */
.stories { background: var(--pop-pink); padding: 48px 0 56px; color: #1A1A1A; }
.stories .eyebrow { color: #1A1A1A; }
.stories .eyebrow::before { background: #1A1A1A; }
.stories-headline { color: #1A1A1A; }
.stories-row { border-bottom: 1px solid rgba(0,0,0,0.20); }
.stories-row:hover { padding-left: 20px; }
.stories-row:hover .stories-row-title { color: var(--navy); }
.stories-row-tag {
  color: #1A1A1A;
  background: var(--cream-warm);
  padding: 6px 14px;
  position: relative;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  display: inline-flex;
  align-self: flex-start;
}
.stories-row-tag::before, .stories-row-tag::after {
  content: '';
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--pop-pink);
}
.stories-row-tag::before { left: -5px; }
.stories-row-tag::after { right: -5px; }
.stories-row-title { color: #1A1A1A; }
.stories-row-title small { color: #1A1A1A; opacity: 0.75; }
.stories-row-arrow { color: #1A1A1A; }
.stories .link { color: #1A1A1A; border-bottom-color: #1A1A1A; }
.stories .link:hover { color: var(--navy); }
.stories-list { border-top: 1px solid rgba(0,0,0,0.25); }
.stories-art { color: var(--cream-warm); opacity: 0.4; }

/* ⑨ Voice v10 — featured pair + 6 smaller cards grid */
.voice { background: var(--blush); padding: 80px 0 88px; }
.voice-rating { border-bottom: 1px solid var(--line); }

/* Featured (1 big quote + brand info pair) */
.voice-quote-row {
  display: grid;
  grid-template-columns: 1.8fr auto 1fr;
  gap: 0;
  align-items: center;
  margin: 56px 0 32px;
}
.voice-card-main {
  background: var(--lavender);
  border-radius: 24px;
  padding: 44px 48px;
  color: var(--cream-warm);
  position: relative;
}
.voice-card-main .dot-icon { display: block; margin-bottom: 18px; }
.voice-card-main .dot-icon svg { width: 36px; height: 18px; }
.voice-card-main blockquote {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--cream-warm);
  margin: 0;
}
.voice-card-bio {
  background: var(--lavender);
  border-radius: 18px;
  padding: 32px 28px;
  color: var(--cream-warm);
  text-align: center;
}
.voice-card-bio h4 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--cream-warm);
  margin: 0 0 8px;
}
.voice-card-bio p {
  font-size: 12px;
  color: var(--cream-warm);
  opacity: 0.85;
  margin: 0;
}
.voice-connector { display: flex; align-items: center; gap: 4px; padding: 0 12px; }
.voice-connector .connector-line { width: 28px; }
.voice .voice-quote, .voice .voice-author { display: none; }

/* Grid of smaller voice cards */
.voice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.voice-card {
  background: var(--cream-warm);
  border-radius: 18px;
  padding: 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: none;
  transition: transform 0.3s var(--ease);
}
.voice-card:hover { transform: translateY(-3px); box-shadow: none; }
.voice-card:nth-child(3n+1) { background: var(--cream-warm); }
.voice-card:nth-child(3n+2) { background: var(--lavender); color: var(--cream-warm); }
.voice-card:nth-child(3n+3) { background: var(--sage); color: var(--cream-warm); }
.voice-card-stars {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--pop-pink);
  line-height: 1;
  margin: 0;
}
.voice-card:nth-child(3n+1) .voice-card-stars { color: var(--pop-pink); }
.voice-card:nth-child(3n+2) .voice-card-stars,
.voice-card:nth-child(3n+3) .voice-card-stars { color: var(--cream-warm); opacity: 0.95; }
.voice-num { display: none; }
.voice-card .voice-text {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.85;
  color: inherit;
  margin: 0;
  flex: 1;
}
.voice-card .voice-author {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  color: inherit;
  opacity: 0.78;
  margin: 0;
  letter-spacing: 0;
  text-align: left;
}
@media (max-width: 1024px) {
  .voice-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .voice-grid { grid-template-columns: 1fr; }
}

/* ⑩ For Companies v9 — Lavender big card */
.for-companies {
  padding: 180px 0;
  background: var(--blush);
  color: var(--navy);
}
.for-companies::before, .for-companies::after { display: none; }
.fc-inner {
  background: var(--lavender);
  border-radius: 28px;
  padding: 64px 64px 56px;
  color: var(--cream-warm);
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
}
.for-companies .eyebrow { color: var(--cream-warm); }
.for-companies .eyebrow::before { background: var(--cream-warm); }
.fc-headline { color: var(--cream-warm); font-size: clamp(48px, 6.4vw, 96px); }
.fc-headline em { color: var(--pop-pink); }
.for-companies .section-lead { color: var(--cream-warm); opacity: 0.92; }
.fc-meta { border-top: 1px solid rgba(255,255,255,0.20); }
.fc-meta-item strong { color: var(--cream-warm); }
.fc-meta-item span { color: var(--cream-warm); opacity: 0.78; }
.for-companies .link { color: var(--cream-warm); border-bottom-color: var(--pop-pink); }
.for-companies .link:hover { color: var(--pop-pink); }
.fc-dot-icon { position: absolute; top: 56px; right: 64px; width: 80px; height: 60px; }
.fc-dot-icon svg { width: 100%; height: 100%; }
.fc-art-left, .fc-art-right { display: none !important; }

/* Header — v16: transparent at top of FV, .is-scrolled class adds the
   blush+blur (handled in the base .site-header rules above). The previous
   v15 override that forced blush at all times has been removed. */

/* Clients v15-r — blush section (card itself handles tinted head + white marquee) */
.clients { background: var(--blush); }

/* Members v9 — keep but Sage chip behind featured */
.m-featured::before { background: var(--sage-pale); }
.m-list-photo--placeholder { background: var(--lavender); color: var(--cream-warm); }
.m-list-item:hover .m-list-name { color: var(--lavender-deep); }

/* Page hero — blush bg */
.page-hero { background: var(--blush); }
.page-section { background: var(--blush); }
.page-section--alt { background: var(--off-white); }

/* Bleed-photo legacy */
.bleed-photo { background: var(--off-white); }

/* Stories art (giant quote) — over Pop Pink */
.stories-art { color: var(--cream-warm); }

/* Responsive overrides */
@media (max-width: 900px) {
  .numbers-layout { grid-template-columns: 1fr; gap: 32px; }
  .voice-quote-row { grid-template-columns: 1fr; gap: 16px; }
  .voice-connector { display: none; }
  .fc-inner { padding: 48px 36px; }
  .fc-dot-icon { width: 56px; top: 36px; right: 36px; }
}
@media (max-width: 768px) {
  .resource-cards { grid-template-columns: 1fr; }
  .num-hero-stat { padding: 32px 28px; }
  .num-map-card { padding: 28px; }
  .how-chain { gap: 8px; }
  .how-chain .ticket { font-size: 12px; padding: 10px 16px; }
  .stories { padding: 120px 0; }
  .for-companies { padding: 120px 0; }
  .fc-inner { padding: 40px 24px; }
}

/* ============================================================
   v13 — Further reduce vertical spacing
   ============================================================ */
.numbers, .how, .resources, .professions, .members, .stories, .voice, .for-companies,
.resource-hub, .clients {
  padding-top: 88px !important;
  padding-bottom: 88px !important;
}
.hero { padding: 96px 48px 64px !important; }
.hero-message { margin-bottom: 28px; }
.hero-sub { margin-bottom: 24px; }
.hero-brand { margin-bottom: 28px; }
@media (max-width: 768px) {
  .numbers, .how, .resources, .professions, .members, .stories, .voice, .for-companies, .resource-hub, .clients {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
}

/* ============================================================
   v12 — Hero sub-text design strengthen
   ============================================================ */
.hero-sub-lead {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.4vw, 19px);
  color: var(--navy);
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 20px;
}
.hero-sub-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  max-width: 720px;
}
.hero-sub-pills .ticket {
  font-size: 12px;
  padding: 7px 16px;
  background: var(--cream-warm);
  --notch-bg: var(--blush);
}
.hero-sub-pills .ticket::before, .hero-sub-pills .ticket::after { background: var(--blush); }
.hero-sub-scale {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--text-soft);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 36px;
}
.hero-sub-scale strong { font-size: 18px; color: var(--navy); font-weight: 500; letter-spacing: -0.02em; }

/* Hide old hero-sub */
.hero-sub { display: none; }

/* ============================================================
   v12 — Stylized labels (replaces "—" plain captions)
   ============================================================ */
.label-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--cream-warm);
  padding: 7px 18px;
  position: relative;
  --notch-bg: var(--blush);
}
.label-pill::before, .label-pill::after {
  content: '';
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--notch-bg);
}
.label-pill::before { left: -5px; }
.label-pill::after { right: -5px; }
.label-pill--dark { background: var(--navy); color: var(--cream-warm); --notch-bg: var(--navy); }

/* Bleed photo caption (v12 styled) */
.bleed-photo-caption {
  position: absolute;
  bottom: 32px; left: 56px;
  background: var(--cream-warm);
  color: var(--navy);
  padding: 8px 20px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  z-index: 2;
}
.bleed-photo-caption::before, .bleed-photo-caption::after {
  content: '';
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(0,0,0,0.3);
}
.bleed-photo-caption::before { left: -5px; }
.bleed-photo-caption::after { right: -5px; }
.bleed-photo::after { background: none; } /* remove dark gradient */

/* Clients label (v12 styled) */
.clients-label {
  margin: 0 auto 36px;
  display: block;
  width: fit-content;
}
.clients-label-pill {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.10);
  color: var(--cream-warm);
  padding: 8px 20px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  position: relative;
}
.clients-label-pill::before, .clients-label-pill::after {
  content: '';
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--navy);
}
.clients-label-pill::before { left: -5px; }
.clients-label-pill::after { right: -5px; }

/* ============================================================
   v12 — How It Works merged into 4 ticket-cards (no separate rows)
   ============================================================ */
.how-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 48px;
}
.how-card {
  position: relative;
  padding: 36px 36px 32px;
  border-radius: 18px;
  background: var(--pop-pink);
  color: var(--navy);
}
.how-card:nth-child(2) { background: var(--lavender); color: var(--cream-warm); }
.how-card:nth-child(3) { background: var(--sage); color: var(--cream-warm); }
.how-card:nth-child(4) { background: var(--navy); color: var(--cream-warm); }
.how-card-num {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 14px;
  opacity: 0.85;
}
.how-card-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
}
.how-card-body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.85;
  margin: 0;
  opacity: 0.92;
}
/* Hide the old chain + rows */
.how-chain, .how-rows { display: none; }
@media (max-width: 768px) {
  .how-cards { grid-template-columns: 1fr; }
  .how-card { padding: 28px 24px; }
}

/* ============================================================
   v12 — Members equal grid (no featured/list split)
   ============================================================ */
.members-layout {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}
.m-featured {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: transform 0.3s var(--ease);
}
.m-featured:hover { transform: translateY(-3px); }
.m-featured::before { display: none; }
.m-featured-photo {
  width: 100%;
  aspect-ratio: 4/5;
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--off-white);
  border-radius: 8px;
}
.m-featured-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); filter: grayscale(30%); }
.m-featured:hover .m-featured-photo img { transform: scale(1.03); filter: grayscale(0%); }
/* Placeholder portrait variant (no image) */
.m-featured-photo.m-list-photo--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--lavender); color: var(--cream-warm);
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.m-featured-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--navy);
  margin: 0 0 4px;
}
.m-featured-role {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-soft);
  margin: 0 0 4px;
}
.m-featured-path {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--pop-pink-deep, #D2789C);
  margin: 0;
}
.m-list { display: none; } /* Hide the separate small list (Members now equal) */
@media (max-width: 1024px) {
  .members-layout { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .members-layout { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 480px) {
  .members-layout { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   v8 — Illustrations / Color blocks / Shapes (TOP page only)
   ============================================================ */

/* Hero v8 — abstract SVG illustration on the right side */
.hero { position: relative; }
.hero-art {
  position: absolute;
  top: 0;
  right: 0;
  width: 56%;
  max-width: 760px;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.hero-art svg { width: 100%; height: 100%; display: block; }
.hero-art-stripe {
  position: absolute;
  top: 40%;
  right: 8%;
  width: 200px;
  height: 200px;
  background: var(--sand);
  border-radius: 50%;
  z-index: 0;
  opacity: 0.85;
}
.hero-art-blob {
  position: absolute;
  top: 18%;
  right: 22%;
  width: 280px;
  height: 280px;
  background: var(--terracotta);
  border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%;
  z-index: 1;
  animation: blobMorph 14s ease-in-out infinite;
}
@keyframes blobMorph {
  0%, 100% { border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%; transform: rotate(0deg); }
  50%      { border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%; transform: rotate(12deg); }
}
.hero-art-line {
  position: absolute;
  inset: 0;
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .hero-art-blob { animation: none; }
}
@media (max-width: 900px) {
  .hero-art { display: none; }
}

/* Numbers v8 — Sand ellipse layered behind the hero stat */
.numbers { position: relative; overflow: hidden; }
.num-hero-stat { position: relative; }
.num-hero-stat::before {
  content: '';
  position: absolute;
  top: -64px; left: -80px;
  width: 360px; height: 360px;
  background: var(--sand);
  border-radius: 50%;
  z-index: 0;
  opacity: 0.6;
}
.num-hero-stat strong, .num-hero-stat-label, .num-hero-stat-sub { position: relative; z-index: 1; }
.numbers-art-dot {
  position: absolute;
  bottom: 96px;
  left: 40%;
  width: 80px;
  height: 80px;
  background-image: radial-gradient(circle, var(--terracotta) 24%, transparent 24%);
  background-size: 14px 14px;
  opacity: 0.6;
  pointer-events: none;
}
@media (max-width: 768px) {
  .num-hero-stat::before { width: 220px; height: 220px; top: -32px; left: -40px; }
  .numbers-art-dot { display: none; }
}

/* Full-bleed photo moment — between Numbers and Clients */
.bleed-photo {
  width: 100%;
  height: clamp(280px, 50vw, 580px);
  background: var(--off-white);
  overflow: hidden;
  position: relative;
}
.bleed-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.92);
}
.bleed-photo-caption {
  position: absolute;
  bottom: 32px; left: 56px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: #fff;
  text-transform: uppercase;
  z-index: 2;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.bleed-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.35) 0%, transparent 35%);
  pointer-events: none;
}

/* Resource Hub v8 — back to 3-column card grid, Sage section */
.resource-hub {
  padding: 48px 0 64px;
  background: var(--sage-pale);
  position: relative;
}
.resource-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
}
.r-card-v8 {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.r-card-v8:not(.r-card-v8--coming):hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(24,38,78,0.12);
}
.r-card-v8-img {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--off-white);
}
.r-card-v8-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.r-card-v8:hover .r-card-v8-img img { transform: scale(1.06); }
.r-card-v8-body {
  display: flex; flex-direction: column;
  padding: 28px 28px 32px;
  flex: 1;
}
.r-card-v8-num {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--terracotta);
  margin-bottom: 14px;
}
.r-card-v8-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--navy);
  margin-bottom: 10px;
}
.r-card-v8-sub {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--text-soft);
  line-height: 1.75;
  margin-bottom: 20px;
}
.r-card-v8-cta {
  margin-top: auto;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
  border-bottom: 2px solid var(--terracotta);
  padding-bottom: 4px;
  align-self: flex-start;
  transition: color 0.3s var(--ease);
}
.r-card-v8:hover .r-card-v8-cta { color: var(--terracotta); }
.r-card-v8-cta::after { content: ' →'; }

.r-card-v8--coming {
  background: transparent;
  border: 2px dashed var(--terracotta);
}
.r-card-v8--coming .r-card-v8-body { padding-top: 64px; }
.r-card-v8-coming-tag {
  margin-top: 12px;
  padding: 5px 12px;
  background: var(--terracotta);
  color: #fff;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  border-radius: var(--radius, 0);
  align-self: flex-start;
  text-transform: uppercase;
}

@media (max-width: 1024px) {
  .resource-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .resource-cards { grid-template-columns: 1fr; }
}

/* For Companies v8 — Vector SVG decorations on left/right */
.for-companies { position: relative; }
.fc-art-left, .fc-art-right {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.fc-art-left {
  top: 80px;
  left: -120px;
  width: 380px;
  height: 380px;
}
.fc-art-right {
  bottom: 60px;
  right: -100px;
  width: 320px;
  height: 320px;
}
.fc-art-left svg, .fc-art-right svg { width: 100%; height: 100%; }
.fc-inner { position: relative; z-index: 1; }
@media (max-width: 768px) {
  .fc-art-left { width: 220px; height: 220px; top: 40px; left: -100px; }
  .fc-art-right { width: 200px; height: 200px; bottom: 40px; right: -80px; }
}

/* Members v8 — Sand chip behind featured */
.members { position: relative; overflow: hidden; }
.m-featured { position: relative; }
.m-featured::before {
  content: '';
  position: absolute;
  top: -32px; left: -32px;
  width: 160px; height: 160px;
  background: var(--sand-pale);
  border-radius: 50%;
  z-index: 0;
}
.m-featured-photo, .m-featured-name, .m-featured-role, .m-featured-path { position: relative; z-index: 1; }

/* Stories v8 — quote mark decoration in corner */
.stories { position: relative; overflow: hidden; }
.stories-art {
  position: absolute;
  top: 120px;
  right: 56px;
  font-family: var(--font-display);
  font-size: 320px;
  font-weight: 500;
  color: var(--sage);
  opacity: 0.35;
  line-height: 0.7;
  pointer-events: none;
  z-index: 0;
}
.stories .wrap { position: relative; z-index: 1; }
@media (max-width: 768px) {
  .stories-art { font-size: 200px; top: 80px; right: 24px; }
}

/* ============================================================
   v15 — Resource Hub inline accordion
   ============================================================ */
.r-accordion { position: relative; }
.r-accordion-trigger {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.r-accordion-trigger:focus-visible {
  outline: 2px solid var(--lavender);
  outline-offset: 4px;
  border-radius: 18px;
}
.r-accordion .r-card-v8-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.r-toggle-icon {
  display: inline-block;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  transition: transform 0.3s var(--ease, ease);
}
.r-accordion.is-open .r-toggle-icon {
  transform: rotate(45deg);
}
.r-accordion-body {
  overflow: hidden;
  background: var(--cream-warm);
  border-radius: 0 0 16px 16px;
  margin: -10px -14px -14px;
  border-top: 1px dashed rgba(24, 38, 78, 0.18);
  max-height: 0;
  transition: max-height 0.4s var(--ease, ease), padding 0.3s var(--ease, ease);
}
.r-accordion-body[hidden] { display: none; }
.r-accordion.is-open .r-accordion-body {
  max-height: 1400px;
}
.r-accordion-inner {
  padding: 28px 28px 32px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.85;
  color: var(--navy);
}
.r-accordion-inner > p { margin: 0 0 12px; }
.r-accordion-inner > p:last-of-type { margin-bottom: 18px; }
.r-accordion-note {
  font-size: 12.5px;
  color: var(--text-soft, #555);
  margin-top: 4px;
}
.r-accordion-inner .btn-primary {
  display: inline-block;
  margin-top: 12px;
  padding: 12px 22px;
  background: var(--navy);
  color: var(--cream-warm);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
}
.r-accordion-inner .btn-primary:hover {
  background: var(--lavender);
  transform: translateY(-1px);
}

/* Podcast list inside accordion */
.podcast-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.podcast-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 22px;
  align-items: start;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(24, 38, 78, 0.08);
}
.podcast-item:last-child { border-bottom: none; padding-bottom: 0; }
.podcast-img {
  width: 120px;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--blush);
}
.podcast-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.podcast-body h4 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 8px;
}
.podcast-body p {
  font-size: 13px;
  line-height: 1.8;
  margin: 0 0 14px;
  color: var(--navy);
}
.podcast-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.podcast-links a {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--navy);
  padding: 8px 14px;
  border: 1.5px solid var(--navy);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.podcast-links a:hover {
  background: var(--navy);
  color: var(--cream-warm);
  transform: translateY(-1px);
}

/* The external-link Insight card keeps its hover lift */
.r-card-v8--link { text-decoration: none; }

@media (max-width: 640px) {
  .podcast-item { grid-template-columns: 88px 1fr; gap: 16px; }
  .podcast-img { width: 88px; }
  .r-accordion-inner { padding: 22px 20px 26px; }
}

/* ============================================================
   Resource Hub v15-r2 — shared detail panel (replaces inline accordion)
   ============================================================ */
button.r-trigger {
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: transform 0.3s var(--ease, ease);
}
button.r-trigger:hover { transform: translateY(-3px); }
button.r-trigger:focus-visible {
  outline: 2px solid var(--lavender);
  outline-offset: 6px;
  border-radius: 16px;
}
button.r-trigger.is-active {
  transform: translateY(-3px);
}
button.r-trigger.is-active .r-card-v8-cta .r-toggle-icon {
  transform: rotate(45deg);
}
button.r-trigger .r-toggle-icon {
  display: inline-block;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  transition: transform 0.3s var(--ease, ease);
}
button.r-trigger.is-active::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid var(--cream-warm);
  z-index: 2;
}

/* v18.15: body scroll lock while a fullscreen modal is open */
body.modal-open { overflow: hidden; }

/* v18.15: fullscreen modal (was inline panel) */
.r-detail-panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(24, 38, 78, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  overflow-y: auto;
}
.r-detail-panel[hidden] { display: none; }

.r-detail {
  background: var(--cream-warm);
  border-radius: 24px;
  padding: 48px 56px 56px;
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: 88vh;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s var(--ease, ease), transform 0.4s var(--ease, ease);
}
.r-detail[hidden] { display: none; }
.r-detail.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.r-detail-num {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pop-pink);
  margin-bottom: 12px;
}
.r-detail-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 24px;
}
.r-detail p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.95;
  color: var(--navy);
  margin: 0 0 16px;
  max-width: 760px;
}
.r-detail-note {
  font-size: 13px;
  color: var(--text-soft, #555);
  margin-top: 4px;
}
.r-detail .btn-primary {
  display: inline-block;
  margin-top: 16px;
  padding: 14px 26px;
  background: var(--navy);
  color: var(--cream-warm);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.r-detail .btn-primary:hover { background: var(--lavender); transform: translateY(-1px); }

.r-detail-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--navy);
  color: var(--cream-warm);
  font-size: 22px;
  font-weight: 500;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 3;
}
.r-detail-close:hover { background: var(--pop-pink); color: var(--navy); transform: rotate(90deg); }

@media (max-width: 640px) {
  .r-detail { padding: 32px 24px 36px; }
  .r-detail-close { top: 12px; right: 12px; width: 36px; height: 36px; }
}

/* ============================================================
   v15 — Members inline detail panel
   ============================================================ */
button.m-featured {
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: transform 0.3s var(--ease, ease);
}
button.m-featured:hover { transform: translateY(-3px); }
button.m-featured:focus-visible {
  outline: 2px solid var(--lavender);
  outline-offset: 6px;
  border-radius: 12px;
}
button.m-featured.is-active {
  transform: translateY(-3px);
}
button.m-featured.is-active .m-featured-name::after {
  content: ' ●';
  color: var(--pop-pink);
  font-size: 0.7em;
  vertical-align: super;
}

.m-detail-panel {
  margin-top: 48px;
  position: relative;
}
.m-detail-panel[hidden] { display: none; }

.m-detail {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  background: var(--cream-warm);
  border-radius: 24px;
  padding: 48px;
  position: relative;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s var(--ease, ease), transform 0.4s var(--ease, ease);
}
.m-detail[hidden] { display: none; }
.m-detail.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.m-detail-photo {
  width: 280px;
  height: 280px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--blush);
}
.m-detail-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.m-detail-photo.m-list-photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lavender);
  color: var(--cream-warm);
}
.m-detail-photo.m-list-photo--placeholder span {
  font-family: var(--font-display);
  font-size: 80px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.m-detail-body { min-width: 0; }
.m-detail-name {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 6px;
}
.m-detail-name small {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-soft, #555);
  margin-top: 8px;
}
.m-detail-path {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--lavender);
  margin: 0 0 28px;
}
.m-detail-h {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pop-pink);
  margin: 24px 0 8px;
}
.m-detail-h:first-of-type { margin-top: 0; }
.m-detail-body p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.95;
  color: var(--navy);
  margin: 0 0 4px;
}
.m-detail-cta {
  margin-top: 32px !important;
}
.m-detail-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--navy);
  color: var(--cream-warm);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.m-detail-close:hover {
  background: var(--lavender);
  transform: rotate(90deg);
}
@media (max-width: 720px) {
  .m-detail {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 24px;
  }
  .m-detail-photo {
    width: 100%;
    max-width: 240px;
    height: auto;
    aspect-ratio: 1/1;
    margin: 0 auto;
  }
  .m-detail-close { top: 12px; right: 12px; width: 36px; height: 36px; }
}

/* Members section foot — link to About full member list */
.members-foot {
  margin-top: 56px;
  text-align: center;
}
.members-foot-link {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  padding: 16px 32px;
  border: 1.5px solid var(--navy);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.members-foot-link:hover {
  background: var(--navy);
  color: var(--cream-warm);
  transform: translateY(-2px);
}

/* ============================================================
   v15 SUBPAGES — Bricolage Grotesque + 4-color tile system
   Used by about / how-it-works / for-companies / contact
   ============================================================ */

/* --- Page Hero v15 — large typography + grid bg + dot-icon corners --- */
.page-hero-v15 {
  position: relative;
  background-color: var(--blush);
  /* v16-r2: patterns start exactly at top-left edge (no offset gap) */
  background-image:
    linear-gradient(90deg, transparent 49.7%, rgba(24,38,78,0.10) 49.7%, rgba(24,38,78,0.10) 50.3%, transparent 50.3%),
    linear-gradient(0deg, transparent 49.7%, rgba(24,38,78,0.10) 49.7%, rgba(24,38,78,0.10) 50.3%, transparent 50.3%),
    radial-gradient(circle, rgba(24,38,78,0.12) 18%, transparent 18%);
  background-size: 200px 200px, 200px 200px, 16px 16px;
  background-position: -100px 0, 0 -100px, -8px -8px;
  padding: 88px 0 60px;
  overflow: hidden;
}
/* v18.6: removed ::before horizontal accent line — it sometimes overlapped
   with one of the 200px-spacing grid lines, creating a visible "double line"
   artifact near the FV bottom. The grid pattern alone already provides
   adequate visual structure. */
.page-hero-v15::before { content: none; }
.page-hero-v15::after {
  /* v18.4: smooth dot/grid fade-out at the bottom 140px (matches index .hero) */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 140px;
  background: linear-gradient(180deg, rgba(239, 220, 212, 0) 0%, var(--blush) 100%);
  pointer-events: none;
  z-index: 1;
}
.page-hero-v15 .wrap { position: relative; z-index: 2; }
.page-hero-v15-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 32px;
}
.page-hero-v15-eyebrow::before {
  content: '';
  width: 32px;
  height: 1.5px;
  background: var(--navy);
}
.page-hero-v15-title {
  font-family: var(--font-display);
  font-size: clamp(44px, 6.5vw, 92px);
  font-weight: 500;
  color: var(--navy);
  line-height: 1.02;
  letter-spacing: -0.045em;
  margin: 0 0 28px;
  max-width: 1000px;
}
.page-hero-v15-title em {
  font-style: normal;
  color: var(--lavender);
}
.page-hero-v15-title em.pink { color: var(--pop-pink); }
.page-hero-v15-title em.sage { color: var(--sage); }
.page-hero-v15-lead {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.25vw, 19px);
  color: var(--navy);
  opacity: 0.78;
  line-height: 1.85;
  max-width: 720px;
  margin: 0;
}
.page-hero-v15-meta {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Corner dot icons inherit from .hero-corner-icon / .dot-icon */

/* --- Generic v15 section wrapper --- */
.v15-section { padding: 32px 0 48px; position: relative; }
.v15-section--blush { background: var(--blush); }
.v15-section--cream { background: var(--cream-warm); }
.v15-section--lavender { background: var(--lavender); color: var(--cream-warm); }
.v15-section--sage { background: var(--sage); color: var(--cream-warm); }
.v15-section--pink { background: var(--pop-pink); color: var(--navy); }
.v15-section--navy { background: var(--navy); color: var(--cream-warm); }

.v15-section .eyebrow { color: inherit; opacity: 0.7; }
.v15-section .eyebrow::before { background: currentColor; opacity: 0.8; }
.v15-section--blush .eyebrow,
.v15-section--cream .eyebrow { color: var(--navy); opacity: 1; }
.v15-section--blush .eyebrow::before,
.v15-section--cream .eyebrow::before { background: var(--navy); }

.v15-headline {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.4vw, 60px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.038em;
  color: inherit;
  margin: 8px 0 16px;
  max-width: 900px;
}
.v15-headline em {
  font-style: normal;
  color: var(--lavender);
}
.v15-section--lavender .v15-headline em { color: var(--cream-warm); }
.v15-section--sage .v15-headline em { color: var(--pop-pink); }
.v15-section--pink .v15-headline em { color: var(--navy); }
.v15-lead {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.85;
  opacity: 0.86;
  max-width: 720px;
  margin: 0 0 24px;
}

/* --- Big card (lavender / sage / pink / navy variants) --- */
.v15-bigcard {
  border-radius: 28px;
  padding: 64px 64px 72px;
  position: relative;
  overflow: hidden;
}
.v15-bigcard--lavender { background: var(--lavender); color: var(--cream-warm); }
.v15-bigcard--sage { background: var(--sage); color: var(--cream-warm); }
.v15-bigcard--pink { background: var(--pop-pink); color: var(--navy); }
.v15-bigcard--cream { background: var(--cream-warm); color: var(--navy); }
.v15-bigcard--navy { background: var(--navy); color: var(--cream-warm); }
.v15-bigcard-dot {
  position: absolute;
  top: 32px;
  right: 36px;
  width: 80px;
  height: 60px;
  opacity: 0.85;
}
.v15-bigcard-dot svg { width: 100%; height: 100%; }
.v15-bigcard-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: inherit;
  max-width: 760px;
  margin: 0 0 28px;
}
.v15-bigcard-body p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.95;
  margin: 0 0 16px;
  max-width: 700px;
}

/* --- About: Manifesto card --- */
.about-manifesto-card {
  background: var(--lavender);
  color: var(--cream-warm);
  border-radius: 28px;
  padding: 56px 56px 56px;
  position: relative;
  overflow: hidden;
  margin-top: 12px;
}
.about-manifesto-narrative {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.04em;
  opacity: 0.75;
  line-height: 1.95;
  max-width: 540px;
  margin: 0 0 28px;
  padding-left: 20px;
  border-left: 2px solid var(--cream-warm);
}
.about-manifesto-promise {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.12;
  margin: 0 0 28px;
  max-width: 840px;
}
.about-manifesto-body p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.95;
  margin: 0 0 16px;
  max-width: 760px;
  opacity: 0.93;
}

/* v18.3 — Photo + text grid inside the manifesto card */
.about-manifesto-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: start;
  margin-top: 8px;
}
.about-manifesto-photo {
  background: var(--cream-warm);
  border-radius: 24px;
  padding: 8px;
}
.about-manifesto-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 18px;
}
.about-manifesto-photo-caption {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--navy);
  padding: 14px 8px 8px;
  line-height: 1.5;
}
.about-manifesto-text {
  /* container for narrative + body */
}
/* Wantedly CTA card — strong visual at the bottom of the manifesto card */
.about-manifesto-cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 40px;
  padding: 28px 32px;
  background: var(--navy);
  color: var(--cream-warm);
  border-radius: 18px;
  text-decoration: none;
  transition: transform 0.3s var(--ease, ease), background 0.3s var(--ease, ease);
}
.about-manifesto-cta:hover {
  background: var(--pop-pink);
  color: var(--navy);
  transform: translateY(-2px);
}
.about-manifesto-cta-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pop-pink);
  transition: color 0.3s var(--ease, ease);
}
.about-manifesto-cta:hover .about-manifesto-cta-label { color: var(--navy); }
.about-manifesto-cta-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.about-manifesto-cta-meta {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  opacity: 0.7;
  margin-top: 6px;
}

@media (max-width: 760px) {
  .about-manifesto-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .about-manifesto-photo { max-width: 240px; }
  .about-manifesto-cta { padding: 22px 24px; }
}

/* --- About: Origin (sage band w/ photo) --- */
.about-origin-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  align-items: start;
  margin-top: 24px;
}
.about-origin-photo {
  background: var(--cream-warm);
  border-radius: 24px;
  padding: 8px;
}
.about-origin-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 18px;
}
.about-origin-photo-caption {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  padding: 14px 8px 8px;
}
.about-origin-text p {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 2.05;
  margin: 0 0 18px;
  color: inherit;
}
.about-origin-footnote {
  margin-top: 32px;
  padding: 18px 22px;
  border-radius: 16px;
  background: rgba(255,255,255,0.18);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.85;
}
.about-origin-footnote a {
  color: var(--cream-warm);
  text-decoration: underline;
  font-weight: 500;
}
.about-origin-footnote a:hover { color: var(--pop-pink); }

/* --- About: History timeline w/ dot connector --- */
.about-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  list-style: none;
  margin: 24px 0 0;
}
.about-timeline-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 32px;
  align-items: center;
  padding: 18px 0;
  position: relative;
  border-bottom: 1px solid rgba(24, 38, 78, 0.12);
}
.about-timeline-item:last-child { border-bottom: none; }
.about-timeline-year {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--navy);
}
.about-timeline-event {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.8;
  color: var(--navy);
}

/* --- 4-color number grid (about page) --- */
.about-numbers-v15 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 24px;
}
.about-num-card {
  border-radius: 18px;
  padding: 28px 24px 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 196px;
}
.about-num-card--pink { background: var(--pop-pink); color: var(--navy); }
.about-num-card--lavender { background: var(--lavender); color: var(--cream-warm); }
.about-num-card--sage { background: var(--sage); color: var(--cream-warm); }
.about-num-card--cream { background: var(--cream-warm); color: var(--navy); }
.about-num-card-value {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.2vw, 64px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: auto;
}
.about-num-card-value small {
  font-size: 0.5em;
  font-weight: 500;
  margin-left: 4px;
}
.about-num-card-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.86;
}
.about-num-card-sub {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.7;
  opacity: 0.78;
  margin-top: 2px;
}

/* --- About: Operating company card --- */
.about-company-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  background: var(--navy);
  color: var(--cream-warm);
  border-radius: 20px;
  padding: 32px 40px;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
  margin-top: 12px;
}
.about-company-card:hover { background: #1f2f5e; transform: translateY(-2px); }
.about-company-card h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--cream-warm);
  margin: 0 0 8px;
}
.about-company-card p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.75;
  opacity: 0.78;
  margin: 0;
  max-width: 680px;
}
.about-company-card-arrow {
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--pop-pink);
  flex-shrink: 0;
}

/* --- Steps v15-r2: editorial timeline with mega numbers + vertical line --- */
.steps-v15 {
  position: relative;
  padding-left: 80px;
  margin-top: 24px;
}
.steps-v15::before {
  /* vertical timeline line */
  content: '';
  position: absolute;
  left: 32px;
  top: 30px;
  bottom: 30px;
  width: 2px;
  background: linear-gradient(180deg, var(--pop-pink) 0%, var(--lavender) 33%, var(--sage) 66%, var(--navy) 100%);
  opacity: 0.45;
}
.step-v15 {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  background: var(--cream-warm);
  border-radius: 18px;
  padding: 28px 32px 30px;
  margin-bottom: 16px;
  border: 1px solid rgba(24, 38, 78, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.step-v15:hover {
  transform: translateX(4px);
  box-shadow: 0 14px 32px -18px rgba(24, 38, 78, 0.18);
}
.step-v15::before {
  /* big number dot on the timeline */
  content: '';
  position: absolute;
  left: -64px;
  top: 32px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--cream-warm);
  z-index: 2;
}
.step-v15--pink::before { background: var(--pop-pink); }
.step-v15--lavender::before { background: var(--lavender); }
.step-v15--sage::before { background: var(--sage); }
.step-v15--navy::before { background: var(--navy); }
.step-v15-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-bottom: 4px;
}
.step-v15-num {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-soft);
  opacity: 0.78;
  align-self: center;
}
.step-v15-num-big {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.8vw, 64px);
  font-weight: 500;
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--navy);
}
.step-v15--pink .step-v15-num-big { color: var(--pop-pink); }
.step-v15--lavender .step-v15-num-big { color: var(--lavender); }
.step-v15--sage .step-v15-num-big { color: var(--sage); }
.step-v15--navy .step-v15-num-big { color: var(--navy); }
.step-v15-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-self: center;
  margin-left: auto;
}
.step-v15-tag {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(24, 38, 78, 0.06);
  color: var(--navy);
  border: 1px solid rgba(24, 38, 78, 0.1);
}
.step-v15--pink .step-v15-tag { background: rgba(242, 166, 196, 0.18); border-color: var(--pop-pink); color: var(--pop-pink); }
.step-v15--lavender .step-v15-tag { background: rgba(132, 136, 243, 0.12); border-color: var(--lavender); color: var(--lavender); }
.step-v15--sage .step-v15-tag { background: rgba(136, 166, 137, 0.14); border-color: var(--sage); color: var(--sage); }
.step-v15--navy .step-v15-tag { background: rgba(24,38,78,0.1); border-color: var(--navy); color: var(--navy); }
.step-v15-body h3 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin: 4px 0 12px;
  line-height: 1.18;
}
.step-v15-body p {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--text-soft);
  margin: 0 0 10px;
}
.step-v15-body ul {
  list-style: none;
  padding: 0;
  margin: 12px 0 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 24px;
}
.step-v15-body ul li {
  position: relative;
  padding: 6px 0 6px 18px;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--navy);
}
.step-v15-body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 8px;
  height: 2px;
  background: currentColor;
  opacity: 0.4;
}
@media (max-width: 700px) {
  .steps-v15 { padding-left: 56px; }
  .steps-v15::before { left: 18px; }
  .step-v15::before { left: -54px; }
  .step-v15-body ul { grid-template-columns: 1fr; }
}

/* --- FAQ v15 (accordion-style cards) --- */
.faq-v15 {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-v15-item {
  background: var(--cream-warm);
  border-radius: 14px;
  padding: 24px 28px;
}
.faq-v15-q {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--navy);
  margin: 0 0 12px;
  letter-spacing: -0.015em;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.faq-v15-q::before {
  content: 'Q';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--pop-pink);
  color: var(--navy);
  border-radius: 50%;
  font-size: 13px;
  flex-shrink: 0;
}
.faq-v15-a {
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--text-soft);
  line-height: 1.95;
  margin: 0;
  padding-left: 40px;
}

/* --- For Companies: Stats grid (3 colored cards) --- */
.fc-stats-v15 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.fc-stat-v15 {
  border-radius: 20px;
  padding: 40px 32px 44px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 240px;
}
.fc-stat-v15--pink { background: var(--pop-pink); color: var(--navy); }
.fc-stat-v15--lavender { background: var(--lavender); color: var(--cream-warm); }
.fc-stat-v15--sage { background: var(--sage); color: var(--cream-warm); }
.fc-stat-v15-num {
  font-family: var(--font-display);
  font-size: clamp(56px, 7vw, 96px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin-top: auto;
}
.fc-stat-v15-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.84;
}
.fc-stat-v15-sub {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.75;
  opacity: 0.78;
}

/* --- v18.22 For Companies: Candidate Data (4 donut/ring charts) --- */
.fc-data-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 32px;
}
.fc-donut {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
.fc-donut-ring {
  position: relative;
  width: clamp(110px, 30vw, 150px);
  aspect-ratio: 1;
}
.fc-donut-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fc-donut-track { fill: none; stroke: rgba(24, 38, 78, 0.1); stroke-width: 11; }
.fc-donut-val   { fill: none; stroke-width: 11; stroke-linecap: round; transition: stroke-dasharray 0.6s ease; }
.fc-donut--pink     .fc-donut-val { stroke: var(--pop-pink); }
.fc-donut--lavender .fc-donut-val { stroke: var(--lavender); }
.fc-donut--sage     .fc-donut-val { stroke: var(--sage); }
.fc-donut--navy     .fc-donut-val { stroke: var(--navy); }
.fc-donut-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: clamp(28px, 7vw, 38px);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--navy);
}
.fc-donut-pct small { font-size: 0.5em; margin-left: 1px; }
.fc-donut-label {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--navy);
  opacity: 0.86;
  max-width: 13em;
}

/* --- v18.21 For Companies: Our Strengths (3 differentiator cards) --- */
.fc-strengths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 28px;
}
.fc-strength {
  border-radius: 20px;
  padding: 36px 32px 38px;
  border: 1px solid rgba(24, 38, 78, 0.1);
  background: var(--cream-warm);
}
.fc-strength--pink     { border-top: 5px solid var(--pop-pink); }
.fc-strength--lavender { border-top: 5px solid var(--lavender); }
.fc-strength--sage     { border-top: 5px solid var(--sage); }
.fc-strength h3 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin-bottom: 16px;
}
.fc-strength p {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--navy);
  opacity: 0.84;
}
@media (max-width: 900px) {
  .fc-data-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 8px; }
  .fc-strengths { grid-template-columns: 1fr; }
}

/* --- For Companies: Profile cards (ticket-pill rows) --- */
.fc-profile-block {
  background: var(--cream-warm);
  border-radius: 20px;
  padding: 40px 48px 44px;
  margin-top: 24px;
}
.fc-profile-row {
  padding: 18px 0;
  border-bottom: 1px solid rgba(24, 38, 78, 0.12);
}
.fc-profile-row:last-child { border-bottom: none; }
.fc-profile-row-label {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.6;
  margin-bottom: 14px;
}
.fc-profile-row-tickets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.fc-profile-row-tickets .ticket {
  background: var(--navy);
  color: var(--cream-warm);
  font-size: 13px;
  padding: 8px 16px;
  --notch-bg: var(--cream-warm);
}
.fc-profile-row-tickets .ticket::before,
.fc-profile-row-tickets .ticket::after { background: var(--cream-warm); }

/* --- For Companies: Bizreach badge (override fc-badge) --- */
.fc-badge-v15 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--navy);
  color: var(--cream-warm);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 999px;
  margin-top: 24px;
}
.fc-badge-v15 strong {
  color: var(--pop-pink);
  font-weight: 500;
}
.fc-badge-v15 small {
  font-size: 11px;
  opacity: 0.8;
  letter-spacing: 0.08em;
  text-transform: none;
  font-weight: 500;
}

/* --- Contact: 4-track grid (4 colored cards) --- */
.contact-tracks-v15 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.contact-track-v15 {
  border-radius: 20px;
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  transition: transform 0.25s ease;
  min-height: 260px;
  position: relative;
  overflow: hidden;
}
.contact-track-v15:hover { transform: translateY(-4px); }
.contact-track-v15--pink { background: var(--pop-pink); color: var(--navy); }
.contact-track-v15--lavender { background: var(--lavender); color: var(--cream-warm); }
.contact-track-v15--sage { background: var(--sage); color: var(--cream-warm); }
.contact-track-v15--navy { background: var(--navy); color: var(--cream-warm); }
.contact-track-v15-num {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  opacity: 0.7;
}
.contact-track-v15-num-big {
  position: absolute;
  top: 24px;
  right: 32px;
  font-family: var(--font-display);
  font-size: clamp(72px, 8vw, 120px);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.04em;
  opacity: 0.22;
}
.contact-track-v15 h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: inherit;
  margin: 0;
  line-height: 1.15;
}
.contact-track-v15 p {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.85;
  opacity: 0.85;
  margin: 0;
  flex: 1;
}
.contact-track-v15-action {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.contact-track-v15-action::after { content: '→'; transition: transform 0.2s; }
.contact-track-v15:hover .contact-track-v15-action::after { transform: translateX(4px); }

.contact-note-v15 {
  margin-top: 32px;
  padding: 22px 28px;
  background: var(--cream-warm);
  border-radius: 14px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.85;
  color: var(--text-soft);
}
.contact-note-v15 strong {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 10px;
}

/* --- Universal v15 CTA block (v18.3: sage + cream-warm, pop-pink accent) --- */
.cta-v15 {
  background: var(--sage);
  color: var(--cream-warm);
  padding: 64px 0;
  position: relative;
  overflow: hidden;
}
.cta-v15 .page-hero-v15-eyebrow { color: var(--pop-pink) !important; }
.cta-v15 .page-hero-v15-eyebrow::before { background: var(--pop-pink); }
.cta-v15-title {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.5vw, 76px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--cream-warm);
  margin: 12px 0 16px;
  max-width: 840px;
}
.cta-v15-title em {
  font-style: normal;
  color: var(--pop-pink);
}
.cta-v15-lead {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.85;
  color: rgba(248,239,229,0.82);
  max-width: 600px;
  margin: 0 0 28px;
}
.cta-v15-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--pop-pink);
  color: var(--navy);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 18px 32px;
  border-radius: 999px;
  transition: background 0.2s, transform 0.2s, color 0.2s;
}
.cta-v15-btn:hover { background: var(--cream-warm); color: var(--navy); transform: translateY(-2px); }

/* --- Responsive --- */
@media (max-width: 900px) {
  .about-origin-layout { grid-template-columns: 1fr; }
  .about-origin-photo { max-width: 240px; }
  .about-numbers-v15 { grid-template-columns: repeat(2, 1fr); }
  .step-v15 { grid-template-columns: 1fr; gap: 16px; padding: 24px; }
  .fc-stats-v15 { grid-template-columns: 1fr; }
  .contact-tracks-v15 { grid-template-columns: 1fr; }
  /* v18.10: removed `background-size: 48px 48px` because it overrode ALL three
     background-images (2 grid lines + 1 dot pattern) to 48px, making the dots
     huge on mobile. Inherit the default 3-value background-size from
     .page-hero-v15 base (200px/200px/16px) to match TOP page. */
  .page-hero-v15 { padding: 80px 0 56px; }
  .page-hero-v15::before { bottom: 56px; }
  .v15-section { padding: 72px 0; }
  .about-manifesto-card { padding: 40px 28px; }
  .fc-profile-block { padding: 32px 28px; }
  .about-company-card { flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px; }
  .about-timeline-item { grid-template-columns: 90px 1fr; gap: 16px; }
  .cta-v15 { padding: 64px 0; }
}

/* ============================================================
   v18.4 — Hero: Major Players翻案 / rotating headline + dot-art glyphs
   - 82vh hero, centered
   - 3 phrases rotate every 3.8s + 0.4s fade (managed by main.js)
   - Inline SVG dot-art glyphs with continuous breathing animation
   - Font: Bricolage Grotesque Variable 500 (refined, lighter than v18.3)
   - Bottom 140px: blush gradient mask to fade dots/grid smoothly
   ============================================================ */
section.hero {
  /* v18.4-r3: FV height restored to 82vh (user wants tall hero), but the
     scroll arrow is now position: absolute pinned to the section bottom, and
     the next section's padding-top is reduced — so the *visible gap* from
     arrow to "Who we are" eyebrow is ~60px instead of ~360px, while keeping
     the spacious centered headline aesthetic (Major Players pattern). */
  min-height: 86vh;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  /* v18.30: extra bottom padding reserves space for the FV media ticker
     (.hero-media is absolutely pinned to the bottom) so it never overlaps
     the centered headline. */
  padding: 96px 48px 228px !important;
  text-align: center;
  position: relative;
}
section.hero::after {
  /* v18.4-r3: 140px bottom fade — overlays the empty area below the centered
     headline, smoothly dissolving the dot/grid pattern as it approaches the
     section bottom where the scroll arrow sits. */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 140px;
  background: linear-gradient(180deg, rgba(239, 220, 212, 0) 0%, var(--blush) 100%);
  pointer-events: none;
  z-index: 1;
}
section.hero .hero-inner {
  text-align: center;
  width: 100%;
  max-width: 1200px;
  position: relative;
  z-index: 2;
}

.hero-rotating {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(36px, 6.4vw, 92px);
  font-weight: 500;
  font-variation-settings: "wght" 500;
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--navy);
  margin: 0 auto;
  min-height: 2.6em; /* hold space for tallest 2-line phrase */
}
.hero-phrase {
  display: block;
  position: absolute;
  inset: 0;
  margin: auto 0;
  height: max-content;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.hero-phrase.is-visible { opacity: 1; }
.hero-phrase--single { white-space: nowrap; }
/* v18.22: keep each clause (the text between <br>) on a single line so
   trailing particles like 「を」「が」 never orphan onto their own line.
   Mobile font is sized so the longest clause still fits within the viewport. */
.hero-nb { white-space: nowrap; }
@media (max-width: 720px) {
  .hero-phrase--single { white-space: normal; }
  .hero-rotating { min-height: 3.4em; font-size: clamp(25px, 7vw, 52px); }
}
/* v18.32: PCのみ見出しを小さく（スマホ≤720 / タブレット721-1024 は現状維持） */
@media (min-width: 1025px) {
  .hero-rotating { font-size: clamp(52px, 4.6vw, 72px); }
}

/* Inline dot-art glyph (sized relative to font) */
.hero-glyph {
  display: inline-block;
  vertical-align: -0.16em;
  margin: 0 0.1em;
}

/* Dot breathing animation — applied to circles inside SVG <symbol> */
@keyframes heroDotBreath {
  0%, 100% { opacity: 0.55; transform: scale(0.78); }
  50%      { opacity: 1;    transform: scale(1.14); }
}
.g-dots circle {
  animation: heroDotBreath 2.4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.g-dots circle:nth-child(2n)  { animation-delay: 0.3s; }
.g-dots circle:nth-child(3n)  { animation-delay: 0.6s; }
.g-dots circle:nth-child(5n)  { animation-delay: 0.9s; }
.g-dots circle:nth-child(7n)  { animation-delay: 1.2s; }
.g-dots circle:nth-child(11n) { animation-duration: 3.2s; }
.g-dots circle:nth-child(13n) { animation-duration: 1.9s; }

/* Scroll-down circle button */
.hero-scroll-down {
  /* v18.9: moved up from bottom: 28px → 96px to sit closer to the headline
     and feel less anchored to the section edge. */
  position: absolute;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0;
  border-radius: 50%;
  background: var(--lavender);
  color: var(--cream-warm);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.hero-scroll-down:hover {
  background: var(--navy);
  transform: translateY(2px);
}

/* Pause animation on hero hover (jp配慮) */
.hero:hover .g-dots circle,
.hero:hover .hero-phrase { animation-play-state: paused; }

/* v18.4-r3: tight transition from FV to the section that follows it.
   Overrides the global "padding-top: 88px !important" on .numbers etc. */
section.hero + .numbers,
section.hero + section { padding-top: 32px !important; }

/* ============================================================
   v18.28 — お知らせ（FV直下の最新1件バー・外部リンク）
   ============================================================ */
.news-bar-section { padding: 0 0 4px; }
.news-bar-section + .numbers { padding-top: 24px !important; }
.news-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--cream-warm);
  border: 1px solid rgba(24, 38, 78, 0.08);
  border-radius: 100px;
  padding: 12px 18px 12px 14px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.news-bar:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -14px rgba(24, 38, 78, 0.3);
  border-color: rgba(132, 136, 243, 0.5);
}
.news-bar-tag {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--pop-pink);
  color: var(--navy);
  padding: 5px 13px;
  border-radius: 100px;
}
.news-bar-date {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--navy);
  opacity: 0.55;
}
.news-bar-title {
  min-width: 0;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news-bar-arrow {
  flex-shrink: 0;
  margin-left: auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(24, 38, 78, 0.25);
  color: var(--navy);
  font-size: 13px;
  transition: transform 0.25s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.news-bar:hover .news-bar-arrow {
  background: var(--lavender);
  color: var(--cream-warm);
  border-color: var(--lavender);
  transform: rotate(45deg);
}
@media (max-width: 640px) {
  .news-bar { flex-wrap: wrap; gap: 10px 12px; border-radius: 18px; padding: 14px 16px; }
  .news-bar-tag { order: 1; }
  .news-bar-date { order: 2; }
  .news-bar-arrow { order: 3; }
  .news-bar-title { order: 4; flex-basis: 100%; white-space: normal; font-size: 14px; line-height: 1.6; }
}

/* ============================================================
   v18.30 — FV下端の媒体ティッカー（学習コンテンツ・差別化の直感訴求）
   サイト既存のマーキー手法に合わせたオートスライド。ホバーで停止 /
   prefers-reduced-motion で停止＋手動スクロール。FV(.hero)内の最下部に内蔵。
   ============================================================ */
.hero-media {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding-bottom: 22px;
  z-index: 3;
}
/* v18.31: single static headline (rotation removed) + cue line below it */
/* v18.33: 末尾「。」の右側余白でインクが約0.32em左に寄るため、右へ寄せて
   光学的に中央へ合わせる（emなので全サイズで比例して効く） */
.hero-rotating--static { min-height: 0; transform: translateX(0.32em); }
.hero-rotating em { font-style: normal; color: var(--lavender); }
.hero-media-cue {
  margin: 9px 0 0;
  font-family: var(--font-display);
  font-size: clamp(12px, 1.3vw, 14px);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--navy);
  opacity: 0.6;
}
.hero-media .media-card { width: 200px; }
.hero-media .media-card-title { font-size: 13.5px; padding: 8px 14px 14px; }
.hero-media .media-card-tag { margin: 13px 0 0 13px; }
.media-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.media-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: mediaScroll 48s linear infinite;
}
.media-marquee:hover .media-track { animation-play-state: paused; }
@keyframes mediaScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.media-card {
  flex-shrink: 0;
  width: 264px;
  background: var(--cream-warm);
  border: 1px solid rgba(24, 38, 78, 0.08);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.media-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -18px rgba(24, 38, 78, 0.35);
}
.media-card-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--blush);
}
.media-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-card-tag {
  align-self: flex-start;
  margin: 16px 0 0 16px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 100px;
}
.media-card-tag--pink     { background: var(--pop-pink); color: var(--navy); }
.media-card-tag--lavender { background: var(--lavender); color: var(--cream-warm); }
.media-card-tag--sage     { background: var(--sage);     color: var(--cream-warm); }
.media-card-tag--navy     { background: var(--navy);     color: var(--cream-warm); }
.media-card-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--navy);
  padding: 10px 16px 18px;
}
@media (prefers-reduced-motion: reduce) {
  .media-track { animation: none; }
  .media-marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 640px) {
  section.hero { padding-bottom: 178px !important; }
  .hero-media { padding-bottom: 16px; }
  .hero-media-label { font-size: 11.5px; margin-bottom: 10px; }
  .hero-media .media-card { width: 168px; }
  .media-track { gap: 12px; animation-duration: 38s; }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .g-dots circle { animation: none !important; }
  .hero-phrase { transition: none !important; }
}

/* Hide deprecated v18.2 hero elements (defensive — markup already removed) */
.hero-brand,
.hero-corner-icon,
.hero-news,
section.hero .hero-message,
section.hero .hero-rotator,
section.hero .hero-line { display: none !important; }

/* ============================================================
   v18.4 — Contact Tracks: Outlined frame + inline bullet list
   - Featured (01) = navy-outlined frame with corner label
   - Secondary (02-04) = hairline-divided rows below the frame
   - Hover: frame fills lightly / bullets shift right
   ============================================================ */
.contact-tracks-v18 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 920px;
  margin: 0 auto;
}

/* --- Featured frame (01) --- */
.contact-tracks-v18-feat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 40px 40px 32px;
  border: 2px solid var(--navy);
  border-radius: 20px;
  text-decoration: none;
  color: var(--navy);
  background: transparent;
  transition: background 0.25s ease, transform 0.25s ease;
}
.contact-tracks-v18-feat:hover {
  background: rgba(24, 38, 78, 0.04);
  transform: translateY(-2px);
}
.contact-tracks-v18-feat-corner {
  position: absolute;
  top: -10px;
  left: 32px;
  background: var(--blush);
  padding: 0 12px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.7;
}
.contact-tracks-v18-feat-cat {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--lavender);
}
.contact-tracks-v18-feat-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--navy);
  margin: 0;
}
.contact-tracks-v18-feat-desc {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--navy);
  opacity: 0.78;
  margin: 4px 0 0;
  max-width: 88%;
}
.contact-tracks-v18-feat-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.contact-tracks-v18-feat-action {
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  background: var(--navy);
  color: var(--cream-warm);
  border-radius: 100px;
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: 0.06em;
  transition: background 0.2s ease, transform 0.2s ease;
}
.contact-tracks-v18-feat:hover .contact-tracks-v18-feat-action {
  background: var(--lavender);
}
.contact-tracks-v18-feat-meta {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  opacity: 0.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
}

/* --- Bullet list (02-04) --- */
.contact-tracks-v18-list {
  display: flex;
  flex-direction: column;
  padding: 0 8px;
}
.contact-tracks-v18-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 22px 16px;
  border-bottom: 1px solid rgba(24, 38, 78, 0.15);
  text-decoration: none;
  color: var(--navy);
  transition: padding-left 0.2s ease, background 0.2s ease;
}
.contact-tracks-v18-item:last-child { border-bottom: none; }
.contact-tracks-v18-item:hover {
  padding-left: 24px;
  background: rgba(255, 255, 255, 0.35);
}
.contact-tracks-v18-item-num {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--navy);
  opacity: 0.45;
}
.contact-tracks-v18-item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.contact-tracks-v18-item-cat {
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.55;
  font-weight: 500;
}
.contact-tracks-v18-item-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--navy);
}
.contact-tracks-v18-item-arrow {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--navy);
  opacity: 0.5;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.contact-tracks-v18-item:hover .contact-tracks-v18-item-arrow {
  transform: translateX(6px);
  opacity: 1;
}

/* Mobile */
@media (max-width: 640px) {
  .contact-tracks-v18-feat { padding: 32px 24px 26px; }
  .contact-tracks-v18-feat-corner { left: 20px; }
  .contact-tracks-v18-feat-desc { max-width: 100%; }
  .contact-tracks-v18-feat-bottom { flex-direction: column; align-items: flex-start; }
  .contact-tracks-v18-item { grid-template-columns: 48px 1fr auto; gap: 12px; padding: 18px 8px; }
  .contact-tracks-v18-item-num { font-size: 22px; }
  .contact-tracks-v18-item-title { font-size: 15px; }
}

/* ============================================================
   v18.20 — About: "What we mean" — narrative intro (photo + rhythm)
   Replaces the v18.7 Document/Memo style. First content for visitors
   who want to know about Gaudi Career: lead statement → short intro →
   founder portrait + pull quote → two short subheaded blocks →
   navy mission band → story link. No numbered lists.
   All classes namespaced `wm-` to avoid collisions with site styles.
   ============================================================ */
.wm-inner { max-width: 880px; margin: 0 auto; }
.wm-kicker {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--pop-pink);
  margin-bottom: 22px;
}
.wm-lead {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--navy);
  margin: 0 0 36px;
  max-width: 13em;
}
.wm-lead em { font-style: normal; color: var(--pop-pink); }
.wm-intro {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 2.0;
  color: var(--navy);
  opacity: 0.86;
  max-width: 36em;
  margin: 0;
  /* break only at punctuation / separators, never mid-word (施工管理 etc.) */
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.wm-intro strong { font-weight: 500; opacity: 1; }
/* v18.24-r3: break the What we mean body copy only at punctuation/separators,
   never mid-word (実現する→実／現, 制作→制／作 etc.) — same rule as .wm-intro */
.wm-bridge, .wm-origin-body p, .wm-stance-block p {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* founder portrait + text + pull quote */
.wm-origin {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 48px;
  align-items: center;
  margin: 76px 0 0;
}
.wm-figure { margin: 0; }
.wm-figure img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  display: block;
}
.wm-cap {
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--navy);
  opacity: 0.62;
  margin-top: 14px;
}
.wm-cap b { font-weight: 500; opacity: 1; }
.wm-o-eyebrow {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
  margin-bottom: 20px;
}
.wm-pull {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.42;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 22px;
  position: relative;
  padding-left: 22px;
}
.wm-pull::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 4px;
  border-radius: 4px;
  background: var(--pop-pink);
}
.wm-origin-body p {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.95;
  color: var(--navy);
  opacity: 0.84;
  margin: 0;
}

/* bridge statement */
.wm-bridge {
  margin: 72px 0 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 2.0;
  color: var(--navy);
  opacity: 0.9;
  max-width: 38em;
}
.wm-bridge strong { font-weight: 500; border-bottom: 2px solid var(--pop-pink); }

/* two short subheaded blocks (no numbers) */
.wm-stance {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  margin: 56px 0 0;
  max-width: 40em;
}
.wm-stance-block h4 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  color: var(--navy);
}
.wm-stance-block p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.95;
  color: var(--navy);
  opacity: 0.84;
  margin: 0;
}

/* mission — navy band for contrast */
.wm-mission {
  margin: 72px 0 0;
  background: var(--navy);
  color: var(--cream-warm);
  border-radius: 22px;
  padding: 48px;
}
.wm-mission .wm-m-lab {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pop-pink);
  display: block;
  margin-bottom: 18px;
}
.wm-mission p {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.7vw, 29px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.015em;
  margin: 0;
}

/* story link — plain underlined text */
.wm-story {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 40px;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1.5px solid var(--pop-pink);
  padding-bottom: 4px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.wm-story:hover { color: var(--lavender); border-color: var(--lavender); }
.wm-story span { transition: transform 0.2s ease; }
.wm-story:hover span { transform: translate(3px, -3px); }

@media (max-width: 720px) {
  .wm-lead { font-size: clamp(28px, 8.5vw, 38px); }
  .wm-intro, .wm-bridge { font-size: 15.5px; line-height: 1.95; }
  .wm-origin { grid-template-columns: 1fr; gap: 26px; margin-top: 52px; }
  .wm-figure img { max-height: 340px; object-fit: cover; }
  .wm-stance { grid-template-columns: 1fr; gap: 30px; margin-top: 40px; }
  .wm-mission { padding: 36px 26px; margin-top: 54px; }
}

/* ============================================================
   v18.7 — Resource Hub: Major Players翻案
   FV-matching blush+grid+dots background, soft semi-white cards,
   ticket-pill CTA in 4 rotating colors.
   ============================================================ */
.resource-hub--mp {
  /* v18.10-r2: solid blush — removed grid+dots pattern that was bleeding
     through the content area. FV keeps dots; this section is plain. */
  background: var(--blush) !important;
  position: relative;
}
.resource-hub--mp .r-card-v8 {
  /* v18.10: opaque background — semi-transparent let section-bg dots bleed
     through the card content area. Use cream-warm for warm contrast against
     the blush section background. */
  background: var(--cream-warm);
  border: none;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.resource-hub--mp .r-card-v8:hover {
  background: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 10px 28px -12px rgba(24, 38, 78, 0.18);
}
.resource-hub--mp .r-card-v8-num {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--navy);
  opacity: 0.6;
  font-weight: 500;
}
.resource-hub--mp .r-card-v8-num::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.3;
}
.resource-hub--mp .r-card-v8-cta {
  position: relative;
  font-weight: 500;
}
.resource-hub--mp .r-card-v8-cta::before,
.resource-hub--mp .r-card-v8-cta::after {
  /* v18.10: notch color matches card bg (was 0.5 white, now opaque cream-warm) */
  content: '';
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cream-warm);
  transform: translateY(-50%);
  transition: background 0.25s ease;
}
.resource-hub--mp .r-card-v8-cta::before { left: -4px; }
.resource-hub--mp .r-card-v8-cta::after { right: -4px; }
.resource-hub--mp .r-card-v8:hover .r-card-v8-cta::before,
.resource-hub--mp .r-card-v8:hover .r-card-v8-cta::after {
  background: #ffffff;
}
/* CTA color cycle: pink → lavender → sage → navy → repeat */
.resource-hub--mp .r-card-v8:nth-child(4n+1) .r-card-v8-cta { background: var(--pop-pink); color: var(--navy); }
.resource-hub--mp .r-card-v8:nth-child(4n+2) .r-card-v8-cta { background: var(--lavender); color: var(--cream-warm); }
.resource-hub--mp .r-card-v8:nth-child(4n+3) .r-card-v8-cta { background: var(--sage); color: var(--cream-warm); }
.resource-hub--mp .r-card-v8:nth-child(4n+4) .r-card-v8-cta { background: var(--navy); color: var(--cream-warm); }

/* ============================================================
   v18.7 — Contact Tracks: Major Players翻案 (4 equal ticket pills)
   No hierarchy — all four tracks have equal visual weight.
   Notches on both sides, alternating accent colors.
   ============================================================ */
.contact-tracks-mp {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 880px;
  margin: 24px auto 0;
}
.contact-tracks-mp-pill {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 24px 36px;
  border-radius: 999px;
  text-decoration: none;
  position: relative;
  transition: transform 0.25s, padding 0.25s;
}
.contact-tracks-mp-pill::before,
.contact-tracks-mp-pill::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blush);
  transform: translateY(-50%);
}
.contact-tracks-mp-pill::before { left: -10px; }
.contact-tracks-mp-pill::after { right: -10px; }
.contact-tracks-mp-pill:hover { transform: translateY(-2px); padding-left: 44px; }
.contact-tracks-mp-pill--navy { background: var(--navy); color: var(--cream-warm); }
.contact-tracks-mp-pill--lav  { background: var(--lavender); color: var(--cream-warm); }
.contact-tracks-mp-pill--sage { background: var(--sage); color: var(--cream-warm); }
.contact-tracks-mp-pill--pink { background: var(--pop-pink); color: var(--navy); }
.contact-tracks-mp-num {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  opacity: 0.78;
}
.contact-tracks-mp-pill--pink .contact-tracks-mp-num { opacity: 0.55; }
.contact-tracks-mp-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.contact-tracks-mp-cat {
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.72;
  font-weight: 500;
}
.contact-tracks-mp-title {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 500;
}
.contact-tracks-mp-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: var(--font-display);
  transition: transform 0.25s ease, background 0.25s ease;
  flex-shrink: 0;
}
.contact-tracks-mp-pill--pink .contact-tracks-mp-arrow { background: rgba(24, 38, 78, 0.18); }
.contact-tracks-mp-pill:hover .contact-tracks-mp-arrow { transform: rotate(-45deg); background: rgba(255, 255, 255, 0.32); }
.contact-tracks-mp-pill--pink:hover .contact-tracks-mp-arrow { background: rgba(24, 38, 78, 0.28); }
@media (max-width: 640px) {
  .contact-tracks-mp-pill { grid-template-columns: 40px 1fr 32px; gap: 14px; padding: 20px 26px; }
  .contact-tracks-mp-pill:hover { padding-left: 32px; }
  .contact-tracks-mp-pill::before,
  .contact-tracks-mp-pill::after { width: 14px; height: 14px; }
  .contact-tracks-mp-num { font-size: 22px; }
  .contact-tracks-mp-title { font-size: 15px; }
  .contact-tracks-mp-arrow { width: 32px; height: 32px; font-size: 13px; }
}

/* v18.14: static category cards (non-clickable) — no arrow column, no hover shift */
.contact-tracks-mp--static .contact-tracks-mp-pill {
  grid-template-columns: 60px 1fr;
  cursor: default;
}
.contact-tracks-mp--static .contact-tracks-mp-pill:hover {
  transform: none;
  padding-left: 36px;
}
@media (max-width: 640px) {
  .contact-tracks-mp--static .contact-tracks-mp-pill { grid-template-columns: 40px 1fr; }
  .contact-tracks-mp--static .contact-tracks-mp-pill:hover { padding-left: 26px; }
}

/* v18.15: contact accordion (02-04 expandable) */
.contact-acc { display: flex; flex-direction: column; }
.contact-acc-trigger {
  width: 100%;
  border: none;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.contact-acc-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 500;
  flex-shrink: 0;
  transition: transform 0.25s ease, background 0.25s ease;
}
.contact-tracks-mp-pill--pink .contact-acc-icon { background: rgba(24, 38, 78, 0.18); }
.contact-acc-trigger[aria-expanded="true"] .contact-acc-icon { transform: rotate(45deg); }
.contact-acc-panel {
  background: var(--cream-warm);
  border-radius: 14px;
  margin-top: 8px;
  padding: 22px 26px;
}
.contact-acc-panel p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.85;
  color: var(--navy);
  margin: 0 0 10px;
}
.contact-acc-panel p:last-child { margin-bottom: 0; }
.contact-acc-mail { opacity: 0.9; }
.contact-acc-email {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--lavender);
  user-select: all;
}

/* v18.14: email guidance block (replaces mailto links) — retained for reference but unused after v18.15 */
.contact-mailbox {
  margin: 28px auto 0;
  max-width: 880px;
  text-align: center;
  padding: 36px 32px;
  background: var(--navy);
  color: var(--cream-warm);
  border-radius: 18px;
}
.contact-mailbox-label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pop-pink);
  font-weight: 500;
}
.contact-mailbox-email {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(26px, 4.4vw, 40px);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 12px 0 16px;
  color: var(--cream-warm);
  user-select: all;
}
.contact-mailbox-note {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.85;
  opacity: 0.82;
  margin: 0 auto;
  max-width: 540px;
}

/* ============================================================
   v18.12 — Members: static (non-interactive) cards for new members
   without detail panels (ando / murakami / sugiyama / koizumi).
   ============================================================ */
.m-featured--static { cursor: default; }
.m-featured--static:hover { transform: none; }

/* About page: scene strips — work photos distributed between sections */
.about-scene {
  width: 100%;
  height: 320px;
  overflow: hidden;
  background: var(--blush);
  position: relative;
}
.about-scene img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: brightness(0.95);
}
@media (max-width: 768px) {
  .about-scene { height: 200px; }
}
@media (max-width: 480px) {
  .about-scene { height: 160px; }
}

/* ============================================================
   v18.9 — Who we are statement (B-2: stairs + skyline inline dots)
   Major Players翻案 — minimal: eyebrow + statement with inline dot glyphs only.
   ============================================================ */
.who-statement {
  font-family: var(--font-display);
  /* v18.26: 2-line layout (forced break via <br>). Font scales with the
     viewport so both ~22-char lines fit on one line each at 360px+; on very
     narrow screens it wraps at punctuation only (keep-all), never mid-word. */
  font-size: clamp(14px, 3.85vw, 42px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.035em;
  color: var(--navy);
  margin: 0 0 56px;
  max-width: 1000px;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.who-emph {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--lavender);
  letter-spacing: -0.01em;
}
.who-statement em {
  font-style: normal;
  color: var(--lavender);
}
.who-glyph {
  display: inline-block;
  vertical-align: -0.14em;
  margin: 0 4px;
}
/* Breathing animation: covered by existing .g-dots circle rule from v18.3 hero CSS */

/* v18.19 — Who we are: member photo marquee は全カット（HTML/CSS削除済み） */

/* ============================================================
   v18.8 — How It Works: Step 01 に Members / Stories 動線
   ============================================================ */
.step-v15-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.step-v15-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: var(--cream-warm);
  border: 1px solid rgba(24, 38, 78, 0.12);
  border-radius: 100px;
  text-decoration: none;
  color: var(--navy);
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.step-v15-link:hover {
  background: #ffffff;
  border-color: var(--lavender);
  transform: translateY(-1px);
}
.step-v15-link-cat {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lavender);
  font-weight: 500;
}
.step-v15-link-title {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.step-v15-link-arrow {
  font-size: 14px;
  opacity: 0.55;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.step-v15-link:hover .step-v15-link-arrow { transform: translateX(3px); opacity: 1; }

/* ============================================================
   v18.8 — For Companies: Candidate Profile dot-art accent
   Sage building cluster, top-right of section, breathing animation
   ============================================================ */
.fc-profile-section .wrap { position: relative; }
.fc-profile-dotart {
  position: absolute;
  top: -8px;
  right: 12px;
  pointer-events: none;
  z-index: 1;
  width: 120px;
  opacity: 0.85;
}
.fc-profile-dotart svg { display: block; width: 100%; height: auto; }
.fc-profile-dotart .fc-dots circle {
  animation: fcDotBreath 2.6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.fc-profile-dotart .fc-dots circle:nth-child(2n)  { animation-delay: 0.3s; }
.fc-profile-dotart .fc-dots circle:nth-child(3n)  { animation-delay: 0.6s; }
.fc-profile-dotart .fc-dots circle:nth-child(5n)  { animation-delay: 0.9s; }
.fc-profile-dotart .fc-dots circle:nth-child(7n)  { animation-delay: 1.2s; }
.fc-profile-dotart .fc-dots circle:nth-child(11n) { animation-duration: 3.4s; }
@keyframes fcDotBreath {
  0%, 100% { opacity: 0.55; transform: scale(0.8); }
  50%      { opacity: 1;    transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .fc-profile-dotart .fc-dots circle { animation: none !important; }
}
@media (max-width: 900px) {
  .fc-profile-dotart { width: 90px; right: 8px; top: 0; opacity: 0.6; }
}

/* ============================================================
   v18.19 — Mobile FV heading fix (placed late so it wins over the
   base .page-hero-v15-title clamp via source order). On mobile the
   heading was stuck at its 44px clamp floor, so each intended <br>
   line overflowed 375–390px and re-wrapped mid-word
   (ガウディキャリ／ア, スタートアッ／プ, 採／用 …). Shrink to fit
   the longest intended line (~13 chars) within the viewport.
   ============================================================ */
@media (max-width: 640px) {
  .page-hero-v15-title { font-size: clamp(23px, 6.4vw, 34px); letter-spacing: -0.025em; }
}

/* ============================================================
   v18.22 — Site-wide mobile line-break polish.
   Large display headings were pinned to their clamp floor on mobile
   (e.g. v15-headline at 32px), so ~12-char clauses overflowed 375–390px
   and re-wrapped, orphaning a trailing character (問われ／る。).
   Shrink them to fit, and ask the browser to avoid orphan last lines
   where text-wrap is supported (graceful no-op otherwise).
   ============================================================ */
.v15-headline, .members-headline, .voice-headline, .wm-lead,
.num-map-title, .who-statement, .page-hero-v15-title, .v15-lead {
  text-wrap: pretty;
}
@media (max-width: 640px) {
  .v15-headline  { font-size: clamp(23px, 6.1vw, 34px); letter-spacing: -0.022em; }
  .num-map-title { font-size: clamp(22px, 5.9vw, 30px); }
  .wm-lead       { font-size: clamp(26px, 7.2vw, 34px); }
}