/* ============================================================
   Opening Doors — Website3
   Hybrid: official Navy/Brass brand + editorial StoryBrand layer.
   Brand frame (navy #47567e / brass #a79e3f, real logos) holds steady;
   warm bands, Lora serif display, and the navy→brass "bridge" motif
   give it the elevated, narrative feel.
   ============================================================ */

/* ── TOKENS ──────────────────────────────────────────────── */
:root {
  /* Brand core (from design system) */
  --navy:        #47567e;
  --navy-light:  #5a6b94;
  --navy-deep:   #1e4080;
  --brass:       #a79e3f;
  --brass-deep:  #9a8f2d;
  --brass-bright:#bdb44e;

  /* Ink + neutrals */
  --ink:        #1f2937;
  --charcoal:   #2d3748;
  --slate:      #64748b;
  --gray:       #6b7280;
  --gray-muted: #9ca3af;
  --border:     #e5e7eb;
  --hover-fill: #f3f4f6;

  /* Surfaces — editorial warmth layered over the brand */
  --snow:    #ffffff;
  --canvas:  #eceef3;   /* cool light gray, distinct from warm cream + white so bands read */
  --warm:    #faf7f2;   /* warm off-white storytelling band */
  --warm-2:  #f4efe6;   /* deeper warm for cards/edges */
  --mist:    #eef1f6;   /* cool navy-tinted band */

  /* Accent translucencies */
  --navy-08:  rgba(71,86,126,.08);
  --navy-15:  rgba(71,86,126,.15);
  --brass-10: rgba(167,158,63,.10);
  --brass-18: rgba(167,158,63,.18);
  --success:  #2f8f57;
  --danger:   #dc3545;

  /* Type */
  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --azo:   'Montserrat', 'Segoe UI', sans-serif;
  --ui:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Shape */
  --r-card:   16px;
  --r-hero:   20px;
  --r-btn:    12px;
  --r-pill:   999px;
  --shadow:       0 8px 32px rgba(31,41,55,.08);
  --shadow-soft:  0 4px 18px rgba(31,41,55,.06);
  --shadow-lift:  0 18px 44px rgba(31,41,55,.16);
  --shadow-modal: 0 20px 40px rgba(0,0,0,.2);

  --content: 1140px;
  --bleed:   1280px;

  /* Signature bridge gradient: navy → brass */
  --bridge: linear-gradient(90deg, transparent 0%, var(--navy) 22%, var(--navy-light) 42%, var(--brass) 64%, var(--brass-bright) 80%, transparent 100%);
}

/* ── RESET ───────────────────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--ui);
  color:var(--ink);
  background:var(--snow);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; }

.skip-link {
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:10px 18px; border-radius:0 0 8px 0;
}
.skip-link:focus { left:0; }

/* ── TYPE HELPERS ────────────────────────────────────────── */
.serif { font-family:var(--serif); }
.eyebrow {
  font-family:var(--azo);
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass); margin-bottom:14px;
  display:inline-flex; align-items:center; gap:12px;
}
.eyebrow.on-dark { color:var(--brass-bright); }
.eyebrow.lead::before { content:""; width:30px; height:1px; background:currentColor; }

/* ── LAYOUT ──────────────────────────────────────────────── */
.container-od { width:100%; max-width:var(--content); margin:0 auto; padding:0 28px; }
.section { padding:96px 0; }
.section-warm   { background:var(--warm); }
.section-canvas { background:var(--canvas); }
.section-mist   { background:var(--mist); }
.section-navy   { background:var(--navy); color:#fff; }
.section-tight  { padding:72px 0; }

.section-head { max-width:760px; margin-bottom:8px; }
.section-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.section-head.center .eyebrow { justify-content:center; }
.section-title {
  font-family:var(--serif); font-weight:600;
  font-size:clamp(30px,4vw,46px); line-height:1.12; color:var(--ink);
  letter-spacing:.005em;
}
.section-navy .section-title { color:#fff; }
.section-title em { font-style:italic; color:var(--brass-deep); }
.section-navy .section-title em { color:var(--brass-bright); }
.section-sub {
  font-size:18px; font-weight:300; color:var(--slate);
  line-height:1.7; margin-top:18px; max-width:620px;
}
.section-head.center .section-sub { margin-left:auto; margin-right:auto; }
.section-navy .section-sub { color:rgba(255,255,255,.66); }

/* The signature bridge rule — a thin navy→brass span */
.bridge-line { height:3px; background:var(--bridge); opacity:.85; border:0; }

/* ── BUTTONS / PILLS ─────────────────────────────────────── */
.pill, .btn-od {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--ui); font-weight:600; font-size:15px; letter-spacing:.01em;
  border:none; cursor:pointer; white-space:nowrap;
  padding:13px 26px; border-radius:var(--r-pill);
  transition:all .25s ease; min-height:46px;
}
.pill-lg { padding:16px 34px; font-size:16px; }
.pill-navy   { background:var(--navy); color:#fff; }
.pill-navy:hover   { background:var(--navy-light); transform:translateY(-2px); box-shadow:0 10px 24px var(--navy-15); }
.pill-brass  { background:var(--brass); color:#fff; }
.pill-brass:hover  { background:var(--brass-deep); transform:translateY(-2px); box-shadow:0 10px 24px var(--brass-18); }
.pill-ghost {
  background:transparent; color:var(--navy);
  border:2px solid var(--border); min-height:46px; padding:11px 24px;
}
.pill-ghost:hover { border-color:var(--navy); transform:translateY(-2px); }
.pill-ghost-light {
  background:rgba(255,255,255,.06); color:#fff;
  border:1px solid rgba(255,255,255,.28); min-height:46px; padding:11px 24px;
}
.pill-ghost-light:hover { border-color:#fff; background:rgba(255,255,255,.12); transform:translateY(-2px); }

/* square brand buttons (modal etc.) */
.btn-od { border-radius:var(--r-btn); }
.btn-od-primary { background:var(--navy); color:#fff; }
.btn-od-primary:hover { background:var(--navy-light); transform:translateY(-2px); }
.btn-od-ghost { background:rgba(255,255,255,.9); color:var(--ink); border:2px solid var(--border); }
.btn-od-ghost:hover { border-color:var(--navy); }

/* ── NAV ─────────────────────────────────────────────────── */
.navbar-od {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.navbar-od.is-scrolled { box-shadow:0 2px 24px rgba(31,41,55,.10); border-bottom-color:var(--border); }
.navbar-inner {
  max-width:var(--bleed); margin:0 auto; padding:0 28px; height:70px;
  display:flex; align-items:center;
}
.brand-logo { flex:0 0 auto; }
.brand-logo img { height:40px; width:auto; }
/* auto side-margins pin the logo left, center the links, push the CTAs right */
.nav-links { display:flex; align-items:center; gap:28px; margin:0 auto; padding:0 32px; }
.nav-ctas { flex:0 0 auto; }
.nav-links a { font-family:var(--azo); font-size:14px; font-weight:500; color:var(--charcoal); transition:color .2s; }
.nav-links a:hover { color:var(--navy); }
.nav-ctas { display:flex; align-items:center; gap:12px; }
.nav-ctas .pill { padding:10px 20px; font-size:14px; min-height:42px; }

/* ── HERO ────────────────────────────────────────────────── */
.hero {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#fff;
  padding:148px 0 0;
}
.hero::after { /* faint dot grid, echoes the door-art surface */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background-image:radial-gradient(rgba(255,255,255,.1) 1px, transparent 1px);
  background-size:28px 28px;
}
/* Light streaming through an opening door: a blurred brass shaft that
   slides in diagonally from the left after the page settles */
.hero-beam {
  position:absolute; top:-25%; left:0; width:50%; height:150%;
  background:var(--brass); filter:blur(64px); opacity:0;
  transform:translateX(-100%) rotate(-20deg);
  animation:heroBeam 2s ease-out 0.5s forwards;
  z-index:1; pointer-events:none;
}
@keyframes heroBeam { to { opacity:.15; transform:translateX(-20%) rotate(-20deg); } }
.hero .container-od { position:relative; z-index:2; }
.hero-row { display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; }
.hero-eyebrow {
  font-family:var(--azo); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass-bright); margin-bottom:24px;
  display:inline-flex; align-items:center; gap:12px;
}
.hero-eyebrow::before { content:""; width:30px; height:1px; background:currentColor; }
.hero-headline {
  font-family:var(--serif); font-weight:600;
  font-size:clamp(38px,5.4vw,68px); line-height:1.04; letter-spacing:.003em;
  color:#fff; margin-bottom:8px;
}
.hero-headline em { font-style:italic; color:var(--brass-bright); }
.hero-headline .muted { color:rgba(255,255,255,.65); }
.hero-sub {
  font-size:19px; font-weight:300; color:rgba(255,255,255,.74);
  line-height:1.7; max-width:560px; margin:22px 0 36px;
}
.hero-sub strong { color:#fff; font-weight:500; }
.hero-ctas { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero-note { margin-top:22px; font-size:14.5px; color:rgba(255,255,255,.68); }
.hero-note a { color:var(--brass-bright); border-bottom:1px solid rgba(189,180,78,.4); }
.hero-note a:hover { border-color:var(--brass-bright); }

/* Hero door art — the original site's logo door: a gold-outlined frame
   with a translucent brass panel, hinged on the left, that swings wide
   open on load and then settles into a gentle sway. */
.hero-door-art {
  justify-self:center; margin:0 auto 0;
  width:300px; height:430px; position:relative; perspective:1200px; z-index:2;
}
/* warm light spilling through the open doorway */
.hero-door-art .door-glow {
  position:absolute; inset:6%;
  background:radial-gradient(ellipse at 40% 50%, rgba(167,158,63,.5), rgba(167,158,63,0) 70%);
  filter:blur(8px); opacity:0;
  animation:doorGlow 1.6s ease-out 1.6s forwards;
}
/* the door frame: gold outline, like the glyph in the wordmark */
.hero-door-art .door-frame {
  position:absolute; inset:0; border:7px solid #bdb44e; border-radius:4px;
}
/* the door itself: gold-outlined panel, hinged on the left, swings open */
.hero-door-art .door-panel {
  position:absolute; top:7px; left:7px; bottom:7px; width:calc(100% - 14px);
  background:rgba(167,158,63,.16); border:7px solid #bdb44e;
  transform-origin:left center; transform:rotateY(0deg);
  box-shadow:10px 0 28px rgba(0,0,0,.22);
  animation:doorOpenArt 1.7s cubic-bezier(0.7,0,0.2,1) 0.9s forwards,
            doorSway 6s ease-in-out 3.4s infinite alternate;
}
.hero-door-art .door-handle {
  position:absolute; right:13px; top:50%; width:8px; height:46px; border-radius:3px;
  background:#bdb44e; transform:translateY(-50%);
}
@keyframes doorOpenArt { to { transform:rotateY(-62deg); } }
@keyframes doorSway { from { transform:rotateY(-62deg); } to { transform:rotateY(-54deg); } }
@keyframes doorGlow { to { opacity:1; } }
@media (prefers-reduced-motion: reduce) {
  .hero-door-art .door-panel { animation:none; transform:rotateY(-58deg); }
  .hero-door-art .door-glow { animation:none; opacity:1; }
}

/* Hero stat card */
.hero-stat-card {
  position:relative; z-index:1;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-hero); backdrop-filter:blur(8px);
  padding:26px 36px; margin:48px 0 0;
}
.stat-card-eyebrow { font-family:var(--azo); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:14px; }
.stat-grid { display:grid; grid-template-columns:repeat(3,auto); gap:56px; }
.stat-num { font-family:var(--serif); font-size:clamp(30px,4vw,40px); font-weight:600; color:#fff; line-height:1; }
.stat-label { font-family:var(--azo); font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-top:8px; }
.hero-bridge { margin-top:64px; }

/* ── DISTRICTS TRUST BANNER ──────────────────────────────── */
.districts-band { background:var(--warm); border-bottom:1px solid var(--warm-2); padding:26px 0; }
.districts-inner { display:flex; align-items:center; justify-content:center; gap:18px 36px; flex-wrap:wrap; }
.districts-label { font-family:var(--azo); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gray); white-space:nowrap; }
.districts-list { display:flex; justify-content:center; gap:14px 26px; flex-wrap:wrap; }
.district-name { font-family:var(--azo); font-size:14px; font-weight:600; color:var(--navy); opacity:.55; transition:opacity .2s; white-space:nowrap; }
.district-name:hover { opacity:1; }

/* ── PROBLEM GRID (4 broken connections) ─────────────────── */
.problem-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:52px;
  border:1px solid var(--warm-2); border-radius:var(--r-card); overflow:hidden; background:var(--snow);
}
.problem-cell {
  padding:38px 36px; background:var(--snow);
  border-right:1px solid var(--warm-2); border-bottom:1px solid var(--warm-2);
  transition:background .2s;
}
.problem-cell:hover { background:var(--warm); }
.problem-cell:nth-child(2n) { border-right:none; }
.problem-cell:nth-last-child(-n+2) { border-bottom:none; }
.problem-icon { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--navy-08); color:var(--navy); font-size:24px; margin-bottom:18px; }
.problem-icon img { width:32px; height:32px; object-fit:contain; }
.problem-who { font-family:var(--azo); font-size:16px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--brass-deep); margin-bottom:12px; }
.problem-title { font-family:var(--serif); font-size:22px; font-weight:600; color:var(--ink); line-height:1.2; margin-bottom:12px; }
.problem-body { font-size:15px; font-weight:300; color:var(--gray); line-height:1.7; }
.problem-pull { margin-top:40px; text-align:center; font-family:var(--serif); font-style:italic; font-size:clamp(20px,2.6vw,28px); color:var(--navy); }
.problem-pull strong { color:var(--brass-deep); font-style:normal; font-weight:600; }

/* ── GUIDE (authority + empathy) ─────────────────────────── */
.guide { position:relative; overflow:hidden; }
.guide::after {
  content:"25"; position:absolute; right:-10px; bottom:-70px; line-height:1; pointer-events:none;
  font-family:var(--serif); font-weight:700; font-size:340px; color:rgba(255,255,255,.03);
}
.guide-grid { display:grid; grid-template-columns:1fr; gap:60px; align-items:center; position:relative; z-index:1; max-width:760px; margin:0 auto; }
.guide-text { text-align:center; }
.guide-text .section-title { margin-bottom:28px; }
.guide-text p { color:rgba(255,255,255,.66); font-size:16px; font-weight:300; line-height:1.8; margin-bottom:16px; }
.guide-text p:not(.eyebrow) { text-align:left; max-width:620px; margin-left:auto; margin-right:auto; }
.guide-text .pill { margin-top:24px; }
.guide-text p strong { color:#fff; font-weight:500; }
.guide-pull { font-family:var(--serif); font-style:italic; font-size:21px; color:var(--brass-bright); line-height:1.5; margin:22px 0; padding-left:20px; border-left:3px solid var(--brass); }
.guide-credentials { display:flex; flex-direction:column; gap:14px; }
.credential { display:flex; gap:16px; align-items:flex-start; padding:20px 22px;
  background:rgba(255,255,255,.05); border-left:3px solid var(--brass); border-radius:0 10px 10px 0; }
.credential-icon { flex-shrink:0; width:38px; height:38px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:rgba(189,180,78,.14); color:var(--brass-bright); font-size:18px; }
.credential-title { font-family:var(--azo); font-size:15px; font-weight:600; color:#fff; margin-bottom:5px; }
.credential-body { font-size:13.5px; font-weight:300; color:rgba(255,255,255,.56); line-height:1.6; }

/* ── PLAN (3 steps) + ANNUAL RHYTHM ──────────────────────── */
.plan-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:56px; position:relative; }
.plan-steps::before { content:""; position:absolute; top:30px; left:16.6%; right:16.6%; height:2px; background:linear-gradient(90deg,var(--navy),var(--brass)); z-index:0; }
.plan-step { text-align:center; padding:0 26px; position:relative; z-index:1; }
.step-num { width:60px; height:60px; border-radius:50%; margin:0 auto 22px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:24px; font-weight:600; color:#fff; background:var(--navy);
  box-shadow:0 0 0 8px var(--warm); }
.step-num.mid { background:var(--navy-light); }
.step-num.last { background:var(--brass); }
.section-canvas .step-num { box-shadow:0 0 0 8px var(--canvas); }
.step-title { font-family:var(--serif); font-size:21px; font-weight:600; color:var(--ink); margin-bottom:10px; }
.step-body { font-size:14.5px; font-weight:300; color:var(--gray); line-height:1.65; }

.rhythm { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:60px; }
.rhythm-card { background:var(--snow); border:1px solid var(--warm-2); border-radius:var(--r-card); padding:30px 28px; box-shadow:var(--shadow-soft); }
.rhythm-season { font-family:var(--azo); font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--brass-deep); margin-bottom:12px; }
.rhythm-q { font-family:var(--serif); font-style:italic; font-size:23px; font-weight:600; color:var(--navy); margin-bottom:12px; }
.rhythm-body { font-size:14.5px; font-weight:300; color:var(--gray); line-height:1.65; }

/* ── AUDIENCE TABS ───────────────────────────────────────── */
.audience-tabs { display:flex; gap:4px; margin-top:44px; border-bottom:2px solid var(--border); flex-wrap:wrap; }
.audience-tab { padding:14px 26px; font-family:var(--azo); font-size:14px; font-weight:600; letter-spacing:.01em;
  border:none; background:none; cursor:pointer; color:var(--gray); border-bottom:3px solid transparent; margin-bottom:-2px; transition:all .2s; }
.audience-tab.active { color:var(--navy); border-bottom-color:var(--brass); }
.audience-tab:hover:not(.active) { color:var(--ink); }
.audience-panel { display:none; padding:48px 0 0; }
.audience-panel.active { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; animation:fadeUp .35s ease; }
@keyframes fadeUp { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
.panel-label { font-family:var(--azo); font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--brass-deep); margin-bottom:12px; }
.panel-h3 { font-family:var(--serif); font-size:clamp(25px,3.2vw,36px); font-weight:600; line-height:1.14; color:var(--ink); margin-bottom:16px; }
.panel-h3 em { font-style:italic; color:var(--navy); }
.panel-body { font-size:16px; font-weight:300; color:var(--gray); line-height:1.75; margin-bottom:26px; }
.panel-features { display:flex; flex-direction:column; gap:11px; }
.panel-feature { display:flex; gap:13px; align-items:flex-start; padding:14px 16px; background:var(--warm); border-radius:10px; }
.section-warm .panel-feature { background:var(--snow); border:1px solid var(--warm-2); }
.feat-check { flex-shrink:0; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:12px; color:#fff; background:var(--navy); margin-top:1px; }
.feat-text { font-size:14.5px; color:var(--ink); line-height:1.55; }
.feat-text strong { font-weight:600; }

/* Mock dashboard (navy panel) */
.panel-visual { background:var(--navy); border-radius:var(--r-hero); padding:30px; min-height:340px;
  display:flex; flex-direction:column; gap:14px;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(135deg,var(--navy),var(--navy-deep));
  background-size:24px 24px,100% 100%; }
.panel-visual-label { font-family:var(--azo); font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--brass-bright); margin-bottom:6px; }
.mock-card { background:rgba(255,255,255,.05); border-radius:10px; padding:16px; }
.mock-head { font-family:var(--azo); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--brass-bright); font-weight:700; margin-bottom:12px; }
.mock-head.dim { color:rgba(255,255,255,.34); }
.mock-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.mock-row:last-child { margin-bottom:0; }
.mock-avatar { width:32px; height:32px; border-radius:50%; background:var(--navy-light); flex-shrink:0; }
.mock-lines { flex:1; display:flex; flex-direction:column; gap:5px; }
.mock-line { height:8px; border-radius:4px; background:rgba(255,255,255,.14); }
.mock-line.short { width:60%; }
.mock-line.xshort { width:35%; }
.mock-badge { font-family:var(--azo); font-size:10px; font-weight:700; padding:3px 9px; border-radius:5px; letter-spacing:.04em; }
.mock-stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.mock-stat { display:flex; flex-direction:column; gap:4px; }
.mock-stat-val { font-family:var(--serif); font-size:26px; font-weight:600; color:#fff; }
.mock-stat-label { font-family:var(--azo); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.42); margin-top:3px; }
.mock-bar-row { display:flex; align-items:center; gap:10px; }
.mock-bar-name { font-size:12px; color:rgba(255,255,255,.42); width:84px; }
.mock-bar-track { flex:1; height:6px; background:rgba(255,255,255,.08); border-radius:3px; overflow:hidden; }
.mock-bar-fill { height:100%; border-radius:3px; background:var(--brass-bright); }
.mock-bar-val { font-size:12px; width:28px; text-align:right; color:rgba(255,255,255,.7); }
.mock-bars-vert { display:flex; gap:6px; align-items:flex-end; height:50px; }
.mock-bars-vert > span { flex:1; border-radius:2px 2px 0 0; background:var(--brass); }

/* ── STAKES (without / with) ─────────────────────────────── */
.stakes-grid { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:52px; }
.stakes-col-label { font-family:var(--azo); font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; margin-bottom:18px; }
.stakes-col-label.fail { color:var(--danger); }
.stakes-col-label.win  { color:var(--success); }
.stakes-list { display:flex; flex-direction:column; gap:11px; }
.stakes-item { display:flex; gap:14px; align-items:flex-start; padding:16px 18px; border-radius:10px; }
.stakes-item.fail { background:rgba(220,53,69,.06); border-left:3px solid var(--danger); }
.stakes-item.win  { background:var(--brass-10); border-left:3px solid var(--brass); }
.stakes-mark { flex-shrink:0; font-weight:700; margin-top:1px; }
.stakes-item.fail .stakes-mark { color:var(--danger); }
.stakes-item.win  .stakes-mark { color:var(--brass-deep); }
/* .paired: labels + items flow column-first into shared rows so each fail/win pair aligns */
.stakes-grid.paired { grid-auto-flow:column; grid-template-rows:repeat(6,auto); gap:11px 30px; }
.stakes-grid.paired .stakes-col-label { margin-bottom:7px; }
.stakes-text { font-size:14.5px; color:var(--ink); line-height:1.55; }

/* ── SOCIAL PROOF ────────────────────────────────────────── */
.proof { background:var(--navy); position:relative; overflow:hidden; }
.proof::before { content:"\201C"; position:absolute; top:-70px; left:30px; pointer-events:none;
  font-family:var(--serif); font-weight:700; font-size:380px; line-height:1; color:rgba(255,255,255,.05); }
.proof-inner { max-width:880px; margin:0 auto; text-align:center; position:relative; z-index:1; }
.proof-quote-lead { font-family:var(--serif); font-size:clamp(22px,3.2vw,34px); font-weight:600; color:#fff; line-height:1.35; margin-bottom:26px; }
.proof-attr { font-family:var(--azo); font-size:13px; font-weight:500; letter-spacing:.04em; color:rgba(255,255,255,.6); }
.proof-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:60px; text-align:left; }
.proof-card { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:28px 24px; }
.proof-card-quote { font-size:15px; font-style:italic; color:rgba(255,255,255,.82); line-height:1.65; margin-bottom:16px; }
.proof-card-attr { font-family:var(--azo); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--brass-bright); }

/* ── PLATFORM CARD (door animation host) ─────────────────── */
.platform-card { background:var(--snow); border:1px solid var(--warm-2); border-radius:var(--r-hero);
  padding:48px 44px; box-shadow:var(--shadow); max-width:920px; margin:0 auto; }
.platform-card .stakes-grid { margin-top:0; }
.platform-card h2 { font-family:var(--serif); font-weight:600; font-size:clamp(24px,3vw,34px); line-height:1.25; text-align:center; margin-bottom:24px; }
.highlight-text { color:var(--navy); border-bottom:3px solid var(--brass-18); }
.feature-list { list-style:none; max-width:680px; margin:0 auto; }
.feature-list li { position:relative; padding:11px 0 11px 36px; font-size:16px; color:var(--charcoal); line-height:1.6; border-bottom:1px solid var(--hover-fill); }
.feature-list li:last-child { border-bottom:none; }
.feature-list li::before { content:"\F26B"; font-family:"bootstrap-icons"; position:absolute; left:4px; top:11px; color:var(--brass); }
.data-strip { display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:center; margin-top:30px; padding-top:24px; border-top:1px solid var(--border); }
.data-strip span { font-family:var(--azo); font-size:13px; font-weight:500; color:var(--slate); display:inline-flex; align-items:center; gap:8px; }
.data-strip i { color:var(--brass-deep); }

/* ── MODULES ─────────────────────────────────────────────── */
.module-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:22px; margin-top:50px; }
.module-card { position:relative; background:var(--snow); border:1px solid var(--warm-2); border-radius:var(--r-card);
  padding:26px 26px 22px; box-shadow:var(--shadow-soft); cursor:pointer; transition:transform .2s, box-shadow .2s, border-color .2s; }
.module-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.module-card.is-selected { border-color:var(--brass); box-shadow:0 0 0 2px var(--brass-18), var(--shadow-soft); }
.module-top { display:flex; gap:16px; align-items:flex-start; margin-bottom:14px; }
.module-icon { flex-shrink:0; width:52px; height:52px; border-radius:13px; background:var(--warm); display:flex; align-items:center; justify-content:center; }
.module-icon img { width:32px; height:32px; object-fit:contain; }
.module-card h3 { font-family:var(--serif); font-size:20px; font-weight:600; color:var(--ink); line-height:1.2; margin-bottom:4px; }
.module-tag { font-family:var(--azo); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--brass-deep); }
.module-card > p { font-size:14.5px; font-weight:300; color:var(--gray); line-height:1.65; margin-bottom:18px; }
.module-check { display:flex; align-items:center; gap:9px; font-family:var(--azo); font-size:13.5px; font-weight:600; color:var(--navy); cursor:pointer; user-select:none; }
.module-check input { width:18px; height:18px; accent-color:var(--navy); cursor:pointer; }

/* ── PARTNER TIERS ───────────────────────────────────────── */
.tiers { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:50px; }
.tier-card { border:1px solid var(--warm-2); border-radius:var(--r-card); overflow:hidden; background:var(--snow);
  transition:transform .2s, box-shadow .2s; }
.tier-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lift); }
.tier-top { padding:24px 22px 18px; }
.tier-top.navy { background:var(--navy); }
.tier-top.brass { background:var(--brass); }
.tier-top.warm { background:var(--warm-2); }
.tier-label { font-family:var(--azo); font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; margin-bottom:8px; }
.tier-top.navy .tier-label, .tier-top.brass .tier-label { color:rgba(255,255,255,.78); }
.tier-top.warm .tier-label { color:var(--brass-deep); }
.tier-name { font-family:var(--serif); font-size:19px; font-weight:600; margin-bottom:4px; }
.tier-top.navy .tier-name, .tier-top.brass .tier-name { color:#fff; }
.tier-top.warm .tier-name { color:var(--ink); }
.tier-price { font-family:var(--serif); font-size:27px; font-weight:700; }
.tier-top.navy .tier-price { color:var(--brass-bright); }
.tier-top.brass .tier-price { color:#fff; }
.tier-top.warm .tier-price { color:var(--brass-deep); }
.tier-slots { font-size:12px; color:var(--gray); margin-top:4px; }
.tier-top.navy .tier-slots, .tier-top.brass .tier-slots { color:rgba(255,255,255,.6); }
.tier-body { padding:18px 22px 22px; border-top:1px solid var(--warm-2); background:var(--warm); }
.tier-feature { font-size:13px; font-weight:300; color:var(--charcoal); padding:5px 0; display:flex; gap:9px; align-items:flex-start; }
.tier-feature::before { content:"\2192"; color:var(--brass-deep); flex-shrink:0; }

/* ── CTA BAND ────────────────────────────────────────────── */
.cta { position:relative; overflow:hidden; text-align:center;
  background:radial-gradient(ellipse 80% 60% at 50% 40%, rgba(90,107,148,.4) 0%, transparent 62%),
             linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#fff; padding:108px 0; }
.cta::after { /* same faint dot grid as the hero */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.1) 1px, transparent 1px);
  background-size:28px 28px;
}
.cta-inner { max-width:720px; margin:0 auto; position:relative; z-index:1; }
.cta h2 { font-family:var(--serif); font-weight:600; font-size:clamp(32px,5vw,56px); line-height:1.08; color:#fff; margin-bottom:18px; }
.cta h2 em { font-style:italic; color:var(--brass-bright); }
.cta-sub { font-size:18px; font-weight:300; color:rgba(255,255,255,.7); line-height:1.7; max-width:540px; margin:0 auto 38px; }
.cta-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cta-contacts { margin-top:46px; padding-top:30px; border-top:1px solid rgba(255,255,255,.1); display:flex; gap:42px; justify-content:center; flex-wrap:wrap; }
.cta-contact-label { font-family:var(--azo); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:5px; }
.cta-contact-val { font-size:15px; color:rgba(255,255,255,.78); font-weight:500; }
.cta-bridge { position:absolute; bottom:0; left:0; right:0; height:4px; background:var(--bridge); z-index:1; }

/* ── business cta (brand band) ───────────────────────────── */
.cta-band { background:linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%); color:#fff; padding:60px 0; }
.cta-band h2 { font-family:var(--serif); font-weight:600; font-size:clamp(26px,3.2vw,34px); margin-bottom:12px; }
.cta-band p { color:rgba(255,255,255,.72); font-weight:300; max-width:560px; }
.cta-fine { font-size:13px; color:rgba(255,255,255,.55); margin-top:10px; }

/* ── FOOTER ──────────────────────────────────────────────── */
.site-footer { background:#101728; color:rgba(255,255,255,.6); padding:64px 0 32px; }
.footer-logo img { height:38px; }
.site-footer h5 { font-family:var(--azo); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:16px; }
.site-footer ul { list-style:none; }
.site-footer ul li { margin-bottom:10px; }
.site-footer a { font-size:14px; font-weight:300; color:rgba(255,255,255,.6); transition:color .2s; }
.site-footer a:hover { color:#fff; }
.footer-contact p { display:flex; gap:10px; align-items:flex-start; font-size:14px; margin-bottom:10px; }
.footer-contact i { color:var(--brass-bright); margin-top:3px; }
.social-links a { font-size:20px; color:rgba(255,255,255,.5); }
.social-links a:hover { color:var(--brass-bright); }
.footer-bottom { margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:rgba(255,255,255,.3); }
.footer-bottom .bridge-line { width:90px; opacity:.5; }

/* ── INQUIRY TRAY ────────────────────────────────────────── */
.inquiry-tray { position:fixed; bottom:24px; right:24px; z-index:90;
  display:flex; align-items:center; gap:14px; padding:12px 14px 12px 20px;
  background:var(--snow); border:1px solid var(--border); border-radius:var(--r-pill);
  box-shadow:var(--shadow-lift); transform:translateY(140%); opacity:0; transition:all .3s ease; pointer-events:none; }
.inquiry-tray.is-visible { transform:translateY(0); opacity:1; pointer-events:auto; }
.tray-count { font-size:14px; font-weight:500; color:var(--ink); }
.badge-num { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px;
  border-radius:11px; background:var(--brass); color:#fff; font-weight:700; font-size:12.5px; margin-right:2px; }

/* ── MODAL ───────────────────────────────────────────────── */
.od-modal-backdrop { position:fixed; inset:0; z-index:150; background:rgba(16,23,40,.55);
  display:flex; align-items:flex-start; justify-content:center; padding:40px 18px;
  opacity:0; visibility:hidden; transition:opacity .25s ease; overflow-y:auto; }
.od-modal-backdrop.is-open { opacity:1; visibility:visible; }
.od-modal { background:var(--snow); border-radius:var(--r-hero); width:100%; max-width:600px;
  box-shadow:var(--shadow-modal); transform:translateY(16px); transition:transform .25s ease; }
.od-modal-backdrop.is-open .od-modal { transform:translateY(0); }
.od-modal-header { display:flex; align-items:center; justify-content:space-between; padding:22px 26px; border-bottom:1px solid var(--border); }
.od-modal-header h2 { font-family:var(--serif); font-size:22px; font-weight:600; color:var(--ink); }
.od-modal-close { width:38px; height:38px; border-radius:50%; border:none; background:var(--hover-fill); color:var(--gray); cursor:pointer; font-size:16px; transition:all .2s; }
.od-modal-close:hover { background:var(--border); color:var(--ink); }
.od-modal-body { padding:26px; }
.modal-modules { display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; margin:14px 0 10px; }
.modal-module-row { position:relative; display:flex; flex-wrap:wrap; align-items:flex-start; column-gap:6px; font-size:14px; color:var(--charcoal); padding:5px 0; }
.modal-module-main { display:flex; align-items:flex-start; gap:9px; cursor:pointer; flex:1 1 0; min-width:0; }
.modal-module-main input { width:18px; height:18px; accent-color:var(--navy); margin-top:2px; flex:0 0 auto; }
.modal-module-text { display:flex; flex-direction:column; min-width:0; }
.modal-module-name { font-weight:600; }
.modal-module-tag { font-size:12px; color:var(--slate); }
.modal-module-info { border:none; background:none; color:var(--gray); cursor:pointer; font-size:14px; padding:2px 4px; flex:0 0 auto; line-height:1; }
.modal-module-info:hover, .modal-module-info[aria-expanded="true"] { color:var(--navy); }
/* Floating tooltip: overlays the rows below instead of displacing them */
.modal-module-tip { display:none; position:absolute; top:calc(100% + 5px); left:0; right:0; z-index:30;
  font-size:12.5px; line-height:1.5; color:#fff; background:var(--navy); border-radius:8px;
  padding:9px 12px; box-shadow:0 12px 28px rgba(31,41,55,.3); pointer-events:none; }
.modal-module-tip::before { content:""; position:absolute; top:-5px; right:10px;
  border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:6px solid var(--navy); }
/* Hover previews the tip on devices that can hover; click/tap pins it.
   The hover rule is scoped so mobile's sticky tap-hover can't hold a tip open. */
@media (hover: hover) {
  .modal-module-info:hover ~ .modal-module-tip { display:block; }
}
.modal-module-info:focus-visible ~ .modal-module-tip,
.modal-module-row.tip-open .modal-module-tip { display:block; }
.od-field { margin-bottom:16px; }
.od-field label { display:block; font-size:13.5px; font-weight:600; color:var(--charcoal); margin-bottom:6px; }
.od-field .req { color:var(--brass-deep); }
.od-input { width:100%; border:2px solid var(--border); border-radius:var(--r-btn); padding:11px 14px; font-family:var(--ui); font-size:15px; color:var(--ink); min-height:46px; transition:border-color .2s, box-shadow .2s; background:#fff; }
.od-input:focus { outline:none; border-color:var(--navy); box-shadow:0 0 0 3px var(--navy-08); }
.od-field.has-error .od-input { border-color:var(--danger); }
.field-error { display:none; font-size:12.5px; color:var(--danger); margin-top:5px; }
.od-field.has-error .field-error { display:block; }
.od-modal-footer { display:flex; justify-content:flex-end; gap:12px; padding:16px 0 0; }
.form-alert { display:none; padding:12px 14px; border-radius:10px; font-size:14px; margin-bottom:16px; }
.form-alert.is-visible { display:block; }
.alert-danger-od { background:rgba(220,53,69,.08); color:#b02a37; border:1px solid rgba(220,53,69,.2); }
.btn-spinner { display:none; width:16px; height:16px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
.btn-od.is-loading .btn-spinner { display:inline-block; }
@keyframes spin { to { transform:rotate(360deg); } }
.inquiry-success { text-align:center; padding:20px 10px; }
.success-ring { width:72px; height:72px; border-radius:50%; margin:0 auto 18px; display:flex; align-items:center; justify-content:center;
  background:rgba(47,143,87,.12); color:var(--success); font-size:34px; }
.inquiry-success h3 { font-family:var(--serif); font-size:24px; font-weight:600; color:var(--ink); margin-bottom:10px; }
.inquiry-success p { color:var(--gray); max-width:400px; margin:0 auto; }

/* ── REVEAL ──────────────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  * { scroll-behavior:auto !important; }
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 980px) {
  .nav-links { display:none; }
  .hero-row { grid-template-columns:1fr; gap:8px; }
  .hero-door-art { display:none; }
  .guide-grid, .audience-panel.active, .stakes-grid { grid-template-columns:1fr; gap:36px; }
  .stakes-grid.paired { grid-auto-flow:row; grid-template-rows:none; gap:11px; }
  .stakes-grid.paired .stakes-col-label.win { margin-top:28px; }
  .module-grid { grid-template-columns:repeat(2,1fr); }
  .tiers { grid-template-columns:1fr 1fr; }
  .proof-grid, .rhythm { grid-template-columns:1fr; }
  .plan-steps { grid-template-columns:1fr; gap:40px; }
  .plan-steps::before { display:none; }
}
@media (max-width: 680px) {
  .section { padding:72px 0; }
  .container-od { padding:0 20px; }
  .platform-card { padding:30px 20px; }
  .problem-grid { grid-template-columns:1fr; }
  .module-grid { grid-template-columns:1fr; }
  .problem-cell { border-right:none !important; }
  .problem-cell:not(:last-child) { border-bottom:1px solid var(--warm-2) !important; }
  .stat-grid { gap:30px; }
  .tiers, .modal-modules { grid-template-columns:1fr; }
  .audience-tabs { gap:0; }
  .audience-tab { padding:12px 16px; font-size:13px; }
  .nav-demo { display:none; }
  .brand-logo img { height:34px; }
  .inquiry-tray { left:18px; right:18px; bottom:18px; justify-content:space-between; }
  .cta-contacts { gap:24px; }
}

/* ── CROSS-PAGE MORPH (View Transitions API) ────────────────
   Opt into cross-document view transitions for same-origin navigations:
   a gentle cross-dissolve instead of a hard reload. The API is same-origin
   only, so links to the business site just navigate normally. */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration:.7s; }
::view-transition-old(root) { animation: odCrossOut .7s ease both; }
::view-transition-new(root) { animation: odCrossIn  .7s ease both; }
@keyframes odCrossOut { to   { opacity:0; } }
@keyframes odCrossIn  { from { opacity:0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root),
  ::view-transition-old(root), ::view-transition-new(root) { animation:none; }
}

/* ── SHARED POLISH (kept identical with the business site) ── */
html { scroll-padding-top:86px; } /* anchor jumps clear the fixed navbar */
a:focus-visible, button:focus-visible { outline:3px solid var(--brass); outline-offset:3px; border-radius:4px; }

/* scroll spy: the section currently in view gets a brass underline */
.nav-links a { position:relative; }
.nav-links a.active { color:var(--navy); }
.nav-links a.active::after {
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  border-radius:1px; background:var(--brass);
}

/* ── MOBILE NAV ──────────────────────────────────────────────
   Below 980px the inline links collapse behind a hamburger that
   drops the same links down from the navbar. */
.nav-toggle {
  display:none; margin-left:14px; flex:0 0 auto;
  width:42px; height:42px; border-radius:10px;
  border:1px solid var(--border); background:var(--snow); color:var(--navy);
  font-size:22px; line-height:1; align-items:center; justify-content:center;
  cursor:pointer; transition:background .2s, border-color .2s;
}
.nav-toggle:hover { background:var(--hover-fill); border-color:var(--navy-15); }
@media (max-width: 980px) {
  .nav-toggle { display:inline-flex; }
  .nav-links {
    position:absolute; top:70px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0; margin:0; padding:8px 0 12px;
    background:rgba(255,255,255,.98); backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
    box-shadow:0 20px 34px rgba(31,41,55,.14);
  }
  .navbar-od.menu-open .nav-links { display:flex; }
  .nav-links a { padding:13px 28px; font-size:15px; }
  .nav-links a.active { background:var(--brass-10); }
  .nav-links a.active::after { display:none; }
  .nav-ctas { margin-left:auto; }
}

/* ── cross-site nav link (to the business site) ── */
.nav-links a.nav-portal {
  display:inline-flex; align-items:center; gap:6px;
  color:var(--brass-deep); font-weight:600;
}
.nav-links a.nav-portal:hover { color:var(--brass); }

/* ── About School Perceptions: narrative + doorway card ── */
.about-sp-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; }
.about-sp-text .section-title { margin-bottom:18px; }
.about-sp-text p { color:var(--charcoal); line-height:1.75; margin-bottom:16px; max-width:52ch; }
.about-sp-text .pill { margin-top:10px; }
.about-door-card { position:relative; background:var(--navy); border-radius:var(--r-hero); padding:48px 44px;
  color:#fff; overflow:hidden; box-shadow:0 24px 60px var(--navy-15); }
/* brass inner frame, echoing the hero door art */
.about-door-card::before { content:""; position:absolute; inset:14px; border:3px solid rgba(189,180,78,.5);
  border-radius:12px; pointer-events:none; }
.about-door-glow { position:absolute; top:-30%; right:-25%; width:75%; height:95%;
  background:radial-gradient(ellipse, rgba(167,158,63,.4), rgba(167,158,63,0) 70%);
  filter:blur(10px); pointer-events:none; }
.about-door-card > :not(.about-door-glow) { position:relative; }
.about-door-quote { font-family:var(--serif); font-size:clamp(24px,2.6vw,30px); font-weight:500;
  line-height:1.35; margin-bottom:22px; }
.about-door-quote em { font-style:italic; color:var(--brass-bright); }
.about-door-rule { width:130px; margin:0 0 24px; }
.about-door-label { font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:var(--brass-bright); margin-bottom:12px; }
.about-door-list { list-style:none; margin:0 0 28px; padding:0; display:grid;
  grid-template-columns:1fr 1fr; gap:10px 18px; }
.about-door-list li { display:flex; gap:9px; align-items:baseline; font-size:14.5px; color:rgba(255,255,255,.88); }
.about-door-list li::before { content:"\2192"; color:var(--brass-bright); flex:0 0 auto; }
.about-door-meta { font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.55); }
@media (max-width: 980px) {
  .about-sp-grid { grid-template-columns:1fr; gap:40px; }
  .about-door-card { padding:38px 30px; }
}
@media (max-width: 480px) {
  .about-door-list { grid-template-columns:1fr; }
}
.about-sp-logo { width:230px; height:auto; margin:8px 0 26px; }