/* ===================================================================
   The Very Good Gilbert Plumber — site CSS
   Extends the VG house system. Loads AFTER vg.css.
   Brand law: assets/house/design-spec.md (verygood repo).
   4 hexes only. Fredoka 600/500 + Figtree 400 + JetBrains Mono 400.
   Zero looping animations. One primary CTA per page.
   Wing dominance recipe (plumbing) = BUTTER / INK.
   =================================================================== */

/* ---------- skip link ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--butter);color:var(--ink);
  padding:12px 18px;font-family:'Fredoka',system-ui,sans-serif;font-weight:600;border-radius:0 0 10px 0}
.skip:focus{left:0}

/* ---------- header: phone lives here, it is a plumbing site ---------- */
.bar .tel{display:inline-flex;align-items:center;gap:8px;color:var(--paper);text-decoration:none;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;letter-spacing:1.4px;
  font-variant-numeric:tabular-nums;opacity:.85;transition:opacity var(--d1) var(--ease)}
.bar .tel:hover{opacity:1}
.bar .tel svg{width:15px;height:15px;flex:none}
@media(max-width:820px){.bar .tel span.lbl{display:none}}

/* ---------- nav ---------- */
.nav{background:var(--ink);border-top:1px solid rgba(253,251,246,.14);position:relative;z-index:5}
.nav .wrap{display:flex;gap:26px;flex-wrap:wrap;padding-top:13px;padding-bottom:13px}
.nav a{color:var(--paper);text-decoration:none;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;letter-spacing:2px;text-transform:uppercase;opacity:.62;
  transition:opacity var(--d1) var(--ease),color var(--d1) var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{opacity:1;color:var(--butter)}
@media(max-width:760px){
  .nav .wrap{gap:0;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav .wrap::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;padding-right:22px}
}

/* ---------- butter hero (design-spec §5 ButterHero) ---------- */
.bhero{background:var(--butter);color:var(--ink);position:relative;overflow:hidden;padding:0}
.bhero .wrap{padding-top:104px;padding-bottom:96px;position:relative;z-index:2}
.bhero h1{max-width:21ch;margin-bottom:22px}
.bhero .lead{max-width:52ch;margin-bottom:0;opacity:.82}
.bhero .eyebrow{margin-bottom:26px;opacity:.62}
.bhero .receipt{margin-top:34px;margin-bottom:34px}
.bhero .chip{color:var(--ink);border-color:rgba(33,31,28,.42)}
.bhero .cta{background:var(--ink);color:var(--butter)}
.bhero .ghost{opacity:.66}
@media(max-width:760px){
  .bhero .wrap{padding-top:56px;padding-bottom:52px}
  .bhero h1{font-size:clamp(32px,8.4vw,44px)}
}

/* ---------- inner page header (ink) ---------- */
.phead{background:var(--ink);color:var(--paper);padding:80px 0 72px}
.phead h1{max-width:20ch;margin-bottom:20px}
.phead .lead{max-width:58ch;opacity:.8}
.phead .receipt{margin-top:30px;margin-bottom:0}
.phead .chip{color:var(--butter)}
@media(max-width:760px){.phead{padding-top:44px;padding-bottom:44px}}

/* ---------- breadcrumbs ---------- */
.crumbs{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:2px;
  text-transform:uppercase;opacity:.5;margin-bottom:24px;display:flex;gap:9px;flex-wrap:wrap;
  align-items:center;line-height:1.6}
.crumbs a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover{border-bottom-color:currentColor}
.crumbs .sep{opacity:.45}

/* ---------- answer box: the AEO payload. First thing under H1. ---------- */
.answer{border-left:4px solid var(--butter);background:rgba(242,201,76,.10);
  padding:26px 28px;margin:0 0 40px;max-width:74ch}
.band .answer,.phead .answer{background:rgba(242,201,76,.09)}
.answer .lbl{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;letter-spacing:2.4px;
  text-transform:uppercase;opacity:.6;display:block;margin-bottom:11px}
.answer p{font-size:17.5px;line-height:1.62}
.answer p+p{margin-top:12px}
.answer strong{font-weight:400;color:var(--clay)}
.band .answer strong{color:var(--butter)}

/* ---------- service / link cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(33,31,28,.2);
  border:1px solid rgba(33,31,28,.2)}
.band .cards,.ink .cards{background:rgba(253,251,246,.24);border-color:rgba(253,251,246,.24)}
@media(max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.cards{grid-template-columns:1fr}}
.crd{background:var(--paper);padding:28px 26px 26px;text-decoration:none;color:inherit;display:flex;
  flex-direction:column;gap:9px;transition:background var(--d1) var(--ease)}
.band .crd,.ink .crd{background:var(--ink)}
a.crd:hover{background:rgba(242,201,76,.14)}
.band a.crd:hover,.ink a.crd:hover{background:rgba(242,201,76,.11)}
.crd .ttl{font-family:'Fredoka',system-ui,sans-serif;font-weight:500;font-size:18.5px;
  letter-spacing:-0.008em;line-height:1.22;display:flex;align-items:baseline;gap:8px}
.crd .ttl .arw{font-size:15px;opacity:0;transform:translateX(-4px);
  transition:opacity var(--d1) var(--ease),transform var(--d1) var(--ease);color:var(--clay)}
.band .crd .ttl .arw,.ink .crd .ttl .arw{color:var(--butter)}
a.crd:hover .ttl .arw{opacity:1;transform:none}
.crd p{font-size:14.5px;line-height:1.52;opacity:.68;margin:0}
.crd .meta{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;letter-spacing:1.8px;
  text-transform:uppercase;opacity:.5;margin-top:auto;padding-top:10px;font-variant-numeric:tabular-nums}

/* ---------- price ledger ---------- */
.ledger{border-top:1px solid rgba(33,31,28,.2);margin-top:8px}
.band .ledger,.ink .ledger{border-top-color:rgba(253,251,246,.22)}
.led{display:grid;grid-template-columns:1fr 200px;gap:24px;padding:19px 0;align-items:baseline;
  border-bottom:1px solid rgba(33,31,28,.2)}
.band .led,.ink .led{border-bottom-color:rgba(253,251,246,.22)}
.led .what{font-family:'Fredoka',system-ui,sans-serif;font-weight:500;font-size:17px;letter-spacing:-0.006em}
.led .what small{display:block;font-family:'Figtree',system-ui,sans-serif;font-weight:400;font-size:14px;
  opacity:.62;margin-top:5px;letter-spacing:0;line-height:1.5}
.led .amt{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:14px;letter-spacing:.6px;
  font-variant-numeric:tabular-nums;text-align:right;color:var(--clay)}
.band .led .amt,.ink .led .amt{color:var(--butter)}
@media(max-width:700px){
  .led{grid-template-columns:1fr;gap:7px}
  .led .amt{text-align:left}
}

/* ---------- FAQ: <details>, zero JS, zero loop ---------- */
.faq{border-top:1px solid rgba(33,31,28,.2)}
.band .faq,.ink .faq{border-top-color:rgba(253,251,246,.22)}
.faq details{border-bottom:1px solid rgba(33,31,28,.2)}
.band .faq details,.ink .faq details{border-bottom-color:rgba(253,251,246,.22)}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;
  font-family:'Fredoka',system-ui,sans-serif;font-weight:500;font-size:18px;letter-spacing:-0.006em;
  line-height:1.35;transition:color var(--d1) var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--clay)}
.band .faq summary:hover,.ink .faq summary:hover{color:var(--butter)}
.faq summary::after{content:'';position:absolute;right:6px;top:29px;width:11px;height:11px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;opacity:.5;
  transform:rotate(45deg);transition:transform var(--d1) var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .ans{padding:0 0 24px;max-width:72ch}
.faq .ans p+p{margin-top:12px}
.faq .ans p{opacity:.78}
.faq .ans ul{margin-top:10px;opacity:.78}

/* ---------- symptom / checklist rows ---------- */
.sym{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(33,31,28,.2);
  border:1px solid rgba(33,31,28,.2)}
.band .sym,.ink .sym{background:rgba(253,251,246,.24);border-color:rgba(253,251,246,.24)}
@media(max-width:760px){.sym{grid-template-columns:1fr}}
.sym > div{background:var(--paper);padding:22px 24px;display:flex;gap:14px;align-items:flex-start}
.band .sym > div,.ink .sym > div{background:var(--ink)}
.sym .dot{width:26px;height:26px;border-radius:50%;background:var(--butter);flex:none;
  display:grid;place-items:center;margin-top:2px}
.sym .dot svg{width:13px;height:13px;display:block}
.sym b{font-family:'Fredoka',system-ui,sans-serif;font-weight:500;font-size:16px;
  letter-spacing:-0.005em;display:block;margin-bottom:4px}
.sym p{font-size:14.5px;line-height:1.5;opacity:.68;margin:0}

/* ---------- neighborhood chip index ---------- */
.hoods{display:flex;flex-wrap:wrap;gap:8px}
.hood{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:1.3px;
  text-transform:uppercase;text-decoration:none;color:inherit;border:1.5px solid rgba(33,31,28,.28);
  padding:9px 13px;display:inline-flex;align-items:center;gap:8px;
  transition:border-color var(--d1) var(--ease),background var(--d1) var(--ease)}
.band .hood,.ink .hood{border-color:rgba(253,251,246,.3)}
.hood:hover{border-color:var(--clay);background:rgba(198,93,59,.09)}
.band .hood:hover,.ink .hood:hover{border-color:var(--butter);background:rgba(242,201,76,.12)}
.hood .zip{opacity:.45;font-size:10px}

/* ---------- data strip (hardness, era, etc) ---------- */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(253,251,246,.24);
  border:1px solid rgba(253,251,246,.24)}
@media(max-width:820px){.strip{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.strip{grid-template-columns:1fr}}
.strip > div{background:var(--ink);padding:26px 24px}
.strip .k{font-family:'Fredoka',system-ui,sans-serif;font-weight:600;font-size:clamp(26px,3vw,34px);
  letter-spacing:-0.018em;line-height:1;font-variant-numeric:tabular-nums;color:var(--butter);
  display:block;margin-bottom:10px}
.strip .v{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:1.9px;
  text-transform:uppercase;opacity:.6;line-height:1.65;display:block}

/* ---------- prose ----------
   In-body headings must NOT inherit the hero h2 scale or the body line-height.
   vg.css sets h2 to clamp(31px,4.6vw,52px) with no line-height of its own, so an
   un-restyled .prose h2 renders at 52px on 1.62 leading — visibly broken. */
.prose{max-width:72ch}
.prose h2{
  font-family:'Fredoka',system-ui,sans-serif;font-weight:600;
  font-size:clamp(25px,2.6vw,31px);letter-spacing:-0.012em;line-height:1.16;
  text-wrap:balance;margin:52px 0 16px}
.prose h2:first-child{margin-top:0}
.prose h3{
  font-family:'Fredoka',system-ui,sans-serif;font-weight:500;
  font-size:20px;letter-spacing:-0.006em;line-height:1.25;margin:32px 0 11px}
.prose table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15px}
.prose table td{padding:11px 14px 11px 0;border-bottom:1px solid rgba(33,31,28,.16);
  vertical-align:top;line-height:1.5}
.prose table td:last-child{padding-right:0;white-space:nowrap;text-align:right;color:var(--clay)}
.band .prose table td,.ink .prose table td{border-bottom-color:rgba(253,251,246,.2)}
.band .prose table td:last-child,.ink .prose table td:last-child{color:var(--butter)}
@media(max-width:600px){
  .prose table td:last-child{white-space:normal;text-align:left}
}
.prose p{margin-bottom:16px;opacity:.84}
.prose ul,.prose ol{margin:0 0 18px;padding-left:20px;opacity:.84}
.prose li{margin-bottom:7px}
.prose li::marker{color:var(--clay)}
.band .prose li::marker,.ink .prose li::marker{color:var(--butter)}
.prose strong{font-weight:400;color:var(--clay)}
.band .prose strong,.ink .prose strong{color:var(--butter)}

/* ---------- source note ---------- */
.src{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:1.5px;
  text-transform:uppercase;opacity:.45;line-height:1.75;margin-top:18px;max-width:78ch}
.src a{color:inherit}

/* ---------- the guarantee seal row ---------- */
.seals{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(33,31,28,.2);
  border:1px solid rgba(33,31,28,.2)}
@media(max-width:820px){.seals{grid-template-columns:1fr}}
.seals > div{background:var(--paper);padding:32px 30px}
.band .seals,.ink .seals{background:rgba(253,251,246,.24);border-color:rgba(253,251,246,.24)}
.band .seals > div,.ink .seals > div{background:var(--ink)}
.seals .n{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--clay);display:block;margin-bottom:14px}
.band .seals .n,.ink .seals .n{color:var(--butter)}
.seals h3{margin-bottom:9px}
.seals p{font-size:15px;line-height:1.55;opacity:.72}

/* ---------- footer sitemap ---------- */
.fmap{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;margin-bottom:8px}
@media(max-width:900px){.fmap{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:520px){.fmap{grid-template-columns:1fr}}
.fmap h3{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--butter);opacity:.75;font-weight:400;margin-bottom:14px}
.fmap ul{list-style:none;padding:0}
.fmap li{margin-bottom:8px;line-height:1.4}
.fmap a{color:var(--paper);text-decoration:none;font-size:14px;opacity:.62;
  transition:opacity var(--d1) var(--ease)}
.fmap a:hover{opacity:1}

/* ---------- big phone CTA block ---------- */
.callblock{border:1.5px solid currentColor;padding:40px 38px;display:flex;gap:34px;
  align-items:center;justify-content:space-between;flex-wrap:wrap}
.callblock .telbig{font-family:'Fredoka',system-ui,sans-serif;font-weight:600;
  font-size:clamp(30px,4.2vw,44px);letter-spacing:-0.018em;line-height:1;font-variant-numeric:tabular-nums;
  color:var(--butter);text-decoration:none;display:block}
.callblock .telbig:hover{text-decoration:underline;text-underline-offset:6px}
.butterband .callblock .telbig{color:var(--ink)}
@media(max-width:760px){.callblock{padding:30px 26px;gap:24px}}

/* ---------- print ---------- */
@media print{
  body::after,.stickybar,.nav,.skip{display:none}
  .bhero,.phead,.band{background:#fff!important;color:#000!important}
}

/* ---------- the lockup: renders from Fugaz One at build time, never a raster ---------- */
.vgl{display:inline-flex;align-items:center;gap:12px;line-height:1}
.vgl-dot{flex:none;border-radius:50%;display:grid;place-items:center}
.vgl-dot svg{width:64%;height:64%;display:block}
.vgl.dot-butter .vgl-dot{background:var(--butter);color:var(--ink)}
.vgl.dot-ink   .vgl-dot{background:var(--ink);color:var(--butter)}
.vgl-txt{display:flex;flex-direction:column;gap:2px}
.vgl-a{font-family:'Fugaz One',cursive;text-transform:none;letter-spacing:.005em;opacity:.72;line-height:1}
.vgl-b{font-family:'Fugaz One',cursive;letter-spacing:-0.012em;line-height:1}
.vgl-b i{font-style:normal;color:var(--butter)}
.bhero .vgl-b i,.butterband .vgl-b i{color:var(--clay)}
.vgl-sm .vgl-dot{width:40px;height:40px}
.vgl-sm .vgl-a{font-size:11px}
.vgl-sm .vgl-b{font-size:19px}
.vgl-lg .vgl-dot{width:62px;height:62px}
.vgl-lg .vgl-a{font-size:15px}
.vgl-lg .vgl-b{font-size:29px}
@media(max-width:620px){
  .vgl-sm .vgl-dot{width:34px;height:34px}
  .vgl-sm .vgl-a{font-size:9.5px}
  .vgl-sm .vgl-b{font-size:16px}
  .vgl-lg .vgl-dot{width:50px;height:50px}
  .vgl-lg .vgl-a{font-size:13px}
  .vgl-lg .vgl-b{font-size:23px}
}

/* ---------- A.R.S. 32-1121 disclosure — above the footer, every page ---------- */
.disclose{background:var(--ink);color:var(--paper);border-top:1px solid rgba(242,201,76,.3);
  padding:18px 0 20px}
.disclose .wrap{display:flex;gap:20px;align-items:baseline;flex-wrap:wrap}
.disclose .dtag{font-family:'Fredoka',system-ui,sans-serif;font-weight:600;font-size:14.5px;
  letter-spacing:-0.005em;color:var(--ink);background:var(--butter);flex:none;
  padding:6px 13px;border-radius:999px;white-space:nowrap}
.disclose p{font-size:14px;line-height:1.6;opacity:.82;max-width:84ch;flex:1 1 440px;margin:0}
.disclose p a{color:var(--butter);text-decoration:none;border-bottom:1px solid rgba(242,201,76,.45)}
.disclose p a:hover{border-bottom-color:var(--butter)}
.disclose b{font-weight:400;color:var(--butter)}
@media(max-width:620px){
  .disclose .wrap{gap:11px}
  .disclose p{font-size:13.5px}
  .disclose .dtag{font-size:13px;padding:5px 11px}
}

/* ===================================================================
   WING IDENTITY — sister company, not a clone of the parent
   -------------------------------------------------------------------
   Devin, 2026-08-21: "needs to feel like a child or sister company of
   theverygoodservicecompany.com, not a duplicate of the brand/colors."

   House law (design-spec §3) says siblings share four hexes and differ only by
   dominance recipe. That was not enough separation — parent and wing both read
   as a butter field. So this wing takes ONE colour of its own and butter is
   demoted to the FAMILY BADGE: the endorsement line, the CTAs, the accents that
   say "this belongs to The Very Good Service Company."

   --patina #175A55 — oxidised copper. A material story for a plumbing company
   (raw copper is clay, aged copper is patina), and deliberately NOT the generic
   plumber blue the spec's cliché map kills.

   Contrast, measured, not eyeballed:
     paper on patina  7.72:1   butter on patina 5.03:1   (AA body: 4.5)
     ink on butter   10.36:1   (family CTA pairing, unchanged)
   ink on patina is 2.06 — NEVER put ink text on patina.
   =================================================================== */
:root{ --patina:#175A55; --patina-hi:#1E6F68; }

/* the whole masthead becomes one continuous wing-coloured field */
header{background:var(--patina)}
.nav{background:var(--patina);border-top-color:rgba(253,251,246,.16)}
.disclose{background:var(--patina);border-top-color:rgba(253,251,246,.16)}
.bhero{background:var(--patina);color:var(--paper)}
.bhero .eyebrow{color:var(--paper);opacity:.62}
.bhero h1,.bhero .lead{color:var(--paper)}
.bhero .chip{color:var(--butter);border-color:rgba(242,201,76,.5)}
.bhero .cta{background:var(--butter);color:var(--ink)}   /* family CTA pairing, 10.36:1 */
.bhero .ghost{color:var(--paper);opacity:.72}

/* butter is now the family badge, so the credential pill keeps it */
.disclose .dtag{background:var(--butter);color:var(--ink)}
.disclose b{color:var(--butter)}
.disclose p a{color:var(--butter);border-bottom-color:rgba(242,201,76,.45)}

/* the big colour bands: patina, not butter */
.butterband{background:var(--patina);color:var(--paper)}
.butterband .grid{background:var(--paper)}
.butterband .grid>*{background:var(--patina)}
.butterband .cards{background:rgba(253,251,246,.24);border-color:rgba(253,251,246,.24)}
.butterband .crd{background:var(--patina)}
.butterband a.crd:hover{background:rgba(253,251,246,.07)}
.butterband .crd .ttl .arw{color:var(--butter)}
.butterband .hood{border-color:rgba(253,251,246,.32)}
.butterband .hood:hover{border-color:var(--butter);background:rgba(242,201,76,.12)}
.butterband .callblock .telbig{color:var(--butter)}
.butterband .cta{background:var(--butter);color:var(--ink)}
.butterband .ghost{color:var(--paper)}
.butterband .answer{background:rgba(253,251,246,.08);border-left-color:var(--butter)}
.butterband .answer strong{color:var(--butter)}
.butterband .vgl-b i{color:var(--butter)}
.butterband .rung a,.butterband .grid a,.butterband p a{color:var(--butter);border-bottom-color:rgba(242,201,76,.45)}

/* ink bands keep butter accents — that is the family DNA showing through */
.band .answer{border-left-color:var(--butter)}

/* the lockup dot carries the wing colour with a butter glyph: same dot system,
   different wing. Parent = butter dot / ink glyph. */
.vgl.dot-butter .vgl-dot{background:var(--patina);color:var(--butter)}
header .vgl-b i,footer .vgl-b i{color:var(--butter)}

/* clay stays the warm accent, per house law kept under ~10% of any page */
.prose strong{color:var(--patina)}
.answer strong{color:var(--patina)}
.led .amt{color:var(--patina)}
.seals .n{color:var(--patina)}
.prose li::marker{color:var(--patina)}
.hood:hover{border-color:var(--patina);background:rgba(23,90,85,.08)}
:focus-visible{outline-color:var(--patina)}

/* sticky bar + footer stay ink so the wing colour reads as the masthead, not wallpaper */
.stickybar{border-top-color:rgba(242,201,76,.28)}

/* dot-on-ground contrast rule (design-spec §3): the dot must never sit on its own colour.
   The masthead is patina, so the dot goes butter with a patina glyph — family badge outside,
   wing colour inside. */
.vgl.dot-butter .vgl-dot{background:var(--butter);color:var(--patina)}

/* ---------- proof: renders only from a dated live pull ---------- */
.proof{display:inline-flex;align-items:center;gap:11px;flex-wrap:wrap;
  font-size:15px;line-height:1;padding:11px 16px;border:1.5px solid rgba(33,31,28,.22);border-radius:999px}
.band .proof,.ink .proof,.butterband .proof{border-color:rgba(253,251,246,.28)}
.proof .stars{display:inline-flex;gap:2px;color:var(--clay)}
.proof .stars svg{width:15px;height:15px}
.butterband .proof .stars,.band .proof .stars{color:var(--butter)}
.proof b{font-weight:400}
.proof .pulled{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;letter-spacing:1.6px;
  text-transform:uppercase;opacity:.5}

/* ---------- hours ---------- */
.hours{max-width:420px}
.hrow{display:flex;justify-content:space-between;gap:20px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid rgba(253,251,246,.18)}
.hours .d{font-size:15px}
.hours .t{font-size:14px;letter-spacing:.4px;opacity:.82;white-space:nowrap}
.hnote{font-size:14px;line-height:1.6;opacity:.66;margin-top:16px;max-width:52ch}

/* ---------- contact / service-area block ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(253,251,246,.24);
  border:1px solid rgba(253,251,246,.24)}
@media(max-width:820px){.contact{grid-template-columns:1fr}}
.contact > div{background:var(--ink);padding:34px 32px}
.contact h3{margin-bottom:16px}
.areachips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.areachips span{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:1.4px;
  border:1.5px solid rgba(253,251,246,.26);padding:6px 10px;opacity:.8}
.arealist{font-size:14.5px;line-height:1.85;opacity:.74;margin-top:14px}
.arealist b{font-weight:400;color:var(--butter)}

/* ---------- photo frames (real photography only — see docs/PHOTO-BRIEF.md) ---------- */
.sheet .frame{background:rgba(33,31,28,.06);padding:0}
.sheet .frame img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover}
.band .sheet .frame,.ink .sheet .frame{background:rgba(253,251,246,.06)}
figure.frame{margin:0}
figure.frame .caption{display:block;margin-top:10px}
.photo-wide{margin:44px 0}
.photo-wide img{aspect-ratio:16/9}

/* ---------- seasonal note ---------- */
.seasonal{border:1.5px solid var(--clay);border-left-width:4px;padding:24px 28px;max-width:76ch}
.band .seasonal,.ink .seasonal{border-color:var(--butter)}
.seasonal .when{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--clay);display:block;margin-bottom:11px}
.band .seasonal .when,.ink .seasonal .when{color:var(--butter)}
.seasonal p{font-size:16px;line-height:1.62}
.seasonal p + p{margin-top:14px}
.seasonal b{font-weight:400;color:var(--clay)}
.band .seasonal b,.ink .seasonal b{color:var(--butter)}

/* Real job photos are phone photos: mostly portrait, a couple of landscape camera
   screens. A fixed-ratio grid crops them badly, so the strip runs as natural-aspect
   columns instead and every photo keeps its own shape. */
.sheet{column-count:3;column-gap:22px;display:block}
.sheet .frame{break-inside:avoid;margin:0 0 22px;display:block;width:100%}
.sheet .frame img{width:100%;height:auto;display:block;aspect-ratio:auto}
@media(max-width:900px){.sheet{column-count:2;column-gap:16px}.sheet .frame{margin-bottom:16px}}
@media(max-width:560px){.sheet{column-count:1}}

/* The .frame vignette + film treatment was built for the house's Kodak '76 stills.
   On real job photographs it just muddies the edges — turn it off here, and give the
   caption its own space so it stops colliding with the bottom of the image. */
.sheet .frame::after{display:none}
.sheet .frame img{filter:none;border-radius:2px}
.sheet .frame .caption{
  margin-top:9px;opacity:.72;letter-spacing:1.6px;font-size:10px;line-height:1.5;
  padding-left:1px}

/* ===================================================================
   FULL-BLEED PHOTO HERO
   Devin, 2026-08-22: "needs to read like a home service biz hero section
   with a photo full bleed."
   The scrim is PATINA, not black — a black scrim would work on any site;
   a wing-coloured one keeps the hero unmistakably ours. Contrast is
   carried by the scrim, so the photo can be swapped without re-checking
   text legibility.
   =================================================================== */
.bhero.hasphoto{position:relative;overflow:hidden;isolation:isolate;background:var(--patina)}
.bhero .heroimg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 46%;
  z-index:0;filter:saturate(.88) contrast(1.06) brightness(1.1)}
/* two scrims: a flat one for global legibility, a directional one so the type side is darkest */
.bhero.hasphoto::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(23,90,85,.95) 0%, rgba(23,90,85,.88) 30%,
    rgba(23,90,85,.58) 58%, rgba(23,90,85,.34) 100%)}
.bhero.hasphoto::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  box-shadow:inset 0 -90px 120px -40px rgba(23,90,85,.9),
             inset 0 90px 110px -60px rgba(23,90,85,.75)}
.bhero.hasphoto .wrap{
  position:relative;z-index:2;
  min-height:min(74vh, 720px);display:flex;flex-direction:column;justify-content:center;
  padding-top:92px;padding-bottom:92px}
.bhero.hasphoto h1{max-width:19ch;text-shadow:0 1px 26px rgba(23,90,85,.55)}
.bhero.hasphoto .lead{max-width:50ch}
@media(max-width:760px){
  .bhero .heroimg{object-position:center 42%}
  .bhero.hasphoto::before{
    background:linear-gradient(178deg,
      rgba(23,90,85,.90) 0%, rgba(23,90,85,.93) 45%, rgba(23,90,85,.97) 100%)}
  .bhero.hasphoto .wrap{min-height:auto;padding-top:54px;padding-bottom:52px}
}

/* Chips sit over whatever the photo happens to be doing there. Give them their own
   ground so legibility does not depend on the image — the photo can be swapped
   without re-checking contrast. */
.bhero.hasphoto .chip{background:rgba(23,90,85,.55);border-color:rgba(242,201,76,.55)}
@supports (backdrop-filter: blur(3px)){
  .bhero.hasphoto .chip{background:rgba(23,90,85,.42);backdrop-filter:blur(3px)}
}
.bhero.hasphoto .ghost{text-shadow:0 1px 14px rgba(23,90,85,.7)}

/* ---------- inner-page photo hero (same treatment as the homepage) ---------- */
.phead.hasphoto{position:relative;overflow:hidden;isolation:isolate;background:var(--patina);padding:0}
.phead.hasphoto .heroimg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%;
  z-index:0;filter:saturate(.88) contrast(1.06) brightness(1.08)}
.phead.hasphoto::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(23,90,85,.95) 0%, rgba(23,90,85,.89) 32%,
    rgba(23,90,85,.64) 62%, rgba(23,90,85,.44) 100%)}
.phead.hasphoto::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  box-shadow:inset 0 -70px 90px -40px rgba(23,90,85,.85),
             inset 0 70px 90px -55px rgba(23,90,85,.7)}
.phead.hasphoto .wrap{
  position:relative;z-index:2;
  min-height:min(46vh,420px);display:flex;flex-direction:column;justify-content:center;
  padding-top:76px;padding-bottom:72px}
.phead.hasphoto h1{text-shadow:0 1px 24px rgba(23,90,85,.5)}
.phead.hasphoto .crumbs{opacity:.72}
.phead.hasphoto .chip{background:rgba(23,90,85,.55);border-color:rgba(242,201,76,.55)}
@supports (backdrop-filter: blur(3px)){
  .phead.hasphoto .chip{background:rgba(23,90,85,.42);backdrop-filter:blur(3px)}
}
@media(max-width:760px){
  .phead.hasphoto::before{
    background:linear-gradient(178deg,
      rgba(23,90,85,.90) 0%, rgba(23,90,85,.93) 48%, rgba(23,90,85,.96) 100%)}
  .phead.hasphoto .wrap{min-height:auto;padding-top:44px;padding-bottom:44px}
}

/* ---------- booking form sits on PAPER, not the ink band vg-base styles it for ----------
   Inherited defect: paper-coloured text and 6% borders on a paper ground = invisible inputs.
   Caught by zooming the rendered page 2026-08-22. */
.form .field input,.form .field textarea,.form .field select{
  background:rgba(33,31,28,.035);border:1.5px solid rgba(33,31,28,.30);color:var(--ink)}
.form .field input:focus,.form .field textarea:focus,.form .field select:focus{
  border-color:var(--patina);box-shadow:0 0 0 3px rgba(23,90,85,.14)}
.form .field input::placeholder,.form .field textarea::placeholder{color:rgba(33,31,28,.42)}
.form .field select option{background:var(--paper);color:var(--ink)}
.form .field label{opacity:.72}


/* ---------- the mark (hat-brim pipe + drop) in the lockup ---------- */
.vgl.has-mark{display:inline-flex;align-items:center;gap:12px}
.vgl.has-mark .vgl-mark{display:block;height:auto;width:56px;flex:none;
  filter:drop-shadow(0 1px 0 rgba(33,31,28,.18))}
.vgl-lg.has-mark .vgl-mark{width:96px}
.vgl-lg.has-mark{gap:18px}
@media(max-width:760px){.vgl.has-mark .vgl-mark{width:44px}.vgl-lg.has-mark .vgl-mark{width:72px}}

/* a11y: nav links read at 4.5:1 on patina (Lighthouse color-contrast); footer column heads are h3 so heading order stays sequential */
.nav a{opacity:.94}
.fmap h3{margin:0 0 12px}

/* a11y: card price meta at >=4.5:1 */
.crd .meta{opacity:1;color:rgba(33,31,28,.72)}
.band .crd .meta,.ink .crd .meta{color:rgba(253,251,246,.78)}

/* a11y contrast pass (Lighthouse 2026-08-22): every small mono label >= 4.5:1 on its ground */
.src{opacity:1;color:rgba(253,251,246,.72)}
section:not(.band):not(.ink) .src,.butterband .src{color:rgba(33,31,28,.7)}
.band .src,.ink .src{color:rgba(253,251,246,.74)}
.hood .zip{opacity:1;color:rgba(253,251,246,.74)}
.butterband .hood .zip,section:not(.band) .hood .zip{color:rgba(253,251,246,.78)}
.eyebrow[style*="opacity:.6"]{opacity:.82!important}
footer .legal{opacity:1;color:rgba(253,251,246,.72)}
footer .legal a{color:var(--butter)!important;opacity:1}

/* ---------- warm hero: butter ground, ink type, sunlit photo (homeowner-friendly) ---------- */
.bhero.warm{background:var(--butter);color:var(--ink)}
.bhero.warm .eyebrow{color:var(--ink);opacity:.62}
.bhero.warm h1,.bhero.warm .lead{color:var(--ink)}
.bhero.warm .lead{opacity:.86}
.bhero.warm .chip{color:var(--ink);border-color:rgba(33,31,28,.42);background:rgba(242,201,76,.55)}
@supports (backdrop-filter: blur(3px)){.bhero.warm .chip{background:rgba(242,201,76,.42);backdrop-filter:blur(3px)}}
.bhero.warm .cta{background:var(--ink);color:var(--butter)}
.bhero.warm .ghost{color:var(--ink);opacity:.78;text-shadow:none}
.bhero.warm.hasphoto .heroimg{filter:saturate(1.02) contrast(1.04) brightness(1.06);object-position:center 40%}
.bhero.warm.hasphoto::before{
  background:linear-gradient(100deg,
    rgba(242,201,76,.94) 0%, rgba(242,201,76,.88) 34%,
    rgba(242,201,76,.42) 60%, rgba(242,201,76,.08) 100%)}
.bhero.warm.hasphoto::after{
  box-shadow:inset 0 -70px 90px -50px rgba(242,201,76,.55), inset 0 60px 80px -70px rgba(242,201,76,.35)}
.bhero.warm.hasphoto .heroimg{object-position:center 96%}
.bhero.warm.hasphoto h1{text-shadow:none}
.bhero.warm .vgl-b i{color:var(--clay)}

/* ---------- mobile polish (2026-08-22 mobile sweep) ---------- */
.eb-m{display:none}
@media(max-width:620px){
  .eb-x{display:none}.eb-m{display:inline}
  /* source notes: sentence-case on phones so a citation is 6 lines, not 16 */
  .src{text-transform:none;letter-spacing:.2px;font-size:11.5px;line-height:1.55;opacity:.6}
  /* sticky CTA must never sit on top of the last footer links */
  footer{padding-bottom:calc(44px + 64px + env(safe-area-inset-bottom))}
}
@media(max-width:760px){
  /* nav strip scrolls sideways; fade the right edge so it reads as scrollable */
  .nav{position:relative}
  .nav::after{content:"";position:absolute;top:0;right:0;bottom:0;width:48px;pointer-events:none;
    background:linear-gradient(90deg,rgba(23,90,85,0),var(--patina) 85%)}
}

/* ---------- sticky header (desktop) — the hat rides along ---------- */
@media(min-width:761px){
  header{position:sticky;top:0;z-index:70;background:var(--patina);
    box-shadow:0 12px 28px -20px rgba(33,31,28,.55)}
}

/* ---------- CRO pass ---------- */
@media(max-width:820px){.bar .tel{padding:12px;margin:-12px}}
.fmsg a{color:inherit;text-decoration:underline;text-underline-offset:3px}