/* ==========================================================================
   Adova dark design system — operator-provided design input
   ==========================================================================

   A dark, image-led editorial system: near-black ground, one accent hue used
   structurally, a humanist display face against a neutral body face, generous
   vertical rhythm, and alternating full-width image/statement rows as the
   signature component.

   Adapted from the Envato "Adova" creative portfolio template (Laralink), dark
   variant, and reimplemented dependency-free — no Bootstrap, no jQuery, no
   remote font requests. See README.md for provenance and licence position.

   ADAPTED FOR PRIME DEMO MANHATTAN, 2026-08-17. This is now the site's own
   stylesheet, authored in assets-src/css/ and copied to assets/css/ by the
   build. The template package in template/ stays unmodified design input.

   ACCENT REPLACED: the inherited spruce (#2C5545 / #86BBA1) is gone. This
   brand is burnt copper — --accent #8C3312 for the single full-width band and
   solid fills, --accent-lt #E5813C for links, eyebrows, indices, arrows and
   the focus ring, measured at 6.48:1 on the ground. One hue, and one only.
   See DESIGN-DNA.md for why copper and what must not be reversed.

   Builder additions live at the foot of this file: the FAQ accordion and the
   sticky mobile call bar, both written in the system's own language.
   ========================================================================== */
:root {
  --ink: #141715;
  --ink-2: #1c201d;
  --bone: #c6c9c2;
  --bone-dim: #9aa09a;
  --white: #ffffff;
  --rule: #3a403c;
  --accent: #8c3312;
  --accent-lt: #e5813c;

  --font-display: Candara, "Gill Sans Nova", "Gill Sans MT", Optima, "Trebuchet MS", "Segoe UI", sans-serif;
  --font-body: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --container: 1240px;
  --gutter: 24px;
  --radius: 10px;

  --s-xl: 150px;
  --s-lg: 120px;
  --s-md: 85px;
  --s-sm: 55px;
  --s-xs: 30px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* No `overflow-x: hidden` here. It makes body a scroll container, which breaks sticky
     positioning of its children and — worse — forces scrollWidth to equal clientWidth, so an
     overflow probe reads zero whether or not the page overflows. The decorative CTA shapes that
     bleed past the container are clipped by `.cta { overflow: hidden }`, which is where the
     clipping belongs: on the component that needs it, not on the document. */
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--white);
  margin: 0 0 20px;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(34px, 5vw, 56px); }
h2 { font-size: clamp(28px, 3.4vw, 42px); }
h3 { font-size: clamp(22px, 2.2vw, 30px); }
h4 { font-size: 20px; }

p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease; }

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

ul { margin: 0 0 20px; padding-left: 20px; }
li { margin-bottom: 8px; }

:focus-visible {
  outline: 3px solid var(--accent-lt);
  outline-offset: 3px;
}

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

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  background: var(--white);
  color: var(--ink);
  padding: 10px 18px;
  font-weight: 700;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 16px; }

/* --------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(20, 23, 21, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease, padding 0.3s ease;
}
.site-header.is-stuck {
  background: var(--ink-2);
  border-bottom-color: var(--rule);
}

.header-in {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 84px;
  /* Vertical only. A `padding: 14px 0` shorthand here silently zeroes the horizontal padding
     this element inherits from .container, and pins the wordmark and the menu button to the
     viewport edge at every width. */
  padding-top: 14px;
  padding-bottom: 14px;
}
.site-header.is-stuck .header-in { min-height: 68px; }

/* The designed lockup is the whole brand element — the business name lives inside the artwork,
   so there is no wordmark typed beside it in the markup. The image carries the exact business
   name as the link's accessible name. Stacked artwork below 768px, full horizontal above: the
   full lockup's 7.4:1 ratio cannot hold a legible locality line inside a phone-width header. */
.brand {
  display: flex;
  align-items: center;
  flex: none;
}
/* Constrained by height so the header never grows around it; width follows the aspect ratio. */
.brand-logo {
  /* Below 768px this is the MARK (0.84:1), so 42px costs 35px of width. From 768px up it is the
     full lockup and gets more height, because that is what keeps the locality line legible. */
  height: 42px;
  width: auto;
  display: block;
  transition: opacity 0.3s ease;
}
.brand:hover .brand-logo { opacity: 0.82; }

@media (min-width: 768px) {
  .brand-logo { height: 50px; }
}

.primary-nav { margin-left: auto; }
.primary-nav ul {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.primary-nav li { margin: 0; }
.primary-nav a {
  font-size: 15px;
  color: var(--bone);
  position: relative;
  padding-bottom: 4px;
}
.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--accent-lt);
  transition: width 0.3s ease;
}
.primary-nav a:hover { color: var(--white); }
.primary-nav a:hover::after,
.primary-nav a[aria-current="page"]::after { width: 100%; }
.primary-nav a[aria-current="page"] { color: var(--white); }

.header-phone {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
  border-bottom: 2px solid var(--accent-lt);
  padding-bottom: 2px;
}
.header-phone:hover { color: var(--accent-lt); }

.menu-toggle {
  display: none;
  width: 46px; height: 46px;
  padding: 11px;
  background: none;
  border: 1px solid var(--rule);
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  margin-left: auto;
}
.menu-toggle span {
  display: block;
  height: 2px;
  background: var(--white);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.menu-toggle span:nth-child(1) { width: 100%; }
.menu-toggle span:nth-child(2) { width: 70%; }
.menu-toggle span:nth-child(3) { width: 100%; }

/* --------------------------------------------------------- side panel */

/* Presence is driven by visibility + opacity, never by transform alone. A closed panel that is
   merely translated off-screen still holds its links in the tab order and the accessibility
   tree, and any failure to apply the open transform leaves the panel invisible while the button
   reports aria-expanded="true". The slide is decoration on the inner container: if it does not
   animate, the panel is still exactly where it belongs. */
/* Closed means `display: none`, mounted by JS only while it is in use.
   `visibility: hidden` keeps a control out of the tab order in a conformant engine, but it
   leaves it laid out and reachable-looking to any audit that inspects geometry, and it depends
   on engine behaviour for something the standard wants unconditional: a breakpoint-scoped
   control must be absent from the DOM, the tab order and the accessibility tree everywhere it
   does not apply. `display` is the only state that is true in all three at once. */
.side-panel {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--ink-2);
  padding: 26px 0 40px;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.side-panel > .container {
  transform: translateY(-18px);
  transition: transform 0.32s ease;
}
.side-panel.is-open { opacity: 1; }
.side-panel.is-open > .container { transform: none; }

.side-panel-top {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 46px;
}

.panel-close {
  width: 46px; height: 46px;
  background: none;
  border: 1px solid var(--rule);
  color: var(--white);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.panel-close:hover { border-color: var(--accent-lt); color: var(--accent-lt); }

.side-panel nav ul {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
}
.side-panel nav li { margin: 0; border-top: 1px solid var(--rule); }
.side-panel nav li:last-child { border-bottom: 1px solid var(--rule); }
.side-panel nav a {
  display: block;
  padding: 17px 0;
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 700;
  color: var(--white);
}
.side-panel nav a:hover,
.side-panel nav a[aria-current="page"] { color: var(--accent-lt); }

.panel-contact { margin-top: 38px; }
.panel-contact .eyebrow { margin-bottom: 10px; }
.panel-contact p { margin-bottom: 10px; }
.panel-contact a { border-bottom: 2px solid var(--accent-lt); font-size: 24px; font-family: var(--font-display); font-weight: 700; color: var(--white); }

/* ----------------------------------------------------------------- hero */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(78vh, 720px);
  padding: var(--s-md) 0;
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 23, 21, 0.82) 0%, rgba(20, 23, 21, 0.7) 45%, rgba(20, 23, 21, 0.94) 100%);
}
.hero .container { position: relative; z-index: 1; }
.hero-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.hero-standfirst {
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--bone);
  max-width: 660px;
  margin: 0 auto 34px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  justify-content: center;
  align-items: center;
}

/* interior page head — same device, shorter */
.page-head { min-height: min(56vh, 470px); }
.page-head .hero-inner { max-width: 940px; }

/* --------------------------------------------------------------- blocks */

.section { padding: var(--s-lg) 0; }
.section--tight { padding: var(--s-md) 0; }
.section--flush-top { padding-top: 0; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-lt);
  margin: 0 0 16px;
}

.section-head { max-width: 780px; margin: 0 auto var(--s-sm); text-align: center; }
.section-head p { color: var(--bone-dim); font-size: 19px; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.split > div > h2 { margin-bottom: 0; }
.split--stack { align-items: center; }

.measure { max-width: 62ch; }

/* alternating image / statement rows — the template's signature component */
.srow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  margin-bottom: var(--s-lg);
}
.srow:last-child { margin-bottom: 0; }
.srow--flip .srow-media { order: 2; }
.srow--no-media { grid-template-columns: 1fr; }
/* Same contract for the split: a stacked split whose figure is absent must not keep a dead column. */
.split--stack:not(:has(> .figure)):not(:has(> .map)) { grid-template-columns: 1fr; }

.srow-media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-2);
}
.srow-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.srow-media:hover img { transform: scale(1.04); }
.srow-index {
  position: absolute;
  left: 0; top: 0;
  z-index: 2;
  background: var(--ink);
  color: var(--accent-lt);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 18px;
}
.srow-body h3 { margin-bottom: 18px; }
.srow-body h3 a:hover { color: var(--accent-lt); }

/* full-bleed image band */
.band {
  position: relative;
  overflow: hidden;
}
.band img {
  width: 100%;
  height: clamp(300px, 46vw, 560px);
  object-fit: cover;
}
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 23, 21, 0.55), rgba(20, 23, 21, 0.35));
  pointer-events: none;
}
.band-caption,
.figure-caption {
  font-size: 13px;
  color: var(--bone-dim);
  letter-spacing: 0.02em;
  margin: 12px 0 0;
}
.band-caption { margin-top: 14px; }

.figure { margin: 0; }
.figure img { border-radius: var(--radius); width: 100%; object-fit: cover; }
.figure--wide img { aspect-ratio: 16 / 9; }
.figure--contained img { aspect-ratio: 4 / 3; }

/* the address moment — the template's largest typographic slot */
.address-block { text-align: center; }
.address-line {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 8.4vw, 104px);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--white);
  margin: 0 0 6px;
}
.address-sub {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 3vw, 34px);
  color: var(--accent-lt);
  margin: 0 0 40px;
  letter-spacing: -0.01em;
}
.address-why {
  max-width: 720px;
  margin: 0 auto 34px;
  font-size: clamp(17px, 1.5vw, 20px);
}

/* numbered steps — the template's 4-up icon grid, marks redrawn */
.steps {
  display: grid;
  /* Both step sequences on this site have FIVE items, so the column count has to be one that
     does not leave a single cell alone in the final row. Five-up and three-up (3 + 2) qualify;
     four-up and two-up do not, and they are skipped deliberately.

     This was auto-fit with a 210px minimum, which reads as though it solves that. It does not:
     auto-fit picks whatever count fits, and at the 1240px container five 210px tracks plus four
     40px gaps need 1210px against 1192px available. It landed on four-up and orphaned step five
     beside three empty columns on every desktop viewport. Column counts are chosen here rather
     than derived, because the constraint is the item count and auto-fit cannot see it. */
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
}
@media (max-width: 1180px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}
@media (max-width: 767px) {
  .steps { grid-template-columns: 1fr; gap: 40px; }
}
.step-mark { margin-bottom: 22px; }
.step h3 { font-size: 22px; margin-bottom: 12px; }
.step p { font-size: 16px; color: var(--bone-dim); }
.step-number {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--accent-lt);
  display: block;
  margin-bottom: 10px;
}

/* emphasis panel — a capability the page wants to land, not a disclaimer */
.callout {
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  padding: 34px 38px;
  background: var(--ink-2);
}
.callout h2 { font-size: clamp(24px, 2.6vw, 30px); }
.callout p:last-child { margin-bottom: 0; }

/* the one full-width hue moment */
.cta {
  position: relative;
  background: var(--accent);
  overflow: hidden;
}
.cta-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: var(--s-lg) 0;
  max-width: 760px;
  margin: 0 auto;
}
.cta-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.14;
  letter-spacing: -0.018em;
  color: var(--white);
  margin: 0 0 20px;
}
.cta-inner p { color: rgba(255, 255, 255, 0.85); margin-bottom: 34px; }
.cta-shape {
  position: absolute;
  z-index: 0;
  opacity: 0.28;
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
}
.cta-shape--1 { left: -40px; top: 8%; width: 218px; }
.cta-shape--2 { right: -30px; bottom: 4%; width: 183px; }
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  justify-content: center;
  align-items: center;
}

/* ---------------------------------------------------------------- links */

.btn {
  display: inline-block;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 17px 34px;
  border: 2px solid var(--white);
}
.btn:hover { background: transparent; color: var(--white); }
.cta .btn { border-color: var(--white); }
.cta .btn:hover { background: transparent; color: var(--white); }

.btn--ghost { background: transparent; color: var(--white); }
.btn--ghost:hover { background: var(--white); color: var(--ink); }

.text-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: var(--white);
  position: relative;
  padding-bottom: 5px;
}
.text-btn::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent-lt);
  transition: height 0.25s ease;
}
.text-btn:hover { color: var(--accent-lt); }
.text-btn:hover::after { height: 2px; }
.text-btn svg { flex: none; transition: transform 0.3s ease; }
.text-btn:hover svg { transform: translateX(5px); }

.tel-link {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  color: var(--white);
  border-bottom: 2px solid var(--accent-lt);
  padding-bottom: 3px;
}
.tel-link:hover { color: var(--accent-lt); }

/* ---------------------------------------------------------- contact bits */

.info-grid {
  display: grid;
  /* Four items, so four-up, two-up and one-up all divide cleanly and three-up does not.
     auto-fit chose three-up through the whole 900px-to-1145px band and orphaned the fourth
     item, which is the same failure .steps had. Counts are chosen, not derived. */
  grid-template-columns: repeat(4, 1fr);
  gap: 46px;
  border-top: 1px solid var(--rule);
  padding-top: 46px;
}
@media (max-width: 1140px) {
  .info-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .info-grid { grid-template-columns: 1fr; }
}
.info-grid h3 { font-size: 20px; margin-bottom: 14px; }
.info-grid address { font-style: normal; }

.map {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-2);
  line-height: 0;
}
.map iframe {
  width: 100%;
  height: 260px;
  border: 0;
  display: block;
  filter: grayscale(0.35) contrast(1.05);
}
.map--large iframe { height: clamp(320px, 40vw, 460px); }

.related {
  border-top: 1px solid var(--rule);
  padding-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 44px;
  align-items: center;
}
.related .eyebrow { margin: 0; width: 100%; }

/* --------------------------------------------------------------- footer */

.site-footer {
  background: var(--ink-2);
  border-top: 1px solid var(--rule);
  padding-top: var(--s-lg);
}
.footer-top {
  display: grid;
  grid-template-columns: 1fr 1.15fr 0.95fr;
  gap: 56px;
  padding-bottom: var(--s-md);
  align-items: start;
}
.footer-cta { margin-top: 26px; }
.footer-map { min-width: 0; }
/* Footer brand mark. Constrained by height like the header instance so it sits to
   the footer's own scale rather than the header's, and given more height at narrow
   widths where the two-line mobile lockup is taller for the same width. */
.footer-logo {
  height: 46px;
  width: auto;
  display: block;
  margin: 0 0 26px;
}
@media (max-width: 767px) {
  .footer-logo { height: 54px; }
}

.footer-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.14;
  color: var(--white);
  margin: 0 0 26px;
  letter-spacing: -0.015em;
}
.footer-contact p:not(.footer-title) { margin-bottom: 8px; color: var(--bone-dim); font-size: 15px; }
.footer-address { font-style: normal; margin-top: 26px; color: var(--bone); }

.footer-nav-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.footer-nav-cols ul { list-style: none; margin: 0; padding: 0; }
.footer-nav-cols li { margin-bottom: 12px; }
.footer-nav-cols a { color: var(--bone); font-size: 15px; }
.footer-nav-cols a:hover { color: var(--accent-lt); }

.footer-bottom {
  border-top: 1px solid var(--rule);
  padding: 26px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--bone-dim);
}
.footer-colophon { margin: 0; }
.footer-bottom ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.footer-bottom li { margin: 0; }
.footer-bottom a:hover { color: var(--accent-lt); }

.scrollup {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 50;
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--white);
  border: 0;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.scrollup.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scrollup:hover { background: var(--accent-lt); color: var(--ink); }

/* ---------------------------------------------------------------- prose */

.prose { max-width: 72ch; }
.prose h2 { font-size: clamp(24px, 2.4vw, 30px); margin-top: 48px; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 22px; }

/* ---------------------------------------------------------------- 404 */

.error-page { padding: var(--s-xl) 0; text-align: center; }
.error-page .container { max-width: 720px; }

/* --------------------------------------------------------------- motion */

/* Gated on the `js` class set inline in <head>. Without JavaScript the page renders complete
   rather than blank — an animation must never be the reason content is invisible. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .primary-nav { display: none; }
  .header-phone { margin-left: auto; }
  .menu-toggle { display: flex; margin-left: 0; }
  /* Mounted by JS while open, and only ever within the breakpoint that owns the control. */
  .side-panel.is-mounted { display: block; }
}

@media (max-width: 992px) {
  :root { --s-xl: 100px; --s-lg: 80px; --s-md: 60px; --s-sm: 40px; }
  .split { grid-template-columns: 1fr; gap: 26px; }
  .srow { grid-template-columns: 1fr; gap: 30px; margin-bottom: var(--s-md); }
  .srow--flip .srow-media { order: 0; }
  /* .steps deliberately sets no column count here. Two-up leaves the fifth step alone on a
     third row, which is the orphan the component rule above exists to prevent, and this block
     is later in the file so it silently won that cascade at every width below 992px. Column
     counts for .steps live with .steps. */
  .info-grid { gap: 34px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 44px; }
  .footer-map { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  body { font-size: 16px; }
  .header-in { min-height: 70px; gap: 16px; }
  .brand-logo { height: 42px; }
  .header-phone { font-size: 0; border: 0; }
  .header-phone::before {
    content: "Call";
    font-size: 15px;
    font-family: var(--font-body);
    font-weight: 600;
    border-bottom: 2px solid var(--accent-lt);
    padding-bottom: 2px;
  }
  .hero { min-height: 0; padding: var(--s-md) 0; }
  .hero-actions, .cta-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn, .cta-actions .btn { text-align: center; }
  .hero-actions .tel-link, .cta-actions .tel-link { text-align: center; }
  /* Tap targets. Text-styled links are the site's main controls, so on touch they get real
     vertical hit area rather than relying on the text box alone. */
  .tel-link, .text-btn, .footer-nav-cols a, .footer-bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .brand-logo { height: 42px; }
  .header-phone::before { display: inline-block; padding: 12px 0; }
  .steps { grid-template-columns: 1fr; gap: 30px; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-nav-cols { grid-template-columns: 1fr 1fr; gap: 26px; }
  .footer-cta .btn { display: block; text-align: center; }
  .callout { padding: 26px 22px; }
  .related { gap: 16px; }
  .related .text-btn { width: 100%; }
  .cta-shape { display: none; }
  .scrollup { right: 14px; bottom: 14px; }
}

@media (max-width: 480px) {
  /* The lockup is 5.09:1, so at 40px it needs 204px of a 320px header that also carries the
     call action and the menu button. Height comes down here so the type stays legible while
     the row still fits. */
  /* No further shrink: below 768 this is the mark, which is legible at 42px. */
  /* The gutter stays at 24px on small screens. A bordered 46px menu button reads much tighter
     against the edge than body text does, and the 8px of content width is not worth it. */
  .address-line { font-size: clamp(30px, 10vw, 46px); }
}

/* ==========================================================================
   BUILDER ADDITIONS — Prime Demo Manhattan
   ==========================================================================
   Two components the system did not carry, written in its own language:
   tokens, spacing scale and type scale unchanged. Nothing here introduces a
   second accent hue.
   ========================================================================== */

/* --------------------------------------------------------------- FAQ block
   Native <details>/<summary>. The keyboard handling, focus behaviour and the
   expanded/collapsed state announced to a screen reader all come from the
   element itself, and the block still works with JavaScript off. Answers stay
   in the DOM when collapsed, so the crawler and the FAQPage schema see exactly
   what a reader can open. */
.faq {
  border-top: 1px solid var(--rule);
  max-width: 860px;
}
.faq details {
  border-bottom: 1px solid var(--rule);
  background: transparent;
}
.faq summary {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 26px 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.35;
  color: var(--white);
  list-style: none;
  transition: color 0.3s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-lt); }

/* The marker is the one decorative use of the hue here: a plus that becomes a
   minus. aria-hidden by construction — it is a CSS pseudo-element, so it is
   never announced, and the open/closed state is carried by <details> itself. */
.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-left: auto;
  margin-top: 6px;
  background:
    linear-gradient(var(--accent-lt), var(--accent-lt)) center/16px 2px no-repeat,
    linear-gradient(var(--accent-lt), var(--accent-lt)) center/2px 16px no-repeat;
  transition: transform 0.3s ease;
}
.faq details[open] > summary::after {
  background: linear-gradient(var(--accent-lt), var(--accent-lt)) center/16px 2px no-repeat;
  transform: rotate(180deg);
}
.faq .faq-answer {
  padding: 0 40px var(--s-xs) 0;
  max-width: 68ch;
}
.faq .faq-answer > :first-child { margin-top: 0; }
.faq .faq-answer > :last-child { margin-bottom: 0; }
.faq .faq-answer p + p { margin-top: 14px; }

/* ------------------------------------------------- sticky mobile call bar
   The system's header drops the phone link below 992px and the whole header
   compacts to a menu button. A local-service site cannot lose its primary
   conversion path on a phone, so the call action returns as a fixed bar under
   768px and exists nowhere else — this is responsive chrome scoped to the
   breakpoint where it functions, not a dead control hidden elsewhere. */
.call-bar { display: none; }

@media (max-width: 767px) {
  .call-bar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: var(--accent);
    text-align: center;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.45);
  }
  /* The padding belongs on the LINK, not the bar. With it on the parent, the bar was 54px tall
     while only the 26px text box was tappable, including at the bottom edge where a thumb lands.
     This is the primary mobile conversion control, so the whole bar is now the target. */
  .call-bar a {
    display: block;
    padding: 16px var(--gutter) calc(16px + env(safe-area-inset-bottom, 0px));
    min-height: 44px;
    box-sizing: border-box;
    color: var(--white);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  /* The bar is fixed, so the page owes it clearance or it covers the footer's
     last line. Matches the bar's own height plus the safe-area inset. */
  /* Clearance for the fixed call bar. The bar is now 16px padding + a 16px/1.2 label + 16px,
     so ~51px, and the tap-target repair made it taller than the original 58px allowance left room
     for. 72px keeps real space between the last line of the footer and the bar. */
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .scrollup { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* ------------------------------------------------------------ breadcrumbs */
.crumbs {
  font-size: 14px;
  color: var(--bone-dim);
  padding-top: var(--s-xs);
}
.crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.crumbs li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--rule);
}
.crumbs a { color: var(--bone-dim); }
.crumbs a:hover { color: var(--accent-lt); }
.crumbs [aria-current="page"] { color: var(--bone); }

/* ==========================================================================
   REPAIR PASS — findings from the independent review, 2026-08-17
   ==========================================================================
   Appended so each fix stays traceable to the finding that produced it.
   ========================================================================== */

/* PDM-B-05 / PDM-B-06 — the related-links and 404 route lists rendered as browser-default
   disc-bulleted lists, the only place on the site typography fell back to defaults. They are
   inline text-buttons now, the same device used in the signature rows. */
.related ul,
.error-page .related ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 40px;
  align-items: center;
}
.related li { margin: 0; }
.related .text-btn { font-size: 15px; }

/* PDM-B-06 — the 404 list also inherited text-align: center, which left bullets floating up to
   65px from their own text. Left-aligned inside a centred column instead. */
.error-page .related {
  text-align: left;
  max-width: 760px;
  margin-inline: auto;
}

/* PDM-B-04 — .page-head has no .hero-inner, so its content is left-aligned while
   .hero-actions{justify-content:center} still applied. On /contact/ that put the primary call
   button 478px right of the text column it belongs to. */
.page-head .hero-actions {
  justify-content: flex-start;
}

/* PDM-B-11 — the focus ring is --accent-lt, which measures 2.90:1 against the copper CTA band and
   misses WCAG 1.4.11's 3:1 for a focus indicator. Inside the band the ring goes white. */
.cta :focus-visible {
  outline-color: var(--white);
}

/* PDM-B-12 — the 44px touch minimum was scoped to max-width 767px while touch-mode navigation
   starts at 1080px, leaving the 768-1080 band with 19-22px controls. The boundaries now agree. */
@media (max-width: 1080px) {
  .tel-link,
  .text-btn,
  .footer-nav-cols a,
  .footer-bottom a,
  .crumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* PDM-B-10 — the back-to-top control is fixed at right: 14px and was landing on the footer's
   second navigation column at mobile widths. Tucked to the edge and lifted above the call bar so
   it overlaps nothing; it also hides once the footer is in view, where it has no job to do. */
@media (max-width: 767px) {
  .scrollup {
    right: 8px;
    width: 40px;
    height: 40px;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    opacity: 0.9;
  }
}

/* PDM-B-16 — .split collapses to one column at <=992px, so prose ran the full 660px container at
   about 82 characters, past the 55-75 guidance. Held to a comfortable measure in that band. */
@media (max-width: 992px) {
  .split .prose,
  .split .measure,
  .page-head .measure {
    max-width: 62ch;
  }
}

/* PDM-B-03 — the open side panel is an opaque full-viewport overlay. It is marked up as a dialog
   in the build; this keeps the background out of the way visually. Focus containment is handled in
   assets-src/js/site.js. */
.side-panel.is-open {
  overscroll-behavior: contain;
}

/* PDM-B-02 follow-up, from the repair-pass probe: the header's own two controls were still under
   the 44px touch minimum. The brand link measured 35x42 (it wraps the compact mark) and the phone
   link 25x54 (its visible label is a pseudo-element, so the box was only as wide as nothing). */
@media (max-width: 1080px) {
  .brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
  }
}
@media (max-width: 767px) {
  .header-phone {
    min-width: 44px;
    justify-content: center;
  }
}

/* PDM-B-10 follow-up — the back-to-top control kept overlapping footer content at phone widths,
   because the mobile footer is full-width and there is no gutter for it to sit in. It is removed
   below 768px rather than nudged: the sticky call bar owns that corner, it is the control that
   matters there, and mobile browsers already offer their own way back to the top. Scoped to the
   breakpoint, so above it the control still works exactly as designed. */
@media (max-width: 767px) {
  .scrollup { display: none; }
}

/* 404 follow-up: with the route list now left-aligned in its own 760px column, the centred action
   row rendered beside the list's last item instead of below it. Same column, clear separation. */
.error-page .hero-actions {
  max-width: 760px;
  margin: var(--s-sm) auto 0;
  justify-content: flex-start;
}

/* ==========================================================================
   REFINE PASS - 2026-09-05
   ==========================================================================
   The finishing layer. Same tokens, same type pair, same one hue, same spacing
   scale: nothing below introduces a second accent or a second system. What it
   adds is hierarchy, depth, imagery presence and one motion vocabulary, plus the
   three contracts a refined candidate has to carry: the SiteKit services
   carousel, a centred FAQ accordion, and content-addressed asset URLs (build).

   Motion vocabulary, and the whole of it:
     arrive   translateY + opacity, ease-out, 560ms, staggered 90ms by --i
     lift     translateY(-6px) + shadow on a fine pointer, 220ms
     press    1px down, 140ms
     draw     a copper line growing from its origin, 1.4s ease-out
     drift    the SiteKit carousel, 32px/s, continuous and endless
   ========================================================================== */
:root {
  --ink-3: #242925;
  --shadow-lift: 0 22px 46px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 140ms;
  --dur: 560ms;
  --dur-slow: 1400ms;
  --s-lg: 110px;
  --s-md: 80px;
}
@media (max-width: 992px) {
  :root { --s-lg: 76px; --s-md: 56px; }
}

/* ---------------------------------------------------------------- rhythm */
.section-head { margin-bottom: 44px; }
.srow { margin-bottom: var(--s-md); }

/* ------------------------------------------------------------------ hero */
/* Asymmetric and vertically centred. Copy in its own column, the photograph keeping its right
   half under a scrim that is heavier where the type is. The homepage adds the lead form beside the
   copy and the fact strip beneath both. Interior heroes are shorter and single-column. */
.hero { min-height: min(66vh, 640px); align-items: center; padding: var(--s-md) 0; }
.hero--home { min-height: min(88vh, 820px); }
.hero--compact { min-height: min(46vh, 420px); }
.hero-media::after {
  background:
    linear-gradient(90deg, rgba(20, 23, 21, 0.9) 0%, rgba(20, 23, 21, 0.7) 48%, rgba(20, 23, 21, 0.3) 100%),
    linear-gradient(180deg, rgba(20, 23, 21, 0.3) 0%, rgba(20, 23, 21, 0.12) 45%, rgba(20, 23, 21, 0.94) 100%);
}
.hero--home .hero-media::after {
  background:
    linear-gradient(90deg, rgba(20, 23, 21, 0.9) 0%, rgba(20, 23, 21, 0.8) 40%, rgba(20, 23, 21, 0.55) 100%),
    linear-gradient(180deg, rgba(20, 23, 21, 0.3) 0%, rgba(20, 23, 21, 0.1) 40%, rgba(20, 23, 21, 0.96) 100%);
}
.hero-inner {
  max-width: none;
  margin: 0;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px 56px;
  align-items: center;
}
.hero--home .hero-inner { grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr); }
.hero-copy { max-width: 780px; min-width: 0; }
.hero h1 { max-width: 16ch; font-size: clamp(36px, 5vw, 62px); letter-spacing: -0.02em; margin-bottom: 22px; }
.hero-standfirst { margin: 0 0 32px; max-width: 58ch; }
.hero-actions { justify-content: flex-start; }
.page-head .hero-inner { max-width: none; display: block; }
.hero .crumbs { padding-top: 0; margin-bottom: 20px; }

.hero-facts {
  grid-column: 1 / -1;
  list-style: none;
  margin: 6px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid rgba(198, 201, 194, 0.28);
  display: flex;
  flex-wrap: wrap;
  gap: 18px 44px;
}
.hero-facts li { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.hero-fact-k { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-dim); }
.hero-fact-v { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--white); }
.hero-fact-v a { border-bottom: 2px solid var(--accent-lt); }
.hero-fact-v a:hover { color: var(--accent-lt); }

@media (max-width: 1080px) {
  .hero--home .hero-inner { grid-template-columns: 1fr; gap: 34px; }
  .hero-aside { max-width: 640px; }
}
@media (max-width: 767px) {
  .hero { padding: var(--s-sm) 0 var(--s-md); }
  .hero-facts { gap: 14px 30px; }
}

/* Entrance. One choreography, beats 90ms apart, gated on JavaScript so a reader without it gets
   a finished hero, and collapsed to nothing under reduced motion by the safeguards. */
@keyframes hero-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
.js [data-hero-entrance] .hero-beat {
  animation: hero-in var(--dur) var(--ease-out) both;
  animation-delay: calc(120ms + var(--beat, 0) * 90ms);
}
.js [data-hero-entrance] .hero-media img {
  animation: hero-media-in 1.6s var(--ease-out) both;
}
@keyframes hero-media-in {
  from { transform: scale(1.06); }
  to { transform: none; }
}

/* --------------------------------------------------------------- crumbs */
/* One line. The row wrapped because the 44px tap rule turned each anchor into a tall inline-flex
   box while the list was allowed to wrap; the current page now truncates instead. */
.crumbs ol { flex-wrap: nowrap; align-items: center; gap: 10px; }
.crumbs li { margin: 0; display: inline-flex; align-items: center; min-width: 0; }
.crumbs li + li::before { margin-right: 10px; }
.crumbs li:last-child { flex: 1 1 auto; overflow: hidden; }
.crumbs [aria-current="page"] { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------ lead form */
.hero-aside { position: relative; min-width: 0; }
.lead-form {
  position: relative;
  background: rgba(28, 32, 29, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent-lt);
  border-radius: var(--radius);
  padding: 28px 28px 24px;
  box-shadow: var(--shadow-lift);
}
.lead-form-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
  color: var(--white);
  margin: 0 0 6px;
}
.lead-form-sub { color: var(--bone-dim); font-size: 15px; margin: 0 0 20px; }
.lead-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lead-field { margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; }
.lead-field label { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--bone); }
.lead-optional { color: var(--bone-dim); font-weight: 400; }
.lead-field input,
.lead-field textarea {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 6px;
  color: var(--white);
  font: inherit;
  font-size: 16px;
  padding: 12px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.lead-field input:hover,
.lead-field textarea:hover { border-color: var(--bone-dim); }
.lead-field input:focus-visible,
.lead-field textarea:focus-visible {
  outline: 2px solid var(--accent-lt);
  outline-offset: 2px;
  border-color: var(--accent-lt);
}
.lead-field textarea { resize: vertical; min-height: 64px; }
.lead-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.lead-actions { margin: 4px 0 10px; }
.lead-actions .btn { width: 100%; text-align: center; }
.lead-actions .btn[disabled] { opacity: 0.7; cursor: progress; transform: none; box-shadow: none; }
.lead-status { min-height: 1.4em; font-size: 15px; margin: 0 0 10px; color: var(--bone); }
.lead-status[data-state="error"] { color: var(--accent-lt); }
.lead-status[data-state="ok"] { color: var(--white); }
.lead-noscript { font-size: 15px; color: var(--bone); margin: 0 0 14px; }
.lead-noscript a { border-bottom: 2px solid var(--accent-lt); }
.lead-consent { font-size: 13px; color: var(--bone-dim); margin: 0; line-height: 1.5; }
.lead-consent a { border-bottom: 1px solid var(--accent-lt); color: var(--bone); }
.lead-consent a:hover { color: var(--accent-lt); }
@media (max-width: 480px) {
  .lead-row { grid-template-columns: 1fr; gap: 0; }
  .lead-form { padding: 22px 20px 20px; }
}

/* ----------------------------------------------------------------- split */
/* Heading column narrower and STICKY, with a copper rule and an optional inset photograph, so a
   long passage never sits beside a void. */
.split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; }
.split-head { text-align: left; margin: 0; max-width: none; position: sticky; top: 110px; }
.split-head h2 { margin-bottom: 0; }
.split-head h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background: var(--accent-lt);
  margin-top: 22px;
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
.js .split[data-reveal]:not(.is-in) .split-head h2::after { transform: scaleX(0); }
.split-head p { margin-top: 18px; }
.figure--inset { margin-top: 34px; }
.figure--inset img { aspect-ratio: 4 / 3; border-radius: var(--radius); }
@media (max-width: 992px) {
  .split { grid-template-columns: 1fr; gap: 26px; }
  .split-head { position: static; }
  .figure--inset { margin: 26px 0 8px; max-width: 520px; }
}

/* --------------------------------------------------------------- buttons */
.btn {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform var(--dur-fast) ease, box-shadow 0.25s ease;
}
.btn:active { transform: translateY(1px) scale(0.985); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); }
  .btn:hover:active { transform: translateY(1px) scale(0.985); box-shadow: none; }
}
.tel-inline { border-bottom: 2px solid var(--accent-lt); color: var(--white); font-weight: 600; white-space: nowrap; }
.tel-inline:hover { color: var(--accent-lt); }

/* ------------------------------------------------------------- showcase */
/* The homepage services showcase: the SiteKit animated-carousel-v1 contract dressed in the
   system card language. Mechanics are SiteKit's; everything visual is here. */
.showcase { overflow: hidden; }
.showcase-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  text-align: left;
  max-width: none;
  margin-bottom: 34px;
}
.showcase-head h2 { margin: 0; }
.showcase-controls { display: flex; gap: 10px; flex: none; }
.showcase-btn {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--white);
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease, transform var(--dur-fast) ease;
}
.showcase-btn:hover { border-color: var(--accent-lt); color: var(--accent-lt); }
.showcase-btn:active { transform: scale(0.94); }

.showcase-viewport { position: relative; }
@media (min-width: 768px) {
  .showcase-viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  }
}
/* The track is full-bleed and its first card lines up with the container left edge. */
.showcase-track {
  list-style: none;
  margin: 0;
  gap: 26px;
  padding: 10px max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))) 34px;
  scrollbar-width: none;
}
.showcase-track::-webkit-scrollbar { display: none; }
.showcase-card {
  margin: 0;
  width: clamp(290px, 29vw, 380px);
}
.showcase-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.22s var(--ease-out), border-color 0.22s ease, box-shadow 0.22s ease;
}
.showcase-link:focus-visible { outline: 3px solid var(--accent-lt); outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) {
  .showcase-link:hover { transform: translateY(-6px); border-color: var(--accent-lt); box-shadow: var(--shadow-lift); }
  .showcase-link:hover .showcase-media img { transform: scale(1.06); }
  .showcase-link:hover .text-btn { color: var(--accent-lt); }
  .showcase-link:hover .text-btn svg { transform: translateX(5px); }
}
.showcase-media { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-3); }
.showcase-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.showcase-index {
  position: absolute;
  left: 0; top: 0;
  z-index: 1;
  background: var(--ink);
  color: var(--accent-lt);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  padding: 10px 16px;
}
.showcase-body { display: flex; flex-direction: column; flex: 1; padding: 26px 26px 28px; }
.showcase-body .eyebrow { margin-bottom: 10px; }
.showcase-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.18;
  color: var(--white);
  margin: 0 0 12px;
}
.showcase-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--bone-dim);
  font-size: 16px;
  margin: 0 0 22px;
}
.showcase-body .text-btn { margin-top: auto; align-self: flex-start; }
.showcase-actions { margin-top: 10px; }
@media (max-width: 767px) {
  .showcase-head { flex-direction: column; align-items: flex-start; }
  .showcase-card { width: min(84vw, 340px); }
  .showcase-track { gap: 18px; padding-bottom: 26px; }
}

/* --------------------------------------------------------------- sequence */
/* One ordered list, two presentations. Nothing is hidden: the script only lights things. */
.seq-list { list-style: none; margin: 0; padding: 0; position: relative; }
.seq-step { margin: 0; position: relative; }
.seq-node {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid var(--rule);
  background: var(--ink);
  color: var(--bone-dim);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  transition: border-color 0.5s ease, color 0.5s ease, background-color 0.5s ease, transform 0.5s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 140ms + 200ms);
}
.seq-step.is-in .seq-node,
html:not(.js) .seq-node { border-color: var(--accent-lt); background: var(--accent); color: var(--white); }
.seq-label { margin-bottom: 10px; }
.seq-card h3 { font-size: 22px; margin-bottom: 12px; }
.seq-card p { font-size: 16px; color: var(--bone-dim); }
.seq-card ul { color: var(--bone-dim); font-size: 16px; }
.seq-rail { position: absolute; background: var(--rule); }
.seq-rail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-lt);
  transition: transform var(--dur-slow) var(--ease-out) 260ms;
}

/* flow: a horizontal stepper, nodes on one copper line */
.seq--flow .seq-list { display: grid; grid-template-columns: repeat(var(--count, 5), 1fr); gap: 30px; }
.seq--flow .seq-rail { left: 27px; right: 27px; top: 26px; height: 2px; }
.seq--flow .seq-rail::after { transform-origin: left; }
.js .seq--flow .seq-list:not(.is-lit) .seq-rail::after { transform: scaleX(0); }
.seq--flow .seq-card { margin-top: 24px; }
.seq--flow .seq-step { transition-delay: calc(var(--i, 0) * 110ms); }

/* timeline: a vertical rail, cards alternating either side */
.seq--timeline .seq-list { display: block; padding: 10px 0; }
.seq--timeline .seq-rail { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); }
.seq--timeline .seq-rail::after { transform-origin: top; }
.js .seq--timeline .seq-list:not(.is-lit) .seq-rail::after { transform: scaleY(0); }
.seq--timeline .seq-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr);
  align-items: start;
  margin-bottom: 36px;
}
.seq--timeline .seq-step:last-child { margin-bottom: 0; }
.seq--timeline .seq-node { grid-column: 2; grid-row: 1; justify-self: center; margin-top: 22px; }
.seq--timeline .seq-card { grid-row: 1; }
.seq--timeline .seq-step:nth-child(odd) .seq-card { grid-column: 1; }
.seq--timeline .seq-step:nth-child(even) .seq-card { grid-column: 3; }
.seq--timeline .seq-card {
  background: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 30px 32px 32px;
  transition: transform 0.22s var(--ease-out), border-color 0.22s ease, box-shadow 0.22s ease;
}
@media (hover: hover) and (pointer: fine) {
  .seq--timeline .seq-card:hover { transform: translateY(-4px); border-color: var(--accent-lt); box-shadow: var(--shadow-lift); }
}
.js .seq--timeline .seq-step:nth-child(odd)[data-reveal]:not(.is-in) { transform: translateX(-26px); }
.js .seq--timeline .seq-step:nth-child(even)[data-reveal]:not(.is-in) { transform: translateX(26px); }

/* below the desktop band, both become the vertical rail with the card beside it */
@media (max-width: 1180px) {
  .seq--flow .seq-list { display: block; padding: 6px 0; }
  .seq--flow .seq-rail { left: 26px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .seq--flow .seq-rail::after { transform-origin: top; }
  .js .seq--flow .seq-list:not(.is-lit) .seq-rail::after { transform: scaleY(0); }
  .seq--flow .seq-step { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 26px; align-items: start; margin-bottom: 34px; }
  .seq--flow .seq-step:last-child { margin-bottom: 0; }
  .seq--flow .seq-card { margin-top: 8px; }
}
@media (max-width: 992px) {
  .seq--timeline .seq-rail { left: 26px; transform: none; }
  .seq--timeline .seq-step { grid-template-columns: 54px minmax(0, 1fr); gap: 22px; }
  .seq--timeline .seq-node { grid-column: 1; margin-top: 18px; }
  .seq--timeline .seq-step:nth-child(odd) .seq-card,
  .seq--timeline .seq-step:nth-child(even) .seq-card { grid-column: 2; }
  .seq--timeline .seq-card { padding: 24px 22px 26px; }
  .js .seq--timeline .seq-step[data-reveal]:not(.is-in) { transform: translateY(26px); }
}

/* -------------------------------------------------------------------- band */
.band { height: clamp(300px, 46vw, 560px); }
.band-media { position: absolute; inset: -14% 0; will-change: transform; }
.band-media img { width: 100%; height: 100%; object-fit: cover; }
.band-label {
  position: absolute;
  left: 0; right: 0;
  bottom: 30px;
  z-index: 1;
  margin: 0;
  padding: 0 max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
}
.band-label span {
  display: inline-block;
  background: rgba(20, 23, 21, 0.78);
  backdrop-filter: blur(6px);
  color: var(--bone);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 11px 16px;
  border-left: 3px solid var(--accent-lt);
}

/* --------------------------------------------------------------------- faq */
.faq-section .section-head { margin-bottom: 36px; }
.faq {
  max-width: 860px;
  margin-inline: auto;
  border-top: 1px solid var(--rule);
}
.faq summary { padding: 24px 0; }
.faq details[open] > summary { color: var(--accent-lt); }
.faq .faq-answer { padding: 0; overflow: hidden; }
.faq-answer-in { padding: 0 40px 30px 0; max-width: 68ch; }
.faq-answer-in > :first-child { margin-top: 0; }
.faq-answer-in > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- cells */
.info-grid { border-top: 0; padding-top: 0; gap: 22px; }
.info-cell {
  background: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 28px 26px;
  transition-delay: calc(var(--i, 0) * 90ms);
}
.info-cell p:last-child { margin-bottom: 0; }
.info-cell p { font-size: 16px; }

/* ------------------------------------------------------------------ find us */
.findus-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 60px; align-items: center; }
.findus .address-line { text-align: left; font-size: clamp(34px, 5vw, 64px); margin: 6px 0 4px; }
.findus .address-sub { text-align: left; margin-bottom: 20px; }
.findus .address-why { margin: 0 0 30px; max-width: 52ch; }
.findus .hero-actions { justify-content: flex-start; }
.findus .map iframe { height: clamp(340px, 36vw, 480px); }
@media (max-width: 992px) {
  .findus-grid { grid-template-columns: 1fr; gap: 34px; }
}
.map-link { margin: 14px 0 0; }
.map-link .text-btn { font-size: 15px; }
.footer-map .map iframe { height: 300px; }
.map { transition: border-color 0.25s ease; }
.map:hover { border-color: var(--accent-lt); }

/* ------------------------------------------------------------------ reveal */
.js [data-reveal] {
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-reveal-weight]:not(.is-in) { transform: translateY(36px) scale(0.985); }

/* --------------------------------------------------------------- reduced */
@media (prefers-reduced-motion: reduce) {
  .js [data-hero-entrance] .hero-beat,
  .js [data-hero-entrance] .hero-media img { animation: none; }
  .seq-rail::after { transform: none !important; }
  .seq-node { border-color: var(--accent-lt); background: var(--accent); color: var(--white); }
  .split-head h2::after { transform: none !important; }
  .band-media { transform: none !important; }
}

/* The legal page head is a heading and a standfirst, not a hero: it takes the height its content
   needs and no more, so nothing sits above a void. */
.page-head { min-height: 0; padding: var(--s-md) 0 var(--s-sm); align-items: flex-start; }

/* ----------------------------------------------------------- section rhythm
   Two stacked sections were each bringing a full 110px of padding to the same seam, so the page
   opened a 220px void between one idea and the next (visible above the services showcase). A
   section that follows another now brings none: the seam is one measure of space, not two. A band
   or a hero between sections has no padding of its own, so their neighbours keep theirs. */
.section + .section { padding-top: 0; }
.section + .section--tight { padding-top: 0; }

/* ------------------------------------------------------ interior heroes, centred
   Operator direction 2026-09-05: every hero except the homepage is centred. The homepage keeps its
   two-column composition because the lead form lives beside the copy; an interior page has one
   statement and it sits in the middle, over a scrim that is heaviest where the type is. */
.hero:not(.hero--home) .hero-inner { justify-items: center; text-align: center; }
.hero:not(.hero--home) .hero-copy { margin: 0 auto; max-width: 880px; }
.hero:not(.hero--home) h1 { margin-inline: auto; max-width: 18ch; }
.hero:not(.hero--home) .hero-standfirst { margin-inline: auto; }
.hero:not(.hero--home) .hero-actions { justify-content: center; }
.hero:not(.hero--home) .crumbs ol { justify-content: center; }
.hero:not(.hero--home) .crumbs li:last-child { flex: 0 1 auto; }
.hero:not(.hero--home) .hero-media::after {
  background:
    linear-gradient(90deg, rgba(20, 23, 21, 0.5) 0%, rgba(20, 23, 21, 0.82) 50%, rgba(20, 23, 21, 0.5) 100%),
    linear-gradient(180deg, rgba(20, 23, 21, 0.35) 0%, rgba(20, 23, 21, 0.1) 45%, rgba(20, 23, 21, 0.94) 100%);
}
.page-head { text-align: center; }
.page-head .measure { margin-inline: auto; }
.page-head .hero-actions { justify-content: center; }
@media (max-width: 767px) {
  .hero:not(.hero--home) .hero-actions { align-items: stretch; }
}