/* ==========================================================================
   components.css — Reusable UI pieces
   Buttons, cards, forms, header/nav, footer, accordion, timeline, gallery,
   sticky mobile bar, badges, breadcrumbs.
   ========================================================================== */


/* ==========================================================================
   1. LAYOUT PRIMITIVES
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }

.section {
  padding-block: var(--section-y);
}

.section--tight { padding-block: var(--section-y-tight); }

.section--muted { background-color: var(--bg-muted); }

.section--dark {
  background-color: var(--bg-dark);
  color: var(--text-on-dark);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--color-white); }

.section--dark p { color: var(--text-on-dark-muted); }

/* Section heading block */
.section-head {
  max-width: 60ch;
  margin-bottom: var(--space-xl);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head__eyebrow {
  display: block;
  margin-bottom: var(--space-xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);   /* labels are ink, not the action color */
}

.section--dark .section-head__eyebrow { color: var(--color-brass); }

/* Brass diamonds flanking centered eyebrows — one pair per section, max. */
.section-head--center .section-head__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}

.section-head--center .section-head__eyebrow::before,
.section-head--center .section-head__eyebrow::after {
  content: "";
  width: 7px;
  height: 7px;
  background-color: var(--color-brass);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.section-head__title { margin-bottom: var(--space-sm); }

.section-head__lead {
  font-size: var(--fs-lg);
  color: var(--text-secondary);
  margin-bottom: 0;
}

.section-head--center .section-head__lead { margin-inline: auto; }

.section--dark .section-head__lead { color: var(--text-on-dark-muted); }

/* Simple responsive grid */
.grid { display: grid; gap: var(--space-md); }

@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid { gap: var(--space-lg); }
}

/* Two-column split with text and media */
.split {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
  .split--media-first > :first-child { order: 2; }
  .split--media-first > :last-child  { order: 1; }
}


/* ==========================================================================
   2. BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 48px;              /* comfortable touch target */
  padding: var(--space-xs) var(--space-md);
  /* A button label must never wrap. A phone number broken across three lines
     is unreadable, and a wrapped label makes the button an odd height. */
  white-space: nowrap;
  flex-shrink: 0;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  /* Small-caps label treatment, mirroring "& PAINTING INC." in the mark */
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.btn:active { transform: translateY(1px); }

.btn__icon { flex-shrink: 0; width: 20px; height: 20px; }

/* Primary — the single most important action on any screen */
.btn--primary {
  background-color: var(--color-oxide);
  border-color: var(--color-oxide);
  color: var(--color-white);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: var(--color-white);
}

/* Secondary — outlined, for "Call" alongside the primary action */
.btn--secondary {
  background-color: transparent;
  border-width: 1.5px;
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  background-color: rgba(38, 34, 28, 0.06);
  border-color: var(--color-ink);
  color: var(--color-ink);
}

/* Secondary on dark backgrounds */
.btn--ghost-light {
  background-color: transparent;
  border-width: 1.5px;
  border-color: rgba(242, 237, 227, 0.55);
  color: var(--color-paper);
}

.btn--ghost-light:hover,
.btn--ghost-light:focus-visible {
  background-color: rgba(242, 237, 227, 0.10);
  border-color: var(--color-paper);
  color: var(--color-paper);
}

/* Solid light button on dark backgrounds */
.btn--light {
  background-color: var(--color-paper);
  border-color: var(--color-paper);
  color: var(--color-ink);
}

.btn--light:hover,
.btn--light:focus-visible {
  background-color: var(--color-paper-deep);
  border-color: var(--color-paper-deep);
  color: var(--color-ink);
}

/* Quiet text button with arrow.
   inline-flex is load-bearing: the arrow is an <svg>, and the reset gives
   svg display:block, so on a plain inline <a> the arrow drops to its own
   line. inline-flex keeps label and arrow on one baseline. */
.btn--link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  white-space: nowrap;
  min-height: 0;
  padding: 0;
  border: 0;
  color: var(--text-accent);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
}

.btn--link:hover { text-decoration: underline; }

/* Sizes the arrow whether or not it carries the .btn__icon class. */
.btn--link svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-out);
}

.btn--link:hover svg { transform: translateX(3px); }

.btn--lg { min-height: 54px; padding-inline: var(--space-lg); font-size: 0.875rem; }
.btn--sm { min-height: 40px; padding: var(--space-2xs) var(--space-sm); font-size: 0.75rem; }

.btn--block { width: 100%; }

/* A lone centered button. Needed because the base <p> rule caps paragraphs at
   68ch, so text-align:center alone centers inside that cap, not the section. */
.btn-center {
  display: flex;
  justify-content: center;
  max-width: none;
}

.btn[disabled],
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* Button group — stacks on phones, sits inline from 480px up */
.btn-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

@media (min-width: 480px) {
  .btn-group { flex-direction: row; flex-wrap: wrap; align-items: center; }
}


/* ==========================================================================
   3. UTILITY BAR (top strip, desktop only)
   ========================================================================== */

.utility-bar {
  display: none;
  background-color: var(--color-ink);
  color: var(--text-on-dark-muted);
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
}

@media (min-width: 1200px) {
  .utility-bar { display: block; }
}

.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--utility-bar-height);
}

.utility-bar__list {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.utility-bar__list li { margin: 0; }

.utility-bar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  color: var(--text-on-dark-muted);
  text-decoration: none;
}

.utility-bar__item svg { width: 15px; height: 15px; opacity: 0.75; }

a.utility-bar__item:hover { color: var(--color-white); }

.utility-bar__phone {
  font-size: 0.9375rem;
  font-weight: var(--fw-bold);
  color: var(--color-paper);
  letter-spacing: 0.02em;
}

.utility-bar__phone svg { opacity: 1; color: var(--color-brass); }


/* ==========================================================================
   4. HEADER + NAVIGATION
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--color-paper);
  border-bottom: var(--keyline-heavy) solid var(--color-ink);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: var(--header-height);
}

@media (min-width: 1200px) {
  .site-header__inner { min-height: var(--header-height-lg); }
}

/* --- Logo --- */

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  text-decoration: none;
  color: var(--text-primary);
  flex-shrink: 0;
}

.site-logo:hover { color: var(--text-primary); }

/* The primary lockup IS the logo — custom-outlined lettering, embedded SVG.
   Handoff minimum in headers: 170px; desktop runs 200px. */
.site-logo__lockup {
  display: block;
  width: 170px;
  height: auto;
  flex-shrink: 0;
}

@media (min-width: 1200px) {
  .site-logo__lockup { width: 200px; }
}

/* --- Desktop navigation ---
   WIDTH BUDGET — read this before adding a navigation item.
   At a 1200px viewport the container gives 1136px of usable width:

       logo ............ ~214px
       8 nav items ..... ~638px
       "Request an Estimate" ~196px
       gaps ............. ~32px
       ------------------------
       total ........... ~1080px, ~56px spare

   There is room for roughly one more short item, or one longer one if
   something else is shortened. Go past that and the nav and the button
   will collide. If you need more items, move the least-used ones into the
   footer, or raise the breakpoint below and let the drawer handle it.       */

.site-nav { display: none; }

@media (min-width: 1200px) {
  /* flex-shrink:0 is deliberate. Allowing this to shrink lets the link list
     spill out of its own box and sit on top of the buttons beside it. The
     breakpoint is set so the nav always fits at its natural width instead. */
  .site-nav { display: block; margin-left: auto; flex-shrink: 0; }
}

.site-nav__list {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__list li { margin: 0; }

.site-nav__link {
  display: block;
  position: relative;
  padding: var(--space-2xs) 0.5rem;
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out);
}



.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: -2px;             /* sits on the header's ink rule */
  height: 2px;
  background-color: var(--color-oxide);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}

.site-nav__link:hover { color: var(--text-primary); }
.site-nav__link:hover::after { transform: scaleX(1); }

.site-nav__link[aria-current="page"] {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

.site-nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* Header call-to-action cluster (desktop) */
.header-actions { display: none; }

@media (min-width: 1200px) {
  .header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    margin-left: var(--space-md);
    flex-shrink: 0;
  }
}

/* --- Mobile trigger --- */

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  min-height: 44px;
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  background-color: var(--color-white);
}

@media (min-width: 1200px) { .nav-toggle { display: none; } }

.nav-toggle__bars {
  position: relative;
  width: 18px;
  height: 12px;
  flex-shrink: 0;
}

.nav-toggle__bars span,
.nav-toggle__bars span::before,
.nav-toggle__bars span::after {
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background-color: currentColor;
  border-radius: 2px;
  transition: transform var(--duration-base) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}

.nav-toggle__bars span { top: 5px; }
.nav-toggle__bars span::before { content: ""; top: -5px; }
.nav-toggle__bars span::after  { content: ""; top: 5px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span { background-color: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span::after  { transform: translateY(-5px) rotate(-45deg); }

/* Header phone shortcut, phones only */
.header-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  min-height: 44px;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm);
  background-color: var(--color-oxide);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  margin-left: auto;
}

.header-call svg { width: 17px; height: 17px; }
.header-call:hover { background-color: var(--color-accent-dark); color: var(--color-white); }

@media (min-width: 1200px) { .header-call { display: none; } }

/* --- Mobile drawer --- */

.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: flex;
  justify-content: flex-end;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out),
              visibility 0s linear var(--duration-base);
}

.nav-drawer.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--duration-base) var(--ease-out);
}

.nav-drawer__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(14, 17, 20, 0.55);
}

.nav-drawer__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(88vw, 360px);
  height: 100%;
  padding: var(--space-md) var(--space-md) var(--space-xl);
  background-color: var(--color-paper);
  border-left: var(--keyline-heavy) solid var(--color-ink);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-out);
}

.nav-drawer.is-open .nav-drawer__panel { transform: translateX(0); }

.nav-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-subtle);
}

.nav-drawer__title {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.nav-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: calc(var(--space-2xs) * -1);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}

.nav-drawer__close:hover { background-color: var(--color-fog); color: var(--text-primary); }
.nav-drawer__close svg { width: 22px; height: 22px; }

.nav-drawer__list {
  margin: 0 0 var(--space-lg);
  padding: 0;
  list-style: none;
}

.nav-drawer__list li { margin: 0; }

.nav-drawer__link {
  display: block;
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  text-decoration: none;
}

.nav-drawer__link:hover { color: var(--text-accent); }

.nav-drawer__link[aria-current="page"] {
  color: var(--text-accent);
  font-weight: var(--fw-semibold);
}

.nav-drawer__actions { display: grid; gap: var(--space-2xs); }

.nav-drawer__meta {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.nav-drawer__meta p { margin-bottom: var(--space-2xs); max-width: none; }

/* Prevent background scroll while the drawer or lightbox is open */
body.is-locked { overflow: hidden; }


/* ==========================================================================
   5. STICKY MOBILE ACTION BAR
   ========================================================================== */

.sticky-action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky-bar);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background-color: var(--color-charcoal);
  border-top: 1px solid var(--border-dark);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

@media (min-width: 1200px) { .sticky-action-bar { display: none; } }

.sticky-action-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--sticky-bar-height);
  padding: var(--space-2xs) var(--space-3xs);
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  color: var(--text-on-dark);
  text-decoration: none;
  border-right: 1px solid var(--border-dark);
}

.sticky-action-bar__item:last-child { border-right: 0; }
.sticky-action-bar__item svg { width: 21px; height: 21px; }
.sticky-action-bar__item:hover,
.sticky-action-bar__item:active { background-color: var(--color-graphite); color: var(--color-white); }

.sticky-action-bar__item--accent { background-color: var(--color-oxide); color: var(--color-white); }
.sticky-action-bar__item--accent:hover,
.sticky-action-bar__item--accent:active { background-color: var(--color-accent-dark); }

/* Give page content room so the bar never covers the footer */
@media (max-width: 1199.98px) {
  body { padding-bottom: calc(var(--sticky-bar-height) + env(safe-area-inset-bottom, 0px)); }
}


/* ==========================================================================
   6. CARDS
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

@media (min-width: 768px) { .card { padding: var(--space-lg); } }

.card--interactive:hover {
  border-color: var(--color-ink);
  transform: translateY(-2px);
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--space-sm);
  border: 1px solid var(--border-subtle);
  background-color: var(--color-paper-soft);
  color: var(--color-ink);   /* decorative: never the action color */
  flex-shrink: 0;
}

.card__icon svg { width: 24px; height: 24px; }

.card__title { margin-bottom: var(--space-2xs); font-size: var(--fs-xl); }

.card__text {
  margin-bottom: var(--space-sm);
  color: var(--text-secondary);
  font-size: var(--fs-base);
  max-width: none;
}

.card__footer { margin-top: auto; padding-top: var(--space-2xs); }

/* Dark variant */
.card--dark {
  background-color: var(--bg-card-dark);
  border-color: var(--border-dark);
  color: var(--text-on-dark);
}

.card--dark .card__text { color: var(--text-on-dark-muted); }
.card--dark .card__icon { background-color: rgba(242, 237, 227, 0.08); border-color: var(--border-dark); color: var(--color-brass); }

/* Numbered step card */
.card__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-xs);
  background-color: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}


/* ==========================================================================
   7. TRUST BAR + BADGES
   ========================================================================== */

.trust-bar {
  background-color: var(--color-ink);
  color: var(--text-on-dark);
}

.trust-bar__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin: 0;
  padding-block: var(--space-md);
  padding-left: 0;
  list-style: none;
}

@media (min-width: 640px)  { .trust-bar__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .trust-bar__list { grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); } }

/* Three-point variant used on the home page */
@media (min-width: 640px)  { .trust-bar__list--three { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .trust-bar__list--three { grid-template-columns: repeat(3, 1fr); } }

.trust-bar__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--text-on-dark-muted);
}

.trust-bar__item svg {
  width: 26px; height: 26px;
  flex-shrink: 0;
  color: var(--color-brass);
  margin-top: 1px;
}

.trust-bar__item strong { display: block; color: var(--color-paper); font-size: var(--fs-base); }

/* The three-point variant carries the whole band on its own, so it is set a
   step larger than the four-point version, which shares its row with more
   items and has less width per column. */
.trust-bar__list--three { padding-block: var(--space-xl); }
.trust-bar__list--three .trust-bar__item { font-size: var(--fs-lg); }
.trust-bar__list--three .trust-bar__item svg { width: 44px; height: 44px; }
.trust-bar__list--three .trust-bar__item strong {
  font-size: var(--fs-2xl);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-2xs);
}

/* The three-point variant sits directly under the centered hero, so it centers
   too: icon over text, text centered, each column balanced about its own axis.
   Left-aligned items under a centered hero was the mismatch. */
@media (min-width: 640px) {
  .trust-bar__list--three .trust-bar__item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3xs, 0.25rem);
  }
  .trust-bar__list--three .trust-bar__item svg { margin-top: 0; }
  .trust-bar__list--three .trust-bar__item > span { display: block; }
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: 4px var(--space-2xs);
  border-radius: var(--radius-xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.badge--accent  { background-color: var(--color-accent-soft); color: var(--color-accent-dark); }
.badge--neutral { background-color: var(--color-mist); color: var(--text-secondary); }
.badge--warning { background-color: var(--color-warning-soft); color: var(--color-warning); }


/* ==========================================================================
   8. PLACEHOLDER NOTICE
   Marks content the owner still needs to supply. Deliberately obvious.
   ========================================================================== */

.placeholder-note {
  display: flex;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-lg);
  border: 1px dashed var(--color-brass);
  border-radius: var(--radius-sm);
  background-color: var(--color-warning-soft);
  color: #5C4A1E;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.placeholder-note svg { width: 20px; height: 20px; flex-shrink: 0; }
.placeholder-note p { margin: 0; max-width: none; }
.placeholder-note strong { display: block; margin-bottom: 2px; }


/* ==========================================================================
   9. ACCORDION (FAQ + process detail)
   Built on <details>/<summary>: works with JavaScript disabled.
   ========================================================================== */

.accordion { border-top: 1px solid var(--border-subtle); }

.accordion__item { border-bottom: 1px solid var(--border-subtle); }

.accordion__item > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md) 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
}

.accordion__item > summary::-webkit-details-marker { display: none; }
.accordion__item > summary:hover { color: var(--text-accent); }

.accordion__chevron {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--text-muted);
  transition: transform var(--duration-base) var(--ease-out);
}

.accordion__item[open] > summary .accordion__chevron { transform: rotate(180deg); }
.accordion__item[open] > summary { color: var(--text-accent); }

.accordion__body { padding-bottom: var(--space-md); }
.accordion__body > :last-child { margin-bottom: 0; }
.accordion__body p { color: var(--text-secondary); }


/* ==========================================================================
   10. TIMELINE (repair process)
   ========================================================================== */

.timeline {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.timeline__item {
  position: relative;
  margin: 0;
  padding: 0 0 var(--space-lg) calc(var(--space-lg) + var(--space-xs));
}

.timeline__item:last-child { padding-bottom: 0; }

/* Connector line */
.timeline__item::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 44px;
  bottom: 0;
  width: 2px;
  background-color: var(--border-subtle);
}

.timeline__item:last-child::before { display: none; }

/* Numbered stamps: square, keyline-ruled, like entries in a ledger */
.timeline__marker {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: var(--keyline-heavy) solid var(--color-ink);
  background-color: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.timeline__title { margin-bottom: var(--space-3xs); font-size: var(--fs-xl); padding-top: 8px; }
.timeline__text { color: var(--text-secondary); margin-bottom: 0; }

.section--dark .timeline__item::before { background-color: var(--border-dark); }
.section--dark .timeline__marker { background-color: transparent; border-color: var(--color-paper); color: var(--color-paper); }
.section--dark .timeline__text { color: var(--text-on-dark-muted); }

/* Compact timeline: one short line per step, no paragraphs. Runs as a row on
   wide screens so four steps read as a single sequence. */
.timeline--compact .timeline__item { padding-bottom: var(--space-md); }
.timeline--compact .timeline__title { margin-bottom: 0; font-size: var(--fs-lg); }

@media (min-width: 860px) {
  .timeline--compact {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
  }
  .timeline--compact .timeline__item {
    padding: 0;
    padding-top: calc(44px + var(--space-sm));
  }
  .timeline--compact .timeline__marker { left: 0; top: 0; }
  /* Connector runs horizontally between the numbered stamps */
  .timeline--compact .timeline__item::before {
    left: 52px;
    right: calc(var(--space-lg) * -1);
    top: 21px;
    bottom: auto;
    width: auto;
    height: 2px;
  }
  .timeline--compact .timeline__item:last-child::before { display: none; }
  .timeline--compact .timeline__title { padding-top: 0; }
}

@media (min-width: 768px) {
  .timeline__item { padding-left: calc(var(--space-2xl) + var(--space-2xs)); padding-bottom: var(--space-xl); }
  .timeline__item::before { left: 25px; top: 52px; }
  .timeline__marker { width: 52px; height: 52px; font-size: var(--fs-lg); }
  .timeline__title { padding-top: 10px; }
}



/* ==========================================================================
   10b. STEP LIST — ruled rows, like entries in a well-kept estimate.
   Used for "what to do after an accident" and the repair process. Cleaner
   than boxes for short numbered sequences, and no orphan card on odd counts.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Steps — a numbered sequence read top to bottom.

   The earlier version ruled every row top and bottom, which chopped one
   sequence into a stack of unrelated boxes. This version does the opposite:
   a single hairline runs down through the number column and joins step 1 to
   step 2 to step 3, so the eye follows the order instead of re-deciding at
   each rule. The number stays a stamp-language square.

   The list caps its own measure and stays flush left, so it lines up with
   the page hero above it rather than floating centered in the section.
   -------------------------------------------------------------------------- */

.steps {
  --steps-num: 60px;          /* number square, referenced by the connector */
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  margin: 0;
  padding: 0;
  max-width: none;
  list-style: none;
  counter-reset: none;
}

.steps__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* min-width:0 is what stops a long description from pushing out of its
     column and overflowing the container. A flex item's default minimum size
     is its content, not zero. */
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* --- The connector --------------------------------------------------------
   One hairline that runs from each number to the next, so the sequence reads
   as a single line of progress instead of separate tiles. Stacked, it runs
   downward; in a row, across. It is drawn behind the number, which is opaque
   and therefore masks it.
   -------------------------------------------------------------------------- */

.steps__item::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: calc(var(--steps-num) / 2);
  width: 1px;
  height: calc(100% + var(--space-xl));
  background-color: var(--border-subtle);
}

.steps__item:last-child::before { content: none; }

/* --- Row layout -----------------------------------------------------------
   Every step on one line, evenly spaced, all sharing one rule through the
   numbers. flex:1 1 0 makes the columns equal regardless of text length, so
   the numbers land on a regular rhythm rather than wherever the copy ends.
   -------------------------------------------------------------------------- */

@media (min-width: 860px) {
  .steps {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-lg);
  }

  .steps__item { flex: 1 1 0; }

  /* Centre of this number across to the centre of the next: one column width
     plus one gap. */
  .steps__item::before {
    left: 50%;
    top: calc(var(--steps-num) / 2);
    width: calc(100% + var(--space-lg));
    height: 1px;
  }
}

.steps__num {
  position: relative;
  z-index: 1;                     /* sits over the connector */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--steps-num);
  height: var(--steps-num);
  border: 2px solid var(--color-ink);
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* The square masks the connector, so it has to match whatever it sits on. */
.section--muted .steps__num { background-color: var(--bg-muted); }
.section--dark  .steps__num { background-color: var(--bg-dark); }

.steps__body {
  padding-top: var(--space-sm);
  max-width: 34ch;
}

.steps__body h2,
.steps__body h3 {
  margin: 0 0 var(--space-2xs);
  font-family: var(--font-ui);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: 0;
  color: var(--text-primary);
}

/* A phone number inside a step title stays oxide, because oxide means
   clickable everywhere else on the site and a tel: link is clickable. */
.steps__body h3 a {
  color: var(--text-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.section--dark .steps__body h3 a { color: var(--color-brass); }

.steps__body p {
  margin: 0;
  max-width: none;
  color: var(--text-secondary);
  font-size: var(--fs-md);
  line-height: var(--lh-normal, 1.6);
}

/* On ink sections */
.section--dark .steps__num { border-color: var(--color-paper); color: var(--color-paper); }
.section--dark .steps__item::before { background-color: var(--border-dark); }
.section--dark .steps__body h2,
.section--dark .steps__body h3 { color: var(--color-paper); }
.section--dark .steps__body p { color: var(--text-on-dark-muted); }

/* .steps--two-col and .steps--row are both retired. Every step list is now
   the same two-across grid, so there is nothing left for a modifier to vary. */

/* ==========================================================================
   11. FORMS
   ========================================================================== */

.form { max-width: 720px; }

.form__section {
  padding-block: var(--space-lg) 0;
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-lg);
}

.form__section:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }

.form__section-title {
  margin-bottom: var(--space-3xs);
  font-size: var(--fs-xl);
}

.form__section-hint {
  margin-bottom: var(--space-md);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.form__row { display: grid; gap: var(--space-md); margin-bottom: var(--space-md); }

@media (min-width: 640px) {
  .form__row--2 { grid-template-columns: repeat(2, 1fr); }
  .form__row--3 { grid-template-columns: repeat(3, 1fr); }
}

.field { display: flex; flex-direction: column; }

.field__label {
  margin-bottom: var(--space-3xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-primary);
}

.field__required { color: var(--color-accent); margin-left: 2px; }

.field__optional {
  margin-left: 4px;
  font-weight: var(--fw-regular);
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}

.field__hint {
  margin-top: var(--space-3xs);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: var(--lh-snug);
}

.field__control,
.field select,
.field textarea,
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="date"],
.field input[type="file"] {
  width: 100%;
  min-height: 48px;
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  color: var(--text-primary);
  font-size: 1rem;               /* 16px prevents iOS zoom-on-focus */
  line-height: 1.4;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.field textarea { min-height: 140px; padding-block: var(--space-xs); }

.field select {
  appearance: none;
  padding-right: var(--space-xl);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-xs) center;
  background-size: 18px;
}

.field__control:hover,
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--text-muted); }

.field__control:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--focus-ring);
  box-shadow: var(--shadow-focus);
  outline: none;
}

.field input[type="file"] {
  padding: var(--space-2xs);
  background-color: var(--color-fog);
  cursor: pointer;
}

.field input[type="file"]::file-selector-button {
  margin-right: var(--space-xs);
  padding: var(--space-2xs) var(--space-sm);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background-color: var(--color-white);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

/* Radio + checkbox groups */
.choice-group { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }

.choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 48px;
  padding: var(--space-2xs) var(--space-sm);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  font-size: var(--fs-base);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}

.choice:hover { border-color: var(--text-muted); background-color: var(--color-fog); }

.choice input { width: 20px; height: 20px; accent-color: var(--color-accent); flex-shrink: 0; }

.choice:has(input:checked) {
  border-color: var(--color-accent);
  background-color: var(--color-accent-soft);
  font-weight: var(--fw-medium);
}

.choice:has(input:focus-visible) { box-shadow: var(--shadow-focus); }

/* Consent checkbox — full width, wraps naturally */
.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  padding: var(--space-sm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background-color: var(--color-fog);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  cursor: pointer;
}

.consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--color-accent); flex-shrink: 0; }

/* Validation states */
.field__error {
  display: none;
  align-items: center;
  gap: var(--space-3xs);
  margin-top: var(--space-3xs);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-error);
}

.field__error svg { width: 16px; height: 16px; flex-shrink: 0; }

.field.has-error .field__error { display: flex; }

.field.has-error input,
.field.has-error select,
.field.has-error textarea,
.field.has-error .choice { border-color: var(--color-error); }

.field.has-error input:focus,
.field.has-error select:focus,
.field.has-error textarea:focus {
  box-shadow: 0 0 0 3px rgba(140, 47, 27, 0.25);
}

/* Form-level summary of errors, announced to screen readers */
.form__alert {
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-lg);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
}

.form__alert--error {
  background-color: var(--color-error-soft);
  border: 1px solid var(--color-error);
  color: #7C0D16;
}

.form__alert--success {
  background-color: var(--color-success-soft);
  border: 1px solid var(--color-success);
  color: #0F5733;
}

.form__alert p { margin-bottom: var(--space-2xs); max-width: none; }
.form__alert ul { margin: 0; padding-left: 1.2em; }
.form__alert a { color: inherit; }

/* Honeypot — hidden from people, visible to naive bots.
   Not display:none, because some bots skip those fields. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-subtle);
}

.form__footer-note { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }


/* ==========================================================================
   12. GALLERY
   ========================================================================== */

.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-bottom: var(--space-lg);
}

.gallery-filter {
  min-height: 44px;
  padding: var(--space-2xs) var(--space-sm);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background-color: var(--color-white);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: all var(--duration-fast) var(--ease-out);
}

.gallery-filter:hover { border-color: var(--text-primary); color: var(--text-primary); }

.gallery-filter[aria-pressed="true"] {
  background-color: var(--color-charcoal);
  border-color: var(--color-charcoal);
  color: var(--color-white);
}

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px)  { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } }

.gallery-item { margin: 0; }

.gallery-item[hidden] { display: none; }

.gallery-item__button {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-fog);
  text-align: left;
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.gallery-item__button:hover {
  border-color: var(--color-ink);
  transform: translateY(-2px);
}

.gallery-item__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: var(--color-mist);
  overflow: hidden;
}

.gallery-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.gallery-item__button:hover .gallery-item__media img { transform: scale(1.04); }

.gallery-item__tag {
  position: absolute;
  top: var(--space-2xs);
  left: var(--space-2xs);
  padding: 3px var(--space-2xs);
  border-radius: var(--radius-xs);
  background-color: rgba(14, 17, 20, 0.82);
  color: var(--color-white);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.gallery-item__caption {
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-white);
}

.gallery-item__title {
  margin: 0 0 2px;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.gallery-item__meta { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }

.gallery-empty {
  padding: var(--space-xl);
  text-align: center;
  color: var(--text-muted);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
}

/* --- Before / after comparison slider --- */

.compare {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background-color: var(--color-mist);
  touch-action: pan-y;            /* allow vertical page scroll over the widget */
  user-select: none;
}

.compare__layer { position: absolute; inset: 0; }

.compare__layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* The "before" image sits underneath and is never clipped. */
.compare__layer--before { z-index: 1; }

/* The "after" image sits on top and is clipped by a custom property.
   The property is set on .compare and inherits down to here, so the
   script only has to update one value in one place. */
.compare__layer--after {
  z-index: 2;
  clip-path: inset(0 0 0 var(--compare-position, 50%));
}

.compare__label {
  position: absolute;
  bottom: var(--space-2xs);
  padding: 4px var(--space-2xs);
  border-radius: var(--radius-xs);
  background-color: rgba(14, 17, 20, 0.82);
  color: var(--color-white);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  pointer-events: none;
}

.compare__label--before { left: var(--space-2xs); }
.compare__label--after  { right: var(--space-2xs); }

.compare__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--compare-position, 50%);
  width: 3px;
  margin-left: -1.5px;
  background-color: var(--color-white);
  box-shadow: 0 0 0 1px rgba(14, 17, 20, 0.28);
  pointer-events: none;
}

.compare__handle {
  position: absolute;
  top: 50%;
  left: var(--compare-position, 50%);
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border: var(--keyline-heavy) solid var(--color-ink);
  border-radius: var(--radius-xs);
  background-color: var(--color-paper);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
}

.compare__handle svg { width: 24px; height: 24px; pointer-events: none; }

/* Native range input fallback: works without JavaScript and gives
   keyboard users a real slider with correct semantics. */
.compare__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  appearance: none;
  background: transparent;
}

.compare__range::-webkit-slider-thumb { appearance: none; width: 48px; height: 100%; }
.compare__range::-moz-range-thumb { width: 48px; height: 100%; border: 0; background: transparent; }
.compare__range:focus-visible ~ .compare__handle { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

/* --- Lightbox --- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background-color: rgba(8, 10, 12, 0.92);
}

.lightbox[hidden] { display: none; }

.lightbox__figure {
  position: relative;
  max-width: min(1100px, 100%);
  max-height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.lightbox__figure img {
  max-height: 76vh;
  width: auto;
  margin-inline: auto;
  border-radius: var(--radius-sm);
  object-fit: contain;
}

.lightbox__caption {
  color: var(--text-on-dark);
  font-size: var(--fs-sm);
  text-align: center;
}

.lightbox__caption strong { display: block; font-size: var(--fs-base); margin-bottom: 2px; }

.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.14);
  color: var(--color-white);
  transition: background-color var(--duration-fast) var(--ease-out);
}

.lightbox__close:hover,
.lightbox__nav:hover { background-color: rgba(255, 255, 255, 0.3); }

.lightbox__close { top: calc(var(--space-md) * -1); right: 0; }
.lightbox__nav--prev { left: var(--space-2xs); top: 50%; margin-top: -24px; }
.lightbox__nav--next { right: var(--space-2xs); top: 50%; margin-top: -24px; }

.lightbox__close svg,
.lightbox__nav svg { width: 24px; height: 24px; }

@media (min-width: 768px) {
  .lightbox { padding: var(--space-2xl); }
  .lightbox__nav--prev { left: calc(var(--space-2xl) * -1); }
  .lightbox__nav--next { right: calc(var(--space-2xl) * -1); }
}


/* ==========================================================================
   13. BREADCRUMBS
   ========================================================================== */

.breadcrumb {
  padding-block: var(--space-sm);
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--border-subtle);
  background-color: var(--color-fog);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb__list li { display: flex; align-items: center; gap: var(--space-3xs); margin: 0; }

.breadcrumb__list li + li::before {
  content: "/";
  color: var(--color-silver);
  margin-right: var(--space-3xs);
}

.breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.breadcrumb a:hover { color: var(--text-accent); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--text-primary); font-weight: var(--fw-medium); }


/* ==========================================================================
   14. FOOTER
   ========================================================================== */

.site-footer {
  background-color: var(--color-ink);
  color: var(--text-on-dark-muted);
  font-size: var(--fs-base);
}

.site-footer a { color: var(--text-on-dark-muted); text-decoration: none; }
.site-footer a:hover { color: var(--color-white); text-decoration: underline; }

.site-footer__top {
  display: grid;
  gap: var(--space-xl);
  padding-block: var(--space-2xl) var(--space-xl);
}

@media (min-width: 700px)  { .site-footer__top { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .site-footer__top { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--space-lg); } }

.site-footer__title {
  margin-bottom: var(--space-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-white);
}

.site-footer__list { margin: 0; padding: 0; list-style: none; }
.site-footer__list li { margin-bottom: var(--space-2xs); }

.site-footer__logo {
  display: block;
  width: 96px;
  height: auto;
  margin-bottom: var(--space-sm);
}

/* EST. 1994 — always brass, tracked 0.2em, never struck through by a rule */
.site-footer__est {
  display: block;
  margin-bottom: var(--space-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-year);
  text-transform: uppercase;
  color: var(--color-brass);
}

.site-footer__blurb { color: var(--text-on-dark-muted); font-size: var(--fs-base); }

.site-footer address { font-style: normal; line-height: var(--lh-relaxed); }

.site-footer__hours { margin: 0; }
.site-footer__hours div { display: flex; justify-content: space-between; gap: var(--space-sm); max-width: 260px; }
.site-footer__hours dt { color: var(--text-on-dark-muted); }
.site-footer__hours dd { margin: 0; color: var(--color-paper); }

.site-footer__social { display: flex; gap: var(--space-2xs); margin-top: var(--space-sm); }

.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-sm);
  color: var(--text-on-dark-muted);
}

.site-footer__social a:hover { background-color: var(--color-ink-raised); color: var(--color-paper); }
.site-footer__social svg { width: 20px; height: 20px; }

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-block: var(--space-md);
  border-top: 1px solid var(--border-dark);
  font-size: var(--fs-sm);
}

@media (min-width: 768px) {
  .site-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.site-footer__bottom p { margin: 0; max-width: none; }

.site-footer__bar {
  display: inline-block;
  margin-top: var(--space-2xs);
  padding: 3px var(--space-2xs);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-xs);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-on-dark-muted);
}


/* ==========================================================================
   15. SKIP LINK
   ========================================================================== */

.skip-link {
  position: absolute;
  top: 0;
  left: var(--space-sm);
  z-index: var(--z-skip-link);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: 0;
  background-color: var(--color-oxide);
  color: var(--color-white);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transform: translateY(-110%);
  transition: transform var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--color-white);
}

/* ==========================================================================
   MARQUEE — a slow scrolling row of names
   --------------------------------------------------------------------------
   Used on the insurance page for the carriers whose claims the shop handles.
   Deliberately typographic: no logo artwork, because reproducing insurer
   trademarks would read as an approved-shop relationship the shop does not
   have.

   How the loop works: two identical tracks sit side by side inside a flex
   container, and both translate left by exactly one track width plus one gap.
   At the end of the cycle track two is where track one started, so the reset
   to 0 is invisible. The duplicate carries aria-hidden, so a screen reader
   reads the list once.
   ========================================================================== */

.marquee {
  display: flex;
  gap: var(--space-2xl);
  overflow: hidden;
  padding-block: var(--space-lg);
  border-block: 1px solid var(--border-subtle);
  /* Fade both ends so names slide in and out rather than being chopped. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee__track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-2xl);
  margin: 0;
  padding: 0;
  list-style: none;
  animation: marquee-scroll var(--marquee-duration, 48s) linear infinite;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% - var(--space-2xl))); }
}

/* Alternating rows run the other way. Stacked rows all drifting the same
   direction reads as one sliding slab; alternating them reads as separate
   lists. animation-direction rather than a second keyframe set, so the two
   can never fall out of step. */
.marquee--reverse .marquee__track { animation-direction: reverse; }

/* Group marker. Rides in the same track as the names, so one row can still
   show its categories. Brass and smaller, so it reads as a divider between
   groups rather than as another name in the list. */
.marquee__item--group {
  color: var(--color-brass);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
}

/* Row label. Sits in the page gutter above its row. */
.marquee__label {
  max-width: var(--container-max);
  margin: var(--space-lg) auto var(--space-2xs);
  padding-inline: var(--gutter);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Stacked rows share their borders rather than doubling them up. */
.marquee + .marquee__label { margin-top: var(--space-xl); }
.marquee__label + .marquee { border-top: 0; }

/* Let someone stop it to read a name. */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

.marquee__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-ink);
}

/* Brass diamond between names, matching the separators used elsewhere. */
.marquee__item::after {
  content: "";
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  background-color: var(--color-brass);
  transform: rotate(45deg);
}

/* Motion is the whole point of this component, so when it is unwelcome the
   component becomes a plain wrapped list rather than a stalled scroller. */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .marquee__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--space-sm);
  }
  .marquee__track[aria-hidden="true"] { display: none; }
}

/* ==========================================================================
   SCROLL REVEAL
   --------------------------------------------------------------------------
   Elements marked [data-reveal] fade and rise into place the first time they
   enter the viewport, then stay put. It never repeats: re-animating on the
   way back up is the thing that makes scroll effects feel cheap.

   Progressive enhancement, and the order matters. Nothing here applies until
   main.js puts .js-reveal on <html>. So with JavaScript off, blocked, or
   still loading, every element is simply visible -- the failure mode is a
   normal page, never a blank one.
   ========================================================================== */

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.55s var(--ease-out),
    transform 0.55s var(--ease-out);
  /* Delay is set per element by --reveal-i, so items in a group arrive one
     after another rather than all at once. */
  transition-delay: calc(var(--reveal-i, 0) * 90ms);
  will-change: opacity, transform;
}

.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Motion off means motion off: content appears, nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal],
  .js-reveal [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   REVIEW CARDS — live Yelp excerpts on the home page
   --------------------------------------------------------------------------
   The list starts empty and stays empty unless reviews.js gets a response,
   so every rule here has to survive an empty <ul>: no min-height, no
   placeholder, no reserved gap. An unfilled strip should look like it was
   never there, leaving just the heading and the two links.
   ========================================================================== */

.review-list {
  display: grid;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* :not(:empty) so the margin only appears once there is something to space. */
.review-list:not(:empty) { margin-bottom: var(--space-2xl); }

@media (min-width: 860px) {
  .review-list { grid-template-columns: repeat(3, 1fr); }
}

.review-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  margin: 0;
  padding: var(--space-lg);
  background-color: var(--color-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

/* --- Stars ---------------------------------------------------------------
   Drawn as squares rotated into diamonds, matching the brass diamond used as
   a separator elsewhere, rather than importing a star glyph that belongs to
   another type family. The row is aria-hidden and the rating is announced by
   the wrapper's aria-label instead. */

.review-card__stars { display: flex; gap: 5px; }

.review-card__star {
  width: 11px;
  height: 11px;
  transform: rotate(45deg);
  background-color: transparent;
  border: 1.5px solid var(--color-brass);
}

.review-card__star.is-on { background-color: var(--color-brass); }

.review-card__text {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--text-primary);
  font-size: var(--fs-md);
  line-height: var(--lh-normal, 1.6);
}

.review-card__text p { margin: 0; max-width: none; }

.review-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: auto 0 0;          /* pin to the bottom so cards align */
  padding-top: var(--space-xs);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.review-card__name { font-weight: var(--fw-semibold); color: var(--text-primary); }

.review-card__link {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-accent);
}

.review-actions { justify-content: center; }