/* ==========================================================================
   Ironbark Barber Co., styles.css (warm-dark heritage)
   Consumes design-tokens.css. Full-bleed photography, oversized condensed
   caps, one brass accent. Reveal items are visible without JS.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: var(--leading-body);
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--color-brass); text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; }
table { border-collapse: collapse; }
:focus-visible { outline: 2px solid var(--color-brass); outline-offset: 3px; border-radius: 2px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 300; background: var(--color-brass); color: var(--color-on-brass); padding: 10px 16px; font-weight: 600; border-radius: var(--radius-sm); transition: top var(--dur-hover) var(--ease-hover); }
.skip-link:focus { top: 12px; }

/* ---- Primitives --------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-pad); }
section { scroll-margin-top: 84px; }

.eyebrow { font-size: var(--step-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-weight: 600; color: var(--color-ink-muted); margin-bottom: var(--space-md); }
.eyebrow--brass { color: var(--color-brass); }
.section-title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: var(--tracking-display); line-height: 0.95; font-size: var(--step-h2); color: var(--color-ink); }
.lead { font-size: var(--step-lead); color: var(--color-ink); }
.muted { color: var(--color-ink-muted); }
.figure-todo { font-size: var(--step-small); color: var(--color-ink-muted); margin-top: var(--space-sm); font-style: italic; }

.todo-tag { display: inline-block; font-family: var(--font-body); font-style: normal; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-brass); background: color-mix(in srgb, var(--color-brass) 10%, transparent); border: 1px dashed var(--color-brass); border-radius: var(--radius-pill); padding: 2px 8px; vertical-align: middle; }
.todo-tag--onDark { color: var(--color-brass); border-color: var(--color-brass); }

/* ---- Buttons ------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: var(--step-small); letter-spacing: 0.02em; line-height: 1; padding: 15px 26px; border: 1.5px solid transparent; border-radius: var(--radius-sm); text-transform: uppercase; transition: transform var(--dur-hover) var(--ease-hover), background-color var(--dur-hover) var(--ease-hover), color var(--dur-hover) var(--ease-hover), border-color var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover); }
.btn--brass { background: var(--color-brass); color: var(--color-on-brass); }
.btn--brass:hover { background: var(--color-brass-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--ghost { border-color: var(--color-ink); color: var(--color-ink); }
.btn--ghost:hover { border-color: var(--color-brass); color: var(--color-brass); transform: translateY(-2px); }
.btn--wide { width: 100%; padding-block: 17px; }
.btn--sm { padding: 11px 18px; font-size: 0.82rem; }
/* A control that cannot do its job yet says so, rather than pointing at the
   wrong place (the directions link and the social profile are both TODO). */
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn--ghost:disabled:hover { border-color: var(--color-ink); color: var(--color-ink); transform: none; }
/* the module disables the submit while a request is in flight */
.booking__submit:disabled { opacity: 0.62; cursor: progress; }

/* ---- Header ------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 100; background: transparent; border-bottom: 1px solid transparent; transition: background var(--dur-hover) var(--ease-hover), border-color var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover); }
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, var(--color-scrim), transparent); transition: opacity var(--dur-hover) var(--ease-hover); }
.site-header.is-stuck { background: color-mix(in srgb, var(--color-bg) 92%, transparent); backdrop-filter: blur(10px); border-bottom-color: var(--color-border); box-shadow: var(--shadow-sm); }
.site-header.is-stuck::before { opacity: 0; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 74px; }

.wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--color-ink); }
.wordmark__mark { width: 24px; height: 24px; color: var(--color-brass); flex: none; }
.wordmark__text { font-family: var(--font-display); text-transform: uppercase; font-size: 1.4rem; letter-spacing: 0.01em; line-height: 1; }
.wordmark__co { font-family: var(--font-body); font-weight: 600; font-size: 0.62rem; letter-spacing: 0.18em; color: var(--color-ink-muted); }

.primary-nav { display: flex; align-items: center; gap: var(--space-xl); }
.primary-nav__list { display: flex; align-items: center; gap: var(--space-lg); }
.primary-nav__list a { color: var(--color-ink); font-weight: 500; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.08em; position: relative; padding-block: 6px; }
.primary-nav__list a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--color-brass); transition: width var(--dur-hover) var(--ease-hover); }
.primary-nav__list a:hover::after, .primary-nav__list a:focus-visible::after { width: 100%; }

.nav-toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 44px; min-height: 44px; padding: 10px; background: none; border: 0; }
.nav-toggle__bar { width: 24px; height: 2px; background: var(--color-ink); transition: transform var(--dur-hover) var(--ease-hover); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { transform: rotate(-45deg); }

/* ---- Floating booking pill ---------------------------------------------- */
.book-pill { position: fixed; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px); z-index: 200; background: var(--color-brass); color: var(--color-on-brass); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.85rem; padding: 14px 22px; border-radius: var(--radius-pill); box-shadow: var(--shadow-md); opacity: 0; transform: translateY(12px); pointer-events: none; visibility: hidden; transition: opacity var(--dur-hover) var(--ease-hover), transform var(--dur-hover) var(--ease-hover), background-color var(--dur-hover) var(--ease-hover), visibility var(--dur-hover) var(--ease-hover); }
.book-pill.is-visible { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.book-pill:hover { background: var(--color-brass-strong); }

/* ---- Hero --------------------------------------------------------------- */
.hero { position: relative; min-height: 94vh; min-height: 94dvh; display: flex; align-items: flex-end; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* Two layers, because the photograph has blown ceiling lamps in it: the
   vertical ramp sets the mood, and the directional wash sits under the copy
   column only. Measured over the composited hero at 1440, the brightest 2% of
   background pixels behind the sub-head went 0.353 -> 0.09 in luminance, i.e.
   2.07:1 -> 6.0:1, while the right third of the photograph is untouched. */
.hero__scrim { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(102deg, color-mix(in srgb, var(--color-bg) 74%, transparent) 0%, color-mix(in srgb, var(--color-bg) 56%, transparent) 42%, color-mix(in srgb, var(--color-bg) 28%, transparent) 68%, transparent 90%),
  linear-gradient(180deg, color-mix(in srgb, var(--color-bg) 50%, transparent) 0%, color-mix(in srgb, var(--color-bg) 18%, transparent) 32%, color-mix(in srgb, var(--color-bg) 86%, transparent) 100%); }
.hero__pole { position: absolute; z-index: 2; right: clamp(24px, 7vw, 160px); top: 50%; transform: translateY(-50%); width: clamp(74px, 9vw, 120px); height: min(58vh, 520px); pointer-events: none; }
/* setSize(w, h, false) sizes the drawing buffer but deliberately leaves the
   CSS box alone, so without this the canvas lays out at buffer size (twice the
   mount at DPR 2) and gets clipped by the hero. */
.hero__pole canvas { display: block; width: 100%; height: 100%; }
/* 72rem, not 62: at the top of the clamp the second line of the h1 needs
   ~930px of measure, and 62rem left only 848, which broke "SHAVES." onto a
   third line of its own from 1280 up. */
.hero__inner { position: relative; z-index: 3; padding-block: clamp(48px, 9vw, 110px); max-width: 72rem; }
.hero .eyebrow--brass { margin-bottom: var(--space-sm); }
.hero__title { font-family: var(--font-display); text-transform: uppercase; font-weight: 400; font-size: var(--step-hero); line-height: 0.9; letter-spacing: 0.005em; color: var(--color-ink); margin-bottom: var(--space-md); }
.hero__sub { max-width: 46ch; font-size: var(--step-lead); color: color-mix(in srgb, var(--color-ink) 88%, transparent); margin-bottom: var(--space-xl); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }

/* Header over hero: bone by default (dark theme), solid keeps it */
.site-header .wordmark, .site-header .primary-nav__list a { color: var(--color-ink); }

/* ---- Marquee ------------------------------------------------------------ */
.marquee { background: var(--color-brass); color: var(--color-on-brass); overflow: hidden; border-block: 1px solid color-mix(in srgb, var(--color-on-brass) 18%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.marquee__track span { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: clamp(1.1rem, 2vw, 1.5rem); padding-block: 12px; white-space: nowrap; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- Band seams --------------------------------------------------------
   The locked palette puts every band within 1.09:1 of its neighbour, so the
   change of band is drawn rather than valued: a token hairline at each join,
   brass at the two that bracket the heritage story so it reads as a chapter
   break. Same device as the footer rule, reused; no background moves. */
.gallery, .barbers, .book, .site-footer, .photo-band { border-top: 1px solid var(--color-seam); }
.heritage, .visit { border-top: 1px solid var(--color-seam-brass); }

/* ---- Full-bleed photographic band (the chapter break into the story) ----- */
.photo-band { position: relative; margin: 0; height: clamp(260px, 40vh, 420px); overflow: hidden; }
.photo-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(94deg, color-mix(in srgb, var(--color-bg) 90%, transparent) 0%, color-mix(in srgb, var(--color-bg) 62%, transparent) 46%, color-mix(in srgb, var(--color-bg) 22%, transparent) 100%); }
.photo-band__cap { position: absolute; inset-inline: 0; bottom: clamp(24px, 4vw, 52px); z-index: 2; }
.photo-band__line { display: block; max-width: 20ch; font-family: var(--font-serif); font-style: italic; font-size: var(--step-h3); line-height: 1.18; color: var(--color-ink); text-wrap: balance; }

/* ---- Services (numbered photo cards) ------------------------------------ */
.services { background: var(--color-bg); }
/* The measure belongs on the TEXT, not on the element that also carries
   .container: a ch-based max-width there beats .container's own max-width,
   collapsing the box to a couple of hundred pixels (gutters included) and
   centring it away from the grid it heads. */
.services__head { margin-bottom: var(--space-2xl); }
.services__head .section-title { max-width: 22ch; }
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.svc { position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: transform var(--dur-hover) var(--ease-hover), border-color var(--dur-hover) var(--ease-hover); }
.svc:hover { transform: translateY(-4px); border-color: var(--color-brass); }
.svc__photo { display: block; aspect-ratio: 4 / 3; overflow: hidden; position: relative; }
.svc__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--color-bg) 65%, transparent)); }
.svc__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s var(--ease-hover); }
.svc:hover .svc__photo img { transform: scale(1.05); }
.svc__no { position: absolute; top: 12px; left: 16px; z-index: 2; font-family: var(--font-display); font-size: 2.4rem; line-height: 1; color: var(--color-brass); }
.svc__name { font-family: var(--font-display); text-transform: uppercase; font-weight: 400; font-size: var(--step-h4); letter-spacing: 0.01em; padding: var(--space-md) var(--space-md) 0; }
.svc__blurb { color: var(--color-ink-muted); font-size: var(--step-small); padding: 8px var(--space-md) 0; }
.svc__price { font-weight: 600; color: var(--color-brass); padding: var(--space-sm) var(--space-md) var(--space-md); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---- Gallery ------------------------------------------------------------ */
.gallery { background: var(--color-surface); }
.gallery__head { margin-bottom: var(--space-2xl); }
.gallery__head .section-title { max-width: 22ch; }
.gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 17rem; grid-auto-flow: dense; gap: var(--space-sm); }
.gallery__item { margin: 0; overflow: hidden; border-radius: var(--radius-md); background: var(--color-surface-2); }
.gallery__item--tall { grid-row: span 2; }
.gallery__item--wide { grid-column: span 2; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-hover); }
.gallery__item:hover img { transform: scale(1.06); }

/* ---- Barbers ------------------------------------------------------------ */
.barbers { background: var(--color-bg); }
.barbers__head { margin-bottom: var(--space-2xl); }
.barbers__head .section-title, .barbers__lede { max-width: 40ch; }
.barbers__lede { margin-top: var(--space-md); }
.barbers__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); align-items: start; }
.barber { margin: 0; }
.barbers__grid .barber:nth-child(2) { margin-top: var(--space-xl); }
.barber__photo { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-md); background: var(--color-surface); filter: grayscale(0.15); }
.barber__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-hover); }
.barber:hover .barber__photo img { transform: scale(1.04); }
.barber__name { font-family: var(--font-display); text-transform: uppercase; font-weight: 400; font-size: var(--step-h4); margin-top: var(--space-md); }
.barber__role { color: var(--color-ink-muted); font-size: var(--step-small); margin-top: 2px; }

/* ---- Heritage + reviews ------------------------------------------------- */
.heritage { background: var(--color-surface); padding-block: var(--section-pad); text-align: center; }
.heritage__inner { max-width: 60ch; }
/* 1.02, not the display 0.95: in this narrow centred measure the comma after
   CHAIR sat on the cap-height of the line below. */
.heritage__title { margin-top: var(--space-md); line-height: 1.02; text-wrap: balance; }
.heritage__lede { color: var(--color-ink-muted); margin-block: var(--space-lg) var(--space-2xl); }
.reviews__quote[hidden] { display: none; }
.reviews__stars { display: inline-flex; gap: 4px; margin-bottom: var(--space-md); }
.reviews__stars svg { width: 18px; height: 18px; color: var(--color-brass); }
.reviews__quote p { font-family: var(--font-serif); font-style: italic; font-size: var(--step-h3); line-height: 1.3; color: var(--color-ink); }
.reviews__quote cite { display: block; font-style: normal; font-size: var(--step-small); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-ink-muted); margin-top: var(--space-md); }
.reviews__dots { display: flex; justify-content: center; gap: 20px; margin-top: var(--space-xl); }
.reviews__dot { position: relative; width: 11px; height: 11px; border-radius: 999px; border: 1.5px solid var(--color-brass); background: transparent; padding: 0; transition: background var(--dur-hover) var(--ease-hover); }
/* The painted dot stays 11px; the target grows to 30x44 around it, which is
   past the 24px WCAG 2.5.8 minimum and still short of the 20px gap, so no two
   targets overlap. */
.reviews__dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 44px; transform: translate(-50%, -50%); }
.reviews__dot.is-active { background: var(--color-brass); }

/* ---- Visit -------------------------------------------------------------- */
.visit { background: var(--color-bg); }
.visit__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-2xl); }
.visit__media { margin: 0; overflow: hidden; border-radius: var(--radius-md); box-shadow: var(--shadow-md); aspect-ratio: 5 / 4; }
.visit__media img { width: 100%; height: 100%; object-fit: cover; }
.visit__address { margin-block: var(--space-sm) var(--space-lg); color: var(--color-ink-muted); }
.hours { width: 100%; font-variant-numeric: tabular-nums; margin-bottom: 8px; }
/* --color-rule, not --color-border: these rules separate one day's hours from
   the next, so they carry meaning and owe 3:1 (measured 3.38:1 on the base,
   against the border token's 1.40:1). */
.hours th, .hours td { padding: 11px 0; border-bottom: 1px solid var(--color-rule); text-align: left; font-weight: 500; }
.hours td { text-align: right; color: var(--color-ink-muted); }
.hours__note { margin-bottom: var(--space-md); }
.visit__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }

/* ---- Booking ------------------------------------------------------------ */
.book { background: var(--color-surface); padding-block: var(--section-pad); }
.book__inner { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.book__stage { position: relative; width: 100%; aspect-ratio: 4 / 5; min-height: 380px; overflow: hidden; border-radius: var(--radius-md); background: var(--color-surface-2); }
.book__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur-hover) var(--ease-hover); }
/* The poster is the ground state and only steps aside once a scene has
   actually rendered (three-3d.js adds .is-3d after its first frame). If the
   context is lost the class and the canvas both go, so the photograph is what
   is left, never an empty panel. The second rule is the belt to that brace:
   a canvas can never sit on top of a poster it is not covering. */
.book__stage.is-3d .book__poster { opacity: 0; }
.book__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.book__stage:not(.is-3d) canvas { display: none; }
.book__panel { max-width: 48ch; }
.book__lede { color: var(--color-ink-muted); margin-block: var(--space-md) var(--space-xl); }
.book-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); text-align: left; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--step-small); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-muted); }
.field input, .field select { font: inherit; font-size: var(--step-small); color: var(--color-ink); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 13px 14px; width: 100%; transition: border-color var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover); }
/* Full-strength token, not an 80% mix: composited over the field the mix
   measured 4.08:1 at 15px, under the 4.5:1 AA threshold; the token itself
   measures 5.58:1 there. */
.field input::placeholder { color: var(--color-ink-muted); }
.field input:focus, .field select:focus { outline: none; border-color: var(--color-brass); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brass) 22%, transparent); }
.book-form .btn--wide, .book-form .form-note { grid-column: 1 / -1; }
.field--full { grid-column: 1 / -1; }
.form-note { text-align: center; color: var(--color-ink-muted); font-size: var(--step-small); }

/* ---- Booking module hooks (library/booking-form) ------------------------ */
/* Honeypot: removed visually and from the accessibility tree (aria-hidden in
   the markup), so only a bot can fill it. */
.booking__hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.booking__error { font-size: var(--step-small); color: var(--color-error); display: none; margin-top: 4px; }
.booking__field.is-invalid .booking__error { display: block; }
.booking__field.is-invalid input, .booking__field.is-invalid select { border-color: var(--color-error); }

.booking__summary {
  grid-column: 1 / -1; display: none;
  border: 1px solid var(--color-error); border-left-width: 4px; border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: var(--step-small); color: var(--color-error);
  background: color-mix(in srgb, var(--color-error) 10%, var(--color-surface));
}
.booking__summary.is-visible { display: block; }

.booking__turnstile { grid-column: 1 / -1; }
.booking__turnstile:empty { display: none; }

.booking__success {
  display: none; text-align: center; padding: var(--space-2xl) var(--space-lg);
  border: 1px solid color-mix(in srgb, var(--color-ok) 40%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-ok) 8%, var(--color-surface));
}
.booking__success.is-visible { display: block; }
.booking__success h3 { font-family: var(--font-display); text-transform: uppercase; font-weight: 400; font-size: var(--step-h3); color: var(--color-ok); margin-bottom: var(--space-2xs); }
.booking__success p { color: var(--color-ink-muted); }
.booking.is-done .book-form { display: none; }

/* ---- Footer ------------------------------------------------------------- */
.site-footer { background: var(--color-bg); padding-block: var(--space-3xl) var(--space-xl); }
.site-footer__inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: var(--space-xl); }
.site-footer__brand p { color: var(--color-ink-muted); margin-top: var(--space-sm); max-width: 30ch; }
.site-footer__h { font-family: var(--font-body); font-size: var(--step-eyebrow); text-transform: uppercase; letter-spacing: 0.16em; color: var(--color-brass); margin-bottom: var(--space-md); }
.site-footer__col ul { display: flex; flex-direction: column; gap: 10px; }
.site-footer__col a, .site-footer__col li { color: var(--color-ink); }
.site-footer__col a:hover { color: var(--color-brass); }
.site-footer__col .btn { margin-top: var(--space-xs); }
.site-footer__social { margin-top: var(--space-md); }
.site-footer__base { max-width: var(--container); margin: var(--space-2xl) auto 0; padding: var(--space-md) var(--gutter) 0; border-top: 1px solid var(--color-border); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); font-size: var(--step-small); color: var(--color-ink-muted); }

/* ---- Reveal (JS-gated) -------------------------------------------------- */
.js [data-reveal-item] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js [data-reveal-item].is-in { opacity: 1; transform: none; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1024px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  /* The fixed row track and the spans are both 3-column devices. Kept below
     that, every tile becomes a 2.5:1 letterbox regardless of the photograph in
     it, so hand sizing back to the aspect ratio. */
  .gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
  .gallery__item { aspect-ratio: 4 / 3; }
  .gallery__item--tall, .gallery__item--wide { grid-row: auto; grid-column: auto; }
  .barbers__grid { grid-template-columns: repeat(3, 1fr); }
  .site-footer__inner { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
}
@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .primary-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: var(--space-md); background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: var(--space-md) var(--gutter) var(--space-lg); box-shadow: var(--shadow-md); clip-path: inset(0 0 100% 0); opacity: 0; pointer-events: none; visibility: hidden; transition: clip-path var(--dur-hover) var(--ease-hover), opacity var(--dur-hover) var(--ease-hover), visibility 0s linear var(--dur-hover); }
  .primary-nav.is-open { clip-path: inset(0 0 0 0); opacity: 1; pointer-events: auto; visibility: visible; transition: clip-path var(--dur-hover) var(--ease-hover), opacity var(--dur-hover) var(--ease-hover), visibility 0s; }
  .primary-nav__list { flex-direction: column; align-items: stretch; gap: 4px; }
  /* full-width 44px rows: the panel rows were 27px, under WCAG 2.5.8 */
  .primary-nav__list a { display: flex; align-items: center; min-height: 44px; }
  .hero__pole { display: none; }
  .services__grid { grid-template-columns: 1fr; }
  .gallery__grid { grid-template-columns: 1fr; }
  .gallery__item--tall, .gallery__item--wide { grid-row: auto; grid-column: auto; }
  /* left-aligned, not centred: the head above it is left-aligned, and a
     centred column under a left-aligned head read as a mistake */
  .barbers__grid { grid-template-columns: 1fr; max-width: calc(420px + var(--gutter) * 2); margin-inline: 0; }
  .barbers__grid .barber:nth-child(2) { margin-top: 0; }
  .visit__inner { grid-template-columns: 1fr; }
  .book-form { grid-template-columns: 1fr; }
  .book__inner { grid-template-columns: 1fr; }
  .book__stage { display: none; }
  .site-footer__inner { grid-template-columns: 1fr; gap: var(--space-lg); }
}

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