/* Punch Barber Shop. Tokens and decisions: docs/brand/decisions.md; color bands: the brand guide, Color System.
   Reference implementation of the tokens: the home mockup's home.css (claude.ai canvas). */

/* ---------- Fonts ---------- */
/* Latin subsets, weight axes cut to what's used (scripts/subset-fonts.py; masters in src/fonts/). A weight outside
   these ranges snaps to the nearest end: widen the range in the script and re-run before using one. */
@font-face {
  font-family: "Hepta Slab";
  src: url("/assets/fonts/hepta-slab-latin.woff2") format("woff2");
  font-weight: 700 800;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-style: normal;
  font-display: optional; /* with the preloads in head.php: no swap, so no CLS */
}
@font-face {
  font-family: "Switzer";
  src: url("/assets/fonts/switzer-latin.woff2") format("woff2");
  font-weight: 400 700;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-style: normal;
  font-display: optional; /* with the preloads in head.php: no swap, so no CLS */
}

/* ---------- Tokens ---------- */
/* Color bands (brand guide, Color System): five colors x six steps, 100 lightest to 600 darkest.
   Hex here for every browser; the OKLCH block below overrides where supported. Same colors, all in sRGB.
   Components use the theme tokens further down, never a band step directly, unless the role is fixed
   (red buttons, the ink header). */
/* Metric-matched fallbacks (Lighthouse pass, 11/02/2026). Until the web fonts land, text sets in a local font
   resized to the web font's width and line metrics, so the swap moves nothing (it was shifting the hero 20px).
   Widths from capsize metrics / fontTools, letter-frequency weighted; each face applies only where its font exists. */
@font-face { font-family: "Hepta Fallback Georgia"; src: local("Georgia Bold"), local("Georgia-Bold"); font-weight: 700 800;
  size-adjust: 110.4%; ascent-override: 89.5%; descent-override: 23.8%; line-gap-override: 0.0%; }
@font-face { font-family: "Hepta Fallback Noto"; src: local("Noto Serif Bold"), local("NotoSerif-Bold"); font-weight: 700 800;
  size-adjust: 111.8%; ascent-override: 88.4%; descent-override: 23.5%; line-gap-override: 0.0%; }
@font-face { font-family: "Hepta Fallback DejaVu"; src: local("DejaVu Serif Bold"), local("DejaVuSerif-Bold"); font-weight: 700 800;
  size-adjust: 100.6%; ascent-override: 98.2%; descent-override: 26.2%; line-gap-override: 0.0%; }
@font-face { font-family: "Switzer Fallback Arial"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"); font-weight: 400 500;
  size-adjust: 100.2%; ascent-override: 97.8%; descent-override: 25.0%; line-gap-override: 9.0%; }
@font-face { font-family: "Switzer Fallback Arial"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); font-weight: 600 700;
  size-adjust: 96.1%; ascent-override: 102.0%; descent-override: 26.0%; line-gap-override: 9.4%; }
@font-face { font-family: "Switzer Fallback Roboto"; src: local("Roboto"), local("Roboto-Regular"); font-weight: 400 500;
  size-adjust: 100.4%; ascent-override: 97.6%; descent-override: 24.9%; line-gap-override: 9.0%; }
@font-face { font-family: "Switzer Fallback Roboto"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 600 700;
  size-adjust: 102.0%; ascent-override: 96.0%; descent-override: 24.5%; line-gap-override: 8.8%; }

:root {
  --color-primary-100: #feebea;
  --color-primary-200: #fec3bf;
  --color-primary-300: #fb6766;
  --color-primary-400: #e21531; /* Punch Red */
  --color-primary-500: #a4041f;
  --color-primary-600: #6e0111;

  --color-secondary-100: #ebf1f9;
  --color-secondary-200: #c8d5e8;
  --color-secondary-300: #7697c7;
  --color-secondary-400: #315a98;
  --color-secondary-500: #13386c;
  --color-secondary-600: #0b2141; /* Punch Navy */

  --color-accent-100: #fff1e0;
  --color-accent-200: #fcd7a9;
  --color-accent-300: #edad52;
  --color-accent-400: #ce8903; /* Punch Gold */
  --color-accent-500: #875800;
  --color-accent-600: #5c3a00;

  --color-surface-100: #fcfaf4;
  --color-surface-200: #f4f0e5;
  --color-surface-300: #e9e3d3; /* Paper = Cream */
  --color-surface-400: #d7d1be;
  --color-surface-500: #a59e8b;
  --color-surface-600: #615a49;

  --color-dark-100: #dfdfdf;
  --color-dark-200: #9e9e9e;
  --color-dark-300: #5b5b5b;
  --color-dark-400: #303030;
  --color-dark-500: #1b1b1b;
  --color-dark-600: #0a0a0a; /* Ink */

  --color-white: #ffffff;

  /* Translucent ink can't be a band step: dark-600 at alpha, for the hero photo and the fixed bars. */
  --photo-overlay: rgba(10, 10, 10, .64); /* the real shop (D-029); D-010's .62, a hair heavier for the white lede */
  /* Desktop: the hero text sits left, so the scrim is heavier there and lets the shop show through on the right. */
  --photo-overlay-wide: linear-gradient(90deg, rgba(10, 10, 10, .78) 0%, rgba(10, 10, 10, .66) 45%, rgba(10, 10, 10, .48) 100%);
  --bar-ink: rgba(10, 10, 10, .96);

  --font-display: "Hepta Slab", "Hepta Fallback Georgia", "Hepta Fallback Noto", "Hepta Fallback DejaVu", Georgia, serif;
  --font-body: Switzer, "Switzer Fallback Arial", "Switzer Fallback Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-display-xl: clamp(2.75rem, 6vw, 4.5rem);
  --text-h2: clamp(2rem, 4vw, 3rem);
  --text-h3: clamp(1.5rem, 2.6vw, 1.75rem);
  --text-h4: 1.3125rem;  /* 21px */
  --text-h5: 1.125rem;   /* 18px */
  --text-lead: 1.25rem;  /* 20px */
  --text-body: 1.0625rem; /* 17px */
  --text-small: .875rem; /* 14px */

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --space-32: 128px;
  --section-pad: var(--space-16);
  --gutter: var(--space-4);

  --container: 1200px;
  --container-narrow: 760px;
  --measure: 68ch;

  --radius-0: 0; --radius-sm: 5px; --radius-full: 9999px;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-quick: 150ms; --dur-hit: 300ms; --dur-entrance: 600ms;

  --header-h: 72px;
  --actionbar-h: 68px;
}

@supports (color: oklch(0% 0 0)) {
  :root {
    --color-primary-100: oklch(95.5% 0.0204 23.5);
    --color-primary-200: oklch(87% 0.0681 23.5);
    --color-primary-300: oklch(70% 0.1817 23.5);
    --color-primary-400: oklch(58.13% 0.2271 23.5);
    --color-primary-500: oklch(45.5% 0.1817 23.5);
    --color-primary-600: oklch(34% 0.1363 23.5);

    --color-secondary-100: oklch(95.5% 0.0134 258);
    --color-secondary-200: oklch(87% 0.0301 258);
    --color-secondary-300: oklch(67% 0.0802 258);
    --color-secondary-400: oklch(47% 0.1103 258);
    --color-secondary-500: oklch(34.5% 0.1003 258);
    --color-secondary-600: oklch(25.02% 0.0668 258);

    --color-accent-100: oklch(96.5% 0.0269 73.4);
    --color-accent-200: oklch(90% 0.0723 73.4);
    --color-accent-300: oklch(79% 0.1302 73.4);
    --color-accent-400: oklch(68.35% 0.1447 73.4);
    --color-accent-500: oklch(50% 0.1063 73.4);
    --color-accent-600: oklch(38% 0.0808 73.4);

    --color-surface-100: oklch(98.5% 0.0078 89.8);
    --color-surface-200: oklch(95.5% 0.0156 89.8);
    --color-surface-300: oklch(91.62% 0.0223 89.8);
    --color-surface-400: oklch(86% 0.0257 89.8);
    --color-surface-500: oklch(70% 0.0279 89.8);
    --color-surface-600: oklch(47% 0.0279 89.8);

    --color-dark-100: oklch(90.5% 0 0);
    --color-dark-200: oklch(70% 0 0);
    --color-dark-300: oklch(47% 0 0);
    --color-dark-400: oklch(31% 0 0);
    --color-dark-500: oklch(22% 0 0);
    --color-dark-600: oklch(14.48% 0 0);
  }
}

/* Section themes: semantic tokens switch per section. Pairs and ratios: the guide's "Approved text pairs". */
[data-theme="dark"] {
  --surface: var(--color-dark-600); --surface-raised: var(--color-dark-500);
  --text: var(--color-dark-100); --text-strong: var(--color-white); --text-muted: var(--color-dark-200);
  --text-accent: var(--color-primary-300); --text-gold: var(--color-accent-400);
  --line: var(--color-dark-400); --leader: var(--color-dark-300); --focus: var(--color-accent-400);
}
[data-theme="light"] {
  --surface: var(--color-surface-300); --surface-raised: var(--color-surface-100);
  --text: var(--color-dark-600); --text-strong: var(--color-secondary-600); --text-muted: var(--color-surface-600);
  --text-accent: var(--color-primary-500); --text-gold: var(--color-accent-500);
  --line: var(--color-surface-400); --leader: var(--color-surface-500); --focus: var(--color-secondary-600);
}
/* Raised navy (secondary-500) is for cream text and the big gold phone only:
   muted and small red text drop under 4.5:1 there. */
[data-theme="navy"] {
  --surface: var(--color-secondary-600); --surface-raised: var(--color-secondary-500);
  --text: var(--color-surface-300); --text-strong: var(--color-white); --text-muted: var(--color-secondary-300);
  --text-accent: var(--color-primary-300); --text-gold: var(--color-accent-400);
  --line: var(--color-secondary-500); --leader: var(--color-secondary-400); --focus: var(--color-accent-400);
}
/* The hours table is the one raised navy panel with muted text ("Closed"): secondary-200 holds 7.81:1 there. */
[data-theme="navy"] .hours { --text-muted: var(--color-secondary-200); --line: var(--color-secondary-400); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--space-4)); }
body {
  margin: 0;
  padding-bottom: calc(var(--actionbar-h) + env(safe-area-inset-bottom));
  background: var(--color-dark-600);
  color: var(--color-dark-100);
  font: 400 var(--text-body)/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Sticky footer: main takes the slack on short pages, so the footer never floats mid-screen. */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
main { display: flex; flex-direction: column; flex: 1 0 auto; }
img, svg { display: block; max-width: 100%; height: auto; }
picture { display: contents; } /* built image sets (img()): the <img> inside keeps its own layout */
a { color: inherit; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--focus, var(--color-accent-400));
  outline-offset: 2px;
}
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 700; color: var(--text-strong); text-wrap: balance; }
h4, h5, h6 { margin: 0; font-family: var(--font-body); color: var(--text-strong); }
/* Hepta Slab's tall caps and slab serifs need room: 1.2 on every slab heading that can wrap. */
h1 { font-size: var(--text-display-xl); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
h2 { font-size: var(--text-h2); line-height: 1.2; }
h3 { font-size: var(--text-h3); line-height: 1.25; }
h4 { font-size: var(--text-h4); font-weight: 650; line-height: 1.3; }
h5, h6 { font-size: var(--text-h5); font-weight: 600; line-height: 1.35; }
address { font-style: normal; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  background: var(--color-accent-400); color: var(--color-dark-600); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--space-4); }

/* ---------- Layout primitives (the only non-BEM classes) ---------- */
.l-container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.l-narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }
.l-stack > * + * { margin-top: var(--space-4); }
.l-stack p { max-width: var(--measure); }
.l-grid { display: grid; gap: var(--space-6); }

/* ---------- Sections ---------- */
.section { padding-block: var(--section-pad); background: var(--surface); color: var(--text); }
/* First section on a page with no hero: clear the fixed header. */
.section--page-top { padding-top: calc(var(--header-h) + var(--section-pad)); }

.section-head { margin-bottom: var(--space-12); }
.section-head--center { text-align: center; }
.section-head__eyebrow {
  margin-bottom: var(--space-2);
  font: 700 .75rem/1.4 var(--font-body); letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-accent);
}
.section-head__sub { margin-top: var(--space-3); font-size: var(--text-lead); line-height: 1.55; color: var(--text-muted); }
.section-head--center .section-head__sub { margin-inline: auto; max-width: 52ch; }

/* ---------- Buttons ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-6);
  border: 2px solid transparent; border-radius: var(--radius-sm);
  font: 600 1rem/1 var(--font-body); letter-spacing: .02em; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out);
}
.button--primary { background: var(--color-primary-400); color: var(--color-white); }
.button--primary:hover { background: var(--color-primary-500); }
.button--primary:active { background: var(--color-primary-600); }
.button--ghost { border-color: currentColor; background: transparent; color: var(--text-strong, var(--color-white)); }
.button--ghost:hover { border-color: var(--text-strong, var(--color-white)); background: var(--text-strong, var(--color-white)); color: var(--surface, var(--color-dark-600)); }
.button--small { min-height: 44px; padding: 0 var(--space-4); font-size: .9375rem; }

/* ---------- Site header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  color: var(--color-white);
  transition: background-color var(--dur-hit) var(--ease-out);
}
.site-header--solid, .site-header--scrolled, .site-header--open { background: var(--bar-ink); }
.site-header__bar { display: flex; align-items: center; gap: var(--space-4); min-height: var(--header-h); }
.site-header__logo { display: inline-flex; width: 112px; color: inherit; }
.site-header__logo svg { width: 100%; }
.site-header__nav { display: none; }
.site-header__list { display: flex; margin: 0; padding: 0; list-style: none; }
.site-header__link { color: var(--color-white); text-decoration: none; }
.site-header__phone { display: none; }
.site-header__toggle {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin-left: auto; padding: 0;
  border: 1.5px solid var(--color-dark-200); border-radius: var(--radius-sm);
  background: transparent; color: inherit; cursor: pointer;
}
.site-header__toggle-close { display: none; }
.site-header--open .site-header__toggle-open { display: none; }
.site-header--open .site-header__toggle-close { display: inline; }
/* Phone menu: the nav drops below the bar while open. */
.site-header--open .site-header__nav {
  display: block; position: fixed; inset: var(--header-h) 0 0 0; overflow-y: auto;
  padding: var(--space-2) var(--gutter) calc(var(--actionbar-h) + var(--space-6));
  background: var(--color-dark-600);
}
.site-header--open .site-header__list { flex-direction: column; }
.site-header--open .site-header__link {
  display: block; padding: var(--space-4) 0; border-bottom: 1px solid var(--color-dark-400);
  font: 700 1.75rem/1.2 var(--font-display);
}
body.menu-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero {
  position: relative; display: flex; align-items: flex-end; overflow: hidden;
  min-height: 360px; background: var(--surface); color: var(--text);
}
.hero--home { min-height: 680px; }
/* 404: the hero fills the screen above the footer, content centered with extra air. */
.hero--404 { flex: 1 0 auto; align-items: center; }
.hero--404 .hero__inner { padding-top: calc(var(--header-h) + var(--section-pad)); padding-bottom: var(--section-pad); }
.hero__media { position: absolute; inset: 0; overflow: hidden; }
/* The real shop, in color and at normal sharpness (D-029): the lens already blurs the background. The crop keeps
   the barber and the picture frames in frame on wide screens. */
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: var(--photo-overlay); }
.hero__inner {
  position: relative; z-index: 1; display: grid; gap: var(--space-6);
  padding-top: calc(var(--header-h) + var(--space-12)); padding-bottom: var(--space-12);
}
.hero__badge { width: 120px; } /* the badge's minimum */
.hero--home .hero__badge { display: none; } /* phones: the header wordmark is the logo; the headline gets the first screen */
.hero__badge img { width: 100%; height: auto; } /* fill the column; the width attr is only the aspect hint */
.hero__kicker {
  font: 700 .75rem/1.4 var(--font-body); letter-spacing: .22em; text-transform: uppercase;
  color: var(--color-surface-300);
}
.hero__title { color: var(--color-white); }
.hero__accent { color: var(--color-primary-400); } /* display size only: 4.13:1 on ink */
.hero__lede { max-width: 40ch; font-size: 1.125rem; line-height: 1.5; }
.hero__phone { font: 700 1.75rem/1.2 var(--font-display); color: var(--text-gold); text-decoration: none; }
.hero__status {
  display: inline-flex; align-items: center; gap: var(--space-3); justify-self: start;
  padding: var(--space-3) var(--space-4); border: 1px solid var(--color-dark-300); border-radius: var(--radius-full);
  font: 600 1rem/1.2 var(--font-body); color: var(--color-white);
}
.hero__status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-dark-200); }
.hero__status--open { border-color: var(--color-accent-600); }
.hero__status--open .hero__status-dot { background: var(--color-accent-400); animation: pulse 2s var(--ease-out) infinite; }
/* Open-now pulse: a solid ring that grows and fades. Reduced motion stops it (bottom of file). */
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 var(--color-accent-600); }
  70%  { box-shadow: 0 0 0 10px rgba(92, 58, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(92, 58, 0, 0); }
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__cta .button { flex: 1 1 auto; }
.hero__rating { justify-self: start; }

/* ---------- Rating (Google stars + count) ---------- */
.rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: inherit; text-decoration: none; }
.rating:hover span { text-decoration: underline; }
.rating strong { color: var(--color-white); }
.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 16px; height: 16px; fill: var(--color-accent-400); }
.hero__facts { display: grid; gap: var(--space-4); margin: 0; }
.hero__facts dt { font: 700 .75rem/1.4 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--text-accent); }
.hero__facts dd { margin: 0; color: var(--text-strong); }

/* ---------- Hiring banner ---------- */
.banner { display: block; text-decoration: none; }
.banner--hiring {
  position: relative; overflow: hidden;
  padding-block: var(--space-6);
  background: var(--color-dark-600); border-block: 1px solid var(--color-dark-400); color: var(--color-white);
}
.banner__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.banner__text { font: 700 clamp(1.5rem, 5vw, 2.25rem)/1.2 var(--font-display); color: var(--color-accent-400); }
.banner__link { font-weight: 600; white-space: nowrap; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Info strip ---------- */
.info-strip { background: var(--surface); color: var(--text-strong); }
.info-strip__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.info-strip__item {
  display: grid; gap: var(--space-1); align-content: start; justify-items: center;
  padding: var(--space-6) var(--space-3); text-align: center;
}
/* Phone 2x2: hairlines between cells only */
.info-strip__item:nth-child(odd) { border-right: 1px solid var(--line); }
.info-strip__item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.info-strip__list--3 { grid-template-columns: minmax(0, 1fr); }
.info-strip__list--3 .info-strip__item { border-right: 0; border-bottom: 1px solid var(--line); }
.info-strip__list--3 .info-strip__item:last-child { border-bottom: 0; }
.info-strip__label { font: 700 .6875rem/1.4 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--text-muted); }
.info-strip__value { font-weight: 600; font-size: 1.0625rem; line-height: 1.35; color: var(--text-strong); }

/* ---------- Price list ---------- */
.price-list { margin: 0; }
.price-list__item { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-4) 0; }
.price-list__service { font-weight: 600; font-size: 1.125rem; color: var(--text-strong); }
.price-list__leader { flex: 1; min-width: var(--space-6); margin: 0; border-bottom: 2px dotted var(--leader); transform-origin: left center; }
.price-list__price { margin: 0; font: 700 1.5rem/1 var(--font-display); color: var(--text-strong); text-align: right; }
/* main.js adds --pending below the fold; the leaders draw left to right as the list scrolls in. */
.price-list__leader { transition: transform var(--dur-entrance) var(--ease-out); }
.price-list--pending .price-list__leader { transform: scaleX(0); }
.price-list__item:nth-child(2) .price-list__leader { transition-delay: 60ms; }
.price-list__item:nth-child(3) .price-list__leader { transition-delay: 120ms; }
.price-list__item:nth-child(4) .price-list__leader { transition-delay: 180ms; }
.price-list__item:nth-child(5) .price-list__leader { transition-delay: 240ms; }
.price-list__item:nth-child(6) .price-list__leader { transition-delay: 300ms; }

/* ---------- Barber cards: the home page's fight card ---------- */
/* No card box: the photo carries the red knockout (as on the profile page) and the text sits on the section. */
.barber-card { display: grid; grid-template-rows: auto 1fr; gap: var(--space-6); } /* stretches to the row; body fills the rest */
.barber-card__media { --knockout: var(--space-3); display: block; margin: 0 var(--knockout) var(--knockout) 0; box-shadow: var(--knockout) var(--knockout) 0 var(--color-primary-400); }
.barber-card__media img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.barber-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.barber-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: auto 0 0; padding-top: var(--space-2); } /* pinned to the foot */
.barber-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.barber-card__today {
  padding: 2px var(--space-2); border-radius: var(--radius-full); background: var(--color-primary-400); color: var(--color-white);
  font: 700 .6875rem/1.5 var(--font-body); letter-spacing: .2em; text-transform: uppercase;
}
.barber-card__role, .barber-profile__role {
  display: inline-block; padding: 2px var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-full);
  font: 700 .6875rem/1.5 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--text-accent);
}
.barber-card__name { font: 800 var(--text-h3)/1.25 var(--font-display); } /* slab H3: fighters' names on the card (D-017) */
.barber-card__link { text-decoration: none; }
.barber-card__link:hover { text-decoration: underline; }
.barber-card__phone { font: 700 1.75rem/1.2 var(--font-display); color: var(--text-gold); text-decoration: none; }
.barber-card__excerpt { font-size: 1rem; line-height: 1.55; }
.barber-card__schedule, .barber-profile__schedule { font-weight: 600; font-size: .9375rem; color: var(--text-strong); }

/* ---------- Barber profile ---------- */
.barber-profile { display: grid; gap: var(--space-8); }
/* Knockout: a solid red block offset right and bottom, separating the photo from the cream. */
.barber-profile__media { --knockout: var(--space-3); margin: 0 var(--knockout) var(--knockout) 0; box-shadow: var(--knockout) var(--knockout) 0 var(--color-primary-400); }
.barber-profile__media img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.barber-profile__phone { font: 700 1.75rem/1.2 var(--font-display); color: var(--text-gold); text-decoration: none; }
.barber-profile__body { display: grid; gap: var(--space-4); justify-items: start; }
.barber-profile__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.barber-profile__specialty { max-width: 52ch; font-size: var(--text-lead); line-height: 1.5; color: var(--text-strong); }

/* ---------- Reviews ---------- */
.review { margin: 0; padding-top: var(--space-6); border-top: 1px solid var(--line); }
.review__quote { margin: 0 0 var(--space-4); }
.review__author { font: 700 .75rem/1.4 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--text-gold); }
/* One big slab pull quote, then the short ones. */
.review--featured { max-width: 52rem; margin: 0 auto var(--space-16); padding: 0; border: 0; text-align: center; }
.review--featured .review__quote { font: 700 clamp(1.5rem, 3.4vw, 2.25rem)/1.3 var(--font-display); color: var(--text-strong); text-wrap: balance; }
.reviews .section-head__eyebrow .rating { justify-content: center; }
.reviews__more { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-12); }

/* ---------- Hours ---------- */
.hours { width: 100%; border-collapse: collapse; background: var(--surface-raised); }
.hours__row { border-bottom: 1px solid var(--line); }
.hours__row:last-child { border-bottom: 0; }
.hours__day, .hours__time { padding: var(--space-4) var(--space-3); font-weight: 500; font-size: 1.125rem; text-align: left; }
.hours__time { text-align: right; white-space: nowrap; }
.hours__row--closed { color: var(--text-muted); }
.hours__row--today { box-shadow: inset 4px 0 0 var(--color-primary-400); color: var(--text-strong); }
.hours__row--today .hours__time { font-weight: 600; }
.hours__today {
  margin-left: var(--space-2); padding: 1px var(--space-2); border-radius: var(--radius-full);
  background: var(--color-primary-400); color: var(--color-white);
  font: 700 .625rem/1.6 var(--font-body); letter-spacing: .16em; text-transform: uppercase; vertical-align: 2px;
}
.hours--compact { margin: 0; padding: 0; list-style: none; background: none; }
.hours--compact .hours__row { border: 0; }

/* ---------- Visit + contact ---------- */
.visit__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
.visit__info { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-content: start; }
.visit__top { display: grid; gap: var(--space-6); margin-bottom: var(--space-12); }
.visit__top .section-head { margin-bottom: 0; }
.visit__where { display: grid; gap: var(--space-2); align-content: end; }
/* Fabio's intro: centered title, the copy across the full container in two columns on desktop. */
.intro__copy > p { margin-bottom: var(--space-4); } /* bottom, not top: a top margin would drop column two's first line */
.contact-block { display: grid; gap: var(--space-4); justify-items: start; align-content: start; }
.contact-block__address { font-weight: 500; font-size: 1.1875rem; line-height: 1.45; color: var(--text-strong); }
.contact-block__note { color: var(--text-muted); }
.contact-block__phone { font: 700 clamp(2rem, 8vw, 2.75rem)/1.2 var(--font-display); color: var(--text-gold); text-decoration: none; }
.contact-list { margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.contact-list__item { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.contact-list__phone { font: 700 1.75rem/1.2 var(--font-display); color: var(--text-gold); text-decoration: none; }
.contact-list__note { display: block; font-size: .875rem; color: var(--text-muted); }
.holiday-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.holiday-list__item { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }

/* ---------- Map ---------- */
.map-layout { display: grid; gap: var(--space-8); }
/* isolation keeps Leaflet's z-indexes (panes 400, controls 1000) under the fixed header and action bar. */
.map { position: relative; isolation: isolate; aspect-ratio: 4 / 3; background: var(--surface-raised); }
.map__fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-strong); font-weight: 600; }
.map .leaflet-container, .map.leaflet-container { font: 500 .875rem/1.4 var(--font-body); }
.map__pin { background: none; border: 0; }
.map__pin svg { display: block; filter: none; }
.map .leaflet-popup-content-wrapper, .map .leaflet-popup-tip { border-radius: var(--radius-sm); box-shadow: none; color: var(--color-dark-600); }
.map .leaflet-popup-content a { color: var(--color-secondary-400); }
.map .leaflet-bar { border: 1px solid var(--color-dark-300); border-radius: var(--radius-sm); box-shadow: none; } /* brand: no shadows */
.closing { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }

/* ---------- Employment ---------- */
.role-card { display: grid; gap: var(--space-2); padding: var(--space-8) var(--space-6); border-radius: var(--radius-sm); background: var(--surface-raised); }
.role-card__num { font: 700 .75rem/1.4 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--text-accent); }
.role-card__type { font-weight: 600; color: var(--text-gold); }
.step-list { margin: 0; padding: 0; list-style: none; }
.step-list__item { display: grid; grid-template-columns: 4rem 1fr; column-gap: var(--space-6); padding: var(--space-6) 0; border-bottom: 1px solid var(--line); }
.step-list__num { grid-row: span 2; font: 700 2.25rem/1 var(--font-display); color: var(--color-primary-400); } /* 36px: big red is fine on paper and ink */
.step-list__title { font: 650 var(--text-h4)/1.3 var(--font-body); } /* H4 style */
.trait-grid { display: grid; gap: 0 var(--space-12); }
.trait-grid__item { padding: var(--space-6) 0; border-bottom: 1px solid var(--line); }
.trait-grid__title { font: 650 var(--text-h4)/1.3 var(--font-body); } /* H4 style */
.trait-grid__title::before { content: "— "; color: var(--text-accent); }
.req-list { margin: 0; }
.req-list__item { display: grid; gap: var(--space-1); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.req-list__label { font: 700 .75rem/1.4 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--text-muted); }
.req-list__value { margin: 0; color: var(--text-strong); font-weight: 500; }
.req-list__note { display: block; margin-top: var(--space-1); color: var(--text-muted); font-weight: 400; }
.pullout { margin-top: var(--space-12); padding: var(--space-8) 0; border-block: 1px solid var(--line); text-align: center; font-size: var(--text-lead); }
.pullout strong { color: var(--text-strong); }
.apply__inner { display: grid; gap: var(--space-4); justify-items: center; text-align: center; }
.apply__label { font: 700 .75rem/1.4 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--text-gold); }
.apply__phone { font: 800 clamp(2.75rem, 7vw, 4.5rem)/1.2 var(--font-display); color: var(--text-strong); text-decoration: none; }
.apply__phone:hover { color: var(--text-gold); }
.apply__or { font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; color: var(--text-muted); }
.apply__email { font-weight: 600; font-size: 1.25rem; color: var(--text-gold); }
.apply__details { display: grid; gap: var(--space-6); width: 100%; margin: var(--space-8) 0 0; padding-top: var(--space-8); border-top: 1px solid var(--line); }
.apply__details dt { font: 700 .75rem/1.4 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--text-gold); }
.apply__details dd { margin: var(--space-2) 0 0; }

/* ---------- Site footer ---------- */
.site-footer { padding-block: var(--space-12); background: var(--surface); color: var(--text); font-size: .9375rem; }
.site-footer__inner { display: grid; gap: var(--space-8); }
.site-footer__brand { display: inline-block; width: 120px; }
.site-footer__phone { font: 700 1.5rem/1.2 var(--font-display); color: var(--text-gold); text-decoration: none; }
.site-footer__social, .site-footer__charity { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.site-footer__social a { display: inline-grid; place-items: center; width: 44px; height: 44px; color: var(--text-strong); }
.site-footer__social svg { width: 24px; height: 24px; }
.site-footer__charity img { width: auto; height: 40px; }
.site-footer__legal { padding-top: var(--space-6); border-top: 1px solid var(--line); font-size: .8125rem; color: var(--text-muted); }

/* ---------- Reveal on scroll ---------- */
/* main.js marks only what starts below the fold, so nothing above it ever blinks, and with JS off nothing hides. */
[data-reveal] { transition: opacity var(--dur-entrance) var(--ease-out), transform var(--dur-entrance) var(--ease-out); }
[data-reveal].is-pending { opacity: 0; transform: translateY(24px); }
.barber-list > :nth-child(2), .review-list > :nth-child(2) { transition-delay: 100ms; --stagger: 100ms; }
.barber-list > :nth-child(3), .review-list > :nth-child(3) { transition-delay: 200ms; --stagger: 200ms; }

/* Section heads (motion.md moment 6): the eyebrow fades, the heading rises 16px, 300ms. The block itself holds still. */
.section-head[data-reveal].is-pending { opacity: 1; transform: none; }
.section-head__eyebrow, .section-head__title, .section-head__sub {
  transition: opacity var(--dur-hit) var(--ease-out), transform var(--dur-hit) var(--ease-out);
}
.section-head__title { transition-delay: 60ms; }
.section-head__sub { transition-delay: 120ms; }
.section-head.is-pending .section-head__eyebrow, .section-head.is-pending .section-head__sub { opacity: 0; }
.section-head.is-pending .section-head__title { opacity: 0; transform: translateY(16px); }

/* Barber cards (moment 5): the photo and its knockout clip up from the bottom, then the name block rises.
   The clip reaches past the box by the knockout so the red block is part of the wipe, not cut off after it. */
.barber-card[data-reveal].is-pending { opacity: 1; transform: none; }
.barber-card__media {
  --k: calc(-1 * var(--knockout));
  clip-path: inset(0 var(--k) var(--k) 0);
  transition: clip-path var(--dur-entrance) cubic-bezier(.16, 1, .3, 1) var(--stagger, 0ms);
}
.barber-card.is-pending .barber-card__media { clip-path: inset(calc(100% + var(--knockout)) var(--k) var(--k) 0); }
.barber-card__body {
  transition: opacity var(--dur-hit) var(--ease-out), transform var(--dur-hit) var(--ease-out);
  transition-delay: calc(var(--stagger, 0ms) + 250ms);
}
.barber-card.is-pending .barber-card__body { opacity: 0; transform: translateY(16px); }

/* ---------- Hero entrance (moment 1, D-027) ----------
   Pure CSS from first paint: no script to wait on, so nothing flashes. The H1 words only move (never fade), so the
   headline paints at once and stays the LCP element; the lines under it fade in after. Badge lands first (desktop). */
@media (prefers-reduced-motion: no-preference) {
  .hero__word { display: inline-block; animation: hero-word var(--dur-entrance) cubic-bezier(.215, .61, .355, 1) calc(80ms + var(--i, 0) * 70ms) both; }
  .hero__badge { animation: hero-land var(--dur-entrance) cubic-bezier(.16, 1, .3, 1) both; }
  .hero__status, .hero__lede, .hero__cta, .hero__rating { animation: hero-fade var(--dur-hit) var(--ease-out) both; }
  .hero__lede { animation-delay: 480ms; }
  .hero__cta { animation-delay: 550ms; }
  .hero__rating { animation-delay: 620ms; }
  .hero__status { animation-delay: 690ms; } /* the open/closed line comes in last */
}
@keyframes hero-word { from { transform: translateY(24px); } }
@keyframes hero-land { from { opacity: 0; transform: translateY(-12px) scale(.92); } }
@keyframes hero-fade { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Phone action bar ---------- */
.action-bar {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2);
  padding: var(--space-2) var(--gutter) calc(var(--space-2) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-dark-400); background: var(--bar-ink); color: var(--color-white);
}
.action-bar .button { min-height: 52px; padding: 0 var(--space-2); }
/* Below 1024px the action bar carries Call/Text, so the hero doesn't repeat them. */
.hero--home .hero__cta, .hero__cta a[href^="tel:"] { display: none; }

/* ---------- 720px and up ---------- */
@media (min-width: 720px) {
  :root { --section-pad: var(--space-24); --gutter: var(--space-8); }
  .hero__cta { display: flex; flex-wrap: wrap; }
  .hero--home .hero__badge { display: block; width: 200px; }
  .hero__cta .button { flex: 0 0 auto; }
  .hero__facts { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: var(--space-12); }
  .info-strip__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .info-strip__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .info-strip__item, .info-strip__item:nth-child(odd), .info-strip__item:nth-child(-n+2) { padding: var(--space-8) var(--space-6); border: 0; }
  .info-strip__item + .info-strip__item { border-left: 1px solid var(--line); }
  .barber-list { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-8); }
  .review-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .role-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trait-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .req-list__item { grid-template-columns: 14rem 1fr; gap: var(--space-8); }
  .apply__details { grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: left; }
  /* Text left, photo right; the photo stays first in the source so it leads the phone stack.
     28rem photo is ~1.5x the old narrow-column one. */
  .barber-profile { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); gap: var(--space-16); align-items: start; }
  .barber-profile__media { order: 2; }
  .map-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; }
  .site-footer__inner { grid-template-columns: auto 1fr 1fr; align-items: start; }
  .site-footer__legal { grid-column: 1 / -1; }
}

/* ---------- 1024px and up: desktop header, no action bar ---------- */
@media (min-width: 1024px) {
  :root { --header-h: 88px; --actionbar-h: 0px; }
  body { padding-bottom: 0; }
  .action-bar, .site-header__toggle { display: none; }
  .hero--home .hero__cta { display: flex; }
  .hero__cta a[href^="tel:"] { display: inline-flex; }
  .site-header__nav { display: block; margin-left: auto; }
  .site-header__list { gap: var(--space-8); }
  .site-header__link {
    padding-block: var(--space-2); font: 600 .9375rem/1 var(--font-body);
    background: linear-gradient(var(--color-primary-400), var(--color-primary-400)) 0 100% / 0 2px no-repeat; /* a solid underline that grows, not a gradient */
    transition: background-size var(--dur-hit) var(--ease-out);
  }
  .site-header__link:hover, .site-header__link[aria-current="page"] { background-size: 100% 2px; }
  .site-header__phone { display: inline-flex; min-height: 44px; padding: 0 var(--space-4); }
  .site-header__logo { width: 136px; }
  .hero { min-height: 440px; }
  .hero__media img { object-position: 50% 16%; } /* wide and short: lift the crop to the barber and the frames */
  .hero__media::after { background: var(--photo-overlay-wide); }
  .hero--home { min-height: 800px; }
  .hero--home .hero__inner {
    grid-template-columns: minmax(0, 1fr) 400px; column-gap: var(--space-16); align-items: end;
    grid-template-areas: "kicker badge" "title badge" "status badge" "lede badge" "cta badge" "rating badge";
    padding-bottom: var(--space-24);
  }
  .hero--home .hero__badge { grid-area: badge; width: 400px; align-self: center; }
  .hero--home .hero__kicker { grid-area: kicker; }
  .hero--home .hero__title { grid-area: title; }
  .hero--home .hero__status { grid-area: status; }
  .hero--home .hero__lede { grid-area: lede; font-size: var(--text-lead); }
  .hero--home .hero__cta { grid-area: cta; }
  .hero--home .hero__rating { grid-area: rating; }
  .visit__top, .visit__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--space-16); }
  .visit__top { align-items: end; }
  .map.visit__map { aspect-ratio: auto; min-height: 360px; } /* stretch to the hours column's height */
}

/* ---------- 1024px and up: Fabio's intro in two columns ---------- */
@media (min-width: 1024px) {
  .intro__copy { columns: 2; column-gap: var(--space-16); }

}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0ms !important; scroll-behavior: auto !important; }
}