/* Physical Performance — design system
   Source file. Edit here, then run `python3 scripts/build.py`, which writes a
   content-hashed copy to site/assets/ and updates every page reference.

   Palette, logo and photography follow the Physical Performance Website Design
   Pack: near-black and charcoal as the dominant environment, white for reading
   surfaces, and the brand blue sampled from the supplied logo as the single
   restrained accent. No JavaScript, no external fonts, no remote assets. */

/* ---------------------------------------------------------------- tokens - */

:root {
  /* Dark environment — the brand's home ground. */
  --ink: #0b0d0f;
  --ink-2: #121619;
  --ink-3: #1a1f23;
  --ink-line: #262c31;

  /* Light reading surfaces. */
  --paper: #ffffff;
  --paper-2: #f3f4f6;
  --line: #e3e5e8;
  --line-strong: #c6cad0;

  /* Text */
  --text: #0d1114;
  --text-muted: #545c64;
  --on-dark: #f2f4f6;
  --on-dark-muted: #a5aeb6;

  /* Brand blue, sampled from the supplied colour logo. */
  --blue: #0d6fc6;
  --blue-hover: #0b5faa;
  --blue-bright: #4ea6f2;
  --blue-deep: #0a5599;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.3125rem;
  --fs-xl: 1.625rem;
  --fs-2xl: clamp(1.6rem, 1.1rem + 2.1vw, 2.5rem);
  --fs-3xl: clamp(2rem, 1.3rem + 3vw, 3.4rem);
  --fs-4xl: clamp(2.4rem, 1.4rem + 4.6vw, 4.75rem);

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --section-y: clamp(3.5rem, 7.5vw, 7rem);

  --wrap: 1240px;
  --wrap-mid: 980px;
  --wrap-narrow: 720px;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  --radius: 4px;
  --border: 1px solid var(--line);
}

/* ------------------------------------------------------------- elements - */

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

html {
  scroll-behavior: smooth;
  /* Deep enough to clear the sticky header at its tallest, which on a phone is
     the logo row plus the navigation row. */
  scroll-padding-top: 8.5rem;
  -webkit-text-size-adjust: 100%;
}

/* Focus not obscured (WCAG 2.2, 2.4.11): anything that can be reached by
   keyboard is scrolled clear of the sticky header, not under it. */
a, button, summary, [tabindex] { scroll-margin-top: 9rem; }

@media (min-width: 56em) {
  html { scroll-padding-top: 6rem; }
  a, button, summary, [tabindex] { scroll-margin-top: 6.5rem; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-4);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 800;
  font-stretch: 95%;
  text-wrap: balance;
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); letter-spacing: -0.015em; font-weight: 700; }
h4 { font-size: var(--fs-md); letter-spacing: -0.01em; font-weight: 700; }

p, ul, ol { margin: 0 0 var(--sp-4); }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a { color: inherit; text-underline-offset: 0.25em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--blue-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

.on-dark :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible { outline-color: var(--blue-bright); }

address { font-style: normal; }
img { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: var(--border); margin: var(--sp-7) 0; }

/* --------------------------------------------------------------- layout - */

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

.wrap--mid { max-width: var(--wrap-mid); }
.wrap--narrow { max-width: var(--wrap-narrow); }

/* Below the two-column breakpoint the halves simply stack, so they need their
   own vertical rhythm. */
.grid--2 > * + * { margin-top: var(--sp-8); }

.grid--2 > *,
.split > *,
.cta > *,
.compare > li,
.gallery > li,
.contact-actions > li,
.site-footer__grid > * { min-width: 0; }

.band {
  padding-block: var(--section-y);
  background: var(--paper);
  color: var(--text);
}

.band--tight { padding-block: clamp(2.25rem, 5vw, 4rem); }
.band--tint { background: var(--paper-2); }

.band--dark {
  background: var(--ink);
  color: var(--on-dark);
}

.band--dark h1,
.band--dark h2,
.band--dark h3,
.band--dark h4 { color: var(--on-dark); }

.band--dark p,
.band--dark li { color: var(--on-dark-muted); }

.band--charcoal { background: var(--ink-2); color: var(--on-dark); }
.band--charcoal h2, .band--charcoal h3 { color: var(--on-dark); }
.band--charcoal p, .band--charcoal li { color: var(--on-dark-muted); }

.skip {
  position: absolute;
  left: var(--sp-4);
  top: -6rem;
  z-index: 30;
  background: var(--blue);
  color: #fff;
  padding: var(--sp-3) var(--sp-4);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius);
}

.skip:focus { top: var(--sp-3); }

/* ---------------------------------------------------------------- header - */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ink);
  border-bottom: 1px solid var(--ink-line);
  color: var(--on-dark);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 3.5rem;
  padding-block: var(--sp-2);
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  text-decoration: none;
  flex: none;
}

.brand img {
  width: auto;
  /* The authoritative lockup is stacked, not a single line of type, so it needs
     more height than a wordmark to keep PHYSICAL and the PERFORMANCE bar
     legible. Kept small enough that the header never dominates the first
     screen on a phone. */
  height: 2.25rem;
}

.brand { order: 1; }
.header-cta { order: 2; }

/* Mobile: navigation drops to its own full-width row beneath the logo, and the
   Enquire button stays beside the logo. Five destinations will not fit on one
   line at 320px, so the row becomes an even grid that adds a column as the
   screen widens rather than leaving one item stranded on its own line. */
.nav {
  order: 3;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  border-top: 1px solid var(--ink-line);
}

.nav a:not(.btn) {
  text-decoration: none;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--on-dark);
  padding-block: 0.6rem;
  border-bottom: 2px solid transparent;
  /* At large text sizes a label breaks rather than pushing the page sideways. */
  overflow-wrap: anywhere;
}

.nav a:not(.btn):hover { border-bottom-color: var(--ink-line); }
.nav a:not(.btn)[aria-current="page"] { border-bottom-color: var(--blue); }

/* --------------------------------------------------------------- buttons - */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 3rem;
  padding: 0.8rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-hover); }

.btn--outline { border-color: var(--line-strong); color: var(--text); }
.btn--outline:hover { border-color: var(--ink); background: var(--paper-2); }

.btn--onDark { border-color: rgba(242, 244, 246, 0.35); color: var(--on-dark); }
.btn--onDark:hover { background: rgba(242, 244, 246, 0.1); border-color: var(--on-dark); }

.btn--sm { min-height: 2.5rem; padding: 0.45rem 1.1rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* ---------------------------------------------------------------- pieces - */

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--blue);
  flex: none;
}

.band--dark .eyebrow,
.band--charcoal .eyebrow { color: var(--on-dark-muted); }

.hero .eyebrow { color: var(--on-dark); }

.lead {
  font-size: var(--fs-md);
  color: var(--text-muted);
  max-width: 62ch;
}

.band--dark .lead,
.band--charcoal .lead { color: var(--on-dark-muted); }

.section-head {
  max-width: var(--wrap-narrow);
  margin-bottom: var(--sp-8);
}

.fineprint {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-muted);
}

.band--dark .fineprint,
.band--charcoal .fineprint { color: var(--on-dark-muted); }

/* ------------------------------------------------------------------ hero - */

.hero {
  position: relative;
  background: var(--ink);
  color: var(--on-dark);
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(30rem, 74vh, 44rem);
  padding-block: var(--sp-9) var(--sp-8);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

/* Directional scrim: heavy enough to read against, light enough that the
   facility is still the thing you look at. The upper stops are set by the
   eyebrow, which is small text sitting over the brightest thing in the frame —
   the flag wall. Measured against the brightest patch behind it, these keep it
   near 5.5:1 rather than the 3.9:1 the lighter gradient gave at 768px. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(11, 13, 15, 0.96) 0%, rgba(11, 13, 15, 0.9) 32%,
                    rgba(11, 13, 15, 0.68) 60%, rgba(11, 13, 15, 0.5) 100%),
    linear-gradient(to right, rgba(11, 13, 15, 0.55) 0%, rgba(11, 13, 15, 0) 62%);
}

.hero__inner { width: 100%; }

/* The portrait crop used below 40em shows the whole frame, which puts the flag
   wall directly behind the eyebrow and headline instead of above them as the
   wide crop does. Measured against the brightest part of that wall, the default
   scrim leaves the eyebrow at 2.6:1. These stops carry it to about 5:1 while
   keeping the room clearly visible. */
@media (max-width: 39.99em) {
  .hero::after {
    background:
      linear-gradient(to top, rgba(11, 13, 15, 0.96) 0%, rgba(11, 13, 15, 0.9) 35%,
                      rgba(11, 13, 15, 0.66) 70%, rgba(11, 13, 15, 0.6) 100%);
  }
}

.hero .eyebrow { margin-bottom: var(--sp-5); }

.hero h1 {
  font-size: var(--fs-4xl);
  letter-spacing: -0.04em;
  color: var(--on-dark);
  max-width: 16ch;
  margin-bottom: var(--sp-5);
}

.hero__services {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  margin: 0 0 var(--sp-6);
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark);
}

.hero__services li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}

.hero__services li::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--blue);
  flex: none;
  transform: translateY(-1px);
}

.hero .btn-row .btn { flex: 1 1 100%; }

.hero__note {
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--on-dark-muted);
  max-width: 46ch;
}

/* ------------------------------------------------------------ page heads - */

.page-head {
  position: relative;
  background: var(--ink);
  color: var(--on-dark);
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.page-head h1 { color: var(--on-dark); max-width: 17ch; }
.page-head .lead { color: var(--on-dark-muted); margin-top: var(--sp-5); }

/* ------------------------------------------------------------- statement - */

.statement {
  font-size: clamp(1.6rem, 1rem + 2.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 800;
  font-stretch: 95%;
  max-width: 22ch;
  margin: 0 0 var(--sp-6);
  text-wrap: balance;
}

.statement em { font-style: normal; color: var(--blue); }
.band--dark .statement em { color: var(--blue-bright); }

/* -------------------------------------------------------------- services - */

.service {
  display: grid;
  gap: var(--sp-4);
  padding-block: var(--sp-8);
  border-top: var(--border);
  align-items: start;
}

.band--dark .service { border-top-color: var(--ink-line); }

.service__index {
  margin-bottom: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--blue);
}

.band--dark .service__index { color: var(--blue-bright); }

.service h2,
.service > div > h3 {
  font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.4rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin-bottom: var(--sp-4);
}

.service h2 a,
.service h3 a { text-decoration-color: var(--line-strong); }
.service h2 a:hover,
.service h3 a:hover { text-decoration-color: currentColor; }

.service__more {
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
}

.service__more a { text-decoration-thickness: 2px; }

.service__body > * + * { margin-top: var(--sp-4); }

.service__cap {
  display: inline-block;
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--blue);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: var(--radius);
}

/* --------------------------------------------------------------- process - */

.process {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: stage;
}

.process > li {
  counter-increment: stage;
  border-top: 1px solid var(--ink-line);
  padding-block: var(--sp-5);
}

.process__stage {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark);
}

.process__stage::before {
  content: "0" counter(stage);
  color: var(--blue-bright);
  letter-spacing: 0.1em;
}

.process p { margin: 0; font-size: var(--fs-sm); }

/* --------------------------------------------------------------- figures - */

.figure {
  margin: 0;
  background: var(--ink);
}

.figure img { width: 100%; }

.figure figcaption {
  padding: var(--sp-4) 0 0;
  font-size: var(--fs-sm);
  color: var(--on-dark-muted);
}

.figure--full img {
  max-height: 78vh;
  object-fit: cover;
}

.figure--full figcaption {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--sp-4) var(--sp-6);
}

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.split__media img {
  width: 100%;
  border-radius: var(--radius);
}

/* --------------------------------------------------------------- gallery - */

.gallery {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery figure { margin: 0; }

.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}

.gallery figcaption {
  padding-top: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--on-dark-muted);
}

/* ----------------------------------------------------------------- lists - */

.ticks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-3);
  color: var(--text-muted);
}

.ticks li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  min-width: 0;
}

/* A long address or email inside a tick must wrap rather than widen the page. */
.ticks li > * { min-width: 0; overflow-wrap: anywhere; }

.ticks + p,
.ticks + .btn-row,
.address + .btn-row { margin-top: var(--sp-5); }

.ticks li::before {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--blue);
  transform: translateY(-0.1rem);
}

.band--dark .ticks,
.band--charcoal .ticks { color: var(--on-dark-muted); }

.band--dark .ticks li::before,
.band--charcoal .ticks li::before { background: var(--blue-bright); }

/* --------------------------------------------------------------- address - */

.address {
  font-style: normal;
  font-size: var(--fs-md);
  line-height: 1.55;
  font-weight: 600;
  margin: 0 0 var(--sp-5);
  overflow-wrap: anywhere;
}

.band--dark .address,
.band--charcoal .address { color: var(--on-dark); }

.address--compact {
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.7;
  margin-top: var(--sp-4);
  margin-bottom: 0;
}

/* A single confirmed fact, given the weight one deserves. */
.fact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-2);
  padding-top: var(--sp-4);
  border-top: var(--border);
}

.band--dark .fact,
.band--charcoal .fact { border-top-color: var(--ink-line); }

.fact__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.band--dark .fact__label,
.band--charcoal .fact__label { color: var(--on-dark-muted); }

.fact__value {
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.band--dark .fact__value,
.band--charcoal .fact__value { color: var(--on-dark); }

/* --------------------------------------------------------------- journey - */

/* The four commercial stages. Deliberately styled unlike .process, so the
   enquiry sequence and the coaching method never read as the same thing. */
.journey {
  display: grid;
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.journey > li {
  counter-increment: step;
  display: grid;
  /* minmax(0, 1fr), not 1fr: a bare fr track is sized from max-content when the
     row itself is being measured, which would widen the whole page. */
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-4);
  /* Equal-height columns must not push the label away from its text. */
  align-content: start;
  min-width: 0;
}

.journey > li::before {
  content: counter(step);
  grid-row: span 2;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--blue);
  border-radius: 50%;
  font-size: var(--fs-sm);
  font-weight: 800;
}

.band--dark .journey > li::before,
.band--charcoal .journey > li::before { border-color: var(--blue-bright); }

.journey__stage {
  margin: 0;
  font-size: var(--fs-md);
  letter-spacing: -0.01em;
}

.journey p { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }

/* Where the sequence is the whole point of the section it can run wider. */
.journey--wide { gap: var(--sp-6); }

.band--dark .journey p,
.band--charcoal .journey p { color: var(--on-dark-muted); }

/* ------------------------------------------------------------- comparison - */

.compare {
  display: grid;
  gap: var(--sp-5);
  margin: 0 0 var(--sp-5);
  padding: 0;
  list-style: none;
}

.compare > li { border-left: 3px solid var(--blue); padding-left: var(--sp-4); }

.band--dark .compare > li,
.band--charcoal .compare > li { border-left-color: var(--blue-bright); }

.compare h3 {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}

.compare p { margin: 0; color: var(--text-muted); }

.band--dark .compare p,
.band--charcoal .compare p { color: var(--on-dark-muted); }

/* --------------------------------------------------------------- diagram - */

/* One coaching hour, six people, six different programmes. Inline SVG, so it
   costs no request and scales with the text around it. */
.diagram-frame {
  border: var(--border);
  border-radius: var(--radius);
  background: var(--paper-2);
  padding: clamp(1rem, 4vw, 2rem);
}

.diagram { width: 100%; height: auto; display: block; }

.diagram__rule { stroke: var(--line-strong); stroke-width: 2; }
.diagram__person { fill: var(--text); }
.diagram__card { fill: var(--paper); stroke: var(--line-strong); stroke-width: 1; }
.diagram__cell { fill: var(--line); }
.diagram__cell--on { fill: var(--blue); }

/* ------------------------------------------------------------------- faq - */

.faq { display: grid; gap: var(--sp-3); }

.faq__item {
  border: var(--border);
  border-radius: var(--radius);
  background: var(--paper);
}

.band--tint .faq__item { background: var(--paper); }

.faq__item summary {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  min-height: 3rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::before {
  content: "+";
  flex: none;
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--blue);
}

.faq__item[open] summary::before { content: "\2212"; }

.faq__answer {
  padding: 0 var(--sp-5) var(--sp-5);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* --------------------------------------------------------------- contact - */

.contact-actions {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-actions > li { display: flex; }

.contact-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  justify-content: center;
  min-height: 6rem;
  padding: var(--sp-5);
  background: var(--ink-2);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.contact-card:hover { border-color: var(--blue); background: var(--ink-3); }

.contact-card__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-bright);
}

.contact-card__value {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--on-dark);
  overflow-wrap: anywhere;
}

.contact-card__value--email { font-size: var(--fs-md); }

.contact-card__note {
  font-size: var(--fs-sm);
  color: var(--on-dark-muted);
}

.info-block {
  border: var(--border);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--paper);
}

.info-block h3 { margin-bottom: var(--sp-4); }

.info-block dl {
  margin: 0;
  display: grid;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
}

.info-block dt {
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.info-block dd { margin: var(--sp-1) 0 0; }
.info-block dd a { display: inline-block; padding-block: var(--sp-1); }

/* ------------------------------------------------------------- cta panel - */

.cta { display: grid; gap: var(--sp-6); align-items: center; }
.cta h2 { margin-bottom: var(--sp-3); }

/* ---------------------------------------------------------------- footer - */

.site-footer {
  background: var(--ink-2);
  color: var(--on-dark-muted);
  padding-block: var(--sp-9) var(--sp-7);
  font-size: var(--fs-sm);
  line-height: 1.7;
  border-top: 1px solid var(--ink-line);
}

.site-footer__grid { display: grid; gap: var(--sp-7); }

.site-footer h2 {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark);
  margin-bottom: var(--sp-4);
}

.site-footer a {
  color: var(--on-dark);
  text-decoration-color: var(--ink-line);
  overflow-wrap: anywhere;
}
.site-footer a:hover { text-decoration-color: var(--blue-bright); }

.site-footer__logo { height: 3rem; width: auto; margin-bottom: var(--sp-5); }

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.site-footer__hours {
  margin-top: var(--sp-4);
  color: var(--on-dark);
  font-weight: 600;
}

.site-footer__base {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--ink-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  justify-content: space-between;
  font-size: var(--fs-xs);
}

/* ----------------------------------------------------------------- prose - */

.prose { max-width: 68ch; }
.prose h1 { margin-bottom: var(--sp-5); }

.prose h2 {
  font-size: var(--fs-xl);
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: var(--border);
}

.prose h3 { margin-top: var(--sp-6); }
.prose p, .prose li { color: var(--text-muted); }
.prose li { margin-bottom: var(--sp-2); }
.prose address { margin-bottom: var(--sp-4); }
.prose .lead { color: var(--text); font-size: var(--fs-md); }

.notfound { padding-block: clamp(3rem, 10vw, 7rem); }
.notfound__more { margin-top: var(--sp-8); }

/* ------------------------------------------------------------ breakpoints */

/* Above roughly 384px all five destinations fit on one line, so the grid gives
   way to an evenly spaced row. */
@media (min-width: 24em) {
  .nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: var(--sp-2);
  }
}

@media (min-width: 26em) {
  .brand img { height: 2.5rem; }
}

@media (min-width: 40em) {
  .hero .btn-row .btn { flex: 0 0 auto; }
  .journey--wide { grid-template-columns: repeat(2, 1fr); column-gap: var(--sp-7); }
  .process { grid-template-columns: repeat(2, 1fr); column-gap: var(--sp-6); }
  .contact-actions { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 56em) {
  .grid--2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 5vw, 4rem); }
  .grid--2 > * + * { margin-top: 0; }
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-media { grid-template-columns: 1.15fr 0.85fr; }
  .service { grid-template-columns: 7rem 1fr 1fr; gap: var(--sp-7); padding-block: var(--sp-9); }
  .process { grid-template-columns: repeat(3, 1fr); column-gap: var(--sp-6); }
  .process > li { border-top-width: 2px; border-top-color: var(--blue); }
  .contact-actions { grid-template-columns: repeat(3, 1fr); }
  .journey--wide { grid-template-columns: repeat(4, 1fr); }
  .cta { grid-template-columns: 1.5fr auto; gap: var(--sp-8); }
  .site-footer__grid { grid-template-columns: 1.6fr 0.9fr 1.1fr 1.1fr; gap: var(--sp-7); }
  .gallery { grid-template-columns: repeat(4, 1fr); }
  .hero { min-height: clamp(34rem, 80vh, 48rem); }
  .statement em { white-space: nowrap; }
  .site-header__inner { flex-wrap: nowrap; min-height: 4.5rem; padding-block: var(--sp-3); }
  .brand img { height: 2.75rem; }
  .nav {
    order: 2;
    width: auto;
    display: flex;
    border-top: 0;
    justify-content: flex-start;
    gap: clamp(0.8rem, 2.2vw, 1.75rem);
  }
  .nav a:not(.btn) { font-size: var(--fs-sm); letter-spacing: 0.06em; padding-block: var(--sp-3); }
  .header-cta { order: 3; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media print {
  .site-header, .skip, .btn, .hero__media, .figure, .gallery,
  .site-footer__logo, .diagram-frame { display: none !important; }
  .faq__answer { display: block !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .band, .hero, .page-head { padding-block: 1rem; background: #fff; color: #000; }
  .hero::after { display: none; }
  .band--dark, .band--charcoal, .site-footer, .page-head { background: #fff; color: #000; }
  .band--dark p, .band--charcoal p, .site-footer, .page-head .lead { color: #000; }
  .hero h1, .page-head h1 { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}