/* ==========================================================================
   GRX SPORTS PERFORMANCE
   Site by Albert Dunglison Design

   Design system notes
   -------------------
   The whole visual language is derived from the GRX wordmark: heavy italic
   condensed caps, and an "X" built from blades cut at ~20deg off vertical.
   Three devices carry through every page:

     1. THE BLADE      a 20deg shear, used for the hero panel, the section
                       cuts between bands, and the row hover wipe.
     2. THE CUT        bands alternate ink / stone with a diagonal edge,
                       giving the sports-magazine spread feel. Both are cool
                       greys of one family, so it never reads as ink on paper.
     3. THE UNIT       services are sold in minutes, so the duration is set
                       large and the price small. The number is the choice.

   Palette is fully monochrome by decision, matching the monochrome wordmark.
   The CTA is a solid chalk block: the highest contrast object on the page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Colour */
  --ink:        #0B0B0C;   /* base near-black                                */
  --ink-lift:   #141518;   /* raised surface on ink                          */
  --steel:      #2A2C2E;   /* card / band surface                            */
  --grey:       #6E7276;   /* hairlines and decorative rules only            */
  --grey-text:  #7B8084;   /* dimmest grey that still clears AA on --ink     */
  --mute:       #9AA0A5;   /* secondary text on ink (7.0:1 on --ink)         */
  --chalk:      #EEF0F1;   /* cool off-white: type and CTAs on dark only     */
  --chalk-dim:  #C9CDD0;   /* secondary text on ink, heavier weight          */

  /* The light band. A cool mid grey rather than an off-white, so the
     alternation reads as two greys of one family, not black against paper.
     Holds 11.9:1 against --ink, so the band change is still emphatic. */
  --stone:      #C6CACD;

  --slate:      #4A4E51;   /* label text on --stone (5.2:1)                  */
  --slate-body: #3A3D40;   /* body text on --stone (6.6:1)                   */

  --line-on-ink:   rgba(238, 240, 241, 0.14);
  --line-on-chalk: rgba(11, 11, 12, 0.20);

  /* Type */
  --font-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body:    'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* The lower bound has to keep scaling on narrow screens: the hero lines are
     set nowrap, and the longest ("Perform stronger.") runs about 6.9x the font
     size, so a fixed floor would push it past the gutters on a phone. */
  --step-display: clamp(2.15rem, 11.4vw, 9.5rem);
  --step-h2:      clamp(2.35rem, 6vw, 4.75rem);
  --step-h3:      clamp(1.6rem, 3vw, 2.35rem);
  --step-h4:      clamp(1.2rem, 1.8vw, 1.5rem);
  --step-lead:    clamp(1.075rem, 1.55vw, 1.3rem);
  --step-body:    1.0625rem;
  --step-small:   0.9375rem;
  --step-label:   0.75rem;

  /* Space */
  --band-pad:  clamp(4.5rem, 8.5vw, 8.5rem);
  --gutter:    clamp(1.25rem, 5vw, 4.5rem);
  --max:       1320px;

  /* Geometry */
  --blade:  -20deg;                     /* the wordmark's slant              */
  --cut:    clamp(2rem, 4.5vw, 5rem);   /* depth of the diagonal band edge   */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. RESET + BASE
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Scroll lock while the mobile nav panel is open. */
body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.88;
}

h1 { font-size: var(--step-display); }
h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-h3); }
h4 { font-size: var(--step-h4); letter-spacing: 0.01em; line-height: 1.1; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

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

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

/* The hidden attribute has to beat the component display rules below,
   or toggling it on a grid/flex element does nothing. */
[hidden] { display: none !important; }

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

/* Focus: always visible, never removed. */
:focus-visible {
  outline: 2px solid var(--chalk);
  outline-offset: 3px;
}
.band--stone :focus-visible { outline-color: var(--ink); }

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 0;
  z-index: 200;
  transform: translateY(-120%);
  background: var(--chalk);
  color: var(--ink);
  padding: 0.85rem 1.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

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

.band {
  position: relative;
  padding-block: var(--band-pad);
}

.band--ink   { background: var(--ink);      color: var(--chalk); }
.band--lift  { background: var(--ink-lift); color: var(--chalk); }
.band--steel { background: var(--steel);    color: var(--chalk); }
.band--stone { background: var(--stone);    color: var(--ink); }

/* The diagonal cut. Applied to the band that follows, so its top edge
   slices up into the band above at the wordmark's angle. */
.band--cut-l,
.band--cut-r {
  margin-top: calc(var(--cut) * -1);
  padding-top: calc(var(--band-pad) + var(--cut));
  z-index: 1;
}
.band--cut-l { clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%); }
.band--cut-r { clip-path: polygon(0 0, 100% var(--cut), 100% 100%, 0 100%); }

/* Shared section head: wide-tracked label above a display heading,
   echoing "SPORTS PERFORMANCE" under the wordmark. */
.label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--mute);
  margin: 0 0 1.4rem;
}
.band--stone .label { color: var(--slate); }

.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head p {
  max-width: 52ch;
  margin-top: 1.5rem;
  font-size: var(--step-lead);
  color: var(--chalk-dim);
}
.band--stone .section-head p { color: var(--slate-body); }

.rule { height: 1px; background: var(--line-on-ink); border: 0; margin: 0; }
.band--stone .rule { background: var(--line-on-chalk); }

/* Spacing utilities, used where a component needs to sit off its neighbour. */
.mt-m { margin-top: clamp(1.75rem, 3vw, 2.25rem); }
.mt-l { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.measure { max-width: 46ch; }

.visually-hidden {
  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;
}

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 52px;
  padding: 0.9rem 1.9rem;
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease);
}

/* Solid chalk block: the primary conversion object on any ink band. */
.btn--primary { background: var(--chalk); color: var(--ink); }
.btn--primary:hover { background: #FFFFFF; }

.btn--ghost {
  background: transparent;
  color: var(--chalk);
  border-color: var(--line-on-ink);
}
.btn--ghost:hover { border-color: var(--chalk); background: rgba(238, 240, 241, 0.06); }

.band--stone .btn--primary { background: var(--ink); color: var(--chalk); }
.band--stone .btn--primary:hover { background: #000; }
.band--stone .btn--ghost { color: var(--ink); border-color: var(--line-on-chalk); }
.band--stone .btn--ghost:hover { border-color: var(--ink); background: rgba(11, 11, 12, 0.05); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  align-items: center;
}

/* --------------------------------------------------------------------------
   5. HEADER + NAV
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.header.is-stuck {
  background: rgba(11, 11, 12, 0.94);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line-on-ink);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  /* The mark is 77px tall at its largest, so the bar is sized by padding
     rather than a fixed height, and it can never sit on the edges. */
  min-height: 92px;
  padding-block: 1rem;
}

.header__logo {
  display: flex;
  align-items: center;
  flex: none;
  min-height: 44px;
}
.header__logo img { width: clamp(150px, 19vw, 210px); }

/* The supplied mark sets "SPORTS PERFORMANCE" and the X counter-blades in a
   mid grey chosen for white paper, which all but vanishes on near-black.
   Lifting brightness recovers them; the white wordmark is already clipped
   at maximum so it is unaffected. */
.header__logo img,
.footer__logo img { filter: brightness(1.8); }

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.6vw, 2.5rem); }

.nav__link {
  position: relative;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-decoration: none;
  color: var(--chalk-dim);
  padding: 0.85rem 0;
  transition: color 0.2s var(--ease);
}
.nav__link:hover { color: var(--chalk); }

/* Active page marker: a blade, not an underline. */
.nav__link::after {
  content: '';
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: 0.35rem;
  height: 2px;
  background: var(--chalk);
  transform: scaleX(0) skewX(var(--blade));
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1) skewX(var(--blade)); }
.nav__link[aria-current="page"] { color: var(--chalk); }

.nav__phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--chalk);
}
.nav__phone:hover { color: #fff; }

.nav__cta { min-height: 46px; padding: 0.6rem 1.4rem; font-size: 1rem; }

/* Mobile toggle */
.nav-toggle {
  display: none;
  width: 48px;
  height: 48px;
  padding: 0;
  background: none;
  border: 1px solid var(--line-on-ink);
  color: var(--chalk);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle__bars { display: block; width: 20px; height: 12px; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform 0.28s var(--ease), top 0.28s var(--ease);
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after  { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 5px; transform: rotate(20deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { top: 5px; transform: rotate(-20deg); }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }

  /* The panel owns the full area below the header bar, so nothing behind it
     can show through or be tapped by mistake. It scrolls internally if the
     viewport is too short for the full list. */
  .nav {
    position: fixed;
    inset: var(--header-h, 92px) 0 0 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    background: var(--ink);
    border-top: 1px solid var(--line-on-ink);
    padding: 0.5rem var(--gutter) 2.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
  }
  .nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }

  /* While the panel is open the bar behind it must be solid, not the
     transparent over-hero state, or the hero shows through the top strip. */
  .header.is-nav-open { background: var(--ink); border-bottom-color: var(--line-on-ink); }

  .nav__link {
    font-size: 1.6rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--line-on-ink);
  }
  .nav__link::after { display: none; }

  .nav__phone { padding: 1.1rem 0; font-size: 1.5rem; }
  .nav__cta { margin-top: 1rem; width: 100%; }
}

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(4.5rem, 9vw, 8rem);
  min-height: min(88vh, 900px);
  display: flex;
  align-items: center;
}
.hero--short { min-height: 0; padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3.5rem, 7vw, 6rem); }

/* THE BLADE.
   A sheared panel carrying a fine diagonal hatch. It is the hero's image slot:
   the vertical stripes lean to 20deg with the panel, matching the "X" in the
   wordmark. To drop a photo in later, give .hero__blade-inner a
   background-image. It is counter-sheared, so the photo stays undistorted. */
.hero__blade {
  position: absolute;
  top: -12%;
  bottom: -12%;
  left: 57%;
  width: 46%;
  transform: skewX(var(--blade));
  overflow: hidden;
  pointer-events: none;
  /* The leading edge is a crisp hairline: it is what makes the panel read as
     a drawn shape rather than a gradient. */
  border-left: 1px solid rgba(238, 240, 241, 0.26);
  background:
    repeating-linear-gradient(90deg,
      rgba(238, 240, 241, 0.10) 0 1px,
      transparent 1px 10px),
    linear-gradient(180deg, #1C1E22 0%, #101113 58%, #17191D 100%);
  /* Dissolve into the band below so the panel never ends on a hard
     horizontal. The leading diagonal stays crisp, which is the point. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
}
.hero__blade::after {
  /* fade the panel into the type side so it never fights the headline */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--ink) 0%, rgba(11, 11, 12, 0) 42%);
}
.hero__blade-inner {
  position: absolute;
  inset: 0;
  transform: skewX(calc(var(--blade) * -1)) scale(1.3);
  background-size: cover;
  background-position: center;
}

/* A second, thinner blade for depth. */
.hero__blade--thin {
  left: 50.5%;
  width: 5%;
  background: rgba(238, 240, 241, 0.05);
}
.hero__blade--thin::after { display: none; }

.hero__inner { position: relative; z-index: 2; width: 100%; }

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-display);
  font-size: var(--step-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--mute);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.hero__eyebrow::before {
  content: '';
  width: 34px;
  height: 2px;
  background: var(--chalk);
  transform: skewX(var(--blade));
  flex: none;
}

/* The hero headline is the one italic setting on the site: it rhymes with the
   wordmark. Every other heading is roman, so the slant keeps its meaning. */
.hero__title {
  font-style: italic;
  line-height: 0.82;
  letter-spacing: -0.028em;
}
/* Each phrase is one line, always. The type scale below is sized so the
   longest of them still fits the narrowest phone without wrapping. */
.hero__title .line { display: block; white-space: nowrap; }

/* Second word of each line drops to grey so the verbs carry and the outcomes
   recede. Sits at 7.4:1 on ink and stays legible over the blade panel. */
.hero__title .tint { color: var(--mute); }

.hero__lede {
  max-width: 44ch;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  font-size: var(--step-lead);
  color: var(--chalk-dim);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.hero__call {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  text-decoration: none;
}
.hero__call small {
  font-family: var(--font-display);
  font-size: var(--step-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--mute);
}
.hero__call strong {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.1;
}
.hero__call:hover strong { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* Facts strip pinned under the hero copy */
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(2.75rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-on-ink);
  font-family: var(--font-display);
  font-size: var(--step-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--mute);
}
.hero__facts li { padding: 0.35rem 0; }

@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero__blade { left: 62%; width: 62%; opacity: 0.85; }
  .hero__blade--thin { display: none; }
  .hero__title { max-width: none; }
}

/* On a short desktop screen the full-size hero pushes "Book a session" below
   the fold. Compress the display type and the vertical rhythm so the primary
   action stays visible without scrolling. */
@media (min-width: 901px) and (max-height: 960px) {
  .hero {
    min-height: 0;
    padding-block: clamp(2rem, 4vw, 3.25rem) clamp(2.5rem, 4.5vw, 3.75rem);
  }
  .hero__title { font-size: clamp(3rem, 7.4vw, 6.5rem); }
  .hero__lede { margin-top: 1.5rem; }
  .hero__actions { margin-top: 1.75rem; }
  .hero__facts { margin-top: 2rem; padding-top: 1.15rem; }
  .hero__eyebrow { margin-bottom: 1.25rem; }
}

/* --------------------------------------------------------------------------
   7. PILLARS
   -------------------------------------------------------------------------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-on-ink);
  border-left: 1px solid var(--line-on-ink);
}

.pillar {
  position: relative;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  border-right: 1px solid var(--line-on-ink);
  border-bottom: 1px solid var(--line-on-ink);
  overflow: hidden;
}

/* The blade wipe: a sheared chalk panel sweeps in from lower left on hover. */
.pillar::before {
  content: '';
  position: absolute;
  inset: -20% -30%;
  background: rgba(238, 240, 241, 0.045);
  transform: skewX(var(--blade)) translateX(-115%);
  transition: transform 0.5s var(--ease);
  pointer-events: none;
}
.pillar:hover::before { transform: skewX(var(--blade)) translateX(0); }

.pillar__icon {
  position: relative;
  width: 40px;
  height: 40px;
  color: var(--chalk);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.pillar__icon svg { width: 100%; height: 100%; display: block; }

.pillar h3 {
  position: relative;
  font-size: var(--step-h4);
  margin-bottom: 0.65rem;
  letter-spacing: 0.02em;
}
.pillar p {
  position: relative;
  font-size: var(--step-small);
  color: var(--chalk-dim);
  max-width: 32ch;
}

@media (max-width: 860px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .pillars { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   8. EDITORIAL
   -------------------------------------------------------------------------- */

.editorial {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
.editorial--wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
@media (max-width: 900px) {
  .editorial,
  .editorial--wide { grid-template-columns: 1fr; }
}

.editorial__body > p { max-width: 62ch; }

.pullquote {
  margin: 0 0 2rem;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  max-width: 22ch;
}

/* Photo frame, built on the same shear as the hero blade. Until real photos
   exist it stands as a branded plate: hatch, mark and caption. Drop an <img
   class="frame__img"> inside and it covers everything without touching CSS. */
.frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--line-on-ink);
  background: linear-gradient(170deg, #1B1D20 0%, #0F1012 60%, #16181B 100%);
}
/* Sits a shade under the band so the plate still reads if a photo is missing. */
.band--stone .frame {
  border-color: var(--line-on-chalk);
  background: linear-gradient(170deg, #BCC0C3 0%, #A9AEB2 60%, #B7BBBE 100%);
}

.frame__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48%;
  transform: translate(-50%, -56%);
  fill: currentColor;
  opacity: 0.12;
}

.frame__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frame::before {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 30%;
  width: 42%;
  transform: skewX(var(--blade));
  background: repeating-linear-gradient(90deg,
    rgba(238, 240, 241, 0.08) 0 1px, transparent 1px 10px);
}
.band--stone .frame::before {
  background: repeating-linear-gradient(90deg,
    rgba(11, 11, 12, 0.09) 0 1px, transparent 1px 10px);
}

.frame__note {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 1.1rem 1.35rem;
  font-family: var(--font-display);
  font-size: var(--step-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--mute);
}
.band--stone .frame__note { color: var(--slate); }

/* Credentials / values list, shared by About and Services */
.stack { display: grid; gap: 0; border-top: 1px solid var(--line-on-ink); }
.band--stone .stack { border-top-color: var(--line-on-chalk); }

.stack__item {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1.25rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--line-on-ink);
}
/* No marker column: for lists whose items are facts, not a sequence. */
.stack--plain .stack__item { grid-template-columns: 1fr; }
.band--stone .stack__item { border-bottom-color: var(--line-on-chalk); }

.stack__mark {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mute);
  padding-top: 0.15rem;
}
.band--stone .stack__mark { color: var(--slate); }

/* h3 or h4 depending on the section's own level; both take the same size. */
.stack__item h3,
.stack__item h4 {
  font-size: var(--step-h4);
  letter-spacing: 0.01em;
  line-height: 1.1;
  margin-bottom: 0.3rem;
}
.stack__item p { font-size: var(--step-small); color: var(--chalk-dim); max-width: 58ch; }
.band--stone .stack__item p { color: var(--slate-body); }

/* --------------------------------------------------------------------------
   9. PRICING, the unit is the headline and the price is the footnote
   -------------------------------------------------------------------------- */

.pricegroup + .pricegroup { margin-top: clamp(3.5rem, 7vw, 6rem); }

.pricegroup__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid currentColor;
}
.pricegroup__head h3 { letter-spacing: -0.01em; }
.pricegroup__head p {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--mute);
}
.band--stone .pricegroup__head p { color: var(--slate); }

.price {
  position: relative;
  display: grid;
  grid-template-columns: minmax(6.5rem, 8.5rem) 1fr auto;
  gap: 0 clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.25rem, 2.4vw, 1.9rem) 0;
  border-bottom: 1px solid var(--line-on-ink);
  overflow: hidden;
}
.band--stone .price { border-bottom-color: var(--line-on-chalk); }

.price::before {
  content: '';
  position: absolute;
  inset: 0 -30%;
  background: rgba(238, 240, 241, 0.045);
  transform: skewX(var(--blade)) translateX(-118%);
  transition: transform 0.5s var(--ease);
  pointer-events: none;
}
.band--stone .price::before { background: rgba(11, 11, 12, 0.045); }
.price:hover::before { transform: skewX(var(--blade)) translateX(0); }

.price__unit { position: relative; line-height: 0.8; }
.price__unit b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6.5vw, 4.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  /* The duration is content, not decoration, so it clears AA in its rest
     state on both grounds and only lifts to full contrast on hover. */
  color: var(--mute);
  transition: color 0.35s var(--ease);
}
.band--stone .price__unit b { color: var(--slate); }
.price:hover .price__unit b { color: var(--chalk); }
.band--stone .price:hover .price__unit b { color: var(--ink); }

.price__unit span {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--step-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--mute);
}
.band--stone .price__unit span { color: var(--slate); }

.price__body { position: relative; }
.price__body h4 { margin-bottom: 0.35rem; }
.price__body p { font-size: var(--step-small); color: var(--chalk-dim); max-width: 46ch; }
.band--stone .price__body p { color: var(--slate-body); }

.price__fee {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}

.pricegroup__foot {
  margin-top: 1.5rem;
  font-size: var(--step-small);
  color: var(--mute);
}
.band--stone .pricegroup__foot { color: var(--slate); }

@media (max-width: 620px) {
  .price { grid-template-columns: minmax(4.5rem, auto) 1fr; row-gap: 0.85rem; }
  .price__unit b { font-size: 2.5rem; }
  .price__fee { grid-column: 2; justify-self: start; font-size: 1.75rem; }
}

/* --------------------------------------------------------------------------
   10. LOYALTY
   -------------------------------------------------------------------------- */

.loyalty {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-on-chalk);
  border: 1px solid var(--line-on-chalk);
}
.band--ink .loyalty,
.band--steel .loyalty { background: var(--line-on-ink); border-color: var(--line-on-ink); }

/* Tiles match their band; the 1px gaps are what separate them. */
.loyalty__item { background: var(--stone); padding: clamp(1.75rem, 3vw, 2.5rem); }
.band--ink .loyalty__item   { background: var(--ink); }
.band--steel .loyalty__item { background: var(--steel); }

.loyalty__mark {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.035em;
  margin-bottom: 1.25rem;
}
.loyalty__item h3 { font-size: var(--step-h4); margin-bottom: 0.55rem; }

/* Word variant: where the tile's subject is a value rather than a milestone,
   the word itself is set large instead of inventing a number for it. */
.loyalty__item h3.loyalty__word {
  font-size: clamp(1.85rem, 3.4vw, 2.7rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-bottom: 1.1rem;
}
.loyalty__item p { font-size: var(--step-small); color: var(--slate-body); }
.band--ink .loyalty__item p,
.band--steel .loyalty__item p { color: var(--chalk-dim); }

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

/* The card sits beside the section's own introduction, at true card
   proportions, with the milestone tiles running full width underneath. */
.loyalty-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.loyalty-intro .section-head { margin-bottom: 0; }
@media (max-width: 900px) {
  .loyalty-intro { grid-template-columns: 1fr; align-items: stretch; }
}

/* --------------------------------------------------------------------------
   10b. LOYALTY CARD
   A stand-in for the printed card, built from the same blade geometry.
   Ten slots; the two that pay out are struck in chalk.
   -------------------------------------------------------------------------- */

.loyaltycard {
  display: flex;
  flex-direction: column;
  background: var(--ink);
  border: 1px solid var(--line-on-ink);
  padding: clamp(1.35rem, 2.6vw, 1.85rem);
  position: relative;
  overflow: hidden;
}
.band--ink .loyaltycard,
.band--steel .loyaltycard { background: var(--steel); }

/* A blade sweeping the card, as on the hero. */
.loyaltycard::before {
  content: '';
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: 68%;
  width: 26%;
  transform: skewX(var(--blade));
  background: repeating-linear-gradient(90deg,
    rgba(238, 240, 241, 0.06) 0 1px, transparent 1px 9px);
  pointer-events: none;
}

.loyaltycard__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line-on-ink);
}
.loyaltycard__head img { width: 92px; filter: brightness(1.8); }
.loyaltycard__head span {
  font-family: var(--font-display);
  font-size: var(--step-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--mute);
}

.loyaltycard__stamps {
  position: relative;
  display: grid;
  /* minmax(0, …) or the reward slots' wider content blows out the track.
     Explicit equal rows keep every slot identical whether or not it carries
     a reward label, and let the card fill the height of its column. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: minmax(0, auto);
  gap: 8px;
  margin: 1.1rem 0;
  list-style: none;
  padding: 0;
}
.loyaltycard__stamps li {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-on-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  /* --mute, not --grey-text: the card sits on --steel inside ink bands, where
     the dimmer grey would drop under AA. */
  color: var(--mute);
}
/* Payout slots: filled, and sheared to match the mark. */
.loyaltycard__stamps .is-reward {
  background: var(--chalk);
  border-color: var(--chalk);
  color: var(--ink);
  font-weight: 800;
}
/* Taken out of flow so a labelled slot stays the same square as a blank one. */
.loyaltycard__stamps .is-reward small {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  text-align: center;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
}
.loyaltycard__stamps .is-reward::after {
  content: '';
  position: absolute;
  inset: 3px auto 3px 3px;
  width: 3px;
  background: var(--ink);
  transform: skewX(var(--blade));
}

.loyaltycard__foot {
  position: relative;
  margin: 0;
  font-size: var(--step-small);
  color: var(--chalk-dim);
}

/* --------------------------------------------------------------------------
   11. CTA + NOTE
   -------------------------------------------------------------------------- */

.cta { position: relative; overflow: hidden; }
.cta__blade {
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: 64%;
  width: 30%;
  transform: skewX(var(--blade));
  background: repeating-linear-gradient(90deg,
    rgba(238, 240, 241, 0.06) 0 1px, transparent 1px 11px);
  pointer-events: none;
}
.cta .wrap { position: relative; z-index: 2; }
.cta h2 { max-width: 16ch; }
.cta p { max-width: 46ch; margin-top: 1.5rem; font-size: var(--step-lead); color: var(--chalk-dim); }
.cta .btn-row { margin-top: clamp(2rem, 4vw, 2.75rem); }

.note {
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
  background: var(--ink);
  border-top: 1px solid var(--line-on-ink);
}
.note p { max-width: 62ch; font-size: var(--step-small); color: var(--mute); }
.note a { color: var(--chalk); text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   12. CONTACT
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.callout {
  display: block;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--line-on-ink);
  text-decoration: none;
  transition: border-color 0.25s var(--ease);
}
.callout:hover { border-color: var(--chalk); }
.callout small {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--mute);
  margin-bottom: 0.65rem;
}
.callout strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.15rem, 5.2vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1;
}
.callout:hover strong { color: #fff; }

.social-row { display: grid; gap: 1px; background: var(--line-on-ink); margin-top: 1px; }
.social {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--ink);
  padding: 1.15rem clamp(1.25rem, 3vw, 2.5rem);
  min-height: 68px;
  text-decoration: none;
  transition: background-color 0.25s var(--ease);
}
.social:hover { background: var(--ink-lift); }
.social__text { display: block; }
.social b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.social small { display: block; font-size: var(--step-small); color: var(--mute); }
.social svg { width: 20px; height: 20px; flex: none; color: var(--mute); }
.social:hover svg { color: var(--chalk); }

/* Service areas: two territories, one line of travel between them. */
.areas {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0;
  border-top: 1px solid var(--line-on-ink);
  border-bottom: 1px solid var(--line-on-ink);
}
.band--stone .areas { border-color: var(--line-on-chalk); }
.area h3 { font-size: var(--step-h4); margin-bottom: 0.4rem; }
.area p { font-size: var(--step-small); color: var(--chalk-dim); margin: 0; }
.band--stone .area p { color: var(--slate-body); }
.area--end { text-align: right; }
.areas__link {
  width: clamp(40px, 8vw, 90px);
  height: 2px;
  background: linear-gradient(90deg, var(--grey), var(--chalk), var(--grey));
  transform: skewX(var(--blade));
}
.band--stone .areas__link {
  background: linear-gradient(90deg, rgba(11, 11, 12, 0.25), var(--ink), rgba(11, 11, 12, 0.25));
}

@media (max-width: 620px) {
  .areas { grid-template-columns: 1fr; gap: 1.5rem; }
  .area--end { text-align: left; }
  .areas__link { width: 60px; }
}

/* --------------------------------------------------------------------------
   13. FORM
   -------------------------------------------------------------------------- */

.form { display: grid; gap: 1.35rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.35rem; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }

.field { display: grid; gap: 0.5rem; }
.field > label {
  font-family: var(--font-display);
  font-size: var(--step-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--mute);
}
.field .opt { color: var(--grey-text); letter-spacing: 0.14em; }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 1rem;
  background: var(--ink-lift);
  border: 1px solid var(--line-on-ink);
  border-radius: 0;
  color: var(--chalk);
  font-family: var(--font-body);
  font-size: 1rem;
  appearance: none;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.field textarea { min-height: 148px; resize: vertical; line-height: 1.6; }
.field input::placeholder,
.field textarea::placeholder { color: var(--grey-text); }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--grey); }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--chalk); background: #17181B; }
.field input:user-invalid,
.field textarea:user-invalid { border-color: #C97A7A; }

.field select {
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--mute) 50%),
    linear-gradient(135deg, var(--mute) 50%, transparent 50%);
  background-position: right 1.15rem center, right 0.85rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.field select option { background: var(--ink-lift); color: var(--chalk); }

.form__consent { font-size: var(--step-small); color: var(--mute); margin: 0; }
.form .btn { justify-self: start; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__error {
  margin: 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid #C97A7A;
  background: rgba(201, 122, 122, 0.08);
  color: #EBC0C0;
  font-size: var(--step-small);
}
.form__error a { color: var(--chalk); text-underline-offset: 3px; }

/* Success panel, built like the other bordered blocks on the page. */
.form-done {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--chalk);
  padding: clamp(1.75rem, 3vw, 2.5rem);
}
.form-done::before {
  content: '';
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: 70%;
  width: 26%;
  transform: skewX(var(--blade));
  background: repeating-linear-gradient(90deg,
    rgba(238, 240, 241, 0.07) 0 1px, transparent 1px 9px);
  pointer-events: none;
}
.form-done > * { position: relative; }
.form-done h3 { margin-bottom: 0.65rem; }
.form-done p { font-size: var(--step-small); color: var(--chalk-dim); max-width: 42ch; }
.form-done a { color: var(--chalk); text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */

.footer {
  background: var(--ink);
  border-top: 1px solid var(--line-on-ink);
  padding-block: clamp(3rem, 6vw, 5rem) 0;
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer__grid { grid-template-columns: 1fr; } }

.footer__logo { display: inline-block; }
.footer__logo img { width: 150px; margin-bottom: 1.35rem; }
.footer__tag {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: var(--chalk);
  max-width: 15ch;
}

.footer h2 {
  font-size: var(--step-label);
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--mute);
  margin-bottom: 1.1rem;
}

.footer__list { display: grid; gap: 0.15rem; }
.footer__list a,
.footer__list span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--step-small);
  color: var(--chalk-dim);
  text-decoration: none;
}
.footer__list a:hover { color: var(--chalk); text-decoration: underline; text-underline-offset: 3px; }

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line-on-ink);
  font-size: 0.875rem;
  color: var(--mute);
}
.footer__bar a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--mute);
  text-decoration: none;
}
.footer__bar a:hover { color: var(--chalk); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   15. MOTION
   -------------------------------------------------------------------------- */

/* Scoped to .js so content is never hidden if scripting is unavailable. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* Screenshot mode (?shot). The capture runs in a very tall browser window, so
   viewport-relative heights would stretch. Pin them while shooting only. */
.shot .hero { min-height: 760px; }
.shot .reveal { opacity: 1; transform: none; }

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

/* --------------------------------------------------------------------------
   16. BOOKING PAUSE, TEMPORARY
   Everything for the "not taking bookings" state lives in this one block, and
   every piece of markup using it is tagged BOOKING PAUSE, so reopening is a
   delete rather than an unpick. See BOOKINGS.md.

   These rules deliberately repeat .form-done rather than extending it: the
   form still exists and must not shift when this section is removed.
   -------------------------------------------------------------------------- */

/* Site-wide status band, sits directly under the header on every page.
   Stone on ink so it reads as an interruption, not as another content band. */
.notice-bar {
  background: var(--stone);
  color: var(--slate-body);
  border-bottom: 1px solid var(--line-on-chalk);
}
.notice-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1.15rem;
  padding-block: 0.9rem;
}
/* .label carries a 1.4rem bottom margin for its usual job as a section
   eyebrow. Inside a one-line bar that reads as a gap, especially once it
   wraps onto its own row on mobile. */
.notice-bar .label {
  margin: 0;
  color: var(--ink);
  flex: none;
}
.notice-bar p {
  margin: 0;
  max-width: 72ch;
  font-size: var(--step-small);
}
.notice-bar a {
  color: var(--ink);
  text-underline-offset: 3px;
}

/* Stands in for the contact form while bookings are closed. */
.paused {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--chalk);
  padding: clamp(1.75rem, 3vw, 2.5rem);
}
.paused::before {
  content: '';
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: 70%;
  width: 26%;
  transform: skewX(var(--blade));
  background: repeating-linear-gradient(90deg,
    rgba(238, 240, 241, 0.07) 0 1px, transparent 1px 9px);
  pointer-events: none;
}
.paused > * { position: relative; }
.paused h3 { margin-bottom: 0.65rem; }
.paused p {
  font-size: var(--step-small);
  color: var(--chalk-dim);
  max-width: 44ch;
}
.paused p + p { margin-top: 0.9rem; }
.paused a { color: var(--chalk); text-underline-offset: 3px; }