/* Hallmark · genre: editorial · macrostructure: Marquee Hero · H1 marquee knobs: size=display, alignment=left-bias, underlay=rule below
 * theme: custom · vibe: "Jersey Shore workshop: drafting paper, oak, navy ink" · paper: oklch(96.5% 0.0074 81) · accent: oklch(47% 0.12 55)
 * display: Bitter · body: IBM Plex Sans · axes: light / slab-serif / warm
 * enrichment: sketch -> photo film (generated from John's own photo; Kling morph to replace the POC wash) · poster-first
 * nav: N12 banner + retract (fill=tint+ink, dismiss=none, bar=sticky) · footer: Ft2 inline single line (order=wordmark/credit/links, sep=middot, spaced)
 * sections: F6 product-card grid (ratio=4/3, density=4-up, action=none) · F1 bento (tiles=8, spans=irregular, border=none)
 *           F4 step sequence (01/02, horizontal flow, connector=line) · C4 sticky bottom bar (reveal=after fold, phones only)
 * context: inferred (Adam: "go with your defaults") · studied: no
 * Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V5
 */
@import url("tokens.css?v=e812475a");

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + var(--space-md)); }
body {
  margin: 0; overflow-x: clip;
  background: var(--color-paper); color: var(--color-ink);
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6;
  font-variant-numeric: oldstyle-nums;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--color-accent); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; font-style: normal; line-height: 1.08;
  letter-spacing: -0.02em; margin: 0; overflow-wrap: anywhere; min-width: 0; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.skip { position: absolute; left: var(--space-sm); top: var(--space-sm); z-index: var(--z-modal);
  padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); text-decoration: none;
  transform: translateY(-200%); }
.skip:focus { transform: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  min-height: 2.75rem; padding: 0 var(--space-lg);
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-base); letter-spacing: 0.01em;
  text-decoration: none; border: var(--rule-hair) solid transparent; border-radius: var(--radius-sm); cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--accent { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--accent:hover { background: var(--color-accent-2); color: var(--color-accent-ink); }
.btn--light { background: var(--color-on-navy); color: var(--color-navy); }
.btn--light:hover { background: var(--color-paper-2); color: var(--color-navy); }
.btn--light:focus-visible { outline-color: var(--color-accent-lt); }
.btn--lg { min-height: 3.25rem; padding: 0 var(--space-xl); font-size: var(--text-md); }

.link-arrow { font-weight: 600; white-space: nowrap; text-decoration: none; border-bottom: var(--rule-hair) solid currentColor; padding-bottom: var(--space-3xs); }
.link-arrow::after { content: " →"; }

/* ---------- N12 · banner + retracting nav ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: var(--z-sticky); transform: translateY(0);
  transition: transform var(--dur-long) var(--ease-out); }
.nav.is-compact { transform: translateY(calc(var(--banner-h) * -1)); }
.nav__banner { height: var(--banner-h); display: flex; align-items: center; justify-content: center;
  background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); letter-spacing: 0.02em; }
.nav__banner-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-inline: var(--page-gutter); }
.nav__banner-sep { margin-inline: var(--space-xs); opacity: 0.6; }
.nav__banner-long { display: none; }
@media (max-width: 29.99rem) { .nav__banner { font-size: clamp(0.75rem, 3.6vw, 0.875rem); letter-spacing: 0; } }
@media (min-width: 56rem) { .nav__banner-long { display: inline; } .nav__banner-short { display: none; } }
.nav__banner-link { font-weight: 600; text-decoration: none; }
.nav__banner-link:hover { color: var(--color-accent-lt); }
.nav__bar { background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.nav__bar-inner { max-width: var(--page-max); margin: 0 auto; height: var(--bar-h); padding-inline: var(--page-gutter);
  display: flex; align-items: center; gap: var(--space-lg); }
.brand { display: flex; align-items: center; gap: var(--space-sm); text-decoration: none; margin-right: auto; }
.brand:hover { color: var(--color-ink); }
.brand__mark { width: clamp(60px, 44px + 3.6vw, 69px); height: auto; aspect-ratio: 55 / 48; }
.brand__name { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.3125rem, 1.1rem + 0.8vw, 1.5rem); letter-spacing: -0.01em; white-space: nowrap; }
@media (max-width: 23rem) {   /* 320-368px phones: keep the name clear of the Menu button */
  .nav__bar-inner { gap: var(--space-sm); }
  .brand { gap: var(--space-xs); }
  .brand__mark { width: 46px; }
  .brand__name { font-size: 1.125rem; }
  .nav__bar-inner .nav__toggle { padding: 0 var(--space-sm); }   /* beats the base rule declared below */
}
.nav__links { display: none; align-items: center; gap: var(--space-2xs); }
.nav__link { display: inline-flex; align-items: center; gap: var(--space-xs); height: 2.75rem; padding: 0 var(--space-sm);
  font-weight: 500; text-decoration: none; white-space: nowrap; }
.nav__caret { width: 0.45em; height: 0.45em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg); }
.nav__item { position: relative; }
.nav__dropdown { position: absolute; top: 100%; left: 0; z-index: var(--z-dropdown); min-width: 16rem;
  display: grid; padding: var(--space-xs) 0; background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule);
  box-shadow: var(--shadow-whisper);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility var(--dur-short); }
.nav__dropdown a { padding: var(--space-xs) var(--space-md); text-decoration: none; white-space: nowrap; }
.nav__dropdown a:hover { background: var(--color-paper-2); }
.nav__item--menu:hover .nav__dropdown, .nav__item--menu:focus-within .nav__dropdown { opacity: 1; visibility: visible; transform: none; }
.nav__cta { display: none; }
.nav__toggle { min-height: 2.75rem; padding: 0 var(--space-md); font: 600 var(--text-base) var(--font-body); color: var(--color-ink);
  background: transparent; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm); cursor: pointer; }
.nav__toggle:hover { border-color: var(--color-ink); }
.nav__toggle:active, .marquee__replay:active { transform: translateY(1px); }
.sheet { display: grid; gap: var(--space-2xs); padding: var(--space-md) var(--page-gutter) var(--space-lg);
  background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.sheet[hidden] { display: none; }
.sheet a:not(.btn) { padding: var(--space-sm) 0; font-family: var(--font-display); font-weight: 700; font-size: var(--text-md);
  text-decoration: none; border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.sheet .btn { margin-top: var(--space-md); }

@media (min-width: 64rem) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__toggle, .sheet { display: none !important; }
}

/* ---------- Marquee hero ---------- */
.marquee { position: relative; isolation: isolate; overflow: hidden;
  height: clamp(30rem, 88dvh, 56.25vw); min-height: 30rem;   /* max = the film's own 16:9, so it's never zoomed past its pixels */
  background: var(--color-paper); }
.marquee__still, .marquee__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.marquee__film { opacity: 0; transition: opacity var(--dur-short) linear; }
.marquee.is-playing .marquee__film { opacity: 1; }
.marquee.is-playing .marquee__still { opacity: 0; }
/* film ended: hand over to the full-quality JPEG of the same frame (no video compression on the resting image) */
.marquee__still { transition: opacity var(--dur-long) var(--ease-out); }
.marquee.is-playing.is-done .marquee__still { opacity: 1; }
.marquee.is-playing.is-done .marquee__film { opacity: 0; transition-duration: var(--dur-long); }
.marquee__copy { position: absolute; inset: auto 0 0; z-index: var(--z-raised);
  max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-gutter) clamp(var(--space-lg), 6vh, var(--space-2xl)); }
/* Title block (Adam, 2026-10-22: the old light/ink colour change was hard to read). Solid paper, fine ink rules,
   ink type throughout; no scrim or wash over the photo. A drafting title block has a double border: the outer
   rule is the box's border, the inner one a pseudo-element inset a few px. */
.tblock { position: relative; display: inline-grid; gap: var(--space-sm); max-width: 100%;
  padding: var(--space-sm) var(--space-lg) var(--space-md);
  background: var(--color-paper); color: var(--color-ink); border: var(--rule-hair) solid var(--color-ink); }
.tblock::before { content: ""; position: absolute; inset: 4px; border: var(--rule-hair) solid var(--color-ink);
  opacity: 0.35; pointer-events: none; }
.tblock__label { display: flex; justify-content: space-between; gap: var(--space-lg);
  padding-bottom: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-ink);
  font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.tblock__label span + span { font-weight: 400; color: var(--color-ink-2); }
.tblock__title { font-size: clamp(2rem, 3.4vw + 0.6rem, 4rem); line-height: 1.04; letter-spacing: -0.02em; }
.marquee__part { display: block; }
/* each line writes itself in, left to right: line 1 as the sketch starts, line 2 once the photo has developed */
@keyframes write-in { from { clip-path: inset(-0.2em 100% -0.2em 0); } to { clip-path: inset(-0.2em 0 -0.2em 0); } }
.marquee.is-playing .marquee__part--1 { animation: write-in 1.6s var(--ease-in-out) 0.5s both; }
.marquee.is-playing .marquee__part--2 { clip-path: inset(-0.2em 100% -0.2em 0); }
.marquee.is-playing.is-built .marquee__part--2 { animation: write-in 1.4s var(--ease-in-out) 0.4s both; }
@media (max-width: 40rem) {
  .tblock { padding: var(--space-xs) var(--space-md) var(--space-sm); }
  .tblock__label { font-size: 0.75rem; letter-spacing: 0.06em; }
}
.marquee__replay { position: absolute; right: var(--page-gutter); bottom: var(--space-md); z-index: var(--z-raised);
  min-height: 2.75rem; padding: 0 var(--space-md); font: 500 var(--text-sm) var(--font-body); color: var(--color-ink);
  background: var(--color-paper); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-sm); cursor: pointer; }
.marquee__replay:hover { background: var(--color-paper-2); }

.rule-thick { margin: 0; border: 0; height: var(--rule-thick); background: var(--color-ink); }

/* ---------- section frame ---------- */
.intro, .services, .work, .process, .areas, .contact__inner, .foot__line {
  max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-gutter); }
.head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-sm) var(--space-lg);
  margin-bottom: var(--space-xl); }
.head__title { font-size: var(--text-xl); }

/* intro: first CTA, asymmetric */
.intro { display: grid; gap: var(--space-xl); padding-block: var(--space-2xl) var(--space-3xl); }
.intro__lede { font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); line-height: 1.4; max-width: 46ch; }
.intro__act { display: grid; justify-items: start; gap: var(--space-sm); align-content: end; }
.intro__free { font-weight: 600; color: var(--color-ink-2); }
.intro__call { color: var(--color-muted); }
.intro__call a { color: var(--color-ink); font-weight: 600; font-variant-numeric: lining-nums; white-space: nowrap; }
@media (min-width: 60rem) {
  .intro { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: end; }
}

/* F6 · services: uniform cards, the photo is the description */
.services { padding-block: 0 var(--space-3xl); }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xl) var(--space-lg);
  grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card__link { display: grid; gap: var(--space-sm); text-decoration: none; }
.card__link img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--color-paper-2);
  transition: transform var(--dur-long) var(--ease-out); }
.card__link { overflow: hidden; }
.card__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); line-height: 1.2;
  border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-sm); }
@media (hover: hover) and (pointer: fine) {
  .card__link:hover img { transform: scale(1.02); }
  .card__link:hover .card__name { color: var(--color-accent); }
}

/* F1 · recent work: irregular mosaic, grouped by project type */
.work { padding-block: var(--space-2xl) var(--space-3xl); border-top: var(--rule-hair) solid var(--color-rule); }
.mosaic { display: grid; gap: var(--space-xs); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 9rem;
  grid-auto-flow: dense; }
.tile { position: relative; display: block; overflow: hidden; background: var(--color-paper-2); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-long) var(--ease-out); }
.tile--2x2 { grid-column: span 2; grid-row: span 2; }
.tile--2x1 { grid-column: span 2; }
.tile--1x2 { grid-row: span 2; }
.tile__tag { position: absolute; left: var(--space-xs); bottom: var(--space-xs); padding: var(--space-3xs) var(--space-xs);
  background: var(--color-paper); color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.tile:hover .tile__tag { color: var(--color-accent); }
@media (hover: hover) and (pointer: fine) { .tile:hover img { transform: scale(1.02); } }
@media (min-width: 48rem) { .mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 13rem; } }

/* F4 · process: numbered, horizontal on desktop */
.process { padding-block: var(--space-3xl); }
.process__head { display: grid; gap: var(--space-sm); margin-bottom: var(--space-2xl); max-width: 40rem; }
.process__lede { color: var(--color-ink-2); font-size: var(--text-md); line-height: 1.5; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xl); grid-template-columns: minmax(0, 1fr); }
.step { display: grid; gap: var(--space-xs); align-content: start; padding-top: var(--space-md);
  border-top: var(--rule-thick) solid var(--color-ink); }
.step__no { font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); color: var(--color-accent);
  font-variant-numeric: lining-nums tabular-nums; line-height: 1; }
.step__title { font-size: var(--text-md); }
.step p { color: var(--color-ink-2); }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); } }

/* where we work: a typographic index, not cards */
.areas { padding-block: var(--space-2xl) var(--space-3xl); border-top: var(--rule-hair) solid var(--color-rule);
  display: grid; gap: var(--space-md); }
.areas__lede { color: var(--color-ink-2); }
.towns { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xl); }
.towns a { display: inline-block; padding-block: var(--space-2xs); font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-xl); line-height: 1.15; text-decoration: none; white-space: nowrap;
  border-bottom: var(--rule-hair) solid transparent; }
.towns a:hover { border-bottom-color: currentColor; }

/* contact band: hard change to navy */
.contact { background: var(--color-navy); color: var(--color-on-navy); }
.contact__inner { padding-block: var(--space-3xl); display: grid; gap: var(--space-xl); }
.contact__title { font-size: var(--text-display); line-height: 1.02; max-width: 16ch; }
.contact__ways { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); }
.contact__phone { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); text-decoration: none;
  font-variant-numeric: lining-nums; white-space: nowrap; }
.contact__email { font-size: var(--text-md); white-space: nowrap; }
.contact a:not(.btn):hover { color: var(--color-accent-lt); }
.contact a:focus-visible { outline-color: var(--color-accent-lt); }
.contact__creds { color: var(--color-on-navy-2); font-size: var(--text-sm); letter-spacing: 0.02em;
  padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-navy-2); }
.pending { margin-left: var(--space-3xs); padding: 0 var(--space-2xs); border: var(--rule-hair) dashed var(--color-on-navy-2); }

/* Ft2 · inline single line */
.foot { padding-block: var(--space-lg) calc(var(--space-lg) + var(--space-2xl)); }   /* clears the phone call bar */
.foot__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-xs);
  font-size: var(--text-sm); color: var(--color-muted); }
.foot__line a { color: var(--color-ink-2); white-space: nowrap; }
.foot__line a:hover { color: var(--color-accent); }
.foot__brand { font-family: var(--font-display); font-weight: 800; font-size: var(--text-base); color: var(--color-ink) !important; text-decoration: none; }
.foot__sep { opacity: 0.6; }
@media (min-width: 64rem) { .foot { padding-bottom: var(--space-lg); } }

/* C4 · call bar: phones and tablets, after the hero */
.callbar { position: fixed; inset: auto 0 0; z-index: var(--z-sticky);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-xs) var(--page-gutter) calc(var(--space-xs) + env(safe-area-inset-bottom));
  background: var(--color-paper); border-top: var(--rule-hair) solid var(--color-rule);
  transform: translateY(110%); transition: transform var(--dur-long) var(--ease-out); }
.callbar.is-shown { transform: none; }
.callbar__call { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; white-space: nowrap;
  font-variant-numeric: lining-nums; }
@media (min-width: 64rem) { .callbar { display: none; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 150ms !important; animation-duration: 150ms !important; }
}

/* ---------- inner pages: clear the fixed nav ---------- */
.page-inner main { padding-top: calc(var(--banner-h) + var(--bar-h)); }

/* 404 */
.notfound { max-width: var(--page-max); margin-inline: auto; padding: var(--space-3xl) var(--page-gutter); display: grid; gap: var(--space-lg); }
.notfound__title { font-size: var(--text-display); line-height: 1.02; }
.notfound__lede { font-size: var(--text-md); color: var(--color-ink-2); max-width: 46ch; }
.notfound__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); }
.notfound__links a { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); text-decoration: none; white-space: nowrap;
  border-bottom: var(--rule-hair) solid currentColor; }
.notfound__call { color: var(--color-muted); }
.notfound__call a { color: var(--color-ink); font-weight: 600; white-space: nowrap; }

/* ---------- inner page header: copy left, one portrait photo right ---------- */
.phead { max-width: var(--page-max); margin-inline: auto; padding: var(--space-2xl) var(--page-gutter) var(--space-2xl);
  display: grid; gap: var(--space-xl); }
.phead__copy { display: grid; gap: var(--space-lg); align-content: center; justify-items: start; }
.crumb a { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-accent); text-decoration: none; }
.crumb a::before { content: "← "; }
.crumb a:hover { text-decoration: underline; }
.phead__title { font-size: var(--text-display); line-height: 1.02; letter-spacing: -0.025em; }
.phead__lede { font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); line-height: 1.4; max-width: 40ch; }
.phead__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); }
.phead__call { color: var(--color-muted); }
.phead__call a { color: var(--color-ink); font-weight: 600; font-variant-numeric: lining-nums; white-space: nowrap; }
.phead__free { font-weight: 600; color: var(--color-ink-2); }
.phead__photo { align-self: center; background: var(--color-paper-2); }
.phead__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 60rem) {
  .phead--split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-2xl); padding-block: var(--space-2xl) var(--space-3xl); }
  .phead__photo img { aspect-ratio: 4 / 5; max-height: 40rem; }
}

/* ---------- service body: what's included beside the narrative ---------- */
.svc, .strip, .faq, .more { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-gutter); }
.svc { display: grid; gap: var(--space-2xl); padding-block: var(--space-2xl) var(--space-3xl); }
.svc__h { font-size: var(--text-lg); margin-bottom: var(--space-md); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; }
.ticks li { position: relative; padding: var(--space-sm) 0 var(--space-sm) var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule-2); }
.ticks li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.ticks li::before { content: ""; position: absolute; left: 0; top: calc(var(--space-sm) + 0.55em);
  width: 0.6em; height: 0.3em; border-left: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent);
  transform: rotate(-45deg); }
.svc__body { display: grid; gap: var(--space-xl); align-content: start; }
.svc__section { display: grid; gap: var(--space-md); max-width: 62ch; }
.svc__section .svc__h { margin-bottom: 0; }
.svc__section p { color: var(--color-ink-2); }
@media (min-width: 60rem) {
  .svc { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-3xl); }
  .svc__included { position: sticky; top: calc(var(--bar-h) + var(--space-lg)); align-self: start; }
}

/* photo strip: 1-4 finished photos from this service */
.strip { padding-block: 0 var(--space-3xl); display: grid; gap: var(--space-md); justify-items: start; }
.strip__grid { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: var(--space-xs);
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
.strip--1 .strip__grid { grid-template-columns: minmax(0, 1fr); max-width: 32rem; }
.strip__item { background: var(--color-paper-2); }
.strip__item img { width: 100%; aspect-ratio: 1; object-fit: cover; }
@media (min-width: 64rem) {
  .strip--3 .strip__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .strip--4 .strip__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* FAQ: native disclosure, no script */
.faq { padding-block: var(--space-2xl) var(--space-3xl); border-top: var(--rule-hair) solid var(--color-rule);
  display: grid; gap: var(--space-xl); }
.faq__list { display: grid; max-width: 52rem; }
.faq__item { border-top: var(--rule-hair) solid var(--color-rule); }
.faq__item:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq__q { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md);
  padding: var(--space-md) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); line-height: 1.3; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; flex: none; font-family: var(--font-body); font-weight: 400; font-size: var(--text-lg);
  line-height: 1; color: var(--color-accent); transition: transform var(--dur-short) var(--ease-out); }
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__q:hover { color: var(--color-accent); }
.faq__a { padding-bottom: var(--space-lg); max-width: 62ch; color: var(--color-ink-2); }

/* related + other services: typographic index like the towns list */
.more { padding-block: var(--space-2xl) var(--space-3xl); border-top: var(--rule-hair) solid var(--color-rule);
  display: grid; gap: var(--space-2xl); }
.more__h { font-size: var(--text-sm); font-family: var(--font-body); font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-sm); }
.more__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xl); }
.more__links a { display: inline-block; padding-block: var(--space-2xs); font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-md); line-height: 1.25; text-decoration: none; border-bottom: var(--rule-hair) solid transparent; }
.more__links a:hover { border-bottom-color: currentColor; }

/* services hub: cards carry a one-line summary */
.services--hub { padding-block: var(--space-2xl) var(--space-3xl); }
.card__sum { color: var(--color-ink-2); font-size: var(--text-base); line-height: 1.5; margin-top: calc(var(--space-xs) * -1); }

/* ---------- gallery: grouped square grid + native <dialog> lightbox ---------- */
.jump__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.jump__list a { display: inline-flex; gap: var(--space-xs); min-height: 2.75rem; align-items: center;
  padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm);
  font-weight: 600; text-decoration: none; white-space: nowrap; }
.jump__list a:hover { border-color: var(--color-ink); color: var(--color-ink); }
.jump__n { font-weight: 400; color: var(--color-muted); font-variant-numeric: lining-nums; }
.gal { max-width: var(--page-max); margin-inline: auto; padding: var(--space-2xl) var(--page-gutter) 0; }
.gal + .gal { border-top: var(--rule-hair) solid var(--color-rule); margin-top: var(--space-2xl); }
.gal:last-of-type { padding-bottom: var(--space-3xl); }
.gal__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs);
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40rem) { .gal__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .gal__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gal__item { display: block; overflow: hidden; background: var(--color-paper-2); }
.gal__item img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform var(--dur-long) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .gal__item:hover img { transform: scale(1.02); } }

.lb { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: oklch(14% 0.015 262 / 0.96); color: var(--color-on-photo); overscroll-behavior: contain; }
.lb::backdrop { background: oklch(14% 0.015 262 / 0.6); }
.lb[open] { display: grid; place-items: center; }
.lb__fig { margin: 0; display: grid; gap: var(--space-sm); justify-items: center;
  padding: var(--space-3xl) var(--space-md) var(--space-lg); max-width: 100%; }
.lb__img { max-width: min(100%, 100rem); max-height: calc(100dvh - 9rem); width: auto; height: auto; object-fit: contain; }
.lb__cap { max-width: 60ch; text-align: center; font-size: var(--text-sm); color: var(--color-on-navy-2); }
.lb__count { white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; opacity: 0.8; }
.lb__btn { position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0;
  font: 400 2rem/1 var(--font-body); color: var(--color-on-photo); background: oklch(14% 0.015 262 / 0.5);
  border: var(--rule-hair) solid oklch(97% 0.006 81 / 0.35); border-radius: var(--radius-sm); cursor: pointer; }
.lb__btn:hover { background: oklch(14% 0.015 262 / 0.85); border-color: var(--color-on-photo); }
.lb__btn:focus-visible { outline-color: var(--color-accent-lt); }
.lb__close { top: var(--space-md); right: var(--space-md); }
.lb__prev, .lb__next { top: 50%; transform: translateY(-50%); }
.lb__prev { left: var(--space-sm); }
.lb__next { right: var(--space-sm); }
@media (max-width: 40rem) { .lb__prev, .lb__next { top: auto; bottom: var(--space-md); transform: none; } }

/* areas we serve: three-up town cards with the county beside the name */
@media (min-width: 60rem) { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card__county { font-family: var(--font-body); font-weight: 400; font-size: var(--text-sm); color: var(--color-muted);
  margin-left: var(--space-2xs); white-space: nowrap; }

/* FAQs page: groups stack, so only the first keeps the top rule */
.page-faqs .faq:first-of-type { border-top: 0; }

/* ---------- contact: form beside direct details ---------- */
.reach { max-width: var(--page-max); margin-inline: auto; padding: var(--space-2xl) var(--page-gutter) var(--space-3xl);
  display: grid; gap: var(--space-2xl); }
@media (min-width: 60rem) { .reach { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-3xl); } }
.form { display: grid; gap: var(--space-md); justify-items: start; }
.form__row { display: grid; gap: var(--space-md); width: 100%; }
@media (min-width: 40rem) { .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form__field { display: grid; gap: var(--space-2xs); min-width: 0; }
.form__label { font-weight: 600; }
.form__req { font-weight: 400; font-size: var(--text-sm); color: var(--color-muted); margin-left: var(--space-2xs); }
.form input, .form select, .form textarea {
  width: 100%; min-height: 2.75rem; padding: var(--space-xs) var(--space-sm);
  font: inherit; font-size: max(1rem, 16px); color: var(--color-ink);           /* 16px+ stops iOS zooming on focus */
  background: oklch(99% 0.004 81); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm); }
.form textarea { resize: vertical; min-height: 9rem; }
.form input:hover, .form select:hover, .form textarea:hover { border-color: var(--color-ink-2); }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline-offset: 1px; border-color: var(--color-ink); }
.form__hint { margin-top: calc(var(--space-xs) * -1); font-size: var(--text-sm); color: var(--color-muted); }
.form__hint.is-error { color: var(--color-accent-2); font-weight: 600; }
.form__note { font-size: var(--text-sm); color: var(--color-muted); max-width: 48ch; }
.form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__alert { margin-bottom: var(--space-md); padding: var(--space-sm) var(--space-md);
  border-left: var(--rule-thick) solid var(--color-accent); background: var(--color-paper-2); font-weight: 600; }
.reach__details { display: grid; gap: var(--space-sm); align-content: start; }
.reach__phone { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); text-decoration: none;
  font-variant-numeric: lining-nums; white-space: nowrap; }
.reach__email { font-size: var(--text-md); overflow-wrap: anywhere; }
.reach__list { margin: var(--space-md) 0 0; display: grid; }
.reach__list div { display: grid; gap: var(--space-3xs); padding: var(--space-sm) 0; border-top: var(--rule-hair) solid var(--color-rule-2); }
.reach__list dt { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted); }
.reach__list dd { margin: 0; }

/* ---------- resources: article pages ---------- */
.card__date { font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: lining-nums; margin-bottom: calc(var(--space-xs) * -1); }
.post { max-width: 52rem; margin-inline: auto; padding: var(--space-2xl) var(--page-gutter) var(--space-3xl); display: grid; gap: var(--space-xl); }
.post__head { display: grid; gap: var(--space-md); justify-items: start; }
.post__title { font-size: clamp(2rem, 3vw + 1rem, 3.5rem); line-height: 1.05; letter-spacing: -0.02em; }
.post__meta { color: var(--color-muted); font-size: var(--text-sm); font-variant-numeric: lining-nums; }
.post__photo { background: var(--color-paper-2); }
.post__photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.post__body { display: grid; gap: var(--space-md); max-width: 68ch; font-size: 1.0625rem; line-height: 1.7; }
.post__body > p { color: var(--color-ink-2); }
.post__h { font-size: var(--text-lg); line-height: 1.2; margin-top: var(--space-lg); }
.post__list { margin: 0; padding-left: 1.25em; display: grid; gap: var(--space-xs); color: var(--color-ink-2); }
.post__list li::marker { color: var(--color-accent); }
.post__call { margin-top: var(--space-lg); padding: var(--space-md) var(--space-lg); border-left: var(--rule-thick) solid var(--color-accent);
  background: var(--color-paper-2); color: var(--color-ink) !important; font-weight: 500; }
.post__call a { font-weight: 600; white-space: nowrap; }
.more__links--stack { flex-direction: column; gap: var(--space-xs); }
.more__dir { display: block; font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--color-muted); }