/* =====================================================================
   cerpabuilds.com — landing page components

   Surface: Decide/Learn. One idea per section, hero is justified here
   (it is the conversion page for a homeowner). Composition is NOT the
   generic centered-hero + three-equal-cards default: the hero is a
   split (copy left / contact rail right), and the service pillars are
   a ruled list rather than floating tiles.
   ===================================================================== */

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.65;
  color: var(--body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: var(--navy-mid); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 var(--sp-3);
  font-weight: 600;
  text-wrap: balance;
}
h1 { font-size: var(--step-hero); letter-spacing: -0.02em; }
h2 { font-size: var(--step-h2); letter-spacing: -0.01em; }
h3 { font-size: var(--step-h3); font-family: var(--font-body); font-weight: 600; }

p { margin: 0 0 var(--sp-4); }

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

/* -- Layout helpers ------------------------------------------------ */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--sp-5); }
.wrap-narrow { max-width: var(--wrap-narrow); }
.section { padding: var(--sp-8) 0; }
.section--alt { background: var(--surface-alt); }
.section--warm { background: var(--surface-warm); }
.section--navy { background: var(--navy); color: rgba(255,255,255,0.82); }
.section--navy h2, .section--navy h3 { color: #fff; }
.section--navy a { color: #fff; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: var(--sp-3);
  display: block;
}
.eyebrow--muted { color: var(--muted); }

.lead { font-size: var(--step-lead); color: var(--muted); line-height: 1.55; }
.section--navy .lead { color: rgba(255,255,255,0.7); }

/* =====================================================================
   Top bar — brand + phone. Sticky, minimal.
   ===================================================================== */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); min-height: 68px;
}
.brand {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 600;
  color: var(--navy); text-decoration: none; letter-spacing: -0.01em;
}
/* The real logo (downloaded from cerpaconstruction.com) rather than a
   re-typeset wordmark. Intrinsic ratio 2694x1176; the width/height
   attributes on the <img> reserve the space so the bar does not jump. */
.brand__logo { width: 180px; height: auto; display: block; }
.brand__logo--light { width: 200px; }
.brand span { font-family: var(--font-body); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

.topbar__phone {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-weight: 600; color: var(--navy); text-decoration: none;
  font-size: 1.02rem; white-space: nowrap;
}
.topbar__phone svg { width: 18px; height: 18px; stroke: var(--orange); flex: none; }

.topbar__actions {
  display: flex; align-items: center; gap: var(--sp-4);
}
@media (max-width: 560px) {
  .brand span { display: none; }
  .topbar__actions { gap: var(--sp-3); }
}

/* =====================================================================
   Hero — split: promise on the left, contact rail on the right.
   ===================================================================== */
.hero { padding: var(--sp-8) 0 var(--sp-7); background: var(--surface); }
.hero__grid {
  display: grid; gap: var(--sp-7);
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.85fr);
  align-items: start;
}
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; gap: var(--sp-6); } }

.hero h1 em { font-style: normal; color: var(--orange); }
.hero__proof {
  margin-top: var(--sp-5); padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-6);
}
.hero__proof div { min-width: 130px; }
.hero__proof dt { font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-bottom: 2px; }
.hero__proof dd { margin: 0; font-family: var(--font-display); font-size: 1.28rem;
  color: var(--ink); font-weight: 600; }

/* -- Accessibility helpers ---------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: 12px 20px;
  border-radius: 0 0 var(--r-md) 0; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* =====================================================================
   Hero actions — inline pair that wraps on narrow screens.
   ===================================================================== */
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }

.section--warm ul[style] a {
  display: inline-block; padding: 0.6rem 1.1rem; border: 1px solid var(--line);
  border-radius: var(--r-pill); background: var(--surface); font-weight: 600;
  text-decoration: none; color: var(--navy); transition: border-color .16s ease, background .16s ease;
}
.section--warm ul[style] a:hover { border-color: var(--orange); background: #fff8ef; }
.section--warm ul[style] { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .75rem; }

/* -- Contact rail (the conversion block) ---------------------------- */
.rail {
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-md);
}
.rail h2 { font-size: 1.4rem; margin-bottom: var(--sp-2); }
.rail__note { font-size: 0.9rem; color: var(--muted); margin-bottom: var(--sp-4); }

.choice { margin-bottom: var(--sp-4); }
.choice__label {
  display: block; font-weight: 600; font-size: 0.92rem;
  color: var(--ink); margin-bottom: var(--sp-2);
}
.choice__label .req { color: var(--orange); margin-left: 3px; }

.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { margin-bottom: var(--sp-2); }
.contact-list label {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line);
  border-radius: var(--r-md); cursor: pointer; background: var(--surface);
  font-size: 0.95rem; font-weight: 500; color: var(--ink);
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
  min-height: 48px;
}
.contact-list label:hover { border-color: var(--navy-mid); }
.contact-list input { position: absolute; opacity: 0; pointer-events: none; }
.contact-list input:checked + label {
  border-color: var(--orange); background: #fff8ef;
  box-shadow: 0 0 0 1px var(--orange) inset;
}
.contact-list input:focus-visible + label { outline: 3px solid var(--orange); outline-offset: 2px; }
.contact-list svg { width: 19px; height: 19px; flex: none; stroke: var(--navy-mid); }
.contact-list .hint {
  display: block; font-size: 0.78rem; font-weight: 400;
  color: var(--muted); margin-top: 2px;
}

/* -- Conditional fields ------------------------------------------- */
/* Neither the phone nor the email field is shown until a contact method
   is picked — an empty form should not ask for a number nobody has
   committed to giving yet. */
.phone-note {
  display: none; margin: var(--sp-3) 0 var(--sp-2);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  background: #fff8ef; border-left: 3px solid var(--orange);
  font-size: 0.86rem; color: #7a4a00; line-height: 1.5;
}
.phone-note.is-visible { display: block; }
.phone-field, .email-field { display: none; }
.phone-field.is-visible { display: block; }
.email-field.is-visible { display: block; }

.field { margin-bottom: var(--sp-4); }

/* "Add details" disclosure — keeps the rail short enough that the CTA
   button sits above the fold instead of below it. */
.more { margin-bottom: var(--sp-4); }
.more > summary {
  cursor: pointer; list-style: none; font-size: 0.9rem; font-weight: 600;
  color: var(--navy-mid); padding: 10px 0; min-height: 44px;
  display: flex; align-items: center; gap: 6px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after {
  content: ""; width: 7px; height: 7px; margin-left: auto; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform 0.2s ease;
}
.more[open] > summary::after { transform: rotate(225deg); }
.more__hint { font-weight: 400; color: var(--muted); font-size: 0.82rem; }
.more__body { padding-top: var(--sp-4); }
.more__body .field:last-child { margin-bottom: 0; }
.field label { display: block; font-weight: 600; font-size: 0.9rem;
  color: var(--ink); margin-bottom: var(--sp-2); }
.field label .req { color: var(--orange); }
.field .opt { font-weight: 400; color: var(--muted); font-size: 0.84rem; }

input[type="text"], input[type="tel"], input[type="email"], input[type="date"], select, textarea {
  width: 100%; padding: 12px var(--sp-4); font: inherit; font-size: 0.97rem;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--navy-mid);
  box-shadow: 0 0 0 3px rgba(44,82,130,0.14);
}
input::placeholder, textarea::placeholder { color: #9aa9ba; }
textarea { resize: vertical; min-height: 96px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  width: 100%; min-height: 52px; padding: 14px var(--sp-5);
  font: inherit; font-weight: 600; font-size: 1.02rem;
  border: 1px solid transparent; border-radius: var(--r-md);
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.btn:active { transform: translateY(1px); }
/* `.btn` is width:100% on purpose — inside a form a full-width tap target is
   correct on mobile. In running content that same rule makes a CTA stretch
   the entire column. Use .btn--auto for links in prose/sections. */
.btn--auto { width: auto; padding-inline: var(--sp-6); }
.btn--primary { background: var(--orange); color: #fff; }
.btn--primary:hover { background: var(--orange-dark); }
.btn--outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: #fff; }
.btn--ghost-light { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.4); }
.btn--ghost-light:hover { background: #fff; color: var(--navy); }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.btn .spinner {
  width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff; border-radius: 50%;
  animation: spin 0.7s linear infinite; display: none;
}
.btn.is-busy .spinner { display: block; }
.btn.is-busy .btn__label { opacity: 0.75; }
@keyframes spin { to { transform: rotate(360deg); } }

.form-status { margin-top: var(--sp-3); font-size: 0.88rem; line-height: 1.5; min-height: 20px; }
.form-status[data-tone="error"] { color: #b42318; }
.form-status[data-tone="ok"] { color: #067647; }
.form-status[data-tone="info"] { color: var(--navy-mid); }

/* Blog button in the top bar.
   MUST live after the `.btn` block above (line ~273): both selectors are a
   single class, so source order decides, and `.btn` sets cursor:pointer and
   display:flex. Declared up in the topbar section it silently lost and the
   button rendered as an ordinary clickable-looking button.

   Deliberately a <span> with no href — there is no blog page yet
   (/blog/, /blog.html, /insights/ and /articles/ all 404). Jessi confirmed on
   2026-10-23 that the button ships without a destination; add href="/blog/"
   to the markup in build.mjs when the index exists.

   The mobile hide must also come after `.btn`'s display:flex for the same
   reason, so it stays in this block rather than up in the media query. */
.topbar__blog {
  cursor: default;
  white-space: nowrap;
  opacity: 0.55;
}
.topbar__blog:hover { background: var(--orange); }
@media (max-width: 560px) {
  .topbar__blog { display: none; }
}

/* =====================================================================
   Pillars — a ruled list, not three equal floating tiles.
   ===================================================================== */
.pillars { list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pillar {
  border-top: 2px solid var(--navy); padding-top: var(--sp-4);
}
.pillar:nth-child(2) { border-top-color: var(--navy-mid); }
.pillar:nth-child(3) { border-top-color: var(--orange); }
.pillar h3 { margin-bottom: var(--sp-2); }
.pillar p { margin: 0; color: var(--muted); font-size: 0.97rem; }

.section--navy .pillar { border-top-color: rgba(255,255,255,0.5); }
.section--navy .pillar:nth-child(2) { border-top-color: rgba(255,255,255,0.3); }
.section--navy .pillar:nth-child(3) { border-top-color: var(--orange); }
.section--navy .pillar p { color: rgba(255,255,255,0.7); }

/* -- Steps (numbered, single column on mobile) ----------------------- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step;
  display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.steps li { counter-increment: step; position: relative; padding-left: 3.4rem; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 600;
  color: var(--orange); line-height: 1;
}
.steps h3 { font-size: 1.02rem; margin-bottom: var(--sp-1); }
.steps p { margin: 0; font-size: 0.94rem; color: var(--muted); }
.section--navy .steps p { color: rgba(255,255,255,0.7); }

/* -- Definition rows (cost / timeline factors) ----------------------- */
.rows { display: grid; gap: 0; border-top: 1px solid var(--line); }
.rows__item {
  display: grid; grid-template-columns: minmax(180px, 0.9fr) 2fr;
  gap: var(--sp-5); padding: var(--sp-4) 0; border-bottom: 1px solid var(--line);
}
@media (max-width: 640px) { .rows__item { grid-template-columns: 1fr; gap: var(--sp-2); } }
.rows__item dt { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 1.06rem; }
.rows__item dd { margin: 0; }

.note {
  font-size: 0.86rem; color: var(--muted); background: var(--surface-alt);
  border-left: 3px solid var(--line); padding: var(--sp-4); border-radius: 0 var(--r-md) var(--r-md) 0;
}

/* -- FAQ ------------------------------------------------------------ */
.faq { display: grid; gap: var(--sp-3); }
.faq details {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); overflow: hidden;
}
.faq summary {
  cursor: pointer; padding: var(--sp-4); font-weight: 600; color: var(--ink);
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: 48px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 9px; height: 9px; flex: none;
  border-right: 2px solid var(--orange); border-bottom: 2px solid var(--orange);
  transform: rotate(45deg) translateY(-2px); transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.faq summary:hover { color: var(--navy-mid); }
.faq__body { padding: 0 var(--sp-4) var(--sp-4); color: var(--muted); font-size: 0.96rem; }
.faq__body p:last-child { margin-bottom: 0; }

/* -- Trust / license strip ------------------------------------------- */
.trust {
  display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6);
  padding: var(--sp-5) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.trust div { font-size: 0.9rem; color: var(--muted); }
.trust strong { display: block; color: var(--ink); font-size: 1.02rem; font-family: var(--font-display); }

/* -- Final CTA ------------------------------------------------------ */
.cta-final { background: var(--navy); color: rgba(255,255,255,0.85); padding: var(--sp-8) 0; }
.cta-final h2 { color: #fff; }
.cta-final .lead { color: rgba(255,255,255,0.72); }
.cta-final__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }

/* -- Footer --------------------------------------------------------- */
.footer { background: var(--navy-deep); color: rgba(255,255,255,0.62); padding: var(--sp-7) 0 var(--sp-5); font-size: 0.9rem; }
.footer a { color: #fff; text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer__grid { display: grid; gap: var(--sp-5); grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width: 700px) { .footer__grid { grid-template-columns: 1fr; } }
.footer h4 { color: #fff; font-family: var(--font-body); font-size: 0.8rem;
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: var(--sp-3); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.footer__bottom { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid rgba(255,255,255,0.14); font-size: 0.82rem; }
.disclaimer { font-size: 0.78rem; line-height: 1.5; color: rgba(255,255,255,0.45); margin-top: var(--sp-3); }

/* =====================================================================
   Reveal-on-scroll — subtle, opacity + 12px rise. Disabled under
   prefers-reduced-motion (handled by the global rule above).

   IMPORTANT: `.reveal` starts at opacity 0 and is only restored by
   lead.js adding `.is-in`. Any page that uses the class WITHOUT loading
   /assets/lead.js renders its content permanently invisible. Every page
   that emits `class="reveal"` MUST also emit `<script src="/assets/lead.js">
  `. The animation is progressive enhancement and must never be the only
   thing that makes content visible.
   ===================================================================== */
.reveal { opacity: 0; transform: translateY(12px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.5s ease; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* Inline SVG icons inherit stroke width from their size attribute. */
.icon { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
/* =====================================================================
   Before/after scroll scrub.

   Native CSS scroll-driven animation — no JavaScript. Runs on the
   compositor in Chrome, Firefox and Safari 26.4+.

   The clip-path inset() reveals AREA, not brightness, so the transition
   never reads as a brightness crossfade.

   CRITICAL: the two images must be the same scene at the same angle. Run
   scripts/align-before-after.py on any pair first — raw photos from the
   main site are NOT aligned and produce a visible jump.

   Markup contract:
     <figure class="ba" style="--ba-ar:16/9">
       <img class="ba__before" src="...-before.webp" alt="...">
       <img class="ba__after"  src="...-after.webp"  alt="...">
       <figcaption class="ba__label ba__label--before">Before</figcaption>
       <figcaption class="ba__label ba__label--after">After</figcaption>
     </figure>
   ===================================================================== */
.ba {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--ba-ar, 16 / 9);
  background: var(--surface-alt);
  border-radius: var(--r-md);
}
.ba__before,
.ba__after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ba__before { z-index: 1; }
.ba__after {
  z-index: 2;
  clip-path: inset(0 0 0 100%);
  animation: ba-reveal linear both;
  animation-timeline: view();
  animation-range: entry 25% cover 55%;
}
@keyframes ba-reveal {
  from { clip-path: inset(0 0 0 100%); }
  to   { clip-path: inset(0 0 0 0); }
}

.ba__label {
  position: absolute;
  bottom: var(--sp-4);
  z-index: 3;
  margin: 0;
  padding: 0.3rem 0.7rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--surface);
  background: rgba(22, 32, 43, 0.72);
  border-radius: var(--r-pill);
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.ba__label--before { left: var(--sp-4); }
.ba__label--after  { right: var(--sp-4); }

/* No scroll-driven animation support: show the finished result outright.
   A static after photo beats a static before photo. */
@supports not (animation-timeline: view()) {
  .ba__after { clip-path: inset(0 0 0 0); }
}

/* Reduced motion: no scrub, show the after frame. Never leave the
   before frame as the only visible one — that misrepresents the work. */
@media (prefers-reduced-motion: reduce) {
  .ba__after {
    animation: none;
    clip-path: inset(0 0 0 0);
  }
}

/* Caption under the figure — the honest note about what is shown. */
.ba-note {
  margin-top: var(--sp-3);
  font-size: 0.85rem;
  color: var(--muted);
}

/* =====================================================================
   Photo strip — real project photos on every service page.

   Every landing page carries at least one image; a page with zero images
   does not convert. `aspect-ratio` + explicit width/height attributes
   reserve the box so the images cannot cause layout shift.
   ===================================================================== */
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
.shot {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.shot img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-md);
  background: var(--surface-alt);
  box-shadow: var(--shadow-md);
}
.shot figcaption {
  margin-top: var(--sp-3);
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.5;
}

/* =====================================================================
   Sticky mobile action bar — mobile only.

   The pages are long and the form is at the bottom. On a phone this is
   the only always-available action. Desktop hides it: the header already
   carries the phone number and a second bar competes with the CTA.

   Hidden entirely from assistive tech duplication via aria-label on the
   region; the links themselves stay focusable and readable.
   ===================================================================== */
.stickybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.stickybar__act {
  flex: 1 1 0;
  min-height: 56px;              /* comfortable tap target */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.stickybar__act .icon { width: 20px; height: 20px; }
.stickybar__act--wide {
  flex: 1.4 1 0;
  background: var(--orange);
  color: #fff;
}
/* Only show it where it helps: narrow viewports. */
@media (max-width: 860px) {
  .stickybar { display: flex; }
  /* Keep the last content clear of the bar. */
  .stickybar ~ * { padding-bottom: 0; }
  body { padding-bottom: 58px; }
}
@media (min-width: 861px) {
  .stickybar { display: none; }
}

/* The scrub on a service page sits inside the 1140px wrap. Keep it narrower
   than a full-bleed figure so the wipe reads as a considered editorial object
   rather than a banner, and give it breathing room from the photo strip. */
.work-scrub {
  margin-top: var(--sp-6);
  aspect-ratio: 16 / 9;
  box-shadow: var(--shadow-lg);
}
.work-scrub + .ba-note { margin-top: var(--sp-4); }
@media (max-width: 860px) {
  .work-scrub { aspect-ratio: 4 / 3; }
}

/* =====================================================================
   Hero band — full-bleed project photograph between the hero and the
   service list on the home page.

   Height is capped with clamp() so the photo reads as an editorial
   statement rather than pushing the service cards below the fold. The
   section owns the height and the image fills it with object-fit, which
   keeps the layout stable before the image decodes.
   ===================================================================== */
.heroband {
  width: 100%;
  padding: var(--sp-6) var(--sp-5);
  display: flex;
  justify-content: center;
  background: var(--surface-alt);
}
/* Matched to the before/after scrub on the service pages: 16:9 with
   object-fit:cover, so the home hero and the landing hero are the same box
   and behave identically on scroll. The width is no longer capped — it takes
   the content width (1012px measured at a 1440px viewport), the same as `.ba`.
   This DOES crop the source photo's top and bottom (4:3 source inside a 16:9
   frame keeps ~75% of the height). Jessi chose this over the uncropped 4:3
   plate on 2026-10-22 after seeing both rendered. */
.heroband__figure {
  margin: 0;
  width: 100%;
  max-width: 1012px;
}
.heroband__figure img {
  display: block;
  width: 100%;
  /* MUST be `auto`, not omitted. The <img width="1600" height="1200">
     attributes are presentational hints that map to a real `height:1200px`
     declaration, and an explicit height beats `aspect-ratio` — the box
     renders 1012x1200 instead of 1012x569. `height:auto` lets the 16:9
     ratio drive the height. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
@media (max-width: 860px) {
  .heroband {
    padding: var(--sp-5) var(--sp-4);
  }
}