/* ============================================================
   Walter Lutz Services LLC — components
   Depends on tokens.css. Loaded after it, never before.
   Fonts load from fonts.css, separately, so the download
   parallelises instead of chaining behind an @import.
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-2);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body, 1.6);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 0;
}
@media (max-width: 820px) { body { padding-bottom: var(--callbar-h); } }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text);
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

p { margin: 0; max-width: 68ch; }
img, svg, video, iframe { max-width: 100%; height: auto; display: block; }
a { color: var(--text-accent); text-underline-offset: .18em; }
a:hover { color: var(--text); }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink-900); color: var(--text-inverse);
  padding: 12px 18px; font-family: var(--font-display); font-weight: 700;
  letter-spacing: var(--ls-caps); text-transform: uppercase; font-size: 12px;
}
.skip:focus { left: 0; }

.wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: var(--container-narrow); }

/* ---------- shared type roles ---------- */

.eyebrow {
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--text-accent); margin: 0 0 14px;
}
.eyebrow--ink { color: var(--text-accent-inverse); }

.h2 { font-size: clamp(26px, 3.2vw, 36px); }
.lede { font-size: var(--fs-body-lg); color: var(--text-2); max-width: 62ch; }

/* a visible placeholder. Deliberately loud. */
.flag {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  background: repeating-linear-gradient(45deg, var(--gold-100), var(--gold-100) 6px, #F2E3C3 6px, #F2E3C3 12px);
  color: #6B4E10; border: 1px dashed var(--gold-700);
  padding: 2px 7px; border-radius: 2px; display: inline-block;
  text-decoration: none;
}
.flag--ink { background: rgba(192,138,30,.14); color: var(--gold-500); border-color: var(--gold-500); }
.flag--block { display: block; padding: 14px 16px; margin: 0; max-width: 62ch; line-height: 1.5; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 22px;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  border: 2px solid transparent; border-radius: var(--r-button, 2px);
  cursor: pointer; transition: background var(--t-fast, .16s) var(--ease-out, ease),
              color var(--t-fast,.16s) var(--ease-out, ease),
              border-color var(--t-fast,.16s) var(--ease-out, ease),
              transform var(--t-fast,.16s) var(--ease-out, ease);
}
.btn--gold { background: var(--accent); color: var(--on-accent); }
.btn--gold:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn--ink { background: var(--ink-900); color: var(--text-inverse); }
.btn--ink:hover { background: #000; color: var(--text-inverse); }
.btn--outline { background: transparent; color: var(--text); border-color: var(--text); }
.btn--outline:hover { background: var(--text); color: var(--text-inverse); }
.btn--outline-ink { background: transparent; color: var(--text-inverse); border-color: rgba(245,245,245,.45); }
.btn--outline-ink:hover { background: var(--text-inverse); color: var(--ink-900); }
.btn:active { transform: translateY(1px); }

/* ---------- utility bar ---------- */

.util {
  background: var(--ink-900);
  border-bottom: 1px solid rgba(245,245,245,.10);
  font-family: var(--font-display); font-weight: 700; font-size: 11.5px;
  letter-spacing: var(--ls-caps); text-transform: uppercase;
}
.util__in { display: flex; align-items: center; gap: 18px; height: 44px; }
.util__item { display: flex; align-items: center; gap: 8px; color: var(--text-accent-inverse); white-space: nowrap; }
.util__item svg { width: 15px; height: 15px; flex: none; }
.util__sep { width: 1px; height: 18px; background: rgba(245,245,245,.22); flex: none; }
.util__where { color: var(--text-inverse-2); white-space: nowrap; }
.util__cta {
  margin-left: auto; color: var(--text-inverse); text-decoration: none;
  border-bottom: 1px solid var(--accent); padding-bottom: 2px; white-space: nowrap;
}
.util__cta:hover { color: var(--accent); }
@media (max-width: 900px) { .util__where, .util__sep { display: none; } }
@media (max-width: 560px) { .util__cta { display: none; } }

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

.hdr {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h); background: var(--ink-900);
  border-bottom: 1px solid rgba(245,245,245,.12);
}
.hdr__in { height: 100%; display: flex; align-items: center; gap: 30px; }
.hdr__logo { display: flex; align-items: center; margin-right: auto; text-decoration: none; }
.hdr__logo img { height: 56px; width: auto; }

.nav { display: flex; align-items: center; gap: 30px; height: 100%; }
.nav__item { position: relative; display: flex; align-items: center; height: 100%; }
.nav__item > a {
  display: flex; align-items: center; gap: 7px; height: 100%;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--text-inverse); text-decoration: none;
  border-bottom: 3px solid transparent;
}
.nav__item > a:hover { color: var(--accent); }
.nav__item > a[aria-current="page"] { border-bottom-color: var(--accent); }
.nav__item svg { width: 13px; height: 13px; }

.nav__sub {
  position: absolute; top: 100%; left: -18px; min-width: 268px;
  background: var(--ink-900); border: 1px solid rgba(245,245,245,.16);
  border-top: 2px solid var(--accent);
  padding: 10px 0; display: none; z-index: 110;
}
.nav__item:hover .nav__sub, .nav__item:focus-within .nav__sub { display: block; }
.nav__sub a {
  display: block; padding: 11px 20px;
  font-family: var(--font-sans); font-weight: 400; font-size: 15px;
  letter-spacing: 0; text-transform: none;
  color: var(--text-inverse-2); text-decoration: none;
}
.nav__sub a:hover { background: rgba(192,138,30,.14); color: var(--accent); }

.hdr__cta { white-space: nowrap; height: 56px; }
.navtoggle { display: none; }

@media (max-width: 1020px) {
  /* The panel is closed by default and opens on [data-open]. Before this rule
     existed the nav was simply display:none here and the toggle was wired to
     nothing, which left a phone with no way to reach any page from the header. */
  .nav {
    position: fixed; left: 0; right: 0; top: var(--header-h);
    bottom: 0; z-index: 90;
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    height: auto; padding: 8px 0 32px;
    background: var(--ink-900); overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity var(--t-med) var(--ease-out),
                transform var(--t-med) var(--ease-out),
                visibility var(--t-med);
  }
  .hdr[data-open] .nav { opacity: 1; visibility: visible; transform: none; }
  .nav__item { border-bottom: 1px solid var(--line-inverse); }
  .nav__item > a {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 60px; padding: 0 var(--gutter);
    font-size: 17px; color: var(--text-inverse);
  }
  .nav__item > a[aria-current="page"] { color: var(--accent); }
  .navtoggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; background: transparent;
    border: 2px solid rgba(245,245,245,.5); border-radius: 2px;
    cursor: pointer; color: var(--text-inverse);
  }
  .navtoggle svg { transition: transform var(--t-med) var(--ease-out); }
  .hdr[data-open] .navtoggle svg { transform: rotate(90deg); }
  /* the panel covers the page, so the page must not scroll behind it */
  body[data-navlock] { overflow: hidden; }
  .hdr__cta span { display: none; }
  .hdr__cta { width: 52px; padding: 0; }
}
@media (max-width: 820px) { .nav { top: var(--header-h-sm); } }
@media (max-width: 820px) {
  .hdr { height: var(--header-h-sm); }
  .hdr__logo img { height: 42px; }
  .hdr__cta { height: 46px; }
}

/* ---------- breadcrumbs ---------- */

.crumbs { padding: 18px 0 0; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs li { display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3); }
.crumbs a { color: var(--text-3); text-decoration: none; }
.crumbs a:hover { color: var(--text-accent); }
.crumbs li + li::before { content: "›"; color: var(--text-3); }
.crumbs [aria-current="page"] { color: var(--text); }

/* ---------- sections ---------- */

.sec { padding: var(--section-y) 0; }
.sec--ink { background: var(--surface-inverse); color: var(--text-inverse-2); }
:is(.sec--ink, .cta, .about, .about__body, .trust, .ftr, .nav__mega, .callcard, .hero) h2, :is(.sec--ink, .cta, .about, .about__body, .trust, .ftr, .nav__mega, .callcard, .hero) h3 { color: var(--text-inverse); }
.sec--band { background: var(--surface); }
.sec--tight { padding: var(--s-7) 0; }
@media (max-width: 820px) { .sec { padding: var(--section-y-mobile) 0; } }

.sec__head { margin-bottom: var(--s-7); }

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

.hero { position: relative; background: var(--ink-900); color: var(--text-inverse); overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; filter: var(--grade-photo, none); }
.hero__scrim { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(17,17,17,.90) 0%, rgba(17,17,17,.72) 46%, rgba(17,17,17,.30) 100%); }
.hero__in { position: relative; padding: 104px 0 96px; }
.hero .eyebrow { display: flex; align-items: center; gap: 16px; color: var(--text-accent-inverse); }
.hero .eyebrow::before { content: ""; width: 84px; height: 2px; background: var(--accent); flex: none; }
@media (max-width: 620px) { .hero .eyebrow::before { width: 34px; } }
.hero h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(38px, 6.4vw, 74px); line-height: .98;
  letter-spacing: -0.025em; text-transform: uppercase;
  color: var(--text-inverse); margin: 0 0 20px; max-width: 15ch;
}
.hero h1 .dot { color: var(--accent); }
.hero__sub { max-width: 46ch; color: var(--text-inverse-2); font-size: var(--fs-body-lg); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
@media (max-width: 820px) {
  .hero__in { padding: 56px 0 56px; }
  .hero__scrim { background: linear-gradient(180deg, rgba(17,17,17,.55) 0%, rgba(17,17,17,.88) 100%); }
}

/* ---------- trust strip ---------- */

.trust { background: var(--ink-900); color: var(--text-inverse-2); padding: 40px 0;
  border-top: 1px solid rgba(245,245,245,.10); }
.trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.trust__label { font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-accent-inverse);
  margin: 0 0 8px; }
.trust__line { font-size: 15px; margin: 0; color: var(--text-inverse-2); }
@media (max-width: 820px) { .trust__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }

/* ---------- service grid ---------- */

.svcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1100px) { .svcs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .svcs { grid-template-columns: 1fr; } }

.card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 26px; background: var(--bg);
  border: 1px solid var(--line, rgba(17,17,17,.12)); border-radius: var(--r-card, 2px);
  text-decoration: none; color: inherit;
  transition: transform var(--t-fast,.16s) var(--ease-out, ease), box-shadow var(--t-fast,.16s) var(--ease-out, ease);
}
a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md, 0 6px 16px rgba(17,17,17,.10)); }
.card__ico { width: 34px; height: 34px; color: var(--accent); }
.card h3 { font-size: 19px; }
.card p { font-size: 15px; color: var(--text-2); }
.card__more { font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-accent); margin-top: auto; }

.note { font-size: 13px; color: var(--text-3); margin-top: 20px; }

/* ---------- about band ---------- */

.about { position: relative; background: var(--ink-900); color: var(--text-inverse-2); overflow: hidden; }
.about__mark { position: absolute; right: -80px; top: 50%; transform: translateY(-50%);
  width: 520px; opacity: .055; pointer-events: none; }

.slot {
  display: flex; align-items: center; justify-content: center; text-align: center;
  aspect-ratio: 4 / 5; padding: 28px;
  border: 2px dashed var(--gold-500); background: rgba(192,138,30,.07);
  /* gold-500 measured 2.85:1 on this wash over --bg and 2.63:1 over --surface,
     both failing 4.5:1 for 13px text. gold-700 measures 5.05:1 and 4.65:1. */
  color: var(--gold-700); font-family: var(--font-mono); font-size: 13px; line-height: 1.6;
}
.slot--wide { aspect-ratio: 16 / 10; }

/* ---------- figure + caption ---------- */

figure { margin: 0; }
figure img { filter: var(--grade-photo, none); border-radius: var(--r-media, 2px); }
figcaption { font-size: 13px; color: var(--text-3); margin-top: 10px; }
:is(.sec--ink, .cta, .about, .about__body, .trust, .ftr, .nav__mega, .callcard, .hero) figcaption { color: var(--text-inverse-2); }

/* ---------- CTA band ---------- */

.cta { position: relative; background: var(--ink-900); color: var(--text-inverse); overflow: hidden; }
.cta__media { position: absolute; inset: 0; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.cta__in { position: relative; padding: var(--section-y) 0; display: grid;
  grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.cta h2 { color: var(--text-inverse); font-size: clamp(26px, 3.4vw, 40px); }
@media (max-width: 820px) { .cta__in { grid-template-columns: 1fr; } }

/* ---------- forms ---------- */

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.field label { font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text); }
.field input, .field textarea, .field select {
  font-family: var(--font-sans); font-size: 16px; color: var(--text);
  padding: 13px 14px; background: var(--bg);
  border: 1px solid var(--text-3); border-radius: var(--r-input, 2px);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--text);
}
.field .hint { font-size: 13px; color: var(--text-3); }

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

.ftr { background: var(--ink-900); color: var(--text-inverse-2); padding: 64px 0 28px; }
.ftr__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 820px) { .ftr__grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px) { .ftr__grid { grid-template-columns: 1fr; } }
.ftr h2 { font-size: 12px; font-family: var(--font-display); font-weight: 700;
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--text-accent-inverse); margin: 0 0 16px; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ftr a { color: var(--text-inverse-2); text-decoration: none; font-size: 15px; }
.ftr a:hover { color: var(--accent); }
.ftr__logo { width: 210px; margin-bottom: 18px; }
.ftr address { font-style: normal; font-size: 15px; line-height: 1.7; }
.ftr__base { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(245,245,245,.14);
  display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; color: var(--text-3); }

/* ---------- sticky call bar ---------- */

.callbar { display: none; }
@media (max-width: 820px) {
  .callbar {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    height: var(--callbar-h); background: var(--accent); color: var(--on-accent);
    font-family: var(--font-display); font-weight: 700; font-size: 15px;
    letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ============================================================
   Home page, matched to the approved comp
   ============================================================ */

.hero { min-height: min(760px, 88vh); display: flex; flex-direction: column; justify-content: center; }
.hero__in { padding: clamp(96px,14vw,180px) 0 clamp(72px,10vw,110px); }
.hero h1 {
  font-size: clamp(30px, 8.5vw, 92px); line-height: .96;
  letter-spacing: -0.03em; max-width: 900px;
}
.hero__sub { max-width: 440px; color: #FFFFFF; margin-top: 32px; }
.hero__cta { gap: 12px; margin-top: 36px; }

/* trust strip with vertical rules */
.trust__grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0;
}
.trust__cell { padding-right: 32px; }
.trust__cell + .trust__cell {
  border-left: 1px solid rgba(255,255,255,.14); padding-left: 32px;
}
@media (max-width: 820px) {
  .trust__cell, .trust__cell + .trust__cell { border-left: 0; padding: 0 0 20px; }
}

/* section head with a rule and a trailing link */
.sec__bar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; flex-wrap: wrap; padding-bottom: 28px;
  border-bottom: 1px solid var(--line); margin-bottom: 48px;
}
:is(.sec--ink, .cta, .about, .about__body, .trust, .ftr, .nav__mega, .callcard, .hero) .sec__bar { border-bottom-color: rgba(255,255,255,.18); }
.linkarrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--text-accent); text-decoration: none; white-space: nowrap;
}
.linkarrow svg { width: 15px; height: 15px; transition: transform var(--t-fast) var(--ease-out); }
/* A button that scrolls down this page says so. A right arrow reads as
   navigation somewhere else, which is the opposite of what these do.

   Derived from the href rather than written into the markup, because the
   markup gets regenerated and an arrow added by hand does not survive it.
   Any button pointing at an in-page anchor gets this, now and later. */
.btn[href^="#"]::after {
  content: ""; width: 15px; height: 15px; margin-left: 2px; flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--icon-down) center / contain no-repeat;
          mask: var(--icon-down) center / contain no-repeat;
  transition: transform var(--t-med) var(--ease-out);
}
.btn[href^="#"]:hover::after { transform: translateY(3px); }
.linkarrow:hover svg { transform: translateX(3px); }

/* service cards with imagery */
.svcs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.svc {
  display: flex; flex-direction: column; background: var(--bg);
  border: 1px solid var(--line); text-decoration: none; color: inherit;
  transition: box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.svc:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.svc__media { position: relative; display: block; }
.svc__media img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; filter: var(--grade-photo); }
.svc__chip {
  position: absolute; left: 0; top: 0; padding: 8px 12px; background: var(--ink-900);
  font-family: var(--font-display); font-weight: 700; font-size: 10.5px;
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-accent-inverse);
}
.svc__body { display: flex; flex-direction: column; gap: 12px; padding: 28px 26px 30px; flex: 1 1 auto; }
.svc__ico { width: 30px; height: 30px; color: var(--accent); flex: 0 0 auto; }
.svc__t { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.15; color: var(--text); }
.svc__d { font-size: 15px; line-height: 1.6; color: var(--text-2); }
.svc__go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px;
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-accent);
}
.svc__go svg { width: 14px; height: 14px; }

/* stats row */
.stats { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 34px; }
.stat__n { font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1; color: var(--text-accent-inverse); }
.stat__l { font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--text-inverse-2); margin-top: 8px; }

.ticks { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; }
.ticks svg { width: 19px; height: 19px; color: var(--accent); flex: none; margin-top: 2px; }

/* process steps */
.steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,150px), 1fr));
  column-gap: 0; row-gap: 28px; margin-top: 8px;
}
.step { padding: 0 24px 0 0; }
.step + .step { border-left: 1px solid var(--line); padding-left: 24px; }
:is(.sec--ink, .cta, .about, .about__body, .trust, .ftr, .nav__mega, .callcard, .hero) .step + .step { border-left-color: rgba(255,255,255,.18); }
.step__n { font-family: var(--font-display); font-weight: 700; font-size: 11.5px;
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-accent); margin-bottom: 12px; }
:is(.sec--ink, .cta, .about, .about__body, .trust, .ftr, .nav__mega, .callcard, .hero) .step__n { color: var(--text-accent-inverse); }
.step__t { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--text); margin-bottom: 8px; }
:is(.sec--ink, .cta, .about, .about__body, .trust, .ftr, .nav__mega, .callcard, .hero) .step__t { color: var(--text-inverse); }
.step__d { font-size: 15px; color: var(--text-2); }
:is(.sec--ink, .cta, .about, .about__body, .trust, .ftr, .nav__mega, .callcard, .hero) .step__d { color: var(--text-inverse-2); }
@media (max-width: 760px) {
  .step, .step + .step { border-left: 0; padding: 0 0 24px; }
}

/* tagline strip */
.tagline {
  background: var(--ink-900); border-top: 1px solid rgba(255,255,255,.18);
  padding: 36px 0; display: flex; justify-content: center; gap: 28px; flex-wrap: wrap;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-inverse);
}
.tagline span:not(:last-child)::after { content: ""; display: inline-block; width: 1px; height: 15px;
  background: var(--accent); margin-left: 28px; vertical-align: -2px; }

/* review cards */
.revs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,300px), 1fr)); gap: 20px; margin-top: 40px; }
.rev { background: var(--bg); border: 1px solid var(--line); padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.rev__stars { color: var(--accent); font-size: 15px; letter-spacing: 2px; }
.rev__who { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--text); margin-top: auto; }
.rev__meta { font-size: 12.5px; color: var(--text-3); }

/* ---------- services mega menu ---------- */
/* .hdr is sticky, which makes it the containing block. .nav__item goes
   static so the panel resolves against the header and spans full width. */

.nav__item--mega { position: static; }

.nav__mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--ink-900);
  border-top: 1px solid var(--accent);
  border-bottom: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 24px 48px -24px rgba(0,0,0,.7);
  display: none; z-index: 115;
}
.nav__item--mega:hover .nav__mega,
.nav__item--mega:focus-within .nav__mega { display: block; }

.mega__in {
  max-width: var(--container); margin: 0 auto;
  padding: 40px 24px 44px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 48px;
}
.mega__col { display: flex; flex-direction: column; gap: 4px; }
.mega__h {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--accent);
  padding-bottom: 14px; margin-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.mega__link {
  display: flex; gap: 14px; padding: 14px 12px 14px 0; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background var(--t-fast) var(--ease-out);
}
.mega__link:last-child { border-bottom: 0; }
.mega__link:hover { background: rgba(255,255,255,.04); }
.mega__link svg { width: 22px; height: 22px; color: var(--accent); flex: 0 0 auto; margin-top: 2px; }
.mega__t { display: flex; flex-direction: column; gap: 4px; }
.mega__t b { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text-inverse); }
.mega__t span { font-size: 14px; line-height: 1.5; color: var(--text-3); }

.mega__card {
  border: 1px solid rgba(255,255,255,.14); border-top: 2px solid var(--accent);
  padding: 18px; display: flex; flex-direction: column; gap: 14px;
}
.mega__card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; filter: var(--grade-photo); }
.mega__card .eyebrow { margin: 0; color: var(--accent); }
.mega__card p { font-size: 15px; line-height: 1.55; color: var(--text-inverse-2); margin: 0; }
.mega__phone {
  font-family: var(--font-display); font-weight: 800; font-size: 26px;
  color: var(--text-inverse); text-decoration: none; letter-spacing: -.01em;
}
.mega__phone:hover { color: var(--accent); }
.mega__all {
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid var(--accent); padding-bottom: 3px; align-self: flex-start;
}
.mega__all:hover { color: var(--text-inverse); border-bottom-color: var(--text-inverse); }

/* chevron flips when the panel is open */
.nav__item--mega:hover > a svg,
.nav__item--mega:focus-within > a svg { transform: rotate(180deg); }
.nav__item > a svg { transition: transform var(--t-fast) var(--ease-out); }

@media (max-width: 1020px) { .nav__mega { display: none !important; } }

/* trust strip icons */
.trust__label { display: flex; align-items: center; gap: 10px; }
.trust__label svg { width: 20px; height: 20px; color: var(--accent); flex: none; }

/* ---------- about band, split with full-bleed photo ---------- */

.about { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.about__photo { position: relative; min-height: 520px; }
.about__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--grade-photo); }
.about__chip {
  position: absolute; left: 0; top: 0; z-index: 2; padding: 10px 16px;
  background: rgba(17,17,17,.72);
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--accent);
}
.about__cap {
  position: absolute; left: 0; bottom: 0; z-index: 2; padding: 10px 16px; margin: 0;
  background: rgba(17,17,17,.72);
  font-family: var(--font-display); font-weight: 700; font-size: 10.5px;
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-inverse-2);
}
.about__body { position: relative; padding: clamp(48px,6vw,88px) clamp(24px,4vw,64px); overflow: hidden; }
.about__mark { position: absolute; right: -110px; top: 50%; transform: translateY(-50%); width: 460px; opacity: .06; pointer-events: none; }
.about__body > *:not(.about__mark) { position: relative; }
.about__body > .about__mark { position: absolute; }
.about h2 {
  font-size: clamp(30px,4.4vw,54px); line-height: 1.02; letter-spacing: -.03em;
  text-transform: uppercase; color: var(--text-inverse);
}
@media (max-width: 900px) {
  .about { grid-template-columns: 1fr; }
  .about__photo { min-height: 300px; }
}

.stats { border-top: 1px solid rgba(255,255,255,.16); padding-top: 26px; gap: 0; }
.stat { padding-right: 30px; }
.stat + .stat { border-left: 1px solid rgba(255,255,255,.16); padding-left: 30px; }
.stat__n { font-size: clamp(30px,3.4vw,44px); color: var(--text-inverse); }
.stat__l { color: var(--accent); }

.linkphone {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 19px;
  color: var(--text-inverse); text-decoration: none;
  border-bottom: 2px solid var(--accent); padding-bottom: 3px;
}
.linkphone:hover { color: var(--accent); }

/* ---------- CTA band with a call card ---------- */

.cta__in { grid-template-columns: 1.15fr .85fr; gap: clamp(32px,5vw,72px); align-items: center; }
.cta h2 { font-size: clamp(30px,4.4vw,56px); line-height: 1.02; letter-spacing: -.03em; text-transform: uppercase; }
.cta__media img { opacity: .5; object-position: right center; }

.callcard {
  background: rgba(17,17,17,.86); border: 1px solid rgba(255,255,255,.16);
  border-top: 2px solid var(--accent); padding: clamp(26px,3vw,38px);
  display: flex; flex-direction: column; gap: 16px;
}
.callcard .eyebrow { margin: 0; color: var(--accent); }
.callcard__n {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(28px,3.4vw,42px);
  letter-spacing: -.02em; color: var(--text-inverse); text-decoration: none;
}
.callcard__n:hover { color: var(--accent); }
.callcard__tag {
  display: flex; flex-wrap: wrap; gap: 14px; padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.16);
  font-family: var(--font-display); font-weight: 700; font-size: 11.5px;
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-inverse-2);
}
.callcard__tag span:not(:last-child)::after { content: "|"; margin-left: 14px; color: var(--text-3); }
.callcard .btn { width: 100%; }

/* ---------- footer tagline ---------- */
.ftr__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px;
  flex-wrap: wrap; padding-bottom: 34px; border-bottom: 1px solid rgba(245,245,245,.14); margin-bottom: 44px; }
.ftr__tag { font-family: var(--font-display); font-weight: 700; font-size: clamp(13px,1.5vw,17px);
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--accent);
  text-align: right; line-height: 1.7; margin: 0; max-width: 30ch; }

/* ============================================================
   Contrast corrections found by the rendered audit
   ============================================================ */

/* --text-3 is tuned for light grounds. On ink it needs its own value. */
:is(.sec--ink, .cta, .about, .trust, .ftr, .nav__mega, .callcard, .hero) .note,
.ftr__base, .callcard__tag, .about__cap { color: var(--text-3-inverse); }
.callcard__tag span:not(:last-child)::after { color: var(--text-3-inverse); }

.skip { min-height: 44px; display: inline-flex; align-items: center; }

/* ============================================================
   Motion. transform and opacity only, reduced-motion respected.
   ============================================================ */

[data-reveal] {
  opacity: 1; transform: none;
}
[data-reveal].is-in { animation: wlReveal .5s var(--ease-out); }
@keyframes wlReveal { from { opacity: .5; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
}

/* ---------- richer hover states ---------- */

.svc { overflow: hidden; }
.svc__media { overflow: hidden; }
.svc__media img { transition: transform .5s var(--ease-out); }
.svc:hover .svc__media img { transform: scale(1.04); }
.svc__go svg { transition: transform var(--t-fast) var(--ease-out); }
.svc:hover .svc__go svg { transform: translateX(4px); }
.svc { position: relative; }
.svc::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .32s var(--ease-out);
}
.svc:hover::after { transform: scaleX(1); }

.mega__link { position: relative; }
.mega__link svg { transition: transform var(--t-fast) var(--ease-out); }
.mega__link:hover svg { transform: translateX(3px); }

.btn { position: relative; overflow: hidden; }
.btn--gold:hover, .btn--ink:hover { transform: translateY(-1px); }

.nav__item > a { position: relative; }
.nav__item > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: var(--accent); transform: scaleX(0); transform-origin: center;
  transition: transform .26s var(--ease-out);
}
.nav__item > a:hover::after { transform: scaleX(1); }

.ftr a { position: relative; display: inline-block; }
.ftr a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .26s var(--ease-out);
}
.ftr a:hover::after { transform: scaleX(1); }

.stat__n { transition: color var(--t-fast) var(--ease-out); }

/* ============================================================
   FAQ. Richer, still quiet.
   ============================================================ */

.faq { border-top: 1px solid var(--line); }
.faq details {
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: background .3s var(--ease-out);
}
.faq details::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent); transform: scaleY(0); transform-origin: top;
  transition: transform .34s var(--ease-out);
}
.faq details[open] { background: var(--surface); }
.faq details[open]::before { transform: scaleY(1); }
.faq details:hover { background: var(--surface); }

.faq summary {
  display: flex; align-items: center; gap: 20px; cursor: pointer;
  padding: 26px 26px 26px 28px; list-style: none;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(16px, 1.5vw, 19px); color: var(--text);
  transition: color var(--t-fast) var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--text-accent); }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.faq__q { flex: 1 1 auto; }
.faq__i {
  flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid var(--line);
  border-radius: 50%; display: grid; place-items: center; color: var(--text-accent);
  transition: transform .34s var(--ease-out), background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.faq__i svg { width: 15px; height: 15px; }
.faq details[open] .faq__i { transform: rotate(180deg); background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.faq summary:hover .faq__i { border-color: var(--accent); }

.faq__a { padding: 0 26px 28px 28px; max-width: 74ch; }
.faq__a p { font-size: 16px; line-height: 1.68; color: var(--text-2); }
.faq details[open] .faq__a { animation: faqIn .34s var(--ease-out); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .faq details[open] .faq__a { animation: none; } }

/* ============================================================
   Process steps as a stacked, numbered list
   ============================================================ */

.flow { border: 1px solid var(--line); background: var(--bg); }
.flow__row {
  display: grid; grid-template-columns: 64px 1fr; gap: 0 4px;
  padding: 26px 28px; border-bottom: 1px solid var(--line);
  position: relative; transition: background var(--t-fast) var(--ease-out);
}
.flow__row:last-child { border-bottom: 0; }
.flow__row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); transform: scaleY(0); transform-origin: top;
  transition: transform .34s var(--ease-out);
}
.flow__row:hover { background: var(--surface); }
.flow__row:hover::before { transform: scaleY(1); }
.flow__n {
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: var(--ls-caps); color: var(--text-accent); padding-top: 4px;
}
.flow__t { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--text); margin-bottom: 6px; }
.flow__d { font-size: 15px; line-height: 1.6; color: var(--text-2); }
@media (max-width: 560px) { .flow__row { grid-template-columns: 1fr; gap: 8px; } }

/* ============================================================
   Footer rhythm
   ============================================================ */

.ftr { padding: clamp(56px,7vw,88px) 0 28px; }
.ftr__top { align-items: center; }
.ftr__tag { text-align: right; }
.ftr__grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: clamp(28px,4vw,56px); }
.ftr address { color: var(--text-inverse-2); }
.ftr__line { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 13px; }
.ftr__line svg { width: 17px; height: 17px; color: var(--accent); flex: none; margin-top: 3px; }
.ftr__phone {
  font-family: var(--font-display); font-weight: 800; font-size: 21px;
  color: var(--text-inverse); text-decoration: none; letter-spacing: -.01em;
}
.ftr__phone:hover { color: var(--accent); }
.ftr__rule { border: 0; border-top: 1px solid rgba(245,245,245,.16); margin: 20px 0; }
.ftr__base { justify-content: space-between; }
.ftr__base nav { display: flex; gap: 22px; }
@media (max-width: 820px) {
  .ftr__tag { text-align: left; }
  .ftr__base { flex-direction: column; gap: 12px; }
}

@media (max-width: 900px) {
  .sec .about__in { grid-template-columns: 1fr !important; }
}

/* ============================================================
   Corrections from the rendered mobile audit.
   These live last on purpose: the footer grid override above
   was defeating the earlier media queries, which is the cascade
   collision this block now closes.
   ============================================================ */

/* the mega menu sits on ink, so its supporting text needs the ink token */
.mega__t span { color: var(--text-3-inverse); }

/* watermark must never widen the page */
.about__body { overflow: hidden; }
.about__mark { max-width: 60%; right: -8%; }
@media (max-width: 900px) { .about__mark { display: none; } }

/* inline links and phone numbers still need a real tap target */
.linkarrow, .mega__all, .ftr__phone, .mega__phone, .linkphone,
.ftr a, .callcard__n { min-height: 44px; display: inline-flex; align-items: center; }
.ftr ul { gap: 2px; }
.ftr__line { align-items: center; }

/* footer, responsive. Must come after the base grid rule above. */
@media (max-width: 1020px) { .ftr__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px)  { .ftr__grid { grid-template-columns: 1fr; } }
@media (max-width: 620px)  { .ftr__top { flex-direction: column; align-items: flex-start; } .ftr__tag { text-align: left; } }

/* placeholder chips are internal scaffolding, but Joy reads them, so they
   have to be legible: the ink on the gold tint was measuring 2.45:1 */
.flag { color: #4A360B; }
.flag--ink { color: #E0B057; }

/* review stars carry the rating, so they are content rather than decoration */
.rev__stars { color: var(--text-accent); }

/* every inline contact link gets a real target */
.sec a[href^="tel:"], .sec a[href^="mailto:"],
address a, .contactlist a { min-height: 44px; display: inline-flex; align-items: center; }

/* the header logo link */
.hdr__logo { min-height: 44px; }

/* ============================================================
   Service page furniture
   ============================================================ */

.phero { position: relative; background: var(--ink-900); overflow: hidden; }
.phero__media { position: absolute; inset: 0; }
.phero__media img { width: 100%; height: 100%; object-fit: cover; filter: var(--grade-photo); }
.phero__scrim { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(17,17,17,.92) 0%, rgba(17,17,17,.76) 44%, rgba(17,17,17,.34) 100%); }
.phero__in { position: relative; padding: clamp(56px,7vw,92px) 0 clamp(48px,6vw,76px); }
.phero h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(30px,5vw,60px); line-height: 1.0; letter-spacing: -.028em;
  text-transform: uppercase; color: var(--text-inverse); max-width: 17ch;
}
.phero__sub { max-width: 46ch; margin-top: 20px; color: var(--text-inverse-2); font-size: var(--fs-body-lg); }
.phero .crumbs { padding: 0 0 22px; }
.phero .crumbs li, .phero .crumbs a { color: var(--text-3-inverse); }
.phero .crumbs a:hover { color: var(--accent); }
.phero .crumbs [aria-current="page"] { color: var(--text-inverse); }
.phero .eyebrow { display: flex; align-items: center; gap: 16px; color: var(--text-accent-inverse); }
.phero .eyebrow::before { content: ""; width: 64px; height: 2px; background: var(--accent); flex: none; }
@media (max-width: 620px) { .phero .eyebrow::before { width: 28px; } }

/* answer-first block with a facts rail */
.lead2 { display: grid; grid-template-columns: 1.45fr .55fr; gap: clamp(32px,4vw,64px); align-items: start; }
@media (max-width: 900px) { .lead2 { grid-template-columns: 1fr; } }

.rail { border: 1px solid var(--line); border-top: 2px solid var(--accent); background: var(--surface); }
.rail__h { font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-accent);
  padding: 18px 22px 14px; margin: 0; }
.rail dl { margin: 0; padding: 0 22px 20px; }
.rail dt { font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3); margin-top: 14px; }
.rail dd { margin: 4px 0 0; font-size: 15.5px; color: var(--text); }
.rail__foot { border-top: 1px solid var(--line); padding: 18px 22px; }

/* split photo + text */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,60px); align-items: center; }
.split--rev > figure { order: 2; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split--rev > figure { order: 0; } }
.split figure img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* full-bleed photo band */
.band { position: relative; min-height: 340px; display: grid; place-items: center; overflow: hidden; }
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--grade-photo); }
.band__scrim { position: absolute; inset: 0; background: rgba(17,17,17,.66); }
.band__in { position: relative; text-align: center; padding: clamp(48px,6vw,80px) 24px; max-width: 60ch; }
.band__in h2 { color: var(--text-inverse); font-size: clamp(24px,3vw,38px); text-transform: uppercase; letter-spacing: -.02em; }
.band__in p { color: var(--text-inverse-2); margin: 16px auto 0; }
.band__cap { position: absolute; left: 0; bottom: 0; margin: 0; padding: 8px 14px;
  background: rgba(17,17,17,.72); font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3-inverse); }

/* No reviews yet.
   Six ghost cards showing five gold stars each read as a rating whatever the
   flag underneath them says, and one of them attributed a review to EV work
   that is not confirmed to be in scope. Replaced with a single honest panel:
   the argument on the left, one marked slot on the right for the first real
   one. */
.noproof { display: grid; grid-template-columns: 1.25fr .75fr;
  gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: 34px; }
.noproof__say .lede { font-size: var(--fs-body-lg); color: var(--text); }
.noproof__slot .slot { aspect-ratio: 4 / 3; }
@media (max-width: 860px) { .noproof { grid-template-columns: 1fr; } }

/* 404. The one page that is a moment rather than a document, so it takes a
   bolder treatment than the rest of the site: the code set oversized behind
   the message, at a weight that reads as a graphic rather than as text.
   Hidden from assistive tech, since the heading already says what happened. */
.oops { position: relative; background: var(--ink-900); overflow: hidden; }
.oops__media { position: absolute; inset: 0; }
.oops__media img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.oops__scrim { position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--ink-900) 30%, rgba(17,17,17,.72) 100%); }
.oops__in { position: relative; display: flex; align-items: center;
  gap: clamp(24px, 5vw, 72px); padding: clamp(64px,9vw,120px) 0 clamp(56px,8vw,104px); }
.oops__code {
  flex: 0 0 auto; margin: 0;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(96px, 17vw, 230px); line-height: .8; letter-spacing: -0.05em;
  color: transparent; -webkit-text-stroke: 2px var(--gold-500);
  opacity: .55; user-select: none;
}
.oops__say { min-width: 0; }
.oops h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(30px, 5.4vw, 62px); line-height: 1.02; letter-spacing: -0.03em;
  color: var(--text-inverse); text-wrap: balance; margin-top: 18px;
}
.oops__sub { max-width: 44ch; margin-top: 20px;
  color: var(--text-inverse-2); font-size: var(--fs-body-lg); }
.oops .hero__cta { margin-top: 32px; }
@media (max-width: 820px) {
  .oops__in { flex-direction: column; align-items: flex-start; gap: 4px; }
  .oops__code { -webkit-text-stroke-width: 1.5px; }
}
@media (prefers-reduced-motion: no-preference) {
  .oops__code { transition: opacity var(--t-slow, .5s) var(--ease-out); }
}

/* A voice sample, set as a quotation because that is what it is: sample copy
   in a proposed voice, not the site speaking. The gold rule marks it as a
   specimen so nobody mistakes it for approved wording. */
.pull { margin: 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--accent); }
.pull p { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(19px, 2.2vw, 25px); line-height: 1.35; color: var(--text); }
.pull footer { margin-top: 14px; font-size: 13px; color: var(--text-3); }
.pull footer b { font-family: var(--font-display); font-size: 11px;
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-accent); }

/* The service-area corridor.
   An ordered list because the order is real: these four towns run north to
   south along Randall Road, and the county changes as you go. The numbering
   is geography, not decoration, so the spine is drawn rather than numbered. */
.corridor__wrap { position: relative; margin-top: 30px; }
.corridor__end {
  font-family: var(--font-display); font-weight: 700; font-size: 10px;
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3);
  padding-left: 46px; margin: 0;
}
.corridor__end--n { margin-bottom: 10px; }
.corridor__end--s { margin-top: 10px; }
.corridor { list-style: none; margin: 0; padding: 0; position: relative; }
/* the road itself */
.corridor::before {
  content: ""; position: absolute; left: 15px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(var(--line-strong), var(--accent));
}
.corridor li + li { border-top: 1px solid var(--line); }
.corridor a {
  position: relative; display: grid; grid-template-columns: 32px 1fr auto;
  align-items: center; gap: 18px; padding: 22px 20px 22px 0; text-decoration: none;
  transition: background var(--t-fast) var(--ease-out), padding-left var(--t-fast) var(--ease-out);
}
.corridor a:hover { background: var(--bg); padding-left: 8px; }
.corridor__dot {
  justify-self: center; width: 13px; height: 13px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--line-strong);
  transition: border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.corridor a:hover .corridor__dot { border-color: var(--accent); transform: scale(1.25); }
.corridor__body { display: grid; gap: 4px; }
.corridor__t { font-family: var(--font-display); font-weight: 700; font-size: 21px;
  line-height: 1.15; color: var(--text); }
.corridor__c { font-family: var(--font-display); font-weight: 700; font-size: 10px;
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-accent); }
.corridor__d { font-size: 14.5px; line-height: 1.55; color: var(--text-2); max-width: 58ch; }
.corridor__go svg { width: 18px; height: 18px; color: var(--text-3);
  transition: transform var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
.corridor a:hover .corridor__go svg { transform: translateX(4px); color: var(--accent); }
@media (max-width: 620px) {
  .corridor a { grid-template-columns: 32px 1fr; gap: 14px; padding-right: 0; }
  .corridor__go { display: none; }
  .corridor__t { font-size: 19px; }
}

/* Hero on a page that must not imply a place. The texture is abstract, so it
   carries the ink ground without claiming a house is in any given town. */
.phero--tex .phero__media img { opacity: .5; }

/* related services.
   The arrow lives inside the <b> with no width or height of its own, so it
   has to be sized here. Left unsized it resolves to the default replaced
   element box and the flex column stretches it to fill the card. */
.rel { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 18px; }
.rel a { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px 24px 24px;
  text-decoration: none; border: 1px solid var(--line); background: var(--bg);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out); }
.rel a:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.rel b { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--font-display); font-size: 17px; line-height: 1.25; color: var(--text); }
.rel b svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--text-3);
  transition: transform var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
.rel a:hover b svg { transform: translateX(4px); color: var(--accent); }
.rel span { padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
/* same gold underline the service cards use, so the two read as one family */
.rel a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .32s var(--ease-out);
}
.rel a:hover::after { transform: scaleX(1); }

/* ============================================================
   Contact page
   ============================================================ */

.ctc { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px,4vw,64px); align-items: start; }
@media (max-width: 900px) { .ctc { grid-template-columns: 1fr; } }
.ctc form { max-width: 560px; }
.ctc .field input, .ctc .field textarea { width: 100%; }

.infocard { border: 1px solid var(--line); border-top: 2px solid var(--accent); background: var(--surface); padding: 26px; }
/* two-up for the open questions on the services hub. Deliberately not the
   service card grid: these are not services yet and must not look like one. */
.opencards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.opencards .infocard { background: var(--bg); }
.opencards .note { max-width: 46ch; }
@media (max-width: 820px) { .opencards { grid-template-columns: 1fr; } }
.infocard h2 { font-size: 19px; margin-bottom: 6px; }
.infoline { display: flex; gap: 13px; align-items: flex-start; padding: 15px 0; border-bottom: 1px solid var(--line); }
.infoline:last-of-type { border-bottom: 0; }
.infoline svg { width: 19px; height: 19px; color: var(--accent); flex: none; margin-top: 3px; }
.infoline b { display: block; font-family: var(--font-display); font-size: 11px;
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }
.infoline a { font-size: 16px; color: var(--text); text-decoration: none; }
.infoline a:hover { color: var(--text-accent); }
.infoline .big { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.01em; }



/* ---- review chrome. Not part of the site. ---- */

/* ============================================================
   WordPress theme additions. Everything above is the approved
   static CSS, unchanged. Keep it that way: fix upstream first.
   ============================================================ */

/* the gold closing period on headlines, drawn by wl_heading() */
.dot { color: var(--accent); }

/* prose pages (privacy, accessibility) render the block editor body */
.prose h2 { font-size: clamp(22px, 2.4vw, 28px); margin-top: 40px; }
.prose h3 { font-size: 20px; margin-top: 28px; }
.prose p, .prose li { margin-top: 14px; max-width: 68ch; }
.prose ul, .prose ol { padding-left: 22px; }
.prose table { width: 100%; border-collapse: collapse; text-align: left; margin-top: 20px; }
.prose th { padding: 10px 14px; border-bottom: 2px solid var(--text); }
.prose td { padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--text-2); font-size: 15px; }
.prose td:first-child { font-weight: 600; color: var(--text); }
.prose .wp-block-table { overflow-x: auto; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Gravity Forms, styled as the static .field controls. GF's own theme CSS is
   switched off in functions.php so these rules are the only ones. */
.gform_wrapper .gform_fields { display: grid; gap: 0; }
.gform_wrapper .gfield { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.gform_wrapper .gfield_label { font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text); }
.gform_wrapper .gfield_required { color: var(--text-accent); margin-left: 4px; }
.gform_wrapper input[type="text"], .gform_wrapper input[type="tel"], .gform_wrapper input[type="email"],
.gform_wrapper textarea, .gform_wrapper select {
  font-family: var(--font-sans); font-size: 16px; color: var(--text); width: 100%;
  padding: 13px 14px; background: var(--bg); border: 1px solid var(--text-3); border-radius: var(--r-input, 2px);
}
.gform_wrapper input:focus, .gform_wrapper textarea:focus, .gform_wrapper select:focus {
  outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--text);
}
.gform_wrapper .gfield_description { font-size: 13px; color: var(--text-3); }
.gform_wrapper .gfield_validation_message, .gform_wrapper .validation_message { font-size: 13px; color: var(--negative); }
.gform_wrapper .gform_validation_errors { border: 1px solid var(--negative); padding: 12px 14px; margin-bottom: 20px; font-size: 15px; }
.gform_wrapper .gform_validation_errors h2 { font-size: 15px; }
.gform_wrapper .gform_footer input[type="submit"], .gform_wrapper .gform_button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  border: 2px solid transparent; border-radius: var(--r-button, 2px); cursor: pointer;
  background: var(--ink-900); color: var(--text-inverse);
}
.gform_wrapper .gform_footer input[type="submit"]:hover { background: #000; }
.gform_wrapper .gform_footer input[type="submit"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gform_wrapper input[type="file"] { font-size: 15px; }
.gform_confirmation_message { border-left: 3px solid var(--accent); padding: 14px 18px; background: var(--surface); font-size: 16px; }
.gform_wrapper .gfield--type-honeypot { position: absolute; left: -9999px; }

/* phone menu: the Services submenu opens on tap (theme.js sets data-sub) */
@media (max-width: 1020px) {
  .nav__item--mega .nav__mega { display: none !important; }
  .nav__item--mega[data-sub] .nav__mega { display: block !important; position: static; border: 0; box-shadow: none; }
  .nav__item--mega[data-sub] .mega__in { padding: 0 var(--gutter) 20px; gap: 12px; grid-template-columns: 1fr; }
  .nav__item--mega[data-sub] .mega__card { display: none; }
  .nav__item--mega[data-sub] > a svg { transform: rotate(180deg); }
}

/* phone menu, corrections from the rendered WordPress audit:
   the panel opens under the header wherever the header is (the utility bar
   sits above it), and the Services submenu stacks under its item */
@media (max-width: 1020px) {
  .nav { top: var(--nav-top, var(--header-h)); }
  .nav__item { flex-direction: column; align-items: stretch; height: auto; }
  .nav__item > a { width: 100%; }
}
@media (max-width: 820px) { .nav { top: var(--nav-top, var(--header-h-sm)); } }

/* the hero paddings above use the vertical shorthand, which zeroes the side
   gutter .wrap provides. Invisible on wide screens, text on the edge on a phone. */
.wrap.hero__in, .wrap.phero__in, .wrap.oops__in, .wrap.cta__in { padding-left: 24px; padding-right: 24px; }

/* icons drawn by wl_icon() carry no width attribute; every placement sizes
   them here. The two below had none and filled the screen on a phone. */
.hdr__cta svg, .callbar svg { width: 18px; height: 18px; flex: none; }
.btn svg { width: 18px; height: 18px; flex: none; }