/* ==========================================================================
   Triple A Muffler — Complete Auto Repair · Est. 1969
   Warm industrial flat design · Barlow Condensed + Barlow
   ========================================================================== */

:root {
  /* palette */
  --ink: #171c26;          /* near-black blue charcoal */
  --ink-soft: #232a38;
  --paper: #f7f5f0;        /* warm off-white */
  --card: #ffffff;
  --blue: #1d306e;         /* heritage navy (band, icons) */
  --blue-deep: #16255a;
  --orange: #f0564a;       /* signal red — accents on dark (matches the shop's signage) */
  --orange-btn: #c1121f;   /* CTA red — white text (6:1+) */
  --orange-btn-hover: #9e0e19;
  --gold-text: #a61420;    /* deep red for text on light grounds (4.5:1+) */
  --on-accent: #ffffff;    /* text color on accent-filled surfaces */
  --cream: #f0ead9;        /* roundel / vintage cream */
  --muted: #59606f;
  --muted-dark: #a9b0bd;   /* muted text on dark */
  --border: #e4e0d5;
  --border-dark: #333c4d;

  /* type */
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;

  /* rhythm */
  --space-section: clamp(4.5rem, 9vw, 7.5rem);
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --maxw: 72rem;
  --radius: 10px;

  --shadow-card: 0 1px 2px rgba(23, 28, 38, 0.05), 0 8px 24px -12px rgba(23, 28, 38, 0.12);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 92px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--blue); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

h2 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
h3 { font-size: 1.35rem; letter-spacing: 0.03em; }

p { text-wrap: pretty; }

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

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* inline icons */
.btn svg, .topbar svg, .callbar svg {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.8em 1.5em;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--accent {
  background: var(--orange-btn);
  color: var(--on-accent);
}
.btn--accent:hover { background: var(--orange-btn-hover); }

.btn--ghost {
  border-color: currentColor;
  color: inherit;
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.08); }
.section--dark .btn--ghost, .hero .btn--ghost { color: #fff; }

.btn--lg { font-size: 1.25rem; padding: 0.85em 1.7em; }

/* ---------- topbar ---------- */
.topbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem 2rem;
  padding: 0.55rem var(--gutter);
  background: var(--ink);
  color: var(--muted-dark);
  font-size: 0.85rem;
}
.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.topbar svg { width: 1em; height: 1em; stroke-width: 1.7; }

/* ---------- header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 245, 240, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.25s ease;
}
.header.is-stuck { box-shadow: 0 4px 20px -8px rgba(23, 28, 38, 0.18); }

.header__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0.7rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
}
.brand__logo {
  height: 52px;
  width: auto;
  flex: none;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.45rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.brand__tag {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.nav { margin-left: auto; }
.nav__menu {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  padding: 0;
}
.nav__menu a {
  display: block;
  padding: 0.6rem 0.85rem;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border-radius: 6px;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.nav__menu a:hover { color: var(--gold-text); background: rgba(240, 86, 74, 0.12); }

.nav__toggle { display: none; }

.header__call { white-space: nowrap; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(90rem 40rem at 85% -20%, rgba(30, 64, 175, 0.38), transparent 60%),
    radial-gradient(55rem 32rem at 5% 115%, rgba(240, 86, 74, 0.10), transparent 62%),
    var(--ink);
  color: #fff;
  overflow: hidden;
}
.hero__ghost {
  position: absolute;
  right: -1.5%;
  bottom: -0.16em;
  z-index: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(11rem, 26vw, 21rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(240, 234, 217, 0.09);
  pointer-events: none;
  user-select: none;
}
.hero__inner { position: relative; z-index: 1; }
.hero__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(4rem, 9vw, 7rem) var(--gutter) clamp(4.5rem, 9vw, 7rem);
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.55fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero__kicker, .kicker {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1.1rem;
}
.kicker { color: var(--gold-text); }
.kicker--light { color: var(--orange); }

.hero__title {
  font-size: clamp(2.9rem, 6.7vw, 5rem);
  margin-bottom: 1.4rem;
}
.hero__title .line { display: block; }
.hero__title em {
  font-style: normal;
  color: var(--orange);
  position: relative;
  white-space: nowrap;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 2.4rem;
}

/* trust ticker — ported from 21st.dev nexus-ui "Infinite Moving Cards" */
.hero__copy { min-width: 0; }
.ticker {
  position: relative;
  border-block: 1px solid var(--border-dark);
  padding-block: 0.7rem;
}
.ticker__viewport { overflow: hidden; max-width: 100%; }
.ticker__track { display: flex; width: max-content; }
.ticker__set {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.ticker__set li {
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-dark);
}
.ticker__set li::after {
  content: "★";
  margin: 0 1.4rem;
  color: var(--orange);
  font-size: 0.8em;
}
.ticker::before,
.ticker::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 64px;
  z-index: 1;
  pointer-events: none;
}
.ticker::before { left: 0; background: linear-gradient(90deg, var(--ink), transparent); }
.ticker::after { right: 0; background: linear-gradient(-90deg, var(--ink), transparent); }

/* static fallback: no JS or reduced motion — wraps like plain chips, no duplicate set */
.ticker:not(.ticker--live) .ticker__set[aria-hidden="true"] { display: none; }
.ticker:not(.ticker--live) .ticker__track { width: auto; }
.ticker:not(.ticker--live) .ticker__set { flex-wrap: wrap; row-gap: 0.4rem; }
.ticker:not(.ticker--live) .ticker__set li { white-space: normal; }
.ticker:not(.ticker--live)::before, .ticker:not(.ticker--live)::after { display: none; }

/* archive stack — vintage founders photo + 1971 newspaper clipping */
.hero__archive { justify-self: center; width: min(330px, 100%); }
.archive { display: grid; position: relative; }
.archive__sticker {
  position: absolute;
  z-index: 2;
  width: clamp(74px, 7.5vw, 100px);
  height: auto;
  top: -30px;
  left: -22px;
  transform: rotate(-9deg);
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.5));
}
.archive__photo {
  width: 100%;
  border: 8px solid var(--cream);
  border-radius: 3px;
  box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.75);
  transform: rotate(-2deg);
}
.archive__clip {
  width: 66%;
  justify-self: end;
  margin: -13% 2% 0 0;
  border: 6px solid #fdfbf5;
  border-radius: 2px;
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.7);
  transform: rotate(2.5deg);
}
.archive figcaption {
  margin-top: 1.2rem;
  font-size: 0.82rem;
  line-height: 1.55;
  text-align: center;
  color: var(--muted-dark);
}

/* racing stripe divider — belt slides sideways as the seam crosses the viewport */
.stripe {
  position: relative;
  height: 12px;
  overflow: hidden;
  background: var(--ink);
}
.stripe__belt {
  position: absolute;
  inset: 0;
  width: 200%;
  background: repeating-linear-gradient(-45deg, var(--orange) 0 14px, var(--ink) 14px 28px);
  will-change: transform;
}

/* ---------- stats ---------- */
.stats { background: var(--blue); color: #fff; }
.stats__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 2.4rem var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.stat { text-align: center; }
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  line-height: 1;
}
.stat__label {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.9rem;
  color: #c7d4f5;
}

/* ---------- sections ---------- */
.section { padding: var(--space-section) 0; background: var(--paper); }
/* soft top shadow on sections that slide over the one before them */
.stack-seam { box-shadow: 0 -22px 44px -24px rgba(10, 12, 18, 0.5); }
.section__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section__head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__lead { margin-top: 1.1rem; color: var(--muted); font-size: 1.1rem; }

.section--dark { background: var(--ink); color: #fff; }
.section--dark .section__lead { color: var(--muted-dark); }
.section--tint { background: #efece4; }

/* ---------- services ---------- */
.services__featured { margin-bottom: 1.5rem; }
.feature-card {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  overflow: hidden;
}
.feature-card > * { position: relative; z-index: 2; }
.feature-card__bg {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 0;
  width: 58%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
.feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, var(--ink) 42%, rgba(23, 28, 38, 0.72) 62%, rgba(23, 28, 38, 0.15) 100%);
}
.feature-card__badge {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1rem;
}
.feature-card__icon svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 1rem;
}
.feature-card h3 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: 0.7rem; }
.feature-card > p { max-width: 44rem; color: var(--muted-dark); margin-bottom: 1.25rem; }

.ticklist {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.5rem 2rem;
  margin-bottom: 1.4rem;
}
.ticklist li {
  position: relative;
  padding-left: 1.6rem;
  font-weight: 500;
}
.ticklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.7em;
  height: 0.38em;
  border-left: 2.5px solid var(--orange);
  border-bottom: 2.5px solid var(--orange);
  transform: rotate(-45deg);
}
.feature-card__note {
  font-size: 0.95rem;
  color: var(--muted-dark);
  border-top: 1px solid var(--border-dark);
  padding-top: 1.1rem;
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.svc {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem 1.5rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s var(--ease), border-color 0.25s ease;
}
.svc:hover { transform: translateY(-4px); border-color: var(--orange-btn); }
.svc__icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 0.9rem;
}
.svc h3 { margin-bottom: 0.45rem; }
.svc p { font-size: 0.95rem; color: var(--muted); }

.services__cta {
  margin-top: 2.5rem;
  font-size: 1.05rem;
  color: var(--muted);
}
.services__cta a { font-weight: 600; color: var(--gold-text); }

/* ---------- about ---------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.about__copy > p { color: var(--muted-dark); margin-top: 1.1rem; max-width: 32rem; }
.about__copy em { color: #fff; font-style: italic; }

.about__quote {
  margin-top: 2rem;
  padding: 1.5rem 1.75rem;
  background: var(--ink-soft);
  border-radius: var(--radius);
}
.about__quote p {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.25;
}
.about__quote cite {
  display: block;
  margin-top: 0.75rem;
  font-style: normal;
  font-size: 0.9rem;
  color: var(--muted-dark);
}

.about__values {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.value {
  background: var(--ink-soft);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  padding: 1.4rem 1.3rem;
}
.value__icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 0.8rem;
}
.value h3 { font-size: 1.15rem; margin-bottom: 0.35rem; }
.value p { font-size: 0.92rem; color: var(--muted-dark); }

/* ---------- team ---------- */
.team {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
}
.member {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.25rem;
  box-shadow: var(--shadow-card);
  text-align: center;
}
.member__photo {
  width: 100%;
  aspect-ratio: 236 / 300;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-bottom: 1rem;
}
.member h3 { font-size: 1.2rem; }
.member__role {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0.3rem 0 0.6rem;
}
.member p:last-child { font-size: 0.9rem; color: var(--muted); }

/* ---------- C.A.R. family ---------- */
.car {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.car__copy > p { margin-top: 1.1rem; color: var(--muted); max-width: 34rem; }

.car__perk {
  margin-top: 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.3rem 1.5rem;
  box-shadow: var(--shadow-card);
}
.car__perk h3 { font-size: 1.2rem; margin-bottom: 0.4rem; }
.car__perk p { font-size: 0.98rem; color: var(--muted); }
.car__perk strong { color: var(--ink); }
.car__perk a { color: var(--gold-text); font-weight: 600; }
.car__perk-photo {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.testimonial {
  position: sticky;
  top: 6.5rem;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.5rem);
}
.testimonial__photo {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border-dark);
  margin-bottom: 1.5rem;
}
.testimonial__mark {
  width: 40px;
  height: 40px;
  fill: var(--orange);
  margin-bottom: 1.1rem;
}
.testimonial blockquote p {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-weight: 500;
  line-height: 1.25;
}
.testimonial__more {
  margin-top: 1.1rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted-dark);
}
.testimonial figcaption {
  margin-top: 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.testimonial figcaption div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.testimonial__avatar {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-dark);
}
.testimonial figcaption span { font-size: 0.88rem; color: var(--muted-dark); }
.testimonial figcaption a { color: var(--orange); }
.testimonial__extra {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border-dark);
  color: var(--orange);
  font-weight: 600;
}

/* ---------- specials / coupons ---------- */
.section__head--specials {
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
}
.section__head--specials > div { max-width: 46rem; }
.specials__bobby { flex: none; text-align: center; }
.specials__bobby img {
  width: 138px;
  height: 138px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 62% 16%;
  border: 4px solid var(--orange-btn);
  box-shadow: var(--shadow-card);
  margin-inline: auto;
}
.specials__bobby figcaption {
  margin-top: 0.65rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.coupons {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.coupon {
  position: relative;
  background: var(--card);
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 1.6rem 1.4rem 1.4rem;
  transition: border-color 0.2s ease, transform 0.25s var(--ease);
}
.coupon:hover { border-color: var(--orange-btn); transform: translateY(-4px); }
.coupon__punch {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px dashed var(--border);
}
.coupon h3 { margin-bottom: 0.4rem; }
.coupon p { font-size: 0.92rem; color: var(--muted); margin-bottom: 0.9rem; }
.coupon__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 40px;
  padding: 0.45rem 0.9rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold-text);
  border: 1.5px solid var(--orange-btn);
  border-radius: 6px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.coupon__btn svg {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.coupon__btn:hover {
  background: var(--orange-btn);
  color: var(--on-accent);
}

/* ---------- contact ---------- */
.section--contact {
  background:
    radial-gradient(70rem 35rem at 15% 120%, rgba(30, 64, 175, 0.35), transparent 60%),
    var(--ink);
}
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.contact__address {
  font-style: normal;
  font-size: 1.15rem;
  line-height: 1.55;
  margin: 1.4rem 0 1.8rem;
  color: var(--muted-dark);
}
.contact__address strong { color: #fff; font-size: 1.25rem; }
.contact__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.contact__note { margin-top: 1.6rem; font-size: 0.95rem; color: var(--muted-dark); max-width: 30rem; }

.contact__hours {
  background: var(--ink-soft);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  padding: 1.75rem;
}
.contact__building {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border-dark);
  margin-bottom: 1.5rem;
}
.contact__hours h3 { margin-bottom: 1rem; color: var(--orange); }
.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td { padding: 0.7rem 0; text-align: left; border-bottom: 1px solid var(--border-dark); }
.hours th { font-weight: 600; color: #fff; }
.hours td { text-align: right; color: var(--muted-dark); font-variant-numeric: tabular-nums; }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: none; }
.contact__walkin { margin-top: 1.1rem; font-size: 0.92rem; color: var(--muted-dark); }

/* ---------- footer ---------- */
.footer {
  background: #10141c;
  color: var(--muted-dark);
  border-top: 4px solid var(--orange-btn);
}
.footer__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 2.5rem var(--gutter) 5.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.footer__logo {
  height: 68px;
  width: auto;
  align-self: flex-start;
  margin-bottom: 0.25rem;
}
.footer__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  text-transform: uppercase;
  color: #fff;
}
.footer__brand span { font-weight: 500; font-size: 0.95rem; color: var(--muted-dark); letter-spacing: 0.06em; }
.footer nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.footer nav a {
  color: var(--muted-dark);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.98rem;
  padding: 0.4rem 0;
}
.footer nav a:hover { color: var(--orange); }
.footer__legal { font-size: 0.85rem; }

/* ---------- mobile call bar ---------- */
.callbar {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  background: var(--ink);
  border-top: 1px solid var(--border-dark);
  padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
  gap: 0.6rem;
}
.callbar a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  border-radius: 8px;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.callbar__call { background: var(--orange-btn); color: var(--on-accent); }
.callbar__map { border: 2px solid var(--border-dark); color: #fff; }

/* ---------- reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .team { grid-template-columns: repeat(3, 1fr); }
  .coupons { grid-template-columns: repeat(2, 1fr); }
  .header__call { display: none; }
}

@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__archive { order: 1; justify-self: start; width: min(250px, 80%); }
  .archive figcaption { text-align: left; }
  .archive__sticker { width: 64px; top: -18px; left: -6px; }
  .stats__inner { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; }
  .about, .car, .contact { grid-template-columns: 1fr; }
  .testimonial { position: static; }
  .topbar { justify-content: center; text-align: center; }
  .topbar__hours { display: none; }
}

@media (max-width: 768px) {
  /* mobile nav */
  .nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    min-height: 44px;
    padding: 0.5rem 0.9rem;
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
  }
  .nav__toggle-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 18px;
  }
  .nav__toggle-box span {
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .nav.is-open .nav__toggle-box span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav.is-open .nav__toggle-box span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__toggle-box span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .nav { margin-left: auto; }
  .nav__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 16px 30px -18px rgba(23, 28, 38, 0.3);
    padding: 0.5rem var(--gutter) 1rem;
  }
  .nav.is-open .nav__menu { display: flex; }
  .nav__menu a { padding: 0.85rem 0.5rem; border-bottom: 1px solid var(--border); border-radius: 0; }
  .nav__menu li:last-child a { border-bottom: none; }

  .callbar { display: flex; }
  .footer__inner { padding-bottom: 7.5rem; }

  /* compact service rows — icon beside title, tighter rhythm */
  .services__grid { grid-template-columns: 1fr; gap: 0.75rem; }
  .svc {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.9rem;
    align-items: center;
    padding: 1rem 1.1rem;
  }
  .svc:hover { transform: none; }
  .svc__icon svg { width: 26px; height: 26px; margin-bottom: 0; }
  .svc h3 { font-size: 1.25rem; }
  .svc p { grid-column: 2; margin-top: 0.2rem; }

  /* crew: swipeable snap carousel, next card peeking */
  .team {
    display: flex;
    gap: 0.9rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    padding-bottom: 0.6rem;
    scrollbar-width: none;
  }
  .team::-webkit-scrollbar { display: none; }
  .member { flex: 0 0 74%; scroll-snap-align: center; }

  /* header: tighter lockup so the wordmark clears the menu button */
  .header__inner { gap: 0.75rem; }
  .brand__name { font-size: 1.2rem; }
  .brand__tag { font-size: 0.6rem; letter-spacing: 0.16em; }
  .nav__toggle { padding: 0.45rem 0.65rem; font-size: 0.9rem; }
  .feature-card__bg, .feature-card::after { display: none; }
  .section__head--specials { flex-direction: column-reverse; align-items: flex-start; }
  .brand__logo { height: 44px; }
}

@media (max-width: 480px) {
  .coupons { grid-template-columns: 1fr; }
  .stats__inner { grid-template-columns: repeat(2, 1fr); }
  .btn--lg { width: 100%; justify-content: center; }
  .hero__actions { flex-direction: column; }
}


/* =====================================================================
   HERO v2 — a real photograph of the man who answers the phone, treated
   toward the newsprint palette so the 1971 clipping sits on it naturally.
   Nothing here is animated in: the headline, the number and the proof
   paint on first frame (conversion checklist §1.1).
   ===================================================================== */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 72% 18%;
  filter: grayscale(0.72) contrast(1.06) brightness(0.62);
  z-index: 0;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(11,14,23,0.86) 0%, rgba(11,14,23,0.55) 42%, rgba(11,14,23,0.94) 100%),
    linear-gradient(90deg, rgba(11,14,23,0.92) 0%, rgba(11,14,23,0.35) 62%, rgba(11,14,23,0.15) 100%);
}
/* the ghost is DECORATIVE and must stay out of flow — making it position:
   relative here cost 336px of layout and pushed the CTA off the landing screen */
.hero .hero__inner { position: relative; z-index: 2; }
.hero .hero__ghost { position: absolute; z-index: 1; }
.hero__sub {
  color: rgba(255,255,255,0.82); font-size: 1.02rem; line-height: 1.5;
  max-width: 34ch; margin: 0.9rem 0 1.4rem;
}
.hero__proof {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  margin: 1.4rem 0 0; color: rgba(255,255,255,0.9); font-size: 0.98rem;
}
.hero__proof strong { color: #fff; }
.hero__stars { color: var(--orange); letter-spacing: 0.08em; font-size: 0.95rem; }
.hero__archive .archive { margin: 0; }
.hero__archive figcaption { color: rgba(255,255,255,0.66); }

@media (max-width: 768px) {
  .hero__bg { object-position: 64% 12%; }
  .hero__sub { font-size: 0.98rem; margin: 0.75rem 0 1.15rem; }
  /* the clipping is the supporting artifact on mobile, not the headline act */
  .hero__archive { margin-top: 1.6rem; }
  .hero__archive figcaption { font-size: 0.82rem; }
}

/* ---------------------------------------------------------------------
   THE TWO FREE CHECKS — the shop's own long-standing offers. Two cards,
   not four, because only two are real. A single quiet lift on hover:
   the taste rule is that an interaction must actually respond, and that
   slower + cleaner reads more premium than a snappy one.
   --------------------------------------------------------------------- */
.offers { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); max-width: 760px; }
.offer { position: relative; background: var(--panel, #12161f); border: 1px solid var(--border-dark);
  border-radius: 14px; padding: 1.6rem 1.5rem 1.4rem;
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease); }
.offer:hover, .offer:focus-within { transform: translateY(-4px); border-color: var(--orange);
  box-shadow: 0 26px 50px -30px rgba(0,0,0,0.8); }
.offer__free { display: inline-block; font-family: var(--font-display); font-weight: 700;
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--orange); border: 1px solid var(--orange); border-radius: 999px;
  padding: 0.28rem 0.7rem; margin-bottom: 0.9rem; }
.offer h3 { margin: 0 0 0.45rem; font-size: 1.35rem; }
.offer p { margin: 0 0 1.1rem; color: var(--muted-dark); font-size: 0.97rem; line-height: 1.55; }
.offer__cta { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px;
  color: #fff; font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--orange);
  transition: gap 0.35s var(--ease); }
.offer__cta::after { content: "\2192"; transition: transform 0.35s var(--ease); }
.offer:hover .offer__cta::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .offer, .offer__cta, .offer__cta::after { transition: none; }
}
.contact__book { display: inline-flex; align-items: center; min-height: 44px; color: #fff;
  font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--orange); }
.contact__book:hover { color: var(--orange); }


/* HERO v2 · mobile order — the headline and the number lead; the 1971
   clipping is the proof that follows, not the thing that delays them. */
@media (max-width: 768px) {
  .hero__copy { order: 0; }
  .hero__archive { order: 1; margin-top: 1.4rem; }
  .hero__ghost { font-size: clamp(6rem, 34vw, 11rem); opacity: 0.07; top: auto; bottom: 4%; }
}
/* let the photograph read through the top of the scrim */
.hero__scrim {
  background:
    linear-gradient(180deg, rgba(11,14,23,0.55) 0%, rgba(11,14,23,0.38) 34%, rgba(11,14,23,0.93) 100%),
    linear-gradient(90deg, rgba(11,14,23,0.9) 0%, rgba(11,14,23,0.42) 58%, rgba(11,14,23,0.12) 100%);
}
.hero__bg { filter: grayscale(0.68) contrast(1.05) brightness(0.72); }

/* HERO v2 · mobile vertical rhythm — the kicker and headline start near the
   top of the viewport instead of floating in the middle of a tall hero, so
   the call button lands above the fold at 390x844. */
@media (max-width: 768px) {
  .hero__inner { align-items: start; padding-top: 1.6rem; padding-bottom: 2.2rem; }
  .hero { min-height: 0; }
  .hero__title { font-size: clamp(2.5rem, 11vw, 3.4rem); }
  .hero__sub { margin: 0.7rem 0 1rem; }
  .hero__actions { gap: 0.6rem; }
}

/* ---------------------------------------------------------------------
   PROOF — one real customer, one real rating. This replaced a 250-word
   program section: the quote was the only part doing sales work, so it
   became the section instead of its footnote.
   --------------------------------------------------------------------- */
.section--proof .section__inner { display: grid; gap: 2rem;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; }
.quote { margin: 0; }
.quote blockquote { margin: 0; }
.quote blockquote p { font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem); line-height: 1.34; color: #fff; margin: 0 0 1.3rem; }
.quote figcaption { display: flex; align-items: center; gap: 0.85rem; }
.quote figcaption img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.quote figcaption strong { display: block; color: #fff; font-size: 1rem; }
.quote figcaption span { color: var(--muted-dark); font-size: 0.9rem; }
.proof__aside { border-left: 2px solid var(--orange); padding-left: 1.4rem; }
.proof__stat { display: flex; align-items: baseline; gap: 0.6rem; margin: 0; }
.proof__stat strong { font-family: var(--font-display); font-size: 3rem; line-height: 1; color: #fff; }
.proof__stat span { color: var(--orange); letter-spacing: 0.06em; }
.proof__count { margin: 0.2rem 0 1.2rem; color: var(--muted-dark); font-size: 0.95rem; }
.proof__note { color: var(--muted-dark); font-size: 0.97rem; line-height: 1.55; margin: 0 0 1rem; }
@media (max-width: 860px) {
  .section--proof .section__inner { grid-template-columns: 1fr; }
  .proof__aside { border-left: 0; border-top: 2px solid var(--orange); padding: 1.2rem 0 0; }
}

/* ---------------------------------------------------------------------
   BOOKING — the shared widget ships light. Re-point its tokens at this
   shop's dark palette so it reads as part of the site, not a component
   pasted in from somewhere else.
   --------------------------------------------------------------------- */
/* The booking section is a LIGHT band, so the widget takes the site's light
   palette. (It was themed dark first, which made the step labels, month and
   dates white-on-cream and unreadable — caught on the live page.) */
#book, #bk {
  --bk-ink: #171c26;
  --bk-ink-2: #4a5261;
  --bk-ink-3: #6d7585;
  --bk-paper: #ffffff;
  --bk-sunk: #f2efe8;
  --bk-edge: #ddd8cc;
  --bk-accent: #c1121f;
  --bk-accent-in: #ffffff;
  --bk-ok: #2f7d43;
  --bk-ok-bg: rgba(47, 125, 67, 0.10);
}
#bk { color: var(--ink); }

/* contrast repairs (caught at 390 in review): the proof band is dark, so its
   type stays white; the offer cards are dark on a light band, so THEIR type
   must be light rather than inheriting the section's dark ink. */
.section--proof { background: var(--ink); }
.section--proof .quote blockquote p,
.section--proof .quote figcaption strong,
.section--proof .proof__stat strong { color: #fff; }
.section--proof .quote figcaption span,
.section--proof .proof__count,
.section--proof .proof__note { color: var(--muted-dark); }
.offer h3 { color: #fff; }
.offer p { color: var(--muted-dark); }
.offer__cta { color: #fff; }

/* keep the 1971 clipping clear of the fixed assistant launcher on desktop */
@media (min-width: 769px) {
  .hero__archive { margin-bottom: 4.5rem; }
}

/* live open/closed chip + clearance so the fixed call bar never covers the
   Google rating (measured overlap at 375px and 390px in review) */
.hero__status { display: inline-flex; align-items: center; gap: 0.5rem; margin: 1.1rem 0 0;
  font-size: 0.95rem; color: #fff; }
.hero__status a { color: var(--orange); }
.hero__status .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted-dark); flex: none; }
.hero__status .dot--on { background: #6ec07a; box-shadow: 0 0 0 4px rgba(110, 192, 122, 0.18); }
@media (max-width: 767px) {
  .hero__inner { padding-bottom: calc(78px + env(safe-area-inset-bottom) + 1rem); }
}
.about__line { color: var(--muted-dark); font-size: 1.02rem; line-height: 1.6; max-width: 56ch; margin: 1.4rem 0 0; }

/* the right column of .about held four cards; it now holds the real counter
   photograph so the grid has weight instead of an empty black half */
.about__shot { margin: 0; }
.about__shot img { width: 100%; height: auto; border-radius: 12px; display: block;
  border: 1px solid var(--border-dark); }
.about__shot figcaption { margin-top: 1rem; color: var(--muted-dark);
  font-size: 0.97rem; line-height: 1.6; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } }

/* Stacked sections need to FILL the screen while stuck, otherwise the section
   beneath shows through the lower half (the specials bug). Desktop only —
   phones scroll normally so nothing stands between a visitor and the call. */
@media (min-width: 992px) {
  /* min-height alone stops the bleed-through. Centring with flex was CLIPPING
     any section taller than the viewport — that is why the lower half of the
     booking calendar (and its submit button) was unreachable on desktop. */
  body.has-stack .is-stacked { min-height: 100vh; }
  body.has-stack .is-stacked > .section__inner { width: 100%; }
  /* a section taller than the screen must never be pinned mid-content */
  body.has-stack #book { min-height: 0; }
}

/* ---------------------------------------------------------------------
   DESKTOP HERO — everything the visitor needs must fit on the landing
   screen: kicker, headline, sub, open/closed, rating, and BOTH buttons,
   with the header allowed for. Sized off the viewport so it holds on
   laptop and full-screen alike.
   --------------------------------------------------------------------- */
@media (min-width: 769px) {
  .hero { min-height: 100vh; }
  .hero__inner { min-height: 100vh; padding-top: 8.5rem; padding-bottom: 3rem;
    align-content: center; }
  .hero__title { font-size: clamp(2.6rem, 5.2vw, 4.4rem); line-height: 1.02; }
  .hero__sub { font-size: clamp(0.98rem, 1.15vw, 1.1rem); margin: 0.85rem 0 1.1rem; }
  .hero__status { margin-top: 0.9rem; }
  .hero__proof { margin: 0.8rem 0 1.4rem; }
}
/* short laptops: shrink type rather than push the buttons off the screen */
@media (min-width: 769px) and (max-height: 860px) {
  .hero__title { font-size: clamp(2.2rem, 4.2vw, 3.3rem); }
  .hero__inner { padding-top: 7rem; }
  .hero__sub { margin: 0.7rem 0 0.9rem; }
}

/* The consent bar must never sit on the primary action. It clears the call
   bar on mobile and sits opposite the launcher on desktop. */
.consent-card { bottom: calc(1.1rem + env(safe-area-inset-bottom)); }
/* Desktop: the hero CTA lives bottom-LEFT, so the consent bar moves to the
   right rail and stacks above the assistant launcher. It must never sit on
   the call button. */
@media (min-width: 769px) {
  .consent-card { left: auto; right: 1.1rem; bottom: 4.6rem; max-width: min(460px, 42vw); }
}
@media (max-width: 768px) {
  .consent-card { bottom: calc(5.4rem + env(safe-area-inset-bottom)); }
}

/* =====================================================================
   HERO v3 — one screen, pinned, copy hard to the left.
   The portrait is the right two-thirds; the type sits in a column on the
   left edge rather than floating in the middle of a centred grid. The
   1971 clipping is a corner artifact, larger and clear of his face.
   ===================================================================== */
@media (min-width: 769px) {
  .hero { height: 100vh; min-height: 100vh; max-height: 100vh; overflow: hidden; }
  .hero__inner {
    display: block;                 /* was a 2-col grid centring the copy */
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0 clamp(2rem, 6vw, 6rem);
    display: flex; align-items: center;
  }
  .hero__copy {
    width: min(52ch, 46vw);
    margin: 0;                      /* hard left, not centred */
  }
  .hero__title { font-size: clamp(2.6rem, 4.6vw, 4.2rem); line-height: 1.02; margin-bottom: 1.1rem; }
  .hero__sub { max-width: 40ch; }

  /* the clipping: bottom-left corner, under the copy, away from the face */
  /* over his shoulder — dark, empty, and clear of both the face and the CTA */
  .hero__clip {
    position: absolute; left: 56%; bottom: 3rem; z-index: 3;
    width: clamp(250px, 23vw, 360px); margin: 0;
    transform: rotate(-2deg);
    filter: drop-shadow(0 20px 34px rgba(0,0,0,0.62));
  }
  .hero__clip img { width: 100%; height: auto; display: block; border-radius: 3px; }
  .hero__clip figcaption { margin-top: 0.5rem; font-size: 0.78rem; letter-spacing: 0.04em;
    color: rgba(255,255,255,0.6); }
  /* short screens: the clipping steps aside rather than fighting the buttons */
  @media (max-height: 820px) { .hero__clip { display: none; } }
}

/* mobile: clipping sits under the copy, full width of the column */
@media (max-width: 768px) {
  .hero__clip { position: static; width: min(280px, 76%); margin: 1.6rem 0 0;
    transform: rotate(-1.2deg); filter: drop-shadow(0 12px 22px rgba(0,0,0,0.5)); }
  .hero__clip img { width: 100%; height: auto; display: block; border-radius: 3px; }
  .hero__clip figcaption { margin-top: 0.45rem; font-size: 0.76rem; color: rgba(255,255,255,0.6); }
}

/* =====================================================================
   ABOUT — the counter photograph IS the section. The people sit right,
   the left fades to ink so the copy has a ground to sit on. Replaces the
   two-column grid that was leaving an empty half.
   ===================================================================== */
.section--about { position: relative; overflow: hidden; isolation: isolate; }
.about__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 38%;
  filter: grayscale(0.25) brightness(0.92);
  z-index: 0;
}
.about__fade {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, var(--ink) 0%, var(--ink) 26%, rgba(23,28,38,0.92) 40%,
                    rgba(23,28,38,0.55) 58%, rgba(23,28,38,0.15) 78%, rgba(23,28,38,0.35) 100%),
    linear-gradient(180deg, rgba(23,28,38,0.5) 0%, rgba(23,28,38,0) 30%, rgba(23,28,38,0.6) 100%);
}
.section--about .section__inner { position: relative; z-index: 2; }
.section--about .about { display: block; }
.section--about .about__copy { width: min(56ch, 48%); }
.section--about .about__line { margin-top: 1.6rem; }
@media (max-width: 900px) {
  .about__bg { object-position: 66% 38%; }
  .about__fade {
    background:
      linear-gradient(180deg, rgba(23,28,38,0.55) 0%, rgba(23,28,38,0.86) 42%, var(--ink) 78%),
      linear-gradient(90deg, rgba(23,28,38,0.9) 0%, rgba(23,28,38,0.5) 100%);
  }
  .section--about .about__copy { width: 100%; }
}

/* TEAM — bigger cards. These are the real people and they carry the trust. */
.team { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; gap: clamp(1.4rem, 3vw, 2.2rem) !important; }
.member__photo { width: 100% !important; height: auto !important; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; }
.member h3 { font-size: clamp(1.25rem, 1.7vw, 1.6rem); margin-top: 1rem; }
.member__role { font-size: 0.95rem; letter-spacing: 0.06em; }
.member p:last-child { font-size: 1rem; line-height: 1.6; }

/* Booking is how the agreement gets fulfilled, so it leads everywhere the
   visitor can act: header, hero, mobile dock. Calling stays one tap away. */
.header__cta { display: flex; align-items: center; gap: 0.6rem; }
.header__book { white-space: nowrap; }
.header__call { border: 1px solid var(--border); color: var(--ink); background: transparent;
  white-space: nowrap; }
.header__call:hover { border-color: var(--orange-btn); color: var(--orange-btn); }
.header__call svg { width: 18px; height: 18px; }
@media (max-width: 1100px) { .header__call { display: none; } }
.callbar__book { flex: 1; display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; border: 2px solid var(--orange-btn); color: #fff; font-family: var(--font-display);
  font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  border-radius: 8px; }

/* ---------------------------------------------------------------------
   THE FREE CHECKS + the interactive that argues for them. Two columns:
   the offers on the left, the "what waiting costs" instrument on the
   right, so the section is a case rather than two boxes and empty space.
   --------------------------------------------------------------------- */
.checks { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.checks .offers { grid-template-columns: 1fr; max-width: none; }

.wait { margin: 0; background: var(--ink); border: 1px solid var(--border-dark);
  border-radius: 16px; padding: clamp(1.5rem, 3vw, 2.2rem); color: #fff; }
.wait__head .kicker { color: var(--orange); }
.wait__title { font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin: 0 0 0.6rem; color: #fff; }
.wait__lead { color: var(--muted-dark); font-size: 0.98rem; line-height: 1.55; margin: 0 0 1.6rem; }

.wait__bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.09); overflow: hidden; }
.wait__fill { display: block; height: 100%; width: 25%; border-radius: 999px;
  background: linear-gradient(90deg, #6ec07a, #e0b341 55%, var(--orange) 100%);
  transition: width 0.55s cubic-bezier(.22,.61,.36,1); }
.wait__parts { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem; padding: 0; margin: 0.9rem 0 1.8rem; }
.wait__parts li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.86rem;
  color: rgba(255,255,255,0.34); transition: color 0.45s ease; }
.wait__parts li span { width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.18); transition: background 0.45s ease, box-shadow 0.45s ease; }
.wait__parts li.is-on { color: #fff; }
.wait__parts li.is-on span { background: var(--orange); box-shadow: 0 0 0 4px rgba(240,86,74,0.16); }

.wait__control { display: block; margin-bottom: 1.2rem; }
.wait__label { display: block; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted-dark); margin-bottom: 0.7rem; }
.wait__control input[type="range"] { width: 100%; accent-color: var(--orange-btn); height: 44px; }
.wait__ticks { display: grid; grid-template-columns: repeat(4, 1fr); font-size: 0.76rem;
  color: var(--muted-dark); }
.wait__ticks i { font-style: normal; }
.wait__ticks i:nth-child(1) { text-align: left; }
.wait__ticks i:nth-child(4) { text-align: right; }

.wait__out { min-height: 5.2em; font-size: 1rem; line-height: 1.6; color: rgba(255,255,255,0.86);
  margin: 0 0 1.4rem; }
.wait__out b { color: #fff; }
.wait__cta { width: 100%; justify-content: center; }

@media (max-width: 900px) {
  .checks { grid-template-columns: 1fr; }
  .wait__parts { grid-template-columns: repeat(2, 1fr); row-gap: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wait__fill, .wait__parts li, .wait__parts li span { transition: none; }
}

/* Header: adding the booking button squeezed the nav into the wordmark.
   Give the brand a fixed footprint, let the nav take the slack, and drop
   the redundant phone button earlier — the number is still one tap away
   in the hero and the mobile dock. */
@media (min-width: 993px) {
  .header__inner { gap: clamp(0.8rem, 2vw, 1.6rem); flex-wrap: nowrap; }
  .header__inner > .brand, .header__inner > a:first-child { flex: 0 0 auto; }
  .header__inner > .nav { flex: 1 1 auto; min-width: 0; }
  .nav__menu { flex-wrap: nowrap; }
  .nav__menu a { white-space: nowrap; }
  .header__cta { flex: 0 0 auto; }
}
@media (max-width: 1280px) { .header__call { display: none; } }

/* Mobile: the sticky dock already leads with "Hold a time", so the header
   button is redundant and was overflowing into the wordmark. */
@media (max-width: 992px) {
  .header__cta { display: none; }
}

/* =====================================================================
   v6 — Mason's list
   ===================================================================== */

/* 7 · address + hours live in the white header row now, so the hero starts
   at the top of the screen and fits the landing view exactly. */
.header__meta { order: 3; display: flex; flex-direction: column; gap: 0.15rem;
  margin: 0; font-size: 0.78rem; line-height: 1.35; color: var(--muted); text-align: right; }
.header__meta-line { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.header__meta svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
@media (min-width: 993px) {
  .header__inner > .brand { order: 1; }
  .header__inner > .nav { order: 2; }
  .header__cta { order: 4; }
}
@media (max-width: 1400px) { .header__meta { display: none; } }

/* 5 · the nav was colliding with the CTA — let it shrink before it clips */
@media (min-width: 993px) {
  .nav__menu { gap: clamp(0.7rem, 1.4vw, 1.6rem); }
  .nav__menu a { font-size: clamp(0.82rem, 0.95vw, 0.95rem); }
  .header__book { padding-inline: clamp(0.9rem, 1.6vw, 1.4rem); font-size: 0.88rem; }
}

/* 1 · the review/proof section sits in the middle of its screen, not the top */
@media (min-width: 992px) {
  body.has-stack #proof { display: flex; align-items: center; }
  body.has-stack #proof > .section__inner { width: 100%; }
}

/* 2 · all five of the crew on one line */
.team--five { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
@media (max-width: 1180px) { .team--five { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 720px)  { .team--five { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* 3 · nudge the clipping left so it clears the 1969 watermark */
@media (min-width: 769px) { .hero__clip { left: 50%; } }

/* 4 · shift the counter photo so Bobby is not cut off by the copy and both
   people read. The fade also starts later so his face is not swallowed. */
.about__bg { object-position: 46% 34% !important; }
.about__fade {
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(23,28,38,0.96) 18%, rgba(23,28,38,0.74) 33%,
                    rgba(23,28,38,0.28) 52%, rgba(23,28,38,0.08) 72%, rgba(23,28,38,0.3) 100%),
    linear-gradient(180deg, rgba(23,28,38,0.45) 0%, rgba(23,28,38,0) 34%, rgba(23,28,38,0.55) 100%);
}
@media (max-width: 900px) { .about__bg { object-position: 52% 34% !important; } }

/* 6 · booking: copy left with a photograph under it, calendar right, both
   centred on the screen so the whole flow is visible without scrolling. */
.section--book .book { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(1.8rem, 4vw, 3.4rem); align-items: center; }
.book__shot { margin: 1.8rem 0 0; }
.book__shot img { width: 100%; height: auto; display: block; border-radius: 12px;
  border: 1px solid var(--border); }
.book__shot figcaption { margin-top: 0.7rem; font-size: 0.88rem; color: var(--muted); }
.book__panel { background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: clamp(1.1rem, 2.2vw, 1.7rem); box-shadow: 0 24px 60px -40px rgba(0,0,0,0.35); }
@media (min-width: 992px) {
  .section--book { display: flex; align-items: center; min-height: 100vh; }
  .section--book > .section__inner { width: 100%; }
  /* keep the whole booking flow on one screen */
  .book__panel { max-height: calc(100vh - 12rem); overflow-y: auto; }
}
@media (max-width: 991px) {
  .section--book .book { grid-template-columns: 1fr; }
  .book__shot { display: none; }
}

/* Header balance: the number already appears in the hero, the mobile dock and
   the contact section, so the header keeps ONE action (booking) and gives the
   room back to the address/hours line Mason wants in the white bar. */
.header__call { display: none !important; }
@media (min-width: 993px) {
  .header__inner { gap: clamp(0.6rem, 1.4vw, 1.2rem); }
  .header__meta { display: flex; font-size: 0.74rem; }
  .nav__menu { gap: clamp(0.55rem, 1.1vw, 1.1rem); }
  .nav__menu a { font-size: clamp(0.78rem, 0.9vw, 0.9rem); }
}
@media (max-width: 1240px) { .header__meta { display: none; } }

/* one compact meta line; the nav gets priority for the space it needs */
.header__meta { flex-direction: row; align-items: center; gap: 0.35rem; white-space: nowrap;
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 993px) { .header__inner > .nav { flex: 0 0 auto; } }
@media (max-width: 1460px) { .header__meta { display: none; } }

/* both faces in frame: the source is a wide banner, so the crop window is
   ~57% of its width — centring it there fits Bobby AND the customer. */
.about__bg { object-position: 57% 36% !important; }
@media (max-width: 900px) { .about__bg { object-position: 57% 34% !important; } }

/* The counter photo is a 3:1 banner. Stretching it to cover a full-height
   section cropped one of the two people out every time. Instead it sits at
   its natural ratio on the right half, vertically centred, with the ink
   fading across it toward the copy — both faces stay in frame. */
@media (min-width: 901px) {
  .about__bg {
    inset: auto 0 auto auto;
    width: 68%; height: auto;
    top: 50%; transform: translateY(-50%);
    object-fit: contain; object-position: center !important;
    filter: grayscale(0.2) brightness(0.95);
  }
  .about__fade {
    background:
      linear-gradient(90deg, var(--ink) 0%, var(--ink) 24%, rgba(23,28,38,0.9) 36%,
                      rgba(23,28,38,0.35) 52%, rgba(23,28,38,0.05) 70%, rgba(23,28,38,0) 100%),
      linear-gradient(180deg, var(--ink) 0%, rgba(23,28,38,0.1) 26%, rgba(23,28,38,0.1) 74%, var(--ink) 100%);
  }
}
/* the meta line only appears when there is genuinely room for it */
@media (max-width: 1600px) { .header__meta { display: none !important; } }

/* Compact the calendar inside the booking panel so the entire flow — service,
   month, days, note and the button — is visible on one screen without
   scrolling the panel. Taller screens get the roomier default back. */
@media (min-width: 992px) {
  #bk .bk-day { min-height: 40px; font-size: 0.92rem; }
  #bk .bk-grid { gap: 4px; }
  #bk .bk-month { font-size: 1rem; }
  #bk .bk-head { margin-bottom: 0.5rem; }
  #bk .bk-note { font-size: 0.86rem; line-height: 1.45; margin: 0.7rem 0; }
  #bk .bk-field { margin-bottom: 0.7rem; }
  #bk .bk-step { font-size: 0.82rem; margin-bottom: 0.7rem; }
  #bk .bk-slots { gap: 6px; }
  #bk .bk-slot { min-height: 40px; font-size: 0.9rem; }
  .book__panel { max-height: none; overflow: visible; }
}
@media (min-width: 992px) and (min-height: 950px) {
  #bk .bk-day { min-height: 46px; }
}
/* clear the fixed header above the booking panel */
@media (min-width: 992px) { .section--book { padding-top: 7rem; } }

/* Tap targets: every link a thumb has to hit clears 44px on a phone.
   (Footer nav links, the inline hero "hold a time", and the services
   call link were all 20-38px.) */
@media (max-width: 992px) {
  .footer nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.35rem; }
  .hero__status a, .services__cta a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* --- blur reveal ---------------------------------------------------- */
.br-c { display: inline-block; white-space: pre; }
.blur-reveal.is-revealing .br-c {
  animation: brIn 0.62s cubic-bezier(.2,.65,.3,1) backwards;
}
@keyframes brIn {
  from { filter: blur(11px); opacity: 0; transform: translateY(0.14em); }
  to   { filter: blur(0);    opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .blur-reveal.is-revealing .br-c { animation: none; }
}

/* --- FIND US: a real map preview, with directions opening Apple Maps --- */
.section--map .map { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.6rem, 4vw, 3rem); align-items: center; }
.map__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.5rem 0 1rem; }
.map__hours { color: var(--muted); font-size: 0.95rem; margin: 0; }
.map__frame { position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--border); box-shadow: 0 26px 60px -44px rgba(0,0,0,0.45); background: var(--card); }
.map__frame iframe { width: 100%; height: clamp(300px, 42vh, 440px); border: 0; display: block;
  filter: saturate(0.86) contrast(1.02); }
.map__open { position: absolute; right: 0.9rem; bottom: 0.9rem; z-index: 2;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem;
  background: var(--ink); color: #fff; text-decoration: none; border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.03em; }
.map__open:hover { background: var(--orange-btn); }
@media (max-width: 900px) { .section--map .map { grid-template-columns: 1fr; } }

/* --- the header pin: one tappable icon straight to directions --------- */
.header__pin { order: 3; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; color: var(--muted);
  border: 1px solid var(--border); transition: color 0.25s, border-color 0.25s, background 0.25s; }
.header__pin svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.header__pin:hover { color: var(--orange-btn); border-color: var(--orange-btn); background: rgba(193,18,31,0.06); }
@media (max-width: 992px) { .header__pin { display: none; } }

/* --- 2 · more air between the clipping and the year ------------------ */
@media (min-width: 769px) { .hero__clip { left: 45%; } }

/* --- 5 · the family section reads centred, not pushed right ---------- */
@media (min-width: 901px) {
  .section--about .about__copy { width: min(52ch, 44%); margin-left: clamp(1rem, 5vw, 5rem); }
  .about__bg { width: 58%; }
  .about__fade {
    background:
      linear-gradient(90deg, var(--ink) 0%, var(--ink) 30%, rgba(23,28,38,0.86) 43%,
                      rgba(23,28,38,0.3) 58%, rgba(23,28,38,0.04) 74%, rgba(23,28,38,0) 100%),
      linear-gradient(180deg, var(--ink) 0%, rgba(23,28,38,0.08) 26%, rgba(23,28,38,0.08) 74%, var(--ink) 100%);
  }
}

/* --- 6 · the crew as large as five-across allows --------------------- */
@media (min-width: 1181px) {
  .section--team > .section__inner, #team > .section__inner { max-width: min(1560px, 96vw); }
  .team--five { gap: clamp(1rem, 1.6vw, 1.6rem) !important; }
  .member { padding: 0; }
  .member__photo { aspect-ratio: 3 / 4; }
  .member h3 { font-size: clamp(1.35rem, 1.55vw, 1.75rem); }
}

/* the hero is exactly the screen minus the header it sits under */
:root { --header-h: 75px; }
@media (min-width: 769px) {
  .hero { height: calc(100vh - var(--header-h)); min-height: calc(100vh - var(--header-h));
    max-height: calc(100vh - var(--header-h)); }
}

/* body.has-stack .is-stacked{min-height:100vh} out-specifies .hero, which is
   why the hero stayed a full 100vh and overflowed by the header's height. */
@media (min-width: 769px) {
  body.has-stack .hero.is-stacked,
  body .hero.is-stacked,
  .hero.is-stacked {
    height: calc(100vh - var(--header-h));
    min-height: calc(100vh - var(--header-h));
    max-height: calc(100vh - var(--header-h));
  }
}
.br-w { display: inline-block; white-space: nowrap; }
/* the headline is authored as two lines; give the column the width it needs
   so "answers this phone." does not wrap to a third */
@media (min-width: 769px) {
  .hero__copy { width: min(58ch, 52vw); }
  .hero__title { font-size: clamp(2.4rem, 4.1vw, 3.9rem); }
}
@media (min-width: 769px) and (max-width: 1180px) {
  .hero__title { font-size: clamp(2.1rem, 3.7vw, 3rem); }
}

/* the photo's left edge was cutting through "THAT TREATS" — give the copy
   its own clear column and start the photograph after it */
@media (min-width: 901px) {
  .section--about .about__copy { width: min(46ch, 40%); margin-left: clamp(1rem, 4vw, 4rem); }
  .about__bg { width: 52%; }
  .about__fade {
    background:
      linear-gradient(90deg, var(--ink) 0%, var(--ink) 40%, rgba(23,28,38,0.72) 50%,
                      rgba(23,28,38,0.18) 63%, rgba(23,28,38,0) 78%, rgba(23,28,38,0) 100%),
      linear-gradient(180deg, var(--ink) 0%, rgba(23,28,38,0.06) 24%, rgba(23,28,38,0.06) 76%, var(--ink) 100%);
  }
  .section--about h2 { font-size: clamp(2rem, 3.1vw, 2.9rem); }
}

/* crew tiles as large as five-across allows: tighten the gutters, widen the rail */
@media (min-width: 1181px) {
  #team > .section__inner { max-width: min(1640px, 98vw); }
  .team--five { gap: 1.1rem !important; }
}
/* the map's "Open in Apple Maps" chip sat under the assistant launcher on
   phones — move it to the opposite corner */
@media (max-width: 992px) {
  .map__open { right: auto; left: 0.9rem; bottom: 0.9rem; font-size: 0.8rem; padding: 0 0.85rem; }
  .map__actions .btn { flex: 1 1 100%; justify-content: center; }
}
.map-canvas { position: relative; overflow: hidden; width: 100%;
  height: clamp(300px, 42vh, 440px); background: var(--paper); }
.map-tile { position: absolute; width: 256px; height: 256px; max-width: none;
  filter: saturate(0.84) contrast(0.99); }
.map-pin { position: absolute; left: 50%; top: 50%; width: 30px; height: 42px;
  transform: translate(-50%, -100%); background: var(--orange-btn);
  clip-path: polygon(50% 100%, 8% 42%, 14% 16%, 50% 0, 86% 16%, 92% 42%); }
.map-pin::after { content: ""; position: absolute; left: 50%; top: 13px; width: 10px; height: 10px;
  border-radius: 50%; transform: translateX(-50%); background: #fff; }
.map-attr { position: absolute; right: 0; bottom: 0; z-index: 2; margin: 0;
  font-size: 0.7rem; color: var(--muted); background: rgba(247,245,240,0.86); padding: 0.15rem 0.5rem; }
.map-attr a { color: inherit; }

/* =====================================================================
   v8 — Mason's three
   ===================================================================== */

/* 1 · VISIT THE SHOP: the section is 100vh from the stack but its content is
   only ~510px, so all the slack fell below it. Centre the content, and pull
   the blue radial glow back — anchored at 120% it smeared as haze across the
   bottom once the section grew taller than it was designed for. */
@media (min-width: 992px) {
  body.has-stack #contact { display: flex; align-items: center; padding-top: 6rem; padding-bottom: 6rem; }
  body.has-stack #contact > .section__inner { width: 100%; }
}
#contact { background-image: radial-gradient(760px 420px at 12% 42%, rgba(30, 64, 175, 0.20), transparent 70%); }

/* 2 · FAMILY: the photograph is the background, full width, with the ink
   fading across its left so the copy sits over the dark part of the frame
   and never over either person. Not a picture beside text — a picture the
   text lives on. */
@media (min-width: 901px) {
  .about__bg {
    inset: 0; width: 100%; height: auto; top: 50%; transform: translateY(-50%);
    object-fit: cover; object-position: 38% center !important;
    filter: grayscale(0.15) brightness(0.98);
  }
  .about__fade {
    background:
      /* left: ink under the copy, feathering out before Bobby */
      linear-gradient(90deg, var(--ink) 0%, var(--ink) 20%, rgba(23,28,38,0.92) 28%,
                      rgba(23,28,38,0.55) 36%, rgba(23,28,38,0.12) 46%, rgba(23,28,38,0) 56%),
      /* top and bottom: the band dissolves into the section instead of ending */
      linear-gradient(180deg, var(--ink) 0%, rgba(23,28,38,0.25) 18%, rgba(23,28,38,0) 34%,
                      rgba(23,28,38,0) 66%, rgba(23,28,38,0.3) 84%, var(--ink) 100%);
  }
  .section--about .about__copy { width: min(38ch, 31%); margin-left: clamp(1rem, 4vw, 4rem); }
  .section--about h2 { font-size: clamp(1.85rem, 2.6vw, 2.5rem); }
  .section--about .about__copy > p { font-size: 0.97rem; }
  .about__quote p { font-size: 1rem; }
}

/* 3 · the clipping drops to sit on the year's line */
@media (min-width: 769px) { .hero__clip { bottom: 1.4rem; } }