/* ============================================================================
   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 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;
  top: -18px !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) scale(1.12) !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;
  max-width: none !important;
  width: 100% !important;
  height: auto !important;
  vertical-align: bottom !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: auto !important;
  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;
  max-height: 100% !important;
  width: auto !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)){
  padding-top: 100px !important;
  padding-bottom: 100px !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: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. */
.dnd-section.row-depth-1.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. */
.dnd-section.row-depth-1:not(:has(.cm-homepage-banner)):not(:has(.cm-admission-slider)):not(:has(.cm-full-width-video)):not(.row-number-3){
  padding-top: 150px !important;
  padding-bottom: 150px !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{ padding-top: 100px !important; padding-bottom: 0 !important; }
.dnd-section.row-depth-1:has(.cm-full-width-video){ padding-top: 0 !important; }
/* News -> Rushmore-Difference seam was 345px of white (150+150 row paddings + 45 internal);
   halved to ~170 per CEO: news row bottom 150 -> 75, difference row top 150 -> 50. */
.dnd-section.row-depth-1.row-number-19.row-number-19.row-number-19.row-number-19{ padding-bottom: 75px !important; }
.dnd-section.row-depth-1.row-number-21.row-number-21.row-number-21.row-number-21{ padding-top: 50px !important; }

/* ============================ 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] The vertical "LEARNER" accent title lives in a ~60px-wide column; FIX 18's uniform
   52px/1.14 sizing made its line box wider than the column and the glyphs clip on the left.
   Slightly smaller + line-height:1 + visible overflow keeps it intact. */
h2.information__title.information__title.information__title{ font-size: 44px !important; line-height: 1 !important; } /* out-specifies FIX 18's (0,3,1) h2 rule */
.information__title-con, .information__title{ 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. */
body:not(:has(.cm-homepage-banner)) header.header{ background-color: #041b43; }
/* Inner-page hero banners were a fixed 560px with ~90px of dead navy under the breadcrumb;
   430px keeps the title + breadcrumb comfortable (content flexes within the band).
   Double-class beats rushmore-ui-fixes.css (loads after us) on the specificity tie. */
.banner.banner{ height: 430px !important; min-height: 430px !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;
}