.landing {
  --cream: #fffaf5;
  --paper: #fffdf9;
  --wine: #321018;
  --hero-red: #b5132d;
  --red-dark: #9d0c26;
  --red: #ba142c;
  --landing-border: #ecddda;
  --landing-gap: clamp(20px, 4.5vw, 66px);
  --section-space: clamp(50px, 7.8vw, 108px);
  background: var(--paper);
  color: #281b1e;
  font-synthesis: weight;
}
.landing .site-wrap {
  width: min(1192px, calc(100% - var(--landing-gap) * 2 - 44px));
  max-width: none;
  margin-inline: auto;
  position: relative;
  left: -22px;
}
.landing .site-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.landing .site-icon {
  width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.landing [id] { scroll-margin-top: 18px; }
.landing .site-header { border-color: var(--landing-border); background: white; position: relative; z-index: 8; }
.landing .topbar { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(10px, 2.1vw, 30px); min-height: 76px; height: auto; }
.landing .topbar nav { justify-content: center; gap: clamp(10px, 2.3vw, 30px); }
.landing .topbar nav a, .landing .topbar .portal-link { font-size: .92rem; line-height: 1.22; }
.landing .topbar .portal-link {
  min-height: 44px; justify-content: center; text-decoration: none; font-weight: 800;
  white-space: nowrap; color: var(--wine); border-radius: 100px;
}
.landing .topbar .portal-link:hover { color: var(--red-dark); background: var(--blush); }
.landing .topbar .portal-link .site-icon { width: 16px; height: 16px; }
.landing .site-menu-toggle {
  display: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--landing-border);
  border-radius: 50%; background: white; color: var(--wine); place-items: center;
}
.landing .site-menu-toggle[aria-expanded=true] { background: var(--blush); color: var(--red-dark); }
.landing .hero-band {
  isolation: isolate;
  background: radial-gradient(ellipse at 82% 7%, #9e2036 0, transparent 55%),
    linear-gradient(118deg, #301017 6%, #581325 68%, #761429 100%);
  color: #fffaf5;
}
.landing .hero {
  grid-template-columns: minmax(0, 1.13fr) minmax(0, .87fr); gap: clamp(24px, 4.5vw, 76px);
  padding-block: clamp(56px, 7vw, 96px);
}
.landing .overline { text-transform: uppercase; font-size: .76rem; letter-spacing: .115em; }
.landing .hero-location { color: #ffb5bf; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.landing .hero-location .site-icon { width: 17px; height: 17px; }
.landing .hero h1 {
  max-width: 10ch; font-size: clamp(3.7rem, 7.1vw, 6.55rem); font-weight: 850;
  margin: 17px 0 20px; line-height: .95; letter-spacing: -.08em;
}
.landing .hero h1 em { display: block; color: #ffaeb9; }
.landing .hero-intro { max-width: 44ch; color: #f4dfe0; line-height: 1.55; margin-bottom: 27px; }
.landing .hero-actions { gap: 10px; }
.landing .btn { border-radius: 100px; }
.landing .hero-primary { background: #fff6ea; border-color: #fff6ea; color: #561022; }
.landing .hero-primary:hover { background: #f9dce0; border-color: #f9dce0; }
.landing .hero-secondary { background: #fff0; border-color: #fff6ea64; color: #fff6ea; }
.landing .hero-secondary:hover { background: #fff6ea20; border-color: #fff6ea; }
.landing .mascot-stage {
  isolation: isolate; display: grid; position: relative; aspect-ratio: 1.08; align-self: center;
  overflow: hidden; place-items: center; min-width: 0; width: 100%; max-width: 465px;
  margin-inline: auto; border-radius: 27px; border: 1px solid #f3a5aa55;
  background: radial-gradient(circle at 48% 43%, #f45e67 0%, #e63449 42%, #a31331 100%);
  box-shadow: inset 0 1px 0 #ffd6d8a3, 0 22px 65px #29091465;
}
.landing .mascot-glow {
  position: absolute; z-index: -1; inset: 7% 12%; border: 1px solid #ffc5c784; border-radius: 50%;
  box-shadow: inset 0 0 0 14px #ffd5d533, inset 0 0 0 15px #ffd5d54d;
  transform: rotate(-20deg);
}
.landing .mascot-art {
  width: min(77%, 360px); height: auto; display: block; margin-bottom: 6%;
  filter: drop-shadow(0 15px 11px #55051f64);
}
.landing .mascot-speech {
  position: absolute; z-index: 1; right: 7%; top: 10%; padding: .38em .7em; border-radius: .76em .76em .76em .12em;
  color: #590f22; background: #fff4e7; font-weight: 850; font-size: clamp(.85rem, 1.8vw, 1.2rem);
  box-shadow: 0 4px 10px #5c14254d; transform: rotate(7deg);
}
.landing .mascot-spark {
  position: absolute; z-index: -1; width: 26px; height: 26px; background: #ffd3d4;
  clip-path: polygon(50% 0, 60% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.landing .spark-one { inset: 16% auto auto 14%; }
.landing .spark-two { inset: auto 15% 25% auto; width: 18px; height: 18px; }
.landing .mascot-stage figcaption {
  position: absolute; inset: auto auto 0 0; display: grid; gap: 2px; padding: clamp(12px, 2vw, 22px);
  color: #fff9f3; line-height: 1.2;
}
.landing .mascot-stage figcaption span { font-weight: 850; font-size: clamp(1rem, 2vw, 1.45rem); }
.landing .mascot-stage figcaption small { color: #ffe2e4; font-size: .77rem; }
.landing .mascot-toggle {
  position: absolute; right: 13px; bottom: 13px; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid #ffd9dfb5; background: #690e25; color: white;
}
.landing .mascot-toggle:hover { background: #4c0d1d; }
@media (prefers-reduced-motion: no-preference) {
  .landing .mascot-stage[data-playing] .mascot-art { animation: mascot-float 3.2s ease-in-out infinite; }
  .landing .mascot-stage[data-playing] .mascot-spark { animation: mascot-spark 2.4s ease-in-out infinite alternate; }
  .landing .mascot-stage[data-playing] .spark-two { animation-delay: -.8s; }
  @keyframes mascot-float { 0%, 100% { transform: translateY(2px) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(2deg); } }
  @keyframes mascot-spark { from { transform: scale(.75); opacity: .7; } to { transform: scale(1.15); opacity: 1; } }
}

.landing .section-heading { display: grid; gap: 10px; }
.landing :is(.section-heading,.school-story-copy) h2 {
  font-size: clamp(2.15rem, 4.8vw, 4.1rem); font-weight: 830; line-height: 1.03; letter-spacing: -.06em;
  margin: 0; text-wrap: balance;
}
.landing :is(.section-heading,.school-story-copy) > p:not(.overline) { max-width: 58ch; color: var(--muted); }
.landing .school-story {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center; gap: clamp(26px, 7vw, 104px); padding-block: var(--section-space);
}
.landing .school-story-copy { display: grid; gap: 12px; }
.landing .school-photo, .landing .visit-photo { position: relative; overflow: hidden; border-radius: 23px; background: #ecd7cf; }
.landing :is(.school-photo,.visit-photo) img { display: block; width: 100%; height: 100%; object-fit: cover; }
.landing .school-photo { aspect-ratio: 1.54; }
.landing :is(.school-photo,.visit-photo) figcaption {
  position: absolute; right: 10px; bottom: 10px; border-radius: 100px; padding: 5px 9px;
  background: #2a1319e8; color: white; font-size: .7rem; font-weight: 650;
}
.landing .text-link { display: inline-flex; width: fit-content; min-height: 44px; align-items: center; gap: 8px; }
.landing .text-link .site-icon { width: 17px; height: 17px; }
.landing .course-section { background: #f8eee9; padding-block: var(--section-space); }
.landing .goal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 23px); margin-top: 30px; }
.landing .goal-card {
  display: flex; flex-direction: column; align-items: start; gap: 10px; padding: clamp(18px, 2.8vw, 29px);
  border: 1px solid #f1ded8; border-radius: 21px; background: var(--paper);
}
.landing .goal-icon, .landing .school-location-icon {
  display: grid; place-items: center; width: 50px; height: 50px; flex: none; border-radius: 15px;
  color: var(--red-dark); background: #f9e4e7; box-shadow: inset 0 0 0 1px #f1c9cf;
}
.landing :is(.goal-icon,.school-location-icon) .site-icon { width: 27px; height: 27px; }
.landing .goal-card:nth-child(2) .goal-icon { background: #f7e8d8; color: #8b421b; box-shadow: inset 0 0 0 1px #edcfb5; }
.landing .goal-card:nth-child(3) .goal-icon { background: #eee4f4; color: #663876; box-shadow: inset 0 0 0 1px #e4cce9; }
.landing .goal-card h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); }
.landing .goal-card p { color: var(--muted); margin-bottom: 2px; }
.landing .goal-card a { margin-top: auto; }
.landing .course-catalog { margin-top: 35px; }
.landing .course-catalog > h3 { font-size: 1.5rem; margin-bottom: 14px; }
.landing .course-card { border-color: #f1ded8; border-radius: 17px; }
.landing .gallery-section { padding-block: var(--section-space) 0; gap: 20px; }
.landing .gallery-slides { border-radius: 22px; }
.landing .gallery-slide img { height: clamp(175px, 50vw, 530px); }
.landing .gallery-controls { justify-self: center; }
.landing .gallery-controls .btn { min-width: 46px; }
.landing .school-reviews { margin-top: var(--section-space); padding-block: var(--section-space); background: #fae9eb; }
.landing .review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 16px; margin-top: 28px; }
.landing .review-card {
  display: flex; flex-direction: column; min-width: 0; gap: 15px; padding: clamp(18px, 3vw, 29px);
  border: 1px solid #ebcbd1; border-radius: 20px; background: white; overflow-wrap: anywhere;
}
.landing .review-card:only-child { max-width: 690px; }
.landing .review-rating { display: flex; align-items: center; gap: 2px; color: #965009; }
.landing .review-rating svg { width: 19px; height: 19px; }
.landing .review-rating .unfilled { color: #8c6d46; }
.landing .review-card blockquote { margin: 0; font-size: 1.09rem; }
.landing .review-card blockquote p { white-space: pre-line; }
.landing .review-card figcaption { display: grid; gap: 2px; margin-top: auto; padding-top: 12px; border-top: 1px solid #f0dfe2; }
.landing .review-card figcaption span { font-size: .88rem; color: var(--muted); }

.landing .school-visit { padding-block: var(--section-space); }
.landing .visit-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(13px, 2.1vw, 25px);
  margin-top: 27px;
}
.landing .visit-photo img { object-position: 48% 55%; }
.landing .school-location {
  min-width: 0; overflow: hidden; border: 1px solid #efd9dc; border-radius: 23px; background: #fff5f3;
}
.landing .location-map { display: block; width: 100%; height: clamp(125px, 16vw, 205px); object-fit: cover; object-position: 53% 41%; }
.landing .location-content { display: flex; align-items: start; gap: 14px; padding: clamp(14px, 2.1vw, 26px); }
.landing .location-address { min-width: 0; overflow-wrap: anywhere; }
.landing .school-location h3 { margin-bottom: 5px; font-size: clamp(1.2rem, 2vw, 1.54rem); }
.landing .school-location :is(address,p) { color: var(--muted); font-style: normal; line-height: 1.48; }
.landing .school-location address div:first-child { font-weight: 780; color: var(--wine); }
.landing .school-location .btn { margin-top: 13px; padding-inline: 13px; }
.landing .school-location .btn .site-icon { width: 16px; height: 16px; }

.landing .faq-section { padding-block: var(--section-space); background: #fff4ef; }
.landing .faq-inner { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); align-items: start; gap: clamp(22px, 5vw, 70px); }
.landing .faq-list { display: grid; gap: 10px; min-width: 0; }
.landing .faq-list details { background: white; border: 1px solid #eedbd6; border-radius: 14px; }
.landing .faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 51px; padding: 11px 14px; font-weight: 780; cursor: pointer; list-style: none; }
.landing .faq-list summary::-webkit-details-marker { display: none; }
.landing .faq-list summary::after { content: '+' / ''; display: grid; place-items: center; width: 27px; height: 27px; flex: none; border-radius: 50%; background: #f9e4e7; color: var(--red-dark); font-size: 1.1rem; }
.landing .faq-list details[open] summary::after { content: '−' / ''; }
.landing .faq-list details p { padding: 0 14px 14px; color: var(--muted); }
.landing .contact-band { background: #471322; color: #fffaf5; }
.landing .contact-section { padding-block: var(--section-space); gap: clamp(20px, 6vw, 80px); align-items: center; }
.landing .contact-section .section-heading > p { color: #f3d9dc; }
.landing .contact-links { margin-top: 8px; }
.landing .contact-links .btn { min-height: 48px; }
.landing .lead-form {
  min-width: 0; border: 0; border-radius: 22px; background: var(--paper);
  color: var(--wine); padding: clamp(17px, 3vw, 30px);
}
.landing .lead-form h3 { font-size: 1.35rem; margin-bottom: 4px; }
.landing .lead-form :is(input,select) { font-size: 1rem; }
.landing .site-footer { background: #2b0f16; }
.landing .site-footer .site-wrap { padding-block: 24px; }
.landing .footer-social { display: flex; flex-wrap: wrap; gap: 0 14px; }
.landing .footer-social a { display: inline-flex; min-height: 44px; align-items: center; }
.landing .social-float {
  right: max(13px, calc(env(safe-area-inset-right) + 7px));
  bottom: max(17px, calc(env(safe-area-inset-bottom) + 7px));
  display: grid; z-index: 9; gap: 8px;
}
.landing .social-float a { width: 48px; height: 48px; border: 1px solid #fff9; }
.landing .social-float .site-icon { width: 23px; height: 23px; }

@media (min-width: 1360px) {
  .landing .site-wrap { left: 0; }
}
@media (max-width: 940px) {
  .landing .topbar { grid-template-columns: auto minmax(0, 1fr) auto; min-height: 68px; gap: 10px; }
  .landing .topbar .logo, .landing .topbar .logo img { width: 70px; }
  .landing .topbar .logo { height: 54px; }
  .landing .topbar .portal-link { grid-column: 2; justify-self: end; padding-inline: 10px; }
  .landing .site-menu-toggle:not([hidden]) { display: grid; grid-column: 3; }
  .landing .topbar nav { grid-column: 1/-1; grid-row: 2; justify-content: flex-start; gap: 4px 14px; flex-wrap: wrap; padding-bottom: 8px; }
  .landing .topbar.site-menu-ready nav { display: none; }
  .landing .topbar.site-menu-ready nav[data-open] {
    display: grid; position: absolute; inset: 100% 0 auto; z-index: 6; gap: 0; margin-top: 3px;
    padding: 5px 8px; border: 1px solid var(--landing-border); border-radius: 14px; background: white; box-shadow: 0 12px 26px #3215222b;
  }
  .landing .topbar.site-menu-ready nav a { padding: 10px 12px; border-radius: 8px; }
  .landing .topbar.site-menu-ready nav a:is(:hover,:focus-visible) { background: var(--blush); }
}
@media (max-width: 760px) {
  html:has(body.landing) { scroll-padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .landing .site-wrap {
    width: auto; max-width: none; left: 0;
    margin-inline: max(var(--landing-gap), env(safe-area-inset-left)) max(var(--landing-gap), env(safe-area-inset-right));
  }
  .landing .hero { grid-template-columns: minmax(0, 1fr); padding-block: 39px 33px; gap: 23px; }
  .landing .hero h1 { font-size: clamp(3.1rem, 11vw, 5rem); margin-block: 13px 16px; }
  .landing .hero-intro { margin-bottom: 19px; }
  .landing .hero .btn { padding-inline: 12px; font-size: .92rem; }
  .landing .mascot-stage { max-width: 500px; aspect-ratio: 1.25; border-radius: 20px; }
  .landing .mascot-art { width: min(68%, 295px); }
  .landing .mascot-toggle { right: 8px; bottom: 8px; }
  .landing .school-story, .landing .visit-grid, .landing .faq-inner, .landing .contact-section { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .landing .school-story-copy { grid-row: 1; }
  .landing .goal-grid { gap: 10px; margin-top: 21px; }
  .landing .visit-photo { aspect-ratio: 1.65; }
  .landing .location-map { height: clamp(119px, 35vw, 190px); }
  .landing .lead-form .form-grid { grid-template-columns: minmax(0, 1fr); }
  .landing .site-footer .site-wrap { padding-bottom: calc(81px + env(safe-area-inset-bottom)); gap: 7px 14px; }
  .landing .social-float {
    display: flex; right: max(9px, calc(env(safe-area-inset-right) + 5px));
    bottom: max(8px, calc(env(safe-area-inset-bottom) + 5px)); gap: 5px;
    padding: 4px; background: #fffaf6; border: 1px solid #e8d1d4; border-radius: 100px; box-shadow: 0 6px 22px #29111931;
  }
  .landing .social-float a { width: 44px; height: 44px; box-shadow: none; }
  .landing .social-float .site-icon { width: 20px; height: 20px; }
}
@media (max-width: 560px) {
  .landing .goal-grid { grid-template-columns: minmax(0, 1fr); }
  .landing .goal-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 5px; align-items: start; }
  .landing .goal-card .goal-icon { grid-row: 1/4; width: 44px; height: 44px; }
  .landing .goal-card :is(h3,p,a) { grid-column: 2; }
}
@media (max-width: 350px) {
  .landing .topbar .logo, .landing .topbar .logo img { width: 62px; }
  .landing .topbar .portal-link { font-size: .83rem; }
  .landing .hero .btn { font-size: .88rem; padding-inline: 9px; }
}