/* ============================================================
   THE ENGINE
   ============================================================
   Everything above the CLIENT LAYER divider is the shared
   template. If you change something up there for one client,
   that is a signal the config is missing a variable — add the
   variable to config.css instead so every future build gets it.

   Client-specific components go in the CLIENT LAYER at the
   bottom of this file. If one of them turns out to be something
   EVERY site would want, promote it into the template.
   ============================================================ */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
}

img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-spacing);
  text-transform: var(--display-case);
  text-wrap: balance;
  margin: 0;
  line-height: 1.12;
}
h1 { font-size: clamp(2rem, 6vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); }
h3 { font-size: 1.15rem; }
p  { margin: 0; }

a { color: var(--brand-ink); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

.wrap { max-width: 1080px; margin: 0 auto; padding-inline: 20px; }
.narrow { max-width: 720px; }

section { padding-block: var(--section-pad); }
section.tint  { background: var(--brand-tint); }
section.ground { background: var(--ground); }

.stack { display: flex; flex-direction: column; gap: 18px; }
.stack-sm { display: flex; flex-direction: column; gap: 10px; }

.eyebrow {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-ink);
}
.lede { font-size: 1.15rem; color: var(--muted); }
.muted { color: var(--muted); }

/* ---------- skip link ---------- */
.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff; padding: 12px 18px; z-index: 100;
}
.skip:focus { left: 8px; top: 8px; }

/* ---------- emergency banner (config controls display) ---------- */
.emergency {
  display: var(--emergency-banner);
  background: var(--alert); color: #fff;
  text-align: center; padding: 10px 20px;
  font-weight: 600; font-size: 15px;
}
.emergency a { color: #fff; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px);
  background: var(--paper); border-bottom: var(--border-weight) solid var(--rule);
  z-index: 50;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-block: 14px;
}
.brandmark {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: 1.25rem; letter-spacing: var(--display-spacing);
  text-transform: var(--display-case);
  color: var(--ink); text-decoration: none;
}
.brandmark img { max-height: 44px; width: auto; }

.nav-toggle {
  display: none; background: none; border: var(--border-weight) solid var(--rule);
  border-radius: var(--radius); padding: 9px 12px; font: inherit; cursor: pointer;
  color: var(--ink);
}
.nav { display: flex; align-items: center; gap: 22px; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--brand-ink); text-decoration: underline; }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: var(--border-weight) solid var(--rule);
    padding: 8px 20px 16px;
  }
  .nav.open { display: flex; }
  .nav a { padding: 13px 0; border-bottom: 1px solid var(--rule); }
  .nav .btn { margin-top: 12px; text-align: center; }
}

/* ---------- buttons — 44px min tap target ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px;
  border-radius: var(--radius); border: var(--border-weight) solid transparent;
  font-family: var(--font-body); font-size: 16px; font-weight: 700;
  text-decoration: none; cursor: pointer; transition: background .15s, color .15s;
}
.btn-primary { background: var(--brand); color: var(--brand-on); box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--brand-ink); color: var(--brand-on); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- hero ---------- */
.hero { padding-block: calc(var(--section-pad) * 1.05); }
.hero-grid {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center;
}
.hero-photo {
  border-radius: var(--radius); box-shadow: var(--shadow);
  aspect-ratio: 4 / 3; object-fit: cover; width: 100%; max-width: 100%;
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- trust strip (license, years, insured) ---------- */
.trust {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  padding-block: 20px; border-block: var(--border-weight) solid var(--rule);
  font-size: 15px; font-weight: 600; color: var(--muted);
}

/* ---------- cards ---------- */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.card {
  background: var(--paper);
  border: var(--border-weight) solid var(--rule);
  border-radius: var(--radius);
  padding: 22px;
  display: flex; flex-direction: column; gap: 9px;
}
.card h3 { color: var(--ink); }

/* ---------- reviews ---------- */
.review {
  background: var(--paper); border: var(--border-weight) solid var(--rule);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius); padding: 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.review blockquote { margin: 0; font-size: 1.02rem; }
.review cite { font-style: normal; font-weight: 700; font-size: 14px; }
.stars { color: var(--brand); letter-spacing: 2px; font-size: 15px; }

/* ---------- gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 700px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
.gallery img {
  aspect-ratio: 1; object-fit: cover; width: 100%;
  border-radius: var(--radius); border: var(--border-weight) solid var(--rule);
}

/* ---------- FAQ ---------- */
.faq details {
  border-bottom: var(--border-weight) solid var(--rule); padding: 16px 0;
}
.faq summary {
  cursor: pointer; font-weight: 700; font-size: 1.02rem;
  list-style: none; display: flex; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brand); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin-top: 10px; color: var(--muted); }

/* ---------- service areas ---------- */
.areas { display: flex; flex-wrap: wrap; gap: 8px; }
.areas li {
  list-style: none; background: var(--brand-tint); color: var(--brand-ink);
  border-radius: var(--radius); padding: 7px 14px; font-size: 15px; font-weight: 600;
}

/* ---------- form ---------- */
.form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 700; font-size: 15px; }
.field .hint { font-size: 14px; color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px;               /* 16px stops iOS zoom on focus */
  padding: 13px 14px; min-height: 48px;
  border: var(--border-weight) solid var(--rule); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form-note { font-size: 14px; color: var(--muted); }
.form-msg { padding: 14px 16px; border-radius: var(--radius); font-weight: 600; }
.form-msg.ok   { background: var(--brand-tint); color: var(--brand-ink); border: var(--border-weight) solid var(--brand); }
.form-msg.err  { background: var(--alert-tint); color: var(--alert);     border: var(--border-weight) solid var(--alert); }

/* ---------- call band ---------- */
.callband {
  background: var(--brand); color: var(--brand-on); text-align: center;
}
.callband h2, .callband p { color: var(--brand-on); }
.callband .btn-primary { background: var(--paper); color: var(--brand-ink); }
.callband .btn-primary:hover { background: var(--ground); color: var(--brand-ink); }

/* ---------- footer ---------- */
.site-footer {
  background: var(--ink); color: #d7dbdf;
  padding-block: 46px calc(34px + env(safe-area-inset-bottom, 0px));
}
.site-footer a { color: #fff; }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; gap: 26px; } }
.site-footer h3 { color: #fff; font-size: 1rem; margin-bottom: 8px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.footer-legal {
  margin-top: 32px; padding-top: 20px; border-top: 1px solid #333a40;
  font-size: 14px; color: #9aa4ac;
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
}

/* ---------- sticky mobile call bar ---------- */
.callbar { display: none; }
@media (max-width: 700px) {
  .callbar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--brand); color: var(--brand-on);
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
    text-align: center; font-weight: 700; font-size: 17px; text-decoration: none;
  }
  body { padding-bottom: 76px; }
}

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


/* ============================================================
   ============================================================
   CLIENT LAYER — DELTA RIDGE ROOFING ONLY
   ============================================================
   Roofing-specific components. A roof is bought once every
   20-30 years by someone who has never bought one before and
   is usually looking at a stain on their ceiling while they
   read this. So the page is built around: stop the water,
   understand what you are buying, know what the week looks
   like. None of that generalises to a salon, so it lives here.

   Candidates for promotion into the template later:
     .steps  and  .spec-table  are trade-agnostic enough that
     the next two or three builds will probably want them.
   ============================================================ */

/* ---------- dark hero, roofline art ---------- */
.roof-hero {
  background: var(--slate);
  color: var(--on-slate);
  border-bottom: 4px solid var(--brand);
  padding-block: clamp(40px, 7vw, 84px);
  overflow: hidden;
}
.roof-hero .eyebrow { color: #E9A183; }
.roof-hero h1 { color: #fff; }
.roof-hero .lede { color: #C3CDD4; }
.roof-hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 48px; align-items: center;
}
@media (max-width: 900px) {
  .roof-hero-grid { grid-template-columns: 1fr; gap: 30px; }
}
.roof-art { width: 100%; height: auto; display: block; }

/* the 3 quick promises under the hero buttons */
.hero-points {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin-top: 4px; padding-top: 18px;
  border-top: 1px solid var(--slate-line);
  font-size: 15px; font-weight: 600; color: #B7C3CA;
}
.hero-points span { display: inline-flex; align-items: center; gap: 8px; }
.hero-points span::before {
  content: ""; width: 9px; height: 9px; flex: 0 0 9px;
  background: var(--brand); transform: rotate(45deg);
}

/* ---------- storm triage band ---------- */
.triage { background: var(--slate-soft); color: var(--on-slate); }
.triage h2 { color: #fff; }
.triage .lede { color: #B7C3CA; }
.triage .steps li { border-color: var(--slate-line); background: rgb(255 255 255 / .03); }
.triage .steps h3 { color: #fff; }
.triage .steps p { color: #B7C3CA; }
/* inline links on the dark bands — the default link colour is
   brand-ink, which is unreadable on slate */
.triage a:not(.btn), .roof-hero a:not(.btn) { color: #F0A87F; }

/* the ghost button is ink-on-transparent, which disappears on the
   dark bands — relight it wherever it sits on slate */
.roof-hero .btn-ghost, .triage .btn-ghost {
  color: #fff; border-color: rgb(255 255 255 / .45);
}
.roof-hero .btn-ghost:hover, .triage .btn-ghost:hover {
  color: #fff; border-color: var(--brand); background: rgb(255 255 255 / .07);
}

/* ---------- numbered steps (triage + install week) ---------- */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr);
  counter-reset: step;
}
.steps.steps-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .steps, .steps.steps-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps, .steps.steps-4 { grid-template-columns: 1fr; } }
.steps li {
  counter-increment: step;
  border: var(--border-weight) solid var(--rule);
  border-top: 4px solid var(--brand);
  border-radius: var(--radius);
  padding: 20px 20px 22px;
  display: flex; flex-direction: column; gap: 8px;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display); font-size: 1.5rem; line-height: 1;
  color: var(--brand); font-weight: 700;
}

/* ---------- material comparison table ---------- */
.spec-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.spec-table caption {
  text-align: left; color: var(--muted); font-size: 14px; padding-bottom: 12px;
}
.spec-table th, .spec-table td {
  text-align: left; padding: 13px 14px;
  border-bottom: var(--border-weight) solid var(--rule);
  vertical-align: top;
}
.spec-table thead th {
  font-family: var(--font-display); text-transform: var(--display-case);
  letter-spacing: var(--display-spacing);
  background: var(--slate); color: #fff; border-bottom: none;
  font-size: 1rem;
}
.spec-table tbody th { font-weight: 700; color: var(--ink); width: 26%; }
.spec-table tbody tr:nth-child(even) { background: var(--ground); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 700px) { .spec-table { min-width: 620px; } }

/* ---------- price-driver list ---------- */
.drivers { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.drivers li {
  display: grid; grid-template-columns: 200px 1fr; gap: 4px 24px;
  padding: 16px 0; border-bottom: var(--border-weight) solid var(--rule);
}
.drivers strong {
  font-family: var(--font-display); font-size: 1.05rem;
  text-transform: var(--display-case); letter-spacing: var(--display-spacing);
}
.drivers span { color: var(--muted); }
@media (max-width: 640px) { .drivers li { grid-template-columns: 1fr; } }

/* ---------- Sacramento seasons split ---------- */
.season {
  border: var(--border-weight) solid var(--rule);
  border-left: 6px solid var(--brand);
  border-radius: var(--radius);
  background: var(--paper); padding: 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.season .eyebrow { color: var(--brand); }

/* ---------- photo placeholder frame (swap for a real photo) ---------- */
.photo-slot {
  border: 2px dashed var(--rule); border-radius: var(--radius);
  background: var(--ground); padding: 0; overflow: hidden;
}
.photo-slot svg { width: 100%; height: auto; display: block; }

/* ---------- demo notice — REMOVE THIS for a real client build ---------- */
.demo-notice {
  background: #2A1D14; border: 2px solid var(--brand);
  border-radius: var(--radius); padding: 18px 20px;
  color: #F2E3D9; font-size: 15px; line-height: 1.6;
  margin-bottom: 30px;
}
.demo-notice strong {
  display: block; font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: .06em;
  font-size: 1.05rem; color: #F6A985; margin-bottom: 6px;
}
.demo-flag {
  background: var(--brand); color: #fff;
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .12em; font-size: 12px; font-weight: 700;
  text-align: center; padding: 6px 20px;
}


/* ------------------------------------------------------------
   PART TWO OF THE CLIENT LAYER — the eight-page build
   Nav submenus, inner-page furniture, reveals, gallery,
   lightbox, before/after sliders, team and stats.
   ------------------------------------------------------------ */

/* ---------- TEMPLATE BUG, fixed here ----------
   .nav a { color: var(--ink) } outranks .btn-primary { color: var(--brand-on) }
   on specificity, so the call button in the header renders ink-on-brand.
   On this brand that is 2.95:1 — below AA — and it is wrong on every site
   built from the template, not just this one. Worth pushing upstream into
   styles.css in templates/base-site rather than leaving in the client copy. */
.nav a.btn-primary { color: var(--brand-on); }
.nav a.btn-primary:hover { color: var(--brand-on); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- nav with submenus ---------- */
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 22px; }
.nav li { position: relative; }

.sub-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 15px; color: var(--ink);
}
.sub-toggle::after {
  content: ""; width: 7px; height: 7px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s;
}
.has-sub.open > .sub-toggle::after { transform: rotate(-135deg); margin-top: 2px; }
.sub-toggle:hover, .has-sub.is-current > .sub-toggle { color: var(--brand-ink); }
.has-sub.is-current > .sub-toggle { text-decoration: underline; text-underline-offset: 3px; }

.submenu {
  position: absolute; top: calc(100% + 12px); left: -14px; z-index: 60;
  min-width: 232px; padding: 8px;
  background: var(--paper); border: var(--border-weight) solid var(--rule);
  border-top: 3px solid var(--brand);
  box-shadow: 0 10px 28px rgb(0 0 0 / .13);
  display: none; flex-direction: column; gap: 0;
}
.has-sub:hover > .submenu, .has-sub.open > .submenu,
.has-sub:focus-within > .submenu { display: flex; }
.submenu::before {            /* keeps hover alive across the gap */
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
.submenu a {
  padding: 10px 12px; font-size: 15px; font-weight: 600;
  text-decoration: none; color: var(--ink); border-radius: var(--radius);
}
.submenu a:hover { background: var(--brand-tint); color: var(--brand-ink); text-decoration: none; }
.submenu a[aria-current="page"] { color: var(--brand-ink); background: var(--brand-tint); }

@media (max-width: 860px) {
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav li { width: 100%; }
  .sub-toggle {
    width: 100%; justify-content: space-between;
    padding: 13px 0; border-bottom: 1px solid var(--rule);
  }
  .submenu {
    position: static; min-width: 0; border: 0; border-left: 3px solid var(--brand);
    box-shadow: none; padding: 0 0 0 14px; margin-bottom: 8px; background: var(--ground);
  }
  .has-sub:hover > .submenu, .has-sub:focus-within > .submenu { display: none; }
  .has-sub.open > .submenu { display: flex; }
  .submenu a { border-bottom: 1px solid var(--rule); border-radius: 0; }
}

/* ---------- inner page header + breadcrumbs ---------- */
.page-head {
  background: var(--slate); color: var(--on-slate);
  border-bottom: 4px solid var(--brand);
  padding-block: clamp(34px, 5vw, 60px);
}
.page-head h1 { color: #fff; }
.page-head .lede { color: #C3CDD4; max-width: 62ch; }
.page-head .eyebrow { color: #E9A183; }
.page-head a:not(.btn) { color: #F0A87F; }

.crumbs { font-size: 14px; color: #93A3AD; margin-bottom: 4px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: #5E727E; }
.crumbs a { color: #B7C3CA; text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs [aria-current="page"] { color: #E9E4DF; }

/* ---------- scroll reveals ----------
   Scoped to .js so that without JavaScript nothing is hidden. */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
}
.js .reveal:nth-child(2) { transition-delay: .05s; }
.js .reveal:nth-child(3) { transition-delay: .10s; }
.js .reveal:nth-child(4) { transition-delay: .15s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- stats strip ---------- */
.stats {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stats li {
  border-left: 4px solid var(--brand); padding: 4px 0 4px 18px;
  display: flex; flex-direction: column; gap: 2px;
}
.stat-num {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-lab { font-size: 14px; font-weight: 600; color: var(--muted); }
.callband .stat-num, .callband .stat-lab { color: var(--brand-on); }

/* ---------- gallery ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  min-height: 44px; padding: 8px 16px;
  border: var(--border-weight) solid var(--rule); border-radius: var(--radius);
  background: var(--paper); color: var(--ink);
}
.filter:hover { border-color: var(--brand); color: var(--brand-ink); }
.filter.is-on { background: var(--brand); border-color: var(--brand); color: var(--brand-on); }

.gallery-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
@media (max-width: 860px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .gallery-grid { grid-template-columns: 1fr; } }

.gal-item {
  position: relative; padding: 0; margin: 0; cursor: zoom-in; display: block;
  border: var(--border-weight) solid var(--rule); border-radius: var(--radius);
  background: var(--ground); overflow: hidden; width: 100%;
}
.gal-item img {
  aspect-ratio: 4 / 3; object-fit: cover; width: 100%;
  transition: transform .45s cubic-bezier(.2,.7,.3,1);
}
.gal-item:hover img, .gal-item:focus-visible img { transform: scale(1.05); }
.gal-item::after {
  content: attr(data-caption);
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 14px 12px; text-align: left;
  font-family: var(--font-body); font-size: 14px; font-weight: 600; color: #fff;
  background: linear-gradient(to top, rgb(16 20 23 / .88), rgb(16 20 23 / 0));
  transform: translateY(100%); transition: transform .3s ease;
}
.gal-item:hover::after, .gal-item:focus-visible::after { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .gal-item img, .gal-item::after { transition: none; }
  .gal-item::after { transform: translateY(0); }
}

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 90;
  background: rgb(12 15 17 / .93);
  display: grid; grid-template-rows: auto 1fr auto;
  padding: 14px clamp(14px, 4vw, 56px) 22px;
}
.lightbox[hidden] { display: none; }
.lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lb-pos { color: #B7C3CA; font-size: 14px; font-weight: 600; }
.lb-stage { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(8px, 2vw, 20px); min-height: 0; }
.lb-img {
  max-width: 100%; max-height: 74vh; margin: 0 auto;
  border-radius: var(--radius); border: 2px solid #2C3A42;
}
.lb-cap { color: #E8EDF0; text-align: center; font-size: 15px; padding-top: 12px; }
.lightbox button {
  font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
  min-height: 48px; min-width: 48px; padding: 10px 16px;
  background: #222C32; color: #fff;
  border: 2px solid #3E505A; border-radius: var(--radius);
}
.lightbox button:hover { background: var(--brand); border-color: var(--brand); }
.lightbox button:focus-visible { outline: 3px solid #F0A87F; outline-offset: 2px; }

/* ---------- before / after ---------- */
/* --pos lives on .ba, not .ba-frame: the JS sets it on the <figure>,
   and a redeclaration on the frame would shadow the inherited value
   and pin every slider at 50%. */
.ba { --pos: 50%; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ba-frame {
  position: relative; overflow: hidden;
  border: var(--border-weight) solid var(--rule); border-radius: var(--radius);
  background: var(--ground); line-height: 0;
}
.ba-frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ba-before-wrap {
  position: absolute; inset: 0; width: var(--pos, 50%); overflow: hidden;
}
.ba-before-wrap img { width: auto; height: 100%; max-width: none; }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
  width: 4px; margin-left: -2px; background: #fff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .35); pointer-events: none;
}
.ba-handle::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 0 3px #fff, 0 2px 10px rgb(0 0 0 / .4);
}
.ba-range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 48px; height: 100px; }
.ba-range::-moz-range-thumb { width: 48px; height: 100px; border: 0; background: transparent; }
.ba-range:focus-visible ~ .ba-handle::after { box-shadow: 0 0 0 3px #fff, 0 0 0 7px var(--brand-ink); }
.ba-range:focus-visible ~ .ba-tag { outline: 3px solid var(--brand); }
.ba-tag {
  position: absolute; top: 12px; z-index: 2;
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .1em; font-size: 12px; font-weight: 700; line-height: 1;
  padding: 7px 11px; border-radius: var(--radius); pointer-events: none;
}
.ba-tag-before { left: 12px; background: #1F2A30; color: #fff; }
.ba-tag-after  { right: 12px; background: var(--brand); color: var(--brand-on); }
.ba figcaption { font-size: 15px; color: var(--muted); line-height: 1.55; }
.ba figcaption strong { color: var(--ink); display: block; font-weight: 700; }

/* ---------- team ---------- */
.team-card {
  border: var(--border-weight) solid var(--rule); border-radius: var(--radius);
  overflow: hidden; background: var(--paper);
  display: flex; flex-direction: column;
}
.team-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.team-card .body { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.team-card .role {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .1em; font-size: 12px; font-weight: 700; color: var(--brand);
}

/* ---------- values ---------- */
.values { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.values li {
  display: grid; grid-template-columns: 54px 1fr; gap: 6px 20px;
  padding: 20px 0; border-bottom: var(--border-weight) solid var(--rule);
}
.values .n {
  font-family: var(--font-display); font-size: 1.7rem; line-height: 1;
  color: var(--brand); font-weight: 700;
}
.values h3 { grid-column: 2; }
.values p { grid-column: 2; color: var(--muted); }
@media (max-width: 560px) {
  .values li { grid-template-columns: 1fr; }
  .values h3, .values p { grid-column: 1; }
}

/* ---------- placeholder-asset note ---------- */
.note {
  border: 2px dashed var(--brand); border-radius: var(--radius);
  background: var(--brand-tint); color: var(--brand-ink);
  padding: 16px 18px; font-size: 15px; line-height: 1.6;
}
.note strong { display: block; margin-bottom: 4px; }


/* ============================================================
   MOBILE PASS
   ============================================================
   Everything below came out of auditing the real pages at 320,
   360, 390 and 430 with the actual Barlow webfonts loaded.
   Auditing with fallback fonts measures the wrong thing — the
   fallback is much wider than Barlow Condensed, so headlines
   wrap differently and tap targets measure differently.

   Most of these are TEMPLATE-LEVEL bugs, not client-specific:
   they will be wrong on every site built from base-site until
   they are pushed upstream. Marked below.
   ============================================================ */

/* --- TEMPLATE-LEVEL: the header logo is a 33px tap target --- */
.brandmark {
  display: inline-flex; align-items: center;
  min-height: 44px;
}

/* --- TEMPLATE-LEVEL: the emergency banner phone link is the most
       important tap target on the site during a storm, and it was
       an 18px-tall inline link. --- */
.emergency a {
  display: inline-block;
  padding-block: 6px;
  min-height: 32px;
}
@media (max-width: 860px) {
  .emergency { padding-block: 12px; }
  .emergency a { padding-block: 10px; min-height: 44px; }
}

/* --- TEMPLATE-LEVEL: in the mobile menu the call button is an
       inline-flex element inside a full-width li, so it collapsed
       to its text width and sat half off the panel. --- */
@media (max-width: 860px) {
  .nav li > .btn { display: flex; width: 100%; margin-top: 12px; }

  /* With three submenus expanded the panel can run past the bottom
     of a small phone with no way to reach the end of it. */
  .nav.open {
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- TEMPLATE-LEVEL: FAQ rows are a primary mobile interaction
       and were 27px tall. --- */
.faq summary { min-height: 44px; align-items: center; }

/* --- Card headings that are links (the service cards on the home
       page) were 22px tall. --- */
.card h3 a {
  display: inline-flex; align-items: center;
  min-height: 44px;
}

/* --- 12px uppercase with wide tracking is legible on a desktop and
       marginal on a phone. --- */
@media (max-width: 560px) {
  .eyebrow, .team-card .role { font-size: 13px; }
}

/* --- The before/after control is a full-size range input laid over
       the image. Without this, a vertical swipe that starts on the
       image gets swallowed by the slider instead of scrolling the
       page — the single most annoying thing a slider can do on a
       phone. pan-y lets vertical scroll through and keeps
       horizontal drags for the slider. --- */
.ba-range { touch-action: pan-y; }

/* --- The lightbox put prev/next either side of the photo, so on a
       390px screen the "enlarged" image rendered at 246px — smaller
       than the thumbnail that opened it. Named grid areas let the
       same two buttons drop to a row underneath, so there is no
       duplicate markup and no second set of handlers. --- */
.lb-stage { grid-template-areas: "prev img next"; }
.lb-prev { grid-area: prev; }
.lb-img  { grid-area: img; }
.lb-next { grid-area: next; }

@media (max-width: 620px) {
  .lightbox { padding-inline: 10px; }
  .lb-stage {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "img img" "prev next";
    align-content: center;
    gap: 14px;
  }
  .lb-img { max-height: 58vh; justify-self: center; }
  .lb-prev, .lb-next { width: 100%; }
}