/* ===========================================================================
   Cookie Golf Studios - styles-v2.css
   Redesign variant for index-v2.html. Vanilla CSS, no framework, no build step.

   Tokens are copied verbatim from website-build/cookie-golf-design-tokens.css,
   which is the canonical source. Four tokens are ADDED and marked PROPOSED.
   No literal hex appears below the token block.

   What changed against styles.css, and why
   ---------------------------------------------------------------------------
   1. SECTION TEMPO. Nine sections now use six different layout families instead
      of one repeated seven times. Section padding alternates lg / md / sm so
      the page breathes and compresses instead of ticking.
   2. ACCENT BUDGET ~5%. The brand has no marketing accent colour: 6.3 reserves
      the functional greens for interface only. So the accent here is INVERSION.
      Exactly one surface on the page is Bone-ground: the founding membership
      band. Nothing else competes with it.
   3. A MIDDLE TYPE REGISTER. --text-mid sits between subhead and body and does
      the work that previously had to be done by making something a headline.
   4. CTA HIERARCHY. Header and footer CTAs drop to ghost. One filled button per
      screenful. The founding CTA is the only inverted button on the page.
   5. EYEBROWS. Six reduced to two.
   6. THE IDENTITY REACHES THE LAYOUT. Torn top edge and the cookie mark as a
      watermark on the founding band, picking up the brush artwork in 5.2.
   =========================================================================== */

:root {

  /* ---------- Colour: core palette (6.1) ---------- */
  --color-surface:            #0B0B0B;
  --color-ink:                #EDE6D8;

  /* ---------- Colour: supporting neutrals (6.2) ---------- */
  --color-surface-raised:     #1C1C1C;
  --color-text-muted:         #8A857C;
  --color-text-muted-print:   #5A554D;
  --color-text-muted-safe:    #A9A49A;
  --color-border:             #65635D;
  --color-divider-hairline:   #383734;

  /* ---------- Colour: functional, interface only (6.3) ---------- */
  --color-state-open:         #7C9A6B;
  --color-state-holding:      #B89A5E;
  --color-state-closed:       #B0645A;

  --color-focus:              #EDE6D8;
  --focus-ring-width:         2px;

  /* ---------- Type families (7.2, 7.3) ---------- */
  --font-display: "Jost", "Futura", "Century Gothic", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ---------- Type scale (7.4) ---------- */
  --text-hero:      clamp(2.5rem,  6vw + 1rem, 6rem);
  --text-section:   clamp(1.75rem, 3vw + 0.5rem, 3rem);
  --text-subhead:   clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem);
  --text-eyebrow:   clamp(0.75rem, 0.2vw + 0.7rem, 0.8125rem);
  --text-lead:      clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
  --text-body:      clamp(1rem, 0.3vw + 0.95rem, 1.0625rem);
  --text-small:     clamp(0.8125rem, 0.2vw + 0.78rem, 0.875rem);
  --text-button:    0.9375rem;
  --text-figure:    clamp(1.75rem, 3vw + 1rem, 3.5rem);

  /* ---------- Tracking (7.2, 7.3, 14.2) ---------- */
  --track-hero:     0.12em;
  --track-section:  0.10em;
  --track-eyebrow:  0.15em;
  --track-button:   0.12em;
  --track-figure:   0.02em;
  --track-body:     0;

  /* ---------- Weights ---------- */
  --weight-display: 700;
  --weight-medium:  500;
  --weight-body:    400;

  /* ---------- Line height (7.2, 7.3) ---------- */
  --leading-display: 1.15;
  --leading-body:    1.55;

  /* ---------- Measure (7.3) ---------- */
  --measure: 68ch;

  /* ---------- Shape (8.3, 13.4) ---------- */
  --radius:        4px;
  --radius-none:   0;

  /* ---------- Component sizing (13.4, 14.2) ---------- */
  --button-min-height: 48px;
  --tap-target-min:    44px;
  --card-padding:      clamp(1.5rem, 3vw, 2rem);
  --border-hairline:   1px;

  /* ---------- Motion (13.4, 14.2) ---------- */
  --duration-fast: 150ms;
  --duration-slow: 250ms;
  --ease:          cubic-bezier(0.16, 1, 0.3, 1);

  /* =========================================================================
     PROPOSED ADDITIONS. Not yet in the guidelines. If this direction is
     adopted, these four need writing into section 7.4 and section 8 and then
     into cookie-golf-design-tokens.css. Nothing else here is new.
     ========================================================================= */

  /* 7.4 gap: nothing sits between --text-subhead and --text-body, so every
     "this matters more" had to become a headline. This is that missing step.
     Used for tier names, FAQ questions, practical labels, figure captions. */
  --text-mid:   clamp(1.0625rem, 0.5vw + 0.95rem, 1.1875rem);
  --track-mid:  0.06em;

  /* Section rhythm. Three sizes so the page can change tempo. */
  --sec-lg: clamp(5rem, 9vw, 9rem);
  --sec-md: clamp(3.5rem, 6vw, 6rem);
  --sec-sm: clamp(2.5rem, 4vw, 4rem);

  /* Layout */
  --wrap:   1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --hdr-h:  72px;

  /* The announcement bar sits inside the header, so anything measuring the
     header has to add it. Kept separate from --hdr-h because that is also the
     header ROW's min-height, which the bar must not inflate. Zero unless a bar
     is actually in the markup and undismissed: a dismissed bar is display:none
     but still in the DOM, so :has() alone would keep reserving its height. */
  --abar-h: 0px;
}
/* Fallbacks only: script.js measures the real bar and overwrites this. These
   were ported from styles.css as 39px and 35px, which was that sheet's bar.
   This sheet restyles it, and at 900px and below gives the link a 44px tap
   target, so the real heights are 49px and 61px. Hardcoded heights drift the
   moment the bar is restyled, which is why the script measures instead. */
:root:has(.abar):not(.abar-off) { --abar-h: 49px; }
@media (max-width: 900px) {
  :root:has(.abar):not(.abar-off) { --abar-h: 61px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  :root {
    --color-surface: #FFFFFF;
    --color-ink: #0B0B0B;
    --color-surface-raised: #FFFFFF;
    --color-text-muted: #5A554D;
  }
  .grain, .hdr, .room__nav, .close { display: none; }
}

/* ===========================  base  ==================================== */

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

/* An author display rule beats the UA stylesheet's [hidden] { display:none },
   so .check{display:flex} was keeping the marketing consent box on screen for
   corporate enquiries even though script.js sets consentRow.hidden = true. The
   privacy notice and the lead-forms runbook both state that the corporate form
   does not show the box at all, so this guard is load-bearing, not tidying. */
[hidden] { display: none !important; }


html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr-h) + var(--abar-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

::selection { background: var(--color-ink); color: var(--color-surface); }

:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-ink); color: var(--color-surface);
  padding: 12px 20px; font-size: var(--text-small);
}
.skip:focus { left: 8px; top: 8px; }

/* 8.5 grain. 4.5% over the whole page, fixed so it does not scroll with content. */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* ===========================  type  ==================================== */

.h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-section);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: var(--track-section);
  text-transform: uppercase;
  text-wrap: balance;
}
.h2--lg { font-size: clamp(2rem, 4vw + 0.5rem, 3.75rem); }

.eyebrow {
  margin: 0 0 1.25rem;
  font-size: var(--text-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted-safe);
}

.lead {
  font-size: var(--text-lead);
  color: var(--color-text-muted-safe);
  max-width: 46ch;
  text-wrap: pretty;
}

.link {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-mid);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: var(--border-hairline) solid var(--color-border);
  transition: border-color var(--duration-fast) var(--ease),
              transform var(--duration-fast) var(--ease);
}
.link:hover { border-color: var(--color-ink); transform: translateX(3px); }

/* ===========================  buttons  ================================= */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--button-min-height);
  padding: 0 1.75rem;
  border: var(--border-hairline) solid transparent;
  border-radius: var(--radius-none);
  font-family: var(--font-display);
  font-size: var(--text-button);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-button);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease),
              transform var(--duration-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

/* Filled. One per screenful. */
.btn--primary { background: var(--color-ink); color: var(--color-surface); }
.btn--primary:hover { background: var(--color-text-muted-safe); }

/* Secondary. Everything that is not the single most wanted action. */
.btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-border); }
.btn--ghost:hover { border-color: var(--color-ink); background: var(--color-surface-raised); }

/* Inverted. Used once, on the Bone band. */
.btn--invert { background: var(--color-surface); color: var(--color-ink); }
.btn--invert:hover { background: var(--color-surface-raised); }

.btn--sm  { min-height: 40px; padding: 0 1.125rem; font-size: var(--text-small); }
.btn--lg  { min-height: 56px; padding: 0 2.25rem; }
.btn--full { width: 100%; }

/* ===========================  header  ================================== */

.hdr {
  position: fixed; inset: 0 0 auto; z-index: 50;
  transition: background-color var(--duration-slow) var(--ease),
              border-color var(--duration-slow) var(--ease);
  border-bottom: var(--border-hairline) solid transparent;
}
.hdr.is-stuck {
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--color-divider-hairline);
}

.abar { border-bottom: var(--border-hairline) solid color-mix(in srgb, var(--color-ink) 12%, transparent); }
.abar__in {
  max-width: var(--wrap); margin-inline: auto;
  padding: 8px var(--gutter);
  display: flex; align-items: center; gap: 1rem;
}
.abar__txt {
  margin: 0; flex: 1;
  font-size: var(--text-small);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-muted-safe);
}
/* The bar must stay on one line at 390px, or it doubles the header height and
   pushes the hero headline off the first screen. */
@media (max-width: 640px) {
  .abar__wide { display: none; }
  .abar__txt { font-size: 0.75rem; letter-spacing: 0.04em; }
  .abar__in { padding-inline: var(--gutter); gap: 0.5rem; }
}
.abar__txt a { color: var(--color-ink); text-underline-offset: 4px; }
.abar__x {
  background: none; border: 0; color: var(--color-text-muted-safe);
  width: var(--tap-target-min); height: 32px; padding: 0; cursor: pointer;
  display: grid; place-items: center;
}
.abar__x svg { width: 14px; height: 14px; }
.abar__x:hover { color: var(--color-ink); }
.abar-off .abar { display: none; }

/* Scroll progress. CSS scroll-driven, no listener. Degrades to nothing. */
.hdr__prog {
  display: block; height: 2px; width: 0;
  background: var(--color-ink);
  transform-origin: 0 50%;
}
@supports (animation-timeline: scroll()) {
  .hdr__prog {
    width: 100%; transform: scaleX(0);
    animation: prog linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes prog { to { transform: scaleX(1); } }
}

.hdr__in {
  max-width: var(--wrap); margin-inline: auto;
  padding: 14px var(--gutter);
  display: flex; align-items: center; gap: 1.5rem;
  min-height: var(--hdr-h);
}
.hdr__mark { flex: none; }
.hdr__mark img { height: 34px; width: auto; }

.nav { margin-left: auto; display: flex; gap: clamp(1rem, 2.5vw, 2.25rem); }
.nav a {
  font-family: var(--font-display);
  font-size: var(--text-small);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text-muted-safe);
  padding: 6px 0;
  border-bottom: var(--border-hairline) solid transparent;
  transition: color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.nav a:hover { color: var(--color-ink); border-bottom-color: var(--color-ink); }

.hdr__act { display: flex; align-items: center; gap: 0.75rem; }

.burger {
  display: none; background: none; border: 0; cursor: pointer;
  width: var(--tap-target-min); height: var(--tap-target-min);
  padding: 0; place-items: center; gap: 5px; flex-direction: column;
}
.burger span { display: block; width: 22px; height: 1.5px; background: var(--color-ink); transition: transform var(--duration-fast) var(--ease); }

@media (max-width: 900px) {
  /* Anchored to the header box itself, so it always opens directly beneath the
     whole header including the announcement bar, whatever height that ends up. */
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    margin: 0; flex-direction: column; gap: 0;
    background: var(--color-surface);
    border-top: var(--border-hairline) solid var(--color-divider-hairline);
    border-bottom: var(--border-hairline) solid var(--color-divider-hairline);
    padding: 0 var(--gutter) 0.5rem;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease);
    height: auto;
  }
  .nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav a { font-size: var(--text-subhead); padding: 14px 0; border-bottom-color: var(--color-divider-hairline); }
  .burger { display: flex; }
  .hdr__act { margin-left: auto; }
  .hdr.has-nav { background: var(--color-surface); }
}

/* ===========================  reveal  ================================== */

.reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
/* ==========================================================================
   FOUNDING CARD
   A reminder that slides up once the visitor has scrolled past the founding
   band, and stands down while the form is on screen. Charcoal, not Bone: the
   founding band is the page's one inverted surface and this points back to it
   rather than competing with it. Motion is 13.4's fade and small translate.
   visibility rides the transition so that when it is off it is also out of the
   tab order and the accessibility tree, not just transparent.
   ========================================================================== */
.fcard {
  position: fixed; z-index: 40;          /* under the header (50), so an open menu covers it */
  left: 0; right: 0; bottom: 0;
  background: var(--color-surface-raised);
  border-top: var(--border-hairline) solid color-mix(in srgb, var(--color-ink) 14%, transparent);
  padding-bottom: env(safe-area-inset-bottom);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity var(--duration-slow) var(--ease),
              transform var(--duration-slow) var(--ease),
              visibility 0s linear var(--duration-slow);
}
.fcard.is-on {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--duration-slow) var(--ease),
              transform var(--duration-slow) var(--ease),
              visibility 0s;
}
.fcard__in {
  max-width: var(--wrap); margin-inline: auto;
  padding: 0.625rem var(--gutter);
  display: flex; align-items: center; gap: 0.5rem;
}
/* the whole card is the link, so the hit area is the card, not a small button */
.fcard__link {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 0.875rem;
  min-height: var(--tap-target-min);
  color: var(--color-ink); text-decoration: none;
}
.fcard__mark { width: 30px; height: auto; flex: 0 0 auto; }
.fcard__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fcard__h {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-button);
  letter-spacing: var(--track-button);
  text-transform: uppercase;
}
.fcard__h svg { width: 16px; height: 16px; flex: 0 0 auto; transition: transform var(--duration-fast) var(--ease); }
.fcard__link:hover .fcard__h svg,
.fcard__link:focus-visible .fcard__h svg { transform: translateX(3px); }
/* block, not flex: it holds a span mid-sentence, and flex would trim the spaces
   either side of it */
.fcard__sub { display: block; font-size: var(--text-small); color: var(--color-text-muted-safe); }
.fcard__x {
  flex: 0 0 auto;
  width: var(--tap-target-min); height: var(--tap-target-min);
  display: grid; place-items: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--color-text-muted-safe);
  transition: color var(--duration-fast) var(--ease);
}
.fcard__x:hover { color: var(--color-ink); }
.fcard__x svg { width: 14px; height: 14px; }

/* Phones: one line each, or the bar reaches 111px, which is 13% of a 390x844
   screen for a reminder. The mark goes (the header already carries the brand)
   and the type tightens; the words stay exactly as approved. */
@media (max-width: 640px) {
  .fcard__mark { display: none; }
  .fcard__in { padding-block: 0.5rem; }
  .fcard__h { font-size: 0.875rem; letter-spacing: 0.08em; }
  .fcard__sub { font-size: 0.78rem; }
}

/* desktop: a card in the corner rather than a bar across the page */
@media (min-width: 901px) {
  .fcard {
    left: auto; right: var(--gutter); bottom: var(--gutter);
    width: min(470px, calc(100vw - 2 * var(--gutter)));   /* one line each; at 400px both wrapped and it grew to 122px */
    border: var(--border-hairline) solid color-mix(in srgb, var(--color-ink) 14%, transparent);
    padding-bottom: 0;
  }
  .fcard__in { padding: 0.875rem 0.75rem 0.875rem 1.125rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fcard, .fcard.is-on { transform: none; }
}

/* ==========================================================================
   PAGE TRANSITIONS
   Native View Transitions. Both documents in a navigation have to opt in, and
   terms, privacy and the investor page already do via styles.css, so this has
   to be here too or the homepage becomes the one page that does not fade.
   ========================================================================== */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .22s;
  animation-timing-function: var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  /* the universal selector cannot reach these, they are not elements */
  @view-transition { navigation: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}

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

/* ============  1 · HERO. family: full-bleed image  ===================== */

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex; align-items: flex-end;
  padding-block: var(--sec-lg) var(--sec-md);
  isolation: isolate;
}
.hero__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, var(--color-surface) 2%, color-mix(in srgb, var(--color-surface) 55%, transparent) 42%, transparent 78%),
    linear-gradient(to right, color-mix(in srgb, var(--color-surface) 78%, transparent), transparent 62%);
}

/* Portrait viewports. The photograph is 1.9:1. Filling the full height of a
   phone forces it to about 1,600px wide, so the 390px on show is a narrow
   vertical slice. At the desktop's 60% that slice was the poster wall and the
   simulator was cropped out entirely. Moving the slice onto the screen is not
   enough either: the screen alone is then wider than the phone, no edge of it
   shows, and it reads as a photograph of a real fairway, not a bay indoors.

   So on portrait the photograph stops filling the hero. It sits under the
   header in a box small enough that the whole screen, its black surround and
   the mat fit across the width, and the text starts below the screen instead
   of on top of it. On a 375x667 phone that pushes the hero button below the
   first screen. That is the accepted cost: the header's Book a bay stays pinned
   and visible, and the simulator is the point of the photograph.

   The box is the smaller of 120vw (phones) and 62dvh (portrait tablets, which
   would otherwise get a box taller than the screen). The screen's lower edge
   falls at 57% of the box height, so the text starts at 60%.
   Keyed to aspect ratio because the problem is the viewport's shape, not size.
   A mask fades the photograph out at its own bottom edge, so the fade follows
   the image rather than the hero, whose height now varies with its text. */
@media (max-aspect-ratio: 1/1) {
  .hero {
    --hero-img-h: min(120vw, 62dvh);
    padding-top: calc(var(--hdr-h) + var(--abar-h) + var(--hero-img-h) * 0.6);
  }
  .hero__img {
    inset: calc(var(--hdr-h) + var(--abar-h)) 0 auto 0;
    height: var(--hero-img-h);
    object-position: 2% 50%;
    /* a mask reads alpha only, so any opaque token will do; this sheet keeps
       literal hex out of everything below the token block */
    -webkit-mask-image: linear-gradient(to bottom, var(--color-surface) 58%, transparent 96%);
            mask-image: linear-gradient(to bottom, var(--color-surface) 58%, transparent 96%);
  }
  .hero__scrim { display: none; }
}

.hero__h1 {
  margin: 0 0 1.5rem;
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: var(--weight-display);
  line-height: 1.02;
  letter-spacing: var(--track-hero);
  text-transform: uppercase;
}
.mask { display: block; overflow: hidden; }
.mask > span {
  display: block;
  animation: rise 900ms var(--ease) both;
}
.mask:nth-child(2) > span { animation-delay: 90ms; }
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .mask > span { animation: none; } }

.hero__lead {
  max-width: 44ch; margin: 0 0 2.25rem;
  font-size: var(--text-lead);
  color: var(--color-ink);
  text-wrap: pretty;
}
.hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; }
@media (max-width: 640px) {
  .hero__cta { flex-direction: column; gap: 0.75rem; }
  .hero__cta .btn { width: 100%; }
}

/* ============  2 · STATEMENT. family: type only  ======================= */

.stmt { padding-block: var(--sec-lg); }
.stmt__in {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
}
.stmt__h {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.6vw, 4.25rem);
  font-weight: var(--weight-display);
  line-height: 1.05;
  letter-spacing: var(--track-section);
  text-transform: uppercase;
  text-wrap: balance;
}
.stmt__side { padding-top: 0.6rem; }
.stmt__p {
  margin: 0 0 1.25rem;
  font-size: var(--text-lead);
  max-width: 42ch;
  text-wrap: pretty;
}
.stmt__sub {
  margin: 0; padding-top: 1.25rem;
  border-top: var(--border-hairline) solid var(--color-divider-hairline);
  color: var(--color-text-muted-safe);
  max-width: 42ch;
}
@media (max-width: 860px) { .stmt__in { grid-template-columns: 1fr; } }

/* ============  3 · TICKS. family: column band  ========================= */

.ticks {
  padding-block: var(--sec-md);
  border-block: var(--border-hairline) solid var(--color-divider-hairline);
  background: var(--color-surface-raised);
}
.ticks__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.ticks__col {
  padding: 0 clamp(1rem, 2.5vw, 2.25rem);
  border-left: var(--border-hairline) solid var(--color-divider-hairline);
}
.ticks__col:first-child { padding-left: 0; border-left: 0; }
.ticks__col:last-child { padding-right: 0; }
.ticks__no {
  display: block; margin-bottom: 1rem;
  font-family: var(--font-display);
  font-size: var(--text-mid);
  letter-spacing: var(--track-mid);
  color: var(--color-text-muted-safe);
  font-variant-numeric: tabular-nums;
}
.ticks__h {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: var(--text-subhead);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  text-wrap: balance;
}
.ticks__p { margin: 0; color: var(--color-text-muted-safe); text-wrap: pretty; }
.ticks__head { margin: 0 0 clamp(1.75rem, 3.5vw, 3rem); }
.ticks--plain { background: none; border-top: 0; }
.ticks__cta { margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 860px) {
  .ticks__list { grid-template-columns: 1fr; gap: 2rem; }
  .ticks__col { padding: 0 0 2rem; border-left: 0; border-bottom: var(--border-hairline) solid var(--color-divider-hairline); }
  .ticks__col:last-child { padding-bottom: 0; border-bottom: 0; }
}

/* ============  4 · RATES. family: figure row over a bled photograph  === */

.rates {
  position: relative; isolation: isolate;
  padding-block: var(--sec-lg);
}
.rates__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%;
}
.rates__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--color-surface) 95%, transparent) 38%,
    color-mix(in srgb, var(--color-surface) 62%, transparent));
}
.rates__h {
  margin: 0 0 clamp(2rem, 4vw, 3.25rem);
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw + 0.5rem, 2.5rem);
  font-weight: var(--weight-medium);
  line-height: 1.15;
  letter-spacing: var(--track-section);
  text-transform: uppercase;
  text-wrap: balance;
}
.rate { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.rate--two { grid-template-columns: repeat(2, minmax(0, 20rem)); }
.rates__h { margin-bottom: 0.75rem; }
.rates__sub {
  margin: 0 0 clamp(2rem, 4vw, 3.25rem);
  font-family: var(--font-body);
  font-size: var(--text-lead);
  font-weight: var(--weight-body);
  color: var(--color-text-muted-safe);
}
.rates__cta { margin-top: clamp(2rem, 4vw, 3rem); }
.rate__row {
  padding: 0 clamp(1rem, 2.5vw, 2rem);
  border-left: var(--border-hairline) solid var(--color-border);
}
.rate__row:first-child { padding-left: 0; border-left: 0; }
.rate__v {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 5vw + 0.5rem, 5rem);
  font-weight: var(--weight-display);
  line-height: 1;
  letter-spacing: var(--track-figure);
  font-variant-numeric: tabular-nums;
}
.rate__u {
  font-size: var(--text-mid);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  margin-left: 0.4rem;
  color: var(--color-text-muted-safe);
}
.rate__t {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-mid);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
}
.rate__q {
  display: block; margin-top: 0.4rem;
  font-family: var(--font-body);
  font-size: var(--text-small);
  letter-spacing: var(--track-body);
  text-transform: none;
  color: var(--color-text-muted-safe);
  max-width: 24ch;
}
@media (max-width: 860px) {
  .rate, .rate--two { grid-template-columns: 1fr; }
  .rate__row {
    padding: 1.5rem 0; border-left: 0;
    border-top: var(--border-hairline) solid var(--color-border);
    display: grid; grid-template-columns: auto 1fr; gap: 0 1.25rem; align-items: baseline;
  }
  .rate__row:first-child { padding-top: 0; border-top: 0; }
  .rate__v { margin: 0; font-size: clamp(2.25rem, 11vw, 3.25rem); }
  .rates__img { object-position: 50% 50%; }
  .rates__scrim { background: linear-gradient(to bottom, color-mix(in srgb, var(--color-surface) 88%, transparent), color-mix(in srgb, var(--color-surface) 96%, transparent)); }
}

/* ============  5 · MEMBERSHIP. family: cards  ========================== */

.mem { padding-block: var(--sec-lg) var(--sec-md); }
.mem__head { margin-bottom: clamp(2rem, 4vw, 3.5rem); max-width: 22ch; }
.mem__head .lead { margin-top: 1rem; }
.tier__label {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted-safe);
}
.tier__for strong { color: var(--color-ink); font-weight: var(--weight-medium); }

.tiers {
  display: grid; gap: 1px;
  grid-template-columns: repeat(3, 1fr);
  background: var(--color-divider-hairline);
  border: var(--border-hairline) solid var(--color-divider-hairline);
}
.tier {
  background: var(--color-surface);
  padding: var(--card-padding);
  display: grid;
  /* fixed row template so the feature lists start at the same Y in all three */
  grid-template-rows: auto auto auto 1fr auto;
  gap: 0;
  position: relative;
  transition: background-color var(--duration-slow) var(--ease);
}
.tier:hover { background: var(--color-surface-raised); }

/* The lead tier is marked, not enlarged. */
.tier--lead { background: var(--color-surface-raised); box-shadow: inset 0 3px 0 0 var(--color-ink); }
.tier__flag {
  position: absolute; top: 0; right: var(--card-padding);
  transform: translateY(-50%);
  background: var(--color-ink); color: var(--color-surface);
  padding: 4px 10px;
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}
.tier__n {
  margin: 0 0 1rem; min-height: 2.4em;
  font-family: var(--font-display);
  font-size: var(--text-mid);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--color-text-muted-safe);
}
.tier__price {
  margin: 0 0 1.5rem;
  font-family: var(--font-display);
  font-size: var(--text-figure);
  font-weight: var(--weight-display);
  line-height: 1;
  letter-spacing: var(--track-figure);
  font-variant-numeric: tabular-nums;
}
.tier__price span {
  display: block; margin-top: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-body);
  letter-spacing: var(--track-body);
  text-transform: uppercase;
  color: var(--color-text-muted-safe);
}
.tier__list {
  margin: 0 0 1.25rem; padding: 0; list-style: none;
  border-top: var(--border-hairline) solid var(--color-divider-hairline);
}
.tier__list li {
  padding: 0.75rem 0;
  border-bottom: var(--border-hairline) solid var(--color-divider-hairline);
  font-size: var(--text-small);
}
.tier__for { margin: 0 0 1.5rem; color: var(--color-text-muted-safe); font-size: var(--text-small); align-self: end; }
@media (max-width: 860px) {
  .tiers { grid-template-columns: 1fr; }
  .tier__n { min-height: 0; }
  /* Stacked, the flag would straddle the divider between two cards. Put it in flow. */
  .tier--lead { padding-top: calc(var(--card-padding) - 0.25rem); }
  .tier__flag { position: static; transform: none; justify-self: start; margin-bottom: 1rem; display: inline-block; }
}

/* ============  6 · FOUNDING. family: inverted full-bleed band  =========
   The page's entire accent budget. Torn top edge, cookie-mark watermark. */

.found {
  position: relative; isolation: isolate;
  background: var(--color-ink);
  color: var(--color-surface);
  margin-top: var(--sec-md);
  padding-block: calc(var(--sec-md) + 18px) var(--sec-md);
  overflow: hidden;
  /* Hand-torn top edge. Irregular by hand, not a generated wave. */
  clip-path: polygon(
    0 14px, 3% 5px, 7% 12px, 11% 3px, 15% 10px, 19% 2px, 24% 9px, 28% 1px,
    33% 8px, 37% 3px, 42% 11px, 46% 4px, 51% 10px, 55% 2px, 60% 9px, 64% 4px,
    69% 12px, 73% 3px, 78% 9px, 82% 1px, 87% 8px, 91% 4px, 96% 11px, 100% 5px,
    100% 100%, 0 100%
  );
}
.found__mark {
  position: absolute; z-index: -1;
  right: -6%; top: 50%; transform: translateY(-50%);
  width: clamp(260px, 34vw, 520px); height: auto;
  opacity: 0.07;
  filter: invert(1);
}
.found__stamp {
  display: inline-block; margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  padding: 7px 14px;
  border: 1.5px solid var(--color-surface);
  transform: rotate(-1.4deg);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}
.found__grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: start;
}
.found__fig { display: block; }
.found__fig .found__u { margin: 0 0 1rem; font-weight: var(--weight-medium); }
.found__h3 {
  margin: 0; max-width: 11ch;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw, 4.75rem);
  font-weight: var(--weight-display);
  line-height: 0.98;
  letter-spacing: var(--track-section);
  text-transform: uppercase;
}
.found__p + .found__p { margin-top: -1rem; }
.found__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 7rem);
  font-weight: var(--weight-display);
  line-height: 0.92;
  letter-spacing: var(--track-figure);
  font-variant-numeric: tabular-nums;
}
.found__u {
  display: block; margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: var(--text-mid);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
}
.found__p {
  margin: 0 0 2rem; max-width: 52ch;
  font-size: var(--text-lead);
  color: var(--color-text-muted-print);
  text-wrap: pretty;
}
.found .btn--invert { border-color: var(--color-surface); }
@media (max-width: 860px) {
  .found__grid { grid-template-columns: 1fr; gap: 2rem; }
  .found__mark { right: -20%; opacity: 0.06; }
}

/* ============  7 · THE ROOM. family: horizontal scroll  ================ */

.room { padding-block: var(--sec-lg) var(--sec-md); overflow: hidden; }
.room__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}
.room__nav { display: flex; gap: 0.5rem; flex: none; }
.room__arrow {
  width: var(--button-min-height); height: var(--button-min-height);
  display: grid; place-items: center;
  background: transparent; color: var(--color-ink);
  border: var(--border-hairline) solid var(--color-border);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
}
.room__arrow svg { width: 18px; height: 18px; }
.room__arrow:hover { border-color: var(--color-ink); background: var(--color-surface-raised); }
.room__arrow[disabled] { opacity: 0.35; cursor: default; }

/* Track bleeds to the right edge so it reads as continuing past the viewport. */
.room__track {
  display: flex; gap: clamp(0.75rem, 1.5vw, 1.25rem);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  /* Snap has to know about that padding, or mandatory snap treats the first
     photo's own left edge as its resting point and pulls the track in by the
     full gutter on load: the photo sat flush against the screen edge instead of
     under the heading, and script.js's stops disagreed with the browser's snap
     points by the same amount. */
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  padding-bottom: 1rem;
  scrollbar-width: none;
}
.room__track::-webkit-scrollbar { display: none; }
.room__fig {
  margin: 0; flex: 0 0 auto; scroll-snap-align: start;
  width: min(72vw, 620px);
}
.room__fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* The bay photograph is 1.9:1 and the frame is 4:3, so only the middle 70% of
   it survives. Centred, that loses the left third of the simulator screen.
   Pulled left so the screen and the mat are whole and the sofas take the cut. */
.room__fig--bay img { object-position: 8% 50%; }
.room__bar { height: 2px; background: var(--color-divider-hairline); margin-top: 0.5rem; overflow: hidden; }
.room__bar span { display: block; height: 100%; width: 33%; background: var(--color-ink); transition: transform var(--duration-slow) var(--ease); }

/* ============  8 · CORPORATE. family: full-bleed image, right column  == */

.corp {
  position: relative; isolation: isolate;
  min-height: 72vh; display: flex; align-items: center;
  padding-block: var(--sec-lg);
}
.corp__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 20% 50%;
}
.corp__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to left,
    color-mix(in srgb, var(--color-surface) 93%, transparent) 40%,
    color-mix(in srgb, var(--color-surface) 40%, transparent));
}
.corp__body { display: flex; justify-content: flex-end; }
.corp__col { max-width: 48ch; }
.corp__col .h2 { margin-bottom: 1.5rem; }
.corp__col .lead + .lead { margin-top: 1rem; }
.corp__col .link { margin-top: 2rem; }
@media (max-width: 860px) {
  .corp__body { justify-content: flex-start; }
  .corp__scrim { background: linear-gradient(to top, color-mix(in srgb, var(--color-surface) 94%, transparent) 30%, color-mix(in srgb, var(--color-surface) 60%, transparent)); }
}

/* ============  9 · PRACTICAL + FAQ. family: two-column asymmetric  ===== */

.prac { padding-block: var(--sec-lg); }
.prac__in {
  display: grid; gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
}
.prac__aside { position: sticky; top: calc(var(--hdr-h) + var(--abar-h) + 32px); }

.status {
  display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap;
  margin: 0 0 2rem; padding: 0.75rem 1rem;
  background: var(--color-surface-raised);
  border-left: 3px solid var(--color-border);
}
.status[data-state="open"]    { border-left-color: var(--color-state-open); }
.status[data-state="holding"] { border-left-color: var(--color-state-holding); }
.status[data-state="closed"]  { border-left-color: var(--color-state-closed); }
.status__t {
  font-family: var(--font-display);
  font-size: var(--text-small);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
}
.status__q { font-size: var(--text-small); color: var(--color-text-muted-safe); }

.prac__list { margin: 0; }
.prac__row {
  display: grid; grid-template-columns: 8rem 1fr; gap: 1rem;
  padding: 1rem 0;
  border-top: var(--border-hairline) solid var(--color-divider-hairline);
}
.prac__row:last-child { border-bottom: var(--border-hairline) solid var(--color-divider-hairline); }
.prac__row dt {
  font-family: var(--font-display);
  font-size: var(--text-small);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--color-text-muted-safe);
}
.prac__row dd { margin: 0; font-size: var(--text-small); }

.faq .h2 { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.faq__item { border-bottom: var(--border-hairline) solid var(--color-divider-hairline); }
.faq__item:first-child { border-top: var(--border-hairline) solid var(--color-divider-hairline); }
.faq__q {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 0;
  font-family: var(--font-display);
  font-size: var(--text-mid);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  transition: color var(--duration-fast) var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--color-text-muted-safe); }
.faq__q::after {
  content: ""; flex: none;
  width: 12px; height: 12px;
  background:
    linear-gradient(var(--color-ink), var(--color-ink)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--color-ink), var(--color-ink)) center / 1.5px 100% no-repeat;
  transition: transform var(--duration-slow) var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__a { padding: 0 0 1.35rem; max-width: 62ch; }
.faq__a p { margin: 0; color: var(--color-text-muted-safe); text-wrap: pretty; }
.faq__a ul { margin: 0.75rem 0 0; padding-left: 1.1rem; color: var(--color-text-muted-safe); }
.faq__a li + li { margin-top: 0.35rem; }
.faq__a strong { color: var(--color-ink); font-weight: var(--weight-medium); }
.faq__a a { color: var(--color-ink); text-underline-offset: 3px; }

@media (max-width: 960px) {
  .prac__in { grid-template-columns: 1fr; }
  .prac__aside { position: static; }
}

/* ============  10 · CLOSE. family: centred form  ======================= */

.close {
  padding-block: var(--sec-md) var(--sec-lg);
  border-top: var(--border-hairline) solid var(--color-divider-hairline);
}
.close__in {
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: center;
}
.close__mark { width: 96px; height: auto; margin: 0 0 2rem; }
.close__h {
  margin: 0 0 1rem; max-width: 12ch;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw + 0.5rem, 3.5rem);
  font-weight: var(--weight-display);
  line-height: 1.05;
  letter-spacing: var(--track-section);
  text-transform: uppercase;
  text-wrap: balance;
}
.capture__note { margin: 0; max-width: 38ch; color: var(--color-text-muted-safe); }

@media (max-width: 960px) {
  .close__in { grid-template-columns: 1fr; gap: 2.5rem; }
  .close__mark { width: 76px; }
}

.form { text-align: left; }
.field { margin-bottom: 1.25rem; }
.field__l {
  display: block; margin-bottom: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted-safe);
}
.field__opt { text-transform: none; letter-spacing: 0; font-family: var(--font-body); }
.field__i {
  width: 100%; min-height: var(--button-min-height);
  padding: 0 1rem;
  background: var(--color-surface-raised);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-none);
  color: var(--color-ink);
  font-family: var(--font-body); font-size: var(--text-body);
  transition: border-color var(--duration-fast) var(--ease);
}
.field__i:hover { border-color: var(--color-text-muted-safe); }
.field__i::placeholder { color: var(--color-text-muted-safe); }

.check { display: flex; gap: 0.75rem; margin-bottom: 1.75rem; font-size: var(--text-small); color: var(--color-text-muted-safe); cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--color-ink); }

.trap { position: absolute; left: -9999px; }

.form__status { margin: 1rem 0 0; font-size: var(--text-small); }
.form__status[data-kind="error"] { color: var(--color-state-closed); }
.form__status[data-kind="ok"] { color: var(--color-state-open); }
.form__note { margin: 1.25rem 0 0; font-size: var(--text-small); color: var(--color-text-muted-safe); }
.form__note a, .form__status a { color: var(--color-ink); text-underline-offset: 3px; }

/* ===========================  footer  ================================== */

.ftr {
  padding-block: var(--sec-md) 2rem;
  border-top: var(--border-hairline) solid var(--color-divider-hairline);
}
.ftr__top {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr);
}
.ftr__line {
  margin: 0 0 1.25rem; max-width: 18ch;
  font-family: var(--font-display);
  font-size: var(--text-mid);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
}
.ftr__cols { display: grid; gap: 2rem; grid-template-columns: repeat(3, 1fr); }
.ftr__col { display: flex; flex-direction: column; gap: 0.6rem; }
.ftr__h {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted-safe);
}
.ftr__col a, .ftr__col p { margin: 0; font-size: var(--text-small); text-decoration: none; color: var(--color-ink); }
.ftr__col a { width: fit-content; border-bottom: var(--border-hairline) solid transparent; }
.ftr__col a:hover { border-bottom-color: var(--color-ink); }

.ftr__sign { margin: clamp(3rem, 7vw, 6rem) 0 2rem; }
.ftr__sign img { width: 100%; height: auto; opacity: 0.9; }

.ftr__base {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: var(--border-hairline) solid var(--color-divider-hairline);
}
.ftr__meta { margin: 0; font-size: var(--text-small); color: var(--color-text-muted-safe); }
.ftr__legal { display: flex; gap: 1.5rem; }
.ftr__legal a { font-size: var(--text-small); text-decoration: none; color: var(--color-text-muted-safe); }
.ftr__legal a:hover { color: var(--color-ink); }
/* agency credit, on its own line under the legal row */
.ftr__credit { flex-basis: 100%; margin: 0; font-size: var(--text-small); color: var(--color-text-muted-safe); }
.ftr__credit a { color: inherit; text-decoration: underline; text-underline-offset: 3px; transition: color var(--duration-fast) var(--ease); }
.ftr__credit a:hover { color: var(--color-ink); }

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

/* 14.2 tap targets. Standalone links get a 44px hit area on touch widths.
   Links inside a sentence are left alone: padding them breaks the line box. */
@media (max-width: 900px) {
  .ftr__col a, .ftr__legal a, .abar__txt a, .link {
    display: inline-flex; align-items: center; min-height: var(--tap-target-min);
  }
  .ftr__col { gap: 0; }
  .room__arrow { width: 52px; height: 52px; }
  /* Not flex for this one. The link holds "Join the <span>opening </span>list",
     and a flex container turns each text run into its own item and trims the
     spaces at their edges, so between 641px and 900px, where the span shows, it
     rendered as "JOIN THEOPENINGLIST". Inline-block keeps normal word spacing;
     the line-height gives the same 44px hit area on a one-line link. */
  .abar__txt a { display: inline-block; min-height: 0; line-height: var(--tap-target-min); }
}
@media (max-width: 480px) { .ftr__cols { grid-template-columns: 1fr; } }