:root {
  --ink:#101113;
  --ink2:#17191d;
  --gold:#e9b949;
  --gold2:#ffd875;
  --paper:#f7f6f2;
  --muted:#686b72;
  --line:#e6e3dc;
  --white:#fff;
  --radius:22px;
  --shadow:0 18px 50px rgba(20,20,20,.10);
  --max:1200px
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:88px
}
body {
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#202126;
  background:#fff;
  line-height:1.6
}
button,a {
  font:inherit
}
a {
  color:inherit;
  text-decoration:none
}
button {
  cursor:pointer
}
img {
  display:block;
  max-width:100%
}
.container {
  width:min(var(--max),calc(100% - 44px));
  margin-inline:auto
}
.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#a77915;
  font-size:.76rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:800
}
.eyebrow:before {
  content:"";
  width:24px;
  height:2px;
  background:var(--gold)
}
.section {
  padding:88px 0
}
.section-head {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:30px
}
.section-head h2 {
  font-size:clamp(2rem,4vw,3.1rem);
  line-height:1.1;
  letter-spacing:-.045em;
  margin:10px 0 0;
  color:var(--ink)
}
.section-head p {
  max-width:490px;
  color:var(--muted);
  margin:0
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:13px 20px;
  border:1px solid transparent;
  border-radius:999px;
  font-weight:750;
  font-size:.92rem;
  transition:transform .2s,background .2s,color .2s,border-color .2s
}
.btn:hover {
  transform:translateY(-2px)
}
.btn-gold {
  background:var(--gold);
  color:#171717
}
.btn-gold:hover {
  background:var(--gold2)
}
.btn-outline {
  border-color:rgba(255,255,255,.45);
  color:#fff;
  background:rgba(255,255,255,.04)
}
.btn-dark {
  background:var(--ink);
  color:white
}
.icon-btn {
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid var(--line);
  background:white;
  display:grid;
  place-items:center;
  color:var(--ink);
  font-size:1.15rem
}
.site-header {
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(15,16,18,.96);
  color:white;
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:box-shadow .25s,background .25s,backdrop-filter .25s
}
.site-header.scrolled {
  background:rgba(15,16,18,.88);
  backdrop-filter:blur(16px);
  box-shadow:0 8px 30px #0002
}
.nav-wrap {
  height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
.brand {
  display:flex;
  align-items:center;
  min-width:0
}
.brand img {
  width:178px;
  height:70px;
  object-fit:contain;
  object-position:left center
}
.desktop-nav {
  display:flex;
  align-items:center;
  gap:clamp(10px,1.6vw,22px)
}
.desktop-nav a {
  font-size:.87rem;
  color:#e4e4e4;
  font-weight:650;
  white-space:nowrap;
  transition:color .2s
}
.desktop-nav a:hover,.desktop-nav a.active {
  color:var(--gold2)
}
/* The two services that actually bring customers in are pulled forward as
   outlined gold pills, so the header reads as "these are the things you can
   buy". The solid gold call to action still outranks them, so the bar has one
   clear primary action instead of three competing ones. */
.desktop-nav a.nav-focus {
  padding:7px 12px;
  border:1px solid #e9b9495c;
  border-radius:99px;
  background:#e9b94914;
  color:#f5d27f;
  font-weight:750;
  line-height:1;
  transition:background .22s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease
}
.desktop-nav a.nav-focus:hover {
  background:var(--gold);
  border-color:var(--gold);
  color:#171717;
  box-shadow:0 6px 18px rgba(233,185,73,.35)
}
.desktop-nav a.nav-focus.active {
  background:var(--gold);
  border-color:var(--gold);
  color:#171717;
  box-shadow:0 6px 18px rgba(233,185,73,.3)
}
.nav-cta {
  padding:10px 16px;
  font-size:.83rem
}
.menu-toggle {
  display:none;
  color:white;
  background:transparent;
  border:1px solid #ffffff35;
  border-radius:12px;
  width:46px;
  height:44px;
  font-size:1.35rem
}
.mobile-nav {
  display:none;
  padding:0 22px 18px;
  background:#111216
}
.mobile-nav.open {
  display:grid;
  gap:4px
}
.mobile-nav a {
  padding:12px 8px;
  border-bottom:1px solid #ffffff14;
  color:#f4f4f4;
  font-weight:650
}
.mobile-nav a.nav-focus {
  background:#e9b9491a;
  border-left:3px solid var(--gold);
  border-radius:0 8px 8px 0;
  padding-left:11px;
  color:#f5d27f;
  font-weight:750
}
.hero {
  position:relative;
  min-height:min(790px,calc(100svh - 82px));
  background:#0b0c0e;
  color:white;
  overflow:hidden;
  isolation:isolate
}
.hero-slide {
  position:absolute;
  inset:0;
  z-index:0;
  opacity:0;
  visibility:hidden;
  /* visibility is delayed so the outgoing slide stays painted for the whole
     fade; without it the slide snaps out and the next one fades in over black. */
  transition:opacity 1.15s cubic-bezier(.45,0,.25,1),visibility 0s linear 1.15s;
  display:flex;
  align-items:center
}
.hero-slide.active {
  opacity:1;
  visibility:visible;
  z-index:1;
  transition:opacity 1.15s cubic-bezier(.45,0,.25,1),visibility 0s linear 0s
}
.hero-media {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
  /* Ken Burns: the active banner settles out of a slight over-scale instead of
     sitting still. The scale is restored while the slide is hidden, so the
     reset is never visible. */
  transform:scale(1.12);
  transition:transform 18s linear
}
.hero-slide.active .hero-media {
  transform:scale(1)
}
.hero-slide:after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,rgba(7,8,10,.94) 0%,rgba(7,8,10,.78) 45%,rgba(7,8,10,.25) 100%),linear-gradient(0deg,rgba(7,8,10,.48),transparent 60%)
}
.hero-content {
  width:min(var(--max),calc(100% - 44px));
  margin:0 auto;
  padding:80px 0 112px;
  position:relative;
  z-index:2
}
.hero-content .eyebrow {
  color:var(--gold2)
}
.hero h1 {
  max-width:780px;
  font-size:clamp(2.7rem,6.3vw,5.9rem);
  letter-spacing:-.065em;
  line-height:.99;
  margin:20px 0 24px
}
.hero h1 span {
  color:var(--gold)
}
.hero p {
  max-width:610px;
  font-size:clamp(1rem,1.5vw,1.17rem);
  color:#e0e1e4;
  margin:0 0 30px
}
.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px
}
/* Each line of slide copy rises into place after the image has started to
   settle, so the change reads as a transition rather than a swap. The short
   transition is the exit path: when .active is removed the animation stops and
   the copy fades back out instead of disappearing on one frame. */
.hero-content > * {
  opacity:0;
  transform:translateY(26px);
  transition:opacity .35s ease,transform .35s ease
}
.hero-slide.active .hero-content > * {
  animation:heroCopyIn .95s cubic-bezier(.22,1,.36,1) both
}
.hero-slide.active .hero-content > *:nth-child(1) {
  animation-delay:.28s
}
.hero-slide.active .hero-content > *:nth-child(2) {
  animation-delay:.4s
}
.hero-slide.active .hero-content > *:nth-child(3) {
  animation-delay:.54s
}
.hero-slide.active .hero-content > *:nth-child(4) {
  animation-delay:.68s
}
@keyframes heroCopyIn {
  from {
    opacity:0;
    transform:translateY(26px)
  }
  to {
    opacity:1;
    transform:none
  }
}
.hero-bottom {
  position:absolute;
  z-index:5;
  left:0;
  right:0;
  bottom:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:min(var(--max),calc(100% - 44px));
  margin:auto
}
.hero-count {
  font-size:.8rem;
  color:#e3e3e3;
  letter-spacing:.1em
}
.hero-count strong {
  color:var(--gold);
  font-size:1rem
}
.hero-controls {
  display:flex;
  align-items:center;
  gap:9px
}
/* One banner means nothing to page through, so the dots and arrows are
   dropped and the slide counter is left on its own. */
.hero-controls.is-single {
  display:none
}
.hero-controls button {
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid #ffffff66;
  color:white;
  background:#ffffff10;
  backdrop-filter:blur(5px)
}
.hero-controls button:hover {
  background:var(--gold);
  color:#111
}
.dots {
  display:flex;
  gap:7px;
  margin-right:12px
}
.dots button {
  width:7px;
  height:7px;
  border:0;
  border-radius:99px;
  background:#ffffff70;
  padding:0;
  transition:width .45s cubic-bezier(.4,0,.2,1),background .35s ease,transform .35s ease
}
.dots button:hover {
  background:#ffffffc4;
  transform:scale(1.3)
}
.dots button.active {
  width:26px;
  background:var(--gold);
  transform:none
}
.service-section {
  background:var(--paper)
}
.carousel-tools {
  display:flex;
  gap:8px;
  flex-shrink:0
}
.carousel-viewport {
  overflow:hidden;
  touch-action:pan-y
}
.card-track {
  display:flex;
  gap:20px;
  transition:transform .6s cubic-bezier(.2,.75,.25,1);
  will-change:transform
}
.service-card {
  flex:0 0 calc((100% - 60px)/4);
  background:#fff;
  border:1px solid #eeece6;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 5px 22px #16161607;
  transition:transform .25s,box-shadow .25s
}
.service-card:hover,.teacher-card:hover {
  transform:translateY(-6px);
  box-shadow:var(--shadow)
}
.service-image {
  height:180px;
  position:relative;
  overflow:hidden;
  background:#ddd
}
.service-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s
}
.service-card:hover .service-image img {
  transform:scale(1.05)
}
.service-number {
  position:absolute;
  top:14px;
  left:14px;
  background:#111d;
  color:var(--gold2);
  font-size:.76rem;
  font-weight:800;
  padding:5px 10px;
  border-radius:99px;
  backdrop-filter:blur(6px)
}
.service-body {
  padding:22px
}
.service-body h3 {
  font-size:1.18rem;
  margin:0 0 8px;
  color:var(--ink)
}
.service-body p {
  font-size:.9rem;
  color:var(--muted);
  margin:0 0 18px;
  min-height:72px
}
.text-link {
  font-weight:800;
  color:#93690f;
  font-size:.87rem;
  display:inline-flex;
  gap:8px;
  align-items:center
}
.text-link:hover {
  color:#4d3807
}
/* The services that are actually open for enrolment carry a filled call to
   action; the one that is not yet launched keeps the quieter text link, so a
   visitor is pulled towards something they can act on today. */
.service-cta {
  width:100%;
  padding:12px 16px;
  font-size:.88rem;
  box-shadow:0 10px 24px rgba(233,185,73,.35)
}
.service-cta span {
  transition:transform .2s ease
}
.service-cta:hover span {
  transform:translate(3px,-3px)
}
/* Only three services are live, so on wide screens the row is divided into
   thirds. Left at the four-up width, one empty quarter sat to the right of the
   cards and shrank the calls to action. */
@media (min-width:1051px) {
  .card-track.services-3 > .service-card {
    flex-basis:calc((100% - 40px)/3)
  }
}
.teachers-section {
  background:#fff
}
.teacher-card {
  flex:0 0 calc((100% - 60px)/4);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
  transition:transform .25s,box-shadow .25s
}
.teacher-photo {
  height:260px;
  overflow:hidden;
  background:#e9e5dc
}
.teacher-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s
}
.teacher-card:hover .teacher-photo img {
  transform:scale(1.045)
}
.teacher-info {
  padding:21px
}
.teacher-info h3 {
  margin:0 0 4px;
  font-size:1.12rem
}
.teacher-subject {
  color:#a77915;
  font-size:.83rem;
  font-weight:800
}
.teacher-info p {
  color:var(--muted);
  font-size:.88rem;
  margin:12px 0 17px;
  min-height:66px
}
.teacher-info .btn {
  width:100%;
  padding:11px
}
.promo-section {
  padding:64px 0 42px
}
.promo-card {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:370px;
  border-radius:28px;
  overflow:hidden;
  background:#f4f1e9
}
.promo-card.reverse .promo-media {
  order:2
}
.promo-card.reverse .promo-copy {
  order:1
}
.promo-media {
  min-height:320px;
  position:relative;
  overflow:hidden;
  background:#d7d1c4
}
.promo-media img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}
.promo-copy {
  padding:clamp(28px,5vw,64px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center
}
.promo-copy h2 {
  font-size:clamp(1.9rem,3.4vw,3.2rem);
  line-height:1.08;
  letter-spacing:-.045em;
  margin:13px 0 15px
}
.promo-copy p {
  color:#62636a;
  margin:0 0 24px;
  max-width:470px
}
.why-section {
  background:#111216;
  color:white;
  position:relative;
  overflow:hidden
}
.why-section:before {
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  border-radius:50%;
  border:1px solid #e9b94920;
  right:-190px;
  top:-170px;
  box-shadow:0 0 0 55px #e9b94908,0 0 0 110px #e9b94905
}
.why-grid {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
  align-items:center;
  position:relative
}
.why-visual {
  position:relative;
  min-height:430px;
  border-radius:28px;
  overflow:hidden;
  background:linear-gradient(145deg,#29251a,#111216 70%);
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #e9b94942
}
.why-visual img {
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  object-fit:cover;
  opacity:.28;
  mix-blend-mode:screen
}
.monogram {
  position:relative;
  text-align:center;
  color:var(--gold);
  font-weight:900;
  font-size:clamp(5rem,12vw,9rem);
  letter-spacing:-.1em;
  line-height:1
}
.monogram small {
  display:block;
  letter-spacing:.28em;
  font-size:.75rem;
  color:white;
  margin-top:20px
}
.why-copy .eyebrow {
  color:var(--gold2)
}
.why-copy h2 {
  font-size:clamp(2.3rem,4.5vw,4rem);
  line-height:1.02;
  letter-spacing:-.05em;
  margin:14px 0 24px
}
.why-copy p {
  color:#c9c9ce;
  margin:0 0 16px
}
.why-copy p strong {
  color:#fff
}
.feature-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:28px
}
.feature {
  display:flex;
  align-items:center;
  gap:11px;
  padding:13px 14px;
  border:1px solid #ffffff18;
  border-radius:13px;
  background:#ffffff06;
  font-weight:700;
  font-size:.9rem
}
.feature span {
  width:25px;
  height:25px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#e9b94920;
  color:var(--gold);
  flex-shrink:0
}
.contact-band {
  background:var(--gold);
  padding:30px 0
}
.contact-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
.contact-inner h2 {
  margin:0;
  font-size:clamp(1.5rem,3vw,2.3rem);
  letter-spacing:-.04em
}
.contact-inner p {
  margin:5px 0 0;
  color:#493914
}
.site-footer {
  background:#0b0c0e;
  color:#f5f5f5;
  padding:64px 0 22px
}
.footer-grid {
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.1fr;
  gap:40px
}
.footer-brand img {
  width:190px;
  height:75px;
  object-fit:contain;
  object-position:left center;
  margin-bottom:16px
}
.footer-brand p {
  color:#aeb0b5;
  font-size:.9rem;
  max-width:300px
}
.footer-col h3 {
  font-size:.92rem;
  margin:0 0 18px;
  color:var(--gold2)
}
.footer-col a,.footer-col p {
  display:block;
  color:#b9bbc0;
  font-size:.87rem;
  margin:0 0 11px
}
.footer-col a:hover {
  color:white
}
.socials {
  display:flex;
  gap:9px;
  margin-top:18px
}
.socials a {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid #ffffff26;
  border-radius:50%;
  color:white;
  font-size:.75rem;
  font-weight:800;
  margin:0
}
.socials a:hover {
  background:var(--gold);
  color:#111
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid #ffffff18;
  padding-top:20px;
  margin-top:44px;
  color:#888b92;
  font-size:.8rem
}
.modal-backdrop {
  position:fixed;
  inset:0;
  background:#050608c9;
  backdrop-filter:blur(7px);
  z-index:100;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px
}
.modal-backdrop.open {
  display:flex
}
.teacher-modal {
  background:#fff;
  border-radius:24px;
  width:min(760px,100%);
  max-height:min(88svh,800px);
  overflow:auto;
  position:relative;
  box-shadow:0 30px 100px #0007;
  animation:modalIn .22s ease
}
.modal-close {
  position:absolute;
  right:15px;
  top:15px;
  width:42px;
  height:42px;
  border:0;
  border-radius:50%;
  background:#111;
  color:#fff;
  font-size:1.35rem;
  z-index:2
}
.modal-layout {
  display:grid;
  grid-template-columns:.8fr 1.2fr
}
.modal-photo {
  min-height:420px;
  background:#ddd
}
.modal-photo img {
  width:100%;
  height:100%;
  object-fit:cover
}
.modal-content {
  padding:42px 34px
}
.modal-content h2 {
  font-size:2rem;
  line-height:1.1;
  margin:10px 0 4px
}
.modal-content p {
  color:#666
}
.modal-content h3 {
  font-size:.92rem;
  margin:22px 0 7px
}
.modal-content ul {
  padding-left:20px;
  color:#555
}
.toast {
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translate(-50%,20px);
  opacity:0;
  pointer-events:none;
  background:#111;
  color:#fff;
  padding:12px 18px;
  border-radius:99px;
  z-index:120;
  transition:.25s;
  box-shadow:var(--shadow);
  font-size:.9rem
}
.toast.show {
  opacity:1;
  transform:translate(-50%,0)
}
.reveal {
  opacity:0;
  transform:translateY(18px);
  transition:opacity .65s,transform .65s
}
.reveal.visible {
  opacity:1;
  transform:none
}
.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
}
:focus-visible {
  outline:3px solid #e9b949;
  outline-offset:3px
}
@keyframes modalIn {
  from {
    opacity:0;
    transform:translateY(10px) scale(.985)
  }
  to {
    opacity:1;
    transform:none
  }
}
@media(max-width:1050px) {
  .desktop-nav {
    gap:10px
  }
  .desktop-nav a {
    font-size:.8rem
  }
  .desktop-nav a.nav-focus {
    padding:6px 9px
  }
  .brand img {
    width:150px
  }
  .service-card,.teacher-card {
    flex-basis:calc((100% - 40px)/3)
  }
  .footer-grid {
    grid-template-columns:1fr 1fr;
    gap:32px
  }
  .why-grid {
    gap:38px
  }
}
/* Header links need more room now that two of them are pills, so the menu
   button takes over from 960px instead of 800px and the links never collide
   with the call to action. */
@media(max-width:960px) {
  .desktop-nav,.nav-wrap>.nav-cta {
    display:none
  }
  .menu-toggle {
    display:block
  }
}
@media(max-width:800px) {
  .nav-wrap {
    height:72px
  }
  .brand img {
    width:150px;
    height:62px
  }
  .desktop-nav,.nav-wrap>.nav-cta {
    display:none
  }
  .menu-toggle {
    display:block
  }
  .hero {
    min-height:680px;
    min-height:min(760px,calc(100svh - 72px))
  }
  .hero-content {
    padding-top:76px
  }
  .hero-slide:after {
    background:linear-gradient(90deg,rgba(7,8,10,.91),rgba(7,8,10,.62)),linear-gradient(0deg,rgba(7,8,10,.5),transparent)
  }
  .section {
    padding:68px 0
  }
  .section-head {
    align-items:flex-start;
    flex-direction:column
  }
  .service-card,.teacher-card {
    flex-basis:calc((100% - 20px)/2)
  }
  .service-image {
    height:170px
  }
  .teacher-photo {
    height:230px
  }
  .promo-card {
    grid-template-columns:1fr
  }
  .promo-card.reverse .promo-media,.promo-card.reverse .promo-copy {
    order:initial
  }
  .promo-media {
    min-height:270px
  }
  .promo-copy {
    padding:32px
  }
  .why-grid {
    grid-template-columns:1fr;
    gap:35px
  }
  .why-visual {
    min-height:300px
  }
  .why-visual img {
    object-position:center 35%
  }
  .contact-inner {
    align-items:flex-start;
    flex-direction:column
  }
  .modal-layout {
    grid-template-columns:1fr
  }
  .modal-photo {
    height:260px;
    min-height:0
  }
  .modal-content {
    padding:28px
  }
}
@media(max-width:520px) {
  .container,.hero-content,.hero-bottom {
    width:calc(100% - 32px)
  }
  .brand img {
    width:130px
  }
  .hero h1 {
    font-size:clamp(2.55rem,13vw,4rem)
  }
  .hero-content {
    padding-top:65px
  }
  .hero p {
    font-size:.98rem
  }
  .hero-bottom {
    bottom:18px
  }
  .hero-count {
    font-size:.72rem
  }
  .hero-controls button {
    width:38px;
    height:38px
  }
  .dots {
    margin-right:2px
  }
  .service-card,.teacher-card {
    flex-basis:100%
  }
  .service-image {
    height:210px
  }
  .teacher-photo {
    height:300px
  }
  .service-body p,.teacher-info p {
    min-height:0
  }
  .feature-grid {
    grid-template-columns:1fr
  }
  .footer-grid {
    grid-template-columns:1fr;
    gap:26px
  }
  .footer-bottom {
    flex-direction:column;
    gap:8px
  }
  .section {
    padding:58px 0
  }
  .promo-section {
    padding:36px 0 24px
  }
  .promo-media {
    min-height:220px
  }
  .why-visual {
    min-height:250px
  }
  .hero-actions .btn {
    padding:12px 16px
  }
  .carousel-tools {
    align-self:flex-end;
    margin-top:-8px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important
  }
  .reveal {
    opacity:1;
    transform:none
  }
}