/* Hallmark · macrostructure: Split Studio · H2 diptych knobs: ratio=7/5, right=photo, divider=negative-space
 * theme: custom · vibe: "job-site practical, clean-lined, quietly premium" · paper: oklch(97.5% 0.006 140) · accent: oklch(40% 0.12 155)
 * display: Bricolage Grotesque · body: IBM Plex Sans · axes: light / grotesk-sans / chromatic-green ~155°
 * genre: editorial · nav: N12 band + bar · footer: Ft1 mast-headed · enrichment: none (photo placeholders)
 * studied: no · context: inferred · pre-emit critique: P4 H4 E4 S4 R5 V4
 * ------------------------------------------------------------------
 * You normally do NOT need to edit this file. Colors and fonts live
 * in tokens.css. Text lives in the .html files.
 * ------------------------------------------------------------------ */

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

html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
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;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-md);
  overflow-wrap: anywhere;
  min-width: 0;
  text-wrap: balance;
}
h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); letter-spacing: -0.01em; }
h4 { font-size: var(--text-md); letter-spacing: 0; }

p { margin: 0 0 var(--space-md); max-width: 65ch; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 var(--space-md); padding-left: 1.25em; }
li { margin-bottom: var(--space-2xs); }
strong { font-weight: 600; }

a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }

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

::selection { background: var(--color-accent-soft); color: var(--color-ink); }

.muted { color: var(--color-muted); }
.small { font-size: var(--text-sm); }
.lede { font-size: var(--text-md); color: var(--color-ink-2); max-width: 58ch; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

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

.skip-link {
  position: absolute; left: var(--space-md); top: -100px; z-index: calc(var(--z-nav) + 1);
  background: var(--color-ink); color: var(--color-on-dark); padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm); text-decoration: none;
}
.skip-link:focus { top: var(--space-md); }

/* Small uppercase label: use sparingly */
.kicker {
  display: inline-block;
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

/* ===== Icons (inline SVG) ===== */
.icon { width: 1.1em; height: 1.1em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 46px; padding: 0.6rem 1.25rem;
  font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; line-height: 1;
  border: 1.5px solid transparent; border-radius: var(--radius-sm);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform 80ms var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.btn--primary:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); }
.btn--outline { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.btn--outline:hover { background: var(--color-paper-3); }
.btn--on-dark { background: transparent; color: var(--color-on-dark); border-color: var(--color-on-dark-muted); }
.btn--on-dark:hover { background: var(--color-rule-dark); }
.btn--sm { min-height: 40px; padding: 0.45rem 0.9rem; font-size: var(--text-sm); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn .icon { width: 1em; height: 1em; }

/* Typographic link with arrow */
.textlink {
  display: inline-flex; align-items: center; gap: 0.35em;
  font-weight: 600; color: var(--color-accent); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 1px; white-space: nowrap;
}
.textlink:hover { border-bottom-width: 2px; }

/* ===== Header: top band + nav bar ===== */
.topband {
  background: var(--color-accent-deep); color: var(--color-on-dark);
  font-size: var(--text-sm);
}
.topband__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  min-height: 38px;
}
.topband__list { display: flex; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.topband__list li { display: inline-flex; align-items: center; gap: 0.45em; margin: 0; white-space: nowrap; }
.topband a { color: inherit; text-decoration: none; }
.topband a:hover { text-decoration: underline; }
.topband__note { color: var(--color-on-dark-muted); white-space: nowrap; }
.topband .is-desktop { display: none; }

.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: var(--color-paper); border-bottom: var(--rule);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  min-height: 68px;
}
.nav__brand { display: inline-flex; align-items: center; text-decoration: none; }
.nav__brand img { height: 40px; width: auto; }
.nav__links { display: none; }
.nav__cta { display: none; }
.nav__toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-width: 44px; min-height: 44px; padding: 0 var(--space-sm);
  background: transparent; border: var(--rule); border-radius: var(--radius-sm);
  color: var(--color-ink); font: inherit; font-weight: 600; cursor: pointer;
}
.nav__toggle .icon--close { display: none; }
.nav__toggle[aria-expanded="true"] .icon--menu { display: none; }
.nav__toggle[aria-expanded="true"] .icon--close { display: block; }

/* Mobile sheet */
.nav__sheet {
  display: none;
  border-top: var(--rule);
  background: var(--color-paper);
  padding: var(--space-sm) 0 var(--space-lg);
}
.nav__sheet.is-open { display: block; }
.nav__sheet ul { list-style: none; margin: 0; padding: 0; }
.nav__sheet li { margin: 0; }
.nav__sheet ul a { display: block; padding: var(--space-sm) 0; font-size: var(--text-md); font-weight: 500; color: var(--color-ink); text-decoration: none; border-bottom: 1px solid var(--color-rule-2); white-space: nowrap; }
.nav__sheet ul a[aria-current="page"] { color: var(--color-accent); }
.nav__sheet .btn { margin-top: var(--space-md); width: 100%; }

@media (min-width: 60rem) {
  .topband .is-desktop { display: inline-flex; }
  .nav__toggle, .nav__sheet { display: none !important; }
  .nav__links { display: block; margin: 0 auto; }
  .nav__links ul { display: flex; gap: var(--space-xl); list-style: none; margin: 0; padding: 0; }
  .nav__links li { margin: 0; }
  .nav__links a {
    display: inline-block; padding: var(--space-xs) 0;
    font-weight: 500; color: var(--color-ink); text-decoration: none; white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: border-color var(--dur-short) var(--ease-out);
  }
  .nav__links a:hover { border-bottom-color: var(--color-rule); }
  .nav__links a[aria-current="page"] { border-bottom-color: var(--color-accent); }
  .nav__cta { display: inline-flex; }
}

/* ===== Sections ===== */
.section { padding-block: var(--space-3xl); }
.section--tight { padding-block: var(--space-2xl); }
.section--roomy { padding-block: var(--space-4xl); }
.section--alt { background: var(--color-paper-2); }

.section__head { margin-bottom: var(--space-2xl); max-width: 42rem; }
.section__head h2 { position: relative; padding-left: 1.1em; }
.section__head h2::before {
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: 0.5em; height: 0.5em; background: var(--color-accent);
}
.section__head .lede { margin-top: var(--space-sm); }

/* ===== Hero (split diptych) ===== */
.hero { padding-block: var(--space-2xl) var(--space-3xl); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); align-items: center; }
.hero__copy h1 { margin-bottom: var(--space-lg); }
.hero__copy .lede { margin-bottom: var(--space-xl); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.hero__phone { display: inline-flex; align-items: center; gap: 0.45em; font-weight: 600; color: var(--color-ink); text-decoration: none; white-space: nowrap; padding: 0.6rem 0.25rem; }
.hero__phone:hover { color: var(--color-accent); }
.hero__figure { margin: 0; }
.hero__figure img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius-md); }
@media (min-width: 60rem) {
  .hero { padding-block: var(--space-3xl) var(--space-4xl); }
  .hero__grid { grid-template-columns: 7fr 5fr; gap: var(--space-3xl); }
  .hero__figure img { aspect-ratio: 4 / 5; }
}

/* One orchestrated entrance on the hero only */
@media (prefers-reduced-motion: no-preference) {
  .hero__copy > * { animation: rise var(--dur-long) var(--ease-out) both; }
  .hero__copy > :nth-child(2) { animation-delay: 60ms; }
  .hero__copy > :nth-child(3) { animation-delay: 120ms; }
  .hero__copy > :nth-child(4) { animation-delay: 180ms; }
  .hero__figure { animation: fade var(--dur-long) var(--ease-out) 120ms both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ===== Proof strip (no invented numbers, just facts) ===== */
.proof { border-top: var(--rule); border-bottom: var(--rule); }
.proof__list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none; margin: 0; padding: 0;
}
.proof__list li { margin: 0; padding: var(--space-lg) var(--space-md) var(--space-lg) 0; border-bottom: 1px solid var(--color-rule-2); }
.proof__list li:nth-last-child(-n+2) { border-bottom: 0; }
.proof__list strong { display: block; font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; letter-spacing: -0.01em; margin-bottom: var(--space-2xs); }
.proof__list span { color: var(--color-muted); font-size: var(--text-sm); }
@media (min-width: 60rem) {
  .proof__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .proof__list li { border-bottom: 0; border-right: 1px solid var(--color-rule-2); padding-inline: var(--space-lg); }
  .proof__list li:first-child { padding-left: 0; }
  .proof__list li:last-child { border-right: 0; }
}

/* ===== Phase sequence (rough → final → touch-up) ===== */
.phases { list-style: none; margin: 0; padding: 0; border-top: var(--rule); }
.phases > li {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm) var(--space-xl);
  padding-block: var(--space-xl); margin: 0; border-bottom: var(--rule);
}
.phases__num {
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl);
  color: var(--color-accent); line-height: 1; font-variant-numeric: tabular-nums;
}
.phases h3 { margin-bottom: var(--space-xs); }
.phases p { margin-bottom: var(--space-sm); }
.phases__meta { font-size: var(--text-sm); color: var(--color-muted); }
@media (min-width: 60rem) {
  .phases > li { grid-template-columns: 6rem minmax(0, 1fr) 16rem; align-items: start; }
  .phases__num { font-size: var(--text-3xl); }
  .phases__meta { padding-top: 0.35rem; }
}

/* ===== Split blocks (text + image, alternating) ===== */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
.split + .split { margin-top: var(--space-3xl); }
.split__figure { margin: 0; }
.split__figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); }
.split__copy h2 { margin-bottom: var(--space-md); }
.split__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
@media (min-width: 60rem) {
  .split { grid-template-columns: 6fr 6fr; gap: var(--space-3xl); }
  .split--flip .split__figure { order: 2; }
  .split--wide-copy { grid-template-columns: 7fr 5fr; }
}

/* Checklist */
.checks { list-style: none; margin: var(--space-md) 0 0; padding: 0; }
.checks li { position: relative; padding-left: 1.75em; margin-bottom: var(--space-xs); }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 0.3em; width: 1.1em; height: 1.1em;
  background-color: var(--color-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Service list (compact, on the home page) */
.svc-index { list-style: none; margin: 0; padding: 0; border-top: var(--rule); }
.svc-index li { margin: 0; border-bottom: var(--rule); }
.svc-index a {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-sm) 0; color: var(--color-ink); text-decoration: none;
}
.svc-index a:hover strong { color: var(--color-accent); }
.svc-index strong { font-weight: 600; transition: color var(--dur-short) var(--ease-out); }
.svc-index span { color: var(--color-muted); font-size: var(--text-sm); text-align: right; display: none; }
@media (min-width: 40rem) { .svc-index span { display: block; } }

/* ===== Before / after pairs ===== */
.pairs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.pair { margin: 0; }
.pair__images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs); }
.pair__images.is-single { grid-template-columns: minmax(0, 1fr); }
.pair__img { position: relative; margin: 0; }
.pair__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); background: var(--color-paper-3); }
.pair__tag {
  position: absolute; left: var(--space-xs); top: var(--space-xs);
  padding: 0.2em 0.55em; border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--color-paper); color: var(--color-ink-2);
}
.pair__tag--after { background: var(--color-accent); color: var(--color-accent-ink); }
.pair__caption { padding-top: var(--space-sm); }
.pair__caption strong { display: block; font-weight: 600; }
.pair__caption span { color: var(--color-muted); font-size: var(--text-sm); }
.pair__button {
  display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; text-align: left; cursor: zoom-in; font: inherit; color: inherit;
  border-radius: var(--radius-sm);
}
@media (min-width: 40rem) { .pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .pairs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Gallery groups (one per category) */
.gallery-group + .gallery-group { margin-top: var(--space-3xl); }
.gallery-group__title {
  display: flex; align-items: baseline; gap: var(--space-sm);
  font-size: var(--text-xl); padding-bottom: var(--space-sm); margin-bottom: var(--space-lg);
  border-bottom: var(--rule);
}
.gallery-group__count { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); font-variant-numeric: tabular-nums; }

/* Optional add-ons under the phase list */
.addons { margin-top: var(--space-2xl); }
.addons h3 { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-md); }
.addons__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-lg); }
.addons__list li { margin: 0; padding: var(--space-lg); background: var(--color-paper-2); border-radius: var(--radius-md); }
.addons__list h4 { margin-bottom: var(--space-xs); }
.addons__list p { margin-bottom: var(--space-sm); color: var(--color-ink-2); }
@media (min-width: 60rem) { .addons__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); } }

/* Filter chips */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-xl); }
.chip {
  min-height: 40px; padding: 0.4rem 0.9rem; border-radius: 999px;
  background: transparent; border: 1.5px solid var(--color-rule); color: var(--color-ink);
  font: inherit; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.chip:hover { border-color: var(--color-ink-2); }
.chip[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-on-dark); }
.gallery-empty { color: var(--color-muted); padding: var(--space-xl) 0; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: none; align-items: center; justify-content: center;
  padding: var(--space-md);
  background: var(--color-scrim);
}
.lightbox.is-open { display: flex; }
.lightbox__panel { width: min(100%, 68rem); max-height: 100%; overflow: auto; background: var(--color-paper); border-radius: var(--radius-md); padding: var(--space-md); }
.lightbox__images { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
.lightbox__images img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--color-paper-3); border-radius: var(--radius-sm); }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-sm); }
.lightbox__title { font-weight: 600; }
.lightbox__nav { display: flex; gap: var(--space-xs); }
.lightbox__btn {
  min-width: 44px; min-height: 44px; padding: 0 var(--space-sm);
  background: transparent; border: var(--rule); border-radius: var(--radius-sm); color: var(--color-ink); font: inherit; cursor: pointer;
}
.lightbox__btn:hover { background: var(--color-paper-2); }
@media (min-width: 40rem) { .lightbox__images { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lightbox__images.is-single { grid-template-columns: minmax(0, 1fr); } }

/* ===== FAQ ===== */
.faq { border-top: var(--rule); max-width: 50rem; }
.faq details { border-bottom: var(--rule); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-md) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; width: 1.5em; text-align: center;
  font-family: var(--font-body); font-weight: 400; font-size: var(--text-lg); color: var(--color-accent); line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 0 var(--space-lg); color: var(--color-ink-2); }
.faq details > div p { max-width: 60ch; }

/* ===== CTA band ===== */
.cta-band { background: var(--color-paper-2); border-top: var(--rule); border-bottom: var(--rule); }
.cta-band__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
.cta-band h2 { margin-bottom: var(--space-sm); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.steps-inline { display: flex; flex-wrap: wrap; gap: var(--space-xs) 0; list-style: none; margin: var(--space-lg) 0 0; padding: 0; color: var(--color-muted); font-size: var(--text-sm); }
.steps-inline li { margin: 0; white-space: nowrap; }
.steps-inline li + li::before { content: "→"; margin-inline: 0.6em; color: var(--color-rule); }
@media (min-width: 60rem) { .cta-band__grid { grid-template-columns: 7fr 5fr; } .cta-band__actions { justify-content: flex-end; } }

/* ===== Footer (mast-headed, on forest green) ===== */
.foot { background: var(--color-accent-deep); color: var(--color-on-dark); padding-block: var(--space-3xl) var(--space-xl); }
.foot a { color: inherit; }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
.foot__wordmark { font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl); letter-spacing: -0.02em; line-height: 1; margin: 0 0 var(--space-sm); }
.foot__tagline { color: var(--color-on-dark-muted); max-width: 34ch; }
.foot h3 { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-on-dark-muted); margin-bottom: var(--space-sm); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin: 0 0 var(--space-xs); }
.foot__contact li { display: flex; gap: 0.5em; align-items: flex-start; }
.foot__contact .icon { margin-top: 0.25em; opacity: 0.8; }
.foot__contact a { text-decoration: none; }
.foot__contact a:hover { text-decoration: underline; }
.foot__bottom {
  margin-top: var(--space-2xl); padding-top: var(--space-md); border-top: 1px solid var(--color-rule-dark);
  display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); align-items: center; justify-content: space-between;
  font-size: var(--text-sm); color: var(--color-on-dark-muted);
}
.foot__bottom ul { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.foot__bottom li { margin: 0; white-space: nowrap; }
.foot__bottom a { text-decoration: none; }
.foot__bottom a:hover { text-decoration: underline; }
@media (min-width: 60rem) { .foot__grid { grid-template-columns: 5fr 3fr 4fr; } }

/* ===== Sticky mobile CTA bar ===== */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md) max(var(--space-xs), env(safe-area-inset-bottom));
  background: var(--color-paper); border-top: var(--rule);
}
.sticky-cta .btn { width: 100%; }
body.has-sticky-cta { padding-bottom: 72px; }
@media (min-width: 60rem) { .sticky-cta { display: none; } body.has-sticky-cta { padding-bottom: 0; } }

/* ===== Page header (inner pages) ===== */
.page-head { padding-block: var(--space-2xl) var(--space-xl); border-bottom: var(--rule); }
.page-head h1 { font-size: var(--text-display-s); margin-bottom: var(--space-sm); }
.page-head .lede { margin: 0; }
.breadcrumbs { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-md); }
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs span { margin-inline: 0.4em; }

/* ===== Services page ===== */
.svc-group { padding-block: var(--space-2xl); }
.svc-group + .svc-group { border-top: var(--rule); }
.svc-group__intro { max-width: 40rem; margin-bottom: var(--space-xl); }
.svc-list { list-style: none; margin: 0; padding: 0; }
.svc-list > li {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md) var(--space-xl);
  padding-block: var(--space-xl); margin: 0; border-top: var(--rule); scroll-margin-top: 90px;
}
.svc-list figure { margin: 0; }
.svc-list img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); }
.svc-list h3 { font-size: var(--text-xl); margin-bottom: var(--space-xs); }
.svc-list .svc-list__includes { columns: 1; margin-top: var(--space-sm); color: var(--color-ink-2); }
.svc-list .svc-list__includes li { break-inside: avoid; }
.svc-list .textlink { margin-top: var(--space-md); }
@media (min-width: 40rem) { .svc-list .svc-list__includes { columns: 2; column-gap: var(--space-xl); } }
@media (min-width: 60rem) {
  .svc-list > li { grid-template-columns: 18rem minmax(0, 1fr); align-items: start; }
  .svc-list > li:nth-child(even) { grid-template-columns: minmax(0, 1fr) 18rem; }
  .svc-list > li:nth-child(even) figure { order: 2; }
}

/* ===== Contact page ===== */
.contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
.contact__aside { border-top: var(--rule); padding-top: var(--space-lg); }
.contact__aside h2 { font-size: var(--text-lg); }
.contact__aside ul { list-style: none; margin: 0 0 var(--space-lg); padding: 0; }
.contact__aside li { display: flex; gap: 0.6em; align-items: flex-start; margin-bottom: var(--space-sm); }
.contact__aside .icon { margin-top: 0.3em; color: var(--color-accent); }
.contact__aside a { text-decoration: none; color: var(--color-ink); font-weight: 500; }
.contact__aside a:hover { color: var(--color-accent); }
.contact__aside .hours { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2xs) var(--space-md); color: var(--color-ink-2); }
.contact__aside .hours dt { font-weight: 500; color: var(--color-ink); }
.contact__aside .hours dd { margin: 0; }
@media (min-width: 60rem) {
  .contact { grid-template-columns: 7fr 5fr; gap: var(--space-4xl); }
  .contact__aside { border-top: 0; padding-top: 0; border-left: var(--rule); padding-left: var(--space-2xl); }
}

/* Forms */
.form { display: grid; gap: var(--space-lg); }
.form__row { display: grid; gap: var(--space-lg); }
@media (min-width: 40rem) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field label { display: block; font-weight: 600; margin-bottom: var(--space-2xs); }
.field .hint { display: block; font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-xs); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 46px; padding: 0.6rem 0.8rem;
  font: inherit; color: var(--color-ink); background: var(--color-paper);
  border: 1.5px solid var(--color-rule); border-radius: var(--radius-sm);
  transition: border-color var(--dur-short) var(--ease-out);
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-ink-2); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; border-color: var(--color-focus); }
.field input:user-invalid, .field textarea:user-invalid, .field select:user-invalid { border-color: var(--color-error); }
.field input::placeholder, .field textarea::placeholder { color: var(--color-muted); }
.form__foot { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }
.form__foot .small { max-width: 40ch; }
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ===== Simple pages (thank you, 404) ===== */
.simple { padding-block: var(--space-4xl); }
.simple h1 { font-size: var(--text-display-s); }
.simple .actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }

/* ===== Motion preferences ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ===== Print ===== */
@media print {
  .topband, .nav, .sticky-cta, .foot__bottom, .lightbox { display: none !important; }
  a { color: inherit; text-decoration: none; }
}

/* ===== Hidden photo placeholders =====
   A <figure hidden> is kept off the page until a real photo is added.
   These rules let the text use the full width while the photo is hidden. */
[hidden] { display: none !important; }
.hero__grid:has(> .hero__figure[hidden]) .hero__copy,
.split:has(> .split__figure[hidden]) .split__copy { max-width: 46rem; }
@media (min-width: 60rem) {
  .hero__grid:has(> .hero__figure[hidden]) { grid-template-columns: minmax(0, 1fr); }
  .split:has(> .split__figure[hidden]) { grid-template-columns: minmax(0, 1fr); }
  .svc-list > li:has(> figure[hidden]),
  .svc-list > li:nth-child(even):has(> figure[hidden]) { grid-template-columns: minmax(0, 1fr); }
}