/* Bay & Beacon Auto Care — demonstration website.
   A FICTIONAL client's shop site, built by Bay State Auto Growth to show what it
   builds. It is deliberately NOT in Bay State's own visual language: the point of
   a demo is to prove work can be done in someone else's identity.

   Where Bay State is warm orange and teal, soft 14px corners and filled pill
   shapes, this is cool steel and signal yellow, square corners and thin rules.
   Nothing here shares a token with ../style.css. */

/* The main site opts into cross-document view transitions. When only one side of
   a navigation opts in, the browser skips the transition and logs an unhandled
   AbortError -- which is what a visitor clicking through from the main site to
   this demo used to get on every hop.

   This rule has to stay at the top of the file, above every style and media rule.
   Placed further down (it was originally near the responsive blocks) Chromium
   still lists it in cssRules but does not act on it: the incoming document's
   pagereveal reports no transition and the navigation is skipped exactly as if
   the opt-in were missing. Verified both ways. */
@view-transition { navigation: auto; }

:root {
  color-scheme: light;

  /* Structure */
  --steel: #2e3d4a;
  --steel-deep: #1d2831;
  --steel-soft: #5a6b78;

  /* Signal yellow is a BACKGROUND colour. White on it is ~1.6:1, so anything
     sitting on yellow carries near-black ink. It is never used as text on light. */
  --signal: #ffc400;
  --on-signal: #16181a;

  --page: #f5f7f8;
  --surface: #ffffff;
  --surface-soft: #e7ecee;
  --field: #ffffff;

  --text: #1f2a33;
  --muted: #4a5560;
  --heading: var(--steel-deep);
  --line: #ccd4d9;
  --line-strong: #a9b5bd;
  --header-bg: rgba(245, 247, 248, 0.94);
  --accent-text: #7a5c00;      /* yellow is unreadable as text; this stands in */
  --success: #146c43;

  /* Square, not soft — the opposite of the main site's 14px radius. */
  --radius: 2px;
  --shadow: 0 18px 40px rgba(29, 40, 49, 0.12);

  --text-small: 0.875rem;
  --text-note: 0.9375rem;
  --text-body: 1rem;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --steel: #7f95a5;
  --steel-deep: #0e1519;
  --steel-soft: #93a4b0;
  --signal: #ffd23f;
  --page: #0e1519;
  --surface: #162026;
  --surface-soft: #1d2930;
  --field: #111a1f;
  --text: #edf1f3;
  --muted: #a9b7c0;
  --heading: #ffffff;
  --line: #2c3a43;
  --line-strong: #43555f;
  --header-bg: rgba(14, 21, 25, 0.94);
  --accent-text: #ffd23f;
  --success: #63d29b;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 140px; }

body {
  margin: 0; overflow-x: hidden;
  color: var(--text); background: var(--page);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: var(--text-body); line-height: 1.6;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin-top: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--steel); outline-offset: 3px; }

/* Condensed, uppercase, tightly tracked — an industrial voice, deliberately
   unlike the main site's soft bold sentence-case headings. */
h1, h2, h3 {
  margin-top: 0; color: var(--heading);
  font-family: "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  font-stretch: condensed;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.05;
}
h1 { font-size: clamp(2.4rem, 1.4rem + 4.2vw, 4.4rem); }
h2 { font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.9rem); }
h3 { font-size: 1.2rem; letter-spacing: 0.03em; }

.demo-shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

.screen-reader {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}

.skip-link {
  position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 16px;
  color: var(--on-signal); background: var(--signal); font-weight: 700;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

/* ---------- Bay State's demonstration banner ---------- */

.demo-banner {
  position: relative; z-index: 60;
  background: var(--steel-deep); color: #dfe7ec;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--text-small);
}
.banner-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding-block: 0.6rem;
}
.banner-inner p { margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.banner-inner strong { color: var(--signal); }
.demo-banner-button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px;
  padding: 0 0.7rem; font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.demo-banner-button:hover { background: rgba(255, 255, 255, 0.1); }

/* ---------- Header ---------- */

.demo-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.demo-nav { display: flex; align-items: center; gap: 1.25rem; min-height: 78px; }

.shop-brand { display: inline-flex; align-items: center; gap: 12px; }
/* A drawn beacon, not a lettered monogram — a picture where the main site has
   initials, so the two marks cannot be confused even at favicon size. */
.shop-mark {
  display: grid; place-items: center; width: 46px; height: 46px; flex: none;
  background: var(--steel-deep); border-radius: var(--radius);
}
.shop-mark svg { width: 28px; height: 28px; color: var(--signal); }
.brand-name {
  display: grid; line-height: 1.1;
  font-family: "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  font-stretch: condensed; text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 0.9375rem; font-weight: 700; color: var(--heading);
}
.brand-name strong { font-weight: 400; letter-spacing: 0.18em; font-size: 0.75rem; color: var(--muted); }

.demo-nav-controls { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }

.demo-menu {
  display: flex; align-items: center; gap: 1.6rem;
  font-size: var(--text-small); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.demo-menu > a:not(.demo-call):hover { color: var(--heading); }
.demo-menu > a[aria-current="page"] {
  color: var(--heading); padding-bottom: 4px; border-bottom: 3px solid var(--signal);
}
.demo-call {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem;
  color: var(--on-signal); background: var(--signal); letter-spacing: 0.06em;
}
.demo-call:hover { background: #e5b000; }

.demo-nav-toggle {
  display: none; width: 48px; height: 48px; border: 1px solid var(--line);
  background: transparent; border-radius: var(--radius); cursor: pointer;
}
.demo-nav-toggle i { display: block; width: 22px; height: 2px; margin: 5px auto; background: var(--heading); }

/* ---------- Hero ---------- */

.shop-hero {
  position: relative; display: grid; align-items: center;
  min-height: 620px; overflow: hidden; color: #ffffff; background: var(--steel-deep);
}
.shop-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Pulled back from the old 0.96/0.86 so the workshop behind the words actually
   reads. The left end stays dark enough to carry white type -- verified against
   the darkest pixel the photo puts under the headline, not assumed. */
.hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(96deg, rgba(14, 21, 25, 0.92) 0%, rgba(14, 21, 25, 0.74) 46%, rgba(14, 21, 25, 0.12) 88%);
}

/* One slow beam of signal yellow crossing behind the headline. It is the only
   thing on the page that moves on its own besides the beacon, it is very faint,
   and it sits under .hero-content, never over it. */
.hero-beam {
  position: absolute; inset: -20% -40%; pointer-events: none;
  background: linear-gradient(74deg, transparent 38%, rgba(255, 196, 0, 0.16) 50%, transparent 62%);
}
.demo-js .hero-beam { animation: hero-beam 14s var(--ease, ease-in-out) infinite; }
@keyframes hero-beam {
  0%, 100% { transform: translateX(-18%); opacity: 0.5; }
  50% { transform: translateX(18%); opacity: 1; }
}
.hero-content { position: relative; z-index: 1; padding-block: 88px 110px; display: grid; gap: 1.4rem; justify-items: start; }
.hero-content h1 { color: #ffffff; max-width: 15ch; font-size: clamp(2.6rem, 6.2vw, 4.4rem); }
.hero-content h1 em { font-style: normal; color: var(--signal); }
.hero-content > p { max-width: 56ch; color: #d5dee4; margin: 0; }

.shop-eyebrow {
  margin: 0; display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--text-small); font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--signal);
}
.shop-eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--signal); }
.shop-eyebrow.dark { color: var(--accent-text); }
.shop-eyebrow.dark::before { background: var(--steel); }

.shop-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.shop-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 1.6rem; border-radius: var(--radius);
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  font-size: var(--text-small); border: 2px solid transparent;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.shop-button-primary { background: var(--signal); color: var(--on-signal); }
.shop-button-primary:hover { background: #e5b000; }
.shop-button-secondary { border-color: rgba(255, 255, 255, 0.5); color: #ffffff; }
.shop-button-secondary:hover { background: rgba(255, 255, 255, 0.12); }
.shop-button-dark { background: var(--steel-deep); color: #ffffff; }
.shop-button-dark:hover { background: var(--steel); }
html[data-theme="dark"] .shop-button-dark { background: var(--surface-soft); border-color: var(--line-strong); }

.fiction-note {
  margin: 0; font-size: var(--text-small); color: #c3ced6;
  padding: 0.5rem 0.85rem; border-left: 3px solid var(--signal);
  background: rgba(255, 255, 255, 0.07);
}

.hero-hours {
  position: absolute; right: 0; bottom: 0; z-index: 1;
  display: grid; gap: 2px; padding: 1rem 1.4rem;
  background: var(--signal); color: var(--on-signal);
  font-size: var(--text-small);
}
.hero-hours span { letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; }
.hero-hours strong { font-size: 1.05rem; }

/* ---------- Sections ---------- */

.shop-section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.services-section, .reviews-section { background: var(--page); }
.why-section { background: var(--surface); border-block: 1px solid var(--line); }

.shop-section-head {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 3.5rem); align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem);
}
.shop-section-head > div { display: grid; gap: 0.85rem; justify-items: start; }
.shop-section-head > p { margin: 0; color: var(--muted); }

.confidence-bar { background: var(--steel-deep); color: #ffffff; }
.confidence-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  padding-block: 1.6rem;
}
.confidence-grid > div {
  display: grid; gap: 4px; padding-inline: 1.25rem;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.confidence-grid > div:first-child { border-left: 0; padding-left: 0; }
.confidence-grid strong {
  font-family: "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  font-stretch: condensed; font-size: 1.9rem; color: var(--signal); line-height: 1;
}
.confidence-grid span { font-size: var(--text-small); color: #b9c5cd; letter-spacing: 0.06em; text-transform: uppercase; }

.home-service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1px; background: var(--line); }
.home-service-grid article {
  display: grid; gap: 0.6rem; align-content: start;
  padding: clamp(1.4rem, 3vw, 2rem); background: var(--surface);
  transition: background-color 180ms ease;
}
.home-service-grid article:hover { background: var(--surface-soft); }
.home-service-grid span {
  font-family: "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  font-stretch: condensed; font-size: 1.4rem; color: var(--steel-soft); letter-spacing: 0.1em;
}
.home-service-grid p { margin: 0; color: var(--muted); font-size: var(--text-note); }
.section-action { margin-top: 1.75rem; }

.why-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.why-card { display: grid; gap: 1rem; justify-items: start; }
.why-card p { margin: 0; color: var(--muted); }
.inline-link {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--text-small);
  color: var(--heading); border-bottom: 2px solid var(--signal); padding-bottom: 3px;
}
.inline-link:hover { border-bottom-color: var(--steel); }

.home-trust-card { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.home-trust-card span {
  display: flex; align-items: center; gap: 12px; padding: 1rem 1.25rem;
  background: var(--page); font-weight: 700; font-size: var(--text-note);
}
.home-trust-card span::before {
  content: ""; width: 10px; height: 10px; flex: none; background: var(--signal);
}

.reviews-head { align-items: start; }
.sample-label {
  margin: 0; font-size: var(--text-small); color: var(--muted);
  padding: 0.65rem 0.9rem; background: var(--surface-soft); border-left: 3px solid var(--steel-soft);
}
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--gap, 1.25rem); }
.review-grid blockquote {
  margin: 0; display: grid; gap: 0.75rem; align-content: start;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--signal);
}
.review-grid p { margin: 0; color: var(--text); }
.review-grid footer { font-size: var(--text-small); color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.stars { color: var(--accent-text); letter-spacing: 0.14em; }
html[data-theme="dark"] .stars { color: var(--signal); }
.review-policy-note { margin: 1.5rem 0 0; font-size: var(--text-small); color: var(--muted); }

/* Footer now carries the vehicle and the month as well as the name, so it needs
   two lines rather than one run-on. */
.review-grid footer { display: grid; gap: 2px; }
.review-grid footer b { color: var(--heading); font-weight: 700; }
/* An empty star is hollow (U+2606), not a dimmed solid one. Shape carries the
   meaning, so it can keep the filled stars' own colour instead of fading to a
   line grey that measured 2.09:1 -- and the count is in the aria-label either
   way. */
.stars-off { color: inherit; }

/* ---------- Rating summary ---------- */

.rating-summary {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem 2.5rem;
  align-items: center; margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--surface); border: 1px solid var(--line);
}
.rating-score { display: grid; gap: 0.25rem; justify-items: center; }
.rating-score b {
  font-family: "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  font-stretch: condensed; font-size: 3.2rem; line-height: 1; color: var(--heading);
}
.rating-score span { font-size: var(--text-small); color: var(--muted); }
.rating-bars { display: grid; gap: 0.35rem; min-width: 0; }
.bar-row { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) 2.5rem; gap: 0.75rem; align-items: center; font-size: var(--text-small); color: var(--muted); }
.bar { display: block; height: 6px; background: var(--surface-soft); }
.bar i { display: block; height: 100%; background: var(--signal); }
.bar-n { text-align: right; }
.rating-note { grid-column: 1 / -1; margin: 0; font-size: var(--text-small); color: var(--muted); }

/* ---------- The shop's story and the people in it ---------- */

.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
.story-grid > div:first-child { display: grid; gap: 1rem; justify-items: start; }
.story-grid p { margin: 0; color: var(--muted); }
.story-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0.5rem 0 0; width: 100%; background: var(--line); border: 1px solid var(--line); }
.story-facts > div { display: grid; gap: 3px; padding: 0.85rem 1rem; background: var(--surface); }
.story-facts dt { font-size: var(--text-small); letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel-soft); }
.story-facts dd { margin: 0; font-weight: 700; color: var(--heading); }

.tech-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.tech { display: grid; gap: 0.45rem; align-content: start; padding: clamp(1.1rem, 2.5vw, 1.5rem); background: var(--surface); }
.tech-mark {
  display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 0.2rem;
  background: var(--steel-deep); color: var(--signal);
  font-family: "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  font-stretch: condensed; font-weight: 700; letter-spacing: 0.06em;
}
.tech h3 { font-size: 1.05rem; }
.tech-role { margin: 0; font-size: var(--text-small); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text); }
.tech p { margin: 0; color: var(--muted); font-size: var(--text-note); }

/* ---------- Facility ---------- */

.facility-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.facility { display: grid; gap: 0.75rem; align-content: start; padding: clamp(1.25rem, 3vw, 1.75rem); background: var(--surface); }
.facility ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.5rem; color: var(--muted); font-size: var(--text-note); }

/* ---------- Getting here ---------- */

.visit-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.visit-card { display: grid; gap: 0.85rem; align-content: start; padding: clamp(1.25rem, 3vw, 1.75rem); background: var(--surface); }
.visit-card ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.5rem; color: var(--muted); font-size: var(--text-note); }
.visit-note { margin: 0; font-size: var(--text-note); color: var(--muted); }
.hours-list { display: grid; gap: 1px; margin: 0; background: var(--line); }
.hours-list > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; padding: 0.55rem 0; background: var(--surface); }
.hours-list dt { color: var(--muted); font-size: var(--text-note); }
.hours-list dd { margin: 0; font-weight: 700; color: var(--heading); font-size: var(--text-note); }
/* Scoped to beat `.visit-card ul`, which is 0,1,1 and would otherwise keep these
   as a bulleted column. */
.visit-card .chip-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.chip-list li {
  padding: 0.35rem 0.7rem; background: var(--surface-soft); border: 1px solid var(--line);
  font-size: var(--text-small); color: var(--text);
}

.shop-cta-section { background: var(--steel-deep); color: #ffffff; padding-block: clamp(3rem, 6vw, 5rem); }
.shop-cta-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.shop-cta-grid > div { display: grid; gap: 0.85rem; justify-items: start; }
.shop-cta-grid h2 { color: #ffffff; }
.shop-cta-grid p { margin: 0; color: #cfd9e0; }

/* ---------- Inner page heroes ---------- */

.page-hero { background: var(--steel-deep); color: #ffffff; padding-block: clamp(3rem, 6vw, 5rem); }
.page-hero h1 { color: #ffffff; }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: end; }
.page-hero-grid > div { display: grid; gap: 1rem; justify-items: start; }
.page-hero-grid p { margin: 0; color: #cfd9e0; }

/* ---------- Services page ---------- */

/* ---------- Symptom workbench ----------
   Drivers arrive knowing what the car is doing, not which repair they need, so
   the services page starts from the symptom. A standard ARIA tablist: a vertical
   rail of things you might have noticed, and a stage explaining what the shop
   would check before quoting. */

.workbench {
  display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  border: 1px solid var(--line); background: var(--surface);
}
.wb-rail { display: grid; align-content: start; border-right: 1px solid var(--line); }
.wb-tab {
  display: flex; align-items: center; gap: 12px; min-height: 60px;
  padding: 0.85rem 1.1rem; text-align: left; cursor: pointer;
  font: inherit; font-size: var(--text-note); color: var(--muted);
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  transition: color 160ms ease, background-color 160ms ease;
}
.wb-tab:last-child { border-bottom: 0; }
.wb-tab:hover { color: var(--heading); background: var(--surface-soft); }
.wb-tab[aria-selected="true"] {
  color: var(--heading); font-weight: 700; background: var(--page);
  box-shadow: inset 3px 0 0 var(--signal);
}
.wb-tab-icon { flex: none; display: grid; place-items: center; width: 26px; height: 26px; color: var(--steel); }
.wb-tab-icon svg { width: 24px; height: 24px; }
.wb-tab[aria-selected="true"] .wb-tab-icon { color: var(--accent-text); }

.wb-stage { background: var(--page); min-width: 0; }
.wb-panel {
  display: grid; gap: 1.15rem; align-content: start;
  padding: clamp(1.25rem, 3vw, 2.25rem);
}
.wb-panel[hidden] { display: none; }
.wb-service {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font-size: var(--text-small); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-text);
}
.wb-service-icon { display: grid; place-items: center; width: 22px; height: 22px; }
.wb-service-icon svg { width: 22px; height: 22px; }
.wb-panel h3 { font-size: clamp(1.35rem, 1rem + 1.2vw, 1.9rem); }
.wb-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1.5rem; }
.wb-cols h4 {
  margin: 0 0 0.6rem; font-size: var(--text-small); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel-soft);
}
.wb-list { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.4rem; color: var(--muted); font-size: var(--text-note); }
.wb-list--causes { list-style: none; padding-left: 0; }
.wb-list--causes li { display: grid; grid-template-columns: 14px 1fr; gap: 0.6rem; }
.wb-list--causes li::before { content: ""; margin-top: 0.55em; width: 8px; height: 1px; background: var(--steel-soft); }
.wb-turn {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.9rem; margin: 0;
  padding-top: 0.9rem; border-top: 1px solid var(--line);
}
.wb-turn span { font-size: var(--text-small); letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel-soft); }
.wb-turn b { color: var(--heading); }
/* The panel is a grid, so the button would otherwise stretch the full width. */
.wb-panel .shop-button { justify-self: start; }

/* ---------- Capability board ----------
   The full menu, as a board rather than a numbered list: an icon reads faster
   than an ordinal, and nothing here implies a sequence. */

.cap-board {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.cap { display: grid; gap: 0.6rem; align-content: start; padding: clamp(1.15rem, 2.5vw, 1.6rem); background: var(--surface); }
.cap-icon { display: grid; place-items: center; width: 40px; height: 40px; color: var(--steel); background: var(--surface-soft); }
.cap-icon svg { width: 26px; height: 26px; }
.cap h3 { font-size: 1.05rem; }
.cap p { margin: 0; color: var(--muted); font-size: var(--text-note); }

/* ---------- Credential seals ----------
   Original artwork for a fictional shop and an invented trade body. Nothing here
   reproduces a real programme's mark. */

.seal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.seal-card { display: grid; gap: 0.55rem; align-content: start; padding: clamp(1.25rem, 3vw, 1.75rem); background: var(--surface); }
.seal { display: grid; place-items: center; width: 54px; height: 54px; color: var(--steel); }
.seal svg { width: 54px; height: 54px; }
.seal-kind { margin: 0; font-size: var(--text-small); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); }
.seal-card h3 { font-size: 1.1rem; }
.seal-card p { margin: 0; color: var(--muted); font-size: var(--text-note); }

/* ---------- Policy band ---------- */

.policy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.policy { display: grid; gap: 0.75rem; align-content: start; padding: clamp(1.25rem, 3vw, 1.75rem); background: var(--surface); }
.policy ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.5rem; color: var(--muted); font-size: var(--text-note); }

.assurance-disclosure { margin: 1.5rem 0 0; font-size: var(--text-small); color: var(--muted); padding: 0.75rem 1rem; background: var(--surface-soft); border-left: 3px solid var(--steel-soft); }

/* ---------- Contact page ---------- */

.visit-section { background: var(--page); }
.visit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--gap, 1.25rem); }
.contact-cards { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.contact-cards > div { display: grid; gap: 4px; padding: 1.1rem 1.25rem; background: var(--surface); }
.contact-cards span { font-size: var(--text-small); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.contact-cards strong { font-size: 1.05rem; }
.contact-cards small { color: var(--muted); }

.appointment-section { background: var(--surface); border-block: 1px solid var(--line); }
.appointment-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.appointment-grid > div:first-child { display: grid; gap: 1rem; justify-items: start; align-content: start; }
.appointment-grid p { margin: 0; color: var(--muted); }

.sample-form { display: grid; gap: 0.9rem; padding: clamp(1.4rem, 3vw, 2rem); background: var(--page); border: 1px solid var(--line); }
.sample-form label { display: grid; gap: 0.35rem; font-size: var(--text-small); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.sample-form input, .sample-form select, .sample-form textarea {
  min-width: 0; width: 100%; min-height: 50px; padding: 0.7rem 0.9rem;
  font-weight: 400; text-transform: none; letter-spacing: normal;
  background: var(--field); border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.sample-form textarea { min-height: 110px; resize: vertical; }
.sample-form input:focus-visible, .sample-form select:focus-visible, .sample-form textarea:focus-visible { border-color: var(--steel); }
.two-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.9rem; }
.demo-form-status { margin: 0; font-size: var(--text-note); color: var(--success); font-weight: 700; }
.sample-form-note { margin: 0; font-size: var(--text-small); color: var(--muted); }

/* ---------- Footer ---------- */

.shop-footer { background: var(--steel-deep); color: #cfd9e0; padding-block: 2.5rem; }
.footer-layout { display: grid; gap: 1rem; justify-items: start; }
.footer-layout p { margin: 0; font-size: var(--text-note); max-width: 62ch; }
.footer-shop-brand .brand-name { color: #ffffff; }
.footer-shop-brand .brand-name strong { color: #9fb0bb; }
.footer-shop-brand .shop-mark { background: rgba(255, 255, 255, 0.1); }
.builder-link {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700;
  font-size: var(--text-small); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--signal); border-bottom: 2px solid transparent; padding-bottom: 2px;
}
.builder-link:hover { border-bottom-color: var(--signal); }
.copyright { font-size: var(--text-small); color: #93a4b0; }

/* A phone-only call bar. The main site deliberately does not have one, which is
   another point of separation between the two designs. */
.mobile-call {
  display: none; position: fixed; z-index: 55; inset: auto 0 0 0;
  align-items: center; justify-content: center; gap: 10px; min-height: 58px;
  background: var(--signal); color: var(--on-signal);
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--text-small);
}

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .visit-detail-grid { grid-template-columns: minmax(0, 1fr); }

  /* Halved rather than collapsed, so every row stays full and no gap colour shows. */
  .seal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .policy-grid, .facility-grid { grid-template-columns: minmax(0, 1fr); }

  .story-grid { grid-template-columns: minmax(0, 1fr); }
  .rating-summary { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .rating-score { justify-items: start; }

  .workbench { grid-template-columns: minmax(0, 1fr); }
  /* The rail becomes a scrolling row of chips: a ten-item vertical list above the
     answer would push the answer off a phone screen entirely. */
  .wb-rail {
    display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line);
    scrollbar-width: thin;
  }
  .wb-tab {
    flex: 0 0 auto; max-width: 15rem; border-bottom: 0; border-right: 1px solid var(--line);
  }
  .wb-tab[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--signal); }

  .shop-section-head, .why-grid, .page-hero-grid, .appointment-grid, .shop-cta-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .shop-cta-grid { align-items: start; }
}

@media (max-width: 860px) {
  .demo-nav { flex-wrap: wrap; gap: 0.75rem; }
  .demo-nav-toggle { display: block; }
  .demo-menu {
    display: none; order: 3; width: 100%; flex-direction: column; align-items: stretch;
    gap: 0.25rem; padding-bottom: 1rem;
  }
  .demo-menu.is-open { display: flex; }
  .demo-menu > a { padding-block: 0.6rem; }
  .demo-call { justify-content: center; }
  .shop-hero { min-height: 0; }
  .hero-content { padding-block: 60px 96px; }
  .hero-hours { position: static; width: 100%; }
  body { padding-bottom: 58px; }
  .mobile-call { display: flex; }
}

@media (max-width: 560px) {
  .seal-grid, .tech-grid, .story-facts { grid-template-columns: minmax(0, 1fr); }

  .two-fields { grid-template-columns: minmax(0, 1fr); }
  .confidence-grid > div { border-left: 0; padding-left: 0; }
}

/* ---------- Theme toggle ----------
   Folded in from the old root-level theme-toggle.css, which only these three
   pages ever loaded. One stylesheet instead of two means one less render-blocking
   request on every demo page. Squared corners and signal yellow: the rounded
   pill with an orange glow was one more thing making the demo look like Bay State.
*/

.theme-toggle {
  width: 72px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  color: var(--signal, #ffc400);
  background: transparent;
  cursor: pointer;
}

.theme-toggle__track {
  position: relative;
  width: 64px;
  height: 32px;
  display: block;
  overflow: hidden;
  border: 1px solid var(--line-strong, #a9b5bd);
  border-radius: 2px;
  background: var(--steel-deep, #1d2831);
  transition: border-color 180ms ease;
}

.theme-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 1px;
  background: rgba(255, 196, 0, 0.16);
  border: 1px solid rgba(255, 196, 0, 0.5);
  transition: transform 200ms cubic-bezier(0.2, 0.75, 0.25, 1), background-color 180ms ease;
}

.theme-toggle__icon {
  position: absolute;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: opacity 150ms ease, transform 200ms ease;
}

.theme-toggle__icon--sun { opacity: 1; transform: scale(1); }
.theme-toggle__icon--moon { opacity: 0; transform: scale(0.72); }

html[data-theme="dark"] .theme-toggle__thumb { transform: translateX(32px); background: rgba(255, 210, 63, 0.22); }
html[data-theme="dark"] .theme-toggle__icon--sun { opacity: 0; transform: scale(0.72); }
html[data-theme="dark"] .theme-toggle__icon--moon { opacity: 1; transform: scale(1); }

.theme-toggle:hover .theme-toggle__track { border-color: var(--signal, #ffc400); }

.theme-toggle:focus-visible {
  border-radius: 2px;
  outline: 3px solid var(--steel, #2e3d4a);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .theme-toggle { width: 66px; }
  .theme-toggle__track { width: 58px; height: 30px; }
  .theme-toggle__thumb { width: 22px; height: 22px; }
  html[data-theme="dark"] .theme-toggle__thumb { transform: translateX(28px); }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle__track,
  .theme-toggle__thumb,
  .theme-toggle__icon { transition-duration: 0.01ms !important; }
}

/* ---------- Motion ----------
   Al: "the demo look good but it feels dead, let it be a bit catchy or grab
   attention, but keep the service feel and professional." So: things arrive as
   you reach them, the headline numbers count up once, the beacon sweeps, and
   the workbench answer slides in when you change symptom. Deliberately not a
   blanket hover layer -- the existing hovers are already right.

   Every rule here is gated on .demo-js, which demo.js only sets after it has
   confirmed both IntersectionObserver and that motion is wanted. Without the
   script nothing is hidden and nothing animates: the page is simply finished. */

.demo-js [data-demo-reveal] {
  opacity: 0; transform: translateY(14px);
  transition: opacity 520ms var(--ease, cubic-bezier(0.2, 0.7, 0.3, 1)),
              transform 520ms var(--ease, cubic-bezier(0.2, 0.7, 0.3, 1));
}
.demo-js [data-demo-reveal].is-in { opacity: 1; transform: none; }

/* The signature piece. The shop is called Bay & Beacon and its mark is a
   lighthouse, so the mark itself carries a light: a narrow band crossing the
   tile every six seconds. Thematic rather than decorative, and it costs one
   compositor-only animation on one small element. */
.shop-mark { position: relative; overflow: hidden; }
.shop-mark svg { position: relative; z-index: 1; }
.demo-js .shop-mark::after {
  content: ""; position: absolute; inset: -50%;
  background: linear-gradient(76deg, transparent 42%, rgba(255, 196, 0, 0.5) 50%, transparent 58%);
  animation: beacon-sweep 6s linear infinite;
}
@keyframes beacon-sweep {
  0% { transform: translateX(-120%); }
  55%, 100% { transform: translateX(120%); }
}

/* The workbench answer. `hidden` is `display: none`, so switching panels
   restarts the animation on its own -- no class to add or remove. */
.demo-js .wb-panel { animation: wb-arrive 260ms var(--ease, cubic-bezier(0.2, 0.7, 0.3, 1)) both; }
@keyframes wb-arrive { from { opacity: 0; transform: translateX(10px); } }

/* ---------- Cross-page transition ----------
   The opt-in itself is the @view-transition rule at the very top of this file --
   see the note there. This is only its styling: deliberately not the main site's,
   a flat 180ms cut rather than its 260ms ease and no shared element, because the
   two sites are meant to feel built by different hands. */

::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: linear;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}