/* ==========================================================================
   lexnyc.css  ,  Lexington identity layer
   --------------------------------------------------------------------------
   ADDITIVE. Loads AFTER site.css and editorial.css and overrides them.
   site.css / editorial.css are shared heritage from the BPD Academy build and
   are never edited here.

   Palette is sampled from the school's own artwork, not invented:
     #003E73  the exact blue of the LEXINGTON wordmark (img/master-logo.png)
     #1D3691 / #3A57B4  the royal blue of the graduation gowns in img/hero.jpg
     #A04728  the warm clay in the same photograph (corridor doors)
   The Academy's navy/cream/gold is fully displaced below.

   Typography is chosen for MULTILINGUAL DELIVERY. Families here read Spanish,
   Chinese, Bengali, Arabic and more, so the stack names a real font for each of
   those scripts before it ever reaches a generic fallback. Nothing should
   render as tofu after the page is translated.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* --- Lexington blues --- */
  --lex-blue-950: #041E36;   /* deepest field: footer, dark bands            */
  --lex-blue-900: #062B4B;
  --lex-blue-800: #003E73;   /* THE logo blue. 10.8:1 on white               */
  --lex-blue-700: #0B5296;   /* link blue.      7.9:1 on white               */
  --lex-blue-600: #1268B8;
  --lex-blue-500: #2E86D6;
  --lex-blue-300: #7FB3E4;
  --lex-blue-200: #A9CDEE;   /* link blue for dark fields. 10.2:1 on 950     */
  --lex-blue-100: #DCEBF9;
  --lex-blue-050: #EFF6FC;

  /* --- warm accent, sampled from the hero photograph --- */
  --lex-clay:     #A04728;   /* 6.1:1 on white AND white is 6.1:1 on it      */
  --lex-clay-lt:  #E8A98A;   /* 8.4:1 on --lex-blue-950                      */
  --lex-clay-050: #FBF0EA;

  /* --- neutrals --- */
  --lex-ink:      #10202F;   /* body text.     16.5:1 on white               */
  --lex-ink-2:    #3E4C5C;   /* secondary.      8.8:1 on white               */
  --lex-paper:    #FFFFFF;
  --lex-sand:     #F7F4F0;   /* warm band                                    */
  --lex-mist:     #EFF4F9;   /* cool band                                    */
  --lex-line:     #DCE4EC;
  --lex-line-2:   #C6D3E0;

  --lex-focus:      #0B5296;
  --lex-focus-dark: #FFD9C2;

  /* --- type ---------------------------------------------------------------
     Latin runs on Inter. Everything after it is there so that a translated
     page still has a real typeface: the Noto faces are loaded from Google with
     unicode-range subsets, so a Bengali family downloads Bengali glyphs and an
     English family downloads none of them. The platform names after that are
     the offline safety net (Windows / macOS / Android).                      */
  --lex-sans:
    "Inter",
    "Noto Sans SC", "Noto Sans Arabic", "Noto Sans Bengali", "Noto Sans Devanagari",
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Nirmala UI", "Kohinoor Bangla", "Shonar Bangla",
    "Geeza Pro", "Segoe UI Historic", Tahoma, Arial,
    "Helvetica Neue", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";

  --lex-display: var(--lex-sans);

  --lex-shell: 1240px;
  --lex-band: clamp(64px, 7.5vw, 108px);
  --lex-radius: 14px;
  --lex-radius-sm: 9px;

  --lex-shadow-sm: 0 1px 2px rgba(4, 30, 54, 0.06), 0 2px 8px rgba(4, 30, 54, 0.05);
  --lex-shadow:    0 2px 6px rgba(4, 30, 54, 0.07), 0 12px 32px rgba(4, 30, 54, 0.10);
  --lex-shadow-lg: 0 4px 12px rgba(4, 30, 54, 0.09), 0 28px 64px rgba(4, 30, 54, 0.16);

  /* --- displace every Academy token the inherited sheets read ------------ */
  --brand: #003E73;
  --accent: #A04728;
  --gold-rgb: 160, 71, 40;
  --navy-rgb: 4, 30, 54;

  --navy-900: var(--lex-blue-950);
  --navy-800: var(--lex-blue-800);
  --navy-700: var(--lex-blue-700);
  --navy-600: var(--lex-blue-500);

  --amber-500: var(--lex-clay);
  --amber-600: var(--lex-clay);
  --amber-400: var(--lex-clay-lt);
  --gold-500:  var(--lex-clay-lt);

  --cream:     var(--lex-mist);
  --cream-2:   var(--lex-blue-050);
  --parchment: var(--lex-sand);
  --ink:       var(--lex-ink);
  --ink-warm:  var(--lex-ink);
  --slate:       var(--lex-ink-2);
  --slate-light: #4E5C6D;
  --line:  var(--lex-line);
  --rule:  rgba(0, 62, 115, 0.30);
  --red:   #A8281F;
  --green: #1F6B4C;

  --serif: var(--lex-display);
  --sans:  var(--lex-sans);

  --shadow-sm: var(--lex-shadow-sm);
  --shadow-md: var(--lex-shadow);
  --shadow-lg: var(--lex-shadow-lg);

  --radius-sm: var(--lex-radius-sm);
  --radius:    var(--lex-radius);
  --radius-lg: 20px;
}

/* --------------------------------------------------------------------------
   2. Base type. Bigger, calmer, and safe under translation.
   -------------------------------------------------------------------------- */
body {
  font-family: var(--lex-sans);
  font-size: 18px;
  line-height: 1.72;
  color: var(--lex-ink);
  background: var(--lex-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
}

/* Translated strings run longer than English. Nothing may break out of its box. */
body, p, li, h1, h2, h3, h4, h5, h6, a, dd, dt, figcaption, td, th, label, button, .lede {
  overflow-wrap: break-word;
}

p { line-height: 1.72; margin-bottom: 1.15em; text-wrap: pretty; }

h1, h2, h3, h4, h5 {
  font-family: var(--lex-display);
  color: var(--lex-blue-950);
  text-wrap: balance;
  font-synthesis-weight: none;
}
h1 {
  font-size: clamp(2.15rem, 4.4vw, 3.5rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.026em;
}
h2 {
  font-size: clamp(1.6rem, 2.9vw, 2.4rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.021em;
}
h3 { font-size: 1.28rem; font-weight: 700; line-height: 1.28; letter-spacing: -0.012em; }
h4 { font-size: 1.06rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.008em; }

a { color: var(--lex-blue-700); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--lex-clay); }

strong, b { font-weight: 700; color: var(--lex-blue-950); }

.container       { max-width: var(--lex-shell); padding: 0 28px; }
.container-wide  { max-width: 1400px; padding: 0 28px; }
.container-narrow{ max-width: 760px; padding: 0 28px; }

/* Comfortable measure wherever prose actually runs. */
.section-head p,
.hl-letter p,
.lede,
.footer-about p { max-width: 66ch; }

/* The a11y panel's size steps stay proportional to the bigger base. */
body.font-lg { font-size: 20px; }
body.font-xl { font-size: 22.5px; }

/* --------------------------------------------------------------------------
   3. Focus. Every interactive element, on light fields and dark ones.
      NOTE ON MOTION: this build deliberately contains no parallax, no autoplay,
      no entrance animation and no transform larger than 2px, so there is
      nothing vestibular to suppress. No prefers-reduced-motion override is
      shipped here on purpose (standing preference: motion stays live).
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--lex-focus);
  outline-offset: 3px;
  border-radius: 5px;
}
.util-bar :focus-visible,
.site-footer :focus-visible,
.section-navy :focus-visible,
.hero-editorial :focus-visible,
.demo-banner :focus-visible,
.bpd-buyer :focus-visible,
.a11y-btn:focus-visible,
.btn-primary:focus-visible,
.btn-dark:focus-visible,
.nav-cta:focus-visible {
  outline-color: var(--lex-focus-dark);
  outline-offset: 3px;
}
/* Selects, inputs and the language control get a filled ring as well as an
   outline so the focused control is obvious at a glance, not just at the edge. */
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline-color: var(--lex-focus);
  box-shadow: 0 0 0 4px rgba(11, 82, 150, 0.20);
}

.skip-link {
  background: var(--lex-blue-800);
  color: #fff;
  font-size: 16px;
  border-radius: 0 0 var(--lex-radius-sm) 0;
  padding: 14px 22px;
}

::selection { background: var(--lex-blue-100); color: var(--lex-blue-950); }

/* --------------------------------------------------------------------------
   4. THE LANGUAGE CONTROL
      This is the feature the whole preview exists to prove, so it is treated
      as a first-class control: labelled, above the fold on every page, sized
      like something you are meant to press.
   -------------------------------------------------------------------------- */
.util-bar {
  background: var(--lex-blue-950);
  color: #EAF2FA;
  font-size: 13.5px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(169, 205, 238, 0.16);
}
.util-bar .util-inner { gap: 20px; }
.util-bar a { color: rgba(234, 242, 250, 0.86); opacity: 1; }
.util-bar a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.util-bar .util-links { gap: 20px; font-weight: 500; }
.util-bar .util-tools { gap: 12px; }

.util-bar button[data-open-search] {
  background: transparent;
  border: 1px solid rgba(169, 205, 238, 0.34);
  color: #EAF2FA;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 999px;
  font-family: var(--lex-sans);
  font-weight: 500;
}
.util-bar button[data-open-search]:hover {
  border-color: rgba(169, 205, 238, 0.75);
  background: rgba(169, 205, 238, 0.12);
  color: #fff;
}

.lex-lang {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px 6px 15px;
  border-radius: 999px;
  background: rgba(169, 205, 238, 0.13);
  border: 1px solid rgba(169, 205, 238, 0.40);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.lex-lang:hover,
.lex-lang:focus-within {
  background: rgba(169, 205, 238, 0.20);
  border-color: rgba(169, 205, 238, 0.85);
}
.lex-lang-globe {
  width: 22px; height: 22px;
  flex: 0 0 auto;
  color: var(--lex-blue-200);
}
.lex-lang-copy { display: flex; flex-direction: column; line-height: 1.25; }
.lex-lang-label {
  font-size: 13px;
  font-weight: 600;
  color: #F3F8FD;         /* 15.5:1 on the bar */
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.lex-lang-scripts {
  font-size: 12px;
  color: #C3D6E8;         /* 9.6:1 on the bar */
  white-space: nowrap;
  margin-top: 1px;
}

.lex-lang-slot { position: relative; display: flex; align-items: center; }

/* The placeholder is shaped exactly like the real select so the hand-off from
   placeholder to live widget is not a visible jump. */
.lex-lang-trigger,
.lex-lang .goog-te-combo,
.lex-lang #google_translate_element select {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--lex-sans) !important;
  font-size: 14.5px !important;
  font-weight: 600;
  line-height: 1.2;
  height: 38px;
  min-width: 208px;
  padding: 0 38px 0 15px !important;
  border-radius: 999px !important;
  border: 1px solid var(--lex-blue-200) !important;
  background-color: #fff !important;
  color: var(--lex-blue-950) !important;   /* 15.6:1 */
  cursor: pointer;
  text-align: left;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1.5 7 7.5 13 1.5' fill='none' stroke='%23003E73' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.lex-lang-trigger:hover,
.lex-lang .goog-te-combo:hover,
.lex-lang #google_translate_element select:hover {
  border-color: #fff !important;
  box-shadow: 0 0 0 3px rgba(169, 205, 238, 0.30);
}
.lex-lang .goog-te-gadget {
  font-size: 0 !important;          /* kills Google's stray text nodes */
  line-height: 0 !important;
  color: transparent !important;
  margin: 0 !important;
}
.lex-lang .goog-te-gadget > div { display: inline-block; }

/* Placeholder out / live control in. Only a select that actually holds
   languages earns the swap (see the option-count guard in foot.ejs). */
.lex-lang #google_translate_element { display: none; }
.lex-lang.is-ready #google_translate_element { display: block; }
.lex-lang.is-ready .lex-lang-trigger { display: none; }
.lex-lang.is-ready .goog-te-gadget,
.lex-lang.is-ready .goog-te-gadget > div { display: inline-block !important; }

/* Once a language is chosen the pill reports it. */
.lex-lang.is-translated {
  background: rgba(232, 169, 138, 0.18);
  border-color: var(--lex-clay-lt);
}

/* Google's own injected chrome. */
body { top: 0 !important; }
.goog-te-banner-frame,
.goog-te-balloon-frame { box-shadow: none !important; }
#goog-gt-tt, .goog-te-balloon-frame { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.site-header {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--lex-line);
  box-shadow: none;
}
.header-inner { padding: 16px 28px; gap: 22px; max-width: 1440px; }

.brand { gap: 16px; align-items: center; }
/* Their master logo is a horizontal wordmark, so it is shown at wordmark
   proportions instead of being squeezed into a 48px square. The school name
   also stays in the DOM as real text (below) rather than living only inside a
   picture, which is what their current logo does. */
.brand-mark {
  width: auto;
  height: clamp(30px, 3.4vw, 42px);
  max-width: 260px;
  object-fit: contain;
}
.brand-name {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* ...but an admin in the CMS has to be able to SEE the field to edit it, so it
   comes back the moment inline editing is on. */
html.cms-mode-on .brand-name {
  position: static;
  width: auto; height: auto; margin: 0;
  overflow: visible;
  clip-path: none;
  white-space: normal;
  font-size: 12px;
  font-weight: 700;
  color: var(--lex-ink-2);
}
.brand-sub {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--lex-ink-2);
  margin: 0;
  padding-left: 16px;
  border-left: 1px solid var(--lex-line-2);
  max-width: 26ch;
  line-height: 1.35;
}
.brand > span { display: flex; align-items: center; }
@media (max-width: 1540px) { .brand-sub { display: none; } }

.main-nav { gap: 1px; }
.main-nav a {
  color: var(--lex-blue-950);
  font-weight: 600;
  font-size: 14.5px;
  padding: 10px 11px;
  border-radius: 8px;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.main-nav a:hover { background: var(--lex-blue-050); color: var(--lex-blue-800); }
.main-nav a.active {
  background: transparent;
  color: var(--lex-blue-800);
  box-shadow: inset 0 -3px 0 var(--lex-clay);
  border-radius: 8px 8px 0 0;
}
.main-nav .nav-portal {
  border: 1px solid var(--lex-line-2);
  color: var(--lex-blue-800);
  border-radius: 999px;
  font-weight: 600;
  font-size: 13.5px;
  padding: 9px 14px;
  margin-left: 6px;
  white-space: nowrap;
}
.main-nav .nav-portal:hover {
  background: var(--lex-blue-050);
  color: var(--lex-blue-800);
  border-color: var(--lex-blue-300);
}
.main-nav .nav-cta {
  background: var(--lex-clay);       /* white on clay = 6.1:1 */
  color: #fff;
  border-radius: 999px;
  padding: 10px 20px;
  margin-left: 8px;
  font-weight: 700;
  white-space: nowrap;
}
.main-nav .nav-cta:hover { background: #85391D; color: #fff; }

.mobile-menu-btn span { background: var(--lex-blue-800); }
@media (max-width: 1024px) {
  .main-nav { background: var(--lex-blue-950); }
  .main-nav a { color: #EAF2FA; }
  .main-nav a:hover, .main-nav a.active { background: rgba(169,205,238,0.14); color: #fff; box-shadow: none; }
  .main-nav .nav-portal { border-color: rgba(169,205,238,0.5); color: #EAF2FA; }
  .main-nav .nav-cta { color: #fff; }
}

/* --------------------------------------------------------------------------
   6. Hero. The photograph is real students; it gets to be seen whole, and the
      headline sits on solid colour underneath it rather than on top of faces.
   -------------------------------------------------------------------------- */
.hero-editorial {
  display: block;
  position: relative;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--lex-blue-950);
  color: #EAF2FA;
}
.hero-editorial .hero-bg-img {
  position: relative;
  inset: auto;
  z-index: 0;
  width: 100%;
  height: clamp(230px, 33vw, 470px);
  background-position: 50% 26%;
  background-size: cover;
  transform: none;
}
.hero-editorial::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(230px, 33vw, 470px);
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(4, 30, 54, 0.10) 0%,
    rgba(4, 30, 54, 0.00) 34%,
    rgba(4, 30, 54, 0.55) 76%,
    rgba(4, 30, 54, 0.94) 93%,
    var(--lex-blue-950) 100%);
  pointer-events: none;
}
.hero-editorial::after { display: none; }   /* Academy grain overlay, off */

.hero-editorial .hero-inner {
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin-top: clamp(-108px, -7vw, -52px);
  padding-bottom: clamp(52px, 6vw, 78px);
}
.hero-editorial .eyebrow {
  color: var(--lex-clay-lt);
  border-bottom-color: var(--lex-clay-lt);
}
.hero-editorial h1 {
  color: #FFFFFF;
  font-weight: 800;
  font-size: clamp(2.3rem, 5.2vw, 4.1rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
  max-width: 17ch;
  text-shadow: 0 2px 24px rgba(4, 30, 54, 0.45);
}
.hero-editorial h1 em { color: var(--lex-clay-lt); font-style: normal; }
.hero-editorial .lede {
  color: #D9E6F2;                    /* 11.4:1 on the blue field */
  font-size: clamp(1.08rem, 1.55vw, 1.32rem);
  line-height: 1.62;
  max-width: 62ch;
  margin-bottom: 34px;
}
.hero-editorial .hero-ctas { gap: 14px; }

/* Interior page heroes inherit the same treatment. */
.page-hero, .page-hero-img { background: var(--lex-blue-950); }

/* --------------------------------------------------------------------------
   7. Bands, eyebrows, section rhythm
   -------------------------------------------------------------------------- */
.section        { padding: var(--lex-band) 0; }
.section-sm     { padding: clamp(44px, 5vw, 64px) 0; }
.section-tight  { padding: clamp(34px, 4vw, 48px) 0; }
.section-cream  { background: var(--lex-sand); }
.section-white  { background: var(--lex-paper); }
.section-navy   { background: var(--lex-blue-950); color: #DDE9F4; }
.section-navy h2, .section-navy h3, .section-navy h4 { color: #fff; }
.section-navy .section-head p, .section-navy p { color: #C9DAEA; }

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--lex-clay);
  border-bottom: 2px solid var(--lex-clay);
  padding-bottom: 5px;
  margin-bottom: 18px;
}
.section-navy .eyebrow { color: var(--lex-clay-lt); border-bottom-color: var(--lex-clay-lt); }

.section-head { margin-bottom: clamp(32px, 4vw, 52px); max-width: 820px; }
.section-head h2 { margin-bottom: 12px; }
.section-head p { font-size: 1.06rem; color: var(--lex-ink-2); }

/* --------------------------------------------------------------------------
   8. Buttons
   -------------------------------------------------------------------------- */
.btn {
  border-radius: 999px;
  padding: 14px 28px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  border-width: 2px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary { background: var(--lex-clay); color: #fff; border-color: var(--lex-clay); }
.btn-primary:hover {
  background: #85391D; border-color: #85391D; color: #fff;
  transform: none; box-shadow: 0 6px 18px rgba(4, 30, 54, 0.24);
}
.btn-dark { background: var(--lex-blue-800); color: #fff; border-color: var(--lex-blue-800); }
.btn-dark:hover { background: var(--lex-blue-950); border-color: var(--lex-blue-950); color: #fff; }
.btn-ghost {
  background: transparent;
  color: #EAF2FA;
  border-color: rgba(234, 242, 250, 0.55);
}
.btn-ghost:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, 0.10); }
/* Ghost buttons that sit on light fields (some pages set an inline colour). */
.section-white .btn-ghost, .section-cream .btn-ghost {
  color: var(--lex-blue-800); border-color: var(--lex-line-2);
}
.section-white .btn-ghost:hover, .section-cream .btn-ghost:hover {
  background: var(--lex-blue-050); border-color: var(--lex-blue-300); color: var(--lex-blue-800);
}

/* --------------------------------------------------------------------------
   9. Homepage furniture
   -------------------------------------------------------------------------- */
.in-season { background: var(--lex-blue-050); border-bottom: 1px solid var(--lex-line); }
.in-season .label { color: var(--lex-clay); letter-spacing: 0.14em; }
.in-season-item .k { color: var(--lex-ink-2); letter-spacing: 0.10em; }
.in-season-item a { color: var(--lex-blue-800); font-weight: 600; }
.in-season-item a:hover { color: var(--lex-clay); border-bottom-color: var(--lex-clay); }

.quicklinks { background: var(--lex-paper); border-bottom: 1px solid var(--lex-line); }
.quicklink {
  border-right: 1px solid var(--lex-line);
  color: var(--lex-blue-950);
  font-weight: 600;
  gap: 12px;
  padding: 30px 16px;
  transition: background 0.15s ease, color 0.15s ease;
}
.quicklink:hover { background: var(--lex-blue-050); color: var(--lex-blue-800); }
.quicklink svg { color: var(--lex-blue-700); width: 26px; height: 26px; }
.quicklink:hover svg { color: var(--lex-clay); }

.news-grid { gap: 30px; }
.news-card {
  border: 1px solid var(--lex-line);
  border-radius: var(--lex-radius);
  overflow: hidden;
  background: var(--lex-paper);
  box-shadow: var(--lex-shadow-sm);
  transition: box-shadow 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.news-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--lex-shadow);
  border-color: var(--lex-blue-300);
}
.news-card-img { min-height: 208px; }
.news-card-title { font-family: var(--lex-display); font-weight: 700; color: var(--lex-blue-950); letter-spacing: -0.012em; }
.news-card-date { color: var(--lex-clay); letter-spacing: 0.1em; font-weight: 700; }
.news-card-excerpt { color: var(--lex-ink-2); font-size: 15.5px; line-height: 1.62; }
.news-card-tag { background: var(--lex-blue-050); color: var(--lex-blue-800); border-radius: 999px; }

.heads-letter { background: var(--lex-sand); }
.hl-letter .eyebrow { color: var(--lex-clay); }
.hl-letter h2 { color: var(--lex-blue-950); }
.hl-letter p { font-size: 1.06rem; line-height: 1.78; color: var(--lex-ink); }
.hl-portrait { border-radius: var(--lex-radius); box-shadow: var(--lex-shadow); }
.hl-sig { font-family: var(--lex-display); font-weight: 700; color: var(--lex-blue-800); }
.hl-sig-role { color: var(--lex-ink-2); font-weight: 500; }
.dropcap::first-letter {
  font-family: var(--lex-display);
  font-weight: 800;
  color: var(--lex-blue-800);
}

.ethos-word {
  font-family: var(--lex-display);
  font-weight: 800;
  font-style: normal;              /* no synthetic oblique on a geometric sans */
  letter-spacing: -0.03em;
  color: #fff;
}
.ethos-sep { color: var(--lex-clay-lt); }
.ethos-line { color: #C9DAEA; font-size: 1rem; }   /* 9.9:1 on the blue band */

.stat-card, .portal-card, .staff-card, .testimonial-card, .compliance-card, .job-card {
  border-radius: var(--lex-radius);
  border-color: var(--lex-line);
  box-shadow: var(--lex-shadow-sm);
}
.stat-card:hover, .portal-card:hover { box-shadow: var(--lex-shadow); transform: none; }
.portal-card:hover { border-left-color: var(--lex-clay); }
.staff-card .role { color: var(--lex-clay); }
.compliance-card { border-left-color: var(--lex-blue-700); }
.compliance-card a.compliance-link { color: var(--lex-clay); }
.job-apply { background: var(--lex-blue-800); color: #fff; border-color: var(--lex-blue-800); border-radius: 999px; }
.job-apply:hover { background: var(--lex-clay); border-color: var(--lex-clay); color: #fff; }

.field input, .field textarea, .field select {
  border-radius: var(--lex-radius-sm);
  border-color: var(--lex-line-2);
  font-family: var(--lex-sans);
  font-size: 16px;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--lex-blue-700);
  box-shadow: 0 0 0 4px rgba(11, 82, 150, 0.16);
  outline: none;
}

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--lex-blue-950);
  color: rgba(228, 238, 247, 0.80);
  padding: clamp(56px, 6vw, 84px) 0 30px;
  border-top: 4px solid var(--lex-clay);
}
.footer-grid { border-bottom-color: rgba(169, 205, 238, 0.18); }
.footer-grid h4 { color: var(--lex-clay-lt); letter-spacing: 0.14em; }
.footer-grid a { color: rgba(228, 238, 247, 0.80); font-size: 14.5px; }
.footer-grid a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-about .addr { color: rgba(228, 238, 247, 0.70); font-size: 14px; }
.footer-about .addr a { color: var(--lex-blue-200); }
.lex-footer-mark { height: 40px; width: auto; max-width: 240px; }
.lex-footer-name {
  font-family: var(--lex-display);
  font-weight: 700;
  font-size: 17px;
  color: #fff;
  letter-spacing: -0.012em;
}
.lex-footer-tag {
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--lex-clay-lt);
  margin-top: 3px;
}
.footer-legal-links a { color: rgba(228, 238, 247, 0.62); }
.footer-legal-links a:hover { color: #fff; }
.footer-bottom, .powered-by { color: rgba(228, 238, 247, 0.60); }

/* --------------------------------------------------------------------------
   11. Pitch chrome (demo banner, a11y panel, search) re-tinted to match
   -------------------------------------------------------------------------- */
.demo-banner { background: var(--lex-blue-900); border-bottom: 1px solid rgba(169,205,238,0.2); }
.demo-banner-msg { color: #DCE9F5; }
.demo-banner-msg a { color: var(--lex-blue-200); }
.demo-banner-pill { background: var(--lex-clay); color: #fff; border-radius: 999px; }
.demo-banner-link { color: #DCE9F5 !important; border-radius: 999px; }
.demo-banner-link-cta { background: var(--lex-clay); border-color: var(--lex-clay); color: #fff !important; }
.demo-banner-link-cta:hover { background: #85391D; border-color: #85391D; }

.a11y-btn { background: var(--lex-blue-800); color: #fff; border-color: #fff; }
.a11y-btn:hover { background: var(--lex-blue-950); }
.a11y-panel-body { border-radius: var(--lex-radius); border-color: var(--lex-line); }
.a11y-panel-body h5 { color: var(--lex-blue-950); }
.a11y-panel-body button {
  background: var(--lex-blue-050);
  border-color: var(--lex-line);
  color: var(--lex-blue-950);
  border-radius: 999px;
  font-size: 14px;
}
.a11y-panel-body button:hover { background: var(--lex-blue-800); color: #fff; }
.a11y-panel-body button.active { background: var(--lex-blue-950); color: #fff; }

.search-box { border-radius: var(--lex-radius); }
.search-box input { font-family: var(--lex-sans); font-size: 17px; }
.search-box input:focus { border-color: var(--lex-blue-700); }

/* Older AA patch in site.css hard-codes the Academy gold on these roles. */
.eyebrow,
.staff-card .role,
.board-card .role,
.compare-foot a,
.demo-banner-msg a,
.demo-banner-link { color: var(--lex-clay); }
.demo-banner-msg a, .demo-banner-link { color: #DCE9F5; }

/* --------------------------------------------------------------------------
   11b. AA repairs for greys that arrive from elsewhere.
        Measured on the rendered page: #7C8699 on white is 3.67:1, which fails
        AA for body-size text. These are colour-only overrides, so they stay
        correct even if the markup around them changes.
   -------------------------------------------------------------------------- */
/* nav-linkouts.ejs ships its own <style> block in the body, so these need two
   classes to win on specificity rather than on order. */
.lex-linkouts .lex-linkout-sys,
.lex-linkouts .lex-linkout-url,
.lex-linkouts .lex-linkout-note { color: var(--lex-ink-2); }   /* 8.8:1 on white */
.lex-linkouts .lex-linkout-label { font-family: var(--lex-display); font-weight: 700; color: var(--lex-blue-950); }
.lex-linkouts .lex-linkout-blurb { color: var(--lex-ink-2); }
.lex-linkouts .lex-linkout { border-radius: var(--lex-radius); border-color: var(--lex-line); }
.lex-linkouts .lex-linkout:hover { border-color: var(--lex-blue-300); }

.news-grid > p,
.events-list > p,
.search-results > p { color: var(--lex-ink-2) !important; }

/* BPD's shared signature ships a mid grey tuned for a lighter footer; on this
   footer it measured 3.36:1. Colour only, the mark is untouched. */
.site-footer a.bpd-sig,
.site-footer .bpd-sig__text { color: rgba(228, 238, 247, 0.72); }   /* 7.0:1 */
.site-footer .bpd-sig__name { color: rgba(240, 247, 253, 0.92); }

/* --------------------------------------------------------------------------
   12. Right-to-left. Set by the language control when a family picks Arabic,
       Farsi, Hebrew or Urdu. Google Translate does not do this by itself.
   -------------------------------------------------------------------------- */
html[dir="rtl"] .eyebrow { border-bottom-color: currentColor; }
html[dir="rtl"] .hero-editorial h1,
html[dir="rtl"] .hero-editorial .lede { max-width: none; }
html[dir="rtl"] .brand-sub {
  padding-left: 0; padding-right: 16px;
  border-left: 0; border-right: 1px solid var(--lex-line-2);
}
html[dir="rtl"] .lex-lang-label,
html[dir="rtl"] .lex-lang-scripts { text-align: right; }
html[dir="rtl"] .lex-lang .goog-te-combo,
html[dir="rtl"] .lex-lang-trigger {
  padding: 0 15px 0 38px !important;
  background-position: left 14px center !important;
  text-align: right;
}
html[dir="rtl"] .main-nav .nav-portal,
html[dir="rtl"] .in-season-item { text-align: right; }

/* --------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .util-bar { padding: 10px 0; }
  .util-bar .util-inner { flex-direction: column; align-items: stretch; gap: 12px; }
  /* The language control comes FIRST on small screens: it is the first thing a
     family sees, before any navigation. */
  .util-bar .util-tools { order: -1; justify-content: space-between; }
  .util-bar .util-links { justify-content: center; gap: 16px; font-size: 13px; }
  .lex-lang { flex: 1 1 auto; }
  .lex-lang-scripts { display: none; }
}
@media (max-width: 620px) {
  body { font-size: 17px; }
  .container, .container-wide, .container-narrow { padding: 0 20px; }
  .header-inner { padding: 14px 20px; }
  .lex-lang { padding: 8px 8px 8px 12px; gap: 10px; }
  .lex-lang-label { font-size: 12.5px; white-space: normal; line-height: 1.2; }
  .lex-lang-trigger, .lex-lang .goog-te-combo { min-width: 0; width: 100%; font-size: 14px !important; }
  .lex-lang-slot { flex: 1 1 auto; min-width: 120px; }
  .util-bar button[data-open-search] { display: none; }
  .hero-editorial .hero-inner { margin-top: -34px; padding-bottom: 44px; }
  .hero-editorial h1 { max-width: none; }
  .news-card-img { min-height: 190px; }
}

/* ---------------------------------------------------------------------------
   Hero image: keep the photo painted once, scaled to fill.

   NOTE FOR THE NEXT PERSON: an earlier comment here blamed the /admissions
   "photo printed twice with a seam" report on background tiling, on the theory
   that a `background:` shorthand later in the cascade had reset
   background-size to `auto` and background-repeat to `repeat`. That theory was
   wrong. Measured on the live page, these two declarations were already
   applying (computed background-repeat: no-repeat, background-size: cover) and
   the seam was completely unchanged. The photo never tiled. The real cause is
   the padding desynchronisation handled in the block below.

   These longhands are kept because they are correct and cheap insurance
   against a future `background:` shorthand, not because they fix the seam.
   --------------------------------------------------------------------------- */
.hero-bg-img,
.hero-editorial .hero-bg-img,
.page-hero-img .hero-bg-img {
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* ---------------------------------------------------------------------------
   Hero seam fix — the actual cause.

   The editorial hero stacks two boxes of identical height that must line up
   exactly:

     .hero-editorial .hero-bg-img   the photograph. position: relative, so it
                                    sits in normal flow and IS pushed down by
                                    any padding-top on the section.
     .hero-editorial::before        the gradient that fades the photo down into
                                    navy so the headline lands on solid colour.
                                    position: absolute; top: 0, anchored to the
                                    section's padding box, so padding does NOT
                                    move it.

   views/admissions.ejs and views/academics.ejs carry an inline
   `style="min-height:62vh;padding:120px 0 80px"` on the section. An inline
   style attribute outranks every non-!important stylesheet declaration, so the
   `padding: 0; min-height: 0` further up this file (section 6) was overruled.
   The 120px of padding-top then moved the photo down 120px while leaving the
   gradient where it was, which produced exactly what was reported:

     - 120px of bare navy above the photo, and
     - the bottom 120px of the photo with no gradient over it, ending in a hard
       horizontal seam where the gradient's final opaque stop stopped. Above the
       seam: darkened. Below it: raw photo. It read as a double exposure.

   Measured before: photo 286->756, gradient 166->636. Gap 120px, band 120px.
   Measured on / (no inline style): photo and gradient both 166->636, gap 0.

   The clean fix is to delete the inline style attribute from those two
   templates. Those templates are owned by another task, so this does it from
   CSS instead. !important is unavoidable: nothing weaker beats an inline style
   attribute. It is also harmless if the templates are cleaned up later, because
   these are the same values section 6 already declares.

   Do NOT "fix" this by touching background-size / background-repeat / the
   background shorthand. Those are already correct and were never the cause.

   Layout only. No claim about the school is made or implied here.
   --------------------------------------------------------------------------- */
.hero-editorial {
  padding: 0 !important;
  min-height: 0 !important;
}