@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;1,600&display=swap');

/* ==========================================================================
   Le Carrousel Auto Detailing
   Design system. Light theme only.

   1. Tokens
   2. Base
   3. Layout utilities
   4. Type components
   5. Pills, links, arrows
   6. Photo frames and media
   7. Header
   8. Footer
   9. Scroll row + service cards
  10. Work grid
  11. Before / after slider (built, not used on any page)
  11b. Before / after diptych (.ba-pair, the one in use)
  12. FAQ accordion
  13. Contact block + service picker
  14. Price table / package cards
  15. Home page sections
  16. Legacy pages (services / process / contact) compatibility
  17. Motion and print
  18. Styleguide only
  19. Utilities, last
   ========================================================================== */

/* 1. Tokens ================================================================= */

:root {
  /* Surfaces. Light only. */
  --paper:        #ffffff;   /* page base */
  --paper-warm:   #f5f2ec;   /* alternating warm band */
  --paper-alt:    #e8e4dc;   /* image placeholder / inset panel */
  --paper-deep:   #ddd8cd;   /* pressed / active fill */

  /* Ink */
  --ink:          #16150f;   /* headings, solid pills */
  --ink-2:        #3a382f;   /* body copy */
  --muted:        #74716a;   /* secondary copy, labels */
  --ghost:        #8f8a7e;   /* headline line one, dim serif. 3.4:1 on paper, 3.1:1 on paper-warm */

  /* Lines */
  --line:         #ddd8ce;
  --line-strong:  #c3bcae;

  /* Accent. Used sparingly: selection and one hover state. */
  --red:          #9b3f2d;

  /* On-photo */
  --on-photo:     #ffffff;
  --scrim:        rgba(12, 11, 8, 0.62);

  /* Type */
  --display: 'DM Sans', ui-sans-serif, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --serif:   'Playfair Display', 'Iowan Old Style', Georgia, serif;

  --fs-hero:      clamp(2.25rem, 9.4vw, 7.25rem);
  --fs-display:   clamp(1.75rem, 5vw, 3.75rem);
  --fs-statement: clamp(1.25rem, 3.1vw, 2.6rem);
  --fs-h2:        clamp(1.375rem, 2.6vw, 2.125rem);
  --fs-h3:        clamp(1.0625rem, 1.5vw, 1.3125rem);
  --fs-lead:      clamp(1rem, 1.25vw, 1.1875rem);
  --fs-body:      1rem;
  --fs-small:     0.875rem;
  --fs-pill:      0.8125rem;
  --fs-label:     0.6875rem;

  --lh-tight: 0.9;
  --lh-head:  1.08;
  --lh-body:  1.6;

  --track-label: 0.16em;
  --track-pill:  0.055em;
  --track-head: -0.03em;

  /* Space. 8px rhythm with a few half steps. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --gutter:    clamp(20px, 3.2vw, 46px);
  --section-y: clamp(56px, 8vw, 120px);
  --maxw:        1600px;
  --maxw-narrow: 1040px;
  --maxw-text:   68ch;

  /* Radius */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-photo: clamp(14px, 1.6vw, 26px);
  --r-pill: 999px;

  /* Motion. Feedback only. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  220ms;

  --header-h: 68px;
}

/* 2. Base =================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--display);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 500;
  line-height: var(--lh-head);
  letter-spacing: var(--track-head);
}

p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

img, video, svg { display: block; max-width: 100%; }

ul { margin: 0; padding: 0; list-style: none; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

::selection { background: var(--red); color: #fff; }

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

.skip-link {
  position: absolute;
  top: -80px;
  left: var(--s4);
  z-index: 200;
  padding: var(--s3) var(--s4);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--fs-small);
  border-radius: var(--r-sm);
}
.skip-link:focus { top: var(--s2); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 3. Layout utilities ======================================================= */

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

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--warm { background: var(--paper-warm); }
.section--ruled { border-top: 1px solid var(--line); }

.stack > * + * { margin-top: var(--s4); }
.stack-lg > * + * { margin-top: var(--s6); }

/* Spacing utilities live at the very end of this file, see section 19. */

/* Label row with an optional link on the right. */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  margin-bottom: var(--s6);
}

/* Two column split: label left, content right. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s6);
}
@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 5vw, 96px);
  }
}

/* 4. Type components ======================================================== */

.eyebrow {
  display: block;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
  margin: 0;
}
.eyebrow--ink { color: var(--ink); }

/* Giant two-tone uppercase headline. */
.hero-head {
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: -0.035em;
  font-weight: 500;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}
.hero-head > span { display: block; }
.hero-head .line-1 { color: var(--ghost); }
.hero-head .line-2 { color: var(--ink); }

/* Large uppercase section headline, one tone. */
.display-head {
  font-size: var(--fs-display);
  line-height: 0.96;
  letter-spacing: -0.03em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--ink);
}
.display-head .dim { color: var(--ghost); }

.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; }

.lead {
  font-size: var(--fs-lead);
  color: var(--ink-2);
  max-width: var(--maxw-text);
}

.small { font-size: var(--fs-small); }
.muted { color: var(--muted); }

/* Serif statement. Grey by default, key phrases in ink. */
.statement {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-statement);
  line-height: 1.24;
  letter-spacing: -0.012em;
  color: var(--ghost);
  margin: 0;
  text-wrap: pretty;
}
.statement strong { font-weight: 400; color: var(--ink); }
.statement--center {
  text-align: center;
  max-width: 22ch;
  margin-inline: auto;
}
@media (min-width: 700px) {
  .statement--center { max-width: 28ch; }
}
@media (min-width: 1100px) {
  .statement--center { max-width: 34ch; }
}

/* 5. Pills, links, arrows =================================================== */

.pill-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}

.pill {
  --pill-bg: transparent;
  --pill-fg: var(--ink);
  --pill-bd: var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  min-height: 44px;
  padding: 10px var(--s5);
  border: 1px solid var(--pill-bd);
  border-radius: var(--r-pill);
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-size: var(--fs-pill);
  font-weight: 500;
  letter-spacing: var(--track-pill);
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
  text-align: center;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.pill:hover {
  --pill-bd: var(--ink);
  --pill-bg: var(--paper-warm);
}

.pill--solid {
  --pill-bg: var(--ink);
  --pill-fg: var(--paper);
  --pill-bd: var(--ink);
  font-weight: 600;
}
.pill--solid:hover {
  --pill-bg: #2b2920;
  --pill-bd: #2b2920;
  --pill-fg: var(--paper);
}

/* On top of a photo. */
.pill--ghost {
  --pill-fg: var(--on-photo);
  --pill-bd: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(2px);
}
.pill--ghost:hover {
  --pill-bg: var(--on-photo);
  --pill-fg: var(--ink);
  --pill-bd: var(--on-photo);
}

.pill--sm { min-height: 36px; padding: 7px var(--s4); font-size: 0.75rem; }
.pill--wide { width: 100%; }
.pill--static { cursor: default; }
.pill--static:hover { --pill-bd: var(--line-strong); --pill-bg: transparent; }

/* Selectable pill (service picker). */
.pill--select { cursor: pointer; }
.pill--select[aria-pressed="true"] {
  --pill-bg: var(--ink);
  --pill-fg: var(--paper);
  --pill-bd: var(--ink);
}
.pill--select[aria-pressed="true"]:hover { --pill-bg: #2b2920; --pill-bd: #2b2920; }
.pill--select .pill__tick {
  width: 0;
  overflow: hidden;
  transition: width var(--dur) var(--ease);
}
.pill--select[aria-pressed="true"] .pill__tick { width: 12px; }

.pill__arrow {
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform var(--dur) var(--ease);
}
.pill:hover .pill__arrow,
.text-link:hover .pill__arrow { transform: translate(2px, -2px); }

/* Quiet text link with an arrow. */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-pill);
  font-weight: 600;
  letter-spacing: var(--track-pill);
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.text-link:hover { border-color: var(--ink); color: var(--red); }

.link-muted { color: var(--muted); transition: color var(--dur) var(--ease); }
.link-muted:hover { color: var(--ink); }

/* 6. Photo frames and media ================================================= */

/* Every image sits in a frame. The frame carries the aspect ratio and a warm
   placeholder fill, so a missing asset reads as an intentional block instead
   of a collapsed element. */
.photo {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--paper-alt);
  border-radius: var(--r-photo);
  aspect-ratio: var(--ar, 16 / 9);
}
.photo > picture,
.service-card__media picture,
.ba__layer { display: block; }

.photo > img,
.photo > picture,
.photo > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
/* Per instance framing. Set --op on the .photo frame. */
.photo > img,
.photo > picture > img { object-position: var(--op, 50% 50%); }
/* Keeps broken-image alt text small and quiet while assets are pending. */
.photo img {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.photo--square { --ar: 1 / 1; }
.photo--portrait { --ar: 4 / 5; }
.photo--landscape { --ar: 4 / 3; }
.photo--wide { --ar: 3 / 2; }

.photo--zoom > picture > img,
.photo--zoom > img { transition: transform 500ms var(--ease); }
a:hover .photo--zoom > picture > img,
a:hover .photo--zoom > img { transform: scale(1.03); }

.caption {
  margin-top: var(--s3);
  font-size: var(--fs-small);
  color: var(--muted);
  max-width: 62ch;
}

/* 7. Header ================================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--header-h);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 40px;
  flex: none;
}
.brand-mark img {
  width: auto;
  height: 38px;
  max-width: 30px;
  object-fit: contain;
}
.brand-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}
.brand-name small {
  display: block;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.26em;
  color: var(--muted);
  margin-top: 5px;
}

.desktop-nav {
  display: none;
  align-items: center;
  gap: clamp(20px, 2.4vw, 40px);
  margin-inline: auto;
}
.desktop-nav a {
  font-size: var(--fs-pill);
  font-weight: 500;
  letter-spacing: var(--track-pill);
  text-transform: uppercase;
  color: var(--ink);
  padding-block: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.desktop-nav a:hover,
.desktop-nav a[aria-current="page"] { border-bottom-color: var(--ink); }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex: none;
}
.header-cta { display: none; }

.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: flex-end;
  padding: 0 2px;
}
.menu-toggle span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--ink);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

.mobile-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--paper);
  border-block: 1px solid var(--line);
  padding: var(--s5) var(--gutter) var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav a {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line);
}
.mobile-nav a:last-child { border-bottom: 0; }
.mobile-nav .pill { align-self: flex-start; margin-top: var(--s4); font-size: var(--fs-pill); }

@media (min-width: 900px) {
  .desktop-nav { display: flex; }
  .header-cta { display: inline-flex; }
  .menu-toggle { display: none; }
  .mobile-nav { display: none !important; }
}

/* 8. Footer ================================================================= */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--paper-warm);
  padding-block: var(--section-y) var(--s6);
  margin-top: var(--section-y);
}

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

.footer-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s7) var(--s5);
}
@media (min-width: 900px) {
  .footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.footer-col .eyebrow { margin-bottom: var(--s4); }
.footer-col li + li { margin-top: var(--s2); }
.footer-col a,
.footer-col span {
  font-size: var(--fs-small);
  color: var(--muted);
  transition: color var(--dur) var(--ease);
}
.footer-col a:hover { color: var(--ink); }

.footer-wordmark {
  margin-top: var(--s9);
  font-size: clamp(2rem, 10.5vw, 11rem);
  line-height: 0.88;
  font-weight: 500;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.footer-legal {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--line-strong);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  justify-content: space-between;
  font-size: var(--fs-small);
  color: var(--muted);
}

/* 9. Scroll row + service cards ============================================= */

.scroller { position: relative; }

.scroller__track {
  display: flex;
  gap: var(--s4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gutter);
  padding-inline: var(--gutter);
  padding-block: 2px var(--s2);
  margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.scroller__track::-webkit-scrollbar { display: none; }
.scroller__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: clamp(252px, 25vw, 330px);
}

.scroller__nav {
  display: none;
  gap: var(--s2);
}
@media (min-width: 900px) and (hover: hover) {
  .scroller__nav { display: flex; }
}
.scroller__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--ink);
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              opacity var(--dur) var(--ease);
}
.scroller__btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.scroller__btn[disabled] { opacity: 0.3; pointer-events: none; }
.scroller__btn svg { width: 15px; height: 15px; }

/* Tall photo card with a bottom gradient, title and a pill. */
.service-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-photo);
  background: var(--paper-alt);
  aspect-ratio: 3 / 4.15;
  isolation: isolate;
}
.service-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.service-card__media picture { width: 100%; height: 100%; }
.service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-size: 11px;
  color: var(--muted);
  transition: transform 500ms var(--ease);
}
.service-card:hover .service-card__media img { transform: scale(1.04); }
.service-card::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(12, 11, 8, 0) 0%, rgba(12, 11, 8, 0.28) 42%, rgba(12, 11, 8, 0.82) 100%);
  pointer-events: none;
}
.service-card__body {
  position: absolute;
  z-index: 2;
  inset: auto var(--s4) var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  color: var(--on-photo);
}
.service-card__title {
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--on-photo);
}
.service-card__price {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.01em;
}
.service-card__tag {
  position: absolute;
  z-index: 2;
  top: var(--s4);
  left: var(--s4);
}

/* Card whose final photo has not landed yet. Stays light and readable
   instead of putting white type on an empty placeholder fill.
   Phase 2 removes this modifier when the real image is wired in. */
.service-card--pending {
  background: var(--paper-warm);
  box-shadow: inset 0 0 0 1px var(--line);
}
.service-card--pending::after { display: none; }
.service-card--pending .service-card__title { color: var(--ink); }
.service-card--pending .service-card__price { color: var(--muted); }
.service-card--pending .pill--ghost {
  --pill-fg: var(--ink);
  --pill-bd: var(--line-strong);
  backdrop-filter: none;
}
.service-card--pending .pill--ghost:hover {
  --pill-bg: var(--ink);
  --pill-fg: var(--paper);
  --pill-bd: var(--ink);
}

/* 10. Work grid ============================================================= */

.work-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s6) var(--s5);
}
@media (min-width: 700px) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .work-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.work-card { display: block; }
.work-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  margin-top: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease);
}
.work-card:hover .work-card__meta { border-bottom-color: var(--ink); }
.work-card__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.work-card__note {
  font-size: var(--fs-small);
  color: var(--muted);
  white-space: nowrap;
}

/* 11. Before / after slider =================================================
   NOT USED ON ANY PAGE. Kept because it is finished and costs a few hundred
   bytes. Only wire it up if a real pair is ever shot from an identical
   distance and angle. Use .ba-pair for everything else.
   ========================================================================== */

/* Two identically sized images stacked in one aspect-ratio frame. The visible
   control is a range input laid over the frame, so drag, touch and arrow keys
   all work without custom pointer code. No layout shift: the frame owns the
   box, the images only fill it. */
.ba { --pos: 50%; }

.ba__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-photo);
  background: var(--paper-alt);
  aspect-ratio: var(--ar, 3 / 2);
  touch-action: pan-y;
}
.ba__layer {
  position: absolute;
  inset: 0;
  display: block;
}
.ba__layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-size: 11px;
  color: var(--muted);
}
.ba__layer--before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.ba__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: var(--on-photo);
  pointer-events: none;
  z-index: 3;
}
.ba__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: var(--on-photo);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.ba__handle svg { width: 13px; height: 13px; }

.ba__tag {
  position: absolute;
  bottom: var(--s4);
  z-index: 2;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--on-photo);
  background: var(--scrim);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  pointer-events: none;
}
.ba__tag--before { left: var(--s4); }
.ba__tag--after  { right: var(--s4); }

/* The control itself: invisible, full-bleed, focusable. */
.ba__range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.ba__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 44px;
  height: 100%;
  cursor: ew-resize;
}
.ba__range::-moz-range-thumb {
  width: 44px;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: ew-resize;
}
.ba:has(.ba__range:focus-visible) .ba__frame {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* 11b. Before / after diptych ==============================================
   Two framed photos side by side. Used instead of the slider whenever the
   before and after frames were shot from different distances or angles,
   which is every real pair in this set. Reads as two deliberate photographs
   rather than a broken wipe.
   ========================================================================== */

.ba-pair__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
}
@media (min-width: 700px) {
  .ba-pair__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 1.6vw, 28px);
  }
}

.ba-pair__item { position: relative; }

.ba-pair__frame { --ar: 4 / 3; }
.ba-pair--portrait .ba-pair__frame { --ar: 3 / 4; }

.ba-pair__chip {
  position: absolute;
  z-index: 2;
  top: var(--s4);
  left: var(--s4);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--on-photo);
  background: var(--scrim);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  pointer-events: none;
}

.ba-pair .caption { margin-top: var(--s4); }

/* 12. FAQ accordion ========================================================= */

.faq { border-top: 1px solid var(--line); }

.faq__item { border-bottom: 1px solid var(--line); }
.faq__item > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s5);
  padding-block: var(--s5);
  list-style: none;
  cursor: pointer;
  font-size: var(--fs-lead);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color var(--dur) var(--ease);
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary:hover { color: var(--red); }
.faq__item > summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 6px;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1.5px 100% no-repeat;
  transition: transform var(--dur) var(--ease);
}
.faq__item[open] > summary::after { transform: rotate(90deg); background-size: 100% 1.5px, 0 0; }
.faq__item > :not(summary) {
  margin: 0 0 var(--s5);
  max-width: 76ch;
  color: var(--muted);
}

/* Native open/close easing where supported. Ignored elsewhere. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--dur) var(--ease), content-visibility var(--dur) allow-discrete;
  }
  .faq__item[open]::details-content { block-size: auto; }
}

/* 13. Contact block + service picker ======================================== */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s7);
}
@media (min-width: 900px) {
  .contact-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: clamp(32px, 5vw, 96px);
  }
}

/* Address-style stacked facts. */
.fact-list { border-top: 1px solid var(--line); }
.fact {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s1);
  padding-block: var(--s4);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 520px) {
  .fact { grid-template-columns: 9rem 1fr; gap: var(--s4); align-items: baseline; }
}
.fact dt {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
}
.fact dd {
  margin: 0;
  font-size: var(--fs-lead);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.fact dd a:hover { color: var(--red); }

.picker { margin-top: var(--s5); }
.picker__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s5);
}
.picker__preview {
  margin-top: var(--s4);
  padding: var(--s4);
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--fs-small);
  color: var(--muted);
}
.section--warm .picker__preview { background: var(--paper); }

/* 14. Price table / package cards =========================================== */

.price-table {
  display: grid;
  gap: 0;
  margin-block: var(--s4);
  border-top: 1px solid var(--line);
}
.price-table > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: 10px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
}
.price-table span { color: var(--muted); }
.price-table strong {
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.pricing-card,
.maintenance-card {
  display: flex;
  flex-direction: column;
  padding: var(--s5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.pricing-card > h2,
.pricing-card > h3,
.maintenance-card > h3 {
  font-size: var(--fs-h2);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-block: var(--s3) var(--s2);
}
.pricing-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
}
.service-number,
.maintenance-billed,
.maintenance-kicker {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
}
.price-badge,
.coming-badge {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  white-space: nowrap;
}
.price-badge { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Emphasis variants stay light. No dark cards anywhere. */
.pricing-card-featured,
.maintenance-card-featured { border-color: var(--ink); }
.pricing-card-dark { background: var(--paper-warm); border-color: var(--line-strong); }
.pricing-card-coming { background: var(--paper-warm); }

.pricing-description { color: var(--muted); font-size: var(--fs-small); }

.pricing-details { margin-top: auto; }
.pricing-details details { border-top: 1px solid var(--line); }
.pricing-details summary {
  padding-block: var(--s3);
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-pill);
  font-weight: 600;
  letter-spacing: var(--track-pill);
  text-transform: uppercase;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pricing-details summary::-webkit-details-marker { display: none; }
.pricing-details summary::after { content: "+"; font-weight: 400; font-size: 1.125rem; line-height: 1; }
.pricing-details details[open] summary::after { content: "\2013"; }
.pricing-details ul {
  padding: 0 0 var(--s4);
  font-size: var(--fs-small);
  color: var(--muted);
}
.pricing-details li { padding-left: 16px; position: relative; margin-bottom: 4px; }
.pricing-details li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 7px; height: 1px;
  background: var(--line-strong);
}

.price-cta,
.contact-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  min-height: 44px;
  margin-top: var(--s5);
  padding: 10px var(--s5);
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--fs-pill);
  font-weight: 600;
  letter-spacing: var(--track-pill);
  text-transform: uppercase;
  line-height: 1.1;
  transition: background-color var(--dur) var(--ease);
}
.price-cta:hover,
.contact-button:hover { background: #2b2920; }
.price-cta span,
.contact-button span,
.header-contact span { font-size: 1em; }

/* 15. Home page sections ==================================================== */

.hero { padding-top: clamp(28px, 5vw, 72px); }
.hero__label { margin-bottom: clamp(20px, 3vw, 40px); }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin-top: clamp(24px, 3.4vw, 44px);
}
.hero__figure { margin: clamp(28px, 4vw, 56px) 0 0; }
/* Wide cinematic crop on desktop, 4:3 on phones. --op sets which band of
   the photo the wide frame keeps: windows, doors and the top of the wheels. */
.hero__photo { --ar: 4 / 3; --op: 50% 40%; }
@media (min-width: 601px)  { .hero__photo { --ar: 16 / 9; } }
@media (min-width: 1000px) { .hero__photo { --ar: 21 / 9; } }

.statement-section { padding-block: clamp(64px, 10vw, 150px); }

.approach__body { max-width: 30ch; }
@media (min-width: 700px) { .approach__body { max-width: 38ch; } }

/* 16. Legacy pages compatibility ============================================
   services.html, process.html and contact.html still ship their original
   markup. These rules put those class names on the new tokens so nothing
   breaks before Phase 2 restyles the pages. Header and footer above already
   cover their shared chrome.
   ========================================================================== */

.subpage { display: block; }

.section-wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--section-y) var(--gutter);
}

.section-label {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s7);
}
.section-label span:last-child { margin-left: auto; }
.index-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink);
  flex: none;
}
.section-kicker {
  display: block;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s3);
}

.page-intro,
.pricing-hero {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(32px, 6vw, 88px) var(--gutter) clamp(24px, 4vw, 56px);
}
.page-intro h1,
.pricing-hero h1 {
  font-size: clamp(2.25rem, 7vw, 6rem);
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  font-weight: 500;
}
.page-intro h1 em,
.pricing-hero h1 em,
.pricing-intro-grid h2 em,
.home-services-grid h2 em,
.support-grid h2 em,
.maintenance-heading h2 em,
.intro-content h2 em,
.contact-panel h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.page-intro p { margin-top: var(--s5); font-size: var(--fs-lead); max-width: var(--maxw-text); }

.hero-topline,
.pricing-hero-note {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: var(--s5);
}
.pricing-hero-note {
  padding-block: var(--s5) 0;
  border-top: 1px solid var(--line);
  margin-top: var(--s6);
}

.pricing-hero-grid,
.pricing-intro-grid,
.support-grid,
.home-services-grid,
.maintenance-heading,
.intro-content,
.contact-panel,
.home-process-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s6);
  align-items: start;
}
@media (min-width: 900px) {
  .pricing-hero-grid,
  .pricing-intro-grid,
  .support-grid,
  .home-services-grid,
  .maintenance-heading,
  .intro-content,
  .contact-panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 96px);
  }
  .home-process-heading {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}
.pricing-intro-grid h2,
.support-grid h2,
.maintenance-heading h2,
.home-services-grid h2,
.contact-panel h2 {
  font-size: var(--fs-display);
  text-transform: uppercase;
  line-height: 0.98;
}
.intro-content h2 {
  font-size: clamp(2rem, 6vw, 4.75rem);
  text-transform: uppercase;
  line-height: 0.94;
}

.pricing-note,
.credibility-note,
.honesty-note,
.maintenance-note,
.service-callout,
.availability-note,
.final-pricing-note,
.maintenance-terms {
  font-size: var(--fs-small);
  color: var(--muted);
  max-width: var(--maxw-text);
}
.service-callout,
.availability-note,
.final-pricing-note,
.maintenance-terms {
  padding: var(--s4);
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-top: var(--s4);
}
.final-pricing-note strong,
.maintenance-terms strong,
.availability-note strong { color: var(--ink); }

.pricing-catalog {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.pricing-grid,
.maintenance-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5);
}
@media (min-width: 700px) {
  .pricing-grid, .maintenance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .maintenance-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pricing-card-wide { grid-column: span 2; }
}

.maintenance-plans { background: var(--paper-warm); border-block: 1px solid var(--line); }
.maintenance-plans .section-wrap { padding-inline: var(--gutter); }
.maintenance-card { background: var(--paper); }
.maintenance-frequency { font-size: var(--fs-small); color: var(--muted); }
.maintenance-includes ul {
  font-size: var(--fs-small);
  color: var(--muted);
  margin-top: var(--s3);
}
@media (min-width: 560px) {
  .maintenance-includes ul { columns: 2; column-gap: var(--s5); }
}
.maintenance-includes li { break-inside: avoid; margin-bottom: 4px; }

.addons-list { border-top: 1px solid var(--line); }
.addons-list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
}
.addons-list span { color: var(--muted); }
.addons-list strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.faq-section .faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s5);
  padding-block: var(--s5);
  list-style: none;
  cursor: pointer;
  font-size: var(--fs-lead);
  font-weight: 500;
  color: var(--ink);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-size: 1.25rem; line-height: 1; flex: none; }
.faq-list details[open] summary::after { content: "\2013"; }
.faq-list p { margin: 0 0 var(--s5); color: var(--muted); max-width: 76ch; }

.page-cta {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--section-y) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  border-top: 1px solid var(--line);
}
.page-cta > span { font-size: var(--fs-h2); color: var(--ink); letter-spacing: -0.02em; }

/* process.html */
.workflow-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s6) var(--s5);
}
@media (min-width: 800px) { .workflow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.workflow-media {
  overflow: hidden;
  border-radius: var(--r-photo);
  background: var(--paper-alt);
  aspect-ratio: 4 / 3;
}
.workflow-media img,
.workflow-media video { width: 100%; height: 100%; object-fit: cover; }
.workflow-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  margin-top: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
.workflow-meta span {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
}
.workflow-meta strong {
  font-size: var(--fs-h3);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink);
}
.workflow-card p { margin-top: var(--s3); font-size: var(--fs-small); color: var(--muted); }

.process-note {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--section-y) var(--gutter);
  border-top: 1px solid var(--line);
}
.process-note-label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s4);
}
.process-note p { font-size: var(--fs-h2); color: var(--ink); max-width: 28ch; letter-spacing: -0.02em; line-height: 1.15; }
.process-note .text-link { margin-top: var(--s5); }

/* contact.html */
.contact-side p { font-size: var(--fs-lead); max-width: 40ch; }
.phone-link {
  display: inline-block;
  margin-top: var(--s4);
  font-size: var(--fs-h2);
  letter-spacing: -0.02em;
  color: var(--ink);
  border-bottom: 1px solid var(--line-strong);
}
.phone-link:hover { border-color: var(--ink); }

/* Legacy header link, styled as an outlined pill. */
.header-contact {
  display: none;
  align-items: center;
  gap: var(--s2);
  min-height: 40px;
  padding: 9px var(--s5);
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--fs-pill);
  font-weight: 600;
  letter-spacing: var(--track-pill);
  text-transform: uppercase;
  white-space: nowrap;
}
@media (min-width: 900px) { .header-contact { display: inline-flex; } }

/* Legacy footer markup (no .footer-inner). */
.site-footer > .footer-brand,
.site-footer > .footer-back,
.site-footer > small {
  display: block;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.site-footer > .footer-brand {
  font-size: clamp(2rem, 11vw, 9rem);
  line-height: 0.9;
  font-weight: 500;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: var(--ink);
}
.site-footer > .footer-brand span { display: block; font-size: 0.14em; letter-spacing: 0.26em; color: var(--muted); margin-top: var(--s3); }
.site-footer > .footer-back { margin-top: var(--s6); }
.site-footer > small { margin-top: var(--s5); font-size: var(--fs-small); color: var(--muted); }

/* Legacy home classes kept harmless in case a stale page is opened. */
.home-links a { display: block; }
.feature-image { display: none; }

/* 17. Motion and print ====================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .photo--zoom > picture > img,
  .photo--zoom > img,
  .service-card__media img { transition: none; }
  a:hover .photo--zoom > picture > img,
  a:hover .photo--zoom > img,
  .service-card:hover .service-card__media img { transform: none; }
  .scroller__track { scroll-behavior: auto; }
}

@media print {
  .site-header, .mobile-nav, .scroller__nav, .skip-link { display: none !important; }
  body { background: #fff; }
}

/* 18. Styleguide only (styleguide.html, noindex) ============================ */

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  padding: 1px 5px;
  border-radius: var(--r-sm);
  background: var(--paper-alt);
  color: var(--ink);
}

.sg-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s4);
}
.sg-swatch {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: var(--fs-small);
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.sg-chip {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
}
.sg-chip[data-c="paper"]      { background: var(--paper); }
.sg-chip[data-c="paper-warm"] { background: var(--paper-warm); }
.sg-chip[data-c="paper-alt"]  { background: var(--paper-alt); }
.sg-chip[data-c="line"]       { background: var(--line); }
.sg-chip[data-c="ghost"]      { background: var(--ghost); }
.sg-chip[data-c="muted"]      { background: var(--muted); }
.sg-chip[data-c="ink-2"]      { background: var(--ink-2); }
.sg-chip[data-c="ink"]        { background: var(--ink); }
.sg-chip[data-c="red"]        { background: var(--red); }

/* 19. Utilities, last =======================================================
   Declared after every component so a utility always wins over a component's
   own margin, for example .eyebrow.mb-3 where .eyebrow resets margin to 0.
   ========================================================================== */

.text-center { text-align: center; }
.mt-3 { margin-top: var(--s3); }
.mt-5 { margin-top: var(--s5); }
.mt-7 { margin-top: var(--s7); }
.mb-3 { margin-bottom: var(--s3); }
.no-mb { margin-bottom: 0; }


/* Figure margin reset for work grids and before/after pairs */
.work-grid > figure,
.ba-pair__item { margin: 0; }

/* Gallery grids on car pages: denser, and every frame in a group shares one
   aspect ratio so mixed portrait and landscape photos line up. */
.work-grid--gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s4); }
@media (min-width: 700px)  { .work-grid--gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .work-grid--gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.work-grid--gallery .photo { --ar: 4 / 5; }
.work-grid--gallery.is-landscape .photo { --ar: 4 / 3; }
.work-grid--gallery .caption { font-size: 0.8125rem; }

/* 20. SEO landing pages, added 2026-09-21 =================================== */

/* Small breadcrumb line above the hero eyebrow on moment and area pages. */
.breadcrumb-nav {
  margin-bottom: var(--s5);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em;
}
.breadcrumb-nav span[aria-hidden] { color: var(--line-strong); }

/* Link grid used on service-area.html (towns) and services.html (moment
   pages). Plain rows on mobile, multi-column on wider screens. */
.link-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--s6);
  border-top: 1px solid var(--line);
}
@media (min-width: 700px) { .link-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .link-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.link-list__item,
.area-list__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--line);
}
.link-list__item a,
.area-list__item a {
  font-weight: 500;
  color: var(--ink);
  font-size: var(--fs-lead);
}
.link-list__item a:hover,
.area-list__item a:hover { color: var(--red); }
.area-list__item span {
  color: var(--muted);
  font-size: var(--fs-small);
  text-align: right;
  max-width: 22ch;
}
.area-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
@media (min-width: 700px) { .area-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); } }