/* =====================================================================
   Matt Davis Golf - "Fairway Heritage"
   Deep fairway green ground · warm ivory paper · brushed-brass trim
   Fraunces (display) · Newsreader (reading) · Inter (UI / small caps)
   ===================================================================== */

:root {
  /* Greens */
  --fairway: #112743;     /* dominant ground */
  --augusta: #091A30;     /* deep shadow */
  --bottle:  #1B3658;     /* mid */
  /* Papers */
  --ivory:   #FFFFFF;
  --linen:   #F3F6FA;
  --parchment:#DAE4F1;    /* body on green */
  /* Brass */
  --brass:      #BCD5F2;
  --brass-hi:   #E4EFFF;
  --brass-lo:   #7795B9;
  --spark:      #BDD8FF;  /* the single status spark */
  /* Ink */
  --ink:     #14263F;     /* text on cream */
  --sage:    #ADBFD5;     /* faint metadata */

  --brass-gradient: linear-gradient(177deg, var(--brass-hi) 0%, var(--brass) 52%, var(--brass-lo) 100%);

  --maxw: 1240px;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* --------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-optical-sizing: auto;
  background: var(--fairway);
  color: var(--ink);
  line-height: 1.65;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.18rem);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: var(--brass-hi); color: var(--ink); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--brass); color: var(--ink); padding: .7rem 1.1rem;
  font-family: var(--font-ui); font-size: .875rem; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 3px; border-radius: 2px; }

/* --------------------------------------------------------------- type */
.display-h2 {
  font-family: var(--font-display);
  font-weight: 360;
  font-size: clamp(2rem, 1.3rem + 3.1vw, 3.7rem);
  line-height: 1.04;
  letter-spacing: -0.018em;
}
.display-h3 {
  font-family: var(--font-display);
  font-weight: 380;
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin-bottom: .8rem;
}
em { font-style: italic; }
.display-h2 em, .display-h3 em { color: var(--brass); }
.section--deep .display-h2 em, .section--deep .display-h3 em,
.hero__title .em { color: var(--brass-hi); }

.eyebrow {
  font-family: var(--font-ui);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--brass-lo);
  margin-bottom: 1.1rem;
}
.eyebrow--brass { color: var(--brass-hi); }
.tick { width: 1.6rem; height: 1px; background: var(--brass-hi); display: inline-block; }
.tick--ink { background: var(--brass); }

.lead { font-size: 1.18em; }

.bignum {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(7rem, 20vw, 16rem);
  line-height: .8;
  color: var(--brass);
  opacity: .1;
  top: -.1em; left: var(--gutter);
  pointer-events: none; user-select: none;
}
.bignum--ink { color: var(--ink); opacity: .07; }
.bignum--faint { opacity: .08; }

/* --------------------------------------------------------------- buttons */
.btn {
  font-family: var(--font-ui);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: .95rem 1.6rem;
  border: none; border-radius: 2px; cursor: pointer;
  text-decoration: none;
  transition: letter-spacing .4s var(--ease), filter .4s var(--ease),
              background .4s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.btn--brass {
  background: var(--brass-gradient);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.btn--brass:hover { letter-spacing: 0.12em; filter: brightness(1.04) saturate(1.05); }
.btn--brass:active { transform: translateY(1px); }
.btn--lg { padding: 1.1rem 2.1rem; font-size: .875rem; }

.btn--ghost {
  background: transparent;
  color: var(--ivory);
  border: 1px solid rgba(188,213,242,.5);
}
.section--paper .btn--ghost { color: var(--ink); border-color: rgba(20,38,63,.3); }
.btn--ghost:hover { border-color: var(--brass-hi); letter-spacing: 0.12em; color: var(--brass-hi); }
.section--paper .btn--ghost:hover { color: var(--brass-lo); border-color: var(--brass); }
.btn--brassline { border-color: var(--brass); color: var(--brass-hi); }

.link-underline {
  font-family: var(--font-ui);
  font-size: .875rem; font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative; padding-bottom: 3px; color: inherit;
  background: none; border: none; cursor: pointer;
}
.link-underline::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.link-underline:hover::after { transform: scaleX(1); }

/* --------------------------------------------------------------- monogram */
.monogram {
  font-family: var(--font-display);
  font-style: italic; font-weight: 400;
  letter-spacing: -.02em;
  color: var(--brass-hi);
  display: inline-grid; place-items: center;
}
.monogram--lg { font-size: 2.4rem; }

/* --------------------------------------------------------------- nav */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .5s var(--ease), backdrop-filter .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(9,26,48,.82);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: rgba(188,213,242,.22);
}
.nav__inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 1rem var(--gutter);
  display: flex; align-items: center; gap: 2rem;
}
.nav__brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.nav__brand .monogram {
  font-size: 1.5rem; width: 2.2rem; height: 2.2rem;
  border: 1px solid rgba(188,213,242,.45); border-radius: 3px;
}
.nav__brandtext {
  font-family: var(--font-ui); font-weight: 600; font-size: .875rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ivory);
  line-height: 1.15;
}
.nav__brandtext-sub { display: block; font-size: .875rem; font-weight: 500; color: var(--parchment); letter-spacing: .16em; opacity: .7; }
.nav__links { margin-left: auto; display: flex; gap: 2rem; }
.nav__links a {
  font-family: var(--font-ui); font-size: .875rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  color: var(--parchment); position: relative; padding: .3rem 0;
  transition: color .3s var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%;
  background: var(--brass-hi); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.nav__links a:hover { color: var(--ivory); }
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); }
.nav__cta { padding: .65rem 1.2rem; }
.nav__toggle { display: none; }

.nav__mobile {
  display: flex; flex-direction: column; gap: .25rem;
  padding: 0 var(--gutter) 1.2rem;
}
.nav__mobile a {
  font-family: var(--font-ui); font-size: .95rem; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none; color: var(--ivory);
  padding: .85rem 0; border-bottom: 1px solid rgba(188,213,242,.16);
}
.nav__mobile .btn { margin-top: .8rem; }

/* hamburger */
.nav__toggle {
  margin-left: auto;
  width: 44px; height: 44px;
  background: transparent; border: 1px solid rgba(188,213,242,.4); border-radius: 3px;
  cursor: pointer; padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav__toggle span { display: block; width: 20px; height: 1.5px; background: var(--brass-hi); transition: transform .35s var(--ease), opacity .35s var(--ease); }
.nav__toggle.is-open span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav__toggle.is-open span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

@media (max-width: 880px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .nav { background: rgba(9,26,48,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: rgba(188,213,242,.2); }
  .nav__mobile { background: var(--augusta); border-bottom: 1px solid rgba(188,213,242,.2); }
  .nav__brandtext { font-size: .875rem; }
}

/* --------------------------------------------------------------- sections */
.section { position: relative; padding: clamp(4.5rem, 9vw, 9rem) var(--gutter); overflow: hidden; }
.section--paper { background: var(--ivory); color: var(--ink); }
.section--deep { background: var(--augusta); color: var(--parchment); }
.section--paper + .section--paper { padding-top: 0; }

/* paper texture, subtle */
.section--paper::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(188,213,242,.05), transparent 60%);
  opacity: .9;
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 8rem var(--gutter) 6rem;
  background:
    radial-gradient(120% 90% at 30% 35%, rgba(27,54,88,.55), transparent 60%),
    linear-gradient(168deg, var(--augusta) 0%, var(--fairway) 48%, var(--bottle) 100%);
  color: var(--ivory);
  isolation: isolate;
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.hero__vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(115% 95% at 50% 45%, transparent 55%, rgba(5,15,30,.55) 100%);
}
.hero__content { position: relative; z-index: 3; max-width: 56ch; }

.hero__title {
  font-family: var(--font-display);
  font-weight: 340;
  font-size: clamp(2.9rem, 1.5rem + 7vw, 7rem);
  line-height: .98;
  letter-spacing: -0.025em;
  margin: 1rem 0 1.6rem;
  color: var(--ivory);
}
.hero__title .reveal-word { display: inline-block; }
.hero__title .reveal-word--break { margin-left: 0; }
.hero__title .em { font-style: italic; }
@media (min-width: 700px){
  .hero__title { max-width: 14ch; }
}

.hero__sub {
  font-size: clamp(1.05rem, 0.98rem + 0.5vw, 1.3rem);
  color: var(--parchment);
  max-width: 48ch; line-height: 1.6;
}
.hero__actions { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; margin-top: 2.2rem; }
.hero__actions .link-underline { color: var(--parchment); }

/* honour plate */
.hero__plate {
  position: absolute; right: var(--gutter); bottom: clamp(4rem, 9vw, 7rem); z-index: 3;
  background: linear-gradient(160deg, rgba(9,26,48,.85), rgba(7,19,36,.92));
  border: 1px solid var(--brass);
  padding: 1.5rem 1.8rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.hero__plate::before {
  content: ""; position: absolute; inset: 5px; border: 1px solid rgba(188,213,242,.4); pointer-events: none;
}
.plate__eyebrow { font-family: var(--font-ui); font-size: .875rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--brass-hi); }
.plate__figure { font-family: var(--font-display); font-weight: 320; font-size: 3.4rem; line-height: 1; color: var(--ivory); }
.plate__label { font-family: var(--font-ui); font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--parchment); max-width: 14ch; }
@media (max-width: 860px){ .hero__plate { display: none; } }

.hero__scroll {
  position: absolute; left: var(--gutter); bottom: 2rem; z-index: 3;
  display: flex; align-items: center; gap: .8rem; text-decoration: none;
  font-family: var(--font-ui); font-size: .875rem; letter-spacing: .25em; text-transform: uppercase;
  color: var(--sage);
}
.hero__scroll-line { width: 3.5rem; height: 1px; background: linear-gradient(90deg, var(--brass), transparent); position: relative; overflow: hidden; }
.hero__scroll-line::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--brass-hi); animation: scrollpulse 2.6s var(--ease) infinite; }
@keyframes scrollpulse { 0%{ transform: translateX(-100%);} 60%,100%{ transform: translateX(280%);} }

/* =====================================================================
   METHOD
   ===================================================================== */
.method__inner { max-width: var(--maxw); margin: 0 auto; position: relative; }
.method .display-h2 { max-width: 18ch; margin-bottom: 2.6rem; }
.method__cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.method__cols .lead { color: var(--ink); }
.method__cols p:last-child { color: #384B65; }
@media (max-width: 760px){ .method__cols { grid-template-columns: 1fr; } }

/* =====================================================================
   CREDENTIALS BAND
   ===================================================================== */
.creds__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(188,213,242,.24);
}
.cred {
  background: var(--augusta);
  padding: 2.4rem 1.6rem; text-align: center;
  display: flex; flex-direction: column; gap: .6rem; align-items: center;
  border-left: 1px solid rgba(188,213,242,.24);
}
.cred:first-child { border-left: none; }
.cred__figure { font-family: var(--font-display); font-weight: 320; font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; color: var(--brass-hi); }
.cred__figure--word { font-size: clamp(1.5rem, 2.4vw, 2.1rem); letter-spacing: -.01em; }
.cred__label { font-family: var(--font-ui); font-size: .875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--parchment); max-width: 18ch; line-height: 1.5; }
@media (max-width: 820px){
  .creds__inner { grid-template-columns: repeat(2, 1fr); }
  .cred:nth-child(odd) { border-left: none; }
  .cred:nth-child(n+3) { border-top: 1px solid rgba(188,213,242,.24); }
}

/* =====================================================================
   COACH
   ===================================================================== */
.coach__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 880px){ .coach__inner { grid-template-columns: 1fr; } }

.coach__portrait { position: sticky; top: 6rem; }
@media (max-width: 880px){ .coach__portrait { position: static; max-width: 380px; } }
.portrait-frame { position: relative; padding: 12px; background: var(--linen); }
.portrait-frame img {
  width: 100%; height: auto; filter: grayscale(.35) sepia(.18) contrast(1.02) brightness(1.02);
  mix-blend-mode: normal;
}
.portrait-frame::after {
  content: ""; position: absolute; inset: 12px; pointer-events: none;
  background: linear-gradient(180deg, rgba(17,39,67,.10), rgba(17,39,67,.20));
  mix-blend-mode: multiply;
}
.portrait-frame__corner { position: absolute; width: 26px; height: 26px; border: 2px solid var(--brass); }
.portrait-frame__corner--tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.portrait-frame__corner--br { bottom: 0; right: 0; border-left: none; border-top: none; }
.portrait__cap { font-family: var(--font-ui); font-size: .875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass-lo); margin-top: 1rem; text-align: center; }

.coach__body { position: relative; }
.coach__body .display-h2 { margin-bottom: 1.8rem; }
.prose p { margin-bottom: 1.2rem; max-width: 60ch; }

.pullquote {
  font-family: var(--font-display); font-style: italic; font-weight: 360;
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem); line-height: 1.25;
  color: var(--brass-lo);
  border-left: 2px solid var(--brass);
  padding: .4rem 0 .4rem 1.6rem; margin: 2rem 0; max-width: 24ch;
}

/* =====================================================================
   LIFE IN THE GAME (history)
   ===================================================================== */
.life__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: stretch;
}
.life__col p { color: var(--parchment); margin-bottom: 1.1rem; max-width: 46ch; }
.life__col .display-h3 { color: var(--ivory); }
.life__divider { width: 1px; background: linear-gradient(180deg, transparent, rgba(188,213,242,.5), transparent); }
@media (max-width: 820px){
  .life__inner { grid-template-columns: 1fr; }
  .life__divider { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(188,213,242,.5), transparent); }
}

/* =====================================================================
   PROGRAMMES
   ===================================================================== */
.programmes__head { max-width: var(--maxw); margin: 0 auto 3rem; text-align: center; }
.programmes__head .display-h2 { color: var(--ivory); }
.programmes__head .eyebrow { justify-content: center; }
.programmes__sub { color: var(--parchment); max-width: 52ch; margin: 1rem auto 0; }

.programmes__grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem;
}
@media (max-width: 980px){ .programmes__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .programmes__grid { grid-template-columns: 1fr; } }

.prog {
  position: relative;
  background: linear-gradient(180deg, rgba(27,54,88,.55), rgba(9,26,48,.65));
  border: 1px solid rgba(188,213,242,.28);
  padding: 2rem 1.8rem 2.2rem;
  display: flex; flex-direction: column; gap: .7rem;
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.prog:hover { transform: translateY(-4px); border-color: var(--brass); box-shadow: 0 24px 50px rgba(0,0,0,.32); }
.prog--feature { border-color: var(--brass); background: linear-gradient(180deg, rgba(27,54,88,.8), rgba(9,26,48,.85)); }
.prog__pill {
  position: absolute; top: -.7rem; left: 1.8rem;
  font-family: var(--font-ui); font-size: .875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  background: var(--spark); color: var(--augusta); padding: .35rem .7rem; border-radius: 2px;
}
.prog__name { font-family: var(--font-display); font-weight: 420; font-size: 1.45rem; line-height: 1.1; color: var(--ivory); }
.prog__for { font-family: var(--font-ui); font-size: .875rem; letter-spacing: .04em; text-transform: uppercase; color: var(--brass-hi); }
.prog__blurb { color: var(--parchment); font-size: .98rem; flex-grow: 1; }
.prog__cta { margin-top: .8rem; align-self: flex-start; }
.prog--note { background: transparent; border-style: dashed; border-color: rgba(188,213,242,.35); justify-content: center; }

/* =====================================================================
   PROCESS
   ===================================================================== */
.process__head { max-width: var(--maxw); margin: 0 auto 3rem; }
.process__list {
  list-style: none; padding: 0; max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid rgba(20,38,63,.14);
}
.process__step { background: var(--ivory); padding: 2.2rem 1.6rem; position: relative; border-left: 1px solid rgba(20,38,63,.14); }
.process__step:first-child { border-left: none; }
.process__no {
  font-family: var(--font-display); font-style: italic; font-weight: 360; font-size: 2.4rem;
  color: var(--brass); display: block; margin-bottom: .8rem;
  border-bottom: 1px solid rgba(188,213,242,.3); padding-bottom: .6rem; width: fit-content; min-width: 2.4rem;
}
.process__step h3 { font-family: var(--font-display); font-weight: 440; font-size: 1.25rem; margin-bottom: .5rem; }
.process__step p { color: #384B65; font-size: .96rem; }
@media (max-width: 900px){
  .process__list { grid-template-columns: repeat(2, 1fr); }
  .process__step:nth-child(odd) { border-left: none; }
  .process__step:nth-child(n+3) { border-top: 1px solid rgba(20,38,63,.14); }
}
@media (max-width: 520px){
  .process__list { grid-template-columns: 1fr; }
  .process__step { border-left: none; }
  .process__step:nth-child(n+2) { border-top: 1px solid rgba(20,38,63,.14); }
  .process__step:first-child { border-top: none; }
}

/* =====================================================================
   FAQ
   ===================================================================== */
.faq__inner { max-width: 880px; margin: 0 auto; }
.faq__head { margin-bottom: 2.6rem; }
.faq__item { border-top: 1px solid rgba(20,38,63,.16); }
.faq__item:last-child { border-bottom: 1px solid rgba(20,38,63,.16); }
.faq__item summary {
  list-style: none; cursor: pointer; padding: 1.5rem 0;
  font-family: var(--font-display); font-weight: 420; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  transition: color .3s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--brass-lo); }
.faq__icon { position: relative; flex-shrink: 0; width: 18px; height: 18px; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: var(--brass); transition: transform .4s var(--ease); }
.faq__icon::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); }
.faq__icon::after { left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-50%); }
.faq__item[open] .faq__icon::after { transform: translateX(-50%) scaleY(0); }
.faq__a { overflow: hidden; }
.faq__a p { padding-bottom: 1.5rem; color: #384B65; max-width: 64ch; }
.faq__item[open] summary { color: var(--brass-lo); }

/* =====================================================================
   BOOKING
   ===================================================================== */
.book__inner {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
@media (max-width: 880px){ .book__inner { grid-template-columns: 1fr; } }
.book__head .display-h2 { color: var(--ivory); }
.book__sub { color: var(--parchment); margin: 1.2rem 0 1.8rem; max-width: 40ch; }
.book__quick { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.book__phone { font-family: var(--font-ui); font-size: .875rem; letter-spacing: .06em; color: var(--parchment); text-decoration: none; }
.book__phone:hover { color: var(--brass-hi); }

.booking {
  background: linear-gradient(180deg, rgba(27,54,88,.4), rgba(9,26,48,.6));
  border: 1px solid rgba(188,213,242,.3);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  position: relative;
}
.booking__progress { height: 2px; background: rgba(188,213,242,.2); margin-bottom: 1rem; }
.booking__progress-bar { display: block; height: 100%; width: 33%; background: var(--brass-gradient); transition: width .6s var(--ease); }
.booking__steps { list-style: none; padding: 0; display: flex; gap: 1.4rem; margin-bottom: 2rem; }
.booking__steps li { font-family: var(--font-ui); font-size: .875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sage); }
.booking__steps li.is-active { color: var(--brass-hi); }

.booking__step { border: none; padding: 0; margin: 0; min-width: 0; }
.booking__legend { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; color: var(--ivory); margin-bottom: 1.4rem; padding: 0; }

.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
@media (max-width: 480px){ .choice-grid { grid-template-columns: 1fr; } }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.choice__box {
  position: relative;
  display: flex; flex-direction: column; gap: .25rem;
  padding: 1.05rem 2.7rem 1.05rem 1.15rem;
  border: 1px solid rgba(188,213,242,.26); border-radius: 12px;
  background: rgba(7,19,36,.3);
  transition: border-color .35s var(--ease), background .35s var(--ease),
              transform .35s var(--ease), box-shadow .35s var(--ease);
  height: 100%;
}
/* selection indicator (outline circle -> filled brass check) */
.choice__box::before {
  content: ""; position: absolute; top: 1.05rem; right: 1.05rem;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid rgba(188,213,242,.5);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.choice__box::after {
  content: "✓"; position: absolute; top: 1.05rem; right: 1.05rem;
  width: 20px; height: 20px; display: grid; place-items: center;
  font-family: var(--font-ui); font-size: 12px; font-weight: 700; line-height: 1;
  color: var(--augusta); opacity: 0; transform: scale(.5);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.choice__box strong { font-family: var(--font-ui); font-weight: 600; font-size: .92rem; color: var(--ivory); letter-spacing: .01em; }
.choice__box small { font-family: var(--font-ui); font-size: .875rem; color: var(--parchment); line-height: 1.45; }
.choice:hover .choice__box { transform: translateY(-2px); border-color: var(--brass); background: rgba(7,19,36,.42); }
.choice input:checked + .choice__box {
  border-color: var(--brass-hi); background: rgba(188,213,242,.13);
  box-shadow: 0 0 0 1px var(--brass-hi), 0 14px 32px rgba(0,0,0,.3);
  transform: translateY(-2px);
}
.choice input:checked + .choice__box::before { background: var(--brass-gradient); border-color: var(--brass-hi); }
.choice input:checked + .choice__box::after { opacity: 1; transform: scale(1); }
.choice input:focus-visible + .choice__box { outline: 2px solid var(--brass-hi); outline-offset: 2px; }

.field { margin-bottom: 1.1rem; display: flex; flex-direction: column; gap: .4rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 480px){ .field-row { grid-template-columns: 1fr; } }
.field label { font-family: var(--font-ui); font-size: .875rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--brass-hi); }
.field__opt { color: var(--sage); text-transform: none; letter-spacing: 0; }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 1rem;
  background: rgba(7,19,36,.5); color: var(--ivory);
  border: 1px solid rgba(188,213,242,.3); border-radius: 2px;
  padding: .8rem .9rem; width: 100%;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.field textarea { resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--sage); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brass-hi); background: rgba(7,19,36,.7); }
.field select option { background: var(--augusta); color: var(--ivory); }
.field input:invalid:not(:placeholder-shown):not(:focus) { border-color: #b9543f; }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.7) sepia(1) saturate(2) hue-rotate(5deg); cursor: pointer; }

.booking__nav { display: flex; align-items: center; justify-content: space-between; margin-top: 1.6rem; gap: 1rem; }
.booking__nav .link-underline { color: var(--parchment); }
.booking__fineprint { font-family: var(--font-ui); font-size: .875rem; color: var(--sage); margin-top: 1.2rem; line-height: 1.6; }
.booking__fineprint a { color: var(--brass-hi); }

.booking__done { text-align: center; padding: 1rem 0; }
.booking__check { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--brass-gradient); color: var(--augusta); font-size: 1.4rem; margin-bottom: 1rem; }
.booking__done h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; color: var(--ivory); margin-bottom: .8rem; }
.booking__done p { color: var(--parchment); max-width: 40ch; margin: 0 auto 1.4rem; }
.booking__done a { color: var(--brass-hi); }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer { position: relative; background: var(--augusta); color: var(--parchment); padding: clamp(3.5rem, 6vw, 5.5rem) var(--gutter) 2.5rem; overflow: hidden; }
.footer__watermark {
  position: absolute; right: -2rem; bottom: -4rem; font-family: var(--font-display); font-style: italic;
  font-size: clamp(12rem, 26vw, 26rem); color: var(--ivory); opacity: .03; pointer-events: none; line-height: 1;
}
.footer__inner {
  max-width: var(--maxw); margin: 0 auto; position: relative;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem;
  padding-bottom: 3rem; border-bottom: 1px solid rgba(188,213,242,.22);
}
@media (max-width: 760px){ .footer__inner { grid-template-columns: 1fr; gap: 2rem; } }
.footer__brand .monogram--lg { border: 1px solid rgba(188,213,242,.4); width: 3.4rem; height: 3.4rem; border-radius: 4px; margin-bottom: 1rem; }
.footer__name { font-family: var(--font-display); font-size: 1.5rem; color: var(--ivory); font-weight: 420; }
.footer__tag { font-size: .95rem; color: var(--parchment); }
.footer__tag em { color: var(--brass-hi); }
.footer__nav, .footer__contact { display: flex; flex-direction: column; gap: .7rem; }
.footer__nav a, .footer__contact a {
  font-family: var(--font-ui); font-size: .875rem; letter-spacing: .04em; text-decoration: none; color: var(--parchment);
  width: fit-content; transition: color .3s var(--ease);
}
.footer__nav a:hover, .footer__contact a:hover { color: var(--brass-hi); }
.footer__contact .eyebrow { margin-bottom: .4rem; }
.footer__base {
  max-width: var(--maxw); margin: 2rem auto 0; position: relative;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: var(--font-ui); font-size: .875rem; letter-spacing: .04em; color: var(--sage);
}

/* =====================================================================
   REVEAL ANIMATIONS
   ===================================================================== */
.reveal, .reveal-word { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); will-change: opacity, transform; }
.reveal-word { transform: translateY(26px); }
.reveal.is-in, .reveal-word.is-in { opacity: 1; transform: none; }

/* per-section brass bloom */
.section { --bloom: 0; }
.section::after {
  content: ""; position: absolute; left: 50%; top: 12%; width: 70%; height: 50%;
  transform: translateX(-50%); pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(228,239,255,.10), transparent 70%);
  opacity: var(--bloom); transition: opacity 1.2s var(--ease);
}
.section.is-in { --bloom: 1; }
.section > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-word { opacity: 1 !important; transform: none !important; transition: none !important; }
  .section::after { display: none; }
  .hero__scroll-line::after { animation: none; }
}

/* =====================================================================
   PHONE EXPERIENCE — driven by .is-phone on <html> (set in the head).
   A short, thumb-friendly page: heavy sections removed, tighter spacing,
   and a sticky bottom "Book a lesson" bar. Desktop is untouched.
   ===================================================================== */


/* tighter rhythm + room for the bottom bar */
.is-phone .section { padding-top: 3rem; padding-bottom: 3rem; }
.is-phone .hero { min-height: 86svh; padding-bottom: 4.5rem; }
.is-phone body { padding-bottom: 78px; }

/* full-width, easy-to-tap primary action in the hero */
.is-phone .hero__actions { gap: 1.1rem; }
.is-phone .hero__actions .btn { width: 100%; justify-content: center; }

/* sticky bottom action bar (phones only) */
.bookbar { display: none; }
.is-phone .bookbar {
  display: flex; align-items: center; gap: .6rem;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  padding: .65rem .8rem calc(.65rem + env(safe-area-inset-bottom, 0px));
  background: rgba(9,26,48,.94);
  backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border-top: 1px solid rgba(188,213,242,.3);
  transition: transform .45s var(--ease), opacity .45s var(--ease);
}
.bookbar__book { flex: 1; padding-top: 1rem; padding-bottom: 1rem; }
.bookbar__call {
  flex: none; width: 50px; height: 50px;
  display: grid; place-items: center; border-radius: 4px;
  border: 1px solid rgba(188,213,242,.5); color: var(--brass-hi);
  text-decoration: none;
}
.bookbar--hidden { transform: translateY(130%); opacity: 0; pointer-events: none; }

/* Readable, resilient layout for the launch edition. */
.reveal,.reveal-word{opacity:1;transform:none}
.hero{min-height:760px;min-height:min(900px,100svh);padding-top:9rem;padding-bottom:7rem}
.hero__content{width:56%;max-width:760px}
.hero__title{font-size:clamp(2.8rem,5.3vw,5.4rem);max-width:16ch;line-height:1.08;letter-spacing:-.04em}
.hero__title .em{display:inline-block;margin-top:.18em;font-size:.77em}
.hero__photo{position:absolute;right:var(--gutter);top:23%;width:32%;max-width:450px;z-index:3}
.hero__photo img{width:100%;height:auto;aspect-ratio:500/515;object-fit:cover;border-radius:48% 48% 3px 3px;border:1px solid var(--brass)}
.hero__photo span{display:block;font-size:.875rem;text-align:center;color:var(--parchment);margin-top:1rem}
.hero__sub{max-width:42ch}.hero__plate{display:none}
.prog__for,.field label,.booking__steps li{font-size:.875rem;letter-spacing:.025em}
.prog__blurb,.process__step p{font-size:1rem}
.prog__pill,.nav__brandtext-sub{font-size:.75rem}
:focus-visible{outline:3px solid var(--brass-hi);outline-offset:5px}
.section--paper :focus-visible{outline-color:var(--fairway)}
.footer__contact a{overflow-wrap:anywhere}
@media(max-width:760px){.hero,.is-phone .hero{min-height:auto;padding-top:8rem;padding-bottom:3rem}.hero__content{width:100%;max-width:100%}.hero__title{font-size:clamp(2.5rem,9vw,4rem);max-width:100%}.hero__photo{position:relative;top:auto;right:auto;width:70%;max-width:300px;margin:3rem auto 0;order:2}.hero__scroll{display:none}.hero__actions .btn{width:100%}.hero__sub{max-width:100%}.section{scroll-margin-top:5rem}.nav__brandtext-sub{letter-spacing:.06em}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.online__head{max-width:800px;margin-bottom:3rem}.online__head>p:last-child{margin-top:1.5rem}
.online__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}.online__card{padding:2rem;border:1px solid #CBD5E1;display:flex;flex-direction:column;align-items:flex-start;gap:1.3rem}.online__card h3{font-family:var(--font-display);font-size:1.8rem;line-height:1.15}.online__card p:not(.eyebrow){flex:1}.online__card--feature{border-top:4px solid var(--brass-lo)}.online__card .btn{font-size:.875rem}.online__fine{font-size:.875rem;margin-top:1.5rem}
.reviews__heading{display:flex;justify-content:space-between;gap:2rem;align-items:center}.reviews__rating strong{font-family:var(--font-display);color:var(--brass-hi);font-size:4rem;line-height:1.2}.reviews__rating strong span{font-size:1.5rem}.reviews__rating p,.reviews__rating small{color:var(--parchment);font-size:.875rem}.reviews__grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin:3rem 0}.reviews__grid figure{border-top:1px solid var(--brass-lo);padding-top:1.5rem}.reviews blockquote{font-family:var(--font-display);font-size:2rem;line-height:1.3;color:var(--ivory);margin-bottom:1.4rem}.reviews figcaption{font-size:.875rem;color:var(--parchment)}.reviews figcaption span{font-size:.75rem}
@media(max-width:1050px){.nav__links{gap:1rem}.nav__links a{font-size:.875rem}.online__grid{grid-template-columns:1fr}.online__card{padding:1.5rem}}
@media(max-width:700px){.reviews__heading{display:block}.reviews__rating{margin-top:2rem}.reviews__grid{grid-template-columns:1fr;gap:2rem}}

/* Review carousel: readable at rest, touch scroll and keyboard navigation. */
.reviews__controls{display:flex;gap:.75rem;margin-top:2rem}.reviews__controls button{min-height:44px}.reviews__track{display:flex;gap:2rem;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding-bottom:1rem;scrollbar-color:var(--brass) var(--augusta)}.reviews__track figure{flex:0 0 calc((100% - 2rem)/2);min-width:0;scroll-snap-align:start;padding:1.5rem;border:1px solid var(--brass-lo);background:rgba(255,255,255,.025)}.reviews__track blockquote{font-size:clamp(1.5rem,2.5vw,2rem)}.reviews__track figcaption span{font-size:.875rem}@media(max-width:700px){.reviews__track figure{flex-basis:88%}.reviews__controls{gap:.5rem}.reviews__controls button{padding:.7rem 1rem}}

/* Navy and white identity. */
:root{--brass-gradient:linear-gradient(177deg,#E4EFFF 0%,#BCD5F2 100%)}
.hero__title .em{color:#FFFFFF}.nav__cta{white-space:normal;text-align:center;max-width:15rem}.nav__links{gap:1rem}.section--paper .eyebrow{color:#314E72}.section--paper .btn--brass{background:#112743;color:#FFFFFF}.online__card--feature{border-top-color:#112743}@media(max-width:1100px){.nav__links{display:none}.nav__toggle{display:flex}}@media(max-width:550px){.nav__cta{display:none}.nav__brandtext{font-size:1rem}.hero__actions .btn{font-size:1rem;padding:1rem}}

/* Compact, accessible lesson assistant. */
.help-launch{position:fixed;right:1.25rem;bottom:1.25rem;z-index:110;border:1px solid #BCD5F2;background:#112743;color:white;border-radius:2rem;padding:.9rem 1.2rem;font:600 1rem var(--font-body);box-shadow:0 4px 22px #0003;cursor:pointer}
.lesson-help{position:fixed;right:1.25rem;bottom:5.5rem;z-index:111;width:min(410px,calc(100vw - 2rem));max-height:min(660px,calc(100dvh - 7rem));display:flex;flex-direction:column;background:white;color:#14263F;border:1px solid #B9C9DD;border-radius:14px;box-shadow:0 12px 60px #0005;overflow:hidden;font:400 1rem/1.5 var(--font-body)}
.lesson-help__header{background:#112743;color:white;padding:1rem;display:flex;justify-content:space-between;gap:.5rem;align-items:center}.lesson-help__header h2{font-size:1.1rem;line-height:1.3}.lesson-help__header p{font-size:.875rem;color:#DAE4F1;margin-top:.25rem}.lesson-help__header button{background:transparent;color:white;border:1px solid #BCD5F2;border-radius:6px;min-width:44px;min-height:44px;font-size:1.6rem;cursor:pointer}
.lesson-help__messages{padding:1rem;overflow-y:auto;min-height:100px;flex:1;overscroll-behavior:contain}.help-message{background:#F0F4F9;padding:.8rem;border-radius:8px;margin-bottom:.75rem;overflow-wrap:anywhere}.help-message--visitor{background:#112743;color:white;margin-left:2rem}.help-message a{display:block;color:#173D70;text-decoration:underline;font-weight:600;margin-top:.55rem}.lesson-help__topics{display:flex;flex-wrap:wrap;gap:.4rem;padding:.5rem 1rem}.lesson-help__topics button{border:1px solid #9DAFC5;background:white;color:#14263F;border-radius:1rem;padding:.45rem .7rem;font-size:.875rem;min-height:40px;cursor:pointer}.lesson-help form{padding:.5rem 1rem}.lesson-help label{font-size:.875rem;font-weight:600}.lesson-help__input{display:flex;gap:.5rem;margin-top:.3rem}.lesson-help input{width:100%;min-width:0;padding:.7rem;border:1px solid #9DAFC5;border-radius:6px;font:inherit}.lesson-help__input button{background:#112743;color:white;border:0;border-radius:6px;padding:.7rem;font-size:1rem;cursor:pointer}.lesson-help__foot{padding:.5rem 1rem 1rem;font-size:.875rem}.lesson-help :focus-visible{outline:3px solid #4379B9;outline-offset:2px}
@media(max-width:768px){.help-launch{bottom:calc(6.2rem + env(safe-area-inset-bottom,0px));right:.75rem;font-size:.875rem}.lesson-help{right:.5rem;bottom:calc(6rem + env(safe-area-inset-bottom,0px));width:calc(100vw - 1rem);max-height:calc(100dvh - 7rem)}}

.help-handoff{padding:1rem;overflow-y:auto;overscroll-behavior:contain}.help-handoff h3{font-size:1.15rem;margin:.6rem 0}.help-handoff p{font-size:.95rem;line-height:1.5;margin-bottom:.8rem}.lesson-help .help-handoff form{padding:0}.help-handoff label{display:block;margin:.7rem 0 .3rem}.help-handoff label span{font-weight:400}.help-handoff textarea{width:100%;resize:vertical;min-height:85px;padding:.65rem;border:1px solid #9DAFC5;border-radius:6px;font:inherit}.handoff-back{border:0;background:none;color:#173D70;padding:.3rem 0;font:inherit;text-decoration:underline;cursor:pointer}.handoff-prepare,.handoff-send{display:block;text-align:center;background:#112743;color:white;border:0;border-radius:6px;padding:.8rem;margin:.8rem 0;font:600 1rem var(--font-body);width:100%;text-decoration:none;cursor:pointer}.handoff-send--email{background:#EDF3FA;color:#112743;border:1px solid #9DAFC5}.help-handoff .handoff-note{font-size:.875rem}#speakToMatt{background:#112743;color:white}.lesson-help .help-handoff input{display:block}

.form-safety{border:0;padding:0;margin:0;min-width:0}.form-safety:disabled{opacity:.65}