/* Bullseye Pressure Washing (V1 + V2 merge)
   Palette: the truck-wrap blue and the logo's light blue, water bubbles behind the brand bands, white paper.
   Type: Gambetta (display) and Switzer (text), self-hosted. Square geometry, hairlines, no shadows. */

@font-face { font-family: 'Gambetta'; src: url('/assets/fonts/Gambetta-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Gambetta'; src: url('/assets/fonts/Gambetta-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Gambetta'; src: url('/assets/fonts/Gambetta-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('/assets/fonts/Switzer-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('/assets/fonts/Switzer-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('/assets/fonts/Switzer-600.woff2') format('woff2'); font-weight: 600 700; font-display: swap; }

:root {
  /* V1 + V2 merge (2026-10-21): V2's names, re-pointed at the truck-wrap blue. Steven wants the site to
     read as Bullseye at a glance: the light blue of the logo and truck, water droplets behind it, and
     nothing pastel or bland. */
  --ivory: #FFFFFF;
  --ivory-2: #EEF6FC;
  --paper: #F5FAFD;
  --ink: #0A2233;
  --ink-2: #29404F;
  --muted: #4F6170;
  --navy: #0763A0;
  --night: #05426D;
  /* the truck wrap blue, measured from Bullseye's own photo of the truck in sun and corrected to its white
     lettering (2026-10-23). White text on it is only 3:1, so it carries dark text or no text; the blue
     bands behind white text stay the deeper --wrap blue (Elijah's call) */
  --water: #009FE5;
  --water-deep: #0773B5;
  --splash: #009FE5;
  --wrap: #0A68AC;
  --star: #FBBC04;
  --error: #B42318;
  --line: rgba(10, 34, 51, .12);
  --line-2: rgba(10, 34, 51, .26);
  --on-navy: #FFFFFF;
  --on-navy-2: #EEF8FD;
  --line-navy: rgba(255, 255, 255, .24);
  --drops: url('/assets/img/drops-tile.webp');
  --wrap-tex: url('/assets/img/wrap-tex.webp');
  --serif: 'Gambetta', 'Iowan Old Style', Georgia, serif;
  --sans: 'Switzer', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --gut: clamp(16px, 4vw, 40px);
  --max: 1280px;
  --sec: clamp(64px, 8vw, 120px);
  --fs-hero: clamp(2.55rem, 1rem + 4.3vw, 4.85rem);
  --fs-h1: clamp(2.2rem, 1.25rem + 2.9vw, 3.85rem);
  --fs-h2: clamp(1.85rem, 1.2rem + 2vw, 3.05rem);
  --fs-lede: clamp(1.08rem, 1rem + .4vw, 1.28rem);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --mbar-h: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--ivory); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, video { max-width: 100%; height: auto; display: block; }
picture { display: block; background: var(--ph, var(--ivory-2)); }
a { color: #000; text-underline-offset: 3px; }
p + p { margin-top: 1em; }
button { font: inherit; color: inherit; }
strong, b { font-weight: 600; }
::selection { background: var(--water); color: var(--ink); }
:focus-visible { outline: 3px solid var(--water-deep); outline-offset: 3px; }
.sec--navy :focus-visible, .ftr :focus-visible, .mbar :focus-visible, .util :focus-visible { outline-color: var(--water); }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.i-wrap { display: inline-flex; }
svg.i { flex: none; }
.center { text-align: center; }
p.center { margin-top: 40px; }
.muted { color: var(--muted); }
.narrow { max-width: 840px; margin-inline: auto; }
.narrow-l { max-width: 720px; margin-bottom: 8px; }
.skip { position: absolute; left: 12px; top: -64px; z-index: 100; background: var(--night); color: var(--ivory); padding: 12px 18px; font-weight: 600; }
.skip:focus { top: 12px; }

/* ---------- buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 52px; padding: 0 1.45rem; border: 1.5px solid transparent; font: 600 1rem/1.1 var(--sans); letter-spacing: .005em; text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; text-align: center; }
.btn--lg { min-height: 58px; padding: 0 1.75rem; font-size: 1.0625rem; }
.btn--solid { background: var(--navy); border-color: var(--navy); color: var(--ivory); }
.btn--solid:hover { background: var(--night); border-color: var(--night); }
.btn--line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--line:hover { background: var(--ink); color: var(--ivory); }
.btn--light { background: var(--ivory); border-color: var(--ivory); color: #000; }
.btn--light:hover { background: #fff; border-color: #fff; }
.btn--ghost { border-color: rgba(244, 239, 230, .55); color: var(--ivory); background: transparent; }
.btn--ghost:hover { border-color: var(--ivory); background: rgba(244, 239, 230, .08); }
.btn .i { transition: transform .25s var(--ease); }
.btn:hover .i:last-child:not(:first-child) { transform: translateX(3px); }
.arrowlink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 16px; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--water-deep); text-decoration-thickness: 2px; text-underline-offset: 7px; }
.arrowlink:hover { text-decoration-color: var(--ink); }
.arrowlink .i { transition: transform .25s var(--ease); }
.arrowlink:hover .i { transform: translateX(3px); }
.links-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }

/* ---------- utility line and header ---------- */
.util { background: var(--navy); color: var(--on-navy); font-size: 13.5px; }
.util__in { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 40px; }
.util__open { display: flex; align-items: center; gap: 8px; color: var(--on-navy-2); }
.util__open b { color: var(--ivory); font-weight: 600; }
.util__open svg { width: 16px; height: 16px; }
.util__offer { color: var(--ivory); }
.util p, .cbar p, .hdr p, .mbar p { margin: 0; }
.hdr { position: relative; z-index: 50; background: var(--ivory); border-bottom: 1px solid var(--line-2); }
.hdr__in { display: flex; align-items: center; gap: 28px; min-height: 86px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; flex: none; }
.brand__target { height: 59px; width: auto; display: block; }
.brand__word { height: 50px; width: auto; display: block; }
.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 4px; }
.nav__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-weight: 500; font-size: 15.5px; color: var(--ink); text-decoration: none; }
.nav__link:hover, .nav__link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--water-deep); text-underline-offset: 8px; }
.has-mega { position: static; display: flex; align-items: center; }
.has-mega .nav__link { padding-right: 2px; }
.nav__toggle { display: inline-grid; place-items: center; width: 40px; height: 44px; background: none; border: 0; cursor: pointer; color: var(--ink); }
.nav__toggle .i { transition: transform .2s; }
.has-mega.is-open .nav__toggle .i { transform: rotate(180deg); }
.mega { position: absolute; left: 0; right: 0; top: 100%; display: none; padding-top: 0; z-index: 55; }
.mega__in { max-width: calc(var(--max) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); display: grid; grid-template-columns: 1fr 1fr .85fr; background: transparent; }
.mega__in > * { background: var(--paper); }
.mega__list { padding: 28px 28px 24px; border: 1px solid var(--line-2); border-top: 0; border-right: 0; }
.mega__list + .mega__list { border-left: 1px solid var(--line); }
.mega__a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.mega__list li:last-child .mega__a { border-bottom: 0; }
.mega__name { display: block; font: 600 1.18rem/1.25 var(--serif); }
.mega__desc { display: block; margin-top: 2px; font-size: 14.5px; color: var(--muted); }
.mega__a:hover .mega__name { text-decoration: underline; text-decoration-color: var(--water-deep); text-underline-offset: 4px; }
.mega__aside { padding: 32px 28px; background: var(--navy) !important; color: var(--on-blue); border: 1px solid var(--navy); border-top: 0; }
.mega__aside p { color: var(--on-blue-2); margin-top: 6px; }
.mega__big { font: 600 3rem/1 var(--serif); color: var(--ivory) !important; margin: 0 !important; }
.mega__aside .btn { margin-top: 24px; background: var(--ivory); color: #000; border-color: var(--ivory); width: 100%; }
.mega__tel { display: block; margin-top: 16px; color: var(--ivory); font-weight: 600; text-decoration: none; }
.mega__all { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: #000; font-weight: 600; }
.has-mega:hover .mega, .has-mega.is-open .mega { display: block; }
.has-mega.is-closed .mega { display: none; }
.hdr__act { display: flex; align-items: center; gap: 16px; flex: none; }
.hdr__tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; }
.hdr__tel:hover .hdr__num { text-decoration: underline; text-decoration-color: var(--water-deep); text-underline-offset: 6px; }
.hdr__cta { min-height: 48px; }
.hdr__menu { display: none; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px; background: none; border: 1.5px solid var(--line-2); cursor: pointer; font-weight: 600; font-size: 15px; }

/* compact bar after the header scrolls away (desktop) */
.cbar { position: fixed; top: 0; left: 0; right: 0; z-index: 45; background: var(--ivory); border-bottom: 1px solid var(--line-2); transform: translateY(-101%); transition: transform .35s var(--ease); }
.cbar.is-on { transform: none; }
.cbar__in { display: flex; align-items: center; gap: 28px; min-height: 66px; }
.cbar__brand { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-right: auto; text-decoration: none; }
.cbar__mark { height: 38px; width: auto; display: block; }
.cbar__word { height: 30px; width: auto; display: block; }
.cbar__open { font-size: 14.5px; color: var(--muted); }
.cbar__open b { color: var(--ink); }
.cbar__tel { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); text-decoration: none; min-height: 44px; }
.cbar__cta { min-height: 46px; }

/* drawer (phones and tablets) */
.drawer { position: fixed; inset: 0; z-index: 70; background: var(--ivory); overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); visibility: hidden; transition: transform .35s var(--ease), visibility 0s .35s; }
.drawer.is-open { transform: none; visibility: visible; transition: transform .35s var(--ease); }
.drawer__top { display: flex; justify-content: space-between; align-items: center; min-height: 72px; border-bottom: 1px solid var(--line-2); }
.drawer__top .brand__target { height: 48px; }
.drawer__top .brand__word { height: 39px; }
.drawer__close { display: grid; place-items: center; width: 48px; height: 48px; background: none; border: 1.5px solid var(--line-2); cursor: pointer; }
.drawer__body { padding-top: 24px; padding-bottom: 40px; }
.drawer__h a { font: 600 1.7rem/1.2 var(--serif); color: var(--ink); text-decoration: none; }
.drawer__svcs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; margin: 10px 0 24px; }
.drawer__svcs a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--line); color: var(--ink-2); font-weight: 500; font-size: 16px; text-decoration: none; }
.drawer__main a { display: flex; align-items: center; min-height: 54px; border-bottom: 1px solid var(--line-2); font: 600 1.45rem/1.2 var(--serif); color: var(--ink); text-decoration: none; }
.drawer a[aria-current="page"] { color: #000; }
.drawer__cta { display: grid; gap: 10px; margin-top: 28px; }
.drawer__open { margin-top: 18px; color: var(--muted); font-size: 15px; text-align: center; }
.drawer__open b { color: var(--ink); }

/* ---------- section scaffolding ---------- */
.sec { padding: var(--sec) 0; }
.sec--tint { background: var(--ivory-2); }
.sec--navy { background: var(--navy); color: var(--on-navy); }
.sec--media { padding-top: 0; }
.sec--strip { padding: 0 0 var(--sec); }
.head { max-width: 780px; margin-bottom: clamp(32px, 4vw, 56px); }
.head--c { margin-inline: auto; text-align: center; }
.h2 { font: 600 var(--fs-h2)/1.06 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.h3 { font: 600 1.45rem/1.2 var(--serif); letter-spacing: -.01em; }
.lede { margin-top: 16px; font-size: var(--fs-lede); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.head--c .lede { margin-inline: auto; max-width: 62ch; }
.sec--navy .lede, .sec--navy p { color: var(--on-navy-2); }
.split2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5.5vw, 88px); align-items: center; }
.split2 .head { margin-bottom: 20px; }
.split2__a > p, .split2__b > p { color: var(--ink-2); }
.split2__b--fig { max-width: 520px; justify-self: center; width: 100%; }
.split2__b--fig.is-tall { max-width: 380px; }
.split2--text { align-items: start; }
.split2--text .head { margin-bottom: 0; }
.split2--text .split2__b { padding-top: 6px; }
.split2--text .split2__b p { font-size: 1.08rem; color: var(--ink-2); }
.dg-sub { margin: clamp(36px, 4vw, 56px) 0 18px; }
.qblock--hero { margin-top: 30px; }
.qblock--hero blockquote { font-size: 1.12rem; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 24px); margin-top: clamp(16px, 2vw, 24px); }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* ---------- figures ---------- */
.fig img { width: 100%; object-fit: cover; }
.fig figcaption, .split figcaption, .amap figcaption, .dgfig figcaption { margin-top: 12px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.fig--wide img { aspect-ratio: 16 / 9; }
.fig__zoom { display: block; overflow: hidden; cursor: zoom-in; }
.fig__zoom img { transition: transform .7s var(--ease); }
.fig__zoom:hover img { transform: scale(1.03); }
.split__frame { position: relative; overflow: hidden; }
.split img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.split__tag { position: absolute; bottom: clamp(12px, 2vw, 24px); padding: 9px 14px; background: var(--ivory); color: var(--ink); font: 600 14.5px/1.1 var(--sans); }
.split__tag--l { left: clamp(12px, 2vw, 24px); }
.split__tag--r { right: clamp(12px, 2vw, 24px); background: var(--navy); color: var(--ivory); }
.prod { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px; background: var(--paper); border: 1px solid var(--line); }
.prod picture { background: none; }
.prod img { width: 220px; }
.prod figcaption { margin-top: 18px; text-align: center; color: var(--muted); max-width: 32ch; }
.prod__name { display: block; font: 600 1.45rem/1.2 var(--serif); color: var(--ink); margin-bottom: 4px; }

/* ---------- home hero ---------- */
.hero { padding: clamp(40px, 6vw, 84px) 0 var(--sec); text-align: center; }
.hero__h { margin: 0 auto; max-width: 21ch; font: 600 var(--fs-hero)/1 var(--serif); letter-spacing: -.022em; text-wrap: balance; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.rating { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin-top: 14px; font-size: 15px; }
.rating a { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: var(--ink); text-decoration: none; }
.rating a:hover span { text-decoration: underline; text-decoration-color: var(--water-deep); text-underline-offset: 4px; }
.rating svg { color: #000; }
.rating b { font-weight: 700; }
.rating__asof { color: var(--muted); font-size: 14px; }
.rating--hero { justify-content: center; }
.hero__media { margin-top: clamp(28px, 4vw, 48px); }

/* ---------- proof strip ---------- */
.strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.strip__cell { padding: 30px 24px 30px 28px; border-left: 1px solid var(--line-2); }
.strip__cell:first-child { border-left: 0; padding-left: 0; }
.strip__big { display: block; font: 600 clamp(2rem, 1.4rem + 1.7vw, 3.05rem)/1 var(--serif); color: #000; letter-spacing: -.01em; }
.strip__txt { display: block; margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--muted); max-width: 24ch; }

/* ---------- surface picker ---------- */
.picker__tabs { display: flex; justify-content: center; border-bottom: 1px solid var(--line-2); margin-bottom: clamp(28px, 4vw, 48px); overflow-x: auto; scrollbar-width: none; }
.picker__tabs::-webkit-scrollbar { display: none; }
.picker__tab { flex: none; min-height: 52px; padding: 0 22px; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; font-weight: 600; font-size: 16px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.picker__tab:hover { color: var(--ink); }
.picker__tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--navy); }
html:not(.js) .picker__tabs { display: none; }
html:not(.js) .picker__panel + .picker__panel { margin-top: 56px; }
.picker__panel { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4.5vw, 72px); align-items: center; }
.picker__panel[hidden] { display: none; }
.picker__fig { overflow: hidden; }
.picker__fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.picker__panel.is-entering .picker__fig img { animation: pk-img .8s var(--ease); }
.picker__panel.is-entering .picker__copy { animation: pk-copy .6s var(--ease); }
@keyframes pk-img { from { transform: scale(1.045); } to { transform: none; } }
@keyframes pk-copy { from { transform: translateY(14px); } to { transform: none; } }
.picker__h { font: 600 clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem)/1.1 var(--serif); letter-spacing: -.01em; }
.picker__copy > p { margin-top: 14px; color: var(--ink-2); font-size: 17.5px; }
.picker__q { margin-top: 26px; padding: 20px 0 0; border-top: 1px solid var(--line-2); }
.picker__q blockquote { font: 500 1.18rem/1.5 var(--serif); }
.picker__q figcaption { margin-top: 10px; font-size: 14.5px; color: var(--muted); }
.picker__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 28px; }
.picker__cta .arrowlink { margin-top: 0; }
.picker__progress { height: 2px; background: var(--line); margin-top: 28px; overflow: hidden; }
.picker__progress span { display: block; height: 100%; background: var(--navy); transform-origin: left; transform: scaleX(0); }

/* ---------- service ledger ---------- */
.ledger { border-top: 1px solid var(--line-2); }
.ledger__a { display: grid; grid-template-columns: 44px minmax(240px, 1fr) 1.6fr 40px; align-items: center; gap: 24px; padding: 22px 12px; border-bottom: 1px solid var(--line-2); color: var(--ink); text-decoration: none; transition: background-color .25s; }
.ledger__a:hover { background: var(--ivory); }
.sec:not(.sec--tint) .ledger__a:hover { background: var(--ivory-2); }
.ledger__icon { color: #000; }
.ledger__icon svg { width: 30px; height: 30px; }
.ledger__name { font: 600 clamp(1.3rem, 1.05rem + .8vw, 1.75rem)/1.15 var(--serif); letter-spacing: -.01em; }
.ledger__desc { color: var(--muted); font-size: 16px; }
.ledger__go { justify-self: end; color: #000; transition: transform .3s var(--ease); }
.ledger__a:hover .ledger__go { transform: translateX(5px); }

/* ---------- surfaces index ---------- */
.sx { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 64px); border-top: 1px solid var(--line-2); }
.sx__a { display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 18px 0; border-bottom: 1px solid var(--line-2); color: var(--ink); text-decoration: none; }
.sx__name { font: 600 1.22rem/1.3 var(--serif); }
.sx__desc { color: var(--muted); font-size: 15.5px; }
a.sx__a:hover .sx__name { text-decoration: underline; text-decoration-color: var(--water-deep); text-underline-offset: 5px; }

/* ---------- method table ---------- */
.mtable { width: 100%; border-collapse: collapse; font-size: 16px; }
.mtable th, .mtable td { text-align: left; padding: 16px 12px 16px 0; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.mtable thead th { font-weight: 600; font-size: 14px; color: var(--muted); border-bottom: 2px solid var(--ink); padding-top: 0; }
.mtable tbody th { font: 600 1.16rem/1.3 var(--serif); }
.mtable td { color: var(--ink-2); }
.dot { display: inline-block; width: 11px; height: 11px; margin-right: 10px; vertical-align: -1px; }
.dot--soft { background: var(--water); }
.dot--hard { background: var(--navy); }

/* ---------- quotes ---------- */
.qblock { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line-2); }
.qblock blockquote { font: 500 clamp(1.14rem, 1rem + .45vw, 1.36rem)/1.48 var(--serif); color: var(--ink); text-wrap: pretty; }
.qblock figcaption { margin-top: 12px; font-size: 14.5px; color: var(--muted); }
.qblock__name { font-weight: 600; color: var(--ink); }
.qblock--lg { margin-top: 0; border-top-width: 2px; border-top-color: var(--ink); }
.qblock--lg blockquote { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.72rem); }
.qblock--owner { border-top: 2px solid var(--water-deep); }
.qblock--card { margin: 0; padding: 30px; background: var(--paper); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.qblock--card blockquote { font-size: 1.12rem; }

/* ---------- process ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px clamp(28px, 3vw, 48px); }
.steps__item { padding-top: 22px; border-top: 2px solid var(--ink); display: flex; flex-direction: column; }
.steps__n { font: 600 2.5rem/1 var(--serif); color: #000; }
.steps__t { margin-top: 14px; font: 600 1.38rem/1.2 var(--serif); }
.steps__item > p { margin-top: 10px; color: var(--ink-2); }
.steps__q { margin-top: auto; padding-top: 18px; }
.steps__q blockquote { padding-left: 14px; border-left: 2px solid var(--line-2); font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.steps__q figcaption { margin-top: 8px; padding-left: 16px; font-size: 14px; color: var(--muted); font-weight: 600; }

/* ---------- review wall and cards ---------- */
.sec--reviews { overflow: hidden; }
.rwall { display: grid; gap: 20px; }
.rwall__row { overflow: hidden; }
.rwall__track { display: flex; width: max-content; animation: rw 90s linear infinite; }
.rwall__row--b .rwall__track { animation-direction: reverse; animation-duration: 100s; }
.rwall__set { display: flex; }
.rwall:hover .rwall__track, .rwall:focus-within .rwall__track { animation-play-state: paused; }
@keyframes rw { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.rwall__links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 28px; margin-top: 44px; }
.rwall__links .arrowlink { margin-top: 0; }
.rcard { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; padding: 28px; background: var(--paper); border: 1px solid var(--line); }
.rcard__q { font-size: 16.5px; line-height: 1.58; color: var(--ink); }
.rcard__by { display: flex; flex-direction: column; gap: 2px; padding-top: 16px; border-top: 1px solid var(--line); }
.rcard__name { font-weight: 600; }
.rcard__src { font-size: 14px; color: var(--muted); }
.rcard--wall { width: 370px; height: 238px; margin-right: 20px; flex: none; }
.rgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rcols { columns: 3 320px; column-gap: 20px; }
.rcols .rcard { break-inside: avoid; margin-bottom: 20px; }
.rcols .rcard[hidden] { display: none; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chip { min-height: 44px; padding: 0 16px; background: transparent; border: 1.5px solid var(--line-2); font-weight: 600; font-size: 15px; cursor: pointer; }
.chip span { margin-left: 4px; color: var(--muted); font-weight: 500; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--ivory); }
.chip[aria-pressed="true"] span { color: var(--on-navy-2); }
.chips__status { margin: 18px 0 32px; text-align: center; color: var(--muted); font-size: 15px; }
html:not(.js) .chips, html:not(.js) .chips__status { display: none; }

/* ---------- areas and map ---------- */
.areas { margin: 24px 0 0; border-top: 1px solid var(--line-2); }
.areas li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line-2); }
.areas__n { font: 600 1.2rem/1.3 var(--serif); }
.areas__t { color: var(--muted); text-align: right; }
.amap { max-width: 560px; margin-inline: auto; }
.amap--lg { max-width: 600px; }
.amap__svg { width: 100%; height: auto; display: block; background: var(--paper); border: 1px solid var(--line); }
.amap__ctx { fill: none; stroke: rgba(10, 22, 34, .2); stroke-width: 1.4; }
.amap__srv { fill: rgba(88, 191, 234, .16); stroke: var(--navy); stroke-width: 2.2; }
.amap__ring { fill: none; stroke: var(--water-deep); stroke-opacity: .55; stroke-width: 1.6; stroke-dasharray: 3 7; }
.amap__county { font: 600 30px var(--serif); fill: var(--ink); }
.amap__place { font: 500 25px var(--sans); fill: var(--ink-2); }
.amap__place--home { font-weight: 600; fill: var(--navy); }
.amap__dot { fill: var(--ink); }
.amap__h1 { fill: var(--paper); stroke: var(--navy); stroke-width: 2.5; }
.amap__h2 { fill: none; stroke: var(--navy); stroke-width: 4; }
.amap__h3 { fill: var(--water); }
.amap__ocean { font: 500 24px var(--sans); fill: var(--water-deep); letter-spacing: .12em; }
.county { padding: 30px; background: var(--paper); border: 1px solid var(--line); }
.county__t { margin: 4px 0 14px; color: #000; font-weight: 600; }
.county .qblock { margin-top: 22px; padding-top: 18px; }
.county .qblock blockquote { font-size: 1.05rem; }

/* ---------- estimate builder ---------- */
.est-sec { padding: var(--sec) 0; }
.wrap--est { max-width: calc(1000px + 2 * var(--gut)); }
.est { container-type: inline-size; background: var(--paper); color: var(--ink); border: 1px solid var(--line); padding: clamp(22px, 4vw, 52px); }
.est__title { font: 600 var(--fs-h2)/1.06 var(--serif); letter-spacing: -.015em; }
h1.est__title { font-size: var(--fs-h1); }
.est__sub { margin-top: 10px; color: var(--muted) !important; max-width: 62ch; }
.est__steps { display: none; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 26px; }
html.js .est__steps { display: grid; }
.est__steps li { padding-top: 10px; border-top: 3px solid var(--line-2); font-size: 13.5px; font-weight: 500; color: var(--muted); }
.est__steps li.is-on { border-top-color: var(--navy); color: var(--ink); font-weight: 600; }
.est__steps li.is-done { border-top-color: var(--water-deep); }
.est__form { margin-top: 8px; }
.est__step { border: 0; min-width: 0; margin-top: 26px; }
html.js .est__step:not(.is-on) { display: none; }
.est__legend { display: block; padding: 0; font: 600 1.55rem/1.2 var(--serif); letter-spacing: -.01em; }
.est__n { display: block; margin-bottom: 4px; font: 600 13.5px/1.3 var(--sans); color: #000; letter-spacing: 0; }
.est__hint { margin-top: 6px; color: var(--muted) !important; font-size: 15.5px; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.tile { position: relative; display: block; }
.tile input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tile__box { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; height: 100%; min-height: 108px; padding: 16px 14px 14px; background: var(--ivory); border: 1.5px solid var(--line-2); color: var(--ink); transition: background-color .15s, border-color .15s, color .15s; pointer-events: none; }
.tile__box > svg { width: 28px; height: 28px; color: #000; }
.tile__label { font-weight: 600; font-size: 15px; line-height: 1.25; padding-right: 20px; }
.tile__tick { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 22px; height: 22px; background: var(--paper); border: 1.5px solid var(--line-2); }
.tile__tick svg { width: 14px; height: 14px; visibility: hidden; }
.tile:hover .tile__box { border-color: var(--ink); }
.tile input:checked + .tile__box { background: var(--navy); border-color: var(--navy); color: var(--ivory); }
.tile input:checked + .tile__box > svg { color: var(--water); }
.tile input:checked + .tile__box .tile__tick { background: var(--water); border-color: var(--water); color: #000; }
.tile input:checked + .tile__box .tile__tick svg { visibility: visible; }
.tile input:focus-visible + .tile__box { outline: 3px solid var(--water-deep); outline-offset: 2px; }
.est__group { margin-top: 22px; }
.est__label, .est__field label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 15px; }
.est__opt { font-weight: 400; color: var(--muted); }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; display: inline-flex; }
.opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.opt span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 16px; background: var(--ivory); border: 1.5px solid var(--line-2); font-weight: 500; font-size: 15px; pointer-events: none; transition: background-color .15s, border-color .15s; }
.opt:hover span { border-color: var(--ink); }
.opt input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--ivory); }
.opt input:focus-visible + span { outline: 3px solid var(--water-deep); outline-offset: 2px; }
.opts--3 .opt { flex: 1 1 0; }
.opts--3 .opt span { width: 100%; justify-content: center; }
.est__field { margin-top: 18px; }
.est__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.est input[type="text"], .est input[type="tel"], .est input[type="email"], .est textarea { width: 100%; min-height: 52px; padding: 12px 14px; background: #fff; border: 1.5px solid var(--line-2); font: 400 16px/1.4 var(--sans); color: var(--ink); appearance: none; transition: border-color .15s; }
.est textarea { min-height: 96px; resize: vertical; }
.est input:hover, .est textarea:hover { border-color: rgba(10, 22, 34, .45); }
.est input:focus, .est textarea:focus { border-color: var(--navy); outline: none; }
.est input:focus-visible, .est textarea:focus-visible { outline: 3px solid var(--water-deep); outline-offset: 1px; }
.est [aria-invalid="true"] { border-color: var(--error) !important; }
.est__err { min-height: 0; margin-top: 6px; color: var(--error) !important; font-size: 14px; font-weight: 600; }
.est__err:empty { display: none; }
.est__check { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; cursor: pointer; font-size: 15.5px; }
.est__check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--navy); }
.est__nav { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 26px; }
.est__step[data-step="2"] .est__nav, .est__nav--end { justify-content: space-between; }
html:not(.js) .est__nav [data-next], html:not(.js) [data-back], html:not(.js) [data-retry] { display: none; }
html:not(.js) .est__nav--end { justify-content: flex-end; }
.est__back { min-height: 44px; padding: 0 6px; background: none; border: 0; font-weight: 600; font-size: 15.5px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 5px; cursor: pointer; }
.est__send[disabled] { opacity: .7; cursor: progress; }
.est__fine { margin-top: 18px; font-size: 14px; color: var(--muted) !important; }
.est__fine a { color: var(--ink); }
.est__tel { font-weight: 600; color: var(--ink); }
.est__fail { margin-top: 26px; padding: 24px; background: #FFF6F3; border: 2px solid var(--error); }
.est__fail-h { font: 600 1.3rem/1.25 var(--serif); color: var(--ink); }
.est__fail p { color: var(--ink-2) !important; }
.est__fail-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.est__photos:empty { display: none; }
.est__photos { margin-top: 20px; }
.ph__add { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; background: var(--ivory); border: 1.5px dashed var(--line-2); font-weight: 600; font-size: 15px; cursor: pointer; }
.ph__add:hover { border-color: var(--ink); }
.ph__list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.ph__item { position: relative; width: 96px; height: 96px; border: 1px solid var(--line-2); }
.ph__item img { width: 100%; height: 100%; object-fit: cover; }
.ph__rm { position: absolute; top: 0; right: 0; width: 30px; height: 30px; display: grid; place-items: center; background: var(--night); color: var(--ivory); border: 0; cursor: pointer; }
.ph__note { margin-top: 8px; font-size: 14px; color: var(--muted) !important; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@container (max-width: 700px) {
  .tiles { grid-template-columns: repeat(3, 1fr); }
}
@container (max-width: 560px) {
  .est__row { grid-template-columns: 1fr; }
}
@container (max-width: 470px) {
  .tiles { grid-template-columns: 1fr 1fr; }
  .tile__box { min-height: 96px; }
}

/* ---------- service pages ---------- */
.crumbs { padding-top: 18px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: rgba(10, 22, 34, .35); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
.shero { padding: clamp(24px, 3vw, 40px) 0 var(--sec); }
.shero__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4.5vw, 72px); align-items: start; }
.shero__copy { padding-top: clamp(8px, 2vw, 28px); }
.shero__h { font: 600 var(--fs-h1)/1.03 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.shero__lede { margin-top: 20px; font-size: var(--fs-lede); line-height: 1.55; color: var(--ink-2); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line-2); }
.facts li { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; line-height: 1.4; }
.facts svg { color: #000; margin-top: 1px; }
.shero__call { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 28px; color: var(--ink-2); }
.shero__tel { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--ink); }
.shero__open { color: var(--muted); font-size: 15px; }
.shero__open b { color: var(--ink); }
.shero__form .est { padding: clamp(22px, 2.6vw, 34px); }
.shero__form .est__title { font-size: clamp(1.7rem, 1.3rem + 1vw, 2.1rem); }
.bens { border-top: 1px solid var(--line-2); }
.bens__row { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 17px 0; border-bottom: 1px solid var(--line-2); }
.bens dt { font: 600 1.15rem/1.3 var(--serif); }
.bens dd { color: var(--ink-2); }
.rel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rel__a { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 24px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .2s; }
.rel__a:hover { border-color: var(--ink); }
.rel__icon { color: #000; }
.rel__name { font: 600 1.25rem/1.2 var(--serif); }
.rel__desc { font-size: 15px; color: var(--muted); }

/* technical drawings */
.dgfig { margin-top: 8px; padding: clamp(16px, 3vw, 40px); background: var(--paper); border: 1px solid var(--line); }
.dgfig .dg { max-width: 920px; margin-inline: auto; }
.dg { width: 100%; height: auto; display: block; overflow: visible; }
.dg__ln { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.dg__heavy { stroke-width: 2.4; }
.dg__lt { fill: none; stroke: rgba(10, 22, 34, .45); stroke-width: 1; }
.dg__fill { fill: rgba(23, 50, 79, .08); }
.dg__ground { stroke: var(--ink); stroke-width: 2; }
.dg__hatch { stroke: rgba(10, 22, 34, .3); stroke-width: 1; }
.dg__wall { fill: none; stroke: var(--ink); stroke-width: 2; }
.dg__dash { stroke-dasharray: 6 6; }
.dg__ld { stroke: rgba(10, 22, 34, .5); stroke-width: 1; }
.dg__t { font: 500 15px var(--sans); fill: var(--ink); }
.dg__flow { fill: none; stroke: var(--water-deep); stroke-width: 3; stroke-dasharray: 4 10; stroke-linecap: square; }
.dgfig.is-on .dg__flow { animation: dg-flow 1.4s linear infinite; }
@keyframes dg-flow { to { stroke-dashoffset: -28; } }
.roofs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.roofs__item { padding: 18px 18px 16px; background: var(--paper); border: 1px solid var(--line); }
.roofs__item figcaption { margin-top: 10px; text-align: center; font: 600 1.12rem/1.3 var(--serif); }

/* ---------- generic page hero ---------- */
.phero { padding: clamp(28px, 4vw, 56px) 0 clamp(44px, 5vw, 72px); border-bottom: 1px solid var(--line-2); }
.phero__h { font: 600 var(--fs-h1)/1.03 var(--serif); letter-spacing: -.02em; max-width: 22ch; text-wrap: balance; }
.thanks .phero__h { margin-inline: auto; }
.phero__lede { margin-top: 18px; max-width: 66ch; font-size: var(--fs-lede); line-height: 1.55; color: var(--ink-2); }
.phero .rating { margin-top: 22px; }

/* gallery and lightbox */
.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
.gal img { aspect-ratio: 4 / 3; }
.lb { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; margin: 0; padding: 0; border: 0; background: rgba(10, 22, 34, .97); color: var(--ivory); }
.lb::backdrop { background: rgba(10, 22, 34, .9); }
.lb__in { position: relative; width: 100%; height: 100%; display: grid; place-items: center; padding: 64px 72px; }
.lb__fig { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; }
.lb__img { max-width: min(1400px, 100%); max-height: calc(100vh - 170px); width: auto; height: auto; object-fit: contain; }
.lb__cap { color: var(--on-navy-2); font-size: 15px; text-align: center; max-width: 70ch; }
.lb__btn { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; background: transparent; border: 1.5px solid var(--line-navy); color: var(--ivory); cursor: pointer; }
.lb__btn:hover { border-color: var(--ivory); }
.lb__prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb__next { right: 12px; top: 50%; transform: translateY(-50%); }
.lb__close { right: 12px; top: 12px; }

/* faq */
.faq { border-top: 1px solid var(--line-2); }
.faq__item { border-bottom: 1px solid var(--line-2); }
.faq__q { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 64px; padding: 18px 0; font: 600 1.2rem/1.35 var(--serif); cursor: pointer; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: #000; }
.faq__icon { position: relative; flex: none; width: 18px; height: 18px; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--ink); transition: transform .25s var(--ease); }
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }
.faq__a { padding: 0 0 24px; max-width: 70ch; color: var(--ink-2); }
.faqg + .faqg { margin-top: 56px; }
.faqg__h { margin-bottom: 14px; }
.prose h2 { margin-top: 40px; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-top: 12px; color: var(--ink-2); }

/* contact */
.sec--contact { padding-top: clamp(24px, 3vw, 40px); }
.contact { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.contact__card { padding: clamp(24px, 3vw, 36px); background: var(--paper); border: 1px solid var(--line); }
.contact__big { margin-top: 10px; }
.contact__big a { display: inline-flex; align-items: center; min-height: 48px; font: 600 clamp(1.7rem, 1.4rem + 1vw, 2.2rem)/1.1 var(--serif); color: var(--ink); text-decoration: none; }
.contact__open { margin-top: 6px; color: var(--muted); }
.contact__open b { color: var(--ink); }
.contact__list { margin-top: 20px; border-top: 1px solid var(--line); }
.contact__list li { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 4px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.contact__list svg { color: #000; }
.contact__list a { display: inline-flex; align-items: center; min-height: 44px; }
.contact__h { margin-top: 28px; font: 600 1.15rem/1.3 var(--serif); }
.contact__hours { margin-top: 8px; }
.contact__hours li { color: var(--ink-2) !important; border-bottom-color: var(--line) !important; }
.contact__hours li.today { color: var(--ink) !important; }
.nextsteps { counter-reset: n; margin-top: 10px; }
.nextsteps li { counter-increment: n; display: grid; grid-template-columns: 30px 1fr; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.nextsteps li::before { content: counter(n); font: 600 1.2rem/1.3 var(--serif); color: #000; }
.nextsteps--c { max-width: 560px; margin: 32px auto 0; text-align: left; }
.thanks { padding: clamp(64px, 10vw, 140px) 0; }
.thanks__svg { width: auto; height: 92px; margin: 0 auto 24px; display: block; }
.thanks .lede { margin-top: 18px; }

/* CTA band */
.band { padding: clamp(56px, 7vw, 96px) 0; }
.band__in { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center; }
.band__h { font: 600 var(--fs-h2)/1.06 var(--serif); letter-spacing: -.015em; color: var(--ivory); }
.band__copy p { margin-top: 12px; max-width: 54ch; color: var(--on-blue-2); }
.band__cta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }

/* ---------- footer ---------- */
.ftr { background: var(--night); color: var(--on-navy); padding: clamp(56px, 7vw, 96px) 0 36px; }
.ftr__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px; padding-bottom: 48px; border-bottom: 1px solid var(--line-navy); }
.ftr__tag { font: 600 clamp(2.5rem, 1.3rem + 4.4vw, 5.6rem)/.98 var(--serif); letter-spacing: -.025em; color: var(--ivory); }
.ftr__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.ftr__grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1.25fr; gap: 40px; padding: 52px 0 44px; }
.ftr__logo { display: inline-block; width: 176px; padding: 14px; background: var(--ivory); }
.ftr__logo img { width: 100%; height: auto; display: block; }
.ftr__blurb { margin-top: 20px; max-width: 36ch; color: var(--on-navy-2); font-size: 15.5px; }
.ftr__open { margin-top: 16px; color: var(--on-navy-2); font-size: 15px; }
.ftr__open b { color: var(--ivory); }
.ftr__h { margin-bottom: 14px; font-weight: 600; font-size: 15px; color: var(--ivory); }
.ftr__links a { display: inline-flex; align-items: center; min-height: 42px; min-width: 44px; color: var(--on-navy-2); text-decoration: none; font-size: 15.5px; }
.ftr__links a:hover, .ftr__contact a:hover { color: var(--ivory); text-decoration: underline; text-underline-offset: 4px; }
.ftr__contact li { display: flex; gap: 10px; align-items: center; min-height: 40px; color: var(--on-navy-2); font-size: 15.5px; }
.ftr__contact a { display: inline-flex; gap: 10px; align-items: center; min-height: 44px; color: var(--on-navy-2); text-decoration: none; }
.ftr__hours { margin-top: 16px; }
.ftr__hours li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line-navy); font-size: 14.5px; color: var(--on-navy-2); }
.ftr__hours li.today { color: var(--ivory); font-weight: 600; }
.ftr__social { display: flex; gap: 8px; margin-top: 20px; }
.ftr__social a { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line-navy); color: var(--ivory); }
.ftr__social a:hover { border-color: var(--ivory); }
.ftr__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 24px; border-top: 1px solid var(--line-navy); font-size: 14px; color: var(--on-navy-2); }

/* ---------- mobile action bar ---------- */
.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; grid-template-columns: 1fr 1.5fr 1fr; background: var(--night); border-top: 1px solid var(--line-navy); padding-bottom: env(safe-area-inset-bottom); transform: translateY(110%); transition: transform .3s var(--ease); }
.mbar.is-on { transform: none; }
.mbar__a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 60px; padding: 0 8px; background: none; border: 0; border-right: 1px solid var(--line-navy); color: var(--ivory); font-weight: 600; font-size: 15.5px; text-decoration: none; cursor: pointer; }
.mbar__a:last-child { border-right: 0; }
.mbar__a--main { background: var(--water); color: var(--ink); border-right: 0; }

/* ---------- reveal (transform only, never opacity) ---------- */
html.js .rv { transform: translateY(18px); transition: transform .9s var(--ease); }
html.js .rv.in { transform: none; }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .rv { transform: none; transition: none; }
  .rwall__track { animation: none; }
  .rwall__row { overflow-x: auto; scroll-snap-type: x mandatory; }
  .rwall__set[aria-hidden="true"] { display: none; }
  .rcard--wall { scroll-snap-align: start; }
  .picker__panel.is-entering .picker__fig img, .picker__panel.is-entering .picker__copy { animation: none; }
  .dgfig.is-on .dg__flow { animation: none; }
  .drawer, .cbar, .mbar { transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1240px) {
  .nav__link { padding: 0 9px; font-size: 15px; }
  .hdr__in { gap: 18px; }
  .hdr__tel .hdr__num { display: none; }
  .hdr__tel { width: 44px; justify-content: center; border: 1.5px solid var(--line-2); }
}
@media (max-width: 1099px) {
  .nav, .hdr__cta, .util__open, .cbar { display: none; }
  .hdr__menu { display: inline-flex; }
  .hdr__in { min-height: 72px; justify-content: space-between; }
  .hdr__act { gap: 10px; }
  .brand__target { height: 48px; }
  .brand__word { height: 39px; }
  .util__in { justify-content: center; text-align: center; }
  .mbar { display: grid; }
  .ftr { padding-bottom: calc(36px + 60px + env(safe-area-inset-bottom)); }
  html:not(.js) .mbar { transform: none; }
  .ledger__a { grid-template-columns: 38px 1fr 28px; gap: 4px 16px; padding: 18px 4px; }
  .ledger__icon { grid-row: span 2; align-self: start; padding-top: 4px; }
  .ledger__name { grid-column: 2; }
  .ledger__desc { grid-column: 2; grid-row: 2; font-size: 15px; }
  .ledger__go { grid-column: 3; grid-row: 1 / span 2; }
  .rel { grid-template-columns: 1fr 1fr; }
  .ftr__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .drawer { display: none; }
}
@media (max-width: 899px) {
  .split2, .shero__in, .picker__panel, .contact, .band__in { grid-template-columns: 1fr; }
  .split2--media .split2__a { order: 0; }
  .band__cta { justify-content: flex-start; }
  .steps { grid-template-columns: 1fr 1fr; }
  .trio { grid-template-columns: 1fr; }
  .rgrid { grid-template-columns: 1fr 1fr; }
  .roofs { grid-template-columns: 1fr 1fr; }
  .strip { grid-template-columns: 1fr 1fr; }
  .strip__cell:nth-child(3) { border-left: 0; padding-left: 0; }
  .strip__cell:nth-child(n+3) { border-top: 1px solid var(--line-2); }
  .shero__copy { padding-top: 0; }
  .picker__tabs { justify-content: flex-start; }
}
@media (max-width: 699px) {
  body { font-size: 16.5px; }
  .hdr__in { gap: 10px; }
  .brand { gap: 8px; }
  .brand__target { height: 44px; }
  .brand__word { height: 35px; }
  .util { font-size: 13px; }
  .util__in { min-height: 36px; padding-block: 6px; }
  .hero { text-align: left; }
  .hero__h { margin-left: 0; }
  .hero__cta, .rating--hero { justify-content: flex-start; }
  .hero__cta { margin-top: 22px; gap: 10px; }
  .hero__cta .btn { width: 100%; }
  .hero__media { margin-top: 18px; }
  .split img { aspect-ratio: 4 / 3; object-position: 57% 60%; }
  .split__tag { font-size: 13.5px; padding: 7px 10px; }
  .steps, .rgrid, .duo, .sx, .facts, .gal { grid-template-columns: 1fr; }
  .strip__cell { padding: 22px 12px 22px 16px; }
  .strip__cell:nth-child(odd) { padding-left: 0; }
  .strip__txt { font-size: 14px; }
  .head--c { text-align: left; }
  .head--c .lede { margin-left: 0; }
  .rcard--wall { width: 300px; height: 252px; }
  .bens__row { grid-template-columns: 1fr; gap: 4px; }
  .areas li { flex-direction: column; gap: 2px; }
  .areas__t { text-align: left; }
  .rel { grid-template-columns: 1fr; }
  .ftr__grid { grid-template-columns: 1fr; gap: 32px; }
  .ftr__top { align-items: flex-start; }
  .lb__in { padding: 64px 12px 84px; }
  .lb__prev, .lb__next { top: auto; bottom: 14px; transform: none; }
  .lb__prev { left: calc(50% - 60px); }
  .lb__next { right: calc(50% - 60px); }
  .drawer__svcs { grid-template-columns: 1fr; }
  .mtable tbody th { font-size: 1.06rem; }
  .shero__form .est, .est { padding: 20px 16px; }
  .chips { justify-content: flex-start; }
  .dg__t { font-size: 24px; }
  .dgfig { padding: 12px; }
}
@media (max-width: 400px) {
  .hdr__menu span { display: none; }
  .hdr__menu { width: 48px; padding: 0; justify-content: center; }
}


/* ==========================================================================
   V1 + V2 merge (2026-10-21): the brand bands, droplets, sliders, stars and
   Steven's new sections. V2's square geometry kept throughout.
   ========================================================================== */

/* the brand band: truck-wrap blue with water droplets behind it */
/* layered blues like the truck and trailer wrap (wrap-tex, build/wraptex.py) under the bubbles */
.band-drops { position: relative; isolation: isolate; background-color: var(--wrap); background-image: linear-gradient(180deg, rgba(10, 124, 192, .06) 0%, rgba(6, 80, 140, .34) 100%), var(--wrap-tex); background-size: auto, 1600px 1600px; background-repeat: no-repeat, repeat; color: var(--on-blue); }
/* with motion allowed, bubbles.js draws the bubbles (moving, quieter) and the still texture steps aside */
.bubbles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: .72; }
.band-plain { background-color: var(--wrap); background-image: linear-gradient(180deg, rgba(10, 124, 192, .06) 0%, rgba(6, 80, 140, .38) 100%), var(--wrap-tex); background-size: auto, 1600px 1600px; color: var(--on-blue); }
.band-drops h1, .band-drops h2, .band-drops h3, .band-plain h1, .band-plain h2, .band-plain h3 { color: var(--on-blue); }
.band-drops .h2, .band-drops .hero__h, .band-drops .shero__h, .band-plain .shero__h { text-shadow: none; }
.band-drops p, .band-drops .lede, .band-plain p, .band-plain .lede { color: var(--on-blue-2); }
.band-drops :focus-visible, .band-plain :focus-visible { outline-color: var(--on-blue); }
.band-drops .rating a, .band-plain .rating a { color: var(--on-blue); }
.band-drops .rating svg.i, .band-plain .rating svg.i { color: var(--on-blue); }
.band-drops .rating__asof, .band-plain .rating__asof { color: var(--on-blue-2); }
.band-drops .arrowlink, .band-plain .arrowlink { color: var(--on-blue); text-decoration-color: var(--water); }
.sec--navy.band-drops, .sec--navy.band-plain { color: var(--on-blue); }

/* top banner: the one place the 10% offer appears, small */
.util { background: var(--night); }
.util__offer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 0; }
.util__item { display: inline-flex; align-items: center; font-weight: 600; color: #fff; }
.util__item + .util__item::before { content: ""; width: 6px; height: 6px; margin: 0 14px; background: var(--water); }
@media (max-width: 1099px) { .util__offer { justify-content: center; } .util__item + .util__item::before { margin: 0 10px; } }
@media (max-width: 520px) { .util { font-size: 13px; } .util__item + .util__item::before { margin: 0 8px; } }

/* home hero on the band */
.hero.band-drops { padding: clamp(24px, 6vw, 84px) 0 clamp(48px, 6vw, 88px); }
.hero.band-drops .hero__h { color: var(--on-blue); }

/* service hero on the band (the roof page uses the plain band: no bubbles there) */
.shero-wrap .crumbs ol, .shero-wrap .crumbs a, .shero-wrap .crumbs li { color: var(--on-blue-2); }
.shero-wrap .crumbs li + li::before { color: rgba(29, 45, 73, .5); }
.shero-wrap .crumbs a:hover { color: var(--on-blue); }
.shero-wrap .shero { padding-bottom: clamp(48px, 6vw, 88px); }
.shero-wrap .shero__h { color: var(--on-blue); }
.shero-wrap .shero__lede { color: var(--on-blue-2); }
.shero-wrap .facts { border-top-color: var(--line-blue); }
.shero-wrap .facts li { color: var(--on-blue); }
.shero-wrap .facts svg { color: var(--water); }
.shero-wrap .shero__call { color: var(--on-blue-2); }
.shero-wrap .shero__tel { color: var(--on-blue); }
.shero-wrap .shero__open, .shero-wrap .shero__open b { color: var(--on-blue-2); }
.shero-wrap .qblock { border-top-color: var(--line-blue); }
.shero-wrap .qblock blockquote, .shero-wrap .qblock__name { color: var(--on-blue); }
.shero-wrap .qblock figcaption { color: var(--on-blue-2); }
.shero-wrap .shero__form .est { background: #fff; border: 0; border-top: 5px solid var(--water); }
.sec--media { padding-top: clamp(40px, 5vw, 72px); }

/* estimate panels on the band */
.est-sec .est { background: #fff; border: 0; border-top: 5px solid var(--water); }
.est .est__title { color: var(--ink); text-shadow: none; }
.est p:not(.est__err), .est .lede { color: var(--ink-2); }
.est .est__sub, .est .est__hint, .est .est__fine, .est .ph__note { color: var(--muted) !important; }
.est__group[hidden] { display: none; }

/* services menu with a photo of each service */
.mega__in > * { background: #fff; }
.mega__in { grid-template-columns: 1fr 1fr .8fr; }
.mega__a { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; padding: 10px 0; }
.mega__thumb { background: var(--ivory-2); }
.mega__thumb img { width: 96px; height: 72px; object-fit: cover; }
.mega__aside { background-color: var(--wrap) !important; background-image: linear-gradient(180deg, rgba(6, 86, 142, .1), rgba(4, 62, 108, .5)), var(--drops) !important; background-size: auto, 600px 600px !important; border-color: var(--wrap) !important; }
.svc--nodrops .mega__aside { background-image: linear-gradient(180deg, rgba(6, 86, 142, .1), rgba(4, 62, 108, .5)) !important; background-size: auto !important; }
.mega__big { font-size: 2.3rem; color: #fff !important; }
.mega__aside p { color: var(--on-blue-2); }
.mega__aside .btn { background: #fff; color: var(--ink); border-color: #fff; }
.mega__tel, .mega__all { color: #fff; }
.drawer__svcs a { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; min-height: 58px; }
.drawer__thumb { background: var(--ivory-2); }
.drawer__thumb img { width: 56px; height: 42px; object-fit: cover; }

/* buttons on the brand colors */
.btn--solid { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn--solid:hover { background: var(--night); border-color: var(--night); }
.btn--line { border-color: var(--navy); color: #000; }
.btn--line:hover { background: var(--navy); color: #fff; }
.btn--light { background: #fff; border-color: #fff; color: #000; }
.btn--light:hover { background: var(--ivory-2); border-color: var(--ivory-2); }
.btn--ghost { border-color: rgba(255, 255, 255, .75); color: #fff; }
.btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .12); }

/* stars on real Google reviews and the dated rating */
.stars { display: inline-flex; gap: 2px; color: var(--star); flex: none; }
.stars svg { width: 17px; height: 17px; fill: var(--star); color: var(--star); }
.rating .stars svg { width: 16px; height: 16px; }
.rating--c { justify-content: center; margin: -18px 0 34px; }
.rcard__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.rcard__g { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.rcard__g svg { width: 16px; height: 16px; }
.rcard { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--water); }
.sec--tint .rcard { background: #fff; }
.rcard--wall { height: 262px; }
.rgrid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1099px) { .rgrid--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 699px) { .rgrid--4 { grid-template-columns: 1fr; } }

/* proof strip numbers in the brand blue */
.strip__big { color: #000; }

/* before / after sliders (Steven's own photos) */
.ba { margin: 0; }
.ba__frame { position: relative; overflow: hidden; aspect-ratio: var(--ar, 3/2); background: var(--night); user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.ba__frame picture { position: absolute; inset: 0; background: none; }
.ba__frame img { width: 100%; height: 100%; object-fit: cover; }
.ba__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.ba__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; pointer-events: none; }
.ba__knob { position: absolute; top: 50%; left: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; background: #fff; color: #000; display: flex; align-items: center; justify-content: center; border: 3px solid var(--water); }
.ba__knob svg { width: 18px; height: 18px; margin: 0 -3px; }
.ba__tag { position: absolute; top: 14px; padding: 7px 11px; font: 600 13.5px/1 var(--sans); pointer-events: none; z-index: 2; }
.ba__tag--l { left: 14px; background: rgba(5, 30, 50, .85); color: #fff; }
.ba__tag--r { right: 14px; background: var(--water); color: var(--ink); }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; z-index: 3; touch-action: pan-y; }
.ba__frame:focus-within { outline: 3px solid var(--water-deep); outline-offset: 3px; }
.ba figcaption, .bapair figcaption { margin-top: 12px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.ba--portrait { max-width: 560px; margin-inline: auto; }
.ba--band { max-width: 1000px; margin-inline: auto; }
.ba--band.ba--portrait { max-width: 560px; }
.ba--band .ba__frame { border: 6px solid #fff; outline: 1px solid var(--line); }
.ba--picker { max-width: none; margin: 0; }
.ba--picker .ba__frame { aspect-ratio: 4 / 3; }
.ba--card { max-width: none; }
.ba--card .ba__frame { aspect-ratio: 4 / 5; }
.ba--card figcaption { display: none; }
.ba-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
.ba-row .ba--portrait { max-width: none; }
/* a row of two keeps both columns the same height: sliders 4:5, a stacked pair two 8:5 halves */
.ba-row:not(.ba-row--one) .ba__frame { aspect-ratio: 4 / 5; }
.ba-row:not(.ba-row--one) .bapair--stack .bapair__item img { aspect-ratio: 8 / 5 !important; }
.ba-row--one { grid-template-columns: 1fr; }
.ba-row--one > .bapair { max-width: 1000px; width: 100%; margin-inline: auto; }
.wrap--bapair > .bapair { max-width: 1000px; margin-inline: auto; }
.ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 3vw, 44px) clamp(20px, 3vw, 40px); align-items: start; }
.ba-grid .ba--portrait { max-width: none; }
.bapair__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bapair--stack .bapair__grid { grid-template-columns: 1fr; }
.bapair--stack .bapair__item img { aspect-ratio: 3 / 2 !important; }
.bapair__item { position: relative; }
.bapair__item img { width: 100%; object-fit: cover; }
@media (max-width: 899px) { .ba-row, .ba-grid { grid-template-columns: 1fr; } }

/* a service's own process */
.split2--top { align-items: start; }
.psteps { border-top: 2px solid var(--ink); }
.psteps__item { display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line-2); }
.psteps__n { display: grid; place-items: center; width: 52px; height: 52px; background: var(--navy); color: #fff; font: 600 1.35rem/1 var(--serif); }
.psteps__t { font: 600 1.3rem/1.25 var(--serif); margin-top: 2px; }
.psteps__item p { margin-top: 6px; color: var(--ink-2); }
.psteps__cta { margin-top: 28px; }
.checks { margin-top: 22px; display: grid; gap: 12px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; line-height: 1.45; }
.checks svg { color: #000; margin-top: 1px; flex: none; }
.duo--tight { gap: 12px; margin-top: 0; }

/* driveway surfaces */
.surfaces { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.surf { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--water); padding-bottom: 22px; }
.sec--tint .surf { background: #fff; }
.surf__media img { width: 100%; object-fit: cover; }
.surf__media .bapair__item img { aspect-ratio: 2 / 5; }
.surf__media .bapair figcaption { display: none; }
.surf__h { padding: 18px 20px 0; font: 600 1.35rem/1.2 var(--serif); }
.surf p { padding: 6px 20px 0; font-size: 15.5px; color: var(--ink-2); }
@media (max-width: 1099px) { .surfaces { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .surfaces { grid-template-columns: 1fr; } }

/* recent work: a photo for every service page */
.recent { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.recent__a { display: flex; flex-direction: column; height: 100%; background: #fff; border-bottom: 4px solid var(--water); color: var(--ink); text-decoration: none; transition: transform .35s var(--ease), border-color .35s var(--ease); }
.recent__a:hover { transform: translateY(-4px); border-bottom-color: var(--navy); }
.recent__a img { width: 100%; object-fit: cover; }
.recent__name { padding: 14px 14px 0; font: 600 1.15rem/1.2 var(--serif); }
.recent__cap { padding: 4px 14px 16px; font-size: 14px; line-height: 1.4; color: var(--muted); }
@media (max-width: 1099px) { .recent { grid-template-columns: repeat(2, 1fr); } }

/* the scroll-wash driveway (V1) */
.sec--wash .head { max-width: 780px; }
.clean-stage { position: relative; aspect-ratio: 16 / 9; max-height: 74vh; width: 100%; overflow: hidden; background: var(--night); border: 6px solid #fff; }
.clean-still { position: absolute; inset: 0; background: none; }
.clean-still img, .clean-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.clean-still img { object-fit: cover; object-position: 52% 61%; }
.clean-canvas { opacity: 0; transition: opacity .5s ease; }
.clean-stage.is-live .clean-canvas { opacity: 1; }
.clean-hud { position: absolute; left: 16px; bottom: 16px; pointer-events: none; }
.clean-meter { display: inline-block; background: rgba(5, 30, 50, .86); color: #fff; padding: 10px 14px; font-size: 14px; line-height: 1; font-variant-numeric: tabular-nums; }
html:not(.js) .clean-meter, .clean-stage:not(.is-live) .clean-meter { display: none; }
.clean-stage.is-done .clean-meter { background: var(--water); color: var(--ink); }
.clean-note { margin-top: 16px; font-size: 14.5px; max-width: 62ch; }
@media (max-width: 699px) { .clean-stage { aspect-ratio: 4 / 5; } .clean-still img { object-position: 52% 66%; transform: scale(1.32); transform-origin: 52% 66%; } }

/* the map and county lists in the brand blue */
.amap__svg { background: #F2F9FD; }
.amap__srv { fill: rgba(18, 163, 226, .26); stroke: var(--navy); stroke-width: 2.6; }
.amap__place { font-weight: 600; paint-order: stroke; stroke: #fff; stroke-width: 6px; stroke-linejoin: round; fill: var(--ink); }
.amap__h1 { fill: #fff; stroke: var(--navy); }
.amap__h2 { stroke: var(--water); }
.amap__h3 { fill: var(--navy); }
.dot--soft { background: var(--water); }
.dot--hard { background: var(--navy); }

/* cards and panels: white on the tint, a blue top edge */
.qblock--card, .county, .rel__a, .roofs__item, .dgfig, .prod, .contact__card { background: #fff; }
.rel__a { border-top: 4px solid var(--water); }
.rel__icon, .ledger__icon, .ledger__go { color: #000; }
.sec:not(.sec--tint) .ledger__a:hover, .ledger__a:hover { background: var(--ivory-2); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.tile input:checked + .tile__box { background: var(--navy); border-color: var(--navy); color: #fff; }
.tile input:checked + .tile__box .tile__tick { background: var(--water); border-color: var(--water); color: #000; }
.opt input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.tile__box, .opt span { background: var(--paper); }
.ftr__logo { background: #fff; }
.mbar__a--main { background: var(--water); color: var(--ink); }
.picker__tab[aria-selected="true"] { border-bottom-color: var(--navy); color: var(--ink); }


/* ==========================================================================
   Color rhythm (Elijah, 2026-10-21): blue bands with the water bubbles and white sections take
   turns all the way down every page, so two white sections never touch. Everything below lets a
   section sit on the blue; white cards and panels keep their dark text.
   ========================================================================== */
.sec--white { background: #fff; }
.sec--white .h2 { color: #000; }
.sec--inband { padding-top: 0; }
.hdr { border-bottom: 4px solid var(--water); }

/* page heads on the blue */
.phero-wrap .phero { border-bottom: 0; padding-bottom: clamp(52px, 6vw, 92px); }
.phero-wrap .phero__lede { color: var(--on-blue-2); }
.phero-wrap .phero__h { text-shadow: none; }
.sec--blue .crumbs ol, .sec--blue .crumbs a, .sec--blue .crumbs li { color: var(--on-blue-2); }
.sec--blue .crumbs li + li::before { color: rgba(29, 45, 73, .5); }
.sec--blue .crumbs a:hover { color: var(--on-blue); }
.contact-wrap .sec--contact { padding-bottom: var(--sec); }

/* home hero: Steven's truck photo, whole, in a white frame; the at-a-glance numbers under it */
.fig--hero { margin: 0; text-align: left; }
.fig--hero picture { border: 6px solid #fff; }
@media (max-width: 699px) { .fig--hero picture { border-width: 4px; } }
.fig--hero img { width: 100%; object-fit: cover; }
.fig--hero figcaption { color: var(--on-navy-2); }
.hero__strip { margin-top: clamp(36px, 4.5vw, 60px); }

/* From 1000px the headline sits beside the photo, so the whole photo is on the first screen (Elijah,
   2026-10-26: stacked, it was cut off at the fold on laptops). */
@media (min-width: 1000px) {
  .hero.band-drops { padding-top: clamp(28px, 4.5vh, 64px); text-align: left; }
  .hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(32px, 4vw, 72px); }
  .hero__h { margin: 0; max-width: none; font-size: clamp(2.6rem, .6rem + 3.2vw, 4.2rem); }
  .hero__cta, .rating--hero { justify-content: flex-start; }
  .hero__media { margin-top: 0; }
}
.sec--blue .strip { border-color: var(--line-blue); }
.sec--blue .strip__cell { border-left-color: var(--line-blue); }
.sec--blue .strip__big { color: var(--on-blue); }
.sec--blue .strip__txt { color: var(--on-blue-2); }

/* text, links and buttons on the blue */
.sec--blue { color: var(--on-blue); }
.sec--blue .muted, .sec--blue .split2--text .split2__b p, .sec--blue .faq__a, .sec--blue .mtable td,
.sec--blue .sx__desc, .sec--blue .bens dd, .sec--blue .psteps__item p, .sec--blue .ledger__desc { color: var(--on-blue-2); }
.sec--blue :is(p, li) a:not(.btn):not(.arrowlink):not(.recent__a):not(.rel__a) { color: var(--on-blue); text-decoration-color: var(--water); }
.sec--blue .btn--solid { background: #fff; border-color: #fff; color: #000; }
.sec--blue .btn--solid:hover { background: var(--ivory-2); border-color: var(--ivory-2); }
.sec--blue .btn--line { border-color: var(--on-blue); color: var(--on-blue); }
.sec--blue .btn--line:hover { background: #fff; border-color: #fff; color: #000; }
.sec--blue .fig figcaption, .sec--blue .ba figcaption, .sec--blue .bapair figcaption, .sec--blue .amap figcaption { color: var(--on-blue-2); }

/* lists, tables and steps on the blue */
.sec--blue .ledger, .sec--blue .sx, .sec--blue .bens, .sec--blue .faq, .sec--blue .areas { border-top-color: var(--line-blue); }
.sec--blue .ledger__a { color: var(--on-blue); border-bottom-color: var(--line-blue); }
.sec--blue .ledger__a:hover { background: rgba(255, 255, 255, .08); }
.sec--blue .ledger__icon, .sec--blue .ledger__go { color: var(--on-blue); }
.sec--blue .sx__a { color: var(--on-blue); border-bottom-color: var(--line-blue); }
.sec--blue .bens__row, .sec--blue .faq__item, .sec--blue .areas li, .sec--blue .mtable th, .sec--blue .mtable td { border-bottom-color: var(--line-blue); }
.sec--blue .mtable thead th { color: var(--on-blue-2); border-bottom-color: var(--on-blue); }
.sec--blue .dot--soft { background: var(--on-blue); }
.sec--blue .dot--hard { background: #fff; }
.sec--blue .faq__q:hover { color: var(--on-blue-2); }
.sec--blue .faq__icon::before, .sec--blue .faq__icon::after { background: #fff; }
.sec--blue .psteps { border-top-color: var(--on-blue); }
.sec--blue .psteps__item { border-bottom-color: var(--line-blue); }
.sec--blue .psteps__n { background: #fff; color: #000; }
.sec--blue .checks li { color: var(--on-blue); }
.sec--blue .checks svg { color: var(--on-blue); }
.sec--blue .nextsteps li { color: var(--on-blue-2); border-bottom-color: var(--line-blue); }
.sec--blue .nextsteps li::before { color: var(--on-blue); }
.sec--blue .chip { border-color: var(--on-blue); color: var(--on-blue); }
.sec--blue .chip span { color: var(--on-blue-2); }
.sec--blue .chip[aria-pressed="true"] { background: #fff; border-color: #fff; color: #000; }

/* quotes on the blue */
.sec--blue .qblock { border-top-color: var(--line-blue); }
.sec--blue .qblock blockquote, .sec--blue .qblock__name { color: var(--on-blue); }
.sec--blue .qblock figcaption { color: var(--on-blue-2); }
.sec--blue .qblock--lg { border-top-color: var(--on-blue); }

/* white cards and panels on the blue keep their dark text */
.sec--blue :is(.rcard, .qblock--card, .county, .surf, .rel__a, .recent__a, .roofs__item, .dgfig, .prod, .contact__card, .est) { color: var(--ink); }
.sec--blue :is(.rcard, .qblock--card, .county, .surf, .rel__a, .recent__a, .roofs__item, .dgfig, .prod, .contact__card) p { color: var(--ink-2); }
.sec--blue :is(.rcard, .qblock--card, .county, .surf, .rel__a, .recent__a, .roofs__item, .dgfig, .prod, .contact__card, .est) :is(p, li) a:not(.btn):not(.arrowlink):not(.recent__a):not(.rel__a) { color: #000; }
.sec--blue :is(.qblock--card, .county) .qblock, .sec--blue .qblock--card { border-top-color: var(--line); }
.sec--blue :is(.qblock--card, .county) blockquote, .sec--blue :is(.qblock--card, .county) .qblock__name { color: var(--ink); }
.sec--blue :is(.qblock--card, .county) figcaption, .sec--blue .dgfig figcaption, .sec--blue .county .muted { color: var(--muted); }
.sec--blue .contact__card .rating a, .sec--blue .contact__card .contact__big a { color: var(--ink); }
.sec--blue .contact__card .rating svg.i { color: #000; }
.sec--blue .contact__card .rating__asof { color: var(--muted); }
.sec--blue .rcard__name { color: var(--ink); }
.sec--blue .contact__card .nextsteps li { color: var(--ink-2); border-bottom-color: var(--line); }
.sec--blue .contact__card .nextsteps li::before { color: #000; }
.sec--blue .contact__card .contact__list li { color: var(--ink-2); }
.sec--blue :is(.rcard, .qblock--card, .county, .surf, .rel__a, .recent__a, .roofs__item, .dgfig, .prod, .contact__card) :is(h2, h3, h4) { color: var(--ink); text-shadow: none; }

/* the target from the logo, once per page, behind the closing call to action */
.band, .est-sec { position: relative; isolation: isolate; overflow: hidden; }
.band::after, .est-sec::after { content: ""; position: absolute; z-index: -1; top: 50%; right: -150px; width: 560px; height: 560px; transform: translateY(-50%); pointer-events: none;
  background: radial-gradient(circle closest-side, rgba(255, 255, 255, .09) 0 13%, transparent 13.5% 30%, rgba(255, 255, 255, .07) 30.5% 47%, transparent 47.5% 64%, rgba(255, 255, 255, .05) 64.5% 81%, transparent 81.5%); }
.est-sec::after { top: 34%; right: -190px; width: 680px; height: 680px; }
@media (max-width: 699px) { .band::after { right: -230px; } .est-sec::after { display: none; } }

/* the full contact page (2026-10-21): quick actions on the blue, details, the two forms */
.cact { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cact__open { margin-top: 18px; color: var(--on-navy-2); font-size: 15px; }
.cinfo { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 5vw, 88px); align-items: start; }
.cinfo .head { margin-bottom: 8px; }
.cinfo__big { margin: 6px 0 14px; }
.cinfo__big a { display: inline-flex; align-items: center; min-height: 56px; font: 600 clamp(2.2rem, 1.6rem + 2vw, 3.4rem)/1.05 var(--serif); color: #000; text-decoration: none; letter-spacing: -.01em; }
.cinfo__big a:hover { color: #000; }
.cinfo__a > p { color: var(--ink-2); max-width: 52ch; }
.cinfo .contact__list svg { color: #000; }
.cinfo__b { padding: clamp(24px, 3vw, 36px); background: var(--ivory-2); border-top: 5px solid var(--water); }
.cinfo__b .contact__h { margin-top: 0; }
.cinfo__b .rating { margin-top: 18px; }
.est--q { background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--water); }
.cnext { padding-top: 8px; }
.cnext .contact__h { margin-top: 0; }
.cnext .qblock { margin-top: 28px; }
@media (max-width: 899px) { .cinfo { grid-template-columns: 1fr; } }
@media (max-width: 599px) { .cact .btn { width: 100%; justify-content: center; } }

/* Elijah, 2026-10-21: the surface tabs and the question dropdowns read in the brand blue */
.picker__tab { color: #000; }
.picker__tab:hover { color: #000; }
.picker__tab[aria-selected="true"] { color: #000; border-bottom-color: var(--navy); }
.sec--white .faq__q { color: #000; }
.sec--white .faq__q:hover { color: #000; }
.sec--white .faq__icon::before, .sec--white .faq__icon::after { background: var(--navy); }

/* seven menu items since Contact joined (2026-10-21): no wrapping on narrower desktops */
.nav__link { white-space: nowrap; }
@media (min-width: 1100px) and (max-width: 1399px) {
  .hdr__in { gap: 18px; }
  .hdr__tel .hdr__num { display: none; }
  .hdr__tel { width: 44px; justify-content: center; border: 1.5px solid var(--line-2); }
  .nav__link { padding: 0 8px; font-size: 15px; }
  .hdr__act { gap: 10px; }
}

/* the service list's photo panel: it stands still beside the list and changes with the row in use
   (Elijah, 2026-10-21: no photo following the pointer) */
.ledger-wrap { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 28vw, 380px); gap: clamp(28px, 4vw, 56px); align-items: start; }
.lpeek { margin: 0; }
.lpeek__frame { aspect-ratio: 4 / 5; overflow: hidden; background: var(--night); border: 6px solid #fff; }
.lpeek img { width: 100%; height: 100%; object-fit: cover; }
.lpeek__cap { margin-top: 12px; font: 600 1.25rem/1.3 var(--serif); color: var(--ink); }
.sec--blue .lpeek__cap { color: var(--on-blue); }
.sec--white .lpeek__frame { border: 0; }
.ledger__a.is-on { background: var(--ivory-2); }
.sec--blue .ledger .ledger__a:hover, .sec--blue .ledger .ledger__a.is-on { background: rgba(3, 36, 72, .32); color: var(--on-blue); }
.sec--blue .ledger .ledger__a.is-on { border-left: 4px solid var(--on-blue); padding-left: 8px; }
html:not(.js) .lpeek { display: none; }
html:not(.js) .ledger-wrap { display: block; }
@media (max-width: 1099px) { .ledger-wrap { display: block; } .lpeek { display: none; } }

/* a larger wordmark in the light-background colorway (Elijah, 2026-10-22: easier to read) */
.brand__target { height: 66px; }
.brand__word { height: 61px; }
.cbar__mark { height: 42px; }
.cbar__word { height: 36px; }
.drawer__top .brand__target { height: 52px; }
.drawer__top .brand__word { height: 46px; }
@media (min-width: 1100px) and (max-width: 1399px) { .brand__target { height: 57px; } .brand__word { height: 52px; } }
@media (max-width: 1099px) { .brand__target { height: 55px; } .brand__word { height: 48px; } }
@media (max-width: 520px) { .brand__target { height: 48px; } .brand__word { height: 41px; } }

/* contrast: the truck blue only ever carries the darkest ink (5.5:1), never white or the mid navy */
.mbar__a--main { background: var(--water); color: var(--ink); }
.ba__tag--r { background: var(--water); color: var(--ink); }
.clean-stage.is-done .clean-meter { background: var(--water); color: var(--ink); }
.sec--blue .faq__q:hover { color: var(--on-blue); text-decoration: underline; text-decoration-color: var(--on-blue); text-underline-offset: 5px; }

/* white cards on the blue keep dark names, whatever the link rules around them say */
.sec--blue .recent__a, .sec--blue .rel__a { color: var(--ink); }
.sec--blue .recent__a .recent__name, .sec--blue .rel__a .rel__name { color: var(--ink); }
.sec--blue .recent__a .recent__cap, .sec--blue .rel__a .rel__desc { color: var(--muted); }

/* UI audit 2026-10-22: no "selected" row where there is no photo panel, and a hint that the surface
   tabs scroll sideways on a phone */
@media (max-width: 1099px) {
  .ledger__a.is-on, .sec--blue .ledger .ledger__a.is-on { background: none; border-left: 0; padding-left: 12px; }
  .picker__tabs { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  .picker__tabs.is-end { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- laptop fit (Joseph's change doc, 2026-10-26) ----------
   Every block should fit one laptop screen: the service list beside its photo, Recent work in one row,
   the estimate form in the service hero, the before/after band, each set and the reviews. Section padding
   follows the screen height, and photos are sized by height so nothing runs past the fold. */
:root { --sec: clamp(52px, min(7vw, 10vh), 104px); --fit: min(64vh, 580px); }

/* the band under the service hero: the set at a height that fits, the hero's quote beside it */
.mband { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 4.5vw, 72px); align-items: center; }
.mband--solo { grid-template-columns: auto; justify-content: center; }
.mband__set { width: min(calc(var(--fit) * var(--arn)), 62vw); }
.mband__set .ba--band { max-width: none; margin: 0; }
.mband__set .bapair, .mband__set .fig { margin: 0; }
.fig--band picture { border: 6px solid #fff; }
.mband__side .qblock { margin: 0; }

/* a lone before/after set sits beside its heading */
.ba-split { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 5vw, 80px); align-items: center; }
.ba-split__b { width: min(calc(min(62vh, 560px) * var(--arn)), 58vw); }
.ba-split__b .ba--band { max-width: none; margin: 0; }
.ba-row { align-items: start; }

/* the window video: the picture in a white frame, the caption and the Pause button under it */
.vid { margin: 0; }
.vid__frame { border: 6px solid #fff; background: var(--night); }
.vid video { display: block; width: 100%; height: auto; }
.vid figcaption { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.sec--blue .vid figcaption, .shero-wrap .vid figcaption { color: var(--on-blue-2); }
.vid__btn { flex: none; min-width: 44px; min-height: 44px; padding: 0 16px; background: none; border: 2px solid currentColor; color: inherit; font: 600 14px/1 var(--sans); cursor: pointer; }
.vid__btn[hidden] { display: none; }
.vid__btn:focus-visible { outline: 3px solid var(--water-deep); outline-offset: 2px; }

/* driveway surface cards: square photos so the heading and the cards share a screen */
.ba--card .ba__frame { aspect-ratio: 1 / 1; }
.surf__media .bapair__item img { aspect-ratio: 1 / 2; }

/* reviews: one row of four on service pages, a little tighter */
@media (min-width: 700px) { .rgrid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) {
  .sec--reviews2 .rcard { padding: 22px; gap: 16px; }
  .sec--reviews2 .rcard__q { font-size: 15.5px; line-height: 1.55; }
}

@media (min-width: 1000px) {
  /* the service hero's estimate form: one-line tiles, three across, so step 1 fits the first screen */
  .shero { padding-top: clamp(12px, 2vh, 24px); }
  .shero__copy { padding-top: 0; }
  .shero__form .est { padding: 22px 26px 22px; }
  .shero__form .est__title { font-size: clamp(1.45rem, 1.1rem + .6vw, 1.75rem); }
  .shero__form .est__sub { margin-top: 4px; font-size: 15px; }
  .shero__form .est__steps { margin-top: 14px; }
  .shero__form .est__step { margin-top: 14px; }
  .shero__form .est__legend { font-size: 1.25rem; }
  .shero__form .est__hint { margin-top: 2px; font-size: 14.5px; }
  .shero__form .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
  .shero__form .tile__box { flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; min-height: 52px; padding: 8px 38px 8px 12px; }
  .shero__form .tile__box > svg { flex: none; width: 22px; height: 22px; }
  .shero__form .tile__label { padding-right: 0; font-size: 14.5px; }
  .shero__form .tile__tick { top: 50%; right: 10px; transform: translateY(-50%); }
  .shero__form .est__nav { margin-top: 14px; }
  .shero__form .est__group { margin-top: 16px; }
  .shero__form .est__field { margin-top: 12px; }
}

@media (min-width: 1100px) {
  /* home: all nine services beside the photo on one screen */
  .ledger__a { grid-template-columns: 30px minmax(220px, 1fr) 1.6fr 28px; gap: 18px; padding: 10px 12px; }
  .ledger__icon svg { width: 24px; height: 24px; }
  .ledger__name { font-size: clamp(1.15rem, .9rem + .45vw, 1.35rem); }
  .ledger__desc { font-size: 15px; }
  .lpeek__frame { aspect-ratio: 4 / 5; }
  /* home: Recent work in one row of nine */
  .recent { grid-template-columns: repeat(9, 1fr); gap: 10px; }
  .recent__name { padding: 10px 10px 0; font-size: 1rem; }
  .recent__cap { padding: 3px 10px 12px; font-size: 13px; }
}
@media (min-width: 700px) and (max-width: 1099px) { .recent { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 699px) {
  .recent { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .recent__name { padding: 8px 8px 10px; font-size: .9rem; }
  .recent__cap { display: none; }
}

@media (max-width: 899px) {
  .mband, .ba-split { grid-template-columns: 1fr; }
  .mband__set, .ba-split__b { width: auto; }
  .mband__set:has(.vid) { width: min(100%, 420px); justify-self: center; }
}

/* the line drawings beside their text (gutter and dryer vent pages) */
.split2--dg { align-items: center; }
.split2--dg .dgfig { margin-top: 0; }
.fig--side { max-width: 360px; margin-top: 24px; }
@media (min-width: 1000px) {
  .shero__form .tile__box { min-height: 46px; padding-top: 6px; padding-bottom: 6px; }
  .shero__form .est__steps { margin-top: 10px; }
  .shero__form .est__step { margin-top: 10px; }
  .shero__form .est__nav { margin-top: 10px; }
}
@media (min-width: 1100px) { .ledger__a { padding-top: clamp(6px, 1.1vh, 10px); padding-bottom: clamp(6px, 1.1vh, 10px); } }
@media (min-width: 1000px) {
  /* headings and the photo picker sized to the screen height, so each home section shares one screen */
  .head { margin-bottom: clamp(20px, 4.5vh, 48px); }
  .picker__tabs { margin-bottom: clamp(18px, 3.5vh, 40px); }
  .picker__fig img { aspect-ratio: auto; height: min(52vh, 460px); }
}
@media (min-width: 1100px) and (max-height: 760px) {
  .ledger__a { padding-top: 5px; padding-bottom: 5px; }
  .ledger__desc { font-size: 14px; line-height: 1.35; }
  .lpeek__frame { aspect-ratio: auto; height: 52vh; }
}
@media (min-width: 1200px) { .shero__form .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Steven (2026-10-26): the light blue of the new truck wrap behind the whole page. The wrap reads about
   #5BB8E0 in his photo; the page carries it as a lighter wash so body text and the navy headings keep
   AA contrast, and the white cards, forms and header still stand off it. */
:root { --sky: var(--wrap); --sky-2: var(--wrap); }
body, .sec--white { background: var(--sky); }
.sec--tint { background: var(--sky-2); }
.ledger__a:hover { background: rgba(255, 255, 255, .55); }
/* Steven's own process descriptions run long (driveway, dryer vent), so they set a step smaller to keep the hero and its form on one screen */
.shero__lede--long { font-size: clamp(1rem, .96rem + .25vw, 1.12rem); line-height: 1.5; }

/* Bullseye's exact brand colors (Elijah, 2026-10-29, from the logo color sheet): light blue #76C0E5 is the page
   background, the band color and the fill of every drop; navy #1D2D49 is the navy. A drop filled with the
   background blue only shows by its edges, so each one carries the truck print's shading in the same blue
   (hue 200, saturation 68): a deeper rim #3EA6DA thick along the lower left and a pale crescent #A9D8EF inside
   (bubbles.js, build/wraptex.py). Replaces the truck-photo samples #8ED5FB / #78C6F2 / #5FAADB / #9DDEFC / #0F243F. */
:root {
  --wrap: #76C0E5;
  --drop: #76C0E5;
  --drop-rim: #3EA6DA;
  --drop-light: #A9D8EF;
  --navy: #1D2D49;
  --night: #1D2D49;
  --water: #3EA6DA;
  --splash: #76C0E5;
  --water-deep: #1D2D49;
  --muted: #26405A;
  --on-blue: #1D2D49;
  --on-blue-2: #1D2D49;
  --line-blue: rgba(29, 45, 73, .28);
}
.band-drops, .band-plain { background-color: var(--wrap); background-image: var(--wrap-tex); background-size: 900px 900px; background-repeat: repeat; color: var(--on-blue); }
.band-plain, .band-drops.bubbles-on { background-image: none; }
.bubbles { opacity: 1; }
.mega__aside { background-color: var(--wrap) !important; background-image: var(--wrap-tex) !important; background-size: 900px 900px !important; color: var(--on-blue); }
.sec--blue .btn--solid { background: var(--navy); border-color: var(--navy); color: #fff; }
.sec--blue .btn--solid:hover { background: #273D62; border-color: #273D62; }
.sec--blue .btn--line:hover, .sec--blue .chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.sec--blue .dot--hard, .sec--blue .faq__icon::before, .sec--blue .faq__icon::after { background: var(--on-blue); }
.sec--blue .psteps__n { background: var(--navy); color: #fff; }
.sec--blue .ledger__a:hover, .sec--blue .ledger .ledger__a:hover, .sec--blue .ledger .ledger__a.is-on { background: rgba(255, 255, 255, .4); color: var(--on-blue); }
.band::after, .est-sec::after { opacity: .8; }
.sec--blue .btn--ghost { border-color: var(--on-blue); color: var(--on-blue); }
.sec--blue .btn--ghost:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.shero-wrap .facts svg, .sec--blue .facts svg { color: var(--on-blue); }

/* All type in black (Steven, 2026-10-28: "make all of the text on the website black so people can easily
   read it"). Body, headings, links and small print on white and on the wrap blue are #000; white type stays
   only where it sits on a dark fill (the top bar, the footer, solid navy buttons, photo tags). */
:root { --ink: #000; --ink-2: #000; --muted: #000; --on-blue: #000; --on-blue-2: #000; }

/* "Leave a Google review" under the rating on the reviews page (Steven, 2026-10-28) */
.review-cta { margin-top: 22px; }