/* ==========================================================================
   Kick Off Sports
   Brand tokens live in :root. Change them here and the whole site follows.

   Design notes, so nobody undoes these by accident:
   - Neutrals are WARM (#f4f2ed, not #f5f7f5). Cool grey is the default
     look of every generated template; warm paper reads as a real brand.
   - Corners are square. Rounded everything is the other big tell.
   - Structure is drawn with 1px borders, not soft drop shadows.
   - Headings use a condensed grotesque, the family real sports clubs and
     stadium signage actually use.
   - THE COLOUR RULE. Red on blue is 2.1:1 and blue on black is 1.9:1.
     Neither is legible, so buttons change fill by surface:
       on white  -> red for booking, blue for everything else
       on blue   -> white
       on black  -> red
     The overrides that enforce this are in the Buttons section. Do not
     remove them, or CTAs will disappear into their backgrounds.
   ========================================================================== */

:root {
  /* Brand: red, blue and black --------------------------------------- */
  --brand:        #153f8a;   /* blue. Structural: hero panels, links,
                                secondary buttons, the CTA band. */
  --brand-dark:   #0e2c62;
  --brand-tint:   #e9eef7;
  --brand-light:  #a3c3f2;   /* small text on a blue ground (5.5:1) */
  --accent:       #e01a2b;   /* red. ACTIONS ONLY. If it starts appearing
                                decoratively it stops meaning "click me". */
  --accent-dark:  #b81322;
  --accent-light: #ff8574;   /* small text on a black ground (7.8:1) */

  /* Neutrals, very slightly warm so they do not read as template grey */
  --ink:          #121417;   /* black. The dominant dark. */
  --ink-2:        #464b52;
  --ink-3:        #5b626a;
  --paper:        #ffffff;
  --paper-2:      #f4f3ef;
  --paper-3:      #e7e5df;
  --line:         #d8d5cd;
  --line-dark:    #b7b3a9;

  /* Type -------------------------------------------------------------- */
  --font-head: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --font-body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Scale. Display sizes run large because the face is condensed. ------ */
  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.89rem);
  --step-0:  clamp(1rem, 0.97rem + 0.16vw, 1.06rem);
  --step-1:  clamp(1.22rem, 1.14rem + 0.38vw, 1.42rem);
  --step-2:  clamp(1.65rem, 1.45rem + 0.95vw, 2.3rem);
  --step-3:  clamp(2.1rem, 1.7rem + 1.9vw, 3.4rem);
  --step-4:  clamp(2.8rem, 2rem + 3.6vw, 5.2rem);

  /* Layout ------------------------------------------------------------ */
  --wrap: 1180px;
  --wrap-narrow: 720px;
  --gutter: clamp(1.15rem, 3.5vw, 2.25rem);
  --radius: 0px;
  --radius-lg: 0px;
}

/* Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.005em;
  margin: 0 0 .45em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); font-weight: 800; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); font-weight: 700; line-height: 1.15; }
p, ul, ol { margin: 0 0 1.05em; }
p { text-wrap: pretty; max-width: 66ch; }
a { color: var(--brand); text-underline-offset: .16em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
strong, b { font-weight: 600; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: .8rem 1.2rem; font-weight: 600;
}
.skip:focus { left: 0; }

/* Layout ------------------------------------------------------------- */
.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - (var(--gutter) * 2), var(--wrap-narrow)); margin-inline: auto; }
.section { padding-block: clamp(2.75rem, 5.5vw, 4.75rem); }
.section--tight { padding-block: clamp(1.85rem, 3.5vw, 2.75rem); }
.section--tint { background: var(--paper-2); }
.section--tint + .section--tint { padding-top: 0; }
.section--brand { background: var(--brand); color: #fff; }
.section--brand h2, .section--brand h3 { color: #fff; }
.section--brand p { color: rgba(255,255,255,.88); }
.section--ink { background: var(--ink); color: #fff; }
.section--ink h2, .section--ink h3 { color: #fff; }
.section--ink p { color: rgba(255,255,255,.82); }
.section--rule { border-top: 1px solid var(--line); }

.lede { font-size: var(--step-1); line-height: 1.45; color: var(--ink-2); max-width: 58ch; }
.section--brand .lede, .section--ink .lede { color: rgba(255,255,255,.9); }

.eyebrow {
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .7rem;
  display: block;
}
.section--brand .eyebrow { color: var(--brand-light); }
.section--ink .eyebrow { color: var(--accent-light); }

.section-head { max-width: 46rem; margin-bottom: clamp(1.6rem, 3vw, 2.5rem); }

/* Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-head); font-weight: 700; font-size: 1.08rem;
  letter-spacing: .01em; line-height: 1; text-decoration: none; text-transform: uppercase;
  padding: .85em 1.4em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-dark); color: #fff; }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-dark); color: #fff; }
.btn--ghost { border-color: currentColor; color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.section--brand .btn--ghost, .section--ink .btn--ghost, .hero__panel .btn--ghost { color: #fff; }
.section--brand .btn--ghost:hover, .section--ink .btn--ghost:hover, .hero__panel .btn--ghost:hover {
  background: #fff; color: var(--ink); border-color: #fff;
}

/* Surface overrides. See THE COLOUR RULE at the top of this file.
   Red against blue measures 2.1:1 and blue against black 1.9:1, so a
   button in the wrong fill vanishes into its panel. */
.hero__panel .btn--accent,
.section--brand .btn--accent,
.cta-band .btn--accent {
  background: #fff; color: var(--brand); border-color: #fff;
}
.hero__panel .btn--accent:hover,
.section--brand .btn--accent:hover,
.cta-band .btn--accent:hover {
  background: var(--brand-tint); color: var(--brand-dark); border-color: var(--brand-tint);
}
.section--ink .btn--primary { background: var(--accent); color: #fff; }
.section--ink .btn--primary:hover { background: var(--accent-dark); color: #fff; }

.btn--sm { padding: .62em 1em; font-size: .95rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }

.arrow-link {
  font-family: var(--font-head); font-weight: 700; text-decoration: none;
  text-transform: uppercase; font-size: 1.02rem; letter-spacing: .01em;
  display: inline-flex; align-items: center; gap: .35rem;
  border-bottom: 2px solid var(--accent); padding-bottom: 1px;
}
.arrow-link::after { content: "\203A"; font-size: 1.3em; line-height: 0; }

/* Header ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; min-height: 72px;
}
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.brand img { height: 42px; width: auto; }
.site-header .brand img { height: 56px; }
.brand__fallback {
  font-family: var(--font-head); font-weight: 800; font-size: 1.55rem;
  letter-spacing: -.01em; line-height: .95; text-transform: uppercase;
}
.brand__fallback span {
  color: var(--accent); display: block; font-family: var(--font-body);
  font-size: .58rem; letter-spacing: .17em; font-weight: 600; margin-top: .2rem;
}
.brand:has(img) .brand__fallback { display: none; }

.nav { display: flex; align-items: stretch; align-self: stretch; gap: 0; }
.nav__item { position: relative; display: flex; }
.nav__link {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-head); font-weight: 600; font-size: 1.06rem;
  text-transform: uppercase; letter-spacing: .015em;
  color: var(--ink); text-decoration: none;
  padding: .5rem .85rem;
  background: none; border: 0; cursor: pointer;
  border-bottom: 3px solid transparent;
}
.nav__link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.nav__link[aria-current="page"] { border-bottom-color: var(--ink); }
.nav__caret { width: .48em; height: .48em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-1px,-1px); transition: transform .12s ease; }
.nav__item--open > .nav__link .nav__caret { transform: rotate(225deg) translate(-2px,-2px); }

.nav__menu {
  position: absolute; top: 100%; left: 0; min-width: 265px;
  background: var(--paper); border: 2px solid var(--ink); border-top: 0;
  padding: 0; margin: 0; list-style: none;
  opacity: 0; visibility: hidden;
  transition: opacity .12s ease, visibility .12s;
}
.nav__item--open .nav__menu, .nav__item:hover .nav__menu, .nav__item:focus-within .nav__menu {
  opacity: 1; visibility: visible;
}
.nav__menu li + li { border-top: 1px solid var(--line); }
.nav__menu a {
  display: block; padding: .7rem .85rem;
  text-decoration: none; color: var(--ink); font-weight: 500; font-size: .97rem; line-height: 1.3;
}
.nav__menu a:hover { background: var(--brand); color: #fff; }
.nav__menu small { display: block; color: var(--ink-3); font-size: .8rem; font-weight: 400; margin-top: .1rem; }
.nav__menu a:hover small { color: rgba(255,255,255,.75); }

.header__cta { display: flex; align-items: center; gap: .8rem; flex-shrink: 0; }
.header__phone {
  font-family: var(--font-head); font-weight: 700; font-size: 1.18rem;
  text-decoration: none; color: var(--ink); white-space: nowrap; line-height: 1;
}
.header__phone small {
  display: block; font-family: var(--font-body); font-size: .6rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .15rem;
}
.header__phone:hover { color: var(--accent); }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 46px; height: 46px; border: 2px solid var(--ink);
  background: var(--paper); cursor: pointer; padding: 0;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 20px; height: 2px; background: var(--ink);
  transition: transform .16s ease, opacity .16s ease;
}
.nav-toggle span { position: relative; }
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1040px) {
  .nav-toggle { display: flex; }
  .header__phone { display: none; }
  .nav {
    position: fixed; inset: 74px 0 0 auto; width: min(340px, 86vw);
    background: var(--paper); border-left: 2px solid var(--ink);
    flex-direction: column; align-items: stretch;
    padding: 0 0 3rem; overflow-y: auto;
    transform: translateX(100%); visibility: hidden;
    transition: transform .2s ease, visibility .2s;
  }
  .nav[data-open="true"] { transform: translateX(0); visibility: visible; }
  .nav__item { display: block; }
  .nav__link {
    width: 100%; justify-content: space-between; padding: .95rem var(--gutter);
    font-size: 1.2rem; border-bottom: 1px solid var(--line);
  }
  .nav__link:hover { border-bottom-color: var(--line); background: var(--paper-2); }
  .nav__menu {
    position: static; opacity: 1; visibility: visible;
    border: 0; min-width: 0; display: none; background: var(--paper-2);
  }
  .nav__item--open .nav__menu { display: block; }
  .nav__item:hover .nav__menu { display: none; }
  .nav__item--open:hover .nav__menu { display: block; }
  .nav__menu a { padding: .7rem var(--gutter) .7rem calc(var(--gutter) + .75rem); }
}
@media (max-width: 400px) {
  .site-header__inner { gap: .5rem; min-height: 64px; }
  .header__cta { gap: .45rem; }
  .site-header .brand img { height: 40px; }
  .brand__fallback { font-size: 1.24rem; }
  .brand__fallback span { font-size: .5rem; letter-spacing: .12em; }
  .header__cta .btn--sm { padding: .58em .7em; font-size: .82rem; }
  .nav-toggle { width: 40px; height: 40px; }
  .nav { inset-block-start: 64px; }
}

/* Media slots -------------------------------------------------------- */
/* Image areas keep a quiet neutral background while photography loads. */
.media {
  position: relative; margin: 0; overflow: hidden;
  background: transparent;
  aspect-ratio: var(--ratio, 16 / 9);
  display: grid; place-items: center;
}
/* The image sits above the neutral loading background. */
.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.media .media__overlay-logo {
  inset: auto 1rem 1rem auto; width: clamp(68px, 22%, 108px); height: auto;
  max-height: 38%; object-fit: contain; z-index: 2;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.48));
}
.media .media__overlay-logo--on-strike {
  width: clamp(92px, 31%, 152px);
}
.media__hint {
  display: none;
}


.logo-slot { display: inline-flex; align-items: center; justify-content: center; }
.logo-slot img { max-height: var(--logo-h, 46px); width: auto; object-fit: contain; }
.logo-slot .logo-slot__hint {
  font-family: var(--font-head); font-size: .84rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-3);
  border: 1px dashed var(--line-dark);
  padding: .5rem .75rem; text-align: center; line-height: 1.2;
}
.logo-slot:has(img) .logo-slot__hint { display: none; }

/* Hero ----------------------------------------------------------------
   Split: a solid colour panel beside a photograph, meeting on a hard
   edge. Deliberately not a photo with a soft gradient washed over it.  */
.hero { background: var(--brand); color: #fff; }
.hero__grid { display: grid; grid-template-columns: 1fr; }
.hero__panel {
  background: var(--brand); color: #fff;
  padding: clamp(2.25rem, 5vw, 4.25rem) 0 clamp(2.25rem, 5vw, 4.25rem);
  display: flex; align-items: center;
}
.hero__panel-inner { width: min(100% - (var(--gutter) * 2), calc(var(--wrap) / 2 - 1.5rem)); margin-left: auto; margin-right: auto; }
.hero h1 { color: #fff; margin-bottom: .35em; }
.hero p { color: rgba(255,255,255,.88); font-size: var(--step-1); line-height: 1.45; max-width: 40ch; }
.hero .eyebrow { color: var(--brand-light); }
.hero__media .media { height: 100%; min-height: 300px; aspect-ratio: auto; }

.hero__strip {
  background: var(--brand-dark);
  border-top: 1px solid rgba(255,255,255,.12);
}
.hero__strip .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2.5rem; padding-block: 1.1rem; }
.hero__strip-label {
  font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.6); margin: 0;
}
.hero__strip .logo-slot {
  --logo-h: 36px;
  filter: grayscale(1);
  opacity: .72;
  transition: filter .2s ease, opacity .2s ease;
}
.hero__strip .logo-slot:hover { filter: none; opacity: 1; }
.hero__strip .logo-slot__hint { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.35); }

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.02fr .98fr; align-items: stretch; }
  .hero__panel-inner { margin-right: clamp(2rem, 4vw, 3.5rem); margin-left: auto;
    width: min(calc(var(--wrap) / 2 - 1.5rem), calc(100% - var(--gutter))); }
  .hero__media { min-height: 480px; }
  .hero--compact .hero__media { min-height: 380px; }
}
@media (max-width: 899px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
  .hero__media .media { aspect-ratio: 16 / 10; min-height: 0; }
}

.breadcrumb { font-size: .82rem; color: rgba(255,255,255,.7); margin-bottom: .9rem; letter-spacing: .02em; }
.breadcrumb a { color: rgba(255,255,255,.9); }
.breadcrumb span { padding: 0 .4rem; opacity: .5; }

/* Booking board -------------------------------------------------------
   The main homepage call to action. Styled like a price board at a
   venue rather than a row of marketing cards: hard dividers, the facts
   in a fixed order, one button per venue.                              */
.board { background: var(--ink); color: #fff; }
.board__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .5rem 2rem; padding-block: clamp(1.75rem, 3vw, 2.5rem) 1.35rem;
}
.board__head h2 { color: #fff; margin: 0; font-size: var(--step-2); }
.board__head p { margin: 0; color: rgba(255,255,255,.7); font-size: .95rem; }
.board__grid {
  display: grid; grid-template-columns: 1fr;
  border-top: 2px solid rgba(255,255,255,.25);
}
.board__item {
  padding: 1.5rem 0 1.75rem;
  border-bottom: 1px solid rgba(255,255,255,.16);
  display: flex; flex-direction: column;
}
.board__item h3 {
  color: #fff; font-size: 1.75rem; margin-bottom: .15rem; text-transform: uppercase;
  letter-spacing: .005em;
}
.board__loc { color: rgba(255,255,255,.82); font-size: .84rem; font-weight: 700; margin: 0 0 1.1rem; letter-spacing: .02em; }
.board__facts { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .45rem; }
.board__facts li {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: .93rem; color: rgba(255,255,255,.85);
  border-bottom: 1px dotted rgba(255,255,255,.2); padding-bottom: .45rem;
}
.board__facts dt, .board__facts .k { color: rgba(255,255,255,.6); }
.board__facts .v { font-weight: 600; text-align: right; }
.board__price { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; line-height: 1; }
.board__item .btn { margin-top: auto; }
/* Block, not flex. This holds a sentence with links in it, and flex turns
   every text node and <a> into a separate item, so gap pushes visible
   spaces before the punctuation ("send an enquiry ."). */
.board__note {
  padding-block: 1.25rem 2rem; color: rgba(255,255,255,.7); font-size: .92rem;
  line-height: 1.6; max-width: 78ch;
}
.board__note a { color: #fff; }
@media (min-width: 760px) {
  .board__grid { grid-template-columns: repeat(3, 1fr); }
  .board__item { padding: 1.75rem clamp(1.25rem, 2.5vw, 2rem) 2rem; border-bottom: 0; }
  .board__item + .board__item { border-left: 1px solid rgba(255,255,255,.16); }
  .board__item:first-child { padding-left: 0; }
  .board__item:last-child { padding-right: 0; }
}

/* Cards -------------------------------------------------------------- */
.grid { display: grid; gap: clamp(1rem, 2vw, 1.75rem); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(225px, 100%), 1fr)); }

.card {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  transition: border-color .14s ease;
}
.card:hover { border-color: var(--ink); }
.card__body { padding: 1.35rem 1.4rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.card__body h2, .card__body h3 { margin-bottom: .2rem; font-size: 1.6rem; text-transform: uppercase; }
.card__loc { font-size: .82rem; font-weight: 700; color: var(--ink-2); margin: 0 0 .85rem; letter-spacing: .015em; }
.card__body p { font-size: .96rem; color: var(--ink-2); }
.card__foot { margin-top: auto; padding-top: 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.card__funder { display: flex; align-items: center; gap: .5rem; }
.card__funder .logo-slot { --logo-h: 32px; }
.card__funder small { font-size: .7rem; color: var(--ink-3); line-height: 1.2; max-width: 11ch; }

/* Facts list, replaces the old bold-label bullet pattern -------------- */
.facts { list-style: none; padding: 0; margin: 0 0 1.15em; border-top: 1px solid var(--line); }
.facts li {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: .6rem 0; border-bottom: 1px solid var(--line); font-size: .96rem;
}
.facts .k { color: var(--ink-3); flex-shrink: 0; }
.facts .v { text-align: right; font-weight: 500; }
.section--ink .facts, .section--brand .facts { border-color: rgba(255,255,255,.2); }
.section--ink .facts li, .section--brand .facts li { border-color: rgba(255,255,255,.2); }
.section--ink .facts .k, .section--brand .facts .k { color: rgba(255,255,255,.62); }

/* Pillars / stats ---------------------------------------------------- */
.pillars { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); border-top: 2px solid var(--ink); }
.pillar { padding: 1.4rem 0 1.6rem; border-bottom: 1px solid var(--line); }
.pillar__figure { font-family: var(--font-head); font-size: clamp(2.2rem, 4vw, 3.1rem); font-weight: 800; line-height: .95; display: block; margin-bottom: .35rem; color: var(--brand); }
.pillar h3 { font-size: 1.28rem; margin-bottom: .3rem; text-transform: uppercase; }
.pillar p { font-size: .93rem; margin: 0; color: var(--ink-2); }
.section--ink .pillar__figure, .section--brand .pillar__figure { color: #fff; }
.section--ink .pillars, .section--brand .pillars { border-top-color: rgba(255,255,255,.35); }
.section--ink .pillar, .section--brand .pillar { border-bottom-color: rgba(255,255,255,.16); }
@media (min-width: 700px) {
  .pillars--divided .pillar { padding-inline: clamp(1.1rem, 2.2vw, 1.8rem); border-bottom: 0; }
  .pillars--divided .pillar + .pillar { border-left: 1px solid var(--line); }
  .pillars--divided .pillar:first-child { padding-left: 0; }
  .pillars--divided .pillar:last-child { padding-right: 0; }
  .section--ink .pillars--divided .pillar + .pillar { border-left-color: rgba(255,255,255,.16); }
}

/* Timeline ------------------------------------------------------------
   The About page history. Horizontal on desktop, vertical on mobile.

   The rule is drawn on the LIST (border-top on wide, border-left on
   narrow) and each item hangs a marker on it, so the line is one element
   and cannot end up with gaps between items. Markers are blue, not red:
   red is reserved for things you can click, and a decorative red square
   here would weaken every button on the site.
   -------------------------------------------------------------------- */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-left: 2px solid var(--ink);
}
.timeline__item { position: relative; padding: 0 0 1.75rem 1.5rem; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: 0; top: .45rem;
  width: 11px; height: 11px;
  background: var(--brand);
  transform: translateX(-50%);
}
.timeline__item--key::before {
  width: 17px; height: 17px;
  top: .25rem;
  background: var(--ink);
}
.timeline__year {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 800;
  line-height: .95;
  color: var(--brand);
  margin-bottom: .2rem;
}
.timeline h3 {
  font-size: 1.16rem;
  text-transform: uppercase;
  margin: 0 0 .35rem;
}
.timeline p { font-size: .93rem; color: var(--ink-2); margin: 0; }
.timeline__year--text { font-size: clamp(1.5rem, 2.4vw, 1.95rem); }
.timeline__media { margin-top: 1rem; }
.timeline__item--key .timeline__panel {
  background: var(--brand-tint);
  border: 1px solid var(--line);
  padding: 1rem 1.1rem 1.15rem;
  margin-top: -.35rem;
}
.timeline__item--key .timeline__media { margin: 1rem -1.1rem -1.15rem; }

@media (min-width: 900px) {
  .timeline {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    border-left: 0;
    border-top: 2px solid var(--ink);
  }
  .timeline__item {
    padding: 1.5rem clamp(.9rem, 1.6vw, 1.4rem) 0 0;
  }
  .timeline__item:last-child { padding-right: 0; padding-bottom: 0; }
  .timeline__item::before {
    left: 0; top: 0;
    transform: translateY(-50%);
  }
  .timeline__item--key::before { transform: translateY(-50%); }
  /* Cancel the panel padding so the milestone year sits on the same
     baseline as the other four. Without this it drops by 1rem and the
     row stops reading as a row. */
  .timeline__item--key .timeline__panel { margin-top: -1rem; }
}

/* Before and after ----------------------------------------------------
   Two photographs of the same place, side by side. They stay side by side
   at every width, including a phone: stacked, a reader scrolls past the
   first before seeing the second and the comparison is gone. Small and
   side by side beats large and separated.
   -------------------------------------------------------------------- */
.ba { margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 0; }
.ba__pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.5rem, 1.5vw, 1rem); }
.ba__side { position: relative; }
.ba__label {
  position: absolute; z-index: 3; top: 0; left: 0;
  font-family: var(--font-head); font-weight: 700; font-size: clamp(.82rem, 1.6vw, 1rem);
  letter-spacing: .06em; text-transform: uppercase; line-height: 1;
  padding: .45em .7em; background: var(--ink); color: #fff;
}
.ba__label--after { background: var(--brand); }
.ba__caption {
  font-size: .9rem; color: var(--ink-3); margin-top: .85rem; max-width: 60ch;
}

/* Cookie consent ------------------------------------------------------
   Accept and Reject are DELIBERATELY IDENTICAL. Same size, same fill,
   same weight, side by side. The ICO expects rejecting to be as easy as
   accepting, and the usual trick of a bright Accept beside a washed-out
   Reject is the thing they object to. If you restyle this, keep them
   indistinguishable from each other.

   Neither is red. Red is the booking CTA across the whole site, and a red
   Accept here would be the loudest button on the page, which is exactly
   the nudge that makes consent invalid.

   The banner is a region, not a modal: no backdrop, no scroll lock. A
   visitor can read and use the entire site while ignoring it.
   -------------------------------------------------------------------- */
.consent {
  position: fixed; z-index: 60; inset: auto 0 0 0;
  background: var(--ink); color: #fff;
  border-top: 3px solid var(--accent);
}
.consent__inner {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
  padding: 1.1rem 0 1.2rem;
  display: flex; gap: 1.25rem 2rem; align-items: center;
  flex-wrap: wrap; justify-content: space-between;
}
.consent__text { flex: 1 1 26rem; }
.consent__text h2 {
  font-size: 1.25rem; text-transform: uppercase; margin: 0 0 .3rem; color: #fff;
}
.consent__text p { margin: 0; font-size: .92rem; color: #e4e2dd; max-width: 62ch; }
.consent__actions {
  display: flex; gap: .6rem 1rem; align-items: center; flex-wrap: wrap;
}
.btn--consent {
  background: #fff; color: var(--ink); border: 2px solid #fff;
  /* Wide enough that BOTH labels hit the floor rather than sizing to
     their own glyphs, so Accept and Reject come out pixel-identical
     instead of differing by the width of a "c" against a "j". */
  min-width: 9rem;
}
.btn--consent:hover, .btn--consent:focus-visible {
  background: var(--paper-3); border-color: var(--paper-3); color: var(--ink);
}
.consent__link {
  font: inherit; font-size: .9rem; background: none; border: 0; padding: .35rem 0;
  color: #fff; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.consent__link:hover { color: var(--accent-light); }

.consent-panel {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(10, 12, 15, .62);
  display: grid; place-items: center; padding: var(--gutter);
  overflow-y: auto;
}
/* MUST come after the display rule above. `display: grid` beats the
   browser's built-in [hidden] { display: none }, so without this the
   invisible panel covers the whole viewport and eats every click on the
   site. Same for the banner. Do not remove either line. */
.consent-panel[hidden], .consent[hidden] { display: none; }
.consent-panel__box {
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink);
  padding: clamp(1.25rem, 3vw, 2rem);
  width: min(100%, 38rem); max-height: 100%; overflow-y: auto;
}
.consent-panel__box h2 { font-size: 1.6rem; text-transform: uppercase; margin: 0 0 .4rem; }
.consent-panel__box > p { font-size: .93rem; color: var(--ink-2); }
.consent-cat { border-top: 1px solid var(--line); padding: .9rem 0 .2rem; }
.consent-cat__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.consent-cat__name {
  font-family: var(--font-head); font-weight: 700; font-size: 1.15rem;
  text-transform: uppercase; cursor: pointer;
}
.consent-cat__state {
  font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--line-dark); padding: .25em .6em;
}
.consent-cat__toggle input { width: 1.3rem; height: 1.3rem; accent-color: var(--brand); cursor: pointer; }
.consent-cat p { font-size: .89rem; color: var(--ink-2); margin: .35rem 0 0; }
.consent-panel__actions {
  display: flex; gap: .6rem .9rem; flex-wrap: wrap; align-items: center;
  border-top: 2px solid var(--ink); margin-top: 1.1rem; padding-top: 1.1rem;
}
.consent-panel__actions .btn--consent {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
.consent-panel__actions .btn--consent:hover,
.consent-panel__actions .btn--consent:focus-visible {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.consent-panel__actions .consent__link { color: var(--ink-2); }
.consent-panel__note { font-size: .85rem; color: var(--ink-3); margin: .9rem 0 0; }

/* What stands in for the booking diary until consent is given. */
.consent-gate {
  border: 2px dashed var(--line-dark); background: var(--paper-2);
  padding: clamp(1.1rem, 3vw, 1.75rem);
}
.consent-gate h3 { font-size: 1.35rem; text-transform: uppercase; margin: 0 0 .4rem; }
.consent-gate p { font-size: .95rem; color: var(--ink-2); }
.consent-gate__note { font-size: .87rem; color: var(--ink-3); margin: .8rem 0 0; }

.footer__linklike {
  font: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  color: inherit; text-decoration: underline; text-underline-offset: 3px;
}

@media (max-width: 560px) {
  .consent__actions { width: 100%; }
  .consent__actions .btn--consent { flex: 1 1 0; min-width: 0; }
  .consent__link { width: 100%; text-align: left; }
}

/* Tick list, kept but plainer ---------------------------------------- */
.ticks { list-style: none; padding: 0; display: grid; gap: .6rem; }
.ticks li { position: relative; padding-left: 1.65rem; font-size: .97rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: .95rem; height: .5rem;
  border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent);
  transform: rotate(-45deg);
}
.section--brand .ticks li::before { border-color: var(--brand-light); }
.section--ink .ticks li::before { border-color: var(--accent-light); }
.ticks--2 { grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: .6rem 2rem; }

.split { display: grid; gap: clamp(1.75rem, 4vw, 3.25rem); align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); }
.split--centre { align-items: center; }
.split--media-first .split__media { order: -1; }

/* Keep supporting photography balanced beside copy on wider screens. Portrait
   originals still crop naturally rather than making one section much taller. */
@media (min-width: 900px) {
  .split__media .media,
  .split > div > .media { aspect-ratio: 4 / 3; }
  .split__media .media--portrait { aspect-ratio: 3 / 4; }
}
.split__media .media--portrait { width: min(100%, 420px); margin-inline: auto; }

.supporter-logo {
  min-height: 11rem; display: flex; align-items: center; justify-content: center;
  padding: clamp(1.5rem, 4vw, 3rem);
}
.supporter-logo a { display: block; width: min(100%, 334px); }
.supporter-logo img { display: block; width: 100%; height: auto; }
.supporter-logo a:focus-visible { outline: 3px solid var(--accent); outline-offset: 8px; }

/* Logo strips -------------------------------------------------------- */
.logo-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.logo-strip .logo-slot {
  --logo-h: 46px;
  filter: grayscale(1);
  opacity: .72;
  transition: filter .2s ease, opacity .2s ease;
}
.logo-strip .logo-slot:hover { filter: none; opacity: 1; }
.logo-strip--tight .logo-slot { --logo-h: 38px; }
.logo-caption {
  font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 1.25rem; max-width: none;
}

/* Tables ------------------------------------------------------------- */
.price-table { width: 100%; border-collapse: collapse; margin-bottom: .9rem; }
.price-table caption {
  text-align: left; font-family: var(--font-head); font-weight: 700; font-size: 1.5rem;
  text-transform: uppercase; margin-bottom: .7rem;
}
.price-table th, .price-table td { text-align: left; padding: .8rem .5rem; border-bottom: 1px solid var(--line); }
.price-table thead th {
  font-family: var(--font-body); font-size: .7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .14em; color: var(--ink-3); border-bottom: 2px solid var(--ink); padding-bottom: .5rem;
}
.price-table td:last-child, .price-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.price-table .price { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; white-space: nowrap; line-height: 1; }
.price-table td small { display: block; color: var(--ink-3); font-size: .82rem; font-weight: 400; margin-top: .15rem; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Gallery ------------------------------------------------------------- */
.gallery { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.gallery .media { --ratio: 4 / 3; }
.gallery .media--wide { grid-column: span 2; --ratio: 16 / 9; }
.advertising-copy { max-width: 82ch; }
.gallery.advertising-gallery { grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .advertising-split { grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); align-items: start; }
  .gallery.advertising-gallery {
    grid-template-columns: 1fr; gap: 1rem; width: min(100%, 500px); justify-self: end;
  }
}
.gallery .media--tall { --ratio: 3 / 4; }
@media (min-width: 900px) {
  .gallery { gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery .media,
  .gallery .media--wide,
  .gallery .media--tall { grid-column: span 1; aspect-ratio: 4 / 3; }
}
.gallery.advertising-gallery .media { --ratio: 16 / 9; }
@media (min-width: 900px) {
  .gallery.advertising-gallery .media { aspect-ratio: 3 / 1; }
}
@media (max-width: 640px) { .gallery .media--wide { grid-column: span 1; } .gallery .media--tall { --ratio: 4 / 3; } }

/* Booking embed ------------------------------------------------------ */
.embed { border: 2px solid var(--ink); overflow: hidden; background: var(--paper-2); min-height: 760px; }
.embed iframe { width: 100%; min-height: 760px; border: 0; display: block; }
.embed__placeholder {
  padding: clamp(1.75rem, 4vw, 3rem); text-align: center; color: var(--ink-2);
  border: 1px dashed var(--line-dark);
  background: repeating-linear-gradient(45deg, rgba(22,25,28,.035) 0 8px, transparent 8px 16px), var(--paper-2);
}
.embed__placeholder h3 { color: var(--ink); text-transform: uppercase; }
.embed__placeholder p { margin-inline: auto; }

/* Forms -------------------------------------------------------------- */
.form { display: grid; gap: 1rem; }
.form__row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr)); }
.field { display: grid; gap: .3rem; }
.field label { font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.field .req { color: var(--accent); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; color: var(--ink);
  padding: .72rem .8rem; border: 1px solid var(--line-dark); border-radius: 0;
  background: var(--paper); width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); outline: 2px solid var(--accent); outline-offset: -2px; }
.field__hint { font-size: .82rem; color: var(--ink-3); }
.form__consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .87rem; color: var(--ink-2); }
.form__consent input { width: 1.05rem; height: 1.05rem; margin-top: .25rem; flex-shrink: 0; accent-color: var(--brand); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.form__error {
  border-left: 4px solid var(--accent); background: #fbeee9; color: #7a1a08;
  padding: .9rem 1.1rem; font-size: .95rem; line-height: 1.5;
}

.form-card { background: var(--paper); border: 2px solid var(--ink); padding: clamp(1.35rem, 3vw, 2.25rem); }
.form-card h2 { text-transform: uppercase; }

/* FAQ ---------------------------------------------------------------- */
.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.05rem 2.75rem 1.05rem 0; position: relative;
  font-family: var(--font-head); font-weight: 600; font-size: 1.32rem; line-height: 1.25;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .35rem; top: 1.45rem;
  width: .62rem; height: .62rem; border-right: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent);
  transform: rotate(45deg); transition: transform .16s ease;
}
.faq details[open] summary::after { transform: rotate(225deg); top: 1.6rem; }
.faq summary:hover { color: var(--accent); }
.faq__answer { padding: 0 2.75rem 1.25rem 0; }
.faq__answer p:last-child, .faq__answer ul:last-child { margin-bottom: 0; }

/* Testimonials ------------------------------------------------------- */
.quotes { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); border-top: 2px solid var(--ink); }
.quote { padding: 1.35rem 0 1.5rem; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }
@media (min-width: 700px) {
  .quote { padding-inline: clamp(1.1rem, 2.2vw, 1.75rem); border-bottom: 0; }
  .quote + .quote { border-left: 1px solid var(--line); }
  .quote:first-child { padding-left: 0; }
  .quote:last-child { padding-right: 0; }
}
.quote__stars { color: #a06c04; letter-spacing: .1em; font-size: .95rem; margin-bottom: .7rem; }
.quote blockquote { margin: 0 0 1.1rem; font-size: 1.02rem; line-height: 1.5; }
.quote blockquote::before { content: "\201C"; }
.quote blockquote::after { content: "\201D"; }
.quote figcaption { margin-top: auto; font-size: .85rem; color: var(--ink-3); }
.quote figcaption b { display: block; color: var(--ink); font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; text-transform: uppercase; }
.quote--placeholder blockquote { color: var(--ink-3); font-style: italic; }

/* Notices ------------------------------------------------------------ */
.notice { border-left: 4px solid var(--brand); background: var(--brand-tint); padding: 1.1rem 1.35rem; }
.notice--warn { border-left-color: var(--accent); background: #fbeee9; }
.notice p:last-child { margin-bottom: 0; }
.notice h2, .notice h3 { font-size: 1.18rem; margin-bottom: .3rem; text-transform: uppercase; }

.rules { display: grid; gap: 0; list-style: none; padding: 0; border-top: 1px solid var(--line); }
.rules li { display: flex; gap: .75rem; align-items: baseline; font-size: .96rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.rules .yes, .rules .no {
  font-family: var(--font-head); font-weight: 700; font-size: .95rem; flex-shrink: 0; width: 2.6rem;
  text-transform: uppercase; letter-spacing: .05em;
}
.rules .yes { color: var(--brand); }
.rules .no { color: var(--accent); }

/* Prose (terms, privacy) --------------------------------------------- */
.prose h2 { font-size: var(--step-2); margin-top: 2.1rem; }
.prose h3 { font-size: var(--step-1); margin-top: 1.6rem; }
.prose ol, .prose ul { padding-left: 1.3rem; }
.prose li { margin-bottom: .4rem; }
.prose > *:first-child { margin-top: 0; }

/* CTA band ----------------------------------------------------------- */
.cta-band { background: var(--brand); color: #fff; }
.cta-band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; flex-wrap: wrap; padding-block: clamp(2rem, 4vw, 3rem); }
.cta-band h2 { margin-bottom: .2rem; color: #fff; font-size: var(--step-2); text-transform: uppercase; }
.cta-band p { margin: 0; color: rgba(255,255,255,.85); }

/* Footer ------------------------------------------------------------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.72); font-size: .93rem; }
.site-footer a { color: rgba(255,255,255,.88); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer__grid { display: grid; gap: 2rem; padding-block: clamp(2.25rem, 4.5vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 560px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .footer__grid { grid-template-columns: 1.5fr repeat(3, 1fr); } }
.footer__brand .brand { color: #fff; margin-bottom: .9rem; }
.footer__brand .brand img { filter: none; }
.footer__brand p { font-size: .92rem; max-width: 34ch; }
.site-footer h2, .site-footer h4 {
  font-family: var(--font-body); color: #fff; font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 600; margin: 0 0 .9rem; line-height: 1.3;
}
.footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.footer__partners { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; padding-block: 1.5rem; border-top: 1px solid rgba(255,255,255,.14); }
.footer__partners .logo-slot {
  --logo-h: 38px;
  filter: grayscale(.55) saturate(.85);
  opacity: .9;
  transition: filter .2s ease, opacity .2s ease;
}
.footer__partners .logo-slot:hover { filter: none; opacity: 1; }
.footer__partners .logo-slot__hint { color: rgba(255,255,255,.55); border-color: rgba(255,255,255,.28); }
.footer__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; padding-block: 1.25rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .82rem; }
.footer__legal ul { display: flex; flex-wrap: wrap; gap: 1.15rem; list-style: none; padding: 0; margin: 0; }
.footer__legal p { max-width: none; }
.footer__credit { display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap; }
.footer__credit span { color: rgba(255,255,255,.58); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.footer__credit img { display: block; width: auto; height: 24px; }
.site-footer .footer__credit:hover { text-decoration: none; }
.site-footer .footer__credit:hover img { opacity: .82; }
.social { display: flex; gap: .5rem; margin-top: 1.1rem; }
.social a { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.25); display: grid; place-items: center; }
.social a:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.45); }
.social svg { width: 18px; height: 18px; fill: currentColor; }

/* Utilities ---------------------------------------------------------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.text-center { text-align: center; }
.text-center p { margin-inline: auto; }
/* Heading that must be an h2 for document outline reasons but should read
   at h3 size. Semantics and appearance are separate concerns. */
.h-sm { font-size: var(--step-1); }
.mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 1.75rem; }

/* Build-time notes. Visible on purpose so nothing unconfirmed can ship
   quietly. Remove the todo() calls in content.py as they are answered. */
.todo {
  display: inline-block; background: #fdf3d9; border: 1px solid #c99a1e; border-left: 4px solid #c99a1e;
  color: #6b4e00; padding: .35em .7em; font-size: .85rem; line-height: 1.45; font-weight: 500;
}
.todo::before { content: "\26A0\FE0E  "; }

@media print {
  .site-header, .site-footer, .cta-band, .nav-toggle, .board { display: none; }
  body { color: #000; }
}

/* Per-service booking buttons ----------------------------------------
   Used where Setmore exposes one URL per service rather than a booking
   page, so the visitor picks the session before leaving the site. */
.svc-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.svc { border: 2px solid var(--ink); padding: 1.25rem 1.35rem 1.4rem; display: flex; flex-direction: column; background: var(--paper); }
.svc__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.svc__head h3 { margin: 0; font-size: 1.6rem; text-transform: uppercase; }
.svc__price { font-family: var(--font-head); font-weight: 700; font-size: 1.9rem; line-height: 1; white-space: nowrap; }
.svc__detail { font-size: .9rem; color: var(--ink-3); margin: .3rem 0 1.15rem; }
.svc .btn { margin-top: auto; }