/* ============================================================
   SITE v2.0  ·  May 2026
   Global overrides applied to every page after styles.min.css.
   Two concerns only:
     1. Header logo size — reduced 20% from clamp(40px,3.2vw,56px)
     2. Footer brand column — equal vertical distribution of items
        (logo, address, contact, social) so adding the new address
        does not change the column's overall height.
   ============================================================ */

/* ------------------------------------------------------------
   #5  Header logo — matched to the Enquire/Apply button height
   so the header has equal visual weight on both sides. Buttons
   render at ~42px tall; the logo now scales to the same band.
   Bumped +10% (May 2026) per user request — was clamp(34px, 2.9vw, 42px).
   ------------------------------------------------------------ */
html .site-header .site-logo__img {
  height: clamp(37px, 3.19vw, 46px) !important;
  min-width: 0;
}
@media (max-width: 1080px) {
  html .site-header .site-logo__img {
    height: 37px !important;
  }
}
html .site-header .site-logo .site-logo__img {
  /* Specificity bumped further to beat min-width:132px selectors
     in styles.min.css that target both .site-header .site-logo and
     .site-header a[...] img with comparable specificity. */
  min-width: 0 !important;
}

/* ------------------------------------------------------------
   #11 Footer brand column — even vertical distribution of items.
   The brand column now contains three blocks:
       logo · contact (phone/email) · social
   Goal: spread them evenly inside the column's height; the column
   inherits its height from the grid row (the longer Explore /
   Admissions / Connect lists). With the address block removed in
   May 2026, the three remaining items get a generous vertical
   rhythm — space-between, larger logo, and breathing room around
   the social row so the brand column feels intentional rather
   than top-heavy.

   r26 NOTE: this block is superseded by the rebuild lower in
   this file (search "FOOTER BRAND COLUMN — r26 REBUILD"). The
   contact link block has been removed; only logo + social remain
   in the brand column.
   ------------------------------------------------------------ */
.site-footer__grid {
  /* let all columns share the row's intrinsic height so the brand
     column can use space-between against a meaningful container. */
  align-items: stretch;
}

.site-footer__brand {
  /* override the default flow so blocks distribute vertically */
  justify-content: space-between;
  /* remove the logo's bottom margin and the social's top margin
     so space-between does the spacing work, not stacked margins. */
  gap: 0;
  /* a comfortable minimum so distribution feels intentional even
     when the right-hand columns are unusually short. */
  min-height: 280px;
}

/* Zero out per-block margins; space-between does the spacing */
.site-footer__brand .site-footer__logo    { margin: 0; }
.site-footer__brand .site-footer__contact { margin: 0; }
.site-footer__brand .site-footer__social  { margin: 0; }

/* Lock visual order: logo → contact → social. column-balance.css
   already sets order:1/2/3 on logo/contact/social with !important;
   we restate it with higher specificity to be defensive. */
footer.site-footer .site-footer__brand .site-footer__logo    { order: 1 !important; }
footer.site-footer .site-footer__brand .site-footer__contact { order: 2 !important; }
footer.site-footer .site-footer__brand .site-footer__social  { order: 3 !important; }

/* Pull the contact block to vertical-centre between logo & social
   for a clean three-band rhythm. Without this it floats toward the
   top because space-between only pushes first/last. */
footer.site-footer .site-footer__brand .site-footer__contact {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

/* Narrow screens — the grid collapses to a single column, so the
   space-between behaviour isn't useful. Restore normal flow with
   sensible gaps. */
@media (max-width: 760px) {
  .site-footer__brand {
    justify-content: flex-start;
    gap: 22px;
    min-height: 0;
  }
  footer.site-footer .site-footer__brand .site-footer__contact {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* ------------------------------------------------------------
   FOOTER  ·  address / phone / email typography
   Match the column link items (Employee Recognition, Student
   Support, Alumni, etc.) exactly — same family, size, weight,
   line-height, colour — so the brand column reads as one
   typographic system with the rest of the footer.
   Reference link rule: .site-footer ul a { font-size: 13.5px;
   line-height: 1.4 } from styles.css override section.
   ------------------------------------------------------------ */
.site-footer__brand .site-footer__address,
.site-footer__brand .site-footer__contact {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  color: var(--cst-graphite-2);
}
.site-footer__brand .site-footer__contact a {
  /* match the same link colour as the column lists */
  color: var(--cst-graphite-2);
  text-decoration: none;
}
.site-footer__brand .site-footer__contact a:hover {
  color: var(--cst-red);
}

/* ============================================================
   FOOTER BRAND COLUMN — r26 REBUILD (May 2026)
   ------------------------------------------------------------
   The brand column now contains TWO items only:
     1. logo (top)
     2. social icons row (directly below logo, tight gap)
   Phone and email links have been removed from the footer
   entirely — they live on the Contact page and on the FAB.

   The logo + social stack is vertically CENTERED against the
   height of the nav columns (Explore / Admissions / Connect)
   via:
     .site-footer__grid { align-items: stretch }   (column heights match)
     .site-footer__brand { justify-content: center } (stack floats to middle)

   The earlier r10–r13 auto-margin / space-between rules that
   tried to distribute 3 or 4 items across the column are
   removed — they only fight a 2-item layout.
   ============================================================ */
.site-footer__grid {
  align-items: stretch;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
  min-height: 0;
}

/* Reset any leftover ordering / margins so the natural source order
   (logo, then social) renders as written. */
footer.site-footer .site-footer__brand .site-footer__logo,
footer.site-footer .site-footer__brand .site-footer__social {
  margin: 0 !important;
  order: 0 !important;
}

/* Narrow screens: stay as a top-aligned stack so the brand block
   doesn't float awkwardly above a tall column of nav links. */
@media (max-width: 760px) {
  .site-footer__brand {
    justify-content: flex-start;
    gap: 16px;
  }
}

/* ------------------------------------------------------------
   FOOTER BASE  ·  tighten copyright row padding
   The line "© 2026 Canadian School of Tashkent · All rights
   reserved   Privacy Policy · Terms of Use" sat with ~32px
   above (padding-top) and ~32px below (parent padding), plus
   a 40px gap from the column grid. Trim to give the line the
   same air as the columns above and below.
   ------------------------------------------------------------ */
.site-footer {
  /* outer bottom padding — was 32px */
  padding-bottom: 14px;
}
.site-footer__grid {
  /* gap between the columns and the copyright row — was 40px */
  margin-bottom: 18px;
}
.site-footer__base {
  /* internal top padding inside the copyright bar — was 32px */
  padding-top: 14px;
  /* Text size reduced 20% — was 10px → 8px (r8) */
  font-size: 8px !important;
}

/* ------------------------------------------------------------
   FOOTER LOGO  ·  r13 — reduced 20% (112 → 90px)
   The previous 112px logo sat unbalanced at the top of the
   column with little air around it. The new 90px size gives
   the brand column room to breathe and lets the auto-margin
   distribution show clean equal gaps between logo, address+
   contact, and social.

   Desktop only — the MOBILE FOOTER REDESIGN block at the end
   of this file sets the mobile size (56px) for centered layout.
   ------------------------------------------------------------ */
@media (min-width: 721px) {
  .site-footer__brand .site-footer__logo-img {
    height: 90px !important;
  }
}

/* ------------------------------------------------------------
   SPOTLIGHT  ·  three-column trio variant
   The homepage spotlight uses feature-trio for the three pillar
   columns. We're now using the same pattern on about/academics/
   student-life/admissions/careers/faculty pages. Their .spotlight
   sections need the same cream-on-dark trio typography that the
   homepage gets via .feature-trio inside .spotlight.
   ------------------------------------------------------------ */
.spotlight .feature-trio__item::before {
  background: rgba(245, 240, 230, 0.35);
}
.spotlight .feature-trio__title,
.spotlight .feature-trio__title em {
  color: var(--cst-cream);
}
.spotlight .feature-trio__body {
  color: rgba(245, 240, 230, 0.78);
}

/* ------------------------------------------------------------
   CARD TITLES with inline <em>  ·  fix for whitespace collapse
   column-balance.css applies `display: flex` to many card titles
   so all titles in the row reserve equal height. The side-effect:
   a text-node + <em> combo (e.g. "Robotics, <em>FLL & FTC.</em>"
   or "The <em>Aspire</em> Award") becomes two flex items with the
   whitespace collapsed. Switch the display back to block but keep
   the min-height so row alignment still works.
   Originally r9 for .club-card__title; extended r18 to also cover
   .annual-award-card__title (student-recognition page).
   ------------------------------------------------------------ */
.club-card__title,
.annual-award-card__title {
  display: block !important;
  /* keep the existing min-height for row alignment — it's already
     set in column-balance.css as calc(1.25em * 2 + 0.1em). */
}

/* ------------------------------------------------------------
   HERO TEXT ALIGNMENT  ·  r10
   Shift the hero text right on every page that uses the
   page-hero--with-stats split layout so the title starts where
   the HOME nav link starts. Previously only the about page had
   this offset (in about-v2.css); now applied site-wide so all
   top-nav heroes (Our Team, Academics, Student Life, Admissions,
   Careers, Contact, About) line up identically.
   ------------------------------------------------------------ */
.page-hero--with-stats .page-hero__main {
  padding-left: clamp(20px, 8.3vw, 120px);
}

@media (max-width: 900px) {
  /* Narrow viewports: undo the shift — the layout stacks and the
     extra left padding would push the title off-screen. */
  .page-hero--with-stats .page-hero__main {
    padding-left: 0;
  }
}

/* ------------------------------------------------------------
   ENTRY POINTS CARDS (admissions)  ·  r11 + r22 sizing
   Each card's title is now the division name (Lower Primary,
   Upper Primary, Middle School, High School). The grade range
   sits inline beside the title as a smaller mono chip, so the
   eye reads the division first and the grades second.
   r22 (May 2026): the previous sizing (title clamp 20-24px,
   chip 12px) was too large at the narrowest 4-column layout
   — "Lower Primary GRADES K-2" wrapped onto two lines. Tightened
   both so the longest pairing ("Upper Primary GRADES 3-5") fits
   on a single line at all viewports >=540px. Below 540 the grid
   collapses to one column and per-card width is generous again.
   ------------------------------------------------------------ */
.entry-card__title {
  /* override the column-balance flex on .feature-card__title so the
     text node + span sit on the same line with normal whitespace.
     Also drop one notch of font-size relative to the default
     feature-card__title clamp(20px, 1.6vw, 24px). */
  display: block !important;
  font-size: clamp(17px, 1.35vw, 21px) !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.entry-card__grades {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: clamp(9.5px, 0.75vw, 11px);
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cst-graphite-2);
  /* vertical-align so the chip sits visually centred on the title
     baseline rather than dragging the line height. */
  vertical-align: middle;
  white-space: nowrap;
}

/* Below ~540px the grid stacks to one column — restore generous
   sizing since each card now has the full row width. */
@media (max-width: 540px) {
  .entry-card__title {
    font-size: 22px !important;
    white-space: normal;
  }
  .entry-card__grades {
    font-size: 12px;
    margin-left: 10px;
  }
}

/* ------------------------------------------------------------
   VACANCY CARDS  ·  r12  (careers page)
   Type / Posted / Deadline labels and values now render in navy
   for better legibility on the cream background.
   column-balance.css sets dt { color: red !important }, so we
   need !important + bumped specificity (article prefix) to beat it.
   ------------------------------------------------------------ */
article.vacancy-card .vacancy-card__meta-row dt,
article.vacancy-card .vacancy-card__meta-row dd {
  color: var(--cst-navy) !important;
}

/* ------------------------------------------------------------
   STUDENT RECOGNITION  ·  r18
   Title-row with prev/next arrows on either side of the month
   title (Value of the Month) and year-end awards title.
   Buttons are minimal circular ghost buttons that don't compete
   with the title's typographic weight.
   ------------------------------------------------------------ */
.vom-feature__title-row,
.annual-awards__title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2vw, 28px);
  margin-bottom: 12px;
}
.vom-feature__title-row .vom-feature__title,
.annual-awards__title-row .title {
  margin: 0;
  flex: 0 1 auto;
}

.vom-feature__nav,
.annual-awards__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 1px solid var(--cst-line-light);
  border-radius: 50%;
  background: transparent;
  color: var(--cst-navy);
  cursor: pointer;
  padding: 0;
  transition:
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}
.vom-feature__nav:hover,
.annual-awards__nav:hover {
  background: var(--cst-red);
  color: var(--cst-cream);
  border-color: var(--cst-red);
}
.vom-feature__nav:active,
.annual-awards__nav:active {
  transform: scale(0.94);
}
.vom-feature__nav:focus-visible,
.annual-awards__nav:focus-visible {
  outline: 2px solid var(--cst-red);
  outline-offset: 2px;
}

/* On ink (dark-relief) sections like Year-End Awards, the arrows
   need to read against the platinum background — same palette
   here since section--ink is now a light platinum (post v3 reset),
   so the navy borders/icons still work. */
.section--ink .annual-awards__nav {
  border-color: var(--cst-line-light);
  color: var(--cst-navy);
}

/* Narrow viewports: putting prev/title/next on a single flex row
   with the title centered between two arrow buttons used to wrap
   vertically — the title was long enough ("April 2026 — Innovation.")
   that flex-wrap pushed each arrow onto its own line above and
   below the title, breaking the layout.

   Fix: on mobile, take the arrows out of the title row and stack
   them as a centered button row below the title. Use a CSS grid
   trick: re-order the children so [title] spans full width on top
   and [prev] [next] sit centered below. */
@media (max-width: 600px) {
  .vom-feature__title-row,
  .annual-awards__title-row {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
      "title  title"
      "prev   next";
    justify-content: center;
    align-items: center;
    gap: 14px 14px;
    flex-wrap: initial;
  }
  .vom-feature__title-row .vom-feature__title,
  .annual-awards__title-row .title {
    grid-area: title;
    text-align: center;
    /* Slightly smaller on phones so the line stays a single row
       instead of wrapping into two */
    font-size: clamp(22px, 6vw, 28px);
  }
  .vom-feature__nav--prev,
  .annual-awards__nav--prev {
    grid-area: prev;
  }
  .vom-feature__nav--next,
  .annual-awards__nav--next {
    grid-area: next;
  }
  .vom-feature__nav,
  .annual-awards__nav {
    width: 40px;
    height: 40px;
  }
}

/* ------------------------------------------------------------
   PUBLICATIONS  ·  r20 — Prospectus stacked + landscape
   The prospectus PDF is a landscape document, so the cover
   placeholder needs to match that ratio. The block also stacks
   vertically: heading (section-header above) → landscape cover
   → buttons → note. Overrides the default 2-column side-by-side
   grid for the `.prospectus-feature--stacked` variant only.
   ------------------------------------------------------------ */
.prospectus-feature.prospectus-feature--stacked {
  display: block;
  max-width: 900px;
  margin: 0 auto;
}
.prospectus-feature--stacked .prospectus-feature__cover {
  /* landscape ratio matching the actual prospectus PDF */
  aspect-ratio: 4 / 3;
  width: 100%;
  margin: 0 auto;
  display: block;
}
.prospectus-feature--stacked .prospectus-feature__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: clamp(24px, 2.5vw, 36px);
}
.prospectus-feature--stacked .prospectus-feature__note {
  margin-top: clamp(20px, 2vw, 28px);
  text-align: center;
  font-size: 13.5px;
  color: var(--cst-graphite-2);
  font-style: italic;
}
/* Landscape placeholder text should fit the wider crop */
.prospectus-feature__cover--landscape.img-missing::before {
  content: "Prospectus 2026 — 2027";
  font-size: clamp(22px, 2.4vw, 34px);
}

/* ------------------------------------------------------------
   LANGUAGE DRAWER v2  ·  r20 redesign
   Quieter, more spacious. Navy as primary accent, red used
   sparingly (current marker + hover only). Replaces the older
   .lang-drawer__* + .lang-option* design which had too much red
   and felt crowded.
   ------------------------------------------------------------ */
.lang-drawer-v2__head {
  padding: 56px clamp(28px, 3vw, 40px) 28px;
  border-bottom: 1px solid var(--cst-line-light);
}
.lang-drawer-v2__eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cst-graphite-2);
  font-weight: 600;
  margin-bottom: 14px;
}
.lang-drawer-v2__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.5vw, 34px);
  font-weight: 500;
  color: var(--cst-navy);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.lang-drawer-v2__title em {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--cst-navy);
  font-weight: 400;
}
.lang-drawer-v2__lede {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--cst-graphite-2);
  margin: 0;
  max-width: 420px;
}

.lang-drawer-v2__body {
  padding: clamp(20px, 2.2vw, 28px) clamp(20px, 2.6vw, 32px) clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}

.lang-card {
  background: transparent;
  border: 1px solid var(--cst-line-light);
  border-radius: 8px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition:
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}
.lang-card:hover {
  background: rgba(10, 35, 66, 0.025);
  border-color: rgba(10, 35, 66, 0.22);
}
.lang-card--current {
  background: rgba(10, 35, 66, 0.04);
  border-color: rgba(10, 35, 66, 0.16);
}
.lang-card--current:hover {
  background: rgba(10, 35, 66, 0.04);
  border-color: rgba(10, 35, 66, 0.16);
}

.lang-card__row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 14px;
}

.lang-card__flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 32px;
  background: var(--cst-cream);
  border: 1px solid var(--cst-line-light);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--cst-navy);
  font-weight: 600;
}

.lang-card__names {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.lang-card__name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--cst-navy);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.lang-card__native {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 13px;
  color: var(--cst-graphite-2);
  line-height: 1.3;
}

.lang-card__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cst-red);
  color: var(--cst-cream);
  flex-shrink: 0;
}

.lang-card__status {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cst-graphite-2);
  font-weight: 600;
  padding: 4px 10px;
  border: 1px solid var(--cst-line-light);
  border-radius: 999px;
  white-space: nowrap;
}

.lang-card__note {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--cst-graphite-2);
  margin: 0;
}

.lang-card__contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--cst-line-light);
}
.lang-card__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--cst-navy);
  text-decoration: none;
  padding: 4px 0;
  transition: color var(--t-fast) var(--ease);
}
.lang-card__link:hover {
  color: var(--cst-red);
}
.lang-card__link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 12px;
  color: var(--cst-graphite-2);
  flex-shrink: 0;
}
.lang-card__link:hover .lang-card__link-icon {
  color: var(--cst-red);
}

/* Hide the legacy v1 selectors if anything still references them */
.drawer .lang-drawer__head,
.drawer .lang-drawer__body,
.drawer .lang-option {
  /* legacy — superseded by lang-drawer-v2; safe no-op */
}

/* ============================================================
   PAGE HERO v2 — split layout, editorial polish, all screens
   ============================================================
   The seven top-nav heroes (About / Our Team / Academics /
   Admissions / Careers / Contact / Beyond the Classroom) share
   the `.page-hero--with-stats` split layout: a left title block
   and a right stats panel. The old version was tuned for laptops;
   on large screens (1600px+) the editorial content felt thin and
   the empty space looked underdesigned. This block introduces:

     · An eyebrow "section mark" above the title (chapter typography
       borrowed from the home page chapter-mark, so the hero reads
       as a single visual family across the site).
     · A short italic lede beneath the title (one line of editorial
       prose, no longer than a single sentence).
     · A small "AT A GLANCE" label above the stats grid so the
       right side feels intentional, not floating.
     · A subtle vertical rule between the two columns that scales
       with the container.
     · Wider container on >=1600px screens so the hero fills the
       composition without becoming sparse.
     · Tighter vertical rhythm, generous padding on tall screens.
   The laptop look (1366–1600) is preserved — every new element is
   sized in clamp() so adding them doesn't push the layout. The
   mobile layout (single column) inherits the new elements naturally.
   ============================================================ */

/* Wider container on very large screens. The default .page-hero__content
   maxes at --max-w (1280); we let it stretch to 1560 once the viewport
   has room, so the editorial composition occupies the visible band.
   Also bump the gap between title block and stats panel so the two
   feel like separate editorial spreads, not one cramped row. */
@media (min-width: 1600px) {
  .page-hero--with-stats .page-hero__content--split {
    max-width: 1560px;
    gap: clamp(64px, 6vw, 128px);
  }
}

/* Generous vertical padding on tall screens so the hero isn't compressed
   against the header on 1440-tall+ displays. */
@media (min-height: 900px) and (min-width: 1100px) {
  .page-hero--with-stats {
    min-height: 86vh;
  }
}

/* New: chapter-mark style eyebrow above the title.
   Inherits the visual language of the home page chapter marks
   (mono caps + red rule). */
.page-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cst-red);
  font-weight: 600;
  margin-bottom: clamp(22px, 1.8vw, 32px);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  /* Sits above the title without breaking the existing flow. */
}
.page-hero__eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--cst-red);
  display: inline-block;
}

/* New: italic lede paragraph under the title. Short, editorial,
   in the same italic family the homepage uses for atmospheric
   copy. Width capped so it sits comfortably under the title. */
.page-hero__sublede {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(17px, 1.25vw, 22px);
  line-height: 1.5;
  color: rgba(245, 240, 230, 0.86);
  max-width: 560px;
  margin-top: clamp(22px, 1.8vw, 32px);
  margin-bottom: 0;
  text-wrap: balance;
}

/* Re-frame the stats panel: slightly tighter divider between the
   two split columns so the composition reads as one editorial
   spread rather than two unrelated halves. */
@media (min-width: 1101px) {
  .page-hero__stats {
    border-left-color: rgba(245, 240, 230, 0.22);
  }
}

/* Refine the page-hero gradient on big screens — keeps the title
   side readable when the hero photo is high-contrast and adds
   more depth on the right where the stats sit. Strengthened
   left-side wash so the eyebrow's small red text stays legible
   on bright daytime classroom photos (Academics, Careers, etc.). */
@media (min-width: 1100px) {
  .page-hero--with-stats .page-hero__gradient {
    background:
      /* bottom-edge fade so the band-nav sits over a darker zone */
      linear-gradient(180deg, rgba(6, 23, 48, 0.55) 0%, rgba(6, 23, 48, 0.28) 35%, rgba(6, 23, 48, 0.88) 100%),
      /* left-to-right wash, deeper on the title side */
      linear-gradient(90deg, rgba(6, 23, 48, 0.82) 0%, rgba(6, 23, 48, 0.48) 35%, rgba(6, 23, 48, 0.18) 65%, rgba(6, 23, 48, 0.02) 100%);
  }
}

/* Slightly brighter red for the eyebrow's small label — the default
   --cst-red (#C8102E) can disappear on busy daytime photos at 11px.
   Use the existing brighter token already defined in styles.min.css. */
.page-hero__eyebrow {
  color: var(--cst-red-bright, #D62B3B);
  text-shadow: 0 1px 2px rgba(6, 23, 48, 0.45);
}
.page-hero__eyebrow::before {
  background: var(--cst-red-bright, #D62B3B);
  box-shadow: 0 1px 2px rgba(6, 23, 48, 0.3);
}

/* On mobile, give the sublede a touch more visibility against
   the background image (the gradient ends earlier on a short
   stacked layout, so we lighten the text slightly). */
@media (max-width: 720px) {
  .page-hero__sublede {
    font-size: 16px;
    color: rgba(245, 240, 230, 0.88);
  }
  .page-hero__eyebrow {
    font-size: 10px;
  }
}

/* ============================================================
   VOM CARDS WITHOUT PHOTOS  ·  r22 (May 2026)
   ============================================================
   The Value of the Month section celebrates students whose
   photos we cannot publish (privacy / consent considerations).
   The default card layout reserves a tall 4:5 photo well at the
   top; removing the photo block leaves a stub card. This style
   replaces the photo well with an editorial, name-focused tile:
   a thin red accent rule at the top, generous padding, the band
   label set in red caps, and the student name in display type.
   The card height matches the photo-bearing variant so any mix
   of photo/no-photo cards in the same carousel reads as one row.
   ============================================================ */
.vom-feature__card--no-photo {
  /* match the visual height of photo cards (~440px at desktop)
     so a future mix of photo + no-photo cards line up. */
  min-height: clamp(360px, 28vw, 440px);
  display: flex;
  flex-direction: column;
  position: relative;
  /* hairline red accent across the top, in place of the photo */
  padding-top: clamp(40px, 3.5vw, 56px);
}
.vom-feature__card--no-photo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--cst-red);
}
.vom-feature__card--no-photo .vom-feature__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(20px, 1.8vw, 32px) clamp(20px, 1.8vw, 28px) clamp(20px, 1.8vw, 28px);
}
.vom-feature__card--no-photo .vom-feature__band {
  /* lift the band label so it reads as a section mark */
  margin-bottom: 14px;
  letter-spacing: 0.22em;
  color: var(--cst-red);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.vom-feature__card--no-photo .vom-feature__band::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--cst-red);
  display: inline-block;
}
.vom-feature__card--no-photo .vom-feature__name {
  /* the centre-of-gravity element when there's no photo. */
  font-family: var(--font-display);
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--cst-navy);
  line-height: 1.3;
  margin: 0 0 auto 0;
  text-wrap: balance;
}
.vom-feature__card--no-photo .vom-feature__cta {
  margin-top: clamp(24px, 2.4vw, 36px);
  padding-top: 16px;
  border-top: 1px solid rgba(10, 35, 66, 0.1);
}

/* When the card lacks a photo, the hover scale-up of the photo
   (defined on .vom-feature__card) has nothing to grab. Replace
   it with a subtle border lift instead. */
button.vom-feature__card--no-photo:hover {
  transform: translateY(-3px);
  border-color: rgba(200, 16, 46, 0.4);
  box-shadow: 0 14px 32px rgba(10, 35, 66, 0.08);
}

/* ============================================================
   EOTM MODAL — NO-PHOTO VARIANT  ·  r22 (May 2026)
   ============================================================
   When a Value of the Month entry has no photo (because we can't
   publish the student's picture), opening the modal would leave
   a broken-image area filling 5/12 of the grid. Body class
   .eotm-modal--no-photo toggles a single-column layout and
   hides the empty media column.
   ============================================================ */
body.eotm-modal--no-photo .eotm-modal__inner {
  grid-template-columns: 1fr;
}
body.eotm-modal--no-photo .eotm-modal__media {
  display: none;
}
/* Without the photo, the modal can be a touch narrower and the
   body padding a touch more generous — feels less wide-empty.
   Widened in r23 (May 2026) from 640 → 760 so VOM winner lists
   (which can run to 20+ names as a flowing comma-separated list)
   read comfortably without forcing the modal to scroll. */
body.eotm-modal--no-photo .eotm-modal__inner {
  width: min(760px, 100%);
}
body.eotm-modal--no-photo .eotm-modal__body {
  padding: clamp(36px, 3.5vw, 56px);
}
/* The chapter line on a VOM no-photo modal becomes the visual
   "badge" since the in-photo badge is gone. */
body.eotm-modal--no-photo .eotm-modal__chapter {
  font-size: 12px;
  letter-spacing: 0.28em;
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
body.eotm-modal--no-photo .eotm-modal__chapter::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--cst-red);
  display: inline-block;
}
/* The blockquote inside a VOM no-photo modal carries the comma-
   separated winners list. Italic display serif is the right
   editorial register, but at this length we want a slightly
   tighter line-height, body-weight type, and a small label above
   so the reader knows what they are looking at. */
body.eotm-modal--no-photo .eotm-modal__quote {
  position: relative;
  font-family: var(--font-body);
  font-style: normal;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.7;
  color: var(--cst-graphite);
  padding-left: 20px;
  margin-top: 8px;
}
body.eotm-modal--no-photo .eotm-modal__quote::before {
  content: "Winners";
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cst-red);
  margin-bottom: 12px;
  margin-left: -20px;
}

/* ------------------------------------------------------------
   PAGE-HERO ALIGNMENT FIX  ·  r21
   The simple `.page-hero__content` variant (used on faq, calendar,
   alumni, parent-portal, staff-login, publications, apply-admission,
   open-house, recognition, student-recognition, student-support,
   student-life, dining, contact, careers, etc.) renders its
   title aligned with the logo column at the far left.
   The split variant on about/academics/admissions pushes the title
   to start where the navigation actually begins, which reads better.
   This rule applies the same inset to the unsplit variant so every
   footer-linked page's hero title lines up with the nav's HOME link
   instead of with the logo underneath.
   ------------------------------------------------------------ */
.page-hero__content:not(.page-hero__content--split) > .page-hero__chapter,
.page-hero__content:not(.page-hero__content--split) > .page-hero__title,
.page-hero__content:not(.page-hero__content--split) > .page-hero__lede,
.page-hero__content:not(.page-hero__content--split) > .page-hero__year,
.page-hero__content:not(.page-hero__content--split) > .hero__recent-badge {
  padding-left: clamp(0px, 8.3vw, 120px);
}

/* Below ~860px we drop the inset so the title doesn't run off-screen
   or feel cramped. At narrow widths the logo and nav stack/collapse
   anyway, so the original full-width alignment is fine. */
@media (max-width: 860px) {
  .page-hero__content:not(.page-hero__content--split) > .page-hero__chapter,
  .page-hero__content:not(.page-hero__content--split) > .page-hero__title,
  .page-hero__content:not(.page-hero__content--split) > .page-hero__lede,
  .page-hero__content:not(.page-hero__content--split) > .page-hero__year,
  .page-hero__content:not(.page-hero__content--split) > .hero__recent-badge {
    padding-left: 0;
  }
}

/* The apply-hero variant on pages/apply-admission.html has its own
   centered layout (cream background, narrower content). Keep its
   simple alignment — don't apply the inset there. */
.apply-hero .page-hero__content:not(.page-hero__content--split) > .page-hero__chapter,
.apply-hero .page-hero__content:not(.page-hero__content--split) > .page-hero__title,
.apply-hero .page-hero__content:not(.page-hero__content--split) > .page-hero__lede {
  padding-left: 0;
}

/* ------------------------------------------------------------
   FOOTER BRAND COLUMN — center indent  ·  r22
   The brand column (logo + contact + social icons) used to sit
   flush-left at the page gutter (left=80px on a 1440px viewport)
   while the other footer columns started at 489px / 776px /
   1067px — leaving the brand looking visually orphaned at the
   far left edge. Indent it horizontally so its contents centre
   within its grid cell, matching the hero alignment treatment
   applied in r21.
   ------------------------------------------------------------ */
.site-footer__grid .site-footer__brand {
  /* The cell is ~382px wide and the brand block is max-width 360px.
     Pushing the brand inward by an inset matched to the hero rule
     gives the column a clear "indent from the edge" — without
     fully centering it (which would feel too detached). */
  padding-left: clamp(0px, 4.2vw, 60px);
}

/* The logo and social row align to the left edge of the brand
   container — with the new padding above they no longer kiss the
   page gutter. Contact text continues to flow naturally. */
@media (max-width: 760px) {
  /* On narrow screens the grid collapses, so remove the indent
     to keep the footer block from feeling cramped. */
  .site-footer__grid .site-footer__brand {
    padding-left: 0;
  }
}

/* ------------------------------------------------------------
   HEADER CTA BUTTONS — 30% smaller  ·  r22
   The "Enquire" and "Apply" buttons in the header were a little
   chunky relative to the nav links. Trim padding, font size, and
   border-radius reach so they feel like small pill buttons that
   complement the nav rather than competing with it.
   ------------------------------------------------------------ */
.site-header .header-cta {
  padding: 7px 15px;
  font-size: 9px;
  letter-spacing: 0.14em;
}

/* Match scrolled-state padding/font so the buttons don't snap
   size when the header switches to its solid state. */
.site-header--scrolled .header-cta,
.site-header--always-solid .header-cta {
  padding: 7px 15px;
  font-size: 9px;
  letter-spacing: 0.14em;
}

/* ============================================================
   MOBILE HERO IMAGE FIX  ·  Nov 2026
   ------------------------------------------------------------
   PROBLEM: Hero photos are landscape (≈16:9, e.g. 1672x941).
   On a phone, the hero container is tall and narrow (portrait
   shape) because of the original min-height: 100vh / 460px
   floors. With `object-fit: cover`, the browser crops ~50% of
   the photo's horizontal extent to fill the tall box — so the
   user only sees a center strip of the image and the main
   subjects on the sides are gone.

   FIX: On mobile, drop the hero to an aspect that's closer to
   the photo's own landscape shape. Keep a sensible minimum so
   the title and CTAs still fit comfortably. This dramatically
   reduces side-cropping. `object-position: center` keeps the
   subject area visible. Tuned to two breakpoints:
     · ≤720px  (phones / small tablets)
     · ≤480px  (typical phones)

   Companion change: column-balance.css's `!important` rules
   that forced `.hero` to ~100dvh are now gated to ≥721px so
   they no longer override this block on mobile.

   Note: `.apply-hero` is a light/cream variant with no photo,
   so we deliberately do NOT shrink it (it relies on padding
   for its size).
   ============================================================ */
@media (max-width: 720px) {
  /* Homepage hero (.hero) — fill the screen on mobile, matching the
     desktop "hero + ticker = one viewport" treatment.

     We can't use 100vh here: on iOS Safari/Chrome `vh` is the
     toolbar-HIDDEN ("large") viewport, so with the toolbar showing
     the hero was mis-sized and the ticker below it bled into view
     (the reported bug). `svh` is the stable toolbar-SHOWN ("small")
     viewport, so hero + ticker fill exactly one screen on first
     paint with no bleed, in both Safari and Chrome. 100vh stays as
     a fallback first for browsers without svh.

     The mobile hero now uses a purpose-built 4:5 portrait crop
     (home-hero-mobile.jpg, 1080×1350) with object-position:center,
     so a full-height box no longer over-crops the subject — which
     is why the earlier landscape-band cap is no longer needed. */
  .hero {
    height: auto !important;
    min-height: calc(100vh - var(--ticker-h, 39px)) !important;
    min-height: calc(100svh - var(--ticker-h, 39px)) !important;
  }

  /* The homepage hero centers its content with flexbox (no top
     padding by default). When we shrink the box, the eyebrow
     can collide with the fixed header. Add top padding so the
     content sits comfortably below the header on small screens. */
  .hero .hero__content {
    padding-top: 90px;
    padding-bottom: 32px;
  }

  /* Page hero on other pages (.page-hero) — originally clamped
     to min-height: 460px on mobile. Same issue: a 390px-wide
     phone with a 460px-tall box crops the landscape photo
     heavily. Bring the box closer to the image's aspect.
     Excludes .apply-hero, which has no photo.
     .page-hero already uses padding-based vertical sizing
     (180px top / 80px bottom from base styles), so the title
     always clears the header even at min-height. */
  .page-hero:not(.apply-hero) {
    min-height: clamp(420px, 78vw, 540px) !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Mobile now serves purpose-built portrait (4:5) hero crops
     via <picture><source media="(max-width:720px)">, so the
     subject is already centered in the image. Use center/center
     positioning — the earlier upward nudge was for the old
     landscape images being cover-cropped. */
  .hero__bg img,
  .page-hero__bg img {
    object-position: center center !important;
  }
}

/* On the smallest phones, scale the home hero a bit further so
   even more of the photo is visible while still clearing room
   for the content. */
@media (max-width: 480px) {
  .hero {
    /* Keep the full-screen hero on the smallest phones too. */
    min-height: calc(100vh - var(--ticker-h, 39px)) !important;
    min-height: calc(100svh - var(--ticker-h, 39px)) !important;
  }
  .page-hero:not(.apply-hero) {
    min-height: clamp(380px, 88vw, 500px) !important;
  }
}

/* ============================================================
   SPOTLIGHT GLYPH MOBILE FIX  ·  Nov 2026
   ------------------------------------------------------------
   The ※ reference mark in .spotlight__glyph sits as a giant
   red watermark behind the section title. On desktop it lives
   in the top-left corner as decorative editorial flourish. On
   a phone, the title wraps onto multiple lines and grows tall
   enough that the glyph ends up sitting directly behind the
   headline — and because ※ is literally four diagonal strokes
   around a center dot, it visually reads like a strikethrough
   "X" crossing out the title. That's the opposite of intent.

   Hide it on phones; restore on tablet and up where there's
   room for it to live as a corner mark without overlapping
   the headline.
   ============================================================ */
@media (max-width: 720px) {
  .spotlight__glyph {
    display: none !important;
  }
}

/* ============================================================
   MOBILE MENU LOGO + CLOSE BUTTON  ·  Nov 2026
   ------------------------------------------------------------
   When the mobile nav drawer slides in from the right, the
   navy panel was empty at the top — wasted space and no brand
   anchor. Add the white CST header logo at the top-left of the
   open drawer as a ::before background-image so we don't have
   to touch 23 HTML files. The path is relative to this CSS
   file: ../images/logos/cst-logo-header.png (the white logo
   used in the page header against dark backgrounds).

   The close (×) button: original was a 44px circle with a tiny
   24px × inside, which felt visually unbalanced — too much
   ring, too little glyph. Shrink the visible ring to ~28px
   (about 36% smaller in diameter, ~60% smaller in area, near
   the "40–50% reduction" the user asked for), and bump the
   × glyph to 28px so it fills the circle confidently. We keep
   the actual tap target at 44px via padding so accessibility
   guidelines are respected — the button responds to taps in a
   larger area than the visible ring.
   ============================================================ */
@media (max-width: 1080px) {
  /* The mobile drawer becomes a positioning context for the logo. */
  .site-nav {
    position: fixed;
  }

  /* White CST logo, top-left of the open drawer */
  .site-nav::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 24px;
    width: 130px;
    height: 56px;
    background-image: url("../images/logos/cst-logo-header.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    pointer-events: none;
    /* Fade in just after the drawer opens so it doesn't feel
       like it pops in before the slide-in finishes. */
    opacity: 0;
    transition: opacity 240ms var(--ease) 120ms;
  }
  .site-nav.is-open::before {
    opacity: 1;
  }

  /* --- Close button: shrink the visible ring, grow the X ---
     Reset to a "tight" visible button, then expand the touch
     target via padding so taps stay forgiving. */
  .site-nav__close {
    /* Visible circle: was 44px → now 28px (about 45% smaller) */
    width: 28px;
    height: 28px;
    /* Slightly heavier border so the smaller ring still reads */
    border-width: 1.5px;
    /* The × glyph: was 24px → now 28px, with a tighter line-height
       so it sits centered in the smaller ring */
    font-size: 28px;
    line-height: 1;
    /* The "×" character has a baseline that doesn't sit on the
       optical middle of a circle. Nudge it up a hair. */
    padding-bottom: 3px;
    /* Keep tap-target generous via outline of transparent space
       around the visible circle. box-shadow is purely visual,
       so use a transparent expanded hit area instead: */
  }
  /* Pseudo-element gives the button a 44×44 hit area without
     changing the visual circle size. */
  .site-nav__close::after {
    content: "";
    position: absolute;
    inset: -8px;
  }
}

/* ============================================================
   MOBILE FOOTER REDESIGN  ·  Nov 2026
   ------------------------------------------------------------
   Original mobile footer problems (≤540px):
   1. Logo at 143px height dominated the layout
   2. Logo + social icons were left-aligned with empty space
      on the right — felt lonely and unbalanced
   3. Three-column link grid forced 33% column width, which
      broke labels like "Employee Recognition", "Tuition & Fees",
      "Academic Calendar" onto two lines — looked cramped
   4. No visual hierarchy; everything competed for attention
   5. "Language · Til · Язык" wrapped awkwardly in narrow column

   New structure for phones:
   ┌─────────────────────────────────┐
   │       [centered logo, 56px]     │
   │       [centered tagline]        │
   │     [centered social row]       │
   ├─────────────────────────────────┤
   │  EXPLORE                        │  ← section header
   │  Employee Recognition           │  ← full-width link
   │  Student Recognition            │
   │  ...                            │
   ├─────────────────────────────────┤
   │  ADMISSIONS                     │
   │  ...                            │
   ├─────────────────────────────────┤
   │  CONNECT                        │
   │  ...                            │
   ├─────────────────────────────────┤
   │   © 2026 ...                    │  ← centered base bar
   │   Privacy · Terms               │
   └─────────────────────────────────┘
   Stacked single-column for link sections so every label fits
   on one line. Subtle dividers separate sections. Brand block
   is centered and compact. The whole footer reads cleanly.
   ============================================================ */
@media (max-width: 720px) {
  .site-footer {
    padding: 48px var(--gutter) 24px !important;
    text-align: center;
  }

  /* ── Grid becomes a single stack ── */
  .site-footer__grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin: 0 auto 28px !important;
    max-width: 100% !important;
  }

  /* ── Brand block (logo + tagline + social) centered ── */
  .site-footer__brand {
    grid-column: 1 !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding-bottom: 32px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--cst-line-light);
  }

  .site-footer__logo {
    display: inline-flex !important;
    justify-content: center;
    margin-bottom: 16px !important;
  }

  /* The original mobile rule blew the logo up to 143px with
     negative margins. Reset everything to a sensible size. */
  .site-footer__brand .site-footer__logo-img {
    height: 56px !important;
    width: auto !important;
    margin: 0 !important;
  }

  .site-footer__tagline {
    text-align: center;
    max-width: 320px;
    margin: 0 auto 18px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  /* ── Social icon row: centered, slightly larger taps ── */
  .site-footer ul.site-footer__social {
    justify-content: center;
    gap: 12px !important;
    margin: 4px 0 0 !important;
  }
  .site-footer ul.site-footer__social .site-footer__social-lang,
  .site-footer ul.site-footer__social a {
    width: 36px !important;
    height: 36px !important;
  }
  .site-footer ul.site-footer__social svg {
    width: 15px !important;
    height: 15px !important;
  }

  /* ── Link sections: each becomes a full-width stacked block
        with a subtle divider between sections. ── */
  .site-footer__grid > div:not(.site-footer__brand) {
    text-align: center;
    padding: 22px 0;
    border-bottom: 1px solid var(--cst-line-light);
  }
  .site-footer__grid > div:not(.site-footer__brand):last-child {
    border-bottom: none;
  }

  /* Section headers (Explore / Admissions / Connect) */
  .site-footer h4 {
    font-size: 10px !important;
    letter-spacing: 0.28em !important;
    margin-bottom: 14px !important;
    color: var(--cst-graphite-2);
  }

  /* Link lists — single column, comfortable spacing,
     no awkward line breaks. */
  .site-footer ul:not(.site-footer__social) {
    gap: 12px !important;
    align-items: center;
  }
  .site-footer ul:not(.site-footer__social) a,
  .site-footer ul:not(.site-footer__social) .site-footer__textlink {
    font-size: 14.5px !important;
    line-height: 1.4 !important;
    padding: 4px 8px !important;
    /* Allow text to wrap naturally only if absolutely needed,
       but most labels now fit on a single line. */
    display: inline-block;
  }

  /* Language switcher is text-based, not a real link — match
     the link styling so it doesn't look like a button. */
  .site-footer__textlink {
    background: none;
    border: none;
    color: var(--cst-graphite-2);
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
  }
  .site-footer__textlink:hover {
    color: var(--cst-red);
  }

  /* ── Base bar (copyright + legal) centered, compact ── */
  .site-footer__base {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    padding-top: 24px !important;
    border-top: 1px solid var(--cst-line-light);
    text-align: center;
    font-size: 10px !important;
    letter-spacing: 0.14em !important;
  }
  .site-footer__copyright,
  .site-footer__legal {
    text-align: center;
  }
}

/* On the smallest phones, tighten a touch more so nothing feels
   roomy where it shouldn't. */
@media (max-width: 380px) {
  .site-footer {
    padding: 40px 18px 20px !important;
  }
  .site-footer__brand .site-footer__logo-img {
    height: 50px !important;
  }
}

/* ============================================================
   STAFF-LOGIN SOLO VARIANT  ·  Nov 2026
   ------------------------------------------------------------
   The staff-login page was simplified to show only the sign-in
   form (no brand panel, no feature tour, no system notes, no
   help fallback). It's an internal portal — visitors don't need
   marketing fluff. The .staff-login--solo modifier collapses
   the original two-column grid into a single centered form.
   ============================================================ */
.staff-login--solo .staff-login__inner {
  grid-template-columns: 1fr !important;
  max-width: 560px !important;
}

.staff-login--solo .staff-login__form-wrap {
  /* Center the form vertically and horizontally on desktop;
     keep the original padding for breathing room. */
  align-self: center;
  width: 100%;
  /* The form's max-width was previously implicit from the column
     width. Add an explicit cap so the form doesn't stretch wide. */
  max-width: 480px;
  margin: 0 auto;
}

@media (max-width: 720px) {
  /* On mobile, let the form fill the available width (minus
     gutter), with comfortable top/bottom padding to push it
     away from the header and the footer. */
  .staff-login--solo .staff-login__form-wrap {
    padding: 48px 24px !important;
    max-width: 100%;
  }
}

/* ============================================================
   PARENT-PORTAL HERO ON MOBILE  ·  Nov 2026
   ------------------------------------------------------------
   The parent-portal page hero uses a hand-composed landscape
   graphic (1600×900) with the CST flame logo and the words
   "Canadian School of Tashkent" and "Parent Portal" baked into
   the image itself — sized for a wide desktop canvas.

   On mobile, the page-hero box is portrait-shaped and the
   image's baked-in text becomes huge in the cropped frame,
   colliding directly with the page's own h1 ("The CST Parent
   Portal."). The result reads as a broken overlap of two
   wordmarks plus a title.

   Fix: hide the decorative image on phones and replace it
   with the same navy palette as the rest of the page hero.
   The h1 + lede stand on their own with a clean, calm
   background. Desktop is unchanged.

   Use `body.is-parent-portal` for specificity? No — the
   page-hero on this page is the only one whose background
   image is a composed graphic rather than a photo, so we
   scope it via the image's filename in the URL().
   Easier: scope to the page by chaining .page-hero with
   an attribute that's unique to this page's image. We
   actually just need the page-hero on parent-portal.html;
   since this is the only page whose hero bg image needs
   suppressing, target the img element directly by URL.
   ============================================================ */
@media (max-width: 720px) {
  /* Hide the decorative composed graphic on phones */
  .page-hero__bg img[src*="parent-portal-hero"] {
    display: none;
  }
  /* Give that hero a calm navy gradient backdrop so the title
     has something to sit on top of (replacing the suppressed
     image). The page-hero on this site is already dark-themed
     at the base layer, so this is a graceful replacement. */
  body.page--parent-portal .page-hero,
  /* Fallback selector if the body class isn't present:
     match by the image src that lives within the same hero. */
  .page-hero:has(.page-hero__bg img[src*="parent-portal-hero"]) {
    background: linear-gradient(180deg, #1f3a7a 0%, #0a2342 100%);
  }
}