@layer base {
/* website-premium-contractor — section-composition stylesheet.
 *
 * Different from the standard contractor template in three ways:
 * 1. CSS variables for brand color + accent, not hardcoded.
 * 2. Section components are responsive and self-contained — each can be
 *    used in any order without leaking margins or breaking layout.
 * 3. Typography pair: Inter (body/UI) + Fraunces (display) for the
 *    "premium / editorial" feel; standard template uses a single sans.
 */

:root {
  --brand: #b82124;
  --brand-deep: color-mix(in srgb, #b82124 65%, #000000);
  --accent: #f59e0b;
  /* The accent as text on the light grounds (white, paper): darkened at generation just
     enough to read at AA (generator ACCENT_COLOR_ON_LIGHT). Bright accents stay for fills
     and for text on dark grounds. */
  --accent-ink: #915d06;
  --ink: #0f172a;
  --ink-soft: #334155;
  --muted: #64748b;
  --line: #e5e7eb;
  --paper: #fafaf7;
  --white: #ffffff;
  --max: 1180px;
  --space: clamp(64px, 8vw, 120px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Barlow', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

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

/* ── Header ───────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  z-index: 50;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  gap: 32px;
}
.brand {
  font-family: 'Barlow Condensed', Georgia, serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--brand);
}
.primary-nav { display: flex; gap: 28px; }
.primary-nav a { color: var(--ink-soft); font-weight: 500; font-size: 15px; }
.primary-nav a:hover { color: var(--brand); }
.header-cta {
  background: var(--brand);
  color: var(--white);
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
}
.header-cta:hover { background: var(--brand-deep); }

/* ── Mobile nav (hamburger + slide-down menu) ─────────────────────────── */
.mobile-nav-toggle { display: none; background: transparent; border: 0; width: 36px; height: 32px; padding: 6px; cursor: pointer; flex-direction: column; justify-content: space-between; align-items: stretch; }
.mobile-nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s; }
.mobile-nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.mobile-nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav { display: none; padding: 16px 24px 24px; border-top: 1px solid var(--line); background: var(--paper); }
.mobile-nav a { display: block; padding: 12px 4px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 17px; border-bottom: 1px solid var(--line); }
.mobile-nav a:last-of-type { border-bottom: 0; }
.mobile-nav__cta { margin-top: 12px; background: var(--brand); color: var(--white); text-align: center; padding: 14px 0; border-radius: 999px; border-bottom: 0; font-weight: 600; }

@media (max-width: 720px) {
  .primary-nav { display: none; }
  .header-cta { display: none; }
  .mobile-nav-toggle { display: flex; }
  .mobile-nav:not([hidden]) { display: block; }
}

/* ── Buttons (shared across sections) ─────────────────────────────────── */
.btn {
  display: inline-block;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .12s ease, background .12s ease, color .12s ease;
}
.btn--lg { padding: 14px 24px; font-size: 15px; border-radius: 8px; }
.btn--xl { padding: 18px 32px; font-size: 17px; border-radius: 10px; }
.btn--primary { background: var(--brand); color: var(--white); }
.btn--primary:hover { background: var(--brand-deep); transform: translateY(-1px); }
.btn--outline { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn--outline:hover { background: var(--brand); color: var(--white); }
.btn--ghost { background: rgba(255,255,255,0.12); color: var(--white); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.35); }
.btn--ghost:hover { background: rgba(255,255,255,0.2); }

/* ── Section heads ────────────────────────────────────────────────────── */
.section-head { max-width: 720px; margin: 0 auto var(--space) auto; text-align: center; }
.section-title {
  font-family: 'Barlow Condensed', Georgia, serif;
  font-size: clamp(34px, 4.5vw, 52px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 16px;
}
.section-intro { font-size: 18px; color: var(--muted); margin: 0; }

/* ── Hero — shared bits ───────────────────────────────────────────────── */
.hero__eyebrow {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-weight: 600;
  margin-bottom: 18px;
}
.hero__title {
  font-family: 'Barlow Condensed', Georgia, serif;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: 0 0 20px;
}
.hero__title--xl { font-size: clamp(48px, 7vw, 88px); }
.hero__subtitle { font-size: 20px; color: var(--ink-soft); margin: 0 0 32px; max-width: 540px; line-height: 1.5; }
.hero__subtitle--center { margin-left: auto; margin-right: auto; }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__ctas--center { justify-content: center; }

/* ── Hero — full-bleed variant ────────────────────────────────────────── */
.hero--full-bleed {
  position: relative;
  min-height: clamp(540px, 80vh, 760px);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  color: var(--white);
}
.hero--full-bleed .hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.95) 100%);
}
/* The label over the photo sits on its own dark ground, white, with the accent as its edge: the owner's colour
   straight onto a photograph measured 1.6:1 (median) in a real render — live test 2026-10-22, roofing and contractor.
   On this ground white reads for every brand colour and every photo (scrim or not); the colour stays as the edge. */
.hero--full-bleed .hero__eyebrow {
  display: inline-block;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.8);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  padding: 6px 12px 6px 10px;
  max-width: 100%;
}
.hero--full-bleed .hero__title { color: var(--white); max-width: 820px; text-shadow: 0 2px 16px rgba(0,0,0,0.55); }
.hero--full-bleed .hero__subtitle { color: rgba(255,255,255,0.95); max-width: 640px; text-shadow: 0 1px 8px rgba(0,0,0,0.45); }
.hero--full-bleed .hero__inner { position: relative; padding: 80px 24px; max-width: var(--max); margin: 0 auto; width: 100%; }

/* ── Hero — split variant ─────────────────────────────────────────────── */
.hero--split { padding: clamp(48px, 6vw, 96px) 0; background: var(--white); }
.hero--split .hero__split-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero--split-flip .hero__split-grid { grid-template-columns: 1fr 1.05fr; direction: rtl; }
.hero--split-flip .hero__copy { direction: ltr; }
.hero--split .hero__image {
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  min-height: 480px;
  box-shadow: 0 30px 60px -30px rgba(15,31,23,.35);
}
.hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.hero__stat-num { font-family: 'Barlow Condensed', Georgia, serif; font-size: 32px; font-weight: 600; color: var(--brand); letter-spacing: -0.01em; }
.hero__stat-label { font-size: 13px; color: var(--muted); margin-top: 4px; }
@media (max-width: 860px) { .hero--split .hero__split-grid { grid-template-columns: 1fr; } .hero--split .hero__image { min-height: 320px; } }

/* ── Hero — centered + stat band variant ─────────────────────────────── */
.hero--centered { background: var(--paper); padding: clamp(80px, 10vw, 140px) 0 0; text-align: center; }
.hero--centered .hero__centered-inner { max-width: 880px; margin: 0 auto; padding: 0 24px; }
.hero__stat-band { background: var(--brand); color: var(--white); margin-top: clamp(60px, 8vw, 100px); padding: 40px 0; }
.hero__stat-band-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.hero__stat-band-item { text-align: center; }
.hero__stat-band-num { font-family: 'Barlow Condensed', Georgia, serif; font-size: clamp(36px, 4vw, 54px); font-weight: 600; color: var(--accent); letter-spacing: -0.02em; }
.hero__stat-band-label { font-size: 13px; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255,255,255,0.78); margin-top: 8px; }
@media (max-width: 720px) { .hero__stat-band-inner { grid-template-columns: repeat(2, 1fr); } }

/* ── Services — cards variant ─────────────────────────────────────────── */
.services { padding: var(--space) 0; background: var(--white); }
.services--cards .services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.service-card { background: var(--paper); border-radius: 14px; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.service-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(15,31,23,.18); }
.service-card__image { aspect-ratio: 4 / 3; background-size: cover; background-position: center; background-color: #d4dcd6; }
.service-card__body { padding: 24px; }
.service-card__title { font-family: 'Barlow Condensed', Georgia, serif; font-size: 22px; font-weight: 600; margin: 0 0 8px; color: var(--ink); }
.service-card__desc { font-size: 15px; color: var(--ink-soft); margin: 0 0 16px; line-height: 1.55; }
.service-card__link { font-weight: 600; color: var(--brand); font-size: 14px; }

/* ── Services — alternating variant ───────────────────────────────────── */
.services--alternating .service-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  margin-bottom: clamp(60px, 8vw, 100px);
}
.services--alternating .service-row:last-child { margin-bottom: 0; }
.services--alternating .service-row--flip { direction: rtl; }
.services--alternating .service-row--flip .service-row__copy { direction: ltr; }
.service-row__image { aspect-ratio: 5 / 4; background-size: cover; background-position: center; border-radius: 14px; background-color: #d4dcd6; box-shadow: 0 30px 60px -30px rgba(15,31,23,.35); }
.service-row__index { font-family: 'Barlow Condensed', Georgia, serif; font-size: 14px; color: var(--accent-ink); font-weight: 600; letter-spacing: 0.1em; margin-bottom: 12px; }
.service-row__title { font-family: 'Barlow Condensed', Georgia, serif; font-size: clamp(28px, 3vw, 38px); font-weight: 600; line-height: 1.15; margin: 0 0 16px; color: var(--ink); letter-spacing: -0.015em; }
.service-row__desc { font-size: 17px; color: var(--ink-soft); margin: 0 0 16px; line-height: 1.6; }
.service-row__bullets { margin: 0 0 20px; padding-left: 20px; color: var(--ink-soft); }
.service-row__bullets li { margin-bottom: 6px; }
.service-row__link { font-weight: 600; color: var(--brand); font-size: 15px; border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
@media (max-width: 860px) { .services--alternating .service-row { grid-template-columns: 1fr; } }

/* ── CTA — banner variant ─────────────────────────────────────────────── */
.cta--banner { background: var(--brand); color: var(--white); padding: clamp(48px, 6vw, 80px) 0; }
.cta--banner .cta__banner-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta__heading { font-family: 'Barlow Condensed', Georgia, serif; font-size: clamp(28px, 3.5vw, 40px); font-weight: 600; margin: 0; line-height: 1.15; letter-spacing: -0.015em; }
.cta__subtitle { color: rgba(255,255,255,0.78); margin: 8px 0 0; font-size: 16px; }
/* The band is the brand; its button the accent, ringed in white so it shows even when the two are alike, with the ink
   that reads on the accent (routes.ts #0f172a) — brand-deep on an accent like the brand was invisible. */
.cta--banner .btn--primary { background: var(--accent); color: #0f172a; box-shadow: 0 0 0 2px rgba(255,255,255,0.9); }
.cta--banner .btn--primary:hover { background: var(--white); }

/* ── CTA — split variant ──────────────────────────────────────────────── */
.cta--split { background: var(--paper); }
.cta__split-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(360px, 50vh, 480px); }
.cta__split-image { background-size: cover; background-position: center; background-color: #d4dcd6; }
.cta__split-copy { padding: clamp(40px, 6vw, 80px); background: var(--white); display: flex; flex-direction: column; justify-content: center; }
.cta--split .cta__heading { color: var(--ink); margin-bottom: 12px; }
.cta--split .cta__subtitle { color: var(--ink-soft); margin: 0 0 24px; font-size: 17px; line-height: 1.5; }
.cta__bullets { list-style: none; padding: 0; margin: 0 0 28px; color: var(--ink-soft); }
.cta__bullets li { padding: 8px 0 8px 28px; border-bottom: 1px solid var(--line); position: relative; }
.cta__bullets li:before { content: '\2713'; position: absolute; left: 0; top: 8px; color: var(--brand); font-weight: 700; }
.cta__bullets li:last-child { border-bottom: 0; }
.cta__actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.cta__phone { color: var(--ink); font-weight: 600; font-size: 17px; padding-left: 20px; border-left: 1px solid var(--line); }
@media (max-width: 860px) { .cta__split-grid { grid-template-columns: 1fr; } .cta__split-image { min-height: 280px; } }

/* ── About / Story ────────────────────────────────────────────────────── */
.story { padding: var(--space) 0; background: var(--paper); }
.story__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 6vw, 80px); align-items: start; }
.story__portrait { aspect-ratio: 4 / 5; background-size: cover; background-position: center; border-radius: 16px; background-color: #d4dcd6; box-shadow: 0 30px 60px -30px rgba(15,31,23,.35); position: sticky; top: 100px; }
.story__eyebrow { font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-ink); font-weight: 600; margin-bottom: 14px; }
.story__title { font-family: 'Barlow Condensed', Georgia, serif; font-size: clamp(36px, 4.5vw, 56px); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 32px; color: var(--ink); }
.story__paragraph { font-size: 18px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 22px; }
.story__signature { font-family: 'Barlow Condensed', Georgia, serif; font-style: italic; font-size: 22px; color: var(--brand); margin-top: 8px; }
.story__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.story__stat-num { font-family: 'Barlow Condensed', Georgia, serif; font-size: 32px; font-weight: 600; color: var(--brand); letter-spacing: -0.01em; }
.story__stat-label { font-size: 13px; color: var(--muted); margin-top: 4px; }
@media (max-width: 860px) { .story__grid { grid-template-columns: 1fr; } .story__portrait { position: static; aspect-ratio: 4/3; } }

/* No picture, no picture column (the bar template's fix, for every design): the story without a portrait, the split
   hero and the split CTA without an image (sections/about/story.ejs, hero/split.ejs, cta/split.ejs). */
.story__grid--noportrait { grid-template-columns: 1fr; max-width: 820px; }
.hero--split-noimage .hero__split-grid { grid-template-columns: 1fr; }
.hero--split-noimage .hero__copy { max-width: 760px; }
.cta__split-grid--noimage { grid-template-columns: 1fr; }

/* ── Team grid ────────────────────────────────────────────────────────── */
.team { padding: var(--space) 0; background: var(--white); }
.team__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px; }
.team__card { background: var(--paper); border-radius: 14px; overflow: hidden; }
.team__portrait { aspect-ratio: 4 / 5; background-size: cover; background-position: center top; background-color: #d4dcd6; }
.team__body { padding: 20px 22px 24px; }
.team__name { font-family: 'Barlow Condensed', Georgia, serif; font-size: 20px; font-weight: 600; color: var(--ink); }
.team__role { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-ink); font-weight: 600; margin-top: 4px; }
.team__bio { font-size: 14px; color: var(--ink-soft); margin: 12px 0 0; line-height: 1.55; }

/* ── Blog ─────────────────────────────────────────────────────────────── */
.blog-section { padding: var(--space) 0; }
/* The business's privacy policy and terms (server/site/legal.ts): plain reading pages in the theme's own ink. */
.legal-page { padding: var(--space) 0; }
.legal-page__inner { max-width: 760px; }
.legal-page h1 { font-family: var(--font-display, serif); font-size: clamp(32px, 4vw, 46px); margin: 0 0 8px; color: var(--ink); letter-spacing: -0.02em; }
.legal-page__updated { color: var(--ink-soft); font-size: 14px; margin: 0 0 32px; }
.legal-page h2 { font-size: 20px; margin: 32px 0 10px; color: var(--ink); }
.legal-page p, .legal-page li { color: var(--ink); line-height: 1.65; }
.legal-page a { color: inherit; text-decoration: underline; }
.footer-legal { white-space: nowrap; }
/* The "Text me" box on every form that asks for a phone (server/site/smsConsent.ts): the form's own ink, never faded. */
.sms-consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; font-size: 13px; line-height: 1.5; color: inherit; text-align: left; cursor: pointer; }
.sms-consent input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--brand, currentColor); }
.sms-consent a { color: inherit; text-decoration: underline; }
#book-form label.sms-consent { flex-direction: row; gap: 10px; font-size: 13px; color: var(--ink); }
.blog-section__title { font-family: var(--font-display, serif); font-size: clamp(36px, 4vw, 52px); margin: 0 0 40px; color: var(--ink); letter-spacing: -0.02em; }
.blog-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.blog-card { display: block; background: var(--white); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; text-decoration: none; color: var(--ink); transition: transform .2s, box-shadow .2s; }
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(20,20,30,0.08); }
.blog-card__cover { width: 100%; height: 220px; object-fit: cover; display: block; }
.blog-card__body { padding: 24px; }
.blog-card__date { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 10px; }
.blog-card__title { font-family: var(--font-display, serif); font-size: 24px; margin: 0 0 12px; line-height: 1.25; color: var(--ink); letter-spacing: -0.01em; }
.blog-card__excerpt { margin: 0 0 16px; color: var(--ink-soft); line-height: 1.6; font-size: 15px; }
.blog-card__more { color: var(--brand); font-weight: 600; font-size: 14px; }
.blog-empty { text-align: center; color: var(--muted); padding: 60px 20px; font-size: 17px; }
@media (max-width: 760px) { .blog-list { grid-template-columns: 1fr; } }
.container--narrow { max-width: 720px; }
.blog-post { padding: var(--space) 0; }
.blog-post__back { display: inline-block; color: var(--muted); text-decoration: none; font-size: 14px; margin-bottom: 28px; }
.blog-post__back:hover { color: var(--ink); }
.blog-post__cover { width: 100%; height: 420px; object-fit: cover; border-radius: 12px; margin-bottom: 32px; display: block; }
.blog-post__date { font-size: 13px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 16px; }
.blog-post__title { font-family: var(--font-display, serif); font-size: clamp(34px, 4.5vw, 52px); margin: 0 0 20px; line-height: 1.15; color: var(--ink); letter-spacing: -0.02em; }
.blog-post__excerpt { font-size: 19px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 32px; }
.blog-post__body { font-size: 17px; line-height: 1.75; color: var(--ink); }
.blog-post__body h1 { font-family: var(--font-display, serif); font-size: 30px; margin: 40px 0 16px; letter-spacing: -0.01em; }
.blog-post__body h2 { font-family: var(--font-display, serif); font-size: 26px; margin: 36px 0 14px; letter-spacing: -0.01em; }
.blog-post__body h3 { font-size: 20px; margin: 32px 0 12px; font-weight: 700; }
.blog-post__body p { margin: 0 0 20px; }
.blog-post__body ul, .blog-post__body ol { margin: 0 0 20px; padding-left: 28px; }
.blog-post__body li { margin: 0 0 8px; }
.blog-post__body blockquote { margin: 24px 0; padding: 8px 0 8px 20px; border-left: 3px solid var(--brand); color: var(--ink-soft); font-style: italic; }
.blog-post__body code { background: var(--paper); padding: 2px 6px; border-radius: 4px; font-size: 0.92em; font-family: 'SF Mono', Consolas, monospace; }
.blog-post__body pre { background: var(--paper); padding: 18px; border-radius: 8px; overflow-x: auto; margin: 0 0 20px; }
.blog-post__body pre code { background: none; padding: 0; }
.blog-post__body a { color: var(--brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.blog-post__body img { max-width: 100%; height: auto; border-radius: 8px; margin: 16px 0; }

/* ── Stats bar ────────────────────────────────────────────────────────── */
.stats-bar { padding: calc(var(--space) * 0.6) 0; background: var(--brand); color: var(--white); }
.stats-bar__heading { font-size: 18px; text-align: center; opacity: 0.85; font-weight: 500; letter-spacing: 0.04em; margin: 0 0 24px; text-transform: uppercase; }
.stats-bar__grid { display: grid; gap: 24px; align-items: end; }
.stats-bar__grid--2 { grid-template-columns: repeat(2, 1fr); }
.stats-bar__grid--3 { grid-template-columns: repeat(3, 1fr); }
.stats-bar__grid--4 { grid-template-columns: repeat(4, 1fr); }
.stats-bar__item { text-align: center; }
.stats-bar__value { font-family: var(--font-display, serif); font-size: clamp(36px, 4.5vw, 56px); line-height: 1; font-weight: 700; letter-spacing: -0.02em; }
.stats-bar__label { font-size: 13px; margin-top: 8px; opacity: 0.8; letter-spacing: 0.05em; text-transform: uppercase; }
@media (max-width: 720px) { .stats-bar__grid--3, .stats-bar__grid--4 { grid-template-columns: repeat(2, 1fr); } }

/* ── FAQ section ──────────────────────────────────────────────────────── */
.faq-section { padding: var(--space) 0; background: var(--white); }
.faq-section__grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 64px; align-items: start; }
.faq-section__head { position: sticky; top: 100px; }
.faq-section__title { font-family: var(--font-display, serif); font-size: clamp(28px, 3vw, 38px); margin: 0 0 16px; color: var(--ink); letter-spacing: -0.01em; }
.faq-section__intro { font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--line); padding: 22px 0; }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item__question { cursor: pointer; font-weight: 600; font-size: 17px; color: var(--ink); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-item__question::after { content: "+"; font-size: 22px; font-weight: 300; color: var(--ink-soft); transition: transform .2s; flex-shrink: 0; }
.faq-item[open] .faq-item__question::after { content: "−"; }
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__answer { color: var(--ink-soft); font-size: 15px; line-height: 1.65; padding-top: 14px; }
@media (max-width: 820px) { .faq-section__grid { grid-template-columns: 1fr; gap: 32px; } .faq-section__head { position: static; } }

/* ── Testimonials section ─────────────────────────────────────────────── */
.testimonials-section { padding: var(--space) 0; background: var(--paper); }
.testimonials-section__head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.testimonials-section__title { font-family: var(--font-display, serif); font-size: clamp(28px, 3vw, 38px); margin: 0 0 12px; color: var(--ink); letter-spacing: -0.01em; }
.testimonials-section__intro { font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.testimonials-grid { display: grid; gap: 24px; }
.testimonials-grid--1 { grid-template-columns: minmax(0, 720px); justify-content: center; }
.testimonials-grid--2 { grid-template-columns: repeat(2, 1fr); }
.testimonials-grid--3 { grid-template-columns: repeat(3, 1fr); }
.testimonial-card { background: var(--white); padding: 28px 26px; border-radius: 8px; border: 1px solid var(--line); margin: 0; }
.testimonial-card__quote { font-size: 17px; line-height: 1.6; color: var(--ink); margin: 0 0 20px; font-style: italic; }
.testimonial-card__attribution { display: flex; align-items: center; gap: 12px; }
.testimonial-card__photo { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; flex-shrink: 0; }
.testimonial-card__author { font-weight: 600; font-size: 15px; color: var(--ink); }
.testimonial-card__role { font-size: 13px; color: var(--muted); margin-top: 1px; }
@media (max-width: 820px) { .testimonials-grid--3 { grid-template-columns: 1fr; } .testimonials-grid--2 { grid-template-columns: 1fr; } }

/* ── Gallery section ──────────────────────────────────────────────────── */
.gallery-section { padding: var(--space) 0; background: var(--white); }
.gallery-section__head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.gallery-section__title { font-family: var(--font-display, serif); font-size: clamp(28px, 3vw, 38px); margin: 0 0 12px; color: var(--ink); letter-spacing: -0.01em; }
.gallery-section__intro { font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery-grid__item { margin: 0; position: relative; overflow: hidden; border-radius: 6px; aspect-ratio: 4 / 3; background: var(--paper); }
.gallery-grid__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.gallery-grid__item:hover img { transform: scale(1.03); }
.gallery-grid__item figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 14px 16px; background: linear-gradient(to top, rgba(0,0,0,.7), transparent); color: #fff; font-size: 13px; font-weight: 500; }
@media (max-width: 960px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gallery-grid { grid-template-columns: 1fr; } }

/* ── Contact section ──────────────────────────────────────────────────── */
.contact-section { padding: var(--space) 0; background: var(--paper); }
.contact-section__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: start; }
.contact-section__title { font-family: 'Barlow Condensed', Georgia, serif; font-size: clamp(36px, 4.5vw, 56px); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 18px; color: var(--ink); }
.contact-section__intro { font-size: 18px; color: var(--ink-soft); margin: 0 0 32px; line-height: 1.55; max-width: 460px; }
.contact-section__details { border-top: 1px solid var(--line); }
.contact-section__row { display: grid; grid-template-columns: 100px 1fr; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: start; }
.contact-section__label { font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 600; padding-top: 2px; }
.contact-section__value { color: var(--ink); font-size: 16px; }
.contact-section__value a { color: var(--brand); font-weight: 600; }
.contact-section__promise { margin-top: 28px; padding: 16px 20px; background: var(--brand); color: var(--white); border-radius: 10px; font-size: 14px; line-height: 1.55; }
.contact-form { background: var(--white); border-radius: 14px; padding: 32px; box-shadow: 0 20px 40px -20px rgba(15,31,23,.18); }
.contact-form__row { margin-bottom: 18px; }
.contact-form__row label { display: block; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin-bottom: 6px; }
.contact-form__row input, .contact-form__row textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; font: inherit; color: var(--ink); background: var(--paper); }
.contact-form__row input:focus, .contact-form__row textarea:focus { outline: none; border-color: var(--brand); background: var(--white); }
@media (max-width: 860px) { .contact-section__grid { grid-template-columns: 1fr; } }
/* The form's own message under a box it can't send without (form-info.ejs), in place of the browser's tooltip. Its ink
   brings its own ground, so it reads the same on every design's form (the bar's form is near-black). */
.contact-form__error { margin: 6px 0 0; padding: 4px 8px; border-radius: 6px; font-size: 14px; font-weight: 600; line-height: 1.4; color: #b42318; background: #fef3f2; }
.contact-form__row input[aria-invalid="true"], .contact-form__row textarea[aria-invalid="true"] { border-color: #b42318; }

/* ── Footer ──────────────────────────────────────────────────────────── */
.site-footer { background: var(--brand-deep); color: var(--white); padding: 48px 0 32px; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer-brand { font-family: 'Barlow Condensed', Georgia, serif; font-size: 20px; font-weight: 700; }
.footer-tagline { color: rgba(255,255,255,0.6); font-size: 14px; margin-top: 4px; }
.footer-contact { display: flex; gap: 28px; }
.footer-contact a { color: rgba(255,255,255,0.85); font-size: 15px; }
.footer-contact a:hover { color: var(--accent); }
/* The phone, the email and Privacy · Terms sat on one unbreakable row: at 390px the footer ran 7px off the side of every
   page and the whole site scrolled sideways (live test 2026-10-22). They wrap, and a long email breaks where it must. Every
   design gets it — a design that restyles the row (bar.css) sets no flex-wrap of its own. */
.footer-contact { flex-wrap: wrap; row-gap: 10px; min-width: 0; max-width: 100%; }
.footer-contact > * { flex-shrink: 0; max-width: 100%; }
.footer-contact a { overflow-wrap: anywhere; }
/* A long email or web address breaks instead of widening the page, on every page and design (each design sits over this
   sheet): /contact ran 24px past a 390px screen on twomiah14+ltrestaurant@gmail.com (restaurant live test 2026-10-25).
   `anywhere` lowers the address's narrowest width too, so a grid or flex cell holding it can shrink to the screen. */
body { overflow-wrap: break-word; }
/* Addresses, and links inside running text; a button's or the menu's link is left whole. */
a[href^="mailto:"], .contact-section__value, address, p a, dd a, td a { overflow-wrap: anywhere; }
.contact-section__grid > *, .contact-section__row > * { min-width: 0; }

/* ── Twomiah Bookings ─────────────────────────────────────────────────── */
.book-services { padding: var(--space) 0; }
.book-services__title { font-family: var(--font-display, serif); font-size: clamp(36px, 4vw, 52px); margin: 0 0 40px; color: var(--ink); letter-spacing: -0.02em; }
.book-services__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.service-card { display: block; background: var(--white); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; text-decoration: none; color: var(--ink); transition: transform .2s, box-shadow .2s; }
.service-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(20,20,30,0.08); }
.service-card__body { padding: 28px; }
.service-card__name { font-family: var(--font-display, serif); font-size: 26px; margin: 0 0 12px; letter-spacing: -0.01em; color: var(--ink); }
.service-card__desc { margin: 0 0 18px; color: var(--ink-soft); line-height: 1.6; font-size: 15px; }
.service-card__meta { display: flex; gap: 18px; margin-bottom: 14px; font-size: 14px; color: var(--muted); }
.service-card__price { font-weight: 700; color: var(--ink); }
.service-card__cta { color: var(--brand); font-weight: 600; font-size: 14px; }
@media (max-width: 760px) { .book-services__grid { grid-template-columns: 1fr; } }

.book-picker { padding: var(--space) 0; }
.book-picker__back { display: inline-block; color: var(--muted); text-decoration: none; font-size: 14px; margin-bottom: 24px; }
.book-picker__back:hover { color: var(--ink); }
.book-picker__title { font-family: var(--font-display, serif); font-size: clamp(34px, 4vw, 48px); margin: 0 0 14px; letter-spacing: -0.02em; }
.book-picker__desc { color: var(--ink-soft); font-size: 17px; margin: 0 0 36px; line-height: 1.6; }
.book-step { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 28px; margin-bottom: 24px; }
.book-step h2 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 18px; font-weight: 700; }
.book-zip label { display: block; font-size: 14px; color: var(--ink-soft); margin-bottom: 18px; }
.book-zip input { display: block; margin-top: 6px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 16px; max-width: 140px; }
.book-who label { display: block; font-size: 14px; color: var(--ink-soft); margin-bottom: 18px; }
.book-who select { display: block; margin-top: 6px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 16px; max-width: 280px; background: #fff; color: #0f172a; }
/* Several services in one booking (salon parity row 9). The pickers are white boxes, so their words are dark whatever the look's
   own ink is (a look with light ink drew white on white — salon live test 11/07). */
.book-also { margin-bottom: 18px; }
.book-also__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.book-also__row select { padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 16px; background: #fff; min-width: 0; flex: 1 1 180px; max-width: 280px; color: #0f172a; }
.book-also__remove { border: 1px solid var(--line); background: #fff; border-radius: 8px; width: 40px; height: 40px; font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink-soft); }
.book-also__add { background: none; border: 0; padding: 4px 0; color: var(--brand); font: inherit; font-size: 15px; cursor: pointer; text-decoration: underline; }
.book-also__hint { font-size: 13px; color: var(--ink-soft); margin: 4px 0 0; }
.book-dates { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.book-date { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 10px 6px; cursor: pointer; text-align: center; display: flex; flex-direction: column; gap: 4px; font-family: inherit; transition: border-color .15s, background .15s; }
.book-date:hover { border-color: var(--brand); }
.book-date.is-selected { background: var(--brand); border-color: var(--brand); color: var(--white); }
.book-date__dow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; }
.book-date__day { font-size: 22px; font-weight: 700; }
.book-date__mon { font-size: 11px; text-transform: uppercase; opacity: 0.7; }
@media (max-width: 580px) { .book-dates { grid-template-columns: repeat(4, 1fr); } }
.book-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.book-slot { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 12px; cursor: pointer; font-size: 15px; font-family: inherit; transition: border-color .15s, background .15s; }
.book-slot:hover { border-color: var(--brand); }
.book-slot.is-selected { background: var(--brand); border-color: var(--brand); color: var(--white); }
.book-loading, .book-empty { color: var(--muted); font-size: 15px; padding: 20px 0; }
#book-form { display: flex; flex-direction: column; gap: 14px; }
#book-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--ink-soft); }
#book-form input[type="text"], #book-form input[type="email"], #book-form input[type="tel"], #book-form textarea { padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 16px; font-family: inherit; }
.book-submit { margin-top: 6px; padding: 14px 28px; background: var(--brand); color: var(--white); border: none; border-radius: 8px; font-size: 16px; font-weight: 700; cursor: pointer; transition: opacity .15s; }
.book-submit:hover { opacity: 0.9; }
.book-submit:disabled { opacity: 0.5; cursor: wait; }
.book-error { background: #fee; color: #c00; border: 1px solid #fcc; padding: 12px 16px; border-radius: 8px; font-size: 14px; margin-top: 8px; }
.book-thanks { padding: var(--space) 0; text-align: center; }
.book-thanks__check { width: 80px; height: 80px; margin: 0 auto 24px; background: #22c55e; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 44px; font-weight: 700; }
.book-thanks h1 { font-family: var(--font-display, serif); font-size: clamp(36px, 4vw, 52px); margin: 0 0 14px; letter-spacing: -0.02em; }
.book-thanks__lead { color: var(--ink-soft); font-size: 17px; margin: 0 0 36px; }
.book-thanks__summary { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 24px; margin: 0 0 28px; text-align: left; max-width: 480px; margin-left: auto; margin-right: auto; }
.book-thanks__summary div { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.book-thanks__summary div:last-child { border-bottom: none; }
.book-thanks__summary span { color: var(--muted); font-size: 14px; }
.book-thanks__addcal { color: var(--muted); font-size: 14px; }
.book-thanks__addcal a { color: var(--brand); text-decoration: underline; }
.book-empty { text-align: center; padding: 60px 20px; color: var(--muted); }

/* ── Twomiah Bookings polish ────────────────────────────────────────────── */
.book-progress { list-style: none; display: flex; align-items: center; gap: 8px; padding: 0; margin: 0 0 32px; }
.book-progress__step { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; background: var(--paper); color: var(--muted); font-size: 14px; transition: background .2s, color .2s; flex: 1; max-width: 180px; }
.book-progress__step.is-active { background: var(--brand); color: var(--white); font-weight: 600; }
.book-progress__step.is-done { background: var(--ink); color: var(--white); }
.book-progress__step.is-done .book-progress__num::before { content: '✓'; }
.book-progress__step.is-done .book-progress__num { font-size: 0; }
.book-progress__step.is-done .book-progress__num::before { font-size: 16px; }
.book-progress__num { width: 24px; height: 24px; border-radius: 50%; background: rgba(0,0,0,0.06); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.book-progress__step.is-active .book-progress__num, .book-progress__step.is-done .book-progress__num { background: rgba(255,255,255,0.2); }
.book-progress__label { letter-spacing: 0.02em; }
@media (max-width: 580px) {
  .book-progress__step { padding: 6px 10px; font-size: 12px; }
  .book-progress__label { display: none; }
}
.book-slots-skeleton { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.book-slot-skel { height: 44px; border-radius: 8px; background: linear-gradient(90deg, var(--paper), rgba(0,0,0,0.04), var(--paper)); background-size: 200% 100%; animation: book-shimmer 1.2s ease-in-out infinite; }
@keyframes book-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Bookings tip presets ─────────────────────────────────────────────── */
.book-tip { margin: 14px 0; }
.book-tip > label { display: block; font-size: 14px; color: var(--ink-soft); margin-bottom: 6px; }
.book-tip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.book-tip-btn { background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 8px 14px; cursor: pointer; font-family: inherit; font-size: 14px; transition: border-color .15s, background .15s; }
.book-tip-btn:hover { border-color: var(--brand); }
.book-tip-btn.is-active { background: var(--brand); color: var(--white); border-color: var(--brand); }

/* ─── reservation/cta — Twomiah Bookings CTA for service businesses ─── */
.reservation { padding: var(--space) 0; background: var(--paper); }
.reservation__card { background: var(--white); border-radius: 16px; padding: 36px; max-width: 720px; margin: 0 auto; box-shadow: 0 2px 20px rgba(0,0,0,0.05); }
.reservation__card--cta { text-align: center; padding: 44px 36px; }
.reservation__head { text-align: center; margin-bottom: 24px; }
.reservation__heading { margin: 0 0 8px; font-size: clamp(28px, 3.5vw, 38px); color: var(--ink); line-height: 1.1; }
.reservation__intro { color: var(--ink-soft); margin: 0; max-width: 480px; margin-left: auto; margin-right: auto; }
.reservation__cta-btn { display: inline-block; margin-top: 8px; min-width: 280px; }
.reservation__note { font-size: 13px; color: var(--muted); margin-top: 16px; font-style: italic; }

/* ═══ Section styles — one copy per section (site/views/sections/<type>/<variant>.ejs) ═══ */

/* [age/modal] */
/* Age gate — full-screen modal locks scroll until dismissed */
html.age-gate-on, html.age-gate-on body { overflow: hidden; }
.age-gate { position: fixed; inset: 0; z-index: 2147483646; background: rgba(0,0,0,0.78); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 24px; }
.age-gate--leaving { opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.age-gate__card { background: var(--white); border-radius: 16px; max-width: 460px; width: 100%; padding: 40px 36px 32px; box-shadow: 0 30px 100px rgba(0,0,0,0.5); }
.age-gate__head { text-align: center; }
.age-gate__title { font-size: 32px; line-height: 1.1; margin: 0 0 12px; color: var(--ink); letter-spacing: -0.01em; }
.age-gate__msg { font-size: 15px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 24px; text-align: center; }
.age-gate__state { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.age-gate__state span { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.age-gate__state select { padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 15px; background: var(--paper); color: var(--ink); transition: border-color .15s; }
.age-gate__state select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,0,0,0.06); }
.age-gate__actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.age-gate__actions .btn { text-align: center; }
.age-gate__fine { font-size: 11px; color: var(--muted); text-align: center; margin: 0; line-height: 1.4; }

/* [strain/grid] */
/* Strain grid */
.strain__filters { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 0 0 var(--space) 0; }
.strain__filter { background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 8px 18px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--ink-soft); transition: all .15s; }
.strain__filter:hover { border-color: var(--brand); color: var(--brand); }
.strain__filter.is-active { background: var(--brand); color: var(--white); border-color: var(--brand); }
.strain__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.strain-card { background: var(--white); border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.04); overflow: hidden; transition: transform .15s, box-shadow .15s; }
.strain-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.strain-card[hidden] { display: none !important; }
.strain-card__image { aspect-ratio: 4 / 3; background-size: cover; background-position: center; background-color: var(--paper); }
.strain-card__body { padding: 18px 20px 20px; }
.strain-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.strain-card__name { margin: 0; font-size: 20px; line-height: 1.15; color: var(--ink); }
.strain__type { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: var(--accent); color: var(--brand-deep); }
.strain__type--indica { background: #ede9fe; color: #5b21b6; }
.strain__type--sativa { background: #fef3c7; color: #92400e; }
.strain__type--hybrid { background: #d1fae5; color: #065f46; }
.strain__type--cbd { background: #dbeafe; color: #1e40af; }
.strain-card__stats { display: flex; gap: 18px; align-items: baseline; margin-bottom: 10px; }
.strain-card__stat { display: flex; flex-direction: column; gap: 2px; }
.strain-card__stat .mono { font-size: 17px; font-weight: 600; color: var(--brand); font-family: ui-monospace, monospace; font-feature-settings: 'tnum'; }
.strain-card__stat-label { font-size: 10px; letter-spacing: 0.15em; color: var(--muted); text-transform: uppercase; font-weight: 600; }
.strain-card__stat--price { margin-left: auto; }
.strain-card__stat--price .mono { color: var(--ink); font-size: 15px; }
.strain-card__desc { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.strain-card__effects { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 5px; }
.strain-card__effect { font-size: 11px; padding: 3px 8px; background: var(--paper); border-radius: 4px; color: var(--ink-soft); }
.strain-card__terps { font-size: 11px; color: var(--muted); margin-top: 6px; font-style: italic; }

/* [deals/strip] */
/* Deals strip */
.deals__head { text-align: center; margin-bottom: calc(var(--space) * 0.5); }
.deals__title { margin: 0 0 6px; }
.deals__intro { color: var(--muted); margin: 0; }
.deals__expires-label { display: inline-block; margin-top: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); }
.deals__strip { list-style: none; padding: 0; margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 16px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; }
.deals-card { background: var(--white); border-radius: 12px; padding: 22px 22px 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.04); scroll-snap-align: start; position: relative; min-height: 140px; display: flex; flex-direction: column; gap: 8px; }
.deals-card__badge { position: absolute; top: 12px; right: 12px; background: var(--brand); color: var(--white); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 9px; border-radius: 4px; }
.deals-card__title { margin: 0; font-size: 22px; line-height: 1.1; color: var(--brand); }
.deals-card__desc { margin: 0; font-size: 14px; color: var(--ink); line-height: 1.4; }
.deals-card__valid { font-size: 12px; color: var(--muted); margin-top: auto; }

/* [emergency/bar] */
/* Emergency bar — sticky bottom on mobile, top on desktop */
.emergency-bar { background: linear-gradient(135deg, #1e293b, #0f172a); color: #f1f5f9; padding: 14px 0; position: relative; z-index: 50; }
.emergency-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.emergency-bar__heading { font-weight: 600; font-size: 16px; color: var(--white); }
.emergency-bar__subtext { font-size: 13px; color: #cbd5e1; flex: 1 1 200px; }
.emergency-bar__call { display: inline-flex; align-items: center; gap: 12px; background: var(--brand); color: var(--white); padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 15px; transition: background .15s, transform .12s; text-decoration: none; }
.emergency-bar__call:hover { background: var(--brand-deep); transform: translateY(-1px); }
.emergency-bar__dot { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; flex: 0 0 9px; box-shadow: 0 0 0 4px rgba(34,197,94,0.25); }
.emergency-bar__phone { font-size: 16px; }
@media (max-width: 720px) {
  .emergency-bar { position: sticky; bottom: 0; padding: 10px 0; box-shadow: 0 -6px 20px rgba(0,0,0,0.25); }
  .emergency-bar__inner { gap: 8px; }
  .emergency-bar__heading, .emergency-bar__subtext { display: none; }
  .emergency-bar__call { flex: 1 1 auto; justify-content: center; padding: 14px 18px; }
}

/* After-hours: red pulse on the call button */
.emergency-bar--after-hours .emergency-bar__call { background: #b91c1c; animation: eb-pulse-ah 2.2s ease-in-out infinite; }
.emergency-bar--after-hours .emergency-bar__call:hover { background: #991b1b; animation: none; }
.emergency-bar--after-hours .emergency-bar__dot { background: #fbbf24; box-shadow: 0 0 0 4px rgba(251,191,36,0.3); }
@keyframes eb-pulse-ah {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45); }
  50% { box-shadow: 0 0 0 14px rgba(220, 38, 38, 0); }
}
@media (prefers-reduced-motion: reduce) { .emergency-bar--after-hours .emergency-bar__call { animation: none; } }

/* [service_area/zip-check] */
/* Service-area ZIP check */
.service-area { padding: var(--space) 0; background: var(--paper); }
.sa-form { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; }
.sa-input { flex: 1; padding: 14px 18px; border: 2px solid var(--line); border-radius: 10px; font-family: inherit; font-size: 18px; background: var(--white); color: var(--ink); }
/* a flex input cannot shrink below its default width unless told it may: on a 390px phone the ZIP box pushed the Check button off the screen */
.sa-input { min-width: 0; }
.sa-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,0,0,0.06); }
.sa-result { max-width: 560px; margin: 24px auto 0; padding: 22px 26px; border-radius: 12px; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.sa-result__head { font-size: 18px; font-weight: 600; }
.sa-result--yes { background: #dcfce7; color: #166534; }
.sa-result--no { background: #fef3c7; color: #92400e; }
.sa-notify { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.sa-notify input[type="email"] { padding: 12px 16px; border: 2px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 15px; min-width: 220px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* [pricing/flat-rate-menu] */
/* Flat-rate pricing menu */
.pricing { padding: var(--space) 0; }
.pr-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }
.pr-card { background: var(--white); border-radius: 14px; padding: 24px 24px 22px; box-shadow: 0 2px 14px rgba(0,0,0,0.04); display: flex; flex-direction: column; gap: 12px; border-left: 4px solid var(--brand); }
.pr-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.pr-card__service { margin: 0; font-size: 20px; line-height: 1.15; color: var(--ink); flex: 1 1 200px; }
.pr-card__price { font-size: 24px; font-weight: 700; color: var(--brand); white-space: nowrap; }
.pr-card__includes { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-soft); }
.pr-card__includes li { position: relative; padding-left: 20px; line-height: 1.45; }
.pr-card__includes li::before { content: '\2713'; position: absolute; left: 0; top: 0; color: var(--brand); font-weight: 700; }
.pr-card__note { font-size: 12.5px; color: var(--muted); font-style: italic; margin-top: 4px; }
.pr-disclaimer { text-align: center; font-size: 13px; color: var(--muted); margin: 36px auto 0; max-width: 560px; line-height: 1.5; font-style: italic; }

/* [care/finder] */
/* ── Care finder wizard ──────────────────────────────────────────────── */
.care--finder { padding: var(--space) 0; }
.cf-form { background: var(--white); border-radius: 16px; padding: 36px; max-width: 720px; margin: 0 auto; box-shadow: 0 2px 20px rgba(0,0,0,0.05); }
.cf-progress { list-style: none; padding: 0; margin: 0 0 32px; display: flex; gap: 0; justify-content: space-between; }
.cf-progress__step { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 6px; font-size: 14px; color: var(--muted); font-weight: 500; border-bottom: 2px solid var(--line); transition: color .25s, border-color .25s; }
.cf-progress__step span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--paper); color: var(--muted); font-weight: 700; font-size: 13px; }
/* five steps with their labels are wider than a 390px phone's card and pushed the whole page sideways: on a phone only the current step keeps its label */
@media (max-width: 720px) { .cf-progress__step { min-width: 0; padding: 8px 2px; justify-content: center; } .cf-progress__step:not(.is-current) { font-size: 0; gap: 0; } }
.cf-progress__step.is-current { color: var(--brand); border-bottom-color: var(--brand); }
.cf-progress__step.is-current span { background: var(--brand); color: var(--white); }
.cf-progress__step.is-done { color: var(--ink-soft); border-bottom-color: var(--brand); }
.cf-progress__step.is-done span { background: var(--brand); color: var(--white); }
.cf-step { border: 0; padding: 0; margin: 0; transition: opacity .28s; }
.cf-step__legend { font-size: 22px; font-weight: 600; color: var(--ink); margin-bottom: 24px; padding: 0; }
.cf-choices { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.cf-choices--checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.cf-choice { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--paper); border: 2px solid transparent; border-radius: 10px; cursor: pointer; font-size: 17px; transition: border-color .15s, background .15s; }
.cf-choice:hover { border-color: var(--brand); background: var(--white); }
.cf-choice:has(input:checked) { border-color: var(--brand); background: var(--white); }
.cf-choice input { transform: scale(1.2); accent-color: var(--brand); }
.cf-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.cf-label { font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.cf-input { padding: 14px 16px; border: 2px solid var(--line); border-radius: 10px; font-family: inherit; font-size: 17px; background: var(--paper); color: var(--ink); }
.cf-input:focus { outline: none; border-color: var(--brand); }
.cf-promise { background: var(--paper); border-left: 4px solid var(--brand); padding: 14px 18px; border-radius: 0 8px 8px 0; font-size: 15px; color: var(--ink-soft); margin: 20px 0; line-height: 1.5; }
.cf-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
.cf-done { text-align: center; padding: 32px 0; }
.cf-done h3 { font-size: 28px; margin: 0 0 12px; color: var(--brand); }
.cf-step--invalid .cf-choice, .cf-step--invalid .cf-input { border-color: #b91c1c; }
@media (prefers-reduced-motion: reduce) { .cf-step, .cf-progress__step, .cf-choice { transition: none; } }

/* [caregivers/grid] */
/* ── Caregiver profile cards ─────────────────────────────────────────── */
.caregivers { padding: var(--space) 0; }
.cg-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 36px; }
.cg-chip { background: var(--white); border: 2px solid var(--line); border-radius: 999px; padding: 8px 18px; font-family: inherit; font-size: 15px; cursor: pointer; color: var(--ink-soft); font-weight: 500; }
.cg-chip:hover { border-color: var(--brand); color: var(--brand); }
.cg-chip.is-active { background: var(--brand); color: var(--white); border-color: var(--brand); }
.cg-chip--lang { font-style: italic; }
.cg-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; }
.cg-card { background: var(--white); border-radius: 14px; overflow: hidden; box-shadow: 0 2px 14px rgba(0,0,0,0.04); transition: transform .25s, box-shadow .25s; display: flex; flex-direction: column; }
.cg-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,0.08); }
.cg-card[hidden] { display: none !important; }
.cg-card__photo { aspect-ratio: 1; background-size: cover; background-position: center 25%; background-color: var(--paper); filter: sepia(0.15) saturate(0.85) brightness(0.98); transition: filter .35s; }
.cg-card:hover .cg-card__photo { filter: sepia(0) saturate(1) brightness(1); }
.cg-card__photo--placeholder { background: linear-gradient(135deg, var(--paper), var(--accent)); }
.cg-card__body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; }
.cg-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cg-card__name { margin: 0; font-size: 22px; color: var(--ink); line-height: 1.15; }
.cg-card__years { font-size: 14px; color: var(--brand); font-weight: 600; }
.cg-card__certs { font-size: 13px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
.cg-card__blurb { margin: 4px 0 6px; font-size: 15.5px; color: var(--ink-soft); line-height: 1.55; }
.cg-card__spec-list { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cg-card__spec { font-size: 12px; padding: 4px 10px; background: var(--paper); color: var(--ink); border-radius: 4px; font-weight: 500; }
.cg-card__lang { font-size: 13px; color: var(--muted); font-style: italic; margin-top: 6px; }

/* [coverage/insurance-guide] */
/* ── Coverage / insurance guide ──────────────────────────────────────── */
.coverage { padding: var(--space) 0; }
.cov-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.cov-card { background: var(--white); border-radius: 14px; padding: 28px 26px 24px; box-shadow: 0 2px 14px rgba(0,0,0,0.04); display: flex; flex-direction: column; gap: 14px; border-top: 4px solid var(--brand); }
.cov-card__source { font-size: 24px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.cov-card__row { display: flex; flex-direction: column; gap: 4px; }
.cov-card__row-label { font-size: 11.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.cov-card__row-body { font-size: 15px; color: var(--ink-soft); line-height: 1.55; }
.cov-card__row--ours { background: var(--paper); padding: 14px 16px; border-radius: 8px; margin-top: 4px; }
.cov-card__row--ours .cov-card__row-label { color: var(--brand); }

/* [quote/instant-address] */
/* Instant address quote */
.quote--instant { background: var(--paper); padding: var(--space) 0; }
.quote__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; align-items: start; }
@media (max-width: 880px) { .quote__layout { grid-template-columns: 1fr; } }
.quote__form { background: var(--white); border-radius: 14px; padding: 28px; box-shadow: 0 2px 16px rgba(0,0,0,0.05); display: flex; flex-direction: column; gap: 18px; }
.quote__field { display: flex; flex-direction: column; gap: 8px; }
.quote__label { font-size: 13px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.02em; }
.quote__form input { padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 16px; background: var(--paper); color: var(--ink); }
.quote__form input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,0,0,0.06); }
.quote__hint { font-size: 12px; color: var(--muted); line-height: 1.4; }
.quote__result { background: var(--white); border-radius: 14px; overflow: hidden; box-shadow: 0 2px 16px rgba(0,0,0,0.05); display: flex; flex-direction: column; }
.quote__map { aspect-ratio: 4 / 3; background: linear-gradient(135deg, #1e293b, #475569); position: relative; }
.quote__estimate { padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.quote__estimate-label { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.quote__estimate-amount { font-size: 36px; font-weight: 700; color: var(--brand); line-height: 1; }
.quote__estimate-note { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.quote__estimate .btn { align-self: flex-start; margin-top: 6px; }

/* [packages/seasonal] */
/* Seasonal packages */
.packages { padding: var(--space) 0; position: relative; }
.packages__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; align-items: stretch; }
.package-card { background: var(--white); border-radius: 14px; padding: 28px 24px 24px; box-shadow: 0 2px 14px rgba(0,0,0,0.04); display: flex; flex-direction: column; gap: 14px; position: relative; border: 2px solid transparent; transition: transform .15s, box-shadow .15s, border-color .15s; }
.package-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,0.08); }
.package-card--now { border-color: var(--brand); }
.package-card__badge { position: absolute; top: -10px; left: 18px; background: var(--brand); color: var(--white); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.package-card__badge--alt { background: var(--accent); color: var(--brand-deep); }
.package-card__head { display: flex; flex-direction: column; gap: 4px; }
.package-card__tier { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.package-card__title { margin: 0; font-size: 24px; line-height: 1.1; color: var(--ink); }
.package-card__price { display: flex; align-items: baseline; gap: 6px; padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.package-card__price-num { font-size: 32px; font-weight: 700; color: var(--brand); line-height: 1; }
.package-card__price-unit { font-size: 14px; color: var(--ink-soft); }
.package-card__price-from { font-size: 13px; color: var(--muted); }
.package-card__includes { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; font-size: 14px; color: var(--ink-soft); }
.package-card__includes li { position: relative; padding-left: 22px; }
.package-card__includes li::before { content: '\2713  '; position: absolute; left: 0; top: 0; color: var(--brand); font-weight: 700; }
.package-card__note { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.package-card__season { font-size: 11px; color: var(--muted); text-transform: capitalize; letter-spacing: 0.06em; }
.package-card__cta { margin-top: auto; align-self: stretch; text-align: center; }

/* [banner/storm-alert] */
/* Storm alert banner — sits at the top of pages, dismissable */
.storm-alert { background: linear-gradient(135deg, #1e293b, #0f172a); color: #f1f5f9; padding: 12px 0; position: relative; }
.storm-alert--out { transform: translateY(-100%); transition: transform .28s ease; }
.storm-alert__inner { display: flex; align-items: center; gap: 16px; }
.storm-alert__copy { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: 14.5px; line-height: 1.4; }
.storm-alert__heading { color: var(--white); }
.storm-alert__subtitle { color: #cbd5e1; font-weight: 400; }
.storm-alert__cta { flex: 0 0 auto; }
.storm-alert__close { flex: 0 0 auto; background: transparent; color: rgba(255,255,255,0.7); border: 0; font-size: 28px; line-height: 1; padding: 0 4px; cursor: pointer; }
.storm-alert__close:hover { color: var(--white); }
@media (max-width: 640px) { .storm-alert__inner { flex-wrap: wrap; } .storm-alert__cta { width: 100%; } }

/* [financing/calculator] */
/* Financing widget */
.financing { padding: var(--space) 0; position: relative; }
.financing__card { background: linear-gradient(135deg, var(--brand-deep), var(--brand)); color: var(--white); border-radius: 16px; padding: 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 36px; position: relative; overflow: hidden; }
@media (max-width: 880px) { .financing__card { grid-template-columns: 1fr; padding: 32px; } }
.financing__eyebrow { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.7); font-weight: 600; }
.financing__heading { margin: 10px 0 14px; color: var(--white); font-size: clamp(28px, 3.5vw, 38px); line-height: 1.1; }
.financing__intro { margin: 0 0 22px; color: rgba(255,255,255,0.85); font-size: 15px; line-height: 1.5; }
.financing__lede { font-size: 16px; color: rgba(255,255,255,0.9); }
.financing__lede-num { color: var(--white); font-weight: 700; font-size: 22px; padding: 4px 12px; background: rgba(255,255,255,0.15); border-radius: 8px; margin-left: 6px; }
.financing__calc { display: flex; flex-direction: column; gap: 18px; }
.financing__field { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: center; }
.financing__field label { grid-column: 1 / -1; }
.financing__label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.75); }
.financing input[type="range"] { -webkit-appearance: none; width: 100%; background: transparent; }
.financing input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: rgba(255,255,255,0.2); border-radius: 999px; }
.financing input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; background: var(--white); border-radius: 50%; margin-top: -8px; cursor: ew-resize; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.financing input[type="range"]::-moz-range-track { height: 6px; background: rgba(255,255,255,0.2); border-radius: 999px; }
.financing input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; background: var(--white); border-radius: 50%; border: 0; cursor: ew-resize; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.financing__value { font-size: 15px; color: var(--white); font-weight: 600; min-width: 90px; text-align: right; }
.financing__result { background: rgba(255,255,255,0.12); border-radius: 12px; padding: 18px; }
.financing__result-label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.7); font-weight: 600; }
.financing__result-num { font-size: 36px; font-weight: 700; color: var(--white); line-height: 1; margin: 8px 0; }
.financing__result-fine { font-size: 11px; color: rgba(255,255,255,0.7); }
.financing__cta { background: var(--white); color: var(--brand); }
.financing__cta:hover { background: rgba(255,255,255,0.92); }

/* [inventory/showcase] */
/* ── Featured inventory (RV / powersports) ────────────────────────────── */
.inventory { padding: 4rem 1.25rem; }
.inventory__head { max-width: 72rem; margin: 0 auto 2rem; }
.inventory__heading { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 .5rem; }
.inventory__intro { color: #4b5563; margin: 0; }
.inventory__grid { max-width: 72rem; margin: 0 auto; padding: 0; list-style: none; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.inventory__card { border: 1px solid #e5e7eb; border-radius: .75rem; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.inventory__media { position: relative; aspect-ratio: 4 / 3; background: #f3f4f6; }
.inventory__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inventory__badge { position: absolute; top: .6rem; left: .6rem; background: rgba(17,24,39,.85); color: #fff; font-size: .7rem; padding: .2rem .5rem; border-radius: .3rem; text-transform: uppercase; letter-spacing: .03em; }
.inventory__body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; }
.inventory__title { margin: 0; font-weight: 700; }
.inventory__type { margin: 0; color: #6b7280; font-size: .85rem; }
.inventory__specs { list-style: none; margin: 0; padding: 0; display: flex; gap: .75rem; color: #6b7280; font-size: .8rem; }
.inventory__price { margin: .35rem 0 0; display: flex; align-items: baseline; gap: .5rem; }
.inventory__price-main { font-weight: 700; font-size: 1.1rem; }
.inventory__price-sub { color: #6b7280; font-size: .85rem; }
.inventory__link { margin-top: .4rem; font-weight: 600; text-decoration: none; color: var(--color-primary, #1d4ed8); }
.inventory__foot { max-width: 72rem; margin: 2rem auto 0; text-align: center; }
.inventory__cta { display: inline-block; background: var(--color-primary, #1d4ed8); color: #fff; text-decoration: none; font-weight: 700; padding: .75rem 1.5rem; border-radius: .5rem; }
.inventory__disclaimer { color: #6b7280; font-size: .8rem; margin: .75rem 0 0; }

/* [urgent/bar] */
/* ── Urgent-care bar (vet) ─────────────────────────────────────────────── */
.urgent-bar { background: var(--color-primary, #0f766e); color: #fff; padding: 1rem 1.25rem; }
.urgent-bar--closed { background: #7c2d12; }
.urgent-bar__inner { max-width: 72rem; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.urgent-bar__heading { margin: 0; font-weight: 700; font-size: 1.05rem; }
.urgent-bar__status { margin: .15rem 0 0; font-size: .9rem; opacity: .92; }
.urgent-bar__call { background: #fff; color: #111; text-decoration: none; font-weight: 700; padding: .6rem 1.1rem; border-radius: .5rem; white-space: nowrap; }
.urgent-bar__partner { max-width: 72rem; margin: .75rem auto 0; font-size: .85rem; opacity: .9; }
@media (max-width: 640px) { .urgent-bar__inner { flex-direction: column; align-items: flex-start; } }

/* [menu/cards] */
/* Menu — reused from food truck (name+price+description+dietary chips) */
/* The menu, the week strip, the deals strip and the catering form had no padding of their own (measured 0px in a browser): each
   section's heading sat against the grid above it, and the first against the header. Every other section type has its own. */
.menu--cards, .schedule--strip, .deals--strip, .catering--inquiry { padding: var(--space) 0; }
.menu--cards .section-head { margin-bottom: calc(var(--space) * 0.55); }
.menu__legend { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 14px 22px; justify-content: center; font-size: 13px; color: var(--ink-soft); }
.menu__legend-chip { display: inline-flex; align-items: center; gap: 6px; }
.menu__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 32px; }
.menu-item { background: var(--white); border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.04); overflow: hidden; display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease; }
.menu-item:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,0.08); }
.menu-item__image { aspect-ratio: 4 / 3; background-size: cover; background-position: center; }
.menu-item__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; }
.menu-item__head { display: flex; align-items: baseline; gap: 16px; justify-content: space-between; }
.menu-item__name { margin: 0; font-size: 22px; line-height: 1.1; color: var(--ink); font-family: 'Barlow Condensed', Georgia, serif; }
.menu-item__price { font-size: 18px; font-weight: 500; color: var(--brand); white-space: nowrap; font-feature-settings: 'tnum'; }
.menu-item__desc { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; }
.menu-item__diet { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.menu__chip { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px; background: var(--accent); color: var(--brand-deep); letter-spacing: 0.06em; }
.menu__chip--v, .menu__chip--vg { background: #dcfce7; color: #166534; }
.menu__chip--gf { background: #fef3c7; color: #92400e; }
.menu__chip--df { background: #e0e7ff; color: #3730a3; }
.menu__chip--n { background: #fecaca; color: #991b1b; }
.menu__chip--sp { background: #ffedd5; color: #9a3412; }

/* [reservation/widget] */
/* Reservation widget */
.reservation { padding: var(--space) 0; background: var(--paper); }
.reservation__card { background: var(--white); border-radius: 16px; padding: 36px; max-width: 720px; margin: 0 auto; box-shadow: 0 2px 20px rgba(0,0,0,0.05); }
.reservation__head { text-align: center; margin-bottom: 24px; }
.reservation__heading { margin: 0 0 8px; font-family: 'Barlow Condensed', Georgia, serif; font-size: clamp(28px, 3.5vw, 38px); color: var(--ink); line-height: 1.1; }
.reservation__intro { color: var(--ink-soft); margin: 0; }
.rw-fields { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 12px; margin-bottom: 18px; }
@media (max-width: 720px) { .rw-fields { grid-template-columns: 1fr; } }
.rw-field { display: flex; flex-direction: column; gap: 6px; }
.rw-label { font-size: 12px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.12em; text-transform: uppercase; }
.rw-form select, .rw-form input { padding: 14px 16px; border: 2px solid var(--line); border-radius: 10px; font-family: inherit; font-size: 16px; background: var(--paper); color: var(--ink); }
.rw-form select:focus, .rw-form input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,0,0,0.06); }
.rw-submit { width: 100%; }
.rw-note { margin-top: 14px; font-size: 13px; color: var(--muted); text-align: center; font-style: italic; }

/* [catering/inquiry-form] */
/* Catering — reused from food truck */
.catering__layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 36px; }
@media (max-width: 880px) { .catering__layout { grid-template-columns: 1fr; } }
.catering__form { background: var(--white); border-radius: 14px; padding: 32px; box-shadow: 0 2px 14px rgba(0,0,0,0.04); display: flex; flex-direction: column; gap: 16px; }
.catering__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .catering__row { grid-template-columns: 1fr; } }
.catering__field { display: flex; flex-direction: column; gap: 6px; }
.catering__field--full { grid-column: 1 / -1; }
.catering__label { font-size: 13px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.02em; }
.catering__form input, .catering__form select, .catering__form textarea { padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 15px; background: var(--paper); color: var(--ink); }
.catering__form input:focus, .catering__form select:focus, .catering__form textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,0,0,0.08); }
.catering__form textarea { resize: vertical; min-height: 96px; }
.catering__submit-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.catering__promise { font-size: 13px; color: var(--ink-soft); }
.catering__sidebar { display: flex; flex-direction: column; gap: 20px; padding-top: 8px; }
.catering__sidebar-row { background: var(--white); border-radius: 12px; padding: 22px; box-shadow: 0 2px 10px rgba(0,0,0,0.04); }
.catering__sidebar-num { font-family: 'Barlow Condensed', Georgia, serif; font-size: 42px; color: var(--brand); line-height: 1; margin-bottom: 6px; }
.catering__sidebar-label { font-size: 13px; color: var(--ink-soft); }
.catering__sidebar-list { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink); }
.catering__sidebar-list li::before { content: '\2713  '; color: var(--brand); font-weight: 700; }

/* [schedule/week-strip] */
/* ─── schedule/week-strip (fitness class schedule, foodtruck route) ─── */
.schedule-strip { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(7, minmax(160px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.schedule-strip__day { background: var(--white); border-radius: 12px; padding: 18px 16px 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.04); scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; min-height: 160px; position: relative; }
.schedule-strip__tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 8px; border-radius: 4px; align-self: flex-start; margin-bottom: 4px; }
.schedule-strip__tag--market { background: #fef3c7; color: #92400e; }
.schedule-strip__tag--private { background: #e0e7ff; color: #3730a3; }
.schedule-strip__tag--catering { background: #fecaca; color: #991b1b; }
.schedule-strip__tag--off { background: #e7e5e4; color: #57534e; }
.schedule-strip__tag--default { background: var(--accent); color: var(--brand-deep); }
.schedule-strip__date { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 0.04em; color: var(--brand); }
.schedule-strip__location { font-size: 14.5px; color: var(--ink); font-weight: 500; line-height: 1.3; }
.schedule-strip__hours { font-size: 13px; color: var(--ink-soft); }
.schedule-strip__note { font-size: 12px; color: var(--muted); font-style: italic; }

/* [base.ejs text-size control] */
/* ── Aa+ font-size toggle (fixed, bottom right: at the top it covered the header's button and, on a phone, the menu button) ──────────────────────────── */
.text-size-toggle { position: fixed; bottom: 16px; right: 16px; z-index: 100; display: flex; gap: 4px; background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 4px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.text-size-toggle button { background: transparent; border: 0; padding: 6px 12px; border-radius: 999px; cursor: pointer; font-family: inherit; font-weight: 600; color: var(--ink-soft); }
.text-size-toggle button.is-active { background: var(--brand); color: var(--white); }
.text-size-toggle button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 720px) { .text-size-toggle { bottom: 12px; right: 12px; } .text-size-toggle button { padding: 5px 9px; font-size: 13px; } }

/* ── Booking pages added in the unified app (server/booking/pages.ts) ── */
.book-services__subtitle { color: var(--ink-soft); font-size: 17px; margin: -24px 0 36px; }
.book-chosen { font-weight: 600; color: var(--ink); margin: 0 0 14px; }
.book-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.book-tip__label { display: block; font-size: 14px; color: var(--ink-soft); margin-bottom: 6px; }
.book-ok { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; padding: 12px 16px; border-radius: 8px; font-size: 14px; }
.book-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 0 0 24px; }
.book-actions form { margin: 0; }
.book-submit { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.book-submit--secondary { background: transparent; color: var(--brand); border: 1px solid var(--brand); }
.book-submit--danger { background: #b91c1c; }
/* The cancel's question on the page (book-flow.ts), in place of the browser's box. */
.book-confirm { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.book-confirm p { flex-basis: 100%; margin: 0; font-weight: 600; }
.book-waitlist-link { text-align: center; margin: 8px 0 0; }
.book-linkbtn { background: none; border: none; padding: 4px; color: var(--ink-soft); text-decoration: underline; font: inherit; font-size: 14px; cursor: pointer; }
.book-linkbtn:hover { color: var(--ink); }
#book-waitlist { display: flex; flex-direction: column; gap: 14px; }
#book-waitlist label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--ink-soft); }
#book-waitlist input[type="text"], #book-waitlist input[type="email"], #book-waitlist input[type="date"] { padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 16px; font-family: inherit; }

/* ── A service's own page (views/sections/service/*, server/site/servicePages.ts) ──────────────────────────────────────── */
.service-detail { container: service-detail / inline-size; padding: var(--space) 0 calc(var(--space) * .6); background: var(--paper); }
.service-detail__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.service-detail__grid > * { min-width: 0; }
.service-detail__main:only-child { grid-column: 1 / -1; max-width: 760px; }
.service-detail__included:only-child { grid-column: 1 / -1; }
.service-detail__text { font-size: 18px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 18px; max-width: 62ch; }
.service-detail__title { font-family: 'Barlow Condensed', Georgia, serif; font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); margin: 32px 0 16px; }
.service-detail__main > .service-detail__title:first-child, .service-detail__included .service-detail__title { margin-top: 0; }
.service-detail__included { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: clamp(22px, 3vw, 32px); }
.service-detail__list { list-style: none; margin: 0; padding: 0; }
.service-detail__list li { position: relative; padding: 12px 0 12px 34px; border-top: 1px solid var(--line); color: var(--ink); font-size: 16.5px; line-height: 1.45; }
.service-detail__list li:first-child { border-top: 0; padding-top: 0; }
.service-detail__list li::before { content: ''; position: absolute; left: 0; top: 14px; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); }
.service-detail__list li::after { content: ''; position: absolute; left: 7px; top: 18px; width: 5px; height: 9px; border: solid #ffffff; border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); }
.service-detail__list li:first-child::after { top: 6px; }
.service-detail__list li:first-child::before { top: 2px; }
.service-detail__parts { margin: 0; }
.service-detail__part { padding: 16px 0; border-top: 1px solid var(--line); scroll-margin-top: 110px; }
.service-detail__part:last-child { border-bottom: 1px solid var(--line); }
.service-detail__part dt { font-weight: 700; font-size: 18px; color: var(--ink); }
.service-detail__part dd { margin: 6px 0 0; color: var(--ink-soft); font-size: 16.5px; line-height: 1.6; }
.service-detail__part:target dt { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.service-others { padding: calc(var(--space) * .6) 0 var(--space); background: var(--paper); }
.service-others__title { font-family: 'Barlow Condensed', Georgia, serif; font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; margin: 0 0 18px; color: var(--ink); }
.service-others__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.service-others__link { display: inline-block; padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font-weight: 600; font-size: 15px; }
.service-others__link:hover { border-color: var(--ink); }
/* each block lays itself out by its own width (a container query), not only the screen's */
@container service-detail (max-width: 860px) { .service-detail__grid { grid-template-columns: 1fr; } }

/* ── Why choose us (views/sections/why_choose/grid.ejs): the owner's own reasons, laid out by the block's own width ───── */
.why-choose { container: why-choose / inline-size; padding: var(--space) 0; background: var(--paper); }
.why-choose__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@container why-choose (min-width: 620px) { .why-choose__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container why-choose (min-width: 980px) { .why-choose__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.why-choose__item { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 26px 26px 28px; }
.why-choose__mark { display: block; font-family: 'Barlow Condensed', Georgia, serif; font-size: 15px; font-weight: 600; letter-spacing: .1em; color: var(--accent-ink); margin-bottom: 14px; }
.why-choose__title { font-family: 'Barlow Condensed', Georgia, serif; font-size: 22px; font-weight: 600; line-height: 1.2; margin: 0 0 8px; color: var(--ink); }
.why-choose__desc { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }

/* ── Testimonials carousel (views/sections/testimonials/carousel.ejs) ─────────────────────────────────────────────────── */
.testimonials-carousel { container: testimonials-carousel / inline-size; padding: var(--space) 0; background: var(--paper); }
.testimonials-carousel__head { max-width: 720px; margin: 0 auto 36px; text-align: center; }
.testimonials-carousel__title { font-family: 'Barlow Condensed', Georgia, serif; font-size: clamp(30px, 4vw, 46px); font-weight: 600; line-height: 1.1; margin: 0 0 12px; color: var(--ink); }
.testimonials-carousel__intro { margin: 0; color: var(--ink-soft); font-size: 18px; }
.testimonials-carousel__track { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; }
.testimonials-carousel__track:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) { .testimonials-carousel__track { scroll-behavior: smooth; } }
.testimonials-carousel__slide { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; }
@container testimonials-carousel (min-width: 900px) { .testimonials-carousel__slide { flex-basis: calc((100% - 20px) / 2); } }
.testimonials-carousel__card { margin: 0; height: 100%; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: clamp(24px, 4cqi, 40px); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.testimonials-carousel__quote { margin: 0; font-family: 'Barlow Condensed', Georgia, serif; font-size: clamp(19px, 2.6cqi, 26px); line-height: 1.45; color: var(--ink); }
.testimonials-carousel__who { display: flex; align-items: center; gap: 14px; }
.testimonials-carousel__photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.testimonials-carousel__author { display: block; font-weight: 700; color: var(--ink); }
.testimonials-carousel__role { display: block; font-size: 14px; color: var(--muted); }
.testimonials-carousel__controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 24px; }
.testimonials-carousel__controls[hidden] { display: none; }
.testimonials-carousel__btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.testimonials-carousel__btn:hover { border-color: var(--ink); }
.testimonials-carousel__btn:focus-visible, .testimonials-carousel__dot:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.testimonials-carousel__dots { display: flex; gap: 6px; }
/* a dot is 12px to see and 24px to hit */
.testimonials-carousel__dot { width: 24px; height: 24px; border: 0; background: none; padding: 0; cursor: pointer; position: relative; }
.testimonials-carousel__dot::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--line); border: 1px solid var(--muted); box-sizing: border-box; }
.testimonials-carousel__dot[aria-current="true"]::before { background: var(--brand); border-color: var(--brand); }

/* ── Map: where to find us (views/sections/map/area.ejs) — a drawing and plain links; nothing loads from a map provider ──── */
.map-area { container: map-area / inline-size; padding: var(--space) 0; background: var(--paper); }
.map-area__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 5cqi, 56px); align-items: stretch; }
@container map-area (min-width: 760px) { .map-area__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.map-area__title { font-family: 'Barlow Condensed', Georgia, serif; font-size: clamp(30px, 4.2cqi, 46px); font-weight: 600; line-height: 1.1; margin: 0 0 14px; color: var(--ink); }
.map-area__intro { margin: 0 0 22px; font-size: 18px; color: var(--ink-soft); max-width: 46ch; }
.map-area__address, .map-area__areas { display: block; font-style: normal; margin: 0 0 20px; }
.map-area__label { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.map-area__lines { display: block; font-size: 19px; color: var(--ink); }
.map-area__list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.map-area__list li { padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font-size: 15px; }
.map-area__all { font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--brand); text-decoration-thickness: 2px; }
.map-area__links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 26px; }
.map-area__alt { font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.map-area__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.map-area__art { display: block; min-height: 240px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--white); }
.map-area__art svg { display: block; width: 100%; height: 100%; min-height: 240px; }
.map-area__roads { stroke: var(--line); }
.map-area__roads path { stroke: color-mix(in srgb, var(--muted) 38%, var(--white)); }
.map-area__blocks rect { fill: color-mix(in srgb, var(--muted) 14%, var(--white)); }
.map-area__halo { fill: color-mix(in srgb, var(--brand) 22%, transparent); }
.map-area__pin path { fill: var(--brand); }
.map-area__dot { fill: #ffffff; }

/* ── Latest blog posts (views/sections/blog_preview/latest.ejs) ───────────────────────────────────────────────────────── */
.blog-preview { container: blog-preview / inline-size; padding: var(--space) 0; background: var(--paper); }
.blog-preview__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: 32px; }
.blog-preview__title { font-family: 'Barlow Condensed', Georgia, serif; font-size: clamp(30px, 4.2cqi, 46px); font-weight: 600; line-height: 1.1; margin: 0; color: var(--ink); }
.blog-preview__intro { margin: 10px 0 0; font-size: 18px; color: var(--ink-soft); max-width: 52ch; }
.blog-preview__all { font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--brand); text-decoration-thickness: 2px; }
.blog-preview__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@container blog-preview (min-width: 640px) { .blog-preview__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container blog-preview (min-width: 1000px) { .blog-preview__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.blog-preview__card { display: flex; flex-direction: column; height: 100%; background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; color: var(--ink); }
.blog-preview__card:hover { border-color: var(--ink); }
.blog-preview__cover { display: block; aspect-ratio: 16 / 10; background-size: cover; background-position: center; background-color: var(--line); }
.blog-preview__body { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 26px; flex: 1; }
.blog-preview__date { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; color: var(--muted); }
.blog-preview__post { font-family: 'Barlow Condensed', Georgia, serif; font-size: 22px; font-weight: 600; line-height: 1.2; color: var(--ink); }
.blog-preview__excerpt { font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
.blog-preview__more { margin-top: auto; padding-top: 6px; font-weight: 600; font-size: 15px; color: var(--ink); }
.blog-preview__card:hover .blog-preview__more { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--brand); }

/* The parts of a service, linked from its card to their spot on the service's own page */
.service-parts { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.service-parts a { display: inline-block; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--ink-soft); text-decoration: none; }
.service-parts a:hover, .service-parts a:focus-visible { border-color: var(--brand); color: var(--brand); }

/* Gallery filter bar: shown by the section's script once it runs; narrow, one swipeable row; wide, wrapped and centred */
.gallery-section--filter { container: gallery / inline-size; }
.gallery-filter[hidden], .gallery-grid__item[hidden], .gallery-filter__status[hidden] { display: none; }
.gallery-filter { display: flex; gap: 8px; margin: 0 0 24px; overflow-x: auto; padding-bottom: 4px; }
.gallery-filter__btn { flex: none; min-height: 44px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-soft); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.gallery-filter__btn:hover { border-color: var(--ink); color: var(--ink); }
.gallery-filter__btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.gallery-filter__btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.gallery-filter__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@container gallery (min-width: 640px) { .gallery-filter { flex-wrap: wrap; justify-content: center; overflow: visible; } }

/* About "values": the heading on one side, the owner's values as ruled rows on the other (stacked when the block is narrow) */
.about-values { container: about-values / inline-size; padding: var(--space) 0; background: var(--paper); }
.about-values__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@container about-values (min-width: 760px) { .about-values__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; } }
.about-values__list { margin: 0; }
.about-values__item { padding: 20px 0; border-top: 1px solid var(--line); }
.about-values__item:last-child { border-bottom: 1px solid var(--line); }
.about-values__title { font-family: 'Barlow Condensed', Georgia, serif; font-size: 22px; font-weight: 600; line-height: 1.2; color: var(--ink); }
.about-values__desc { margin: 8px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }

/* "Call now": a button fixed to the corner of a phone's screen; nowhere else. The page keeps room beneath its last line, so the
   footer is never under it, and it slides away while a form is on screen (base.ejs script). */
.call-now { display: none; }
@media (max-width: 767px) {
  .call-now { display: inline-flex; align-items: center; gap: 8px; position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 90; min-height: 48px; padding: 0 20px; box-shadow: 0 8px 22px -8px rgba(0,0,0,.45); text-decoration: none; transition: opacity .18s, transform .18s; }
  .call-now--away { opacity: 0; transform: translateY(12px); pointer-events: none; }
  body:has(.call-now) { padding-bottom: 80px; }
}
@media (prefers-reduced-motion: reduce) { .call-now { transition: none; } }
@media print { .call-now { display: none; } }

/* The extra section layouts (server/site/layouts.ts lists which a section offers). Only shared tokens: the page's
   colours (--paper --white --ink --ink-soft --muted --line), the brand and accent, the type and the spacing. Each
   adapts to its own width with a container query, not the screen's. */

/* ── hero: photo collage ── */
.hero--collage { padding: var(--space) 0; background: var(--paper); color: var(--ink); }
.hero-collage { display: grid; gap: 40px; align-items: center; grid-template-columns: 1fr; container-type: inline-size; }
@container (min-width: 820px) { .hero-collage { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; } }
.hero-collage__copy .hero__title { color: var(--ink); }
.hero-collage__copy .hero__subtitle { color: var(--ink-soft); }
.hero-collage__pics { display: grid; gap: 12px; grid-template-columns: 1.2fr 1fr; grid-template-rows: 200px 200px; }
.hero-collage__pic { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.hero-collage__pic--1 { grid-row: 1 / 3; }
.hero-collage__pics--2 .hero-collage__pic--2 { grid-row: 1 / 3; }
.hero-collage__pics--3 .hero-collage__pic--3 { grid-column: 2; }
@container (min-width: 820px) { .hero-collage__pics { grid-template-rows: 240px 240px; } }

/* ── hero: minimal, text-led ── */
.hero--textled { padding: calc(var(--space) * 1.2) 0 var(--space); background: var(--paper); color: var(--ink); }
.hero-textled { max-width: 980px; }
.hero-textled__title { font-family: var(--font-display, inherit); font-size: clamp(2.4rem, 6.5vw, 5rem); line-height: 1.03; letter-spacing: -.02em; margin: 14px 0 22px; color: var(--ink); }
.hero-textled__sub { font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: 40em; color: var(--ink-soft); margin: 0 0 28px; }
.hero-textled__stats { display: flex; flex-wrap: wrap; gap: 28px 56px; margin: 44px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.hero-textled__stats dd { margin: 0; font-size: 1.8rem; font-weight: 700; color: var(--ink); }
.hero-textled__stats dt { order: 2; font-size: .85rem; color: var(--muted); }
.hero-textled__stats > div { display: flex; flex-direction: column; }

/* ── hero: half and half, with the enquiry form ── */
.hero--splitform { padding: var(--space) 0; background: var(--paper); color: var(--ink); }
.hero-splitform { display: grid; gap: 36px; align-items: center; grid-template-columns: 1fr; container-type: inline-size; }
@container (min-width: 760px) { .hero-splitform { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; } }
.hero-splitform__copy .hero__title { color: var(--ink); }
.hero-splitform__copy .hero__subtitle { color: var(--ink-soft); }
.hero-splitform__form { position: relative; background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 24px; display: grid; gap: 14px; }
.hero-splitform__form label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 4px; }
.hero-splitform__form input, .hero-splitform__form textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 8px; }

/* ── gallery: masonry, project cards, before and after ── */
.gallery-masonry { columns: 3 260px; column-gap: 14px; }
.gallery-masonry__item { margin: 0 0 14px; break-inside: avoid; }
.gallery-masonry__item img { width: 100%; height: auto; border-radius: 8px; }
.gallery-masonry__item figcaption { font-size: .85rem; color: var(--muted); padding-top: 6px; }
.gallery-cards { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.gallery-cards__card { background: var(--white); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.gallery-cards__card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery-cards__body { padding: 16px 18px 18px; }
.gallery-cards__body h3 { margin: 0 0 4px; font-size: 1.05rem; color: var(--ink); }
.gallery-cards__body p { margin: 0; font-size: .9rem; color: var(--muted); }
/* ── gallery: slideshow (one photo at a time; arrows, dots and swipe; no autoplay) ── */
.gallery-slideshow__track { list-style: none; margin: 0 auto; padding: 0; max-width: 900px; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.gallery-slideshow__track::-webkit-scrollbar { display: none; }
.gallery-slideshow__track:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) { .gallery-slideshow__track { scroll-behavior: smooth; } }
.gallery-slideshow__slide { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; }
.gallery-slideshow__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
/* One frame for every photo: the same width and height on every slide (4:3), each photo fitted inside it whole, so the slides
   never change size as they move, whatever shape the photos are. */
.gallery-slideshow__figure img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: var(--white); border: 1px solid var(--line); }
.gallery-slideshow__open { display: block; width: 100%; cursor: zoom-in; }
/* The viewer: one photo large over the page. Wide enough to read a page on a computer; the full width of a phone (pinch to zoom). */
.gallery-viewer { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: rgba(0, 0, 0, .86); }
.gallery-viewer[hidden] { display: none; }
.gallery-viewer__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--white); color: var(--ink); }
.gallery-viewer__caption { font-weight: 700; min-width: 0; }
.gallery-viewer__actions { display: flex; gap: 8px; flex: none; }
.gallery-viewer__btn { width: 44px; height: 44px; border: 2px solid var(--ink); background: var(--white); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.gallery-viewer__btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.gallery-viewer__scroll { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 16px 0 32px; }
.gallery-viewer__img { display: block; width: min(100%, 1100px); height: auto; margin: 0 auto; background: var(--white); }
.gallery-viewer-open { overflow: hidden; }
.gallery-slideshow__open:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.gallery-slideshow__caption { font-weight: 700; color: var(--ink); text-align: center; }
.gallery-slideshow__hint { display: block; margin-top: 4px; font-weight: 400; font-size: .85rem; color: var(--muted); }
.gallery-slideshow__controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; }
.gallery-slideshow__controls[hidden] { display: none; }
.gallery-slideshow__btn { width: 48px; height: 48px; border: 2px solid var(--ink); background: var(--white); color: var(--ink); font-size: 20px; /* the page's own ink on white: readable whatever the brand colour */ line-height: 1; cursor: pointer; }
.gallery-slideshow__btn:focus-visible, .gallery-slideshow__dot:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.gallery-slideshow__dots { display: flex; gap: 6px; }
.gallery-slideshow__dot { width: 24px; height: 24px; border: 0; background: none; padding: 0; cursor: pointer; position: relative; }
.gallery-slideshow__dot::before { content: ''; position: absolute; inset: 6px; background: var(--line); border: 1px solid var(--muted); box-sizing: border-box; }
.gallery-slideshow__dot[aria-current="true"]::before { background: var(--brand); border-color: var(--brand); }

.gallery-pairs { display: grid; gap: 28px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.gallery-pairs__pair { margin: 0; }
.gallery-pairs__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gallery-pairs__imgs > div { position: relative; }
.gallery-pairs__imgs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.gallery-pairs__imgs span { position: absolute; left: 8px; top: 8px; background: rgba(0,0,0,.72); color: #fff; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; }
.gallery-pairs__pair figcaption { padding-top: 8px; font-size: .9rem; color: var(--ink-soft); }

/* ── services: list, tiles, featured ── */
.services--list, .services--tiles, .services--featured { padding: var(--space) 0; background: var(--paper); color: var(--ink); }
.svc-list { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.svc-list__row { display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 22px 0; border-top: 1px solid var(--line); }
.svc-list__row:last-child { border-bottom: 1px solid var(--line); }
.svc-list__n { font-variant-numeric: tabular-nums; color: var(--accent-ink); font-weight: 700; }
.svc-list__title { margin: 0 0 6px; font-size: 1.25rem; }
.svc-list__main p { margin: 0; color: var(--ink-soft); }
.svc-tiles { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.svc-tile { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 22px; text-align: center; }
.svc-tile__mark { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; background: var(--brand); color: var(--white); font-size: 1.5rem; font-weight: 700; background-size: cover; background-position: center; }
.svc-tile__title { margin: 0 0 6px; font-size: 1.1rem; }
.svc-tile__desc { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.svc-featured { display: grid; gap: 28px; grid-template-columns: 1fr; container-type: inline-size; }
@container (min-width: 760px) { .svc-featured { grid-template-columns: 1.4fr 1fr; } }
.svc-featured__lead { background: var(--white); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.svc-featured__img { aspect-ratio: 16 / 9; background-size: cover; background-position: center; }
.svc-featured__body { padding: 24px; }
.svc-featured__body h3 { margin: 0 0 8px; font-size: 1.6rem; }
.svc-featured__body p { color: var(--ink-soft); }
.svc-featured__rest { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; }
.svc-featured__rest li { padding: 16px 0; border-top: 1px solid var(--line); }
.svc-featured__rest li:first-child { border-top: 0; padding-top: 0; }
.svc-featured__rest h3 { margin: 0 0 4px; font-size: 1.1rem; }
.svc-featured__rest p { margin: 0; color: var(--ink-soft); font-size: .93rem; }

/* ── testimonials: wall, one featured ── */
.testimonials-section--wall, .testimonials-section--featured { padding: var(--space) 0; background: var(--paper); color: var(--ink); }
.quote-wall { columns: 3 280px; column-gap: 18px; }
.quote-wall__card { break-inside: avoid; margin: 0 0 18px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.quote-lead { margin: 0; text-align: center; }
.quote-lead__text { margin: 0 0 20px; font-family: var(--font-display, inherit); font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 1.25; color: var(--ink); }
.quote-lead .testimonial-card__attribution { justify-content: center; }
.quote-more { list-style: none; margin: 36px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); display: grid; gap: 12px; color: var(--ink-soft); }
.quote-more q { quotes: '\201C' '\201D'; } .quote-more cite { color: var(--muted); font-style: normal; }

/* ── about: timeline, big portrait ── */
.story--timeline, .story--feature { padding: var(--space) 0; background: var(--paper); color: var(--ink); }
.timeline-list { list-style: none; margin: 40px 0 0; padding: 0 0 0 22px; border-left: 2px solid var(--line); display: grid; gap: 22px; }
.timeline-list li { position: relative; display: grid; grid-template-columns: 84px 1fr; gap: 12px; }
.timeline-list li::before { content: ''; position: absolute; left: -29px; top: .45em; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); }
.timeline-list__year { font-weight: 700; color: var(--accent-ink); }
.story--feature .story-feature__photo { aspect-ratio: 21 / 9; background-size: cover; background-position: center; border-radius: 12px; margin-bottom: 36px; }
.story-feature__copy { max-width: 720px; margin: 0 auto; }

}
/* What every whole look without a frame (SITE_DESIGN_SPECS build 'whole', no frame: foundry, heritage, studio) shares, so a
 * fix is made once. Not a design: siteStylesheet lays it between the base and the look's own sheet, so the look wins.
 *
 * The base was written for a light page with white cards and the brand colour doing double duty — as a fill and as text. A
 * look restyles for dark, and there the brand colour as text on a dark card (a price, a date, a chip) and white text placed
 * on a fixed dark bar both stopped reading, whatever the owner's colour. Here each is given the form that reads:
 *   --brand-text  the owner's colour as TEXT on the look's own grounds: its _ON_LIGHT form darkened a further step so it
 *                 clears 4.5:1 on the darkest paper too, and its _ON_DARK form in dark mode
 *   #ffffff / #0f172a  the text that reads on a fill of the owner's colour
 * Tokens the look defines: --bg --sf --tx --ln.
 */
:root {
  --brand-text: color-mix(in srgb, #b82124 78%, #000000);
  /* the before/after panel's ground (before_after/slider.ejs asks for var(--surface)) */
  --surface: var(--bg);
}
@media (prefers-color-scheme: dark) { :root { --brand-text: #d57c7e; } }

/* ── The brand colour as text ─────────────────────────────────────────────── */
.menu-item__price, .schedule-strip__date, .deals-card__title, .deals__expires-label, .pr-card__price, .package-card__price-num,
.cg-card__years, .cov-card__row--ours .cov-card__row-label, .quote__estimate-amount, .catering__sidebar-num, .cf-done h3,
.cf-progress__step.is-current, .strain-card__stat .mono, .book-thanks__addcal a, .blog-post__body a, .book-submit--secondary,
.book-linkbtn:hover, .service-card__cta { color: var(--brand-text); }
.pr-card__includes li::before, .package-card__includes li::before, .catering__sidebar-list li::before { color: var(--brand-text); }
.cg-chip:hover, .strain__filter:hover { color: var(--brand-text); }

/* ── Text on a fill of the owner's colour ─────────────────────────────────── */
.book-date.is-selected, .book-slot.is-selected, .book-submit:not(.book-submit--danger):not(.book-submit--secondary), .book-progress__step.is-active, .book-tip-btn.is-active,
.deals-card__badge, .cf-progress__step.is-current span, .cf-progress__step.is-done span, .cg-chip.is-active,
.package-card__badge, .text-size-toggle button.is-active, .emergency-bar:not(.emergency-bar--after-hours) .emergency-bar__call, .strain__filter.is-active { color: #ffffff; }
.emergency-bar--after-hours .emergency-bar__call { color: #ffffff; }
.book-submit--secondary { color: var(--brand-text); }
/* …and on the accent: the base put the brand's dark shade on it, which is dark on a dark accent */
.menu__chip:not([class*="--"]), .strain__type:not([class*="--"]), .schedule-strip__tag--default, .package-card__badge--alt { color: #0f172a; }
/* (the base's own rules sit in a CSS layer, which any unlayered rule beats whatever its weight — so a rule here that names a class with
   variants must leave the variants out, or it would repaint them) */

/* ── White text on a bar that is dark whichever mode it is ────────────────── */
/* The base says var(--white) for it; a look points --white at the card ground (so cards go dark), which made it dark text. */
.storm-alert__heading, .storm-alert__close:hover, .emergency-bar__heading { color: #ffffff; }

/* ── Booking pages ───────────────────────────────────────────────────────── */
/* "Cancel booking": red fill, white text (the base's .book-submit takes var(--white), which a look points at the card ground);
   the confirmation tick: white on the base's #22c55e was 2.3:1 */
.book-submit--danger { color: #ffffff; }
.book-thanks__check { background: #15803d; color: #ffffff; }

/* ── Before / after (before_after/slider.ejs: its own <style> comes after this sheet, so the class is doubled) ─ */
.ba-chip.ba-chip { background: var(--sf); color: var(--tx); border-color: var(--ln); }
.ba-chip.ba-chip.is-active { background: var(--tx); border-color: var(--tx); color: var(--bg); }
.ba-meta__material.ba-meta__material { color: var(--brand-text); }

/* The financing card is a dark panel in every whole look, in light and in dark. The base paints the slider thumb with
   var(--white), which a look flips to a dark colour for dark mode: the thumb then vanished into the card. */
.financing input[type="range"]::-webkit-slider-thumb { background: #ffffff; }
.financing input[type="range"]::-moz-range-thumb { background: #ffffff; }
.financing input[type="range"]::-webkit-slider-runnable-track { background: rgba(255, 255, 255, 0.38); }
.financing input[type="range"]::-moz-range-track { background: rgba(255, 255, 255, 0.38); }

/* ── A store's shop pages (store.css, which sits under the look in the base layer) ─────────────────────────────────────────
   The shop's surfaces follow the look's own: its page, its cards, its hairlines, in light and in dark. A look then gives the
   shop its character in its own sheet (.product-card, .product-add, .cart-summary…). */
:root {
  --store-page: var(--bg);
  --store-card: var(--sf);
  --store-tint: var(--sf2);
  --store-tint2: var(--sf2);
  --store-line: var(--ln);
  --store-edge: color-mix(in srgb, var(--tx) 34%, var(--sf));
  --store-danger: #b91c1c;
  --store-danger-bg: color-mix(in srgb, #dc2626 12%, var(--sf));
  --store-ok-bg: color-mix(in srgb, #16a34a 18%, var(--sf));
  --store-wait: #92400e;
  --store-wait-bg: color-mix(in srgb, #d97706 16%, var(--sf));
}
@media (prefers-color-scheme: dark) {
  :root { --store-danger: #fca5a5; --store-ok: #86efac; --store-wait: #fcd34d; }
}
/* the owner's colour as a fill carries its own ink; as a word it is the look's readable form */
.header-cart__count, .product-badge--featured, .variant-option.is-selected { background: #b82124; color: #ffffff; border-color: #b82124; }
.header-cart:hover, .store-back-link:hover, .product-viewcart:hover, .cart-summary__continue:hover { color: var(--brand-text); }
.product-eyebrow { color: var(--brand-text); }
.product-badge--soldout { background: #1e293b; color: #ffffff; }
.cart-summary__input, .qty-stepper__input, .product-review-form input[type="text"], .product-review-form input[type="email"], .product-review-form textarea { background: var(--store-card); color: var(--ink); }
.qty-stepper__btn { color: var(--ink); }
.product-viewcart__count { background: var(--store-tint); color: var(--ink); }

/* FOUNDRY — a whole look for a contractor who works with their hands: poured-concrete grounds, a steel-black header,
 * hard square edges, stamped condensed capitals, numbered spec-sheet rows and a hazard-stripe signature.
 *
 * A whole look (server/core/vertical.ts SITE_DESIGN_SPECS build 'whole'): laid over the base, which sits beneath it as a
 * CSS layer. Type: Barlow Condensed (display) + Barlow (text) + IBM Plex Mono (labels, numerals).
 * Light and dark follow the device (prefers-color-scheme). The owner's colour is the fill, the stripe and the rule; its
 * text forms are #b82124 / #d57c7e, and the text on a fill is #ffffff.
 * Hover and active states move and cast; they never change a fill's lightness, so the text on it keeps its contrast.
 */

:root {
  --bg: #ecebe7;          /* poured concrete */
  --sf: #ffffff;          /* a plate laid on it */
  --sf2: #dddbd4;         /* a second concrete */
  --tx: #15171a;
  --tx2: #363a40;
  --tx3: #525760;
  --ln: #bcb9b0;
  --edge: #15171a;        /* the hard outline of every plate */
  --steel: #101113;       /* the header, the footer, the dark panels — dark in both modes */
  --on-steel: #f4f2ec;
  --on-steel-2: #cfd0cc;
  --brand-ink: #b82124;
  --brand-on-steel: #d57c7e;
  --on-brand: #ffffff;
  --focus: #15171a;
  --grid: rgba(21, 23, 26, .075);
  --f-display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --f-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-display: var(--f-display);
  /* the base's tokens, pointed at this look so anything the look doesn't restyle still reads */
  --paper: var(--bg); --white: var(--sf); --ink: var(--tx); --ink-soft: var(--tx2); --muted: var(--tx3); --line: var(--ln);
  --brand-deep: var(--steel);
  --accent-ink: var(--brand-ink);
  --max: 1240px;
  --space: clamp(64px, 8vw, 112px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121315; --sf: #1b1d20; --sf2: #0c0d0e;
    --tx: #f1efe9; --tx2: #cbccc8; --tx3: #a3a6ab; --ln: #34373c; --edge: #f1efe9; --focus: #f1efe9; --grid: rgba(241, 239, 233, .07);
    --brand-ink: #d57c7e;
    color-scheme: dark;
  }
}

html { scroll-padding-top: 96px; }
body { font-family: var(--f-body); font-size: 17px; line-height: 1.6; background: var(--bg); color: var(--tx); }
::selection { background: #b82124; color: #ffffff; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.site-header :focus-visible, .site-footer :focus-visible, .cta--split .cta__split-copy :focus-visible, .cta--banner :focus-visible,
.stats-bar :focus-visible, .hero--full-bleed :focus-visible { outline-color: #ffffff; }

/* ── Header: a steel bar with a brand-colour rule under it ──────────────────── */
.site-header { background: var(--steel); border-bottom: 5px solid #b82124; color: var(--on-steel); }
.header-inner { padding: 14px 24px; gap: 28px; }
.brand { font-family: var(--f-display); font-weight: 800; font-size: 28px; line-height: 1; letter-spacing: .03em; text-transform: uppercase; color: var(--on-steel); display: inline-flex; align-items: center; gap: 12px; }
.brand::before { content: ''; width: 18px; height: 18px; background: #b82124; flex: none; clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%); }
.brand--logo::before { display: none; }
.primary-nav { gap: 6px; margin-left: auto; }
.primary-nav a { color: var(--on-steel); font-family: var(--f-display); font-weight: 600; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; padding: 8px 12px; border-bottom: 3px solid transparent; }
.primary-nav a:hover, .primary-nav a[aria-current="page"] { color: var(--on-steel); border-bottom-color: #b82124; }
.header-cta { background: #b82124; color: #ffffff; border-radius: 0; padding: 12px 22px; font-family: var(--f-display); font-weight: 700; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; box-shadow: 4px 4px 0 var(--on-steel); transition: transform .12s, box-shadow .12s; }
.header-cta:hover { background: #b82124; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--on-steel); }
.header-cta:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--on-steel); }
.mobile-nav-toggle span { background: var(--on-steel); border-radius: 0; height: 3px; }
.mobile-nav { background: var(--steel); border-top: 1px solid #34373c; }
.mobile-nav a { color: var(--on-steel); font-family: var(--f-display); font-size: 24px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid #34373c; }
.mobile-nav a[aria-current="page"] { color: var(--brand-on-steel); }
.mobile-nav__cta { background: #b82124; color: #ffffff !important; border-radius: 0; font-size: 22px; padding: 14px 0; }

/* ── Buttons: square, thick-edged, they press ───────────────────────────────── */
.btn { font-family: var(--f-display); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border: 3px solid var(--edge); border-radius: 0; transition: transform .12s, box-shadow .12s; }
.btn--lg { padding: 13px 26px; font-size: 19px; border-radius: 0; }
.btn--xl { padding: 17px 34px; font-size: 22px; border-radius: 0; }
.btn--primary { background: #b82124; color: #ffffff; box-shadow: 5px 5px 0 var(--edge); }
.btn--primary:hover { background: #b82124; transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--edge); }
.btn--primary:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--edge); }
.btn--outline { background: var(--sf); color: var(--tx); border-color: var(--edge); }
.btn--outline:hover { background: var(--tx); color: var(--bg); transform: translate(-2px, -2px); box-shadow: 5px 5px 0 #b82124; }
.btn--outline:active { transform: translate(2px, 2px); box-shadow: none; }
.btn--ghost { background: rgba(16, 17, 19, .72); color: #ffffff; border: 3px solid #ffffff; backdrop-filter: none; }
.btn--ghost:hover { background: rgba(16, 17, 19, .9); transform: translate(-2px, -2px); box-shadow: 5px 5px 0 #ffffff; }
.btn--ghost:active { transform: translate(2px, 2px); box-shadow: none; }

/* ── Section heads ──────────────────────────────────────────────────────────── */
.section-head { text-align: left; max-width: none; margin: 0 0 clamp(36px, 5vw, 64px); padding-left: 22px; border-left: 10px solid #b82124; }
.section-title { font-family: var(--f-display); font-weight: 800; font-size: clamp(42px, 6vw, 84px); line-height: .94; letter-spacing: .005em; text-transform: uppercase; color: var(--tx); margin: 0 0 14px; max-width: 16ch; }
.section-intro { font-size: 19px; color: var(--tx2); max-width: 62ch; }
.hero__eyebrow, .story__eyebrow { font-family: var(--f-mono); font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--tx2); display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.hero__eyebrow::before, .story__eyebrow::before { content: ''; width: 12px; height: 12px; background: #b82124; border: 2px solid var(--edge); flex: none; }

/* ── Hero — full bleed: the photo, a steel scrim, the stripe ────────────────── */
.hero--full-bleed { min-height: clamp(640px, 90vh, 880px); align-items: flex-end; background-position: center; }
.hero--full-bleed::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: repeating-linear-gradient(-45deg, #b82124 0 16px, #101113 16px 32px); }
.hero--full-bleed .hero__scrim { background: linear-gradient(90deg, rgba(10, 11, 12, .9) 0%, rgba(10, 11, 12, .74) 52%, rgba(10, 11, 12, .3) 100%), linear-gradient(0deg, rgba(10, 11, 12, .6), rgba(10, 11, 12, 0) 40%); }
@media (max-width: 860px) { .hero--full-bleed .hero__scrim { background: linear-gradient(0deg, rgba(10, 11, 12, .94) 0%, rgba(10, 11, 12, .86) 60%, rgba(10, 11, 12, .72) 100%); } }
.hero--full-bleed .hero__inner { padding: 96px 24px 84px; }
.hero--full-bleed .hero__eyebrow { display: inline-flex; color: #ffffff; background: rgba(15, 23, 42, 0.8); border-left: 6px solid #f59e0b; border-radius: 0; padding: 8px 14px 8px 12px; }
.hero--full-bleed .hero__eyebrow::before { display: none; }
.hero--full-bleed .hero__title { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(48px, 8.2vw, 116px); line-height: .92; letter-spacing: .005em; color: #ffffff; max-width: 15ch; text-shadow: none; margin-bottom: 24px; }
.hero--full-bleed .hero__subtitle { font-size: clamp(18px, 1.6vw, 22px); color: #f4f2ec; max-width: 56ch; text-shadow: none; border-left: 4px solid #b82124; padding-left: 18px; }

/* ── Hero — centred + stat band: left-set on a blueprint grid ───────────────── */
.hero--centered { text-align: left; background: var(--bg); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 56px 56px; background-position: -1px -1px; padding: clamp(72px, 9vw, 128px) 0 0; }
.hero--centered .hero__centered-inner { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.hero--centered .hero__title { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(54px, 10vw, 150px); line-height: .88; letter-spacing: 0; color: var(--tx); max-width: 13ch; }
.hero--centered .hero__subtitle { margin: 28px 0 32px; max-width: 58ch; font-size: 21px; color: var(--tx2); }
.hero--centered .hero__subtitle--center { margin-left: 0; margin-right: 0; }
.hero--centered .hero__ctas--center { justify-content: flex-start; }
.hero__stat-band { background: var(--steel); color: var(--on-steel); margin-top: clamp(56px, 7vw, 96px); padding: 0; border-top: 5px solid #b82124; }
.hero__stat-band-inner { gap: 0; }
.hero__stat-band-item { text-align: left; padding: 28px 26px 30px; border-left: 3px solid #34373c; }
.hero__stat-band-item:first-child { border-left: 0; }
.hero__stat-band-num { font-family: var(--f-display); font-weight: 800; font-size: clamp(48px, 5.6vw, 84px); line-height: 1; letter-spacing: 0; color: var(--brand-on-steel); }
.hero__stat-band-label { font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; color: var(--on-steel-2); margin-top: 10px; }
@media (max-width: 720px) { .hero__stat-band-item:nth-child(odd) { border-left: 0; } .hero__stat-band-item:nth-child(n+3) { border-top: 3px solid #34373c; } }

/* ── Hero — split: the picture cut on a diagonal ────────────────────────────── */
.hero--split { background: var(--sf); padding: clamp(56px, 7vw, 104px) 0; border-top: 3px solid var(--edge); border-bottom: 3px solid var(--edge); }
.hero--split .hero__title { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(44px, 6.4vw, 92px); line-height: .94; letter-spacing: .005em; color: var(--tx); }
.hero--split .hero__subtitle { color: var(--tx2); font-size: 20px; }
.hero--split .hero__image { border-radius: 0; min-height: 520px; border: 3px solid var(--edge); box-shadow: 16px 16px 0 #b82124; clip-path: none; }
.hero--split-flip .hero__split-grid { direction: rtl; }
.hero__stats { border-top: 0; padding-top: 0; gap: 0; margin-top: 36px; border: 3px solid var(--edge); }
.hero__stat { padding: 16px 18px; border-left: 3px solid var(--edge); background: var(--bg); }
.hero__stat:first-child { border-left: 0; }
.hero__stat-num { font-family: var(--f-display); font-weight: 800; font-size: 44px; line-height: 1; color: var(--tx); letter-spacing: 0; }
.hero__stat-label { font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--tx2); margin-top: 6px; }
@media (max-width: 860px) { .hero--split .hero__image { box-shadow: 8px 8px 0 #b82124; margin-right: 8px; } }

/* ── Services — cards: spec plates, numbered ────────────────────────────────── */
.services { background: var(--bg); }
.services--cards .services__grid { counter-reset: svc; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; }
.service-card { counter-increment: svc; position: relative; /* the number tab sits above the picture, in the flow: absolute, it covered the first letter of a card with no picture */ background: var(--sf); border: 3px solid var(--edge); border-radius: 0; box-shadow: 8px 8px 0 var(--edge); transition: transform .14s, box-shadow .14s; }
.service-card:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 #b82124; }
.service-card::before { content: counter(svc, decimal-leading-zero); display: block; width: fit-content; background: #b82124; color: #ffffff; font-family: var(--f-mono); font-weight: 600; font-size: 15px; letter-spacing: .08em; padding: 8px 14px; border-right: 3px solid var(--edge); border-bottom: 3px solid var(--edge); }
.service-card__image { aspect-ratio: 4 / 3; border-bottom: 3px solid var(--edge); filter: grayscale(.55) contrast(1.05); transition: filter .25s; background-color: var(--sf2); }
.service-card:hover .service-card__image { filter: none; }
.service-card__body { padding: 22px 24px 26px; }
.service-card__title { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 31px; line-height: 1; letter-spacing: .01em; color: var(--tx); margin-bottom: 12px; }
.service-card__desc { font-size: 16.5px; color: var(--tx2); line-height: 1.55; }
.service-card__link { font-family: var(--f-mono); font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--tx); border-bottom: 4px solid #b82124; padding-bottom: 3px; display: inline-block; }
.service-card__link:hover { background: #b82124; color: #ffffff; }

/* ── Services — alternating: huge index, offset block shadow ────────────────── */
.services--alternating .service-row { gap: clamp(40px, 6vw, 88px); margin-bottom: clamp(64px, 8vw, 112px); }
.service-row__image { border-radius: 0; aspect-ratio: 4 / 3; border: 3px solid var(--edge); box-shadow: 16px 16px 0 #b82124; background-color: var(--sf2); }
.service-row__index { font-family: var(--f-display); font-weight: 800; font-size: clamp(84px, 11vw, 150px); line-height: .8; letter-spacing: 0; color: var(--brand-ink); margin-bottom: 8px; }
.service-row__title { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(36px, 4.6vw, 62px); line-height: .95; letter-spacing: .005em; color: var(--tx); margin-bottom: 18px; }
.service-row__desc { font-size: 18.5px; color: var(--tx2); }
.service-row__bullets { list-style: none; padding: 0; margin: 0 0 24px; border-top: 3px solid var(--edge); }
.service-row__bullets li { position: relative; padding: 11px 0 11px 30px; border-bottom: 1px solid var(--ln); color: var(--tx); font-size: 16.5px; margin: 0; }
.service-row__bullets li::before { content: ''; position: absolute; left: 2px; top: 19px; width: 12px; height: 12px; background: #b82124; border: 2px solid var(--edge); }
.service-row__link { font-family: var(--f-mono); font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--tx); border-bottom: 4px solid #b82124; }
.service-row__link:hover { background: #b82124; color: #ffffff; }

/* ── CTA ────────────────────────────────────────────────────────────────────── */
.cta--banner { background: var(--steel); color: var(--on-steel); padding: clamp(56px, 7vw, 96px) 0; position: relative; border-top: 5px solid #b82124; }
.cta--banner::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: repeating-linear-gradient(-45deg, #b82124 0 14px, #101113 14px 28px); }
.cta__heading { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(40px, 5.6vw, 80px); line-height: .94; letter-spacing: .005em; }
.cta--banner .cta__heading { color: var(--on-steel); }
.cta__subtitle { font-size: 19px; }
.cta--banner .cta__subtitle { color: var(--on-steel-2); }
.cta--banner .btn--primary { background: #b82124; color: #ffffff; border-color: #ffffff; box-shadow: 5px 5px 0 #ffffff; }
.cta--banner .btn--primary:hover { background: #b82124; box-shadow: 8px 8px 0 #ffffff; }
.cta--split { background: var(--steel); border-top: 5px solid #b82124; }
.cta__split-grid { min-height: clamp(440px, 60vh, 600px); }
.cta__split-image { background-color: var(--sf2); border-right: 5px solid #b82124; }
.cta__split-copy { background: var(--steel); padding: clamp(40px, 6vw, 88px); }
.cta--split .cta__heading { color: var(--on-steel); }
.cta--split .cta__subtitle { color: var(--on-steel-2); font-size: 18.5px; }
.cta__bullets { margin-bottom: 30px; border-top: 3px solid #34373c; }
.cta__bullets li { color: var(--on-steel); padding: 12px 0 12px 32px; border-bottom: 1px solid #34373c; }
.cta__bullets li::before { content: ''; left: 2px; top: 20px; width: 12px; height: 12px; background: #b82124; border: 2px solid #ffffff; }
.cta--split .btn--primary { border-color: #ffffff; box-shadow: 5px 5px 0 #ffffff; }
.cta--split .btn--primary:hover { box-shadow: 8px 8px 0 #ffffff; }
.cta__phone { font-family: var(--f-display); font-weight: 700; font-size: 26px; letter-spacing: .04em; color: var(--on-steel); border-left: 4px solid #b82124; padding-left: 18px; }
.cta__phone:hover { color: var(--brand-on-steel); }

/* ── About / story ──────────────────────────────────────────────────────────── */
.story { background: var(--bg); }
.story__portrait { border-radius: 0; border: 3px solid var(--edge); box-shadow: 14px 14px 0 #b82124; background-color: var(--sf2); }
.story__title { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(44px, 6vw, 84px); line-height: .94; letter-spacing: .005em; color: var(--tx); }
.story__paragraph { color: var(--tx2); font-size: 18.5px; }
.story__signature { font-family: var(--f-display); font-style: normal; font-weight: 700; font-size: 28px; letter-spacing: .04em; text-transform: uppercase; color: var(--tx); }
.story__stats { border: 3px solid var(--edge); gap: 0; padding: 0; margin-top: 36px; background: var(--sf); }
.story__stat { padding: 16px 18px; border-left: 3px solid var(--edge); }
.story__stat:first-child { border-left: 0; }
.story__stat-num { font-family: var(--f-display); font-weight: 800; font-size: 46px; line-height: 1; color: var(--tx); letter-spacing: 0; }
.story__stat-label { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--tx2); }

/* ── Team ───────────────────────────────────────────────────────────────────── */
.team { background: var(--sf2); }
.team__card { background: var(--sf); border: 3px solid var(--edge); border-radius: 0; box-shadow: 6px 6px 0 var(--edge); }
.team__portrait { filter: grayscale(.4); border-bottom: 3px solid var(--edge); }
.team__name { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 28px; letter-spacing: .02em; color: var(--tx); }
.team__role { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; color: var(--tx2); }
.team__bio { color: var(--tx2); }

/* ── Testimonials ───────────────────────────────────────────────────────────── */
.testimonials-section { background: var(--sf2); }
.testimonials-section__head { text-align: left; margin-left: 0; max-width: none; padding-left: 22px; border-left: 10px solid #b82124; }
.testimonials-section__title { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(40px, 5.4vw, 72px); line-height: .94; color: var(--tx); letter-spacing: .005em; }
.testimonials-section__intro { color: var(--tx2); }
.testimonial-card { background: var(--sf); border: 3px solid var(--edge); border-left: 12px solid #b82124; border-radius: 0; box-shadow: 6px 6px 0 var(--edge); padding: 28px 28px 26px; }
.testimonial-card__quote { font-style: normal; font-weight: 500; font-size: 19px; color: var(--tx); }
.testimonial-card__author { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 20px; color: var(--tx); }
.testimonial-card__role { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; color: var(--tx2); }
.testimonial-card__photo { border-radius: 0; border: 3px solid var(--edge); }

/* ── FAQ ────────────────────────────────────────────────────────────────────── */
.faq-section { background: var(--bg); }
.faq-section__title { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(38px, 4.4vw, 60px); line-height: .96; color: var(--tx); letter-spacing: .005em; }
.faq-section__intro { color: var(--tx2); }
.faq-item { border-bottom: 3px solid var(--edge); padding: 20px 0; }
.faq-item:first-child { border-top: 3px solid var(--edge); }
.faq-item__question { font-family: var(--f-display); font-weight: 700; font-size: 24px; letter-spacing: .03em; text-transform: uppercase; color: var(--tx); }
.faq-item__question::after { content: '+'; display: grid; place-items: center; width: 34px; height: 34px; background: #b82124; color: #ffffff; border: 3px solid var(--edge); font-family: var(--f-mono); font-weight: 600; font-size: 20px; }
.faq-item[open] .faq-item__question::after { content: '–'; }
.faq-item__answer { color: var(--tx2); font-size: 17px; }

/* ── Stats bar, gallery, projects, blog ─────────────────────────────────────── */
.stats-bar { background: var(--steel); color: var(--on-steel); border-top: 5px solid #b82124; }
.stats-bar__heading { font-family: var(--f-mono); font-size: 13px; letter-spacing: .14em; opacity: 1; color: var(--on-steel-2); }
.stats-bar__value { font-family: var(--f-display); font-weight: 800; font-size: clamp(52px, 6vw, 92px); letter-spacing: 0; color: var(--brand-on-steel); }
.stats-bar__label { font-family: var(--f-mono); opacity: 1; color: var(--on-steel-2); letter-spacing: .12em; }
.gallery-section { background: var(--bg); }
.gallery-section__head { text-align: left; max-width: none; padding-left: 22px; border-left: 10px solid #b82124; }
.gallery-section__title { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(40px, 5.4vw, 72px); line-height: .94; color: var(--tx); }
.gallery-section__intro { color: var(--tx2); }
.gallery-grid__item { border-radius: 0; border: 3px solid var(--edge); background: var(--sf2); }
.gallery-grid__item figcaption { background: rgba(16, 17, 19, .9); color: #ffffff; font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.blog-section { background: var(--bg); }
.blog-section__title { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(40px, 5.4vw, 72px); line-height: .94; color: var(--tx); letter-spacing: .005em; }
.blog-card { background: var(--sf); border: 3px solid var(--edge); border-radius: 0; box-shadow: 8px 8px 0 var(--edge); color: var(--tx); }
.blog-card:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 #b82124; }
.blog-card__cover { border-bottom: 3px solid var(--edge); }
.blog-card__date { font-family: var(--f-mono); color: var(--tx2); letter-spacing: .1em; }
.blog-card__title { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 30px; line-height: 1; color: var(--tx); letter-spacing: .01em; }
.blog-card__excerpt { color: var(--tx2); }
.blog-card__more { font-family: var(--f-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--tx); }

/* ── Contact ────────────────────────────────────────────────────────────────── */
.contact-section { background: var(--sf2); }
.contact-section__title { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(44px, 6vw, 84px); line-height: .94; letter-spacing: .005em; color: var(--tx); }
.contact-section__intro { color: var(--tx2); }
.contact-section__details { border-top: 3px solid var(--edge); }
.contact-section__row { border-bottom: 1px solid var(--ln); }
.contact-section__label { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; color: var(--tx2); }
.contact-section__value { color: var(--tx); }
.contact-section__value a { color: var(--tx); text-decoration: underline; text-decoration-color: #b82124; text-decoration-thickness: 4px; text-underline-offset: 3px; font-weight: 600; }
.contact-section__promise { background: var(--steel); color: var(--on-steel); border-radius: 0; border-left: 10px solid #b82124; font-size: 15px; }
.contact-form { background: var(--sf); border: 3px solid var(--edge); border-radius: 0; box-shadow: 10px 10px 0 var(--edge); padding: 34px; }
.contact-form__row label { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; color: var(--tx2); }
.contact-form__row input, .contact-form__row textarea { border: 3px solid var(--edge); border-radius: 0; background: var(--bg); color: var(--tx); font-size: 17px; }
.contact-form__row input:focus, .contact-form__row textarea:focus { outline: 3px solid #b82124; outline-offset: 2px; background: var(--sf); border-color: var(--edge); }
.contact-form__error { background: #fde8e6; color: #8a1c12; border-radius: 0; }
.sms-consent { color: var(--tx2); }

/* ── Financing, booking card, areas, the rest of what a contractor draws ────── */
.financing__card { background: var(--steel); color: var(--on-steel); border: 3px solid var(--edge); border-radius: 0; border-top: 10px solid #b82124; box-shadow: 10px 10px 0 var(--edge); }
.financing__heading, .financing__result-num, .financing__value, .financing__lede-num { color: var(--on-steel); }
.financing__eyebrow, .financing__label, .financing__result-label, .financing__result-fine, .financing__intro, .financing__lede { color: var(--on-steel-2); }
.financing__result { background: #1d1f22; border: 2px solid #34373c; border-radius: 0; }
.financing__lede-num { background: #26292d; border-radius: 0; }
.financing__cta { background: #b82124; color: #ffffff; border-color: #ffffff; }
.financing__cta:hover { background: #b82124; }
.reservation { background: var(--bg); }
.reservation__card { background: var(--sf); border: 3px solid var(--edge); border-radius: 0; box-shadow: 10px 10px 0 var(--edge); }
.reservation__heading { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; color: var(--tx); }
.reservation__intro, .reservation__note { color: var(--tx2); }
/* The areas and trust sections carry their own <style> in the page body, which comes after this sheet: the doubled class
   lets the look win at equal weight without !important. */
.areas-list__grid.areas-list__grid a { border: 3px solid var(--edge); border-radius: 0; background: var(--sf); color: var(--tx); font-family: var(--f-display); font-size: 20px; letter-spacing: .04em; text-transform: uppercase; }
.areas-list__grid.areas-list__grid a:hover, .areas-list__grid.areas-list__grid a:focus-visible { background: #b82124; border-color: var(--edge); color: #ffffff; }
.trust-section.trust-section { background: var(--steel); color: var(--on-steel); border-top: 5px solid #b82124; padding: clamp(56px, 7vw, 96px) 0; }
.trust-section__head.trust-section__head { text-align: left; margin-left: 0; }
.trust-section__title.trust-section__title { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(40px, 5.4vw, 72px); line-height: .94; color: var(--on-steel); }
.trust-section__intro.trust-section__intro { color: var(--on-steel-2); }
.trust-item.trust-item { background: #1b1d20; border: 3px solid var(--on-steel); border-radius: 0; box-shadow: 6px 6px 0 #b82124; }
.trust-item__icon.trust-item__icon { color: var(--brand-on-steel); }
.trust-item__name.trust-item__name { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 20px; color: var(--on-steel); }
.legal-page h1, .legal-page h2 { font-family: var(--f-display); text-transform: uppercase; }

/* ── Footer: steel, a stripe, the name at poster size ───────────────────────── */
.site-footer { background: var(--steel); color: var(--on-steel); padding: 0 0 28px; border-top: 0; position: relative; }
.site-footer::before { content: ''; display: block; height: 16px; margin-bottom: 52px; background: repeating-linear-gradient(-45deg, #b82124 0 16px, #101113 16px 32px); }
.footer-inner { align-items: flex-end; }
.footer-brand { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(40px, 7vw, 96px); line-height: .9; letter-spacing: .01em; color: var(--on-steel); }
.footer-tagline { font-family: var(--f-mono); font-size: 13px; letter-spacing: .08em; color: var(--on-steel-2); margin-top: 12px; }
.footer-contact { gap: 12px 28px; }
.footer-contact a { font-family: var(--f-mono); font-size: 14px; letter-spacing: .06em; color: var(--on-steel); text-decoration: underline; text-decoration-color: #b82124; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.footer-contact a:hover { color: var(--brand-on-steel); }
.footer-legal { color: var(--on-steel-2); font-family: var(--f-mono); font-size: 13px; }
.photo-credits { color: var(--on-steel-2); }

@media (max-width: 720px) {
  .header-inner { padding: 12px 16px; gap: 12px; }
  .brand { font-size: 24px; }
  .section-head { padding-left: 16px; border-left-width: 8px; }
  .hero--full-bleed .hero__inner { padding: 72px 20px 64px; }
  .service-card, .blog-card { box-shadow: 6px 6px 0 var(--edge); }
  .contact-form { padding: 22px; box-shadow: 6px 6px 0 var(--edge); }
  .footer-inner { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .btn, .header-cta, .service-card, .blog-card, .service-card__image { transition: none; } }

/* ═══ THE SHOP: hard plates, a numbered-stock feel — a product is a plate on the concrete ═══════════════════════════════════ */
.store-shop-head h1, .store-shop-head h2 { font-family: var(--f-display); font-weight: 800; font-size: clamp(44px, 6vw, 84px); line-height: .95; letter-spacing: .01em; text-transform: uppercase; color: var(--tx); border-left: 10px solid #b82124; padding-left: 18px; margin: 0 0 12px; }
.store-shop-head p { color: var(--tx2); padding-left: 28px; }
.product-card { background: var(--sf); border: 3px solid var(--edge); border-radius: 0; box-shadow: 8px 8px 0 var(--edge); transition: transform .12s, box-shadow .12s; }
.product-card:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--edge); }
.product-card__media { border-bottom: 3px solid var(--edge); background: var(--sf2); }
.product-badge { border-radius: 0; top: 0; left: 0; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em; padding: 6px 10px; }
.product-badge--soldout { left: auto; right: 0; }
.product-card__body { padding: 16px 16px 12px; }
.product-card__name { font-family: var(--f-display); font-weight: 800; font-size: 24px; line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; color: var(--tx); }
.product-card__tagline { font-family: var(--f-mono); font-size: 12.5px; color: var(--tx2); }
.product-price__now { font-family: var(--f-display); font-weight: 800; font-size: 28px; letter-spacing: .01em; color: var(--tx); }
.product-price__from, .product-price__was { font-family: var(--f-mono); color: var(--tx2); }
.product-card__add { margin: 0 16px 16px; width: calc(100% - 32px); border-radius: 0; }
.product-gallery__main { border: 3px solid var(--edge); border-radius: 0; box-shadow: 8px 8px 0 var(--edge); background: var(--sf2); }
.product-gallery__thumb { border: 3px solid var(--edge); border-radius: 0; }
.product-gallery__thumb.is-active { border-color: #b82124; }
.product-info__name { font-family: var(--f-display); font-weight: 800; font-size: clamp(40px, 4.6vw, 66px); line-height: .95; letter-spacing: .01em; text-transform: uppercase; color: var(--tx); }
.product-info__price .product-price__now { font-size: 40px; }
.variant-option { border: 3px solid var(--edge); border-radius: 0; background: var(--sf); color: var(--tx); font-family: var(--f-display); font-weight: 700; font-size: 17px; letter-spacing: .05em; text-transform: uppercase; }
.variant-option:hover { border-color: var(--edge); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--edge); }
.qty-stepper { border: 3px solid var(--edge); border-radius: 0; background: var(--sf); }
.qty-stepper__input { border-color: var(--edge); }
.product-description { border-top: 3px solid var(--edge); }
.product-description h2, .product-upsell__title { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--tx); }
.product-review-form, .product-upsell__item { border: 3px solid var(--edge); border-radius: 0; background: var(--sf); }
.cart-title { font-family: var(--f-display); font-weight: 800; font-size: clamp(44px, 6vw, 80px); line-height: .95; text-transform: uppercase; letter-spacing: .01em; color: var(--tx); border-left: 10px solid #b82124; padding-left: 18px; }
.cart-line { border-bottom: 3px solid var(--edge); }
.cart-line__media { border: 3px solid var(--edge); border-radius: 0; }
.cart-line__name { font-family: var(--f-display); font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: .02em; }
.cart-summary { background: var(--sf); border: 3px solid var(--edge); border-radius: 0; box-shadow: 8px 8px 0 var(--edge); }
.cart-summary__title { font-family: var(--f-display); font-weight: 800; font-size: 26px; text-transform: uppercase; letter-spacing: .03em; color: var(--tx); }
.cart-summary__input { border: 3px solid var(--edge); border-radius: 0; }
.order-confirm__title { font-family: var(--f-display); font-weight: 800; font-size: clamp(40px, 5vw, 68px); line-height: .95; text-transform: uppercase; color: var(--tx); }
.order-confirm__icon { border-radius: 0; border: 3px solid var(--edge); }
.order-card { background: var(--sf); border: 3px solid var(--edge); border-radius: 0; box-shadow: 8px 8px 0 var(--edge); }
/* the header is steel in both modes: the cart is read on it like the nav */
.header-cart { color: var(--on-steel); }
.header-cart:hover { color: var(--brand-on-steel); }

/* ── A service's own page ───────────────────────────────────────────────────── */
.service-detail { background: var(--bg); }
.service-detail__title, .service-others__title { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: .98; font-size: clamp(32px, 3.6vw, 48px); color: var(--tx); }
.service-detail__text { color: var(--tx2); font-size: 18.5px; }
.service-detail__included { background: var(--sf); border: 3px solid var(--edge); border-radius: 0; box-shadow: 8px 8px 0 #b82124; }
.service-detail__list li { border-top: 1px solid var(--ln); color: var(--tx); }
.service-detail__list li::before { border-radius: 0; border: 2px solid var(--edge); width: 18px; height: 18px; }
.service-detail__list li::after { left: 6px; }
.service-detail__parts { border-top: 3px solid var(--edge); }
.service-detail__part { border-top: 1px solid var(--ln); }
.service-detail__part:last-child { border-bottom: 3px solid var(--edge); }
.service-detail__part dt { font-family: var(--f-display); font-weight: 700; font-size: 24px; letter-spacing: .03em; text-transform: uppercase; color: var(--tx); }
.service-detail__part dd { color: var(--tx2); }
.service-others { background: var(--bg); }
.service-others__link { font-family: var(--f-mono); font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; background: var(--sf); color: var(--tx); border: 3px solid var(--edge); border-radius: 0; box-shadow: 4px 4px 0 var(--edge); padding: 10px 16px; transition: transform .12s, box-shadow .12s; }
.service-others__link:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #b82124; border-color: var(--edge); }

/* ── Why choose us ──────────────────────────────────────────────────────────── */
.why-choose { background: var(--bg); }
.why-choose__grid { gap: 28px; }
.why-choose__item { background: var(--sf); border: 3px solid var(--edge); border-radius: 0; box-shadow: 8px 8px 0 var(--edge); padding: 0 0 26px; transition: transform .14s, box-shadow .14s; }
.why-choose__item:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 #b82124; }
.why-choose__mark { width: fit-content; background: #b82124; color: #ffffff; font-family: var(--f-mono); font-weight: 600; font-size: 15px; letter-spacing: .08em; padding: 8px 14px; border-right: 3px solid var(--edge); border-bottom: 3px solid var(--edge); margin: 0 0 18px; }
.why-choose__title { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 29px; line-height: 1; letter-spacing: .01em; color: var(--tx); margin: 0 24px 10px; }
.why-choose__desc { color: var(--tx2); font-size: 16.5px; margin: 0 24px; }

/* ── Testimonials carousel ──────────────────────────────────────────────────── */
.testimonials-carousel { background: var(--bg); }
.testimonials-carousel__title { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: .005em; line-height: .96; font-size: clamp(38px, 4.4vw, 60px); color: var(--tx); }
.testimonials-carousel__intro { color: var(--tx2); }
.testimonials-carousel__track { gap: 28px; padding: 4px 12px 14px 4px; }
.testimonials-carousel__card { background: var(--sf); border: 3px solid var(--edge); border-left: 12px solid #b82124; border-radius: 0; box-shadow: 6px 6px 0 var(--edge); }
.testimonials-carousel__quote { font-family: var(--f-body); font-weight: 500; color: var(--tx); }
.testimonials-carousel__author { font-family: var(--f-display); font-weight: 700; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; color: var(--tx); }
.testimonials-carousel__role { font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--tx3); }
.testimonials-carousel__photo { border-radius: 0; border: 3px solid var(--edge); }
.testimonials-carousel__btn { border: 3px solid var(--edge); border-radius: 0; background: #b82124; color: #ffffff; box-shadow: 4px 4px 0 var(--edge); transition: transform .12s, box-shadow .12s; }
.testimonials-carousel__btn:hover { border-color: var(--edge); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--edge); }
.testimonials-carousel__btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--edge); }
.testimonials-carousel__dot::before { border-radius: 0; background: var(--sf); border: 2px solid var(--edge); }
.testimonials-carousel__dot[aria-current="true"]::before { background: #b82124; border-color: var(--edge); }
.testimonials-carousel__track:focus-visible, .testimonials-carousel__btn:focus-visible, .testimonials-carousel__dot:focus-visible { outline-color: var(--focus); }

/* ── Map: where to find us ──────────────────────────────────────────────────── */
.map-area { background: var(--bg); }
.map-area__title { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: .005em; line-height: .96; font-size: clamp(38px, 5.4cqi, 64px); color: var(--tx); }
.map-area__intro, .map-area__lines { color: var(--tx2); }
.map-area__lines { color: var(--tx); font-weight: 500; }
.map-area__label { font-family: var(--f-mono); font-weight: 500; letter-spacing: .12em; color: var(--tx3); }
.map-area__list li { background: var(--sf); color: var(--tx); border: 2px solid var(--edge); border-radius: 0; font-family: var(--f-mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.map-area__all, .map-area__alt { font-family: var(--f-mono); font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--tx); text-decoration: none; border-bottom: 4px solid #b82124; padding-bottom: 3px; }
.map-area__all:hover, .map-area__alt:hover { background: #b82124; color: #ffffff; }
.map-area__art { border: 3px solid var(--edge); border-radius: 0; box-shadow: 10px 10px 0 #b82124; background: var(--sf); }
.map-area__roads path { stroke: var(--ln); }
.map-area__blocks rect { fill: var(--sf2); }
.map-area__pin path { fill: #b82124; stroke: var(--edge); stroke-width: 3; }

/* ── Latest blog posts ──────────────────────────────────────────────────────── */
.blog-preview { background: var(--bg); }
.blog-preview__title { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: .005em; line-height: .96; font-size: clamp(38px, 5cqi, 60px); color: var(--tx); }
.blog-preview__intro { color: var(--tx2); }
.blog-preview__all { font-family: var(--f-mono); font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--tx); border-bottom: 4px solid #b82124; padding-bottom: 3px; }
.blog-preview__all:hover { background: #b82124; color: #ffffff; }
.blog-preview__grid { gap: 28px; }
.blog-preview__card { background: var(--sf); border: 3px solid var(--edge); border-radius: 0; box-shadow: 8px 8px 0 var(--edge); transition: transform .14s, box-shadow .14s; }
.blog-preview__card:hover { border-color: var(--edge); transform: translate(-3px, -3px); box-shadow: 11px 11px 0 #b82124; }
.blog-preview__cover { border-bottom: 3px solid var(--edge); filter: grayscale(.55) contrast(1.05); background-color: var(--sf2); transition: filter .25s; }
.blog-preview__card:hover .blog-preview__cover { filter: none; }
.blog-preview__date { font-family: var(--f-mono); font-weight: 500; letter-spacing: .1em; color: var(--tx3); }
.blog-preview__post { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 29px; line-height: 1; letter-spacing: .01em; color: var(--tx); }
.blog-preview__excerpt { color: var(--tx2); font-size: 16.5px; }
.blog-preview__more { font-family: var(--f-mono); font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--tx); }
.blog-preview__card:hover .blog-preview__more { text-decoration: none; }

/* Parts of a service: square mono tags with the hard edge */
.service-parts a { border-radius: 0; border: 2px solid var(--ln); background: var(--sf); color: var(--tx); font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; }
.service-parts a:hover, .service-parts a:focus-visible { border-color: var(--tx); background: #b82124; color: #ffffff; }

/* Gallery filter: square mono tabs, the owner's colour on the one chosen */
.gallery-filter__btn { border-radius: 0; border: 2px solid var(--ln); background: var(--sf); color: var(--tx); font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.gallery-filter__btn:hover { border-color: var(--tx); color: var(--tx); }
.gallery-filter__btn[aria-pressed="true"] { background: #b82124; border-color: var(--tx); color: #ffffff; box-shadow: 3px 3px 0 var(--tx); }

/* About values: stamped titles on spec-sheet rows with a heavy rule */
.about-values { background: var(--bg); }
.about-values__item { border-top: 3px solid var(--edge); padding: 22px 0; }
.about-values__item:last-child { border-bottom: 3px solid var(--edge); }
.about-values__title { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: 28px; color: var(--tx); }
.about-values__title::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 12px; background: #b82124; border: 2px solid var(--edge); vertical-align: 2px; }
.about-values__desc { color: var(--tx2); font-size: 16.5px; }

/* Call now: the hard-edged button with its offset shadow, never softer than the rest of the look */
.call-now { box-shadow: 5px 5px 0 var(--edge); }
.call-now--away { box-shadow: none; }

/* the owner's page and dark band (site/palette.ts) */
:root { --steel: #021634; --brand-deep: #021634; --bg: #f7f5f0; --sf: #fcfbf9; --sf2: #e8e6e2; --tx: #15171a; --tx2: #393b3c; --tx3: #5d5e5e; --ln: #cfceca; --ln2: #adaca8; --focus: #15171a; --edge: #15171a; --brand-ink: #b82124; --brand-text: #b82124; color-scheme: light; }

/* the owner's type and feel (site/feel.ts) */
:root { --f-display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif; --f-body: 'Barlow', system-ui, sans-serif; --font-display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif; }
body { font-family: 'Barlow', system-ui, sans-serif; }
:root { --space: clamp(88px, 11vw, 160px); }
.btn, .header-cta, .mobile-nav__cta, .book-submit, .contact-form button[type="submit"], .cta__btn { border-radius: 0 !important; }
.service-card, .testimonial-card, .team-card, .pr-card, .package-card, .deals-card, .cov-card, .cg-card, .strain-card, .faq-item, .contact-section__promise, .why-choose__item, .value-card, .product-card, .shop-card, .gallery-cards__card, .svc-tile, .svc-featured__lead, .quote-wall__card, .hero-splitform__form { border-radius: 0 !important; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea, .cf-input, .cf-choice, .book-date, .book-slot { border-radius: 0 !important; }
.gallery-grid img, .gallery-item, .story__photo img, .team-card img, .service-card img, .hero__image img, .hero--split img, .project-card img, .gallery-masonry__item img, .gallery-cards__card img, .gallery-pairs__imgs img, .hero-collage__pic, .gallery-slideshow__figure img { border-radius: 0 !important; }