/* ============================================================================
   Rushmore mirror — local defect fixes (2026-06-23)
   Additive only. Full revert: git reset --hard 32a5d2d
   Loaded after _local_intercept.js on every page.
   ============================================================================ */

/* [FIX 25] Light-only page canvas.
   The mirror never sets a background on html/body (both are transparent) while body
   text is #0b0b0b, so in a browser with prefers-color-scheme:dark the UA paints a dark
   canvas behind near-black copy — unreadable. The site has no dark theme; declare it
   light-only (this also stops the UA inverting form controls and scrollbars).
   Set the background on html ONLY — html's background paints the canvas, below everything.
   Putting it on body instead occludes the homepage hero's z-index:-1 .lf-hero-zoom layer,
   because a body background paints after negative-z descendants of the root stacking
   context (verified: the hero image disappeared). */
html { color-scheme: only light; background: #fff; }

/* [FIX 28] No flash of un-restructured content. Three sections are rebuilt by JS after the
   HTML is parsed (aboutRedesign moves the About columns, discoverOverVideo moves the Discover
   copy into the video band and hides its own row), so the raw HubSpot layout paints first and
   visibly jumps. `html.lf-js` is set by _local_intercept.js — the first <script> in <head>,
   so it lands before any paint — and _local_fixes.js adds `.lf-ready` when it's done.
   visibility (not display/opacity) so the boxes still occupy their space: no layout shift,
   just a hidden-then-shown section. No JS => no .lf-js => everything renders normally. */
html.lf-js:not(.lf-ready) .cm-about-rushmore,
html.lf-js:not(.lf-ready) .cm-full-width-video,
html.lf-js:not(.lf-ready) .cm-discover-joy { visibility: hidden; }

/* [FIX 1] Animate-on-scroll reliability.
   aos.css hides every [data-aos] block (opacity:0 + offset transform) and only
   reveals it via .aos-animate. AOS runs with re-animation on (it STRIPS .aos-animate
   when a block scrolls out) and for ~17/27 blocks its trigger never fires at all
   (positions are computed before images load), so those blocks stay invisible
   forever — the "empty bands". The JS backstop (_local_fixes.js) adds .lf-revealed
   as each block enters the viewport; this !important rule beats aos.css and cannot be
   undone by AOS, while the transition preserves the original slide/fade-in. */
[data-aos].lf-revealed{
  opacity:1 !important; transform:none !important;
  transition:opacity .6s ease, transform .6s ease;
}
/* no-JS / reduced-motion guarantee: content is NEVER hidden behind animation. */
@media (prefers-reduced-motion: reduce){
  [data-aos]{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* [FIX 4] Consent / web-interactives popup must never exceed the mobile viewport
   (a child toast rendered 4px past the right edge on a 390px screen). Caps width
   only — never expands, never repositions content. */
#hs-web-interactives-top-anchor *{ max-width:100% !important; box-sizing:border-box !important; }

/* [FIX 6] Learning-mosaic figures positioning:
   1. Boy in green shirt (top row 2nd box): forehead pops above the top frame border.
   2. Girl with glasses (top row 4th box): sits flush at bottom of her section box.
   3. Thumbs-up girl (bottom right column): anchored flush to bottom-right of her box. */
.learning-section .first-row .learning-item.right-s:first-of-type,
.learning-section .first-row .learning-item.right-s:has(img[src*="WEBSITE%20RESOURCE"]) {
  overflow: visible !important;
  position: relative !important;
  z-index: 5 !important;
}
.learning-section .first-row .learning-item.right-s:first-of-type .right-inner,
.learning-section .first-row .learning-item.right-s:has(img[src*="WEBSITE%20RESOURCE"]) .right-inner {
  position: absolute !important;
  /* He stands on the tile's bottom line with a little of his head above the top line.
     `top` is a PERCENTAGE, so it resolves against the tile's own height and the overhang
     stays the same fraction of the box at every viewport. The old `top:-18px` + scale(1.12)
     was fixed-px: as tiles shrank the overhang grew relatively and pushed him into the
     LEARNING title. Keep this in %, never px. */
  top: -8% !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  transform-origin: bottom center !important;
  width: 100% !important;
  line-height: 0 !important;
  text-align: center !important;
}
.learning-section .first-row .learning-item.right-s:first-of-type .right-inner img,
.learning-section .first-row .learning-item.right-s:has(img[src*="WEBSITE%20RESOURCE"]) .right-inner img {
  display: block !important;
  margin: 0 auto !important;
  /* A DEFINITE box (100%/100%), not auto sizing. These <img> are loading="lazy": with
     width/height:auto an unloaded image measures 0x0, never intersects the viewport, and so
     never loads at all. object-fit does the containment instead, and object-position keeps
     the child standing on the tile floor. */
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: bottom center !important;
  vertical-align: bottom !important;
  /* The theme ships `position:relative; top:12px` on this img, which sinks it below the
     tile's bottom line and cancels the overhang above. Zero it so the container's -8% is
     the ONLY vertical offset in play. */
  position: static !important;
  top: auto !important;
}

.learning-section .first-row .learning-item.right-s:nth-of-type(2),
.learning-section .first-row .learning-item.right-s:has(img[src*="PHOTO"]) {
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
}
.learning-section .first-row .learning-item.right-s:nth-of-type(2) .right-inner,
.learning-section .first-row .learning-item.right-s:has(img[src*="PHOTO"]) .right-inner {
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: 0 !important;              /* fill the tile so the img has a definite height to fit */
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  width: 100% !important;
  text-align: center !important;
}
.learning-section .first-row .learning-item.right-s:nth-of-type(2) .right-inner img,
.learning-section .first-row .learning-item.right-s:has(img[src*="PHOTO"]) .right-inner img {
  vertical-align: bottom !important;
  margin: 0 auto !important;
  display: block !important;
  /* Constrain BOTH axes. `max-height:100%; width:auto` alone let this 1.19-aspect photo
     render 294px wide in a 193px tile — the tile's overflow:hidden then sliced her face off,
     worse the narrower the tile got. Definite 100%/100% + object-fit contains her on both
     axes AND gives the lazy-loaded <img> a real box so it actually loads. */
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: bottom center !important;
}

.learning-section .second-row .learing-second-row.last{ position:relative; }
.learning-section .second-row .learing-second-row.last .right-inner{
  position:absolute !important; right:0 !important; bottom:0 !important; left:auto !important; top:auto !important;
  width:130% !important; max-width:none !important; line-height:0 !important; margin:0 !important;
}
.learning-section .second-row .learing-second-row.last .right-inner img{
  width:100% !important; height:auto !important; max-width:none !important; max-height:none !important; display:block !important;
  vertical-align:bottom !important; margin:0 !important;
}

/* [FIX 7] Upside-down "science" bulb kid (centre of row 2): keep him upside-down, top-align
   him and scale ~1.4× from the top so the glowing bulb pokes below the box. The z-index on
   his cell lifts him IN FRONT of the "Rushmore Leaner" banner below (which is later in the
   DOM and would otherwise paint over the bulb), so the bulb is fully visible above it.
   Scoped to his cell only (:not(.large-item) excludes the thumbs-up girl, also .no-link). */
.learing-second-row.middle .learning-item.no-link:not(.large-item){
  position:relative; z-index:5;
}
.learing-second-row.middle .learning-item.no-link:not(.large-item) .right-inner{
  overflow:visible !important;
  align-self:flex-start !important;
  transform:scale(1.4);
  transform-origin:top center;
}

/* [FIX 3] Tighten the oversized mobile footer (~760px tall on a 390px phone).
   The height is driven by large stacked gaps (45px / 49px / 30px); we trim those
   specific margins/paddings on small screens only. No content, colour, or layout
   change — just less dead vertical space. */
@media (max-width: 767px){
  .footer .footer-top{ padding-top:32px !important; padding-bottom:24px !important; }
  .footer .footer-top .hs-image-widget{ margin-top:16px !important; }
  .footer .footer-top .footer-content{ margin-top:20px !important; padding-top:12px !important; padding-bottom:12px !important; }
  .footer .footer-top .footer-address-group{ padding-top:20px !important; }
  .footer .footer-bottom{ padding-top:12px !important; padding-bottom:12px !important; }
}

/* [FIX 8] ALL team photos (existing + new) shown top-aligned, no stretch, for a
   consistent look. The card frame already uses object-fit:cover; we re-anchor to the
   top so heads stay in view. The modal img has width/height=500 (which squishes a
   non-square photo) — object-fit:cover fixes the stretch, object-position:top aligns it.
   Selectors are team-page-only (these classes don't exist elsewhere). */
.awsm-grid-card .span4 img {
  object-position: top center !important;
}
.awsm-modal-item .awsm-image-main img {
  object-fit: cover !important;
  object-position: top center !important;
}

/* [FIX 9] Homepage hero fills the viewport (100vh) on all sizes. Uses min-height so
   content is never clipped, and the scroll-down arrow stays pinned to the bottom.
   Double-class selector raises specificity to beat rushmore-ui-fixes.css, which forces
   min-height:auto on mobile. .cm-homepage-banner only exists on the home page. */
.cm-homepage-banner.cm-homepage-banner{
  min-height:100vh !important; height:auto !important;
  background-position: center bottom !important;  /* ground the building photo at the bottom of the screen */
  overflow: hidden !important;                     /* clip the Ken-Burns zoom layer to the hero frame */
}

/* [FIX 10] Hero family overlay anchored bottom-right (grounded, no right overflow), sized
   so it's a touch bigger but still clears the "RUSHMORE" title to its left. */
.cm-homepage-banner .right img[src*="hero-family"]{
  transform: scale(1);
  transform-origin: bottom right;
}

/* [FIX 11] Darker gradient at the bottom of the hero (fades to dark at the very bottom).
   The gradient sits just above the background (z-index:1); the content (family) and the
   "Nurturing Future Leaders" text + scroll arrow are raised above it (z-index:2) so they
   stay fully lit on top of the gradient. */
.cm-homepage-banner::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:48%;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.78) 100%);
  pointer-events:none; z-index:1;
}
.cm-homepage-banner .content-wrapper,
.cm-homepage-banner .arrow-down{ position:relative; z-index:2; }

/* [FIX 12] Slow Ken-Burns zoom on the hero background (layer created in _local_fixes.js).
   z-index:-1 keeps it behind the ::before tint, ::after gradient and the content. The
   animation uses `alternate` so it eases in, then back out — no jump at the loop point. */
.cm-homepage-banner .lf-hero-zoom{
  position:absolute; inset:0; z-index:-1;
  background-position:center bottom; background-size:cover; background-repeat:no-repeat;
  transform-origin:center center; will-change:transform;
  animation: lf-hero-zoom 7s ease-in-out infinite alternate;
}
@keyframes lf-hero-zoom{ from{ transform:scale(1); } to{ transform:scale(1.1); } }
@media (prefers-reduced-motion: reduce){ .cm-homepage-banner .lf-hero-zoom{ animation:none; } }

/* [FIX 14] Uniform ~100px breathing room above & below every homepage content section.
   Targets the top-level HubSpot rows; the hero is excluded. */
.dnd-section.row-depth-1:not(:has(.cm-homepage-banner)):not(:has(.banner)){
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}
/* About row: 100px of striped space above the title (padding lands inside the row's diagonal
   background). The source PNG (Group 48096403-1-1.png) is a CORNER fade — dense stripes in the
   top-left, empty bottom-right — so it can never fill the section (cover/contain both leave a
   white gap at the bottom). Replace it with a tiling diagonal-stripe gradient that covers any
   section size at any viewport. */
.dnd-section.row-depth-1:has(.cm-about-rushmore){
  padding-top: 100px !important;
  background-image: repeating-linear-gradient(135deg, #ffffff 0, #ffffff 52px, #eef1f8 52px, #eef1f8 70px) !important;
  background-color: #ffffff !important;
}
/* The admissions row sits between the striped About section and the gray Facilities section.
   FIX 14's white top+bottom padding shows as white gaps on both sides of the navy band, so zero
   both — the navy meets its neighbours directly (the navy band's own 80px padding below gives
   the breathing room). */
.dnd-section.row-depth-1.row-depth-1.row-depth-1:has(.cm-admission-slider){ padding-top: 0 !important; padding-bottom: 0 !important; }
/* Expand the navy Admissions band itself (top & bottom) for more breathing room.
   (FIX 16 bumped this by another 50px: 80 -> 130.) */
.cm-admission-slider{ padding-top: 130px !important; padding-bottom: 130px !important; }

/* [FIX 15a] Extra 100px of breathing room at the top of the Discover (technology) section. */
.cm-discover-joy{ padding-top: 100px !important; }

/* [FIX 15b] Inline autoplay video layer for the full-width video section (created in JS).
   Sits behind the play button + content, covering the section like the old poster did. */
.cm-full-width-video{ position: relative; overflow: hidden; padding-top: 50px !important; padding-bottom: 50px !important; box-sizing: content-box !important; }
.cm-full-width-video .lf-autovideo{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none;
}
.cm-full-width-video > a{ position: relative; z-index: 1; }
/* row-number-3 is an empty HubSpot spacer row between the hero and About; the FIX 14 rule
   above inflated it to 200px of blank white. Collapse it so About sits under the hero.
   Class repeated: FIX 14's selector scores (0,4,0) (two classes + two :not(:has(.class))),
   so a plain three-class selector LOSES the tie and the spacer silently re-inflates.
   HOMEPAGE-SCOPED: row-number-3 is the empty spacer only here — on inner pages it is a real
   content section, and collapsing it there strips legitimate spacing. */
body:has(.cm-homepage-banner) .dnd-section.row-depth-1.row-number-3.row-number-3.row-number-3{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* [FIX 16] +50px MORE internal breathing room (above the first element and after the last)
   inside every content section — applied to the element that paints each section's background
   so backgrounds expand with it (no white bands). Row-background & plain-white sections get it
   on the row (100 -> 150). The two band sections are handled on their band element instead:
   Admissions -> .cm-admission-slider (130, above), Video -> .cm-full-width-video (+50, above).
   Hero, the empty spacer (row-3) and those two band rows are excluded here. */
/* [FIX 29] Section spacing tightened. 150 top + 150 bottom meant 300px of dead white
   between every pair of adjacent sections, which read as broken empty bands across the site.
   60px each side (=120px seam) keeps the sections distinct without the void. Sections that
   paint their own background still get this as internal breathing room. */
.dnd-section.row-depth-1:not(:has(.cm-homepage-banner)):not(:has(.banner)):not(:has(.cm-admission-slider)):not(:has(.cm-full-width-video)):not(.row-number-3){
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}
/* Learning section sits 50px higher (row-11 top padding 150 -> 100; stable row number, static
   mirror). Class repeated to tie the (0,6,0) specificity of the FIX 16 selector above and win
   by source order. Bottom zeroed so the dark video band meets the mosaic directly (the white
   above the video was this 150px + the video row's 100px top). */
.dnd-section.row-depth-1.row-number-11.row-number-11.row-number-11.row-number-11.row-number-11.row-number-11{ padding-bottom: 0 !important; }
.dnd-section.row-depth-1.row-depth-1.row-depth-1:has(.cm-full-width-video){ padding-top: 0 !important; }
/* The old per-row seam patches (row-19 bottom 75, row-21 top 50) are gone: they existed only
   to claw back the 150px blanket, and at 60px they would now ADD space, not remove it. */

/* ============================ FIX 17 — design polish (no copy) ============================ */

/* [FIX 17a] Primary "Online Application" CTA: was a faint white circle icon that read as text
   on the bright hero sky. Turn it into a branded red pill button (white icon) so the site's #1
   action is unmistakable and pops against the sky. Label stays; add a tactile hover. */
header li.admission > a{
  background:#ea0029 !important; border-radius:24px !important;
  width:auto !important; height:auto !important; min-width:50px; padding:10px 18px !important;
  gap:8px !important; align-items:center !important; justify-content:center !important;
  box-shadow:0 3px 12px rgba(0,0,0,.22) !important;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
}
header li.admission > a:hover,
header li.admission > a:focus-visible{ transform:translateY(-1px); filter:brightness(1.06);
  box-shadow:0 5px 16px rgba(0,0,0,.30) !important; }
header li.admission > a .custom-label{ color:#fff !important; text-shadow:none !important; }
header li.admission > a svg path{ stroke:#fff !important; fill:#fff !important; }

/* [FIX 17b] The hero scroll-down chevron looked clickable but was an inert <div>. Show the
   pointer affordance; the click/keyboard behaviour is wired in _local_fixes.js. */
.cm-homepage-banner .arrow-down{ cursor:pointer; }
.cm-homepage-banner .arrow-down:focus-visible{ outline:2px solid #fff; outline-offset:4px; border-radius:4px; }

/* [FIX 17c] Tactile hover feedback on the red CTA buttons (they were static). Applies to every
   .hs-button at once; sizes/labels unchanged — feedback only. */
.hs-button, a.hs-button{ transition:filter .15s ease, transform .15s ease, box-shadow .15s ease !important; }
.hs-button:hover, a.hs-button:hover{ filter:brightness(.92); transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(234,0,41,.28) !important; }

/* [FIX 17d] Nav items showed dropdown carets but gave no hover affordance. Add a subtle
   brand-red shift so they read as interactive (transition already exists on the anchors). */
.custom-menu-primary .hs-menu-item.hs-menu-depth-1 > a:hover,
.custom-menu-primary .hs-menu-item.hs-menu-depth-1 > a:focus-visible{ color:#ff3b57 !important; }

/* [FIX 17e] Hero headline legibility: the thin (weight 250) white "WELCOME TO" / "AMERICAN
   SCHOOL" sit on bright sky/glass with no scrim on desktop. A soft shadow guarantees they
   stay readable without changing the layered look. */
.cm-homepage-banner h1, .cm-homepage-banner .arrow-down{ text-shadow:0 2px 14px rgba(0,0,0,.30); }

/* [FIX 18] Consistent section titles. They were a mess — serif (Chronicle) everywhere except
   Facilities (Gotham), sizes jumping 52->72->85->125px, and split Title Case vs ALL CAPS.
   Every section's main title is an <h2> in a content row (cards/blog titles are <h3>), so one
   rule normalizes them all: single serif family, one responsive size (caps ~52px, flattening
   the oversized statement headings per CEO decision), uppercase, one weight. Colour is left
   contextual (white on the navy Admissions band, faint on the Facilities watermark, navy
   elsewhere) so titles stay legible on their backgrounds. Hero (<h1>) is excluded. Two section
   titles aren't <h2>: "Discover the Rushmore Difference" is a `div.main-heading` and the
   Facilities panel heading is an `<h3>` in `.right-tab-item` — both were still Gotham, so they're
   folded in here. */
/* Scoped to the HOMEPAGE only (body:has the homepage hero): inner pages also use dnd rows, and
   the blanket version blew up paragraph-length h2s there (e.g. the "Join us..." navy band on
   about/rushmore-american-school.html) to 52px caps. */
body:has(.cm-homepage-banner) .dnd-section.row-depth-1:not(:has(.cm-homepage-banner)) h2,
body:has(.cm-homepage-banner) .dnd-section.row-depth-1:not(:has(.cm-homepage-banner)) .main-heading,
body:has(.cm-homepage-banner) .dnd-section.row-depth-1:not(:has(.cm-homepage-banner)) .right-tab-item h3{
  font-family: "Chronicle Text G2", Georgia, "Times New Roman", serif !important;
  font-size: clamp(1.9rem, 4.6vw, 3.25rem) !important;
  font-weight: 300 !important;
  text-transform: uppercase !important;
  letter-spacing: .02em !important;
  line-height: 1.14 !important;
}

/* [FIX 18b] Vertical "LEARNER" title fix: non-serif clean font (Gotham/sans-serif), visible overflow, and proportional sizing so text is never cut off. */
.information .information__title-container,
.information__title-container {
  overflow: visible !important;
  width: auto !important;
  min-width: 50px !important;
  position: relative !important;
  z-index: 5 !important;
}

h2.information__title.information__title.information__title,
.information__title {
  font-family: Gotham, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 34px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  writing-mode: vertical-rl !important;
  transform: rotate(180deg) !important;
  white-space: nowrap !important;
  overflow: visible !important;
  color: #083888 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.information .container-fluid,
.information .row-fluid {
  overflow: visible !important;
}

/* [FIX 18c] Body copy: one size across the site (was a 16-19px mix, read too large).
   Paragraph-scoped so headings, nav, buttons and non-<p> captions are untouched; `p span`
   included because the theme carries sizes on inline spans inside paragraphs. */
p, p span{ font-size: 15px !important; line-height: 1.75 !important; }

/* [FIX 18d] Breathing room above the News & Events title, INSIDE the section (padding on the
   element that paints the tinted band, so the space is tinted, not white). 150 reads as a real
   100+ above the title's line box. The theme's 70px bottom padding left a thin pale-blue sliver
   under the full-bleed blog slider — zeroed so the band ends exactly at the slider. */
.cm-news-events-wrap{ padding-top: 150px !important; padding-bottom: 0 !important; }

/* [FIX 21] Separator line above the footer. */
footer.footer{ border-top: 4px solid rgba(8, 56, 136, .18); }

/* [FIX 22] Inner pages: the header is transparent until the theme's `.scroll` state kicks in,
   so at the top of the page its white nav sits invisible on the white body. Give the header the
   scrolled-state navy from the start on every page EXCEPT the homepage (whose transparent header
   sits over the dark hero by design). The inner-page navy banner tucks under the header, so the
   solid header merges seamlessly with it.
   Pages WITH a `.banner` hero no longer need this: the banner now paints its image from
   y=0 (behind the header), so the header can stay transparent until `.scroll`, matching
   the homepage. Only bannerless inner pages still need the navy from first paint. */
body:not(:has(.cm-homepage-banner)):not(:has(.banner)) header.header{ background-color: #041b43; }
/* Inner-page hero banners were a fixed 560px with ~90px of dead navy under the breadcrumb.
   The band now starts at y=0 (its row's leaked FIX 16 padding is excluded above), so it has
   to absorb the ~150px the header occupies: 430px of content band + header = ~580px.
   Double-class beats rushmore-ui-fixes.css (loads after us) on the specificity tie. */
.banner.banner{ height: 580px !important; min-height: 580px !important; }

/* [FIX 19] About-section editorial redesign. JS (_local_fixes.js aboutRedesign) injects an
   eyebrow + proof strip and gates everything behind .lf-about-redesigned — no-JS and the AR
   mirror keep the original centered layout. Centered stack -> two-column editorial: text
   (eyebrow / left-aligned title / red rule / intro / CTA) left, slider right with ONE
   straightened polaroid inset; scannable proof strip below; the full-bleed diagonal stripes
   pull back to two masked corner accents. */

/* corner accents replace the full-bleed stripes (row bg set by FIX 14 above; later rule wins) */
.dnd-section.row-depth-1:has(.cm-about-rushmore.lf-about-redesigned){
  background-image: none !important;
  background-color: #ffffff !important;
  position: relative;
  overflow: hidden;
}
.dnd-section.row-depth-1:has(.cm-about-rushmore.lf-about-redesigned)::before,
.dnd-section.row-depth-1:has(.cm-about-rushmore.lf-about-redesigned)::after{
  content: ""; position: absolute; pointer-events: none;
  background: repeating-linear-gradient(135deg, #ffffff 0 52px, #eef1f8 52px 70px);
}
.dnd-section.row-depth-1:has(.cm-about-rushmore.lf-about-redesigned)::before{
  top: 0; left: 0; width: 52%; height: 60%;
  -webkit-mask-image: linear-gradient(135deg, #000 28%, transparent 70%);
          mask-image: linear-gradient(135deg, #000 28%, transparent 70%);
}
.dnd-section.row-depth-1:has(.cm-about-rushmore.lf-about-redesigned)::after{
  right: 0; bottom: 0; width: 36%; height: 40%; opacity: .75;
  -webkit-mask-image: linear-gradient(315deg, #000 18%, transparent 68%);
          mask-image: linear-gradient(315deg, #000 18%, transparent 68%);
}

/* the editorial grid (kept above the corner accents) */
.cm-about-rushmore.lf-about-redesigned{
  position: relative; z-index: 1;
  width: min(1180px, calc(100vw - 64px)) !important;
  max-width: none !important;
  margin-left: 50% !important; transform: translateX(-50%);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "title media" "body media" "strip strip";
  column-gap: 64px;
  text-align: left;
}
.cm-about-rushmore.lf-about-redesigned .top-content{ grid-area: title; }
.cm-about-rushmore.lf-about-redesigned .about-content{
  grid-area: body; align-self: start;
  margin-top: -10px !important;
  padding-top: 0 !important;
  text-align: left !important; /* theme centers this block, which centered the Learn More button */
}
.cm-about-rushmore.lf-about-redesigned .cm-about-rushmore-inner{ grid-area: media; position: relative; }

.cm-about-rushmore.lf-about-redesigned .lf-eyebrow{
  font-family: Gotham, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: #e30613; margin: 0 0 12px;
}
.cm-about-rushmore.lf-about-redesigned .top-content h2{
  text-align: left !important; margin: 0 !important;
  /* smaller than the global FIX 18 scale so the title sits in 2-3 lines, not 4 (wins by source order) */
  font-size: clamp(1.7rem, 3.2vw, 2.7rem) !important;
  text-wrap: balance;
}
.cm-about-rushmore.lf-about-redesigned .top-content h2::after{
  content: ""; display: block; width: 64px; height: 3px; background: #e30613; margin: 12px 0 0;
}
.cm-about-rushmore.lf-about-redesigned .about-content p,
.cm-about-rushmore.lf-about-redesigned .about-content p span{
  text-align: left !important; font-size: 15px !important; line-height: 1.75 !important;
  color: #3a4354 !important;
}
.cm-about-rushmore.lf-about-redesigned .about-content p{ max-width: 52ch; margin: 0 0 12px !important; padding-top: 0 !important; }
.cm-about-rushmore.lf-about-redesigned .about-content a.hs-button{ margin-top: 0 !important; }

/* media column: slider fills it; the two dangling polaroids merge into ONE straightened inset */
.cm-about-rushmore.lf-about-redesigned .img-wrap{ width: 100%; }
/* BOTH polaroids kept with their original theme look (tilt, frames, captions); .pic-frames is a
   theme-styled white PANEL, so collapse it to a pure transparent anchor at the photo's top-right
   corner (where the pair hung in the original design) and let the frames render as-is inside it */
.cm-about-rushmore.lf-about-redesigned .pic-frames{
  position: absolute !important; left: auto !important; bottom: auto !important;
  right: -26px !important; top: -34px !important;
  width: auto !important; height: auto !important; min-height: 0 !important;
  background: transparent !important; padding: 0 !important; margin: 0 !important;
  box-shadow: none !important; z-index: 2;
}

/* proof strip — the scannable facts a prospective parent needs */
.cm-about-rushmore.lf-about-redesigned .lf-about-proof{
  grid-area: strip; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  margin-top: 64px; padding-top: 34px; border-top: 1px solid rgba(8, 56, 136, .16);
}
.cm-about-rushmore.lf-about-redesigned .lf-about-proof strong{
  display: block; font-family: "Chronicle Text G2", Georgia, serif;
  font-size: 30px; font-weight: 300; color: #083888; line-height: 1.15;
}
.cm-about-rushmore.lf-about-redesigned .lf-about-proof span{
  display: block; margin-top: 6px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #7a8296;
}

@media (max-width: 900px){
  .cm-about-rushmore.lf-about-redesigned{
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "media" "body" "strip";
    width: calc(100vw - 40px);
  }
  .cm-about-rushmore.lf-about-redesigned .cm-about-rushmore-inner{ margin-top: 26px; }
  .cm-about-rushmore.lf-about-redesigned .about-content{ margin-top: 34px; }
  .cm-about-rushmore.lf-about-redesigned .pic-frames{ display: none !important; } /* pair needs room; mobile keeps the clean stack */
  .cm-about-rushmore.lf-about-redesigned .lf-about-proof{ grid-template-columns: repeat(2, 1fr); }
}

/* [FIX 20] Discover-over-video: the Discover (technology) text lives as a centered overlay on the
   autoplaying video band (JS: discoverOverVideo). The play button is dropped (video autoplays;
   full-screen open no longer needed), the emptied Discover row is hidden by JS, and a navy scrim
   keeps the white text readable over any frame. The overlay is IN-FLOW (video is the absolute
   layer), so the band grows with the text at any viewport instead of overflowing the fixed
   550px height. */
.cm-full-width-video.lf-has-overlay{ height: auto !important; }
.cm-full-width-video.lf-has-overlay > a{ display: none !important; }
.cm-full-width-video.lf-has-overlay::before{
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(4, 20, 60, .45);
}
.cm-full-width-video .lf-video-overlay{
  position: relative; z-index: 2; min-height: 550px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 24px;
}
.cm-full-width-video .lf-video-overlay .cm-discover-inner{ max-width: 900px; }
.cm-full-width-video .lf-video-overlay h2{
  color: #fff !important;
  font-size: clamp(1.8rem, 3.2vw, 2.7rem) !important;
}
.cm-full-width-video .lf-video-overlay p,
.cm-full-width-video .lf-video-overlay p span{ color: #f2f5fa !important; }
.cm-full-width-video .lf-video-overlay .discover-content p{ max-width: 62ch; margin-left: auto; margin-right: auto; }
/* the red TECHNOLOGY pill matches heading font-size */
.cm-full-width-video .lf-video-overlay .sub-heading{
  display: inline-block; background: #e30613; color: #fff !important;
  font-size: clamp(1.8rem, 3.2vw, 2.7rem) !important;
  font-weight: 700 !important;
  padding: 8px 32px !important; margin: 14px 0 22px !important;
  letter-spacing: .06em !important; text-transform: uppercase !important;
}
.cm-full-width-video .lf-video-overlay .button-group{
  display: flex; justify-content: center;
}

/* [FIX 23] Inner Pages Hero Banner Beautification & Legibility */

.banner {
  position: relative !important;
  min-height: clamp(340px, 30vw, 440px) !important;
  padding-top: clamp(100px, 10vw, 150px) !important;
  padding-bottom: 40px !important;
  background-position: center 25% !important;
  background-size: cover !important;
  display: flex !important;
  align-items: center !important;
}

/* Gradient Overlay for 100% legibility */
.banner::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(180deg, rgba(4, 27, 67, 0.78) 0%, rgba(4, 27, 67, 0.45) 100%) !important;
  z-index: 1 !important;
}

.banner .content-wrapper {
  position: relative !important;
  z-index: 5 !important;
}

/* Typography */
.banner h1.thin-heading,
.banner h1 {
  font-family: "Chronicle Text G2", Georgia, serif !important;
  font-size: clamp(34px, 4.2vw, 58px) !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
  line-height: 1.15 !important;
  margin-bottom: 16px !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

.banner .sub-heading {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: clamp(15px, 1.4vw, 18px) !important;
  line-height: 1.6 !important;
  margin-bottom: 18px !important;
  max-width: 750px !important;
}

/* Glassmorphism Breadcrumb Badge Bar */
.banner-brd {
  margin-top: 16px !important;
  display: inline-block !important;
}

.banner-brd .hs-breadcrumb-menu {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 30px !important;
  padding: 6px 20px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.banner-brd .hs-breadcrumb-menu-item,
.banner-brd .hs-breadcrumb-menu-item a,
.banner-brd .hs-breadcrumb-label {
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  font-family: Gotham, sans-serif !important;
  text-decoration: none !important;
}

.banner-brd .hs-breadcrumb-menu-item a:hover {
  color: #e30613 !important;
}

.banner-brd .hs-breadcrumb-menu-divider {
  color: rgba(255, 255, 255, 0.5) !important;
  margin: 0 8px !important;
}

/* [FIX 24] Inner Pages Header & Navigation Menu Enhancements */

header.header {
  transition: background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease !important;
}

/* Sticky Header Backdrop & Shadow */
header.header.sticky,
header.header.is-sticky,
body.sticky-header header.header {
  background: rgba(4, 27, 67, 0.96) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

/* Primary Navigation Bar Container */
.custom-menu-primary {
  background: #041b43 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Pages with a hero image behind the header (homepage `.cm-homepage-banner`, inner-page
   `.banner`): nav band stays backgroundless over the hero until the theme adds .scroll to
   the header (then header.header's own navy takes over). */
body:has(.cm-homepage-banner) header.header:not(.scroll) .custom-menu-primary,
body:has(.banner) header.header:not(.scroll) .custom-menu-primary {
  background: transparent !important;
  border-top-color: transparent !important;
}

/* Top Level Menu Links */
.custom-menu-primary .hs-menu-wrapper > ul > li > a {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 16px 20px !important;
  transition: color 0.2s ease !important;
  position: relative !important;
  font-family: Gotham, sans-serif !important;
}

/* Active Page Red Accent Indicator Bar */
.custom-menu-primary .hs-menu-wrapper > ul > li.active-branch > a::after,
.custom-menu-primary .hs-menu-wrapper > ul > li.hs-item-has-children.active-branch > a::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 20px !important;
  right: 20px !important;
  height: 3px !important;
  background: #e30613 !important;
  border-radius: 3px 3px 0 0 !important;
}

.custom-menu-primary .hs-menu-wrapper > ul > li > a:hover {
  color: #e30613 !important;
}

/* Sub-menu Dropdown Panels */
.custom-menu-primary .hs-menu-children-wrapper {
  background: #041b43 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
  padding: 10px 0 !important;
  min-width: 240px !important;
  overflow: hidden !important;
}

.custom-menu-primary .hs-menu-children-wrapper li a {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  padding: 10px 20px !important;
  display: block !important;
  transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease !important;
  font-family: Gotham, sans-serif !important;
}

.custom-menu-primary .hs-menu-children-wrapper li a:hover {
  background: rgba(227, 6, 19, 0.15) !important;
  color: #ffffff !important;
  padding-left: 24px !important;
}

.custom-menu-primary .hs-menu-children-wrapper li.active > a {
  color: #e30613 !important;
  font-weight: 600 !important;
}

/* Header Right Buttons */
.cm-header-right-icons li.admission a {
  background: #e30613 !important;
  border-radius: 20px !important;
  padding: 8px 18px !important;
  box-shadow: 0 2px 8px rgba(227, 6, 19, 0.4) !important;
  transition: transform 0.2s ease, background 0.2s ease !important;
}
.cm-header-right-icons li.admission a:hover {
  background: #c00410 !important;
  transform: translateY(-1px) !important;
}


/* ============================================================================
   [FIX 30] News & Events: no animation, condensed cards.
   Scoped with body:has(.blog-index) / body:has(.blog-post) so the rest of the site keeps
   its AOS motion — an unscoped rule here would kill it everywhere (see the recurring
   ":not(:has(.cm-homepage-banner))" leak documented in this repo's CLAUDE.md).
   ============================================================================ */

/* Animations off. Covers the theme's AOS start-state, our FIX 1 .lf-revealed transition,
   and any keyframe animation, so cards paint in their final position immediately. */
body:has(.blog-index) [data-aos],
body:has(.blog-post) [data-aos]{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* Card grid: fluid columns instead of the theme's flex row, so cards keep a sane width
   at every viewport without per-breakpoint rules. */
body:has(.blog-index) .blog-index{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important;
  gap: 28px !important;
  align-items: stretch !important;
}
body:has(.blog-index) .blog-index__post{
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: none !important;
}
body:has(.blog-index) .blog-index__post-inner-card{
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  background: #fff;
  border: 1px solid rgba(4, 27, 67, .10);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(4, 27, 67, .05);
}
body:has(.blog-index) .blog-index__post-inner-card:hover{
  box-shadow: 0 8px 24px rgba(4, 27, 67, .12);
  border-color: rgba(4, 27, 67, .18);
}

/* 250px of image on a 780px card was most of its height. */
body:has(.blog-index) .blog-index__post-image{
  height: 168px !important;
  min-height: 0 !important;
  background-size: cover !important;
  border-radius: 0 !important;
  flex: 0 0 auto !important;
}

body:has(.blog-index) .blog-index__post-content{
  padding: 16px 18px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex: 1 1 auto !important;
}
/* Two-line title cap: these headlines run to 3-4 lines and were setting the card height. */
body:has(.blog-index) .blog-index__post-content h4{
  font-size: 18px !important;
  line-height: 1.32 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* .lf-excerpt is created by FIX 30 in _local_fixes.js. The double class out-scores FIX 18c's
   site-wide `p, p span{font-size:15px !important}`. */
body:has(.blog-index) .blog-index__post-content p.lf-excerpt.lf-excerpt{
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  color: #4a5568;
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Pin the CTA to the bottom so mixed-length cards still line up. */
body:has(.blog-index) .blog-post__meta-section{ margin-top: auto !important; padding-top: 4px; }
body:has(.blog-index) .blog-index__post-content .button{
  padding: 7px 20px !important;
  font-size: 13px !important;
  letter-spacing: .02em;
}
body:has(.blog-index) .event-detail-item:empty{ display: none !important; }

/* [FIX 31] Self-sizing top-nav items.
   The theme gives every top-level <li> the SAME width (172px, so each <a> gets 159px),
   regardless of label length — fine for one-word items, but "News & Events" doesn't fit and
   wrapped onto a second line, making that one item taller than the rest.
   Let each item size to its own label and share the leftover space instead. The horizontal
   padding is a clamp so the row keeps shrinking gracefully before the burger takes over. */
.custom-menu-primary .hs-menu-wrapper > ul > li.hs-menu-depth-1{
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
}
.custom-menu-primary .hs-menu-wrapper > ul > li.hs-menu-depth-1 > a{
  white-space: nowrap !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 16px clamp(9px, 1.35vw, 20px) !important;
}

/* [FIX 32] Listing card titles in brand navy rather than red; red is kept for the CTA and
   the hover state so the card still has one clear accent. */
body:has(.blog-index) .blog-index__post-content h4,
body:has(.blog-index) .blog-index__post-content h4 a{
  color: #041b43 !important;
}
body:has(.blog-index) .blog-index__post-content h4 a:hover,
body:has(.blog-index) .blog-index__post-content h4 a:focus-visible{
  color: #e30613 !important;
}

/* [FIX 33] "Disappearing text" on the specialty pages (Science, Arts, Sports, Technology,
   Recreation, Facilities …) — the cause of the big blank band under those banners.
   `.our-services-slider > .bg` is `position:absolute; inset:0; background:#fff` with
   `z-index:auto`, while `.container` holding the heading + intro copy is `position:static`.
   A positioned element paints ABOVE static in-flow content, so that white panel covered the
   text: the copy still occupied ~400px of layout, but rendered as empty white.
   (Verified with document.elementFromPoint over the heading — it returned DIV.bg, not the h2.)
   Raising the content rather than sinking .bg keeps the panel's background intact. */
.our-services-slider > .container{
  position: relative !important;
  z-index: 1 !important;
}
.our-services-slider > .bg{ z-index: 0 !important; }

/* [FIX 34] Third-level nav flyout ("Our Campus > Our Facilities" and its 6 facility pages).
   The submenu markup is correct — .hs-menu-depth-2 "Our Facilities" holds six .hs-menu-depth-3
   items — but it could never be seen:
     1. the depth-2 panel is `overflow:hidden`, which CLIPS a nested flyout entirely;
     2. the theme parks unopened flyouts at `left:-9999px` and only ships a hover rule for the
        top level, so nothing ever brought the depth-3 panel back on-screen.
   Fixed by letting the panel overflow, and by toggling the nested panel with
   visibility/opacity instead of the -9999px park (parking it off-screen with overflow
   visible would create a horizontal scrollbar). :focus-within keeps it keyboard-reachable. */
.custom-menu-primary .hs-menu-children-wrapper{ overflow: visible !important; }

.custom-menu-primary .hs-menu-depth-2.hs-item-has-children > .hs-menu-children-wrapper{
  left: 100% !important;
  top: 0 !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease;
}
.custom-menu-primary .hs-menu-depth-2.hs-item-has-children:hover > .hs-menu-children-wrapper,
.custom-menu-primary .hs-menu-depth-2.hs-item-has-children:focus-within > .hs-menu-children-wrapper{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* the parent row keeps its highlight while the nested panel is open */
.custom-menu-primary .hs-menu-depth-2.hs-item-has-children:hover > a{ color: #ff3b57 !important; }

/* [FIX 35] Brand navy behind every hero, so the first paint is brand colour rather than white.
   These heroes carry their photo as a background-IMAGE (and on the homepage the image lives on
   the JS-inserted .lf-hero-zoom layer), so until that image decodes the band renders as the
   bare page canvas — a white flash under the header. A background-COLOR sits beneath the image
   permanently: it costs nothing once the photo is in, and it is what shows while it loads, on a
   slow connection, or if the image ever 404s.
   CAREFUL — the homepage hero is `position:relative; z-index:auto`, so it does NOT create a
   stacking context, and its own background therefore paints ABOVE the `z-index:-1`
   .lf-hero-zoom layer that carries the photo: colouring .cm-homepage-banner once that layer
   exists HIDES the hero image (same trap as FIX 25's body background). So the hero itself is
   only coloured while the zoom layer is absent — i.e. the pre-JS window, where the photo is
   still an inline background-image on the hero and the colour sits harmlessly beneath it.
   Once heroZoom() has run, the colour lives on the zoom layer, under its own image. */
.cm-homepage-banner:not(:has(.lf-hero-zoom)),
.cm-homepage-banner .lf-hero-zoom,
.banner{
  background-color: #041b43 !important;
}
