/* ============================================================
   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; scroll-padding-top:86px; } /* anchor jumps clear the fixed navbar */
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; }
a:focus-visible, button:focus-visible { outline:3px solid var(--brass); outline-offset:3px; border-radius:4px; }

.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:1400px; 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:20px; margin:0 auto; padding:0 20px; }
.nav-ctas { flex:0 0 auto; }
.nav-links a { position:relative; font-family:var(--azo); font-size:13.5px; font-weight:500; color:var(--charcoal); transition:color .2s; white-space:nowrap; }
.nav-links a:hover { color:var(--navy); }
/* scroll spy: the section currently in view gets a brass underline */
.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);
}
.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; }
.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. */
/* One unified surface behind the doorway: the container is the card, and the
   four capability rows are sections of it, separated by hairline dividers.
   (No overflow:hidden here — the scroll doors swing out past the edges.) */
.capability-list {
  max-width:860px; margin:52px auto 0; display:flex; flex-direction:column; gap:0;
  background:var(--snow); border:1px solid var(--warm-2); border-radius:var(--r-card);
  box-shadow:var(--shadow-soft);
}
.capability-row { display:flex; gap:28px; align-items:flex-start; padding:30px 34px; }
.capability-row + .capability-row { border-top:1px solid var(--warm-2); }
.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);
  display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s; }
/* on the cool mist band the cards take neutral borders and a resting shadow */
.section-mist .tier-card { border-color:var(--border); box-shadow:var(--shadow-soft); }
.section-mist .tier-body { border-top-color:var(--border); }
.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:#ece4d2; }
.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 { flex:1 1 auto; 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-top.navy .tier-star, .tier-top.brass .tier-star { color:#fff; }
.tier-note { text-align:center; color:var(--slate); font-size:14px; margin:12px 0 0; }
/* 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; }
}

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

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

/* ── CROSS-PAGE MORPH (View Transitions API) ────────────────
   Opt into cross-document view transitions for same-origin navigations
   (e.g. home → businessSignup.php): a gentle cross-dissolve instead of a
   hard reload. The API is same-origin only, so links to the student 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; }
}

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

/* ── Nav: single-line links ───────────────────────────────
   Six links + two CTAs only fit on one line above ~1240px, so the
   hamburger takes over earlier than the old 980px breakpoint. */
@media (max-width: 1240px) {
  .nav-toggle { display:inline-flex; }
  .nav-links {
    display:none;
    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; }
}

/* ── Event announcement popup (partials/events.php; data in partials/events-data.php).
      Auto-retires after the event, so these styles sit dormant between events. ── */
.event-popup-backdrop { position:fixed; inset:0; z-index:220; background:rgba(16,23,40,.62);
  display:flex; align-items:center; justify-content:center; padding:24px 18px;
  opacity:0; transition:opacity .3s ease; overflow-y:auto; }
/* the display:flex above would override the hidden attribute's display:none,
   leaving an invisible click-blocking layer — force it */
.event-popup-backdrop[hidden] { display:none; }
.event-popup-backdrop.is-open { opacity:1; }
.event-popup { position:relative; width:min(880px, 100%); border-radius:18px; overflow:hidden;
  background:var(--navy-deep); color:#fff; box-shadow:0 30px 80px rgba(0,0,0,.45);
  transform:translateY(18px) scale(.97); transition:transform .3s ease; }
.event-popup-backdrop.is-open .event-popup { transform:translateY(0) scale(1); }
.event-popup-photo { position:absolute; inset:0; background-size:cover; background-position:center; }
.event-popup-scrim { position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(16,23,40,.88) 0%, rgba(16,23,40,.72) 45%, rgba(16,23,40,.28) 100%); }
.event-popup-content { position:relative; padding:56px 48px 96px; max-width:560px; }
.event-popup-title { font-family:var(--azo); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  font-size:clamp(26px,3.4vw,38px); line-height:1.08; margin:0; }
.event-popup-title em { display:block; font-family:var(--serif); font-style:italic; font-weight:600;
  text-transform:none; letter-spacing:0; color:var(--brass-bright); font-size:clamp(34px,4.6vw,52px); margin-top:2px; }
.event-popup-tagline { font-family:var(--azo); font-weight:600; font-size:clamp(15px,1.8vw,19px);
  margin:16px 0 0; color:#fff; }
.event-popup-details { margin-top:22px; display:grid; gap:4px; }
.event-popup-details p { margin:0; font-weight:600; font-size:15px; color:rgba(255,255,255,.92); line-height:1.55; }
.event-popup-ctas { display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }
.event-popup-close { position:absolute; top:14px; right:14px; z-index:3; width:40px; height:40px;
  border:0; border-radius:50%; background:rgba(16,23,40,.55); color:#fff; font-size:16px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s; }
.event-popup-close:hover, .event-popup-close:focus-visible { background:rgba(16,23,40,.85); }
.event-popup-powered { position:absolute; right:18px; bottom:16px; z-index:2;
  display:flex; align-items:center; gap:14px;
  background:rgba(255,255,255,.92); border-radius:10px; padding:9px 16px; }
.event-popup-powered span { font-family:var(--azo); font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--charcoal); }
.event-popup-powered img { height:32px; width:auto; display:block; }
@media (max-width: 640px) {
  .event-popup-content { padding:52px 26px 24px; }
  .event-popup-powered { position:relative; right:auto; bottom:auto; margin:0 26px 24px; justify-content:center; }
  .event-popup-scrim { background:rgba(16,23,40,.78); }
}

/* Event notification dot — a small pulsing circle perched on the hero door
   art's top-right corner (inline top/left set by events.php JS). Clicking it
   reopens the event popup. Hidden with the door on small screens. */
.hero-row.has-event-notify { position:relative; }
.event-dot { position:absolute; z-index:5; width:40px; height:40px; padding:0; border:0;
  background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.4); transition:opacity .35s ease, transform .35s ease; }
.event-dot[hidden] { display:none; }
.event-dot.is-in { opacity:1; transform:scale(1); }
.event-dot.is-tucked { opacity:0; pointer-events:none; }
.event-dot-core { width:18px; height:18px; border-radius:50%; background:var(--brass-bright);
  border:3px solid #fff; box-shadow:0 2px 10px rgba(0,0,0,.35);
  transition:transform .2s ease; animation:eventDotPulse 2.2s ease-out infinite; }
.event-dot:hover .event-dot-core, .event-dot:focus-visible .event-dot-core { transform:scale(1.25); }
@keyframes eventDotPulse {
  0%   { box-shadow:0 2px 10px rgba(0,0,0,.35), 0 0 0 0 rgba(189,180,78,.6); }
  70%  { box-shadow:0 2px 10px rgba(0,0,0,.35), 0 0 0 14px rgba(189,180,78,0); }
  100% { box-shadow:0 2px 10px rgba(0,0,0,.35), 0 0 0 0 rgba(189,180,78,0); }
}
@media (prefers-reduced-motion: reduce) {
  .event-dot { transition:none; }
  .event-dot-core { animation:none; }
}