/* ============================================================
   Signore Barbershop, Marlborough MA. Design system.

   PALETTE SOURCE, stated out loud because the rule says derive it from the logo:
   the Signore wordmark is strictly MONOCHROME, black serif type on a light
   diamond lattice. So the primary is near-black ink on warm paper, taken from
   the logo itself. The brass accent (#C79A46) is a deliberate, documented
   choice: it is the warm accent the client already ships on their current site
   (#E2A336), pulled slightly darker so it passes contrast on paper. It is NOT
   a logo colour and this comment exists so nobody later pretends it was.

   TYPE, changed 2026-09-05 because the old set was wrong for the trade.
   It was Bodoni Moda + Archivo + Italianno. Bodoni Moda is a
   fashion-magazine didone: beautiful on a Vogue cover, but its hairlines thin
   out to nothing at 15px UI size. Italianno is a wedding script. Archivo is a
   near neighbour of the generic tech sans this house style rules out.

   Now: PATUA ONE for display, BARLOW for body. Two faces, not three.
   Patua One is a heavy Clarendon-style slab, which is the lettering trade that
   actually gets painted and gold-leafed on a barbershop window. It carries the
   weight the old didone could not hold, and it sits properly beside Andre's
   engraved serif wordmark instead of competing with it. Barlow is a sturdy,
   slightly squared grotesque: signage and workwear,
   not a startup landing page. Patua One ships one weight only, so every
   display rule below sets font-weight 400 deliberately; asking for 700 would
   make the browser smear a fake bold.

   BRAND DEVICES (the "could you tell whose site this is" test):
     1. the diamond lattice from the logo ground, as a texture
     2. a barber-pole diagonal stripe rule, used as a divider, under headings,
        and as the eyebrow mark that replaced the script "the"
     3. a large ghost SIGNORE diamond behind the ink bands
     4. double-rule frames on photos, echoing the framed prints on the shop wall
   ============================================================ */

:root {
  /* Brand */
  --ink: #14110F;
  --ink-deep: #0B0908;
  --ink-soft: #221D19;
  --ink-line: #342D26;
  --paper: #FAF7F2;
  --paper-2: #F1ECE3;
  --line: #E2D9CB;
  --brass: #C79A46;
  --brass-bright: #E2A336;
  /* #A87C2E was the text brass and it failed WCAG everywhere it was used:
     3.19:1 on the surface, 3.52:1 on paper, against a 4.5:1 requirement. It
     was caught by eye on 2026-09-04 before any gate measured it.
     #856220 is the same hue pulled down until it clears 4.5:1 on BOTH paper
     tones. --brass stays bright for rules, borders and frames, which are
     decoration and carry no reading load. */
  --brass-dark: #856220;
  --brass-soft: rgba(199, 154, 70, 0.14);

  /* Surfaces */
  --color-bg: var(--paper);
  --color-surface: var(--paper-2);

  /* Text */
  --color-text: #221D19;
  --color-text-light: #655C54;
  --color-text-on-dark: #F5F0E8;
  --color-text-on-dark-muted: #C0B6A7;

  --color-border: var(--line);
  --color-google-star: #FBBC04;

  --font-display: 'Patua One', 'Rockwell', 'Clarendon', Georgia, serif;
  --font-body: 'Barlow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* Patua One has exactly one weight. Every display rule uses this, so a
     stray font-weight:700 anywhere would be synthesised and look smeared. */
  --display-weight: 400;

  --container-width: 1180px;
  --section-pad: 96px;
  --radius: 3px;
  --radius-lg: 4px;
  --nav-h: 78px;
  /* The mobile call bar is fixed at the very top of the screen. Its height is
     pinned here rather than left to the font metrics, because the sticky nav
     parks directly underneath it and body gets the same padding. One number,
     three rules, no chance of a mismatch tucking content under the bar. */
  --cta-bar-h: 52px;
  /* Where the open mobile drawer starts, measured off the real nav bottom by
     js/main.js when the menu opens. The static value here is the mobile case
     (call bar + nav row) and is only ever used before that first measurement. */
  --drawer-top: 130px;

  --shadow-sm: 0 2px 10px rgba(20, 17, 15, 0.07);
  --shadow-md: 0 14px 38px rgba(20, 17, 15, 0.13);
  --shadow-card-hover: 0 20px 46px rgba(20, 17, 15, 0.18);

  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --speed-fast: 0.25s;
  --speed: 0.45s;
  --speed-slow: 0.8s;

  /* Brand device 1: the diamond lattice off the logo ground */
  --lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23C79A46' stroke-width='1'%3E%3Cpath d='M22 0 L44 22 L22 44 L0 22 Z'/%3E%3Cpath d='M22 -22 L66 22 M22 66 L66 22 M-22 22 L22 -22 M-22 22 L22 66'/%3E%3C/g%3E%3C/svg%3E");
  --lattice-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%2314110F' stroke-width='1'%3E%3Cpath d='M22 0 L44 22 L22 44 L0 22 Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ============ Reset & base ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.68;
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brass-dark); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--ink);
  font-weight: var(--display-weight);
  letter-spacing: 0.035em;
}
h1 { font-size: clamp(31px, 4vw, 52px); letter-spacing: 0.045em; }
h2 { font-size: clamp(25px, 3vw, 39px); }
h3 { font-size: clamp(18px, 1.7vw, 23px); letter-spacing: 0.05em; }
p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

.container { max-width: var(--container-width); margin: 0 auto; padding: 0 24px; }
.text-center { text-align: center; }

.section { padding: var(--section-pad) 0; background: var(--color-bg); }
.section--surface { background: var(--color-surface); }
.section__footer { text-align: center; margin-top: 46px; }

/* Eyebrow: a short barber-pole stripe plus a letterspaced label.
   This used to be the word "the" set in Italianno, a wedding script, sitting
   above the label the way it sits above SIGNORE in the logo. The script went
   with the rest of the type overhaul on 2026-09-05. The pole mark replaces it,
   which keeps a brand device in the same spot and is unmistakably a barbershop
   rather than a save-the-date card. */
.section-subtitle {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass-dark);
  margin-bottom: 12px;
}
.section-subtitle::before {
  content: '';
  display: inline-block;
  width: 30px; height: 8px;
  margin-right: 11px;
  vertical-align: 1px;
  background-image: repeating-linear-gradient(115deg, var(--ink) 0 5px, var(--brass) 5px 10px, var(--paper) 10px 15px);
  border: 1px solid var(--ink);
}

/* Section title with the barber-pole rule beneath it (brand device 2) */
.section-title { margin-bottom: 20px; }
.section-title--underline { padding-bottom: 20px; position: relative; margin-bottom: 26px; }
.section-title--underline::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 108px; height: 9px;
  background-image: repeating-linear-gradient(115deg, var(--ink) 0 6px, var(--brass) 6px 12px, var(--paper) 12px 18px);
  border: 1px solid var(--ink);
}
.section-title--underline.left::after { left: 0; transform: none; }
.band .section-title--underline::after,
.cta-section .section-title--underline::after {
  background-image: repeating-linear-gradient(115deg, var(--paper) 0 6px, var(--brass) 6px 12px, var(--ink) 12px 18px);
  border-color: var(--brass);
}

/* ============ Buttons ============ */
.btn {
  display: inline-block;
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 16px 30px;
  border-radius: var(--radius);
  cursor: pointer;
  border: none;
  min-height: 44px;
  transition: background var(--speed-fast) var(--ease), color var(--speed-fast) var(--ease), box-shadow var(--speed-fast) var(--ease), transform var(--speed-fast) var(--ease);
}
/* the inset hairline rule, like a pressed card */
.btn::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid currentColor;
  opacity: 0.32;
  pointer-events: none;
  border-radius: 1px;
}
.btn--primary { background: var(--brass); color: var(--ink); }
.btn--primary:hover { background: var(--brass-bright); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(20, 17, 15, 0.22); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--ink-soft); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(20, 17, 15, 0.24); }
.btn--outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn--outline::after { opacity: 0.18; }
.btn--outline:hover { background: var(--ink); color: var(--paper); }
.btn--outline-light { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 2px rgba(245, 240, 232, 0.55); }
.btn--outline-light:hover { background: var(--paper); color: var(--ink); }
.btn--sm { padding: 11px 18px; font-size: 12.5px; letter-spacing: 0.12em; }
.btn--sm::after { inset: 3px; }
.btn-pair { display: flex; gap: 14px; flex-wrap: wrap; }

/* ============ Mobile sticky CTA bar ============ */
.mobile-cta-bar { display: none; }
@media (max-width: 768px) {
  .mobile-cta-bar {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--cta-bar-h); box-sizing: content-box; padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
    z-index: 1100;
    border-bottom: 1px solid var(--brass);
  }
  .mobile-cta-bar a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    text-align: center;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-decoration: none;
  }
  .mobile-cta-bar__primary { background: var(--brass); color: var(--ink); }
  .mobile-cta-bar__call { background: var(--ink-deep); color: var(--paper); }
  body { padding-bottom: calc(var(--cta-bar-h) + env(safe-area-inset-bottom, 0px)); }
  /* THE BUG THIS FIXES: .nav is sticky at top 0, so the moment the page
     scrolled it parked underneath the fixed call bar, which has a higher
     z-index. The hamburger ended up 77% covered and a tap on it hit the phone
     link and dialled the shop. Park the nav at exactly the bar's height
     instead. `body .nav` rather than `!important` so it simply outranks the
     unqualified `.nav { top: 0 }` further down the file. */
  body .nav { top: 0; }
  /* Same offset for in-page jumps, so #book clears the bar and the nav. */
  body #book { scroll-margin-top: calc(var(--nav-h) + 16px); }
}

/* ============ Utility bar ============ */
.utility-bar {
  background: var(--ink-deep);
  color: var(--color-text-on-dark-muted);
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 9px 0;
  position: relative;
  z-index: 1001;
  border-bottom: 1px solid var(--ink-line);
}
.utility-bar .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.utility-bar__item { display: inline-flex; align-items: center; gap: 8px; }
.utility-bar__item svg { width: 14px; height: 14px; color: var(--brass); }
.utility-bar__actions { display: flex; align-items: center; gap: 22px; }
.utility-bar__phone { color: var(--paper); text-decoration: none; font-weight: 700; letter-spacing: 0.06em; }
.utility-bar__phone:hover { color: var(--brass); }
@media (max-width: 900px) { .utility-bar { display: none; } }

/* ============ Nav ============ */
.nav {
  background: var(--ink);
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--ink-line);
  transition: box-shadow var(--speed-fast) var(--ease);
}
.nav.scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
/* With the drawer open the whole nav has to sit above the fixed call bar
   (1100) and the utility bar (1001), or the hamburger and the top of the menu
   end up behind them and a tap dials the shop instead of closing the menu.
   js/main.js puts .menu-open on <body> in the same function that opens it. */
body.menu-open .nav { z-index: 1200; }
.nav .container { display: flex; align-items: center; gap: 24px; height: var(--nav-h); }
.nav__logo { flex-shrink: 0; display: flex; align-items: center; }
.nav__logo img { width: 52px; height: 52px; border-radius: 2px; }
.nav__links { display: flex; align-items: center; gap: 2px; margin-left: 6px; }
.nav__link, .nav__dropdown-toggle {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 11px 13px;
  min-height: 44px;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--speed-fast) var(--ease), background var(--speed-fast) var(--ease);
}
.nav__link:hover, .nav__dropdown-toggle:hover { color: var(--brass); background: rgba(255, 255, 255, 0.05); }
.nav__dropdown { position: relative; }
.nav__dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 248px;
  background: var(--ink-deep);
  border: 1px solid var(--ink-line);
  border-top: 3px solid var(--brass);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.45);
  z-index: 1002;
}
.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown:focus-within .nav__dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__dropdown-item {
  display: block;
  color: #E4DCCF;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  padding: 10px 14px;
  transition: background var(--speed-fast) var(--ease), color var(--speed-fast) var(--ease), padding var(--speed-fast) var(--ease);
}
.nav__dropdown-item:hover { background: rgba(199, 154, 70, 0.12); color: var(--brass); padding-left: 20px; }
.nav__actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.nav__hamburger {
  display: none; flex-direction: column; gap: 5px; cursor: pointer;
  background: none; border: none; padding: 8px; margin-left: auto;
  /* position:relative is load bearing. Without it the z-index below is
     ignored, the open drawer paints over the button and there is no way to
     tap the menu closed. */
  position: relative; z-index: 1102;
  min-width: 44px; min-height: 44px; align-items: center; justify-content: center;
}
.nav__hamburger span { width: 26px; height: 2px; background: var(--paper); transition: transform var(--speed) var(--ease), opacity var(--speed) var(--ease); }
.nav__hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav__hamburger.active span:nth-child(2) { opacity: 0; }
.nav__hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
/* Above the call bar (1100) so tapping the dimmed strip closes the menu
   instead of dialling, and below the nav (1200) so the header stays lit. */
.nav-overlay { position: fixed; inset: 0; background: rgba(11, 9, 8, 0.65); opacity: 0; visibility: hidden; transition: opacity var(--speed) var(--ease); z-index: 1150; }
.nav-overlay.active { opacity: 1; visibility: visible; }

/* Close control inside the drawer. The hamburger also closes the menu, but a
   drawer with no visible way out is a trap, so this is a real labelled button
   sitting at the top right of the panel, comfortably over 44 by 44. */
.nav__close { display: none; }

@media (max-width: 1100px) {
  .nav__hamburger { display: flex; }
  .nav__actions { display: none; }
  /* The panel opens BELOW the nav row, not over it, so the logo and the
     hamburger stay visible and tappable the whole time the menu is open. */
  .nav__links {
    position: fixed; top: var(--drawer-top); right: -100%;
    width: 88%; max-width: 400px;
    height: calc(100vh - var(--drawer-top)); height: calc(100dvh - var(--drawer-top));
    background: var(--ink-deep);
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 0 26px 40px;
    transition: right var(--speed) var(--ease-out);
    z-index: 1101; overflow-y: auto; overscroll-behavior: contain; margin: 0;
    border-left: 3px solid var(--brass);
    border-top: 1px solid var(--ink-line);
  }
  .nav__links.open { right: 0; }
  .nav__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    align-self: flex-end;
    position: sticky;
    top: 0;
    margin: 14px 0;
    min-height: 46px;
    padding: 11px 16px;
    background: var(--ink-deep);
    color: var(--color-text-on-dark-muted);
    border: 1px solid var(--ink-line);
    border-radius: 2px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    z-index: 3;
  }
  .nav__close svg { width: 15px; height: 15px; }
  .nav__close:hover, .nav__close:focus-visible { color: var(--brass); border-color: var(--brass); }
  .nav__dropdown-menu {
    position: static; opacity: 1; visibility: visible; transform: none; display: none;
    box-shadow: none; border: none; border-left: 2px solid var(--brass);
    margin: 4px 0 10px 10px; padding: 0 0 0 8px; min-width: 0; background: transparent;
  }
  .nav__dropdown.open .nav__dropdown-menu { display: block; }
  .nav__dropdown-toggle { width: 100%; justify-content: space-between; font-size: 15px; }
  .nav__link { font-size: 15px; }
}

/* ============ Hero: ink copy panel + portrait photo panel ============
   Every Signore photograph is portrait, because Instagram and Square are the
   only sources. So the hero frames a tall photo instead of cropping it into a
   letterbox band. Same shape on every page. */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--color-text-on-dark);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--lattice);
  background-size: 44px 44px;
  opacity: 0.13;
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 60px;
  align-items: center;
}
.hero--nophoto .hero__inner { grid-template-columns: 1fr; }
.hero--nophoto .hero__content { max-width: 780px; padding-bottom: 74px; }
.hero__content { padding: 74px 0 84px; max-width: 660px; }
.hero--home .hero__content { padding: 84px 0 96px; }
.hero__title { color: var(--paper); margin-bottom: 14px; }
.hero__count {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 16px;
  display: inline-block;
  border-bottom: 2px solid var(--brass);
  padding-bottom: 4px;
}
.hero__text { font-size: 18px; color: rgba(245, 240, 232, 0.86); margin-bottom: 26px; max-width: 560px; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* the framed portrait panel (brand device 4: double rule, like the shop prints) */
.hero__panel { position: relative; align-self: stretch; display: flex; align-items: center; padding: 40px 0; }
.hero__frame { position: relative; width: 100%; }
.hero__frame::before {
  content: '';
  position: absolute;
  inset: -14px;
  border: 1px solid var(--brass);
  opacity: 0.75;
  pointer-events: none;
}
.hero__frame img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 28%;
  border: 3px solid var(--brass);
}

/* rating badges
   The old lockup here was a flex row of HTML text, and HTML text cannot
   compress past its own words, so on a phone the row wrapped and the badges
   stacked one under another. The replacement is an inline <svg viewBox="0 0
   193 60">, which has NO min-content width and therefore shrinks freely. That
   single property is what keeps the row on one line at 375px.

   Three declarations below are load-bearing and the row breaks without any one
   of them: flex-wrap:nowrap on the row, and flex:1 1 0 plus min-width:0 on the
   items. max-width:193px stops a lone badge ballooning to the full column.

   This hero sits on the ink ground, so the marks and the rating line take the
   on-dark text token and the component ships as-is. A light ground would need
   .rbadges--dark, which flips the same fills to ink. */
:root {
  --rbadge-ink: var(--color-text-on-dark);  /* the marks and the rating line, on this dark hero */
  --rbadge-star: #F6AB26;                   /* measured star gold; NOT the Google #FBBC04 */
}
/* >>> rating-badge component: generated by .skills/client-website/components/rbadge-css.js. Do not edit inside the markers. <<< */
.rbadges {
  display: flex;
  flex-wrap: nowrap;              /* THE FIX. It physically cannot stack. */
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  width: 100%;
  max-width: 520px;
  margin: 0 0 20px;
  padding: 0;
  background: none;               /* no panel, no pill, no card behind the row */
  border: 0;
}
.rbadges[data-count="3"] { gap: 12px; }
.rbadges[data-count="4"] { gap: 10px; }
.rbadges__item {
  flex: 1 1 0;
  min-width: 0;                   /* REQUIRED. Without it the row breaks. */
  max-width: 193px;
  display: block;
  line-height: 0;
  /* The item is an <a>, so without this it inherits the site's link colour. Nothing inside the
     badge is painted with that colour, but a contrast sweep reading currentColor would measure a
     colour the badge never paints. Pin it to the same token the artwork uses so the two agree. */
  color: var(--rbadge-ink, #fff);
}
.rbadges__item:focus-visible { outline: 3px solid var(--rbadge-focus, currentColor); outline-offset: 4px; border-radius: 2px; }
.rbadge { display: block; width: 100%; height: auto; aspect-ratio: 193 / 60; color: var(--rbadge-ink, #fff); }
.rbadge text { fill: currentColor; font-family: var(--font-body, inherit); }
.rbadge path[fill="#F6AB26"] { fill: var(--rbadge-star, #F6AB26); }
@media (max-width: 768px) { .rbadges { max-width: none; gap: 12px; } }
@media (max-width: 400px)  { .rbadges { gap: 8px; } }
/* A light section flips ONLY the ink. The Google G keeps Google's colours on any ground. */
.rbadges--dark .rbadge { color: #0E1A2B; }
/* <<< end rating-badge component >>> */

.hero__trust { display: flex; flex-direction: column; gap: 9px; margin-bottom: 28px; }
.hero__trust-item { display: inline-flex; align-items: flex-start; gap: 10px; font-size: 15px; color: rgba(245, 240, 232, 0.9); }
.hero__trust-item svg { width: 16px; height: 16px; color: var(--brass); flex-shrink: 0; margin-top: 4px; }

.breadcrumbs { padding-top: 22px; font-size: 13px; letter-spacing: 0.06em; color: var(--color-text-on-dark-muted); position: relative; z-index: 3; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.breadcrumbs a { color: var(--color-text-on-dark-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--brass); }
.breadcrumbs .current { color: var(--paper); }
/* was opacity 0.45, which dropped the crumb separator to 2.56:1 on the ink
   hero. It is small text a customer reads to know where they are, so it gets
   a real colour instead of a fade. */
.breadcrumbs .sep { color: var(--color-text-on-dark-muted); }

@media (max-width: 1000px) {
  .hero__inner { grid-template-columns: 1fr; gap: 0; }
  .hero__content { padding: 48px 0 34px; max-width: none; }
  .hero--home .hero__content { padding: 52px 0 34px; }
  .hero__panel { padding: 0 0 54px; }
  .hero__frame::before { inset: -9px; }
  .hero__frame img { aspect-ratio: 4 / 3; object-position: center 24%; border-width: 2px; }
}

/* ============ Barber-pole divider (brand device 2) ============ */
.pole {
  height: 16px;
  background-image: repeating-linear-gradient(115deg, var(--ink) 0 10px, var(--brass) 10px 20px, var(--paper) 20px 30px);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.section-divider { line-height: 0; }
.section-divider svg { display: block; width: 100%; height: auto; }

/* ============ Floating trust strip ============ */
.trust-strip { position: relative; z-index: 10; margin-top: -46px; }
.trust-strip__card {
  background: var(--paper);
  box-shadow: var(--shadow-md);
  border-top: 4px solid var(--brass);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 0;
}
.trust-strip__item { display: flex; align-items: center; gap: 14px; padding: 24px 22px; border-right: 1px solid var(--line); }
.trust-strip__item:last-child { border-right: none; }
.trust-strip__icon {
  width: 42px; height: 42px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  border: 1px solid var(--brass);
  transform: rotate(45deg);
}
.trust-strip__icon svg { width: 20px; height: 20px; transform: rotate(-45deg); }
.trust-strip__label { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: uppercase; font-size: 15px; letter-spacing: 0.06em; color: var(--ink); line-height: 1.2; }
.trust-strip__sub { font-size: 13px; color: var(--color-text-light); line-height: 1.45; margin-top: 3px; }

/* ============ Cards ============ */
.card-grid { display: grid; gap: 26px; margin-top: 44px; }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Service cards: a real photograph in a 4:5 portrait frame, the way the
   client's own Instagram grid reads. Icon-only is the documented fallback. */
.svc-card {
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }
.svc-card__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink); }
.svc-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.svc-card:hover .svc-card__photo img { transform: scale(1.05); }
.svc-card__photo::after {
  content: '';
  position: absolute; inset: auto 0 0 0; height: 52%;
  background: linear-gradient(180deg, rgba(20, 17, 15, 0) 0%, rgba(20, 17, 15, 0.72) 100%);
}
.svc-card__badge {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  width: 40px; height: 40px; padding: 9px;
  background: var(--brass); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.svc-card__badge svg { width: 100%; height: 100%; display: block; }
.svc-card__price {
  position: absolute; right: 14px; bottom: 16px; z-index: 2;
  font-family: var(--font-display); font-weight: var(--display-weight); font-size: 22px;
  color: var(--paper); letter-spacing: 0.04em;
}
.svc-card__icon { width: 48px; height: 48px; margin: 26px 24px 0; color: var(--brass-dark); }
.svc-card__icon svg { width: 100%; height: 100%; }
.svc-card__body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.svc-card h3 { margin-bottom: 10px; }
.svc-card p { font-size: 15px; color: var(--color-text-light); margin-bottom: 16px; }
.svc-card__links { list-style: none; margin: 0 0 20px; flex: 1; }
.svc-card__links a {
  display: flex; align-items: center; gap: 9px; padding: 8px 0;
  color: var(--color-text); font-weight: 600; font-size: 15px; text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color var(--speed-fast) var(--ease), padding-left var(--speed-fast) var(--ease);
}
.svc-card__links li:last-child a { border-bottom: none; }
.svc-card__links svg { width: 11px; height: 11px; flex-shrink: 0; color: var(--brass-dark); }
.svc-card__links a:hover { color: var(--brass-dark); padding-left: 6px; }

/* Icon benefit cards */
.icon-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--ink);
  padding: 28px 24px;
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), border-top-color var(--speed) var(--ease);
}
.icon-card:nth-child(even) { border-top-color: var(--brass); }
.icon-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.icon-card__icon { width: 38px; height: 38px; margin-bottom: 14px; color: var(--brass-dark); }
.icon-card__icon svg { width: 100%; height: 100%; }
.icon-card h3 { margin-bottom: 8px; }
.icon-card p { font-size: 15px; color: var(--color-text-light); }
.why-grid__more { grid-column: 1 / -1; }
.why-grid__rest { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
/* home reviews: the first card stands alone, two more sit in a disclosure that
   takes the other two columns on desktop, so the row of three is unchanged */
.reviews-grid__more { grid-column: 2 / -1; }
.reviews-grid__rest { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; height: 100%; }

/* Review cards */
.review-card {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 28px 26px 24px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.review-card__g { position: absolute; top: 22px; right: 22px; width: 22px; height: 22px; }
.review-card__g svg { width: 100%; height: 100%; }
.review-card__stars { display: flex; gap: 2px; color: var(--color-google-star); margin-bottom: 14px; }
.review-card__stars svg { width: 16px; height: 16px; }
.review-card__text { font-size: 15.5px; color: var(--color-text); flex: 1; margin-bottom: 18px; }
.review-card__meta { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.review-card__initial {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--brass);
  font-family: var(--font-display); font-size: 18px; font-weight: var(--display-weight);
}
.review-card__author { font-weight: 700; color: var(--ink); font-size: 15px; line-height: 1.2; }
.review-card__when { font-size: 12.5px; color: var(--color-text-light); letter-spacing: 0.04em; }
.reviews__cta { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 44px; }

/* Single wide testimonial */
.quote-card {
  position: relative; max-width: 790px; margin: 44px auto 0;
  background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--brass);
  box-shadow: var(--shadow-sm);
  padding: 34px 38px 28px;
}
.quote-card__text { font-family: var(--font-display); font-size: clamp(19px, 2vw, 23px); line-height: 1.55; color: var(--ink); margin-bottom: 20px; font-weight: var(--display-weight); }
.quote-card .review-card__g { top: 26px; right: 26px; width: 24px; height: 24px; }
.band .review-card { border-color: var(--ink-line); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3); }

/* A paper card sitting on the ink band keeps paper-card colours. Without this,
   .band h3 and .band p paint white type onto a white card and the copy vanishes. */
.band .icon-card, .band .book-card, .band .review-card, .band .step { color: var(--color-text); }
.band .icon-card h3, .band .step h3, .band .book-card__title { color: var(--ink); }
.band .icon-card p, .band .step p, .band .review-card p, .band .book-card p { color: var(--color-text-light); }
.band .review-card .review-card__text { color: var(--color-text); }
.band .review-card__author { color: var(--ink); }
.band .book-card .info-item, .band .book-card .info-item span { color: var(--color-text); }
.band .book-card__or { color: var(--color-text-light); }
.band .book-card { box-shadow: 0 22px 50px rgba(0, 0, 0, 0.42); }

/* ============ Ink band ============ */
.band {
  position: relative;
  background: var(--ink);
  color: var(--color-text-on-dark);
  padding: calc(var(--section-pad) + 6px) 0;
  overflow: hidden;
}
.band::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--lattice);
  background-size: 44px 44px;
  opacity: 0.12;
}
/* brand device 3: a giant ghost diamond off the logo lattice, which replaced
   the giant ghost script "the" when Italianno was dropped. Decorative only,
   so it carries no text a screen reader or a contrast sweep has to care about. */
.band::after {
  content: '';
  position: absolute;
  right: -4%; bottom: -22%;
  width: clamp(300px, 36vw, 520px);
  aspect-ratio: 1;
  transform: rotate(45deg);
  border: clamp(14px, 1.8vw, 26px) solid var(--brass);
  opacity: 0.06;
  pointer-events: none;
}
.band .section-title, .band h2, .band h3 { color: var(--paper); }
.band .section-subtitle { color: var(--brass); }
.band .section-subtitle::before { color: var(--brass); }
.band p { color: rgba(245, 240, 232, 0.84); }
.band > .container { position: relative; z-index: 2; }
.band__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }

/* ============ The price menu (their own published menu, verbatim) ============ */
.menu-list { margin-top: 40px; border-top: 2px solid var(--ink); }
.menu-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px 26px;
  align-items: baseline;
  padding: 19px 4px;
  border-bottom: 1px solid var(--line);
}
.menu-row__name { font-family: var(--font-display); font-size: clamp(18px, 1.8vw, 22px); font-weight: var(--display-weight); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); }
.menu-row__sub { display: block; font-family: var(--font-body); font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--color-text-light); margin-top: 3px; }
.menu-row__dur { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-light); white-space: nowrap; }
.menu-row__price { font-family: var(--font-display); font-size: clamp(21px, 2vw, 27px); font-weight: var(--display-weight); color: var(--brass-dark); white-space: nowrap; }
.menu-row--feature { background: var(--paper); border-left: 4px solid var(--brass); padding-left: 20px; padding-right: 16px; }
.menu-row__desc { grid-column: 1 / -1; font-size: 15px; color: var(--color-text-light); margin-top: 6px; max-width: 62ch; }
.menu-note { margin-top: 22px; font-size: 14.5px; color: var(--color-text-light); }
@media (max-width: 620px) {
  .menu-list { margin-top: 28px; }
  .menu-row { grid-template-columns: minmax(0, 1fr) auto; padding: 13px 4px; }
  .menu-row--feature { padding-left: 16px; padding-right: 12px; }
  .menu-row__dur { grid-column: 1 / 2; }
  .menu-row__price { grid-row: 1; grid-column: 2; }
}

/* ============ Booking rail ============
   The sticky column pattern from the playbook, applied to booking rather than a
   lead form. Signore has no CRM endpoint and no form anywhere on their current
   site, so nothing is invented here: the rail sends people to the Square page
   they already use. Copy column scrolls, rail stays put, switched off below 960px. */
/* The anchor now sits on the booking card itself, not on the section, so a
   jump to #book lands on the card on a phone instead of two screens above
   it. Extra margin because lazy images above can still reflow a little
   after the jump. */
#book { scroll-margin-top: calc(var(--nav-h) + 40px); }
.book-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); column-gap: 52px; row-gap: 0; align-items: start; }
.book-split__copy, .book-split__more { max-width: 580px; grid-column: 1; }
.book-split__rail { position: sticky; top: calc(var(--nav-h) + 20px); align-self: start; grid-column: 2; grid-row: 1 / span 2; }
.book-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 5px solid var(--brass);
  box-shadow: var(--shadow-md);
  padding: 32px 30px 30px;
}
.book-card__title { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: uppercase; font-size: 25px; letter-spacing: 0.05em; color: var(--ink); }
.book-card__sub { font-size: 14.5px; color: var(--color-text-light); margin: 8px 0 22px; }
.book-card__facts { display: grid; gap: 2px; margin: 22px 0; padding-top: 20px; border-top: 1px solid var(--line); }
.book-card .btn { width: 100%; }
.book-card__or { text-align: center; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-light); margin: 12px 0; }
.book-card__policy { font-size: 12.5px; line-height: 1.55; color: var(--color-text-light); margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.book-split__steps { list-style: none; counter-reset: bstep; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 16px; }
.book-split__steps li { counter-increment: bstep; position: relative; padding-left: 50px; font-size: 15px; color: var(--color-text-light); line-height: 1.6; }
.book-split__steps li::before {
  content: counter(bstep);
  position: absolute; left: 0; top: 2px;
  width: 34px; height: 34px;
  border: 1px solid var(--brass);
  transform: rotate(45deg);
  color: transparent;
}
.book-split__steps li::after {
  content: counter(bstep);
  position: absolute; left: 0; top: 2px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 15px; font-weight: var(--display-weight); color: var(--ink);
}
.book-split__steps strong { display: block; color: var(--ink); font-size: 15.5px; font-family: var(--font-body); }
.book-split__linkhead { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); font-family: var(--font-display); font-size: 17px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink); }
.book-split__links { list-style: none; columns: 2; gap: 24px; margin-top: 12px; }
.book-split__links li { padding: 6px 0; break-inside: avoid; }
.book-split__links a { font-size: 15px; font-weight: 600; color: var(--color-text); text-decoration: none; }
.book-split__links a:hover { color: var(--brass-dark); text-decoration: underline; }
@media (max-width: 960px) {
  .book-split { grid-template-columns: 1fr; row-gap: 36px; }
  .book-split__copy, .book-split__more { max-width: 640px; grid-column: auto; }
  .book-split__rail { position: static; top: auto; grid-column: auto; grid-row: auto; }
}
@media (max-width: 520px) { .book-split__links { columns: 1; } }

/* ============ Split layout ============ */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 58px; align-items: center; }
.split__img { position: relative; }
.split__img img { width: 100%; object-fit: cover; border: 3px solid var(--brass); }
.split__img::after { content: ''; position: absolute; inset: -14px; border: 1px solid var(--brass); opacity: 0.6; pointer-events: none; }

/* Stat row */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 30px; }
.stat { border-left: 2px solid var(--brass); padding-left: 14px; }
.stat__num { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 38px; line-height: 1; color: var(--ink); }
.band .stat__num { color: var(--paper); }
.stat__label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-text-light); margin-top: 6px; }
.band .stat__label { color: var(--color-text-on-dark-muted); }

/* Steps */
.step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.step { background: var(--paper); border: 1px solid var(--line); padding: 34px 26px 28px; text-align: center; position: relative; }
.step__num {
  width: 50px; height: 50px; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: var(--display-weight); font-size: 21px;
  color: var(--ink); background: var(--brass);
  transform: rotate(45deg);
}
.step__num span { transform: rotate(-45deg); }
.step h3 { margin-bottom: 8px; }
.step p { font-size: 15px; color: var(--color-text-light); }

/* Check list (internal links) */
.check-list { list-style: none; columns: 2; gap: 40px; margin-top: 18px; }
.check-list li { break-inside: avoid; }
.check-list a, .check-list > li > span {
  display: flex; align-items: center; gap: 10px; padding: 9px 0;
  color: var(--color-text); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color var(--speed-fast) var(--ease), padding-left var(--speed-fast) var(--ease);
}
.check-list a:hover { color: var(--brass-dark); padding-left: 6px; }
.check-list svg { width: 15px; height: 15px; color: var(--brass); flex-shrink: 0; }

/* ============ CTA band ============ */
.cta-section {
  position: relative;
  background: var(--ink-deep);
  color: var(--paper);
  text-align: center;
  padding: 84px 0;
  overflow: hidden;
}
.cta-section::before { content: ''; position: absolute; inset: 0; background-image: var(--lattice); background-size: 44px 44px; opacity: 0.14; }
.cta-section .container { position: relative; z-index: 2; }
.cta-section h2 { color: var(--paper); margin-bottom: 12px; }
.cta-section p { color: rgba(245, 240, 232, 0.86); max-width: 620px; margin: 0 auto 28px; }

/* ============ FAQ ============ */
.faq-list { max-width: 800px; margin: 44px auto 0; }
.faq-item { background: var(--paper); border: 1px solid var(--line); margin-bottom: 10px; overflow: hidden; }
.faq-item__question {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  width: 100%; padding: 18px 22px; min-height: 44px;
  background: var(--paper); border: none; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 16.5px;
  text-align: left; color: var(--ink);
  transition: background var(--speed-fast) var(--ease);
}
.faq-item__question:hover { background: var(--paper-2); }
.faq-item__question svg { flex-shrink: 0; transition: transform var(--speed-fast) var(--ease); color: var(--brass-dark); }
.faq-item.active .faq-item__question { background: var(--paper-2); }
.faq-item.active .faq-item__question svg { transform: rotate(180deg); }
.faq-item__answer { max-height: 0; overflow: hidden; transition: max-height var(--speed) var(--ease); }
.faq-item__answer-inner { padding: 2px 22px 20px; color: var(--color-text-light); font-size: 15.5px; }
.faq-item.active .faq-item__answer { max-height: 520px; }

/* ============ Map ============ */
.map-section { line-height: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
.map-embed { width: 100%; height: 340px; border: 0; }

/* ============ Live review feed ============ */
.review-widget { background: var(--paper); border: 1px solid var(--line); padding: 8px; overflow: hidden; }
.review-widget iframe { display: block; width: 100%; min-height: 640px; border: 0; }
@media (max-width: 600px) { .review-widget iframe { min-height: 900px; } }

/* ============ Link cards ============ */
.link-card {
  display: flex; align-items: center; gap: 16px; min-height: 44px;
  padding: 19px 22px;
  background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--brass);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-left-color .2s ease;
}
.link-card:hover { transform: translateY(-3px); border-left-color: var(--ink); box-shadow: var(--shadow-sm); }
.link-card__icon { flex-shrink: 0; color: var(--brass-dark); }
.link-card__icon svg { width: 24px; height: 24px; }
.link-card__body { display: flex; flex-direction: column; gap: 3px; }
.link-card__title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 19px; line-height: 1.15; color: var(--ink); letter-spacing: 0.04em; text-transform: uppercase; }
.link-card__sub { font-size: 14px; color: var(--color-text-light); line-height: 1.45; }

/* ============ Photo band (legal pages, hero-free pages) ============ */
.photo-band { max-width: 760px; margin: 44px auto 0; position: relative; }
.photo-band img { width: 100%; border: 3px solid var(--brass); }

/* ============ Info rows ============ */
.info-item { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; font-size: 15.5px; }
.info-item svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 5px; color: var(--brass-dark); }
.info-item a { color: var(--ink); font-weight: 700; text-decoration: none; }
.info-item a:hover { color: var(--brass-dark); }

/* Hours table */
.hours-table { width: 100%; border-collapse: collapse; margin-top: 18px; }
.hours-table th, .hours-table td { text-align: left; padding: 11px 4px; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.hours-table th { font-family: var(--font-body); font-weight: 600; color: var(--ink); letter-spacing: 0.04em; }
.hours-table td { color: var(--color-text-light); text-align: right; }
/* "Closed" was #9A8F84, 2.96:1 on paper. It is the single most useful word in
   an opening hours table and it was the palest thing in it. */
.hours-table tr.is-closed td { color: var(--color-text-light); font-weight: 600; }

/* ============ Footer ============ */
.footer { background: var(--ink-deep); color: var(--color-text-on-dark-muted); padding: 76px 0 36px; position: relative; overflow: hidden; }
.footer::before { content: ''; position: absolute; inset: 0; background-image: var(--lattice); background-size: 44px 44px; opacity: 0.07; }
.footer .container { position: relative; z-index: 2; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 44px; }
.footer__logo img { width: 96px; height: 96px; margin-bottom: 18px; }
.footer__brand-desc { font-size: 14.5px; margin-bottom: 18px; }
.footer__rating { display: flex; align-items: center; gap: 8px; color: var(--color-google-star); font-size: 14px; margin-bottom: 18px; }
.footer__rating svg { width: 15px; height: 15px; }
.footer__rating span { color: var(--color-text-on-dark-muted); letter-spacing: 0.04em; margin-left: 4px; }
.footer__heading {
  font-family: var(--font-display); color: var(--paper); font-size: 17px;
  letter-spacing: 0.1em; margin-bottom: 16px; padding-bottom: 10px; position: relative;
}
.footer__heading::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 44px; height: 5px;
  background-image: repeating-linear-gradient(115deg, var(--paper) 0 4px, var(--brass) 4px 8px, transparent 8px 12px);
}
.footer__links a { display: block; padding: 5px 0; color: var(--color-text-on-dark-muted); text-decoration: none; font-size: 14.5px; transition: color var(--speed-fast) var(--ease), padding-left var(--speed-fast) var(--ease); }
.footer__links a:hover { color: var(--brass); padding-left: 5px; }
.footer__contact-item { display: flex; align-items: flex-start; gap: 11px; padding: 6px 0; font-size: 14.5px; }
.footer__contact-item svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 4px; color: var(--brass); }
.footer__contact-item a { color: var(--paper); font-weight: 700; text-decoration: none; }
.footer__contact-item a:hover { color: var(--brass); }
.footer__social { display: flex; gap: 12px; }
.footer__social a {
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--ink-line); color: var(--paper);
  transition: background var(--speed-fast) var(--ease), border-color var(--speed-fast) var(--ease), transform var(--speed-fast) var(--ease);
}
.footer__social a:hover { background: var(--brass); color: var(--ink); border-color: var(--brass); transform: translateY(-3px); }
.footer__social svg { width: 19px; height: 19px; }
.footer__bottom { margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--ink-line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13.5px; }
.legal-footer { background: #000; color: var(--color-text-on-dark-muted); text-align: center; font-size: 12.5px; padding: 15px 10px; }
.legal-footer a { color: var(--color-text-on-dark-muted); text-decoration: none; margin: 0 6px; }
.legal-footer a:hover { color: var(--brass); }

/* ============ Prose ============ */
.prose { max-width: 800px; }
.prose h2 { margin-top: 0; }
.prose ul { margin: 0 0 1em 22px; }
.prose li { margin-bottom: 6px; }

/* ============ Reveal animation ============ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--speed-slow) var(--ease-out), transform var(--speed-slow) var(--ease-out); }
.reveal.visible { opacity: 1; transform: translateY(0); }
/* No-JS fallback, 2026-09-07. <html> ships with class="no-js" and a one-line inline
   script in <head> swaps it to "js" before the first paint. If that script never runs
   (blocked, broken, or a crawler that does not execute scripts) every .reveal band
   would sit at opacity 0 forever. This rule makes them simply present instead.
   _gate-no-js.js proves it on every page with scripts blocked. */
html.no-js .reveal { opacity: 1; transform: none; }
.rbadges { animation: fadeInUp 0.8s var(--ease-out) 0s both; }
.hero__title { animation: fadeInUp 0.8s var(--ease-out) 0.1s both; }
.hero__count, .hero__text { animation: fadeInUp 0.8s var(--ease-out) 0.2s both; }
.hero__trust, .hero__actions { animation: fadeInUp 0.8s var(--ease-out) 0.3s both; }
/* The staggered entrance is a desktop nicety. On a phone it was costing about a
   second of Largest Contentful Paint: animation-fill-mode both holds the hero text
   at opacity 0 until its delay has run, and Chrome does not count it as painted
   until it appears. Below 768px the hero is simply there when the page paints.
   design-system.md, Hero Entrance Stagger, 2026-09-07. */
@media (max-width: 767px) {
  .rbadges, .hero__title, .hero__count, .hero__text, .hero__trust, .hero__actions {
    animation: none;
  }
}
@keyframes fadeInUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============ Phone disclosures ============
   <details class="more" open> wraps secondary copy: a service description, the
   third and fourth reason cards, the booking steps and the what-you-can-book
   list. Every word stays in the DOM. On a phone the row is a real tappable
   control, 46px tall, in the site's brass with a chevron. */
details.more > summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 46px; padding: 10px 2px;
  cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brass-dark);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  -webkit-tap-highlight-color: transparent;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::after {
  content: ''; flex-shrink: 0;
  width: 9px; height: 9px; margin: 0 6px 4px 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--speed-fast) var(--ease);
}
details.more[open] > summary::after { transform: rotate(225deg); margin: 4px 6px 0 0; }
details.more > summary:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.band details.more > summary { color: var(--brass); border-color: var(--ink-line); }
@media (min-width: 768px) { details.more > summary { display: none; } }

/* ============ Responsive ============ */
@media (max-width: 1024px) {
  :root { --section-pad: 76px; }
  .card-grid--3, .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .trust-strip__card { grid-template-columns: repeat(2, 1fr); }
  .trust-strip__item:nth-child(2) { border-right: none; }
  .trust-strip__item:nth-child(1), .trust-strip__item:nth-child(2) { border-bottom: 1px solid var(--line); }
  .band__grid, .split { grid-template-columns: 1fr; gap: 42px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .step-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  :root { --section-pad: 58px; }
  body { font-size: 16px; }
  .container { padding: 0 20px; }
  .card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: 1fr; }
  .trust-strip { margin-top: 0; }
  .trust-strip__card { grid-template-columns: 1fr; }
  .trust-strip__item { border-right: none; border-bottom: 1px solid var(--line); }
  .trust-strip__item:last-child { border-bottom: none; }
  .check-list { columns: 1; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .btn-pair .btn, .hero__actions .btn { width: 100%; }
  .footer__bottom { flex-direction: column; text-align: center; }
  .quote-card { padding: 26px 22px 22px; }
  .band::after { font-size: 240px; bottom: -8%; }

  /* The photograph leads on a phone. Before, the first screen was the ink
     panel of text alone and the shop photo sat a full screen down. */
  .hero--home .hero__panel { order: -1; padding: 22px 0 0; }
  .hero--home .hero__content { padding: 30px 0 40px; }
  .hero__trust { gap: 6px; margin-bottom: 24px; }
  .trust-strip__item { padding: 18px 18px; }

  /* Service cards: a 4:3 photo instead of 4:5, the description behind its
     row, the service links two-up. Name and price never leave the screen. */
  .svc-card__photo { aspect-ratio: 4 / 3; }
  .svc-card__photo img { object-position: center 30%; }
  .svc-card__body { padding: 18px 18px 16px; }
  .svc-card h3 { margin-bottom: 6px; }
  .svc-card__links { margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .svc-card__links a, .svc-card__links li:last-child a { padding: 6px 0; font-size: 14.5px; border-bottom: none; }
  .svc-card__more { order: 3; margin-top: 10px; }
  .svc-card__more p { margin: 12px 0 4px; }

  .why-grid__rest { grid-template-columns: 1fr; margin-top: 14px; }
  .book-split { row-gap: 22px; }
  .book-split__more .book-split__steps { margin-top: 14px; padding-top: 0; border-top: none; }
  .book-split__more .book-split__linkhead { margin-top: 22px; padding-top: 18px; }

  .review-card { padding: 22px 20px 20px; }
  .reviews-grid__more { grid-column: auto; }
  .reviews-grid__rest { grid-template-columns: 1fr; gap: 16px; margin-top: 14px; height: auto; }
  .reviews__cta { margin-top: 30px; }
  .card-grid { margin-top: 30px; }
  .map-embed { height: 280px; }
  .cta-section { padding: 56px 0; }
  .footer { padding: 56px 0 30px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
  .footer__grid > div:first-child, .footer__grid > div:last-child { grid-column: 1 / -1; }
  .footer__bottom { margin-top: 36px; }
}
@media (max-width: 480px) {
  :root { --section-pad: 48px; }
  .stat-row { grid-template-columns: 1fr 1fr; gap: 12px; }
}