/* ==========================================================
   Let's Make A Change | Home page styles (build v6)
   Colors, fonts, and the hero text sizes live in the :root block below.
   Fonts (Nunito, DM Sans, Wix Madefor Display) are self-hosted in assets/fonts.
   ========================================================== */

@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/nunito-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap; src: url("../assets/fonts/nunito-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 900; font-display: swap; src: url("../assets/fonts/nunito-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/dm-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/dm-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/dm-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Wix Madefor Display"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/wix-madefor-display-latin-700-normal.woff2") format("woff2"); }

:root {
  --cream: #FFFDF8;           /* page background (warm white) */
  --navy: #0D314B;            /* headings, dark band */
  --footer-navy: #081F30;     /* footer card */
  --teal: #1F6670;            /* buttons, small labels */
  --teal-hover: #278290;
  --teal-bright: #4CAFB3;     /* hero circle */
  --mint: #8ED8D3;            /* "Now We're Rolling!" */
  --gold: #F7C74A;
  --gold-deep: #C8A948;       /* hero circle */
  --cyan: #DFF7FA;            /* testimonials background */
  --cyan-frame: #E4F7FB;      /* frame behind classroom photos */
  --panel: #39576C;           /* stats panel */
  --panel-line: #4C6A7E;
  --ink-soft: #5B6B76;

  --font-head: "Nunito", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Wix Madefor Display", "DM Sans", system-ui, sans-serif;

  --ease: cubic-bezier(.22, .72, .2, 1);
  --header-h: 76px;

  /* used by the hero size formulas in the TEXT SIZES section below */
  --vh: 1vh;
  --hero-h: calc(var(--vh) * 100 - var(--header-h));
}
@supports (height: 100svh) { :root { --vh: 1svh; } }

/* ==========================================================
   TEXT SIZES   <<<  change a number here and it updates on every page  >>>

   HOW TO READ A LINE
     --fs-section-title: clamp(2.3rem, 1.3rem + 3.6vw, 4rem);
                               |                        |
                               smallest (phones)        largest (big screens)
     The middle part makes the text grow smoothly between the two.
     To make this text bigger or smaller, change the FIRST and LAST numbers.
     Lines with a single number (like 1rem) are a fixed size.
     1rem is the normal body text size (about 16px). 1.5rem is one and a half times that.

   Sizes that are different on phones (screens under 640px wide) are listed
   again in the PHONE SIZES block right below this one.
   ========================================================== */
:root {
  /* ---- EVERYWHERE ---- */
  --fs-body:          1.0625rem;                          /* normal paragraph text */
  --fs-nav:           1rem;                               /* menu links at the top */
  --fs-menu:          1.08rem;                            /* menu links on phones and tablets */
  --fs-button:        1.02rem;                            /* button text */
  --fs-eyebrow:       .95rem;                             /* small capital labels above headings */
  --fs-page-title:    clamp(2.2rem, 1.2rem + 3.8vw, 4rem);      /* big title in the banner of inner pages */
  --fs-page-sub:      clamp(1.1rem, 1rem + .6vw, 1.5rem);       /* line under that title */
  --fs-section-title: clamp(2.3rem, 1.3rem + 3.6vw, 4rem);      /* headings like "Our Classrooms" */
  --fs-section-lead:  clamp(1.05rem, 1rem + .3vw, 1.3rem);      /* line under a section heading */

  /* ---- FOOTER (every page) ---- */
  --fs-footer-cta:    1.08rem;                            /* "Come see our centers" */
  --fs-footer-button: 1rem;                               /* "Book A Tour" button */
  --fs-footer-title:  1.2rem;                             /* South Euclid, Mayfield Village, Contact */
  --fs-footer-sub:    .95rem;                             /* small line under those titles */
  --fs-footer-text:   var(--fs-body);                     /* addresses and phone numbers */
  --fs-footer-email:  .97rem;                             /* email address */
  --fs-footer-small:  .92rem;                             /* copyright line */
  --fs-footer-badge:  .8rem;                              /* "Learn. Grow. Thrive." on the photo */

  /* ---- HOME PAGE ---- */
  --hero-title-size:   clamp(2.2rem,  min(.9rem + 4.6vw,  var(--hero-h) * .145), 4.6rem);   /* Let's Make A Change */
  --hero-sub-size:     clamp(1.05rem, min(.9rem + 1.05vw, var(--hero-h) * .052), 1.75rem);  /* Trusted Early Childhood... */
  --hero-rolling-size: clamp(1.25rem, min(.95rem + 1vw,   var(--hero-h) * .04),  1.9rem);   /* Now We're Rolling! */
  /* the three hero sizes above also shrink on short screens so the whole hero always fits */
  --fs-scroll-cue:    .95rem;                             /* "Scroll to explore" */
  --fs-class-title:   clamp(1.2rem, 1rem + .55vw, 1.5rem);      /* Little Learners, Discoverers... cards */
  --fs-class-ages:    .95rem;                             /* group and age on those cards */
  --fs-class-place:   .9rem;                              /* Mayfield Village / South Euclid tag */
  --fs-why-title:     clamp(2.3rem, 1.1rem + 3.4vw, 4.2rem);    /* More than childcare. */
  --fs-stat-number:   clamp(1.55rem, 1.1rem + 1.7vw, 2.7rem);   /* 2016, 2, Gold Star */
  --fs-stat-label:    clamp(.95rem, .9rem + .25vw, 1.1rem);     /* Established, Locations */
  --fs-review-text:   1.12rem;                            /* testimonial text */
  --fs-review-name:   1.12rem;                            /* "Parent Review" */

  /* ---- ABOUT PAGE ---- */
  --fs-story-lead:    clamp(1.2rem, 1.05rem + .7vw, 1.5rem);    /* mission statement */
  --fs-story-text:    var(--fs-body);                     /* story paragraphs */
  --fs-value-title:   1.3rem;                             /* Safety, Learning... */
  --fs-member-name:   clamp(1.3rem, 1.1rem + .6vw, 1.65rem);    /* team member names */
  --fs-member-role:   var(--fs-body);                     /* team member positions */
  --fs-member-bio:    .98rem;                             /* team member bios */
  --fs-lead-name:     clamp(2.2rem, 1.5rem + 2.6vw, 3.4rem);  /* CEO name on the navy card */
  --fs-lead-bio:      clamp(1.02rem, .95rem + .3vw, 1.18rem); /* CEO bio */
  --fs-setting-lead:  clamp(1.15rem, 1.05rem + .6vw, 1.45rem);  /* classroom setting sentence */

  /* ---- OUR CLASSROOMS PAGE ---- */
  --fs-video-title:   clamp(1.25rem, 1.05rem + .8vw, 1.7rem);   /* "Classroom video tour" in the video frame */
  --fs-video-note:    1rem;                               /* "Coming soon" */
  --fs-room-group:    .85rem;                             /* small label: Infant/Toddler, Pre-K... */
  --fs-room-title:    clamp(1.6rem, 1.3rem + .9vw, 2.1rem);     /* Little Learners, Discoverers... */
  --fs-room-age:      1rem;                               /* "1 to 2 Years" badge */
  --fs-room-text:     1.02rem;                            /* classroom descriptions */
  --fs-room-place:    .92rem;                             /* Mayfield Village / South Euclid tag */
  --fs-room-button:   1rem;                               /* "Enroll Now" button */

  /* ---- EMPLOYMENT PAGE ---- */
  --fs-careers-lead:  clamp(1.15rem, 1.05rem + .5vw, 1.4rem);   /* "We're looking for caring, dependable people..." */
  --fs-careers-text:  var(--fs-body);                     /* paragraph under the lead line */
  --fs-careers-badge: .95rem;                             /* "Now Hiring" */
  --fs-careers-chip:  .92rem;                             /* "2 Locations, 1 Team" */
  --fs-field-label:   .95rem;                             /* labels above each form field */
  --fs-field-input:   1.02rem;                            /* what you type into a field */
  --fs-apply-note:    .95rem;                             /* line under the submit button */

  /* ---- CONTACT PAGE ---- */
  --fs-contact-lead:  clamp(1.15rem, 1.05rem + .5vw, 1.4rem);   /* "Whether you're touring..." */
  --fs-quick-label:   .85rem;                             /* "Call Us" / "Email Us" */
  --fs-quick-value:   clamp(1.05rem, 1rem + .3vw, 1.2rem);      /* the phone number / email itself */
  --fs-chip:          .95rem;                             /* hours pill under the quick contact rows */
  --fs-photo-caption: 1.05rem;                            /* "Aisha Childers" under her photo */
  --fs-info-title:    1.25rem;                            /* "Operating Hours" / "Our Policies" / "Meal Plans" */
  --fs-info-text:     1rem;                               /* the hours, and each policy/menu line */
  --fs-visit-tab:     1rem;                               /* "Mayfield Village" / "South Euclid" buttons */
  --fs-visit-text:    1.05rem;                             /* address, hours, and phone under the map tabs */
  --fs-visit-caption: 1.02rem;                            /* line under the exterior photo */

  /* ---- OUR FOUNDATION PAGE ---- */
  --fs-roots-lead:    clamp(1.15rem, 1.05rem + .5vw, 1.4rem);   /* "Making The Change Foundation began..." */
  --fs-roots-list:    1.05rem;                            /* the three Reclaim a Child's Future lines */
  --fs-about-lead:    clamp(1.15rem, 1.05rem + .5vw, 1.45rem);  /* "Making the Change Foundation is a grassroots..." */
  --fs-vm-title:      1.4rem;                             /* "Vision" / "Mission" */
  --fs-vm-text:       1.05rem;                            /* the vision and mission sentences */
  --fs-pb-title:      1.2rem;                             /* each Core Programs card title */
  --fs-pb-text:       1rem;                               /* each Core Programs card description */
  --fs-stat-oval-num: clamp(2.2rem, 1.6rem + 2vw, 3.2rem);      /* "10.5M+", "63%", "54%" */
  --fs-stat-oval-label: .98rem;                           /* the sentence under each number */
  --fs-stat-oval-source: .82rem;                          /* the citation under that */
  --fs-stats-quote:   clamp(1.3rem, 1.1rem + .8vw, 1.7rem);     /* the closing pull quote */
  --fs-trust-title:   clamp(1.6rem, 1.3rem + 1vw, 2.2rem);      /* "501(c)(3) Nonprofit Organization" */
  --fs-trust-text:    1.1rem;                             /* the paragraph under it */
  --fs-trust-cta-title: 1.5rem;                           /* "Support Our Mission" */

  --fs-loc-name:      clamp(1.5rem, 1.25rem + .9vw, 2rem);      /* "Mayfield Village Center" */
  --fs-loc-label:     .8rem;                              /* small labels: AGES, ADDRESS, HOURS... */
  --fs-loc-text:      1.05rem;                            /* ages and address */
  --fs-loc-tile:      1rem;                               /* "Mon to Fri, 8am to 5pm", "Center Bus"... */
  --fs-loc-list:      1.02rem;                            /* checklist of services */
  --fs-loc-button:    1rem;                               /* "Get Directions" button */
}

/* ---- PHONE SIZES (screens under 640px wide). Only the sizes that change are listed. ---- */
@media (max-width: 640px) {
  :root {
    --fs-body:        1rem;
    --fs-class-title: 1.08rem;
    --fs-class-ages:  .88rem;
    --fs-class-place: .8rem;
    --fs-value-title: 1.15rem;
    --fs-member-name: 1.1rem;
    --fs-member-role: .88rem;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 8px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
a { color: inherit; }

.container { width: min(1200px, calc(100% - 2rem)); margin-inline: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--navy); color: #fff; padding: .7rem 1.1rem; border-radius: 10px;
  font-weight: 700; transition: top .2s;
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 3px solid var(--teal-bright); outline-offset: 3px; border-radius: 6px; }

.icon { width: 1.1em; height: 1.1em; flex: none; fill: currentColor; }

.eyebrow {
  font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: .18em; text-transform: uppercase;
}
.eyebrow--gold { color: var(--gold); }
.eyebrow--teal { color: var(--teal); text-align: center; }

/* ---------- Scroll progress ---------- */
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 120; pointer-events: none; }
.progress span {
  display: block; height: 100%; transform: scaleX(0); transform-origin: left; background: var(--gold);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  transition: box-shadow .3s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(13, 49, 75, .10); }

.site-header__inner {
  max-width: 1320px; margin-inline: auto;
  padding: .5rem clamp(1rem, 3vw, 2.25rem);
  min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  transition: min-height .3s var(--ease);
}
.is-scrolled .site-header__inner { min-height: 64px; }

.brand img { height: 58px; width: auto; transition: height .3s var(--ease); }
.is-scrolled .brand img { height: 48px; }

.site-nav ul { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.1rem); }
.site-nav a {
  position: relative; display: inline-block; padding: .5rem 0;
  font-weight: 500; font-size: var(--fs-nav); text-decoration: none; color: var(--navy);
  transition: color .25s;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .1rem; height: 2.5px; border-radius: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--teal); }
.site-nav a[aria-current="page"] { font-weight: 700; }

.nav-toggle {
  display: none; width: 46px; height: 46px; border: 0; border-radius: 12px;
  background: transparent; cursor: pointer; position: relative;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 12px; right: 12px; height: 2.5px; border-radius: 2px;
  background: var(--navy); transition: transform .35s var(--ease), top .35s var(--ease);
}
.nav-toggle__bars { top: 22px; }
.nav-toggle__bars::before { left: 0; right: 0; top: -7px; }
.nav-toggle__bars::after  { left: 0; right: 0; top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { top: 0; transform: rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  padding: 1rem 1.8rem; border-radius: 999px; border: 2px solid var(--gold);
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-button); line-height: 1.1;
  text-decoration: none; color: #fff; cursor: pointer;
  transition: transform .3s var(--ease), background-color .3s, color .3s, box-shadow .3s;
}
.btn svg { width: 1.2em; height: 1.2em; flex: none; transition: transform .35s var(--ease); }
.btn:hover { transform: translateY(-3px); }
.btn:hover svg { transform: translateX(5px); }
.btn:active { transform: translateY(-1px) scale(.985); }

.btn--teal { background: var(--teal); }
.btn--teal:hover { background: var(--teal-hover); box-shadow: 0 12px 28px rgba(31, 102, 112, .35); }

.btn--glass {
  background: rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.btn--glass:hover { background: rgba(255, 255, 255, .26); }

.btn--gold { background: var(--gold); color: var(--navy); }
.btn--gold:hover { background: #FFD873; box-shadow: 0 10px 26px rgba(247, 199, 74, .4); }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff; text-align: center;
  min-height: clamp(440px, var(--hero-h), 800px);
  display: grid; place-items: center;
  padding: clamp(1rem, calc(var(--vh) * 4), 3rem) 1.25rem 5.6rem;
  background:
    /* dark navy wash so the white and gold text stay readable over the photo;
       raise the .78/.60 numbers to fade the photo more, lower them to show more of it */
    linear-gradient(112deg, rgba(17, 47, 58, .78) 0%, rgba(15, 61, 78, .68) 38%, rgba(42, 88, 101, .62) 74%, rgba(64, 99, 109, .60) 100%),
    url("../assets/images/hero.jpg") center 38% / cover no-repeat,
    linear-gradient(112deg, #112F3A 0%, #0F3D4E 38%, #2A5865 74%, #40636D 100%);
}
/* Want to swap the photo, or remove it? Replace assets/images/hero.jpg, or delete the url(...) line
   above, and the plain gradient underneath shows instead. */

.hero__orb { position: absolute; z-index: 0; will-change: transform; pointer-events: none; }
.hero__orb i {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  animation: float 9s ease-in-out infinite alternate;
}
.hero__orb--teal { width: clamp(150px, 17.5vw, 340px); aspect-ratio: 1; right: -7vw; top: 5%; }
.hero__orb--teal i { background: var(--teal-bright); }
.hero__orb--gold { width: clamp(130px, 16vw, 310px); aspect-ratio: 1; left: -8vw; bottom: 4%; }
.hero__orb--gold i { background: var(--gold-deep); animation-duration: 11s; animation-direction: alternate-reverse; }

.hero__content { position: relative; z-index: 1; width: min(1040px, 100%); }

/* Text that "rolls" up from behind a mask. The negative margin keeps the lines tight. */
.roll { display: block; overflow: hidden; padding: .05em .06em .2em; margin-bottom: -.15em; }
.roll__inner {
  display: inline-block; transform: translateY(115%);
  animation: roll-up .95s var(--ease) both; animation-delay: var(--d, 0s);
}

.hero__rolling {
  font-family: var(--font-display); font-weight: 700; line-height: 1.15; letter-spacing: -.005em;
  font-size: var(--hero-rolling-size);
  color: var(--mint);
  margin-bottom: clamp(.4rem, calc(var(--hero-h) * .02), 1rem);
}

.hero__title {
  font-family: var(--font-head); font-weight: 900; line-height: 1; letter-spacing: -.01em;
  font-size: var(--hero-title-size);
  text-shadow: 0 4px 24px rgba(0, 0, 0, .25);
}
.roll--gold { color: var(--gold); }

.hero__sub {
  max-width: 34em;
  margin: clamp(.8rem, calc(var(--hero-h) * .035), 1.7rem) auto clamp(1rem, calc(var(--hero-h) * .045), 2.1rem);
  font-weight: 500; font-size: var(--hero-sub-size); line-height: 1.45;
  animation: fade-up .9s var(--ease) .7s both;
}
.hero__actions {
  display: flex; flex-wrap: wrap; gap: 1.1rem; justify-content: center;
  animation: fade-up .9s var(--ease) .9s both;
}

.hero__scroll {
  position: absolute; z-index: 1; left: 50%; bottom: 3rem; translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  font-size: var(--fs-scroll-cue); line-height: 1.3; color: rgba(255, 255, 255, .78); text-decoration: none;
  animation: fade-up .9s var(--ease) 1.3s both;
  transition: color .3s;
}
.hero__scroll:hover { color: var(--gold); }
.hero__scroll svg { width: 22px; height: 22px; animation: bob 2.2s ease-in-out infinite; }

/* ---------- Partner logos (floating panel just under the hero) ---------- */
.partners { position: relative; z-index: 3; margin-top: calc(-1 * clamp(1.6rem, 3vw, 2.6rem)); }
.partners__panel {
  background: #fff; border-radius: clamp(22px, 3vw, 32px);
  box-shadow: 0 18px 46px rgba(13, 49, 75, .14);
  padding: clamp(1rem, 2vw, 1.6rem) 0; overflow: hidden;
}
.marquee { overflow: hidden; }
.marquee__track {
  --gap: clamp(2.2rem, 5vw, 4.2rem);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 1.25rem var(--gap); padding: 0 1.5rem;
}
.marquee__track li { flex: none; display: flex; align-items: center; }
.marquee__track img {
  height: clamp(46px, 5vw, 68px); width: auto; object-fit: contain;
  transition: transform .4s var(--ease);
}
.marquee__track li:hover img { transform: scale(1.08); }

.marquee.is-ready {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee.is-ready .marquee__track {
  flex-wrap: nowrap; justify-content: flex-start; width: max-content; padding: 0;
  animation: marquee 48s linear infinite;
}
.marquee.is-ready:hover .marquee__track { animation-play-state: paused; }

/* ---------- Section headings ---------- */
.section-title {
  font-family: var(--font-head); font-weight: 900; text-align: center; line-height: 1.08; letter-spacing: -.01em;
  font-size: var(--fs-section-title); color: var(--navy);
}
.section-lead {
  max-width: 36em; margin: 1.1rem auto 0; text-align: center; color: var(--ink-soft);
  font-size: var(--fs-section-lead); text-wrap: balance;
}

/* ---------- Our classrooms ---------- */
.classrooms { padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 6.5rem); }

.class-grid {
  --gap: clamp(.9rem, 1.8vw, 1.5rem);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--gap); margin-top: clamp(2.5rem, 5vw, 4rem);
}
.class { flex: 0 0 calc((100% - var(--gap) * 4) / 5); display: flex; }   /* 5 in a row */
.class__link {
  display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%;
  padding: 1rem 1rem 1.5rem; border-radius: 28px; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid rgba(13, 49, 75, .07);
  box-shadow: 0 6px 22px rgba(13, 49, 75, .05);
  transition: transform .45s var(--ease), box-shadow .45s;
}
.class__link:hover, .class__link:focus-visible {
  transform: translateY(-8px); box-shadow: 0 28px 54px rgba(13, 49, 75, .15);
}

.class__photo { position: relative; width: 100%; aspect-ratio: 488 / 650; isolation: isolate; }
.class__photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 24px;
  background: var(--cyan-frame); transform: translate(-9px, -9px);
  transition: transform .55s var(--ease);
}
.class__link:hover .class__photo::before { transform: translate(-14px, -14px); }
.class__frame { width: 100%; height: 100%; border-radius: 22px; overflow: hidden; background: var(--cyan-frame); }
.class__frame img {
  width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 30%);
  transition: transform 1.3s var(--ease);
}
.class__link:hover .class__frame img { transform: scale(1.07); transition-duration: .8s; }

.class__name {
  margin-top: 1.5rem; font-family: var(--font-head); font-weight: 800; line-height: 1.15;
  font-size: var(--fs-class-title);
}
.class__ages { margin-top: .5rem; color: var(--ink-soft); font-size: var(--fs-class-ages); line-height: 1.4; }
.class__ages span { display: block; }
.class__ages span:first-child { font-weight: 700; color: var(--teal); }
.class__place {
  margin: .8rem 0 1.4rem; display: inline-flex; align-items: center; gap: .35rem;
  font-size: var(--fs-class-place); font-weight: 700; color: var(--teal);
}
.class__go {
  margin-top: auto; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: var(--gold); color: var(--navy); align-self: center;
  transition: transform .5s var(--ease), background-color .3s, color .3s;
}
.class__go svg { width: 22px; height: 22px; }
.class__link:hover .class__go, .class__link:focus-visible .class__go { transform: rotate(45deg); background: var(--navy); color: var(--gold); }

/* ---------- Why families choose LMAC ---------- */
.why { background: var(--navy); color: #fff; padding: clamp(3.5rem, 7vw, 6rem) 0; }
.why__grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1.12fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.why__title {
  margin-top: 1.1rem; font-family: var(--font-head); font-weight: 900; line-height: 1.08; letter-spacing: -.01em;
  font-size: var(--fs-why-title); text-wrap: balance;
}
.why__title span { display: block; color: var(--gold); white-space: nowrap; }

.stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--panel); border-radius: 30px; overflow: hidden;
}
.stat { padding: clamp(1.4rem, 3vw, 2.4rem); }
.stat:nth-child(odd) { border-right: 1px solid var(--panel-line); }
.stat:nth-child(-n+2) { border-bottom: 1px solid var(--panel-line); }
.stat__num {
  font-family: var(--font-head); font-weight: 800; line-height: 1.1; color: var(--gold);
  font-size: var(--fs-stat-number); text-wrap: balance;
}
.stat__label { margin-top: .55rem; color: rgba(255, 255, 255, .85); font-size: var(--fs-stat-label); }

/* ---------- Testimonials ---------- */
.reviews { background: var(--cyan); padding: clamp(3.5rem, 7vw, 6rem) 0; }
.reviews .eyebrow { margin-bottom: .7rem; }

.review-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem);
  max-width: 1000px; margin: clamp(2rem, 4vw, 3rem) auto 0;
}
.review { display: flex; }
.review__card {
  width: 100%; background: #fff; border-radius: 26px; padding: 2.1rem 2rem 2rem; text-align: center;
  box-shadow: 0 10px 30px rgba(13, 49, 75, .09);
  transition: transform .45s var(--ease), box-shadow .45s;
}
.review__card:hover { transform: translateY(-6px); box-shadow: 0 24px 46px rgba(13, 49, 75, .15); }
.stars { display: flex; justify-content: center; gap: .25rem; margin-bottom: 1.1rem; }
.stars svg { width: 28px; height: 28px; fill: #F5B301; }
.review blockquote p { font-size: var(--fs-review-text); line-height: 1.7; }
.review figcaption { margin-top: 1.4rem; font-family: var(--font-head); font-weight: 800; font-size: var(--fs-review-name); letter-spacing: .03em; }

/* ---------- Footer: navy card with an overhanging photo ---------- */
.site-footer { background: #fff; padding: clamp(4.5rem, 8vw, 7rem) 0 clamp(1.5rem, 3vw, 2.5rem); }

.footer__card {
  --overhang: clamp(0px, 4.5vw, 60px);
  position: relative; margin-left: var(--overhang);
  background: var(--footer-navy); color: rgba(255, 255, 255, .78);
  border-radius: 28px; box-shadow: 0 30px 70px rgba(8, 31, 48, .30);
  padding: clamp(1.75rem, 3.2vw, 2.75rem) clamp(1.5rem, 3.5vw, 3rem) clamp(1.25rem, 2.4vw, 1.75rem) calc(24% + 3rem);
}

.footer__photo {
  position: absolute; z-index: 1; top: -2.75rem; bottom: 2.25rem;
  left: calc(var(--overhang) * -1); width: calc(24% + var(--overhang));
  border-radius: 22px; overflow: hidden; background: #c7d3da;
  box-shadow: 0 26px 50px rgba(0, 0, 0, .30);
}
.footer__photo > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.footer__badge {
  position: absolute; left: .85rem; bottom: .85rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  padding: .55rem .8rem .5rem; background: #fff; border-radius: 16px;
  color: var(--navy); font-weight: 700; font-size: var(--fs-footer-badge); line-height: 1.2;
}
.footer__badge img { height: 42px; width: auto; }

.footer__cta {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .35rem .35rem .35rem 1.6rem; border: 1.5px solid rgba(255, 255, 255, .8); border-radius: 999px;
}
.footer__cta p { color: #fff; font-weight: 500; font-size: var(--fs-footer-cta); }
.footer__cta .btn { padding: .85rem 1.7rem; font-size: var(--fs-footer-button); white-space: nowrap; }

.footer__cols { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr) minmax(0, 1.3fr); gap: clamp(1.25rem, 2.5vw, 2.25rem); margin-top: 2.25rem; }
.footer__col { font-size: var(--fs-footer-text); }
.footer__col h3 { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-footer-title); color: var(--gold); }
.footer__sub { margin: .1rem 0 .7rem; font-size: var(--fs-footer-sub); color: rgba(255, 255, 255, .6); }
.footer__col:last-child h3 { margin-bottom: .7rem; }
.footer__col p { margin-bottom: .35rem; overflow-wrap: break-word; }
.footer__col:last-child .link { font-size: var(--fs-footer-email); }
.footer__col address { font-style: normal; margin-bottom: .5rem; white-space: nowrap; }

.link {
  color: #fff; font-weight: 500; text-decoration: none; padding-bottom: 2px;
  background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 2px no-repeat;
  transition: background-size .35s var(--ease), color .25s;
}
.link:hover { background-size: 100% 2px; color: var(--gold); }
.footer__col address + .link { font-weight: 700; }

.footer__bar {
  margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, .16);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  font-size: var(--fs-footer-small); color: rgba(255, 255, 255, .6);
}
.footer__social a {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  color: #fff; border: 1.5px solid rgba(255, 255, 255, .35);
  transition: background-color .3s, color .3s, border-color .3s, transform .3s var(--ease);
}
.footer__social a:hover { background: var(--gold); border-color: var(--gold); color: var(--footer-navy); transform: translateY(-3px); }
.footer__social .icon { width: 19px; height: 19px; }

/* ---------- Scroll reveal ---------- */
.js .reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Photos scale gently into place as their card appears */
.js .class:not(.is-visible) .class__frame img { transform: scale(1.18); }

/* Stars pop in one after another */
.js .stars svg { opacity: 0; transform: scale(.4) rotate(-18deg); }
.js .review.is-visible .stars svg {
  opacity: 1; transform: none;
  transition: opacity .4s, transform .6s var(--ease);
  transition-delay: calc(var(--i, 0) * 110ms + .35s + var(--s, 0) * 70ms);
}
.stars svg:nth-child(2) { --s: 1; } .stars svg:nth-child(3) { --s: 2; }
.stars svg:nth-child(4) { --s: 3; } .stars svg:nth-child(5) { --s: 4; }

/* ---------- Keyframes ---------- */
@keyframes roll-up { from { transform: translateY(115%); } to { transform: translateY(0); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes float { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(0, 22px, 0) scale(1.04); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes marquee { to { transform: translateX(calc(-50% - var(--gap) / 2)); } }

/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
  .nav-toggle { display: block; }

  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-top: 1px solid rgba(13, 49, 75, .1);
    box-shadow: 0 24px 34px rgba(13, 49, 75, .14);
    padding: .5rem clamp(1rem, 3vw, 2rem) 1.25rem;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .3s, transform .35s var(--ease), visibility 0s .35s;
  }
  .site-nav.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav li {
    opacity: 0; transform: translateY(8px);
    transition: opacity .4s, transform .4s var(--ease); transition-delay: 0s;
  }
  .site-nav.is-open li { opacity: 1; transform: none; transition-delay: calc(var(--n) * 45ms + .06s); }
  .site-nav a { display: block; padding: .9rem .25rem; font-size: var(--fs-menu); border-bottom: 1px solid rgba(13, 49, 75, .08); }
  .site-nav a::after { display: none; }

  .class { flex-basis: calc((100% - var(--gap) * 2) / 3); }
  .why__grid { grid-template-columns: 1fr; }

  /* Footer: photo moves to the top of the card */
  .footer__card { margin-left: 0; padding: 1.25rem 1.5rem 1.25rem; }
  .footer__photo {
    position: relative; inset: auto; width: auto; height: clamp(170px, 30vw, 240px);
    margin: -3.25rem 0 1.5rem;
  }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__col address { white-space: normal; }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  :root { --header-h: 68px; }
  .brand img { height: 48px; }
  .is-scrolled .brand img { height: 42px; }

  .hero { padding-inline: 1rem; }
  .hero__actions { flex-direction: column; align-items: stretch; max-width: 320px; margin-inline: auto; }
  .hero__orb--teal { width: 110px; top: 3%; right: -12vw; }
  .hero__orb--gold { width: 100px; left: -10vw; bottom: 1%; }
  .marquee.is-ready .marquee__track { animation-duration: 36s; }

  .class-grid { --gap: .75rem; }
  .class { flex-basis: calc((100% - var(--gap)) / 2); }
  .class__link { padding: .6rem .6rem 1.1rem; border-radius: 22px; }
  .class__photo::before { border-radius: 18px; transform: translate(-6px, -6px); }
  .class__frame { border-radius: 16px; }
  .class__name { margin-top: 1rem; }
  .class__place { margin-bottom: 1rem; }
  .class__go { width: 44px; height: 44px; }
  .class__go svg { width: 18px; height: 18px; }

  .stat { padding: 1.15rem 1rem; }
  .review-grid { grid-template-columns: 1fr; }
  .review__card { padding: 1.8rem 1.35rem 1.6rem; }

  .footer__card { padding: 1.1rem 1.25rem 1.25rem; border-radius: 24px; }
  .footer__cta { flex-direction: column; border-radius: 26px; padding: 1.1rem; text-align: center; }
  .footer__cta .btn { width: 100%; }
  .footer__cols { grid-template-columns: 1fr; }
  .footer__bar { flex-direction: row; }
}

@media (max-width: 340px) {
  .class { flex-basis: 100%; }
}

/* Touch screens have no hover, so skip the lift that would otherwise stick after a tap */
@media (hover: none) {
  .class__link:hover { transform: none; }
  .review__card:hover { transform: none; }
}

/* ==========================================================
   INNER PAGES: shared banner (used by About and the pages to come)
   ========================================================== */
.page-hero {
  position: relative; overflow: hidden; color: #fff; text-align: center;
  padding: clamp(2.25rem, 5vw, 3.75rem) 1.25rem clamp(2.4rem, 5vw, 3.9rem);
  background:
    radial-gradient(38% 60% at 16% 30%, rgba(247, 199, 74, .13), transparent 70%),
    linear-gradient(112deg, #112F3A 0%, #0F3D4E 38%, #2A5865 74%, #40636D 100%);
}
.page-hero .hero__orb--teal { width: clamp(110px, 13vw, 250px); right: -5vw; top: -18%; }
.page-hero .hero__orb--gold { width: clamp(90px, 11vw, 210px); left: -4vw; bottom: -22%; }
.page-hero__content { position: relative; z-index: 1; width: min(900px, 100%); margin-inline: auto; }
.page-hero__title {
  font-family: var(--font-head); font-weight: 900; line-height: 1.05; letter-spacing: -.01em;
  font-size: var(--fs-page-title); text-shadow: 0 4px 24px rgba(0, 0, 0, .25);
}
.page-hero__sub {
  margin: .7rem auto 0; max-width: 32em; font-weight: 500; line-height: 1.45;
  font-size: var(--fs-page-sub);
  animation: fade-up .9s var(--ease) .5s both;
}
.page-hero__rule {
  display: block; width: 76px; height: 5px; margin: 1.25rem auto 0; border-radius: 3px; background: var(--gold);
  animation: rule-in .9s var(--ease) .8s both;
}
@keyframes rule-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.eyebrow--left { text-align: left; }
.section-title--left { text-align: left; }

/* ==========================================================
   PAGE: ABOUT
   ========================================================== */

/* ---- Our story & mission ---- */
.story { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.story__grid {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.story__photo {
  position: relative; isolation: isolate; width: 100%; max-width: 488px;
  aspect-ratio: 488 / 650;          /* same shape as the photo, so nothing is cropped or stretched */
}
/* Keep the photo in view while the text scrolls, only when the screen is big enough to fit it */
@media (min-width: 1001px) and (min-height: 780px) {
  .story__photo { position: sticky; top: calc(var(--header-h) + 1.75rem); }
}
.story__photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 32px;
  background: var(--cyan-frame); transform: translate(-14px, 14px);
}
.story__frame { width: 100%; height: 100%; border-radius: 30px; overflow: hidden; box-shadow: 0 24px 54px rgba(13, 49, 75, .16); }
.story__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); }

.story__lead {
  margin-top: 1.5rem; padding-left: 1.25rem; border-left: 4px solid var(--gold);
  font-size: var(--fs-story-lead); line-height: 1.5; font-weight: 500; text-wrap: balance;
}
.story__body { font-size: var(--fs-story-text); margin-top: 1.75rem; display: grid; gap: 1.15rem; max-width: 42em; }
.story__body p { color: var(--ink-soft); line-height: 1.8; }

/* ---- Core values (navy band) ---- */
.values { background: var(--navy); color: #fff; padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.values .section-title { color: #fff; }
.values__grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem); margin-top: clamp(2rem, 4vw, 3.25rem);
}
.value { text-align: center; }
.value__icon {
  display: grid; place-items: center; width: 92px; height: 92px; margin: 0 auto 1.1rem; border-radius: 50%;
  background: rgba(255, 255, 255, .07); border: 1.5px solid rgba(255, 255, 255, .2); color: var(--gold);
  transition: transform .45s var(--ease), background-color .3s, color .3s, border-color .3s;
}
.value__icon svg {
  width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.value h3 { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-value-title); }

/* ---- Meet the team ---- */
.team { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.team .eyebrow { margin-bottom: .7rem; }
/* Featured CEO card */
.lead-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  max-width: 1080px; margin: clamp(2.25rem, 5vw, 3.75rem) auto 0; padding: clamp(1.75rem, 4.5vw, 3.25rem);
  border-radius: 32px; color: #fff;
  background: radial-gradient(120% 90% at 100% 0%, #1A4C6E 0%, var(--navy) 62%);
  box-shadow: 0 26px 60px rgba(13, 49, 75, .22);
}
.lead-card__ring {
  position: absolute; z-index: -1; right: -90px; bottom: -110px; width: 300px; aspect-ratio: 1; border-radius: 50%;
  border: 38px solid var(--teal); opacity: .45;
}
.lead-card__role { color: var(--gold); font-weight: 700; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; }
.lead-card__name {
  margin-top: .55rem; font-family: var(--font-head); font-weight: 900; line-height: 1.02; color: #fff;
  font-size: var(--fs-lead-name);
}
.lead-card .person__chips li { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .18); }
.lead-card .person__chips svg { color: var(--gold); }
.lead-card__bio {
  position: relative; padding-left: 1.4rem; border-left: 4px solid var(--gold);
  font-size: var(--fs-lead-bio); line-height: 1.7; color: rgba(255, 255, 255, .88);
}

/* Team grid */
.people {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.75rem);
  max-width: 1080px; margin: clamp(1.25rem, 2.6vw, 1.75rem) auto 0;
}
.person {
  position: relative; display: flex; flex-direction: column; padding: 1.9rem 1.6rem 1.75rem;
  background: #fff; border-radius: 24px; border: 1px solid rgba(13, 49, 75, .07);
  box-shadow: 0 16px 38px rgba(13, 49, 75, .08); overflow: hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.person::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--accent, var(--teal)); }
.person__role { color: var(--accent, var(--teal)); font-weight: 700; font-size: var(--fs-member-role); line-height: 1.4; text-wrap: balance; filter: brightness(.82); }
.person__name {
  position: relative; margin-top: .45rem; padding-bottom: .75rem;
  font-family: var(--font-head); font-weight: 800; line-height: 1.15; font-size: var(--fs-member-name); color: var(--navy);
}
.person__name::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 4px; border-radius: 2px;
  background: var(--gold); transition: width .5s var(--ease);
}
.person__chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.person__chips li {
  display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .8rem .38rem .65rem;
  border-radius: 999px; background: var(--cyan-frame); border: 1px solid transparent;
  color: var(--navy); font-size: .84rem; font-weight: 700; line-height: 1.2;
}
.person__chips svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--teal); }
.person__bio { margin-top: 1rem; color: var(--ink-soft); font-size: var(--fs-member-bio); line-height: 1.7; }

/* ---- Classroom setting (light cyan band) ---- */
.setting { background: var(--cyan); padding: clamp(3.5rem, 7vw, 6rem) 0; }
.setting__grid {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.setting__lead {
  margin: 1.2rem 0 1.9rem; max-width: 24em; color: var(--ink-soft);
  font-size: var(--fs-setting-lead); line-height: 1.55;
}
.setting__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.9rem, 2vw, 1.5rem); align-items: start; }
.setting__photo { aspect-ratio: 488 / 650; border-radius: 28px; overflow: hidden; box-shadow: 0 20px 46px rgba(13, 49, 75, .16); }
.setting__photo--offset { margin-top: clamp(1.75rem, 4.5vw, 3.5rem); }
.setting__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); }

/* Hover effects only where a mouse exists, so nothing sticks after a tap */
@media (hover: hover) {
  .value:hover .value__icon { transform: translateY(-7px); background: var(--gold); border-color: var(--gold); color: var(--navy); }
  .person:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(13, 49, 75, .14); }
  .person:hover .person__name::after { width: 76px; }
  .setting__photo:hover img, .story__photo:hover .story__frame img { transform: scale(1.05); }
}

/* Photos scale gently into place as they appear */
.js .setting__photo:not(.is-visible) img,
.js .story__photo:not(.is-visible) .story__frame img { transform: scale(1.16); }

/* ---- About: tablet ---- */
@media (max-width: 1000px) {
  .story__grid, .setting__grid { grid-template-columns: 1fr; }
  .story__photo { width: calc(100% - 14px); margin-left: max(14px, calc((100% - 488px) / 2 + 7px)); }   /* centered on tablets */
  .values__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2rem; }
  .lead-card { grid-template-columns: 1fr; }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setting__photos { max-width: 620px; }
}

/* ---- About: mobile ---- */
@media (max-width: 640px) {
  .values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .value__icon { width: 78px; height: 78px; }
  .value__icon svg { width: 35px; height: 35px; }
  .people { grid-template-columns: 1fr; }
  .lead-card { border-radius: 24px; }
  .lead-card__ring { width: 200px; border-width: 26px; right: -70px; bottom: -80px; }
  .person { padding: 1.6rem 1.35rem 1.5rem; border-radius: 20px; }
  .setting__photo { border-radius: 20px; }
}

/* ==========================================================
   PAGE: OUR CLASSROOMS
   Text sizes for this page are in the TEXT SIZES block at the top of this file.
   ========================================================== */

/* ---- Video frame ---- */
.tour { padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.tour .eyebrow { margin-bottom: .7rem; }

.video-frame { position: relative; isolation: isolate; max-width: 1000px; margin: clamp(2rem, 4vw, 3rem) auto 0; }
.video-frame::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 38px;
  background: var(--cyan-frame); transform: translate(-16px, 16px);
}
.video-frame__screen {
  position: relative; aspect-ratio: 16 / 9; border-radius: 34px; overflow: hidden;
  background: var(--navy); box-shadow: 0 30px 70px rgba(13, 49, 75, .24);
}
.video-frame__video, .video-frame__screen iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000;
}
.video-frame__video { object-fit: contain; opacity: 0; }
.has-video .video-frame__video { opacity: 1; }

/* "coming soon" screen, shown until a video file is found */
.video-frame__placeholder {
  position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .3rem; padding: 1.5rem; text-align: center; color: #fff;
  background:
    radial-gradient(38% 60% at 16% 30%, rgba(247, 199, 74, .13), transparent 70%),
    linear-gradient(112deg, #112F3A 0%, #0F3D4E 38%, #2A5865 74%, #40636D 100%);
}
.has-video .video-frame__placeholder { display: none; }
.video-frame__placeholder .hero__orb--teal { width: clamp(90px, 15vw, 200px); right: -3vw; top: -14%; }
.video-frame__placeholder .hero__orb--gold { width: clamp(80px, 12vw, 170px); left: -3vw; bottom: -16%; }
.video-frame__placeholder > :not(.hero__orb) { position: relative; z-index: 1; }

.video-frame__icon {
  position: relative; display: block; flex: none; width: clamp(66px, 9vw, 96px); aspect-ratio: 1; border-radius: 50%;
  background: var(--gold); color: var(--navy); margin-bottom: .6rem;
  animation: ring 2.8s ease-out infinite;
}
.video-frame__icon svg {
  position: absolute; inset: 0; margin: auto; width: 42%; height: 42%; fill: currentColor; translate: 6% 0;
}
.video-frame__title { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-video-title); line-height: 1.15; }
.video-frame__note { color: rgba(255, 255, 255, .8); font-size: var(--fs-video-note); }

/* big play button, shown once a video file is found */
.video-frame__play {
  position: absolute; inset: 0; display: none; place-items: center; border: 0; padding: 0; cursor: pointer;
  background: rgba(6, 32, 38, .28); transition: background-color .3s;
}
.has-video:not(.is-playing) .video-frame__play { display: grid; }
.video-frame__play:hover { background: rgba(6, 32, 38, .12); }
.video-frame__play .video-frame__icon { margin: 0; transition: transform .4s var(--ease); }
.video-frame__play:hover .video-frame__icon { transform: scale(1.1); }

@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(247, 199, 74, .5); } 70%, 100% { box-shadow: 0 0 0 24px rgba(247, 199, 74, 0); } }

/* ---- Classroom cards ---- */
.rooms { --room-cream: #FFF6DE; padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 6.5rem); }
.rooms .eyebrow { margin-bottom: .7rem; }

.rooms__grid {
  --gap: clamp(1.25rem, 2.6vw, 2.25rem);
  display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(2rem, 4vw, 3rem) var(--gap);
  margin-top: clamp(2.25rem, 5vw, 3.75rem);
}
.room { flex: 0 0 calc((100% - var(--gap) * 2) / 3); max-width: 410px; display: flex; scroll-margin-top: 3rem; }   /* keeps the card clear of the sticky menu when a link jumps to it */

.room__card {
  position: relative; display: flex; flex-direction: column; width: 100%; overflow: hidden;
  border-radius: 32px; background: var(--room-cream); box-shadow: 0 12px 34px rgba(13, 49, 75, .09);
  transition: transform .5s var(--ease), box-shadow .5s;
}
.room:target .room__card { outline: 3px solid var(--accent); outline-offset: 5px; }

.room__photo { position: relative; z-index: 0; aspect-ratio: 488 / 650; overflow: hidden; background: var(--cyan-frame); }
.room__photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 30%);
  transition: transform 1.3s var(--ease);
}

/* the cream panel slides up over the bottom of the photo, with a soft wave along its top edge */
.room__body {
  position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center;
  margin-top: -1.4rem; padding: 0 clamp(1.25rem, 2.4vw, 1.9rem) clamp(1.5rem, 2.6vw, 2rem);
  background: var(--room-cream); text-align: center;
}
.room__wave {
  position: absolute; left: 0; right: 0; top: -33px; height: 34px; background: var(--room-cream); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V16C45 -4 95 -4 145 12s105 18 155-2 70-10 100 2V34z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V16C45 -4 95 -4 145 12s105 18 155-2 70-10 100 2V34z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.room__age {
  position: relative; z-index: 2; margin: -1.35rem 0 .95rem; padding: .5rem 1.2rem; border-radius: 999px;
  background: var(--gold); color: var(--navy); box-shadow: 0 8px 20px rgba(13, 49, 75, .16);
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-room-age); line-height: 1.2; white-space: nowrap;
  transition: transform .5s var(--ease);
}
.room__group { font-size: var(--fs-room-group); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.room__title {
  position: relative; margin-top: .3rem; padding-bottom: .85rem;
  font-family: var(--font-head); font-weight: 900; line-height: 1.1; letter-spacing: -.005em;
  font-size: var(--fs-room-title); color: var(--navy);
}
.room__title::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 44px; height: 4px; border-radius: 2px;
  background: var(--accent); translate: -50% 0; transition: width .5s var(--ease);
}
.room__text { margin-top: .95rem; font-size: var(--fs-room-text); line-height: 1.7; color: var(--ink-soft); }

.room__foot { margin-top: auto; padding-top: 1.35rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.room__place { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: var(--fs-room-place); color: var(--teal); }
.room__place .icon { fill: var(--accent); }
.room__cta { padding: .9rem 1.6rem; font-size: var(--fs-room-button); }

/* ---- Life in our classrooms ---- */
.moments { background: var(--cyan); padding: clamp(3.5rem, 7vw, 6rem) 0; }
.moments .eyebrow { margin-bottom: .7rem; }
/* Masonry style gallery: each photo keeps its own shape, nothing is cropped. */
.moments__grid {
  --gap: clamp(1rem, 2.2vw, 1.75rem);
  columns: 3; column-gap: var(--gap); max-width: 1100px; margin: clamp(2rem, 4.5vw, 3.5rem) auto 0;
}
.moment { break-inside: avoid; margin-bottom: var(--gap); border-radius: 24px; overflow: hidden; box-shadow: 0 18px 40px rgba(13, 49, 75, .15); }
.moment img { display: block; width: 100%; height: auto; transition: transform 1.3s var(--ease); }

/* ---- Our locations ---- */
.locations { padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 6.5rem); }
.locations .eyebrow { margin-bottom: .7rem; }
.locations__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch;
  gap: clamp(1.25rem, 3vw, 2.25rem); max-width: 1120px; margin: clamp(2.25rem, 5vw, 3.5rem) auto 0;
}
.loc { display: flex; }
.loc__card {
  display: flex; flex-direction: column; width: 100%;
  padding: clamp(1.5rem, 3vw, 2.4rem); border-radius: 32px; background: #fff;
  border: 1px solid rgba(13, 49, 75, .07); box-shadow: 0 14px 40px rgba(13, 49, 75, .08);
  transition: transform .5s var(--ease), box-shadow .5s;
}

.loc__head { display: flex; align-items: center; gap: .95rem; }
.loc__pin {
  display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%;
  background: var(--gold); color: var(--navy);
}
.loc__pin svg { width: 24px; height: 24px; fill: currentColor; }
.loc__name { font-family: var(--font-head); font-weight: 900; line-height: 1.1; font-size: var(--fs-loc-name); color: var(--navy); }

.loc__facts { margin: 1.6rem 0 0; display: grid; gap: .95rem; }
.loc__facts > div { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: .2rem 1rem; align-items: baseline; }
.loc__facts dt { font-size: var(--fs-loc-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.loc__facts dd { margin: 0; font-size: var(--fs-loc-text); font-weight: 500; line-height: 1.5; color: var(--navy); }
.loc__facts address { font-style: normal; }
.nowrap { white-space: nowrap; }

.loc__tiles {
  margin-top: 1.6rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-radius: 24px; background: #F3F9FA; padding: .4rem;
}
.loc__tile { display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: 1.1rem .6rem; text-align: center; }
.loc__tile + .loc__tile { border-left: 1px solid rgba(13, 49, 75, .09); }
.loc__ico { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--teal); box-shadow: 0 4px 12px rgba(13, 49, 75, .08); }
.loc__ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.loc__tile-text { display: flex; flex-direction: column; gap: .2rem; }
.loc__tile-label { font-size: var(--fs-loc-label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.loc__tile-value { font-size: var(--fs-loc-tile); font-weight: 700; line-height: 1.3; color: var(--navy); text-wrap: balance; }

.loc__list { margin-top: 1.6rem; display: grid; gap: .8rem; }
.loc__list li { display: flex; align-items: flex-start; gap: .75rem; font-size: var(--fs-loc-list); line-height: 1.5; color: var(--navy); }
.loc__check {
  flex: none; box-sizing: border-box; width: 22px; height: 22px; margin-top: .12em; padding: 4px; border-radius: 50%;
  background: var(--teal); color: #fff; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}

.loc__actions { margin-top: auto; padding-top: 1.9rem; }
.loc__cta { padding: .9rem 1.6rem; font-size: var(--fs-loc-button); }

.btn--outline { background: transparent; color: var(--navy); }
.btn--outline:hover { background: var(--gold); box-shadow: 0 12px 28px rgba(247, 199, 74, .4); }

/* soft entrance: details ease in one after another once the card appears */
.loc__tile, .loc__list li { transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--n, 0) * 90ms + .3s); }
.js .loc:not(.is-visible) .loc__tile, .js .loc:not(.is-visible) .loc__list li { opacity: 0; transform: translateY(12px); }

@media (hover: hover) {
  .loc__card:hover { transform: translateY(-6px); box-shadow: 0 30px 58px rgba(13, 49, 75, .14); }
}

/* ---- Locations: tablet and phone ---- */
@media (max-width: 1000px) {
  .locations__grid { grid-template-columns: 1fr; max-width: 640px; }
}
@media (max-width: 640px) {
  .loc__card { border-radius: 26px; }
  .loc__facts > div { grid-template-columns: 1fr; gap: .15rem; }
  .loc__tiles { grid-template-columns: 1fr; padding: .25rem .5rem; }
  .loc__tile { flex-direction: row; text-align: left; gap: 1rem; padding: .85rem .35rem; }
  .loc__tile + .loc__tile { border-left: 0; border-top: 1px solid rgba(13, 49, 75, .09); }
  .loc__cta { width: 100%; }
}

/* hover effects only where a mouse exists */
@media (hover: hover) {
  .room__card:hover { transform: translateY(-8px); box-shadow: 0 30px 58px rgba(13, 49, 75, .17); }
  .room__card:hover .room__photo img { transform: scale(1.06); }
  .room__card:hover .room__title::after { width: 84px; }
  .room__card:hover .room__age { transform: translateY(-3px); }
  .moment:hover img { transform: scale(1.06); }
}

/* soft entrance: photos ease in, the age badge pops in after the card appears */
.js .room:not(.is-visible) .room__photo img,
.js .moment:not(.is-visible) img { transform: scale(1.16); }
.js .room:not(.is-visible) .room__age { opacity: 0; }
.js .room.is-visible .room__age { animation: badge-in .7s var(--ease) .35s backwards; }
@keyframes badge-in { from { opacity: 0; transform: translateY(10px) scale(.85); } to { opacity: 1; transform: none; } }

/* ---- Classrooms: tablet ---- */
@media (max-width: 1000px) {
  .room { flex-basis: calc((100% - var(--gap)) / 2); max-width: 420px; }
}

/* ---- Classrooms: mobile ---- */
@media (max-width: 640px) {
  .video-frame::before { border-radius: 26px; transform: translate(-9px, 9px); }
  .video-frame__screen { border-radius: 22px; }
  .room { flex-basis: 100%; max-width: 440px; }
  .moments__grid { columns: 2; --gap: .75rem; }
  .moment { border-radius: 18px; }
}

/* ==========================================================
   PAGE: EMPLOYMENT
   Text sizes for this page are in the TEXT SIZES block at the top of this file.
   The "Why Join Us" section reuses the .values styles already defined for the About page.
   ========================================================== */

.careers { padding: clamp(3.5rem, 7vw, 6rem) 0; overflow: visible; }
.careers__grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2.5rem, 6vw, 5rem); align-items: center;
}

.careers__lead {
  margin-top: 1.4rem; padding-left: 1.25rem; border-left: 4px solid var(--gold);
  font-size: var(--fs-careers-lead); line-height: 1.55; font-weight: 500; text-wrap: balance;
}
.careers__text-body { margin-top: 1.35rem; max-width: 34em; font-size: var(--fs-careers-text); line-height: 1.8; color: var(--ink-soft); }
.careers__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.careers .btn--outline { border-color: var(--teal); color: var(--teal); }
.careers .btn--outline:hover { background: var(--teal); color: #fff; border-color: var(--teal); }

.careers__photo { position: relative; isolation: isolate; width: 100%; max-width: 420px; margin-inline: auto; aspect-ratio: 3 / 4; }
.careers__photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 32px;
  background: var(--cyan-frame); transform: translate(14px, -14px);
}
/* "Now Hiring!" type panel (replaces the old photo) */
.careers__photo { container-type: inline-size; }
.hiring {
  position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 30px;
  display: flex; flex-direction: column; justify-content: center; padding: 0 11cqi;
  background: radial-gradient(120% 80% at 85% 10%, #1A4C6E 0%, var(--navy) 60%);
  box-shadow: 0 24px 54px rgba(13, 49, 75, .18); font-family: var(--font-head); font-weight: 900; line-height: .88;
}
.hiring__ring {
  position: absolute; right: -22cqi; bottom: -22cqi; width: 70cqi; aspect-ratio: 1; border-radius: 50%;
  border: 9cqi solid var(--teal); opacity: .55;
}
.hiring__dot {
  position: absolute; left: 11cqi; top: 11cqi; width: 4.5cqi; aspect-ratio: 1; border-radius: 50%;
  background: var(--gold); animation: hiring-pulse 2.6s ease-out infinite;
}
@keyframes hiring-pulse { 0% { box-shadow: 0 0 0 0 rgba(247, 199, 74, .55); } 70%, 100% { box-shadow: 0 0 0 4cqi rgba(247, 199, 74, 0); } }
.hiring__now { position: relative; font-size: 22cqi; color: #fff; letter-spacing: -.01em; }
.hiring__word { position: relative; margin-top: .06em; font-size: 23cqi; white-space: nowrap; color: var(--gold); letter-spacing: -.03em; }
.hiring__bang { display: inline-block; color: #fff; transform: rotate(10deg) translateY(-.02em); margin-left: .02em; }
.careers__frame { width: 100%; height: 100%; border-radius: 30px; overflow: hidden; box-shadow: 0 24px 54px rgba(13, 49, 75, .18); }
.careers__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }

.careers__badge {
  position: absolute; left: -1.25rem; bottom: 1.6rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1.25rem;
  background: #fff; border-radius: 999px; box-shadow: 0 14px 30px rgba(13, 49, 75, .18);
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-careers-badge); color: var(--navy);
  white-space: nowrap;
}
.careers__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); animation: pulse 2.6s ease-out infinite; }
.careers__chip {
  position: absolute; right: -.9rem; top: 1.6rem; z-index: 2;
  padding: .55rem 1.05rem; background: var(--navy); color: var(--gold); border-radius: 999px;
  box-shadow: 0 14px 30px rgba(13, 49, 75, .22); font-weight: 700; font-size: var(--fs-careers-chip); white-space: nowrap;
}

/* ---- Apply form ---- */
.apply { background: var(--cyan); padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 6.5rem); }

.apply__card {
  max-width: 760px; margin: clamp(2.25rem, 5vw, 3.25rem) auto 0; padding: clamp(1.75rem, 4vw, 3rem);
  background: #fff; border-radius: 32px; box-shadow: 0 24px 60px rgba(13, 49, 75, .12);
  display: grid; gap: 1.4rem;
}
.apply__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.field { display: grid; gap: .5rem; }
.field label { font-weight: 700; font-size: var(--fs-field-label); color: var(--navy); }
.field label span { font-weight: 500; color: var(--ink-soft); }

.field input, .field select, .field textarea {
  width: 100%; padding: .85rem 1.05rem; border-radius: 14px; border: 1.5px solid rgba(13, 49, 75, .16);
  background: var(--cream); color: var(--navy); font-family: var(--font-body); font-size: var(--fs-field-input);
  transition: border-color .25s, box-shadow .25s;
}
.field textarea { resize: vertical; min-height: 8.5rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(31, 102, 112, .14);
}
.field select { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 18px; padding-right: 2.6rem;
}

.apply__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; margin-top: .3rem; }
.apply__note { color: var(--ink-soft); font-size: var(--fs-apply-note); }

/* ---- Employment: tablet ---- */
@media (max-width: 1000px) {
  .careers__grid { grid-template-columns: 1fr; }
  .careers__photo { order: -1; max-width: 360px; }
}

/* ---- Employment: mobile ---- */
@media (max-width: 640px) {
  .careers__photo { max-width: 300px; }
  .careers__badge { left: 0; bottom: -1.1rem; font-size: .88rem; padding: .6rem 1.05rem; }
  .careers__chip { right: -.4rem; top: -1rem; font-size: .82rem; padding: .5rem .9rem; }
  .careers__actions .btn { width: 100%; justify-content: center; }
  .field-row { grid-template-columns: 1fr; gap: 1.4rem; }
  .apply__card { border-radius: 24px; padding: 1.5rem 1.25rem; }
  .apply__foot { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ==========================================================
   PAGE: CONTACT
   Text sizes for this page are in the TEXT SIZES block at the top of this file.
   The "Send Us A Message" form reuses the .apply / .field styles built for the Employment page.
   ========================================================== */

/* ---- Let's Talk ---- */
.contact-intro { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.contact-intro__grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr);
  gap: clamp(2.5rem, 6vw, 5rem); align-items: center;
}
.contact-intro__lead { margin-top: 1.3rem; max-width: 32em; font-size: var(--fs-contact-lead); line-height: 1.55; color: var(--ink-soft); }

.contact-quick { margin-top: 1.9rem; display: grid; gap: 1.1rem; }
.contact-quick__row { display: flex; align-items: center; gap: 1rem; }
.contact-quick__icon {
  display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%;
  background: var(--cyan-frame); color: var(--teal);
}
.contact-quick__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.contact-quick__text { display: flex; flex-direction: column; gap: .15rem; }
.contact-quick__label { font-size: var(--fs-quick-label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.contact-quick__value { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-quick-value); color: var(--navy); text-decoration: none; }
.contact-quick__value:hover { color: var(--teal); }

.contact-intro__chip {
  margin-top: 1.6rem; display: inline-flex; align-items: center; gap: .55rem;
  padding: .6rem 1.1rem; border-radius: 999px; background: var(--cyan-frame);
  font-weight: 700; font-size: var(--fs-chip); color: var(--navy);
}
.contact-intro__chip .icon { width: 18px; height: 18px; fill: var(--teal); }
.contact-intro__actions { margin-top: 1.9rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.contact-intro .btn--outline { border-color: var(--teal); color: var(--teal); }
.contact-intro .btn--outline:hover { background: var(--teal); color: #fff; border-color: var(--teal); }

/* ---- CEO photo card ---- */
.contact-photo { position: relative; isolation: isolate; width: 100%; max-width: 340px; margin-inline: auto; }
.contact-photo__frame {
  position: relative; isolation: isolate; aspect-ratio: 1120 / 1404; border-radius: 30px; overflow: hidden;
  box-shadow: 0 24px 54px rgba(13, 49, 75, .18);
}
.contact-photo__frame::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 30px;
  background: var(--cyan-frame); transform: translate(14px, -14px);
}
.contact-photo__frame img { width: 100%; height: 100%; object-fit: cover; }
.contact-photo__caption {
  margin: -1.6rem auto 0; position: relative; z-index: 2; width: calc(100% - 2rem); max-width: 260px;
  padding: .9rem 1.3rem; background: #fff; border-radius: 20px; text-align: center;
  box-shadow: 0 14px 32px rgba(13, 49, 75, .16);
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-photo-caption); color: var(--navy);
}
.contact-photo__caption span { display: block; margin-top: .2rem; font-family: var(--font-body); font-weight: 500; font-size: .85rem; color: var(--ink-soft); }

/* ---- Info cards: Hours, Policies, Meal Plans ---- */
.info-cards { padding: 0 0 clamp(3.5rem, 7vw, 6rem); }
.info-cards__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.1rem, 2.5vw, 2rem);
  max-width: 1100px; margin-inline: auto;
}
.info-card {
  padding: clamp(1.5rem, 3vw, 2.1rem); background: #fff; border-radius: 28px;
  border-top: 4px solid var(--accent); box-shadow: 0 12px 32px rgba(13, 49, 75, .08);
  transition: transform .5s var(--ease), box-shadow .5s;
}
.info-card__icon {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, white); color: var(--accent); margin-bottom: 1.1rem;
}
.info-card__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.info-card__title { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-info-title); color: var(--navy); }
.info-card__hours { margin-top: 1rem; font-size: var(--fs-info-text); line-height: 1.6; color: var(--ink-soft); }
.info-card__hours strong { color: var(--navy); }
.info-card__hours--closed { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid rgba(13, 49, 75, .08); }
.info-card__list { margin-top: 1rem; display: grid; gap: .7rem; }
.info-card__list li { display: flex; align-items: flex-start; gap: .65rem; font-size: var(--fs-info-text); line-height: 1.5; color: var(--navy); }
.info-card__check {
  flex: none; box-sizing: border-box; width: 20px; height: 20px; margin-top: .1em; padding: 4px; border-radius: 50%;
  background: var(--accent); color: #fff; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
@media (hover: hover) { .info-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(13, 49, 75, .14); } }

/* ---- Visit us / map ---- */
.visit { background: var(--cyan); padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 6.5rem); }
.visit__grid {
  margin-top: clamp(2.25rem, 5vw, 3.5rem); display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3rem); align-items: start;
}

.visit__photo { position: relative; isolation: isolate; }
.visit__photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 28px;
  background: #fff; transform: translate(-10px, 10px);
}
.visit__frame { border-radius: 26px; overflow: hidden; aspect-ratio: 954 / 790; box-shadow: 0 20px 46px rgba(13, 49, 75, .16); }
.visit__frame img { width: 100%; height: 100%; object-fit: cover; }
.visit__caption { margin-top: 1rem; text-align: center; font-weight: 700; font-size: var(--fs-visit-caption); color: var(--navy); }

.visit__panel { background: #fff; border-radius: 30px; padding: clamp(1.25rem, 2.5vw, 1.75rem); box-shadow: 0 20px 50px rgba(13, 49, 75, .12); }
.visit__tabs { display: flex; gap: .6rem; padding: .3rem; border-radius: 999px; background: var(--cyan-frame); }
.visit__tab {
  flex: 1; padding: .8rem 1rem; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-visit-tab); color: var(--ink-soft);
  transition: background-color .3s, color .3s, box-shadow .3s;
}
.visit__tab[aria-selected="true"] { background: var(--navy); color: var(--gold); box-shadow: 0 8px 18px rgba(13, 49, 75, .22); }

.visit__details { margin-top: 1.4rem; display: grid; gap: .75rem; }
.visit__address, .visit__meta { display: flex; align-items: center; gap: .65rem; font-size: var(--fs-visit-text); font-weight: 500; color: var(--navy); }
.visit__address .icon, .visit__meta .icon { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--teal); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.visit__meta a { color: var(--navy); text-decoration: none; }
.visit__meta a:hover { color: var(--teal); }
.visit__cta { margin-top: .4rem; align-self: start; }

.visit__map { margin-top: 1.4rem; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 10; box-shadow: 0 14px 30px rgba(13, 49, 75, .12); }
.visit__map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---- Contact: tablet ---- */
@media (max-width: 1000px) {
  .contact-intro__grid { grid-template-columns: 1fr; }
  .contact-photo { order: -1; max-width: 300px; }
  .info-cards__grid { grid-template-columns: 1fr; max-width: 480px; }
  .visit__grid { grid-template-columns: 1fr; }
  .visit__photo { max-width: 460px; margin-inline: auto; width: 100%; }
}

/* ---- Contact: mobile ---- */
@media (max-width: 640px) {
  .contact-intro__actions .btn, .visit__cta { width: 100%; justify-content: center; }
  .visit__tabs { flex-direction: column; border-radius: 20px; }
  .visit__tab { border-radius: 14px; }
}

/* ==========================================================
   PAGE: OUR FOUNDATION
   Text sizes for this page are in the TEXT SIZES block at the top of this file.
   ========================================================== */

/* ---- Our Roots ---- */
.roots { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.roots__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.roots__lead { margin-top: 1.3rem; max-width: 34em; font-size: var(--fs-roots-lead); line-height: 1.55; color: var(--ink-soft); }
.roots__list { margin-top: 1.6rem; display: grid; gap: 1rem; max-width: 36em; }
.roots__list li { display: flex; align-items: flex-start; gap: .75rem; font-size: var(--fs-roots-list); line-height: 1.6; color: var(--navy); }
.roots__list strong { font-family: var(--font-head); }
.roots__check {
  flex: none; box-sizing: border-box; width: 24px; height: 24px; margin-top: .1em; padding: 5px; border-radius: 50%;
  background: var(--teal); color: #fff; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.roots__photo { position: relative; isolation: isolate; width: 100%; max-width: 380px; margin-inline: auto; }
.roots__frame { position: relative; isolation: isolate; border-radius: 30px; overflow: hidden; box-shadow: 0 24px 54px rgba(13, 49, 75, .18); }
.roots__frame::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 30px; background: var(--cyan-frame); transform: translate(-14px, 14px); }
.roots__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- About + Vision + Mission ---- */
.foundation-about { padding: clamp(3rem, 6vw, 5rem) 0; }
.foundation-about__lead { max-width: 44em; margin: 1.3rem auto 0; text-align: center; font-size: var(--fs-about-lead); line-height: 1.55; color: var(--ink-soft); }

.vm-grid { margin: clamp(2.25rem, 5vw, 3.25rem) auto 0; max-width: 900px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }
.vm-card { padding: clamp(1.75rem, 3.5vw, 2.5rem); border-radius: 30px; }
.vm-card--gold { background: linear-gradient(180deg, #FFF6DE, #FFF9EC); border: 1px solid rgba(247, 199, 74, .35); }
.vm-card--teal { background: linear-gradient(180deg, #E8F4F3, #F2FAF9); border: 1px solid rgba(31, 102, 112, .22); }
.vm-card__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; margin-bottom: 1.1rem; box-shadow: 0 8px 20px rgba(13, 49, 75, .1); }
.vm-card--gold .vm-card__icon { color: #C8A035; }
.vm-card--teal .vm-card__icon { color: var(--teal); }
.vm-card__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vm-card h3 { font-family: var(--font-head); font-weight: 900; font-size: var(--fs-vm-title); color: var(--navy); }
.vm-card p { margin-top: .8rem; font-size: var(--fs-vm-text); line-height: 1.65; color: var(--navy); }

/* ---- Core Programs (navy band) ---- */
.programs-band { background: var(--navy); color: #fff; padding: clamp(3.5rem, 7vw, 6rem) 0; }
.programs-band .eyebrow--gold { margin-bottom: .5rem; }
.programs-band__grid { margin-top: clamp(2.25rem, 5vw, 3.5rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.1rem, 2.5vw, 1.75rem); }
.pb-card { padding: clamp(1.5rem, 3vw, 2rem); border-radius: 26px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); transition: transform .5s var(--ease), background-color .4s; }
.pb-card__icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(247, 199, 74, .14); color: var(--gold); margin-bottom: 1.1rem; }
.pb-card__icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pb-card h3 { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-pb-title); line-height: 1.25; }
.pb-card p { margin-top: .65rem; font-size: var(--fs-pb-text); line-height: 1.6; color: rgba(255, 255, 255, .78); }
@media (hover: hover) { .pb-card:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .1); } }

/* ---- Foundation banner with logo ---- */
.page-hero__content--brand {
  width: min(1080px, 100%); display: flex; align-items: center; justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.25rem); text-align: left;
}
.page-hero__content--brand .page-hero__sub { margin-left: 0; max-width: 36em; }
.page-hero__content--brand .page-hero__rule { margin-left: 0; }
.brand-badge {
  flex: 0 0 auto; width: clamp(240px, 30vw, 380px); padding: clamp(.9rem, 1.8vw, 1.4rem) clamp(1rem, 2vw, 1.6rem);
  background: #fff; border-radius: 28px; box-shadow: 0 22px 50px rgba(0, 0, 0, .28), 0 0 0 6px rgba(255, 255, 255, .12);
  transform: rotate(-2deg); animation: badge-pop .9s var(--ease) .15s both;
}
.brand-badge img { display: block; width: 100%; height: auto; }
@keyframes badge-pop { from { opacity: 0; transform: rotate(-6deg) scale(.85); } to { opacity: 1; transform: rotate(-2deg) scale(1); } }

/* ---- Partnership with Empowered to Change Africa ---- */
.partner__lead {
  max-width: 46em; margin: 1.2rem auto 0; text-align: center;
  font-size: var(--fs-careers-lead); line-height: 1.6; color: rgba(255, 255, 255, .82);
}
.partner__lead strong { color: var(--gold); font-weight: 700; }
.partner__split {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.1rem, 2.5vw, 1.75rem);
  margin-top: clamp(2.25rem, 5vw, 3.5rem); align-items: stretch;
}
.partner__quote {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(1.75rem, 3.5vw, 2.75rem); border-radius: 26px;
  background: linear-gradient(150deg, var(--gold), #F3B62A); color: var(--navy);
}
.partner__quote::before {
  content: "\201C"; position: absolute; right: .3rem; top: -2.2rem; font-family: var(--font-head); font-weight: 900;
  font-size: 11rem; line-height: 1; color: rgba(13, 49, 75, .12);
}
.partner__quote blockquote p {
  position: relative; font-family: var(--font-head); font-weight: 900; line-height: 1.08; letter-spacing: -.01em;
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem);
}
.partner__quote blockquote span { display: block; color: #fff; text-shadow: 0 2px 0 rgba(13, 49, 75, .15); }
.partner__quote figcaption { position: relative; margin-top: 1.1rem; font-weight: 700; font-size: 1.02rem; line-height: 1.5; }
.partner__path { padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 26px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.partner__path-title, .partner__tracks-title { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-pb-title); color: #fff; }
.partner__steps { margin: 1.4rem 0 0; padding: 0; list-style: none; display: grid; gap: 1.15rem; }
.partner__steps li { display: flex; gap: 1rem; align-items: flex-start; margin: 0; padding: 0; }
.partner__steps li > div { padding-top: .35rem; }
.partner__num {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--teal); color: #fff; font-family: var(--font-head); font-weight: 900; font-size: 1.15rem;
  box-shadow: 0 0 0 4px rgba(31, 102, 112, .35);
}
.partner__steps h4 { margin: 0; font-family: var(--font-head); font-weight: 800; font-size: 1.12rem; color: var(--gold); line-height: 1.3; }
.partner__steps p { margin: .25rem 0 0; font-size: var(--fs-pb-text); line-height: 1.55; color: rgba(255, 255, 255, .78); }
.partner__tracks-title { margin-top: clamp(2.5rem, 5vw, 3.5rem); text-align: center; }
.programs-band__grid.partner__tracks { margin-top: clamp(1.25rem, 3vw, 1.75rem); }
.partner__cta { margin-top: clamp(2.25rem, 5vw, 3.25rem); display: flex; flex-direction: column; align-items: center; gap: .9rem; text-align: center; }
.partner__safety {
  display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: 999px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); font-weight: 700; font-size: .95rem;
}
.partner__safety svg { width: 19px; height: 19px; fill: none; stroke: var(--gold); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.partner__btn { padding: 1rem 2.2rem; font-size: 1.08rem; }
.partner__note { font-size: .86rem; color: rgba(255, 255, 255, .6); }

/* ---- Why This Matters: stat ovals ---- */
.impact-stats { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.impact-stats__lead { max-width: 42em; margin: 1.2rem auto 0; text-align: center; font-size: var(--fs-careers-lead); line-height: 1.55; color: var(--ink-soft); }

.stat-ovals { margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.25rem, 3vw, 2rem); max-width: 1080px; }
.stat-oval {
  flex: 1 1 280px; max-width: 340px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem;
  padding: clamp(2rem, 4vw, 2.6rem) clamp(1.5rem, 3vw, 2rem); border-radius: 50% / 38%;
  background: linear-gradient(160deg, #fff, var(--cyan-frame)); box-shadow: 0 18px 40px rgba(13, 49, 75, .1);
  border: 1px solid rgba(31, 102, 112, .14);
}
.stat-oval__number { font-family: var(--font-head); font-weight: 900; font-size: var(--fs-stat-oval-num); line-height: 1; color: var(--teal); }
.stat-oval__label { font-size: var(--fs-stat-oval-label); font-weight: 600; line-height: 1.45; color: var(--navy); max-width: 22ch; }
.stat-oval__source { font-size: var(--fs-stat-oval-source); color: var(--ink-soft); }

.impact-stats__quote {
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; max-width: 38em; text-align: center; font-style: italic;
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-stats-quote); line-height: 1.5; color: var(--navy);
}

/* ---- Community Impact spotlight ---- */
.spotlight { background: var(--cyan); padding: clamp(3.5rem, 7vw, 6rem) 0; }
.spotlight__frame { margin: clamp(2.25rem, 5vw, 3.25rem) auto 0; max-width: 980px; border-radius: 30px; overflow: hidden; box-shadow: 0 26px 56px rgba(13, 49, 75, .18); }
.spotlight__frame img { width: 100%; height: auto; display: block; }

/* ---- Moments From The Field: mosaic gallery ---- */
.moments-grid { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.mosaic {
  margin-top: clamp(2.25rem, 5vw, 3.5rem); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, clamp(120px, 16vw, 175px)); gap: clamp(.75rem, 1.6vw, 1.25rem);
  max-width: 1100px; margin-inline: auto;
}
/* Each photo's spot in the grid, by position: a 4-column, 3-row layout with no gaps.
   1st and 5th photos are wide; the rest stand tall. Swapping an image keeps its shape;
   see the HTML comment above the gallery for how to add a 7th photo. */
.mosaic__item:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 2; }
.mosaic__item:nth-child(2) { grid-column: 3 / 4; grid-row: 1 / 3; }
.mosaic__item:nth-child(3) { grid-column: 1 / 2; grid-row: 2 / 4; }
.mosaic__item:nth-child(4) { grid-column: 2 / 3; grid-row: 2 / 4; }
.mosaic__item:nth-child(5) { grid-column: 3 / 5; grid-row: 3 / 4; }
.mosaic__item:nth-child(6) { grid-column: 4 / 5; grid-row: 1 / 3; }
.mosaic__item { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 26px rgba(13, 49, 75, .1); }
.mosaic__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
@media (hover: hover) { .mosaic__item:hover img { transform: scale(1.08); } }
.js .mosaic__item:not(.is-visible) img { transform: scale(1.15); }

/* ---- 501(c)(3) + Donate ---- */
.trust { background: var(--navy); color: #fff; padding: clamp(4rem, 8vw, 6.5rem) 0; }
.trust__inner { max-width: 640px; margin-inline: auto; text-align: center; }
.trust__seal { position: relative; width: 96px; height: 96px; margin: 0 auto 1.5rem; display: grid; place-items: center; color: var(--gold); }
.trust__seal-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px dashed rgba(247, 199, 74, .55); }
.trust__seal svg { position: relative; width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.trust .eyebrow--gold { margin-bottom: .6rem; }
.trust__title { font-family: var(--font-head); font-weight: 900; line-height: 1.15; font-size: var(--fs-trust-title); }
.trust__text { margin: 1rem auto 0; max-width: 38em; font-size: var(--fs-trust-text); line-height: 1.65; color: rgba(255, 255, 255, .82); }
.trust__divider { display: block; width: 64px; height: 3px; margin: 2.25rem auto; border-radius: 2px; background: rgba(247, 199, 74, .5); }
.trust__cta-title { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-trust-cta-title); }
.trust__cta-text { margin-top: .6rem; color: rgba(255, 255, 255, .78); }
.trust__donate { margin-top: 1.75rem; padding: 1.05rem 2.4rem; font-size: 1.08rem; }

/* ---- Foundation: tablet ---- */
@media (max-width: 1000px) {
  .roots__grid { grid-template-columns: 1fr; }
  .roots__photo { order: -1; max-width: 320px; }
  .vm-grid { grid-template-columns: 1fr; max-width: 460px; }
  .programs-band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partner__split { grid-template-columns: 1fr; }
  .page-hero__content--brand { flex-direction: column; text-align: center; }
  .page-hero__content--brand .page-hero__sub, .page-hero__content--brand .page-hero__rule { margin-left: auto; }
  .stat-oval { border-radius: 34px; flex-basis: calc(50% - 1rem); }
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 190px; }
  .mosaic__item, .mosaic__item:nth-child(n) { grid-column: auto; grid-row: auto; }
  .mosaic__item:nth-child(3), .mosaic__item:nth-child(5) { grid-column: span 2; }
}

/* ---- Foundation: mobile ---- */
@media (max-width: 640px) {
  .programs-band__grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .brand-badge { width: min(78vw, 300px); border-radius: 22px; }
  .partner__btn { width: 100%; max-width: 420px; justify-content: center; }
  .stat-oval { flex-basis: 100%; max-width: 320px; border-radius: 28px; }
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 150px; gap: .6rem; }
  .mosaic__item:nth-child(3), .mosaic__item:nth-child(5) { grid-column: span 2; }
  .trust__donate { width: 100%; justify-content: center; }
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .brand-badge { animation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important;
  }
  .roll__inner { transform: none; }
  .js .reveal { opacity: 1; transform: none; }
  .js .class:not(.is-visible) .class__frame img { transform: none; }
  .js .stars svg { opacity: 1; transform: none; }
  .js .setting__photo:not(.is-visible) img,
  .js .story__photo:not(.is-visible) .story__frame img { transform: none; }
  .page-hero__rule, .page-hero__sub { animation: none; }
  .js .room:not(.is-visible) .room__photo img, .js .moment:not(.is-visible) img { transform: none; }
  .js .room:not(.is-visible) .room__age { opacity: 1; }
  .js .room.is-visible .room__age { animation: none; }
  .js .loc:not(.is-visible) .loc__tile, .js .loc:not(.is-visible) .loc__list li { opacity: 1; transform: none; }
  .js .mosaic__item:not(.is-visible) img { transform: none; }
}