/* ==========================================================================
   Lettieri Renovations v2 :: Components
   Every block below is BEM-named so /forge-html-convert can map each one to a
   Bricks global class 1:1. No element-id selectors, no utility soup.
   ========================================================================== */

/* --------------------------------------------------------------- 0. Reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* Drawer hygiene. Treated as a seatbelt, not a fix: every chrome change is
     re-measured with scrollWidth vs clientWidth, because this hides overflow
     rather than solving it. */
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--lr-base);
  color: var(--lr-text);
  font-family: var(--lr-font-body);
  font-size: var(--lr-text-m);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img, picture, video { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--lr-font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
/* figure carries a browser default of margin:1em 40px. Left unreset it pushed
   every gallery cell 40px off the shared left edge and blew 26px of horizontal
   overflow at 375px. Invisible by eye, caught by measurement. */
figure, figcaption { margin: 0; }

:focus-visible {
  outline: 3px solid var(--lr-gold);
  outline-offset: 3px;
}

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

/* ----------------------------------------------------------- 1. Container */
/* ONE container, ONE gutter. No component may define its own page-edge
   padding: that is exactly what caused the Ironwood 14px stagger. */
.container {
  width: 100%;
  max-width: var(--lr-container);
  margin-inline: auto;
  padding-inline: var(--lr-gutter);
}
/* Never make .container itself a flex parent. It relies on margin:auto to
   centre, and flex would shrink it to content width. Flex the child instead. */
.container__row { display: flex; width: 100%; }

.section { padding-block: var(--lr-section-y); }
.section--tight { padding-block: calc(var(--lr-section-y) * 0.62); }
/* A very slight lift at the top edge instead of a dead flat fill. Large ink
   areas read as a printing error when they are perfectly uniform. */
.section--ink {
  background:
    radial-gradient(130% 85% at 50% 0%, #201b19 0%, var(--lr-ink) 62%);
  color: var(--lr-text-light);
}
.section--cream { background: var(--lr-cream); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--lr-ink); color: #fff; padding: 0.75rem 1.25rem;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------ 2. Eyebrows */
.eyebrow {
  font-family: var(--lr-font-body);
  font-size: var(--lr-text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lr-gold);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 var(--lr-space-s);
  white-space: nowrap; /* one line on desktop, see the narrow-screen release */
}
/* Release the nowrap on narrow screens. Inside a grid item (min-width:auto by
   default) a nowrap string sets a min-content floor, so a long eyebrow forces
   the whole column wider than the viewport. A wrapped eyebrow beats a page
   that scrolls sideways. */
@media (max-width: 620px) {
  .eyebrow { white-space: normal; }
}
.eyebrow::before {
  content: ""; width: 28px; height: 2px; background: var(--lr-gold); flex: none;
}
.eyebrow--plain::before { display: none; }

.section__title {
  font-size: var(--lr-text-3xl);
  max-width: 20ch;
  margin-bottom: var(--lr-space-m);
}
.section__title em { font-style: italic; color: var(--lr-gold); }
.section__lede {
  font-size: var(--lr-text-l);
  color: var(--lr-text-muted);
  max-width: 62ch;
  line-height: 1.6;
}
.section--ink .section__lede { color: var(--lr-text-light-mut); }

/* ------------------------------------------------------------- 3. Buttons */
/* Chunky, uppercase, real shadow, hover lift. The secondary is solid white,
   not a low-contrast ghost, so it survives a busy photo hero. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1.05rem 1.9rem;
  font-family: var(--lr-font-body);
  font-size: var(--lr-text-s);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--lr-radius-s);
  cursor: pointer;
  transition: transform 0.22s var(--lr-ease), box-shadow 0.22s var(--lr-ease),
              background-color 0.22s var(--lr-ease), color 0.22s var(--lr-ease);
}
.btn:hover { transform: translateY(-2px); }

.btn--primary {
  background: var(--lr-primary);
  color: #fff;
  box-shadow: 0 6px 18px rgba(200, 16, 46, 0.34);
}
.btn--primary:hover {
  background: var(--lr-primary-hover);
  box-shadow: 0 12px 28px rgba(200, 16, 46, 0.42);
}

.btn--light {
  background: #fff;
  color: var(--lr-ink);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
}
.btn--light:hover { background: var(--lr-cream); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3); }

.btn--ink { background: var(--lr-ink); color: #fff; box-shadow: var(--lr-shadow-m); }
.btn--ink:hover { background: var(--lr-ink-soft); }

.btn--outline-ink {
  background: transparent; color: var(--lr-ink); border-color: var(--lr-ink);
}
.btn--outline-ink:hover { background: var(--lr-ink); color: #fff; }

.btn--gold { background: var(--lr-gold); color: var(--lr-ink); box-shadow: 0 6px 18px rgba(176,129,63,0.34); }
.btn--gold:hover { background: var(--lr-gold-light); }

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

/* --------------------------------------------------- 4. Utility + header */
.utility-bar {
  background: var(--lr-ink);
  color: var(--lr-text-light-mut);
  font-size: var(--lr-text-xs);
  border-bottom: 1px solid var(--lr-ink-line);
  position: relative;
  z-index: 60;
}
.utility-bar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lr-space-m);
  min-height: 40px;
  white-space: nowrap; /* single line, always */
}
.utility-bar__group { display: flex; align-items: center; gap: var(--lr-space-m); }
.utility-bar__item {
  display: inline-flex; align-items: center; gap: 0.45rem;
  text-decoration: none; color: inherit;
}
.utility-bar__item:hover { color: #fff; }
.utility-bar__item svg { width: 14px; height: 14px; flex: none; opacity: 0.7; stroke-width: 2.3; }
.utility-bar__phone { color: #fff; font-weight: 600; letter-spacing: 0.02em; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--lr-ink);
  border-bottom: 1px solid var(--lr-ink-line);
  transition: box-shadow 0.3s var(--lr-ease), background-color 0.3s var(--lr-ease);
}
/* Once it detaches from the utility bar it needs to read as a floating layer,
   not a stripe that happens to be stuck to the top. */
.site-header.is-stuck {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  background: rgba(20, 17, 16, 0.97);
  backdrop-filter: blur(10px);
}
.site-header.is-stuck .site-header__row { min-height: calc(var(--lr-header-h) - 14px); }
.site-header.is-stuck .site-header__brand img { height: 36px; }
.site-header__row, .site-header__brand img {
  transition: min-height 0.3s var(--lr-ease), height 0.3s var(--lr-ease);
}
.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lr-space-m);
  min-height: var(--lr-header-h);
}
.site-header__brand { display: flex; align-items: center; flex: none; }
.site-header__brand img { height: 42px; width: auto; }

.site-header__nav { display: flex; align-items: center; gap: var(--lr-space-m); }
.site-header__actions { display: flex; align-items: center; gap: var(--lr-space-s); flex: none; }
.site-header__actions .btn { padding: 0.8rem 1.35rem; }
.site-header__tel {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: #fff; text-decoration: none; font-weight: 700;
  font-size: var(--lr-text-s); letter-spacing: 0.02em; white-space: nowrap;
}
.site-header__tel:hover { color: var(--lr-gold); }
/* Sized in CSS, not via an inline style, so generated pages match the hand
   written homepage. */
.site-header__tel svg { width: 16px; height: 16px; flex: none; stroke-width: 2; }

/* Desktop nav with service dropdown */
.nav { display: flex; align-items: center; gap: var(--lr-space-m); }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  color: var(--lr-text-light); text-decoration: none;
  font-size: var(--lr-text-s); font-weight: 500; letter-spacing: 0.01em;
  padding: 0.5rem 0; white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.2s var(--lr-ease), border-color 0.2s var(--lr-ease);
}
.nav__link:hover, .nav__item:hover > .nav__link { color: #fff; border-bottom-color: var(--lr-gold); }
.nav__link svg { width: 10px; height: 10px; stroke-width: 3.2; transition: transform 0.2s var(--lr-ease); }
.nav__item:hover .nav__link svg { transform: rotate(180deg); }

/* Dropdown: ink panel rather than a white card, so it reads as an extension of
   the header instead of a popup pasted over it. Left-aligned to the trigger,
   which is where the eye already is. */
.nav__dropdown {
  position: absolute; top: calc(100% + 10px); left: -1.1rem;
  min-width: 460px;
  background: var(--lr-ink-soft);
  border: 1px solid var(--lr-ink-line);
  border-top: 2px solid var(--lr-gold);
  border-radius: var(--lr-radius-m);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
  padding: 0.6rem 0.6rem 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.2s var(--lr-ease), transform 0.22s var(--lr-ease), visibility 0.22s;
}
/* Bridges the 10px gap so the pointer can travel from trigger to panel without
   the panel closing underneath it. */
.nav__item::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px;
}
.nav__item:hover .nav__dropdown,
.nav__item:focus-within .nav__dropdown {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.nav__dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.nav__dropdown a {
  display: block; padding: 0.7rem 0.85rem;
  text-decoration: none; border-radius: var(--lr-radius-s);
  border-left: 2px solid transparent;
  transition: background-color 0.18s var(--lr-ease), border-color 0.18s var(--lr-ease);
}
.nav__dropdown a:hover { background: rgba(255,255,255,0.055); border-left-color: var(--lr-gold); }
.nav__dd-t {
  display: block; color: #fff; font-size: var(--lr-text-s); font-weight: 600;
  letter-spacing: 0.005em; margin-bottom: 1px;
}
.nav__dd-d {
  display: block; color: var(--lr-text-light-mut); font-size: var(--lr-text-xs);
  line-height: 1.45;
}
.nav__dropdown a:hover .nav__dd-t { color: var(--lr-gold-light); }
.nav__dd-foot {
  display: flex !important; align-items: center; justify-content: space-between;
  margin-top: 0.5rem; padding: 0.75rem 0.85rem !important;
  border-top: 1px solid var(--lr-ink-line);
  border-radius: 0 0 var(--lr-radius-m) var(--lr-radius-m) !important;
  border-left: 0 !important;
  color: var(--lr-gold); font-size: var(--lr-text-xs); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.nav__dd-foot svg { width: 15px; height: 15px; stroke-width: 2.2; }
.nav__dd-foot:hover { background: rgba(255,255,255,0.055) !important; color: var(--lr-gold-light); }

/* Current page/section, so the nav is never ambiguous about where you are. */
.nav__link[aria-current="page"] { color: #fff; border-bottom-color: var(--lr-gold); }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px; flex: none;
  background: transparent; border: 0; cursor: pointer;
}
.nav-toggle__bar {
  display: block; height: 2px; width: 100%; background: #fff; border-radius: 2px;
  transition: transform 0.28s var(--lr-ease), opacity 0.2s var(--lr-ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1080px) {
  .site-header__nav, .site-header__actions .btn { display: none; }
  .nav-toggle { display: flex; }
  .site-header__brand img { height: 34px; }
}
@media (max-width: 560px) {
  .utility-bar__group--secondary { display: none; }
  .utility-bar { font-size: 0.6875rem; }
}

/* ------------------------------------------------- 5. Mobile flyout drawer */
.drawer-scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(20, 17, 16, 0.6);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s var(--lr-ease), visibility 0.3s;
}
.drawer-scrim.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 95;
  width: min(400px, 100%);
  background: var(--lr-ink); color: #fff;
  display: flex; flex-direction: column;
  transform: translateX(102%);
  /* visibility:hidden stops the parked drawer showing up as a phantom right
     column in Playwright full-page captures, and closes the a11y hole. */
  visibility: hidden;
  transition: transform 0.34s var(--lr-ease), visibility 0s linear 0.34s;
}
.drawer.is-open { transform: translateX(0); visibility: visible; transition-delay: 0s; }

.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--lr-space-s) var(--lr-space-m);
  border-bottom: 1px solid var(--lr-ink-line); flex: none;
}
.drawer__head img { height: 30px; width: auto; }
.drawer__close {
  width: 42px; height: 42px; border: 1px solid var(--lr-ink-line);
  border-radius: var(--lr-radius-s); background: transparent; color: #fff;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.drawer__close:hover { background: var(--lr-ink-soft); }

.drawer__body { flex: 1 1 auto; overflow-y: auto; padding: var(--lr-space-s) 0; }

.drawer__link, .drawer__acc-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: var(--lr-space-s);
  padding: 0.95rem var(--lr-space-m);
  font-family: var(--lr-font-body); font-size: var(--lr-text-l); font-weight: 500;
  color: #fff; text-decoration: none; text-align: left;
  background: transparent; border: 0; border-bottom: 1px solid var(--lr-ink-line);
  cursor: pointer;
}
.drawer__acc-btn svg { width: 14px; height: 14px; stroke-width: 2.3; transition: transform 0.26s var(--lr-ease); flex: none; }
.drawer__acc-btn[aria-expanded="true"] { color: var(--lr-gold); }
.drawer__acc-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.drawer__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--lr-ease);
  background: rgba(255, 255, 255, 0.03);
}
.drawer__panel.is-open { grid-template-rows: 1fr; }
.drawer__panel-inner { overflow: hidden; }
.drawer__panel a {
  display: block; position: relative;
  padding: 0.68rem var(--lr-space-m) 0.68rem calc(var(--lr-space-m) + 1.15rem);
  color: var(--lr-text-light); text-decoration: none; font-size: var(--lr-text-m);
}
/* A rail rather than bare indentation, so the child level is legible at a
   glance instead of relying on whitespace alone. */
.drawer__panel a::before {
  content: ""; position: absolute; left: var(--lr-space-m); top: 50%;
  width: 6px; height: 1px; background: var(--lr-gold); opacity: 0.55;
  transform: translateY(-50%); transition: width 0.2s var(--lr-ease), opacity 0.2s var(--lr-ease);
}
.drawer__panel a:hover { color: #fff; }
.drawer__panel a:hover::before { width: 12px; opacity: 1; }

.drawer__foot {
  flex: none; padding: var(--lr-space-m);
  border-top: 1px solid var(--lr-ink-line);
  display: grid; gap: var(--lr-space-s);
  background: var(--lr-ink-soft);
}
.drawer__call {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  font-family: var(--lr-font-display); font-size: var(--lr-text-xl);
  color: #fff; text-decoration: none; letter-spacing: 0.01em;
}
.drawer__call:hover { color: var(--lr-gold); }
.drawer__call svg { width: 20px; height: 20px; flex: none; stroke-width: 1.7; }
.drawer__hours { text-align: center; font-size: var(--lr-text-s); color: var(--lr-text-light-mut); }
.drawer__social { display: flex; justify-content: center; gap: var(--lr-space-s); }
.drawer__social a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--lr-ink-line); border-radius: 50%; color: #fff;
}
.drawer__social a:hover { background: var(--lr-primary); border-color: var(--lr-primary); }
.drawer__social svg { width: 17px; height: 17px; stroke-width: 1.9; }

body.is-locked { overflow: hidden; }

/* ---------------------------------------------------------------- 6. Hero */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--lr-ink);
  min-height: clamp(560px, 78vh, 800px);
  display: flex;
  align-items: center;
  padding-block: var(--lr-space-2xl);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media, .hero__media picture { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
/* Graduated scrim: photo reads through on the right, copy stays legible left.
   Blended, not a hard split. */
/* Lighter through the right half than the first cut. The whole thesis is real
   project photography, so the photo has to actually read, not sit under a slab
   of ink. Copy side stays dense enough for AA contrast. */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(20,17,16,0.92) 0%,
      rgba(20,17,16,0.80) 28%,
      rgba(20,17,16,0.46) 52%,
      rgba(20,17,16,0.12) 74%,
      rgba(20,17,16,0.06) 100%),
    linear-gradient(to top, rgba(20,17,16,0.45) 0%, rgba(20,17,16,0) 38%);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
  width: 100%;
}
/* Monogram, not the full wordmark. The lockup already sits in the sticky header
   directly above, so repeating it read as a duplicate rather than as ornament. */
.hero__mark {
  height: 54px; width: auto; margin-bottom: var(--lr-space-m);
  opacity: 0.92;
  /* The mobile hero column is a flex container, and a stretched flex item with
     a fixed height smears a fixed-ratio mark. Opt this one out. */
  align-self: flex-start;
  flex: none;
}

/* Small keyword H1, big persuasive H2. */
.hero__kicker {
  font-family: var(--lr-font-body);
  font-size: var(--lr-text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* Lighter gold plus a shadow. Brand gold over pale shiplap in the mobile
     crop was close to invisible. */
  color: var(--lr-gold-light);
  text-shadow: 0 1px 10px rgba(20, 17, 16, 0.85);
  margin: 0 0 var(--lr-space-s);
  white-space: nowrap;
}
/* The big persuasive line is a <p>, so the h1..h4 display-font rule misses it.
   Set the display font explicitly or it ships in the body sans. */
.hero__title {
  font-family: var(--lr-font-display);
  font-weight: 300;
  /* One step down from 4xl. At 4xl this wrapped to three uneven lines and
     pushed the CTAs to the fold edge. */
  font-size: clamp(2.5rem, 1.9rem + 2.9vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: #fff;
  margin: 0 0 var(--lr-space-m);
  max-width: 17ch;
  text-shadow: 0 2px 24px rgba(20, 17, 16, 0.5);
  text-wrap: balance;
}
.hero__title em { font-style: italic; color: var(--lr-gold); }
.hero__lede {
  font-size: var(--lr-text-l);
  color: var(--lr-text-light);
  max-width: 44ch;
  margin-bottom: var(--lr-space-l);
  text-shadow: 0 1px 14px rgba(20, 17, 16, 0.5);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--lr-space-s); }

/* Real proof above the fold. Every value here is verifiable: the Google rating
   is Marc's actual profile, the licence is on record. */
.hero__proof {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--lr-space-s) var(--lr-space-m);
  margin-top: var(--lr-space-l);
  padding-top: var(--lr-space-m);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: var(--lr-text-s);
  color: var(--lr-text-light-mut);
}
.hero__proof li { display: inline-flex; align-items: center; gap: 0.45rem; }
.hero__proof li + li::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--lr-gold); margin-right: 0.55rem; flex: none;
}
.hero__proof svg { width: 16px; height: 16px; flex: none; }  /* Google mark is fill, no stroke */
.hero__proof b { color: #fff; font-family: var(--lr-font-display); font-size: var(--lr-text-l); line-height: 1; }
.hero__proof-stars { color: #E8A825; letter-spacing: 0.04em; }

/* ------------------------------------------------- 7. Hero walk-through form */
/* Deliberately slim. A boxy lead-gen block would cheapen the premium register,
   so this is a quiet card: three fields, one action. */
.quote-card {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(6px);
  border-radius: var(--lr-radius-m);
  box-shadow: var(--lr-shadow-l);
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
  border-top: 4px solid var(--lr-primary);
}
.quote-card__title {
  font-family: var(--lr-font-display);
  font-size: var(--lr-text-xl);
  margin-bottom: 0.35rem;
}
.quote-card__note {
  font-size: var(--lr-text-s); color: var(--lr-text-muted);
  margin-bottom: var(--lr-space-m);
}
.quote-card__field { margin-bottom: var(--lr-space-s); }
.quote-card__label {
  display: block; font-size: var(--lr-text-xs); font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--lr-text-muted); margin-bottom: 0.35rem;
}
.quote-card__select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B625C' stroke-width='3'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 12px;
  padding-right: 2.4rem !important;
}
.quote-card__input, .quote-card__select {
  width: 100%; padding: 0.82rem 0.9rem;
  font-family: var(--lr-font-body); font-size: var(--lr-text-m);
  color: var(--lr-text); background: #fff;
  border: 1px solid var(--lr-border); border-radius: var(--lr-radius-s);
  transition: border-color 0.2s var(--lr-ease), box-shadow 0.2s var(--lr-ease);
}
.quote-card__input:focus, .quote-card__select:focus {
  outline: none; border-color: var(--lr-primary);
  box-shadow: 0 0 0 3px var(--lr-crimson-tint);
}
.quote-card__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lr-space-s); }
.quote-card__fine {
  font-size: var(--lr-text-xs); color: var(--lr-text-muted);
  text-align: center; margin-top: var(--lr-space-s); line-height: 1.5;
}

@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--lr-space-xl); }
  .hero__title { max-width: 18ch; }
  .hero__media img { object-position: 68% 50%; }
}

/* ---- Mobile hero: photo-led, not text-led ----
   The first cut stacked monogram + kicker + 3-line headline + 6-line lede +
   two full-width slabs, which filled the screen with words and left the
   photograph invisible. The whole build argues from real project photography,
   so on the device most people use, the photograph has to be the first thing
   they see. Copy is anchored to the lower half over a vertical scrim, which is
   also how the modeled comp handles portrait. */
@media (max-width: 860px) {
  .hero {
    min-height: 0;
    align-items: stretch;
    padding-block: 0 var(--lr-space-xl);
  }
  /* Pin the photo to the first screen instead of the whole hero box. The hero
     also contains the form on mobile, so a full-height media box is ~1300px
     tall and `cover` crops the portrait shot to a narrow vertical strip, which
     is why the Y offset had no visible effect. Below this the hero's own ink
     background carries the form. */
  .hero__media, .hero__media picture, .hero__scrim {
    inset: 0 0 auto 0;
    height: 88svh;
  }
  .hero__media img { object-position: 50% 45%; }
  /* Gradient stops in viewport units, not percentages. The hero box also
     contains the form on mobile, so percentage stops put the dark end far below
     where the copy actually sits and left the proof row unreadable over a
     bright window. Absolute stops pin the ramp to the fold instead. */
  .hero__scrim {
    background:
      linear-gradient(to bottom,
        rgba(20,17,16,0.58) 0,
        rgba(20,17,16,0.14) 20svh,
        rgba(20,17,16,0.58) 44svh,
        rgba(20,17,16,0.88) 66svh,
        rgba(20,17,16,0.97) 82svh,
        rgba(20,17,16,0.98) 100%);
  }
  .hero__grid { gap: var(--lr-space-l); }
  /* Reserve the first screen for photo + copy, and push the copy to the bottom
     of it so the photograph owns the top. The form flows below the fold. */
  .hero__grid > div:first-child {
    min-height: 78svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: var(--lr-space-2xl);
  }
  .hero__mark { height: 42px; margin-bottom: var(--lr-space-s); }
  .hero__title { font-size: clamp(2.1rem, 8.4vw, 2.9rem); max-width: 16ch; }
  /* Second sentence is desktop only. It is useful context, not a first-screen
     necessity, and it cost four lines on a phone. */
  .hero__lede-more { display: none; }
  .hero__lede { font-size: var(--lr-text-m); max-width: 38ch; margin-bottom: var(--lr-space-m); }

  /* One decisive action, not two identical slabs. The secondary becomes a
     quiet underlined link, and the sticky bar already carries call + projects. */
  .hero__actions { gap: var(--lr-space-xs); align-items: center; }
  .hero__actions .btn--primary { width: 100%; }
  .hero__actions-alt {
    background: transparent; box-shadow: none; color: #fff;
    padding: 0.75rem 0; width: auto;
    border-bottom: 1px solid rgba(255,255,255,0.45); border-radius: 0;
  }
  .hero__actions-alt:hover { background: transparent; color: var(--lr-gold); border-bottom-color: var(--lr-gold); }

  .hero__proof {
    margin-top: var(--lr-space-m); padding-top: var(--lr-space-s);
    gap: 0.35rem var(--lr-space-s); font-size: var(--lr-text-xs);
  }
  .hero__proof b { font-size: var(--lr-text-m); }
  /* Third item is the least load-bearing of the three, and dropping it keeps
     the row on one line at 375px. */
  .hero__proof li:nth-child(3) { display: none; }
}

@media (max-width: 560px) {
  .quote-card__row { grid-template-columns: 1fr; }
  /* Full-width buttons wrapped their label at 375px. Tighten the tracking and
     padding rather than shortening copy that is already the right ask. */
  .btn--block, .hero__actions .btn--primary {
    letter-spacing: 0.05em; padding-inline: 1rem; font-size: 0.8125rem;
  }
}

/* ----------------------------------------------------------- 8. Proof bar */
.proof-bar { background: var(--lr-cream); border-bottom: 1px solid var(--lr-border); }
.proof-bar__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--lr-space-m);
  padding-block: var(--lr-space-m);
}
.proof-bar__item {
  display: flex; align-items: center; gap: 0.8rem;
  padding-inline: var(--lr-space-s);
  border-left: 1px solid var(--lr-border);
}
.proof-bar__item:first-child { border-left: 0; }
.proof-bar__icon { width: 26px; height: 26px; color: var(--lr-gold); flex: none; stroke-width: 1.3; }
.proof-bar__k {
  font-family: var(--lr-font-display); font-size: var(--lr-text-l);
  line-height: 1.1; display: block;
}
.proof-bar__v {
  font-size: var(--lr-text-xs); color: var(--lr-text-muted);
  letter-spacing: 0.05em; text-transform: uppercase;
}
.proof-bar__stars { color: var(--lr-gold); letter-spacing: 0.08em; font-size: var(--lr-text-s); }

@media (max-width: 900px) {
  /* 4 items in a 2-col grid is fine (even). Never leaves a stranded row. */
  .proof-bar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lr-space-s); }
  .proof-bar__item:nth-child(odd) { border-left: 0; }
}
/* Stay 2x2 at 375px rather than collapsing to four stacked rows. Four items in
   two columns is even, so nothing is orphaned, and it reads as a badge block
   instead of a list. */
@media (max-width: 480px) {
  .proof-bar__grid { gap: var(--lr-space-s) var(--lr-space-xs); }
  .proof-bar__item { padding-inline: 0; gap: 0.55rem; }
  .proof-bar__icon { width: 20px; height: 20px; stroke-width: 1.7; }
  .proof-bar__k { font-size: var(--lr-text-m); }
  .proof-bar__v { font-size: 0.6875rem; letter-spacing: 0.03em; }
}

/* ------------------------------------------------- 9. Service colour blocks */
/* stately's signature move: alternating full-bleed colour bands, photo on one
   side, scope on the other. */
.service-block { overflow: hidden; }
.service-block__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}
.service-block--flip .service-block__media { order: 2; }
.service-block__media {
  border-radius: var(--lr-radius-m);
  overflow: hidden;
  box-shadow: var(--lr-shadow-m);
  /* Square, not 4/3. Marc's library is mostly portrait phone photos, and a
     landscape box crops them to the door frame. Square suits both. */
  aspect-ratio: 1 / 1;
}
.service-block__media img { width: 100%; height: 100%; object-fit: cover; }
.service-block__title { font-size: var(--lr-text-2xl); margin-bottom: var(--lr-space-s); }
.service-block__body { font-size: var(--lr-text-l); line-height: 1.62; margin-bottom: var(--lr-space-m); }
.service-block__list { display: grid; gap: 0.55rem; margin-bottom: var(--lr-space-l); }
.service-block__list li {
  display: flex; align-items: flex-start; gap: 0.65rem;
  font-size: var(--lr-text-m);
}
.service-block__list svg { width: 18px; height: 18px; flex: none; margin-top: 0.28rem; stroke-width: 2.2; }

.service-block--ink { background: var(--lr-ink); color: var(--lr-text-light); }
.service-block--ink .service-block__title { color: #fff; }
.service-block--ink .service-block__list svg { color: var(--lr-gold); }

.service-block--gold { background: var(--lr-gold); color: #2A1F0C; }
.service-block--gold .service-block__title { color: var(--lr-ink); }
.service-block--gold .service-block__list svg { color: var(--lr-ink); }

.service-block--cream { background: var(--lr-cream); }
.service-block--cream .service-block__list svg { color: var(--lr-primary); }

.service-block--white .service-block__list svg { color: var(--lr-primary); }

@media (max-width: 860px) {
  .service-block__grid { grid-template-columns: 1fr; gap: var(--lr-space-m); }
  .service-block--flip .service-block__media { order: 0; }
  /* Shorter than 3/2. Four blocks running the same photo-then-copy rhythm made
     the mid page feel long on a phone; a shallower image moves you through it. */
  .service-block__media { aspect-ratio: 16 / 10; }
  .service-block__body { font-size: var(--lr-text-m); margin-bottom: var(--lr-space-s); }
  .service-block__list { gap: 0.4rem; margin-bottom: var(--lr-space-m); }
  .service-block__list li { font-size: var(--lr-text-s); }
  .service-block .btn { width: 100%; }
}

/* ------------------------------------------------------------- 10. Gallery */
.work__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--lr-space-m); margin-bottom: var(--lr-space-xl); flex-wrap: wrap;
}
.work__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--lr-space-s);
}
.work__cell { position: relative; overflow: hidden; border-radius: var(--lr-radius-m); }
.work__cell img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--lr-ease);
}
.work__cell:hover img { transform: scale(1.045); }
.work__cell::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0);
  transition: box-shadow 0.35s var(--lr-ease);
}
.work__cell:hover::after { box-shadow: inset 0 0 0 2px var(--lr-gold); }
/* Row 1 is two cells of different widths. Give them an explicit shared height
   instead of a shared aspect-ratio, or the wider cell ends up taller and the
   row bottoms do not line up. */
.work__cell--wide { grid-column: span 7; height: clamp(300px, 32vw, 440px); }
.work__cell--tall { grid-column: span 5; height: clamp(300px, 32vw, 440px); }
.work__cell--third { grid-column: span 4; aspect-ratio: 4 / 3; }
.work__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--lr-space-m);
  background: linear-gradient(to top, rgba(20,17,16,0.86), rgba(20,17,16,0));
  color: #fff;
}
.work__caption strong {
  display: block; font-family: var(--lr-font-display); font-weight: 400;
  font-size: var(--lr-text-l);
}
.work__caption span { font-size: var(--lr-text-s); color: rgba(255,255,255,0.74); }

@media (max-width: 860px) {
  .work__grid { grid-template-columns: repeat(2, 1fr); }
  .work__cell--wide, .work__cell--tall, .work__cell--third {
    grid-column: span 1; aspect-ratio: 4 / 3; height: auto;
  }
  /* 5 cells in 2 cols would strand the 5th. Make it span the full width. */
  .work__cell:last-child:nth-child(odd) { grid-column: span 2; aspect-ratio: 16 / 9; }
}


/* ------------------------------------------------------- 11. Pull quote */
/* One large editorial moment, built from a real Google review. Verbatim, so it
   carries weight the marketing copy around it cannot. */
.pullquote {
  background: var(--lr-cream);
  padding-block: clamp(3.5rem, 7vw, 7rem);
  border-block: 1px solid var(--lr-border);
}
/* rem, not ch. A ch max-width here resolves against the figure's own inherited
   body size, not the display size on the blockquote, which collapsed the quote
   to a 236px column. */
.pullquote__fig { max-width: 54rem; margin-inline: auto; text-align: center; }
.pullquote__q {
  margin: 0;
  font-family: var(--lr-font-display);
  font-weight: 300;
  font-size: clamp(1.9rem, 1.1rem + 3.6vw, 3.5rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--lr-ink);
  text-wrap: balance;
}
.pullquote__q::before { content: "\201C"; }
.pullquote__q::after  { content: "\201D"; }
.pullquote__q em { font-style: italic; color: var(--lr-gold); }
.pullquote__cite {
  margin-top: var(--lr-space-m);
  font-size: var(--lr-text-s);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lr-text-muted);
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  flex-wrap: wrap;
}
.pullquote__stars { color: #E8A825; letter-spacing: 0.06em; }
@media (max-width: 620px) { .pullquote__fig { max-width: 22rem; } }

/* -------------------------------------------------------- 12. Standards */
.standards__head { max-width: 62ch; margin-bottom: var(--lr-space-2xl); }
.standards__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--lr-border-dark);
  counter-reset: std;
}
.standards__item {
  display: flex; align-items: baseline; gap: var(--lr-space-m);
  padding: var(--lr-space-m) var(--lr-space-l) var(--lr-space-m) 0;
  border-bottom: 1px solid var(--lr-border-dark);
}
/* Right column needs its own left rule so the two columns read as one table. */
.standards__item:nth-child(even) {
  padding-left: var(--lr-space-l);
  border-left: 1px solid var(--lr-border-dark);
}
.standards__n {
  font-family: var(--lr-font-display);
  font-size: var(--lr-text-l);
  color: var(--lr-gold);
  flex: none;
  min-width: 2.2ch;
}
.standards__item p {
  font-size: var(--lr-text-l);
  line-height: 1.45;
  color: #fff;
  text-wrap: pretty;
}
.standards__foot {
  margin-top: var(--lr-space-l);
  font-size: var(--lr-text-s);
  color: var(--lr-text-light-mut);
  max-width: 60ch;
}
@media (max-width: 780px) {
  .standards__list { grid-template-columns: 1fr; }
  .standards__item, .standards__item:nth-child(even) {
    padding: var(--lr-space-s) 0; border-left: 0;
  }
  .standards__item p { font-size: var(--lr-text-m); }
  .standards__head { margin-bottom: var(--lr-space-l); }
}

/* ----------------------------------------------------- 13. Detail strip */
.detail__head { margin-bottom: var(--lr-space-l); }
.detail__strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--lr-space-s);
}
.detail__strip li { display: flex; flex-direction: column; gap: 0.6rem; }
.detail__strip img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--lr-radius-m);
}
.detail__strip span {
  font-size: var(--lr-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lr-text-muted);
}
@media (max-width: 780px) {
  .detail__strip {
    grid-auto-flow: column;
    grid-auto-columns: 58%;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Must equal the gutter, or snap pulls the first card off the shared edge. */
    scroll-padding-inline-start: var(--lr-gutter);
    padding-inline: var(--lr-gutter);
    margin-inline: calc(var(--lr-gutter) * -1);
    padding-bottom: var(--lr-space-2xs);
  }
  .detail__strip li { scroll-snap-align: start; }
}

/* ------------------------------------------------------------ 12. Compare */
.compare { width: 100%; border-collapse: collapse; font-size: var(--lr-text-m); }
.compare th, .compare td { padding: 1rem 1.15rem; text-align: left; border-bottom: 1px solid var(--lr-border); }
.compare thead th {
  font-family: var(--lr-font-body); font-size: var(--lr-text-xs); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--lr-text-muted);
  border-bottom: 2px solid var(--lr-ink);
}
.compare thead th:nth-child(2) { color: var(--lr-primary); }
.compare td:nth-child(2), .compare th:nth-child(2) { background: var(--lr-crimson-tint); }
.compare td:nth-child(2), .compare td:nth-child(3) { text-align: center; width: 22%; }
.compare__yes { color: #1E7A44; font-weight: 700; }
.compare__no  { color: var(--lr-text-muted); }
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 640px) {
  .compare { font-size: var(--lr-text-s); min-width: 460px; }
  .compare th, .compare td { padding: 0.8rem 0.7rem; }
}

/* ------------------------------------------------------------- 13. Process */
.process__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3.25rem);
}
.process__step { position: relative; padding-top: var(--lr-space-l); }
.process__num {
  font-family: var(--lr-font-display); font-size: clamp(3.5rem, 7vw, 5.5rem);
  line-height: 0.8; color: transparent;
  -webkit-text-stroke: 1px var(--lr-gold);
  display: block; margin-bottom: var(--lr-space-s);
}
.process__title { font-size: var(--lr-text-xl); margin-bottom: 0.6rem; }
.process__body { color: var(--lr-text-muted); }
.section--ink .process__body { color: var(--lr-text-light-mut); }
.section--ink .process__title { color: #fff; }

@media (max-width: 860px) { .process__grid { grid-template-columns: 1fr; gap: var(--lr-space-l); } }

/* ------------------------------------------------------------- 14. Reviews */
.reviews__head { text-align: center; margin-bottom: var(--lr-space-xl); }
.reviews__head .section__title { margin-inline: auto; }
.reviews__head .section__lede { margin-inline: auto; text-align: center; }
.reviews__badge {
  display: inline-flex; align-items: center; gap: 0.8rem;
  background: #fff; border: 1px solid var(--lr-border);
  border-radius: 999px; padding: 0.6rem 1.3rem;
  box-shadow: var(--lr-shadow-s); margin-bottom: var(--lr-space-m);
}
.reviews__badge svg { width: 20px; height: 20px; flex: none; }
.reviews__badge b { font-family: var(--lr-font-display); font-size: var(--lr-text-l); }
.reviews__badge span { font-size: var(--lr-text-s); color: var(--lr-text-muted); }
.reviews__stars { color: #E8A825; letter-spacing: 0.06em; }

/* align-items:start so a genuinely short review is its own height instead of
   stretching to match and leaving a hole. Real reviews are uneven lengths. */
.reviews__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lr-space-m); align-items: start;
}
.review {
  background: #fff; border: 1px solid var(--lr-border);
  border-radius: var(--lr-radius-m); padding: var(--lr-space-l);
  display: flex; flex-direction: column; gap: var(--lr-space-s);
}
.review__stars { color: #E8A825; letter-spacing: 0.1em; font-size: var(--lr-text-s); }
.review__body { font-size: var(--lr-text-m); line-height: 1.65; flex: 1; }
.review__who { display: flex; align-items: center; gap: 0.75rem; padding-top: var(--lr-space-s); border-top: 1px solid var(--lr-border); }
.review__avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--lr-ink); color: #fff;
  display: grid; place-items: center;
  font-family: var(--lr-font-display); font-size: var(--lr-text-m);
}
.review__name { font-weight: 600; font-size: var(--lr-text-s); display: block; }
.review__src { font-size: var(--lr-text-xs); color: var(--lr-text-muted); }

@media (max-width: 900px) {
  .reviews__grid {
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Must equal the gutter or snap silently pulls card 1 off the shared
       left edge. Caught by measurement on Anderson, invisible to the eye. */
    scroll-padding-inline-start: var(--lr-gutter);
    padding-inline: var(--lr-gutter);
    margin-inline: calc(var(--lr-gutter) * -1);
    padding-bottom: var(--lr-space-s);
  }
  .review { scroll-snap-align: start; }
}

/* ----------------------------------------------------------------- 15. FAQ */
.faq { display: grid; gap: 0.6rem; max-width: 860px; margin-inline: auto; }
.faq__item { background: #fff; border: 1px solid var(--lr-border); border-radius: var(--lr-radius-m); overflow: hidden; }
.faq__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--lr-space-s);
  padding: 1.15rem var(--lr-space-m); background: transparent; border: 0; cursor: pointer;
  font-family: var(--lr-font-body); font-size: var(--lr-text-l); font-weight: 500;
  color: var(--lr-text); text-align: left;
}
.faq__btn svg { width: 15px; height: 15px; flex: none; color: var(--lr-primary); stroke-width: 2.4; transition: transform 0.26s var(--lr-ease); }
.faq__btn[aria-expanded="true"] svg { transform: rotate(45deg); }
.faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--lr-ease); }
.faq__panel.is-open { grid-template-rows: 1fr; }
.faq__panel-inner { overflow: hidden; }
.faq__panel p { padding: 0 var(--lr-space-m) var(--lr-space-m); color: var(--lr-text-muted); }

/* ----------------------------------------------------------- 16. CTA band */
.cta-band {
  background: radial-gradient(120% 90% at 50% 0%, #221d1a 0%, var(--lr-ink) 66%);
  color: #fff; text-align: center; position: relative; overflow: hidden;
}
/* Hairline rule above the closing CTA so it reads as a deliberate final beat. */
.cta-band::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(100% - 2 * var(--lr-gutter), var(--lr-container));
  height: 1px; background: linear-gradient(to right, transparent, var(--lr-gold), transparent);
}
.cta-band__title { font-size: var(--lr-text-3xl); margin-bottom: var(--lr-space-s); }
.cta-band__title em { font-style: italic; color: var(--lr-gold); }
.cta-band__lede { color: var(--lr-text-light-mut); max-width: 54ch; margin: 0 auto var(--lr-space-l); font-size: var(--lr-text-l); }
.cta-band__actions { display: flex; gap: var(--lr-space-s); justify-content: center; flex-wrap: wrap; }
@media (max-width: 560px) { .cta-band__actions .btn { width: 100%; } }

/* ------------------------------------------------------------- 17. Area */
.area__list {
  display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;
  max-width: 900px; margin-inline: auto;
}
.area__list li {
  border: 1px solid var(--lr-border); border-radius: 999px;
  padding: 0.5rem 1.1rem; font-size: var(--lr-text-s); background: #fff;
}

/* ------------------------------------------------------------- 18. Footer */
.site-footer {
  background: radial-gradient(120% 70% at 50% 0%, #1c1816 0%, var(--lr-ink) 55%);
  color: var(--lr-text-light-mut);
  border-top: 3px solid var(--lr-gold);
}

/* -- top: brand statement beside a large, unmissable call block -- */
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: var(--lr-space-2xl);
  border-bottom: 1px solid var(--lr-ink-line);
  align-items: start;
}
.site-footer__mark { height: 54px; width: auto; opacity: 0.9; margin-bottom: var(--lr-space-m); }
.site-footer__stmt {
  font-family: var(--lr-font-display);
  font-size: var(--lr-text-xl);
  line-height: 1.35;
  color: #fff;
  max-width: 34ch;
  margin-bottom: var(--lr-space-m);
}
.site-footer__social { display: flex; gap: 0.6rem; }
.site-footer__social a {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--lr-ink-line); border-radius: 50%; color: #fff;
  transition: background-color 0.22s var(--lr-ease), border-color 0.22s var(--lr-ease),
              transform 0.22s var(--lr-ease);
}
.site-footer__social a:hover {
  background: var(--lr-primary); border-color: var(--lr-primary); transform: translateY(-2px);
}
.site-footer__social svg { width: 17px; height: 17px; stroke-width: 1.9; }

.site-footer__callcol { display: flex; flex-direction: column; align-items: flex-start; }
.site-footer__label {
  font-size: var(--lr-text-xs); font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--lr-gold); margin-bottom: 0.5rem;
}
/* Needs the extra element selector: `.site-footer a` is (0,1,1) and was
   out-specifying a bare `.site-footer__tel` (0,1,0), so the display phone
   silently rendered at small link size. */
.site-footer a.site-footer__tel {
  font-family: var(--lr-font-display);
  font-weight: 300;
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: none;
  margin-bottom: 0.6rem;
}
.site-footer a.site-footer__tel:hover { color: var(--lr-gold); }
.site-footer__hours { font-size: var(--lr-text-s); margin-bottom: var(--lr-space-m); line-height: 1.7; }
.site-footer__mail {
  margin-top: var(--lr-space-s); font-size: var(--lr-text-s);
  text-decoration: none; border-bottom: 1px solid var(--lr-ink-line);
  padding-bottom: 2px;
}
.site-footer__mail:hover { color: #fff; border-bottom-color: var(--lr-gold); }

/* -- link columns -- */
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding-block: var(--lr-space-xl);
  border-bottom: 1px solid var(--lr-ink-line);
}
.site-footer .site-footer__h {
  font-family: var(--lr-font-body); font-size: var(--lr-text-xs); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: #fff;
  margin-bottom: var(--lr-space-s);
}
.site-footer ul { display: grid; gap: 0.55rem; }
.site-footer a { color: inherit; text-decoration: none; font-size: var(--lr-text-s); }
.site-footer__grid a:hover { color: var(--lr-gold); }
.site-footer__areas { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: var(--lr-space-s); }
.site-footer__areas span {
  font-size: var(--lr-text-xs); border: 1px solid var(--lr-ink-line);
  border-radius: 999px; padding: 0.3rem 0.75rem;
}
.site-footer__areanote { font-size: var(--lr-text-xs); max-width: 42ch; line-height: 1.6; }

/* -- trust strip -- */
.site-footer__trust {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--lr-space-m);
  padding-block: var(--lr-space-l);
  border-bottom: 1px solid var(--lr-ink-line);
}
.site-footer__trust li { display: flex; align-items: center; gap: 0.75rem; }
.site-footer__trust svg { width: 24px; height: 24px; color: var(--lr-gold); flex: none; stroke-width: 1.4; }
.site-footer__trust b {
  display: block; color: #fff; font-weight: 600;
  font-size: var(--lr-text-s); letter-spacing: 0.01em;
}
.site-footer__trust span { font-size: var(--lr-text-xs); line-height: 1.5; }

.site-footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--lr-space-m); padding-block: var(--lr-space-m);
  font-size: var(--lr-text-xs); flex-wrap: wrap;
}
.site-footer__license { color: var(--lr-silver); }

@media (max-width: 900px) {
  .site-footer__top { grid-template-columns: 1fr; gap: var(--lr-space-xl); padding-block: var(--lr-space-xl); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__areacol { grid-column: span 2; }
  .site-footer__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__areacol { grid-column: span 1; }
  .site-footer__trust { grid-template-columns: 1fr; gap: var(--lr-space-s); }
  .site-footer__bottom { justify-content: center; text-align: center; }
  .site-footer__callcol .btn { width: 100%; }
}

.to-top {
  position: fixed; right: 18px; bottom: 92px; z-index: 40;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--lr-ink); color: #fff; border: 1px solid var(--lr-ink-line);
  display: grid; place-items: center; cursor: pointer;
  opacity: 0; visibility: hidden; transition: opacity 0.3s var(--lr-ease), visibility 0.3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top:hover { background: var(--lr-primary); border-color: var(--lr-primary); }
@media (min-width: 901px) { .to-top { bottom: 24px; } }

@media (max-width: 900px) {
  .site-footer__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lr-space-l); }
}
@media (max-width: 520px) {
  .site-footer__trust { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__bottom { justify-content: center; text-align: center; }
}

/* ------------------------------------------------- 19. Sticky mobile CTA */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: none; grid-template-columns: repeat(3, 1fr);
  background: var(--lr-ink); border-top: 1px solid var(--lr-ink-line);
  box-shadow: 0 -6px 24px rgba(0,0,0,0.28);
}
.mobile-cta a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 0.6rem 0.3rem; color: #fff; text-decoration: none;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  border-left: 1px solid var(--lr-ink-line);
}
.mobile-cta a:first-child { border-left: 0; }
.mobile-cta a svg { width: 18px; height: 18px; stroke-width: 1.9; }
.mobile-cta a.is-primary { background: var(--lr-primary); }
@media (max-width: 900px) {
  .mobile-cta { display: grid; }
  body { padding-bottom: 64px; }
}

/* --------------------------------------------------------- 20. Reveal anim */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--lr-ease), transform 0.7s var(--lr-ease); }
.reveal.in { opacity: 1; transform: none; }

/* ------------------------------------------------------ 21. Service page */
.page-hero {
  position: relative; isolation: isolate; background: var(--lr-ink);
  padding-block: clamp(3.5rem, 8vw, 6.5rem); overflow: hidden;
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(95deg, rgba(20,17,16,0.94) 0%, rgba(20,17,16,0.78) 45%, rgba(20,17,16,0.42) 100%);
}
.page-hero__title { font-size: var(--lr-text-3xl); color: #fff; margin-bottom: var(--lr-space-m); max-width: 18ch; }
.page-hero__lede { font-size: var(--lr-text-l); color: var(--lr-text-light); max-width: 56ch; margin-bottom: var(--lr-space-l); }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--lr-space-s); }
@media (max-width: 560px) { .page-hero__actions .btn { width: 100%; } }

.breadcrumb { font-size: var(--lr-text-xs); color: var(--lr-text-light-mut); margin-bottom: var(--lr-space-m); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: #fff; }

.prose { max-width: 68ch; }
.prose h2 { font-size: var(--lr-text-2xl); margin-bottom: var(--lr-space-s); }
.prose h3 { font-size: var(--lr-text-xl); margin: var(--lr-space-l) 0 var(--lr-space-2xs); }
.prose p { margin-bottom: var(--lr-space-m); color: var(--lr-text-muted); font-size: var(--lr-text-l); }
.prose ul { display: grid; gap: 0.6rem; margin-bottom: var(--lr-space-m); }
.prose ul li { display: flex; gap: 0.65rem; align-items: flex-start; color: var(--lr-text-muted); }
.prose ul svg { width: 18px; height: 18px; color: var(--lr-primary); flex: none; margin-top: 0.3rem; stroke-width: 2.2; }

.split { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr); gap: clamp(2rem,4vw,4rem); align-items: start; }
/* Grid items default to min-width:auto and refuse to shrink below their
   min-content width. Standard hygiene, and the second half of the eyebrow
   overflow fix above. */
.split > * { min-width: 0; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.sticky-aside { position: sticky; top: calc(var(--lr-header-h) + 20px); }
@media (max-width: 900px) { .sticky-aside { position: static; } }


/* ------------------------------------------------ 22. Service page aside */
/* The sticky column used to end at the form and leave ~500px of dead space.
   These two blocks give the scroll something to land on and add a second,
   lower-friction path for people who would rather phone. */
.aside-call {
  margin-top: var(--lr-space-m);
  padding: var(--lr-space-m);
  background: var(--lr-ink);
  border-radius: var(--lr-radius-m);
  text-align: center;
}
.aside-call__label {
  display: block; font-size: var(--lr-text-xs); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lr-gold); margin-bottom: 0.35rem;
}
.aside-call__tel {
  display: block; font-family: var(--lr-font-display); font-weight: 300;
  font-size: var(--lr-text-2xl); line-height: 1.1; color: #fff;
  text-decoration: none; letter-spacing: -0.015em;
}
.aside-call__tel:hover { color: var(--lr-gold); }
.aside-call__hours { font-size: var(--lr-text-xs); color: var(--lr-text-light-mut); margin-top: 0.4rem; }

.aside-trust {
  margin-top: var(--lr-space-m);
  display: grid; gap: 0.7rem;
  padding-top: var(--lr-space-m);
  border-top: 1px solid var(--lr-border);
}
.aside-trust li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--lr-text-s); color: var(--lr-text-muted); }
.aside-trust svg { width: 16px; height: 16px; stroke-width: 2.4; color: var(--lr-primary); flex: none; margin-top: 0.22rem; }

/* ------------------------------------------------- 23. Related services */
.related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lr-space-m); }
.related__card {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: var(--lr-space-m);
  background: #fff;
  border: 1px solid var(--lr-border);
  border-radius: var(--lr-radius-m);
  text-decoration: none;
  transition: border-color 0.22s var(--lr-ease), transform 0.22s var(--lr-ease),
              box-shadow 0.22s var(--lr-ease);
}
.related__card:hover {
  border-color: var(--lr-gold); transform: translateY(-3px); box-shadow: var(--lr-shadow-m);
}
.related__t { font-family: var(--lr-font-display); font-size: var(--lr-text-xl); color: var(--lr-ink); }
.related__d { font-size: var(--lr-text-s); color: var(--lr-text-muted); margin-bottom: var(--lr-space-s); }
.related__go {
  margin-top: auto; display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: var(--lr-text-xs); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--lr-primary);
}
.related__go svg { width: 15px; height: 15px; stroke-width: 2.2; transition: transform 0.22s var(--lr-ease); }
.related__card:hover .related__go svg { transform: translateX(4px); }
@media (max-width: 860px) { .related__grid { grid-template-columns: 1fr; } }

/* =========================================================================
   24. Page-type components
   Added when the site grew from 4 pages to 21. Same BEM discipline so the
   Bricks conversion stays mechanical.
   ========================================================================= */

/* -- services hub -- */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lr-space-m); }
.svc-card {
  display: flex; flex-direction: column; text-decoration: none;
  background: #fff; border: 1px solid var(--lr-border); border-radius: var(--lr-radius-m);
  overflow: hidden;
  transition: transform 0.25s var(--lr-ease), box-shadow 0.25s var(--lr-ease), border-color 0.25s var(--lr-ease);
}
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--lr-shadow-m); border-color: var(--lr-gold); }
.svc-card__media { aspect-ratio: 4 / 3; overflow: hidden; }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--lr-ease); }
.svc-card:hover .svc-card__media img { transform: scale(1.05); }
.svc-card__body { padding: var(--lr-space-m); display: flex; flex-direction: column; flex: 1; }
.svc-card__t { font-size: var(--lr-text-xl); margin-bottom: 0.3rem; }
.svc-card__d { font-size: var(--lr-text-s); color: var(--lr-text-muted); margin-bottom: var(--lr-space-m); }
@media (max-width: 980px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .svc-grid { grid-template-columns: 1fr; } }

/* -- projects index -- */
.proj-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lr-space-m); }
.proj-card { text-decoration: none; display: block; }
.proj-card__media {
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--lr-radius-m); margin-bottom: 0.85rem;
}
.proj-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--lr-ease); }
.proj-card:hover .proj-card__media img { transform: scale(1.05); }
.proj-card__k {
  font-size: var(--lr-text-xs); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--lr-gold); display: block; margin-bottom: 0.25rem;
}
.proj-card__t { font-family: var(--lr-font-display); font-size: var(--lr-text-xl); color: var(--lr-ink); margin-bottom: 0.2rem; }
.proj-card__d { font-size: var(--lr-text-s); color: var(--lr-text-muted); }
@media (max-width: 980px) { .proj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .proj-grid { grid-template-columns: 1fr; } }

/* -- process timeline -- */
.timeline { display: grid; gap: 0; max-width: 900px; margin-inline: auto; }
.timeline__item {
  display: grid; grid-template-columns: auto 1fr; gap: var(--lr-space-m);
  padding: var(--lr-space-l) 0; border-bottom: 1px solid var(--lr-border);
}
.timeline__item:last-child { border-bottom: 0; }
.timeline__n {
  font-family: var(--lr-font-display); font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 0.9; color: transparent; -webkit-text-stroke: 1px var(--lr-gold);
  min-width: 2.4ch;
}
.timeline__t { font-size: var(--lr-text-xl); margin-bottom: 0.4rem; }
.timeline__d { color: var(--lr-text-muted); }
@media (max-width: 620px) {
  .timeline__item { grid-template-columns: 1fr; gap: 0.5rem; padding: var(--lr-space-m) 0; }
}

/* -- contact rows -- */
.contact__rows { display: grid; gap: 0.6rem; margin-block: var(--lr-space-m); }
.contact__row {
  display: flex; align-items: flex-start; gap: 0.85rem;
  padding: 0.9rem 1rem; border: 1px solid var(--lr-border);
  border-radius: var(--lr-radius-m); background: #fff; text-decoration: none;
  transition: border-color 0.2s var(--lr-ease), transform 0.2s var(--lr-ease);
}
a.contact__row:hover { border-color: var(--lr-gold); transform: translateX(3px); }
.contact__icon { width: 20px; height: 20px; stroke-width: 1.7; color: var(--lr-gold); flex: none; margin-top: 0.15rem; }
.contact__row b { display: block; color: var(--lr-text); font-size: var(--lr-text-m); font-weight: 600; }
.contact__row span { font-size: var(--lr-text-s); color: var(--lr-text-muted); }

/* -- service-area cards -- */
.area-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--lr-space-s); }
.area-card {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: var(--lr-space-m); background: #fff;
  border: 1px solid var(--lr-border); border-radius: var(--lr-radius-m);
  text-decoration: none;
  transition: border-color 0.2s var(--lr-ease), transform 0.2s var(--lr-ease);
}
.area-card:hover { border-color: var(--lr-gold); transform: translateY(-3px); }
.area-card__t { font-family: var(--lr-font-display); font-size: var(--lr-text-l); color: var(--lr-ink); }
.area-card__d { font-size: var(--lr-text-xs); color: var(--lr-text-muted); }
@media (max-width: 900px) { .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .area-grid { grid-template-columns: 1fr; } }

/* -- blog -- */
.post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lr-space-m); }
.post-card {
  display: flex; flex-direction: column; text-decoration: none;
  padding: var(--lr-space-l); background: #fff;
  border: 1px solid var(--lr-border); border-radius: var(--lr-radius-m);
  transition: border-color 0.22s var(--lr-ease), transform 0.22s var(--lr-ease), box-shadow 0.22s var(--lr-ease);
}
.post-card:hover { border-color: var(--lr-gold); transform: translateY(-3px); box-shadow: var(--lr-shadow-m); }
.post-card__k {
  font-size: var(--lr-text-xs); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--lr-gold); margin-bottom: 0.5rem;
}
.post-card__t { font-family: var(--lr-font-display); font-size: var(--lr-text-2xl); color: var(--lr-ink); margin-bottom: 0.5rem; line-height: 1.15; }
.post-card__d { font-size: var(--lr-text-m); color: var(--lr-text-muted); margin-bottom: var(--lr-space-m); }
@media (max-width: 780px) { .post-grid { grid-template-columns: 1fr; } }

.post__meta {
  font-size: var(--lr-text-xs); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--lr-gold); margin-bottom: var(--lr-space-s);
}
.post__lede {
  font-family: var(--lr-font-display); font-size: var(--lr-text-xl);
  line-height: 1.45; color: var(--lr-ink); margin-bottom: var(--lr-space-l);
}