/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
img { display: block; max-width: 100%; }
button { cursor: pointer; font: inherit; color: inherit; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 2px; }

/* ---------- Palette ---------- */
:root {
  --background:#ffffff;  --foreground:#0a0a0a;
  --brand:#7A2E3D;
  --brand-deep:#3D1620;
  --brand-light:#C97F91;
  --accent-teal:#9C4A5C;
  --surface:#f4f4f4;
  --surface-card:#ffffff;
  --ink:#0a0a0a;
  --ink-soft:#717784;
  --ghost:#d7dae1;
  --hairline:#e6e8ec;
  --on-brand:#ffffff;
  --radius-card:1.5rem; --radius-card-lg:2rem; --radius-pill:62.5rem; --radius-xl:0.75rem;
}

/* ---------- Adaptive rem grid ---------- */
html { font-size: 16px; }
@media (max-width: 1920px) { html { font-size: 0.833333vw; } }
@media (max-width: 1440px) { html { font-size: 1.111111vw; } }
@media (max-width: 1024px) { html { font-size: 1.5625vw;  } }
@media (max-width: 640px)  { html { font-size: 4.444444vw; } }

html.lenis-lock { position: relative; overflow: hidden; height: 100%; }

body {
  min-height: 100vh;
  background: var(--background);
  color: var(--foreground);
  font-family: "Onest", system-ui, sans-serif;
}

main { width: 100%; overflow-x: clip; }

.page-pad { padding: 0.5rem; }
@media (min-width: 640px) { .page-pad { padding: 0.75rem; } }

section, footer { position: relative; }

/* ---------- Shared components ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; }
.eyebrow::before { content:""; width: 0.375rem; height: 0.375rem; border-radius: var(--radius-pill); flex: none; }
.eyebrow.dark { color: var(--ink-soft); }
.eyebrow.dark::before { background: var(--brand); }
.eyebrow.light { color: rgba(255,255,255,0.7); }
.eyebrow.light::before { background: var(--brand-light); }

.pill-btn { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: var(--radius-pill); padding: 0.875rem 1.75rem; font-size: 0.875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; transition: background-color .2s, color .2s; }
.pill-btn svg { width: 1rem; height: 1rem; transition: transform .1s; }
.pill-btn.light { background: #fff; color: var(--brand-deep); }
.pill-btn.light:hover { background: var(--brand-light); color: #fff; }
.pill-btn.solid { background: var(--ink); color: #fff; }
.pill-btn.solid:hover { background: var(--brand-deep); }
.pill-btn.outline { border: 1px solid currentColor; color: var(--ink); }
.pill-btn.outline:hover { background: var(--ink); color: #fff; }
@media (min-width:769px){ .pill-btn:hover svg { transform: translateX(5px); } }

.arrow-btn { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: var(--radius-pill); border: 1px solid; transition: background-color .2s, border-color .2s, color .2s; }
@media (min-width:640px){ .arrow-btn { width: 3.5rem; height: 3.5rem; } }
.arrow-btn svg { width: 1.25rem; height: 1.25rem; transition: transform .15s; }
.arrow-btn.outline { border-color: var(--hairline); background: transparent; color: var(--ink); }
.arrow-btn.outline:hover { border-color: var(--ink); }
.arrow-btn.solid { background: var(--ink); border-color: var(--ink); color: #fff; }
.arrow-btn.solid:hover { background: var(--brand-deep); }
.arrow-btn.prev svg { transform: scaleX(-1); }
@media (min-width:769px){ .arrow-btn:hover svg { transform: scale(1.15); } .arrow-btn.prev:hover svg { transform: scaleX(-1) scale(1.15); } }

.dots { display: flex; align-items: center; gap: 0.5rem; }
.dots button { padding: 0.375rem; display: grid; place-items: center; }
.dots span { display:block; height: 0.375rem; width: 0.375rem; border-radius: var(--radius-pill); transition: width .25s, background-color .25s; }
.dots.dark span { background: var(--ghost); }
.dots.dark button[aria-current="true"] span { width: 1.25rem; background: var(--ink); }
.dots.light span { background: rgba(255,255,255,0.4); }
.dots.light button[aria-current="true"] span { width: 1.25rem; background: #fff; }

/* clip-mask reveal primitives */
.clip-line, .clip-word { overflow: hidden; display: block; }
.clip-line { padding-bottom: 0.14em; }
.clip-word { display: inline-block; padding-bottom: 0.12em; }
.clip-line > span, .clip-word > span { display: inline-block; transform: translateY(115%); opacity: 0; will-change: transform, opacity; }
.clip-line.in > span, .clip-word.in > span { transition: transform 1100ms cubic-bezier(.16,1,.3,1), opacity 1100ms cubic-bezier(.16,1,.3,1); transform: translateY(0); opacity: 1; }

.word-fade > span { display: inline-block; transform: translateY(18px); opacity: 0; will-change: transform, opacity; }
.word-fade.in > span { transition: transform 700ms cubic-bezier(.25,1,.5,1), opacity 700ms cubic-bezier(.25,1,.5,1); transform: translateY(0); opacity: 1; }

.spring-el { will-change: transform, opacity; }

h1,h2,h3,p { font-weight: 400; }
.stacked-title { font-weight: 500; text-transform: uppercase; line-height: 0.95; letter-spacing: -0.01em; }

/* ---------- Header ---------- */
header.site-header { position: relative; z-index: 20; display: flex; align-items: center; padding: 1.5rem 1.5rem 0; font-size: 0.75rem; color: #fff; }
@media (min-width:640px){ header.site-header { padding: 2rem 2.5rem 0; } }
.hdr-col { flex: 1; display: flex; align-items: center; gap: 2rem; }
.hdr-nav { display: none; }
@media (min-width:1024px){ .hdr-nav { display: flex; } }
.hdr-nav a { color: rgba(255,255,255,0.9); transition: color .2s; }
.hdr-nav a:hover { color: #fff; }
.hdr-brand { justify-content: center; font-size: 1rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; gap: 0.5rem; }
.hdr-brand svg { width: 1.25rem; height: 1.25rem; }
.hdr-right { justify-content: flex-end; gap: 1rem; }
@media (min-width:640px){ .hdr-right { gap: 1.25rem; } }
.book-visit-text { display: none; text-transform: uppercase; letter-spacing: 0.08em; }
.book-visit-text:hover { text-decoration: underline; }
@media (min-width:640px){ .book-visit-text { display: inline; } }
.burger { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-pill); background: rgba(255,255,255,0.15); backdrop-filter: blur(8px); display: grid; place-items: center; gap: 5px; transition: background-color .2s; }
.burger:hover { background: rgba(255,255,255,0.25); }
.burger span { width: 1rem; height: 1px; background: #fff; display: block; }

/* ---------- Hero ---------- */
.hero { background: var(--brand-deep); color: #fff; position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-card-lg); height: calc(100svh - 1rem); min-height: 36rem; display: flex; flex-direction: column; }
@media (min-width:640px){ .hero { height: calc(100svh - 1.5rem); } }
.hero-plate { position: absolute; inset: 0; z-index: -10; }
.hero-plate-inner { position: absolute; left: 0; right: 0; top: -16%; height: 132%; width: 100%; }
.hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 1400ms ease; }
.hero-slide.active { opacity: 1; }
.hero-plate-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(61,22,32,0.65), rgba(61,22,32,0.35), rgba(61,22,32,0.75)); }

.hero-title-wrap { padding: 1rem 1.5rem 0; }
@media (min-width:640px){ .hero-title-wrap { padding: 1rem 2.5rem 0; } }
#hero-title { font-size: 12.5vw; font-weight: 500; text-transform: uppercase; line-height: 0.85; letter-spacing: -0.02em; white-space: nowrap; }

.hero-bottom { margin-top: auto; padding: 0 1.5rem 2rem; display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width:640px){ .hero-bottom { padding: 0 2.5rem 2.5rem; flex-direction: row; justify-content: space-between; align-items: flex-end; } }
.hero-tagline { font-size: 2.4rem; font-weight: 500; text-transform: uppercase; line-height: 0.95; letter-spacing: -0.01em; color: rgba(255,255,255,0.85); }

.hero-right-cluster { display: flex; align-items: flex-end; gap: 1rem; }

.collection-slider { display: none; width: 16rem; flex-direction: column; gap: 0.75rem; }
@media (min-width:768px){ .collection-slider { display: flex; } }
.collection-card { display: flex; gap: 0.75rem; border-radius: var(--radius-card); border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.1); padding: 0.75rem; box-shadow: 0 10px 30px rgba(61,22,32,0.2); backdrop-filter: blur(10px); }
.collection-card img { width: 3.5rem; height: 3.5rem; border-radius: var(--radius-xl); object-fit: cover; flex: none; }
.collection-meta .brand { font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; }
.collection-meta .title { font-size: 0.7rem; text-transform: uppercase; opacity: 0.8; margin-top: 2px; }
.collection-meta .cta { font-size: 0.65rem; text-decoration: underline; display: inline-block; margin-top: 6px; }

.membership-card { width: 100%; max-width: 20rem; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.1); padding: 0.75rem; border-radius: var(--radius-card); box-shadow: 0 10px 30px rgba(61,22,32,0.2); backdrop-filter: blur(10px); display: flex; gap: 0.75rem; align-items: stretch; }
@media (min-width:640px){ .membership-card { max-width: 15rem; } }
.membership-left { display: flex; flex-direction: column; justify-content: space-between; }
.membership-value { font-size: 1.875rem; font-weight: 500; line-height: 1; }
.membership-dots { display: flex; }
.membership-dots span { width: 1.25rem; height: 1.25rem; border-radius: var(--radius-pill); border: 1px solid rgba(61,22,32,0.4); margin-left: -0.5rem; }
.membership-dots span:first-child { margin-left: 0; }
.membership-caption { font-size: 0.65rem; opacity: 0.8; }
.membership-img { width: 4rem; aspect-ratio: 3/4; border-radius: var(--radius-xl); object-fit: cover; flex: none; }

/* ---------- Trust ---------- */
.trust { background: var(--background); position: relative; isolation: isolate; overflow: hidden; padding: 4rem 1.5rem; }
@media (min-width:640px){ .trust { padding: 5rem 2.5rem; } }
.trust-badges { position: relative; z-index: 20; display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width:640px){ .trust-badges { flex-direction: row; justify-content: space-between; } }
.percent-badge { width: 7rem; height: 7rem; border-radius: var(--radius-pill); background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; flex: none; }
@media (min-width:640px){ .percent-badge { width: 8rem; height: 8rem; } }
.percent-badge .pct { font-size: 1.5rem; font-weight: 500; }
.percent-badge .cap { font-size: 0.6rem; color: var(--ink-soft); max-width: 7em; margin-top: 4px; }
.badge-card { max-width: 28rem; display: flex; gap: 1rem; border-radius: var(--radius-card); background: var(--surface); padding: 1.25rem; }
@media (min-width:640px){ .badge-card { gap: 1.25rem; padding: 1.5rem; } }
.badge-chip { background: var(--background); border-radius: var(--radius-xl); padding: 0.5rem 1rem; font-size: 1.25rem; font-weight: 500; height: fit-content; }
.badge-card h3 { font-size: 1.125rem; font-weight: 500; }
.badge-card p { font-size: 0.75rem; color: var(--ink-soft); line-height: 1.6; margin-top: 0.5rem; }

.ghost-heading { pointer-events: none; z-index: 0; user-select: none; max-width: 88rem; margin: 3rem auto 0; text-align: center; font-size: 8.2vw; font-weight: 500; text-transform: uppercase; line-height: 1.02; letter-spacing: -0.01em; }
.ghost-row { display: flex; justify-content: space-between; }
.ghost-word { color: var(--ghost); }
.ghost-word.ink { color: var(--ink); }

.coach-card-wrap { position: relative; z-index: 10; display: flex; justify-content: center; margin-top: 2rem; }
@media (min-width:640px){ .coach-card-wrap { margin-top: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } }
.coach-card { width: 13rem; aspect-ratio: 3/4; border-radius: var(--radius-card); background: var(--brand); overflow: hidden; transform: rotate(6deg); position: relative; }
@media (min-width:640px){ .coach-card { width: 16rem; } }
.coach-card img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
.coach-caption { position: absolute; inset-inline: 0.75rem; bottom: 0.75rem; border-radius: var(--radius-xl); background: rgba(61,22,32,0.4); color: #fff; backdrop-filter: blur(8px); padding: 0.5rem 0.75rem; }
.coach-caption .name { font-size: 0.875rem; font-weight: 500; }
.coach-caption .role { font-size: 0.65rem; opacity: 0.8; }

.trust-controls { position: relative; z-index: 20; margin-top: 3rem; display: flex; align-items: center; justify-content: space-between; }
@media (min-width:640px){ .trust-controls { margin-top: 6rem; } }

/* ---------- Programs ---------- */
.programs { background: var(--surface); padding: 6rem 1.5rem; }
@media (min-width:640px){ .programs { padding: 6rem 2.5rem; } }
.programs-list { margin-top: 3.5rem; }
.program-row { display: flex; gap: 1.5rem; align-items: center; padding: 1.75rem 0; border-top: 1px solid var(--hairline); }
.program-row:last-child { border-bottom: 1px solid var(--hairline); }
.program-row:focus-visible { background: var(--background); }
.program-idx { width: 2.5rem; font-size: 0.875rem; font-weight: 500; color: var(--ink-soft); flex: none; }
.program-body { flex: 1; }
.program-body .pname { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.01em; }
@media (min-width:640px){ .program-body .pname { font-size: 1.875rem; } }
.program-body .pdesc { font-size: 0.875rem; color: var(--ink-soft); margin-top: 4px; }
.program-arrow { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-pill); border: 1px solid var(--hairline); display: grid; place-items: center; flex: none; }
.program-arrow svg { width: 1.25rem; height: 1.25rem; opacity: 0.55; transition: transform .2s, opacity .2s; }
@media (min-width:769px){ .program-row:hover .program-arrow svg { transform: translateX(8px); opacity: 1; } }

/* ---------- Facilities ---------- */
.facilities { background: var(--background); border-radius: var(--radius-card-lg); margin-top: -2.5rem; padding: 4rem 1.5rem 5rem; position: relative; z-index: 1; }
@media (min-width:640px){ .facilities { padding: 4rem 2.5rem 5rem; } }
.facilities-grid { display: grid; grid-template-columns: 1fr; align-items: end; gap: 2.5rem; }
@media (min-width:768px){ .facilities-grid { grid-template-columns: 1fr 1fr; } }
.facilities-intro { max-width: 24rem; }
.facilities-icon { width: 4rem; height: 4rem; border-radius: var(--radius-card); object-fit: cover; }
.facilities-intro h2 { font-size: 2.25rem; margin-top: 1.5rem; }
@media (min-width:640px){ .facilities-intro h2 { font-size: 3rem; } }
.facilities-intro p { font-size: 0.875rem; color: var(--ink-soft); max-width: 20rem; margin-top: 1.5rem; }

.court-cards { display: flex; align-items: flex-end; gap: 1.25rem; }
.court-tile { flex: 1; aspect-ratio: 3/4; border-radius: var(--radius-card); overflow: hidden; background: var(--surface); position: relative; }
.court-tile:nth-child(2) { margin-bottom: 2rem; }
.court-tile img { width: 100%; height: 100%; object-fit: cover; }
.court-caption { position: absolute; inset-inline: 0.75rem; bottom: 0.75rem; border-radius: var(--radius-xl); backdrop-filter: blur(8px); color: #fff; padding: 0.75rem 1rem; }
.court-caption.clay { background: rgba(61,22,32,0.4); }
.court-caption.blue { background: rgba(11,110,151,0.55); }
.court-caption .cname { font-size: 0.875rem; font-weight: 500; }
.court-caption .cdesc { font-size: 0.65rem; opacity: 0.85; margin-top: 2px; }

/* ---------- Stats ---------- */
.stats { background: var(--brand-deep); color: #fff; border-radius: var(--radius-card-lg); margin-top: 0.75rem; padding: 5rem 1.5rem; }
@media (min-width:640px){ .stats { padding: 5rem 2.5rem; } }
.stats h2 { font-size: 2.25rem; margin-top: 1rem; }
@media (min-width:640px){ .stats h2 { font-size: 3rem; } }
.stats-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 2rem 2rem; margin-top: 4rem; }
@media (min-width:1024px){ .stats-grid { grid-template-columns: repeat(4,1fr); } }
.stat-cell { border-top: 1px solid rgba(255,255,255,0.2); padding-top: 1.25rem; }
.stat-cell .val { font-size: 3.75rem; font-weight: 500; letter-spacing: -0.01em; }
@media (min-width:640px){ .stat-cell .val { font-size: 4.5rem; } }
.stat-cell .lbl { font-size: 0.875rem; color: rgba(255,255,255,0.65); margin-top: 0.75rem; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip: rect(0,0,0,0); white-space:nowrap; }

/* ---------- Testimonials ---------- */
.testimonials { background: var(--background); padding: 5rem 1.5rem; }
@media (min-width:640px){ .testimonials { padding: 6rem 2.5rem; } }
.testimonials h2 { font-size: 2.25rem; margin-top: 1rem; }
@media (min-width:640px){ .testimonials h2 { font-size: 3rem; } }
.testi-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 3.5rem; }
@media (min-width:768px){ .testi-grid { grid-template-columns: repeat(3,1fr); } }
.testi-card { display: flex; flex-direction: column; justify-content: space-between; height: 100%; border-radius: var(--radius-card); background: var(--surface); padding: 1.75rem; transition: transform .25s; }
@media (min-width:769px){ .testi-card:hover { transform: translateY(-8px); } }
.testi-quote { font-size: 2.25rem; color: var(--brand); line-height: 1; }
.testi-card blockquote { font-size: 1.125rem; line-height: 1.6; color: var(--ink); margin-top: 1rem; }
.testi-figcap { border-top: 1px solid var(--hairline); padding-top: 1rem; margin-top: 1.5rem; display: flex; align-items: center; gap: 0.75rem; }
.testi-avatar { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-pill); object-fit: cover; flex: none; }
.testi-figcap .tname { font-weight: 500; }
.testi-figcap .trole { font-size: 0.875rem; color: var(--ink-soft); }

/* ---------- Footer ---------- */
footer.site-footer { background: var(--brand-deep); color: #fff; border-radius: var(--radius-card-lg); margin-top: 0.75rem; padding: 3.5rem 1.5rem; }
@media (min-width:640px){ footer.site-footer { padding: 4rem 2.5rem; } }
.footer-cta { border-bottom: 1px solid rgba(255,255,255,0.15); padding-bottom: 3.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width:640px){ .footer-cta { flex-direction: row; justify-content: space-between; align-items: flex-end; } }
.footer-cta h2 { font-size: 3.75rem; line-height: 0.92; margin-top: 1rem; letter-spacing: -0.01em; }
@media (min-width:640px){ .footer-cta h2 { font-size: 4.5rem; } }

.footer-cols { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding: 3.5rem 0; }
@media (min-width:768px){ .footer-cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-brand { max-width: 20rem; }
.footer-brand .mark-row { display: flex; align-items: center; gap: 0.5rem; font-size: 1.125rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; }
.footer-brand .mark-row svg { width: 1.5rem; height: 1.5rem; }
.footer-brand p { font-size: 0.875rem; color: rgba(255,255,255,0.65); margin-top: 1rem; }
.footer-brand address { font-style: normal; margin-top: 1.5rem; color: rgba(255,255,255,0.8); font-size: 0.875rem; display: flex; flex-direction: column; gap: 4px; }
.footer-brand address a:hover { text-decoration: underline; }
.footer-brand address .muted { color: rgba(255,255,255,0.55); }

.footer-nav h3 { font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255,255,255,0.5); }
.footer-nav ul { font-size: 0.875rem; color: rgba(255,255,255,0.8); margin-top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.footer-nav a:hover { text-decoration: underline; }

.footer-bottom { border-top: 1px solid rgba(255,255,255,0.15); padding-top: 2rem; font-size: 0.875rem; color: rgba(255,255,255,0.6); display: flex; flex-direction: column; gap: 1.25rem; }
@media (min-width:640px){ .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; } }
.footer-bottom nav { display: flex; gap: 1.25rem; }
.footer-bottom a:hover { color: #fff; }

/* ---------- Loader ---------- */
.loader { position: fixed; inset: 0; z-index: 200; background: var(--brand-deep); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; transition: transform 850ms cubic-bezier(.65,0,.35,1); }
.loader.exit { transform: translateY(-105%); }
.loader-word { display: flex; align-items: center; gap: 0.5rem; font-size: 1.5rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; opacity: 0; transform: translateY(16px); transition: opacity 500ms, transform 500ms; }
.loader-word.in { opacity: 1; transform: translateY(0); }
.loader-word svg { width: 1.75rem; height: 1.75rem; }
.loader-track { width: 10rem; height: 1px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.2); overflow: hidden; }
.loader-fill { width: 100%; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform 1280ms cubic-bezier(.65,0,.35,1) 120ms; }
.loader-fill.in { transform: scaleX(1); }

/* ---------- Modal ---------- */
.modal-overlay { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; padding: 0.75rem; pointer-events: none; }
@media (min-width:640px){ .modal-overlay { align-items: center; padding: 1.5rem; } }
.modal-overlay.open { pointer-events: auto; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(61,22,32,0.4); backdrop-filter: blur(6px); opacity: 0; transition: opacity 260ms; }
.modal-overlay.open .modal-backdrop { opacity: 1; }
.modal-panel { position: relative; max-height: 92svh; overflow-y: auto; width: 100%; max-width: 32rem; border-radius: var(--radius-card-lg); background: var(--surface-card); padding: 1.5rem; color: var(--ink); box-shadow: 0 40px 80px rgba(61,22,32,0.35); opacity: 0; transform: translateY(28px) scale(0.96); transition: opacity 280ms, transform 280ms; }
@media (min-width:640px){ .modal-panel { padding: 2rem; } }
.modal-overlay.open .modal-panel { opacity: 1; transform: translateY(0) scale(1); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; }
.modal-head h2 { font-size: 2.25rem; font-weight: 500; text-transform: uppercase; line-height: 0.95; margin-top: 0.75rem; }
@media (min-width:640px){ .modal-head h2 { font-size: 3rem; } }
.icon-close { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-pill); background: var(--surface); display: grid; place-items: center; flex: none; transition: background-color .2s; }
.icon-close:hover { background: var(--hairline); }
.icon-close svg { width: 1.125rem; height: 1.125rem; transition: transform .2s; }
@media (min-width:769px){ .icon-close:hover svg { transform: rotate(90deg); } }
.modal-form { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 1rem; }
.field label { font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-soft); display: block; margin-bottom: 0.5rem; }
.field input, .field textarea { width: 100%; border-radius: var(--radius-xl); border: 1px solid var(--hairline); background: var(--background); padding: 0.75rem 1rem; font-size: 0.875rem; font-family: inherit; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--brand-light); box-shadow: 0 0 0 2px var(--brand-light); }
.modal-submit { border-radius: var(--radius-pill); background: var(--ink); color: #fff; padding: 0.875rem 1.75rem; font-size: 0.875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; transition: background-color .2s; }
.modal-submit:hover { background: var(--brand-deep); }
.modal-submit:disabled { opacity: 0.6; }
.success-panel { margin-top: 2rem; border-radius: var(--radius-card); background: var(--surface); padding: 1.5rem; text-align: center; }
.success-check { width: 3rem; height: 3rem; border-radius: var(--radius-pill); background: var(--brand); display: grid; place-items: center; margin: 0 auto; }
.success-check svg { width: 1.5rem; height: 1.5rem; color: #fff; }
.success-panel h3 { font-size: 1.125rem; font-weight: 500; margin-top: 1rem; }
.success-panel p { font-size: 0.875rem; color: var(--ink-soft); margin-top: 0.5rem; }
.success-panel button { margin-top: 1.25rem; }
[hidden] { display: none !important; }

/* ---------- Menu overlay ---------- */
.menu-overlay { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; pointer-events: none; }
.menu-overlay.open { pointer-events: auto; }
.menu-backdrop { position: absolute; inset: 0; background: var(--brand-deep); opacity: 0; transition: opacity 280ms; }
.menu-overlay.open .menu-backdrop { opacity: 1; }
.menu-panel { position: relative; height: 100%; display: flex; flex-direction: column; padding: 0.5rem; opacity: 0; transform: translateY(-24px); transition: opacity 300ms, transform 300ms; color: #fff; }
@media (min-width:640px){ .menu-panel { padding: 0.75rem; } }
.menu-overlay.open .menu-panel { opacity: 1; transform: translateY(0); }
.menu-inner { flex: 1; display: flex; flex-direction: column; padding: 1.5rem; }
@media (min-width:640px){ .menu-inner { padding: 2.5rem; } }
.menu-top { display: flex; align-items: center; justify-content: space-between; }
.menu-brand { display: flex; align-items: center; gap: 0.5rem; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 500; }
.menu-brand svg { width: 1.5rem; height: 1.5rem; }
.icon-close-light { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-pill); background: rgba(255,255,255,0.15); display: grid; place-items: center; transition: background-color .2s; }
.icon-close-light:hover { background: rgba(255,255,255,0.25); }
.icon-close-light svg { width: 1.125rem; height: 1.125rem; transition: transform .2s; }
@media (min-width:769px){ .icon-close-light:hover svg { transform: rotate(90deg); } }
.menu-center { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; }
.menu-link { display: block; font-size: 3rem; font-weight: 500; letter-spacing: -0.01em; text-transform: uppercase; opacity: 0; transform: translateY(28px); transition: opacity 400ms, transform 400ms, color .2s; }
@media (min-width:640px){ .menu-link { font-size: 4.5rem; } }
.menu-link:hover { color: var(--brand-light); }
.menu-overlay.open .menu-link.in { opacity: 1; transform: translateY(0); }
.menu-bottom { border-top: 1px solid rgba(255,255,255,0.15); padding-top: 2rem; display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width:640px){ .menu-bottom { flex-direction: row; justify-content: space-between; align-items: center; } }
.menu-social { display: flex; gap: 1.25rem; color: rgba(255,255,255,0.7); font-size: 0.875rem; }
.menu-social a:hover { color: #fff; }

/* placeholder image fill (used until real assets are dropped in) */
.ph { background-size: cover; background-position: center; }

/* ---------- Program detail pages ---------- */
.page-hero { background: var(--brand-deep); color: #fff; position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-card-lg); min-height: 26rem; display: flex; flex-direction: column; }
.page-hero-plate { position: absolute; inset: 0; z-index: -10; }
.page-hero-plate img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(61,22,32,0.55), rgba(61,22,32,0.45), rgba(61,22,32,0.85)); }
.breadcrumb { position: relative; z-index: 5; padding: 1.5rem 1.5rem 0; font-size: 0.75rem; color: rgba(255,255,255,0.7); display: flex; gap: 0.5rem; align-items: center; }
@media (min-width:640px){ .breadcrumb { padding: 2rem 2.5rem 0; } }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.page-hero-body { margin-top: auto; padding: 2rem 1.5rem 2.5rem; position: relative; z-index: 5; }
@media (min-width:640px){ .page-hero-body { padding: 2.5rem 2.5rem 3rem; } }
.page-hero-idx { font-size: 0.875rem; font-weight: 500; color: var(--brand-light); letter-spacing: 0.1em; }
#page-title { font-size: 4rem; font-weight: 500; text-transform: uppercase; line-height: 0.92; letter-spacing: -0.01em; margin-top: 0.5rem; }
@media (min-width:640px){ #page-title { font-size: 6rem; } }
.page-hero-desc { font-size: 1rem; color: rgba(255,255,255,0.85); max-width: 32rem; margin-top: 1rem; }

.detail-section { padding: 4rem 1.5rem; }
@media (min-width:640px){ .detail-section { padding: 5rem 2.5rem; } }
.detail-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width:768px){ .detail-grid { grid-template-columns: 1.1fr 1fr; } }
.detail-copy h2 { font-size: 2.25rem; margin-bottom: 1.25rem; }
@media (min-width:640px){ .detail-copy h2 { font-size: 2.5rem; } }
.detail-copy p { font-size: 1rem; color: var(--ink-soft); line-height: 1.7; max-width: 34rem; }
.detail-copy p + p { margin-top: 1rem; }

.checklist { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.875rem; }
.checklist li { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.9375rem; color: var(--ink); }
.checklist svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 2px; color: var(--brand); }

.info-card { border-radius: var(--radius-card); background: var(--surface); padding: 1.75rem; }
.info-card dl { display: flex; flex-direction: column; gap: 1rem; }
.info-card .row { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--hairline); padding-top: 1rem; }
.info-card .row:first-child { border-top: none; padding-top: 0; }
.info-card dt { font-size: 0.8125rem; color: var(--ink-soft); }
.info-card dd { font-size: 0.9375rem; font-weight: 500; text-align: right; }
.info-card .cta { margin-top: 1.5rem; width: 100%; justify-content: center; }

.gallery-section { background: var(--surface); border-radius: var(--radius-card-lg); margin-top: 0.75rem; padding: 4rem 1.5rem; }
@media (min-width:640px){ .gallery-section { padding: 5rem 2.5rem; } }
.gallery-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; margin-top: 3rem; }
@media (min-width:640px){ .gallery-grid { grid-template-columns: repeat(4,1fr); } }
.gallery-tile { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 3/4; background: var(--background); }
.gallery-tile:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: 1/1; }
@media (max-width:639px){ .gallery-tile:first-child { grid-column: span 2; aspect-ratio: 4/3; } }
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; }

.other-programs { padding: 4rem 1.5rem 5rem; }
@media (min-width:640px){ .other-programs { padding: 5rem 2.5rem 6rem; } }
.other-programs-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2.5rem; }
@media (min-width:640px){ .other-programs-grid { grid-template-columns: repeat(3,1fr); } }
.other-program-card { border-radius: var(--radius-card); background: var(--surface); padding: 1.5rem; transition: background-color .2s; }
.other-program-card:hover { background: var(--hairline); }
.other-program-card .idx { font-size: 0.8125rem; color: var(--ink-soft); }
.other-program-card .name { font-size: 1.25rem; font-weight: 500; margin-top: 0.5rem; }

/* ---------- Capabilities (bento grid) ---------- */
.capabilities { position: relative; z-index: 1; background: var(--surface); color: var(--ink); padding: 6rem 1.5rem; }
@media (min-width:640px){ .capabilities { padding: 6rem 2.5rem; } }

.capabilities__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; max-width: 88rem; margin: 0 auto clamp(1.5rem, 3vw, 2.75rem); }
@media (max-width:640px){ .capabilities__header { flex-direction: column; } }

.capabilities__intro { max-width: 54rem; }
.capabilities__intro h2 { font-size: clamp(1.8rem, 3.2vw, 3.375rem); font-weight: 300; line-height: 1.08; letter-spacing: -0.01em; color: var(--ink); margin-top: 1rem; max-width: 57.5rem; }
.capabilities__intro p { max-width: 47.5rem; margin-top: 1.125rem; color: var(--ink-soft); font-size: clamp(0.875rem, 1vw, 1.0625rem); line-height: 1.62; }

.capabilities__button { flex: 0 0 auto; align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; min-height: 3rem; padding: 0 1.25rem; border: 1px solid var(--hairline); border-radius: var(--radius-pill); background: rgba(255,255,255,0.78); color: var(--ink); font-size: 0.875rem; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 1.125rem 2.75rem rgba(61,22,32,0.08); transition: background-color .2s, color .2s; }
.capabilities__button:hover { background: var(--ink); color: #fff; }
@media (max-width:640px){ .capabilities__button { width: 100%; } }

.capabilities__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(0.875rem, 1.25vw, 1.375rem); max-width: 88rem; margin: 0 auto; min-height: clamp(38.75rem, 72vh, 48.75rem); }
@media (max-width:1024px){ .capabilities__grid { grid-template-columns: repeat(2, minmax(0,1fr)); min-height: auto; } }
@media (max-width:640px){ .capabilities__grid { grid-template-columns: 1fr; } }

.capabilities__stack { display: grid; gap: clamp(0.875rem, 1.25vw, 1.375rem); grid-template-rows: minmax(13rem, 0.74fr) minmax(16.875rem, 1fr); }
@media (max-width:640px){ .capabilities__stack { grid-template-rows: auto; } }

.capabilities__stack--systems { grid-template-rows: minmax(26.25rem, 1.45fr) auto; }
@media (max-width:1024px){ .capabilities__stack--systems { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0,1fr)); grid-template-rows: minmax(16.25rem, 1fr); } }
@media (max-width:640px){ .capabilities__stack--systems { grid-template-columns: 1fr; grid-template-rows: auto; } }

.cap-card { position: relative; overflow: hidden; border: 1px solid var(--hairline); border-radius: var(--radius-card); box-shadow: 0 1.375rem 3.75rem rgba(21,34,34,0.08); }

.cap-card--tall { grid-row: span 2; }
@media (max-width:1024px){ .cap-card--tall { min-height: 38.75rem; } }
@media (max-width:640px){ .cap-card--tall { min-height: 35rem; grid-row: auto; } }

.cap-card--media, .cap-card--image-panel, .cap-card--tools-media { background: var(--ghost); color: #fff; }
.cap-card--media img, .cap-card--image-panel img, .cap-card--tools-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: cap-kenburns 20s ease-in-out infinite alternate; }

@keyframes cap-kenburns { from { transform: scale(1); } to { transform: scale(1.1); } }

.cap-cardshade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,8,12,0.3), transparent 34%), linear-gradient(0deg, rgba(20,8,12,0.78), transparent 48%); }
.cap-cardshade--light { background: linear-gradient(180deg, rgba(20,8,12,0.18), transparent 34%), linear-gradient(0deg, rgba(20,8,12,0.42), transparent 56%); }

.cap-cardlabel { position: relative; z-index: 1; display: flex; justify-content: center; padding: 1.5rem; color: rgba(255,255,255,0.78); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.cap-cardlabel--light { color: rgba(255,255,255,0.85); }
.cap-cardlabel--left { justify-content: flex-start; padding: 0; }

.cap-cardtimeline { position: absolute; z-index: 1; right: 1.25rem; bottom: 1.25rem; left: 1.25rem; display: grid; gap: 0.75rem; }
.cap-cardtimeline__row { display: grid; grid-template-columns: 3.5rem 1rem minmax(0,1fr); align-items: center; gap: 0.625rem; color: rgba(255,255,255,0.76); font-size: 0.75rem; }
.cap-cardtimeline__dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.62); }
.cap-cardtimeline__program { font-size: clamp(0.8125rem, 0.95vw, 0.9375rem); font-weight: 650; color: #fff; display: flex; flex-direction: column; gap: 2px; }
.cap-cardtimeline__program em { font-style: normal; font-size: 0.75rem; color: rgba(255,255,255,0.58); font-weight: 400; }

.cap-card--quote { display: flex; flex-direction: column; justify-content: space-between; padding: 1.5rem; background: linear-gradient(135deg, rgba(255,255,255,0.72), rgba(237,242,242,0.86)), var(--surface); }
.cap-card--quote blockquote { margin: clamp(1.375rem, 2.4vw, 2.125rem) 0 1.25rem; color: var(--ink); font-size: clamp(0.9375rem, 1vw, 1.125rem); line-height: 1.62; }
.cap-card__attribution strong { display: block; color: var(--ink); font-size: 0.9375rem; font-weight: 500; }
.cap-card__attribution span { display: block; color: var(--ink-soft); font-size: 0.875rem; line-height: 1.5; margin-top: 2px; }

.cap-card--metric { min-height: 20rem; }
.cap-cardmetric { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; text-align: center; text-shadow: 0 0.75rem 2rem rgba(0,0,0,0.3); }
.cap-cardmetric__value { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: clamp(3.5rem, 7.4vw, 7.75rem); font-weight: 300; line-height: 0.9; color: #fff; }
.cap-cardmetric__label { position: absolute; right: 1.5rem; bottom: 1.5rem; left: 1.5rem; color: rgba(255,255,255,0.82); font-size: clamp(0.875rem, 1.05vw, 1.125rem); line-height: 1.4; }

.cap-card--tools { display: flex; flex-direction: column; justify-content: flex-end; min-height: 26.25rem; }
.tool-marquee { position: relative; z-index: 1; display: grid; gap: 0.875rem; overflow: hidden; padding: 1.625rem 0 0.5rem; mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent); }
.tool-marquee__row { overflow: hidden; }
.tool-marquee__track { display: flex; width: max-content; gap: 0.75rem; }
.tool-marquee__row--left .tool-marquee__track { animation: marquee-left 24s linear infinite; }
.tool-marquee__row--right .tool-marquee__track { animation: marquee-right 28s linear infinite; transform: translateX(-50%); }
@keyframes marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.tool-pill { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 3.375rem; padding: 0 1rem; border: 1px solid rgba(255,255,255,0.2); border-radius: 0.875rem; background: rgba(255,255,255,0.18); color: #fff; font-size: 0.8125rem; font-weight: 700; backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.24); white-space: nowrap; }
.tool-pill i { font-size: 1.25rem; }

.cap-card--contact { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; min-height: 7.375rem; padding: 1.25rem 4.75rem 1.25rem 1.5rem; background: linear-gradient(135deg, rgba(255,255,255,0.72), rgba(237,242,242,0.86)), var(--surface); }
.cap-card__email { display: block; font-size: clamp(1.125rem, 1.45vw, 1.5rem); font-weight: 400; color: var(--ink); margin: 0.875rem 0 0.375rem; }
.cap-card__email:hover { text-decoration: underline; }
.cap-card__phone { color: var(--ink-soft); font-size: 0.875rem; line-height: 1.5; }
.cap-card__icon-button { position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); width: 2.625rem; height: 2.625rem; border-radius: 50%; border: 1px solid var(--hairline); background: var(--ink); color: #fff; display: grid; place-items: center; transition: background-color .2s; }
.cap-card__icon-button i { font-size: 1.1875rem; transition: transform .2s; }
.cap-card__icon-button:hover { background: var(--brand-deep); }
.capabilities__button i { transition: transform .2s; }
@media (min-width:769px){ .capabilities__button:hover i, .cap-card__icon-button:hover i { transform: translate(2px,-2px); } }

@media (prefers-reduced-motion: reduce){
  .cap-card--media img, .cap-card--image-panel img, .cap-card--tools-media img { animation: none; }
  .tool-marquee__track { animation: none !important; }
}