/* ---------- Design tokens ---------- */
:root {
  --black: #0a0a0a;
  --black-soft: #131313;
  --charcoal: #1c1c1c;
  --charcoal-2: #262624;

  --gold: #c9a227;
  --gold-light: #e3c565;
  --gold-dark: #9c7c1e;

  --cream: #f8f4ea;
  --cream-2: #efe9d8;
  --surface: #fff;          /* cards on light sections */
  --field: #faf8f2;         /* form fields, chips */
  --field-picked: #fff8e3;  /* selected choice */

  --ink: #17130a;
  --text-light: #f3efe3;
  --muted: #a7a397;
  --muted-2: #6f6a5c;

  --border-dark: rgba(232, 214, 158, 0.14);
  --border-light: rgba(23, 19, 10, 0.1);

  --radius: 4px;
  --radius-lg: 10px;
  --shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.45);

  --font-display: "Poppins", "Inter", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--gold);
  color: #000;
  padding: 10px 16px;
  z-index: 999;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Poppins' letters are taller than its em box, so anything much under
   1.2 makes two-line headings crowd each other and the label above. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.2;
  margin: 0 0 16px;
  font-weight: 800;
}
/* Very long words wrap instead of running out of narrow boxes on phones. */
h1, h2, h3, h4, p, li, a, label, legend { overflow-wrap: break-word; }

p { margin: 0 0 16px; color: inherit; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  margin: 0 0 12px;
  display: inline-block;
  position: relative;
  padding-bottom: 10px;
}
.eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background: var(--gold);
}
.eyebrow.center { text-align: center; }
/* The eyebrow is inline-block, so its bottom margin doesn't reliably push
   the heading down; give the heading its own gap below the gold rule. */
.eyebrow + h1, .eyebrow + h2, .eyebrow + h3 { margin-top: 8px; }

.section-title {
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: 0.5px;
}
.section-title.on-dark { color: #fff; }

.section-head {
  max-width: 620px;
  margin: 0 auto 44px;
  text-align: center;
}
.section-head .eyebrow::after { left: 50%; transform: translateX(-50%); }

.section-head-left { max-width: 620px; margin-bottom: 56px; }

section { position: relative; }
.section-pad { padding: 80px 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

.btn-gold {
  background: var(--gold);
  color: #17130a;
  box-shadow: 0 14px 28px -12px rgba(201, 162, 39, 0.55);
}
.btn-gold:hover { background: var(--gold-light); }

.btn-outline-dark {
  border-color: rgba(255,255,255,0.35);
  color: #fff;
  background: transparent;
}
.btn-outline-dark:hover { background: rgba(255,255,255,0.1); border-color: #fff; }

.btn-outline-gold {
  border-color: var(--gold);
  color: var(--gold);
  background: transparent;
}
.btn-outline-gold:hover { background: var(--gold); color: #17130a; }

.btn-dark {
  background: var(--black);
  color: #fff;
}
.btn-dark:hover { background: var(--charcoal); }

.btn-block { width: 100%; }
/* On the smallest phones a long button label can be wider than the screen,
   so let it wrap instead of sticking out. */
@media (max-width: 400px) {
  .btn { white-space: normal; text-align: center; max-width: 100%; }
}
.btn-sm { padding: 11px 20px; font-size: 12px; }

.link-arrow {
  color: var(--gold);
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.15s ease;
}
.link-arrow:hover { gap: 10px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(10, 10, 10, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-dark);
}

/* The header uses the same 1200px column as the page content, so the logo
   and the menu line up with everything below them. Logo + menu + theme
   toggle measure ~1140px, just inside that column (1152px after padding). */

.header-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 88px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-right: auto;
}

.logo-mark { flex-shrink: 0; }

.logo-text {
  font-family: "Cinzel", Georgia, serif;
  color: #fff;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 3px;
}
.logo-text small {
  display: block;
  font-family: var(--font-body);
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 5px;
  font-weight: 500;
  margin-top: 3px;
}
.logo-tagline {
  display: block;
  font-family: var(--font-body);
  color: #b9a46a;
  font-size: 8.5px;
  letter-spacing: 1.6px;
  font-weight: 400;
  text-transform: uppercase;
  margin-top: 3px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 18px;
}
.nav-link {
  color: #d8d3c4;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
  transition: color 0.15s ease;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
}
.nav-link:hover, .nav-link.active { color: var(--gold); }

.nav-dropdown { position: relative; }
.nav-dropdown .chevron { width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-top: -3px; transition: transform 0.15s ease; }
.nav-dropdown.open .chevron { transform: rotate(-135deg); margin-top: 3px; }

.dropdown-menu {
  position: absolute;
  top: calc(100% + 20px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--charcoal);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  min-width: 230px;
  padding: 10px;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.nav-dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  top: calc(100% + 14px);
}
.dropdown-menu a {
  display: block;
  padding: 10px 14px;
  color: #d8d3c4;
  text-decoration: none;
  font-size: 13px;
  border-radius: 6px;
  letter-spacing: 0.3px;
}
.dropdown-menu a:hover { background: rgba(201,162,39,0.12); color: var(--gold); }

.nav-cta { padding: 14px 20px; font-size: 13px; white-space: nowrap; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
}
.nav-toggle span {
  width: 24px;
  height: 2px;
  background: #fff;
  display: block;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
}
/* Hero: headline on the left over a near-black backdrop; on the right two
   overlapping photo cards that tell the headline's story (gym = "train
   like a beast", chef = "eat like royalty"). On narrow screens the cards
   sit side by side under the text. */
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 78% 45%, rgba(201,162,39,0.13), transparent 70%),
    linear-gradient(135deg, #0c0c0c 0%, #141414 55%, #0e0e0e 100%);
  z-index: -1;
}
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: 56px; width: 100%; }
.hero .hero-grid h1 { font-size: clamp(38px, 3.9vw, 56px); }
.hero-grid .hero-inner { max-width: none; padding-left: 0; padding-right: 0; }
.hero-collage { position: relative; height: min(600px, 68vh); min-height: 440px; }
.hero-card { position: absolute; margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(201,162,39,0.4); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.75); background: #111; }
.hero-card img, .hero-card video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-card figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 34px 18px 14px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.82));
  color: var(--gold); font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
  letter-spacing: 2.6px; text-transform: uppercase;
}
.hero-card-gym { left: 0; top: 0; width: 58%; height: 84%; }
.hero-card-gym img, .hero-card-gym video { object-position: 50% 30%; }
.hero-card-chef { right: 0; bottom: 0; width: 60%; height: 50%; z-index: 1; }
.hero-card-chef img { object-position: 55% 40%; }

@media (max-width: 1000px) {
  .hero { min-height: 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 0; }
  .hero .hero-grid h1 { font-size: clamp(34px, 7vw, 52px); }
  .hero-collage { height: auto; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-bottom: 56px; }
  .hero-card { position: relative; inset: auto; width: auto; height: auto; aspect-ratio: 4 / 5; }
  .hero-card figcaption { font-size: 10px; letter-spacing: 1.8px; padding: 26px 12px 10px; }
}
.hero-photo-note {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 40px;
}
.photo-tag {
  border: 1px dashed rgba(232,214,158,0.35);
  color: rgba(232,214,158,0.5);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
}

/* Side padding keeps the hero text off the screen edge below ~970px; the
   max-width grows by the same 48px so the headline's line width is unchanged. */
.hero-inner { padding: 120px 24px 90px; max-width: 968px; }
.hero .eyebrow { color: var(--gold); }
.hero h1 {
  font-size: clamp(42px, 6.4vw, 74px);
  color: #fff;
  margin-bottom: 20px;
}
.hero h1 span { color: var(--gold); display: block; }

.hero-copy { max-width: 480px; font-size: 18px; color: #c7c2b3; margin-bottom: 32px; }

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- Stats bar ---------- */
.stats-bar { background: var(--black); border-bottom: 1px solid var(--border-dark); padding: 44px 0; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.stat {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.stat-icon {
  width: 44px;
  height: 44px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--gold);
}
.stat h4 { font-family: var(--font-body); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 0.5px; margin-bottom: 6px; text-transform: uppercase; }
.stat p { color: var(--muted); font-size: 13.5px; margin: 0; }

/* ---------- Image placeholder blocks ---------- */
.ph {
  position: relative;
  background: linear-gradient(150deg, var(--charcoal), var(--black));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: rgba(232,214,158,0.55);
  border: 1px solid var(--border-dark);
}
.ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(232,214,158,0.06), transparent 60%);
}
.ph-label {
  position: relative;
  text-align: center;
  padding: 16px;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.6;
}
.ph-label svg { margin-bottom: 8px; opacity: 0.7; }

/* ---------- Services grid ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.service-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}
.service-card:hover { transform: translateY(-6px); }
.service-card .ph { aspect-ratio: 4/3; }

/* Once a real photo is in, drop the placeholder's texture/tint so it does
   not wash over the image. */
.ph.has-photo { background: var(--black); border-color: transparent; }
.ph.has-photo::before { content: none; }
.ph.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.service-card-body { padding: 22px 20px 24px; flex: 1; display: flex; flex-direction: column; }
.service-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.service-card p { color: var(--muted-2); font-size: 13.5px; margin-bottom: 16px; flex: 1; }

/* ---------- Meet / About split ---------- */
.meet { background: var(--black); color: #fff; padding: 88px 0; }
.meet-inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: center;
}
.meet-photo { aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden; }
/* Real photos are square; cover-crop them into the 4/5 frame without distortion. */
.meet-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.meet-copy .eyebrow { color: var(--gold); }
.meet-copy h2 { color: #fff; }
.meet-sub { color: var(--gold-light); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; font-size: 13px; margin-bottom: 20px; }
.meet-copy p { color: #c7c2b3; }
.credentials { list-style: none; padding: 0; margin: 28px 0 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.credentials li { display: flex; gap: 12px; align-items: flex-start; }
.cred-icon { width: 34px; height: 34px; border: 1px solid var(--gold); border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--gold); }
.credentials strong { display: block; color: #fff; font-size: 13.5px; font-weight: 700; }
.credentials span { color: var(--muted); font-size: 12.5px; }

/* ---------- Transformations ---------- */
.transformations { padding: 100px 0; }
.transform-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.transform-track::-webkit-scrollbar { height: 6px; }
.transform-track::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }
.transform-card { flex: 0 0 auto; width: 220px; scroll-snap-align: start; }
.transform-pair { display: flex; }
.transform-pair .ph { aspect-ratio: 3/4; flex: 1; border-radius: 0; }
.transform-pair .ph:first-child { border-top-left-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg); border-right: none; }
.transform-pair .ph:last-child { border-top-right-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }
.transform-caption { text-align: center; font-size: 12px; color: var(--muted-2); margin-top: 10px; letter-spacing: 0.5px; text-transform: uppercase; }
.transform-controls { display: flex; justify-content: center; gap: 40px; margin-top: 24px; align-items: center; }
.transform-nav-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-light);
  background: var(--surface); display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--ink); transition: background 0.15s ease, border-color 0.15s ease;
}
.transform-nav-btn:hover { background: var(--gold); border-color: var(--gold); color: #fff; }

/* ---------- Testimonials ---------- */
.testimonials { background: var(--black); color: #fff; padding: 80px 0; }
.testi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.testi {
  margin: 0;
  background: var(--charcoal);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  border: 1px solid var(--border-dark);
}
.stars { color: var(--gold); letter-spacing: 2px; margin-bottom: 14px; font-size: 14px; }
.testi p { color: #c7c2b3; font-size: 14px; font-style: italic; }
.testi cite { display: block; font-style: normal; font-weight: 700; color: #fff; margin-top: 14px; font-size: 13.5px; }

/* Client photo + name sit at the TOP of each card. Quotes vary in length,
   so anchoring the photos to the bottom left them at four different
   heights; putting them first lines them up across the row regardless of
   how long each quote runs. */
.testi-author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-dark);
}
.testi-author img {
  width: 72px; height: 72px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  border: 2px solid rgba(201, 162, 39, 0.55);
}
.testi-author cite { margin-top: 0; font-size: 15px; }

/* Column layout lets the quote absorb the leftover space, so cards of
   differing text length still end flush with one another. */
.testi { display: flex; flex-direction: column; }
.testi p { flex: 1; margin-bottom: 0; }
.testi .stars { margin-bottom: 10px; }

@media (max-width: 760px) {
  .testi-author img { width: 60px; height: 60px; }
}
.testi cite span { display: block; color: var(--muted); font-weight: 400; font-size: 12px; margin-top: 2px; }

/* ---------- Instagram / Follow ---------- */
.follow { padding: 80px 0; text-align: center; }
.insta-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin: 48px 0 40px; }
.insta-grid .ph { aspect-ratio: 1/1; border-radius: var(--radius); }
.follow-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---------- Newsletter ---------- */
.newsletter { background: var(--charcoal); }
.footer-newsletter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 56px 24px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-dark);
}
.footer-newsletter h3 { color: #fff; font-size: 22px; margin-bottom: 6px; }
.footer-newsletter p { color: var(--muted); margin: 0; font-size: 14px; }
.newsletter-form { display: flex; gap: 12px; flex-wrap: wrap; }
.newsletter-form input {
  padding: 15px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border-dark);
  background: rgba(255,255,255,0.05);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  min-width: 260px;
}
.newsletter-form input::placeholder { color: #8a8677; }

/* ---------- Footer ---------- */
.site-footer { background: var(--black); color: var(--muted); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
  gap: 32px;
  padding: 56px 24px 40px;
  border-bottom: 1px solid var(--border-dark);
}
.footer-brand .logo { margin-bottom: 16px; }
.footer-brand p { font-size: 13.5px; color: var(--muted); max-width: 260px; }
.footer-col h4 { color: #fff; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 18px; }
.footer-col a, .footer-col span {
  display: block;
  color: var(--muted);
  text-decoration: none;
  font-size: 13.5px;
  margin-bottom: 12px;
}
.footer-col a:hover { color: var(--gold); }
.social-row { display: flex; gap: 10px; margin-top: 20px; }
.social-icon {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border-dark);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); transition: border-color 0.15s ease, color 0.15s ease;
}
.social-icon:hover { border-color: var(--gold); color: var(--gold); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 24px;
  font-size: 12.5px;
}
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { color: var(--muted); text-decoration: none; }
.footer-legal a:hover { color: var(--gold); }

/* ---------- Service detail sections ---------- */
.service-detail { padding: 72px 0; }
.service-detail.alt { background: var(--cream-2); }
.service-detail-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.service-detail-inner.reverse .service-detail-media { order: 2; }
.service-detail-media .ph { aspect-ratio: 4/3; border-radius: var(--radius-lg); }
.service-list { list-style: none; padding: 0; margin: 24px 0 28px; display: grid; gap: 12px; }
.service-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--muted-2); }
.service-list li::before { content: "\2713"; color: var(--gold); font-weight: 700; flex-shrink: 0; }

.mini-offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mini-offer { background: var(--surface); border-radius: var(--radius-lg); padding: 26px; border: 1px solid var(--border-light); }
.mini-offer h4 { font-size: 15px; margin-bottom: 8px; }
.mini-offer p { font-size: 13.5px; color: var(--muted-2); margin-bottom: 14px; }

@media (max-width: 900px) {
  .service-detail-inner { grid-template-columns: 1fr; }
  .service-detail-inner.reverse .service-detail-media { order: 0; }
}
@media (max-width: 760px) {
  .mini-offer-grid { grid-template-columns: 1fr; }
}

/* ---------- Transformations grid (full page) ---------- */
.transform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.transform-grid .transform-blurb { font-size: 13.5px; color: var(--muted-2); text-align: center; margin-top: 8px; }

@media (max-width: 900px) { .transform-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .transform-grid { grid-template-columns: 1fr; } }

/* ---------- Blog / Recipe cards ---------- */
.blog-grid, .recipe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.blog-card, .recipe-card {
  background: var(--surface); border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border-light); box-shadow: var(--shadow);
  transition: transform 0.2s ease; display: flex; flex-direction: column;
}
.blog-card:hover, .recipe-card:hover { transform: translateY(-6px); }
.blog-card .ph, .recipe-card .ph { aspect-ratio: 16/10; }
.blog-card-body, .recipe-card-body { padding: 22px 20px 26px; flex: 1; display: flex; flex-direction: column; }
.blog-meta { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--gold); margin-bottom: 10px; font-weight: 700; }
.blog-card h3, .recipe-card h3 { font-size: 17px; margin-bottom: 10px; }
.blog-card p, .recipe-card p { font-size: 13.5px; color: var(--muted-2); margin-bottom: 14px; flex: 1; }
.recipe-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.recipe-tag { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; background: var(--cream-2); color: var(--muted-2); padding: 5px 10px; border-radius: 999px; }

@media (max-width: 900px) { .blog-grid, .recipe-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-grid, .recipe-grid { grid-template-columns: 1fr; } }

/* ---------- Contact page ---------- */
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; }
/* Contact page: details first, message form second (desktop only). */
@media (min-width: 901px) { .contact-grid-flip { grid-template-columns: 1fr 1.3fr; } .contact-grid-flip > :first-child { order: 2; } }
.contact-form-card {
  background: var(--surface); border-radius: var(--radius-lg); padding: 40px;
  box-shadow: var(--shadow); border: 1px solid var(--border-light);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field {
  width: 100%; padding: 14px 16px; border-radius: var(--radius);
  border: 1px solid var(--border-light); background: var(--field); color: var(--ink);
  font-family: var(--font-body); font-size: 14px; margin-bottom: 16px;
}
.field:focus { outline: none; border-color: var(--gold); }
textarea.field { resize: vertical; }

.contact-info-card { background: var(--black); color: #fff; border-radius: var(--radius-lg); padding: 40px; }
.contact-info-card h3 { color: #fff; font-size: 18px; }
.info-row { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 24px; }
.info-row strong { display: block; color: #fff; font-size: 14px; margin-bottom: 3px; }
.info-row span, .info-row a { color: var(--muted); font-size: 13.5px; text-decoration: none; }
.info-row a:hover { color: var(--gold); }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  /* Stacked fields already carry a bottom margin; a row gap on top of it
     made the spacing uneven between fields that were side by side on desktop. */
  .field-row { grid-template-columns: 1fr; row-gap: 0; }
}

/* ---------- Courses (placeholder / preview) ---------- */
.coming-soon-banner {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--charcoal); border: 1px solid var(--gold);
  border-radius: var(--radius-lg); padding: 20px 26px; margin-bottom: 56px;
}
.coming-soon-banner .badge {
  flex-shrink: 0; background: var(--gold); color: #17130a; font-weight: 700;
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  padding: 6px 14px; border-radius: 999px;
}
.coming-soon-banner p { margin: 0; color: #d8d3c4; font-size: 14px; }
.coming-soon-banner p strong { color: #fff; }

.course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.course-card {
  background: var(--surface); border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border-light); box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.course-card .ph { aspect-ratio: 16/10; position: relative; }
.course-lock-badge {
  position: absolute; top: 14px; right: 14px; z-index: 1;
  display: flex; align-items: center; gap: 6px;
  background: rgba(10,10,10,0.8); border: 1px solid var(--border-dark);
  color: var(--gold); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px;
  font-weight: 700; padding: 6px 10px; border-radius: 999px;
}
.course-card-body { padding: 22px 20px 26px; flex: 1; display: flex; flex-direction: column; }
.course-card h3 { font-size: 17px; margin-bottom: 8px; }
.course-meta { font-size: 12.5px; color: var(--muted-2); margin-bottom: 12px; }
.course-card p.course-desc { font-size: 13.5px; color: var(--muted-2); margin-bottom: 16px; flex: 1; }
.course-price-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.course-price { font-family: var(--font-display); font-size: 20px; color: var(--ink); font-weight: 800; }
.course-price span { font-family: var(--font-body); font-size: 12px; color: var(--muted-2); font-weight: 400; }

/* Curriculum accordion */
.curriculum { max-width: 760px; margin: 0 auto; }
.module { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); margin-bottom: 14px; overflow: hidden; }
.module-header {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 18px 22px; background: none; border: none; cursor: pointer;
  text-align: left; font-family: var(--font-body);
}
.module-header h4 { margin: 0; font-size: 15px; color: var(--ink); }
.module-header .module-count { font-size: 12.5px; color: var(--muted-2); font-weight: 400; margin-top: 2px; }
.module-header .chevron { width: 9px; height: 9px; border-right: 1.5px solid var(--muted-2); border-bottom: 1.5px solid var(--muted-2); transform: rotate(45deg); transition: transform 0.15s ease; flex-shrink: 0; }
.module.open .module-header .chevron { transform: rotate(-135deg); }

.lesson-list { list-style: none; margin: 0; padding: 0 22px 18px; display: none; }
.module.open .lesson-list { display: block; }
.lesson {
  display: flex; align-items: center; gap: 12px; padding: 12px 0;
  border-top: 1px solid var(--border-light); font-size: 13.5px; color: var(--muted-2);
}
.lesson:first-child { border-top: none; }
.lesson-icon {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-light); color: var(--muted-2);
}
.lesson.is-free .lesson-icon { border-color: var(--gold); color: var(--gold); }
.lesson-title { flex: 1; color: var(--ink); }
.lesson-duration { font-size: 12px; color: var(--muted-2); flex-shrink: 0; }
/* Tiny phones: let the title shrink and the duration drop to its own line
   rather than pushing past the edge of the card. */
.lesson-title { min-width: 0; }
@media (max-width: 400px) { .lesson { flex-wrap: wrap; } }

/* ---------- Phone layout polish ---------- */
@media (max-width: 560px) {
  /* Stacked buttons share one full width so their edges line up. */
  .hero-actions, .follow-actions, .svc-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn, .follow-actions .btn, .svc-actions .btn,
  .meet-inner .btn, .service-detail-inner > div > .btn { width: 100%; }
  .credentials { grid-template-columns: 1fr; }
  .newsletter-form { width: 100%; }
  .newsletter-form input, .newsletter-form .btn { width: 100%; min-width: 0; flex: 1 1 100%; }
  .contact-form-card, .contact-info-card { padding: 28px 22px; }
}
.free-tag {
  flex-shrink: 0; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
  font-weight: 700; color: var(--gold); border: 1px solid var(--gold); border-radius: 999px;
  padding: 3px 8px;
}

/* Sign-in / notify card */
.signin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.signin-card {
  background: var(--black); color: #fff; border-radius: var(--radius-lg); padding: 36px;
}
.signin-card h3 { color: #fff; font-size: 18px; margin-bottom: 8px; }
.signin-card p { color: var(--muted); font-size: 13.5px; margin-bottom: 20px; }
.signin-card .field { background: rgba(255,255,255,0.06); border-color: var(--border-dark); color: #fff; }
.signin-card .field::placeholder { color: #8a8677; }
.signin-note { font-size: 12.5px; color: var(--muted); margin-top: 14px; }

@media (max-width: 1080px) { .course-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .signin-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .course-grid { grid-template-columns: 1fr; } }

/* ---------- Library (Music / Video / Podcast) ---------- */
.info-banner {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--charcoal); border: 1px solid var(--gold);
  border-radius: var(--radius-lg); padding: 20px 26px; margin-bottom: 8px;
}
.info-banner .badge {
  flex-shrink: 0; background: var(--gold); color: #17130a; font-weight: 700;
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  padding: 6px 14px; border-radius: 999px;
}
.info-banner p { margin: 0; color: #d8d3c4; font-size: 14px; }
.info-banner p strong { color: #fff; }

.media-form-card {
  background: var(--surface); border-radius: var(--radius-lg); padding: 32px;
  box-shadow: var(--shadow); border: 1px solid var(--border-light);
  max-width: 820px; margin: 0 auto 40px;
}
.media-form-card h3 { font-size: 16px; margin-bottom: 4px; }
.media-form-note { font-size: 12.5px; color: var(--muted-2); margin-bottom: 18px; }
.media-form-row { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; }
.media-form-row .field { flex: 1; min-width: 160px; margin-bottom: 0; }
/* Inputs inside the library's field wrappers otherwise keep the browser's
   default width and poke out of their box on phones. */
.media-form-row .field input, .media-link-row .field input { width: 100%; min-width: 0; }
.media-file-picker {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px dashed var(--border-light); border-radius: var(--radius);
  padding: 14px 16px; font-size: 13.5px; color: var(--muted-2); cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease; flex-shrink: 0;
}
.media-file-picker:hover { border-color: var(--gold); color: var(--ink); }
.media-file-picker.has-file { border-style: solid; border-color: var(--gold-dark); color: var(--ink); }
.media-file-picker input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.media-link-row {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; padding-top: 20px;
  border-top: 1px solid var(--border-light); align-items: end;
}
.media-link-row .field { flex: 1; min-width: 160px; margin-bottom: 0; }
.media-form-error { font-size: 12.5px; color: #b8452f; margin-top: 10px; display: none; }
.media-form-error.show { display: block; }

.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 8px; }
.media-card {
  background: var(--surface); border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border-light); box-shadow: var(--shadow);
  padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 10px;
}
.media-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.media-card h4 { font-size: 15.5px; margin: 0; color: var(--ink); }
.media-card .meta { font-size: 12px; color: var(--muted-2); margin-top: 2px; }
.media-card .notes { font-size: 12.5px; color: var(--muted-2); font-style: italic; }
.media-card audio { width: 100%; }
.media-card video { width: 100%; border-radius: 8px; background: #000; display: block; }
.media-card-remove {
  background: none; border: none; color: var(--muted-2); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 3px 5px; border-radius: 4px; flex-shrink: 0;
}
.media-card-remove:hover { color: #b8452f; background: rgba(184,69,47,0.1); }
.media-link-open { align-self: flex-start; }

.embed-frame { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: #000; }
.embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed-frame.spotify-embed { aspect-ratio: auto; height: 152px; background: none; }
.embed-frame.soundcloud-embed { aspect-ratio: auto; height: 166px; background: none; }
.embed-frame.apple-podcasts-embed { aspect-ratio: auto; height: 175px; background: none; }

.media-empty-note { grid-column: 1/-1; text-align: center; color: var(--muted-2); font-size: 14px; padding: 32px 0; }

@media (max-width: 1080px) { .media-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
  .media-grid { grid-template-columns: 1fr; }
  .media-form-card { padding: 24px 20px; }
}

/* ---------- Form submission states ---------- */
/* Honeypot: kept out of view and out of the tab order. Bots that fill
   every field trip it; real visitors never see it. Deliberately not
   display:none, which some bots detect and skip. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.form-note { font-size: 13px; color: var(--muted-2); margin-top: 12px; min-height: 1.2em; }
.form-note.is-success { color: #3f7d3f; font-weight: 600; }
.form-note.is-error { color: #b8452f; font-weight: 600; }
.signin-card .form-note.is-success,
.signin-note.is-success { color: var(--gold-light); }

/* Dim the button while a submission is in flight so double-sends are
   visibly discouraged as well as programmatically blocked. */
.btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ---------- Generic page hero (inner pages) ---------- */
.page-hero {
  background: var(--black);
  color: #fff;
  /* The sticky header already sits above this in the page flow, so the
     top padding only needs to give the title breathing room. */
  padding: 96px 0 64px;
  text-align: center;
}
.page-hero .eyebrow { justify-self: center; }
.page-hero h1 { color: #fff; font-size: clamp(36px, 6vw, 56px); }
.page-hero p { color: var(--muted); max-width: 560px; margin: 0 auto; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .testi-grid { grid-template-columns: repeat(2, 1fr); }
  .insta-grid { grid-template-columns: repeat(4, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }
}

@media (max-width: 900px) {
  .meet-inner { grid-template-columns: 1fr; }
  .meet-photo { max-width: 380px; }
}

/* Below 1200px the header column gets narrower than the full menu needs
   (~1140px), so switch to the hamburger menu there. */
@media (max-width: 1199px) {
  .nav { display: none; }
  .nav-toggle { display: flex; }

  .site-header.open .nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--black);
    padding: 24px;
    gap: 6px;
    border-bottom: 1px solid var(--border-dark);
    max-height: calc(100vh - 90px);
    overflow-y: auto;
  }
  .site-header.open .nav-link { padding: 13px 4px; font-size: 17px; }
  .site-header.open .nav-dropdown .dropdown-menu {
    position: static;
    transform: none;
    display: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: none;
    margin-top: 4px;
  }
  .site-header.open .nav-dropdown.open .dropdown-menu { display: block; }
  .site-header.open .nav-cta { justify-content: center; margin-top: 10px; }
}

@media (max-width: 760px) {
  .services-grid { grid-template-columns: 1fr 1fr; }
  .testi-grid { grid-template-columns: 1fr; }
  .insta-grid { grid-template-columns: repeat(3, 1fr); }
  .stats-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
  .footer-newsletter { flex-direction: column; align-items: flex-start; }
  .hero-inner { padding-top: 96px; padding-bottom: 64px; }
  .section-pad { padding: 60px 0; }
  .service-detail { padding: 56px 0; }
  .meet, .testimonials, .follow { padding: 64px 0; }
  .page-hero { padding: 64px 0 48px; }
}

@media (max-width: 560px) {
  .services-grid { grid-template-columns: 1fr; }
  .insta-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Service detail: photos, panels, "more details" ---------- */
.service-detail-media.has-photo { aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; }
.svc-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.service-panel {
  background: var(--black); color: #fff; border-radius: var(--radius-lg);
  padding: 36px 34px; box-shadow: var(--shadow); border: 1px solid var(--border-dark);
}
.service-panel h3 { color: #fff; font-size: 18px; margin-bottom: 22px; }
.service-steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 18px; }
.service-steps li { counter-increment: step; display: grid; grid-template-columns: 34px 1fr; gap: 14px; font-size: 14px; color: #c7c2b3; }
.service-steps li::before {
  content: counter(step); width: 34px; height: 34px; border: 1px solid var(--gold); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--gold); font-weight: 700; font-size: 13px;
}
.service-steps strong { display: block; color: #fff; font-size: 14.5px; margin-bottom: 2px; }

.svc-more { margin-top: 36px; border-top: 1px solid var(--border-light); }
.svc-more summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 0; font-weight: 700; font-size: 13px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--ink);
}
.svc-more summary::-webkit-details-marker { display: none; }
.svc-more summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--gold); font-weight: 400; transition: transform 0.2s ease; }
.svc-more[open] summary::after { transform: rotate(45deg); }
.svc-more summary:hover { color: var(--gold-dark); }
.svc-more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px 40px; padding: 4px 0 12px; }
.svc-more h4 { font-size: 14px; margin-bottom: 12px; color: var(--ink); }
.svc-more ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.svc-more li { font-size: 13.5px; color: var(--muted-2); padding-left: 15px; position: relative; }
.svc-more li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.svc-more li strong { color: var(--ink); font-weight: 600; }

.video-stack { display: grid; gap: 20px; }

/* ---------- Video player ---------- */
.video-player { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: #000; box-shadow: var(--shadow); }
.video-player video { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #000; }
.video-player.is-4x3 video { aspect-ratio: 4/3; }
.video-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(rgba(10,10,10,0.1), rgba(10,10,10,0.45)); border: 0; cursor: pointer; padding: 0;
}
.video-play[hidden] { display: none; }
.video-play span {
  width: 78px; height: 78px; border-radius: 50%; background: var(--gold);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 28px -10px rgba(0,0,0,0.6); transition: transform 0.15s ease;
}
.video-play span::before {
  content: ""; margin-left: 6px;
  border-left: 22px solid #17130a; border-top: 14px solid transparent; border-bottom: 14px solid transparent;
}
.video-play:hover span, .video-play:focus-visible span { transform: scale(1.07); }
.video-error {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 12px 16px;
  background: rgba(10,10,10,0.85); color: #fff; font-size: 13px;
}
.video-caption { font-size: 12.5px; color: var(--muted-2); margin-top: 10px; text-align: center; }

.video-feature-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; }
.video-feature-inner p { color: var(--muted-2); }

/* ---------- "Train like a beast" marquee ---------- */
.marquee { background: var(--gold); color: #17130a; overflow: hidden; padding: 18px 0; }
.marquee-track { display: flex; width: max-content; animation: marquee 36s linear infinite; }
.marquee-track span {
  display: flex; align-items: center; gap: 28px; padding: 0 14px 0 14px;
  font-family: var(--font-display); font-weight: 900; font-size: clamp(18px, 2.4vw, 28px);
  letter-spacing: 2px; text-transform: uppercase; white-space: nowrap;
}
.marquee-track span::after { content: "\25C6"; font-size: 0.5em; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- Packages & pricing ---------- */
/* Program picker: two cards (in-person / virtual), each listing its three
   programs as full-width rows, so the grouping is obvious at a glance. */
.pkg-picker { background: var(--cream-2); padding: 48px 0 40px; }
.pkg-picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pkg-picker-group {
  background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 26px 28px 6px;
}
.pkg-picker-head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--border-light); }
.pkg-picker-head h2 { font-size: 19px; margin: 0; color: var(--ink); }
.pkg-picker-head p { font-size: 13px; color: var(--muted-2); margin: 2px 0 0; }
.pkg-picker-link {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 2px; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--border-light);
}
.pkg-picker-link:last-child { border-bottom: 0; }
.pkg-picker-link strong { display: block; font-size: 15px; font-weight: 600; transition: color 0.15s ease; }
.pkg-picker-link small { display: block; font-size: 12.5px; color: var(--muted-2); margin-top: 2px; }
.pkg-picker-link .arrow { color: var(--gold); font-size: 18px; flex-shrink: 0; transition: transform 0.15s ease; }
.pkg-picker-link:hover strong { color: var(--gold-dark); }
.pkg-picker-link:hover .arrow { transform: translateX(4px); }
.pkg-picker-more { text-align: center; font-size: 14px; color: var(--muted-2); margin: 26px 0 0; }
.pkg-picker-more a { color: var(--gold-dark); font-weight: 600; text-decoration: none; }
.pkg-picker-more a:hover { text-decoration: underline; }
@media (max-width: 800px) {
  .pkg-picker-grid { grid-template-columns: 1fr; }
  .pkg-picker { padding: 32px 0 28px; }
}

.pkg-mode { background: var(--black); padding: 56px 0 48px; text-align: center; }
.pkg-mode p:not(.eyebrow) { color: var(--muted); max-width: 560px; margin: 12px auto 0; }

.pkg-program { padding: 72px 0; }
.pkg-program.alt { background: var(--cream-2); }
.pkg-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; flex-wrap: wrap; margin-bottom: 32px; }
.pkg-head > div { max-width: 680px; }
.pkg-head .section-title { margin-bottom: 10px; }
.pkg-head p { color: var(--muted-2); margin: 0; }

.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 24px; row-gap: 0; }
/* Each card spans seven shared rows (name, frequency, price, rate,
   "includes" line, list, button) through subgrid, so every row lines up
   across the three cards even when one card's text wraps. */
.tier {
  background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 32px 28px;
  display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0;
}
.tier h3 { font-size: 22px; margin-bottom: 4px; }
.tier-freq { font-size: 13px; color: var(--muted-2); margin-bottom: 20px; }
.tier-price { display: flex; align-items: baseline; gap: 6px; padding-top: 18px; border-top: 1px solid var(--border-light); }
.tier-price .amt { font-family: var(--font-display); font-size: 40px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.tier-price .per { font-size: 13px; color: var(--muted-2); }
.tier-rates { list-style: none; padding: 16px 0 0; margin: 0; border-top: 1px solid var(--border-light); display: grid; gap: 8px; }
.tier-rates li { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--muted-2); }
.tier-rates strong { font-family: var(--font-display); font-size: 22px; color: var(--ink); }
.tier-rate { font-size: 13px; color: var(--gold-dark); font-weight: 600; margin: 6px 0 20px; }
.tier-includes { font-size: 12.5px; font-weight: 700; color: var(--ink); margin: 0 0 10px; }
.tier .service-list { margin: 0 0 26px; gap: 10px; flex: 1; align-content: start; }
.tier .service-list li { font-size: 13.5px; }
.tier .btn { margin-top: auto; }
.tier-note { margin: 28px auto 0; text-align: center; font-size: 14px; color: var(--muted-2); max-width: 640px; }
.tier-note strong { color: var(--ink); }

.pkg-dark { background: var(--black); color: #fff; }
.pkg-dark p { color: #c7c2b3; }
.pkg-split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
.pkg-split .svc-actions { margin-top: 28px; }
.pkg-dark .service-panel { background: var(--charcoal); }
.pkg-dark .svc-more { border-color: var(--border-dark); }
.pkg-dark .svc-more summary, .pkg-dark .svc-more h4, .pkg-dark .svc-more li strong { color: #fff; }
.pkg-dark .svc-more summary:hover { color: var(--gold); }
.pkg-dark .svc-more li { color: #c7c2b3; }

.pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1000px; margin: 0 auto; }
.pay-card { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow); }
.pay-card h3 { font-size: 18px; margin-bottom: 4px; }
.pay-card .service-list { margin-bottom: 0; }
.pay-card .service-list strong { color: var(--ink); }
.pay-methods { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pay-methods li {
  border: 1px solid var(--border-light); border-radius: var(--radius); padding: 12px 14px;
  font-weight: 700; font-size: 14px; background: var(--field); color: var(--ink);
}
.pay-methods li span { display: block; font-weight: 400; font-size: 12px; color: var(--muted-2); margin-top: 2px; }

/* ---------- Application form ---------- */
.apply-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start; }
.apply-aside { position: sticky; top: 112px; }
.apply-aside-note { font-size: 13.5px; color: var(--muted); margin: 26px 0 18px; }
.apply-aside-note a { color: var(--gold); }
#applyRest[hidden] { display: none; }

.apply-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.apply-form fieldset[hidden] { display: none; }
.apply-section { padding: 30px 0 14px; border-top: 1px solid var(--border-light); }
.apply-form > .apply-section:first-child { border-top: 0; padding-top: 0; }
.apply-legend, .apply-form .cond > legend, .day-set > legend { float: left; width: 100%; padding: 0; }
/* "~" not "+": when the block right after a legend is hidden for the chosen
   program, the next visible fieldset must still clear the floated legend,
   or it gets squeezed into a sliver beside it. */
.apply-legend ~ *, .apply-form .cond > legend ~ *, .day-set > legend ~ * { clear: both; }
.apply-legend { margin-bottom: 18px; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); }
.apply-legend .step { color: var(--gold-dark); margin-right: 10px; font-size: 14px; letter-spacing: 1px; }
/* Step numbers come from a counter so they stay sequential when a
   program hides a section (hidden fieldsets are display:none and skip it). */
.apply-form { counter-reset: apply-step; }
.apply-section { counter-increment: apply-step; }
.apply-legend .step::before { content: counter(apply-step, decimal-leading-zero); }

.field-wrap { display: block; }
.field-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.field-label .opt { font-weight: 400; color: var(--muted-2); }
.field-link { float: right; font-weight: 600; color: var(--gold-dark); text-decoration: none; font-size: 12.5px; }
.field-link:hover { color: var(--gold); }
.field-hint { font-size: 13px; color: var(--muted-2); margin: 0 0 18px; }
.field-subhead { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-dark); margin: 6px 0 12px; }
.field-row-3 { grid-template-columns: repeat(3, 1fr); }
/* Side-by-side labels can wrap to different line counts; let each label
   grow so the inputs underneath always line up. */
.field-row > .field-wrap, .field-row > fieldset:not([hidden]) { display: flex; flex-direction: column; }
.field-row > fieldset > .field-wrap { flex: 1; display: flex; flex-direction: column; }
.field-row .field-label { flex: 1 0 auto; }

.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.choice-grid-wide { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; left: 16px; top: 16px; }
.choice-body {
  display: block; height: 100%; border: 1px solid var(--border-light); border-radius: var(--radius);
  background: var(--field); padding: 14px 16px; transition: border-color 0.15s ease, background 0.15s ease;
}
.choice-body strong { display: block; font-size: 14px; color: var(--ink); }
.choice-body span { display: block; font-size: 12.5px; color: var(--muted-2); margin-top: 3px; }
.choice-body em { display: block; font-style: normal; font-size: 13px; font-weight: 700; color: var(--gold-dark); margin-top: 6px; }
.choice:hover .choice-body { border-color: var(--gold); }
.choice input:checked + .choice-body { border-color: var(--gold); background: rgba(201, 162, 39, 0.1); box-shadow: inset 0 0 0 1px var(--gold); }
.choice input:focus-visible + .choice-body { outline: 2px solid var(--gold); outline-offset: 2px; }

.day-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.day-chip { position: relative; cursor: pointer; }
.day-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.day-chip span {
  display: inline-block; padding: 9px 16px; border: 1px solid var(--border-light); border-radius: 999px;
  background: var(--field); font-size: 13px; font-weight: 600; color: var(--muted-2);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.day-chip:hover span { border-color: var(--gold); }
.day-chip input:checked + span { background: var(--gold); border-color: var(--gold); color: #17130a; }
.day-chip input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (max-width: 1000px) {
  .tier-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; row-gap: 24px; }
  .tier { display: flex; flex-direction: column; grid-row: auto; }
  .pkg-split, .video-feature-inner, .apply-grid { grid-template-columns: 1fr; }
  .video-feature-inner { gap: 40px; }
  .apply-aside { position: static; }
}
@media (max-width: 900px) {
  .field-row-3 { grid-template-columns: 1fr; row-gap: 0; }
}
@media (max-width: 700px) {
  .pay-grid, .choice-grid { grid-template-columns: 1fr; }
  .pkg-program { padding: 64px 0; }
  .tier { padding: 28px 22px; }
  .service-panel { padding: 28px 22px; }
}

/* ---------- Homepage "also offering" row ---------- */
.also-offer { margin-top: 24px; }
/* Text grows to fill the card so the "Learn More" links line up. */
.mini-offer { display: flex; flex-direction: column; }
.mini-offer p { flex: 1; }

/* About: philosophy cards reserve two lines for the title so the body
   text starts at the same height when one title wraps. */
@media (min-width: 761px) {
  .philosophy-grid .service-card h3 { min-height: 2.6em; }
}
/* Four across on desktop, then two, then one — this used to be a fixed
   inline four-column grid, which crushed the cards on phones. */
.philosophy-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .philosophy-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .philosophy-grid { grid-template-columns: 1fr; } }

/* ---------- About: journey, credentials, certificates ---------- */
.journey-inner { grid-template-columns: 1.15fr 0.85fr; }
.credentials-4 { grid-template-columns: repeat(4, 1fr); max-width: 1000px; margin-left: auto; margin-right: auto; }
.cert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px; margin-top: 48px; }
.cert { margin: 0; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.cert a { display: block; }
.cert img { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 775; object-fit: contain; background: #fff; transition: transform 0.2s ease; }
.cert a:hover img { transform: scale(1.03); }
.cert figcaption { background: var(--charcoal); color: #d8d3c4; font-size: 12px; padding: 10px 12px; text-align: center; flex: 1; }

@media (max-width: 900px) {
  .journey-inner { grid-template-columns: 1fr; }
  .credentials-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .credentials-4 { grid-template-columns: 1fr; }
}

/* ---------- Legal pages (privacy.html, terms.html) ---------- */
.legal { max-width: 760px; margin: 0 auto; color: var(--ink); font-size: 16px; line-height: 1.7; }
.legal-updated { color: var(--muted-2); font-size: 14px; margin-bottom: 32px; }
.legal h2 { font-size: 22px; margin: 40px 0 12px; }
.legal h3 { font-size: 17px; margin: 24px 0 8px; }
.legal ul { margin: 0 0 16px; padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--ink); }
@media (max-width: 560px) {
  .legal { font-size: 15px; }
  .legal h2 { font-size: 20px; margin-top: 32px; }
}

/* ---------- Royal Cuisine (royal-cuisine.html) ---------- */
.video-player.is-wide video { aspect-ratio: 2320 / 1080; }
.cuisine-intro { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; max-width: 1040px; }
.cuisine-intro p { color: var(--muted-2); }
.cuisine-quote { margin: 0; padding-left: 24px; border-left: 3px solid var(--gold); }
.cuisine-quote p { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.15; color: var(--ink); margin-bottom: 12px; }
.cuisine-quote cite { font-style: normal; color: var(--gold-dark); font-weight: 600; letter-spacing: 0.5px; }
.video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 20px; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gallery a { display: block; border-radius: var(--radius-lg); overflow: hidden; background: var(--charcoal); }
.gallery img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.4s ease; }
.gallery a:hover img, .gallery a:focus-visible img { transform: scale(1.04); }
@media (max-width: 760px) {
  .cuisine-intro { grid-template-columns: 1fr; gap: 28px; }
  .video-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .gallery a:first-child { grid-column: 1 / -1; }
}

/* ---------- Consultation booking (consultation.html) ---------- */
.consult-options { display: grid; grid-template-columns: 1fr 1.25fr; gap: 24px; max-width: 980px; margin: 0 auto; align-items: start; }
.consult-option { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow); }
.consult-option.is-featured { border-color: var(--gold); }
.consult-option h2 { font-size: 24px; margin-bottom: 6px; }
.consult-option p { color: var(--muted-2); font-size: 15px; }
.consult-option .service-list { margin: 0 0 18px; }
.consult-tag { display: inline-block; font-size: 12px !important; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #17130a !important; background: var(--gold); border-radius: 999px; padding: 5px 12px; margin-bottom: 14px; }
.consult-meta { font-weight: 600; color: var(--gold-dark) !important; margin-bottom: 14px; }
.consult-credit { font-size: 13.5px !important; margin: 0; padding-top: 14px; border-top: 1px solid var(--border-light); }

.field-hint-inline { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted-2); margin-left: 8px; }
.choice-group { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
.choice-group-3 { grid-template-columns: repeat(3, 1fr); }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice > span { display: block; height: 100%; padding: 12px 14px; border: 1px solid var(--border-light); border-radius: var(--radius); background: var(--field); font-size: 13px; color: var(--muted-2); line-height: 1.4; transition: border-color 0.2s, background 0.2s; }
.choice strong { display: block; color: var(--ink); font-size: 14px; }
.choice input:checked + span { border-color: var(--gold); background: var(--field-picked); box-shadow: inset 0 0 0 1px var(--gold); }
.choice input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.choice input:disabled + span { opacity: 0.45; cursor: not-allowed; }
.choice input:disabled { cursor: not-allowed; }

.booking-cal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 22px; }
.booking-dow { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted-2); text-align: center; padding-bottom: 2px; }
.booking-day { font-family: var(--font-body); font-size: 16px; font-weight: 700; color: var(--ink); background: var(--field); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 8px 0 10px; cursor: pointer; line-height: 1.1; transition: border-color 0.2s, background 0.2s; }
.booking-day small { display: block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted-2); margin-bottom: 3px; }
.booking-day:hover:not(:disabled) { border-color: var(--gold); }
.booking-day:disabled { opacity: 0.35; cursor: not-allowed; background: transparent; }
.booking-day.is-picked { background: var(--gold); border-color: var(--gold); color: #17130a; }
.booking-day.is-picked small { color: #17130a; }
.booking-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-bottom: 22px; }
.booking-time { font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--ink); background: var(--field); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 10px 0; cursor: pointer; }
.booking-time:hover { border-color: var(--gold); }
.booking-time.is-picked { background: var(--gold); border-color: var(--gold); color: #17130a; }
.booking-empty { grid-column: 1 / -1; font-size: 13.5px; color: var(--muted-2); margin: 0; }
.booking-summary { font-size: 14px; font-weight: 600; color: var(--ink); margin: 4px 0 14px; min-height: 0; }
.booking-summary:empty { display: none; }
@media (max-width: 760px) {
  .consult-options { grid-template-columns: 1fr; }
  .consult-option { padding: 24px; }
  .choice-group, .choice-group-3 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .contact-form-card { padding: 26px 18px; }
  .booking-cal { gap: 4px; }
}
.consult-option h3 { font-size: 22px; margin-bottom: 6px; color: var(--ink); }
.consult-options-pricing { max-width: none; margin: 0; align-items: stretch; }
.consult-options-pricing .consult-option { display: flex; flex-direction: column; }
.consult-options-pricing .consult-option .btn { margin-top: auto; }
.consult-options-pricing .consult-credit { margin-bottom: 20px; }
.consult-options-pricing .consult-option > p:not(.consult-tag):not(.consult-meta):not(.tier-includes):not(.consult-credit) { margin-bottom: 20px; }


/* ---------- Header logo: stacked crest lockup ----------
   Full lockup (rules + shield, name, FITNESS, tagline) at the top of the
   page; once the visitor scrolls, the sticky header shrinks to shield +
   name so it doesn't eat the screen. JS toggles .is-compact. */
.logo-stacked { flex-direction: column; gap: 7px; text-align: center; }
.logo-stacked .logo-mark { display: flex; align-items: center; gap: 12px; }
.logo-rule { display: block; width: 38px; height: 1px; background: var(--gold); opacity: 0.75; }
.logo-stacked .logo-text { font-weight: 400; font-size: 21px; letter-spacing: 5px; padding-left: 5px; line-height: 1.1; }
.logo-stacked .logo-text small { font-weight: 400; font-size: 9.5px; letter-spacing: 6px; padding-left: 6px; margin-top: 7px; }
.logo-stacked .logo-tagline { color: #8f98a6; font-size: 8px; letter-spacing: 2.4px; padding-left: 2.4px; margin-top: 7px; }

.site-header.is-compact .header-inner { min-height: 72px; padding-top: 8px; padding-bottom: 8px; }
.site-header.is-compact .logo-stacked { flex-direction: row; gap: 12px; text-align: left; }
.site-header.is-compact .logo-rule,
.site-header.is-compact .logo-text small,
.site-header.is-compact .logo-tagline { display: none; }
.site-header.is-compact .logo-mark svg { width: 34px; height: 40px; }
.site-header.is-compact .logo-text { font-size: 17px; letter-spacing: 4px; padding-left: 0; }

@media (max-width: 420px) {
  .header-inner { min-height: 76px; padding-top: 10px; padding-bottom: 10px; }
  .logo-stacked { gap: 5px; }
  .logo-stacked .logo-mark { gap: 9px; }
  .logo-rule { width: 22px; }
  .logo-stacked .logo-mark svg { width: 36px; height: 42px; }
  .logo-stacked .logo-text { font-size: 16px; letter-spacing: 3.5px; padding-left: 3.5px; }
  .logo-stacked .logo-text small { font-size: 8.5px; letter-spacing: 5px; padding-left: 5px; margin-top: 5px; }
  .logo-stacked .logo-tagline { font-size: 7px; letter-spacing: 1.4px; padding-left: 1.4px; margin-top: 5px; }
  .site-header.is-compact .header-inner { min-height: 64px; }
  .site-header.is-compact .logo-mark svg { width: 30px; height: 35px; }
  .site-header.is-compact .logo-text { font-size: 15px; letter-spacing: 3px; }
}

/* Looping clips of Marx (homepage gym card, About "Meet The Founder"):
   black and white to match the site and drop the gym's purple machines. */
.bw-video { filter: grayscale(1) contrast(1.08); }
.meet-photo video { display: block; width: 100%; height: 100%; object-fit: cover; }
.founder-video { object-position: 50% 55%; }
.section-intro { color: var(--muted-2); font-size: 16px; line-height: 1.7; margin: 14px 0 0; }
/* Footer crest: same stacked lockup as the header, at its natural width */
.footer-brand .logo-stacked { width: max-content; margin-bottom: 22px; }

/* ---------- Light / dark mode ----------
   Light is the original cream design. Dark follows the visitor's device
   setting unless they pick a theme with the header toggle (stored in
   localStorage as "gnf-theme" and applied in <head> before first paint).
   Only the light-section tokens change: the black header, hero, footer and
   dark bands are dark in both themes, and gold stays the accent. */
:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --cream: #0f0f0e;
  --cream-2: #171715;
  --surface: #1c1c1a;
  --field: #24241f;
  --field-picked: rgba(201, 162, 39, 0.18);
  --ink: #f1ece0;
  --muted-2: #aaa596;
  --gold-dark: #d6b450;
  --border-light: rgba(232, 214, 158, 0.14);
  --shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.85);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --cream: #0f0f0e;
    --cream-2: #171715;
    --surface: #1c1c1a;
    --field: #24241f;
    --field-picked: rgba(201, 162, 39, 0.18);
    --ink: #f1ece0;
    --muted-2: #aaa596;
    --gold-dark: #d6b450;
    --border-light: rgba(232, 214, 158, 0.14);
    --shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.85);
  }
}

.theme-toggle {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 39, 0.45);
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.theme-toggle:hover { background: rgba(201, 162, 39, 0.12); border-color: var(--gold); }
.theme-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.theme-toggle svg { width: 18px; height: 18px; }
/* Show the icon for the theme you'd switch TO: moon in light mode, sun in dark. */
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
.site-header.is-compact .theme-toggle { width: 36px; height: 36px; }
/* 404 page */
.not-found { padding: 120px 0 110px; }
.not-found-actions { justify-content: center; margin-top: 30px; }
/* Very small phones (≤360px): keep "GORILLA NEST" on one line beside the
   theme and menu buttons now that the header keeps its 24px side padding. */
@media (max-width: 360px) {
  .site-header .logo-stacked .logo-text { font-size: 14px; letter-spacing: 2.6px; padding-left: 2.6px; }
  .site-header .logo-rule { width: 16px; }
  .site-header .logo-stacked .logo-mark svg { width: 32px; height: 38px; }
  .site-header .logo-stacked .logo-tagline { font-size: 6.5px; letter-spacing: 1px; }
  .header-inner { gap: 12px; }
}