/* AgentsOfSchools.ai - Marigold on Navy
   Applies Marko's 2026-08-13 design handoff over the Brand Guide V2 structure.
   Loaded AFTER brand.css: it re-points the design tokens to the dark system and
   restyles the components the handoff has an opinion about. Page structure and
   copy stay where they were. */

:root {
  /* Dark surface family */
  --page: #0A1128;
  --page-deep: #070D20;
  --card: rgba(16, 26, 56, 0.5);
  --card-hover: rgba(22, 34, 70, 0.7);
  --border: rgba(252, 163, 17, 0.16);
  --border-strong: rgba(252, 163, 17, 0.5);
  /* Text */
  --body: #C9CFDF;
  --strong: #F4F1E8;
  --muted: #A8B0C8;
  --faint: #8A93B0;
  --ghost: #5A648C;
  /* Accent unchanged: marigold is the constant across both systems */
  --marigold-hover: #FDC55E;
  --marigold-light: #FFD98A;
  --marigold-dark: #9A6700;
  /* Board companions */
  --board-line: rgba(252, 163, 17, 0.15);
  --board-chalk: #F4F1E8;
  --board-muted: #A8B0C8;
  /* Type: the handoff swaps the display and body faces, mono is shared */
  --display: 'Unbounded', 'Spectral', Georgia, serif;
  --serif: 'Unbounded', 'Spectral', Georgia, serif;
  --sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --ease-dc: cubic-bezier(0.2, 0.7, 0.2, 1);
}

html { scroll-behavior: smooth; }

body {
  background: var(--page);
  color: var(--body);
  overflow-x: hidden;
}

::selection { background: var(--marigold); color: var(--page); }

a { color: var(--strong); }
a:hover { color: var(--marigold); }

/* Section rules read as marigold hairlines on navy, not chalk lines on cream */
section + section { border-top: 1px solid var(--board-line); }

h1, h2, h3 { font-family: var(--display); color: var(--strong); }
h1 { font-weight: 900; letter-spacing: -0.02em; }
h2 { font-weight: 700; line-height: 1.08; }
h3 { font-weight: 500; }

/* ---- Nav ---------------------------------------------------------------- */

nav {
  position: sticky; top: 0; z-index: 100;
  padding: 10px 0;
  background: rgba(10, 17, 40, 0.6);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid rgba(252, 163, 17, 0.18);
}
nav a { color: var(--muted); }
nav a:hover { color: var(--marigold); }

/* The home nav carries the reversed lockup and lays itself out inside
   .wrap, so it opts out of brand.css's own flex row. Inner pages keep theirs. */
nav.mg-nav { display: block; padding: 0; gap: 0; }
nav.mg-nav .logo { display: flex; align-items: center; margin-right: 0; }
/* The logo files are cropped to the artwork, so height alone sizes them and no
   negative margin is needed to pull the empty space back. */
nav.mg-nav .logo img { height: 72px; width: auto; margin: 0; }
/* Inner pages run brand.css's flex nav, so they only need the new proportion. */
nav .logo img { height: 72px; width: auto; }
nav.mg-nav .cta { margin-left: 0; }
.mg-navbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 26px; padding-top: 10px; padding-bottom: 10px;
}
.mg-navlinks { display: flex; align-items: center; gap: 26px; font-size: 13.5px; }
.mg-navlinks .cta { padding: 10px 20px; font-size: 13.5px; }
nav .cta, .btn {
  font-family: var(--display); font-weight: 700;
  color: var(--page); background: var(--marigold);
  border-radius: 100px; border: none;
}
nav .cta:hover, .btn:hover { background: var(--marigold-hover); color: var(--page); }

/* ---- Ink that only worked on cream --------------------------------------
   brand.css paints these in --oxford, which is the dark navy itself. On the
   cream page that reads as ink; on this page it is navy on navy and vanishes.
   --oxford stays dark on purpose, it is still the correct ink on a marigold
   button, so each vanishing piece is re-pointed by hand instead. */
.direct .email, .direct .email a { color: var(--marigold); }
.step .n { color: var(--marigold); border-color: var(--border-strong); }
ul.plain li::before { background: var(--marigold); }
.worry-box .q { color: var(--strong); }
.checklist .box { border-color: var(--border-strong); }
.phone { border-color: var(--border); }
.task .check { color: var(--page); }

/* ---- Cards and panels --------------------------------------------------- */

.card, .pain, .step, .agent, .compare-box, .slot, .field,
.friday, .phone, .demo, .closer {
  background: var(--card);
  border-color: var(--border);
  color: var(--body);
}
.card:hover, .agent:hover, .pain:hover {
  background: var(--card-hover);
  border-color: var(--border-strong);
}
.board { background: var(--page-deep); border-color: var(--board-line); }
.kicker, .draft-tag, .demo-note, .phone-note, .stub-note,
.checklist-note, .role-note { color: var(--marigold); }
.sub, .answer, .pain b, .step b { color: var(--body); }
table, .table { border-color: var(--border); }

/* Anything that assumed a cream page keeps its contrast on navy */
.band, .results-strip, .proof-grid, .org-grid, .day-grid { color: var(--body); }

/* ---- Handoff home page -------------------------------------------------- */

.mg-mono {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--marigold); margin: 0 0 18px;
}

/* The nav is sticky and in flow, so a 100vh hero pushed its own last 93px below
   the fold and left a dead band under the nav once the content centred itself.
   The hero now fills exactly what the nav leaves, and the top padding is sized
   to sit the eyebrow just under the bar instead of floating mid-screen. */
.mg-hero {
  position: relative; min-height: calc(100vh - 93px);
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center; padding: 88px 24px 84px;
  overflow: hidden; border: none;
}
.mg-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mg-hero .scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 60%, transparent 30%, #0A1128 95%),
    radial-gradient(ellipse 60% 45% at 50% 62%, rgba(10, 17, 40, 0.72) 40%, transparent 100%);
}
.mg-hero .inner { position: relative; width: min(1100px, 100%); min-width: 0; }
.mg-hero h1 {
  font-size: clamp(44px, 7.2vw, 104px); line-height: 1.0;
  margin: 0 0 32px; max-width: none;
}
.mg-hero h1 .grad {
  background: linear-gradient(100deg, #FCA311 10%, #FFD98A 50%, #FCA311 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mg-hero .lede {
  font-size: clamp(17px, 1.6vw, 22px); line-height: 1.5;
  color: #E8E4D6; max-width: 62ch; margin: 0 auto 44px;
  text-shadow: 0 1px 12px rgba(10, 17, 40, 0.9), 0 0 32px rgba(10, 17, 40, 0.8);
}
.mg-cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.mg-btn {
  text-decoration: none; font-family: var(--display); font-weight: 700;
  font-size: 15px; color: var(--page); background: var(--marigold);
  padding: 18px 36px; border-radius: 100px; display: inline-block;
  transition: background 150ms var(--ease-dc), transform 150ms var(--ease-dc);
}
.mg-btn:hover { background: var(--marigold-hover); color: var(--page); transform: translateY(-2px); }
.mg-btn-ghost {
  text-decoration: none; font-family: var(--display); font-weight: 400;
  font-size: 15px; color: var(--strong); border: 1px solid rgba(252, 163, 17, 0.4);
  padding: 18px 36px; border-radius: 100px; display: inline-block;
  transition: border-color 150ms var(--ease-dc), color 150ms var(--ease-dc);
}
.mg-btn-ghost:hover { border-color: var(--marigold); color: var(--marigold); }
.mg-crew-rail {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 20px;
  margin: 40px auto 0;
}
.mg-crew-rail a {
  width: 100px; color: var(--muted); text-decoration: none;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mg-crew-rail img {
  display: block; width: 84px; height: 84px; margin: 0 auto 10px;
  object-fit: cover; border-radius: 50%;
  border: 2px solid rgba(252, 163, 17, 0.42);
  box-shadow: 0 8px 24px rgba(7, 13, 32, 0.55);
  transition: transform 180ms var(--ease-dc), border-color 180ms var(--ease-dc);
}
.mg-crew-rail a:hover { color: var(--marigold); }
.mg-crew-rail a:hover img { transform: translateY(-4px); border-color: var(--marigold); }
.mg-scroll {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.25em;
  text-transform: uppercase; color: var(--ghost);
}

.mg-ticker {
  border-top: 1px solid rgba(252, 163, 17, 0.15);
  border-bottom: 1px solid rgba(252, 163, 17, 0.15);
  overflow: hidden; padding: 18px 0;
  background: rgba(252, 163, 17, 0.03);
}
.mg-ticker .rail { display: flex; width: max-content; animation: mgMarquee 28s linear infinite; }
.mg-ticker p {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
  margin: 0; padding: 0 32px; white-space: nowrap;
}
.mg-ticker span { color: var(--marigold); padding-left: 32px; }

.mg-section { padding: 140px 24px 120px; border: none; }
.mg-inner { max-width: 1240px; margin: 0 auto; }
.mg-head { text-align: center; margin-bottom: 64px; }
.mg-head h2 { margin: 0 0 18px; font-size: clamp(30px, 4vw, 54px); }
.mg-head p.say { font-size: 18px; line-height: 1.55; color: var(--body); max-width: 58ch; margin: 0 auto; }

.mg-shell {
  position: relative; border: 1px solid rgba(252, 163, 17, 0.25);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(16, 26, 56, 0.9), rgba(7, 13, 32, 0.95));
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6), 0 0 80px rgba(252, 163, 17, 0.07) inset;
  overflow: hidden; animation: mgFloaty 7s ease-in-out infinite;
}
.mg-shell .scan {
  position: absolute; left: 0; right: 0; top: 0; height: 80px;
  background: linear-gradient(180deg, rgba(252, 163, 17, 0.10), transparent);
  pointer-events: none; animation: mgScan 6s linear infinite;
}
.mg-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 28px; border-bottom: 1px solid rgba(252, 163, 17, 0.15);
}
.mg-lights { display: flex; align-items: center; gap: 10px; }
.mg-lights i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.mg-bar p { font-family: var(--mono); font-size: 12px; color: var(--muted); margin: 0; }
.mg-bar .live { color: var(--marigold); }
.mg-bar .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--marigold); margin-right: 8px; animation: mgPulse 2s infinite;
}
.mg-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 0; }
.mg-queue { padding: 28px; border-right: 1px solid rgba(252, 163, 17, 0.12); }
.mg-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ghost); margin: 0 0 18px;
}
.mg-rows { display: flex; flex-direction: column; gap: 10px; }
.mg-row {
  display: flex; align-items: center; gap: 14px; padding: 13px 16px;
  border: 1px solid rgba(252, 163, 17, 0.12); border-radius: 12px;
  background: rgba(10, 17, 40, 0.4); opacity: 0.55;
  transition: all 500ms var(--ease-dc);
}
.mg-row.active { border-color: rgba(252, 163, 17, 0.45); background: rgba(252, 163, 17, 0.06); opacity: 1; }
.mg-row.done { opacity: 1; }
.mg-row .title { font-size: 15px; font-weight: 600; margin: 0; color: var(--strong); }
.mg-row .meta { font-family: var(--mono); font-size: 11.5px; margin: 3px 0 0; color: var(--faint); }
.mg-row .grow { flex: 1; }
.mg-check {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: var(--page);
  border: 1.5px solid rgba(252, 163, 17, 0.35); background: transparent;
}
.mg-row.done .mg-check {
  background: var(--marigold); border: none;
  animation: mgCheck 400ms var(--ease-dc) both;
}
.mg-badge {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; margin: 0;
  padding: 5px 10px; border-radius: 100px; color: var(--ghost);
  border: 1px solid rgba(252, 163, 17, 0.15); background: transparent;
  white-space: nowrap;
}
.mg-row.active .mg-badge { color: var(--marigold); border-color: rgba(252, 163, 17, 0.5); }
.mg-row.done .mg-badge { color: var(--page); background: var(--marigold); border-color: var(--marigold); }

.mg-side { padding: 28px; display: flex; flex-direction: column; gap: 24px; }
.mg-hours {
  font-family: var(--display); font-weight: 900; font-size: 56px;
  line-height: 1; margin: 0; color: var(--marigold);
}
.mg-hours small { font-size: 24px; font-weight: 400; color: var(--muted); }
.mg-bars { display: flex; flex-direction: column; gap: 14px; }
.mg-bars .top { display: flex; justify-content: space-between; margin-bottom: 6px; }
.mg-bars .top p { font-size: 13px; margin: 0; color: var(--body); }
.mg-bars .top .pct { font-family: var(--mono); font-size: 12px; color: var(--marigold); }
.mg-track { height: 6px; border-radius: 3px; background: rgba(252, 163, 17, 0.12); overflow: hidden; }
.mg-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #9A6700, #FCA311);
  transition: width 1s ease;
}
.mg-friday {
  border: 1px solid rgba(252, 163, 17, 0.2); border-radius: 12px;
  padding: 16px; background: rgba(252, 163, 17, 0.05);
}
.mg-friday p.h {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--marigold); margin: 0 0 8px;
}
.mg-friday p.d { font-size: 13.5px; line-height: 1.5; margin: 0; color: var(--body); }
.mg-sim {
  text-align: center; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--ghost);
  margin: 28px 0 0;
}

.mg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* One inset for the whole card: the portrait used to sit 10px wider than the
   text under it, which read as a misprint down the length of the row. */
.mg-agent {
  border: 1px solid rgba(252, 163, 17, 0.16); border-radius: 16px; padding: 22px 22px 30px;
  background: rgba(16, 26, 56, 0.5); backdrop-filter: blur(8px);
  transition: border-color 150ms var(--ease-dc), transform 150ms var(--ease-dc), background 150ms var(--ease-dc);
  overflow: hidden;
}
.mg-agent:hover { border-color: rgba(252, 163, 17, 0.5); transform: translateY(-4px); background: rgba(22, 34, 70, 0.7); }
.mg-agent .portrait {
  aspect-ratio: 1; overflow: hidden; border-radius: 12px; margin-bottom: 24px;
  background: radial-gradient(circle at 50% 65%, rgba(252, 163, 17, 0.18), transparent 62%);
}
.mg-agent .portrait img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  animation: agent-breathe 6s ease-in-out infinite;
  will-change: transform;
}
.mg-agent:nth-child(2n) .portrait img { animation-delay: -2s; }
.mg-agent:nth-child(3n) .portrait img { animation-delay: -4s; }
@keyframes agent-breathe {
  0%, 100% { transform: scale(1.015) translateY(0); }
  50% { transform: scale(1.045) translateY(-4px); }
}
.mg-agent .name { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--marigold); margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.08em; }
/* Two lines are reserved so the one-line headlines do not start their body copy
   higher than their neighbours across the row. */
.mg-agent h3 { font-size: clamp(22px, 2vw, 27px); line-height: 1.12; margin: 0 0 14px; min-height: 2.24em; }
.mg-agent p.does { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0; }

/* A wide-screen-only line break: on a phone the headline wraps on its own. */
.mg-brk { display: none; }
@media (min-width: 901px) { .mg-brk { display: inline; } }

/* The seventh card. It is the only one without a face, because the school names it
   during onboarding. It spans the full grid so it reads as the closing statement of
   the crew, not a seventh member sitting in a broken third row. */
.mg-agent-seven {
  grid-column: 1 / -1; margin-top: 14px;
  display: grid; grid-template-columns: 288px 1fr; gap: 44px; align-items: center;
  padding: 34px 40px 34px 28px;
  border-color: rgba(252, 163, 17, 0.34);
  background:
    radial-gradient(circle at 13% 50%, rgba(252, 163, 17, 0.11), transparent 44%),
    linear-gradient(115deg, rgba(24, 36, 74, 0.75), rgba(10, 17, 40, 0.72));
}
.mg-agent-seven:hover { border-color: var(--border-strong); }

.mg-seven-mark { position: relative; aspect-ratio: 1; }
.mg-seven-mark .aura {
  position: absolute; inset: 10%; border-radius: 50%;
  background: radial-gradient(circle at 50% 58%, rgba(252, 163, 17, 0.24), rgba(252, 163, 17, 0.04) 54%, transparent 72%);
  animation: seven-pulse 6s ease-in-out infinite;
}
.mg-seven-mark svg { position: relative; display: block; width: 100%; height: 100%; }
.mg-seven-mark .ring { animation: seven-spin 48s linear infinite; transform-origin: 130px 130px; }
.mg-seven-mark .ring-2 { animation: seven-spin 72s linear infinite reverse; transform-origin: 130px 130px; }
.mg-seven-mark .figure { animation: seven-breathe 6s ease-in-out infinite; transform-origin: 130px 150px; }
.mg-seven-mark .ember { animation: seven-ember 4s ease-in-out infinite; }
.mg-seven-mark .spark { animation: seven-twinkle 4.5s ease-in-out infinite; }
.mg-seven-mark .spark.s2 { animation-delay: -1.5s; }
.mg-seven-mark .spark.s3 { animation-delay: -3s; }
@keyframes seven-spin { to { transform: rotate(360deg); } }
@keyframes seven-pulse { 0%, 100% { opacity: 0.7; transform: scale(0.97); } 50% { opacity: 1; transform: scale(1.03); } }
@keyframes seven-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.02); } }
@keyframes seven-twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes seven-ember { 0%, 100% { opacity: 0.5; r: 4px; } 50% { opacity: 1; r: 5.4px; } }

.mg-agent-seven h3 { max-width: 20ch; min-height: 0; }
.mg-agent-seven p.does { max-width: 62ch; font-size: 15.5px; color: var(--body); }
.mg-seven-note {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ghost); margin: 20px 0 0;
}

.mg-trust { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.mg-trust h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; margin: 0 0 22px; }
.mg-trust p.say { font-size: 17px; line-height: 1.6; color: var(--body); margin: 0 0 14px; }
.mg-readmore {
  text-decoration: none; font-family: var(--display); font-size: 14px;
  color: var(--marigold); border-bottom: 1px solid rgba(252, 163, 17, 0.4); padding-bottom: 3px;
}
.mg-readmore:hover { border-bottom-color: var(--marigold); color: var(--marigold-hover); }
.mg-points { display: flex; flex-direction: column; gap: 14px; }
.mg-point {
  display: flex; gap: 16px; align-items: flex-start;
  border: 1px solid rgba(252, 163, 17, 0.16); border-radius: 14px;
  padding: 20px 22px; background: rgba(16, 26, 56, 0.5);
}
.mg-point .n { font-family: var(--display); font-size: 14px; color: var(--marigold); margin: 0; min-width: 20px; }
.mg-point .t { font-size: 15.5px; font-weight: 600; margin: 0; color: var(--strong); }
.mg-point .d { font-size: 14px; line-height: 1.55; margin: 4px 0 0; color: var(--muted); }

.mg-closer { position: relative; padding: 140px 24px; text-align: center; overflow: hidden; border: none; }
.mg-closer .glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 120%, rgba(252, 163, 17, 0.16), transparent 60%);
}
.mg-closer .inner { position: relative; max-width: 900px; margin: 0 auto; }
.mg-closer h2 { font-weight: 900; font-size: clamp(34px, 5vw, 68px); line-height: 1.05; margin: 0 0 24px; }
.mg-closer h2 span { color: var(--marigold); }
.mg-closer p.say { font-size: 19px; line-height: 1.55; color: var(--body); margin: 0 0 40px; }
.mg-closer .mg-btn { font-size: 17px; padding: 20px 48px; }
.mg-note {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ghost); margin: 24px 0 0;
}

.mg-foot { border-top: 1px solid rgba(252, 163, 17, 0.15); padding: 56px 24px 32px; }
.mg-foot .cols { max-width: 1240px; margin: 0 auto; display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.mg-foot img { height: 60px; display: block; margin: 0 0 16px; }
.mg-foot .status {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ghost); margin: 0 0 8px;
}
.mg-foot .links { display: flex; gap: 56px; }
.mg-foot .links div { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.mg-foot .links a { color: var(--muted); text-decoration: none; }
.mg-foot .links a:hover { color: var(--marigold); }
.mg-foot .rule {
  max-width: 1240px; margin: 40px auto 0; font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.15em; color: var(--ghost);
  border-top: 1px solid rgba(252, 163, 17, 0.1); padding-top: 20px;
}

/* Pulse is used on both the nav CTA and the live dot */
.pulse-glow { animation: mgPulse 3s ease-in-out infinite; }

/* ---- Motion ------------------------------------------------------------- */

@keyframes mgMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mgPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(252, 163, 17, 0.35); }
  50% { box-shadow: 0 0 0 12px rgba(252, 163, 17, 0); }
}
@keyframes mgScan { from { transform: translateY(-100%); } to { transform: translateY(500%); } }
@keyframes mgFloaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes mgCheck {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes mgHeroTitle {
  from { opacity: 0; transform: translateY(70px) skewY(2deg); }
  to { opacity: 1; transform: none; }
}
@keyframes mgRevealUp {
  from { opacity: 0; transform: translateY(48px); }
  to { opacity: 1; transform: none; }
}

.mg-enter { animation: mgHeroTitle 1000ms var(--ease-dc) both; }
.mg-enter.d1 { animation-duration: 900ms; animation-delay: 100ms; }
.mg-enter.d2 { animation-delay: 250ms; }
.mg-enter.d3 { animation-delay: 450ms; }
.mg-enter.d4 { animation-delay: 600ms; }

[data-reveal] { opacity: 0; }
[data-reveal].in { animation: mgRevealUp 800ms var(--ease-dc) both; }

@media (prefers-reduced-motion: reduce) {
  .mg-shell, .mg-shell .scan, .mg-ticker .rail, .pulse-glow, .mg-bar .dot { animation: none !important; }
  .mg-enter { animation: none; opacity: 1; }
  [data-reveal] { opacity: 1; }
  [data-reveal].in { animation: none; }
  .mg-agent .portrait img { animation: none; }
  .mg-seven-mark .aura, .mg-seven-mark .ring, .mg-seven-mark .ring-2,
  .mg-seven-mark .figure, .mg-seven-mark .spark, .mg-seven-mark .ember { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 900px) {
  /* Between the phone rule and the desktop bar the links used to wrap inside
     themselves ("Meet the / crew"), so they tighten and hold one line here. */
  .mg-navlinks { gap: 15px; font-size: 12.5px; }
  .mg-navlinks a { white-space: nowrap; }
  .mg-navlinks .cta { padding: 10px 16px; font-size: 12.5px; }
  nav.mg-nav .logo img, nav .logo img { height: 60px; }
  .mg-cols { grid-template-columns: 1fr; }
  .mg-queue { border-right: none; border-bottom: 1px solid rgba(252, 163, 17, 0.12); }
  .mg-grid { grid-template-columns: 1fr; }
  .mg-agent-seven { grid-template-columns: 1fr; gap: 22px; padding: 26px 22px 30px; text-align: center; }
  .mg-seven-mark { max-width: 240px; margin: 0 auto; }
  .mg-agent-seven h3, .mg-agent-seven p.does { max-width: none; }
  .mg-seven-note { font-size: 10.5px; letter-spacing: 0.1em; }
  .mg-trust { grid-template-columns: 1fr; gap: 40px; }
  .mg-section { padding: 88px 20px 72px; }
}

/* The home nav is one flex row that cannot wrap, so on a phone the links and the
   button ran off the right edge. Below 760px the logo and the button hold the bar
   and the section links drop out; the footer carries the full set. */
@media (max-width: 760px) {
  .mg-navbar { gap: 12px; }
  nav.mg-nav .logo { flex-basis: auto; flex-shrink: 1; min-width: 0; }
  .mg-navlinks { gap: 14px; }
  .mg-navlinks a:not(.cta) { display: none; }
  .mg-navlinks .cta { padding: 9px 16px; font-size: 12.5px; }
  nav.mg-nav .logo img { height: 52px; }
  .mg-hero { min-height: auto; padding-top: 92px; padding-bottom: 76px; }
  .mg-hero h1 { font-size: clamp(34px, 10.5vw, 44px); }
  /* Six across a phone forced 6.5px labels nobody could read, so the rail wraps
     to two rows of three and keeps the faces and names at a legible size. */
  .mg-crew-rail { gap: 14px 12px; margin-top: 32px; max-width: 300px; }
  .mg-crew-rail a { width: 88px; font-size: 9.5px; letter-spacing: 0.06em; }
  .mg-crew-rail img { width: 66px; height: 66px; margin-bottom: 8px; }
  .mg-scroll { display: none; }
}

/* ---- Crew-first How It Works ------------------------------------------ */

.crew-how main { overflow: hidden; }
.crew-how-hero {
  position: relative; min-height: 820px; padding: 104px 24px 96px;
  display: flex; align-items: center; border: none;
  background:
    radial-gradient(circle at 76% 45%, rgba(252, 163, 17, 0.14), transparent 29%),
    radial-gradient(circle at 20% 25%, rgba(57, 78, 145, 0.18), transparent 34%),
    var(--page);
}
.crew-orbit {
  position: absolute; right: -130px; top: 80px; width: 760px; height: 760px;
  border: 1px solid rgba(252, 163, 17, 0.12); border-radius: 50%;
  box-shadow: 0 0 120px rgba(252, 163, 17, 0.06) inset;
}
.crew-orbit::before, .crew-orbit::after {
  content: ""; position: absolute; border: 1px solid rgba(252, 163, 17, 0.10); border-radius: 50%;
}
.crew-orbit::before { inset: 90px; }
.crew-orbit::after { inset: 210px; }
.crew-how-inner {
  position: relative; z-index: 2; width: min(1240px, 100%); margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 70px; align-items: center;
}
.crew-how-copy h1 {
  font-size: clamp(48px, 6vw, 82px); line-height: 1.01; margin: 0 0 28px;
}
.crew-how-copy h1 span { color: var(--marigold); }
.crew-how-copy .lede { max-width: 650px; font-size: 19px; line-height: 1.65; color: var(--body); margin: 0 0 38px; }

/* The bottom pair used to sit on the name labels of the middle pair, so the
   stack is tall enough for the whole fan to breathe. */
.crew-stack { position: relative; min-height: 668px; }
.crew-stack-card {
  position: absolute; width: 168px; padding: 8px 8px 13px;
  border: 1px solid rgba(252, 163, 17, 0.28); border-radius: 18px;
  background: rgba(16, 26, 56, 0.92); box-shadow: 0 20px 55px rgba(0, 0, 0, 0.42);
  text-align: center; animation: crew-card-float 6s ease-in-out infinite;
}
.crew-stack-card img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; margin-bottom: 10px; }
.crew-stack-card span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--marigold); }
.crew-stack-card.c1 { left: 8%; top: 2%; transform: rotate(-6deg); }
.crew-stack-card.c2 { right: 6%; top: 6%; transform: rotate(5deg); animation-delay: -1s; }
.crew-stack-card.c3 { left: 0; top: 33%; transform: rotate(4deg); animation-delay: -2s; }
.crew-stack-card.c4 { right: 0; top: 34%; transform: rotate(-5deg); animation-delay: -3s; }
.crew-stack-card.c5 { left: 13%; bottom: 0; transform: rotate(-3deg); animation-delay: -4s; }
.crew-stack-card.c6 { right: 12%; bottom: 0; transform: rotate(4deg); animation-delay: -5s; }
.crew-stack-core {
  position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 112px; height: 112px; border-radius: 50%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: var(--page); background: var(--marigold);
  box-shadow: 0 0 0 14px rgba(252, 163, 17, 0.09), 0 0 70px rgba(252, 163, 17, 0.32);
}
.crew-stack-core b { font-family: var(--display); font-size: 22px; }
.crew-stack-core span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; }

.crew-how-strip {
  display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap;
  padding: 24px; background: rgba(252, 163, 17, 0.05); border-top: 1px solid var(--board-line); border-bottom: 1px solid var(--board-line);
}
.crew-how-strip p { margin: 0; font-family: var(--mono); color: var(--muted); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.crew-how-strip i { width: 5px; height: 5px; border-radius: 50%; background: var(--marigold); }

.crew-day { padding-top: 120px; }
.crew-day-list { border-top: 1px solid rgba(252, 163, 17, 0.2); }
.crew-day-row {
  display: grid; grid-template-columns: 80px 88px minmax(0, 1fr) 180px; gap: 26px; align-items: center;
  padding: 24px 12px; border-bottom: 1px solid rgba(252, 163, 17, 0.14);
  transition: background 180ms ease, padding 180ms ease;
}
.crew-day-row:hover { padding-left: 22px; padding-right: 22px; background: rgba(252, 163, 17, 0.035); }
.crew-time { font-family: var(--mono); color: var(--marigold); display: flex; align-items: baseline; gap: 5px; }
.crew-time b { font-size: 18px; }
.crew-time span { font-size: 9px; letter-spacing: 0.12em; }
.crew-day-row > img { width: 76px; height: 76px; object-fit: cover; border-radius: 16px; border: 1px solid rgba(252, 163, 17, 0.35); }
.crew-day-work .agent-name { font-family: var(--mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--marigold); margin: 0 0 6px; }
.crew-day-work h3 { font-size: clamp(18px, 2vw, 25px); margin: 0 0 7px; }
.crew-day-work > p:last-child { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.crew-output { justify-self: end; width: 100%; padding: 14px 16px; border: 1px solid rgba(252, 163, 17, 0.18); border-radius: 12px; background: rgba(16, 26, 56, 0.54); }
.crew-output span { display: block; margin-bottom: 5px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.15em; color: var(--marigold); }
.crew-output b { font-size: 13px; color: var(--strong); }

.crew-handoff { background: var(--page-deep); }
.crew-handoff-grid { display: grid; grid-template-columns: 1fr 0.85fr; gap: 90px; align-items: center; }
.crew-handoff h2 { font-size: clamp(30px, 4vw, 54px); margin: 0 0 24px; }
.crew-handoff p.say { font-size: 18px; line-height: 1.65; color: var(--body); max-width: 610px; }
.crew-flow { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.crew-flow > div { display: flex; align-items: center; gap: 18px; border: 1px solid rgba(252, 163, 17, 0.18); border-radius: 14px; padding: 10px 18px; background: rgba(16, 26, 56, 0.72); }
.crew-flow img { width: 56px; height: 56px; object-fit: cover; border-radius: 11px; }
.crew-flow span { font-size: 15px; color: var(--strong); }
.crew-flow > b { color: var(--marigold); text-align: center; font-size: 18px; line-height: 1; }

.crew-control { background: radial-gradient(circle at 50% 80%, rgba(252, 163, 17, 0.08), transparent 40%); }
.crew-control-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.crew-control-card { padding: 34px; min-height: 270px; border: 1px solid rgba(252, 163, 17, 0.18); border-radius: 18px; background: rgba(16, 26, 56, 0.55); }
.crew-control-card > span { font-family: var(--mono); font-size: 11px; color: var(--marigold); letter-spacing: 0.16em; }
.crew-control-card h3 { font-size: 23px; line-height: 1.25; margin: 42px 0 14px; min-height: 2.5em; }
.crew-control-card p { color: var(--muted); line-height: 1.6; margin: 0; }
.crew-private { max-width: 850px; margin: 50px auto 0; padding: 20px; text-align: center; font-family: var(--mono); font-size: 12px; line-height: 1.6; letter-spacing: 0.08em; text-transform: uppercase; color: var(--marigold); border-top: 1px solid rgba(252, 163, 17, 0.22); border-bottom: 1px solid rgba(252, 163, 17, 0.22); }

@keyframes crew-card-float {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -9px; }
}

@media (prefers-reduced-motion: reduce) {
  .crew-stack-card { animation: none; }
}

@media (max-width: 980px) {
  .crew-how-inner { grid-template-columns: 1fr; }
  .crew-how-copy { text-align: center; }
  .crew-how-copy .lede { margin-left: auto; margin-right: auto; }
  .crew-stack { width: min(600px, 100%); margin: 0 auto; }
  .crew-day-row { grid-template-columns: 65px 72px minmax(0, 1fr); }
  .crew-day-row > img { width: 66px; height: 66px; }
  .crew-output { grid-column: 3; width: auto; justify-self: start; }
  .crew-handoff-grid { grid-template-columns: 1fr; gap: 50px; }
}

@media (max-width: 700px) {
  .crew-how nav.mg-nav .mg-navbar { width: calc(100% - 28px); padding-left: 0; padding-right: 0; }
  .crew-how nav.mg-nav .mg-navlinks { width: auto; margin-left: auto; flex: 0 0 auto; }
  .crew-how nav.mg-nav .mg-navlinks .cta { display: inline-block; white-space: nowrap; }
  .crew-how-hero { min-height: auto; padding: 92px 18px 70px; }
  .crew-how-copy { min-width: 0; }
  .crew-how-copy h1 { font-size: clamp(34px, 10.5vw, 50px); overflow-wrap: anywhere; }
  .crew-how-copy .lede { font-size: 17px; }
  .crew-stack { min-height: 500px; transform: scale(0.9); transform-origin: top center; margin-bottom: -40px; }
  .crew-stack-card { width: 118px; border-radius: 14px; }
  .crew-stack-card img { border-radius: 9px; }
  .crew-stack-core { width: 84px; height: 84px; }
  .crew-stack-core b { font-size: 17px; }
  .crew-how-strip { gap: 12px 16px; }
  .crew-how-strip p { font-size: 9px; }
  .crew-day-row { grid-template-columns: 50px 58px minmax(0, 1fr); gap: 12px; padding: 20px 0; }
  .crew-day-row:hover { padding-left: 0; padding-right: 0; }
  .crew-time { flex-direction: column; gap: 0; }
  .crew-time b { font-size: 14px; }
  .crew-day-row > img { width: 54px; height: 54px; border-radius: 11px; }
  .crew-day-work h3 { font-size: 17px; }
  .crew-day-work > p:last-child { font-size: 13px; }
  .crew-output { grid-column: 2 / 4; margin-left: 0; }
  .crew-control-grid { grid-template-columns: 1fr; }
  .crew-control-card { min-height: 0; }
  .crew-control-card h3 { margin-top: 24px; min-height: 0; }
}

/* ---- Crew-first About -------------------------------------------------- */

.crew-about main { overflow: hidden; }
.about-hero {
  position: relative; min-height: 820px; padding: 104px 24px 96px; display: flex; align-items: center;
  background:
    linear-gradient(90deg, rgba(10, 17, 40, 0.96) 0%, rgba(10, 17, 40, 0.88) 45%, rgba(10, 17, 40, 0.55) 100%),
    radial-gradient(circle at 78% 44%, rgba(252, 163, 17, 0.18), transparent 31%), var(--page);
  border: none;
}
.about-hero-glow {
  position: absolute; width: 720px; height: 720px; right: -120px; top: 70px; border-radius: 50%;
  border: 1px solid rgba(252, 163, 17, 0.13); box-shadow: 0 0 0 110px rgba(252, 163, 17, 0.025), 0 0 0 220px rgba(252, 163, 17, 0.018);
}
.about-hero-inner {
  position: relative; z-index: 2; width: min(1240px, 100%); margin: 0 auto;
  display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 90px; align-items: center;
}
.about-hero-copy h1 { font-size: clamp(48px, 6.5vw, 88px); line-height: 1.0; margin: 0 0 30px; }
.about-hero-copy h1 span { color: var(--marigold); }
.about-hero-copy .lede { max-width: 660px; font-size: 19px; line-height: 1.65; color: var(--body); }
.about-portrait { position: relative; width: min(500px, 100%); margin: 0 auto; padding: 0 22px 92px; }
.about-photo-frame {
  position: relative; overflow: hidden; aspect-ratio: 4 / 4.5; border-radius: 28px;
  border: 1px solid rgba(252, 163, 17, 0.35); background: #EAE4DA;
  box-shadow: 0 40px 110px rgba(0, 0, 0, 0.52), 0 0 80px rgba(252, 163, 17, 0.08);
}
.about-photo-frame::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 -110px 90px rgba(10, 17, 40, 0.55); }
.about-photo-frame img { width: 100%; height: 100%; display: block; object-fit: cover; }
.about-nameplate {
  position: absolute; left: 0; right: 0; bottom: 68px; margin: auto; width: 78%; padding: 17px 22px;
  border: 1px solid rgba(252, 163, 17, 0.35); border-radius: 14px; background: rgba(10, 17, 40, 0.9);
  backdrop-filter: blur(15px); text-align: center;
}
.about-nameplate span { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--marigold); margin-bottom: 5px; }
.about-nameplate b { font-family: var(--display); font-size: 19px; color: var(--strong); }
.about-mini-crew { position: absolute; display: flex; bottom: 0; left: 50%; transform: translateX(-50%); }
.about-mini-crew img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--page); margin-left: -8px; box-shadow: 0 4px 18px rgba(0,0,0,0.35); }
.about-mini-crew img:first-child { margin-left: 0; }

.about-statement { padding: 135px 24px; text-align: center; background: var(--page-deep); }
.about-statement .mg-inner { max-width: 1050px; }
.about-statement h2 { font-size: clamp(34px, 5vw, 68px); line-height: 1.08; margin: 0 auto 28px; }
.about-statement h2 span { color: var(--marigold); }
.about-statement p:last-child { max-width: 780px; margin: 0 auto; color: var(--body); font-size: 18px; line-height: 1.7; }

.about-kimia-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 95px; align-items: center; }
.about-kimia-image { position: relative; max-width: 430px; }
.about-kimia-image::before { content: ""; position: absolute; inset: -18px 18px 18px -18px; border: 1px solid rgba(252, 163, 17, 0.25); border-radius: 24px; }
.about-kimia-image img { position: relative; display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 22px; }
.about-kimia h2 { font-size: clamp(36px, 5vw, 62px); margin: 0 0 4px; }
.about-role { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.13em; color: var(--marigold); font-size: 11px; margin: 0 0 30px; }
.about-kimia p.say { color: var(--body); font-size: 17px; line-height: 1.7; margin: 0 0 16px; }
.about-signature { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.about-signature span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.about-signature i { width: 5px; height: 5px; border-radius: 50%; background: var(--marigold); }

.about-principles { background: linear-gradient(180deg, var(--page), rgba(252, 163, 17, 0.035), var(--page)); }
.about-principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.about-principle-grid article { min-height: 360px; padding: 34px; border: 1px solid rgba(252, 163, 17, 0.18); border-radius: 20px; background: rgba(16, 26, 56, 0.55); }
.about-principle-grid article > span { font-family: var(--mono); font-size: 11px; color: var(--marigold); letter-spacing: 0.15em; }
.about-principle-grid h3 { margin: 80px 0 16px; font-size: 25px; line-height: 1.23; min-height: 2.46em; }
.about-principle-grid p { color: var(--muted); line-height: 1.65; }

.about-company { background: var(--page-deep); }
.about-company-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 90px; align-items: center; }
.about-company h2 { font-size: clamp(34px, 4vw, 54px); margin: 0 0 18px; }
.about-company p.say { font-size: 17px; line-height: 1.6; color: var(--body); }
.about-facts { border-top: 1px solid rgba(252, 163, 17, 0.22); }
.about-facts div { display: grid; grid-template-columns: 150px 1fr; gap: 28px; padding: 19px 4px; border-bottom: 1px solid rgba(252, 163, 17, 0.16); }
.about-facts span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--marigold); }
.about-facts b { color: var(--strong); font-size: 15px; }

.about-crew-band { position: relative; padding: 150px 24px; text-align: center; overflow: hidden; }
.about-crew-band > div:last-child { position: relative; z-index: 2; max-width: 850px; margin: 0 auto; }
.about-crew-band h2 { font-size: clamp(40px, 6vw, 76px); margin: 0 0 20px; }
.about-crew-band p:not(.mg-mono) { font-size: 19px; color: var(--body); margin: 0 0 38px; }
.about-band-crew { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 36px; opacity: 0.1; filter: grayscale(1); }
.about-band-crew img { width: 190px; height: 190px; object-fit: cover; border-radius: 50%; }

@media (max-width: 900px) {
  .about-hero-inner, .about-kimia-grid, .about-company-grid { grid-template-columns: 1fr; }
  .about-hero-copy { text-align: center; }
  .about-hero-copy .lede { margin-left: auto; margin-right: auto; }
  .about-portrait { width: min(460px, 90%); }
  .about-kimia-grid { gap: 65px; }
  .about-kimia-image { margin: 0 auto; }
  .about-principle-grid { grid-template-columns: 1fr; }
  .about-principle-grid article { min-height: 0; }
  .about-principle-grid h3 { margin-top: 38px; min-height: 0; }
}

@media (max-width: 700px) {
  .crew-about nav.mg-nav .mg-navbar { width: calc(100% - 28px); padding-left: 0; padding-right: 0; }
  .crew-about nav.mg-nav .mg-navlinks { width: auto; margin-left: auto; flex: 0 0 auto; }
  .crew-about nav.mg-nav .mg-navlinks .cta { display: inline-block; white-space: nowrap; }
  .about-hero { min-height: auto; padding: 92px 18px 80px; }
  .about-hero-inner { gap: 58px; }
  .about-hero-copy h1 { font-size: clamp(38px, 11.5vw, 54px); }
  .about-hero-copy .lede { font-size: 16.5px; }
  .about-portrait { padding-left: 12px; padding-right: 12px; }
  .about-statement { padding: 90px 20px; }
  .about-statement p:last-child { font-size: 16px; }
  .about-kimia-grid, .about-company-grid { gap: 50px; }
  .about-facts div { grid-template-columns: 105px 1fr; gap: 16px; }
  .about-band-crew { gap: 12px; }
  .about-band-crew img { width: 100px; height: 100px; }
}

/* ---- Crew-first Privacy ------------------------------------------------ */

.crew-privacy main { overflow: hidden; }
.privacy-hero {
  position: relative; min-height: 820px; padding: 104px 24px 96px; display: flex; align-items: center; border: none;
  background: radial-gradient(circle at 78% 48%, rgba(252, 163, 17, 0.13), transparent 29%), radial-gradient(circle at 18% 30%, rgba(57, 78, 145, 0.2), transparent 34%), var(--page);
}
.privacy-rings { position: absolute; width: 690px; height: 690px; right: -60px; top: 80px; border: 1px solid rgba(252, 163, 17, 0.12); border-radius: 50%; box-shadow: 0 0 0 100px rgba(252, 163, 17, 0.025), 0 0 0 200px rgba(252, 163, 17, 0.016); }
.privacy-hero-inner { position: relative; z-index: 2; width: min(1240px, 100%); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 58px; align-items: center; }
.privacy-hero-copy { max-width: 620px; }
.privacy-hero-copy h1 { font-size: clamp(43px, 5.25vw, 72px); line-height: 1.02; margin: 0 0 30px; }
.privacy-hero-copy h1 span { color: var(--marigold); }
.privacy-hero-copy .lede { max-width: 670px; font-size: 19px; line-height: 1.65; color: var(--body); margin: 0 0 38px; }
.privacy-vault { position: relative; width: min(530px, 100%); aspect-ratio: 1; margin: 0 auto; border: 1px solid rgba(252, 163, 17, 0.13); border-radius: 50%; box-shadow: inset 0 0 80px rgba(252, 163, 17, 0.05); }
.privacy-vault::before, .privacy-vault::after { content: ""; position: absolute; border: 1px dashed rgba(252, 163, 17, 0.17); border-radius: 50%; }
.privacy-vault::before { inset: 18%; }
.privacy-vault::after { inset: 36%; background: rgba(252, 163, 17, 0.035); }
.privacy-vault-core { position: absolute; z-index: 3; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 176px; height: 160px; border-radius: 28px; display: flex; flex-direction: column; justify-content: center; text-align: center; background: var(--marigold); color: var(--page); box-shadow: 0 0 0 16px rgba(252, 163, 17, 0.08), 0 0 70px rgba(252, 163, 17, 0.3); }
.privacy-vault-core span, .privacy-vault-core small { font-family: var(--mono); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; }
.privacy-vault-core b { font-family: var(--display); font-size: 17px; line-height: 1.15; margin: 9px 0; }
.privacy-vault-agent { position: absolute; z-index: 4; width: 86px; text-align: center; }
.privacy-vault-agent img { display: block; width: 72px; height: 72px; margin: 0 auto 7px; object-fit: cover; border-radius: 50%; border: 2px solid rgba(252, 163, 17, 0.55); box-shadow: 0 8px 28px rgba(0,0,0,0.45); }
.privacy-vault-agent span { font-family: var(--mono); font-size: 9px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--marigold); }
.privacy-vault-agent.p1 { left: 8%; top: 11%; }
.privacy-vault-agent.p2 { right: 8%; top: 11%; }
.privacy-vault-agent.p3 { left: -1%; top: 43%; }
.privacy-vault-agent.p4 { right: -1%; top: 43%; }
.privacy-vault-agent.p5 { left: 18%; bottom: 4%; }
.privacy-vault-agent.p6 { right: 18%; bottom: 4%; }

.privacy-strip { display: flex; justify-content: center; align-items: center; gap: 22px; flex-wrap: wrap; padding: 24px; background: var(--page-deep); border-top: 1px solid var(--board-line); border-bottom: 1px solid var(--board-line); }
.privacy-strip p { margin: 0; font-family: var(--mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
.privacy-strip i { width: 5px; height: 5px; border-radius: 50%; background: var(--marigold); }

.privacy-student { background: var(--page-deep); }
.privacy-student-head { max-width: 900px; margin: 0 auto 58px; text-align: center; }
.privacy-student-head h2 { font-size: clamp(34px, 4.8vw, 62px); line-height: 1.08; margin: 0 0 24px; }
.privacy-student-head > p:last-child { max-width: 720px; margin: 0 auto; color: var(--body); font-size: 18px; line-height: 1.65; }
.privacy-student-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.privacy-student-grid article { min-height: 310px; padding: 34px; border: 1px solid rgba(252, 163, 17, 0.2); border-radius: 18px; background: rgba(16, 26, 56, 0.62); }
.privacy-student-grid span { font-family: var(--mono); font-size: 11px; color: var(--marigold); letter-spacing: 0.15em; }
.privacy-student-grid h3 { font-size: 22px; line-height: 1.25; margin: 72px 0 14px; min-height: 2.5em; }
.privacy-student-grid p { color: var(--muted); line-height: 1.6; margin: 0; }

.privacy-agent-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.privacy-agent-grid article { display: grid; grid-template-columns: 108px 1fr; gap: 22px; align-items: start; padding: 16px; border: 1px solid rgba(252, 163, 17, 0.18); border-radius: 18px; background: rgba(16, 26, 56, 0.55); }
.privacy-agent-grid img { width: 108px; height: 108px; object-fit: cover; border-radius: 13px; }
.privacy-agent-grid span { font-family: var(--mono); font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--marigold); }
.privacy-agent-grid h3 { margin: 6px 0 8px; font-size: 19px; }
.privacy-agent-grid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

.privacy-flow { background: var(--page-deep); }
.privacy-flow-line { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 16px; align-items: stretch; }
.privacy-flow-line > b { align-self: center; }
.privacy-flow-line article { min-height: 315px; padding: 28px; border: 1px solid rgba(252, 163, 17, 0.18); border-radius: 18px; background: rgba(16, 26, 56, 0.62); }
.privacy-flow-line article span { font-family: var(--mono); font-size: 11px; color: var(--marigold); letter-spacing: 0.15em; }
.privacy-flow-line article h3 { font-size: 21px; line-height: 1.25; margin: 70px 0 14px; min-height: 2.5em; }
.privacy-flow-line article p { color: var(--muted); line-height: 1.6; margin: 0; }
.privacy-flow-line > b { color: var(--marigold); font-size: 22px; }

.privacy-difference { background: radial-gradient(circle at 80% 50%, rgba(252, 163, 17, 0.08), transparent 35%); }
.privacy-difference-grid { display: grid; grid-template-columns: 1fr 0.9fr; gap: 90px; align-items: center; }
.privacy-difference h2 { font-size: clamp(30px, 4vw, 52px); margin: 0; }
.privacy-answer { padding: 38px; border: 1px solid rgba(252, 163, 17, 0.25); border-radius: 20px; background: rgba(16, 26, 56, 0.65); }
.privacy-answer span { display: block; font-family: var(--display); color: var(--marigold); font-size: 22px; line-height: 1.3; margin-bottom: 20px; }
.privacy-answer p { color: var(--body); line-height: 1.65; }

.privacy-who { background: var(--page-deep); }
.privacy-table { border-top: 1px solid rgba(252, 163, 17, 0.28); }
.privacy-table > div { display: grid; grid-template-columns: 270px 1fr; gap: 34px; padding: 21px 6px; border-bottom: 1px solid rgba(252, 163, 17, 0.16); }
.privacy-table .head { font-family: var(--mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--marigold); }
.privacy-table b { color: var(--strong); }
.privacy-table p { color: var(--muted); margin: 0; line-height: 1.55; }

.privacy-it-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 90px; align-items: start; }
.privacy-it h2 { font-size: clamp(38px, 5vw, 64px); margin: 0 0 20px; }
.privacy-it p.say { color: var(--body); font-size: 17px; line-height: 1.65; }
.privacy-checks { border-top: 1px solid rgba(252, 163, 17, 0.26); }
.privacy-checks > div { display: grid; grid-template-columns: 46px 1fr; gap: 18px; padding: 19px 4px; border-bottom: 1px solid rgba(252, 163, 17, 0.16); }
.privacy-checks span { font-family: var(--mono); color: var(--marigold); }
.privacy-checks p { margin: 0; color: var(--muted); }
.privacy-checks b { display: block; color: var(--strong); margin-bottom: 5px; }

@media (max-width: 980px) {
  .privacy-hero-inner, .privacy-difference-grid, .privacy-it-grid { grid-template-columns: 1fr; }
  .privacy-hero-copy { text-align: center; }
  .privacy-hero-copy .lede { margin-left: auto; margin-right: auto; }
  .privacy-hero-copy .mg-cta-row { justify-content: center !important; }
  .privacy-vault { width: min(560px, 90%); }
  .privacy-student-grid { grid-template-columns: 1fr; }
  .privacy-student-grid article { min-height: 0; }
  .privacy-student-grid h3 { margin-top: 36px; min-height: 0; }
  .privacy-flow-line { grid-template-columns: 1fr 1fr; }
  .privacy-flow-line > b { display: none; }
}

@media (max-width: 700px) {
  .crew-privacy nav.mg-nav .mg-navbar { width: calc(100% - 28px); padding-left: 0; padding-right: 0; }
  .crew-privacy nav.mg-nav .mg-navlinks { width: auto; margin-left: auto; flex: 0 0 auto; }
  .crew-privacy nav.mg-nav .mg-navlinks .cta { display: inline-block; white-space: nowrap; }
  .privacy-hero { min-height: auto; padding: 92px 18px 75px; }
  .privacy-hero-inner { gap: 55px; }
  .privacy-hero-copy h1 { font-size: clamp(39px, 12vw, 55px); }
  .privacy-hero-copy .lede { font-size: 16.5px; }
  .privacy-vault { width: 340px; max-width: 95%; }
  .privacy-vault-core { width: 122px; height: 112px; border-radius: 20px; }
  .privacy-vault-core b { font-size: 12px; }
  .privacy-vault-agent { width: 58px; }
  .privacy-vault-agent img { width: 50px; height: 50px; }
  .privacy-vault-agent span { font-size: 7px; }
  .privacy-strip { gap: 11px 14px; }
  .privacy-strip p { font-size: 8px; }
  .privacy-agent-grid, .privacy-flow-line { grid-template-columns: 1fr; }
  .privacy-agent-grid article { grid-template-columns: 86px 1fr; gap: 14px; }
  .privacy-agent-grid img { width: 86px; height: 86px; }
  .privacy-flow-line article { min-height: 0; }
  .privacy-flow-line article h3 { margin-top: 36px; min-height: 0; }
  .privacy-difference-grid, .privacy-it-grid { gap: 48px; }
  .privacy-table > div { grid-template-columns: 1fr; gap: 8px; }
  .privacy-table .head { display: none; }
}

/* ---- Crew-first Contact ------------------------------------------------ */

.crew-contact main { overflow: hidden; }
.contact-hero { position: relative; min-height: 860px; padding: 104px 24px 100px; display: flex; align-items: center; border: none; background: radial-gradient(circle at 22% 42%, rgba(252, 163, 17, 0.15), transparent 31%), radial-gradient(circle at 86% 28%, rgba(57, 78, 145, 0.2), transparent 32%), var(--page); }
.contact-glow { position: absolute; width: 720px; height: 720px; left: -220px; top: 110px; border: 1px solid rgba(252, 163, 17, 0.11); border-radius: 50%; box-shadow: 0 0 0 110px rgba(252, 163, 17, 0.02), 0 0 0 220px rgba(252, 163, 17, 0.014); }
.contact-hero-inner { position: relative; z-index: 2; width: min(1240px, 100%); margin: 0 auto; display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 80px; align-items: center; }
.contact-copy h1 { font-size: clamp(50px, 6.2vw, 84px); line-height: 1; margin: 0 0 28px; }
.contact-copy h1 span { color: var(--marigold); }
.contact-copy .lede { max-width: 590px; color: var(--body); font-size: 19px; line-height: 1.65; margin: 0 0 34px; }
.contact-promises { border-top: 1px solid rgba(252, 163, 17, 0.24); max-width: 580px; }
.contact-promises > div { display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 15px 2px; border-bottom: 1px solid rgba(252, 163, 17, 0.15); }
.contact-promises span { font-family: var(--mono); color: var(--marigold); font-size: 10px; }
.contact-promises p { color: var(--muted); margin: 0; font-size: 14px; }
.contact-promises b { display: block; color: var(--strong); margin-bottom: 3px; }
.contact-crew { display: flex; margin-top: 28px; }
.contact-crew img { width: 54px; height: 54px; object-fit: cover; border-radius: 50%; border: 2px solid var(--page); margin-left: -8px; box-shadow: 0 5px 20px rgba(0,0,0,0.35); }
.contact-crew img:first-child { margin-left: 0; }

.contact-form-shell { padding: 34px; border: 1px solid rgba(252, 163, 17, 0.28); border-radius: 24px; background: rgba(12, 21, 48, 0.9); box-shadow: 0 35px 100px rgba(0,0,0,0.42), 0 0 80px rgba(252, 163, 17, 0.05); }
.contact-form-head { display: flex; justify-content: space-between; gap: 18px; align-items: baseline; margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid rgba(252, 163, 17, 0.17); }
.contact-form-head span { font-family: var(--mono); color: var(--marigold); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
.contact-form-head p { margin: 0; color: var(--muted); font-size: 14px; }
.contact-form { display: grid; gap: 17px; }
.contact-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.contact-form label > span { display: block; margin-bottom: 8px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--marigold); }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; box-sizing: border-box; padding: 14px 15px; border: 1px solid rgba(252, 163, 17, 0.18); border-radius: 11px; background: rgba(7, 13, 32, 0.72); color: var(--strong); font: inherit; outline: none; transition: border-color 160ms ease, box-shadow 160ms ease; }
.contact-form textarea { resize: vertical; min-height: 112px; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--ghost); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--marigold); box-shadow: 0 0 0 3px rgba(252, 163, 17, 0.08); }
.contact-form [aria-invalid="true"] { border-color: #FF6B6B; }
.contact-privacy-note { color: var(--ghost); font-size: 12px; line-height: 1.5; margin: -2px 0 0; }
.contact-submit { width: 100%; border: 0; cursor: pointer; font: inherit; }
.contact-submit:disabled { cursor: wait; opacity: 0.65; }
.contact-status { min-height: 22px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.contact-status.success { color: #8ED6A1; }
.contact-status.error { color: #FF9B9B; }
.contact-direct { margin-top: 20px; text-align: center; color: var(--muted); font-size: 13px; }
.contact-direct a { color: var(--marigold); }
.contact-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-noscript { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; margin: 0; padding: 12px; text-align: center; background: #7F1D1D; color: white; }

.contact-next { background: var(--page-deep); }
.contact-next-head { max-width: 850px; margin: 0 auto 58px; text-align: center; }
.contact-next-head h2 { font-size: clamp(38px, 5vw, 66px); margin: 0; }
.contact-next-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.contact-next-grid article { min-height: 330px; padding: 34px; border: 1px solid rgba(252, 163, 17, 0.18); border-radius: 19px; background: rgba(16, 26, 56, 0.6); }
.contact-next-grid span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--marigold); }
.contact-next-grid h3 { margin: 85px 0 14px; font-size: 24px; line-height: 1.25; min-height: 2.5em; }
.contact-next-grid p { margin: 0; color: var(--muted); line-height: 1.65; }

.contact-problems { background: radial-gradient(circle at 18% 40%, rgba(252, 163, 17, 0.07), transparent 32%); }
.contact-problems-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 90px; align-items: start; }
.contact-problems h2 { font-size: clamp(38px, 5vw, 62px); margin: 0; }
.contact-problem-list { border-top: 1px solid rgba(252, 163, 17, 0.24); }
.contact-problem-list p { display: grid; grid-template-columns: 88px 1fr; gap: 22px; margin: 0; padding: 19px 4px; color: var(--body); border-bottom: 1px solid rgba(252, 163, 17, 0.15); }
.contact-problem-list span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--marigold); }

.contact-final { position: relative; padding: 150px 24px; text-align: center; overflow: hidden; }
.contact-final > div:last-child { position: relative; z-index: 2; max-width: 850px; margin: 0 auto; }
.contact-final h2 { font-size: clamp(40px, 6vw, 76px); margin: 0 0 36px; }
.contact-final-crew { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; gap: 34px; opacity: 0.1; filter: grayscale(1); }
.contact-final-crew img { width: 190px; height: 190px; object-fit: cover; border-radius: 50%; }

@media (max-width: 980px) {
  .contact-hero-inner, .contact-problems-grid { grid-template-columns: 1fr; }
  .contact-copy { text-align: center; }
  .contact-copy .lede, .contact-promises { margin-left: auto; margin-right: auto; }
  .contact-crew { justify-content: center; }
  .contact-form-shell { width: min(680px, 100%); box-sizing: border-box; margin: 0 auto; }
  .contact-next-grid { grid-template-columns: 1fr; }
  .contact-next-grid article { min-height: 0; }
  .contact-next-grid h3 { margin-top: 38px; min-height: 0; }
}

@media (max-width: 700px) {
  .crew-contact nav.mg-nav .mg-navbar { width: calc(100% - 28px); padding-left: 0; padding-right: 0; }
  .crew-contact nav.mg-nav .mg-navlinks { width: auto; margin-left: auto; flex: 0 0 auto; }
  .crew-contact nav.mg-nav .mg-navlinks .cta { display: inline-block; white-space: nowrap; }
  .contact-hero { min-height: auto; padding: 92px 16px 75px; }
  .contact-hero-inner { gap: 55px; }
  .contact-copy h1 { font-size: clamp(40px, 12vw, 55px); }
  .contact-copy .lede { font-size: 16.5px; }
  .contact-promises { text-align: left; }
  .contact-crew img { width: 44px; height: 44px; }
  .contact-form-shell { padding: 22px 17px; border-radius: 19px; }
  .contact-field-row { grid-template-columns: 1fr; }
  .contact-form-head { align-items: flex-start; flex-direction: column; }
  .contact-problems-grid { gap: 48px; }
  .contact-problem-list p { grid-template-columns: 68px 1fr; gap: 12px; font-size: 14px; }
  .contact-final-crew { gap: 12px; }
  .contact-final-crew img { width: 100px; height: 100px; }
}