/* ============================================================
   ONYX LAGREE — design system
   Palette: onyx black · deep forest marble · taupe · sage · bone
   Typography: Instrument Sans [display/body] · Space Grotesk
   [labels/buttons — semi-mono accent] · Italiana [logotype only]
   Reference: o-p-e-n.com [Monument Grotesk + Semi-Mono]
   ============================================================ */

:root {
  --onyx: #181713;
  --charcoal: #23221d;
  --forest: #2e3b33;
  --forest-deep: #222d27;
  --taupe: #6f5b4d;
  --taupe-light: #b3a191;
  --sage: #9aa38f;
  --sage-light: #c3c8b8;
  --bone: #f1ede4;
  --bone-warm: #e9e2d4;
  --travertine: #d9cfbe;
  --ink: #000000;
  --hairline: rgba(24, 23, 19, 0.14);
  --hairline-light: rgba(241, 237, 228, 0.18);
  --serif-logo: 'Italiana', serif;
  --sans: 'Instrument Sans', 'Helvetica Neue', Helvetica, sans-serif;
  --mono: 'Space Grotesk', 'Helvetica Neue', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
/* iOS Safari otherwise inflates body text when a phone turns landscape */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink);
  background: var(--bone);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 5vw; }
.wrap > * { min-width: 0; }

/* ---------- type utilities ---------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--taupe);
}

.display {
  font-family: var(--sans);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.editorial {
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.35;
}

.grain { position: relative; }
.grain::after {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}
.grain > * { position: relative; z-index: 2; }

/* ---------- announcement bar ---------- */

.announce {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 110;
  display: block;
  text-align: center;
  background: var(--forest-deep);
  color: var(--bone-warm);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.62rem 1rem;
  border-bottom: 1px solid var(--hairline-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.announce:hover { color: var(--sage-light); }

/* ---------- nav ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 4vw;
  transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
  color: var(--bone);
}

.nav.scrolled {
  background: rgba(24, 23, 19, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 0.8rem 4vw;
}

.nav-logo {
  font-family: var(--serif-logo);
  font-size: 1.55rem;
  letter-spacing: 0.22em;
  line-height: 1;
}

.nav-logo small {
  display: block;
  font-family: var(--sans);
  font-size: 0.52rem;
  letter-spacing: 0.62em;
  margin-top: 0.28rem;
  color: var(--sage-light);
}
.nav-logo img { height: 30px; width: auto; display: block; }
.footer-logo img { height: 42px; width: auto; display: block; }

.nav-links {
  display: flex;
  gap: 2.2rem;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: none;
}

.nav-links a { opacity: 0.85; transition: opacity 0.25s; }
.nav-links a:hover { opacity: 1; }

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
  line-height: 1.2;
  padding: 0.8rem 1.7rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
  cursor: pointer;
  background: transparent;
  text-align: center;
}

.btn-solid {
  background: linear-gradient(180deg, #faf6ec, var(--bone-warm));
  color: var(--ink);
  border-color: rgba(241,237,228,0.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 6px 18px rgba(12,12,10,0.28);
}
.btn-solid:hover, .btn-solid:active { background: var(--bone); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 3px 10px rgba(12,12,10,0.3); }

.btn-glass {
  background: linear-gradient(165deg, rgba(241,237,228,0.14), rgba(241,237,228,0.05));
  color: var(--bone);
  border-color: rgba(241,237,228,0.32);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(241,237,228,0.28), 0 6px 18px rgba(12,12,10,0.22);
}
.btn-glass:hover, .btn-glass:active { background: rgba(241,237,228,0.22); border-color: rgba(241,237,228,0.5); color: var(--bone); }

.btn-dark {
  background: var(--onyx);
  color: var(--bone);
  border-color: var(--onyx);
}
.btn-dark:hover { background: transparent; color: var(--onyx); }

.btn-outline-dark { color: var(--onyx); border-color: var(--onyx); }
.btn-outline-dark:hover { background: var(--onyx); color: var(--bone); }

.nav .btn { padding: 0.7rem 1.6rem; }

.nav-toggle { display: none; min-width: 44px; min-height: 44px; background: none; border: none; color: inherit; font-size: 1.6rem; cursor: pointer; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--bone);
  overflow: hidden;
}

.hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}

.hero-bg--community {
  background-image: image-set(
    url('images/hero-community-1600.webp') 1x,
    url('images/hero-community-2400.webp') 2x
  );
  background-position: center 42%;
}

.hero-bg--class {
  background-image: image-set(
    url('images/hero-class-1600.webp') 1x,
    url('images/hero-class-2400.webp') 2x
  );
  background-position: center 48%;
}

.hero-bg--action {
  background-image: image-set(
    url('images/hero-action-1600.webp') 1x,
    url('images/hero-action-2400.webp') 2x
  );
  background-position: center 46%;
}

.hero-bg.hero-bg--class::after {
  background:
    linear-gradient(90deg, rgba(18,17,14,0.34) 0%, rgba(18,17,14,0.10) 56%, rgba(18,17,14,0.01) 86%),
    linear-gradient(180deg, rgba(18,17,14,0.08) 0%, rgba(18,17,14,0.01) 42%, rgba(18,17,14,0.48) 100%);
}

.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(24,23,19,0.48) 0%, rgba(24,23,19,0.16) 52%, rgba(24,23,19,0.02) 82%),
    linear-gradient(180deg, rgba(24,23,19,0.24) 0%, rgba(24,23,19,0.03) 38%, rgba(24,23,19,0.62) 100%);
}

.hero-bg.hero-bg--action::after {
  background:
    linear-gradient(90deg, rgba(20,24,20,0.38) 0%, rgba(20,24,20,0.12) 50%, rgba(20,24,20,0.01) 80%),
    linear-gradient(180deg, rgba(20,24,20,0.05) 0%, rgba(20,24,20,0.01) 44%, rgba(17,19,16,0.52) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 33px 5vw 6vh;
  text-shadow: 0 2px 18px rgba(8,10,8,0.24);
}

.hero h1 {
  font-size: clamp(2.6rem, 5.2vw, 4.4rem);
  margin: 0.9rem 0 1.2rem;
  max-width: 14ch;
}

.hero p.lede {
  font-size: clamp(0.98rem, 1.2vw, 1.12rem);
  line-height: 1.55;
  max-width: 44ch;
  opacity: 0.92;
  margin-bottom: 2rem;
}

.hero .eyebrow { color: var(--bone); }

.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero-proof {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  margin-top: 1.25rem;
  color: rgba(241,237,228,0.8);
}

.trust-strip {
  padding: 1.35rem 0;
  background: var(--bone);
  border-bottom: 1px solid var(--hairline);
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.trust-grid p {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--taupe);
}

.trust-grid p + p {
  border-left: 1px solid var(--hairline);
  padding-left: 1.4rem;
}

.trust-grid span { color: var(--ink); font-weight: 500; }

/* ---------- sections ---------- */

section { padding: 4.6rem 0; }

.section-head { max-width: 640px; margin-bottom: 2.2rem; }
.section-head h1, .section-head h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); margin-top: 0.9rem; }
.section-head h1 { margin-bottom: 0.83em; }
.section-head p { margin-top: 1.4rem; color: rgba(29,28,24,0.72); font-size: 1.02rem; }

/* method */

.method { background: var(--bone); }

.method-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3.4rem;
  align-items: center;
}

.method-img {
  position: relative;
}

.method-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 3/4;
  max-height: min(76svh, 640px);
  object-fit: cover;
}

.method-img img { border-radius: 14px; }

.shop-compact .method-grid { align-items: center; gap: 4rem; grid-template-columns: 1fr 1fr; }

.shop-compact .method-img img {
  aspect-ratio: 4/5;
  max-height: 520px;
  object-position: center 58%;
}

/* the shop headline was smaller than every sibling section; match them */
.shop-compact .display { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
.shop-compact .method-grid > div > p:not(.eyebrow):not(.mono-note) { margin-top: 0.9rem; }
.shop-compact .mono-note { margin-top: 1.5rem; }

.shop-compact .spec { margin-top: 1.7rem; }

.spec { margin-top: 2rem; border-top: 1px solid var(--hairline); }

.spec-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1.2rem;
  padding: 0.72rem 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}

.spec-k {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--taupe);
}

.spec-v { font-size: 1rem; font-weight: 500; color: var(--ink); }

.method-points { display: grid; gap: 0; margin-top: 2.5rem; }

.method-point {
  padding: 1.6rem 0;
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 1.2rem;
  align-items: baseline;
}

.method-point:last-child { border-bottom: 1px solid var(--hairline); }

.method-point .num {
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--taupe);
}

.method-point h2,
.method-point h3 {
  font-family: var(--sans);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 0.3rem;
}

.method-point p { font-size: 0.95rem; color: rgba(29,28,24,0.7); }

/* gallery */

.gallery { background: var(--onyx); color: var(--bone); }
.gallery .section-head p { color: rgba(241,237,228,0.78); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

.gallery-grid figure { overflow: hidden; position: relative; border-radius: 14px; }

.gallery-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 3/4;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-grid figure:hover img { transform: scale(1.045); }

.gallery-grid figcaption {
  position: absolute;
  left: 1.2rem; bottom: 1rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  opacity: 0.85;
}

/* event banner */

.event {
  background: linear-gradient(180deg, var(--forest-deep) 0%, var(--onyx) 100%);
  color: var(--bone);
  text-align: center;
}

.event h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); margin: 1rem auto 0.7rem; max-width: 18ch; }
.event .event-sub { max-width: 52ch; margin: 0 auto; color: rgba(241,237,228,0.72); }

.ticket {
  display: flex;
  max-width: min(680px, 100%);
  margin: 2.2rem auto 2.2rem;
  border-radius: 18px;
  overflow: hidden;
  text-align: left;
  transform: rotate(-1.2deg);
  filter: drop-shadow(0 30px 56px rgba(0,0,0,0.5));
}

.ticket-main {
  flex: 1;
  min-width: 0;
  background: linear-gradient(170deg, #f6f2e8, #e9e2d4);
  color: var(--ink);
  padding: 2.4rem 2.4rem 2rem;
}

.ticket-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.6rem; }
.ticket-logo { font-family: var(--serif-logo); font-size: 1.9rem; letter-spacing: 0.16em; color: var(--ink); display: block; }
.ticket-logo-sub { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.6em; color: var(--taupe); display: block; margin-top: 0.2rem; }

.ticket-row {
  display: flex;
  gap: 1.1rem;
  align-items: baseline;
  padding: 0.42rem 0;
}

.ticket-row .tk {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
  width: 92px;
  flex: none;
}

.ticket-row .tv { font-size: 1rem; font-weight: 500; color: var(--ink); }

.ticket-fine { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; color: var(--taupe); margin-top: 1.3rem; }

.ticket-stub {
  width: 128px;
  background: linear-gradient(170deg, #efe9dc, #e2dac9);
  border-left: 3px dashed rgba(29,28,24,0.35);
  padding: 1.8rem 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.ticket-admit {
  font-family: var(--mono);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 1.05rem;
  letter-spacing: 0.42em;
  color: var(--ink);
  font-weight: 500;
}

.ticket-barcode {
  width: 100%;
  height: 42px;
  background: repeating-linear-gradient(90deg, #1d1c18 0 3px, transparent 3px 5px, #1d1c18 5px 11px, transparent 11px 13px, #1d1c18 13px 15px, transparent 15px 21px);
}

/* pricing */

.pricing {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, var(--onyx) 0%, var(--forest-deep) 100%);
  color: var(--bone);
}

.pricing::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg, transparent 0 42%, rgba(241,237,228,0.025) 42.1% 42.2%, transparent 42.3%),
    linear-gradient(112deg, transparent 0 67%, rgba(241,237,228,0.018) 67.1% 67.2%, transparent 67.3%);
  pointer-events: none;
}

.pricing .wrap {
  position: relative;
  z-index: 1;
}

.pricing .wrap::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -8%;
  bottom: 5rem;
  width: 58%;
  height: 28rem;
  background: radial-gradient(ellipse at center, rgba(195,200,184,0.14), rgba(174,143,99,0.05) 44%, transparent 72%);
  filter: blur(18px);
  pointer-events: none;
}

.pricing .section-head p { color: rgba(241,237,228,0.82); }
.pricing .eyebrow { color: var(--sage-light); }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.4rem;
}

.price-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(165deg, rgba(241,237,228,0.09), rgba(241,237,228,0.025));
  border: 1px solid rgba(241,237,228,0.16);
  border-radius: 22px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(241,237,228,0.13), 0 20px 46px rgba(8,10,8,0.3);
  padding: 2.3rem 1.7rem 2rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}

.price-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(241,237,228,0.42), transparent);
}

.price-card:hover {
  transform: translateY(-2px);
  border-color: rgba(195,200,184,0.42);
  background: linear-gradient(165deg, rgba(241,237,228,0.12), rgba(241,237,228,0.04));
  box-shadow: inset 0 1px 0 rgba(241,237,228,0.17), 0 25px 54px rgba(8,10,8,0.38);
}

.price-card.featured {
  background:
    radial-gradient(circle at 18% 0%, rgba(226,211,174,0.19), transparent 42%),
    linear-gradient(145deg, rgba(241,237,228,0.18), rgba(150,162,143,0.09) 54%, rgba(241,237,228,0.04));
  border-color: rgba(216,220,205,0.52);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 28px 66px rgba(8,10,8,0.42),
    0 0 68px rgba(195,200,184,0.13),
    0 0 24px rgba(226,211,174,0.08);
}

.price-card.featured:hover {
  border-color: rgba(226,229,217,0.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.34),
    0 30px 72px rgba(8,10,8,0.46),
    0 0 54px rgba(195,200,184,0.12);
}

.price-card-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 1.3rem;
}

.price-badge {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.62rem;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(180deg, #e8e8df, var(--sage-light));
  border: 1px solid rgba(255,255,255,0.42);
  border-radius: 999px;
  padding: 0.5rem 0.7rem;
  box-shadow: 0 5px 18px rgba(8,10,8,0.18);
}

.price-card .tier {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.35;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage-light);
  margin-bottom: 1.3rem;
}

.price-card-kicker .tier { margin-bottom: 0; }

/* "Unlimited Monthly" runs to two lines where the others take one, which
   started its price 20px lower than the rest of the row. Both the label row
   and the price row hold two lines' worth of space so all four line up. */
.price-card .tier,
.price-card-kicker { min-height: 2.7em; align-items: flex-start; }
.price-card-kicker { min-height: calc(2.7em * 0.75); }

.price-card .amount {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 0.35rem;
  min-height: 3.35rem;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -0.03em;
  font-size: 2.2rem;
  line-height: 1.15;
  white-space: nowrap;
}

.price-card.featured .amount { font-size: 2.9rem; }

.price-card .amount small {
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--sage-light);
  white-space: nowrap;
}

.price-card ul {
  list-style: none;
  margin: 1.5rem 0 2rem;
  flex: 1;
  display: grid;
  align-content: start;
  gap: 0.6rem;
  font-size: 0.92rem;
  line-height: 1.5;
}

.price-card ul li { opacity: 0.92; }

.price-card .btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  padding: 0.85rem 3rem 0.85rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.28s ease, color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
}

.price-card .btn::after {
  content: '\2192';
  position: absolute;
  right: 1.15rem;
  top: 50%;
  transform: translateY(-52%);
  font-size: 1rem;
  line-height: 1;
  opacity: 0.78;
  transition: transform 0.28s ease, opacity 0.28s ease;
}

.price-card .btn:hover {
  transform: translateY(-2px);
}

.price-card .btn:hover::after {
  transform: translate(3px, -52%);
  opacity: 1;
}

.price-card.featured .btn-solid {
  background: linear-gradient(120deg, #f4efe4 0%, #dde6d5 52%, #b8c8af 100%);
  border-color: rgba(255,255,255,0.76);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.88),
    0 14px 34px rgba(142,169,132,0.24),
    0 0 30px rgba(226,211,174,0.14);
}

.price-card.featured .btn-solid:hover,
.price-card.featured .btn-solid:active {
  background: linear-gradient(120deg, #fbf8ef 0%, #e5ecdf 48%, #c4d0bc 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.94),
    0 16px 36px rgba(7,8,7,0.4),
    0 0 42px rgba(226,211,174,0.24);
}

.price-card:not(.featured) .btn-glass {
  padding-right: 1rem;
  background:
    linear-gradient(145deg, rgba(241,237,228,0.11), rgba(195,200,184,0.055)) padding-box,
    linear-gradient(135deg, rgba(241,237,228,0.56), rgba(195,200,184,0.22) 48%, rgba(174,143,99,0.42)) border-box;
  border: 1px solid transparent;
  box-shadow:
    inset 0 1px 0 rgba(241,237,228,0.2),
    0 10px 24px rgba(7,8,7,0.24),
    0 0 24px rgba(195,200,184,0.045);
}

.price-card:not(.featured) .btn::after {
  display: none;
}

.price-card:not(.featured) .btn-glass:hover,
.price-card:not(.featured) .btn-glass:active {
  background:
    linear-gradient(135deg, #ecece5, #d7dbcf) padding-box,
    linear-gradient(135deg, #f7f3e9, #c3c8b8 52%, #c6ad83) border-box;
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    0 14px 32px rgba(7,8,7,0.34),
    0 0 34px rgba(195,200,184,0.14);
}

.pricing-note { margin-top: 2rem; font-size: 0.85rem; color: rgba(241,237,228,0.68); text-align: center; }

/* first visit */

.first-visit { background: var(--bone); }

.visit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 2.4rem 0 2rem;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.visit-grid > div {
  padding: 1.6rem 1.4rem 1.7rem 0;
}

.visit-grid > div + div {
  border-left: 1px solid var(--hairline);
  padding-left: 1.4rem;
}

.visit-grid span {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--taupe);
}

.visit-grid h3 {
  margin-top: 0.7rem;
  font-size: 1rem;
  font-weight: 500;
}

.visit-grid p {
  margin-top: 0.45rem;
  font-size: 0.9rem;
  color: rgba(0,0,0,0.76);
}

.people .section-head p:not(.eyebrow),
.first-visit .section-head p:not(.eyebrow) {
  color: rgba(0,0,0,0.78);
}

/* locations */

.locations { background: var(--bone); }

.loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }

.loc-card {
  position: relative;
  color: var(--bone);
  padding: 3.2rem 2.6rem;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.loc-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(24,23,19,0.1), rgba(24,23,19,0.78));
}

.loc-card > * { position: relative; }

.loc-card .status {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-light);
  margin-bottom: 0.8rem;
}

.loc-card h3 { font-family: var(--sans); font-weight: 500; letter-spacing: -0.02em; font-size: 1.7rem; margin-bottom: 0.5rem; }
.loc-card p { font-size: 0.92rem; opacity: 0.85; margin-bottom: 1.4rem; max-width: 40ch; }

.loc-card--future {
  background:
    radial-gradient(circle at 76% 22%, rgba(195,200,184,0.14), transparent 30%),
    linear-gradient(145deg, var(--forest) 0%, var(--onyx) 100%);
  border: 1px solid rgba(24,23,19,0.08);
}

.loc-card--future::before {
  background:
    linear-gradient(180deg, rgba(24,23,19,0.02), rgba(24,23,19,0.42)),
    repeating-linear-gradient(112deg, transparent 0 68px, rgba(241,237,228,0.025) 68px 69px);
}

/* waitlist / email */

.waitlist {
  background: var(--forest-deep);
  color: var(--bone);
  text-align: center;
}

.waitlist h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); margin: 0.9rem auto 1rem; max-width: 24ch; }
.waitlist p { max-width: 50ch; margin: 0 auto 2.4rem; color: rgba(241,237,228,0.75); }

.email-form {
  display: flex;
  max-width: 480px;
  margin: 0 auto;
  border: 1px solid rgba(241,237,228,0.50);
  border-radius: 999px;
  background: linear-gradient(165deg, rgba(241,237,228,0.12), rgba(241,237,228,0.04));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(241,237,228,0.2), 0 12px 30px rgba(12,12,10,0.25);
  padding: 0.35rem;
}

.email-form input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 1.1rem 1.4rem;
  color: var(--bone);
  font-family: var(--sans);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  outline: none;
  min-width: 0;
}

.email-form input::placeholder { color: rgba(241,237,228,0.70); }

.email-form button { border: none; }

.form-msg { margin-top: 1.1rem; font-size: 0.85rem; color: var(--sage-light); min-height: 1.2em; }

.mono-note {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: rgba(241,237,228,0.78);
  margin-top: 1.6rem;
}

/* footer */

footer {
  background: var(--onyx);
  color: var(--bone);
  padding: 3.8rem 0 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.4rem;
  padding-bottom: 2.6rem;
  border-bottom: 1px solid var(--hairline-light);
}

.footer-logo {
  font-family: var(--serif-logo);
  font-size: 2rem;
  letter-spacing: 0.22em;
}

.footer-logo small {
  display: block;
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.62em;
  margin-top: 0.35rem;
  color: var(--sage-light);
}

.footer-grid h4 {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--taupe-light);
  margin-bottom: 1.2rem;
  font-weight: 400;
}

.footer-grid ul { list-style: none; display: grid; gap: 0.6rem; font-size: 0.9rem; }
.footer-grid ul a { opacity: 0.75; transition: opacity 0.25s; }
.footer-grid ul a:hover { opacity: 1; }

.footer-tag {
  margin-top: 1.2rem;
  color: rgba(241,237,228,0.6);
  font-size: 0.98rem;
  max-width: 30ch;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 2.2rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  /* 0.45 rendered as #7a7771 on onyx = 4.01:1, under the 4.5 floor for 12px */
  color: rgba(241,237,228,0.58);
}

/* reveal on scroll */

body.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s ease, transform 0.9s ease; }
body.js .reveal.visible { opacity: 1; transform: none; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .method-grid { gap: 2.2rem; }
  .section-head { margin-bottom: 1.8rem; }
  .hero h1 { font-size: clamp(2.2rem, 9vw, 3.2rem); }
  .section-head h1, .section-head h2 { font-size: clamp(1.65rem, 6.5vw, 2.3rem); }
  .event h2 { font-size: clamp(1.7rem, 6.5vw, 2.4rem); }
  .waitlist h2 { font-size: clamp(1.65rem, 6.5vw, 2.2rem); }
  .spec-row { grid-template-columns: 104px 1fr; gap: 1rem; }
  .spec-v { font-size: 0.94rem; }
  .price-card { padding: 2rem 1.6rem 1.8rem; }
  .loc-card { min-height: 340px; padding: 2.2rem 1.6rem; }
  .method-grid { grid-template-columns: 1fr; gap: 3rem; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .loc-grid { grid-template-columns: 1fr; }
  .visit-grid { grid-template-columns: 1fr 1fr; }
  .visit-grid > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--hairline); }
  .visit-grid > div:nth-child(4) { border-top: 1px solid var(--hairline); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  section { padding: 5rem 0; }
}

@media (max-width: 700px) {
  .hero {
    display: block;
    min-height: 0;
    background: var(--onyx);
  }

  .hero-bg,
  .hero-bg--community,
  .hero-bg--class,
  .hero-bg--action {
    position: relative;
    height: 125vw;
    max-height: 680px;
    background-position: center;
  }

  .hero-bg--class {
    height: 94vw;
    min-height: 340px;
    max-height: 520px;
    background-position: center 48%;
  }

  .hero-bg--action {
    height: 94vw;
    min-height: 340px;
    max-height: 520px;
    background-position: center 45%;
  }

  .hero-bg::after {
    background: linear-gradient(180deg, rgba(24,23,19,0.12), rgba(24,23,19,0.22));
  }

  .hero-bg.hero-bg--class::after {
    background: linear-gradient(180deg, rgba(18,17,14,0.04), rgba(18,17,14,0.16));
  }

  .hero-bg.hero-bg--action::after {
    background: linear-gradient(180deg, rgba(18,17,14,0.015), rgba(18,17,14,0.12));
  }

  .hero-content {
    background: var(--onyx);
    padding: 2.1rem 5vw 2.6rem;
  }

  .ticket { flex-direction: column; transform: none; }
  .ticket-stub { width: 100%; border-left: none; border-top: 3px dashed rgba(29,28,24,0.35); flex-direction: row; gap: 1rem; align-items: center; padding: 1.2rem 1.4rem; }
  .ticket-admit { writing-mode: horizontal-tb; transform: none; letter-spacing: 0.3em; font-size: 0.9rem; }
  .ticket-stub > div { flex: 1; }
  .ticket-main { padding: 1.8rem 1.5rem 1.5rem; }
  .ticket-row { flex-direction: column; gap: 0.15rem; padding: 0.55rem 0; border-bottom: 1px solid rgba(29,28,24,0.08); }
  .ticket-row .tk { width: auto; }
  .ticket-row .tv { font-size: 0.95rem; }
}

@media (max-width: 560px) {
  .announce { font-size: 0.58rem; letter-spacing: 0.06em; }
  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .hero-ctas .btn { width: 100%; }
  section { padding: 3rem 0; }
  .eyebrow { font-size: 0.66rem; letter-spacing: 0.24em; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; }
  .nav-logo { font-size: 1.3rem; }
  .hero p.lede { font-size: 1.02rem; }
  .trust-grid { grid-template-columns: 1fr; gap: 0.7rem; }
  .trust-grid p + p { border-left: 0; padding-left: 0; }
  .visit-grid { grid-template-columns: 1fr; }
  .visit-grid > div,
  .visit-grid > div + div { border-left: 0; border-top: 1px solid var(--hairline); padding: 1.2rem 0; }
  .visit-grid > div:first-child { border-top: 0; }
  .pricing-note { font-size: 0.78rem; }
  .mono-note { font-size: 0.6rem; letter-spacing: 0.16em; }
  .email-form { flex-direction: column; }
  .email-form button { border-left: none; border-top: 1px solid var(--hairline-light); padding: 1rem; }
}

/* accessibility: respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  body.js .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* anchored sections clear the fixed nav */
section[id], header[id], footer[id] { scroll-margin-top: 108px; }

/* responsive image guard */
img { max-width: 100%; }

/* announce bar: condensed label on small screens */
.announce-short { display: none; }
@media (max-width: 700px) {
  .announce { letter-spacing: 0.12em; font-size: 0.6rem; }
  .announce-full { display: none; }
  .announce-short { display: inline; }
  .method-img img { aspect-ratio: 4/5; }
}

/* editorial footer */
.footer-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; }
.footer-rows { margin-top: 2.6rem; border-top: 1px solid var(--hairline-light); }
.footer-row {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 2rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--hairline-light);
  font-size: 0.9rem;
}
.footer-row .fk {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sage-light);
  padding-top: 0.25rem;
}
.footer-row .fv { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; opacity: 0.85; }
.footer-row .fv a { opacity: 0.9; transition: opacity 0.25s; }
.footer-row .fv a:hover { opacity: 1; }
@media (max-width: 560px) {
  .footer-row { grid-template-columns: 1fr; gap: 0.35rem; }
  .footer-top { align-items: flex-start; }
}

/* four pricing tiles on one row */
.pricing-grid.four { grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 900px) {
  .pricing-grid.four { grid-template-columns: 1fr 1fr; }
  .pricing-grid.four .featured { grid-column: span 2; }
}
@media (max-width: 560px) {
  .pricing-grid.four { grid-template-columns: 1fr; }
  .pricing-grid.four .featured { grid-column: auto; margin-top: 0; }
  .price-card-kicker { align-items: flex-start; }
  /* stacked cards do not need a shared row floor, so give the air back */
  .price-card .amount { min-height: 0; }
  .price-card .tier { min-height: 0; }
}


/* ---------- accessibility ---------- */

/* Visible keyboard focus. Two-tone ring: the bone half reads on the dark
   sections, the onyx half reads on bone. One of the two always shows. */
:focus-visible {
  outline: 2px solid var(--onyx);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--bone);
}

/* The input sits inside a rounded pill, so its ring is drawn inward
   where the pill cannot clip it. */
.email-form input:focus-visible {
  outline: 2px solid var(--bone);
  outline-offset: -5px;
  box-shadow: none;
}

.email-form:focus-within {
  border-color: var(--bone);
  box-shadow: 0 0 0 3px rgba(241,237,228,0.30);
}

/* Eyebrows inherit the darkened --taupe, which is tuned for the bone
   page. On the dark panels they switch to the light taupe instead. */
.gallery .eyebrow,
.waitlist .eyebrow { color: var(--taupe-light); }

/* Labels that exist for screen readers only. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Lets a keyboard or screen-reader user jump the nav on every page.
   Uses :focus, not :focus-visible — it must appear however it is reached. */
.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -130%);
  z-index: 200;
  background: var(--onyx);
  color: var(--bone);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.85rem 1.7rem;
  border-radius: 0 0 10px 10px;
  transition: transform 0.18s ease;
}

.skip-link:focus { transform: translate(-50%, 0); }

/* A target given focus programmatically should not also draw a ring. */
main:focus { outline: none; }

/* The nav floats over the hero photograph, which has bright passages that
   left some links under 3:1. This guarantees a dark backdrop beneath them
   until the solid scrolled state takes over. Absolutely positioned, so it
   is not a flex item of .nav. */
.nav::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 120px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(24,23,19,0.70), rgba(24,23,19,0));
  transition: opacity 0.4s ease;
}

.nav.scrolled::before { opacity: 0; }

.nav > * { position: relative; z-index: 1; }


/* ---------- the team ---------- */

.people { background: var(--bone); padding-bottom: 0; }

.people-shot {
  position: relative;
  overflow: hidden;
  margin: 3rem 0 -1px;
}

.people > .people-shot::before,
.people > .people-shot::after {
  content: '';
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  height: 10%;
  pointer-events: none;
}

.people > .people-shot::before {
  top: 0;
  background: linear-gradient(180deg, rgba(241,237,228,0.18), rgba(241,237,228,0));
}

.people > .people-shot::after {
  bottom: -1px;
  background: linear-gradient(180deg, rgba(233,226,212,0), rgba(233,226,212,0.22));
}

.people-shot img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 74vh;
  object-fit: cover;
  object-position: center 30%;
}

.people > .people-shot img {
  height: auto;
  max-height: min(84svh, 820px);
  object-position: center top;
}

@media (max-width: 760px) {
  .people-shot img { max-height: 58vh; }

  .people > .people-shot img {
    height: auto;
    max-height: 68svh;
    object-position: center top;
  }
}

.people-shot--lineup { margin-top: 3.4rem; }
.people-shot--lineup img { object-position: center 42%; }

/* ---------- the three-tile gallery ---------- */
/* Sits outside .wrap so the images run nearly edge to edge. */

.gallery-grid--three {
  margin: 3.2rem 0 0;
  padding: 0 2.6vw;
  gap: 1rem;
}

.gallery-grid--three img { aspect-ratio: 4/5; }

@media (max-width: 900px) {
  .gallery-grid--three { grid-template-columns: 1fr; padding: 0 5vw; gap: 0.9rem; }
  .gallery-grid--three img { aspect-ratio: 5/4; }
}

/* .shop-compact sets its own columns, which outranks the responsive
   collapse below; restate it at the same specificity. */
@media (max-width: 900px) {
  .shop-compact .method-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .shop-compact .method-img img { max-height: 58vh; aspect-ratio: 4/5; }
}

/* ---------- staggered gallery ---------- */
/* The three tiles sat in a rigid row. Offsetting two of them gives the
   band a rhythm without changing the grid. */

.gallery-grid--three { align-items: start; padding-bottom: 5.5rem; }

.gallery-grid--three figure:nth-child(2) { margin-top: 5rem; }
.gallery-grid--three figure:nth-child(3) { margin-top: 2rem; }

@media (max-width: 900px) {
  .gallery-grid--three { padding-bottom: 0; }
  .gallery-grid--three figure:nth-child(2),
  .gallery-grid--three figure:nth-child(3) { margin-top: 0; }
}

/* Document metadata on the legal pages. These lines were marked up as
   headings, which put contact details into the heading outline. */
.legal-meta {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--taupe);
  margin: 0.2rem 0;
}

.legal-meta + .legal-meta { margin-top: 0; }

.legal h3 {
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 500;
  margin: 1.6rem 0 0.5rem;
}


/* ============================================================
   STUDIO PICKER  —  /pricing
   Two panels ship in the HTML. JS turns them into tabs; without
   JS both stay visible and the switch hides itself.
   ============================================================ */

.studio-head { max-width: 680px; }

.studio-switch-shell {
  margin: 0 0 3rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
}

/* the switch itself is a two-slot glass track with a sliding pill */
.studio-switch {
  --i: 0;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 5px;
  border-radius: 999px;
  background: linear-gradient(165deg, rgba(241,237,228,0.10), rgba(241,237,228,0.03));
  border: 1px solid rgba(241,237,228,0.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(241,237,228,0.14), 0 16px 40px rgba(8,10,8,0.28);
  width: min(460px, 100%);
}

.studio-switch-pill {
  position: absolute;
  z-index: 0;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: calc(50% - 5px);
  border-radius: 999px;
  background: var(--bone);
  box-shadow: 0 6px 18px rgba(8,10,8,0.34);
  transform: translateX(calc(var(--i) * 100%));
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.studio-btn {
  position: relative;
  z-index: 1;
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--bone);
  font-family: var(--sans);
  padding: 0.86rem 1.1rem;
  min-height: 56px;
  border-radius: 999px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  line-height: 1.2;
  transition: color 0.3s ease;
}

.studio-btn .sb-name {
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.studio-btn .sb-meta {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage-light);
  transition: color 0.3s ease;
}

.studio-btn.is-active { color: var(--ink); }
.studio-btn.is-active .sb-meta { color: var(--taupe); }
.studio-btn:not(.is-active):hover { color: #fff; }

/* the address line under the switch */
.studio-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(241,237,228,0.68);
}

.sm-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sage-light);
  flex: none;
  box-shadow: 0 0 0 4px rgba(195,200,184,0.16);
}

[data-studio-meta][data-studio="sunset"] .sm-dot {
  background: var(--taupe-light);
  box-shadow: 0 0 0 4px rgba(179,161,145,0.16);
}

/* panels */
.studio-panel[hidden] { display: none; }

.studio-panel.is-entering {
  animation: studio-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes studio-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* without JS: no switch, both studios shown, each with its own heading */
html:not(.has-studio-picker) .studio-switch-shell { display: none; }

/* ---------- the full menu table ---------- */

.menu-block { margin-top: 3.4rem; }

.menu-title {
  font-family: var(--sans);
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 1.2rem;
}

.menu-table {
  border-top: 1px solid rgba(241,237,228,0.22);
}

.menu-row {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(88px, 104px) minmax(74px, 96px) minmax(0, 1.25fr);
  gap: 1rem;
  align-items: baseline;
  padding: 1.05rem 0;
  border-bottom: 1px solid rgba(241,237,228,0.13);
}

.menu-row--head {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage-light);
  padding: 0.7rem 0;
}

.mr-name {
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--bone);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.mr-name em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(241,237,228,0.58);
}

.mr-price {
  font-family: var(--mono);
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}

.mr-price small { font-size: 0.68rem; opacity: 0.7; }

.mr-unit {
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--sage-light);
  font-variant-numeric: tabular-nums;
}

.mr-window {
  font-size: 0.9rem;
  color: rgba(241,237,228,0.74);
}

.menu-row--member {
  background: linear-gradient(90deg, rgba(195,200,184,0.08), transparent 68%);
  margin: 0 -1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
}

.menu-ctas { margin-top: 2.6rem; }

.menu-fine {
  margin-top: 1.8rem;
  color: rgba(241,237,228,0.6);
  line-height: 2;
}

.menu-fine a { text-decoration: underline; }

/* ---------- the opening-soon panel ---------- */

.soon-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 3.4rem;
  align-items: start;
}

.soon-title {
  font-family: var(--sans);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin-top: 0.9rem;
}

.soon-lede {
  margin-top: 1.3rem;
  font-size: 1.02rem;
  color: rgba(241,237,228,0.82);
  max-width: 46ch;
}

.soon-form { margin-top: 2.1rem; max-width: 460px; }

.soon-side .spec { margin-top: 0; border-top-color: rgba(241,237,228,0.22); }
.soon-side .spec-row { border-bottom-color: rgba(241,237,228,0.13); }
.soon-side .spec-k { color: var(--sage-light); }
.soon-side .spec-v { color: var(--bone); }

.soon-fine {
  margin-top: 1.6rem;
  color: rgba(241,237,228,0.6);
  line-height: 2;
}

.soon-fine a { text-decoration: underline; }


/* ============================================================
   RESPONSIVE  —  tablet and phone
   Breakpoints, measured rather than guessed:
     1060  the nav links stop fitting beside the logo. Every iPad in
           portrait [744 / 768 / 820 / 834 / 1024] is below this, so
           tablets get the menu button, which is the right target on touch.
      900  two-column editorial blocks give up.
      700  phone layout: heroes unstack, everything goes single file.
      560  small phone: labels loosen, buttons go full width.
   ============================================================ */

/* ---------- 1060: the menu button appears ---------- */
@media (max-width: 1060px) {
  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    background: rgba(24,23,19,0.97);
    padding: 1.4rem 4vw 2rem;
    gap: 0.2rem;
    max-height: calc(100svh - 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* full-width rows in the open menu: a comfortable target, not a word */
  .nav-links.open > a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0.35rem 0.2rem;
    border-bottom: 1px solid rgba(241,237,228,0.10);
  }
  .nav-links.open > a:last-child {
    border-bottom: 0;
    margin-top: 1rem;
    justify-content: center;
    align-self: flex-start;
  }
  .nav-toggle { display: block; }

}

/* Two up, but only above the small-phone breakpoint: the max-width:560 rule
   that takes these to one column is earlier in the file, so an unbounded
   max-width:1060 here would outrank it at 390px. */
@media (min-width: 561px) and (max-width: 1060px) {
  .pricing-grid.four { grid-template-columns: 1fr 1fr; }
  .pricing-grid.four .featured { grid-column: span 2; }
}

/* ---------- tablet portrait: use the width, do not waste it ---------- */
@media (min-width: 701px) and (max-width: 1060px) {
  /* the three gallery tiles still read at ~230px wide — keep the row */
  .gallery-grid--three { grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 0 4.5vw; }
  .gallery-grid--three figure:nth-child(2),
  .gallery-grid--three figure:nth-child(3) { margin-top: 0; }
  .gallery-grid--three { padding-bottom: 0; }

  /* two studio cards sit side by side comfortably from 700 up */
  .loc-grid { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
  .loc-card { min-height: 380px; padding: 2rem 1.5rem; }

  /* text beside image still works at tablet width */
  .method-grid { grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
  .shop-compact .method-grid { grid-template-columns: 1fr 1fr; }

  .footer-row { grid-template-columns: 140px 1fr; gap: 1.4rem; }
  section { padding: 4.2rem 0; }
}

/* the stagger is a wide-screen flourish; it eats vertical space on tablets */
@media (max-width: 1060px) {
  .gallery-grid--three figure:nth-child(2),
  .gallery-grid--three figure:nth-child(3) { margin-top: 0; }
  .gallery-grid--three { padding-bottom: 0; }
}

/* ---------- phone: readable label sizes ---------- */
@media (max-width: 700px) {
  /* mono caps smear at tight tracking once the type is this small */
  .eyebrow { font-size: 0.72rem; letter-spacing: 0.2em; }
  .spec-k { font-size: 0.72rem; letter-spacing: 0.16em; }
  .trust-grid p { font-size: 0.78rem; letter-spacing: 0.08em; }
  .mono-note { font-size: 0.68rem; letter-spacing: 0.15em; line-height: 1.9; }
  .hero-proof { font-size: 0.68rem; letter-spacing: 0.16em; }
  .footer-row .fk { font-size: 0.68rem; letter-spacing: 0.18em; }

  /* the trust strip reads as three cramped columns below this width */
  .trust-grid { grid-template-columns: 1fr; gap: 0.55rem; }
  .trust-grid p + p { border-left: 0; padding-left: 0; }
}

@media (max-width: 560px) {
  /* these two overrode the sizes above — keep them in step */
  .eyebrow { font-size: 0.7rem; letter-spacing: 0.18em; }
  .mono-note { font-size: 0.66rem; letter-spacing: 0.14em; }
  .announce { font-size: 0.62rem; letter-spacing: 0.08em; }
  .price-card { padding: 1.8rem 1.4rem 1.6rem; }
  .loc-card { min-height: 300px; padding: 2rem 1.4rem; }
}

/* ---------- short viewports: a phone held sideways ---------- */
/* 844x390 is wider than the phone breakpoint, so without this the hero
   tries to be a full-height desktop hero inside 390px. */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: 0; }
  .hero-bg, .hero-bg--community, .hero-bg--class, .hero-bg--action { min-height: 420px; }
  .hero-content { padding-top: 5.5rem; padding-bottom: 2.4rem; }
  .hero h1 { font-size: clamp(2rem, 6vw, 3rem); }
  section { padding: 3.2rem 0; }
  .nav { padding: 0.6rem 4vw; }
}

/* ---------- notches and rounded corners ---------- */
@supports (padding: max(0px)) {
  .nav {
    padding-left: max(4vw, env(safe-area-inset-left));
    padding-right: max(4vw, env(safe-area-inset-right));
  }
  .wrap {
    padding-left: max(5vw, env(safe-area-inset-left));
    padding-right: max(5vw, env(safe-area-inset-right));
  }
  footer { padding-bottom: env(safe-area-inset-bottom); }
}

/* ---------- tap targets ----------
   Gated on width, not on (pointer: coarse). Every device this narrow is
   being touched, and a width query is one you can actually verify in a
   headless run — pointer emulation does not report coarse over CDP. */
@media (max-width: 1060px) {
  /* iOS zooms the whole page when a focused input is under 16px */
  .email-form input { font-size: 16px; }

  /* the footer is the densest tap area on the site; every row was 24px tall */
  .footer-row { padding: 0.5rem 0; }
  .footer-row .fv { gap: 0 1.4rem; }
  .footer-row .fv a,
  .footer-row .fv span { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; padding-right: 0.4rem; }
  .footer-top .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }

  /* the logo tap target was the height of the image */
  .nav-logo { padding: 0.5rem 0.25rem; margin: -0.5rem -0.25rem; }
  .nav-toggle { min-width: 48px; min-height: 48px; }

  /* Inline links in fine print and body copy. The ones inside .spec-v and
     the FAQ answers were 19px tall, under the 24px target-size minimum. */
  .mono-note a, .menu-fine a, .soon-fine a, .pricing-note a,
  .section-head p a, .method-grid p a, .legal a,
  .spec-v a, .faq-item p a, .faq-item li a, main p a {
    display: inline-block; padding: 0.3rem 0; min-height: 32px;
  }

  .btn { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ---------- genuinely touch-only ---------- */
@media (hover: none) and (pointer: coarse) {
  /* no 300ms wait, no grey flash */
  a, button, [role="tab"], input, label { touch-action: manipulation; }
  a, button, [role="tab"] { -webkit-tap-highlight-color: rgba(195,200,184,0.22); }
  /* hover lifts read as stuck states once a finger has been on them */
  .price-card:hover { transform: none; }
  .studio-btn:not(.is-active):hover { color: var(--bone); }
}

/* ============================================================
   STUDIO PICKER — responsive
   ============================================================ */

@media (max-width: 900px) {
  .studio-switch-shell { margin-bottom: 2.4rem; }
  .studio-switch { width: 100%; }

  .soon-grid { grid-template-columns: 1fr; gap: 2.6rem; }
  .soon-form { max-width: none; }
}

/* The four-column menu still fits an iPad in portrait — price beside per-class
   is the whole point of the table, so keep it until the columns really pinch. */
@media (max-width: 760px) {
  .menu-row {
    grid-template-columns: minmax(0, 1fr) 92px;
    grid-template-areas:
      "name price"
      "window unit";
    row-gap: 0.35rem;
    column-gap: 0.9rem;
    padding: 1rem 0;
  }
  .mr-name { grid-area: name; }
  .mr-price { grid-area: price; text-align: right; }
  .mr-unit { grid-area: unit; text-align: right; font-size: 0.84rem; }
  .mr-unit::after { content: ' / class'; opacity: 0.6; }
  .mr-window { grid-area: window; font-size: 0.86rem; }
  .menu-row--head { display: none; }
  .menu-row--member { margin: 0 -0.8rem; padding-left: 0.8rem; padding-right: 0.8rem; }
}

@media (max-width: 560px) {
  .studio-btn { min-height: 52px; padding: 0.7rem 0.6rem; }
  .studio-btn .sb-name { font-size: 0.95rem; }
  .studio-btn .sb-meta { font-size: 0.62rem; letter-spacing: 0.12em; }
  .studio-meta { font-size: 0.63rem; letter-spacing: 0.1em; align-items: flex-start; }
  .sm-dot { margin-top: 0.45rem; }
  .menu-title { margin-bottom: 0.8rem; }
  .menu-row { grid-template-columns: minmax(0, 1fr) 84px; }
  .mr-name { font-size: 0.97rem; }
  .mr-price { font-size: 1.02rem; }
  .menu-ctas .btn { width: 100%; }
}

/* a switch that cannot animate still has to move */
@media (prefers-reduced-motion: reduce) {
  .studio-switch-pill { transition: none; }
  .studio-panel.is-entering { animation: none; }
}


/* ============================================================
   XPLOR CONNECT FORM  —  her own capture, straight into Mariana Tek
   Their embed.css is deliberately not loaded; it fights the site.
   Their JS binds by id and name, which is why those are kept verbatim.
   ============================================================ */

.xpl { max-width: 460px; }
/* centered sections [the WeHo founding list]: the block sits in the middle, the fields stay left-aligned inside it */
.waitlist .xpl { margin: 0 auto; text-align: left; }
.waitlist .xpl p { max-width: none; margin: 0 0 1.1rem; }
.waitlist .xpl .xpl-note { margin: 1.1rem 0 0; }
.waitlist .xpl .form-msg { margin: 0 0 0.8rem; }
.soon-side .xpl { max-width: none; }

.xpl-head {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage-light);
  margin-bottom: 1.1rem;
}
.xpl-head:empty { display: none; }

.xpl .xpl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }

.xpl .form-group { margin-bottom: 0.7rem; }

.xpl label {
  display: block;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(241,237,228,0.62);
  margin-bottom: 0.35rem;
}

.xpl .form-control {
  width: 100%;
  min-height: 48px;
  padding: 0.85rem 1.1rem;
  font-family: var(--sans);
  font-size: 16px;            /* under 16 and iOS zooms the page on focus */
  color: var(--bone);
  background: linear-gradient(165deg, rgba(241,237,228,0.10), rgba(241,237,228,0.035));
  border: 1px solid rgba(241,237,228,0.26);
  border-radius: 12px;
  outline: none;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.xpl .form-control::placeholder { color: rgba(241,237,228,0.42); }
.xpl .form-control:hover { border-color: rgba(241,237,228,0.4); }
.xpl .form-control:focus {
  border-color: var(--bone);
  background: rgba(241,237,228,0.14);
  box-shadow: 0 0 0 3px rgba(241,237,228,0.18);
}

.xpl .xpl-check {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.6rem;
  margin: 0.9rem 0 1.2rem;
}

.xpl .xpl-check input[type="checkbox"] {
  /* 20px put it under the 24px target-size minimum on its own */
  width: 24px;
  height: 24px;
  accent-color: var(--sage-light);
  cursor: pointer;
}

/* the whole row is the target, not just the box */
.xpl .xpl-check { min-height: 44px; }

.xpl .xpl-check label {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(241,237,228,0.78);
  cursor: pointer;
}

.xpl #bb_submit { width: 100%; min-height: 50px; border-radius: 12px; }

/* their script writes success and failure into #alert */
.xpl #alert:not(:empty) {
  margin-bottom: 1rem;
  padding: 0.85rem 1.1rem;
  border-radius: 12px;
  font-size: 0.9rem;
  color: var(--bone);
  background: rgba(195,200,184,0.16);
  border: 1px solid rgba(195,200,184,0.34);
}

.xpl-note { margin-top: 1.1rem; color: rgba(241,237,228,0.58); line-height: 1.9; }

/* the flag above the Sunset menu */
.studio-flag {
  margin: -1.4rem 0 2rem;
  padding: 0.85rem 1.2rem;
  border-left: 2px solid var(--sage-light);
  background: rgba(195,200,184,0.08);
  border-radius: 0 10px 10px 0;
  font-size: 0.95rem;
  color: rgba(241,237,228,0.86);
}

/* the founding list sits under the Sunset menu rather than beside it */
#sunset-list { margin-top: 3.6rem; padding-top: 3rem; border-top: 1px solid rgba(241,237,228,0.18); scroll-margin-top: 120px; }

@media (max-width: 560px) {
  .xpl .xpl-row { grid-template-columns: 1fr; gap: 0; }
}

.pricing-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .pricing-grid.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pricing-grid.four { grid-template-columns: 1fr; } }

/* ---------- instructor application [/teach] ---------- */

.apply { background: var(--forest-deep); color: var(--bone); }
.apply-head { max-width: 640px; margin-bottom: 3rem; }
.apply-head h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); margin: 0.9rem 0 1rem; }
.apply-head p { color: rgba(241,237,228,0.72); max-width: 50ch; }

.apply-form { max-width: 760px; position: relative; }

.apply-group { border: none; border-top: 1px solid var(--hairline-light); padding: 2.2rem 0 2.6rem; min-width: 0; }
.apply-group legend {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  padding: 0 0 1.5rem;
  float: left; width: 100%;
  display: flex; align-items: baseline; gap: 1rem;
}
.apply-num { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.22em; color: var(--sage); }

.field-grid { clear: both; display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem 1.6rem; }
.field { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field > span {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage-light);
}
.field > span em { font-style: normal; text-transform: none; letter-spacing: 0.04em; color: rgba(241,237,228,0.5); }

.field input, .field select, .field textarea {
  width: 100%;
  background: rgba(241,237,228,0.06);
  border: 1px solid rgba(241,237,228,0.22);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  color: var(--bone);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.25s, background 0.25s;
  color-scheme: dark;
}
.field textarea { resize: vertical; min-height: 7rem; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23c3c8b8' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; }
.field select option { background: var(--forest-deep); color: var(--bone); }
.field input::placeholder, .field textarea::placeholder { color: rgba(241,237,228,0.35); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--sage-light); background: rgba(241,237,228,0.1); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--taupe-light); }
.field.invalid > span { color: var(--taupe-light); }

.check-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
.check {
  display: flex; align-items: center; gap: 0.7rem;
  border: 1px solid rgba(241,237,228,0.22);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  cursor: pointer;
  font-size: 0.92rem;
  line-height: 1.25;
  transition: border-color 0.25s, background 0.25s;
}
.check small { display: block; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; color: rgba(241,237,228,0.55); margin-top: 0.15rem; }
.check input { accent-color: var(--sage-light); width: 1rem; height: 1rem; flex: none; }
.check:has(input:checked) { border-color: var(--sage-light); background: rgba(195,200,184,0.12); }
.check:has(input:focus-visible) { outline: 2px solid var(--sage-light); outline-offset: 2px; }

.apply-submit { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; padding-top: 1rem; border-top: 1px solid var(--hairline-light); }
.apply-submit .btn { padding: 1rem 2.2rem; }
.apply-submit .btn:disabled { opacity: 0.6; cursor: default; }
.apply-msg { font-size: 0.9rem; color: var(--sage-light); min-height: 1.2em; }
.apply .mono-note { margin-top: 2rem; }

.apply-done { max-width: 560px; padding: 2rem 0; }
.apply-done h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); margin: 0.9rem 0 1rem; }
.apply-done p { color: rgba(241,237,228,0.75); margin-bottom: 2rem; }

@media (max-width: 860px) {
  .check-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .field-grid { grid-template-columns: 1fr; }
  .check-grid { grid-template-columns: 1fr; }
  .apply-group { padding: 1.8rem 0 2.2rem; }
}

/* ---------- Black Friday 2026 [/black-friday] ---------- */

.bf-hero {
  background: linear-gradient(180deg, var(--onyx) 0%, var(--forest-deep) 100%);
  color: var(--bone);
  padding: 9.5rem 0 4.6rem;
}
.bf-hero .eyebrow { color: var(--sage-light); }
.bf-hero h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); margin-top: 0.9rem; max-width: 15ch; }
.bf-hero .lede { margin-top: 1.3rem; max-width: 50ch; font-size: 1.05rem; color: rgba(241,237,228,0.8); }
.bf-hero .hero-ctas { margin-top: 2.2rem; }

/* the clock: four mono numbers, labelled, no punctuation */
.bf-clock { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--hairline-light); }
.bf-clock-label { flex-basis: 100%; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sage-light); }
.bf-clock div { min-width: 64px; }
.bf-clock b { display: block; font-family: var(--mono); font-size: 2.1rem; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.bf-clock span { display: block; margin-top: 0.4rem; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(241,237,228,0.62); }

.bf-days { background: var(--forest-deep); color: var(--bone); padding-top: 0; }
.bf-days .section-head { margin-bottom: 2.2rem; }
.bf-days .section-head h2 { color: var(--bone); }
.bf-days .section-head p { color: rgba(241,237,228,0.78); }
.bf-days .eyebrow { color: var(--sage-light); }

.bf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }

.bf-day {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  padding: 1.9rem 1.5rem 1.7rem;
  border-radius: 22px;
  background: linear-gradient(165deg, rgba(241,237,228,0.09), rgba(241,237,228,0.025));
  border: 1px solid rgba(241,237,228,0.16);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(241,237,228,0.13), 0 20px 46px rgba(8,10,8,0.3);
  transition: border-color 0.35s ease, background 0.35s ease, opacity 0.35s ease;
}
.bf-day::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(241,237,228,0.42), transparent); }

.bf-day-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.6rem; margin-bottom: 1.4rem; }
.bf-date { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage-light); line-height: 1.5; }
.bf-date b { display: block; font-size: 0.78rem; font-weight: 500; color: var(--bone); letter-spacing: 0.12em; }

.bf-state {
  flex: none;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.42rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(241,237,228,0.26);
  color: rgba(241,237,228,0.72);
}

.bf-day h3 { font-family: var(--sans); font-weight: 500; letter-spacing: -0.02em; font-size: 1.55rem; line-height: 1.1; }
.bf-price { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.9rem; font-family: var(--sans); font-weight: 500; letter-spacing: -0.03em; font-size: 2.1rem; line-height: 1.1; }
.bf-price small { font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--sage-light); }
.bf-lead { margin-top: 0.9rem; font-size: 0.98rem; line-height: 1.5; color: rgba(241,237,228,0.92); }
.bf-day ul { list-style: none; margin: 1.1rem 0 0; display: grid; gap: 0.5rem; font-size: 0.88rem; line-height: 1.5; color: rgba(241,237,228,0.78); }
.bf-day ul li { padding-left: 1rem; position: relative; }
.bf-day ul li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--sage-light); }
.bf-day .btn { width: 100%; margin-top: auto; padding-top: 0.9rem; padding-bottom: 0.9rem; border-radius: 14px; font-weight: 500; }
.bf-day .bf-lead + .btn, .bf-day ul + .btn { margin-top: 1.6rem; }
.bf-fine { margin-top: 0.9rem; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; line-height: 1.8; color: rgba(241,237,228,0.55); }

/* states */
.bf-day[data-state="soon"]:not([data-revealed="true"]) h3 { color: rgba(241,237,228,0.9); }
.bf-day[data-state="live"] {
  background:
    radial-gradient(circle at 18% 0%, rgba(226,211,174,0.19), transparent 42%),
    linear-gradient(145deg, rgba(241,237,228,0.18), rgba(150,162,143,0.09) 54%, rgba(241,237,228,0.04));
  border-color: rgba(216,220,205,0.52);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 28px 66px rgba(8,10,8,0.42), 0 0 68px rgba(195,200,184,0.13);
}
.bf-day[data-state="live"] .bf-state { background: linear-gradient(180deg, #e8e8df, var(--sage-light)); color: var(--ink); border-color: rgba(255,255,255,0.42); }
.bf-day[data-state="gone"] { opacity: 0.55; }
.bf-day[data-state="gone"] .bf-state { border-style: dashed; }
.bf-day[data-state="gone"] h3, .bf-day[data-state="gone"] .bf-price { text-decoration: line-through; text-decoration-color: rgba(241,237,228,0.5); text-decoration-thickness: 1px; }

.bf-note { margin-top: 2rem; max-width: 60ch; font-size: 0.9rem; color: rgba(241,237,228,0.68); }

/* how it works + the rest of the season */
.bf-how { background: var(--bone); }
.bf-how .method-points { margin-top: 2rem; }

.bf-also { background: var(--bone-warm); }
.bf-also-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-top: 2.2rem; }
.bf-card { background: var(--bone); border: 1px solid var(--hairline); border-radius: 18px; padding: 1.8rem 1.6rem; display: flex; flex-direction: column; }
.bf-card .eyebrow { font-size: 0.64rem; }
.bf-card h3 { font-family: var(--sans); font-weight: 500; letter-spacing: -0.02em; font-size: 1.3rem; margin-top: 0.8rem; }
.bf-card p { margin-top: 0.7rem; font-size: 0.93rem; color: rgba(29,28,24,0.74); flex: 1; }
.bf-card .btn { margin-top: 1.4rem; align-self: flex-start; }

/* the list */
.bf-list { background: linear-gradient(180deg, var(--forest-deep) 0%, var(--onyx) 100%); color: var(--bone); }
.bf-list .eyebrow { color: var(--sage-light); }
.bf-list .soon-grid { align-items: center; }
.bf-list .soon-title { color: var(--bone); }
.bf-list .mini-form { margin-top: 2.4rem; padding-top: 2rem; border-top: 1px solid var(--hairline-light); }
.bf-list .mini-form .xpl-head { margin-bottom: 0.4rem; }
.bf-list .mini-form p { color: rgba(241,237,228,0.72); font-size: 0.92rem; margin-bottom: 1.1rem; max-width: 42ch; }

@media (max-width: 1060px) {
  .bf-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .bf-also-grid { grid-template-columns: 1fr; }
  .bf-list .soon-grid { grid-template-columns: 1fr; gap: 2.4rem; }
}
@media (max-width: 560px) {
  .bf-grid { grid-template-columns: 1fr; }
  .bf-day { min-height: 0; }
  .bf-clock { gap: 1.2rem; }
  .bf-clock b { font-size: 1.7rem; }
  .bf-hero h1 { font-size: clamp(2.1rem, 9vw, 3rem); }
}

/* ---------- teacher training [/teacher-training] ---------- */

.tt-flag {
  margin: 0 0 2rem;
  padding: 1.1rem 1.3rem;
  border-left: 2px solid var(--sage-light);
  background: rgba(195,200,184,0.1);
  border-radius: 0 12px 12px 0;
  color: var(--bone);
}
.tt-flag b { display: block; font-family: var(--sans); font-weight: 500; font-size: 1.15rem; letter-spacing: -0.01em; }
.tt-flag p { margin-top: 0.3rem; font-size: 0.92rem; color: rgba(241,237,228,0.82); }
.tt-flag .btn { margin-top: 1rem; }
.tt-band { background: var(--onyx); }
.tt-band img { width: 100%; height: auto; max-height: 52vh; object-fit: cover; object-position: center 40%; display: block; }

/* the Sunset menu has no use-window column yet: three columns, the name takes the room */
.menu-table--three .menu-row { grid-template-columns: minmax(0, 2.4fr) minmax(88px, 110px) minmax(74px, 100px); }

/* ---------- meet the team [/menifee] ---------- */
.team { background: var(--bone-warm); }
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem 1.4rem; margin-top: 2.4rem; }
.team-card img { width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; object-position: center top; border-radius: 14px; }
.team-card h3 { font-family: var(--sans); font-weight: 500; letter-spacing: -0.01em; font-size: 1.15rem; margin-top: 1.1rem; }
.team-when { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--taupe); margin-top: 0.3rem; }
.team-card p:not(.team-when) { margin-top: 0.6rem; font-size: 0.92rem; color: rgba(29,28,24,0.74); }
@media (max-width: 900px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .team-grid { grid-template-columns: 1fr; } }

/* ---------- reviews strip ---------- */
.reviews { background: linear-gradient(180deg, var(--forest-deep) 0%, var(--onyx) 100%); color: var(--bone); }
.reviews .eyebrow { color: var(--sage-light); }
.reviews-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-top: 2.2rem; }
.review { background: linear-gradient(165deg, rgba(241,237,228,0.09), rgba(241,237,228,0.025)); border: 1px solid rgba(241,237,228,0.16); border-radius: 18px; padding: 1.8rem 1.6rem; display: flex; flex-direction: column; }
.review-stars { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.3em; color: var(--sage-light); }
.review blockquote { margin: 1rem 0 0; font-size: 1rem; line-height: 1.55; color: rgba(241,237,228,0.92); flex: 1; }
.review cite { display: block; margin-top: 1.2rem; font-style: normal; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage-light); }
@media (max-width: 900px) { .reviews-grid { grid-template-columns: 1fr; } }
.reviews .section-head p { color: rgba(241,237,228,0.78); }
.reviews .section-head h2 { color: var(--bone); }
.review figcaption { margin: 0; }