:root {   --blue: #0068ff;   --sky: #eaf6ff;   --sky-strong: #cfeaff;   --white: #ffffff;   --ink: #16212a;   --muted: #53636f;   --line: #b9d9ec;   --sans: "Source Sans 3", "Segoe UI", Arial, sans-serif;   --max: 1320px;   --shadow: 0 18px 50px rgba(18, 54, 82, .15); }  * { box-sizing: border-box; } html { scroll-behavior: smooth; } body {   margin: 0;   color: var(--ink);   background: var(--white);   font-family: var(--sans);   font-size: 1rem;   letter-spacing: 0;   line-height: 1.55; } body.menu-active { overflow: hidden; } img { display: block; width: 100%; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; } button, a { -webkit-tap-highlight-color: transparent; } button { font-family: inherit; } :focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; } .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; } .wrap { width: min(calc(100% - 3rem), var(--max)); margin-inline: auto; } .skip-link {   position: fixed;   z-index: 100;   top: .75rem;   left: .75rem;   padding: .7rem 1rem;   color: var(--white);   background: var(--blue);   transform: translateY(-160%); } .skip-link:focus { transform: translateY(0); }  .site-header {   position: relative;   z-index: 30;   background: var(--white); } .header-main {   display: flex;   min-height: 84px;   align-items: center;   gap: 1.5rem; } .site-brand {   display: inline-flex;   flex: 0 0 auto;   align-items: center;   gap: .7rem;   color: var(--blue);   text-decoration: none; } .site-brand img { width: 51px; height: 51px; object-fit: contain; } .site-brand span { display: grid; } .site-brand strong {   max-width: 195px;   font-size: 1.12rem;   font-weight: 600;   line-height: 1.02; } .site-brand small {   margin-top: .32rem;   color: var(--muted);   font-size: .65rem;   font-weight: 600; } .primary-nav {   display: flex;   margin-left: auto;   align-self: stretch;   align-items: center;   gap: 1.3rem; } .nav-item { display: flex; align-self: stretch; align-items: center; } .nav-trigger, .nav-direct {   position: relative;   display: inline-flex;   min-height: 46px;   padding: .55rem .1rem;   align-items: center;   border: 0;   color: var(--ink);   background: transparent;   font-size: .95rem;   font-weight: 500;   text-decoration: none;   cursor: pointer; } .nav-trigger { gap: .36rem; } .nav-trigger::after {   width: 14px;   height: 14px;   background: currentColor;   content: "";   mask: url("assets/icons/chevron-down.svg") center / contain no-repeat;   -webkit-mask: url("assets/icons/chevron-down.svg") center / contain no-repeat;   transition: transform 160ms ease; } .nav-trigger::before, .nav-direct::before {   position: absolute;   right: 0;   bottom: .2rem;   left: 0;   height: 3px;   background: var(--blue);   content: "";   transform: scaleX(0);   transform-origin: left;   transition: transform 160ms ease; } .nav-trigger:hover, .nav-trigger[aria-expanded="true"], .nav-direct:hover { color: var(--blue); } .nav-trigger:hover::before, .nav-trigger[aria-expanded="true"]::before, .nav-direct:hover::before { transform: scaleX(1); } .nav-trigger[aria-expanded="true"]::after { transform: rotate(180deg); } .mega-menu {   position: absolute;   top: calc(100% + 1px);   left: 50%;   display: grid;   width: min(calc(100vw - 3rem), 880px);   min-height: 0;   grid-template-columns: 280px minmax(0, 1fr);   overflow: hidden;   background: var(--white);   box-shadow: 0 16px 36px rgba(18, 54, 82, .16);   transform: translateX(-50%); } .mega-menu--compact { width: min(calc(100vw - 3rem), 700px); } .mega-menu--standard { width: min(calc(100vw - 3rem), 790px); } .mega-menu--wide { width: min(calc(100vw - 3rem), 920px); } .mega-menu[hidden] { display: none; } .mega-image { position: relative; min-height: 210px; overflow: hidden; } .mega-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mega-image::after {   position: absolute;   right: 0;   bottom: 0;   left: 0;   height: 96px;   background: linear-gradient(transparent, rgba(0, 104, 255, .88));   content: ""; } .mega-image span {   position: absolute;   z-index: 2;   right: 1.25rem;   bottom: 1rem;   left: 1.25rem;   color: var(--white);   font-size: 1.2rem;   font-weight: 600; } .mega-content {   display: grid;   align-content: start;   padding: 1.35rem clamp(1.4rem, 2.4vw, 2.15rem) 1.5rem; } .mega-content > p {   margin: 0 0 .65rem;   color: var(--blue);   font-size: .78rem;   font-weight: 600;   text-transform: uppercase; } .mega-links {   display: grid;   grid-template-columns: repeat(2, minmax(0, 1fr));   column-gap: 1.8rem;   border-top: 1px solid var(--line); } .mega-links a {   position: relative;   display: flex;   min-height: 54px;   padding-right: 1.75rem;   border-bottom: 1px solid var(--line);   align-items: center;   color: var(--ink);   font-size: 1.04rem;   font-weight: 500;   text-decoration: none; } .mega-links a::after {   position: absolute;   right: .25rem;   color: var(--blue);   content: "\2192";   opacity: .48;   transition: opacity 160ms ease, transform 160ms ease; } .mega-links a:hover, .mega-links a:focus-visible { color: var(--blue); } .mega-links a:hover::after, .mega-links a:focus-visible::after { opacity: 1; transform: translateX(3px); } .mega-menu--compact .mega-links:has(a:only-child) { grid-template-columns: 1fr; } .mega-links a:focus-visible { outline-offset: 2px; } .menu-button {   display: none;   width: 52px;   min-height: 52px;   margin-left: auto;   border: 0;   color: var(--blue);   background: transparent;   font: 600 .72rem/1 var(--sans); } .menu-button > span:first-child, .menu-button > span:first-child::before, .menu-button > span:first-child::after {   display: block;   width: 27px;   height: 2px;   margin-inline: auto;   background: currentColor;   content: ""; } .menu-button > span:first-child { position: relative; margin-bottom: .55rem; } .menu-button > span:first-child::before { position: absolute; top: -7px; } .menu-button > span:first-child::after { position: absolute; top: 7px; } .menu-label { display: block; }  .hero {   position: relative;   min-height: 560px;   overflow: hidden;   color: var(--ink);   background: var(--sky); } .hero-slides, .hero-slide { position: absolute; inset: 0; } .hero-slide {   margin: 0;   opacity: 0;   visibility: hidden;   transition: opacity 700ms ease, visibility 700ms ease; } .hero-slide.is-active { opacity: 1; visibility: visible; } .hero-slide img { height: 100%; object-fit: cover; object-position: center 42%; } .hero-shade {   position: absolute;   inset: 0;   background: linear-gradient(90deg, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .72) 10%, rgba(255, 255, 255, .3) 18%, rgba(255, 255, 255, .06) 27%, rgba(255, 255, 255, 0) 32%); } .hero-inner { position: relative; display: flex; min-height: 560px; align-items: center; } .hero-copy { width: min(490px, 40%); padding: 3rem 0 4rem; } .eyebrow {   margin: 0 0 .65rem;   color: var(--blue);   font-size: .74rem;   font-weight: 600;   text-transform: uppercase; } .hero h1, .values-intro h2, .learning-copy h2, .enroll-copy h2 {   margin: 0;   color: var(--blue);   font-weight: 600;   line-height: 1.08; } .hero h1 { color: var(--blue); font-size: 4rem; } .hero .eyebrow { color: var(--blue); } .hero-copy > p:not(.eyebrow) { margin: 1.15rem 0 1.45rem; color: var(--ink); font-size: 1.08rem; } .hero-actions, .enroll-copy > div { display: flex; align-items: center; gap: 1.25rem; } .hero .text-link { color: var(--blue); } .hero-controls {   position: absolute;   z-index: 5;   bottom: 1.5rem;   left: 50%;   display: flex;   align-items: center;   border: 1px solid rgba(255, 255, 255, .92);   background: rgba(255, 255, 255, .96);   transform: translateX(-50%); } .hero-controls button {   display: grid;   width: 48px;   height: 48px;   padding: 0;   place-items: center;   border: 0;   border-left: 1px solid var(--line);   color: var(--blue);   background: transparent;   cursor: pointer; } .hero-controls button:first-of-type { border-left: 0; } .hero-controls button:hover, .hero-controls button:focus-visible { background: var(--sky); } .hero-controls button:focus-visible { outline-color: var(--blue); outline-offset: -4px; } .control-icon {   display: block;   width: 21px;   height: 21px;   background: currentColor;   mask-position: center;   mask-repeat: no-repeat;   mask-size: contain;   -webkit-mask-position: center;   -webkit-mask-repeat: no-repeat;   -webkit-mask-size: contain; } .previous-icon { mask-image: url("assets/icons/chevron-left.svg"); -webkit-mask-image: url("assets/icons/chevron-left.svg"); } .next-icon { mask-image: url("assets/icons/chevron-right.svg"); -webkit-mask-image: url("assets/icons/chevron-right.svg"); } .pause-icon { mask-image: url("assets/icons/pause.svg"); -webkit-mask-image: url("assets/icons/pause.svg"); } .play-icon { mask-image: url("assets/icons/play.svg"); -webkit-mask-image: url("assets/icons/play.svg"); } .button {   display: inline-flex;   min-height: 48px;   padding: .72rem 1.2rem;   align-items: center;   justify-content: center;   border: 2px solid var(--blue);   color: var(--white);   background: var(--blue);   font-size: .9rem;   font-weight: 600;   text-decoration: none; } .button:hover { color: var(--blue); background: var(--white); } .button--light { color: var(--blue); border-color: var(--white); background: var(--white); } .button--light:hover, .button--light:focus-visible { color: var(--white); border-color: var(--white); background: transparent; } .text-link {   display: inline-flex;   min-height: 44px;   padding: .6rem 0;   align-items: center;   color: var(--blue);   font-weight: 600;   text-decoration: underline; }  .family-rail {   position: relative;   z-index: 5;   margin-top: 0; } .family-rail-inner {   display: grid;   min-height: 82px;   grid-template-columns: repeat(6, minmax(0, 1fr));   border: 1px solid var(--line);   background: var(--white); } .family-rail a {   display: flex;   min-width: 0;   min-height: 82px;   padding: .7rem .65rem;   flex-direction: column;   align-items: center;   justify-content: center;   gap: .45rem;   border-left: 1px solid var(--line);   color: var(--blue);   font-size: .84rem;   font-weight: 500;   text-align: center;   text-decoration: none;   overflow-wrap: anywhere; } .family-rail a:first-child { border-left: 0; } .shortcut-icon {   display: block;   width: 26px;   height: 26px;   flex: 0 0 26px;   background: var(--blue);   mask-position: center;   mask-repeat: no-repeat;   mask-size: contain;   -webkit-mask-position: center;   -webkit-mask-repeat: no-repeat;   -webkit-mask-size: contain; } .calendar-icon { mask-image: url("assets/icons/calendar-days.svg"); -webkit-mask-image: url("assets/icons/calendar-days.svg"); } .portal-icon { mask-image: url("assets/icons/users-round.svg"); -webkit-mask-image: url("assets/icons/users-round.svg"); } .student-icon { mask-image: url("assets/icons/graduation-cap.svg"); -webkit-mask-image: url("assets/icons/graduation-cap.svg"); } .bus-icon { mask-image: url("assets/icons/bus-front.svg"); -webkit-mask-image: url("assets/icons/bus-front.svg"); } .directory-icon { mask-image: url("assets/icons/contact-round.svg"); -webkit-mask-image: url("assets/icons/contact-round.svg"); } .weather-icon { mask-image: url("assets/icons/cloud-sun.svg"); -webkit-mask-image: url("assets/icons/cloud-sun.svg"); } .family-rail a:hover, .family-rail a:focus-visible { color: var(--ink); background: var(--sky); }  .values-section { padding: 2rem 0 0; background: var(--white); } .values-intro {   position: relative;   display: grid;   min-height: 190px;   margin-bottom: 0;   padding: 1.25rem 0 0;   grid-template-columns: 190px minmax(0, 1fr);   align-items: center;   overflow: visible;   background: var(--white); } .values-intro::after {   position: absolute;   right: 0;   bottom: 0;   left: 0;   height: 1px;   background: var(--line);   content: ""; } .roar-mascot-mark {   position: relative;   align-self: stretch;   transform: translateX(var(--lion-shift, 0px));   transition: transform var(--lion-duration, 700ms) cubic-bezier(.4, 0, .2, 1); } .roar-mascot-mark.is-walking { will-change: transform; } .roar-mascot-mark.no-transition { transition: none; } .roar-mascot-mark::after {   position: absolute;   z-index: 2;   right: 0;   bottom: -1px;   left: 0;   height: 6px;   background: var(--blue);   content: ""; } .values-heading { position: relative; z-index: 2; min-width: 0; padding: 0 0 1rem 2rem; } .values-intro h2 { max-width: 920px; font-size: 3.35rem; overflow-wrap: anywhere; } .roar-lion {   position: absolute;   z-index: 5;   object-fit: contain;   object-position: bottom center;   filter: drop-shadow(7px 9px 0 rgba(207, 234, 255, .9));   pointer-events: none; } .roar-walk-cycle {   --lion-facing: 1;   position: absolute;   z-index: 5;   right: -38px;   bottom: -19px;   width: 265px;   height: 176px;   opacity: 1;   transform: scaleX(var(--lion-facing));   transform-origin: center bottom;   transition: opacity 180ms ease; } .roar-mascot-mark.is-moving-left .roar-walk-cycle { --lion-facing: -1; } .roar-walk-frame { inset: 0; width: 100%; height: 100%; opacity: 0; } .roar-walk-frame-one { opacity: 1; } .roar-mascot-mark.is-walking .roar-walk-cycle { animation: lion-step-bob 270ms ease-in-out infinite; } .roar-mascot-mark.is-walking .roar-walk-frame-one { animation: lion-step-one 540ms linear infinite; } .roar-mascot-mark.is-walking .roar-walk-frame-three { animation: lion-step-three 540ms linear infinite; } .roar-mascot-mark.is-walking .roar-walk-frame-two { animation: lion-step-two 540ms linear infinite; } .roar-final-frame {   right: 4px;   bottom: -52px;   width: 185px;   height: 250px;   opacity: 0;   transform: translateY(10px) scale(.88);   transition: opacity 180ms ease, transform 220ms cubic-bezier(.16, 1, .3, 1); } .roar-mascot-mark.is-logo-pose .roar-walk-cycle, .roar-mascot-mark.is-roaring .roar-walk-cycle { opacity: 0; } .roar-mascot-mark.is-logo-pose .roar-final-frame {   opacity: 1;   transform: translateY(0) scale(1); } .roar-mascot-mark.is-roaring .roar-final-frame {   opacity: 1;   animation: lion-roar 560ms cubic-bezier(.16, 1, .3, 1) both; } .values-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .value-panel {   position: relative;   min-height: 420px;   overflow: hidden;   color: var(--blue);   background: var(--sky); } .value-panel img { height: 100%; object-fit: cover; transition: transform 300ms ease; } .value-shade {   position: absolute;   inset: 52% 0 0;   background: linear-gradient(transparent, rgba(255, 255, 255, .98) 82%);   transition: inset 260ms ease, background 260ms ease; } .value-copy {   position: absolute;   z-index: 2;   right: 1.5rem;   bottom: 1.45rem;   left: 1.5rem;   display: block; } .value-copy strong { display: block; font-size: clamp(1.65rem, 2.3vw, 2.65rem); font-weight: 600; line-height: 1; transition: transform 260ms ease; } .value-copy span {   position: absolute;   right: 0;   bottom: 0;   left: 0;   color: var(--ink);   font-size: .86rem;   font-weight: 500;   opacity: 0;   transform: translateY(7px);   transition: opacity 260ms ease, transform 260ms ease; } .value-panel:hover img, .value-panel:focus-visible img, .value-panel.is-active img { transform: scale(1.025); } .value-panel:hover .value-shade, .value-panel:focus-visible .value-shade, .value-panel.is-active .value-shade { inset: 36% 0 0; background: linear-gradient(transparent, rgba(255, 255, 255, 1) 78%); } .value-panel:hover .value-copy strong, .value-panel:focus-visible .value-copy strong, .value-panel.is-active .value-copy strong { transform: translateY(-3.2rem); } .value-panel:hover .value-copy span, .value-panel:focus-visible .value-copy span, .value-panel.is-active .value-copy span {   opacity: 1;   transform: translateY(0); } .value-panel:focus-visible { outline-offset: -6px; } .value-panel.is-active { box-shadow: inset 0 0 0 4px var(--blue); } @keyframes lion-step-one {   0%, 22% { opacity: 1; }   33%, 88% { opacity: 0; }   100% { opacity: 1; } } @keyframes lion-step-three {   0%, 22%, 77%, 100% { opacity: 0; }   33%, 66% { opacity: 1; } } @keyframes lion-step-two {   0%, 55% { opacity: 0; }   66%, 88% { opacity: 1; }   100% { opacity: 0; } } @keyframes lion-step-bob {   0%, 100% { transform: scaleX(var(--lion-facing)) translateY(0) rotate(0); }   50% { transform: scaleX(var(--lion-facing)) translateY(-2px) rotate(-.35deg); } } @keyframes lion-roar {   0% { transform: translateY(12px) scale(.8); }   62% { transform: translateY(-5px) scale(1.04); }   100% { transform: translateY(0) scale(1); } } .values-action { padding-block: 1.25rem 2.8rem; text-align: right; }  .learning-section { display: grid; grid-template-columns: 1.08fr .92fr; background: var(--sky); } .learning-image { position: relative; min-height: 500px; } .learning-image img { height: 100%; object-fit: cover; } .learning-copy {   display: flex;   min-height: 500px;   padding: clamp(2.75rem, 5vw, 5.5rem);   flex-direction: column;   align-items: flex-start;   justify-content: center; } .learning-copy .eyebrow { color: var(--ink); } .learning-copy h2 { max-width: 560px; font-size: 3.25rem; } .learning-copy > p:not(.eyebrow) { max-width: 34rem; margin: 1.15rem 0 1.4rem; color: var(--muted); } .curriculum-focus {   width: 100%;   padding-top: 1.15rem;   border-top: 1px solid var(--line); } .curriculum-focus p { display: grid; margin: 0; } .curriculum-focus strong { color: var(--ink); font-size: 1rem; font-weight: 600; } .curriculum-focus span { margin-top: .2rem; color: var(--muted); font-size: .84rem; } .updates-section { padding: 3.75rem 0; background: var(--white); } .updates-signal {   display: grid;   min-height: 250px;   grid-template-columns: 190px 1fr 360px;   border: 1px solid var(--line);   background: var(--white); } .updates-date {   display: grid;   padding: 1.5rem;   align-content: center;   justify-items: center;   color: var(--white);   background: var(--blue);   line-height: 1; } .updates-date strong { margin-block: .45rem; font-size: 4.4rem; font-weight: 500; } .updates-date span, .updates-date small { font-size: .7rem; font-weight: 600; } .updates-calendar {   display: flex;   padding: 2rem 3rem;   flex-direction: column;   align-items: flex-start;   justify-content: center; } .updates-calendar h2 { margin: 0 0 .6rem; color: var(--ink); font-size: 1.7rem; font-weight: 500; } .event-list:not([hidden]) { display: grid; margin-bottom: .65rem; gap: .35rem; color: var(--muted); } .updates-teacher {   display: grid;   grid-template-columns: 140px 1fr;   align-items: center;   border-left: 1px solid var(--line);   color: var(--ink);   background: var(--white);   text-decoration: none; } .updates-teacher-image { position: relative; height: 100%; } .updates-teacher img { height: 100%; object-fit: cover; } .updates-teacher-copy { display: grid; padding: 1.25rem; } .updates-teacher-copy small { color: var(--blue); font-size: .66rem; font-weight: 600; text-transform: uppercase; } .updates-teacher-copy strong { margin-block: .35rem .7rem; font-size: 1.1rem; font-weight: 600; } .updates-teacher-copy b { color: var(--blue); font-size: .72rem; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; } .updates-teacher:hover .updates-teacher-copy b, .updates-teacher:focus-visible .updates-teacher-copy b { text-decoration-thickness: 2px; } .text-button {   display: inline-flex;   min-height: 44px;   padding: .45rem 0;   align-items: center;   border: 0;   color: var(--blue);   background: transparent;   font-size: .86rem;   font-weight: 600;   text-decoration: underline;   text-underline-offset: .22em;   cursor: pointer; } .enroll-section {   padding: 4rem 0;   overflow: hidden;   background: var(--white); } .enroll-shell {   position: relative;   display: grid;   min-height: 250px;   grid-template-columns: 1fr 42%;   align-items: center;   color: var(--white);   background: var(--blue); } .enroll-copy { padding: 2.5rem clamp(2rem, 5vw, 5rem); } .enroll-copy .eyebrow, .enroll-copy h2 { color: var(--white); } .enroll-copy h2 { max-width: 620px; font-size: 3.1rem; } .enroll-copy > div { margin-top: 1.2rem; } .enroll-copy .button { color: var(--blue); border-color: var(--white); background: var(--white); } .enroll-copy .button:hover { color: var(--white); background: transparent; } .enroll-copy .text-link { color: var(--white); } .enroll-image {   position: absolute;   z-index: 2;   right: 1.5rem;   bottom: -2px;   width: 42%;   height: 390px;   pointer-events: none; } .enroll-image img {   height: 100%;   object-fit: contain;   object-position: bottom center;   filter: drop-shadow(8px 10px 0 rgba(255, 255, 255, .5)); } .site-footer { padding: 3rem 0 1.25rem; border-top: 4px solid var(--blue); color: var(--ink); background: var(--white); } .footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2.5rem; } .footer-brand { margin-bottom: 1.2rem; color: var(--ink); } .footer-grid p { color: var(--muted); } .footer-grid h2 { margin: 0 0 .8rem; font-size: 1rem; font-weight: 600; } .footer-grid > div:not(:first-child) { display: flex; flex-direction: column; align-items: flex-start; } .footer-grid > div:not(:first-child) a { min-height: 34px; font-size: .9rem; text-decoration: none; } .footer-grid a:hover { text-decoration: underline; } .footer-bottom {   display: flex;   margin-top: 2.5rem;   padding-top: 1rem;   justify-content: space-between;   border-top: 1px solid var(--line);   color: var(--muted);   font-size: .8rem; }  @media (max-width: 1120px) {   .primary-nav { gap: .75rem; }   .nav-trigger,   .nav-direct { font-size: .79rem; }   .site-brand strong { max-width: 160px; } }  @media (max-width: 960px) {   .menu-button { display: block; flex: 0 0 52px; margin-left: 0; visibility: visible; }   .header-main { justify-content: space-between; }   .primary-nav {     position: absolute;     top: 85px;     right: 0;     left: 0;     display: none;     max-height: calc(100vh - 85px);     margin: 0;     padding: .5rem 1.5rem 1.5rem;     flex-direction: column;     align-items: stretch;     gap: 0;     overflow-y: auto;     background: var(--white);     box-shadow: var(--shadow);   }   .primary-nav.open { display: flex; }   .nav-item { display: block; }   .nav-trigger,   .nav-direct {     width: 100%;     min-height: 52px;     justify-content: space-between;     border-bottom: 1px solid var(--line);     font-size: .95rem;   }   .nav-direct { display: flex; }   .mega-menu {     position: static;     width: 100%;     min-height: 0;     margin: 0;     grid-template-columns: 1fr;     border: 0;     border-bottom: 1px solid var(--line);     border-radius: 0;     box-shadow: none;     transform: none;   }   .mega-image { display: none; }   .mega-content { padding: .4rem 0 1rem; }   .mega-content > p { margin-bottom: .35rem; }   .mega-links { column-gap: 1.25rem; }   .mega-links a { min-height: 48px; font-size: .88rem; }   .hero,   .hero-inner { min-height: 560px; }   .hero h1 { font-size: 3.75rem; }   .hero-copy { width: 44%; }   .family-rail-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }   .family-rail a:nth-child(4) { border-left: 0; }   .family-rail a:nth-child(n + 4) { border-top: 1px solid var(--line); }   .values-grid { grid-template-columns: repeat(2, 1fr); }   .value-panel { min-height: 390px; }   .value-copy { display: grid; }   .value-copy strong { transform: none !important; }   .value-copy span { position: static; margin-top: .55rem; opacity: 1; transform: none; }   .learning-section { grid-template-columns: 1fr; }   .learning-image,   .learning-copy { min-height: 430px; }   .updates-signal { grid-template-columns: 160px 1fr; }   .updates-teacher {     grid-column: 1 / -1;     min-height: 150px;     border-top: 1px solid var(--line);     border-left: 0;   }   .updates-teacher img { width: 140px; }   .enroll-shell { grid-template-columns: 1fr 40%; }   .enroll-image { width: 40%; height: 350px; }   .footer-grid { grid-template-columns: 1.3fr repeat(3, 1fr); gap: 1.5rem; } }  @media (max-width: 680px) {   .wrap { width: min(calc(100% - 2rem), var(--max)); }   .header-main { min-height: 76px; }   .site-brand img { width: 44px; height: 44px; }   .site-brand strong { max-width: 180px; font-size: 1rem; }   .site-brand small { font-size: .58rem; }   .primary-nav { top: 77px; max-height: calc(100vh - 77px); padding-inline: 1rem; }   .mega-links { grid-template-columns: 1fr; }   .hero,   .hero-inner { min-height: 560px; }   .hero-slide img { object-position: 60% center; }   .hero-shade { background: linear-gradient(0deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .72) 28%, rgba(255, 255, 255, .16) 46%, rgba(255, 255, 255, 0) 60%); }   .hero-inner { align-items: end; }   .hero-copy { width: 100%; padding: 8rem 0 6rem; }   .hero h1 { font-size: 3.15rem; }   .hero-controls { bottom: 1rem; }   .hero-actions,   .enroll-copy > div { align-items: flex-start; flex-direction: column; gap: .35rem; }   .family-rail { margin-top: 0; }   .family-rail-inner { box-shadow: none; }   .family-rail a { min-height: 88px; padding-inline: .5rem; font-size: .74rem; }   .values-section { padding-top: 2rem; }   .values-intro {     display: grid;     min-height: 165px;     margin-bottom: 0;     padding: 1rem 0 0;     grid-template-columns: 36% minmax(0, 64%);     align-items: center;     overflow: visible;   }   .values-heading { padding: 0 0 .75rem 1rem; }   .roar-walk-cycle { right: -22px; bottom: -11px; width: 178px; height: 126px; }   .roar-final-frame { right: 2px; bottom: -40px; width: 100%; height: 205px; }   .values-intro h2,   .learning-copy h2 { font-size: 2.55rem; }   .values-grid { grid-template-columns: repeat(2, 1fr); }   .value-panel { min-height: 0; aspect-ratio: 3 / 4; }   .value-copy { right: .85rem; bottom: .85rem; left: .85rem; }   .value-copy strong { font-size: 1.55rem; }   .value-copy span { font-size: .74rem; line-height: 1.35; }   .values-action { padding-bottom: 2rem; text-align: left; }   .learning-image,   .learning-copy { min-height: 360px; }   .learning-copy { padding: 3rem 1rem; }   .updates-section { padding: 3.5rem 0; }   .updates-signal { grid-template-columns: 112px 1fr; }   .updates-date { min-height: 180px; padding-inline: .75rem; }   .updates-date strong { font-size: 3.5rem; }   .updates-calendar { padding: 2rem 1.25rem; }   .updates-teacher { grid-column: 1 / -1; grid-template-columns: 110px 1fr; }   .enroll-section { padding: 3.5rem 0; }   .enroll-shell { display: flex; flex-direction: column; align-items: stretch; }   .enroll-copy { padding: 2.25rem 1.25rem 1.5rem; }   .enroll-copy h2 { font-size: 2.45rem; }   .enroll-image { position: relative; right: auto; bottom: auto; width: 100%; height: 330px; margin-top: .5rem; }   .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; } }  @media (max-width: 430px) {   .site-brand small { display: none; }   .hero h1 { font-size: 2.85rem; }   .values-intro { min-height: 155px; grid-template-columns: 37% minmax(0, 63%); }   .values-intro h2 { font-size: 2rem; }   .roar-walk-cycle { right: -20px; width: 160px; height: 114px; }   .roar-final-frame { bottom: -36px; height: 190px; }   .calendar-days span { min-height: 38px; }   .footer-grid { grid-template-columns: 1fr; }   .footer-bottom { align-items: flex-start; flex-direction: column; gap: .5rem; } }  @media (max-width: 350px) {   .values-intro { min-height: 145px; grid-template-columns: 39% minmax(0, 61%); }   .values-intro h2 { font-size: 1.75rem; }   .values-heading { padding-left: .75rem; }   .roar-walk-cycle { right: -14px; width: 142px; height: 103px; }   .roar-final-frame { right: 0; bottom: -30px; width: 100%; height: 170px; }   .values-grid { grid-template-columns: 1fr; }   .value-panel { aspect-ratio: 4 / 3; } }  @media (prefers-reduced-motion: reduce) {   html { scroll-behavior: auto; }   .hero-slide,   .nav-trigger::after,   .nav-trigger::before,   .nav-direct::before,   .value-panel img,   .value-shade,   .value-copy span,   .roar-mascot-mark { transition: none; }   .roar-mascot-mark.is-walking .roar-walk-cycle,   .roar-mascot-mark.is-walking .roar-walk-frame-one,   .roar-mascot-mark.is-walking .roar-walk-frame-three,   .roar-mascot-mark.is-walking .roar-walk-frame-two,   .roar-mascot-mark.is-roaring .roar-final-frame { animation: none; } } 
/* Compact R.O.A.R. signature: title and mascot share one contained header. */
.values-section { padding-top: 2.25rem; }
.values-intro {
  display: grid;
  min-height: 112px;
  margin-bottom: 14px;
  padding: 0;
  grid-template-columns: minmax(0, 1fr) 146px;
  grid-template-rows: 112px;
  grid-template-areas: "title mascot";
  align-items: center;
  gap: 1.5rem;
  overflow: hidden;
}
.values-intro::after,
.roar-mascot-mark::after { display: none; }
.values-heading { grid-area: title; align-self: center; padding: 0; }
.values-intro h2 { max-width: none; font-size: clamp(2.25rem, 4vw, 3.05rem); }
.roar-mascot-mark {
  position: relative;
  width: 146px;
  height: 112px;
  grid-area: mascot;
  align-self: end;
  justify-self: end;
  overflow: hidden;
  transform: none !important;
  transition: none !important;
}
.roar-walk-cycle { display: none !important; }
.roar-final-frame,
.roar-mascot-mark.is-logo-pose .roar-final-frame,
.roar-mascot-mark.is-roaring .roar-final-frame {
  right: 0;
  bottom: 0;
  width: 146px;
  height: 112px;
  opacity: 1;
  transform: none;
  animation: roar-mascot-settle 3.8s ease-in-out infinite;
  transition: none;
}
.values-grid { margin-top: 0; }
@keyframes roar-mascot-settle {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(7px, -4px); }
}
@media (max-width: 520px) {
  .values-intro {
    min-height: 96px;
    margin-bottom: 12px;
    grid-template-columns: minmax(0, 1fr) 120px;
    grid-template-rows: 96px;
    gap: .75rem;
  }
  .values-intro h2 { font-size: clamp(2rem, 9vw, 2.5rem); }
  .roar-mascot-mark { width: 120px; height: 96px; }
  .roar-final-frame,
  .roar-mascot-mark.is-logo-pose .roar-final-frame,
  .roar-mascot-mark.is-roaring .roar-final-frame { width: 120px; height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .roar-final-frame,
  .roar-mascot-mark.is-logo-pose .roar-final-frame,
  .roar-mascot-mark.is-roaring .roar-final-frame { animation: none; }
}

/* Editor-selectable homepage section fills use the approved Midway palette. */
.section-fill--white { background:var(--white)!important; }
.section-fill--sky { background:var(--sky)!important; }
.section-fill--sky-strong { background:var(--sky-strong)!important; }
.section-fill--blue { background:var(--blue)!important; }
.section-fill--navy { background:#173b66!important; }
.learning-section.section-fill--blue .learning-copy,.learning-section.section-fill--navy .learning-copy,
.learning-section.section-fill--blue .learning-copy h2,.learning-section.section-fill--navy .learning-copy h2,
.learning-section.section-fill--blue .learning-copy p,.learning-section.section-fill--navy .learning-copy p,
.learning-section.section-fill--blue .learning-copy a,.learning-section.section-fill--navy .learning-copy a { color:var(--white); }
/* R.O.A.R. motion lane: a purposeful, compact path directly above the value cards. */
.values-section { padding-top: 2.25rem; }
.values-intro {
  display: grid;
  min-height: 178px;
  margin-bottom: 10px;
  padding: 0;
  grid-template-columns: 1fr;
  grid-template-rows: auto 112px;
  grid-template-areas: "title" "mascot";
  align-items: start;
  overflow: visible;
}
.values-intro::after {
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue) 0 12%, var(--line) 12% 100%);
}
.values-heading { grid-area: title; align-self: start; padding: 0 0 .45rem; }
.values-intro h2 { max-width: none; font-size: clamp(2.25rem, 4vw, 3.05rem); }
.roar-mascot-mark {
  position: relative;
  width: 185px;
  height: 112px;
  grid-area: mascot;
  align-self: end;
  justify-self: start;
  overflow: visible;
  transform: translateX(var(--lion-shift, 0px)) !important;
  transition: transform var(--lion-duration, 700ms) cubic-bezier(.22, .8, .25, 1) !important;
}
.roar-mascot-mark::after { display: none; }
.roar-walk-cycle {
  display: block !important;
  right: -8px;
  bottom: 0;
  width: 178px;
  height: 112px;
}
.roar-final-frame {
  right: 10px;
  bottom: 0;
  width: 138px;
  height: 130px;
  opacity: 0;
  transform: translateY(8px) scale(.9);
  animation: none;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.16, 1, .3, 1);
}
.roar-mascot-mark.is-logo-pose .roar-final-frame { opacity: 1; transform: translateY(0) scale(1); }
.roar-mascot-mark.is-roaring .roar-final-frame { opacity: 1; animation: lion-roar 560ms cubic-bezier(.16, 1, .3, 1) both; }
.roar-mascot-mark.is-logo-pose .roar-walk-cycle,
.roar-mascot-mark.is-roaring .roar-walk-cycle { opacity: 0; }
.values-grid { margin-top: 0; }
@media (max-width: 960px) {
  .values-intro { min-height: 160px; grid-template-rows: auto 98px; }
  .roar-mascot-mark { width: 160px; height: 98px; }
  .roar-walk-cycle { width: 154px; height: 98px; }
  .roar-final-frame { width: 120px; height: 114px; }
}
@media (max-width: 520px) {
  .values-intro { min-height: 148px; grid-template-rows: auto 84px; }
  .values-heading { padding-bottom: .2rem; }
  .values-intro h2 { font-size: clamp(2rem, 9vw, 2.5rem); }
  .roar-mascot-mark { width: 140px; height: 84px; }
  .roar-walk-cycle { width: 136px; height: 84px; }
  .roar-final-frame { width: 104px; height: 98px; }
}
/* Reviewer revision: title, then a contained 140px mascot track, then values. */
.values-intro {
  display: block;
  min-height: 0;
  margin-bottom: 14px;
  padding: 0;
  overflow: visible;
}
.values-heading { padding: 0; margin: 0 0 14px; }
.roar-mascot-mark {
  --lion-x: 70%;
  display: block;
  width: 100%;
  height: 140px;
  overflow: hidden;
  position: relative;
  justify-self: auto;
  transform: none !important;
}
.roar-final-frame,
.roar-mascot-mark.is-roaring .roar-final-frame {
  display: block;
  width: 196px;
  height: 132px;
  right: auto;
  left: var(--lion-x);
  bottom: 14px;
  opacity: 1;
  object-fit: contain;
  object-position: center bottom;
  transform: translateX(-50%);
  transition: transform 620ms cubic-bezier(.22, .8, .25, 1), left 620ms cubic-bezier(.22, .8, .25, 1);
  animation: none;
}
.roar-mascot-mark.no-transition .roar-final-frame { transition: none; }
.values-grid { margin-top: 0; }
.value-panel img { opacity: 1; filter: none; }
.value-panel:not(.is-active) img { opacity: 1; filter: none; }
@media (max-width: 520px) {
  .values-heading { margin-bottom: 12px; }
  .roar-mascot-mark { height: 132px; }
  .roar-final-frame,
  .roar-mascot-mark.is-roaring .roar-final-frame { width: 184px; height: 124px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .roar-final-frame,
  .roar-mascot-mark.is-roaring .roar-final-frame { transition: none; animation: none; }
}

/* Q4 visibility lock: one in-bounds mascot pose in a fixed-height track. */
.roar-mascot-mark { display:block !important; position:relative !important; width:100% !important; height:140px !important; overflow:hidden !important; }
.roar-mascot-mark .roar-walk-cycle { display:none !important; visibility:hidden !important; }
.roar-mascot-mark .roar-final-frame { position:absolute !important; z-index:20 !important; display:block !important; visibility:visible !important; opacity:1 !important; left:var(--lion-x, 70%) !important; right:auto !important; bottom:14px !important; width:196px !important; height:132px !important; max-width:none !important; object-fit:contain !important; transform:translateX(-50%) !important; animation:none !important; }
@media (max-width:520px) { .roar-mascot-mark { height:132px !important; } .roar-mascot-mark .roar-final-frame { width:184px !important; height:124px !important; bottom:12px !important; } }

/* Q5: cropped landscape lion fills the compact 128px track with visible artwork. */
.roar-mascot-mark .roar-final-frame { width:196px !important; height:128px !important; object-fit:fill !important; bottom:14px !important; }
.value-panel > img { display:block !important; opacity:1 !important; visibility:visible !important; filter:none !important; }

/* Q6 final geometry and card-image fallbacks. */
.values-heading { margin-bottom:14px !important; }
.roar-mascot-mark { height:140px !important; }
.roar-mascot-mark .roar-final-frame { width:196px !important; height:126px !important; bottom:14px !important; }
.value-panel:nth-child(1) { background:var(--sky) !important; }
.value-panel:nth-child(2) { background:#dcecff !important; }
.value-panel:nth-child(3) { background:#c9e0ff !important; }
.value-panel:nth-child(4) { background:#b9d6ff !important; }
.value-panel .value-shade { inset:42% 0 0 !important; background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.92) 88%) !important; }

/* Q7 R.O.A.R. journey: front-facing endpoints, animated transit, and an intentional path. */
.values-intro { display:block !important; min-height:0 !important; margin:0 0 14px !important; padding:0 !important; overflow:visible !important; }
.values-heading { margin:0 0 14px !important; padding:0 !important; }
.roar-mascot-mark {
  --lion-x: 67%;
  position:relative !important;
  display:block !important;
  width:100% !important;
  height:144px !important;
  overflow:hidden !important;
  border:1px solid var(--line);
  border-radius:12px 12px 0 0;
  background:linear-gradient(100deg, #f8fcff 0%, #edf8ff 48%, #f8fcff 100%);
}
.roar-mascot-mark::before {
  position:absolute;
  right:6%; bottom:29px; left:6%;
  height:2px;
  background:repeating-linear-gradient(90deg, var(--line) 0 12px, transparent 12px 20px);
  content:"";
}
.roar-mascot-mark::after { display:none !important; }
.roar-path-labels {
  position:absolute; z-index:1; right:6%; bottom:13px; left:6%;
  display:grid; grid-template-columns:repeat(4, 1fr); align-items:center; text-align:center;
}
.roar-path-labels i {
  display:grid; width:22px; height:22px; margin-inline:auto; place-items:center;
  border:1px solid var(--line); border-radius:50%; color:var(--blue); background:var(--white);
  font:600 .67rem/1 var(--sans); font-style:normal;
}
.roar-walk-cycle {
  position:absolute; z-index:3; left:var(--lion-x); bottom:16px;
  display:block !important; width:210px; height:118px; visibility:hidden; opacity:0;
  transform:translateX(-50%); transition:opacity 90ms linear;
}
.roar-walk-frame { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; }
.roar-endpoint-frame {
  position:absolute !important; z-index:4 !important; left:var(--lion-x) !important; right:auto !important; bottom:-18px !important;
  display:block !important; width:178px !important; height:178px !important; max-width:none !important;
  visibility:visible !important; opacity:1 !important; object-fit:contain !important;
  transform:translateX(-50%) !important; transition:left 760ms cubic-bezier(.22,.8,.25,1), opacity 90ms linear !important;
  animation:none !important;
}
.roar-mascot-mark.is-walking .roar-endpoint-frame { opacity:0 !important; }
.roar-mascot-mark.is-walking .roar-walk-cycle { visibility:visible; opacity:1; transition:left 760ms cubic-bezier(.22,.8,.25,1), opacity 90ms linear; }
.roar-mascot-mark.is-walking .roar-walk-frame-one { animation:lion-step-one 480ms steps(1,end) infinite; }
.roar-mascot-mark.is-walking .roar-walk-frame-two { animation:lion-step-two 480ms steps(1,end) infinite; }
.roar-mascot-mark.is-walking .roar-walk-frame-three { animation:lion-step-three 480ms steps(1,end) infinite; }
@media (max-width:520px) {
  .roar-mascot-mark { height:126px !important; border-radius:10px 10px 0 0; }
  .roar-endpoint-frame { width:152px !important; height:152px !important; bottom:-16px !important; }
  .roar-walk-cycle { width:176px; height:104px; bottom:15px; }
}
@media (prefers-reduced-motion:reduce) {
  .roar-endpoint-frame, .roar-walk-cycle { transition:none !important; }
  .roar-walk-frame { animation:none !important; }
}
/* Q7 alignment and specificity repair. */
.values-intro { width:min(calc(100% - 7.5rem), var(--max)) !important; margin-right:auto !important; margin-left:auto !important; }
.roar-mascot-mark .roar-walk-cycle { display:block !important; visibility:hidden !important; }
.roar-mascot-mark.is-walking .roar-walk-cycle { visibility:visible !important; opacity:1 !important; }
@media (max-width:680px) { .values-intro { width:min(calc(100% - 2rem), var(--max)) !important; } }
/* Q8: borderless R.O.A.R. promenade — keep the page quiet, let the lion carry the motion. */
.values-heading { margin-bottom:10px !important; }
.roar-mascot-mark {
  height:154px !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
}
.roar-mascot-mark::before {
  right:7%; bottom:27px; left:7%;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, var(--line) 5%, var(--line) 95%, transparent 100%) !important;
}
.roar-path-labels { right:7%; bottom:7px; left:7%; }
.roar-path-labels i {
  width:20px; height:20px;
  border-color:transparent !important;
  color:var(--blue);
  background:transparent !important;
  font-size:.69rem;
}
.roar-endpoint-frame {
  width:150px !important;
  height:150px !important;
  bottom:-1px !important;
  object-fit:contain !important;
}
.roar-walk-cycle {
  width:194px !important;
  height:108px !important;
  bottom:31px !important;
}
@media (max-width:520px) {
  .roar-mascot-mark { height:136px !important; }
  .roar-endpoint-frame { width:132px !important; height:132px !important; bottom:-1px !important; }
  .roar-walk-cycle { width:164px !important; height:92px !important; bottom:28px !important; }
}
/* Q9: one destination per card — the lion and marker share each column center. */
.values-intro { width:100% !important; }
.values-heading { width:min(calc(100% - 7.5rem), var(--max)); margin-right:auto !important; margin-left:auto !important; }
.roar-mascot-mark { height:156px !important; overflow:visible !important; }
.roar-mascot-mark::before { right:0 !important; bottom:36px !important; left:0 !important; }
.roar-path-labels { right:0 !important; bottom:0 !important; left:0 !important; }
.roar-path-labels i {
  position:relative; z-index:2;
  width:38px; height:38px;
  border:2px solid var(--blue) !important;
  border-radius:50%;
  color:var(--blue) !important;
  background:var(--white) !important;
  font-size:.9rem;
  transition:color 180ms ease, background 180ms ease, transform 180ms ease;
}
.roar-path-labels i::after {
  position:absolute; top:36px; left:50%; width:1px; height:22px;
  background:var(--line); content:""; transform:translateX(-50%);
}
.roar-path-labels i.is-active { color:var(--white) !important; background:var(--blue) !important; transform:translateY(-3px); }
.roar-endpoint-frame { width:150px !important; height:150px !important; bottom:25px !important; }
.roar-walk-cycle { bottom:52px !important; }
@media (max-width:680px) {
  .values-heading { width:min(calc(100% - 2rem), var(--max)); }
  .roar-mascot-mark { height:142px !important; }
  .roar-path-labels i { width:31px; height:31px; font-size:.75rem; }
  .roar-path-labels i::after { top:29px; height:16px; }
  .roar-endpoint-frame { bottom:22px !important; }
  .roar-walk-cycle { bottom:47px !important; }
}
/* Q10: the walking illustration faces its actual direction of travel. */
.roar-mascot-mark.is-moving-left .roar-walk-cycle { transform:translateX(-50%) scaleX(-1) !important; }
/* Q11: crop transparent padding and normalize the visible lion scale. */
.roar-endpoint-frame {
  width:130px !important;
  height:138px !important;
  bottom:23px !important;
  object-fit:fill !important;
}
.roar-walk-cycle {
  width:200px !important;
  height:132px !important;
  bottom:43px !important;
}
.roar-walk-frame { object-fit:fill !important; }
@media (max-width:680px) {
  .roar-endpoint-frame { width:112px !important; height:120px !important; bottom:22px !important; }
  .roar-walk-cycle { width:174px !important; height:114px !important; bottom:42px !important; }
}
/* Q12: preserve the front-facing illustration's natural anatomy. */
.roar-endpoint-frame {
  width:100px !important;
  height:138px !important;
  object-fit:contain !important;
}
/* Q13: a sleek Midway-blue learning path, not a literal road. */
.roar-mascot-mark::before {
  z-index:0;
  right:7% !important; bottom:36px !important; left:7% !important;
  height:10px !important;
  border-radius:999px;
  background:linear-gradient(90deg, #b9d9ec 0%, #0068ff 18%, #0068ff 82%, #b9d9ec 100%) !important;
  box-shadow:0 3px 10px rgba(0,104,255,.16), inset 0 1px 0 rgba(255,255,255,.55);
}
.roar-mascot-mark::after {
  position:absolute !important; z-index:1 !important;
  right:8% !important; bottom:40px !important; left:8% !important;
  display:block !important; height:2px !important;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.96) 0 13px, transparent 13px 25px) !important;
  content:"" !important;
}
.roar-path-labels { z-index:3 !important; bottom:0 !important; }
.roar-path-labels i {
  border:2px solid var(--blue) !important;
  background:var(--white) !important;
  box-shadow:0 3px 8px rgba(0,104,255,.14);
}
.roar-path-labels i::after { background:linear-gradient(var(--blue), var(--line)) !important; }
.roar-path-labels i.is-active {
  background:var(--blue) !important;
  box-shadow:0 5px 14px rgba(0,104,255,.3);
}
.roar-mascot-mark.is-walking::after { animation:roar-route-dashes 760ms linear; }
@keyframes roar-route-dashes { from { background-position:0 0; } to { background-position:25px 0; } }
@media (max-width:680px) {
  .roar-mascot-mark::before { right:5% !important; left:5% !important; }
  .roar-mascot-mark::after { right:6% !important; left:6% !important; }
}
/* Q14: R.O.A.R. value stage — blue title band, calm sky field, no roadway. */
.values-section { background:var(--sky) !important; padding-top:0 !important; }
.values-intro { margin:0 !important; }
.values-heading {
  width:100% !important;
  margin:0 !important;
  padding:1.7rem max(3.75rem, calc((100% - var(--max)) / 2)) 1.8rem !important;
  background:var(--blue) !important;
}
.values-heading .eyebrow { margin-bottom:.35rem; color:rgba(255,255,255,.78) !important; }
.values-intro h2 { color:var(--white) !important; }
.roar-mascot-mark {
  height:164px !important;
  overflow:visible !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.44) 0 25%, rgba(255,255,255,.1) 25% 50%, rgba(255,255,255,.44) 50% 75%, rgba(255,255,255,.1) 75% 100%),
    var(--sky) !important;
}
.roar-mascot-mark::before, .roar-mascot-mark::after { display:none !important; }
.roar-path-labels { bottom:13px !important; }
.roar-path-labels i {
  width:42px !important; height:42px !important;
  border:2px solid var(--white) !important;
  border-radius:8px !important;
  color:var(--blue) !important;
  background:var(--white) !important;
  box-shadow:0 6px 16px rgba(0,81,180,.17) !important;
  font-size:.95rem !important;
}
.roar-path-labels i::after { top:40px !important; height:20px !important; background:rgba(0,104,255,.38) !important; }
.roar-path-labels i.is-active {
  color:var(--white) !important;
  background:var(--blue) !important;
  box-shadow:0 8px 18px rgba(0,81,180,.3) !important;
}
.roar-endpoint-frame { bottom:35px !important; }
.roar-walk-cycle { bottom:55px !important; }
.values-grid { background:var(--white); }
@media (max-width:680px) {
  .values-heading { padding:1.35rem 1rem 1.45rem !important; }
  .roar-mascot-mark { height:145px !important; }
  .roar-path-labels i { width:34px !important; height:34px !important; border-radius:7px !important; font-size:.8rem !important; }
  .roar-path-labels i::after { top:32px !important; height:17px !important; }
  .roar-endpoint-frame { bottom:28px !important; }
  .roar-walk-cycle { bottom:50px !important; }
}
/* Q15: contained blue R.O.A.R. panel, echoing the lower call-to-action. */
.values-section { padding-top:3rem !important; }
.values-heading {
  width:min(calc(100% - 7.5rem), var(--max)) !important;
  min-height:132px;
  margin-right:auto !important;
  margin-left:auto !important;
  padding:2rem clamp(2rem, 5vw, 5rem) !important;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:var(--blue) !important;
}
.roar-mascot-mark {
  z-index:2;
  margin-top:-20px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.48) 0 25%, rgba(255,255,255,.14) 25% 50%, rgba(255,255,255,.48) 50% 75%, rgba(255,255,255,.14) 75% 100%),
    var(--sky) !important;
}
@media (max-width:680px) {
  .values-section { padding-top:2rem !important; }
  .values-heading { width:min(calc(100% - 2rem), var(--max)) !important; min-height:116px; padding:1.45rem 1.25rem !important; }
  .roar-mascot-mark { margin-top:-14px; }
}
/* Q16: dedicated reverse frames preserve the lion's true center while moving left. */
.roar-mascot-mark.is-moving-left .roar-walk-cycle { transform:translateX(-50%) !important; }

/* Q17: both travel directions share one identical positioned transition layer. */
.roar-mascot-mark.is-moving-left .roar-walk-cycle { transform:translateX(-50%) !important; }

/* Q18: the walking and standing lions use the same persistent center-to-center transition. */
.roar-walk-cycle {
  left:var(--lion-x) !important;
  transition:left 760ms cubic-bezier(.22,.8,.25,1), opacity 90ms linear !important;
}

/* Q19: never let the step animation override the shared center anchor. */
.roar-mascot-mark.is-walking .roar-walk-cycle {
  transform:translateX(-50%) !important;
  animation:none !important;
}

/* Accessibility and shared header controls. */
body { font-size:1.0625rem; line-height:1.6; }
.nav-support { color:var(--blue); font-weight:600; }
.nav-health { display:grid; width:42px; height:42px; margin-left:.1rem; place-items:center; border:1px solid var(--blue); border-radius:50%; color:var(--white); background:var(--blue); text-decoration:none; transition:background 160ms ease,color 160ms ease,transform 160ms ease; }
.nav-health svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.nav-health:hover, .nav-health:focus-visible { color:var(--blue); background:var(--white); transform:translateY(-1px); }
@media (max-width:960px) { .nav-health { width:48px; min-height:48px; margin:.45rem 0; } }

/* Locked screenshot-derived Midway wordmark: one consistent identity across the site. */
.site-header { background:var(--white); }
.site-brand {
  width:250px;
  min-width:250px;
  height:52px;
  padding:0;
  flex:0 0 250px;
  background:transparent;
}
.site-brand img {
  width:250px;
  height:auto;
  max-height:44px;
  flex:0 0 auto;
  object-fit:contain;
  object-position:left center;
}
.site-brand span { display:none; }
.footer-brand {
  width:250px;
  min-width:250px;
  height:auto;
  margin-bottom:1.2rem;
}
.footer-brand img { width:250px; max-height:44px; }
@media (max-width:680px) {
  .site-brand {
    width:210px;
    min-width:210px;
    height:46px;
    flex-basis:210px;
  }
  .site-brand img { width:210px; max-height:38px; }
  .footer-brand { width:210px; min-width:210px; height:auto; }
  .footer-brand img { width:210px; max-height:38px; }
}

/* The global header is viewport-anchored; page content remains centered separately. */
.site-header .header-main {
  width:100%;
  max-width:none;
  margin-inline:0;
  padding-inline:80px;
}
@media (max-width:1120px) {
  .site-header .header-main { padding-inline:32px; }
}
@media (max-width:680px) {
  .site-header .header-main { padding-inline:16px; }
}

/* The public crop uses the same focal point and zoom shown in the page editor. */
.mega-image img,.value-panel img,.learning-image img,.updates-teacher img,.enroll-image img { object-position:var(--midway-home-focus-x,50%) var(--midway-home-focus-y,50%); transform:scale(var(--midway-home-zoom,1)); transform-origin:var(--midway-home-focus-x,50%) var(--midway-home-focus-y,50%); }
.value-panel:hover img,.value-panel:focus-visible img,.value-panel.is-active img { transform:scale(calc(var(--midway-home-zoom,1) * 1.025)); }
.enroll-image img { object-fit:var(--enroll-fit,contain); object-position:var(--enroll-x,50%) var(--enroll-y,100%); transform-origin:var(--enroll-x,50%) var(--enroll-y,100%); }
.mega-image img.midway-image-cutout,.value-panel img.midway-image-cutout,.learning-image img.midway-image-cutout,.updates-teacher img.midway-image-cutout,.enroll-image img.midway-image-cutout { object-fit:contain; filter:drop-shadow(10px 10px 0 rgba(0,104,255,.32)); }
.updates-calendar .event-list { width:100%; margin:.25rem 0 .75rem; padding:0; list-style:none; }
.updates-calendar .event-list li { display:grid; grid-template-columns:auto minmax(0,1fr); gap:.65rem; padding:.45rem 0; border-top:1px solid var(--line); align-items:baseline; }
.updates-calendar .event-list strong { color:var(--blue); font-size:.82rem; white-space:nowrap; }
.updates-calendar .event-list span { color:var(--ink); font-weight:600; overflow-wrap:anywhere; }
.hero-slide img { object-position:var(--hero-x,50%) var(--hero-y,42%) !important; transform:scale(var(--hero-zoom,1)); transform-origin:var(--hero-x,50%) var(--hero-y,42%); }

/* Local homepage concept: reference-led hero and centered family links. */
.hero { min-height:731px; overflow:visible; background:var(--sky); }
.hero-slides,.hero-slide { overflow:hidden; }
.hero-slide img { height:100%; object-fit:cover; }
.hero-shade { z-index:1; top:0; right:auto; bottom:0; left:0; width:clamp(730px,51.35vw,860px); border-radius:0 0 clamp(100px,7vw,125px) 0 / 0 0 100% 0; background:#d8edfc; }
.hero-shade::before { position:absolute; z-index:0; inset:0 30px 0 0; border-radius:0 0 clamp(190px,12.5vw,220px) 0 / 0 0 100% 0; background:#f0faff; content:""; }
.hero-shade::after { position:absolute; z-index:1; top:2.75rem; right:3.25rem; width:90px; height:90px; color:#b9ddfa; background:currentColor; content:""; opacity:.72; mask:url("assets/icons/star.svg") center/contain no-repeat; -webkit-mask:url("assets/icons/star.svg") center/contain no-repeat; transform:rotate(-9deg); }
.hero-inner { z-index:2; width:min(calc(100% - 8rem),1560px); max-width:none; min-height:731px; }
.hero-copy { width:min(690px,49%); padding:7.4rem 0 6.9rem; }
.hero .eyebrow { display:flex; align-items:center; gap:1rem; margin-bottom:1.25rem; color:var(--blue); font-size:1.05rem; font-weight:600; letter-spacing:.11em; transform:translateY(-9px); }
.hero .eyebrow::before { width:52px; height:4px; flex:0 0 52px; border-radius:999px; background:var(--blue); content:""; }
.hero h1 { position:relative; max-width:750px; color:#052b65; font-size:clamp(5.5rem,6.8vw,7.12rem); font-weight:600; letter-spacing:-.052em; line-height:.91; }
.hero h1::after { position:absolute; top:3.25rem; right:-3.4rem; width:52px; height:52px; color:var(--blue); background:currentColor; content:""; mask:url("assets/icons/chart-bar.svg") center/contain no-repeat; -webkit-mask:url("assets/icons/chart-bar.svg") center/contain no-repeat; transform:rotate(-48deg); }
.hero-title-accent { display:inline-block; color:var(--blue); transform:scale(1.12,1.08); transform-origin:left top; }
.hero-copy>p:not(.eyebrow) { margin:1.45rem 0 2rem; color:#284b7a; font-size:2rem; line-height:1.35; transform:scaleX(1.075); transform-origin:left center; }
.hero-actions { gap:1.25rem; }
.hero-actions .button { position:relative; min-width:312px; min-height:78px; padding:.9rem 3rem .9rem 2.65rem; justify-content:flex-start; border-radius:12px; box-shadow:0 8px 18px rgba(0,104,255,.12); font-size:1.4rem; }
.hero-actions .button::after { position:absolute; right:2rem; width:20px; height:20px; background:currentColor; content:""; mask:url("assets/icons/chevron-right.svg") center/contain no-repeat; -webkit-mask:url("assets/icons/chevron-right.svg") center/contain no-repeat; }
.hero-actions .button--light { min-width:296px; }
.hero-actions .button--light { color:var(--blue); border-color:var(--blue); background:rgba(255,255,255,.9); }
.hero-actions .button--light:hover,.hero-actions .button--light:focus-visible { color:var(--white); border-color:var(--blue); background:var(--blue); }
.hero-benefits { display:grid; width:665px; margin-top:3.8rem; grid-template-columns:repeat(3,minmax(0,1fr)); }
.hero-benefit { display:flex; min-width:0; min-height:44px; padding:0 2.35rem; align-items:center; gap:.75rem; border-left:1px solid #b9d9ec; color:#284b7a; }
.hero-benefit:first-child { padding-left:0; border-left:0; gap:2.1rem; }
.hero-benefit:first-child .hero-benefit-icon { margin-left:.45rem; }
.hero-benefit-icon { width:44px; height:44px; flex:0 0 44px; background:var(--blue); mask-position:center; mask-repeat:no-repeat; mask-size:contain; -webkit-mask-position:center; -webkit-mask-repeat:no-repeat; -webkit-mask-size:contain; }
.hero-community-icon { mask-image:url("assets/icons/people-fill.svg"); -webkit-mask-image:url("assets/icons/people-fill.svg"); }
.hero-academics-icon { mask-image:url("assets/icons/chart-bar.svg"); -webkit-mask-image:url("assets/icons/chart-bar.svg"); }
.hero-futures-icon { mask-image:url("assets/icons/heart-fill.svg"); -webkit-mask-image:url("assets/icons/heart-fill.svg"); }
.hero-benefit>span:last-child { display:grid; min-width:0; }
.hero-benefit strong { color:var(--blue); font-size:1.22rem; font-weight:600; line-height:1.15; }
.hero-benefit small { margin-top:.25rem; color:#284b7a; font-size:1.22rem; line-height:1.15; }
.hero-controls { right:2.25rem; bottom:5.5rem; left:auto; overflow:hidden; border-color:rgba(0,104,255,.18); border-radius:12px; box-shadow:0 8px 24px rgba(18,54,82,.12); transform:none; }
.family-rail { z-index:8; margin-top:-58px; padding-bottom:2.25rem; background:linear-gradient(180deg,var(--sky) 0,var(--sky) 58px,var(--white) 58px); }
.family-rail-inner { width:min(calc(100% - 8rem),1547px); min-height:116px; overflow:hidden; border:1px solid rgba(0,104,255,.14); border-radius:20px; background:rgba(255,255,255,.97); box-shadow:0 18px 48px rgba(18,54,82,.14); }
.family-rail a { min-height:116px; padding:1rem .75rem; gap:.65rem; border-left-color:#c7e3f5; font-size:.96rem; font-weight:600; transition:color 160ms ease,background 160ms ease,transform 160ms ease; }
.family-rail a:hover,.family-rail a:focus-visible { color:#052b65; background:#f4fbff; transform:translateY(-2px); }
.shortcut-icon { width:32px; height:32px; flex-basis:32px; }
@media (max-width:1120px) {
  .hero-shade { width:58vw; }
  .hero-inner { width:min(calc(100% - 3rem),1560px); }
  .hero-copy { width:50%; }
  .hero h1 { font-size:clamp(3.55rem,5.8vw,4.7rem); }
  .family-rail-inner { width:min(calc(100% - 3rem),1560px); }
}
@media (max-width:960px) {
  .hero,.hero-inner { min-height:625px; }
  .hero-shade { width:67vw; }
  .hero-copy { width:58%; padding-bottom:7.5rem; }
  .hero h1 { font-size:clamp(3.35rem,7vw,4.2rem); }
  .family-rail { margin-top:-52px; background:linear-gradient(180deg,var(--sky) 0,var(--sky) 52px,var(--white) 52px); }
  .family-rail-inner { min-height:0; border-radius:18px; }
  .family-rail a { min-height:92px; }
  .hero-benefits { width:100%; }
  .hero-benefit { padding-inline:.75rem; gap:.55rem; }
  .hero-benefit-icon { width:30px; height:30px; flex-basis:30px; }
  .hero-benefit strong,.hero-benefit small { font-size:.78rem; }
}
@media (max-width:680px) {
  .hero,.hero-inner { min-height:660px; }
  .hero-shade { top:auto; width:100%; height:66%; border-radius:46% 46% 0 0 / 14% 14% 0 0; background:rgba(234,247,255,.96); box-shadow:0 -24px 45px rgba(207,234,255,.3); }
  .hero-shade::before { display:none; }
  .hero-shade::after { top:2.75rem; right:1.4rem; width:48px; height:48px; }
  .hero-inner { width:min(calc(100% - 2rem),var(--max)); align-items:flex-end; }
  .hero-copy { width:100%; padding:12rem 0 8.2rem; }
  .hero .eyebrow { margin-bottom:.8rem; font-size:.75rem; }
  .hero .eyebrow::before { width:36px; height:3px; flex-basis:36px; }
  .hero h1 { font-size:clamp(3rem,13vw,4rem); }
  .hero-copy>p:not(.eyebrow) { margin:1rem 0 1.25rem; font-size:1.05rem; }
  .hero-actions { flex-direction:row; gap:.65rem; }
  .hero-actions .button { min-width:0; min-height:52px; padding-inline:.95rem; font-size:.84rem; }
  .hero-actions .button::after { display:none; }
  .hero-benefits { display:none; }
  .hero-controls { right:1rem; bottom:5.1rem; }
  .hero-controls button { width:42px; height:42px; }
  .family-rail { margin-top:-44px; padding-bottom:1.5rem; background:linear-gradient(180deg,var(--sky) 0,var(--sky) 44px,var(--white) 44px); }
  .family-rail-inner { width:min(calc(100% - 2rem),1560px); border-radius:16px; box-shadow:0 14px 35px rgba(18,54,82,.13); }
  .family-rail a { min-height:86px; font-size:.76rem; }
  .shortcut-icon { width:26px; height:26px; flex-basis:26px; }
}
@media (max-width:430px) {
  .hero-actions .button { padding-inline:.75rem; }
  .family-rail-inner { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .family-rail a:nth-child(odd) { border-left:0; }
  .family-rail a:nth-child(even) { border-left:1px solid #c7e3f5; }
  .family-rail a:nth-child(n+3) { border-top:1px solid #c7e3f5; }
}

/* Full homepage reference: compact white header, organic hero, and overlapping family rail. */
.site-header .header-main { min-height:106px; }
.site-header .site-brand { width:370px; min-width:370px; flex-basis:370px; }
.site-header .site-brand img { width:370px; max-height:34px; }
.site-header .primary-nav { gap:1.3rem; }
.site-header .nav-trigger,.site-header .nav-direct { font-size:1.05rem; }
.hero { min-height:660px; }
.hero-inner { width:min(calc(100% - 7.25rem),1560px); min-height:660px; align-items:flex-start; }
.hero-copy { width:min(680px,44%); padding:5.6rem 0 4rem; }
.hero .eyebrow { margin-bottom:2rem; font-size:1rem; transform:translateY(-3px); }
.hero h1 { max-width:680px; font-size:clamp(5rem,6.1vw,6.4rem); line-height:.82; }
.hero h1::after { top:-.25rem; right:auto; left:610px; width:48px; height:48px; }
.hero-title-accent { transform:scale(1.08,1.05); transform-origin:left top; }
.hero-copy>p:not(.eyebrow) { margin:1.35rem 0 1.65rem; font-size:1.75rem; transform:scaleX(1.06); transform-origin:left center; }
.hero-actions { gap:1rem; }
.hero-actions .button { min-width:268px; min-height:68px; padding:.8rem 2.75rem .8rem 2rem; border-radius:11px; font-size:1.15rem; }
.hero-actions .button--light { min-width:257px; }
.hero-benefits { width:610px; margin-top:3.2rem; }
.hero-benefit { padding-inline:1.9rem; gap:.7rem; }
.hero-benefit:first-child { gap:1.35rem; }
.hero-benefit-icon { width:40px; height:40px; flex-basis:40px; }
.hero-benefit strong,.hero-benefit small { font-size:1.05rem; }
.hero-shade { width:min(48.35vw,810px); border-radius:0 0 min(14.45vw,242px) 0 / 0 0 100% 0; }
.hero-shade::before { inset:0 40px 0 0; border-radius:0 0 min(17vw,285px) 0 / 0 0 100% 0; }
.hero-shade::after { top:2rem; right:6.1rem; width:86px; height:86px; }
.hero-controls { right:2.25rem; bottom:2rem; }
.family-rail { margin-top:-62px; padding-bottom:57px; background:linear-gradient(180deg,transparent 0,transparent 62px,var(--sky) 62px,var(--sky) 100%); }
.family-rail-inner { width:min(calc(100% - 7rem),1560px); min-height:132px; border-radius:18px; }
.family-rail a { min-height:132px; }

@media (max-width:1120px) {
  .site-header .site-brand { width:280px; min-width:280px; flex-basis:280px; }
  .site-header .site-brand img { width:280px; }
  .site-header .primary-nav { gap:.75rem; }
  .site-header .nav-trigger,.site-header .nav-direct { font-size:.79rem; }
  .hero-copy { width:48%; }
  .hero h1 { font-size:clamp(4rem,6.8vw,5.35rem); }
  .hero h1::after { top:2rem; right:-2rem; left:auto; }
  .hero-benefits { width:100%; }
  .family-rail-inner { width:min(calc(100% - 3rem),1560px); }
}
@media (max-width:960px) {
  .site-header .header-main { min-height:84px; }
  .hero,.hero-inner { min-height:625px; }
  .hero-copy { width:58%; padding-top:7.25rem; }
  .hero h1 { font-size:clamp(3.35rem,7vw,4.2rem); }
  .hero-copy>p:not(.eyebrow) { font-size:1.25rem; }
  .hero-actions .button { min-width:0; min-height:58px; font-size:1rem; }
  .family-rail { margin-top:-52px; padding-bottom:2rem; background:linear-gradient(180deg,transparent 0,transparent 52px,var(--sky) 52px,var(--sky) 100%); }
  .family-rail-inner,.family-rail a { min-height:92px; }
}
@media (max-width:680px) {
  .site-header .site-brand { width:210px; min-width:210px; flex-basis:210px; }
  .site-header .site-brand img { width:210px; max-height:38px; }
  .hero,.hero-inner { min-height:660px; }
  .hero-shade { top:auto; right:auto; bottom:0; left:0; width:100%; height:66%; border-radius:46% 46% 0 0 / 14% 14% 0 0; background:rgba(234,247,255,.96); box-shadow:0 -24px 45px rgba(207,234,255,.3); }
  .hero-shade::before { display:none; }
  .hero h1::after { display:none; }
  .hero-inner { width:min(calc(100% - 2rem),var(--max)); align-items:flex-end; }
  .hero-copy { width:100%; padding:12rem 0 8.2rem; }
  .hero .eyebrow { margin-bottom:.8rem; font-size:.75rem; }
  .hero h1 { font-size:clamp(3rem,13vw,4rem); }
  .hero-copy>p:not(.eyebrow) { margin:1rem 0 1.25rem; font-size:1.05rem; }
  .hero-actions .button { min-height:52px; padding-inline:.95rem; font-size:.84rem; }
  .hero-benefits { display:none; }
  .family-rail { margin-top:-44px; padding-bottom:1.5rem; background:linear-gradient(180deg,transparent 0,transparent 44px,var(--sky) 44px,var(--sky) 100%); }
  .family-rail-inner,.family-rail a { min-height:86px; }
}

/* Exact 881 x 718 hero baseline selected on 2026-09-20. */
.hero-benefits { display:none; }
.hero--no-divider .hero-shade { display:none; }
@media (min-width:1121px) {
  .hero { min-height:756px; }
  .hero-inner { width:min(calc(100% - 8rem),1560px); min-height:756px; align-items:flex-start; }
  .hero-copy { width:min(750px,49%); padding:7.1rem 0 4rem; }
  .hero .eyebrow { margin-bottom:1.25rem; font-size:1.05rem; transform:translateY(-13px); }
  .hero h1 { max-width:750px; font-size:clamp(5.5rem,6.8vw,7.12rem); line-height:.91; transform:translateY(4px); }
  .hero h1::after { top:-.95rem; right:auto; left:710px; width:52px; height:52px; }
  .hero-title-accent { transform:scale(1.12,1.08); transform-origin:left top; }
  .hero-copy>p:not(.eyebrow) { margin:1.45rem 0 1.85rem; font-size:2rem; transform:scaleX(1.075); transform-origin:left center; }
  .hero-actions { gap:1.25rem; }
  .hero-actions .button { min-width:312px; min-height:78px; padding:.9rem 3rem .9rem 2.65rem; font-size:1.4rem; }
  .hero-actions .button--light { min-width:296px; }
  .hero-shade {
    width:860px;
    border-radius:0;
    clip-path:path("M 0 0 H 810 C 775 45 750 100 740 180 C 720 250 760 330 735 420 C 700 510 690 620 685 756 H 0 Z");
    -webkit-clip-path:path("M 0 0 H 810 C 775 45 750 100 740 180 C 720 250 760 330 735 420 C 700 510 690 620 685 756 H 0 Z");
  }
  .hero-shade::before {
    inset:0 30px 0 0;
    border-radius:0;
    clip-path:path("M 0 0 H 780 C 745 50 720 115 710 190 C 695 275 730 335 705 425 C 675 520 640 650 610 756 H 0 Z");
    -webkit-clip-path:path("M 0 0 H 780 C 745 50 720 115 710 190 C 695 275 730 335 705 425 C 675 520 640 650 610 756 H 0 Z");
  }
  .hero-shade::after { top:2.75rem; right:8.4rem; width:90px; height:90px; }
  .hero-controls { right:2.25rem; bottom:5.5rem; }
  .family-rail { margin-top:-64px; padding-bottom:2.25rem; background:linear-gradient(180deg,transparent 0,transparent 64px,var(--sky) 64px,var(--sky) 100%); }
  .family-rail-inner { width:min(calc(100% - 8rem),1547px); min-height:116px; border-radius:20px; }
  .family-rail a { min-height:116px; }
}

/* Keep the public copy inside the same 860 x 756 divider represented in the editor preview. */
@media (min-width:681px) {
  .hero-inner { width:100%; max-width:none; padding-left:6.5vw; padding-right:0; align-items:flex-start; }
  .hero-copy { width:33vw; max-width:555px; padding:6.6rem 0 4rem; }
  .hero .eyebrow { margin-bottom:1.15rem; font-size:clamp(.78rem,.72vw,1rem); transform:none; }
  .hero h1 { max-width:100%; font-size:clamp(3.25rem,4.25vw,4.75rem); line-height:.91; transform:none; }
  .hero h1::after { display:none; }
  .hero-title-accent { transform:none; }
  .hero-copy>p:not(.eyebrow) { margin:1.15rem 0 1.45rem; font-size:clamp(1rem,1.25vw,1.35rem); line-height:1.3; transform:none; }
  .hero-actions { width:100%; gap:.75rem; }
  .hero-actions .button,.hero-actions .button--light { min-width:0; min-height:58px; padding:.75rem 2.25rem .75rem 1.25rem; flex:1 1 0; font-size:clamp(.84rem,.9vw,1rem); }
  .hero-actions .button::after { right:1rem; width:16px; height:16px; }
}

/* Mobile usability baseline: preserve the desktop design while making every
   primary action, navigation item, and content group comfortable on phones. */
@media (max-width:680px) {
  .site-header .header-main { min-height:72px; gap:.75rem; }
  .site-header .site-brand { width:min(210px,calc(100vw - 88px)); min-width:0; flex-basis:auto; }
  .site-header .site-brand img { width:100%; height:auto; max-height:40px; object-fit:contain; object-position:left center; }
  .menu-button { width:52px; min-height:52px; flex:0 0 52px; }
  .primary-nav { top:73px; max-height:calc(100dvh - 73px); padding:.5rem 1rem max(1.5rem,env(safe-area-inset-bottom)); overscroll-behavior:contain; }
  .primary-nav .nav-trigger,
  .primary-nav .nav-direct,
  .primary-nav .mega-links a { min-height:48px; }
  .primary-nav .nav-health {
    display:flex;
    width:100%;
    min-height:52px;
    margin:0;
    align-items:center;
    justify-content:flex-start;
    gap:.7rem;
    border:0;
    border-bottom:1px solid var(--line);
    border-radius:0;
    color:var(--ink);
    background:transparent;
  }
  .primary-nav .nav-health-symbol {
    display:grid;
    width:32px;
    height:32px;
    flex:0 0 32px;
    place-items:center;
    border-radius:50%;
    color:var(--white);
    background:var(--blue);
  }
  .primary-nav .nav-health .sr-only {
    position:static;
    width:auto;
    height:auto;
    margin:0;
    overflow:visible;
    clip:auto;
    white-space:normal;
  }
  .hero-actions,
  .enroll-copy>div { display:grid; width:100%; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.65rem; }
  .hero-actions .button,
  .hero-actions .text-link,
  .enroll-copy>div .button,
  .enroll-copy>div .text-link { width:100%; justify-content:center; text-align:center; }
  .hero-copy>p:not(.eyebrow) { transform:none; }
  .learning-image { min-height:300px; }
  .learning-copy { min-height:0; }
  .updates-signal { grid-template-columns:96px minmax(0,1fr); }
  .updates-calendar { min-width:0; padding:1.5rem 1rem; }
  .updates-calendar h2,
  .updates-calendar a,
  .updates-calendar button { overflow-wrap:anywhere; }
  .site-footer { padding-top:2.25rem; }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.75rem 1rem; }
  .footer-grid>div:first-child { grid-column:1/-1; }
  .footer-grid>div:not(:first-child) a { min-height:40px; padding-block:.2rem; overflow-wrap:anywhere; }
  .footer-bottom { margin-top:1.75rem; }
}

@media (max-width:370px) {
  .hero-actions,
  .enroll-copy>div,
  .footer-grid { grid-template-columns:1fr; }
  .footer-grid>div:first-child { grid-column:auto; }
}

/* 0.0.16 phone composition. Keep the desktop visual language, but give each
   section enough width and rhythm to read naturally on a handheld screen. */
@media (max-width:680px) {
  html { scroll-padding-top:72px; }
  body { font-size:1rem; line-height:1.58; }
  .wrap { width:min(calc(100% - 2rem),var(--max)); }

  .site-header { position:sticky; top:0; box-shadow:0 1px 0 rgba(0,104,255,.12); }
  .site-header .header-main { min-height:70px; }
  .primary-nav { top:71px; max-height:calc(100dvh - 71px); }

  .hero,.hero-inner { min-height:700px; }
  .hero-slides { inset:0 0 auto; height:46%; }
  .hero-slide { inset:0; height:100%; }
  .hero-slide img { object-position:var(--hero-x,50%) var(--hero-y,42%)!important; }
  .hero-shade { height:61%; }
  .hero-copy { padding:0 0 7.2rem; }
  .hero h1 { font-size:clamp(2.8rem,12vw,3.5rem); line-height:.94; }
  .hero-actions .button { min-height:54px; line-height:1.18; }
  .hero-controls { bottom:4.8rem; }

  .family-rail { padding-bottom:2rem; }
  .family-rail-inner { width:min(calc(100% - 2rem),1560px); }
  .family-rail a { min-height:88px; padding:.85rem .45rem; font-size:.8rem; }

  .values-section { padding-top:2.25rem!important; }
  .values-heading {
    min-height:0;
    padding:1.35rem 1.25rem 1.5rem!important;
    border-radius:12px 12px 0 0;
  }
  .values-intro h2 { font-size:clamp(2rem,10vw,2.65rem); line-height:1; }
  .roar-mascot-mark {
    height:132px!important;
    margin-top:0;
    overflow:hidden!important;
    border-radius:0 0 12px 12px!important;
  }
  .roar-endpoint-frame { width:88px!important; height:116px!important; bottom:24px!important; }
  .roar-walk-cycle { width:148px!important; height:98px!important; bottom:43px!important; }
  .roar-path-labels { bottom:10px!important; }
  .roar-path-labels i { width:32px!important; height:32px!important; font-size:.78rem!important; }
  .roar-path-labels i::after { display:none; }

  .values-grid { grid-template-columns:1fr; }
  .value-panel {
    width:100%;
    min-width:0;
    height:clamp(240px,64vw,260px);
    min-height:0;
    max-height:260px;
    aspect-ratio:auto;
  }
  .value-panel>img { position:absolute; inset:0; width:100%; height:100%; }
  .value-copy { right:1.15rem; bottom:1.1rem; left:1.15rem; }
  .value-copy strong { font-size:clamp(1.65rem,8vw,2.15rem); }
  .value-copy span { max-width:30rem; font-size:.92rem; line-height:1.4; }
  .values-action { padding:1.25rem 1rem 2.5rem; }

  .learning-image { min-height:240px; }
  .learning-copy { min-height:0; padding:2.5rem 1rem 2.75rem; }
  .learning-copy h2 { font-size:clamp(2.3rem,10vw,2.85rem); line-height:1.03; }

  .updates-section { padding:2.75rem 0; }
  .updates-signal { grid-template-columns:88px minmax(0,1fr); }
  .updates-date { min-height:164px; padding:.8rem .45rem; }
  .updates-date strong { font-size:3rem; }
  .updates-calendar { padding:1.5rem 1rem; }
  .updates-calendar h2 { font-size:1.45rem; line-height:1.15; }
  .updates-teacher {
    height:144px;
    min-height:144px;
    grid-template-columns:104px minmax(0,1fr);
    align-items:stretch;
    overflow:hidden;
  }
  .updates-teacher-image { height:144px; overflow:hidden; }
  .updates-teacher img { width:104px; height:144px; }
  .updates-teacher-copy { align-content:center; padding:1rem; }
  .updates-teacher-copy small { font-size:.75rem; }
  .updates-teacher-copy strong { margin-block:.3rem .55rem; font-size:1.2rem; }
  .updates-teacher-copy b { font-size:.88rem; }

  .enroll-section { padding:2.75rem 0; }
  .enroll-copy { padding:2rem 1.25rem 1.25rem; }
  .enroll-copy h2 { font-size:clamp(2.2rem,10vw,2.75rem); line-height:1.04; }
  .enroll-image { height:250px; margin-top:0; }

  .footer-grid { gap:1.5rem 1rem; }
  .footer-grid p { margin-bottom:0; }
  .footer-grid>div:not(:first-child) a { min-height:44px; display:flex; align-items:center; }
  .footer-bottom a { display:inline-flex; min-height:44px; align-items:center; }
}

@media (max-width:380px) {
  .hero,.hero-inner { min-height:760px; }
  .hero-actions,
  .enroll-copy>div { grid-template-columns:1fr; }
  .hero-copy { padding-bottom:6.75rem; }
  .hero-controls { bottom:4.55rem; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-grid>div:first-child { grid-column:auto; }
}

/* 0.0.16 mobile layer separation: the photo, CTA panel, controls, and
   R.O.A.R. mascot each get their own visual plane on narrow screens. */
@media (max-width:680px) {
  .hero { isolation:isolate; overflow:hidden; }
  .hero-slides { z-index:0; }
  .hero-shade { z-index:1; pointer-events:none; }
  .hero-inner { z-index:2; }
  .hero-copy { position:relative; z-index:3; }
  .hero-actions { position:relative; z-index:4; }
  .hero-controls { z-index:5; bottom:4rem; }

  .values-intro { display:block !important; }
  .values-heading { margin-bottom:0 !important; }
  .roar-mascot-mark {
    margin-top:12px !important;
    margin-bottom:12px !important;
  }
}

@media (max-width:380px) {
  .hero-controls { bottom:3.75rem; }
}