/* ---- Design tokens ---- */
:root {
  --claret: #6b1d2a;
  --claret-deep: #571622;
  --ink: #161412;
  --ink-soft: #1f1c1a;
  --ivory: #f6f4ef;
  --ivory-warm: #efece4;
  --text-dark: #201d1b;
  --text-mid: #5c5751;
  --hairline-dark: rgba(255, 255, 255, 0.16);
  --hairline-light: rgba(32, 29, 27, 0.14);
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

/* Full-page scroll snapping across the main landing sections.
   Each listed section locks to the top of the viewport as the user
   scrolls, rather than letting scroll come to rest mid-section. */
.hero,
.intro,
#the-name,
#experiences,
#memberships,
#women,
#new,
#story,
#contact,
#faq,
.footer {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Sections taller than the viewport (e.g. New to Golf's pathway,
   the founder story) still scroll freely inside themselves once
   snapped to their top edge; snapping only governs the boundary. */
@media (max-width: 640px) {
  html { scroll-snap-type: y proximity; }

  /* On mobile, let a fast flick glide past a section boundary instead of
     being forced to a hard stop at every single one; it only settles
     near a snap point once the scroll naturally comes to rest, which
     feels like a soft glide rather than a jump. */
  .hero,
  .intro,
  #the-name,
  #experiences,
  #memberships,
  #women,
  #new,
  #story,
  #contact,
  #faq,
  .footer {
    scroll-snap-stop: normal;
  }
}

html, body {
  overflow-x: hidden;
}

body {
  font-family: var(--serif);
  color: var(--text-dark);
  line-height: 1.6;
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.35s var(--ease);
}

.stealth-link {
  color: inherit;
  text-decoration: none;
}

.stealth-link:hover { opacity: 1; }

a:hover { opacity: 0.65; }

/* ---- Navbar ---- */
/* Sits in normal flow at the top of the hero */
.navbar {
  position: relative;
  z-index: 90;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32px 56px;
}

.navbar .logo,
.navbar .nav-links a {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

/* Detaches and follows the reader once the hero has scrolled away */
.navbar.is-stuck {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  padding: 15px 56px;
  background: rgba(246, 244, 239, 0.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(32, 29, 27, 0.1);
  animation: navDrop 0.45s var(--ease);
}

@keyframes navDrop {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

.navbar.is-stuck .logo,
.navbar.is-stuck .nav-links a,
.navbar.is-stuck .nav-cta {
  color: var(--text-dark);
  text-shadow: none;
}

.navbar.is-stuck .nav-cta:hover {
  background: rgba(32, 29, 27, 0.06);
  border-color: rgba(32, 29, 27, 0.6);
}

.logo {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
}

/* Brand mark: white over the hero photography, black once the bar goes solid */
.navbar .logo img {
  display: block;
  height: 44px;
  width: auto;
  transition: opacity 0.4s var(--ease);
}

.navbar .logo { position: relative; }
.navbar .logo-dark { position: absolute; top: 0; left: 0; opacity: 0; }

.navbar.is-stuck .logo-light { opacity: 0; }
.navbar.is-stuck .logo-dark { opacity: 1; }

.nav-links {
  display: flex;
  gap: 36px;
  list-style: none;
  align-items: center;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.navbar .logo,
.navbar .nav-links a {
  color: #fff;
}

.navbar .nav-cta {
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.navbar--light .logo,
.navbar--light .nav-links a {
  color: var(--text-dark);
}

/* Glass pill so it stays crisp over the pale pavement in the hero */
.nav-cta {
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  padding: 8px 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}

/* Hamburger: hidden on desktop */
.nav-burger {
  display: none;
  background: none;
  border: none;
  padding: 10px 4px;
  cursor: pointer;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.nav-burger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: #fff;
  transition: transform 0.35s var(--ease), opacity 0.25s var(--ease);
}

.navbar.is-stuck .nav-burger span { background: var(--text-dark); }

.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-cta:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.7);
}

/* Once the bar goes solid ivory, drop the glass for a plain outlined pill */
.navbar.is-stuck .nav-cta {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: rgba(32, 29, 27, 0.35);
}

/* ---- Hero ---- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--ink) url('../images/hero-photo-v5.jpg') center bottom / cover no-repeat;
  display: flex;
  flex-direction: column;
}

/* Fine-tuned zoom on wider screens, where the image's own aspect ratio
   is close enough to the viewport's that a fixed percentage is safe.
   On narrower/taller screens this is left as "cover" above so the photo
   never leaves a gap. */
@media (min-width: 641px) {
  .hero { background-size: 106%; }
}

/* Mobile only: focus on the woman rather than trying to fit both people
   in. "cover" fills the section edge to edge with no gaps (height is
   the limiting dimension on a tall, narrow screen, so the full photo
   height is always shown - only the width gets cropped). Shifting the
   horizontal position to roughly where she stands, instead of true
   centre, keeps her in frame rather than showing the empty gap between
   her and the man. */
@media (max-width: 640px) {
  .hero {
    background-size: cover;
    background-position: 20% center;
  }
}

/* Scrim: dark at top and bottom, lighter through the middle */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.12) 45%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 56px 4vh;
}

.hero-copy {
  max-width: 900px;
  margin: 0 auto 28px;
  text-align: center;
}

/* Fixed height reserved so typing cannot shift the page */
.hero-headline {
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.1rem, 5.2vw, 4rem);
  line-height: 1.14;
  letter-spacing: 0.5px;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}

.hero-stop { color: #8f1d2b; }

.hero-sub {
  margin-top: 22px;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.1vw, 1.6rem);
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.45);
}

/* Cinematic line-fade entrance */
.hero-headline,
.hero-sub {
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
  animation: heroRise 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-headline { animation-delay: 0.15s; }
.hero-sub { animation-delay: 0.55s; }

/* Supporting signal only: monochrome white, barely present until hovered */
.hero-proof {
  width: 100%;
  max-width: 900px;
  margin: 28px auto 0;
  text-align: center;
  opacity: 0;
  filter: brightness(0) invert(1);
  animation: heroProofIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.95s forwards;
  transition: opacity 1s var(--ease);
}

.hero-proof-label {
  display: block;
  margin-bottom: 16px;
  font-family: var(--sans);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
}

.hero-proof-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.hero-proof-track {
  display: flex;
  align-items: center;
  gap: 44px;
  animation: heroProofLoop 16s linear infinite;
  will-change: transform;
}

.hero-proof:hover .hero-proof-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .hero-proof-track { animation: none; }
}

.hero-proof img {
  height: 31px;
  width: auto;
  flex: 0 0 auto;
  min-width: 0;
}

.hero-proof:hover { opacity: 1; }

@keyframes heroProofIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 0.3; transform: translateY(0); }
}

@keyframes heroProofLoop {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-proof { opacity: 0.3; transform: none; animation: none; }
}

@keyframes heroRise {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-headline,
  .hero-sub { opacity: 1; transform: none; animation: none; }
}

/* ---- Intro / content section ---- */
.intro {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 56px;
  background-color: #f3eee3;
  background-image: url('../images/paper-texture.png');
  background-repeat: repeat;
  padding: 56px 140px 0 0;
}

/* Image bleeds flush to the browser's left edge; container is sticky so
   it stays in view while the cards scroll past on the right. */
.intro-visual {
  flex: 0 0 36%;
  max-width: 440px;
  position: sticky;
  top: 90px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.intro-visual img {
  width: 100%;
  max-width: 390px;
  height: auto;
  display: block;
}

/* Text column sits hard against the section's right edge, mirroring the
   image's bleed to the left edge. */
.intro-content {
  flex: 1;
  min-width: 0;
  padding-left: 64px;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.intro-copy h1 {
  color: #201d1b;
}

.intro-copy {
  width: 100%;
  text-align: left;
  max-width: 480px;
  margin: 0 0 36px;
  padding: 0;
}

/* Card row: all three offerings shown side by side at once, no scroll
   trickery. Cards shrink together to fit the available width rather
   than wrapping - they only stack (in the mobile media query below)
   once the column gets genuinely too narrow for three across. */
.card-stack {
  width: 100%;
  max-width: none;
}

.card-window {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  width: 100%;
}

.intro .card {
  position: static;
  flex: 1 1 0;
  min-width: 0;
  background: #fff;
  border: 1px solid rgba(32, 29, 27, 0.08);
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(32, 29, 27, 0.1);
  padding: 26px 24px 28px;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* The "Popular" tab is absolutely positioned against its own card, so
   that card needs to stay a positioning context even though .intro
   .card above resets position to static for the rest. */
.intro .card--popular {
  position: relative;
}

/* The shared .card-tab left offset (40px) was tuned for the wider
   40px-padded cards elsewhere on the site; these intro cards use 24px
   padding, so pull the tab in to match. */
.intro .card-tab {
  left: 20px;
}

.intro .card h3 {
  white-space: normal;
  font-size: clamp(1.08rem, 1.3vw, 1.32rem);
  min-height: 2.4em;
}

/* Fixed min-heights (sized to the longest card's wrapped text - the
   heading and price line on "Inclusivity and Development") so every
   row - heading, lead paragraph, price, button - lines up across all
   three cards regardless of how much each one's text wraps. */
.intro .card-lead {
  margin-bottom: 14px;
  min-height: 5em;
}

.intro .card-price {
  min-height: 4.8em;
}

.intro .card::before,
.intro .card::after {
  display: none;
}

@media (max-width: 640px) {
  .intro {
    flex-direction: column;
    padding: 48px 0 56px;
    gap: 28px;
  }
  .intro-visual { position: static; max-width: 209px; margin-left: 0; }
  .intro-content { padding: 0 24px; align-items: stretch; }
  .intro-copy { max-width: none; }

  /* Desktop shows all 3 cards in a horizontal row (see .card-window
     above); on mobile they stack in a vertical column instead. */
  .card-stack { display: block; }
  .card-window {
    position: static;
    height: auto;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 20px;
  }
  .intro .card {
    flex: 0 0 auto;
    width: 100%;
    position: static;
    opacity: 1;
    transform: none;
    box-shadow: 0 8px 20px rgba(32, 29, 27, 0.08);
  }
  /* Restore the popular card's positioning context - the rule above
     resets it to static, which sends the absolutely-positioned tab up
     to the nearest other positioned ancestor (.intro) instead of
     staying on its own card. */
  .intro .card--popular {
    position: relative;
  }
  .intro .card h3,
  .intro .card-lead,
  .intro .card-price {
    min-height: 0;
  }
  .intro .card::before,
  .intro .card::after {
    display: none;
  }
}

.proof {
  background: #f5f4f0;
  text-align: center;
  padding: 96px 56px 104px;
}

.proof-logos { margin-bottom: 76px; }

.proof-label {
  display: block;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(32, 29, 27, 0.45);
  margin-bottom: 14px;
}

.logo-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 1240px;
  margin: 0 auto;
}

.logo-row img {
  height: 40px;
  width: auto;
  flex: 0 1 auto;
  min-width: 0;
  opacity: 0.5;
  filter: grayscale(100%);
  transition: opacity 0.4s var(--ease);
}

.logo-row img:hover { opacity: 0.82; }

/* ---- Executive endorsement ---- */
.endorsement-card {
  text-align: left;
  max-width: 1000px;
  margin: 0 auto;
  background: #111827;
  border-left: 2px solid #d8c199;
  padding: 64px 68px 56px;
}

.endorsement-tag {
  display: block;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 3.2px;
  text-transform: uppercase;
  color: #d8c199;
  margin-bottom: 26px;
}

.endorsement-card blockquote {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.3vw, 1.95rem);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.2px;
  color: #fff;
  max-width: 46ch;
}

.endorsement-card figcaption {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.endorsement-name {
  display: block;
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #fff;
}

.endorsement-role {
  display: block;
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.55);
}

.intro-copy h1 {
  font-size: clamp(2.3rem, 4.8vw, 3.6rem);
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.08;
}

.intro-copy .subhead {
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  margin-top: 32px;
  color: var(--text-mid);
}

.intro-framing {
  text-align: center;
  font-family: var(--sans);
  font-size: 0.95rem;
  letter-spacing: 0.3px;
  color: #4c4a44;
  max-width: 640px;
  margin: 0 auto 40px;
  padding: 0 24px;
}

.card-lead {
  font-weight: 500;
  color: #14120f !important;
  min-height: 3.4em;
}

/* Footer of every card pinned to a common baseline */
.card-foot { margin-top: auto; }

/* Shared feature-list row: label stacked above its description, both
   full-width. The cards are only ~276px of content width, too narrow for
   a true side-by-side label/description grid to hit a readable line
   length, so this is deliberately one column, not two. Used identically
   by all three intro cards; don't re-tune per card. */
.card-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 2px;
}

.card-list li {
  padding-left: 16px;
}

.card-list li strong {
  position: relative;
  display: block;
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.4;
  color: #14120f;
  margin-bottom: 3px;
}

.card-list li strong::before {
  content: '\2013';
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  color: #a68a5b;
}

.card-list li span {
  display: block;
  font-family: var(--sans);
  font-size: 0.86rem;
  line-height: 1.58;
  color: #334155;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 56px;
  border-top: 1px solid rgba(32, 29, 27, 0.18);
}

.card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 34px 40px 36px;
  text-align: left;
  color: var(--text-dark);
  border-left: 1px solid rgba(32, 29, 27, 0.14);
  transition: background 0.5s var(--ease);
}

.card:first-child { border-left: none; }

.card--popular { position: relative; }

.card-tab {
  position: absolute;
  top: 0;
  left: 40px;
  transform: translateY(-50%);
  background: var(--claret);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  padding: 6px 14px;
}

.card:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.4);
}

.card-commitment {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #a68a5b;
}

.card-price {
  display: block;
  margin-top: 2px;
  min-height: 2.2em;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--claret);
}

.card h3 {
  font-family: var(--serif);
  font-size: clamp(1.28rem, 1.72vw, 1.6rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.2px;
  color: #14120f;
  white-space: nowrap;
}

.h3-fit { white-space: nowrap; }

.card p {
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.65;
  color: #334155;
}

.card-more {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #1e3d2f;
}

.card-more .arrow {
  color: #a68a5b;
  margin-left: 6px;
  display: inline-block;
  transition: transform 0.4s var(--ease);
}

.card:hover .card-more .arrow { transform: translateX(5px); }

.card-expand {
  margin-top: 8px;
}

.card-expand-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(30, 61, 47, 0.3);
  border-radius: 0;
  margin-top: 10px;
  padding: 0 0 8px;
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #1e3d2f;
  list-style: none;
  transition: border-color 0.4s var(--ease);
}

.card-expand-toggle::-webkit-details-marker { display: none; }
.card-expand-toggle::marker { content: ""; }

.card-expand-toggle:hover { opacity: 1; border-color: #1e3d2f; }

.card-expand-icon {
  position: relative;
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
}

.card-expand-icon::before,
.card-expand-icon::after {
  content: "";
  position: absolute;
  background: #a68a5b;
  transition: transform 0.3s var(--ease);
}

.card-expand-icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  transform: translateY(-50%);
}

.card-expand-icon::after {
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  transform: translateX(-50%);
}

.card-expand[open] .card-expand-icon::after { transform: translateX(-50%) scaleY(0); }
.card-expand[open] .card-expand-toggle { border-color: transparent; padding-bottom: 4px; }

.card-expand-body {
  margin-top: 14px;
}

/* ---- Content sections ---- */
.section {
  padding: 120px 56px;
}

.section-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.section--dark {
  background: var(--ink);
  color: var(--ivory);
}

.section--light {
  background: var(--ivory);
  color: var(--text-dark);
}

.section--light + .section--light,
.section--dark + .section--light {
  background: var(--ivory-warm);
}

.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  color: #a5606b;
  margin-bottom: 22px;
}

.section--light .eyebrow { color: var(--claret); }

.section h2 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  font-weight: 500;
  letter-spacing: 0.5px;
  margin-bottom: 24px;
}

.section-lead {
  font-size: 1.15rem;
  line-height: 1.75;
}

.section-lead + .section-lead {
  margin-top: 20px;
}

.section--dark .section-lead { color: rgba(246, 244, 239, 0.75); }
.section--light .section-lead { color: var(--text-mid); }

/* ---- Showcase sections ---- */
.showcase {
  position: relative;
  min-height: 100vh;
  padding: 72px 72px 96px;
  background: linear-gradient(175deg, #dbe5e6 0%, #e8e9e2 30%, #efeade 62%, #eae4d6 100%);
  display: flex;
  flex-direction: column;
  color: var(--text-dark);
}

/* Full-bleed photographic showcase */
.showcase--photo {
  background: #7d8478 url('../images/experiences-bg.jpg') center/cover no-repeat;
  position: relative;
}

.showcase--photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(260deg, rgba(20, 24, 20, 0.72) 0%, rgba(20, 24, 20, 0.45) 42%, rgba(20, 24, 20, 0.08) 72%, rgba(20, 24, 20, 0) 100%);
}

/* Membership: photo with copy on the left */
.showcase--photo-left {
  background-image: url('../images/memberships-bg.jpg');
  background-position: center bottom;
}

.showcase--photo-left::before {
  background: linear-gradient(100deg, rgba(14, 20, 16, 0.78) 0%, rgba(14, 20, 16, 0.5) 40%, rgba(14, 20, 16, 0.12) 72%, rgba(14, 20, 16, 0) 100%);
}

.showcase.showcase--photo-left .showcase-copy {
  margin-left: 0 !important;
  margin-right: auto;
  text-align: left !important;
}

.showcase.showcase--photo-left .showcase-copy p { margin-left: 0 !important; }

/* Women in Golf: photo with copy on the right */
.showcase--photo-women {
  background-image: url('../images/women-bg.jpg');
  background-position: center center;
}

.showcase--photo-women::before {
  background:
    linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18)),
    linear-gradient(270deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.2) 38%, rgba(0, 0, 0, 0.08) 62%),
    linear-gradient(260deg, rgba(16, 22, 20, 0.68) 0%, rgba(16, 22, 20, 0.44) 42%, rgba(16, 22, 20, 0.16) 74%, rgba(16, 22, 20, 0.08) 100%);
}

/* New to Golf: steps + partner lockup */
/* This is only the blurred/darkened backdrop behind the whole "New to
   Golf" section - NOT the sharp photo visitors actually see. That's a
   separate <img> (images/new-to-golf-figure.jpg) inside
   .new-figure-placeholder in index.html. If asked to "change the New
   to Golf image", it almost always means the figure photo, not this
   backdrop - check both before editing. */
.showcase--photo-new {
  background-image: url('../images/new-to-golf-backdrop.jpg');
  background-position: center center;
}

.showcase--photo-new::before {
  background: linear-gradient(100deg, rgba(17, 24, 39, 0.94) 0%, rgba(17, 24, 39, 0.86) 46%, rgba(17, 24, 39, 0.72) 78%, rgba(17, 24, 39, 0.62) 100%);
}

.showcase--photo-new .showcase-copy {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Anchor the partner lockup and CTA to the foot of the column so the
   left side fills the height of the pathway instead of leaving a void */
.showcase--photo-new .partner-lockup { margin-top: auto; }
.showcase--photo-new .showcase-foot { margin-top: 34px; }

/* New to Golf: solid white background, replacing the photo + dark
   overlay. Everything nested inside flips from light-on-dark to
   dark-on-light; scoped by ID so the other photo showcases are untouched. */
#new {
  background: linear-gradient(175deg, #f2ede2 0%, #efe9dc 35%, #efeade 65%, #eae4d6 100%);
}

#new::before {
  background: none;
}

#new .showcase-copy h2 { color: var(--text-dark); }
#new .showcase-copy p { color: var(--text-mid); }

#new .new-lead {
  color: var(--claret) !important;
}

#new .new-reassure li {
  border-color: var(--hairline-light);
  background: rgba(32, 29, 27, 0.03);
  color: var(--text-mid);
}

#new .partner-lockup {
  border-top: none;
  padding-top: 0;
  margin-top: 16px;
}

/* The framed figure photo on the right of the "New to Golf" section
   (images/new-to-golf-figure.jpg, set via <img> in index.html) - despite
   the "-placeholder" class name below, this is the real, final photo,
   not a placeholder. Don't confuse this with the section's separate
   blurred backdrop image (images/new-to-golf-backdrop.jpg, set as a CSS
   background on .showcase--photo-new above). */
.new-figure-col {
  display: flex;
  flex-direction: column;
}

.new-figure-placeholder {
  min-height: 420px;
  border-radius: 2px;
  overflow: hidden;
}

.new-figure-placeholder img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}

@media (max-width: 640px) {
  .new-figure-placeholder,
  .new-figure-placeholder img { min-height: 260px; }
}

#new .partner-lockup img {
  filter: invert(1);
  height: 15px;
  opacity: 0.55;
}

#new .partner-lockup span { color: var(--text-mid); }
#new .partner-lockup strong { color: var(--text-dark); }

#new .showcase-link {
  color: var(--text-dark);
  border-bottom-color: rgba(32, 29, 27, 0.35);
}

#new .showcase-link:hover { border-bottom-color: var(--text-dark); }
#new .showcase-link .arrow { color: var(--claret); }

.new-cta-row {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-top: 44px;
}

.new-cta-row .showcase-link {
  margin-top: 0;
  font-size: 0.7rem;
  letter-spacing: 2px;
}

.new-explore-link {
  width: fit-content;
  text-align: left;
}

/* The six-week pathway now lives in its own panel (#new-panel), not
   side-by-side with the copy, so it drops the divider it used to need
   there and just sits flush in the panel's own padding. */
#new-panel .pathway {
  border-left: none;
  padding-left: 0;
}

/* Six-week pathway graphic */
.showcase-grid--split {
  grid-template-columns: 1.05fr 0.95fr !important;
  gap: 72px;
  align-items: stretch;
  max-width: 1500px;
  position: relative;
  z-index: 2;
}

.pathway {
  margin-top: 30px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  padding-left: 44px;
}

.pathway-head { margin-bottom: 34px; }

.pathway-kicker {
  display: block;
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 500;
  color: #fff;
  margin-bottom: 8px;
}

.pathway-sub {
  display: block;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 2px;
  line-height: 1.7;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
}

.pathway-list {
  list-style: none;
  position: relative;
  padding-left: 30px;
}

.pathway-list::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 24px;
  bottom: 24px;
  width: 1px;
  background: linear-gradient(180deg, rgba(197, 160, 89, 0.7), rgba(197, 160, 89, 0.15));
}

.pw-item {
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pw-item:last-child { border-bottom: none; }

.pw-dot {
  position: absolute;
  left: -30px;
  top: 21px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid rgba(197, 160, 89, 0.55);
  background: #141a26;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.pw-item.is-open .pw-dot {
  background: #c5a059;
  border-color: #c5a059;
  box-shadow: 0 0 0 4px rgba(197, 160, 89, 0.2);
}

/* Header row */
.pw-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 15px 0;
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}

.pw-week {
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: rgba(197, 160, 89, 0.75);
  transition: color 0.35s var(--ease);
}

.pw-title {
  flex: 1 1 auto;
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.35s var(--ease);
}

.pw-head:hover .pw-title { color: rgba(255, 255, 255, 0.88); }
.pw-item.is-open .pw-title { color: #fff; }
.pw-item.is-open .pw-week { color: #c5a059; }

/* Plus / minus indicator */
.pw-sign {
  position: relative;
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  align-self: center;
}

.pw-sign::before,
.pw-sign::after {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 11px;
  height: 1px;
  background: #c5a059;
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}

.pw-sign::after { transform: rotate(90deg); }
.pw-item.is-open .pw-sign::after { transform: rotate(0deg); opacity: 0; }

/* Collapsible body */
.pw-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.45s var(--ease), opacity 0.35s var(--ease), padding-bottom 0.45s var(--ease);
}

.pw-item.is-open .pw-body { opacity: 1; padding-bottom: 18px; }

.pathway p {
  font-family: var(--sans);
  font-size: 0.86rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.68);
  padding-right: 18px;
}

.pathway-after {
  margin-top: 6px;
  padding: 20px 24px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.05);
}

.pathway-price {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.pathway-price p {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: #fff;
}

.pathway-price p strong { font-weight: 500; }

.pathway-price span {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
}

.pathway-price-note {
  font-family: var(--sans) !important;
  font-size: 0.8rem !important;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62) !important;
  margin-top: 8px;
}

.pathway-price-note--em {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.52) !important;
}

.new-lead {
  font-family: var(--serif) !important;
  font-style: italic;
  font-size: 1.5rem !important;
  color: #e8d7b8 !important;
  margin-bottom: 14px;
  max-width: none !important;
}

.new-reassure {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 32px;
}

.new-reassure li {
  border: 1px solid rgba(51, 65, 85, 0.6);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 999px;
  padding: 8px 18px;
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.78);
}

.new-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  padding-top: 28px;
}

.new-step-num {
  display: block;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 2.5px;
  color: #d9c199;
  margin-bottom: 10px;
}

.new-step h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  color: #fff;
  margin-bottom: 6px;
}

.new-step p {
  font-size: 0.88rem !important;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72) !important;
  max-width: none !important;
}

.partner-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
}

.partner-lockup img {
  height: 38px;
  width: auto;
  opacity: 0.9;
}

.partner-lockup {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 24px;
}

.partner-lockup span {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.7);
}

.partner-lockup strong { font-weight: 500; color: #fff; }

.showcase-grid--single {
  grid-template-columns: 1fr !important;
  max-width: 1400px;
  position: relative;
  z-index: 2;
}

.showcase--photo .showcase-copy {
  max-width: 700px;
  margin-left: auto;
  text-align: left;
}

/* Price and call to action sit against the right edge of the copy block */
.showcase--photo:not(.showcase--photo-left) .showcase-price { text-align: right; }

.showcase--photo:not(.showcase--photo-left) .showcase-link {
  display: block;
  width: fit-content;
  margin-left: auto;
}
.showcase--photo .showcase-copy h2 { color: #fff; }
.showcase--photo .showcase-copy p { color: rgba(255, 255, 255, 0.86); max-width: 48ch; }
.showcase--photo .showcase-price { color: #fff !important; }

.showcase--photo .showcase-link {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.4);
}

.showcase--photo .showcase-link:hover { border-bottom-color: #fff; }
.showcase--photo .showcase-link .arrow { color: #e0c79b; }

.showcase-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: center;
  gap: 64px;
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
}

/* Nudge these three sections' content up slightly on desktop too,
   without pinning it fully to the top like the mobile fix does. */
@media (min-width: 641px) {
  #experiences .showcase-grid,
  #memberships .showcase-grid,
  #women .showcase-grid {
    transform: translateY(-6%);
  }
}

.showcase--right .showcase-grid {
  grid-template-columns: 1.15fr 1fr;
}

.showcase-copy h2 {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: 0;
  margin-bottom: 28px;
  color: #14120f;
}

.showcase-copy h2 em {
  font-style: italic;
  font-weight: 400;
}

.showcase-copy p {
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.65;
  color: #4c4a44;
  max-width: 46ch;
}

.showcase-copy p + p { margin-top: 14px; }

.showcase-price {
  font-family: var(--serif) !important;
  font-style: italic;
  font-size: 1.5rem !important;
  color: #1e3d2f !important;
  margin-top: 24px;
}

.showcase-price strong { font-weight: 500; }

/* CTA and price stacked, sharing a left edge */
.showcase-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
  margin: 40px 0 0;
}

/* Sections whose copy sits on the right push the block across */
.showcase--photo:not(.showcase--photo-left) .showcase-foot { margin-left: auto; }

.showcase-foot .showcase-link {
  margin: 0 !important;
}

.showcase-foot .showcase-price {
  margin-top: 10px;
  text-align: left !important;
}

/* Muted supporting note beneath a CTA */
.showcase-note {
  margin-top: 10px;
  font-family: var(--sans) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.3px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62) !important;
  max-width: none !important;
}

.showcase-link {
  display: inline-block;
  margin-top: 32px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(30, 61, 47, 0.3);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #1e3d2f;
  transition: border-color 0.4s var(--ease);
}

.showcase-link .arrow {
  margin-left: 10px;
  color: #a68a5b;
  transition: transform 0.4s var(--ease);
  display: inline-block;
}

.showcase-link:hover { opacity: 1; border-color: #1e3d2f; }
.showcase-link:hover .arrow { transform: translateX(5px); }

.showcase-figure img {
  width: 100%;
  height: auto;
  display: block;
}

.figure-framed {
  max-width: 560px;
  max-height: 74vh;
  width: auto !important;
  margin: 0 auto;
  border-radius: 2px;
}

.figure-portrait {
  max-width: 260px;
  max-height: 40vh;
  width: auto !important;
  margin: 0 auto;
}

/* Copy alignment: text sits on the side away from the image */
.showcase--right .showcase-copy { text-align: right; }
.showcase--right .showcase-copy p { margin-left: auto; }
.showcase--left .showcase-copy { text-align: left; }

/* ---- Story ---- */
.story {
  background: #111827;
  padding: 112px 56px 140px;
}

#the-name {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #010101 0%, #211c1a 25%, #433b36 50%, #665952 75%, #89776e 100%);
}

/* Decorative photo (transparent cutout), bled flush to the right edge
   of the page so the reaching arm looks like it's extending out of
   the frame. Sits behind the copy. */
.name-portrait {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 84vh;
  max-height: 768px;
  width: 61%;
  max-width: 662px;
  z-index: 1;
  pointer-events: none;
}

.name-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
}

#the-name .name-accordion {
  position: relative;
  z-index: 2;
  margin-left: 32px;
}

@media (max-width: 640px) {
  .name-portrait { display: none; }
}

/* Mission hero */
.mission-hero {
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}

.mission-hero-title {
  font-family: var(--serif);
  font-size: clamp(1.95rem, 3.4vw, 2.95rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: 0.2px;
  color: #fff;
  max-width: 56ch;
  margin: 0 auto;
}

.mission-hero-body {
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.66);
  max-width: 74ch;
  margin: 34px auto 0;
}

.story-heading {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  font-weight: 500;
  line-height: 1.05;
  color: #fff;
  max-width: 1280px;
  margin: 0 auto 48px;
  text-align: left;
}

.story-grid {
  margin-top: 152px;
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: 80px;
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
}

.story-portrait {
  position: relative;
  align-self: start;
  margin-top: 36px;
}

.story-portrait img {
  display: block;
  width: 100%;
  max-width: 336px;
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
  object-position: center bottom;
  border-radius: 2px;
  margin-bottom: 0;
}

.story-portrait figcaption {
  max-width: 336px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.story-eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 3.4px;
  text-transform: uppercase;
  color: #a68a5b;
  margin-bottom: 24px;
}

.story-copy h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: 0.2px;
  color: #fff;
}

.story-sub {
  font-family: var(--serif) !important;
  font-size: 1.35rem !important;
  color: #d8c199 !important;
  margin: 28px 0 28px !important;
}

.story-copy p {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.68);
  max-width: 58ch;
}

.story-copy p + p { margin-top: 20px; }

.story-label {
  font-weight: 500;
  color: #d8c199;
}

.story-beat {
  font-family: var(--sans) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  color: #fff !important;
  margin-top: 28px !important;
}

.name-block {
  max-width: 720px;
  margin: 0;
  text-align: left;
}

.name-display {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  font-weight: 500;
  line-height: 1.05;
  color: #fff;
  margin-bottom: 32px;
}

.name-display-gold {
  color: #d8c199;
}

.name-copy p {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.68);
  max-width: 620px;
}

.name-copy p + p {
  margin-top: 20px;
}

/* Split-screen interactive accordion: tab row in a left-aligned pill box
   across the top, matching detail pane below. */
.name-accordion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 980px;
}

.name-accordion-list {
  display: inline-flex;
  flex-direction: row;
  align-self: flex-start;
  gap: 4px;
  margin-bottom: 36px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}

.name-accordion-item {
  background: none;
  border: none;
  padding: 12px 22px;
  text-align: center;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease);
  -webkit-appearance: none;
  appearance: none;
  border-radius: 999px;
}

.name-accordion-item:hover { color: rgba(255, 255, 255, 0.85); }

.name-accordion-item.is-active { color: #fff; background: rgba(216, 193, 153, 0.18); }

.name-accordion-panel {
  min-width: 0;
  min-height: 420px;
}

.name-accordion-pane {
  display: none;
}

.name-accordion-pane.is-active {
  display: block;
  animation: namePaneIn 0.45s var(--ease);
}

@keyframes namePaneIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.name-pane-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  font-weight: 500;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 20px;
}

.name-accordion-pane p {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.85;
  color: #fff;
  max-width: 560px;
}

.name-accordion-pane p + p {
  margin-top: 16px;
}

/* Quick-scan checklist beneath each pane's copy - no divider above it,
   sits straight after the paragraphs. */
.name-pane-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.name-pane-list li {
  position: relative;
  padding-left: 28px;
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.name-pane-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 15px;
  height: 15px;
  border: 1px solid rgba(216, 193, 153, 0.55);
  border-radius: 50%;
}

.name-pane-list li::after {
  content: '';
  position: absolute;
  left: 4.5px;
  top: 0.5em;
  width: 6px;
  height: 3px;
  border-left: 1.5px solid #d8c199;
  border-bottom: 1.5px solid #d8c199;
  transform: rotate(-45deg);
}

@media (max-width: 640px) {
  .name-accordion { max-width: none; }
  #the-name .name-accordion { margin-left: 0; }
  .name-accordion-list {
    flex-wrap: nowrap;
    gap: 3px;
    padding: 4px;
    border-radius: 14px;
    margin-bottom: 24px;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .name-accordion-list::-webkit-scrollbar { display: none; }
  .name-accordion-item { padding: 8px 10px; font-size: 0.74rem; }
  .name-pane-title { font-size: 1.4rem; }
}

.story-signoff {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  max-width: 58ch;
}

.signoff-name {
  display: block;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 500;
  color: #fff;
}

.signoff-role {
  display: block;
  margin-top: 3px;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.story-link {
  display: inline-block;
  margin-top: 32px;
  padding-bottom: 10px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(216, 193, 153, 0.4);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #d8c199;
  transition: border-color 0.4s var(--ease);
}

.story-link .arrow {
  margin-left: 10px;
  color: #a68a5b;
  transition: transform 0.4s var(--ease);
  display: inline-block;
}

.story-link:hover { opacity: 1; border-color: #d8c199; }
.story-link:hover .arrow { transform: translateX(5px); }

.story-panel-copy p {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.68);
  max-width: 58ch;
}

.story-panel-copy p + p { margin-top: 20px; }

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Contact ---- */
.section--contact {
  background: var(--claret-deep);
  color: var(--ivory);
  padding-top: 64px;
  padding-bottom: 24px;
}

.section--contact .eyebrow {
  color: rgba(246, 244, 239, 0.55);
}

/* #contact goes navy (matching the founder note section); #faq goes
   white/black, both overriding the shared .section--contact maroon. */
#contact {
  background: #111827;
  color: var(--ivory);
}

#faq {
  background: linear-gradient(175deg, #f2ede2 0%, #efe9dc 35%, #efeade 65%, #eae4d6 100%);
  color: var(--text-dark);
  padding-top: 56px;
  padding-bottom: 72px;
}

#faq .faq-category,
#faq .faq-item {
  border-color: rgba(32, 29, 27, 0.14);
  background: rgba(32, 29, 27, 0.03);
}

#faq .faq-category[open],
#faq .faq-item[open] {
  background: rgba(32, 29, 27, 0.05);
  border-color: rgba(32, 29, 27, 0.22);
}

#faq .faq-category-title,
#faq .faq-q {
  color: var(--text-dark);
}

#faq .faq-category .faq-list {
  border-top-color: rgba(32, 29, 27, 0.12);
}

#faq .faq-icon::before,
#faq .faq-icon::after {
  background: rgba(32, 29, 27, 0.55);
}

#faq .faq-a {
  margin: 0 22px 20px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid rgba(32, 29, 27, 0.08);
  border-radius: 10px;
}

#faq .faq-a p {
  color: var(--text-mid);
}

.faq-categories {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 40px auto 0;
  max-width: 780px;
  text-align: left;
}

.faq-category {
  border: 1px solid rgba(246, 244, 239, 0.16);
  border-radius: 14px;
  background: rgba(246, 244, 239, 0.05);
  overflow: hidden;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.faq-category[open] {
  background: rgba(246, 244, 239, 0.08);
  border-color: rgba(246, 244, 239, 0.28);
}

.faq-category-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px 26px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--ivory);
  list-style: none;
}

.faq-category-title::-webkit-details-marker { display: none; }
.faq-category-title::marker { content: ""; }

.faq-category[open] .faq-category-title {
  padding-bottom: 16px;
}

.faq-category .faq-list {
  padding: 4px 26px 22px;
  border-top: 1px solid rgba(246, 244, 239, 0.14);
  padding-top: 18px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-item {
  border: 1px solid rgba(246, 244, 239, 0.16);
  border-radius: 14px;
  background: rgba(246, 244, 239, 0.05);
  overflow: hidden;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.faq-item[open] {
  background: rgba(246, 244, 239, 0.08);
  border-color: rgba(246, 244, 239, 0.28);
}

.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  color: var(--ivory);
  list-style: none;
}

.faq-q::-webkit-details-marker { display: none; }
.faq-q::marker { content: ""; }

.faq-icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: rgba(246, 244, 239, 0.7);
  transition: transform 0.3s var(--ease);
}

.faq-icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  transform: translateY(-50%);
}

.faq-icon::after {
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  transform: translateX(-50%);
}

/* Category headings get a dropdown chevron instead of the questions'
   plus icon, to tell the two accordion levels apart at a glance. */
.faq-category-title .faq-icon::before,
.faq-category-title .faq-icon::after {
  top: 45%;
  width: 7px;
  height: 1.5px;
}

.faq-category-title .faq-icon::before {
  left: 0;
  transform-origin: right center;
  transform: rotate(40deg);
}

.faq-category-title .faq-icon::after {
  left: auto;
  right: 0;
  transform-origin: left center;
  transform: rotate(-40deg);
}

.faq-category-title .faq-icon {
  transition: transform 0.3s var(--ease);
}

.faq-category[open] .faq-category-title .faq-icon {
  transform: rotate(180deg);
}

.faq-a {
  padding: 0 26px 24px;
}

.faq-a p {
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.75;
  color: rgba(246, 244, 239, 0.72);
  max-width: 65ch;
}

.section--contact .section-lead {
  color: rgba(246, 244, 239, 0.8);
}

.cta-button {
  display: inline-block;
  margin-top: 40px;
  background: transparent;
  color: var(--ivory);
  border: 1px solid rgba(246, 244, 239, 0.5);
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 16px 44px;
  border-radius: 999px;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}

.cta-button:hover {
  opacity: 1;
  background: var(--ivory);
  color: var(--claret-deep);
  border-color: var(--ivory);
}

.cta-button--dark {
  color: var(--text-dark);
  border-color: rgba(32, 29, 27, 0.35);
}

.cta-button--dark:hover {
  background: var(--claret-deep);
  color: var(--ivory);
  border-color: var(--claret-deep);
}

/* ---- Good to know links ---- */
.info-links {
  background: var(--claret-deep);
  color: rgba(246, 244, 239, 0.6);
  padding: 8px 56px 40px;
  text-align: center;
}

.info-links-heading {
  display: block;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  color: rgba(246, 244, 239, 0.85);
  margin-bottom: 16px;
}

.info-links-item {
  display: block;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: rgba(246, 244, 239, 0.6);
  margin-top: 10px;
}

a.info-links-item:hover { opacity: 1; color: var(--ivory); }
.info-links-item--static { cursor: default; }

/* ---- Footer ---- */
.footer {
  background: #111827;
  color: rgba(246, 244, 239, 0.55);
  padding: 24px 56px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 1px;
}

.footer-copyright {
  justify-self: end;
  text-align: right;
  line-height: 1.5;
}

.footer-legal {
  display: flex;
  justify-self: center;
  align-items: center;
  gap: 12px;
  font-size: 0.72rem;
  letter-spacing: 0.6px;
  color: rgba(246, 244, 239, 0.45);
}

.footer .logo {
  justify-self: start;
}

.footer-legal-dot { color: rgba(246, 244, 239, 0.35); }

.footer .logo {
  color: var(--ivory);
  font-size: 1.25rem;
  display: flex;
  align-items: center;
}

.footer .logo img {
  display: block;
  height: 40px;
  width: auto;
}

/* ---- Experience panel ---- */
button.showcase-link {
  background: none;
  border: none;
  border-bottom: 1px solid rgba(30, 61, 47, 0.3);
  border-radius: 0;
  cursor: pointer;
  font-family: var(--sans);
  padding: 0 0 10px;
  -webkit-appearance: none;
  appearance: none;
}

.showcase--photo button.showcase-link {
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.showcase--photo button.showcase-link:hover { border-bottom-color: #fff; }

.panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 11, 0.55);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  z-index: 90;
}

.panel-open .panel-backdrop { opacity: 1; }

/* Lock the page in place behind any open panel or pop-out. */
body.panel-open {
  overflow: hidden;
}

.panel {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: min(50vw, 900px);
  background: #14100e;
  color: var(--ivory);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.55s var(--ease);
  z-index: 100;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
}

.panel.is-open { transform: translateX(0); }

.panel-inner { padding: 56px 64px 64px; }

.panel-close {
  position: absolute;
  top: 22px;
  right: 26px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s var(--ease);
}

.panel-close:hover { color: #fff; }

.panel-kicker {
  display: block;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #d8c199;
  margin-bottom: 14px;
}

.panel-head h2 {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 500;
  color: #fff;
  margin-bottom: 12px;
}

.panel-head p {
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.66);
}

.tier-baseline {
  margin-top: 26px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
}

.tier-baseline-label {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 12px;
}

.tier-baseline .tier-list { gap: 6px; }

.tier-plus {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #ecd9b4;
  margin-top: 15px;
  margin-bottom: 12px;
}

.tier {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.tier-for {
  display: block;
  font-family: var(--sans);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 10px;
}

.tier h3 {
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 500;
  color: #fff;
  margin-bottom: 8px;
}

.tier--flagship h3 { color: #ecd9b4; }

.tier-price {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: #fff;
  margin-bottom: 16px;
}

.tier-price strong { font-weight: 500; }

.tier-price span {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.55);
}

.tier-desc {
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 15px;
}

.tier-list { list-style: none; display: flex; flex-direction: column; gap: 7px; }

.tier-list li {
  position: relative;
  padding-left: 18px;
  font-family: var(--sans);
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

.tier-list li strong {
  font-weight: 500;
  color: #fff;
}

.tier--flagship .tier-list li strong { color: #ecd9b4; }

.tier-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 1px;
  background: #d8c199;
}

.tier--third h3 {
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.88);
}

.tier--third .tier-price span {
  font-size: 0.7rem;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #d8c199;
}

.tier--third .tier-desc { margin-bottom: 0; }

.panel-cta {
  display: inline-block;
  margin-top: 28px;
  padding: 15px 40px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: none;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ivory);
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}

.panel-cta:hover {
  opacity: 1;
  background: var(--ivory);
  color: #14100e;
}

/* ---- Plan a day configurator ---- */
.configurator-steps {
  display: flex;
  gap: 6px;
  margin-bottom: 30px;
}

.configurator-step-dot {
  height: 1px;
  flex: 1;
  background: rgba(255, 255, 255, 0.16);
}

.configurator-step-dot.is-done { background: #d8c199; }

.configurator-step { display: none; }
.configurator-step.is-active { display: block; }

.capacity {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 28px;
  margin-bottom: 28px;
}

.capacity-label {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.capacity-options { display: flex; gap: 24px; }

.cap-btn {
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 0 0 4px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.cap-btn.is-active { color: #fff; border-color: #d8c199; }

.tier-cta {
  display: inline-block;
  margin-top: 22px;
  padding: 12px 26px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ivory);
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.tier-cta:hover {
  background: var(--ivory);
  color: #14100e;
  border-color: var(--ivory);
}

.tier-cta--flagship {
  border-color: rgba(216, 193, 153, 0.5);
  color: #ecd9b4;
}

.tier-cta--flagship:hover {
  background: #d8c199;
  border-color: #d8c199;
  color: #14100e;
}

.agenda-section { margin-top: 22px; }

.agenda-num {
  font-family: var(--serif);
  font-size: 0.8rem;
  color: rgba(216, 193, 153, 0.7);
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.agenda-title {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 500;
  color: #fff;
  margin-bottom: 12px;
}

.travel-slider {
  position: relative;
  display: flex;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  overflow: hidden;
  height: 60px;
  margin-bottom: 12px;
}

.travel-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: rgba(216, 193, 153, 0.12);
  border: 1px solid rgba(216, 193, 153, 0.45);
  transition: left 0.3s var(--ease);
  pointer-events: none;
}

.travel-thumb.is-right { left: 50%; }

.travel-opt {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  color: rgba(255, 255, 255, 0.55);
  -webkit-appearance: none;
  appearance: none;
}

.travel-opt.is-active { color: #fff; }

.travel-opt-label { font-size: 0.88rem; }

.travel-opt-badge {
  font-size: 0.6rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 2px 8px;
  border-radius: 999px;
}

.travel-opt.is-active .travel-opt-badge,
.travel-opt-badge--paid {
  color: #d8c199;
  border-color: #d8c199;
}

.travel-desc {
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
}

.tier-list--items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tier-list--items li {
  display: grid;
  grid-template-columns: 14px 190px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 7px 0;
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .tier-list--items li {
    grid-template-columns: 14px 1fr;
  }

  .tier-list--items li strong,
  .tier-list--items li span {
    grid-column: 2;
  }
}

.tier-list--items li::before {
  content: '\2013';
  flex: none;
  color: rgba(255, 255, 255, 0.4);
}

.tier-list--items.has-plus li:not(.base)::before {
  content: '+';
  color: #d8c199;
}

.tier-list--items li strong {
  font-weight: 500;
  color: #fff;
}

.tier-list--items li span {
  color: rgba(255, 255, 255, 0.6);
}

.category { margin-bottom: 26px; }

.category-label {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #d8c199;
  margin-bottom: 10px;
}

.closing-note {
  font-family: var(--sans);
  font-size: 0.86rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 6px;
  max-width: 52ch;
}

/* Membership panel: full-width filled CTA, matching the Golf Department
   mockup. The aligned two-column list layout above now applies site-wide. */
#membership-panel .panel-cta {
  display: block;
  width: 100%;
  margin-top: 32px;
  padding: 16px;
  border-radius: 2px;
  border: 1px solid #d8c199;
  background: #d8c199;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: none;
  color: #14100e;
  text-align: center;
}

#membership-panel .panel-cta:hover {
  opacity: 0.92;
  background: #d8c199;
  color: #14100e;
}

.back-link {
  display: inline-block;
  margin-bottom: 24px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.3s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.back-link:hover { color: #fff; }

.summary-card {
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 20px 22px;
  margin-bottom: 30px;
}

.summary-card .tier-baseline-label { margin-bottom: 12px; }

.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  font-family: var(--sans);
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.6);
}

.summary-row strong { color: #fff; font-weight: 500; text-align: right; }

button.panel-cta,
button.cta-button,
button.nav-cta,
button.story-link {
  cursor: pointer;
  font-family: var(--sans);
  -webkit-appearance: none;
  appearance: none;
}

button.nav-cta {
  background: none;
  color: inherit;
  font-size: 0.8rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

/* ---- Contact drawer ---- */
.panel--right {
  left: auto;
  right: 0;
  background: #111827;
  transform: translateX(100%);
}

.panel--right.is-open { transform: translateX(0); }

/* Compact centred pop-out, used for the three "Learn more" intro cards
   instead of the big edge-anchored drawer: a small, self-contained box
   that fades and scales in over the page rather than sliding in from
   an edge. */
.panel--compact {
  top: 50%;
  left: 50%;
  right: auto;
  height: auto;
  max-height: 84vh;
  width: min(90vw, 520px);
  border-radius: 3px;
  background:
    radial-gradient(130% 90% at 12% -10%, rgba(216, 172, 118, 0.22), transparent 55%),
    radial-gradient(90% 70% at 100% 115%, rgba(107, 29, 42, 0.28), transparent 60%),
    linear-gradient(155deg, #5a4128 0%, #3c2b19 42%, #241a11 78%, #1a130d 100%);
  transform: translate(-50%, -46%) scale(0.97);
  opacity: 0;
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}

.panel--compact.is-open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.panel--compact .panel-inner { padding: 48px 44px 44px; }

/* The 190px label column in .tier-list--items assumes the width of the
   big edge drawers; inside this much narrower box it leaves almost no
   room for the description and everything wraps hard. Stack label
   above description instead, the same layout the list already falls
   back to on narrow mobile screens. */
.panel--compact .tier-list--items li {
  grid-template-columns: 14px 1fr;
}

.panel--compact .tier-list--items li strong,
.panel--compact .tier-list--items li span {
  grid-column: 2;
}

.enquiry { margin-top: 34px; }

.field-group {
  border: none;
  padding: 0;
  margin-bottom: 28px;
}

.field-legend {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 14px;
}

.topic-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.topic-pill {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  padding: 11px 20px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.8);
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.topic-pill:hover { border-color: rgba(255, 255, 255, 0.5); color: #fff; }

.topic-pill[aria-checked="true"] {
  background: #d8c199;
  border-color: #d8c199;
  color: #14120f;
  font-weight: 500;
}

.field-rows {
  display: grid;
  gap: 18px;
  margin-bottom: 28px;
}

.field span {
  display: block;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 8px;
}

.field span em {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.35);
}

.field input,
.field textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  padding: 13px 15px;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: #fff;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.field textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.6;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: #d8c199;
  background: rgba(255, 255, 255, 0.07);
}

.field input:invalid:not(:placeholder-shown) { border-color: rgba(214, 120, 120, 0.6); }

.radio-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 0;
  cursor: pointer;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.radio-row input { margin-top: 4px; accent-color: #d8c199; }

.radio-row span {
  font-family: var(--sans);
  font-size: 0.86rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
}

.radio-row strong {
  display: block;
  font-weight: 500;
  color: #fff;
}

.enquiry-submit {
  width: 100%;
  background: #d8c199;
  border: 1px solid #d8c199;
  border-radius: 999px;
  padding: 16px 32px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #14120f;
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.enquiry-submit:hover { background: #ecd9b4; border-color: #ecd9b4; }
.enquiry-submit .arrow { margin-left: 8px; }

.enquiry-status {
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 0.84rem;
  line-height: 1.6;
  color: #d8c199;
  min-height: 1.4em;
}

/* ---- Enquiry success state ---- */
.enquiry-success {
  margin-top: 34px;
  padding: 48px 8px 8px;
  text-align: center;
  animation: heroRise 0.7s var(--ease) forwards;
}

.enquiry-success-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 22px;
  border-radius: 50%;
  color: #7ba98a;
  border: 1px solid rgba(123, 169, 138, 0.4);
  background: rgba(123, 169, 138, 0.08);
}

.enquiry-success-tick svg { width: 28px; height: 28px; }

.enquiry-success-title {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: #fff;
}

.enquiry-success-sub {
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
}

.enquiry-again {
  display: inline-block;
  margin-top: 28px;
  padding: 13px 30px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  transition: border-color 0.35s var(--ease), color 0.35s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.enquiry-again:hover {
  opacity: 1;
  border-color: #d8c199;
  color: #d8c199;
}

.enquiry-direct {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
}

.enquiry-direct a {
  color: #d8c199;
  border-bottom: 1px solid rgba(216, 193, 153, 0.4);
}

.enquiry-direct a:hover { opacity: 1; border-bottom-color: #d8c199; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  /* --- Navigation: hamburger --- */
  .navbar { padding: 16px 20px; }
  .navbar.is-stuck { padding: 12px 20px; }
  .navbar .logo img { height: 36px; }
  .nav-burger { display: flex; }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: rgba(17, 16, 14, 0.97);
    backdrop-filter: blur(10px);
    padding: 0 24px;
    max-height: 0;
    overflow: hidden;
    font-size: 0.78rem;
    transition: max-height 0.4s var(--ease), padding 0.4s var(--ease);
  }

  .navbar.nav-open .nav-links {
    max-height: 70vh;
    padding: 8px 24px 24px;
  }

  .nav-links li { width: 100%; }

  .nav-links a {
    display: block;
    padding: 15px 0;
    color: #fff !important;
    text-shadow: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .nav-links .nav-cta {
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    margin-top: 16px;
    padding: 13px 24px;
    text-align: center;
  }

  /* --- Hero: keep the banners inside the screen --- */
  .hero-content { padding: 0 20px 4vh; }
  .hero-copy { margin-bottom: 28px; }
  .hero-headline { min-height: 210px; }
  .hero-sub { margin-top: 16px; }
  /* On desktop this fades to a low, subtle 0.3 opacity and only
     reaches full brightness on :hover, but touch devices have no
     hover state, so on mobile it's stuck permanently faint against
     a dark photo. Skip the animation and just show it clearly. */
  .hero-proof {
    margin-top: 18px;
    max-width: none;
    animation: none;
    opacity: 1;
    filter: none;
  }
  .hero-proof-label { color: #c7c7c7; }
  .hero-proof img { filter: brightness(0) invert(0.78); }
  .hero-proof-label { margin-bottom: 12px; letter-spacing: 2.2px; }
  .hero-proof-track { gap: 30px; animation-duration: 13s; }
  .hero-proof img { height: 24px; }

  /* --- Logo strip: allow wrapping so it never overflows --- */
  .logo-row { flex-wrap: wrap; gap: 4px 10px; }
  .card-grid { grid-template-columns: 1fr; padding: 0 24px; }
  .card { border-left: none; border-top: 1px solid rgba(32,29,27,0.14); padding: 28px 0; }
  .card-lead, .card-price { min-height: 0; }
  .card h3, .h3-fit { white-space: normal; font-size: 1.5rem !important; }
  .showcase-link, .card-more { padding-bottom: 12px; }
  .proof { padding: 64px 24px 68px; }
  .proof-logos { margin-bottom: 48px; }
  .logo-row { gap: 4px 14px; }
  .logo-row img { height: 30px; }
  .endorsement-card { padding: 36px 24px 30px; }
  .showcase--photo-new .partner-lockup { margin-top: 32px; }
  .card:first-child { border-top: none; }
  .card-tab { left: 0; }
  .section { padding: 72px 24px; }
  .showcase,
  .story,
  #faq {
    min-height: 100vh;
    min-height: 100svh;
  }
  .showcase { padding: 56px 24px 72px; }
  .showcase-grid,
  .showcase--right .showcase-grid { grid-template-columns: 1fr; gap: 36px; }

  /* These three sections were centering their copy vertically within
     the full-height mobile section, which on shorter copy left it
     drifting down toward the middle of the screen. Pin it to the top
     third instead. */
  #experiences .showcase-grid,
  #memberships .showcase-grid,
  #women .showcase-grid {
    align-items: start;
    align-content: start;
  }
  .showcase--right .showcase-figure { order: 2; }
  .showcase--right .showcase-copy { order: 1; text-align: left; }
  .showcase--right .showcase-copy p { margin-left: 0; }
  .showcase-copy p { max-width: none; }
  .showcase-figure { max-width: 520px; margin: 0 auto; }
  .showcase-foot { margin-left: 0; }
  .new-steps { grid-template-columns: 1fr; gap: 22px; }
  .showcase-grid--split { grid-template-columns: 1fr !important; gap: 44px; }
  .pathway { border-left: none; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.16); padding-top: 32px; }
  .panel { width: 100vw; }
  .panel-inner { padding: 56px 24px 64px; }
  .panel--compact { width: min(92vw, 440px); }
  .panel--compact .panel-inner { padding: 40px 26px 34px; }
  .topic-pill { font-size: 0.74rem; padding: 11px 16px; }
  .enquiry-submit { padding: 17px 24px; }
  .panel-head h2 { font-size: 1.9rem; }
  .tier h3 { font-size: 1.55rem; }
  .partner-lockup { flex-direction: column; align-items: flex-start; gap: 10px; }
  #new .partner-lockup { flex-direction: row; align-items: center; gap: 10px; }
  .story { padding: 72px 24px 80px; }
  #the-name { padding-top: 64px; }
  .mission-hero-title { max-width: none; }
  .story-grid { grid-template-columns: 1fr; gap: 40px; margin-top: 80px; }
  .story-portrait { margin-top: 0; }
  .story-portrait img, .story-portrait figcaption { max-width: 320px; }
  .footer { grid-template-columns: 1fr; justify-items: center; gap: 12px; text-align: center; }
  .footer .logo, .footer-legal, .footer-copyright { justify-self: center; }
  .footer-copyright { text-align: center; }
}