/* ============================================================
   USIDM — EXPERIENCE V2 design layer (Phase 1, preview).
   Loaded ONLY by V2 pages; every untouched page keeps the frozen
   production styling. One brand, three expressions: this layer carries
   the shared primitives; the student zone pushes them furthest.
   Palette: UNCHANGED — semantic aliases over the approved tokens.
   Sophistication comes from typography, media, space, composition,
   motion and hierarchy — not decoration. No gradients, no glow, no
   glassmorphism beyond the approved 0.85 showcase layer.
   ============================================================ */

.v2 {
  /* ---- semantic surface/text aliases (approved palette only) ---- */
  --bg-primary: var(--ivory);
  --bg-secondary: var(--paper);
  --bg-dark: var(--navy-900);
  --text-inverse: var(--white);
  --accent-primary: var(--crimson-800);
  --accent-secondary: var(--gold-600);
  --border-subtle: rgba(0, 10, 43, 0.08);

  /* ---- motion tokens ---- */
  --motion-fast: 160ms;
  --motion-standard: 320ms;
  --motion-slow: 640ms;
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---- responsive V2 type scale ---- */
  --v2-display: clamp(2.75rem, 6.5vw, 5rem);
  --v2-h1: clamp(2.25rem, 5vw, 3.75rem);
  --v2-h2: clamp(1.75rem, 3.4vw, 2.75rem);
  --v2-h3: clamp(1.25rem, 2vw, 1.625rem);
  --v2-body-lg: clamp(1.125rem, 1.5vw, 1.3125rem);
  --v2-body: 1.0625rem;
  --v2-small: 0.9375rem;
}

/* ---------- typography ---------- */
.v2 h1 { font-size: var(--v2-h1); line-height: 1.06; letter-spacing: -0.022em; }
.v2 h2 { font-size: var(--v2-h2); line-height: 1.12; letter-spacing: -0.016em; }
.v2 h3 { font-size: var(--v2-h3); line-height: 1.25; }
.v2 .lead { font-size: var(--v2-body-lg); line-height: 1.6; max-width: 62ch; }
.v2 .display { font-size: var(--v2-display); line-height: 1.02; letter-spacing: -0.025em; }

/* Student zone: sans carries the interface voice; serif is reserved for
   the biggest display moments so the UI stops feeling editorially old. */
.v2[data-zone="students"] h2, .v2[data-zone="students"] h3 { font-family: var(--font-ui); font-weight: 600; }
.v2[data-zone="students"] h1 { font-family: var(--font-display); }

/* ---------- rhythm: more air, fewer boxes ---------- */
.v2 .section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.v2 .section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.v2 .section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* ---------- buttons ---------- */
.v2 .btn { min-height: 52px; padding: 1rem 1.75rem; border-radius: 8px;
  font-size: 1rem; transition: transform var(--motion-fast) var(--ease-standard),
  background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard); }
.v2 .btn:hover { transform: translateY(-1px); }
.v2 .btn--primary:active { transform: translateY(0); }

/* ---------- surfaces ---------- */
.v2 .card { border: 0; background: transparent; padding: 0; }
.v2 .surface { background: var(--bg-secondary); border-radius: 14px; padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--border-subtle); }

/* Image-led cards (student exploration) */
.v2 .icard { position: relative; display: block; border-radius: 16px; overflow: hidden;
  text-decoration: none; color: var(--text-inverse); aspect-ratio: 4 / 5;
  transition: transform var(--motion-standard) var(--ease-standard); }
.v2 .icard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--motion-slow) var(--ease-standard); }
.v2 .icard:hover img { transform: scale(1.04); }
.v2 .icard:hover { transform: translateY(-4px); }
.v2 .icard::after { content: ''; position: absolute; inset: 0;
  background: rgba(0, 10, 43, 0.38); }           /* flat scrim, not a gradient */
.v2 .icard__body { position: absolute; inset-inline: 0; bottom: 0; padding: 1.5rem; z-index: 1; }
.v2 .icard h3 { color: var(--text-inverse); margin-bottom: 0.375rem; }
.v2 .icard p { color: rgba(255,255,255,0.85); font-size: var(--v2-small); }
.v2 .icard:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }

/* ---------- V2 header ---------- */
.v2 .nav { border-bottom: 1px solid var(--border-subtle); }
.v2 .nav__inner { min-height: 64px; }
.v2 .logo__lockup { width: clamp(250px, 23vw, 340px); height: auto; }
@media (max-width: 860px) { .v2 .logo__lockup { width: auto; height: 38px; } }
.v2 .nav__link { font-size: 0.9375rem; }
.v2 .nav__menu { border: 1px solid var(--border-subtle); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 10, 43, 0.10); padding: 1.5rem;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--motion-fast) var(--ease-standard),
              transform var(--motion-fast) var(--ease-standard); }
.v2 details[open] > .nav__menu { opacity: 1; transform: translateY(0); }
.v2 .nav__menu-label { font-size: 0.6875rem; margin-bottom: 0.625rem; }
.v2 .nav__menu-list a { min-height: 42px; font-size: 0.9375rem; border-radius: 8px;
  padding-inline: 0.625rem; margin-inline: -0.625rem;
  transition: background var(--motion-fast) var(--ease-standard); }
.v2 .nav__menu-list a:hover { background: var(--surface-hover); color: var(--navy-900); }
.v2 .nav__panel-cta { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem;
  padding-top: 1rem; border-top: 1px solid var(--border-subtle);
  color: var(--accent-primary); font-weight: 600; text-decoration: none; }
.v2 .nav__panel-cta:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }

/* Student panel: two nav groups + primary action; navigation stays primary */
.v2 .nav__menu--stu2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; min-width: 520px; }
.v2 .nav__menu--stu2 .nav__panel-cta { grid-column: 1 / -1; }

/* ---------- mobile navigation: near-full-screen, grouped, big targets ---- */
.v2 .nav__panel { padding-top: 2rem; }
.v2 .nav__panel .nav__link { font-size: 1.375rem; font-family: var(--font-ui); font-weight: 600; }
.v2 .nav__acc-list a { font-size: 1.0625rem; min-height: 52px; }
.v2 .nav__panel .btn { position: sticky; bottom: 1rem; }

/* ---------- V2 hero (neutral home) ---------- */
.v2 .vhero { min-height: min(88vh, 860px); }
.v2 .vhero__panel { background: transparent; max-width: 760px; padding: 0; }
.v2 .vhero__plate { background: var(--ivory); padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: 18px; max-width: 680px; }
.v2 .vhero__plate h1 { font-size: var(--v2-h1); }
.v2 .vhero__plate .lead { margin-top: 1rem; }
.v2 .vhero__inner { padding-block: clamp(2rem, 5vw, 4rem); }
@media (max-width: 900px) {
  .v2 .vhero { min-height: 0; }
  .v2 .vhero__plate { border-radius: 0; max-width: none; padding: 1.75rem 0; background: var(--bg-primary); }
}

/* ---------- doors (choose your path) ---------- */
/* The frozen system is keylines, not shadows, and near-square institutional
   corners. This rule carried border:0, a 16px radius and a 48px hover shadow,
   and at specificity 0,2,0 it silently overrode the page's own keyline
   treatment — which had therefore never rendered on production, on the two most
   prominent elements on the homepage.

   Restored to the treatment the page always intended. The translateY lift goes
   with the shadow rather than surviving it: without a shadow a card that rises
   4px is detaching from nothing. Padding is v2's own and is left alone — this
   is a design-system correction, not a redesign of the doors. */
.v2 .door { border: var(--border-hairline) solid var(--border-strong);
  border-radius: var(--radius-md); background: var(--bg-secondary);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  transition: border-color var(--motion-standard) var(--ease-standard); }
.v2 .door:hover { border-color: var(--navy-900); }

/* ---------- chooser (student) ---------- */
.v2 .chooser { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.v2 .chooser__opt { font-family: var(--font-ui); font-size: 1rem; font-weight: 500;
  padding: 0.875rem 1.375rem; border-radius: 999px; border: 1px solid var(--border-strong);
  background: transparent; color: var(--navy-800); cursor: pointer; min-height: 48px;
  transition: background var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard); }
.v2 .chooser__opt[aria-pressed="true"] { background: var(--navy-900); border-color: var(--navy-900); color: var(--text-inverse); }
.v2 .chooser__opt:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.v2 .chooser-detail { margin-top: 2rem; display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 2.5rem; align-items: center; }
.v2 .chooser-detail__media { border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10; }
.v2 .chooser-detail__media img { width: 100%; height: 100%; object-fit: cover; }
.v2 .chooser-detail[data-anim] { opacity: 0; transform: translateY(8px); }
.v2 .chooser-detail.is-in { opacity: 1; transform: none;
  transition: opacity var(--motion-standard) var(--ease-standard),
              transform var(--motion-standard) var(--ease-standard); }
@media (max-width: 800px) { .v2 .chooser-detail { grid-template-columns: 1fr; gap: 1.25rem; } }

/* ---------- journey (student) ---------- */
.v2 .journey2 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.75rem; }
.v2 .journey2__stage { text-align: start; border: 0; background: var(--bg-secondary);
  border-radius: 12px; padding: 1.125rem 1rem; cursor: pointer; min-height: 48px;
  font-family: var(--font-ui);
  transition: background var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard); }
.v2 .journey2__stage:hover { transform: translateY(-2px); }
.v2 .journey2__stage[aria-expanded="true"] { background: var(--navy-900); color: var(--text-inverse); }
.v2 .journey2__stage[aria-expanded="true"] small { color: rgba(255,255,255,0.7); }
.v2 .journey2__stage small { display: block; color: var(--text-tertiary); font-size: 0.75rem;
  letter-spacing: 0.08em; margin-bottom: 0.25rem; }
.v2 .journey2__stage:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.v2 .journey2-detail { margin-top: 1.75rem; max-width: 62ch; }
@media (max-width: 900px) { .v2 .journey2 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .v2 .journey2 { grid-template-columns: repeat(2, 1fr); } }

/* ---------- editorial resource cards ---------- */
.v2 .rescard { display: block; text-decoration: none; color: inherit;
  background: var(--bg-secondary); border-radius: 14px; padding: 1.75rem;
  transition: transform var(--motion-standard) var(--ease-standard),
              box-shadow var(--motion-standard) var(--ease-standard); }
.v2 .rescard:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(0, 10, 43, 0.08); }
.v2 .rescard .eyebrow { color: var(--accent-secondary); }
.v2 .rescard h3 { margin-block: 0.5rem 0.5rem; }
.v2 .rescard p { color: var(--text-secondary); font-size: var(--v2-small); }
.v2 .rescard:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }

/* ---------- section reveal (restrained) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Hidden start state applies only under .v2-js — the class v2.js sets on
     load (audit P1-E). Without JavaScript, content is simply visible. */
  .v2.v2-js [data-reveal] { opacity: 0; transform: translateY(14px); }
  .v2 [data-reveal].is-in { opacity: 1; transform: none;
    transition: opacity var(--motion-slow) var(--ease-standard),
                transform var(--motion-slow) var(--ease-standard); }
}
@media (prefers-reduced-motion: reduce) {
  .v2 * { transition-duration: 0.01ms !important; }
  .v2 .chooser-detail[data-anim] { opacity: 1; transform: none; }
}

/* ---------- reading experience (interior pages) ---------- */
.v2 .read { max-width: 68ch; }
.v2 .read p { font-size: var(--v2-body); line-height: 1.7; }
.v2 .callout { background: var(--bg-secondary); border-inline-start: 3px solid var(--accent-primary);
  border-radius: 0 12px 12px 0; padding: 1.5rem 1.75rem; }
.v2 .bignum h2, .v2 .bignum h3 { font-family: var(--font-display); font-size: var(--v2-h2); color: var(--navy-900); }

/* nav links never wrap mid-label */
.v2 .nav__links .nav__link { white-space: nowrap; }
.v2 .nav__cta { white-space: nowrap; flex-shrink: 0; }

/* Student header row (audit P0-C): five destinations + language switch + a
   primary action do not fit between 981 and ~1119px — the row squeezed the
   lockup to 0px and wrapped the CTA. Structural fix: keep the menu pattern
   through 1119px instead of shrinking the brand, and tighten link spacing in
   the 1120–1279 band so the row fits without clipping or tiny type. */
@media (max-width: 1119px) {
  .v2[data-zone="students"] .nav__links,
  .v2[data-zone="students"] .nav__cta { display: none; }
  .v2[data-zone="students"] .nav__toggle { display: inline-flex; }
}
@media (min-width: 1120px) and (max-width: 1279px) {
  .v2[data-zone="students"] .nav__links { gap: 1.05rem; }
  .v2[data-zone="students"] .nav__link { font-size: 0.875rem; }
  .v2[data-zone="students"] .nav__cta { padding-inline: 1.1rem; }
}

/* ---------- CANONICAL hero (owner-approved, cinematic no-plate) ----------
   Full-frame film, display type directly on it. Contrast is DETERMINISTIC,
   not per-frame luck: a uniform restrained film scrim plus a feathered
   bottom compositional scrim under the text zone (no hard edge — the
   feather spans a third of the frame; the upper frame keeps only the light
   film scrim). Sized so the text zone stays readable even over a pure-white
   patch of footage. STANDING QA RULE: verify headline contrast against the
   brightest frame of every clip — measured, not assumed — whenever any
   scene changes. */
.v2 .vhero--cinematic .vhero__plate { background: transparent; padding: 0; max-width: 720px; border-radius: 0; }
/* Glyph-level margin over moving footage: a soft dark shadow keeps letterforms
   separable when a near-white patch (sky, gowns, hijab) crosses the text zone
   for an instant — cheaper and subtler than darkening the whole film more. */
.v2 .vhero--cinematic .vhero__plate h1,
.v2 .vhero--cinematic .vhero__plate .eyebrow,
.v2 .vhero--cinematic .vhero__plate .lead,
.v2 .vhero--cinematic .vhero__plate .vhero__market {
  text-shadow: 0 1px 2px rgba(0, 10, 43, 0.45), 0 2px 18px rgba(0, 10, 43, 0.35); }
.v2 .vhero--cinematic .vhero__plate h1 { color: var(--text-inverse); font-size: var(--v2-display); }
.v2 .vhero--cinematic .vhero__plate .lead { color: rgba(255,255,255,0.92); }
.v2 .vhero--cinematic .vhero__plate .eyebrow { color: rgba(255,255,255,0.75); }
.v2 .vhero--cinematic .vhero__plate .vhero__market { color: rgba(255,255,255,0.7); border-top-color: rgba(255,255,255,0.25); }
.v2 .vhero--cinematic .vhero__media::after { content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to top,
      rgba(0, 10, 43, 0.56) 0%,
      rgba(0, 10, 43, 0.56) 72%,
      rgba(0, 10, 43, 0) 97%),
    rgba(0, 10, 43, 0.38); }
.v2 .vhero--cinematic .btn--secondary { color: var(--text-inverse); border-color: rgba(255,255,255,0.55); }
.v2 .vhero--cinematic .btn--secondary:hover { background: rgba(255,255,255,0.12); color: var(--text-inverse); }
@media (max-width: 900px) {
  .v2 .vhero--cinematic .vhero__plate { background: transparent; }
  .v2 .vhero--cinematic .vhero__panel { position: absolute; inset-inline: 0; bottom: 0; padding-inline: var(--gutter); }
  .v2 .vhero--cinematic.vhero { min-height: min(70vh, 640px); display: flex; }
  .v2 .vhero--cinematic .vhero__media { position: absolute; aspect-ratio: auto; }
}

/* ---------------------------------------------------------------------------
   STUDY-OPTION PAGES (IA Pass B). Short, conversion-oriented routes under
   /students. Shared here rather than duplicated in six page <style> blocks.
   Same editorial grammar as the frozen /students page: type and space, not
   boxes; numbers, not cards. --------------------------------------------- */
.v2 .sopt-hero { position: relative; min-height: min(56vh, 520px); display: flex;
  align-items: flex-end; background: var(--bg-dark); overflow: hidden; }
.v2 .sopt-hero__media { position: absolute; inset: 0; }
.v2 .sopt-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.v2 .sopt-hero__media::after { content: ''; position: absolute; inset: 0;
  background: rgba(0, 10, 43, 0.46); }
.v2 .sopt-hero__inner { position: relative; z-index: 1; width: 100%;
  padding-block: clamp(2rem, 5vw, 3.5rem); }
.v2 .sopt-hero .eyebrow { color: rgba(255,255,255,0.72); }
.v2 .sopt-hero h1 { color: var(--text-inverse); font-size: var(--v2-h1); max-width: 16ch;
  text-shadow: 0 1px 2px rgba(0,10,43,0.35); }
.v2 .sopt-hero p { color: rgba(255,255,255,0.92); margin-top: 1rem; max-width: 50ch;
  text-shadow: 0 1px 2px rgba(0,10,43,0.35); }

.v2 .sopt-lead { max-width: 62ch; }
.v2 .sopt-lead p { margin-top: 0.9rem; color: var(--text-secondary); }
.v2 .sopt-lead p strong { color: var(--text-primary); }

/* "What you can explore" — quiet typographic list, never a chip wall. */
.v2 .sopt-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem;
  margin-top: 1.25rem; max-width: 52ch; }
.v2 .sopt-list span { font-size: var(--v2-body); color: var(--text-primary);
  padding: 0.6rem 0; border-bottom: 1px solid var(--border-subtle, rgba(0,10,43,0.14)); }
@media (max-width: 560px) { .v2 .sopt-list { grid-template-columns: 1fr; } }

/* Compact four-step restatement — never the full /students journey. */
.v2 .sopt-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 2rem;
  margin-top: 1.5rem; }
@media (max-width: 900px) { .v2 .sopt-steps { grid-template-columns: 1fr 1fr; gap: 0 1.5rem; } }
@media (max-width: 520px) { .v2 .sopt-steps { grid-template-columns: 1fr; } }
.v2 .sopt-steps > div { padding: 1.1rem 0 1rem;
  border-top: 2px solid var(--border-subtle, rgba(0,10,43,0.16)); }
.v2 .sopt-steps b { display: block; font-size: var(--v2-small); font-weight: 700;
  letter-spacing: 0.1em; color: var(--accent-primary); }
.v2 .sopt-steps h3 { font-size: var(--v2-body); font-weight: 650; margin-top: 0.45rem;
  line-height: 1.35; }

.v2 .sopt-cta { padding-block: clamp(2.5rem, 6vw, 4rem); text-align: center; }
.v2 .sopt-cta h2 { font-size: var(--v2-h2); max-width: 20ch; margin-inline: auto; }
.v2 .sopt-cta p { margin-top: 0.9rem; color: var(--text-secondary); }
.v2 .sopt-note { margin-top: 1.1rem; font-size: var(--v2-small); color: var(--text-tertiary);
  max-width: 56ch; margin-inline: auto; }

/* Fields & Programs discovery — buttons that reveal one panel, tab semantics. */
.v2 .fieldgrid { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }
.v2 .fieldgrid button { appearance: none; cursor: pointer; font: inherit;
  font-size: var(--v2-body); padding: 0.6rem 1.15rem; min-height: 46px;
  border: 1.5px solid var(--border-strong, rgba(0,10,43,0.3)); border-radius: 999px;
  background: var(--bg-primary); color: var(--text-primary);
  transition: background 160ms var(--ease, ease), border-color 160ms var(--ease, ease); }
.v2 .fieldgrid button:hover { border-color: var(--bg-dark); }
.v2 .fieldgrid button:focus-visible { outline: 3px solid var(--accent-primary); outline-offset: 2px; }
.v2 .fieldgrid button[aria-selected="true"] { background: var(--bg-dark);
  color: var(--text-inverse); border-color: var(--bg-dark); }
.v2 .fieldpanel { margin-top: 2rem; max-width: 62ch; }
.v2 .fieldpanel h2 { font-size: var(--v2-h3); }
.v2 .fieldpanel p { margin-top: 0.8rem; color: var(--text-secondary); }
.v2 .fieldpanel .sopt-list { margin-top: 1rem; }
/* Enhancement-gated: without JS every field panel stays readable. */
.v2-js .fieldpanel { display: none; }
.v2-js .fieldpanel.is-on { display: block; }
html:not(.v2-js) .fieldpanel { border-top: 1px solid var(--border-subtle, rgba(0,10,43,0.14)); }
/* Students panel (IA Pass B): one "Study options" label spanning the existing
   two-column shell, six routes balanced 3+3, single action across the bottom. */
.v2 .nav__menu--stu2 .nav__menu-label--span { grid-column: 1 / -1; margin-bottom: -0.5rem; }