/* ============================================================
   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: Bodoni Moda for display, because the wordmark is a high-contrast serif
   and their own brand cards set body copy in Didone small caps. Archivo for
   body. Italianno for the script "the", which is the flourish sitting above
   SIGNORE in the logo.

   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 and under headings
     3. the script "the" set above uppercase display headings, logo-style
     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;
  --brass-dark: #A87C2E;
  --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: #6A6058;
  --color-text-on-dark: #F5F0E8;
  --color-text-on-dark-muted: #B3A899;

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

  --font-display: 'Bodoni Moda', 'Didot', Georgia, 'Times New Roman', serif;
  --font-body: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-script: 'Italianno', 'Snell Roundhand', cursive;

  --container-width: 1180px;
  --section-pad: 96px;
  --radius: 3px;
  --radius-lg: 4px;
  --nav-h: 78px;

  --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: 700;
  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: the script "the" plus a letterspaced label, straight off the logo */
.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: 'the';
  font-family: var(--font-script);
  font-size: 30px;
  line-height: 0.7;
  letter-spacing: 0;
  text-transform: none;
  color: var(--brass);
  margin-right: 10px;
  vertical-align: -3px;
}

/* 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;
    top: 0; left: 0; right: 0;
    z-index: 1100;
    border-bottom: 1px solid var(--brass);
  }
  .mobile-cta-bar a {
    flex: 1;
    padding: 14px 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-top: 47px; }
}

/* ============ 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); }
.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; 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); }
.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: 999; }
.nav-overlay.active { opacity: 1; visibility: visible; }

@media (max-width: 1100px) {
  .nav__hamburger { display: flex; }
  .nav__actions { display: none; }
  .nav__links {
    position: fixed; top: 0; right: -100%;
    width: 88%; max-width: 400px; height: 100vh; height: 100dvh;
    background: var(--ink-deep);
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 92px 26px 40px;
    transition: right var(--speed) var(--ease-out);
    z-index: 1101; overflow-y: auto; margin: 0;
    border-left: 3px solid var(--brass);
  }
  .nav__links.open { right: 0; }
  .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 */
.hero__badges { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 22px; }
.hero__badge {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 16px 9px 13px;
  background: rgba(250, 247, 242, 0.06);
  border: 1px solid rgba(199, 154, 70, 0.45);
}
.hero__badge-logo { width: 30px; height: 30px; flex-shrink: 0; }
.hero__badge-info { display: flex; flex-direction: column; gap: 2px; }
.hero__badge-stars { display: flex; gap: 1px; }
.hero__badge-stars svg { width: 15px; height: 15px; fill: var(--color-google-star); }
.hero__badge-text {
  font-family: var(--font-body); font-weight: 700; font-size: 12.5px;
  color: var(--paper); text-transform: uppercase; letter-spacing: 0.15em;
}

.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); }
.breadcrumbs .sep { opacity: 0.45; }

@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: 700; 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: 700; 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); }

/* 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: 700;
}
.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: 400; }
.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: the giant ghost script "the" */
.band::after {
  content: 'the';
  position: absolute;
  right: 2%; bottom: -14%;
  font-family: var(--font-script);
  font-size: clamp(280px, 34vw, 460px);
  line-height: 1;
  color: var(--brass);
  opacity: 0.055;
  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: 700; 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: 700; 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-row { grid-template-columns: minmax(0, 1fr) auto; }
  .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. */
#book { scroll-margin-top: calc(var(--nav-h) + 24px); }
.book-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 52px; align-items: start; }
.book-split__copy { max-width: 580px; }
.book-split__rail { position: sticky; top: calc(var(--nav-h) + 20px); align-self: start; }
.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: 700; 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: 700; 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; gap: 36px; }
  .book-split__copy { max-width: 640px; }
  .book-split__rail { position: static; top: 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: 700; 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: 700; 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: 700; 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; }
.hours-table tr.is-closed td { color: #9A8F84; }

/* ============ 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); }
.hero__badges { 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; }
@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; }
}

/* ============ 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__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer__bottom { flex-direction: column; text-align: center; }
  .quote-card { padding: 26px 22px 22px; }
  .band::after { font-size: 240px; bottom: -8%; }
}
@media (max-width: 480px) {
  :root { --section-pad: 48px; }
  .stat-row { grid-template-columns: 1fr 1fr; gap: 12px; }
}