/* ==========================================================================
   Esperto Roofing — Phoenix, AZ
   Palette: greige paper / bitumen ink / signal orange
   Type: Archivo (display + text), DM Mono (labels, data)
   ========================================================================== */

/* Locally hosted Latin subsets of the existing site fonts. */
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400 700;
  font-display: swap;
  src: url("fonts/archivo-latin-v25.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono"; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url("fonts/dm-mono-regular-latin-v16.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono"; font-style: normal; font-weight: 500;
  font-display: swap;
  src: url("fonts/dm-mono-medium-latin-v16.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif"; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url("fonts/instrument-serif-regular-latin-v5.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif"; font-style: italic; font-weight: 400;
  font-display: swap;
  src: url("fonts/instrument-serif-italic-latin-v5.woff2") format("woff2");
}

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }

/* --- tokens --------------------------------------------------------------- */
:root {
  --bg:        #E9E6E1;
  --bg-deep:   #DFDBD3;
  --paper:     #F5F3EF;
  --ink:       #141311;
  --ink-80:    #35312C;
  --ink-60:    #5E584F;
  --ink-40:    #8A8378;
  --orange:    #F0521E;
  --orange-lo: #C93F12;
  --sun:       #E8A03C;
  --night:     #141311;
  --night-2:   #1F1D19;

  --rule:      rgba(20, 19, 17, .16);
  --rule-soft: rgba(20, 19, 17, .08);
  --rule-dark: rgba(245, 243, 239, .16);

  --f-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --gut: clamp(18px, 4vw, 48px);
  --max: 1360px;
  --pad: clamp(72px, 9vw, 136px);
  --r-s: 6px;
  --r-m: 14px;
  --r-l: 22px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --header-h: 100px;
}

/* --- base ----------------------------------------------------------------- */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: clamp(1rem, .97rem + .18vw, 1.075rem);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

::selection { background: var(--orange); color: #fff; }

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

.wrap {
  width: min(var(--max), 100%);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.section { padding-block: var(--pad); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--gut); top: -80px; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: 12px 18px; border-radius: var(--r-s);
  font: 500 .85rem/1 var(--f-mono);
  transition: top .2s var(--ease);
}
.skip:focus { top: 14px; }

/* --- type ----------------------------------------------------------------- */
h1, h2, h3, h4 { font-weight: 600; letter-spacing: 0; line-height: 1.04; }
h1, h2 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  letter-spacing: 0;
}

.h-xl {
  font-size: clamp(2.55rem, 6.4vw, 5.1rem);
  line-height: .96;
  letter-spacing: 0;
  font-weight: 400;
}
.h-lg {
  font-size: clamp(2.8rem, 4.3vw, 4.3rem);
  line-height: 1.1;
  letter-spacing: 0;
}
.h-md { font-size: clamp(1.35rem, 1.9vw, 1.75rem); letter-spacing: 0; }
.h-sm { font-size: 1.075rem; letter-spacing: 0; font-weight: 600; }

.eyebrow {
  font: 400 .72rem/1 var(--f-mono);
  letter-spacing: .04em;
  color: var(--ink-40);
  text-transform: none;
}
.eyebrow--light { color: rgba(245, 243, 239, .5); }

.lede { font-size: clamp(1.05rem, 1.4vw, 1.22rem); line-height: 1.55; color: var(--ink-80); }
.muted { color: var(--ink-60); }
.mono { font-family: var(--f-mono); }
.tnum { font-variant-numeric: tabular-nums; }

/* section head: eyebrow left, title + lede in a measured column */
.head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-bottom: clamp(38px, 5vw, 64px);
}
.head__top { display: flex; align-items: baseline; gap: 16px; }
.head__rule { flex: 1; height: 1px; background: var(--rule); }
.head__body { display: grid; gap: 22px; }
@media (min-width: 900px) {
  .head__body { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: end; }
}

/* --- buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px;
  border-radius: 100px;
  font-size: .95rem; font-weight: 600; letter-spacing: 0;
  text-decoration: none;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              transform .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--orange); color: #fff; }
.btn--primary:hover { background: var(--orange-lo); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: #000; }
.btn--ghost { border: 1px solid var(--rule); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); background: rgba(20, 19, 17, .04); }
.btn--glass {
  border: 1px solid rgba(255, 255, 255, .45);
  color: #fff;
  backdrop-filter: blur(8px);
  background: rgba(20, 19, 17, .22);
}
.btn--glass:hover { background: rgba(20, 19, 17, .42); border-color: #fff; }
.btn__ico { width: 15px; height: 15px; flex: none; }

/* underlined text link, workkit-style em dash prefix */
.link {
  display: inline-flex; align-items: baseline; gap: 8px;
  width: fit-content; justify-self: start;
  text-decoration: none;
  font: 500 .92rem/1.2 var(--f-mono);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.link:hover { color: var(--orange); border-color: var(--orange); }
.link::before { content: "—"; color: var(--orange); }

/* --- header --------------------------------------------------------------- */
.header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.header::after {
  content: ""; position: absolute; inset: auto 0 0; height: 1px;
  background: var(--rule); opacity: 0; transition: opacity .35s var(--ease);
}
.header.is-stuck { background: rgba(233, 230, 225, .98); }
.header.is-stuck::after { opacity: 1; }
.header__in {
  width: min(var(--max), 100%);
  margin-inline: auto; padding-inline: var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand__logo {
  /* sized by HEIGHT, not width — the header is a fixed-height bar, so height is
     the dimension that has to fit. Width follows the artwork's ratio.
     Keep it near 75% of --header-h so the mark has air above and below. */
  display: block;
  height: clamp(64px, 7vw, 76px);
  width: auto;
  flex: none;
}

/* desktop services navigation */
.nav {
  display: none;
  align-items: center;
  align-self: stretch;
}
@media (min-width: 1180px) { .nav { display: flex; } }
.nav-services {
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;
}
.nav-services::after {
  content: "";
  position: absolute;
  top: 100%; left: -20px; right: -20px;
  height: 16px;
}
.nav-services__control { display: inline-flex; align-items: center; }
.nav-contact {
  min-height: 44px; margin-left: 24px; padding: 10px 2px;
  display: inline-flex; align-items: center;
  color: var(--ink); text-decoration: none;
  font-size: .95rem; font-weight: 500;
  transition: color .2s var(--ease);
}
.nav-contact:hover,
.nav-contact[aria-current="page"] { color: var(--orange); }
.nav-services__link {
  min-height: 44px;
  display: inline-flex; align-items: center;
  padding: 10px 2px;
  color: var(--ink); text-decoration: none;
  font-size: .95rem; font-weight: 500;
  transition: color .2s var(--ease);
}
.nav-services__link:hover,
.nav-services.is-open .nav-services__link { color: var(--orange); }
.nav-services__trigger {
  width: 34px; height: 44px;
  display: grid; place-items: center;
  color: var(--ink); border-radius: var(--r-s);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav-services__trigger:hover,
.nav-services__trigger[aria-expanded="true"] {
  color: var(--orange); background: rgba(240, 82, 30, .06);
}
.nav-services__trigger svg {
  width: 16px; height: 16px;
  transition: transform .22s var(--ease);
}
.nav-services__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-services__panel {
  position: absolute; z-index: 5;
  top: calc(100% + 8px); left: 50%;
  width: min(680px, calc(100vw - var(--gut) * 2));
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(20, 19, 17, .12), 0 2px 8px rgba(20, 19, 17, .05);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, -6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.nav-services.is-open .nav-services__panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
}
.nav-services__top {
  display: flex; align-items: end; justify-content: space-between; gap: 20px;
  padding: 4px 6px 14px;
  border-bottom: 1px solid var(--rule-soft);
}
.nav-services__eyebrow {
  font: 500 .68rem/1 var(--f-mono);
  color: var(--orange); letter-spacing: .04em;
}
.nav-services__intro {
  margin-top: 6px;
  color: var(--ink-60); font-size: .86rem; line-height: 1.35;
}
.nav-services__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-top: 14px;
}
.nav-services__group { min-width: 0; }
.nav-services__group-title {
  padding: 0 8px 7px;
  font: 400 .67rem/1 var(--f-mono);
  color: var(--ink-40); letter-spacing: .04em;
}
.nav-service {
  min-height: 66px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 16px;
  align-items: center; gap: 11px;
  padding: 9px 8px;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.nav-service:hover,
.nav-service:focus-visible {
  background: rgba(240, 82, 30, .07);
  color: var(--ink);
  transform: translateX(2px);
}
.nav-service:focus-visible { outline-offset: 0; }
.nav-service__icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: rgba(240, 82, 30, .09);
  color: var(--orange);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.nav-service__icon svg { width: 18px; height: 18px; }
.nav-service:hover .nav-service__icon,
.nav-service:focus-visible .nav-service__icon {
  background: var(--orange); color: #fff;
}
.nav-service__copy { min-width: 0; display: grid; gap: 3px; }
.nav-service__copy strong {
  font-size: .88rem; line-height: 1.2; font-weight: 600;
  letter-spacing: 0;
}
.nav-service__copy small {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-60); font-size: .72rem; line-height: 1.25;
}
.nav-service__arrow {
  width: 15px; height: 15px;
  color: var(--ink-40);
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.nav-service:hover .nav-service__arrow,
.nav-service:focus-visible .nav-service__arrow {
  color: var(--orange); transform: translateX(2px);
}

/* Every service keeps one navigation identity on every page. */
.nav-service,
.menu-services__inner a {
  --nav-accent: var(--orange); --nav-soft: rgba(240,82,30,.07);
  --nav-icon-bg: var(--nav-soft); --nav-border: transparent;
}
.nav-service[href="roof-inspections"],
.menu-services__inner a[href="roof-inspections"] {
  --nav-accent: #f0521e; --nav-soft: rgba(240,82,30,.07);
  --nav-icon-bg: var(--nav-soft); --nav-border: transparent;
}
.nav-service[href="roof-repairs"],
.menu-services__inner a[href="roof-repairs"] { --nav-accent: #56636a; --nav-soft: rgba(86,99,106,.08); }
.nav-service[href="roof-replacement"],
.menu-services__inner a[href="roof-replacement"] { --nav-accent: #55705e; --nav-soft: rgba(85,112,94,.09); }
.nav-service[href="insurance-claims"],
.menu-services__inner a[href="insurance-claims"] { --nav-accent: #4d7188; --nav-soft: rgba(77,113,136,.09); }
.nav-service[href="emergency-roofing"],
.menu-services__inner a[href="emergency-roofing"] { --nav-accent: #b54d33; --nav-soft: rgba(181,77,51,.09); }
.nav-service[href="commercial-roofing"],
.menu-services__inner a[href="commercial-roofing"] { --nav-accent: #3e6b55; --nav-soft: rgba(62,107,85,.09); }
.nav-service:hover,
.nav-service:focus-visible,
.nav-service[aria-current="page"] { background: var(--nav-soft); }
.nav-service .nav-service__icon {
  color: var(--nav-accent); border: 1px solid var(--nav-border); background: var(--nav-icon-bg);
}
.nav-service:hover .nav-service__icon,
.nav-service:focus-visible .nav-service__icon,
.nav-service[aria-current="page"] .nav-service__icon { color: #fff; background: var(--nav-accent); }
.nav-service:hover .nav-service__arrow,
.nav-service:focus-visible .nav-service__arrow { color: var(--nav-accent); }
.nav-services__footer {
  margin-top: 12px; padding: 13px 8px 1px;
  border-top: 1px solid var(--rule-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  color: var(--ink-60); font-size: .8rem;
}
.nav-services__footer a {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--ink); font-weight: 600; text-decoration: none;
}
.nav-services__footer a:hover { color: var(--orange); }
.nav-services__footer svg { width: 15px; height: 15px; }

.nav, .header__tel { transition: opacity .3s var(--ease); }
.is-open .nav, .is-open .header__tel { opacity: 0; pointer-events: none; }
.header__end { display: flex; align-items: center; gap: 12px; }
.header__tel {
  display: none; text-decoration: none;
  font: 500 .9rem/1 var(--f-mono); letter-spacing: 0;
  padding: 12px 4px;
}
.header__tel:hover { color: var(--orange); }
@media (min-width: 620px) { .header__tel { display: inline-flex; align-items: center; gap: 8px; } }
.header .btn { padding: 12px 20px; font-size: .88rem; }
.header__cta {
  display: none;
  font-weight: 700;
  padding-inline: 22px;
  box-shadow: 0 6px 18px rgba(240, 82, 30, .3);
  transition: background-color .25s var(--ease), transform .25s var(--ease),
              box-shadow .25s var(--ease);
}
.header__cta:hover { box-shadow: 0 10px 26px rgba(240, 82, 30, .42); }
.header__cta .btn__ico { transition: transform .25s var(--ease); }
.header__cta:hover .btn__ico { transform: translateX(3px); }
@media (min-width: 780px) { .header__cta { display: inline-flex; } }

/* menu button */
.burger {
  position: relative;
  width: 46px; height: 46px; border-radius: 100px;
  display: grid; place-items: center;
  border: 1px solid var(--rule);
  background: transparent;
  cursor: pointer;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.burger:hover { border-color: var(--ink); background: rgba(20, 19, 17, .05); }
@media (min-width: 1180px) { .burger { display: none; } }
.burger__bars {
  display: flex; flex-direction: column; align-items: center;
  gap: 5px;
}
.burger__bars span {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: var(--ink);
  transition: transform .35s var(--ease), width .3s var(--ease);
}
.burger:hover .burger__bars span:last-child { width: 12px; }
/* bars sit at ±3.5px from centre (2px tall + 5px gap) */
.is-open .burger { border-color: var(--ink); background: rgba(20, 19, 17, .05); }
.is-open .burger__bars span:first-child { transform: translateY(3.5px) rotate(45deg); }
.is-open .burger__bars span:last-child  { width: 18px; transform: translateY(-3.5px) rotate(-45deg); }

/* --- full-screen menu ----------------------------------------------------- */
.menu {
  position: fixed; inset: 0; z-index: 95;
  background: var(--bg);
  display: grid; grid-template-rows: var(--header-h) minmax(0, 1fr) auto;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .4s var(--ease), visibility .4s;
}
.menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.menu__body {
  width: min(var(--max), 100%); margin-inline: auto;
  padding: clamp(20px, 4vh, 56px) var(--gut) clamp(28px, 5vh, 64px);
  display: grid; align-content: center;
  gap: clamp(34px, 5vh, 56px);
  overflow-y: auto;
}
@media (min-width: 900px) {
  .menu__body {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: center;
    column-gap: clamp(48px, 7vw, 120px);
  }
}

/* the list — one row per link, ruled, numbered, breathing */
.menu__list {
  display: grid;
  counter-reset: mnav;
  border-top: 1px solid var(--rule-soft);
}
.menu__link,
.menu-services__head {
  counter-increment: mnav;
  position: relative;
  text-decoration: none;
  display: grid;
  grid-template-columns: clamp(28px, 4vw, 42px) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 clamp(14px, 2vw, 26px);
  padding-block: clamp(11px, 1.5vh, 18px);
  border-bottom: 1px solid var(--rule-soft);
  font-size: clamp(1.6rem, 3.6vw, 2.7rem);
  font-weight: 500; letter-spacing: 0; line-height: 1.1;
  opacity: 0; transform: translateY(14px);
  transition: color .25s var(--ease), opacity .5s var(--ease),
              transform .45s var(--ease);
}
.menu-services__head { color: var(--ink); }
.menu.is-open .menu__link,
.menu.is-open .menu-services__head {
  opacity: 1; transform: none;
  transition-delay: calc(var(--i) * 42ms);
}
.menu__link::before,
.menu-services__head::before {
  content: counter(mnav, decimal-leading-zero);
  font: 400 .68rem/1 var(--f-mono);
  letter-spacing: .12em;
  color: var(--ink-40);
  transition: color .25s var(--ease);
}
.menu__link::after {
  content: "→";
  font-size: .5em; line-height: 1;
  color: var(--orange);
  opacity: 0; transform: translateX(-10px);
  transition: opacity .25s var(--ease), transform .3s var(--ease);
}
.menu__link:hover,
.menu__link:focus-visible,
.menu-services__title:hover,
.menu-services__title:focus-visible { color: var(--orange); }
.menu__link[aria-current="page"] { color: var(--orange); }
.menu__link:hover::before,
.menu__link:focus-visible::before,
.menu-services__head:hover::before,
.menu-services__head:focus-within::before { color: var(--orange); }
.menu__link:hover::after,
.menu__link:focus-visible::after { opacity: 1; transform: none; }
.menu__link:focus-visible,
.menu-services__title:focus-visible { outline-offset: -2px; }

.menu-services__title {
  color: inherit; text-decoration: none;
  transition: color .2s var(--ease);
}
.menu-services__trigger {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  justify-self: end; align-self: center;
  border-radius: 50%; color: var(--orange);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.menu-services__trigger:hover,
.menu-services__trigger:focus-visible { background: rgba(240, 82, 30, .08); }
.menu-services__trigger > svg {
  width: clamp(20px, 2vw, 25px); height: clamp(20px, 2vw, 25px);
  color: var(--orange);
  transition: transform .22s var(--ease);
}
.menu-services.is-open .menu-services__trigger > svg { transform: rotate(180deg); }
.menu-services__panel {
  max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
  transition: max-height .28s var(--ease), opacity .2s var(--ease), visibility .28s;
}
.menu-services.is-open .menu-services__panel {
  max-height: 620px; opacity: 1; visibility: visible;
}
.menu-services__inner {
  margin: 10px 0 14px;
  padding: 10px;
  display: grid; gap: 4px;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-m);
  box-shadow: 0 10px 28px rgba(20, 19, 17, .06);
}
@media (min-width: 560px) {
  .menu-services__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.menu-services__inner a {
  position: relative;
  min-height: 62px;
  display: grid; align-content: center; gap: 4px;
  padding: 11px 38px 11px 12px;
  border-radius: 8px;
  color: var(--ink); text-decoration: none;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.menu-services__inner a::after {
  content: "→";
  position: absolute; right: 13px; top: 50%;
  color: var(--ink-40); transform: translateY(-50%);
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.menu-services__inner a:hover,
.menu-services__inner a:focus-visible {
  background: var(--nav-soft);
  transform: translateX(2px);
}
.menu-services__inner a:hover::after,
.menu-services__inner a:focus-visible::after {
  color: var(--nav-accent); transform: translate(2px, -50%);
}
.menu-services__inner a[aria-current="page"] { background: var(--nav-soft); }
.menu-services__inner a[aria-current="page"]::after { color: var(--nav-accent); }
.menu-services__inner strong {
  font-size: .92rem; line-height: 1.2; font-weight: 600;
  letter-spacing: 0;
}
.menu-services__inner span {
  color: var(--ink-60); font-size: .76rem; line-height: 1.3;
}

.menu__aside { display: grid; gap: clamp(18px, 2.4vh, 26px); align-content: start; max-width: 46ch; }

/* the CTA block — the loudest thing in the panel */
.menu__cta {
  display: grid; gap: 14px; justify-items: start;
  padding: clamp(20px, 2.6vw, 28px);
  border-radius: var(--r-m);
  background: var(--night);
  color: var(--paper);
  position: relative; overflow: hidden;
}
.menu__cta::before {
  content: ""; position: absolute; inset: auto -30% -60% auto;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 82, 30, .55), transparent 68%);
  pointer-events: none;
}
.menu__cta > * { position: relative; }
.menu__cta__tag {
  font: 500 .68rem/1 var(--f-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--sun);
}
.menu__cta__h {
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-weight: 600; letter-spacing: 0; line-height: 1.25;
  max-width: 20ch;
}
.menu__cta__btn { margin-top: 2px; box-shadow: 0 10px 26px rgba(240, 82, 30, .32); }
.menu__cta__btn:hover { box-shadow: 0 14px 32px rgba(240, 82, 30, .42); }
.menu__cta__tel {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  font: 500 .84rem/1 var(--f-mono);
  color: rgba(245, 243, 239, .62);
  transition: color .2s var(--ease);
}
.menu__cta__tel:hover { color: var(--paper); }

@media (max-width: 899px) {
  .menu__body { align-content: start; gap: 24px; }
  .menu__list { order: -1; }
  /* the about copy is on the page itself — the panel keeps links + the CTA */
  .menu__aside { gap: 0; max-width: none; }
  .menu__aside .lede, .menu__aside .eyebrow { display: none; }
  .menu__cta { padding: 20px; gap: 12px; }
  /* the footer already carries the phone number on this width */
  .menu__cta__tel { display: none; }
  .menu__link, .menu-services__head { padding-block: 9px; }
  .menu__body { padding-bottom: 18px; }
}

/* Small handsets keep the top-level rows compact; the services accordion is
   independently scrollable with the rest of the menu body. */
@media (max-width: 480px) {
  .menu__body { gap: 16px; }
  .menu__link, .menu-services__head { padding-block: 6px; font-size: clamp(1.32rem, 5.2vw, 1.62rem); }
  .menu-services__inner { padding: 7px; }
  .menu-services__inner a { min-height: 58px; padding: 10px 34px 10px 10px; }
  .menu__cta { padding: 17px 18px; gap: 10px; }
  .menu__cta__h { font-size: 1.08rem; }
}

.menu__foot {
  border-top: 1px solid var(--rule);
  padding: clamp(16px, 2vh, 22px) 0 clamp(20px, 3vh, 28px);
}
.menu__foot .wrap {
  display: flex; flex-wrap: wrap; gap: 14px 32px;
  align-items: center; justify-content: space-between;
}
@media (max-width: 620px) {
  .menu__foot .wrap { gap: 12px 20px; }
}

/* --- hero ----------------------------------------------------------------- */
.home-page {
  --service-accent: var(--orange);
  --service-accent-hover: var(--orange-lo);
  --service-accent-soft: rgba(240,82,30,.08);
  --service-accent-shadow: rgba(240,82,30,.24);
}
.home-page main { overflow: clip; }
.hero,
.subhero {
  /* same container as every other section — the panel is a rounded card, and a
     card wider than all the others reads as a bug, not a full-bleed choice */
  width: min(var(--max), 100%);
  margin-inline: auto;
  padding-top: calc(var(--header-h) + 8px);
  padding-inline: var(--gut);
}
.hero { padding-bottom: clamp(28px, 3vw, 44px); }
.hero__panel {
  position: relative; isolation: isolate;
  min-height: min(880px, 92svh);
  border-radius: var(--r-l);
  overflow: hidden;
  /* Keep transformed image/backdrop-filter layers clipped after Safari and
     Chromium recycle the hero's compositor layer during fast scrolling. */
  clip-path: inset(0 round var(--r-l));
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  contain: paint;
  display: flex; flex-direction: column; justify-content: flex-end;
  /* Matches the hero photograph's cool sky/roof tones while the LCP image
     decodes, avoiding a dark flash on reload or slower connections. */
  background: #5d7079;
}
.hero__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform: none;
}
@keyframes heroIn { to { transform: scale(1); } }
.hero__panel::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(10, 9, 8, .74) 0%, rgba(10, 9, 8, .4) 26%, rgba(10, 9, 8, .05) 62%, rgba(10, 9, 8, .16) 100%),
    linear-gradient(to right, rgba(10, 9, 8, .54) 0%, rgba(10, 9, 8, .1) 54%, rgba(10, 9, 8, 0) 100%);
}
.hero__in {
  position: relative; z-index: 2;
  padding: clamp(28px, 4vw, 54px);
  padding-top: clamp(90px, 14vw, 140px);
  display: grid; gap: clamp(18px, 2.4vw, 26px);
  color: #fff;
  max-width: 1000px;
}
.hero h1 { color: #fff; text-wrap: balance; text-shadow: 0 2px 30px rgba(10, 9, 8, .45); }
.hero__sub { text-shadow: 0 1px 18px rgba(10, 9, 8, .5); max-width: 54ch; color: rgba(255, 255, 255, .84); font-size: clamp(1.02rem, 1.3vw, 1.2rem); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.hero__note {
  font: 400 .82rem/1.5 var(--f-mono);
  color: rgba(255, 255, 255, .8);
  text-shadow: 0 1px 14px rgba(10, 9, 8, .6);
  max-width: 46ch;
}
.hero__eyebrow { color: rgba(255, 255, 255, .92); text-shadow: 0 1px 14px rgba(10, 9, 8, .6); display: flex; align-items: center; gap: 10px; }
.hero__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex: none; }

@media (max-width: 780px) {
  /* at this width the copy fills nearly the whole panel, so the desktop
     corner-vignette leaves the type sitting on bright sky — scrim the lot */
  .hero__panel::after {
    background: linear-gradient(to bottom,
      rgba(10, 9, 8, .44) 0%,
      rgba(10, 9, 8, .74) 15%,
      rgba(10, 9, 8, .72) 46%,
      rgba(10, 9, 8, .86) 78%,
      rgba(10, 9, 8, .92) 100%);
  }
  .hero__in { padding-top: 64px; gap: 16px; }
  .hero__sub { color: rgba(255, 255, 255, .93); }
  .hero__note { color: rgba(255, 255, 255, .86); }
  /* the eyebrow wraps here — align the dot to the first line, not the block */
  .hero__eyebrow { align-items: flex-start; line-height: 1.45; }
  .hero__dot { margin-top: .5em; }
  /* equal, full-width tap targets instead of two mismatched pills */
  .hero__actions { gap: 10px; }
  .hero__actions .btn { flex: 1 0 100%; justify-content: center; }
}

@media (max-width: 899px) {
  .home-page { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  .home-page .hero__actions { display: none; }
}

/* credential strip along the bottom of the hero panel */
.strip {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(255, 255, 255, .18);
  background: rgba(16, 15, 14, .42);
  backdrop-filter: blur(10px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 860px) { .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.strip__item {
  padding: 18px clamp(14px, 2vw, 26px);
  display: grid; gap: 4px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
}
@media (min-width: 860px) { .strip__item { border-top: 0; } }
.strip__item + .strip__item { border-left: 1px solid rgba(255, 255, 255, .18); }
@media (max-width: 859px) {
  .strip__item:nth-child(odd) { border-left: 0; }
}
.strip__k { font-size: clamp(1.1rem, 1.7vw, 1.42rem); font-weight: 600; letter-spacing: 0; line-height: 1.1; }
.strip__v { font: 400 .7rem/1.3 var(--f-mono); color: rgba(255, 255, 255, .62); }
.stars { color: var(--sun); letter-spacing: .06em; }

/* --- subpage hero ---------------------------------------------------------
   A shorter cousin of the homepage hero: same panel, radius and scrim
   language, roughly half the height, so a subpage reads as subordinate to
   the homepage rather than competing with it. */
.subhero {
  padding-bottom: clamp(28px, 3vw, 44px);
}
.subhero__crumbs { display: none; }
/* the panel used to sit exactly on the next section's background change, with
   every bit of breathing room landing after it. Split it: some page ground
   under the panel, then the boundary, then a lighter top pad on the section
   that follows — it has the hero's space to lean on. */
.hero + .section, .subhero + .section { padding-top: clamp(52px, 6vw, 84px); }
.subhero__panel {
  position: relative; isolation: isolate;
  min-height: clamp(360px, 58svh, 560px);
  border-radius: var(--r-l); overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--ink-80);
}
.subhero__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
  animation: heroIn 1.6s var(--ease) forwards;
}
.subhero__panel::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(10, 9, 8, .86) 0%, rgba(10, 9, 8, .52) 46%, rgba(10, 9, 8, .12) 100%),
    linear-gradient(to right, rgba(10, 9, 8, .5) 0%, rgba(10, 9, 8, 0) 62%);
}
@media (max-width: 780px) {
  .subhero__panel::after {
    background: linear-gradient(to bottom,
      rgba(10, 9, 8, .46) 0%, rgba(10, 9, 8, .72) 22%, rgba(10, 9, 8, .88) 100%);
  }
}
.subhero__in {
  position: relative; z-index: 2;
  padding: clamp(28px, 4vw, 54px);
  padding-top: clamp(76px, 11vw, 126px);
  display: grid; gap: clamp(14px, 1.8vw, 20px);
  color: #fff; max-width: 62ch;
}
.subhero h1 { color: #fff; text-wrap: balance; text-shadow: 0 2px 30px rgba(10, 9, 8, .45); }
.subhero__sub {
  color: rgba(255, 255, 255, .9); max-width: 52ch;
  font-size: clamp(1rem, 1.25vw, 1.14rem); line-height: 1.55;
  text-shadow: 0 1px 18px rgba(10, 9, 8, .5);
}
.subhero__actions { display: none; }
@media (max-width: 780px) {
  .subhero__crumbs {
    display: block;
    margin: 0 2px 14px;
  }
  .subhero .subhero__crumbs ol { color: var(--ink-40); }
  .subhero .subhero__crumbs li + li::before { color: var(--ink-40); }
  .subhero .subhero__crumbs a { color: var(--ink-60); }
  .subhero .subhero__crumbs a:hover { color: var(--ink); }
  .subhero .subhero__crumbs [aria-current="page"] { color: var(--orange); }
  .subhero__in > .crumbs { display: none; }
}
@media (max-width: 560px) {
  .subhero__in { padding-top: 56px; }
}

/* breadcrumb */
.crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font: 400 .72rem/1.4 var(--f-mono); letter-spacing: .04em;
  color: rgba(255, 255, 255, .62);
}
.crumbs li { display: flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: "/"; color: rgba(255, 255, 255, .38); }
.crumbs a { color: rgba(255, 255, 255, .62); text-decoration: none; transition: color .2s var(--ease); }
.crumbs a:hover { color: #fff; }
.crumbs [aria-current="page"] { color: var(--orange); }

/* --- subpage closing CTA -------------------------------------------------- */
.endcta__panel {
  background: var(--night); color: var(--paper);
  border-radius: var(--r-l);
  padding: clamp(30px, 4vw, 62px);
  display: grid; gap: clamp(24px, 3vw, 44px);
}
@media (min-width: 860px) {
  .endcta__panel { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
/* the panel also closes the FAQ section on pages with no separate endcta */
.faq__cta { margin-top: clamp(52px, 6vw, 88px); }
.endcta__copy { display: grid; gap: 16px; }
.endcta__copy h2 { color: #fff; }
.endcta__copy p { color: rgba(245, 243, 239, .7); max-width: 52ch; }
.endcta__actions {
  display: flex; flex-wrap: nowrap;
  align-items: center; justify-content: flex-start;
  gap: 12px;
}
@media (min-width: 860px) { .endcta__actions { justify-content: flex-end; } }
.endcta__actions .btn { justify-content: center; }
.endcta__actions .link {
  min-height: 50px;
  align-items: center; justify-content: center;
  padding: 0 20px;
  border: 1px solid rgba(245, 243, 239, .34);
  border-radius: 100px;
  white-space: nowrap;
}
.endcta__actions .link::before { display: none; }
.link--light { color: rgba(245, 243, 239, .78); border-color: var(--rule-dark); }
.link--light:hover { color: #fff; border-color: #fff; }
@media (max-width: 620px) {
  .endcta__actions { display: grid; width: 100%; }
  .endcta__actions .btn,
  .endcta__actions .link { width: 100%; justify-content: center; }
}

/* --- service subpage foundation ------------------------------------------ */
.service-foundation__grid {
  display: grid;
  border-top: 1px solid var(--rule);
}
@media (min-width: 780px) {
  .service-foundation__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.service-foundation__item {
  min-width: 0;
  padding: clamp(24px, 3vw, 38px) 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  align-content: start;
  gap: 12px;
}
@media (min-width: 780px) {
  .service-foundation__item {
    padding-inline: clamp(22px, 3vw, 42px);
    border-left: 1px solid var(--rule);
  }
  .service-foundation__item:first-child { padding-left: 0; border-left: 0; }
  .service-foundation__item:last-child { padding-right: 0; }
}
/* the step number carries the accent; .eyebrow's --ink-40 let it disappear */
.service-foundation__item > .eyebrow {
  font-size: .82rem;
  font-weight: 500;
  color: var(--orange);
  letter-spacing: .08em;
}
.service-foundation__item h3 { font-size: clamp(1.2rem, 1.7vw, 1.48rem); }
.service-foundation__item p:last-child { color: var(--ink-60); max-width: 34ch; }

.service-directory {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--rule);
}
@media (min-width: 760px) {
  .service-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.service-directory__item {
  position: relative;
  min-height: 156px;
  padding: clamp(24px, 3vw, 38px) clamp(48px, 5vw, 72px) clamp(24px, 3vw, 38px) 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  display: grid;
  align-content: start;
  gap: 9px;
  transition: color .22s var(--ease), padding-left .22s var(--ease);
}
@media (min-width: 760px) {
  .service-directory__item:nth-child(even) {
    padding-left: clamp(24px, 3vw, 42px);
    border-left: 1px solid var(--rule);
  }
}
.service-directory__item:hover,
.service-directory__item:focus-visible { color: var(--orange); padding-left: 8px; }
@media (min-width: 760px) {
  .service-directory__item:nth-child(even):hover,
  .service-directory__item:nth-child(even):focus-visible {
    padding-left: calc(clamp(24px, 3vw, 42px) + 8px);
  }
}
.service-directory__item h3 { font-size: clamp(1.3rem, 2vw, 1.72rem); }
.service-directory__item p { color: var(--ink-60); max-width: 42ch; }
.service-directory__item > span {
  position: absolute; right: clamp(12px, 2vw, 24px); top: clamp(28px, 3vw, 42px);
  color: var(--orange); font-size: 1.15rem;
  transition: transform .22s var(--ease);
}
.service-directory__item:hover > span,
.service-directory__item:focus-visible > span { transform: translateX(4px); }

/* --- the crew ------------------------------------------------------------- */
.team { background: var(--bg-deep); }
.team__grid {
  display: grid;
  gap: clamp(30px, 5vw, 68px);
  align-items: stretch;
}
@media (min-width: 940px) {
  .team .head__body { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(34px, 4vw, 56px); }
  .team__grid { grid-template-columns: minmax(0, 1.14fr) minmax(390px, .86fr); }
  .team .head__body { align-items: start; }
}

.team__media {
  position: relative; isolation: isolate;
  border-radius: 8px; overflow: hidden;
  background: var(--ink-80);
  box-shadow: 0 24px 56px rgba(20, 19, 17, .13);
}
.team__media::before {
  content: ""; position: absolute; z-index: 3; inset: 0;
  background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, .22) 50%, transparent 62%);
  pointer-events: none;
  transform: translateX(-130%);
  transition: transform 1.15s var(--ease) .18s;
}
.team__media.is-in::before { transform: translateX(130%); }
.team__media img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  transform: scale(1.035);
  transition: transform 1.2s var(--ease), filter .7s var(--ease);
}
.team__media.is-in img { transform: scale(1); }
@media (min-width: 940px) {
  .team__media { min-height: 660px; }
  .team__media img {
    aspect-ratio: auto;
    height: 100%;
    object-position: center center;
  }
}
/* same treatment as the services panel — a heavy bottom scrim carrying
   caption type large enough to read as a statement, not a label */
.team__media::after {
  content: ""; position: absolute; inset: auto 0 0; height: 62%; pointer-events: none;
  background: linear-gradient(to top,
    rgba(10, 9, 8, .9) 0%, rgba(10, 9, 8, .52) 42%, rgba(10, 9, 8, 0) 100%);
}
.team__cap {
  position: absolute; z-index: 1;
  left: clamp(20px, 2.2vw, 30px); right: clamp(20px, 2.2vw, 30px);
  bottom: clamp(22px, 2.4vw, 32px);
  display: grid; gap: 9px; color: #fff;
}
.team__loc {
  display: inline-flex; align-items: center; gap: 9px;
  font: 400 .72rem/1 var(--f-mono); letter-spacing: .1em;
  color: rgba(255, 255, 255, .72);
}
.team__name {
  font-size: clamp(1.38rem, 1.95vw, 1.8rem);
  font-weight: 600; letter-spacing: 0; line-height: 1.12;
  text-shadow: 0 1px 18px rgba(10, 9, 8, .5);
  text-wrap: balance;
}
.team__meta {
  font: 400 .74rem/1 var(--f-mono); letter-spacing: .02em;
  color: rgba(255, 255, 255, .7);
}
.team__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex: none; }

/* Editorial promise stack beside the crew image. */
.team__copy { display: flex; flex-direction: column; }
.team__points { flex: 1; display: flex; flex-direction: column; }
@media (min-width: 940px) {
  .team .team__points {
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }
}
.team__points li {
  flex: 1; position: relative; overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 clamp(14px, 1.5vw, 20px);
  align-content: center; align-items: start;
  padding: clamp(22px, 2.5vw, 34px) clamp(8px, 1vw, 14px);
  border-top: 1px solid var(--rule);
  opacity: 0;
  transform: translateX(18px);
  transition: opacity .58s var(--ease), transform .58s var(--ease), background-color .25s var(--ease), padding-left .25s var(--ease);
}
.team__points li:last-child { border-bottom: 1px solid var(--rule); }
.team__copy.is-in .team__points li { opacity: 1; transform: none; }
.team__copy.is-in .team__points li:nth-child(2) { transition-delay: .1s; }
.team__copy.is-in .team__points li:nth-child(3) { transition-delay: .2s; }
@media (hover: hover) {
  .team__copy.is-in .team__points li:hover { padding-left: 18px; background: rgba(245, 243, 239, .54); transform: translateX(5px); transition-delay: 0s; }
  .team__points li:hover .team__ico { color: #fff; background: var(--orange); transform: rotate(-4deg); }
}
.team__ico {
  flex: none; margin-top: 1px;
  width: 42px; height: 42px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(240, 82, 30, .11);
  color: var(--orange);
  transition: color .25s var(--ease), background-color .25s var(--ease), transform .3s var(--ease);
}
.team__ico svg { width: 19px; height: 19px; }
.team__pt { display: grid; gap: 7px; }
.team__say {
  font-size: clamp(1.08rem, 1.4vw, 1.24rem);
  font-weight: 600; letter-spacing: 0; line-height: 1.3;
  color: var(--ink); text-wrap: pretty;
}
.team__sub { color: var(--ink-60); font-size: .93rem; line-height: 1.55; max-width: 50ch; }
/* the concrete version of the promise above it — tinted rather than outlined,
   so it does not read as a copy of the service chips */
.team__chip {
  justify-self: start; margin-top: 3px;
  font: 400 .71rem/1 var(--f-mono); letter-spacing: .02em;
  color: var(--orange-lo);
  background: rgba(240, 82, 30, .09);
  border-radius: 100px;
  padding: 8px 13px;
}

/* Credentials and customer rating form one bridge into the reviews. */
.team__band {
  margin-top: clamp(34px, 5vw, 66px);
  padding: clamp(22px, 2.8vw, 34px) clamp(2px, 1vw, 12px);
  border-block: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
}
.team__creds {
  display: flex; flex-wrap: wrap;
  gap: 10px clamp(22px, 3vw, 44px);
  font: 400 .78rem/1.4 var(--f-mono); color: var(--ink-40);
  letter-spacing: .02em;
}
.team__creds b { color: var(--ink); font-weight: 500; }
.team__creds li { display: inline-flex; align-items: center; gap: 9px; }
.team__creds li::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 2px; background: var(--orange); }
@media (max-width: 560px) {
  .team__creds { gap: 8px; width: 100%; }
  .team__creds li { width: 100%; }
}
@media (max-width: 760px) {
  .team__band { align-items: flex-start; flex-direction: column; }
}

.team-reviews__rating {
  width: fit-content;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 2px 12px;
}
.team-reviews__rating .eyebrow { grid-column: 1 / -1; margin-bottom: 8px; }
.team-reviews__rating > strong {
  color: var(--ink);
  font: 400 2.7rem/.85 "Instrument Serif", Georgia, serif;
  letter-spacing: 0;
}
.team-reviews__rating small {
  grid-column: 1 / -1;
  color: var(--ink-40);
  font: 400 .59rem/1.3 var(--f-mono);
}
.team-reviews__stars,
.team-review__stars { color: #e9a600; font-size: .84rem; line-height: 1; letter-spacing: 0; }
.team-reviews__rating .team-reviews__stars { font-size: .95rem; }
.team-reviews__grid { min-width: 0; margin-top: 16px; display: grid; align-items: start; gap: 16px; }
.team-review {
  width: 100%;
  min-width: 0;
  min-height: 310px;
  padding: clamp(23px, 3vw, 32px);
  border: 1px solid rgba(20, 19, 17, .1);
  border-radius: 8px;
  background: rgba(245, 243, 239, .78);
  box-shadow: 0 12px 30px rgba(20, 19, 17, .045);
  display: flex;
  flex-direction: column;
  gap: 21px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .62s var(--ease), transform .62s var(--ease), border-color .25s var(--ease), box-shadow .3s var(--ease), background-color .25s var(--ease);
}
.team-reviews__grid.is-in .team-review { opacity: 1; transform: none; }
.team-reviews__grid.is-in .team-review:nth-child(2) { transition-delay: .09s; }
.team-reviews__grid.is-in .team-review:nth-child(3) { transition-delay: .18s; }
.team-review header {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 12px;
}
.team-review__avatar {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  font: 500 .7rem/1 var(--f-mono);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26);
  transition: transform .3s var(--ease);
}
.team-review__avatar--orange { background: #d95c32; }
.team-review__avatar--blue { background: #46758a; }
.team-review__avatar--green { background: #557b63; }
.team-review header h3 { font: 600 .94rem/1.25 var(--f-sans); letter-spacing: 0; }
.team-review header p { margin-top: 4px; color: var(--ink-40); font: 400 .58rem/1.35 var(--f-mono); }
.team-review__quote {
  width: 38px; height: 38px; padding: 9px;
  border-radius: 8px;
  background: rgba(20, 19, 17, .045);
  color: var(--ink-40);
  transition: color .25s var(--ease), transform .3s var(--ease), background-color .25s var(--ease);
}
.team-review blockquote { flex: 1; display: flex; align-items: center; }
.team-review blockquote p {
  max-width: 58ch;
  color: var(--ink);
  font: 400 clamp(1rem, 1.08vw, 1.1rem)/1.66 var(--f-sans);
  letter-spacing: 0;
}
.team-review__more { margin-top: -4px; border-bottom: 0; }
.team-review__more summary {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--orange-lo);
  font: 500 .68rem/1.35 var(--f-mono);
  cursor: pointer;
  list-style: none;
}
.team-review__more summary::before,
.team-review__more summary::after { display: none; }
.team-review__more summary::-webkit-details-marker { display: none; }
.team-review__more summary svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.team-review__more[open] summary { margin-bottom: 14px; }
.team-review__more[open] summary svg { transform: rotate(180deg); }
.team-review__more > p { color: var(--ink-60); font-size: .9rem; line-height: 1.62; }
.team-review footer {
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  color: var(--ink-40);
  font: 400 .58rem/1.3 var(--f-mono);
}
@media (hover: hover) {
  .team-reviews__grid.is-in .team-review:hover {
    transform: translateY(-7px);
    border-color: rgba(20, 19, 17, .2);
    background: #fff;
    box-shadow: 0 26px 56px rgba(20, 19, 17, .11);
    transition-delay: 0s;
  }
  .team-review:hover .team-review__avatar { transform: rotate(-4deg) scale(1.04); }
  .team-review:hover .team-review__quote { color: var(--orange); background: rgba(240, 82, 30, .1); transform: rotate(4deg); }
}
@media (min-width: 900px) {
  .team-reviews__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .team-review { min-height: 0; padding: 22px 19px; gap: 18px; }
  .team-review blockquote p { max-width: none; font-size: 1rem; line-height: 1.64; }
}

/* --- Phoenix roof calendar (signature) ------------------------------------ */
.calendar { background: var(--bg-deep); }
.cal-grid {
  display: grid; gap: 1px;
  border-block: 1px solid var(--rule);
  background: var(--rule);
}
@media (min-width: 980px) { .cal-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: stretch; } }

.chart {
  min-width: 0;
  background: var(--bg-deep);
  padding: clamp(24px, 3vw, 42px);
  display: grid; gap: 16px;
}
.chart__top {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 16px; border-bottom: 1px solid var(--rule);
}
.cal {
  --cal-gap: clamp(3px, .7vw, 8px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto minmax(150px, 24vw) auto;
  gap: 0 var(--cal-gap);
  align-items: end;
  max-height: 340px;
}
.cal__season-short { display: inline; }
.cal__season-full { display: none; }
@media (min-width: 620px) {
  .cal__season-short { display: none; }
  .cal__season-full { display: inline; }
}
.cal__season {
  grid-row: 1; grid-column: 6 / 10;
  border: 1px solid var(--orange);
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  color: var(--orange);
  font: 400 .66rem/1 var(--f-mono);
  text-align: center;
  padding: 6px 4px;
  margin-bottom: clamp(24px, 6vw, 32px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal__col { grid-row: 2; position: relative; display: flex; align-items: flex-end; height: 100%; }
/* 100°F reference line — drawn per column so it needs no extra grid track, and
   each segment reaches across the gap so it reads as one continuous rule.
   Bars are scaled from a 60°F floor, so 100°F sits at 80% of the plot. */
.cal__col::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 0; right: calc(var(--cal-gap) * -1); bottom: 80%;
  border-top: 1px dashed rgba(20, 19, 17, .26);
}
.cal__col:last-of-type::before { right: 0; }
.cal__col:first-of-type::after {
  content: "100°";
  position: absolute; z-index: 2; left: 0; bottom: 80%;
  margin-bottom: 4px;
  font: 400 .58rem/1 var(--f-mono); color: var(--ink-40);
}
.cal__bar { position: relative; z-index: 1; }
.chart__note {
  font: 400 .66rem/1.5 var(--f-mono); color: var(--ink-40);
  letter-spacing: .02em;
}
.cal__bar {
  width: 100%;
  height: var(--h);
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--ink-40), rgba(138, 131, 120, .35));
  transform: scaleY(.02); transform-origin: bottom;
  transition: transform .9s var(--ease), background-color .3s var(--ease);
  transition-delay: calc(var(--i) * 45ms);
}
.is-in .cal__bar { transform: scaleY(1); }
.cal__col--peak .cal__bar { background: linear-gradient(180deg, var(--sun), rgba(232, 160, 60, .45)); }
.cal__col--now .cal__bar { background: linear-gradient(180deg, var(--orange), var(--sun)); }
.cal__val {
  /* sits on top of its own bar, not floating at the top of the plot */
  position: absolute; bottom: var(--h); left: 50%; transform: translateX(-50%);
  margin-bottom: 7px;
  font: 500 .68rem/1 var(--f-mono); color: var(--orange); white-space: nowrap;
  opacity: 0; transition: opacity .3s var(--ease) .5s;
}
.is-in .cal__col--now .cal__val { opacity: 1; }
.cal__lbl {
  grid-row: 3; padding-top: 10px;
  font: 400 .68rem/1 var(--f-mono); color: var(--ink-40); text-align: center;
  border-top: 1px solid var(--rule);
  margin-top: 0;
}
.cal__lbl--now { color: var(--orange); }

.status {
  position: relative; min-width: 0;
  background: var(--paper); color: var(--ink);
  padding: clamp(26px, 3.4vw, 46px);
  display: grid; grid-template-rows: auto auto auto 1fr auto;
  gap: 16px; align-content: stretch;
}
.status::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--orange);
}
.status__pill {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid rgba(240,82,30,.28); border-radius: 100px;
  background: rgba(240,82,30,.07);
  padding: 7px 14px 7px 11px;
  font: 400 .72rem/1 var(--f-mono); color: var(--orange-lo);
}
.status__pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--orange);
  box-shadow: 0 0 0 0 rgba(240, 82, 30, .6);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 9px rgba(240, 82, 30, 0); }
  100% { box-shadow: 0 0 0 0 rgba(240, 82, 30, 0); }
}
.status h3 { color: var(--ink); }
.status > p:not(.status__pill) { color: var(--ink-60); }
.status .btn--primary { justify-self: start; align-self: end; margin-top: 8px; }
.status__list { display: grid; gap: 10px; margin-top: 2px; }
.status__list li {
  display: flex; gap: 10px; align-items: baseline;
  font: 400 .84rem/1.5 var(--f-mono); color: var(--ink-60);
  border-top: 1px solid var(--rule); padding-top: 10px;
}
.status__list b { color: var(--ink); font-weight: 500; flex: none; min-width: 5.4em; }
@media (max-width: 560px) {
  .status .btn--primary { width: 100%; justify-self: stretch; justify-content: center; }
}

/* --- services ------------------------------------------------------------- */
.services { background: var(--bg); }
.svc__row {
  --svc-accent: var(--orange);
  --svc-soft: rgba(240,82,30,.1);
  --svc-border: rgba(240,82,30,.38);
  --svc-shadow: rgba(240,82,30,.28);
}
.svc__row[data-svc="repairs"] {
  --svc-accent: #56636a; --svc-soft: rgba(86,99,106,.08);
  --svc-border: rgba(86,99,106,.34); --svc-shadow: rgba(86,99,106,.24);
}
.svc__row[data-svc="replacement"] {
  --svc-accent: #55705e; --svc-soft: rgba(85,112,94,.11);
  --svc-border: rgba(85,112,94,.38); --svc-shadow: rgba(85,112,94,.28);
}
.svc__row[data-svc="insurance"] {
  --svc-accent: #4d7188; --svc-soft: rgba(77,113,136,.11);
  --svc-border: rgba(77,113,136,.38); --svc-shadow: rgba(77,113,136,.28);
}
.svc__row[data-svc="emergency"] {
  --svc-accent: #b54d33; --svc-soft: rgba(181,77,51,.11);
  --svc-border: rgba(181,77,51,.38); --svc-shadow: rgba(181,77,51,.28);
}
.svc__row[data-svc="commercial"] {
  --svc-accent: #3e6b55; --svc-soft: rgba(62,107,85,.11);
  --svc-border: rgba(62,107,85,.38); --svc-shadow: rgba(62,107,85,.28);
}
.services .head__body { align-items: start; }
.svc__list {
  display: grid; gap: 1px;
  border: 1px solid var(--rule);
  background: var(--rule);
  overflow: hidden;
}
@media (min-width: 680px) { .svc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .svc__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc__list > li { min-width: 0; display: flex; background: var(--bg); }
.svc__row {
  position: relative; isolation: isolate; overflow: hidden;
  width: 100%; min-height: clamp(270px, 25vw, 330px);
  padding: clamp(24px, 3vw, 40px);
  display: flex; flex-direction: column; align-items: flex-start;
  color: var(--ink); background: var(--bg); text-decoration: none;
  transition: background-color .25s var(--ease);
}
.svc__row::before {
  content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: 3px;
  background: var(--svc-accent); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.svc__row:hover, .svc__row:focus-visible { background: var(--paper); }
.svc__row:hover::before, .svc__row:focus-visible::before { transform: scaleX(1); }
.svc__row:focus-visible { outline-color: var(--svc-accent); outline-offset: -3px; }
.svc__top {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 18px; margin-bottom: clamp(28px, 3vw, 42px);
}
.svc__ico {
  flex: none; width: 44px; height: 44px; border-radius: 8px;
  display: grid; place-items: center;
  color: var(--svc-accent); background: var(--svc-soft);
  border: 1px solid var(--svc-border);
  transition: transform .3s var(--ease), color .25s var(--ease), background-color .25s var(--ease);
}
.svc__ico svg { width: 21px; height: 21px; }
.svc__row:hover .svc__ico, .svc__row:focus-visible .svc__ico {
  color: #fff; background: var(--svc-accent); transform: translateY(-3px) rotate(-3deg);
}
.svc__tag {
  font: 400 .67rem/1.3 var(--f-mono); color: var(--ink-40);
  text-align: right; white-space: nowrap;
}
.svc__title {
  font-size: clamp(1.35rem, 1.65vw, 1.62rem);
  transition: color .25s var(--ease);
}
.svc__row:hover .svc__title, .svc__row:focus-visible .svc__title { color: var(--svc-accent); }
.svc__copy {
  max-width: 38ch; margin-top: 13px;
  color: var(--ink-60); font-size: .95rem; line-height: 1.62;
}
.svc__cta {
  margin-top: auto; padding-top: clamp(24px, 3vw, 38px);
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--svc-accent); font-size: .87rem; font-weight: 600;
}
.svc__cta svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.svc__row:hover .svc__cta svg, .svc__row:focus-visible .svc__cta svg { transform: translateX(4px); }
@media (max-width: 679px) {
  .svc__row { min-height: 0; }
  .svc__top { margin-bottom: 24px; }
  .svc__copy { max-width: 46ch; }
  .svc__cta { margin-top: 4px; }
}

/* --- process -------------------------------------------------------------- */
.steps { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step {
  position: relative;
  background: var(--bg);
  padding: clamp(28px, 3vw, 38px) clamp(18px, 2vw, 26px) clamp(24px, 2.6vw, 32px);
  display: flex; flex-direction: column; gap: 11px;
}
/* a node on the rule above each cell, so four cells read as one sequence
   (left to right on desktop, top to bottom once they stack) */
.step::before {
  content: ""; position: absolute;
  top: -5px; left: clamp(18px, 2vw, 26px);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px var(--bg);
}
.step__num {
  font: 500 clamp(1.65rem, 2.4vw, 2.15rem)/1 var(--f-mono);
  color: var(--orange);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.step__copy { color: var(--ink-60); font-size: .95rem; }
/* what the step leaves you holding */
.step__get {
  /* pinned to the bottom so all four outcomes line up, whatever the copy length */
  margin-top: auto; padding-top: 13px;
  border-top: 1px solid var(--rule-soft);
  display: flex; align-items: center; gap: 9px;
  font: 400 .76rem/1.4 var(--f-mono); color: var(--ink-80);
}
.step__get svg { width: 13px; height: 13px; flex: none; color: var(--orange); }

.steps__foot {
  margin-top: clamp(24px, 3vw, 36px);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 16px 26px; justify-content: space-between;
}
.steps__note { font: 400 .84rem/1.4 var(--f-mono); color: var(--ink-40); }
.home-page #process { background: var(--bg); }
@media (max-width: 560px) {
  .steps__foot .btn { width: 100%; justify-content: center; }
}

/* --- work gallery --------------------------------------------------------- */
.work { background: var(--bg-deep); }
.gallery { display: grid; gap: clamp(14px, 1.6vw, 22px); }
@media (min-width: 760px) { .gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.shot { position: relative; border-radius: var(--r-m); overflow: hidden; background: var(--bg-deep); }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.shot:hover img { transform: scale(1.035); }
/* same caption pattern as the services panel and the crew photo:
   heavy bottom scrim, mono place line, the job name at real size, mono spec */
.shot::after {
  content: ""; position: absolute; z-index: 1; inset: auto 0 0;
  /* shorter than the services panel — in a gallery the photo is the point, and
     the caption only needs the bottom ~90px covered */
  height: 46%; pointer-events: none;
  background: linear-gradient(to top,
    rgba(10, 9, 8, .92) 0%, rgba(10, 9, 8, .55) 38%, rgba(10, 9, 8, 0) 100%);
}
.shot__cap {
  position: absolute; z-index: 2;
  left: clamp(16px, 1.6vw, 24px); right: clamp(16px, 1.6vw, 24px);
  bottom: clamp(16px, 1.6vw, 24px);
  display: grid; gap: 7px; color: #fff;
  transition: transform .45s var(--ease);
}
.shot:hover .shot__cap { transform: translateY(-3px); }
.area__media { position: relative; }
.shot__loc {
  display: inline-flex; align-items: center; gap: 8px;
  font: 400 .7rem/1 var(--f-mono); letter-spacing: .1em;
  color: rgba(255, 255, 255, .74);
}
.shot__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); flex: none; }
.shot__name {
  font-size: clamp(1.14rem, 3.6vw, 1.5rem);
  font-weight: 600; letter-spacing: 0; line-height: 1.12;
  text-shadow: 0 1px 18px rgba(10, 9, 8, .5);
}
.shot__meta {
  font: 400 .72rem/1 var(--f-mono); letter-spacing: .02em;
  color: rgba(255, 255, 255, .72);
}
@media (min-width: 760px) {
  /* every cell but --a is two columns wide, so only --a carries the large name */
  .shot__name { font-size: 1.16rem; }
  .shot--a .shot__name { font-size: clamp(1.4rem, 1.9vw, 1.75rem); }
  .shot--a { grid-column: span 4; aspect-ratio: 16 / 10; }
  .shot--b { grid-column: span 2; height: 100%; }
  .shot--c { grid-column: span 2; aspect-ratio: 4 / 3; }
  .shot--d { grid-column: span 2; aspect-ratio: 4 / 3; }
  .shot--e { grid-column: span 2; aspect-ratio: 4 / 3; }
}
@media (max-width: 759px) {
  .shot { aspect-ratio: 4 / 3; }
}

.home-proof {
  display: grid; margin-top: clamp(34px, 5vw, 64px);
  border-block: 1px solid var(--rule);
}
@media (min-width: 820px) { .home-proof { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.home-proof__item {
  min-width: 0; padding: clamp(24px, 3vw, 38px);
  display: grid; align-content: start; gap: 12px;
  border-bottom: 1px solid var(--rule);
}
.home-proof__item:last-child { border-bottom: 0; }
@media (min-width: 820px) {
  .home-proof__item { border-bottom: 0; }
  .home-proof__item + .home-proof__item { border-left: 1px solid var(--rule); }
}
.home-proof__icon {
  width: 42px; height: 42px; margin-bottom: 10px; border-radius: 8px;
  display: grid; place-items: center; color: var(--orange);
  border: 1px solid rgba(240,82,30,.32); background: rgba(240,82,30,.08);
  transition: transform .25s var(--ease), color .25s var(--ease), background-color .25s var(--ease);
}
.home-proof__icon svg { width: 21px; height: 21px; }
.home-proof__item:hover .home-proof__icon { color: #fff; background: var(--orange); transform: translateY(-3px) rotate(-3deg); }
.home-proof__item h3 { font-size: clamp(1.15rem, 1.7vw, 1.42rem); letter-spacing: 0; }
.home-proof__item > p:last-child { color: var(--ink-60); font-size: .92rem; line-height: 1.62; }

/* --- claims (full-width conversion band) --------------------------------- */
.claims {
  --service-accent: #4d7188;
  --service-accent-hover: #3d5c70;
  --service-accent-shadow: rgba(77,113,136,.28);
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(108deg, var(--night) 0 58%, #182026 100%);
  color: var(--paper);
}
.claims__storm {
  position: absolute; z-index: 0; pointer-events: none;
  inset: 0 -3% 0 35%; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20%, #000 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 20%, #000 100%);
}
.claims__storm svg { width: 100%; height: 100%; }
.claims__storm path { fill: none; vector-effect: non-scaling-stroke; }
.claims__storm-grid { stroke: rgba(245,243,239,.055); stroke-width: 1; }
.claims__storm-rain {
  --rain-opacity: .68;
  stroke: rgba(130,169,193,.28); stroke-width: 1.2; stroke-linecap: round;
  transform-box: view-box; transform-origin: center;
  animation: claims-rain-fall 3.2s linear infinite;
}
.claims__storm-rain--far {
  --rain-opacity: .42; stroke-width: .9;
  animation-duration: 4.1s; animation-delay: -2.05s;
}
.claims__storm-rain--near { animation-delay: -.7s; }
.claims__storm-front {
  stroke: rgba(130,169,193,.34); stroke-width: 1.4;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: claims-front-scan 6.5s var(--ease) infinite;
}
.claims__storm-bolt {
  stroke: #a8cbd5; stroke-width: 2.2; stroke-linecap: square; stroke-linejoin: miter;
  stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0;
  filter: drop-shadow(0 0 5px rgba(168,203,213,.45));
  animation: claims-electrical-trace 6.5s var(--ease) infinite;
}
.claims > .wrap { position: relative; z-index: 1; }
@keyframes claims-rain-fall {
  0% { transform: translate3d(32px, -84px, 0); opacity: 0; }
  16% { opacity: var(--rain-opacity); }
  78% { opacity: var(--rain-opacity); }
  100% { transform: translate3d(-54px, 104px, 0); opacity: 0; }
}
@keyframes claims-front-scan {
  0%, 58% { stroke-dashoffset: 1; opacity: .08; }
  68%, 82% { stroke-dashoffset: 0; opacity: .42; }
  92%, 100% { stroke-dashoffset: 0; opacity: .08; }
}
@keyframes claims-electrical-trace {
  0%, 68% { stroke-dashoffset: 1; opacity: 0; }
  73% { stroke-dashoffset: 0; opacity: .72; }
  74.2% { opacity: .16; }
  76% { opacity: .52; }
  79%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
.claims__panel {
  display: grid; gap: clamp(42px, 7vw, 108px); align-items: center;
  padding-block: 0;
}
@media (min-width: 900px) { .claims__panel { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); } }
.claims__copy { display: grid; gap: 20px; align-content: center; }
.claims__copy h2 { color: #fff; }
.claims__copy > p:last-child { color: rgba(245, 243, 239, .68); max-width: 50ch; font-size: clamp(1.02rem, 1.25vw, 1.16rem); }
.claims__action {
  position: relative; display: grid; gap: 20px;
  padding: clamp(28px, 3.6vw, 48px);
  border-block: 1px solid var(--rule-dark);
  border-left: 3px solid var(--service-accent);
  background: rgba(255,255,255,.035);
}
.claims__action-head { display: flex; align-items: center; gap: 16px; }
.claims__action-head .eyebrow { color: rgba(245,243,239,.62); }
.claims__mark {
  width: 50px; height: 50px; flex: none; display: grid; place-items: center;
  color: #fff; border: 1px solid rgba(255,255,255,.22); border-radius: 8px;
  background: var(--service-accent); box-shadow: 0 10px 24px var(--service-accent-shadow);
  transform: rotate(-4deg); transition: transform .28s var(--ease), background-color .28s var(--ease);
}
.claims__panel:hover .claims__mark { background: var(--service-accent-hover); transform: translateY(-3px) rotate(1deg); }
.claims__mark svg { width: 24px; height: 24px; }
.claims__points { display: grid; gap: 0; }
.claims__points li {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px;
  padding: 16px 0; border-top: 1px solid var(--rule-dark);
}
.claims__points span { font: 500 .74rem/1.5 var(--f-mono); color: #82a9c1; }
.claims__points p { color: rgba(245, 243, 239, .72); font-size: .95rem; margin: 0; }
.claims__action > .btn {
  width: fit-content;
  justify-self: start;
  justify-content: center;
  margin-top: 2px;
}
@media (max-width: 560px) {
  .claims__storm {
    inset: 0 -10% 0 4%; opacity: .58;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26%, #000 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 26%, #000 100%);
  }
  .claims__storm-grid { opacity: .48; }
  .claims__storm-rain { --rain-opacity: .58; }
  .claims__storm-rain--far { --rain-opacity: .34; }
  .claims__storm-bolt { stroke-width: 1.8; }
  .claims__action { padding: 26px 20px 28px; }
  .claims__action > .btn {
    width: 100%;
    justify-self: stretch;
  }
  .claims__points li {
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 14px 0;
  }
  .claims__points span {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    margin-top: 1px;
    border: 1px solid rgba(130,169,193,.58);
    border-radius: 50%;
    font-size: .66rem; line-height: 1;
  }
  .claims__points p { font-size: .9rem; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  .claims__storm-rain { animation: none; transform: none; opacity: .32; }
  .claims__storm-front, .claims__storm-bolt {
    animation: none; stroke-dashoffset: 0; opacity: .16;
  }
}

.home-page #areas { background: var(--bg); }
.home-page .faq--home { background: var(--bg-deep); }
.home-page .faq--home .head,
.home-page .faq--home .faq__list {
  width: min(940px, 100%);
  margin-inline: auto;
}
.home-page .faq--home #faq-h { white-space: nowrap; }

/* --- proof / reviews ------------------------------------------------------ */
.reviews { background: var(--bg-deep); }
.quotes { display: grid; gap: clamp(16px, 2vw, 24px); }
@media (min-width: 860px) { .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.quote {
  background: var(--paper); border: 1px solid var(--rule-soft);
  border-radius: var(--r-m); padding: clamp(22px, 2.4vw, 30px);
  display: grid; grid-template-rows: auto 1fr auto; gap: 16px;
}
.quote blockquote { font-size: 1.06rem; line-height: 1.5; letter-spacing: 0; }
.quote figcaption { font: 400 .78rem/1.4 var(--f-mono); color: var(--ink-40); border-top: 1px solid var(--rule-soft); padding-top: 14px; }
.quote figcaption b { display: block; color: var(--ink); font-weight: 500; }

/* --- service area --------------------------------------------------------- */
.area__grid { display: grid; gap: clamp(28px, 3.4vw, 56px); align-items: start; }
@media (min-width: 900px) { .area__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.home-page #areas .head { margin-bottom: clamp(20px, 2.2vw, 28px); }
.home-page #areas .lede { max-width: 58ch; }
.home-page #areas .area__cols {
  margin-top: clamp(32px, 4vw, 58px);
  padding-top: clamp(24px, 3vw, 38px);
  border-top: 1px solid var(--rule);
}
@media (min-width: 760px) {
  .home-page #areas .area__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* grouped by part of the Valley — eighteen names in one flat list scanned as
   a wall of text and told you nothing about where they sit */
/* the coverage list closes the same reference block the questions open, so it
   takes padding rather than a rule of its own — the last <details> already
   draws the divider. `.area__cols` and `.area__k` are shared with the home
   page and are left alone. */
.area { padding-top: clamp(34px, 3.8vw, 52px); }
.area__head { display: grid; gap: 12px; }
@media (min-width: 900px) {
  .area__head {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(28px, 3.6vw, 60px);
    align-items: baseline;
  }
}
.area__head h3 {
  font-family: var(--f-sans);
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.72rem);
  font-weight: 600; letter-spacing: 0; line-height: 1.15;
}
.area__head p { font-size: 1rem; line-height: 1.7; color: var(--ink-60); max-width: 58ch; }

.area__cols {
  display: grid; gap: clamp(18px, 2.2vw, 30px);
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  margin-top: clamp(24px, 2.6vw, 32px);
}
.area__col { min-width: 0; }
.area__k {
  font: 500 .72rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--orange);
  padding-bottom: 12px; border-bottom: 1px solid var(--rule);
}
.area__col ul { display: grid; }
.area__col li {
  position: relative;
  padding: 9px 0 9px 16px; border-bottom: 1px solid var(--rule-soft);
  font: 400 .85rem/1.3 var(--f-mono); color: var(--ink-80);
  transition: color .2s var(--ease), padding-left .2s var(--ease);
}
.area__col li::before {
  content: ""; position: absolute; left: 1px; top: 50%;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--orange); transform: translateY(-50%);
  opacity: .5; transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.area__media {
  position: relative;
  border-radius: var(--r-m); overflow: hidden;
  isolation: isolate;
  box-shadow: 0 18px 42px rgba(24, 22, 18, .1);
}
.area__media img {
  display: block; width: 100%; height: auto;
}
.area__media .area__map { filter: contrast(1.06) saturate(.92); }
.area__map-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 18px clamp(18px, 2vw, 26px);
  background: var(--ink); color: #fff;
  font: 500 .72rem/1.3 var(--f-mono);
  letter-spacing: .06em;
}
.area__map-foot > span:first-child { display: inline-flex; align-items: center; gap: 10px; text-transform: uppercase; }
.area__map-dot {
  width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--orange);
}
.area__map-foot strong { color: var(--orange); font: 600 1rem/1 var(--f-sans); margin-right: 3px; }
@media (hover: hover) {
  .area__col li:hover { color: var(--ink); padding-left: 20px; }
  .area__col li:hover::before { opacity: 1; transform: translateY(-50%) scale(1.5); }
}
@media (max-width: 560px) {
  .area__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
  .area__col:last-child { grid-column: 1 / -1; }
  .area__col:last-child ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
  .area__map-foot { padding: 14px 16px; font-size: .64rem; }
}

/* --- FAQ ------------------------------------------------------------------ */
.faq { border-top: 1px solid var(--rule); }
.faq--home { border-top: 0; }
.faq > .wrap > .head .head__body {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}
.faq > .wrap > .head .h-lg {
  max-width: none;
  font-size: 2.35rem;
  line-height: 1.05;
  text-wrap: balance;
}
.faq > .wrap > .head .lede { max-width: 68ch; }
@media (min-width: 900px) {
  .faq > .wrap > .head .head__body { gap: 22px; }
  .faq > .wrap > .head .h-lg { font-size: 3.8rem; line-height: 1; }
}
@media (max-width: 420px) {
  .faq > .wrap > .head .h-lg { font-size: 2.05rem; }
}
@media (max-width: 350px) {
  .faq > .wrap > .head .h-lg { font-size: 1.8rem; }
}
.faq__list { border-top: 1px solid var(--rule); }
details {
  border-bottom: 1px solid var(--rule);
}
details summary {
  list-style: none; cursor: pointer;
  padding: clamp(18px, 2vw, 24px) 44px clamp(18px, 2vw, 24px) 0;
  position: relative;
  font-size: clamp(1.05rem, 1.5vw, 1.28rem); font-weight: 500; letter-spacing: 0;
  transition: color .2s var(--ease);
}
details summary::-webkit-details-marker { display: none; }
details summary:hover { color: var(--orange); }
details summary::after,
details summary::before {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 14px; height: 1.5px; background: currentColor;
  transition: transform .3s var(--ease);
}
details summary::before { transform: rotate(90deg); }
details[open] summary::before { transform: rotate(0deg); }
details[open] summary { color: var(--orange); }
details .faq__a { padding: 0 clamp(0px, 6vw, 90px) 26px 0; color: var(--ink-60); max-width: 76ch; }

/* --- estimate form -------------------------------------------------------- */
.estimate { background: var(--bg); }
.est__grid { display: grid; gap: clamp(30px, 3.6vw, 56px); align-items: start; }
@media (min-width: 940px) { .est__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); } }
.est__aside { display: grid; gap: 26px; align-content: start; position: sticky; top: calc(var(--header-h) + 28px); }
@media (max-width: 939px) { .est__aside { position: static; } }
.est__next { display: grid; gap: 0; }
.est__next li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px;
  padding: 16px 0; border-top: 1px solid var(--rule);
}
.est__next span { font: 500 .74rem/1.6 var(--f-mono); color: var(--orange); }
.est__next p { font-size: .95rem; color: var(--ink-60); }
.est__direct { display: grid; gap: 10px; padding-top: 8px; }

.form {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-m);
  padding: clamp(22px, 2.8vw, 36px);
  display: grid; gap: 18px;
}
.field { display: grid; gap: 7px; }
.field label { font: 400 .74rem/1 var(--f-mono); color: var(--ink-60); }
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-s);
  padding: 13px 14px;
  font-size: .98rem;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
  appearance: none;
}
.field textarea { min-height: 110px; resize: vertical; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235E584F' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 38px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--ink); background-color: #fff; outline: none;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.field--error input, .field--error select { border-color: #C0392B; }
.field__err { font: 400 .72rem/1 var(--f-mono); color: #C0392B; display: none; }
.field--error .field__err { display: block; }
.sms-consent {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start;
  gap: 12px; padding: 18px 0; border-block: 1px solid var(--rule);
}
.sms-consent input {
  width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--orange);
  cursor: pointer;
}
.sms-consent input:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.sms-consent label { color: var(--ink-80); font-size: .88rem; line-height: 1.6; cursor: pointer; }
.consent-required { border-bottom: 0; }
.consent-required .required-mark { color: var(--orange); font-weight: 700; }
.consent-required .field__err { grid-column: 2; }
.consent-required.field--error input { outline: 2px solid #B53628; outline-offset: 3px; }
.sms-consent a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sms-consent a:hover, .sms-consent a:focus-visible { color: var(--orange); }
.form__row { display: grid; gap: 18px; }
@media (min-width: 560px) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form__foot { display: grid; gap: 12px; }
.form .btn { justify-self: start; }
.form__fine { font: 400 .74rem/1.5 var(--f-mono); color: var(--ink-40); }
.form__ok {
  display: none;
  border: 1px solid var(--orange); border-radius: var(--r-s);
  padding: 16px 18px; background: rgba(240, 82, 30, .07);
  font-size: .95rem;
}
.form.is-sent .form__ok { display: block; }
.form.is-sent .form__fields { display: none; }

/* --- footer --------------------------------------------------------------- */
.footer { background: var(--night); color: var(--paper); padding-block: clamp(52px, 6vw, 88px) 26px; }
.footer a { text-decoration: none; }
.footer .footer__word {
  font-size: clamp(1.25rem, 6vw, 5.5rem);
  font-weight: 700; letter-spacing: -.05em; line-height: 1;
  white-space: nowrap;
  color: #fff;
  margin-bottom: clamp(34px, 4vw, 58px);
}
.footer__word em { font-style: normal; color: var(--orange); }
.footer__grid { display: grid; gap: 32px; padding-top: 32px; border-top: 1px solid var(--rule-dark); }
@media (min-width: 720px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .footer__grid { grid-template-columns: 1.3fr .8fr .8fr 1fr; } }
.footer h3 { font: 400 .72rem/1 var(--f-mono); color: rgba(245, 243, 239, .6); margin-bottom: 16px; font-weight: 400; letter-spacing: 0; }
.footer ul { display: grid; gap: 9px; }
.footer li, .footer p { color: rgba(245, 243, 239, .74); font-size: .93rem; }
.footer a:hover { color: var(--orange); }
.footer__bottom {
  margin-top: clamp(34px, 4vw, 54px); padding-top: 20px;
  border-top: 1px solid var(--rule-dark);
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
  font: 400 .74rem/1.5 var(--f-mono); color: rgba(245, 243, 239, .45);
}
.footer__policies { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.footer__policies a { color: rgba(245, 243, 239, .74); text-decoration: underline; text-underline-offset: 3px; }
.footer__policies a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* --- reveal --------------------------------------------------------------- */
.rv {
  opacity: 0; pointer-events: none;
  transform: translateY(8px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.rv.is-in { opacity: 1; pointer-events: auto; transform: none; }
.rv--d1 { transition-delay: .04s; }
.rv--d2 { transition-delay: .08s; }
.rv--d3 { transition-delay: .12s; }

/* hero load sequence */
.hero__in > *,
.subhero__in > * {
  opacity: 0;
  transform: translateY(18px);
  animation: riseIn .9s var(--ease) forwards;
}
.hero__in > *:nth-child(1), .subhero__in > *:nth-child(1) { animation-delay: .15s; }
.hero__in > *:nth-child(2), .subhero__in > *:nth-child(2) { animation-delay: .26s; }
.hero__in > *:nth-child(3), .subhero__in > *:nth-child(3) { animation-delay: .37s; }
.hero__in > *:nth-child(4), .subhero__in > *:nth-child(4) { animation-delay: .48s; }
.hero__in > *:nth-child(5), .subhero__in > *:nth-child(5) { animation-delay: .58s; }
.strip { opacity: 0; animation: riseIn .9s var(--ease) .7s forwards; }
@keyframes riseIn { to { opacity: 1; transform: none; } }

/* --- reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
  .rv, .hero__in > *, .subhero__in > *, .strip { opacity: 1 !important; pointer-events: auto !important; transform: none !important; }
  .team__media::before { display: none !important; }
  .team__media img,
  .team__points li,
  .team-review { opacity: 1 !important; transform: none !important; }
  .home-proof__icon { transform: none !important; }
  .cal__bar { transform: scaleY(1) !important; }
  .cal__val { opacity: 1 !important; }
}

/* ==========================================================================
   LONG-FORM SERVICE PAGES
   The rest of the site is short-form — chips, mono labels, three-line
   promises. Service pages carry 1,200-2,000 words, which needs a real
   reading column. Everything below exists only for those pages.
   ========================================================================== */

/* --- layout: sticky rail + reading column --------------------------------- */
.longform { border-top: 1px solid var(--rule); }
.longform__grid { display: grid; gap: clamp(32px, 4vw, 64px); }
@media (min-width: 1000px) {
  .longform__grid { grid-template-columns: 232px minmax(0, 1fr); }
}

.rail { display: none; }
@media (min-width: 1000px) {
  .rail {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + 28px);
    align-self: start;
    max-height: calc(100svh - var(--header-h) - 56px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
/* a compact call block that rides along at the bottom of the rail */
.rail__cta {
  padding: 20px 18px 22px;
  background: var(--night); color: var(--paper);
  border-radius: var(--r-m);
}
.rail__cta p { font-size: .95rem; line-height: 1.4; letter-spacing: 0; }
.rail__cta .btn { margin-top: 14px; width: 100%; justify-content: center; }
.rail__tel {
  display: block; margin-top: 12px; text-align: center;
  font: 400 .74rem/1 var(--f-mono);
  color: rgba(245, 243, 239, .62);
  text-decoration: none;
}
.rail__tel:hover { color: var(--paper); }

/* --- the reading column --------------------------------------------------- */
.prose {
  max-width: 68ch;
  font-size: clamp(1.02rem, .99rem + .2vw, 1.12rem);
  line-height: 1.72;
  color: var(--ink-80);
}
.prose > * + * { margin-top: 1.15em; }

.prose h2 {
  margin-top: clamp(48px, 5vw, 76px);
  font-size: clamp(1.7rem, 1.2rem + 1.7vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--ink);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.prose > h2:first-child { margin-top: 0; }
.prose h3 {
  margin-top: clamp(30px, 3vw, 42px);
  font-family: var(--f-sans);
  font-size: clamp(1.1rem, 1rem + .45vw, 1.28rem);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
  color: var(--ink);
}
.prose h3 + p { margin-top: .5em; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose a:not(.btn):not(.link) {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color .2s var(--ease);
}
.prose a:not(.btn):not(.link):hover { color: var(--orange); }

/* bulleted list — square orange marker, matches the site's chip language.
   `.checks` opts out: it is a grid row with its own leading icon, and these
   rules would otherwise win on specificity and break its layout. */
.prose ul:not(.checks) { display: grid; gap: 10px; }
.prose ul:not(.checks) li {
  position: relative;
  padding-left: 26px;
}
.prose ul:not(.checks) li::before {
  content: ""; position: absolute;
  left: 3px; top: .62em;
  width: 7px; height: 7px;
  background: var(--orange);
  border-radius: 1.5px;
}

/* numbered list — mono counters, same treatment as the process steps */
.prose ol { display: grid; gap: 14px; counter-reset: p; }
.prose ol li {
  position: relative;
  padding-left: 38px;
  counter-increment: p;
}
.prose ol li::before {
  content: counter(p, decimal-leading-zero);
  position: absolute; left: 0; top: .1em;
  font: 500 .8rem/1.6 var(--f-mono);
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}

/* --- callout: one idea pulled out of the flow ----------------------------- */
.callout {
  margin-block: clamp(28px, 3vw, 40px);
  padding: clamp(22px, 2.4vw, 30px) clamp(20px, 2.2vw, 30px);
  background: var(--paper);
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--r-m) var(--r-m) 0;
}
.callout__k {
  font: 500 .72rem/1 var(--f-mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 10px;
}
.callout p:not(.callout__k) { font-size: 1rem; line-height: 1.66; }
.callout p + p { margin-top: .8em; }

/* --- checks: a scannable "what's included" list --------------------------- */
.checks {
  display: grid; gap: 0;
  margin-block: clamp(24px, 2.6vw, 34px);
  border-top: 1px solid var(--rule);
}
/* The marker is positioned rather than laid out as a grid/flex child: list
   items often contain a <strong> lead-in plus text, which would otherwise
   become two separate tracks and push the text into the 22px icon column. */
.checks li {
  position: relative;
  padding: 14px 0 14px 34px;
  border-bottom: 1px solid var(--rule-soft);
  font-size: .96rem; line-height: 1.5;
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0; top: calc(14px + .22em);
  width: 16px; height: 16px;
  background: var(--orange);
  border-radius: 50%;
  /* a check mark punched out of the dot, so it stays crisp at any size */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm3.9 6.1-4.6 4.9a.9.9 0 0 1-1.3 0L4.1 9a.9.9 0 0 1 1.3-1.3l1.3 1.4 3.9-4.2a.9.9 0 0 1 1.3 1.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm3.9 6.1-4.6 4.9a.9.9 0 0 1-1.3 0L4.1 9a.9.9 0 0 1 1.3-1.3l1.3 1.4 3.9-4.2a.9.9 0 0 1 1.3 1.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  flex: none;
}

/* --- compare: the repair-vs-replace decision ------------------------------ */
.compare {
  display: grid; gap: 1px;
  margin-block: clamp(28px, 3vw, 40px);
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-m);
  overflow: hidden;
}
@media (min-width: 640px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare__col { background: var(--bg); padding: clamp(22px, 2.4vw, 30px); }
.compare__k {
  font: 500 .68rem/1 var(--f-mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--orange);
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.compare__col ul { display: grid; gap: 11px; }
.compare__col li {
  position: relative; padding-left: 20px;
  font-size: .93rem; line-height: 1.5; color: var(--ink-80);
}
.compare__col li::before {
  content: ""; position: absolute;
  left: 0; top: .6em;
  width: 6px; height: 6px;
  background: var(--ink-40);
  border-radius: 1.5px;
}

/* --- an inline mid-page call to action ------------------------------------ */
.midcta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(14px, 2vw, 26px);
  margin-block: clamp(34px, 3.6vw, 48px);
  padding: clamp(22px, 2.4vw, 30px) clamp(20px, 2.4vw, 32px);
  background: var(--night);
  border-radius: var(--r-m);
}
.midcta__copy { flex: 1 1 260px; }
.midcta__copy p {
  font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--paper);
}
.midcta__copy span {
  display: block; margin-top: 7px;
  font: 400 .74rem/1.4 var(--f-mono);
  color: rgba(245, 243, 239, .58);
}
.midcta__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ==========================================================================
   SERVICE PAGE SECTIONS
   A richer alternative to the single .prose column: full-width sections with
   their own background, each carrying a different visual device. Used on the
   service pages alongside the shared .head / .eyebrow / .h-lg patterns.
   ========================================================================== */

/* --- section tones -------------------------------------------------------- */
.sec-alt  { background: var(--bg-deep); }
.sec-dark { background: var(--night); color: rgba(245, 243, 239, .72); }
.sec-dark h2, .sec-dark h3 { color: var(--paper); }
.sec-dark .muted { color: rgba(245, 243, 239, .58); }
.sec-dark .head__rule { background: var(--rule-dark); }

/* a lede that sits under a section head rather than inside it */
.sec-lede {
  max-width: 64ch;
  margin-bottom: clamp(34px, 3.6vw, 52px);
  font-size: clamp(1.02rem, .99rem + .2vw, 1.1rem);
  line-height: 1.7;
  color: var(--ink-60);
}
.sec-dark .sec-lede { color: rgba(245, 243, 239, .66); }
.sec-lede + .sec-lede { margin-top: -.9em; }
.sec-lede strong { color: var(--ink); font-weight: 600; }
.sec-dark .sec-lede strong { color: var(--paper); }

/* a short trailing note under a block, quieter than the body copy */
.sec-note {
  max-width: 62ch;
  margin-top: clamp(26px, 2.8vw, 38px);
  font-size: 1rem; line-height: 1.7;
  color: var(--ink-60);
}
.sec-note a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange);
              text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.sec-note a:hover { color: var(--orange); }

/* A closing note under a full-width component. Mirrors the .head pattern
   (mono label left, copy right) so it reads as part of the section rather
   than a paragraph left over at the bottom of it. `.sec-note` stays for the
   narrow aside inside .split__copy, where there is no room for two columns. */
.note {
  display: grid; gap: 10px;
  margin-top: clamp(30px, 3.2vw, 44px);
  padding-top: clamp(20px, 2.2vw, 28px);
  border-top: 1px solid var(--rule);
}
@media (min-width: 820px) {
  .note {
    grid-template-columns: minmax(0, 190px) minmax(0, 66ch);
    gap: 0 clamp(28px, 3.5vw, 56px);
    align-items: start;
  }
}
.sec-dark .note { border-color: var(--rule-dark); }
.note__k {
  font: 500 .72rem/1.6 var(--f-mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--orange);
}
.note p:not(.note__k) { font-size: 1rem; line-height: 1.72; color: var(--ink-60); }
.sec-dark .note p:not(.note__k) { color: rgba(245, 243, 239, .66); }
.note a {
  color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--orange);
  text-underline-offset: 3px; text-decoration-thickness: 1.5px;
}
.note a:hover { color: var(--orange); }

/* --- icon cards -----------------------------------------------------------
   Currently unused: the repair page's (Common failures) section moved to the
   failure matrix below. Kept because it is the card component the other six
   service pages will use when they move off the reading-column layout. */
.icards { display: grid; gap: clamp(20px, 2.2vw, 30px); }
/* fixed tracks rather than auto-fit: six cards should land 3x2, and auto-fit
   gives four across at wide viewports and leaves two orphaned below */
@media (min-width: 700px)  { .icards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .icards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.icard {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-m);
  padding: clamp(28px, 3vw, 40px);
  /* explicit rows: the copy row takes the slack so the facts block pins to the
     bottom and lines up across a row. `align-content: start` left no free
     space, so `margin-top: auto` on the facts had nothing to absorb. */
  display: grid;
  grid-template-rows: auto auto 1fr auto;
}
/* Share row tracks across each row of cards so the heading, copy and the
   facts divider all line up. Without this the facts sit bottom-aligned and
   the rules land at different heights wherever the copy runs shorter.
   Browsers without subgrid keep the bottom-pinned fallback above. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 700px) {
    /* row-gap: 0 because a subgrid otherwise inherits the parent's row gap
       between each of its own tracks, blowing the internal spacing out to
       30px. Spacing inside the card comes from the margins instead. */
    .icard { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  }
}

/* icon left, index right: gives the card a header line instead of starting
   cold on an icon, and makes the set read as a numbered sequence */
.icard__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(20px, 2.2vw, 26px);
}
.icard__n {
  font: 500 .72rem/1 var(--f-mono);
  letter-spacing: .12em;
  color: var(--ink-40);
  font-variant-numeric: tabular-nums;
}
.icard__ico {
  width: 54px; height: 54px; border-radius: 15px;
  display: grid; place-items: center;
  background: rgba(240, 82, 30, .1);
  color: var(--orange);
}
/* 22px was too small for these to read; the shapes are simple enough to carry 27 */
.icard__ico svg { width: 27px; height: 27px; }
.icard h3 {
  font-family: var(--f-sans);
  font-size: clamp(1.04rem, 1rem + .3vw, 1.16rem);
  font-weight: 600; letter-spacing: 0; line-height: 1.25;
  margin-bottom: 12px;
}
.icard p { font-size: 1rem; line-height: 1.66; color: var(--ink-60); }

/* Two facts per card so it answers "is this mine?" and "what happens next?"
   rather than only naming the failure. Values are <dd>, never <p>, to stay
   clear of the container-p-beats-label-class trap. */
.icard__facts {
  /* no margin-top:auto — under subgrid it pushes the block around inside its
     shared track; the `1fr` copy row already pins it low in the fallback */
  align-self: start;
  padding-top: clamp(20px, 2.2vw, 26px);
  border-top: 1px solid var(--rule);
  display: grid; gap: 20px;
}
.icard__facts > div { display: grid; gap: 6px; }
.icard__facts dt {
  font: 500 .72rem/1 var(--f-mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--orange);
}
.icard__facts dd { font-size: 1rem; line-height: 1.5; color: var(--ink-80); }
.icard__facts a {
  color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--orange);
  text-underline-offset: 3px; text-decoration-thickness: 1.5px;
}
.icard__facts a:hover { color: var(--orange); }
/* the copy block pushes the facts to the bottom so they line up across a row */
.icard > p { margin-bottom: clamp(22px, 2.4vw, 30px); }

/* --- photo + copy split --------------------------------------------------- */
.split { display: grid; gap: clamp(30px, 4vw, 64px); align-items: center; }
@media (min-width: 940px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .split--rev .split__media { order: 2; }
  /* the media stretches to the row; the copy centres in it, so a short copy
     column does not sit top-aligned with dead space under it */
  .split__copy { align-self: center; }
}
.split__media {
  position: relative;
  border-radius: var(--r-l);
  overflow: hidden;
  aspect-ratio: 4 / 3.1;
  background: var(--ink-40);
}
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* same three-tier caption treatment used on the gallery and service area */
.split__media::after {
  content: ""; position: absolute; z-index: 1; inset: auto 0 0;
  height: 48%; pointer-events: none;
  background: linear-gradient(to top,
    rgba(10, 9, 8, .92) 0%, rgba(10, 9, 8, .52) 40%, rgba(10, 9, 8, 0) 100%);
}
@media (min-width: 940px) {
  .split__media { aspect-ratio: auto; min-height: 460px; }
}

.split__copy > * + * { margin-top: 1em; }
/* 1rem, not the 17.2px running body: everything built for these sections sits
   on the smaller scale, and this copy runs directly above the figure caption */
.split__copy p:not(.eyebrow) { font-size: 1rem; line-height: 1.72; color: var(--ink-60); }
.split__copy > .eyebrow { margin-bottom: 4px; }
/* the trailing aside picks up the same divider rhythm as the list above it */
.split__copy .sec-note {
  margin-top: 22px; padding-top: 17px;
  border-top: 1px solid var(--rule);
  font-size: .96rem;
}
.sec-dark .split__copy .sec-note { border-color: var(--rule-dark); }
.sec-dark .split__copy p { color: rgba(245, 243, 239, .68); }
.split__copy strong { color: var(--ink); font-weight: 600; }
.sec-dark .split__copy strong { color: var(--paper); }



/* --- the leak path figure -------------------------------------------------
   (Finding the source) argues that a stain is not where the water got in.
   That claim is spatial, and the column had no picture of it — just prose, a
   labelled list and a note, which is why the right side read thin.

   The figure is a schematic, not data: it states no distances, and the
   caption carries the only quantity ("several feet"), which the page already
   says elsewhere. The line draws once on reveal, entry to stain, which is the
   whole argument in one gesture.

   Labels are HTML, not <text> inside the SVG. SVG text sizes in user units,
   so it scales with the drawing: an 11px label rendered at 7.5px in the
   1180 layout and 8.5px on a phone. As HTML they stay the size they are set
   to, stay selectable, and need no per-breakpoint patching. */
.tracefig {
  margin: clamp(26px, 2.8vw, 34px) 0 0;
  padding: clamp(18px, 2vw, 24px) clamp(18px, 2vw, 24px) clamp(16px, 1.8vw, 20px);
  background: var(--paper);
  border-radius: var(--r-m);
  display: grid; gap: 14px;
}
.tracefig__plot { display: grid; gap: 9px; }
.tracefig__art { display: block; width: 100%; height: auto; }
/* the marks sit at 25% and 78.3% of the viewBox, so the labels centre there */
.tracefig__t {
  width: max-content; max-width: 100%;
  font: 500 .74rem/1.4 var(--f-mono);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-40);
  opacity: 0; transition: opacity .6s var(--ease);
}
.tracefig__t--in  { margin-inline-start: 25%;   transform: translateX(-50%); transition-delay: .5s; }
.tracefig__t--out { margin-inline-start: 78.3%; transform: translateX(-50%); transition-delay: 1.5s; }
.rv.is-in .tracefig__t { opacity: 1; }

.tracefig figcaption { font: 400 .74rem/1.55 var(--f-mono); color: var(--ink-40); }
.tracefig__struct { stroke: var(--ink); stroke-opacity: .2; stroke-width: 1.6; stroke-linecap: round; fill: none; }
.tracefig__mark { fill: var(--orange); stroke: var(--paper); stroke-width: 3; }
/* the droplet reads as water rather than as another brand accent */
.tracefig__drip { fill: #4D939D; }

.tracefig__path {
  fill: none; stroke: var(--orange); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  /* pathLength="1" on the element normalises the geometry, so the draw
     finishes exactly when the transition does whatever the coordinates are */
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s var(--ease) .35s;
}
.rv.is-in .tracefig__path { stroke-dashoffset: 0; }

.tracefig__mark, .tracefig__drip { opacity: 0; transition: opacity .6s var(--ease); }
.tracefig__in  { transition-delay: .5s; }
.tracefig__out { transition-delay: 1.5s; }
.rv.is-in .tracefig__mark, .rv.is-in .tracefig__drip { opacity: 1; }

/* the drawing itself still scales, so keep the strokes from going hairline */
@media (max-width: 620px) {
  .tracefig__struct { stroke-width: 2.4; }
  .tracefig__path { stroke-width: 3.4; }
  .tracefig__mark { stroke-width: 4; }
}





@media (prefers-reduced-motion: reduce) {
  .tracefig__path { stroke-dashoffset: 0 !important; }
  .tracefig__mark, .tracefig__drip, .tracefig__t { opacity: 1 !important; }
}

/* --- the three passes ------------------------------------------------------
   (How we trace it) sits under the split rather than inside its right column.
   It reuses `.steps` from the home page, which is the pattern this was asked
   to look like: hairline grid, big mono index, an orange node on the rule
   above each cell so the row reads as one sequence. Two tweaks: a three-up
   track, since the base grid is built for four, and cells that match the
   section tone so the figure above stays the only raised surface. */
.steps--3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sec-alt .step { background: var(--bg-deep); }
.sec-alt .step::before { box-shadow: 0 0 0 4px var(--bg-deep); }

/* carries the whole gap between the split and the row now that the lead-in
   above it is gone */
.tracehow { margin-top: clamp(56px, 6.4vw, 104px); }


/* --- photo cards ----------------------------------------------------------
   (By roof type) read as an afterthought because the photograph was the
   smallest thing in it: a ~275px thumbnail beside cramped copy, four of them
   two-up. Clients come to this section to see roofs. The image is now the
   full width of the card at 16:10, and the copy has room under it.

   Numbers came off the cards. Roof types are not a sequence, and 01-04
   implied an order that does not exist; the tag on the photograph is the
   real identifier. The list gained a label because "what is this list?" was
   a fair question about three bare mono lines.

   The card is flat - image, heading, copy, work block as four direct
   children - so one level of subgrid lines all four up across a row. A body
   wrapper would have needed two levels, and padding on a subgrid box shifts
   the very tracks it is meant to align. */
.pcards { display: grid; gap: clamp(22px, 2.4vw, 34px); }
@media (min-width: 900px) { .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pcard {
  --pad: clamp(26px, 2.8vw, 38px);
  display: grid;
  /* image, heading, copy, work; the copy row takes the slack so the work
     block pins to the bottom wherever subgrid is unavailable */
  grid-template-rows: auto auto 1fr auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-l);
  overflow: hidden;
}
/* row-gap: 0 because a subgrid otherwise inherits the parent gap between each
   of its own tracks; spacing inside the card comes from padding instead */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 900px) {
    .pcard { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  }
}

.pcard__img { position: relative; aspect-ratio: 16 / 10; background: var(--ink-40); }
.pcard__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* a street-level shot puts a lot of road in the lower frame; bias the visible
   window upward so the building carries the card */
.pcard__img--high img { object-position: 50% 34%; }
/* the tag sits on the photograph, so it needs ground of its own */
.pcard__img::after {
  content: ""; position: absolute; z-index: 1; inset: auto 0 0;
  height: 42%; pointer-events: none;
  background: linear-gradient(to top, rgba(10, 9, 8, .74) 0%, rgba(10, 9, 8, .3) 45%, rgba(10, 9, 8, 0) 100%);
}
.pcard__tag {
  position: absolute; z-index: 2;
  left: clamp(16px, 1.8vw, 22px); bottom: clamp(16px, 1.8vw, 22px);
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 .76rem/1 var(--f-mono);
  letter-spacing: .12em; text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 10px rgba(10, 9, 8, .5);
}
.pcard__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex: none; }

.pcard__h {
  padding: clamp(26px, 2.8vw, 36px) var(--pad) 0;
  font-family: var(--f-sans);
  font-size: clamp(1.12rem, 1.04rem + .45vw, 1.3rem);
  font-weight: 600; letter-spacing: 0; line-height: 1.25;
}
.pcard__p {
  padding: 14px var(--pad) 0;
  font-size: 1rem; line-height: 1.7; color: var(--ink-60);
}

/* the typical jobs for that roof type, pinned low so all four line up */
.pcard__work {
  align-self: start;
  margin-top: clamp(24px, 2.6vw, 34px);
  padding: clamp(20px, 2.2vw, 26px) var(--pad) var(--pad);
  border-top: 1px solid var(--rule);
  display: grid; gap: 15px;
}
.pcard__k {
  font: 500 .72rem/1 var(--f-mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-40);
}
.pcard__list { display: grid; gap: 12px; }
.pcard__list li {
  position: relative; padding-left: 17px;
  font: 400 .88rem/1.55 var(--f-mono);
  color: var(--ink-80);
}
.pcard__list li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 5px; height: 5px; border-radius: 1px; background: var(--orange);
}
.pcard a {
  color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--orange);
  text-underline-offset: 3px; text-decoration-thickness: 1.5px;
}
.pcard a:hover { color: var(--orange); }

/* --- urgency tiers -------------------------------------------------------- */

.tier { background: var(--paper); display: grid; gap: 19px; align-content: start; }
.tier__k {
  display: inline-flex; align-items: center; gap: 9px;
  font: 500 .72rem/1 var(--f-mono);
  letter-spacing: .1em; text-transform: uppercase;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--rule);
}
.tier__k::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tier--now   .tier__k { color: var(--orange); }
.tier--now   .tier__k::before { background: var(--orange); }
.tier--soon  .tier__k { color: #9A6410; }
.tier--soon  .tier__k::before { background: var(--sun); }
.tier--watch .tier__k { color: var(--ink-40); }
.tier--watch .tier__k::before { background: var(--ink-40); }
.tier ul { display: grid; gap: 14px; }
.tier li {
  position: relative; padding-left: 17px;
  font-size: 1rem; line-height: 1.55; color: var(--ink-80);
}
.tier li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 5px; height: 5px; border-radius: 1px; background: var(--ink-40);
}

/* --- process: sticky head + vertical numbered steps (dark) ---------------
   Currently unused: (The process) merged into (The repair) as `.phases`
   below. Kept as the dark step component for the other six service pages.
   Replaced a five-across row. At 1440 each column was ~227px and the copy
   broke into four-word slivers; below 1220 it got worse. Laid out vertically
   each step gets the full width of the right column instead. */
.process { display: grid; gap: clamp(38px, 4.5vw, 72px); }
@media (min-width: 1000px) {
  .process {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: clamp(48px, 6vw, 104px);
  }
  .process__head {
    position: sticky;
    top: calc(var(--header-h) + 44px);
    align-self: start;
  }
}
.process__head .h-lg { margin-top: 18px; }
.process__head .lede { margin-top: 20px; max-width: 32ch; }
.process__head .btn { margin-top: clamp(26px, 3vw, 36px); }

.steps-v { display: grid; }
.stepv {
  position: relative;
  display: grid;
  gap: 12px;
  padding: clamp(28px, 3.2vw, 40px) 0;
  border-top: 1px solid var(--rule-dark);
}
.stepv:last-child { border-bottom: 1px solid var(--rule-dark); }
/* a node on each rule, the same device the homepage process row uses */
.stepv::before {
  content: ""; position: absolute;
  top: -5px; left: 0;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px var(--night);
}
/* matched to the foundation grid's step number: parenthesised, orange, and
   stacked above the heading rather than sitting in its own side column */
.stepv__n {
  font-family: var(--f-mono);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}
.stepv h3 {
  font-family: var(--f-sans);
  font-size: clamp(1.16rem, 1.06rem + .45vw, 1.38rem);
  font-weight: 600; letter-spacing: 0; line-height: 1.25;
  color: var(--paper);
}
/* :not() because .stepv p (0,1,1) would otherwise resize the number label */
.stepv p:not(.stepv__n) {
  font-size: 1rem; line-height: 1.72;
  color: rgba(245, 243, 239, .64);
  max-width: 56ch;
}

/* --- the repair: three phases, five steps ---------------------------------
   (The repair) and (The process) used to be two sections: a three-column
   foundation grid stating the principle, then a dark sticky-head list of the
   five steps. They said the same thing at two levels of detail, so they are
   one section now. The three phases are the left column; the steps that
   happen inside each phase sit on a rail to their right. The mapping is
   real, not decorative: locating covers steps 01-02, repairing 03-04, and
   closing 05.

   Only the steps are numbered. The phases carried 01-03 as well, and a phase
   number sitting beside step 01 and step 02 read as a step with substeps
   however the two were styled. Named stages plus one run of 01-05 says the
   same thing without the ambiguity.

   Motion is one wave downward — each phase's rail draws from the top, its
   dots landing behind it. Nothing here responds to hover. */
.phases {
  --rail: clamp(24px, 2.4vw, 34px);
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--rule);
}
.phase {
  display: grid; gap: clamp(22px, 2.6vw, 30px);
  padding: clamp(30px, 3.4vw, 46px) 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 900px) {
  .phase {
    grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
    gap: clamp(34px, 4.4vw, 80px);
    align-items: start;
  }
}
.phase__lead { display: grid; gap: 12px; align-content: start; }
/* the orange the phase number used to carry, without a second number
   sequence: a short tick over the stage name */
.phase__lead::before {
  content: ""; width: 34px; height: 2px;
  background: var(--orange);
  margin-bottom: 6px;
}
.phase__lead h3 {
  font-family: var(--f-sans);
  font-size: clamp(1.2rem, 1.7vw, 1.48rem);
  font-weight: 600; letter-spacing: 0; line-height: 1.2;
}
.phase__lead > p {
  font-size: 1rem; line-height: 1.7;
  color: var(--ink-60); max-width: 36ch;
}

.phase__steps {
  position: relative;
  list-style: none; margin: 0;
  padding-left: var(--rail);
  display: grid; gap: clamp(24px, 2.6vw, 34px);
  align-content: start;
}
.phase__steps::before {
  content: ""; position: absolute;
  left: 0; top: 7px; bottom: 7px; width: 1px;
  background: var(--rule);
  transform: scaleY(0); transform-origin: top center;
  transition: transform .9s var(--ease);
  transition-delay: calc(var(--d, 0) * .22s + .15s);
}
.rv.is-in .phase__steps::before { transform: scaleY(1); }

.pstep { position: relative; display: grid; gap: 9px; align-content: start; }
/* -4px centres a 9px dot on the 1px rail sitting var(--rail) to the left */
.pstep::before {
  content: ""; position: absolute;
  left: calc(var(--rail) * -1 - 4px); top: 7px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px var(--bg-deep);
  opacity: 0; transform: scale(.4);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: calc(var(--d, 0) * .22s + var(--s, 0) * .24s + .4s);
}
.rv.is-in .pstep::before { opacity: 1; transform: none; }

.pstep__h {
  font-family: var(--f-sans);
  font-size: clamp(1.04rem, 1rem + .32vw, 1.18rem);
  font-weight: 600; letter-spacing: 0; line-height: 1.3;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 13px;
}
.pstep__n {
  font: 500 .76rem/1 var(--f-mono);
  letter-spacing: .1em; color: var(--ink-40);
  font-variant-numeric: tabular-nums;
}
.pstep p { font-size: 1rem; line-height: 1.72; color: var(--ink-60); max-width: 58ch; }

.phases__foot {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 20px 34px;
  margin-top: clamp(30px, 3.4vw, 46px);
}
.phases__foot p { font-size: 1rem; line-height: 1.65; color: var(--ink-60); max-width: 44ch; }
@media (max-width: 560px) {
  .phases__foot { display: grid; }
  .phases__foot .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .phase__steps::before { transform: scaleY(1) !important; }
  .pstep::before { opacity: 1 !important; transform: none !important; }
}

/* --- a two-panel decision block on its own section ------------------------ */

.decide__col { background: var(--paper); }
/* inside the board a border and a shadow would fight the hairline grid, so the
   recommended column is marked with a wash instead. It has to be layered over
   an opaque base: a bare rgba() let the rule-coloured backdrop behind the
   1px-gap grid show through, and the cell rendered muddy grey rather than warm. */
.decide__col--pick {
  background:
    linear-gradient(rgba(240, 82, 30, .06), rgba(240, 82, 30, .06)),
    var(--paper);
}
.decide__k {
  display: flex; align-items: center; gap: 10px;
  font: 500 .72rem/1 var(--f-mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--orange);
  padding-bottom: 16px; margin-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.decide__k svg { width: 17px; height: 17px; flex: none; }
.decide__col ul { display: grid; gap: 15px; }
.decide__col li {
  position: relative; padding-left: 19px;
  font-size: 1rem; line-height: 1.6; color: var(--ink-80);
}
.decide__col li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 6px; height: 6px; border-radius: 1.5px; background: var(--ink-40);
}
.decide__col--pick li::before { background: var(--orange); }
/* match the label to its own bullets: orange on the highlighted column, muted
   on the alternative, the same colour-coding the tiers above it use */
.decide__col:not(.decide__col--pick) .decide__k { color: var(--ink-40); }



/* --- mid-page call to action ----------------------------------------------
   Two tiles rather than two buttons: the section has to earn a dark break in
   the page, and a phone number and a form link set as plain buttons do not.
   Each tile carries an icon, the label, the action and a line saying when to
   pick it.

   The hover was asked for specifically: the icon tilts left and rights itself
   on the way out. It sits on the whole tile, not just an inner control, since
   the tile is the link. `:focus-visible` gets the same treatment so keyboard
   users see it too, and `prefers-reduced-motion` keeps the state change while
   dropping the transition. */
.ways { display: grid; gap: clamp(18px, 2vw, 26px); }
@media (min-width: 820px) { .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.way {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: clamp(18px, 2vw, 26px);
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid var(--rule-dark);
  border-radius: var(--r-m);
  background: rgba(245, 243, 239, .04);
  color: inherit; text-decoration: none;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.way:hover, .way:focus-visible {
  background: rgba(245, 243, 239, .075);
  border-color: rgba(245, 243, 239, .3);
}
.way:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.way__ico {
  width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center;
  background: rgba(240, 82, 30, .18);
  color: var(--orange);
  transition: transform .45s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.way__ico svg { width: 27px; height: 27px; }
.way:hover .way__ico,
.way:focus-visible .way__ico {
  transform: rotate(-12deg);
  background: var(--orange);
  color: #fff;
}

.way__body { display: grid; gap: 9px; }
.way__k {
  font: 500 .72rem/1 var(--f-mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--orange);
}
.way__h {
  font-family: var(--f-sans);
  font-size: clamp(1.14rem, 1.04rem + .5vw, 1.34rem);
  font-weight: 600; letter-spacing: 0; line-height: 1.2;
  color: var(--paper);
}
.way__p { font-size: 1rem; line-height: 1.65; color: rgba(245, 243, 239, .6); max-width: 42ch; }

.way__go {
  align-self: center;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--rule-dark);
  color: var(--paper);
  transition: transform .35s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.way__go svg { width: 17px; height: 17px; }
.way:hover .way__go,
.way:focus-visible .way__go {
  transform: translateX(4px);
  border-color: rgba(245, 243, 239, .34);
  background: rgba(245, 243, 239, .06);
}

/* below this the three tracks leave the copy about 130px, so the arrow drops
   under the body instead of squeezing it */
@media (max-width: 620px) {
  .way { grid-template-columns: auto minmax(0, 1fr); row-gap: 16px; }
  .way__go { grid-column: 2; justify-self: start; align-self: start; }
}

/* the preference is about animation, not about state: the tilt still happens,
   it just arrives instantly instead of easing in */
@media (prefers-reduced-motion: reduce) {
  .way, .way__ico, .way__go { transition: none; }
}

/* --- the sorting board -----------------------------------------------------
   (Priority) and (The decision) were two sections, then two stacked
   movements, and both read as separate topics sitting next to each other.
   They are two chapters of one bordered board now, because they are the same
   act: a finding gets sorted twice, once for how soon and once for how big.
   One surface divided by hairlines says that; two blocks did not.

   Everything belonging to a chapter lives inside it — label, heading, lede,
   cells and the closing note — so the board is self-contained and the section
   above it is free to be the photo and the framing. */
.board {
  margin-top: clamp(48px, 5.4vw, 88px);
  border: 1px solid var(--rule);
  border-radius: var(--r-m);
  background: var(--paper);
  overflow: hidden;
}
.board__chapter + .board__chapter { border-top: 1px solid var(--rule); }

.board__head {
  display: grid; gap: 15px;
  padding: clamp(28px, 3.2vw, 42px) var(--cellpad) clamp(24px, 2.6vw, 32px);
}
.board__title { display: grid; gap: 13px; }
@media (min-width: 900px) {
  .board__title {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(28px, 3.6vw, 60px);
    align-items: baseline;
  }
}
.board__title h3 { line-height: 1.14; }
.board__lede { font-size: 1rem; line-height: 1.7; color: var(--ink-60); max-width: 50ch; }

/* gap plus a rule-coloured backdrop is how the cells get their hairlines; the
   cells must stay opaque or the backdrop shows through */
.board {  --cellpad: clamp(24px, 2.8vw, 40px); }
.board__cells {
  display: grid; gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}
.board__cells > * { padding: clamp(26px, 3vw, 38px) var(--cellpad); }
@media (min-width: 860px) { .board__cells--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 700px) { .board__cells--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.board__note {
  padding: clamp(20px, 2.2vw, 27px) var(--cellpad) clamp(22px, 2.4vw, 30px);
  font-size: .97rem; line-height: 1.72; color: var(--ink-60);
}
.board__k {
  display: inline-block; margin-right: 15px;
  font: 500 .72rem/1 var(--f-mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--orange);
}

/* --- failure matrix --------------------------------------------------------
   One panel for the whole (Common failures) section. Six rows, one per
   failure, sharing a single twelve-month axis so they read against each
   other. The chart and the copy are the same object here: an earlier build
   drew the chart above a separate card grid, which listed the same six items
   twice and made the section feel like two unrelated things.

   Windows come from the Valley's climate (heat May-Sep, monsoon Jun 15 -
   Sep 30, dust Apr-Sep). It plots when conditions are active, never call
   volume, which has not been supplied. The words under each track say the
   same thing the bands draw, so the data survives without CSS or JS.

   Motion is one gesture in one direction: the panel fades, the bands sweep
   left to right staggered down the rows, then the current-month line draws
   down behind them. Nothing here responds to hover. */
.fails {
  --grid: 52px minmax(0, 1.02fr) minmax(0, 1fr);
  --cgap: clamp(22px, 2.6vw, 44px);
  --rowpad: clamp(26px, 2.8vw, 36px);
  padding: clamp(24px, 2.8vw, 38px) clamp(20px, 2.4vw, 36px) clamp(20px, 2.2vw, 28px);
  border: 1px solid var(--rule);
  border-radius: var(--r-m);
  background: var(--paper);
}

.fails__top {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 8px 24px;
  padding-bottom: clamp(16px, 1.8vw, 22px);
}
.fails__title { font-size: clamp(1rem, .96rem + .3vw, 1.14rem); font-weight: 600; letter-spacing: 0; }
.fails__live { font: 400 .8rem/1.5 var(--f-mono); color: var(--ink-60); }
.fails__live b { color: var(--orange); font-weight: 500; }

/* The axis pins under the site header so the months stay readable the whole
   way down the panel; six rows is further than anyone should have to
   remember where June was. Background must be opaque or rows scroll through. */
.fails__axis {
  position: sticky; top: calc(var(--header-h) + 12px); z-index: 3;
  background: var(--paper);
  /* padding-top matters: without it the opaque band is only as tall as the
     letters and the row scrolling underneath peeks out above them */
  padding: 11px 0 9px;
  border-bottom: 1px solid var(--rule);
}
.fails__scale {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  font: 400 .68rem/1 var(--f-mono);
  color: var(--ink-40); text-align: center;
}
.fails__scale .is-now { color: var(--orange); font-weight: 500; }

.fails__list { list-style: none; margin: 0; padding: 0; }

.fail {
  display: grid;
  gap: 18px;
  padding: var(--rowpad) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.fail:last-child { border-bottom: 0; }

.fail__id { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.fail__ico {
  width: 52px; height: 52px; border-radius: 15px; flex: none;
  display: grid; place-items: center;
  background: rgba(240, 82, 30, .1);
  color: var(--orange);
}
.fail__ico svg { width: 26px; height: 26px; }
.fail__n {
  font: 500 .74rem/1 var(--f-mono);
  letter-spacing: .12em; color: var(--orange);
  font-variant-numeric: tabular-nums;
}

.fail__body h3 {
  font-family: var(--f-sans);
  font-size: clamp(1.06rem, 1rem + .34vw, 1.2rem);
  font-weight: 600; letter-spacing: 0; line-height: 1.25;
  margin-bottom: 12px;
}
.fail__body > p { font-size: 1rem; line-height: 1.7; color: var(--ink-60); max-width: 56ch; }

/* relative so the current-month line can span the full row height; stretched
   to the row, consecutive lines meet and read as one line down the panel */
.fail__data { position: relative; }

.fail__track {
  display: block; position: relative;
  height: 12px; border-radius: 100px;
  background: rgba(20, 19, 17, .055);
}
.fail__band {
  position: absolute; inset-block: 0;
  left: calc(var(--a) / 12 * 100%);
  width: calc((var(--b) - var(--a)) / 12 * 100%);
  border-radius: 100px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.1s var(--ease);
  transition-delay: calc(var(--d, 0) * .09s + .25s);
}
.fail__band--build { background: rgba(240, 82, 30, .24); }
.fail__band--show  { background: var(--orange); }
.rv.is-in .fail__band { transform: scaleX(1); }

/* Spans the row padding as well as the data, so consecutive rows meet and
   read as one line down the whole panel. The gradient keeps it near-invisible
   where it crosses copy and bright only across the 12px track, which is the
   one place the reader needs it. */
.fail__now {
  position: absolute; z-index: 1;
  top: calc(var(--rowpad) * -1); bottom: calc(var(--rowpad) * -1);
  left: calc((var(--now, 0) + .5) / 12 * 100%);
  width: 1px;
  background: linear-gradient(to bottom,
    rgba(20, 19, 17, .10) 0,
    rgba(20, 19, 17, .10) var(--rowpad),
    rgba(20, 19, 17, .46) var(--rowpad),
    rgba(20, 19, 17, .46) calc(var(--rowpad) + 12px),
    rgba(20, 19, 17, .10) calc(var(--rowpad) + 12px),
    rgba(20, 19, 17, .10) 100%);
  opacity: 0; transition: opacity .7s var(--ease);
  transition-delay: calc(var(--d, 0) * .09s + .8s);
}
.rv.is-in .fail__now { opacity: 1; }

.fail__window {
  margin-top: 14px;
  font: 400 .74rem/1.5 var(--f-mono);
  color: var(--ink-40);
  opacity: 0; transform: translateY(4px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--d, 0) * .09s + .6s);
}
.rv.is-in .fail__window { opacity: 1; transform: none; }

/* Values are <dd>, never <p>, to stay clear of the container-p-beats-label
   trap that has eaten mono labels elsewhere in this file. */
.fail__facts {
  margin-top: clamp(20px, 2.2vw, 26px);
  padding-top: clamp(16px, 1.8vw, 22px);
  border-top: 1px solid var(--rule-soft);
  display: grid; gap: 12px;
}
.fail__facts > div { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 14px; align-items: baseline; }
.fail__facts dt {
  font: 500 .72rem/1.6 var(--f-mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-40);
}
.fail__facts dd { font-size: .97rem; line-height: 1.6; color: var(--ink-80); }
.fail__facts a {
  color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--orange);
  text-underline-offset: 3px; text-decoration-thickness: 1.5px;
}
.fail__facts a:hover { color: var(--orange); }

.fails__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  margin-top: clamp(16px, 1.8vw, 22px);
  padding-top: clamp(14px, 1.6vw, 18px);
  border-top: 1px solid var(--rule);
}
.fails__key { display: inline-flex; align-items: center; gap: 9px; font: 400 .74rem/1 var(--f-mono); color: var(--ink-40); }
.fails__key i { width: 20px; height: 8px; border-radius: 100px; flex: none; }
.fails__key .is-build { background: rgba(240, 82, 30, .3); }
.fails__key .is-show  { background: var(--orange); }
.fails__note { margin-left: auto; font: 400 .74rem/1.5 var(--f-mono); color: var(--ink-40); }

/* Three columns wide enough for a readable measure beside a legible axis:
   icon, what it is, when it happens and what we do. Below this the row
   stacks and the axis still lines up because the track goes full width. */
@media (min-width: 1040px) {
  .fails__axis, .fail { grid-template-columns: var(--grid); column-gap: var(--cgap); }
  .fails__axis { display: grid; }
  .fails__scale { grid-column: 3; }
  .fail { row-gap: 0; align-items: stretch; }
  .fail__id { display: grid; gap: 12px; justify-items: center; align-content: start; }
  .fail__n { letter-spacing: .1em; }
  .fails__foot { margin-left: calc(52px + var(--cgap)); }
}
@media (max-width: 1039px) {
  .fail__data { margin-top: 4px; }
  /* A stacked row can't carry a continuous line, and a faint one striping the
     copy is only noise. Mark the month across the track instead. */
  .fail__now {
    top: -7px; bottom: auto; height: 26px;
    background: rgba(20, 19, 17, .42);
  }
}
@media (max-width: 599px) {
  .fail__facts > div { grid-template-columns: minmax(0, 1fr); gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .fail__band { transform: scaleX(1) !important; }
  .fail__now { opacity: 1 !important; }
  .fail__window { opacity: 1 !important; transform: none !important; }
}

/* Homepage buttons also use the service action treatment. Keep it here so the
   homepage does not need the stylesheet for service detail pages. */
.home-page main .btn--primary {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 52px; color: #fff;
  border: 1px solid var(--service-accent); background: var(--service-accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 9px 22px var(--service-accent-shadow, rgba(240,82,30,.24));
  transition: transform .22s var(--ease), background-color .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.home-page main .btn--primary:hover {
  color: #fff; border-color: var(--service-accent-hover, var(--orange-lo));
  background: var(--service-accent-hover, var(--orange-lo));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 13px 28px var(--service-accent-shadow, rgba(240,82,30,.3));
}
.home-page main .btn--primary .btn__ico {
  width: 31px; height: 31px; padding: 7px; flex: none; border-radius: 9px;
  color: #fff; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  transform: rotate(-3deg);
  transition: transform .22s var(--ease), background-color .22s var(--ease), border-color .22s var(--ease);
}
.home-page main .btn--primary:hover .btn__ico {
  background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.3);
  transform: translateY(-2px) rotate(2deg);
}

/* Fixed contact actions used by the homepage at mobile widths. */
.home-page .service-mobile-call { display: none; }
@media (max-width: 899px) {
  .home-page { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  .home-page .service-mobile-call {
    position: fixed; z-index: 90; inset: auto 0 0; display: block;
    padding: 13px var(--gut) calc(11px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(20,19,17,.16); background: #efede8;
    box-shadow: 0 -12px 34px rgba(20,19,17,.12);
  }
  .home-page .service-mobile-call__actions {
    width: min(500px, 100%); margin-inline: auto; display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(112px, .8fr); gap: 8px;
  }
  .home-page .service-mobile-call .btn {
    position: relative; width: 100%; min-height: 56px; justify-content: center; overflow: visible;
    padding-inline: 14px; border-radius: 11px; font-size: .84rem; letter-spacing: 0;
  }
  .home-page .service-mobile-call .btn--primary {
    color: #fff; border-color: #f0521e; background: #f0521e;
  }
  .home-page .service-mobile-call .btn--primary .btn__ico {
    width: 34px; height: 34px; margin-left: -4px; padding: 8px; border-radius: 9px;
    color: var(--service-accent); background: #fff; box-shadow: 0 5px 12px rgba(75,30,13,.22);
    transform: translateY(-3px) rotate(-7deg); animation: service-icon-drift 4.2s ease-in-out infinite;
  }
  .home-page .service-mobile-call .btn--ghost {
    color: var(--ink); border: 1px solid rgba(20,19,17,.2); background: rgba(255,255,255,.72);
    box-shadow: 0 5px 14px rgba(20,19,17,.08);
  }
  .home-page .service-mobile-call .btn--ghost .btn__ico {
    width: 21px; height: 21px; color: var(--service-accent);
  }
}
@keyframes service-icon-drift {
  0%, 100% { transform: translateY(-3px) rotate(-7deg); }
  50% { transform: translateY(-5px) rotate(-4deg); }
}
@media (max-width: 360px) {
  .home-page .service-mobile-call__actions { grid-template-columns: minmax(0, 1fr) 98px; }
  .home-page .service-mobile-call .btn { padding-inline: 9px; gap: 6px; font-size: .78rem; }
  .home-page .service-mobile-call .btn--primary .btn__ico { width: 29px; height: 29px; padding: 7px; }
  .home-page .service-mobile-call__optional { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .service-mobile-call .btn__ico { animation: none !important; }
}