/* ============================================
   Tommy's Golf Lounge — Design Tokens
   Modeled on the original tommysgolf.com look:
   near-black navy page, slightly lighter navy
   cards with a faint green edge, green + orange
   gradient accents, white header and footer,
   forest-green logo. Colors sampled from
   screenshots of the original site.
   Type: Inter (one family, weight does the work).
   ============================================ */

:root {
  --bg: #030712;
  --surface: #0b111e;
  --surface-2: #0e1523;
  --border: rgba(34, 197, 94, 0.18);
  --border-strong: rgba(34, 197, 94, 0.4);

  --green: #16a34a;
  --green-2: #059669;
  --green-bright: #22c55e;
  --green-text: #86efac;
  --orange: #ea580c;
  --orange-2: #d97706;
  --orange-bright: #f97316;
  --rust: #9a3412;
  --rust-2: #b45309;

  --text: #ffffff;
  --text-soft: #cbd5e1;
  --muted: #94a3b8;
  --logo-green: #345c2c;

  --ink: #1f2937;
  --ink-soft: #4b5563;
  --line-light: #e5e7eb;

  --font: "Inter", "Helvetica Neue", Arial, sans-serif;
  --max: 1320px;
  --pad: clamp(20px, 4vw, 48px);
  --radius: 14px;
  --radius-sm: 10px;

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --dur-ui: 180ms;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 76px; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-soft);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font);
  color: var(--text);
  line-height: 1.15;
  margin: 0 0 0.5em;
  font-weight: 800;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: 0; }

p { margin: 0 0 1em; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

section { padding: clamp(64px, 9vw, 104px) 0; }

.ico {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

:focus-visible { outline: 2px solid var(--green-bright); outline-offset: 3px; }
/* --green-bright is under 3:1 on white, so the white header and footer use the deeper green */
.site-header :focus-visible,
.site-footer :focus-visible { outline-color: var(--green); }

/* Skip link, the first Tab stop on every page. Parked just above the viewport
   (still in the accessibility tree) until it has focus, then slides down into
   the top-left corner over the sticky header. No drop shadow: parked, its blur
   would reach into the header. It sits over the white header, so the deeper
   green ring. */
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 0.8em 1.5em;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--green), var(--green-2));
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(calc(-100% - 20px));
  transition: transform var(--dur-ui) var(--ease-out);
}
.skip-link:focus { transform: none; }
.skip-link:focus-visible { outline-color: var(--green); }
/* main takes focus from the skip link (tabindex="-1") but isn't a control */
#main:focus { outline: none; }

/* Read by screen readers, not shown. Used for the " (opens in a new tab)" note
   on links that open Birdie (see NEW_TAB_CUE in main.js). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Reduced motion lives at the end of this file, so it overrides the component rules below */

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.8em 1.5em;
  border-radius: var(--radius-sm);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  transition: transform var(--dur-ui) var(--ease-out), filter var(--dur-ui) var(--ease-out);
}
/* Hover only where a real pointer hovers, so the lift doesn't stick after a tap on phones */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); filter: brightness(1.07); }
}
.btn:active { transform: scale(.97); transition-duration: 100ms; }
.btn .ico { width: 16px; height: 16px; }

.btn-green {
  background: linear-gradient(90deg, var(--green), var(--green-2));
  box-shadow: 0 8px 24px rgba(22, 163, 74, 0.35);
}
.btn-orange {
  background: linear-gradient(90deg, var(--orange), var(--orange-2));
  box-shadow: 0 8px 24px rgba(234, 88, 12, 0.35);
}
.btn-rust {
  background: linear-gradient(90deg, var(--rust), var(--rust-2));
}
.btn-sm { padding: 0.6em 1.2em; font-size: 0.9rem; }
.btn-block { width: 100%; }

/* ---------- Header / Nav (white bar, like the original) ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line-light);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 72px;
}
.brand { margin-right: auto; display: block; }
.brand-logo { height: 44px; width: auto; object-fit: contain; }

.nav-links {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0.55em 1em;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease, color 0.15s ease, transform var(--dur-ui) var(--ease-out);
}
.nav-links a .ico { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { background: #f3f4f6; color: var(--ink); }
}
.nav-links a:active { transform: scale(.97); }
.nav-links a[aria-current="page"] {
  background: linear-gradient(90deg, var(--green), var(--green-2));
  color: #fff;
  box-shadow: 0 6px 16px rgba(22, 163, 74, 0.3);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
  padding: 6px;
  transition: transform var(--dur-ui) var(--ease-out);
}
.nav-toggle .ico { width: 26px; height: 26px; }
.nav-toggle:active { transform: scale(.94); }

/* Mobile menu. The panel stays rendered and fades down 8px from under the
   header. Closed, it is hidden and untappable; visibility flips at the end of
   the close and at the start of the open, so closed links can't take focus.
   The toggle comes before <nav> in the markup (Tab goes toggle, menu, Sign Up);
   order: 1 keeps it at the right edge. See initNavToggle in main.js. */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; order: 1; }
  .nav-links {
    flex-direction: column;
    gap: 4px;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: #fff;
    padding: 10px var(--pad) 18px;
    border-bottom: 1px solid var(--line-light);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.12);
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out), visibility 0s linear 150ms;
  }
  .site-header.nav-open .nav-links {
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s;
  }
  /* Set for a moment when the viewport crosses 900px, so the panel snaps closed instead of fading */
  .site-header.nav-instant .nav-links { transition: none; }
  .nav-links a { padding: 0.8em 1em; }
  .site-header .brand-logo { height: 34px; }
  .site-header .btn-sm { white-space: nowrap; }
}

/* ---------- Page heroes (photo + dark fade into the page) ---------- */

.page-hero {
  position: relative;
  text-align: center;
  padding: clamp(80px, 11vw, 130px) 0 clamp(90px, 12vw, 150px);
  background-color: var(--bg);
  background-image:
    linear-gradient(180deg, rgba(3, 7, 18, 0.55) 0%, rgba(3, 7, 18, 0.72) 60%, var(--bg) 100%),
    var(--hero);
  background-size: cover;
  background-position: center;
}
.page-hero.hero-home {
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-hero.hero-home .wrap { width: 100%; }
.page-hero h1 { margin: 0.35em 0 0.3em; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45); }
/* Home hero slideshow: stacked photos that crossfade (see initHeroSlides in main.js).
   pan-y: the browser keeps vertical scrolling and pinch zoom, and leaves horizontal
   swipes to the slideshow's touch handler. */
.page-hero.hero-slides { background-image: none; overflow: hidden; touch-action: pan-y pinch-zoom; }
.hero-slides .slides { position: absolute; inset: 0; z-index: 0; }
.hero-slides .slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-slides .slide.is-active { opacity: 1; }
/* Drops a covered slide out instantly once the incoming photo is fully in */
.hero-slides .slide.is-snap { transition: none; }
/* z-index keeps the overlay above the slides, which main.js stacks at 1..n */
.hero-slides .slides::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  background: linear-gradient(180deg, rgba(3, 7, 18, 0.55) 0%, rgba(3, 7, 18, 0.72) 60%, var(--bg) 100%);
}
.hero-slides .wrap { position: relative; z-index: 1; }
/* Each dot is a 44px-tall, 24px-wide tap target around a 10px pill: 17px of
   transparent padding above and below, 7px at the sides. The pill is the
   ::before, filling the content box. (Clipping the button's own background
   to the content box squared off the 10px dots: Chrome drew squares, other
   browsers filled the whole tap target.) The -3px side margins keep the pills 8px apart, so
   neighboring targets overlap by 6px. The wrapper's 27px top margin and -17px
   bottom margin offset the taller padding, so the pills sit exactly where they
   did with the old 24px targets and the hero layout doesn't move. */
.slide-dots { display: flex; justify-content: center; margin: 27px 0 -17px; }
.slide-dots button {
  box-sizing: content-box;
  width: 10px;
  height: 10px;
  padding: 17px 7px;
  margin: 0 -3px;
  border: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition: width 250ms var(--ease-out);
}
.slide-dots button::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background-color: rgba(34, 197, 94, 0.45);
  transition: background-color 0.3s ease;
}
.slide-dots button[aria-current="true"] { width: 34px; }
/* 15px / 5px corners make the active dot an oval with soft points, like a
   cup seen at an angle. It's the shape the old clipped-background dots
   happened to draw; Regan preferred it to a flat-ended pill. */
.slide-dots button[aria-current="true"]::before { background-color: var(--green-bright); border-radius: 15px / 5px; }
/* The active dot is a putting green: a dark cup in the middle and a
   yellow flag (like the real ones on the lounge's green) planted in it.
   The flag sits in the button's top padding, so the tap target and layout
   don't change. Its pole bottom lands on the cup, 22px down (17px padding
   plus half the 10px pill). It fades in once the pill has grown. Cup and
   flag are small SVGs on whole-pixel coordinates (the pole is exactly 1px
   at x = 50% of the button, an integer), so they stay crisp at 1x. */
.slide-dots button { position: relative; }
.slide-dots button[aria-current="true"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'%3E%3Cellipse cx='3' cy='2' rx='3' ry='1.7' fill='%230b1a10'/%3E%3C/svg%3E");
  background-size: 6px 4px;
  background-position: center;
  background-repeat: no-repeat;
}
.slide-dots button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  width: 9px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 16'%3E%3Cpath d='M0 0h1v16H0z' fill='%23f8fafc'/%3E%3Cpath d='M1 0l8 2.5L1 5z' fill='%23facc15'/%3E%3C/svg%3E") 0 0 / 9px 16px no-repeat;
  opacity: 0;
  transform: scaleY(0.4);
  transform-origin: 0.5px 100%;
  transition: opacity 150ms ease, transform 150ms ease;
  pointer-events: none;
}
.slide-dots button[aria-current="true"]::after {
  opacity: 1;
  transform: none;
  transition: opacity 200ms ease 180ms, transform 250ms var(--ease-out) 180ms;
}
@media (hover: hover) and (pointer: fine) {
  .slide-dots button:not([aria-current="true"]):hover::before { background-color: rgba(34, 197, 94, 0.7); }
}
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 1;
  width: 24px;
  height: 38px;
  margin-left: -12px;
  border: 2px solid rgba(34, 197, 94, 0.7);
  border-radius: 14px;
  transition: opacity 300ms var(--ease-out);
}
.scroll-cue.is-hidden { opacity: 0; } /* set once by initScrollCue in main.js */
.scroll-cue::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 7px;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--green-bright);
  animation: scroll-cue 1.8s ease-in-out infinite;
}
@keyframes scroll-cue {
  0% { opacity: 0; transform: translateY(0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(12px); }
}

/* Logo as the home hero headline. The file's native width is 1058px, so the
   460px cap renders about 2x sharp on retina; raise the cap if it needs to grow. */
.page-hero .hero-logo-wrap { margin: 0.6em 0 0.7em; line-height: 0; }
.hero-logo {
  display: block;
  width: min(460px, 82vw);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.5));
}

.hero-sub {
  color: #d1fae5;
  opacity: 0.9;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  max-width: 60ch;
  margin: 0 auto;
}
.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2em;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0.35em 1em;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: rgba(22, 163, 74, 0.16);
  color: #bbf7d0;
  font-size: 0.8rem;
  font-weight: 500;
}
.pill .ico { width: 13px; height: 13px; }

/* ---------- Section headers ---------- */

.section-head { text-align: center; margin: 0 auto 48px; max-width: 720px; }
.section-head .pill { margin-bottom: 16px; }
.section-head h2 { margin-bottom: 0.3em; }
.section-head .sub { color: var(--green-text); opacity: 0.85; margin: 0; }

.subhead {
  text-align: center;
  font-size: 1.15rem;
  margin: 0 0 22px;
}

/* ---------- Cards ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 26px;
}
.card h3 { margin: 0.9em 0 0.5em; }
.card p { color: var(--muted); font-size: 0.93rem; margin: 0; }
.card.card-orange { border-color: rgba(249, 115, 22, 0.22); }
/* Long-form reading text (About founder story). Card defaults are for short blurbs. */
.card.story p { color: var(--text-soft); font-size: 1.08rem; line-height: 1.75; margin: 0 0 1.1em; }

/* ---------- About: founder story with photos, and opening day ----------
   Story card spans the full .wrap, so its edges line up with the Values grid.
   Mobile first: one column (family photo, text, pair) below 82em, two
   columns from 82em (1312px at default text size). In two columns the family
   photo stretches to the text height; below 1305px (default text) its box
   drops under 0.6 wide-to-tall and cover starts trimming people off the
   sides, so 82em is that width rounded up. The breakpoint is in em on
   purpose: with a larger default text size the text column gets taller,
   which would stretch the family photo too thin, so those readers get the
   single column. .story-pair is capped at 460px at every width:
   (460 - 14 gap) / 2 = 223px per photo. Both pair photos are 600x800, so
   that's about 2.7x on a retina screen. */
.story-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "lead" "text" "pair";
  gap: clamp(24px, 5vw, 36px);
  align-items: start;
  padding: clamp(28px, 5vw, 56px);
}
/* .story-photos wraps the family photo and the pair so they form one column
   in the two-column layout. In the single column it is display: contents, so
   the family photo and the pair are direct grid items and the order stays
   family photo, text, pair. */
.story-photos { display: contents; }
.story-lead { grid-area: lead; max-width: 520px; justify-self: center; }
/* Reading width, single column only: 39.25rem (628px at default text) is
   about 74 characters of story text per line. It sits just above the text
   width at 768px (627.8px), so 768px and below are unaffected; going
   narrower would change the phone and small-tablet layout. */
.story-text { grid-area: text; justify-self: center; width: 100%; max-width: 39.25rem; }
.story-text h2 { margin-bottom: 0.9em; }
.story-pair {
  grid-area: pair;
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 460px;
}
.story-lead,
.story-pair img,
.opening-photos img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
/* about-family.jpg is the full 2:3 frame; the box is 4:5 or narrower, so
   cover trims it, anchored at the bottom to keep the family in view (extra
   height shows more lake, trees and sky above them). */
.story-lead { aspect-ratio: 4 / 5; object-position: 50% 100%; }
.story-pair img { aspect-ratio: 3 / 4; }
.opening-photos img { aspect-ratio: 1 / 1; }

/* Paragraph 4's opening line, pulled out as its own big line. It isn't
   repeated in the paragraph, so screen readers read it normally. */
.card.story .pull-quote {
  margin: 1.4em 0;
  padding: 0.1em 0 0.1em 0.9em;
  border-left: 4px solid var(--green-bright);
  color: var(--text);
  font-size: clamp(1.3rem, 2.2vw, 1.55rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* Two columns: photos left, text right. The rows stretch, so the photo
   column is exactly as tall as the text column. The pair keeps its size at
   the bottom and the family photo takes the rest of the height (flex-grow).
   Its 4:5 aspect-ratio sets the flex base size, and flex-shrink: 0 keeps it
   from ever getting shorter than 4:5; if the text is shorter than that, the
   column sets the row height instead. The top of the family photo lines up
   with the top of the heading, and the bottom of the pair with the bottom
   of the last paragraph. The column scrolls with the page; nothing here is
   sticky. */
@media (min-width: 82em) {
  .story-split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "photos text";
    gap: clamp(28px, 4vw, 56px);
    align-items: stretch;
  }
  .story-photos {
    grid-area: photos;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .story-lead { flex: 1 0 auto; max-width: none; }
  .story-text { max-width: none; }
}

/* Opening day: native <video>, not .video-embed (initVideoEmbeds would treat
   it as an empty YouTube slot). preload="none" means no bytes of the mp4
   load until someone presses play; the poster stands in until then. */
.opening-media { max-width: 860px; margin: 0 auto; }
.opening-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #000;
}
.opening-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.icon-tile {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--green-bright), var(--green-2));
  flex-shrink: 0; /* stays square next to long text in flex rows (amenities, contact tiles) */
}
.icon-tile .ico { width: 24px; height: 24px; }
.icon-tile.orange { background: linear-gradient(135deg, var(--orange-bright), var(--orange)); }
.icon-tile.sm { width: 38px; height: 38px; }
.icon-tile.sm .ico { width: 19px; height: 19px; }

.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

.centered { text-align: center; }
.centered .icon-tile { margin: 0 auto; }

@media (max-width: 960px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .grid-4, .grid-2 { grid-template-columns: 1fr; }
}

/* ---------- Membership ---------- */

.plan-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 24px 26px;
  display: flex;
  flex-direction: column;
  text-align: center;
  position: relative;
}
.plan-card.featured {
  border-color: rgba(249, 115, 22, 0.7);
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.25), 0 20px 50px rgba(234, 88, 12, 0.18);
}
.plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--orange), var(--orange-2));
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.plan-name { color: var(--text); font-weight: 700; font-size: 1.15rem; margin: 0; }
.plan-note {
  color: var(--green-text);
  opacity: 0.85;
  font-size: 0.8rem;
  line-height: 1.4;
  min-height: 2.8em; /* room for two lines, so prices and lists line up across cards */
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-wrap: balance;
}
.plan-price {
  color: var(--orange-bright);
  font-weight: 800;
  font-size: 2.3rem;
  letter-spacing: -0.02em;
  margin: 12px 0 0;
  line-height: 1.1;
}
.plan-per { color: var(--muted); font-size: 0.8rem; margin: 2px 0 8px; }
.plan-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  text-align: left;
  flex-grow: 1;
}
.plan-list li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 0.86rem;
  color: var(--text-soft);
  padding: 5px 0;
}
.plan-list .ico { width: 16px; height: 16px; color: var(--green-bright); margin-top: 3px; }
.corporate-block { margin-top: 64px; }

.pass-strip {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 22px 26px;
}
.pass-copy { color: var(--muted); font-size: 0.9rem; margin: 4px 0 0; max-width: 62ch; }
/* When price and button don't fit side by side, the button drops under the price
   and grows to the full width of the strip. Beside the price there's no free space
   to grow into (.pass-buy is only as wide as its content), so it keeps its size. */
.pass-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.pass-buy .plan-price { margin: 0; }
.pass-buy .btn { flex-grow: 1; }

/* ---------- Facility gallery ---------- */

.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gallery figure {
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  isolation: isolate; /* keeps Safari clipping the rounded corners while the img scales */
}
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .gallery figure:hover img { transform: scale(1.04); }
}
/* Each photo is a button that opens the photo viewer. It fills the figure, so the
   square crop and hover zoom above are unchanged. */
.gallery-btn {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
@media (hover: hover) and (pointer: fine) {
  .gallery-btn { cursor: zoom-in; }
}
/* The figure clips its overflow, which would cut off the button's own focus ring,
   so the ring is drawn on the figure instead. Without :has, the button keeps its
   own (clipped) ring. */
@supports selector(:has(*)) {
  .gallery-btn:focus-visible { outline: none; }
  .gallery figure:has(.gallery-btn:focus-visible) { outline: 2px solid var(--green-bright); outline-offset: 3px; }
}
@media (max-width: 800px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Photo viewer (Home gallery) ---------- */

/* A modal <dialog> that covers the screen: close button on top, the photo in the
   middle (whole photo, as large as fits), prev / counter / next underneath. The
   same layout at every width. See initGalleryViewer in main.js.
   Motion: .is-open fades it in (220ms) and grows the photo from .97; removing it
   fades out (160ms), with .is-closing holding the photo at full size so closing
   is a plain fade. The JS doesn't wait on these transitions, so the viewer opens
   and closes the same without them. */
.viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
           max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  overflow: hidden;
  background: rgba(3, 7, 18, 0.92); /* --bg at 92% */
  color: var(--text);
  opacity: 0;
  transition: opacity 160ms var(--ease-out);
}
.viewer[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
}
.viewer::backdrop { background: transparent; }
.viewer.is-open { opacity: 1; transition-duration: 220ms; }

.viewer-close { justify-self: end; }

/* Both photos share one grid cell and crossfade. max-width/max-height against
   the cell keep the whole photo visible at its own shape, so the rounded corners
   sit on the photo, not on an empty box around it. */
.viewer-stage {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  min-height: 0;
  transform: scale(.97);
  transition: transform 220ms var(--ease-out);
}
.viewer.is-open .viewer-stage,
.viewer.is-closing .viewer-stage { transform: none; }
.viewer-img {
  grid-area: 1 / 1;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-sm);
  opacity: 0;
  pointer-events: none; /* the hidden photo mustn't catch taps meant for the backdrop */
  transition: opacity 180ms var(--ease-out);
  -webkit-user-select: none;
  user-select: none;
}
.viewer-img.is-current { opacity: 1; pointer-events: auto; }

.viewer-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.viewer-count {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums; /* the arrows don't shift as the digits change */
}
.viewer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(11, 17, 30, 0.72); /* --surface, translucent */
  color: #fff;
  cursor: pointer;
  transition: transform var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out);
}
.viewer-btn .ico { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .viewer-btn:hover { background-color: rgba(14, 21, 35, 0.95); border-color: var(--border-strong); }
}
.viewer-btn:active { transform: scale(.97); transition-duration: 100ms; }

/* ---------- Split card (Why Golf With Us) ---------- */

.split-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: clamp(28px, 4vw, 48px);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}
.split-card h2 { margin-bottom: 0.35em; }
.split-card .lede { color: var(--muted); margin-bottom: 24px; }
.split-photo {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--border);
}
.split-photo img { width: 100%; height: 100%; object-fit: cover; }

.check-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-bottom: 12px;
}
.check-card h3 { display: flex; align-items: center; gap: 9px; font-size: 0.98rem; margin: 0 0 6px; }
.check-card h3 .ico { color: var(--green-bright); width: 17px; height: 17px; }
.check-card p { color: var(--muted); font-size: 0.88rem; margin: 0 0 0 26px; }

@media (max-width: 860px) {
  .split-card { grid-template-columns: 1fr; }
  .split-photo { aspect-ratio: 4 / 3; }
}

/* ---------- Video embed (lite, click-to-load) ---------- */

.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(155deg, #0e1523, #030712);
  border: 1px solid var(--border);
  cursor: pointer;
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-embed .play-cue {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 20px;
}
.video-embed .play-circle {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green-bright), var(--green-2));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(22, 163, 74, 0.4);
}
.video-embed .play-circle svg { width: 22px; height: 22px; fill: #fff; margin-left: 3px; }
.video-embed.is-placeholder { cursor: default; }
.video-embed.is-placeholder .play-circle { display: none; }
.video-embed .caption { font-size: 0.9rem; color: var(--muted); }

/* ---------- Photo CTA (Ready to Tee Off) ---------- */

.cta-photo {
  text-align: center;
  background-image:
    linear-gradient(180deg, rgba(3, 7, 18, 0.72), rgba(3, 7, 18, 0.72)),
    var(--hero);
  background-size: cover;
  background-position: center;
}
.cta-photo p { color: #d1fae5; opacity: 0.9; max-width: 56ch; margin: 0 auto; }

/* ---------- Gradient CTA card (green into rust) ---------- */

.cta-card {
  text-align: center;
  border-radius: 18px;
  border: 1px solid var(--border);
  padding: clamp(32px, 5vw, 52px) clamp(22px, 4vw, 48px);
  background: linear-gradient(135deg, #0f2a1c 0%, #1f2418 50%, #3a1b13 100%);
  max-width: 860px;
  margin: 0 auto;
}
.cta-card p { color: var(--text-soft); max-width: 58ch; margin: 0 auto; }

/* ---------- Private Events ---------- */

.rate-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 26px;
  text-align: center;
}
.rate-card h3 { margin: 0 0 0.4em; }
.rate-card .rate {
  color: var(--orange-bright);
  font-weight: 800;
  font-size: 1.9rem;
  letter-spacing: -0.02em;
  margin: 0;
}
.rate-card .rate span { display: block; color: var(--muted); font-size: 0.82rem; font-weight: 500; letter-spacing: 0; }
.rate-card p:last-child { color: var(--muted); font-size: 0.9rem; margin: 14px 0 0; }

.amenities-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: clamp(28px, 4vw, 48px);
}
.amenity {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  color: var(--text-soft);
  font-size: 0.92rem;
}
.unique-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px;
  margin-top: 40px;
  align-items: start;
}
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: 0.93rem; }
.check-list .ico { color: var(--green-bright); width: 17px; height: 17px; margin-top: 3px; }
.book-card {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 26px;
  background: linear-gradient(135deg, #0f2a1c 0%, #1f2418 55%, #3a1b13 100%);
}
.book-card h3 { font-size: 1.25rem; margin-bottom: 0.5em; }
.book-card p { color: var(--text-soft); font-size: 0.92rem; }
.book-card .btn + .btn { margin-top: 10px; }

@media (max-width: 860px) { .unique-grid { grid-template-columns: 1fr; } }

/* Sticky booking bar (Private Events, 900px and below). New element, not from
   the original site. Hidden until initStickyCta in main.js adds .is-visible:
   after the hero buttons scroll away, and until the Ready to Book card comes
   into view. Sits under the header (z-index 50), so the open menu covers it. */
.sticky-cta { display: none; }
@media (max-width: 900px) {
  .sticky-cta {
    display: flex;
    gap: 10px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 150ms var(--ease-out), opacity 150ms var(--ease-out), visibility 0s linear 150ms;
  }
  .sticky-cta.is-visible {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out), visibility 0s;
  }
  /* .btn-sm's type size and tighter sides keep "Book Your Event" on one line down to
     360px at default text size. With a larger text setting a label wraps to two
     centered lines and the bar grows, instead of spilling out of its button. */
  .sticky-cta .btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    font-size: 0.9rem;
    padding-left: 0.5em;
    padding-right: 0.5em;
    text-align: center;
  }
}
/* Below 360px there's no room for icon plus label, so the label wins */
@media (max-width: 359px) { .sticky-cta .btn .ico { display: none; } }

/* ---------- Contact ---------- */

/* minmax(0, 1fr), not 1fr: a plain 1fr column won't shrink below its longest
   unbreakable line, which pushed the page wider than a phone at larger text sizes */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.contact-form { display: grid; gap: 18px; }
.contact-form label {
  display: block;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.45em;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  font-family: var(--font);
  font-size: 0.95rem;
  color: var(--text);
  padding: 0.7em 0.9em;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: #64748b; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--green-bright);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .25);
}
.contact-form textarea { resize: vertical; min-height: 130px; }
.form-note { font-size: 0.82rem; color: var(--muted); margin: -4px 0 0; text-align: center; }

.info-tile {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  /* 12px on the right, not 18: nothing sits there except the end of a long value.
     It lets the email fit on one line down to 370px now that the contact grid
     column can't grow to make room. (It used to grow: into the right page margin
     at 356-373px, and past the screen edge below that.) */
  padding: 16px 12px 16px 18px;
  margin-top: 14px;
}
.info-tile small { display: block; color: var(--muted); font-size: 0.8rem; }
/* The email breaks after the @ (a <wbr> in the markup). break-word is only a last
   resort for a word wider than the whole tile; min-width: 0 lets it kick in
   instead of the text pushing out of the tile. */
.info-tile > div { min-width: 0; }
.info-tile strong { color: var(--text); font-weight: 700; overflow-wrap: break-word; }
/* No room for "tommysgolf.com" beside the icon: the icon goes on top. In em, so a
   larger text setting stacks the tiles at a wider screen. 22.2em is 355px at
   default text size (side by side from 356px up), 444px at 125%, 533px at 150%. */
@media (max-width: 22.2em) {
  .info-tile { flex-direction: column; align-items: flex-start; gap: 12px; }
}
/* All three tiles (Phone, Email, Location) are links as a whole, so the icon and
   label are tap targets too. At rest they look like plain tiles. */
a.info-tile {
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur-ui) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  a.info-tile:hover strong { color: var(--green-text); }
}
a.info-tile:active { transform: scale(.98); transition-duration: 100ms; }

.hours-card {
  margin-top: 28px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 26px 28px;
  background: linear-gradient(135deg, #102a1d 0%, #222419 50%, #3a1b13 100%);
}
.hours-card h3 { font-size: 1.3rem; margin: 0 0 0.6em; }
.hours-card .big { color: var(--green-text); font-size: 1.5rem; font-weight: 800; margin: 0; }
.hours-card p:last-child { color: var(--text-soft); font-size: 0.92rem; margin: 4px 0 0; }

.map-frame {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  margin-top: 28px;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; }

@media (max-width: 860px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Gradient bar + footer (white, like the original) ---------- */

.grad-bar {
  height: 72px;
  background: linear-gradient(90deg, #113625 0%, #2c2d1b 50%, #432212 100%);
}

.site-footer { background: #fff; color: var(--ink-soft); font-size: 0.92rem; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 32px;
  padding-top: 48px;
  padding-bottom: 36px;
}
.footer-logo { height: 60px; width: auto; margin-bottom: 18px; }
.site-footer h4 { color: var(--ink); font-size: 0.92rem; font-weight: 700; letter-spacing: 0; margin: 0 0 14px; }
.footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.footer-contact .ico { color: var(--green); width: 16px; height: 16px; margin-top: 3px; }
.footer-contact a { text-decoration: none; }
.footer-contact a:hover { color: var(--green); }
.footer-hours { color: var(--ink); font-weight: 700; font-size: 1.05rem; margin: 0; }
.footer-bottom {
  max-width: var(--max);
  margin: 0 auto;
  border-top: 1px solid var(--line-light);
  padding: 20px var(--pad);
  text-align: center;
  font-size: 0.85rem;
  color: #6b7280;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Reduced motion ----------
   Last in the file so it wins over the component rules above. Removes
   movement (translate, scale, width, looping), keeps short fades and
   color changes (200ms max), since those don't trigger motion sickness. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
  .scroll-cue { transition: none; }
  .skip-link { transition: none; }
  .scroll-cue::after { animation: none; opacity: 1; }

  .btn { transition: filter var(--dur-ui) var(--ease-out); }
  .btn:hover, .btn:active { transform: none; }
  a.info-tile { transition: none; }
  a.info-tile:active { transform: none; }
  .nav-links a { transition: background 0.15s ease, color 0.15s ease; }
  .nav-links a:active { transform: none; }
  .nav-toggle:active { transform: none; }
  .site-header .nav-links,
  .site-header.nav-open .nav-links { transform: none; }
  .site-header .nav-links { transition: opacity 150ms ease, visibility 0s linear 150ms; }
  .site-header.nav-open .nav-links { transition: opacity 150ms ease, visibility 0s; }
  .sticky-cta { transform: none; transition: opacity 150ms ease, visibility 0s linear 150ms; }
  .sticky-cta.is-visible { transform: none; transition: opacity 150ms ease, visibility 0s; }
  .gallery img { transition: none; }
  .gallery figure:hover img { transform: none; }
  /* Photo viewer: plain fades, no scale */
  .viewer, .viewer.is-open { transition-duration: 150ms; }
  .viewer-stage { transform: none; transition: none; }
  .viewer-img { transition-duration: 150ms; }
  .viewer-btn { transition: background-color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out); }
  .viewer-btn:active { transform: none; }
  .slide-dots button { transition: none; }
  .slide-dots button::before { transition: background-color 200ms ease; }
  .slide-dots button::after, .slide-dots button[aria-current="true"]::after { transform: none; transition: opacity 200ms ease; }
  .hero-slides .slide { transition-duration: 200ms; }
}