/* ═══════════════════════════════════════════════════════════════════════
   BRAND — palette, color combos, striped combos
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   Fieldhouse brand colors — shared by every page (2026 brand guidelines).

   HOW TO USE
   Put one combo class on a block to set its colors (background, primary, secondary):
       <section class="hero combo-fieldgreen">
   Everything inside the block (headline, text, labels, buttons, rules)
   takes its colors from that combo. To try a different look, change the
   number. For a striped block use one of the striped combos:
       <section class="testimonials combo-stripes-canvas">
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Palette */
  --field:        #355D32;   /* Field Green — primary */
  --turf:         #284439;   /* Turf Green */
  --rest-day:     #A6B19A;   /* Rest Day Green (sampled — the PDF prints Turf's hex for it) */
  --canvas:       #F0DFCE;
  --canvas-light: #F5E9DC;   /* lighter Canvas used in the tonal stripe (sampled) */
  --khaki:        #E2C09B;
  --leather:      #815C50;
  --red:          #DE3E26;   /* Scoreboard Red */
  --cream:        #F9F2E9;   /* page background used throughout the guidelines (sampled) */

  --stripe-w: 26px;          /* width of one stripe */
}

/* ─── COLOR COMBOS ───  for content blocks only (not the page, nav or footer)
   Rule: on a light background (cream or canvas) the green is always Turf Green.
   Named for their background color.
   --bg        block background
   --primary   headlines, text, buttons, long rules
   --secondary small labels and attributions (can equal --primary)
   --btn-bg, --btn-text  optional: button colors, when they differ from --primary on --bg
   --accent    the dash by a headline, text links, numbered labels, framing rules.
               Same as --primary in the standard combos; red in the "-redaccent" set.
   The PDF gives each combo two colors (bg + primary). Secondary and accent
   are our picks. PDF combo numbers are noted for reference. ─── */

.combo-cream                   { --bg: var(--cream);  --primary: var(--turf);     --secondary: var(--turf);     --accent: var(--turf);     }  /* the guidelines' own cream pages */
.combo-canvas        { --bg: var(--canvas); --primary: var(--turf);     --secondary: var(--turf);     --accent: var(--turf);     }
.combo-fieldgreen       { --bg: var(--field);  --primary: var(--canvas);   --secondary: var(--rest-day); --accent: var(--canvas);   }  /* PDF combo 5 */
.combo-turfgreen        { --bg: var(--turf);   --primary: var(--canvas);   --secondary: var(--rest-day); --accent: var(--canvas);   }  /* PDF combo 3 */

/* Red-accent set: the same combos with Scoreboard Red as the accent.
   Use one of these on a block that should have red dashes, links, numbers or framing rules. */
.combo-cream-redaccent             { --bg: var(--cream);  --primary: var(--turf);   --secondary: var(--turf);     --accent: var(--red); }
.combo-canvas-redaccent  { --bg: var(--canvas); --primary: var(--turf);   --secondary: var(--turf);     --accent: var(--red); }
.combo-fieldgreen-redaccent { --bg: var(--field);  --primary: var(--canvas); --secondary: var(--rest-day); --accent: var(--red); --btn-bg: var(--red); --btn-text: var(--canvas); }
.combo-turfgreen-redaccent  { --bg: var(--turf);   --primary: var(--canvas); --secondary: var(--rest-day); --accent: var(--red); --btn-bg: var(--red); --btn-text: var(--canvas); }

/* Hidden: the PDF's low-contrast combos. They can't hold readable text, so they
   are switched off. To bring one back, move it out of this comment and name it.
   PDF combo 1:  --bg: var(--turf);     --primary: var(--field);
   PDF combo 6:  --bg: var(--canvas);   --primary: var(--rest-day);
   PDF combo 8:  --bg: var(--rest-day); --primary: var(--red);
   PDF combo 9:  --bg: var(--turf);     --primary: var(--red);          */

[class*="combo-"] {
  background-color: var(--bg);
  color: var(--primary);
}

/* ─── STRIPED COMBOS ───  the three schemes on the PDF's Stripes page ───
   One class gives a block its stripes AND its colors. Named for the stripe colors.
   The two green-striped ones are too bold for text to sit on directly: put the
   content in an element with class "stripe-box", a solid panel in the combo's
   --bg color. The canvas one is tonal, so text can sit straight on it. ─── */

.combo-stripes-canvas                 { --stripe-a: var(--canvas-light); --stripe-b: var(--canvas);   --bg: var(--canvas); --primary: var(--turf);   --secondary: var(--turf);     --accent: var(--turf); }  /* no box needed */
.combo-stripes-fieldgreen-canvas      { --stripe-a: var(--field);        --stripe-b: var(--canvas);   --bg: var(--cream);  --primary: var(--turf);  --secondary: var(--turf);    --accent: var(--turf); }  /* cream box */
.combo-stripes-fieldgreen-restdaygreen { --stripe-a: var(--field);       --stripe-b: var(--rest-day); --bg: var(--canvas); --primary: var(--turf);   --secondary: var(--turf);     --accent: var(--turf);   }  /* canvas box */

.stripe-box {
  background: var(--bg);
  color: var(--primary);
  padding: 48px;
  max-width: 880px;
  margin: 0 auto;
}
.stripe-box > :last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .stripe-box { padding: 36px 22px; }
  .quote-interlude[class*="combo-stripes-"] { padding: 44px 16px; }
}

[class*="stripes-"] {
  background-image: repeating-linear-gradient(
    90deg,
    var(--stripe-a) 0 var(--stripe-w),
    var(--stripe-b) var(--stripe-w) calc(var(--stripe-w) * 2)
  );
}


/* ═══════════════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════════════ */

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

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }   /* anchor links land below the fixed nav */

p { text-wrap: pretty; }        /* avoids a lone word on the last line */

/* Page default: cream with Turf Green text. Not a combo — combos are for content blocks. */
body {
  --bg: var(--cream); --primary: var(--turf); --secondary: var(--turf); --accent: var(--turf);
  background-color: var(--bg);
  color: var(--primary);
  font-family: 'Montserrat', sans-serif; font-weight: 400; letter-spacing: 0.03em; overflow-x: hidden;
}


/* ═══════════════════════════════════════════════════════════════════════
   TYPE — one class per text style. Use these on any page.
   Colors come from the block's combo (--primary, --secondary, --accent).
   ═══════════════════════════════════════════════════════════════════════ */

/* Script subhead that sits above a headline (Bickham Script, Adobe Fonts).
   If Adobe Fonts fails, fall back to a formal copperplate script the device already has:
   Snell Roundhand on Mac and iOS, Edwardian Script on Windows with Office. Both run much
   larger than Bickham at the same size, so size-adjust scales them to the same measure. */
@font-face {
  font-family: 'Script Fallback';
  src: local('Snell Roundhand'), local('SnellRoundhand');
  size-adjust: 72%;
}
@font-face {
  font-family: 'Script Fallback Win';
  src: local('Edwardian Script ITC'), local('EdwardianScriptITC');
  size-adjust: 78%;
}
.eyebrow {
  display: block;
  font-family: 'bickham-script-pro-3', 'Script Fallback', 'Script Fallback Win', 'Apple Chancery', cursive;
  font-size: 44px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--secondary);
  margin-bottom: 24px;
}

/* Headlines: Libre Baskerville, all caps */
.headline-hero,
.headline,
.headline-md {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.headline-hero { font-size: clamp(32px, 8.6vw, 114px); line-height: 0.98; }   /* homepage hero only */
.headline      { font-size: clamp(38px, 5.2vw, 69px);  line-height: 1;    margin-bottom: 20px; }
.headline-md   { font-size: clamp(31px, 4.3vw, 55px);  line-height: 1.02; }

/* A headline followed by a rule that runs to the edge */
.headline-ruled { display: flex; align-items: center; gap: 20px; }
.headline-ruled::after { content: ''; flex: 1; height: 2px; background: var(--primary); }

/* Titles: Libre Baskerville, sentence case */
.title-lg,
.title,
.title-sm {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-weight: 400;
  letter-spacing: 0;
}
.title-lg { font-size: clamp(28px, 4.3vw, 46px); line-height: 1.2; }
.title    { font-size: 26px; line-height: 1.15; margin-bottom: 16px; }
.title-sm { font-size: 18px; margin-bottom: 12px; }

/* Sans subhead that sits under a headline */
.subhead { font-size: 16px; line-height: 1.55; max-width: 560px; margin: 0 auto 44px; }

/* Body copy: Montserrat (inherited from body) */
.body    { font-size: 16px; line-height: 1.85; }
.body-sm { font-size: 14px; line-height: 1.85; }
.body strong, .body-sm strong { font-weight: 600; }
.fineprint { font-size: 13px; letter-spacing: 0.04em; }

/* Long-form serif paragraph */
.body-serif {
  font-family: 'Libre Baskerville', Georgia, serif;
  letter-spacing: 0;
  font-size: clamp(17px, 2.1vw, 22px);
  line-height: 1.85;
}
.body-serif strong { font-weight: 400; }

/* Small caps label */
.label {
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--secondary);
}
.label-accent { color: var(--accent); }

/* A label with a hairline running out either side */
.label-ruled { display: flex; align-items: center; gap: 16px; }
.label-ruled::before,
.label-ruled::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--primary) 25%, transparent); }

/* Quotes: Libre Baskerville */
.quote-lg,
.quote { font-family: 'Libre Baskerville', Georgia, serif; font-weight: 400; letter-spacing: 0; }
.quote-lg {
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.4;
  max-width: 940px;
  margin: 0 auto 32px;
  text-wrap: balance;            /* even line lengths, no lone last word */
}
.quote { font-size: 16px; line-height: 1.7; margin-bottom: 24px; }


/* ═══════════════════════════════════════════════════════════════════════
   COMPONENTS — buttons, links, rules
   ═══════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-block;
  background: var(--btn-bg, var(--primary));     /* a combo can set --btn-bg and --btn-text */
  color: var(--btn-text, var(--bg));
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 15px 51px;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.btn:hover { background: color-mix(in srgb, var(--btn-bg, var(--primary)) 85%, var(--bg)); transform: translateY(-2px); }

.btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-outline:hover { background: var(--primary); color: var(--bg); }

.btn-red { --btn-bg: var(--red); --btn-text: var(--canvas); }   /* red button on any block */

.btn-block { display: block; width: 100%; padding-left: 24px; padding-right: 24px; }

/* Placeholder state: looks identical, but cannot navigate to a dead URL. */
.btn.pending { cursor: default; }

/* Text link with an arrow */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;              /* comfortable tap target on phones */
  margin: -14px 0;               /* keeps the surrounding spacing as it was */
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
  transition: gap 0.2s;
}
.text-link::after { content: '→'; transition: transform 0.2s; }
.text-link:hover { gap: 16px; }
.text-link:hover::after { transform: translateX(4px); }

/* Short centered dash beside a headline or quote */
.dash { width: 56px; height: 2px; background: var(--accent); margin: 0 auto 32px; }


/* ═══════════════════════════════════════════════════════════════════════
   NAV AND FOOTER — fixed colors, outside the combo system
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── TOP NAV ───
   Rendered on every page by /js/nav.js. Fixed over the hero: transparent at the
   top of the page, solid Turf Green with a hairline once scrolled (.is-scrolled)
   or while the phone menu is open (.is-open). Heroes add --nav-h to their top
   padding so nothing sits under it. */
:root { --nav-h: 77px; }               /* bar height; nav.js keeps it exact */

.site-header {
  --nav-line: rgba(240,223,206, 0.16);   /* Canvas hairline */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s, border-color 0.3s;
}
.site-header.is-scrolled,
.site-header.is-open { background: var(--turf); border-bottom-color: var(--nav-line); }

.site-header-inner {
  height: 76px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 40px;
}

.site-header a:focus-visible,
.site-header button:focus-visible { outline: 2px solid var(--khaki); outline-offset: 3px; }

.nav-emblem { display: flex; align-items: center; flex: none; }
.nav-emblem img { display: block; height: 34px; width: auto; }

.nav-links { display: flex; gap: 34px; flex: 1; }

.nav-links a {
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--canvas);
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s;
}
.nav-links a:hover { border-color: rgba(240,223,206, 0.45); }
.nav-links a[aria-current="page"] { border-color: var(--red); }

.nav-actions { display: flex; gap: 12px; flex: none; }

.nav-btn {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: 12px 20px;
  border: 1px solid var(--canvas);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.nav-btn-outline { color: var(--canvas); background: transparent; }
.nav-btn-outline:hover { background: var(--canvas); color: var(--turf); }
.nav-btn-red { color: #fff; background: var(--red); border-color: var(--red); }
.nav-btn-red:hover { background: #c4321c; border-color: #c4321c; }

/* Hamburger + drop-down menu: phones only */
.nav-toggle {
  display: none;
  flex: none;
  width: 28px;
  padding: 10px 0;
  gap: 6px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle i { display: block; height: 2px; background: var(--canvas); transition: transform 0.2s, opacity 0.2s; }
.site-header.is-open .nav-toggle i:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.site-header.is-open .nav-toggle i:nth-child(2) { opacity: 0; }
.site-header.is-open .nav-toggle i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.nav-drawer {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--turf);
  border-top: 1px solid var(--nav-line);
  border-bottom: 1px solid var(--nav-line);
  padding: 8px 16px 20px;
}
.nav-drawer a {
  display: block;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--canvas);
  padding: 15px 0;
  border-bottom: 1px solid var(--nav-line);
}
.nav-drawer a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--red); padding-left: 14px; }

@media (max-width: 1040px) {
  .site-header-inner { gap: 24px; }
  .nav-links { gap: 22px; }
}

/* Tablet and narrow windows: two rows, no hamburger */
@media (max-width: 880px) {
  :root { --nav-h: 102px; }
  .site-header-inner { flex-wrap: wrap; height: auto; gap: 0; padding: 0 16px; }
  .nav-emblem { height: 60px; }
  .nav-emblem img { height: 24px; }
  .nav-actions { margin-left: auto; gap: 8px; }
  .nav-btn { font-size: 10px; letter-spacing: 0.12em; padding: 10px 12px; }
  .nav-links {
    order: 3;
    flex-basis: 100%;
    gap: 26px;
    margin: 0 -16px;
    padding: 0 16px;
    border-top: 1px solid var(--nav-line);
  }
  .nav-links a { font-size: 11px; letter-spacing: 0.12em; padding: 12px 0; }
}

/* Phones: hamburger left, Sign In right */
@media (max-width: 600px) {
  :root { --nav-h: 76px; }
  .site-header-inner { flex-wrap: nowrap; height: 76px; }
  .nav-emblem, .nav-links, .nav-btn-red { display: none; }
  .nav-toggle { display: grid; }
  .nav-btn-outline { font-size: 11px; font-weight: 500; letter-spacing: 0.2em; padding: 13px 22px; }
  .site-header.is-open .nav-drawer { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header, .nav-links a, .nav-btn, .nav-toggle i { transition: none; }
}

/* ─── FOOTER ───
   Rendered on every page by /js/footer.js. Newsletter band (our copy + Select,
   Flodesk supplies the fields), then links, then the bottom row. Container
   queries so it lays out by its own width. */
.site-footer {
  --sf-line: rgba(240,223,206, 0.16);
  container-type: inline-size;
  background: var(--turf);
  color: var(--canvas);
}
.sf-wrap { max-width: 1180px; margin: 0 auto; padding: 28px 28px 18px; display: grid; gap: 32px; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:focus-visible,
.site-footer select:focus-visible,
.site-footer input:focus-visible,
.site-footer button:focus-visible { outline: 2px solid var(--khaki); outline-offset: 3px; }
.sf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Newsletter band */
.sf-news {
  background: var(--field);
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding: 18px 24px;
}
/* "Stay in the" in our headline serif, "huddle" in script: easier to read than all script */
.sf-eyebrow { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; margin: 0 0 6px; line-height: 1; }
.sf-eyebrow-lead {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 17px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sf-eyebrow-script {
  font-family: 'bickham-script-pro-3', 'Script Fallback', 'Script Fallback Win', 'Apple Chancery', cursive;
  font-size: 40px;
}
.sf-news-line { font-size: 12.5px; line-height: 1.6; margin: 0; max-width: 44ch; }
.sf-news-row { display: flex; gap: 10px; align-items: center; }
.sf-pick {
  flex: none;
  width: 200px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 11px 40px 11px 16px;
  border: 1px solid var(--canvas);
  border-radius: 999px;
  background: var(--canvas) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23284439' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 15px center;
  color: var(--turf);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.sf-forms { flex: 1; min-width: 0; }
.sf-form[hidden] { display: none; }
.sf-form.is-locked { opacity: 0.6; pointer-events: none; }   /* preview of the fields until a choice is made */

/* Flodesk overrides. Flodesk injects its own styles after ours, so these use !important.
   Its forms keep an empty title and subtitle (25px + 30px of margin) and 30px of padding
   above the fields; removing them makes the space above and below the fields even. */
.sf-forms [data-ff-el="root"] [class*="__container"] { background: transparent !important; }
.sf-forms [data-ff-el="root"] form[data-ff-el="form"] { padding: 0 !important; }
.sf-forms [data-ff-el="root"] [class*="__title"],
.sf-forms [data-ff-el="root"] [class*="__subtitle"] { display: none !important; }
/* Flodesk centers this row, so when it runs wider than its space it spills out on both sides
   (under the Select pill). Left-align it and let the fields shrink so it always fits. */
.sf-forms [data-ff-el="content"] { display: flex !important; margin: 0 !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: flex-start !important; gap: 10px; }
.sf-forms [data-ff-el="fields"] { display: flex !important; flex: 1 1 0 !important; min-width: 0 !important; justify-content: flex-start !important; flex-wrap: nowrap !important; gap: 10px; margin: 0 !important; max-width: none !important; }
.sf-forms [data-ff-el="fields"] > [class*="__field"] { margin: 0 !important; min-width: 0 !important; max-width: none !important; }   /* Flodesk sets a 140px minimum */
.sf-forms [data-ff-el="root"] input[class*="__control"],
.sf-forms [data-ff-el="root"] label[class*="__label"] { padding: 11px 14px !important; font-size: 14px !important; border-radius: 2px !important; }
.sf-forms [data-ff-el="root"] input[class*="__control"] { height: 44px !important; width: 100% !important; min-width: 0 !important; }
.sf-forms [data-ff-el="footer"] { margin: 0 !important; flex: none !important; }
.sf-forms [data-ff-el="submit"] { height: 44px !important; padding: 0 26px !important; letter-spacing: 0.22em !important; border-radius: 2px !important; }
.sf-forms [data-ff-el="submit"]:hover { background: #c4321c !important; border-color: #c4321c !important; }
.sf-forms [class*="__success-message"],
.sf-forms [class*="__success-message"] * { color: var(--canvas) !important; font-size: 13px !important; text-align: left !important; }
.sf-forms [data-ff-el="root"] [class*="__error"] { color: var(--canvas) !important; }
/* After a signup Flodesk shows its thank-you message; hide the fields our layout keeps visible. */
.sf-forms form.fd-has-success [data-ff-el="fields"],
.sf-forms form.fd-has-success [data-ff-el="footer"] { display: none !important; }
.sf-forms [data-ff-el="root"] input:focus,
.sf-forms [data-ff-el="submit"]:focus-visible { outline: 2px solid var(--khaki) !important; outline-offset: 2px !important; }

/* Main row */
.sf-main { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 48px; }
.sf-brand { display: grid; gap: 8px; justify-items: start; align-content: start; }
.sf-circle { display: block; width: 64px; height: auto; }
.sf-tag { font-size: 14px; letter-spacing: 0.04em; margin: 6px 0 0; color: var(--rest-day); }
.sf-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.sf-h { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rest-day); margin: 0 0 12px; }
.sf-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sf-cols a { font-size: 13px; transition: color 0.15s; }
.sf-cols a:hover { color: var(--khaki); }
.sf-social { display: flex; gap: 12px; }
.sf-social a {
  width: 34px;
  height: 34px;
  border: 1px solid var(--sf-line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background 0.15s, color 0.15s;
}
.sf-social a:hover { background: var(--canvas); color: var(--turf); }
.sf-social svg { width: 18px; height: 18px; }

/* Bottom row */
.sf-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  border-top: 1px solid var(--sf-line);
  padding-top: 14px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--rest-day);
}
.sf-mail { color: var(--canvas) !important; margin-left: 6px; }
.sf-legal { margin-left: auto; display: flex; gap: 22px; }
.sf-legal a:hover, .sf-mail:hover { color: var(--khaki) !important; }

@container (max-width: 1180px) {   /* below this the one-row fields get too narrow for "Email address" */
  .sf-news { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@container (max-width: 900px) {
  .sf-main { grid-template-columns: minmax(0, 1fr); gap: 44px; }
}
@container (max-width: 820px) {
  .sf-news-row { flex-direction: column; align-items: stretch; }
  .sf-pick { width: 100%; }
}
@container (max-width: 700px) {
  .sf-forms [data-ff-el="content"],
  .sf-forms [data-ff-el="fields"] { flex-direction: column !important; }
  .sf-forms [data-ff-el="fields"] { max-width: none !important; }
  .sf-forms [data-ff-el="fields"] > [class*="__field"] { flex: none !important; width: 100% !important; }
  .sf-forms [data-ff-el="footer"],
  .sf-forms [data-ff-el="submit"] { width: 100% !important; }
}
@container (max-width: 560px) {
  .sf-wrap { padding: 44px 16px 24px; gap: 44px; }
  .sf-news { padding: 28px 20px; }
  .sf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; }
  .sf-bottom { flex-direction: column; align-items: flex-start; }
  .sf-legal { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-cols a, .sf-social a { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   ANIMATION
   ═══════════════════════════════════════════════════════════════════════ */

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

/* Fade in as the element scrolls into view (js/site.js adds "visible") */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }


/* ═══════════════════════════════════════════════════════════════════════
   HOMEPAGE SECTIONS — layout only; text styles come from TYPE above
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── HERO ─── */
/* Sized by its content plus padding. More below than above, to balance the nav sitting at the top. */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: calc(100px + var(--nav-h)) 40px 150px;
  position: relative;
  overflow: hidden;
}

.hero-inner { position: relative; z-index: 1; }

/* Each piece of the hero fades up in turn */
.hero-inner > * { opacity: 0; animation: fadeUp 0.8s ease forwards; }
.hero-inner > :nth-child(1) { animation-delay: 0.2s; }
.hero-inner > :nth-child(2) { animation-delay: 0.35s; }
.hero-inner > :nth-child(3) { animation-delay: 0.5s; }
.hero-inner > :nth-child(4) { animation-delay: 0.7s; }
.hero-inner > :nth-child(5) { animation-delay: 0.9s; }

/* The supplied logo file, tinted with the block's primary color */
.hero-logo {
  aspect-ratio: 1500 / 424;
  background: var(--primary);
  -webkit-mask: url('/img/fieldhouse-logo.png') center / contain no-repeat;
  mask: url('/img/fieldhouse-logo.png') center / contain no-repeat;
  width: clamp(260px, 42vw, 460px);
  margin: 0 auto 12px;
}

.hero .headline-hero { margin-bottom: 8px; }
.hero .subhead { font-size: 18px; line-height: 1.5; margin: 28px auto 52px; }

/* ─── WHAT IS FIELDHOUSE ─── */
.built {
  padding: 100px 40px;
  text-align: center;
  position: relative;
}

/* Accent rules set in from the top and bottom edges of the block */
.built::before,
.built::after {
  content: '';
  position: absolute;
  left: 40px;
  right: 40px;
  height: 2px;
  background: var(--accent);
}
.built::before { top: 36px; }
.built::after { bottom: 36px; }

.built .title-lg { max-width: 680px; margin: 0 auto; }
.built .body { max-width: 640px; margin: 28px auto 0; }

.built-mark {
  display: block;
  width: 150px;
  height: auto;
  margin: 40px auto 0;
}

/* ─── IMAGE STRIPS ─── */
.img-strip {
  width: 100%;
  height: 280px;
  overflow: hidden;
  position: relative;
}

.img-strip-track {
  display: flex;
  height: 100%;
  gap: 3px;
  animation: stripScroll 28s linear infinite;
  width: max-content;
}

.img-strip-reverse .img-strip-track { animation: stripScrollReverse 32s linear infinite; }

/* Fixed-width tiles; photos are cropped to fit, keeping the top so heads stay in */
.img-strip-item {
  width: 320px;
  height: 100%;
  flex: none;
  filter: saturate(0.9) brightness(1.0);
  transition: filter 0.3s;
}

.img-strip-item:hover { filter: saturate(1.1) brightness(1.05); }

.img-strip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

@keyframes stripScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes stripScrollReverse {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* ─── TWO-COLUMN PANELS (Coming home / New team) ─── */
.panel-full {
  display: block;
  width: 100%;
  padding: 100px 80px;
  position: relative;
  overflow: hidden;
}

.panel-full-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
}

.panel-full-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 72px;
  border-right: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
}

.panel-full-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 72px;
}

.panel-full-left .headline { margin-bottom: 0; }
.panel-full .body { max-width: 480px; margin-bottom: 40px; }

/* ─── PULL-QUOTE ─── */
/* Half quote, half full-bleed photo */
.quote-interlude {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.quote-interlude-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 72px 56px;
}

.quote-interlude .quote-lg { font-size: clamp(22px, 2.3vw, 32px); }
.quote-interlude .label { margin-bottom: 0; }

/* The photo is portrait. The block is as tall as its own half is wide (a square),
   capped at 720px, and the photo is cropped to fill it from the center, so the top
   and bottom are trimmed equally. */
.quote-interlude-media { position: relative; min-height: min(50vw, 720px); }
.quote-interlude-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ─── HOW IT COMES TO LIFE ─── */
.offers {
  padding: 100px 40px;
  position: relative;
}

.offers-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  max-width: 1100px;
  margin: 0 auto 64px;
}

.offers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1100px;
  margin: 0 auto;
  gap: 1px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.offers-note { max-width: 1100px; margin: 48px auto 0; text-align: center; }

.offer-card {
  background: var(--bg);
  padding: 52px 44px;
  position: relative;
  transition: background 0.25s;
}

.offer-card:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); }

.offer-card .label { display: block; margin-bottom: 20px; }

.offer-rule {
  width: 32px;
  height: 2px;
  background: var(--primary);
  margin-bottom: 20px;
}

/* ─── WHAT MEMBERS SAY ─── */
.testimonials {
  padding: 100px 40px;
}

.testimonials-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  max-width: 1100px;
  margin: 0 auto 64px;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 15%, transparent);
  padding-bottom: 24px;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  max-width: 1100px;
  margin: 0 auto;
}

.quote-rule {
  width: 100%;
  height: 2px;
  background: var(--primary);
  margin-bottom: 32px;
}

/* ─── GOOD QUESTIONS ─── */
.faq { padding: 100px 0; }

.faq-wrap {
  padding: 100px 40px;
  max-width: 840px;
  margin: 0 auto;
}

.faq .headline-md { margin-bottom: 56px; }

.faq-item { border-bottom: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); }

.faq-item:first-of-type { border-top: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); }

/* Accordion: answers start closed; the + turns to × when open */
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 26px 0;
  margin: 0;
  color: var(--secondary);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; flex: none; font-family: 'Montserrat', sans-serif; font-size: 22px; color: var(--rest-day); transition: transform 0.2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:focus-visible { outline: 2px solid var(--khaki); outline-offset: 3px; }
.faq-item .body { margin: 0 0 28px; }
@media (prefers-reduced-motion: reduce) { .faq-item summary::after { transition: none; } }

/* ─── THE FIELDHOUSE PHILOSOPHY ─── (About Us page) */
.philosophy {
  padding: 120px 40px;
  position: relative;
  overflow: hidden;
}

.philosophy-inner {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.philosophy-mark {
  display: block;
  width: 96px;
  height: auto;
  margin: 0 auto 36px;
}

.philosophy .label { margin-bottom: 40px; }

/* Phones: the emblem and label are centered, so a left-aligned, ragged paragraph
   reads as off-center. Center it and use the same 24px side padding as other sections. */
@media (max-width: 700px) {
  .philosophy { padding: 88px 24px; }
  .philosophy .body-serif { text-align: center; text-wrap: pretty; }
}

/* ─── JOIN (FOUNDING MEMBERSHIP) ─── */
.footer-cta {
  padding: 100px 40px;
  text-align: center;
}

.footer-cta .fineprint { margin-top: 22px; }

/* ─── COACHING STAFF ─── */
.coaching-banner {
  padding: 90px 40px;
  text-align: center;
}

@media (max-width: 900px) {
  .offers-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .offers-top, .testimonials-top { flex-direction: column; align-items: flex-start; gap: 12px; }
  .panel-full { padding: 72px 40px; }
  .panel-full-inner { grid-template-columns: 1fr; gap: 48px; }
  .panel-full-left {
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
    padding-bottom: 40px;
  }
  .panel-full-right { padding-left: 0; padding-top: 40px; }
  .quote-interlude-text { padding: 56px 32px; }
}

/* Pull-quote stacks on phones: quote first, then the photo at a 4:5 portrait crop */
@media (max-width: 760px) {
  .quote-interlude { grid-template-columns: 1fr; }
  .quote-interlude-text { padding: 64px 28px; }
  .quote-interlude-media { min-height: 0; height: min(125vw, 560px); }   /* 4:5 on phones, capped on small tablets */
}

@media (max-width: 600px) {
  .offer-card { padding: 56px 28px; }
  .faq-wrap { padding: 80px 28px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   EVENTS PAGE SECTIONS — layout only
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── PAGE HERO ─── */
.ev-hero {
  padding: calc(150px + var(--nav-h)) 40px 100px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.ev-hero .headline { margin-bottom: 28px; }

/* ─── EVENT LIST ─── */
.ev-list { padding: 100px 40px; text-align: center; }

.ev-list-inner { max-width: 1080px; margin: 0 auto; }

.ev-list .headline-md { margin-bottom: 26px; }
.ev-list .subhead { max-width: 700px; margin-bottom: 60px; }

.ev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px; max-width: 880px; margin: 0 auto; }

/* Cards are their own white surface, whatever combo the block uses */
.ev-card {
  --bg: #fff; --primary: var(--turf); --secondary: var(--turf);
  background: var(--bg);
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 16%, transparent);
  border-radius: 4px;
  padding: 40px 34px;
  display: flex;
  flex-direction: column;
  text-align: left;
  transition: transform 0.2s, box-shadow 0.2s;
}

.ev-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(40,68,57,0.10); }

/* An odd final card would sit alone in column 1 — center it across the row. */
.ev-card:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 426px; margin: 0 auto; width: 100%; }

.ev-meta { border-top: 1px solid color-mix(in srgb, var(--primary) 14%, transparent); padding-top: 16px; margin-bottom: 18px; }

.ev-meta-row { display: flex; gap: 10px; font-size: 13px; line-height: 1.7; }

.ev-meta-key {
  font-weight: 500; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--secondary); min-width: 62px; padding-top: 4px;
}

.ev-blurb {
  font-family: 'Libre Baskerville', Georgia, serif; letter-spacing: 0; font-size: 15px;
  line-height: 1.6; margin-bottom: 30px;
}

.ev-card .btn { margin-top: auto; }

/* ─── UNDER THE TILES ─── */
.ev-foot { max-width: 700px; margin: 60px auto 0; text-align: center; }

.ev-foot-note {
  border-top: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  padding-top: 26px; max-width: 620px; margin: 0 auto;
}

.ev-noscript { font-family: 'Libre Baskerville', Georgia, serif; letter-spacing: 0; font-size: 18px; }

/* ─── DON'T SEE YOUR CITY ─── */
.ev-any { padding: 100px 40px; text-align: center; }

@media (max-width: 700px) {
  .hero { padding: calc(100px + var(--nav-h)) 28px 110px; }
  .ev-hero { padding: calc(130px + var(--nav-h)) 28px 80px; }
  .ev-list { padding: 72px 24px; }
  .ev-any { padding: 72px 28px; }
  .ev-card { padding: 32px 26px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   SIMPLE PAGES — Membership, About Us, Partner (<body class="page-simple">)
   ═══════════════════════════════════════════════════════════════════════ */

.page-hero { padding: calc(96px + var(--nav-h)) 40px 88px; text-align: center; }
.page-hero .headline { margin-bottom: 28px; }
.page-hero .subhead { margin-bottom: 0; }

.page-body { padding: 96px 40px; text-align: center; }
.page-body .headline-md,
.page-body .title-lg { max-width: 680px; margin: 0 auto 26px; }
.page-body .body { max-width: 640px; margin: 0 auto 44px; }
.page-body .fineprint { margin-top: 22px; }

.partner-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 28px; max-width: 880px; margin: 0 auto; text-align: left; }
.partner-grid .label { display: block; margin-bottom: 14px; }
.partner-grid .title { margin-bottom: 16px; }

@media (max-width: 700px) {
  .page-hero { padding: calc(72px + var(--nav-h)) 24px 64px; }
  .page-body { padding: 72px 24px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   ABOUT US PAGE (<body class="page-about">)
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── HERO: crowd photo under a dark Turf overlay ─── */
.about-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  background-color: var(--bg);
  color: var(--primary);
  padding: calc(120px + var(--nav-h)) 40px 120px;
}
.about-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: saturate(1.15);          /* keeps the bright room from washing out under the overlay */
}
.about-hero::after {               /* darkest at the top so the transparent nav reads; middle held at 70% for the white room */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28,46,39,.86) 0%, rgba(28,46,39,.70) 45%, rgba(28,46,39,.80) 100%);
}
.about-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.about-hero .eyebrow { margin-bottom: 18px; }
.about-hero .headline { font-size: clamp(38px, 5.6vw, 76px); line-height: 0.98; margin-bottom: 0; text-wrap: balance; }
.about-hero .dash { margin: 28px auto; }
.about-hero .subhead { font-size: 18px; margin-bottom: 0; }

/* ─── MEET THE FOUNDERS ─── */
.founders { padding: 104px 40px 120px; }
.founders-inner { max-width: 1120px; margin: 0 auto; }
.founders-head { text-align: center; }
.founders-head .eyebrow { margin-bottom: 6px; }
.founders-head .dash { margin: 26px auto 0; }

.founders-photo { margin: 48px 0 0; }
.founders-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 30%; }
.founders-photo figcaption {
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--leather);
}

.founder-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: start;
  margin-top: 88px;
}
.founder-row-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.founder-row-flip .founder-play { order: 2; }

.founder-play { margin: 0; position: sticky; top: 110px; }   /* stays beside its bio while scrolling */
.founder-play img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

/* Kim's photo slot until her playing photo arrives */
.founder-play-ph {
  aspect-ratio: 4 / 5;
  background: var(--turf);
  color: var(--canvas);
  display: grid;
  place-content: center;
  gap: 8px;
  text-align: center;
}
.founder-play-ph span {
  font-family: 'bickham-script-pro-3', 'Script Fallback', 'Script Fallback Win', 'Apple Chancery', cursive;
  font-size: 56px;
  line-height: 1;
}
.founder-play-ph small { font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rest-day); }

.founder-bio .label { margin-bottom: 10px; }
.founder-bio .title { margin-bottom: 10px; }
.founder-meta {
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--leather);
  margin-bottom: 24px;
}
.founder-bio p:not(.label):not(.founder-meta) { font-size: 15px; line-height: 1.85; max-width: 62ch; }
.founder-bio p:not(.label):not(.founder-meta) + p { margin-top: 16px; }

/* ─── CLOSING CTA ─── */
.about-cta { padding: 104px 40px; text-align: center; }
.about-cta .eyebrow { margin-bottom: 6px; }
.about-cta .headline-md { max-width: 760px; margin: 0 auto; text-wrap: balance; }
.about-cta .dash { margin: 26px auto 40px; }
.about-cta-btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

@media (max-width: 900px) {
  .founders-photo img { aspect-ratio: 4 / 3; }
  .founder-row,
  .founder-row-flip { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 64px; }
  .founder-row-flip .founder-play { order: 0; }          /* photo above bio for both founders */
  .founder-play { position: static; max-width: 420px; }
}

@media (max-width: 700px) {
  .about-hero { padding: calc(74px + var(--nav-h)) 24px 88px; }
  .about-hero .subhead { font-size: 16px; }
  .about-cta { padding: 72px 24px; }
  .founders { padding: 72px 24px 88px; }
  .about-cta-btns .btn { width: 100%; padding-left: 24px; padding-right: 24px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   MEMBERSHIP PAGE (<body class="page-membership">)
   ═══════════════════════════════════════════════════════════════════════ */

.mem-block { padding: 104px 40px; }
.mem-inner { max-width: 1120px; margin: 0 auto; }
.mem-narrow { max-width: 760px; }
.mem-head { text-align: center; }
.page-membership .eyebrow { margin-bottom: 6px; }
.page-membership .dash { margin: 26px auto; }
.mem-head .subhead { margin-bottom: 0; }
.page-membership .headline-md { text-wrap: balance; }

/* ─── HERO: copy left, photo right ─── */
.mem-hero { padding: calc(120px + var(--nav-h)) 40px 104px; }
.mem-hero-grid {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 72px;
  align-items: center;
}
.mem-hero .headline { font-size: clamp(44px, 5.6vw, 84px); line-height: 0.98; margin-bottom: 0; }
.page-membership .mem-hero .dash { margin: 26px 0; }
.mem-hero .subhead { font-size: 18px; margin: 0; }
.mem-hero .subhead + .subhead { margin-top: 16px; }
.mem-hero-lead { font-weight: 500; }
.mem-hero .btn { margin-top: 36px; padding-left: 30px; padding-right: 30px; }
.mem-hero-photo { margin: 0; }
.mem-hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

/* ─── WHO IT'S FOR: sport tags ─── */
.mem-sports {
  list-style: none;
  margin: 48px auto 0;
  padding: 0;
  max-width: 960px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.mem-sports li {
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  border: 1px solid var(--turf);
  padding: 10px 16px;
}
.mem-sports .mem-sport-more { border-color: var(--red); color: var(--red); }

/* ─── HOW IT WORKS: numbered steps ─── */
.mem-steps {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  counter-reset: step;
}
.mem-steps li { counter-increment: step; border-top: 2px solid var(--turf); padding-top: 22px; }
.mem-steps li::before {
  content: counter(step);
  display: block;
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 40px;
  line-height: 1;
  color: var(--red);
  margin-bottom: 14px;
}
.mem-steps .title-sm { margin-bottom: 10px; }

/* ─── WHAT'S INCLUDED: 3 × 2 grid with hairlines ─── */
.mem-included {
  --rule: color-mix(in srgb, var(--turf) 16%, transparent);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 56px;
}
.mem-included > div { background: var(--bg); padding: 34px 30px 36px; }
.mem-included .label { color: var(--leather); margin-bottom: 12px; }
.mem-included .title-sm { margin-bottom: 12px; }

/* ─── WAYS TO CONNECT: photo cards ─── */
.mem-formats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 56px; }
.mem-formats img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: 14px; }
.mem-formats .label { color: var(--canvas); margin-bottom: 8px; }

/* ─── PRICING ─── */
.mem-pricing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: 72px;
  align-items: center;
}
.page-membership .mem-pricing .dash { margin: 26px 0; }
.mem-price-card {
  background: var(--cream);
  color: var(--turf);
  border-top: 4px solid var(--red);
  padding: 40px 40px 36px;
}
.mem-price { display: flex; align-items: baseline; justify-content: center; gap: 14px; }
.mem-price b {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-weight: 400;
  font-size: clamp(64px, 9vw, 112px);
  line-height: 1;
}
.mem-price span { font-weight: 500; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--leather); }
.mem-price-card .fineprint { text-align: center; color: var(--leather); margin: 12px 0 0; }
.mem-checks {
  list-style: none;
  margin: 24px 0 26px;
  padding: 20px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--turf) 16%, transparent);
  display: grid;
  gap: 10px;
}
.mem-checks li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.5; }
.mem-checks li::before {                 /* red check mark */
  content: '';
  position: absolute;
  left: 2px;
  top: 0.3em;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  transform: rotate(-45deg);
}

/* ─── FAQ: accordion ─── */
.mem-faq { margin-top: 44px; border-top: 1px solid color-mix(in srgb, var(--canvas) 16%, transparent); }
.mem-faq details { border-bottom: 1px solid color-mix(in srgb, var(--canvas) 16%, transparent); }
.mem-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 19px;
  line-height: 1.3;
}
.mem-faq summary::-webkit-details-marker { display: none; }
.mem-faq summary::after { content: '+'; flex: none; font-size: 22px; color: var(--rest-day); transition: transform 0.2s; }
.mem-faq details[open] summary::after { transform: rotate(45deg); }   /* + becomes × */
.mem-faq summary:focus-visible { outline: 2px solid var(--khaki); outline-offset: 3px; }
.mem-faq details p { margin: 0 0 24px; max-width: 62ch; font-size: 15px; line-height: 1.8; }
.mem-faq details a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.mem-faq details a:hover { color: var(--khaki); }

@media (max-width: 900px) {
  .mem-hero-grid,
  .mem-pricing { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .mem-hero-photo { max-width: 460px; }
  .mem-steps,
  .mem-included { grid-template-columns: minmax(0, 1fr); }
  .mem-formats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .mem-block { padding: 72px 24px; }
  .mem-hero { padding: calc(64px + var(--nav-h)) 24px 72px; }
  .mem-hero .subhead { font-size: 16px; }
  .page-membership .eyebrow { font-size: 38px; }
  .page-membership .btn { display: block; width: 100%; padding-left: 24px; padding-right: 24px; }
  .mem-formats { grid-template-columns: minmax(0, 1fr); }
  .mem-sports li { font-size: 11px; padding: 9px 12px; }
  .mem-price-card { padding: 32px 22px 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .mem-faq summary::after { transition: none; }
}