/* ============================================================
   Opening Doors for Business (Website5) — employer marketing site.
   Same editorial StoryBrand structure and gold "bridge" accent as the
   student site, and the same navy brand frame, so both doors read as one
   coherent Opening Doors brand.
   ============================================================ */

/* ── TOKENS ──────────────────────────────────────────────── */
:root {
  /* Brand core — navy frame, matching the student site */
  --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, matching the student site */
  --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;
  text-wrap:balance;
}
.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 {
  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); }

/* ── 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:clamp(9.5px,2.4vw,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; white-space:nowrap;
}
.hero-eyebrow::before { content:""; width:30px; height:1px; background:currentColor; flex:none; }
.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); }
.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); }

/* Capability list — the Solution section's editorial capability rows. */
.capability-list { max-width:860px; margin:52px auto 0; display:flex; flex-direction:column; gap:20px; }
.capability-row { display:flex; gap:28px; align-items:flex-start; background:var(--snow);
  border:1px solid var(--warm-2); border-radius:var(--r-card); padding:30px 34px; box-shadow:var(--shadow-soft); }
.capability-icon { flex-shrink:0; width:64px; height:64px; border-radius:16px; background:var(--warm);
  display:flex; align-items:center; justify-content:center; }
.capability-icon img { width:38px; height:38px; object-fit:contain; }
.capability-tag { font-family:var(--azo); font-size:11px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--brass-deep); margin-bottom:6px; }
.capability-text h3 { font-family:var(--serif); font-size:23px; font-weight:600; color:var(--ink);
  line-height:1.2; margin-bottom:10px; }
.capability-text > p:last-child { font-size:16px; font-weight:300; color:var(--gray); line-height:1.7; margin:0; }

/* ── 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; }
.tier-price .tier-cadence { font-family:var(--ui); font-size:14px; font-weight:500; color:var(--gray); }
.tier-top.navy .tier-cadence, .tier-top.brass .tier-cadence { color:rgba(255,255,255,.6); }
.tier-star { color:var(--brass-deep); }
/* Tier groups (Local vs Regional/Statewide): 3 cards each, centered */
.tier-group-label { font-family:var(--serif); font-size:20px; font-weight:600; color:var(--ink); text-align:center; margin:44px 0 2px; }
.tier-group-label .sub { display:block; font-family:var(--azo); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--brass-deep); margin-bottom:7px; }
.tiers.three { grid-template-columns:repeat(3,1fr); max-width:820px; margin-left:auto; margin-right:auto; margin-top:26px; }

/* ── 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; }

/* ── 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; }
  .tiers { grid-template-columns:1fr 1fr; }
  .tiers.three { grid-template-columns:1fr 1fr; max-width:560px; }
  .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; }
  .capability-row { flex-direction:column; gap:16px; padding:26px 22px; }
  .problem-cell { border-right:none !important; }
  .problem-cell:not(:last-child) { border-bottom:1px solid var(--warm-2) !important; }
  .stat-grid { gap:30px; }
  .tiers { grid-template-columns:1fr; }
  .tiers.three { grid-template-columns:1fr; max-width:400px; }
  .audience-tabs { gap:0; }
  .audience-tab { padding:12px 16px; font-size:13px; }
  .nav-demo { display:none; }
  .brand-logo img { height:34px; }
  .cta-contacts { gap:24px; }
  .brand-badge { display:none; }
}

/* ── "for Business" brand badge + cross-site nav link ──────── */
.brand-logo { display:inline-flex; align-items:center; gap:10px; }
.brand-badge {
  font-family:var(--azo); font-size:11px; font-weight:700; letter-spacing:.04em;
  color:var(--navy); background:var(--navy-08);
  border:1px solid var(--navy-15); border-radius:var(--r-pill);
  padding:3px 10px; white-space:nowrap;
}
.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); }

/* ── DOOR PORTAL — the cross-site walk-through ──────────────
   The hero door art is a real link to the student experience. Its label
   sits INSIDE the door's own box, so making it interactive adds no layout
   shift to the hero. Clicking it runs the full-screen "walk through the
   door" transition below. */
.door-portal { display:block; cursor:pointer; text-decoration:none; -webkit-tap-highlight-color:transparent; }
/* tag the hero door so the page transition can lift it out and swing it
   open on its own, on top of the cross-dissolving page (see @view-transition) */
.hero-door-art.door-portal { view-transition-name: portalDoor; }
.door-portal:focus-visible { outline:3px solid var(--brass-bright); outline-offset:8px; border-radius:6px; }
.door-portal:hover .door-glow,
.door-portal:focus-visible .door-glow { opacity:1; }
.door-portal-hint {
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:3;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  padding:7px 15px; border-radius:var(--r-pill);
  background:rgba(10,12,26,.55); backdrop-filter:blur(4px);
  border:1px solid rgba(189,180,78,.45);
  font-family:var(--azo); font-size:11.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--brass-bright);
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.door-portal:hover .door-portal-hint,
.door-portal:focus-visible .door-portal-hint {
  background:rgba(10,12,26,.82); transform:translateX(-50%) translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.32);
}
.door-portal-hint i { transition:transform .25s ease; }
.door-portal:hover .door-portal-hint i { transform:translateX(3px); }

/* Full-screen transition overlay (built by doorPortal.js). Fixed + hidden
   until activated, so it has no effect on page layout. */
.door-transition {
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:0; visibility:hidden; background:#000; perspective:1700px;
  transition:opacity .28s ease;
}
.door-transition.is-active { opacity:1; visibility:visible; }
.dt-light {
  position:absolute; inset:0; opacity:0;
  background:radial-gradient(ellipse at center, #fff 0%, var(--brass-bright) 26%, rgba(189,180,78,0) 62%);
}
.dt-leaf {
  position:absolute; top:0; bottom:0; width:50.5%;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
                   linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  background-size:28px 28px, 100% 100%;
  backface-visibility:hidden; will-change:transform;
}
.dt-leaf.left  { left:0;  transform-origin:left center;  border-right:5px solid var(--brass-bright); box-shadow:14px 0 40px rgba(0,0,0,.4); }
.dt-leaf.right { right:0; transform-origin:right center; border-left:5px solid var(--brass-bright); box-shadow:-14px 0 40px rgba(0,0,0,.4); }
.dt-leaf .dt-handle {
  position:absolute; top:50%; width:9px; height:54px; border-radius:4px;
  background:var(--brass-bright); transform:translateY(-50%);
}
.dt-leaf.left  .dt-handle { right:16px; }
.dt-leaf.right .dt-handle { left:16px; }

/* ── CROSS-PAGE MORPH (View Transitions API) ────────────────
   Opt into cross-document view transitions so navigating between this
   business site and the student site (same origin) MORPHS one page into
   the other instead of a hard reload. The outgoing page eases out with a
   slight scale-up (you move "through" it) while the incoming page settles
   in from just under full size. doorPortal.js lets this native transition
   run on supported browsers and falls back to the door-swing overlay
   above on browsers that lack it. The student site opts in too, so the
   morph plays on both ends. */
@view-transition { navigation: auto; }
/* The PAGE cross-dissolves from the business site to the student site, while
   only the hero door (tagged view-transition-name:portalDoor) swings open on
   top of it — opening a door ON the page, not turning the whole page into a
   door. Cross-document transitions are driven by the DESTINATION document, so
   these rules live in both stylesheets. */
::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; } }
/* the hero door element swings open above the dissolving page */
::view-transition-old(portalDoor) {
  z-index:60; transform-origin:left center; backface-visibility:hidden;
  animation: odDoorLeaf .85s cubic-bezier(.6,0,.2,1) both;
}
@keyframes odDoorLeaf {
  0%   { transform:perspective(1400px) rotateY(0deg);    opacity:1; }
  100% { transform:perspective(1400px) rotateY(-118deg); opacity:0; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root),
  ::view-transition-old(root), ::view-transition-new(root),
  ::view-transition-old(portalDoor) { animation:none; }
}