/* ==========================================================================
   Clubhouse 220 — clubhouse220.com
   Facility rentals site. Sub-brand of Diamond Softball Club.

   Design rules that are load-bearing (see brand-source/.../README.md):
     1. Greyscale only. Photography provides all colour.
     2. Invert to point — exactly ONE white block per page, always the booking block.
     3. Rail, not banner.
     4. Index, not hero.
     5. Blue (#1B4DFF) means Diamond. Never a Clubhouse 220 action.
     + border-radius: 0 everywhere. No box-shadow anywhere. No gradients.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — self-hosted latin subsets.
   Inter ships from Google Fonts as a variable font (wght 100–900), so one
   file covers both 400 and 600. Barlow Condensed 800 is a static instance.
   Neither subset contains U+2192 (→); browsers substitute that one glyph
   from a fallback face, which is expected and visually fine.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/barlow-condensed-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces */
  --page: #08090A;
  --panel: #121316;
  --footer: #000000;

  /* Rules */
  --rule: #454C5C;      /* structural: section dividers, major borders */
  --hairline: #24262B;  /* table row dividers, minor separators */

  /* Type on dark */
  --white: #F5F6F8;
  --body: #C9CBCF;
  --muted: #95999F;
  --faint: #585B60;

  /* Type on light (inverted blocks) */
  --ink: #08090A;
  --ink-body: #3C3F45;

  /* Diamond Softball Club — crossover block ONLY */
  --diamond: #1B4DFF;
  --diamond-light: #4C86FF;

  /* Structure */
  --rail-w: 252px;
  --switcher-h: 43px;   /* height of the brand switcher bar */
  --pad-x: 40px;        /* horizontal section padding */
  --measure: 1100px;    /* max text/content width */

  --head: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* --------------------------------------------------------------------------
   3. Reset / base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--page);
  color: var(--body);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--head);
  font-weight: 800;
  text-transform: uppercase; /* source stays sentence-cased — keep it editable */
  color: var(--white);
}

p { margin: 0; }

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

a {
  color: inherit;
  text-decoration: none;
  transition: color 160ms linear, background-color 160ms linear,
    border-color 160ms linear;
}

:focus-visible {
  outline: 2px solid var(--diamond-light);
  outline-offset: 2px;
}

/* Anchor targets must not land under the sticky switcher bar. */
[id] { scroll-margin-top: var(--switcher-h); }

/* Available to screen readers, absent from the visual design. */
.vh {
  position: absolute;
  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;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 10px 18px;
  background: var(--white);
  color: var(--ink);
  font-family: var(--head);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: translateY(-110%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   4. Shared type roles
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--head);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: normal;
}

.lede {
  font-weight: 600;
  font-size: 19px;
  line-height: 1.6;
  color: var(--white);
  max-width: 60ch;
}

.body-copy {
  font-size: 16px;
  line-height: 1.6;
  max-width: 60ch;
}

.h2 { font-size: 46px; line-height: 1.05; }
.h3 { font-size: 34px; line-height: 1.05; }

/* --------------------------------------------------------------------------
   5. The plate mark — CSS-built, no image asset.
   The 72% taper is critical: everything below that line sits in the
   narrowing point and gets clipped at both edges. All type stays in the
   rectangular upper section. Scale with --s; all values scale with it.
   -------------------------------------------------------------------------- */

.plate {
  --s: 1;
  width: calc(124px * var(--s));
  height: calc(130px * var(--s));
  background: var(--white);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.plate__inner {
  width: calc(116px * var(--s));
  height: calc(122px * var(--s));
  background: var(--page);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(11px * var(--s));
  font-family: var(--head);
  font-weight: 800;
  text-transform: uppercase;
}

.plate__est {
  font-size: calc(8px * var(--s));
  letter-spacing: 0.2em;
  color: var(--muted);
  line-height: 1;
}

.plate__num {
  font-size: calc(42px * var(--s));
  line-height: 0.82;
  color: #fff;
  margin-top: calc(3px * var(--s));
}

.plate__name {
  font-size: calc(10px * var(--s));
  letter-spacing: 0.3em;
  color: var(--white);
  line-height: 1;
  /* Tracking adds trailing space on the last letter; nudge back to centre. */
  margin-left: calc(0.3em);
}

.plate__rule {
  width: calc(26px * var(--s));
  height: calc(2px * var(--s));
  background: var(--white);
  margin-top: calc(5px * var(--s));
}

/* --------------------------------------------------------------------------
   6. Brand switcher bar
   -------------------------------------------------------------------------- */

.switcher {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background: var(--page);
  border-bottom: 1px solid var(--rule);
  font-family: var(--head);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: normal;
}

/* Label variants: the bar carries longer wording on desktop and the short
   forms ("220 Rentals" / "Diamond →") below the breakpoint. */
.only-narrow { display: none; }

.switcher__active {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 24px;
  background: var(--white);
  color: var(--ink);
}

.switcher__active .sub { color: var(--faint); }

.switcher__diamond {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 24px;
  color: var(--muted);
  border-right: 1px solid var(--hairline);
}

.switcher__diamond:hover,
.switcher__diamond:focus-visible { color: var(--white); }

.switcher__diamond img {
  width: 16px;
  height: 16px;
  opacity: 0.75;
}

.switcher__diamond .to { color: var(--faint); }

.switcher__meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 11px 24px;
  color: var(--muted);
  white-space: nowrap;
}

.switcher__meta .sep { color: var(--rule); }
.switcher__meta a { color: var(--white); }
.switcher__meta a:hover { color: var(--muted); }

/* --------------------------------------------------------------------------
   7. Shell + left rail
   -------------------------------------------------------------------------- */

.shell {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  align-items: start;
}

.rail {
  position: sticky;
  top: var(--switcher-h);
  border-right: 1px solid var(--rule);
  padding: 32px 26px;
  min-height: calc(100vh - var(--switcher-h));
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Wrapper around the mark + nav. On desktop it is transparent to the layout —
   the same 30px rhythm as if they were direct children of the rail. */
.rail__top {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.rail__nav {
  border-top: 1px solid var(--hairline);
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-family: var(--head);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rail__nav a {
  color: var(--body);
  padding-left: 12px;
  margin-left: -14px;
  border-left: 2px solid transparent;
}

.rail__nav a:hover,
.rail__nav a:focus-visible {
  color: #fff;
  border-left-color: var(--rule);
}

.rail__nav a[aria-current='true'] {
  color: #fff;
  border-left-color: var(--white);
}

.rail__contact {
  border-top: 1px solid var(--hairline);
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.rail__label {
  font-family: var(--head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  line-height: normal;
  margin-bottom: 5px;
}

.rail__value {
  font-size: 13px;
  line-height: 1.55;
  color: var(--body);
}

.rail__value a:hover { color: var(--white); }
.rail__value .faint { color: var(--faint); }

.rail__endorse {
  margin-top: auto;
  border-top: 1px solid var(--hairline);
  padding-top: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.35;
}

.rail__endorse:hover { color: var(--white); }

.rail__endorse img {
  width: 34px;
  height: 34px;
  opacity: 0.8;
  flex: none;
}

.main { min-width: 0; }

/* --------------------------------------------------------------------------
   8. Masthead
   -------------------------------------------------------------------------- */

.masthead {
  padding: 56px var(--pad-x) 36px;
  border-bottom: 1px solid var(--rule);
  max-width: var(--measure);
}

.masthead h1 {
  margin: 16px 0 0;
  font-size: 88px;
  line-height: 0.9;
  color: #fff;
}

.masthead .lede { margin-top: 22px; }
.masthead .body-copy { margin-top: 16px; }

/* --------------------------------------------------------------------------
   9. Room index — the hero of the page.

   GRID NOTE, do not "simplify":
   Fixed tracks total 352px including gaps. The name column carries a 170px
   MINIMUM deliberately — when the viewport narrows the duration columns must
   absorb the squeeze, not the room name. With minmax(0,1fr) the name column
   collapses at laptop widths and stacks one word per line through the size
   cell. Do not remove the 170px floor. Below 900px the mobile treatment
   takes over rather than letting this grid keep compressing.
   -------------------------------------------------------------------------- */

.rooms { border-bottom: 1px solid var(--rule); }

.room-row {
  display: grid;
  grid-template-columns: 30px minmax(170px, 1fr) 84px 60px 60px 68px;
  gap: 10px;
  padding: 24px var(--pad-x);
  border-bottom: 1px solid var(--hairline);
  align-items: center;
}

.room-row:last-child { border-bottom: 0; }

.room-row--head {
  padding: 14px var(--pad-x);
  font-family: var(--head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  line-height: normal;
}

.room-row--head .num,
.room-row--head .price { text-align: right; }

.room__num {
  font-family: var(--head);
  font-size: 20px;
  font-weight: 800;
  color: var(--faint);
  line-height: 1;
}

.room__name {
  font-family: var(--head);
  font-size: 30px;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
}

.room__desc {
  margin-top: 7px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 52ch;
}

.room__size {
  font-family: var(--head);
  font-size: 17px;
  font-weight: 800;
  color: var(--body);
  white-space: nowrap;
}

.room__price {
  font-family: var(--head);
  font-size: 23px;
  font-weight: 800;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
  line-height: 1;
}

.room__price--hero { color: #fff; }

/* Mobile-only one-line size note under the room name. */
.room__note { display: none; }

/* --------------------------------------------------------------------------
   10. Photo strip
   -------------------------------------------------------------------------- */

.photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule); /* the 1px gaps read as structural rules */
  border-bottom: 1px solid var(--rule);
}

.photos img {
  width: 100%;
  height: 280px;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   11. Play / Train band

   The split between what can PLAY here and what can only TRAIN here is a
   deliberate honesty constraint, and the caveat below is not optional copy.
   Do not merge these into one list.
   -------------------------------------------------------------------------- */

.band {
  padding: 56px var(--pad-x);
  border-bottom: 1px solid var(--rule);
}

.band > .h2 { margin: 12px 0 10px; }
.band > .lede { margin-bottom: 34px; }

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  max-width: var(--measure);
}

.split__label {
  font-family: var(--head);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  border-bottom: 2px solid var(--white);
  padding-bottom: 12px;
  line-height: normal;
}

.split ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.split li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
}

.split li:first-child { border-top: 0; }

.split .name {
  font-family: var(--head);
  font-size: 26px;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
}

.split .note {
  font-size: 14px;
  color: var(--muted);
  text-align: right;
}

.callout {
  margin-top: 36px;
  border-left: 3px solid var(--rule);
  padding: 4px 0 4px 22px;
  max-width: 78ch;
  font-size: 16px;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   12. Team packages
   -------------------------------------------------------------------------- */

.packages { padding: 56px var(--pad-x); border-bottom: 1px solid var(--rule); }
.packages .h2 { margin: 12px 0 8px; }
.packages .body-copy { margin-bottom: 32px; max-width: 56ch; }

.pkg-list { max-width: var(--measure); }

.pkg-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px 130px;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: center;
}

/* The "Full house" row is emphasised — panel fill bleeding into the gutters. */
.pkg-row--hero {
  background: var(--panel);
  margin: 0 -20px;
  padding: 22px 20px;
  border-bottom-color: var(--rule);
}

.pkg__name {
  font-family: var(--head);
  font-size: 26px;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
}

.pkg__includes {
  margin-top: 6px;
  font-size: 14px;
  color: var(--muted);
}

.pkg__dur {
  font-family: var(--head);
  font-size: 17px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--body);
  white-space: nowrap;
}

.pkg__price {
  font-family: var(--head);
  font-size: 38px;
  font-weight: 800;
  color: #fff;
  text-align: right;
  white-space: nowrap;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   13. Season blocks / Included — two equal columns split by a structural rule
   -------------------------------------------------------------------------- */

.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border-bottom: 1px solid var(--rule);
}

.duo > * {
  background: var(--page);
  padding: 48px var(--pad-x);
}

.duo .h3 { margin: 12px 0 14px; }

.btn-secondary {
  display: inline-block;
  margin-top: 26px;
  border: 1.5px solid var(--rule);
  padding: 13px 26px;
  font-family: var(--head);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  background: transparent;
}

.btn-secondary:hover,
.btn-secondary:focus-visible { border-color: var(--white); }

/* Tertiary text link. Used for the rate-card download under "Ask for a
   quote" — deliberately quiet so it does not compete with the CTA. */
.aside-link {
  margin-top: 16px;
  font-family: var(--head);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.aside-link a { color: var(--faint); }
.aside-link a:hover,
.aside-link a:focus-visible { color: var(--white); }

.dl { margin: 0; }

.dl__row {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 13px 0;
  border-top: 1px solid var(--hairline);
  font-size: 15px;
  line-height: 1.6;
}

.dl__row:first-child { border-top: 0; }

.dl dt {
  flex: none;
  min-width: 96px;
  font-family: var(--head);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.dl dd { margin: 0; }

/* --------------------------------------------------------------------------
   14. How it works
   -------------------------------------------------------------------------- */

.how { padding: 56px var(--pad-x); border-bottom: 1px solid var(--rule); }

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-top: 28px;
  max-width: var(--measure);
}

.step { border-top: 2px solid var(--white); padding-top: 18px; }

.step__label {
  font-family: var(--head);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  line-height: normal;
}

.step__title {
  margin: 6px 0 10px;
  font-size: 30px;
  line-height: 1.05;
  color: #fff;
}

.step p { font-size: 15px; line-height: 1.6; }

/* --------------------------------------------------------------------------
   15. Booking block — THE ONE WHITE BLOCK.

   Exactly one inverted block per page, and it is always the booking action.
   If a second is added anywhere, the signal is dead.
   -------------------------------------------------------------------------- */

.book {
  background: var(--white);
  color: var(--ink);
  padding: 56px var(--pad-x);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 56px;
}

.book__copy { flex: 1 1 380px; min-width: 0; }
.book .eyebrow { color: var(--faint); }

.book h2 {
  margin: 12px 0 14px;
  font-size: 64px;
  line-height: 0.94;
  color: var(--ink);
}

.book__copy p {
  color: var(--ink-body);
  font-size: 16px;
  line-height: 1.6;
  max-width: 46ch;
}

.book__actions {
  flex: 0 1 400px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-call {
  display: block;
  background: var(--ink);
  color: #fff;
  padding: 22px 44px;
  font-family: var(--head);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}

.btn-call:hover,
.btn-call:focus-visible { background: var(--ink-body); }

.btn-email {
  display: block;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  padding: 15px 44px;
  font-family: var(--head);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}

.btn-email:hover,
.btn-email:focus-visible {
  background: var(--ink);
  color: var(--white);
}

/* --------------------------------------------------------------------------
   16. Diamond crossover block — the ONLY place blue appears.

   Blue on a Clubhouse 220 page means "you are looking at a doorway to
   Diamond." Never use --diamond for a Clubhouse 220 action.
   -------------------------------------------------------------------------- */

.crossover {
  background: var(--panel);
  border-top: 3px solid var(--diamond);
  padding: 48px var(--pad-x);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 44px;
}

.crossover__patch {
  width: 104px;
  height: 104px;
  flex: none;
}

.crossover__copy { flex: 1 1 420px; min-width: 0; }
.crossover .eyebrow { color: var(--diamond-light); }

.crossover h3 {
  margin: 10px 0 12px;
  font-size: 40px;
  line-height: 1.05;
  color: #fff;
}

.crossover p { font-size: 16px; line-height: 1.6; max-width: 68ch; }

.crossover__actions {
  flex: 0 1 240px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-diamond {
  display: block;
  background: var(--diamond);
  color: #fff;
  padding: 15px 28px;
  font-family: var(--head);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}

.btn-diamond:hover,
.btn-diamond:focus-visible { background: var(--diamond-light); }

.btn-diamond-alt {
  display: block;
  border: 1.5px solid var(--rule);
  color: var(--white);
  padding: 13px 28px;
  font-family: var(--head);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}

.btn-diamond-alt:hover,
.btn-diamond-alt:focus-visible { border-color: var(--white); }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--footer);
  padding: 32px var(--pad-x);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--head);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  line-height: 1.6;
}

.footer a:hover { color: var(--muted); }

/* --------------------------------------------------------------------------
   18. Mobile action bar — the white booking block, pinned.
   Hidden above the breakpoint.
   -------------------------------------------------------------------------- */

.actionbar { display: none; }

/* --------------------------------------------------------------------------
   19. Intermediate widths — pull padding and the biggest type in before the
   rail layout is abandoned.
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  :root { --pad-x: 28px; }
  .masthead h1 { font-size: 68px; }
  .book h2 { font-size: 52px; }
  .split { gap: 34px; }
}

/* --------------------------------------------------------------------------
   20. Below 900px — the rail splits into two persistent bars.

   Top bar: the switcher, condensed.
   Bottom bar: the white booking block, pinned. 44px minimum tap target.
   No booking form on mobile — everything routes to call or text. The promise
   is that a human answers within 24 hours; a form contradicts it.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  :root { --pad-x: 18px; --switcher-h: 35px; }

  /* --- switcher condenses ---
     Two segments only: the white active segment on the left, the Diamond
     doorway pushed to the right edge. Nothing floats in the middle. */
  .switcher {
    font-size: 10px;
    letter-spacing: 0.14em;
    flex-wrap: nowrap;
  }

  .switcher__active,
  .switcher__diamond { padding: 9px 14px; gap: 7px; }

  .only-wide { display: none; }
  .only-narrow { display: inline; }

  .switcher__diamond {
    margin-left: auto;
    border-right: 0;
    border-left: 1px solid var(--hairline);
  }

  .switcher__diamond img { width: 12px; height: 12px; }

  /* Hours/phone move to the contact block; the pinned bar carries the CTA. */
  .switcher__meta { display: none; }

  /* --- the rail dissolves ---
     Address, hours and the Diamond credit are footer information. Stacking the
     whole rail above the masthead put them before the headline, which read as a
     footer at the top of the page. Instead the rail stops being a box and its
     parts are re-ordered around the content: mark + nav above, contact below. */
  .shell { grid-template-columns: minmax(0, 1fr); }

  .rail {
    display: contents;
  }

  .rail__top {
    order: 1;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 20px var(--pad-x);
    border-bottom: 1px solid var(--rule);
  }

  .rail__top .plate { --s: 0.52; }

  .main { order: 2; }

  .rail__contact {
    order: 3;
    border-top: 1px solid var(--rule);
    padding: 28px var(--pad-x);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px 22px;
  }

  .rail__endorse {
    order: 4;
    margin-top: 0;
    border-top: 1px solid var(--hairline);
    padding: 18px var(--pad-x);
  }

  /* Nav becomes a wrapping row beside the mark. */
  .rail__nav {
    border-top: 0;
    padding-top: 0;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 7px 15px;
    font-size: 12px;
  }

  .rail__nav a {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
    border-bottom: 2px solid transparent;
    padding-bottom: 3px;
  }

  .rail__nav a:hover,
  .rail__nav a:focus-visible { border-left-color: transparent; border-bottom-color: var(--rule); }
  .rail__nav a[aria-current='true'] { border-left-color: transparent; border-bottom-color: var(--white); }

  /* --- masthead --- */
  .masthead { padding: 34px var(--pad-x) 26px; }
  .masthead h1 { font-size: 40px; }
  .masthead .lede { font-size: 17px; margin-top: 16px; }

  /* --- room index drops to three columns: index | name + note | 60 min ---
     The 30 and 45 minute prices are carried by the pricing note instead. */
  .room-row {
    grid-template-columns: 30px minmax(0, 1fr) 66px;
    padding: 18px var(--pad-x);
    align-items: start;
  }

  .room-row--head { padding: 12px var(--pad-x); }
  .room-row--head .size-h,
  .room-row--head .h30,
  .room-row--head .h45 { display: none; }

  .room__size,
  .room__price--30,
  .room__price--45 { display: none; }

  .room__name { font-size: 24px; }
  .room__desc { font-size: 13px; margin-top: 6px; }

  .room__note {
    display: block;
    margin-top: 8px;
    font-family: var(--head);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--faint);
  }

  .room__price { font-size: 21px; }

  /* --- photo strip stays a strip, two up, at the mobile band height ---
     The third frame is dropped rather than left orphaned in a 2-up grid. */
  .photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photos img { height: 190px; }
  .photos li:last-child { display: none; }

  /* --- bands --- */
  .band, .packages, .how { padding: 40px var(--pad-x); }
  .h2 { font-size: 32px; }
  .h3 { font-size: 26px; }

  .split { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .split .name { font-size: 21px; }

  .pkg-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 16px;
    align-items: baseline;
  }

  .pkg__dur { grid-row: 2; font-size: 14px; color: var(--muted); }
  .pkg__price { grid-row: 1 / span 2; align-self: center; font-size: 30px; }

  .duo { grid-template-columns: minmax(0, 1fr); }
  .duo > * { padding: 34px var(--pad-x); }

  .steps { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .step__title { font-size: 24px; }

  /* --- the one white block --- */
  .book { padding: 40px var(--pad-x); gap: 28px; }
  .book h2 { font-size: 36px; }
  .book__actions { flex: 1 1 100%; }
  .btn-call { font-size: 20px; padding: 18px 24px; }

  /* --- crossover keeps its blue rule at phone size --- */
  .crossover { padding: 34px var(--pad-x); gap: 20px; }
  .crossover__patch { width: 38px; height: 38px; }
  .crossover h3 { font-size: 28px; }
  .crossover__actions { flex: 1 1 100%; }

  /* --- footer --- */
  .footer { padding: 26px var(--pad-x) 100px; font-size: 11px; }

  /* --- pinned booking bar --- */
  .actionbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 14px;
    background: var(--white);
    color: var(--ink);
    border-top: 1px solid var(--ink);
  }

  .actionbar__copy { min-width: 0; }

  .actionbar__head {
    font-family: var(--head);
    font-size: 17px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--ink);
    line-height: 1;
  }

  .actionbar__sub {
    margin-top: 4px;
    font-size: 10px;
    color: var(--ink-body);
    line-height: 1.3;
  }

  /* 44px minimum tap target — do not shrink. */
  .actionbar__btn {
    flex: none;
    background: var(--ink);
    color: #fff;
    padding: 13px 20px;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-family: var(--head);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .actionbar__btn:hover,
  .actionbar__btn:focus-visible { background: var(--ink-body); }
}

@media (max-width: 560px) {
  /* Mark and nav still share a row; the nav just wraps to more lines.
     h1 stays at the spec'd 40px. */
  .rail__top { gap: 16px; }
  .rail__top .plate { --s: 0.46; }
}

/* --------------------------------------------------------------------------
   21. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* --------------------------------------------------------------------------
   22. Print — the screen page is not the deliverable in print.
   The rate card (rate-card.html) is the printable artefact.
   -------------------------------------------------------------------------- */

@media print {
  .switcher,
  .rail,
  .actionbar,
  .photos { display: none; }

  body { background: #fff; color: #000; }
  .shell { grid-template-columns: 1fr; }
}