/* ==========================================================================
   THE HEIGHTS CUTTER HIGH LIMIT SOCIETY — "Concrete Heights"
   One stylesheet, no build step. Source of truth: the artboards in /design.

   HOW THE GREEN RULE IS ENFORCED
   Every section declares the ground it sits on (.ground-light / .ground-dark /
   .ground-green). The ground sets --accent. Components only ever ask for
   var(--accent), so neon can never land on concrete and deep green can never
   land on ink. Do not hard-code a green inside a component.

   CONTENTS
   01 tokens · 02 reset · 03 grounds · 04 grid + texture · 05 type
   06 chips, labels, rules · 07 buttons + links · 08 header + nav
   09 sections · 10 home · 11 membership · 12 book · 13 barber
   14 policies · 15 404 · 16 footer · 17 mobile (the one breakpoint)
   ========================================================================== */


/* 01 TOKENS ================================================================ */
:root {
  /* palette — locked */
  --concrete:   #CFCBC3;   /* main ground */
  --concrete-2: #C7C3BA;   /* alternating panel */
  --ink:        #141414;   /* near-black ground and text */
  --ink-2:      #1C1C1A;   /* alt dark cell */
  --green:      #3BE04B;   /* NEON — accent on DARK grounds only */
  --green-deep: #15703A;   /* DEEP — accent on LIGHT grounds: display type, numerals, buttons, borders */
  --green-lit:  #5CEA68;   /* hover, dark only */
  --bone:       #E8E5DE;   /* text on dark */
  --muted:      #4A4845;   /* body copy on concrete */
  --grid:       rgba(20,20,20,0.10);

  /* Small text on light grounds. Added 2026-09-20 after measuring: --green-deep is
     3.81:1 on concrete, under the 4.5:1 small-text threshold. This is 4.93:1.
     Use for labels, eyebrows, fine print and body links ONLY. Large display type
     and buttons stay on --green-deep, where 3.81 passes the large-text threshold. */
  --green-deep-text: #115D30;

  /* transparencies, taken from the artboards */
  --grid-on-dark:  rgba(232,229,222,0.08);
  --grid-on-green: rgba(232,229,222,0.14);
  --bone-78: rgba(232,229,222,0.78);
  --bone-72: rgba(232,229,222,0.72);
  --bone-62: rgba(232,229,222,0.62);
  --bone-55: rgba(232,229,222,0.55);
  --bone-35: rgba(232,229,222,0.35);
  --bone-28: rgba(232,229,222,0.28);
  --bone-18: rgba(232,229,222,0.18);
  --ink-35:  rgba(20,20,20,0.35);
  --neon-65: rgba(59,224,75,0.65);
  --neon-60: rgba(59,224,75,0.60);

  /* type */
  --font-display: 'Archivo Black', 'Arial Black', Impact, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid display sizes. Each is a straight line through the 390 artboard value and the
     1440 artboard value, floored at the 360 value and capped at the 1600 value. */
  --fs-hero:          clamp(3.3643rem, 1.7357rem + 7.2381vw, 8.9738rem);   /* 56 → 132 */
  --fs-404:           clamp(3.7500rem, 2.2500rem + 6.6667vw, 8.9167rem);   /* 62 → 132 */
  --fs-h1-barber:     clamp(3.1786rem, 2.3214rem + 3.8095vw, 6.1310rem);   /* 52 → 92 */
  --fs-h1-policies:   clamp(3.4357rem, 2.6643rem + 3.4286vw, 6.0929rem);   /* 56 → 92 */
  --fs-h1-member:     clamp(2.7000rem, 2.1000rem + 2.6667vw, 4.7667rem);   /* 44 → 72 */
  --fs-price-hero:    clamp(9.1071rem, 5.8929rem + 14.2857vw, 20.1786rem); /* 150 → 300 */
  --fs-h2:            clamp(2.4429rem, 1.7571rem + 3.0476vw, 4.8048rem);   /* 40 → 72 */
  --fs-h2-barber:     clamp(2.4571rem, 1.9429rem + 2.2857vw, 4.2286rem);   /* 40 → 64 */
  --fs-h2-lounge:     clamp(2.3286rem, 1.7714rem + 2.4762vw, 4.2476rem);   /* 38 → 64 */
  --fs-h2-news:       clamp(2.0857rem, 1.6143rem + 2.0952vw, 3.7095rem);   /* 34 → 56 */
  --fs-statement:     clamp(1.2321rem, 1.0179rem + 0.9524vw, 1.9702rem);   /* 20 → 30 */
  --fs-price-lg:      clamp(6.1071rem, 4.3929rem + 7.6190vw, 12.0119rem);  /* 100 → 180 */
  --fs-num-cell:      clamp(2.9714rem, 2.6286rem + 1.5238vw, 4.1524rem);   /* 48 → 64 */
  --fs-num-step:      clamp(3.9571rem, 3.4429rem + 2.2857vw, 5.7286rem);   /* 64 → 88 */
  --fs-num-row:       clamp(3.9429rem, 3.2571rem + 3.0476vw, 6.3048rem);   /* 64 → 96 */
  --fs-title-cell:    clamp(1.3714rem, 1.3286rem + 0.1905vw, 1.5190rem);   /* 22 → 24 */
  --fs-title-row:     clamp(1.8500rem, 1.5500rem + 1.3333vw, 2.8833rem);   /* 30 → 44 */
  --fs-title-step:    clamp(1.2464rem, 1.2036rem + 0.1905vw, 1.3940rem);   /* 20 → 22 */
  --fs-service:       clamp(1.3679rem, 1.2821rem + 0.3810vw, 1.6631rem);   /* 22 → 26 */
  --fs-service-price: clamp(1.8607rem, 1.6893rem + 0.7619vw, 2.4512rem);   /* 30 → 38 */
  --fs-h2-policy:     clamp(1.4893rem, 1.3607rem + 0.5714vw, 1.9321rem);   /* 24 → 30 */
  --fs-foot-name:     clamp(1.2464rem, 1.2036rem + 0.1905vw, 1.3940rem);   /* 20 → 22 */

  /* mono sizes: desktop values here, mobile values in section 17 */
  --fs-body:  0.9375rem;   /* 15 */
  --fs-copy:  0.875rem;    /* 14 */
  --fs-nav:   0.8125rem;   /* 13 */
  --fs-meta:  0.6875rem;   /* 11 */
  --fs-meta-lg: 0.75rem;   /* 12 */

  /* layout */
  --gutter: clamp(16px, 2.7778vw, 40px);   /* 40 @1440, never under 16 */
  --nav-h: 104px;
  --grid-pitch: 180px;
}


/* 02 RESET ================================================================= */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  font: 400 var(--fs-body)/1.65 var(--font-mono);
  /* no font-smoothing override: the artboards use the browser default, and forcing
     "antialiased" makes the mono body copy visibly thinner and dimmer on dark grounds */
  overflow-x: hidden;
}
h1, h2, h3, p, ul, ol, figure, address { margin: 0; padding: 0; }
ul, ol { list-style: none; }
address { font-style: normal; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
hr { border: 0; margin: 0; }
button, input { font: inherit; color: inherit; border: 0; border-radius: 0; margin: 0; -webkit-appearance: none; appearance: none; }
button { cursor: pointer; background: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  padding: 14px 18px; background: var(--ink); color: var(--bone);
  font: 600 var(--fs-nav)/1 var(--font-mono); letter-spacing: 0.10em;
}
.skip-link:focus { top: 12px; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus, var(--ink)); outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  a, button, .btn, summary .bar { transition: background-color .14s ease, color .14s ease, border-color .14s ease, transform .14s ease, opacity .14s ease; }
}


/* 03 GROUNDS =============================================================== */
/* A ground sets colours for everything inside it. Nest freely: the nearest ground wins. */
.ground-light, .ground-light-2 {
  --ground-bg: var(--concrete);
  --fg: var(--ink);
  --fg-soft: var(--muted);
  --fg-softer: var(--muted);
  --fg-faint: var(--muted);
  --accent: var(--green-deep);            /* display type, numerals, borders */
  --accent-text: var(--green-deep-text);  /* small text */
  --accent-soft: var(--green-deep-text);
  --rule: var(--ink);
  --hairline: var(--ink);
  --grid-line: var(--grid);
  --pipe: var(--ink-35);
  --chip-bg: var(--ink);   --chip-fg: var(--bone);
  --join-bg: var(--green-deep); --join-fg: var(--bone);
  --join-bg-hover: var(--ink);  --join-fg-hover: var(--bone);
  --book-bg-hover: var(--ink);  --book-fg-hover: var(--bone);
  --slot-line: var(--green-deep);
  --link-hover: var(--ink);
  --focus: var(--ink);
  color: var(--fg);
  background-color: var(--ground-bg);
  /* concrete texture, verbatim from the artboards */
  background-image:
    radial-gradient(circle at 18% 28%, rgba(20,20,20,0.020) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 62%, rgba(255,255,255,0.030) 0 1px, transparent 2.5px);
  background-size: 23px 26px, 31px 29px;
}
.ground-light-2 { --ground-bg: var(--concrete-2); }

.ground-dark, .ground-dark-2 {
  --ground-bg: var(--ink);
  --fg: var(--bone);
  --fg-soft: var(--bone-78);
  --fg-softer: var(--bone-72);
  --fg-faint: var(--bone-62);
  --accent: var(--green);
  --accent-text: var(--green);
  --accent-soft: var(--neon-65);
  --rule: var(--bone-28);
  --hairline: var(--bone-18);
  --grid-line: var(--grid-on-dark);
  --pipe: var(--bone-35);
  --chip-bg: var(--bone);  --chip-fg: var(--ink);
  --join-bg: var(--green); --join-fg: var(--ink);
  --join-bg-hover: var(--green-lit); --join-fg-hover: var(--ink);
  --book-bg-hover: var(--green); --book-fg-hover: var(--ink);
  --slot-line: var(--neon-60);
  --link-hover: var(--green-lit);
  --focus: var(--green);
  color: var(--fg);
  background-color: var(--ground-bg);
  background-image: none;
}
.ground-dark-2 { --ground-bg: var(--ink-2); }

.ground-green {
  --ground-bg: var(--green-deep);
  --fg: var(--bone);
  --fg-soft: var(--bone);
  --accent: var(--bone);
  --accent-text: var(--bone);
  --rule: var(--bone);
  --grid-line: var(--grid-on-green);
  --chip-bg: var(--ink);  --chip-fg: var(--bone);
  --link-hover: var(--ink);
  --focus: var(--bone);
  color: var(--fg);
  background-color: var(--ground-bg);
  background-image: none;
}


/* 04 EXPOSED GRID + WATERMARK ============================================== */
/* The signature: a vertical hairline every --grid-pitch, overlaid on every section and cell. */
.site-header, .section, .cell, .split__body, .strip { position: relative; }
.section, .cell, .split__body, .strip { overflow: hidden; }
.site-header::before, .section::before, .cell::before, .split__body::before, .strip::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px var(--grid-pitch));
}
.wrap { position: relative; }                  /* content sits above the hairlines, as in the artboards */
.strip > * { position: relative; }
.page-404 .strip::before { display: none; }     /* 404 already has a page-wide grid */

/* Faint logo watermark: a ghost of the logo, as the artboards draw it. Two alpha-only PNGs
   used as masks: the ink layer takes the ground's text colour, the script layer takes the
   logo's neon. At 8-10% opacity the script reads as a faint green tint, exactly as the
   artboards show it, on light grounds too. It is a logo ghost, not an accent, so the green
   rule does not apply here. No blend mode, no invert filter. */
.watermark { display: none; }
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .watermark {
    display: block; position: absolute; pointer-events: none;
    width: var(--wm-size, 520px); aspect-ratio: 1; opacity: var(--wm-opacity, 0.08);
  }
  .watermark::before, .watermark::after {
    content: ""; position: absolute; inset: 0;
    -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat;
            mask-position: center;         mask-size: contain;         mask-repeat: no-repeat;
  }
  .watermark::before { background-color: var(--fg);    -webkit-mask-image: url("assets/thc-mark-ink.png");    mask-image: url("assets/thc-mark-ink.png"); }
  .watermark::after  { background-color: var(--green); -webkit-mask-image: url("assets/thc-mark-script.png"); mask-image: url("assets/thc-mark-script.png"); }
}


/* 05 TYPE ================================================================== */
.display, h1, h2, h3 {
  font-family: var(--font-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: -0.01em;
  overflow-wrap: break-word;
}
.accent { color: var(--accent); }               /* one per headline */

.h-hero     { font-size: var(--fs-hero);        line-height: 0.90; }
.h-404      { font-size: var(--fs-404);         line-height: 0.90; }
.h-barber   { font-size: var(--fs-h1-barber);   line-height: 0.90; }
.h-policies { font-size: var(--fs-h1-policies); line-height: 0.92; }
.h-section  { font-size: var(--fs-h2);          line-height: 0.94; }
.h-section--barber { font-size: var(--fs-h2-barber); }
.h-section--lounge { font-size: var(--fs-h2-lounge); }
.h-section--news   { font-size: var(--fs-h2-news); }

.lede  { font-size: var(--fs-body); line-height: 1.65; color: var(--fg-soft); }
.copy  { font-size: var(--fs-copy); line-height: 1.65; color: var(--fg-soft); }


/* 06 CHIPS, LABELS, RULES, SLOTS =========================================== */
.eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; }
.chip {
  display: inline-block; padding: 9px 16px; white-space: nowrap;
  background: var(--chip-bg); color: var(--chip-fg);
  font: 600 var(--fs-meta)/1 var(--font-mono); letter-spacing: 0.16em;
}
.data {                                         /* green mono data detail, e.g. 29.7989° N */
  color: var(--accent-text);
  font: 500 var(--fs-meta)/1 var(--font-mono); letter-spacing: 0.16em;
}
.meta {                                         /* quiet mono label */
  color: var(--fg-faint);
  font: 600 var(--fs-meta)/1 var(--font-mono); letter-spacing: 0.16em;
}
.rule { height: 1px; background: var(--rule); }

/* Placeholder slots. Text inside is exactly as the artboards mark it. */
.slot {
  border: 1px dashed var(--slot-line); color: var(--accent-text);
  font: 500 var(--fs-meta)/1.6 var(--font-mono); letter-spacing: 0.12em;
}
.slot__note { display: block; color: var(--accent-soft); }

.media-slot { display: flex; align-items: flex-end; }
.media-slot--dark  { background: repeating-linear-gradient(135deg, var(--ink-2) 0 var(--stripe, 12px), var(--ink) var(--stripe, 12px) calc(var(--stripe, 12px) * 2)); }
.media-slot--light { background: repeating-linear-gradient(135deg, var(--concrete-2) 0 12px, var(--concrete) 12px 24px); }
.media-slot > img  { width: 100%; height: 100%; object-fit: cover; }   /* ready for the real photos */


/* 07 BUTTONS + LINKS ======================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  padding: 20px 30px;
  font: 600 var(--fs-nav)/1 var(--font-mono); letter-spacing: 0.10em;
}
.btn--lg    { padding: 24px 36px; }
.btn--block { display: flex; width: 100%; padding: 26px; }

.btn--join    { background: var(--join-bg); color: var(--join-fg); }     /* THE primary action, everywhere */
.btn--ink     { background: var(--ink); color: var(--bone); }
.btn--outline { border: 1px solid var(--bone-55); color: var(--bone); }

.link-label {                                   /* MANAGE MY MEMBERSHIP */
  display: inline-block; padding-bottom: 3px; border-bottom: 1px solid currentColor;
  color: var(--accent-text);
  font: 600 var(--fs-meta)/1 var(--font-mono); letter-spacing: 0.16em;
}
.text-link { color: var(--accent-text); border-bottom: 1px solid currentColor; }
a[href^="tel:"] { white-space: nowrap; }        /* a phone number split across two lines reads as broken */

@media (hover: hover) {
  .btn--join:hover    { background: var(--join-bg-hover); color: var(--join-fg-hover); }
  .btn--ink:hover     { background: var(--green-deep); color: var(--bone); }
  .ground-green .btn--ink:hover { background: var(--bone); color: var(--ink); }
  .btn--outline:hover { background: var(--bone); border-color: var(--bone); color: var(--ink); }
  .link-label:hover, .text-link:hover { color: var(--link-hover); }
}


/* 08 HEADER + NAV ========================================================== */
.site-header {
  z-index: 20; display: flex; align-items: stretch; justify-content: space-between;
  box-sizing: content-box;       /* artboard: 104px bar PLUS its 1px rule */
  height: var(--nav-h); border-bottom: 1px solid var(--rule);
}
.brand {
  position: relative; display: flex; align-items: center; gap: 20px;
  padding: 0 32px 0 var(--gutter); border-right: 1px solid var(--rule);
}
.brand img { width: 50px; height: 50px; }
.brand__text { font: 500 var(--fs-meta)/1.5 var(--font-mono); letter-spacing: 0.16em; }

.nav { position: static; display: flex; align-items: stretch; }
.nav-links {
  --nav-gap: clamp(16px, 2.5vw, 36px);
  position: relative; display: flex; align-items: center; gap: var(--nav-gap); padding: 0 var(--nav-gap);
  font: 500 var(--fs-nav)/1 var(--font-mono); letter-spacing: 0.10em; text-transform: uppercase;
}
.nav-links li { display: flex; align-items: center; gap: var(--nav-gap); }
.nav-links li + li::before { content: "|"; color: var(--pipe); }
.nav-links a { border-bottom: 1px solid transparent; }
.nav-links a[aria-current="page"] { border-bottom-color: currentColor; }

.nav-book {                                     /* deep green at every width, on every ground */
  position: relative; display: flex; align-items: center; padding: 0 40px;
  background: var(--green-deep); color: var(--bone);
  font: 600 var(--fs-nav)/1 var(--font-mono); letter-spacing: 0.10em;
}
.brand:focus-visible, .menu > summary:focus-visible { outline-offset: -6px; }
.nav-book:focus-visible { outline-color: var(--bone); outline-offset: -6px; }

@media (hover: hover) {
  .nav-links a:hover { border-bottom-color: currentColor; }
  .nav-book:hover { background: var(--book-bg-hover); color: var(--book-fg-hover); }
}

/* mobile menu: a native <details> disclosure, no JavaScript. Hidden above the breakpoint. */
.menu { display: none; }

/* 09 SECTIONS ============================================================== */
.section { padding: 96px var(--gutter) 104px; }
.section.ground-light, .section.ground-light-2, .cells { border-bottom: 1px solid var(--ink); }
.section__title { margin-top: 40px; }

/* full-bleed rows of cells divided by 1px ink lines */
.cells { display: grid; gap: 1px; background: var(--ink); }
.cells--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cell { padding: 56px var(--gutter) 64px; }


/* 10 HOME ================================================================== */
.hero { padding-top: 72px; padding-bottom: 48px; }
.hero .watermark {                              /* 520px at 1440, scaling down with the viewport so it never crowds the headline */
  --wm-size: clamp(300px, 36.11vw, 520px);
  right: calc(var(--wm-size) * -0.23); top: 40px;
}
.hero h1 { margin-top: 40px; max-width: 9.4em; }
.hero .rule { margin: 56px 0 32px; }
.hero-foot {
  display: grid; grid-template-columns: minmax(0, 560px) auto; justify-content: space-between;
  grid-template-areas: "copy cta" "tag cta"; column-gap: 64px; row-gap: 20px; align-items: start;
}
.hero-foot--simple { grid-template-areas: "copy cta"; }
.hero-foot__copy { grid-area: copy; }
.hero-foot__tag  { grid-area: tag; color: var(--muted); }
.hero-foot__cta  { grid-area: cta; display: flex; gap: 12px; }

.cell__num   { font: 400 var(--fs-num-cell)/0.9 var(--font-display); color: var(--accent); letter-spacing: -0.01em; }
.cell__title { margin-top: 28px; font-size: var(--fs-title-cell); line-height: 1; }
.cell__copy  { margin-top: 16px; font-size: var(--fs-copy); line-height: 1.65; color: var(--fg-softer); }

.club__title { max-width: 16.4em; }
.club__cols  { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; max-width: 1060px; margin-top: 56px; }
.statement {
  margin-top: 72px; padding: 32px 0; border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent);
  font: 400 var(--fs-statement)/1.25 var(--font-display); letter-spacing: -0.01em; text-transform: uppercase;
}
.statement > span { display: block; max-width: 1100px; }

.price-line { display: flex; align-items: flex-end; gap: 32px; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--rule); }
.price-line__num  { font: 400 var(--fs-price-lg)/0.82 var(--font-display); letter-spacing: -0.02em; }
.price-line__unit { padding-bottom: 22px; font: 600 var(--fs-meta-lg)/1.8 var(--font-mono); letter-spacing: 0.16em; color: var(--muted); }

.perk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 56px; background: var(--ink); border: 1px solid var(--ink); }
.perk-card { padding: 36px 32px 44px; background: var(--concrete); }
.perk-card__num   { font: 600 var(--fs-meta)/1 var(--font-mono); letter-spacing: 0.16em; color: var(--accent-text); }
.perk-card__title { margin-top: 18px; font-size: 1.25rem; line-height: 1.05; }
.perk-card__copy  { margin-top: 14px; }
.perk-grid + .btn { margin-top: 24px; }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 72px; background: var(--hairline); border-top: 1px solid var(--hairline); }
.step { padding: 40px 36px 8px; background: var(--ink); }
.step:nth-child(even) { background: var(--ink-2); }
.step__num   { font: 400 var(--fs-num-step)/0.85 var(--font-display); color: var(--accent); letter-spacing: -0.02em; }
.step__title { margin-top: 28px; font-size: var(--fs-title-step); line-height: 1; }
.step__copy  { margin-top: 16px; color: var(--fg-softer); }

.services-section { padding-bottom: 96px; }
.services-section .section__title { margin-bottom: 56px; }
.services { border-top: 1px solid var(--rule); }
.service {
  display: grid; align-items: center; column-gap: 32px; padding: 36px 0; border-bottom: 1px solid var(--rule);
  grid-template-columns: minmax(0, 26.5%) minmax(0, 1fr) minmax(0, 11.8%) minmax(0, 8.8%);
  grid-template-areas: "name desc price dur";
}
.service__name  { grid-area: name;  font-size: var(--fs-service); line-height: 1; }
.service__desc  { grid-area: desc; }
.service__price { grid-area: price; text-align: right; font: 400 var(--fs-service-price)/1 var(--font-display); letter-spacing: -0.01em; }
.service__dur   { grid-area: dur;   text-align: right; font: 600 var(--fs-meta-lg)/1 var(--font-mono); letter-spacing: 0.16em; color: var(--muted); }
.services + .data { display: block; margin-top: 28px; font-weight: 600; }

/* portrait + text. Used on Home (portrait left) and Barber (portrait right). */
.split { display: grid; grid-template-columns: minmax(0, 41.667%) minmax(0, 1fr); }
.split__media { min-height: 684px; padding: 32px; border-right: 1px solid var(--hairline); }   /* artboard: 620 + 2 x 32 padding */
.split__body  { padding: 96px var(--gutter) 96px 56px; }
.split__body .section__title { margin-top: 36px; }
.split .slot--inline { padding: 12px 14px; line-height: 1.5; }
.bio-slot { max-width: 562px; margin-top: 40px; padding: 20px; line-height: 1.5; }   /* artboard: 520 + padding + border */
.split__body .lede { max-width: 560px; margin-top: 32px; }
.split__body .btn-row { margin-top: 40px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn--meet { padding: 18px 28px; }

.news { padding-top: 80px; padding-bottom: 88px; border-bottom: 0; }
.news__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(32px, 5.5vw, 80px); align-items: end; }
.news .section__title { margin-top: 32px; }
.news .lede { max-width: 560px; margin-top: 24px; color: var(--bone); }
.news-form { display: flex; }
.news-form input {
  flex: 1; min-width: 0; padding: 20px 18px; background: var(--bone); color: var(--ink);
  font: 400 var(--fs-copy)/1 var(--font-mono);
}
.news-form input::placeholder { color: var(--muted); opacity: 1; }
.news-form .btn { padding: 20px 26px; white-space: nowrap; }


/* 11 MEMBERSHIP ============================================================ */
.hero--member { padding-bottom: 56px; }
.hero--member .watermark { --wm-size: clamp(300px, 34.72vw, 500px); right: calc(var(--wm-size) * -0.28); top: 60px; }
.hero--member .rule { margin-top: 48px; }
.btn--member { padding: 22px 34px; }

/* The giant $20 lives INSIDE the h1 so the heading reads "$20 a month. The whole room."
   Subgrid lets the billing terms sit under the words while staying outside the heading. */
.price-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(24px, 3.9vw, 56px); align-items: end; margin-top: 40px; }
.price-hero h1 {
  grid-column: 1 / -1; grid-row: 1 / span 2; margin: 0; max-width: none;
  display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; align-items: end;
  font-size: var(--fs-h1-member); line-height: 0.92;
}
.price-hero__num   { grid-column: 1; grid-row: 1 / span 2; font-size: var(--fs-price-hero); line-height: 0.78; letter-spacing: -0.03em; }
.price-hero__words { grid-column: 2; grid-row: 1; }
.price-hero__terms {
  grid-column: 2; grid-row: 2; margin-top: 20px; padding-bottom: 34px;
  font: 600 var(--fs-meta-lg)/1.8 var(--font-mono); letter-spacing: 0.16em; color: var(--muted);
}

.perk-row { padding-top: 64px; padding-bottom: 64px; }
.perk-row.ground-dark { border-bottom: 1px solid var(--ink); }
.perk-row .wrap {
  display: grid; align-items: center; column-gap: clamp(24px, 3.9vw, 56px);
  grid-template-columns: minmax(max-content, 140fr) minmax(0, 520fr) minmax(0, 588fr);
}
.perk-row__num   { font: 400 var(--fs-num-row)/0.82 var(--font-display); color: var(--accent); letter-spacing: -0.02em; }
.perk-row__title { font-size: var(--fs-title-row); line-height: 0.96; }
.perk-row__copy  { max-width: 520px; }

.faq .section__title { margin-bottom: 56px; }
.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.faq-item { padding: 32px; border: 1px solid var(--rule); }
.faq-item h3 { font-size: var(--fs-title-step); line-height: 1.05; }
.faq-item p  { margin-top: 14px; }
.faq-grid + .btn { margin-top: 32px; padding: 28px; }
.after-cta { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin-top: 16px; }
.after-cta .meta { color: var(--muted); }


/* 12 BOOK — the locked door ================================================ */
.page-book { display: flex; flex-direction: column; }
.page-book main { flex: 1; display: flex; flex-direction: column; }
.door { flex: 1; min-height: 1120px; padding-top: 140px; padding-bottom: 160px; }   /* artboard: 820 + its padding */
.door .watermark { right: -150px; bottom: -140px; --wm-opacity: 0.09; }
.door .wrap { max-width: 1080px; }
.door h1 { margin-top: 56px; }
.door .rule { margin: 64px 0 40px; }
.door .lede { max-width: 600px; }
.door .btn { margin-top: 44px; }
.door__member { margin-top: 44px; color: var(--bone-62); font: 500 var(--fs-meta-lg)/1 var(--font-mono); letter-spacing: 0.16em; }
.door .link-label { margin-top: 20px; font-size: var(--fs-meta-lg); }

.strip {                                        /* slim footer: Book and 404 */
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px;
  padding: 28px var(--gutter); border-top: 1px solid var(--rule);
  color: var(--bone-62); font: 500 var(--fs-meta)/1 var(--font-mono); letter-spacing: 0.16em;
}
.strip__end { display: flex; gap: 24px; }
@media (hover: hover) { .strip a:hover { color: var(--green-lit); } }


/* 13 BARBER ================================================================ */
.split--barber { grid-template-columns: minmax(0, 1fr) minmax(0, 47.222%); border-bottom: 1px solid var(--ink); }
.split--barber .split__body  { padding: 104px 56px 104px var(--gutter); }
.split--barber .split__media { --stripe: 14px; min-height: 884px; border-right: 0; border-left: 1px solid var(--rule); }   /* 820 + 64 */
.split--barber h1 { margin-top: 40px; }
.split--barber .rule { margin: 48px 0 36px; }
.split--barber .bio-slot { max-width: none; margin-top: 0; padding: 28px; line-height: 1.6; }
.split--barber .lede { max-width: 520px; }
.split--barber .btn-row { margin-top: 44px; }
.split--barber .slot--inline { padding: 14px 16px; }

.lounge { padding-top: 88px; padding-bottom: 96px; }
.lounge .section__title { margin: 36px 0 48px; }
.lounge-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--ink); border: 1px solid var(--ink); }
.lounge-tile { height: 372px; padding: 16px; }   /* 340 + 32 */
.lounge-tile .slot { padding: 10px 12px; font-size: 0.625rem; line-height: 1.5; }


/* 14 POLICIES ============================================================== */
.hero--policies { padding-top: 88px; padding-bottom: 72px; }
.hero--policies .lede { max-width: 540px; margin-top: 36px; }
.policy-list { padding-top: 0; padding-bottom: 96px; border-bottom: 0; }
.policy {
  display: grid; grid-template-columns: minmax(0, 120fr) minmax(0, 400fr) minmax(0, 728fr);
  column-gap: clamp(24px, 3.9vw, 56px); padding: 56px 0; border-bottom: 1px solid var(--rule);
  scroll-margin-top: 24px;
}
.policy__num { font: 600 var(--fs-meta-lg)/1 var(--font-mono); letter-spacing: 0.16em; color: var(--accent-text); }
.policy h2   { font-size: var(--fs-h2-policy); line-height: 1.05; }
.policy .slot { max-width: 670px; padding: 24px; align-self: start; }   /* 620 + padding + border */
.policy-list .after-cta { margin-top: 40px; }


/* 15 404 =================================================================== */
.page-404 { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.page-404::before {                             /* the grid covers the whole page here */
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px var(--grid-pitch));
}
.lost { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 64px var(--gutter); }
.lost__logo  { width: 80px; height: 80px; }
.lost .data  { margin-top: 36px; font-size: var(--fs-meta-lg); }
.lost h1     { margin-top: 28px; max-width: 1100px; }
.lost .rule  { max-width: 1100px; margin: 48px 0 32px; }
.lost .lede  { max-width: 520px; }
.lost .btn   { align-self: flex-start; margin-top: 40px; padding: 20px 32px; }
.page-404 .strip { position: relative; padding-top: 24px; padding-bottom: 24px; }


/* 16 FOOTER ================================================================ */
.site-footer { padding-top: 80px; padding-bottom: 40px; }
.site-footer .watermark { right: -90px; bottom: -110px; --wm-size: 420px; --wm-opacity: 0.10; }
.footer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; }
.footer-logo { width: 76px; height: 76px; }      /* bone knockout, no box: sized to the footprint of the artboard's boxed logo */
.footer-name { margin-top: 24px; font: 400 var(--fs-foot-name)/1.15 var(--font-display); letter-spacing: -0.01em; text-transform: uppercase; }
.footer-grid .data { display: block; margin-top: 14px; }
.footer-nav ul { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; font: 500 var(--fs-nav)/1 var(--font-mono); letter-spacing: 0.10em; text-transform: uppercase; }
.footer-nav .is-login { color: var(--accent-text); }
.footer-contact { font-size: var(--fs-nav); line-height: 2; color: var(--fg-soft); text-transform: uppercase; }
.footer-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--rule); color: var(--fg-faint); font: 500 var(--fs-meta)/1 var(--font-mono); letter-spacing: 0.16em; }
.footer-base ul { display: flex; gap: 24px; }
@media (hover: hover) { .site-footer a:hover { color: var(--green-lit); } }


/* 17 MOBILE — the one breakpoint =========================================== */
/* Arranged to match the 390 artboards. Gutter is 16px per the brief. */
@media (max-width: 860px) {
  :root {
    --nav-h: 72px;
    --grid-pitch: 25vw;          /* 97.5px at 390: four columns, as drawn */
    --fs-body: 0.875rem;         /* 14 */
    --fs-copy: 0.8125rem;        /* 13 */
    --fs-nav:  0.75rem;          /* 12 */
    /* Labels are one step larger than the 390 artboards draw them (10 -> 11, and 9 -> 10 for the
       long hero chip). Deliberate: the artboard sizes were too small to read on a phone in daylight. */
    --fs-meta: 0.6875rem;        /* 11 (artboard: 10) */
    --fs-meta-lg: 0.6875rem;     /* 11 (artboard: 10) */
  }

  /* header */
  .brand { gap: 12px; padding-right: 14px; border-right: 0; }
  .brand img { width: 44px; height: 44px; }
  .nav-links { display: none; }
  .nav-book { padding: 0 22px; }
  .menu { display: block; }
  .menu > summary {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    position: relative; height: 100%; padding: 0 16px; border-left: 1px solid var(--rule);
    cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent;
  }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu .bar { display: block; width: 20px; height: 1px; background: var(--fg); }
  .menu[open] .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu[open] .bar:nth-child(2) { opacity: 0; }
  .menu[open] .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .menu-panel {
    position: absolute; left: 0; right: 0; top: calc(100% + 1px); z-index: 30;
    background-color: var(--ground-bg); border-bottom: 1px solid var(--rule);
    font: 500 0.8125rem/1 var(--font-mono); letter-spacing: 0.10em; text-transform: uppercase;
  }
  .menu-panel li + li { border-top: 1px solid var(--grid-line); }
  .menu-panel a { display: block; padding: 22px var(--gutter); }
  .menu-panel a[aria-current="page"] { color: var(--accent-text); }
  .menu-panel a:focus-visible { outline-offset: -6px; }

  /* shared */
  .section { padding: 48px var(--gutter) 56px; }
  .section__title { margin-top: 24px; }
  .eyebrow { flex-direction: column; align-items: flex-start; gap: 10px; }
  .chip { padding: 8px 12px; white-space: normal; }
  .chip--long { padding: 8px 10px; font-size: 0.625rem; line-height: 1.4; letter-spacing: 0.08em; }   /* 10 (artboard: 9). Tracking tightened so the larger text still fits one line from 375px up */
  .btn, .btn--lg, .btn--meet { display: flex; width: 100%; padding: 20px; }
  .btn--block { padding: 22px; }
  .btn-row { flex-direction: column; gap: 10px; }
  .cells--3 { grid-template-columns: 1fr; }
  .cell { padding: 32px var(--gutter) 36px; }

  /* home */
  .hero { padding-top: 32px; padding-bottom: 36px; }
  .hero .watermark { right: -90px; top: 120px; --wm-size: 300px; }
  .hero h1 { margin-top: 24px; max-width: none; }
  .hero .rule { margin: 28px 0 20px; }
  .hero-foot, .hero-foot--simple { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "cta" "tag"; row-gap: 0; }
  .hero-foot--simple { grid-template-areas: "copy" "cta"; }
  .hero-foot__cta { flex-direction: column; gap: 10px; margin-top: 24px; }
  .hero-foot__tag { margin-top: 16px; }

  .cell__title { margin-top: 18px; }
  .cell__copy  { margin-top: 12px; font-size: 0.875rem; }

  .club__title { max-width: none; }
  .club__cols  { grid-template-columns: 1fr; gap: 20px; margin-top: 28px; }
  .statement   { margin-top: 36px; padding: 22px 0; }

  .price-line { gap: 16px; margin-top: 32px; padding-top: 24px; }
  .price-line__unit { padding-bottom: 12px; letter-spacing: 0.14em; }
  .perk-grid { grid-template-columns: 1fr; margin-top: 32px; }
  .perk-card { padding: 24px 20px 28px; }
  .perk-card__title { margin-top: 12px; }
  .perk-card__copy  { margin-top: 10px; }
  .perk-grid + .btn { margin-top: 20px; }

  .steps { grid-template-columns: 1fr; margin-top: 36px; }
  .step, .step:nth-child(even) { padding: 28px 0 8px; background: var(--ink); }
  .step__title { margin-top: 18px; }
  .step__copy  { margin-top: 12px; }

  .services-section { padding-bottom: 48px; }
  .services-section .section__title { margin-bottom: 32px; }
  .service { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "desc desc" "dur dur"; align-items: baseline; column-gap: 16px; padding: 24px 0; }
  .service__desc { margin-top: 12px; }
  .service__dur  { margin-top: 8px; text-align: left; }
  .services + .data { margin-top: 20px; }

  .split, .split--barber { grid-template-columns: 1fr; }
  .split__media { min-height: 0; height: 332px; padding: 16px; border-right: 0; border-bottom: 1px solid var(--hairline); }
  .split__body, .split--barber .split__body { padding: 48px var(--gutter) 56px; }
  .split__body .section__title { margin-top: 24px; }
  .split .slot--inline, .split--barber .slot--inline { padding: 10px 12px; }
  .bio-slot { max-width: none; margin-top: 28px; padding: 16px; }
  .split__body .lede { max-width: none; margin-top: 24px; }
  .split__body .btn-row { margin-top: 28px; }

  .news { padding-top: 44px; padding-bottom: 48px; }
  .news__grid { grid-template-columns: 1fr; gap: 24px; }
  .news .section__title { margin-top: 24px; line-height: 0.96; }
  .news .lede { max-width: none; margin-top: 18px; }
  .news-form { flex-direction: column; gap: 10px; }
  .news-form input { padding: 17px 16px; font-size: 1rem; }   /* 16px stops iOS zooming the page on focus */
  .news-form .btn { padding: 18px; font-size: 0.75rem; }

  /* membership */
  .hero--member { padding-bottom: 36px; }
  .hero--member .watermark { display: none; }                  /* not drawn on the 390 artboard */
  .hero--member .rule { margin-top: 28px; }
  .price-hero { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
  .price-hero h1 { display: block; grid-row: auto; margin-top: 0; }
  .price-hero__num   { display: block; }
  .price-hero__words { display: block; margin-top: 20px; }
  .price-hero__terms { grid-column: 1; grid-row: auto; margin-top: 16px; padding-bottom: 0; letter-spacing: 0.14em; }

  .perk-row { padding-top: 36px; padding-bottom: 40px; }
  .perk-row .wrap { display: block; }
  .perk-row__title { margin-top: 16px; }
  .perk-row__copy  { max-width: none; margin-top: 14px; font-size: 0.875rem; }

  .faq .section__title { margin-bottom: 28px; }
  .faq-grid { grid-template-columns: 1fr; gap: 14px; }
  .faq-item { padding: 22px; }
  .faq-item p { margin-top: 12px; }
  .faq-grid + .btn { margin-top: 24px; padding: 24px; }
  .after-cta { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 16px; }

  /* book */
  .door { min-height: 772px; padding-top: 48px; padding-bottom: 64px; }
  .door .watermark { right: -90px; bottom: -70px; --wm-size: 280px; }
  .door h1 { margin-top: 32px; }
  .door .rule { margin: 32px 0 24px; }
  .door .btn { margin-top: 28px; padding: 22px; }
  .door__member { margin-top: 36px; font-size: 0.6875rem; line-height: 1.7; letter-spacing: 0.14em; }
  .door .link-label { margin-top: 16px; font-size: 0.6875rem; }
  .strip { padding: 20px var(--gutter); line-height: 1.8; letter-spacing: 0.14em; }
  .strip .hide-mobile { display: none; }

  /* barber */
  .split--barber .split__media { order: -1; min-height: 0; height: 452px; border-left: 0; border-bottom: 1px solid var(--rule); }
  .split--barber h1 { margin-top: 24px; }
  .split--barber .rule { margin: 28px 0 24px; }
  .split--barber .bio-slot { padding: 18px; }
  .split--barber .btn-row { margin-top: 28px; }
  .lounge { padding-top: 48px; padding-bottom: 56px; }
  .lounge .section__title { margin: 24px 0 28px; }
  .lounge-grid { grid-template-columns: 1fr; }
  .lounge-tile { height: 248px; padding: 14px; }
  .lounge-tile .slot { padding: 8px 10px; font-size: 0.6875rem; }   /* 11 (artboard: 10) */

  /* policies */
  .hero--policies { padding-top: 40px; padding-bottom: 36px; }
  .hero--policies .lede { max-width: none; margin-top: 24px; }
  .policy-list { padding-top: 0; padding-bottom: 48px; }     /* re-assert: the mobile .section padding above would otherwise win */
  .policy { display: block; padding: 32px 0; }
  .policy h2 { margin: 14px 0 16px; }
  .policy .slot { max-width: none; padding: 18px; }
  .policy-list .after-cta { margin-top: 28px; }

  /* 404 */
  .lost { padding: 48px var(--gutter); }
  .lost__logo { width: 66px; height: 66px; }
  .lost .data { margin-top: 28px; }
  .lost h1    { margin-top: 20px; }
  .lost .rule { margin: 28px 0 24px; }
  .lost .btn  { align-self: stretch; margin-top: 28px; padding: 20px; }
  .page-404 .strip { padding-top: 20px; padding-bottom: 20px; line-height: 1.6; }
  .strip__name { display: block; }
  .strip__sep  { display: none; }

  /* footer */
  .site-footer { padding-top: 48px; padding-bottom: 28px; }
  .site-footer .watermark { right: -70px; bottom: -80px; --wm-size: 260px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-logo { width: 66px; height: 66px; }
  .footer-name { margin-top: 20px; }
  .footer-grid .data { margin-top: 12px; }
  .footer-nav ul { flex-direction: row; flex-wrap: wrap; gap: 16px; }
  .footer-contact { font-size: 0.75rem; }
  .footer-base { flex-direction: column; gap: 8px; margin-top: 36px; padding-top: 16px; line-height: 1.8; letter-spacing: 0.14em; }
  .footer-base ul { flex-wrap: wrap; gap: 4px 0; }
  .footer-base li + li::before { content: "·"; margin: 0 0.7em; }     /* dot separators, as on the 390 artboard */
}