/* ============================================================
   Pinnacle NW Kitchen & Bath — Rebuild
   STAGING BUILD — do not deploy to client domain.
   Design tokens pulled from the live site's own CSS bundle
   (index-DicyoNlu.css): gold #C9A84C on near-black + cream.
   ONE design system. No prices. No em dashes in copy.
   ============================================================ */

:root {
  /* Brand palette (verbatim from live site) */
  --gold: #C9A84C;
  --gold-dark: #B8952A;
  --black: #0A0A0A;
  --black-2: #111111;
  --surface-dark: #1A1A1A;
  --navy: #1B2A3B;
  --cream: #E8E0D0;
  --taupe: #A89E90;
  --white: #FFFFFF;

  /* Semantic */
  --bg: var(--white);
  --bg-alt: #F7F4EE;          /* warm off-white derived from cream */
  --ink: #1B1B1B;
  --ink-soft: #4A4A4A;
  --hairline: #E4DFD5;

  /* Type */
  --font-head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-serif: "Playfair Display", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Rhythm */
  --measure: 68ch;
  --radius: 10px;
  --shadow: 0 8px 30px rgba(10,10,10,.10);
  --container: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  font-size: 17px;
  line-height: 1.65;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-dark); }

h1, h2, h3, .h { font-family: var(--font-head); line-height: 1.08; letter-spacing: .2px; margin: 0 0 .4em; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); font-weight: 800; text-transform: none; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 700; }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); font-weight: 600; }
.eyebrow { font-family: var(--font-head); text-transform: uppercase; letter-spacing: 2px; font-weight: 700; color: var(--gold-dark); font-size: .95rem; margin: 0 0 .5em; }
.serif { font-family: var(--font-serif); }
p { margin: 0 0 1rem; max-width: var(--measure); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; }
.section { padding: clamp(46px, 7vw, 88px) 0; }
.section--dark { background: var(--black); color: var(--cream); }
.section--dark h2, .section--dark h3 { color: var(--white); }
.section--alt { background: var(--bg-alt); }
.center { text-align: center; }
.lead { font-size: 1.18rem; color: var(--ink-soft); }
.section--dark .lead { color: var(--taupe); }

/* ---------- Buttons (unified on brand gold) ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-head); font-weight: 700; font-size: 1.08rem;
  letter-spacing: .3px; text-decoration: none; cursor: pointer;
  padding: .85rem 1.5rem; border-radius: var(--radius); border: 2px solid transparent;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.btn--primary { background: var(--gold); color: var(--black); }
.btn--primary:hover { background: var(--gold-dark); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--gold); border-color: var(--gold); }
.btn--ghost:hover { background: var(--gold); color: var(--black); }
.btn--block { width: 100%; justify-content: center; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,10,10,.96); color: var(--cream);
  border-bottom: 1px solid rgba(201,168,76,.28);
  backdrop-filter: saturate(1.2) blur(4px);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--white); font-family: var(--font-head); font-weight: 800; font-size: 1.35rem; }
.brand .brand__mark { width: 38px; height: 38px; border-radius: var(--radius); background: var(--gold); color: var(--black); display: grid; place-items: center; font-weight: 800; }
.brand small { display: block; font-family: var(--font-body); font-weight: 500; font-size: .62rem; letter-spacing: 2px; color: var(--gold); text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: 1.35rem; }
.nav a { color: var(--cream); text-decoration: none; font-weight: 500; font-size: .98rem; }
.nav a:hover { color: var(--gold); }
.header-cta { display: flex; align-items: center; gap: .8rem; }
.header-phone { color: var(--gold); font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; text-decoration: none; white-space: nowrap; }
.nav-toggle { display: none; background: none; border: 0; color: var(--cream); font-size: 1.6rem; cursor: pointer; }

/* ---------- Hero ---------- */
.hero { background: linear-gradient(180deg, #0A0A0A 0%, #141414 100%); color: var(--cream); position: relative; }
.hero .container { display: grid; grid-template-columns: 1.15fr .85fr; gap: 42px; align-items: center; padding-block: clamp(44px, 6vw, 76px); }
.hero h1 { color: var(--white); }
.hero h1 .accent { color: var(--gold); }
.hero__sub { font-size: 1.2rem; color: var(--taupe); max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.4rem 0 1.2rem; }
.trust-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; padding: 0; list-style: none; }
.trust-chips li { display: flex; align-items: center; gap: .45rem; background: rgba(201,168,76,.10); border: 1px solid rgba(201,168,76,.35); color: var(--cream); padding: .45rem .8rem; border-radius: var(--radius-pill); font-size: .9rem; font-weight: 500; }
.trust-chips .star { color: var(--gold); }

/* Hero form card */
.lead-form { background: var(--white); color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 24px; }
.lead-form h2 { font-size: 1.5rem; margin-bottom: .2em; }
.lead-form p.small { font-size: .9rem; color: var(--ink-soft); margin-bottom: 1rem; }
.field { margin-bottom: .75rem; }
.field label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .25rem; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  width: 100%; padding: .7rem .8rem; border: 1px solid var(--hairline); border-radius: var(--radius);
  font: inherit; font-size: .98rem; background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
.form-consent { font-size: .74rem; color: var(--ink-soft); margin-top: .6rem; line-height: 1.4; }

/* ---------- Trust bar ---------- */
.trustbar { background: var(--black-2); color: var(--cream); }
.trustbar .container { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem 2.4rem; padding-block: 18px; text-align: center; }
.trustbar span { font-family: var(--font-head); font-weight: 600; letter-spacing: .5px; }
.trustbar b { color: var(--gold); }

/* ---------- Answer-first block ---------- */
.answer-first { border-left: 4px solid var(--gold); background: var(--bg-alt); padding: 20px 24px; border-radius: 0 var(--radius) var(--radius) 0; font-size: 1.12rem; max-width: 78ch; }

/* ---------- Cards / grid ---------- */
.grid { display: grid; gap: 22px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.card { background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius); padding: 24px; transition: transform .15s ease, box-shadow .15s ease; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card h3 { margin-bottom: .3em; }
.card .card__link { font-family: var(--font-head); font-weight: 700; color: var(--gold-dark); text-decoration: none; }
.card .card__link:hover { text-decoration: underline; }
.icon-dot { width: 44px; height: 44px; border-radius: var(--radius); background: rgba(201,168,76,.15); color: var(--gold-dark); display: grid; place-items: center; font-size: 1.3rem; margin-bottom: .8rem; }

/* Promise list (dark) */
.promise-grid .card { background: #151515; border-color: rgba(201,168,76,.25); color: var(--cream); }
.promise-grid .card h3 { color: var(--white); }
.promise-grid .icon-dot { background: rgba(201,168,76,.18); color: var(--gold); }

/* ---------- Photo placeholder (honest — no stock-as-real) ---------- */
.photo-ph {
  position: relative; border-radius: var(--radius); overflow: hidden; min-height: 220px;
  background:
    repeating-linear-gradient(135deg, rgba(201,168,76,.10) 0 14px, rgba(201,168,76,.03) 14px 28px),
    linear-gradient(180deg, #171717, #0f0f0f);
  border: 1px dashed rgba(201,168,76,.5);
  display: grid; place-items: center; text-align: center; color: var(--taupe);
}
.photo-ph span { font-family: var(--font-head); font-weight: 600; letter-spacing: 1px; font-size: .82rem; text-transform: uppercase; padding: 0 12px; }

/* ---------- Steps ---------- */
.steps { counter-reset: step; display: grid; gap: 18px; grid-template-columns: repeat(4,1fr); }
.step { background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius); padding: 22px; position: relative; }
.step::before { counter-increment: step; content: counter(step); font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; color: var(--black); background: var(--gold); width: 40px; height: 40px; border-radius: var(--radius-pill); display: grid; place-items: center; margin-bottom: .7rem; }

/* ---------- Service area ---------- */
.town-list { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; padding: 0; }
.town-list li { background: rgba(201,168,76,.12); border: 1px solid rgba(201,168,76,.35); border-radius: var(--radius); padding: .5rem .9rem; font-weight: 600; font-family: var(--font-head); }

/* ---------- FAQ accordion ---------- */
.faq details { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 0 18px; margin-bottom: 12px; background: #fff; }
.faq summary { cursor: pointer; padding: 18px 0; font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold-dark); font-size: 1.5rem; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq details[open] { padding-bottom: 10px; }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(120deg, var(--black), var(--navy)); color: var(--cream); text-align: center; }
.cta-band h2 { color: var(--white); }

/* ---------- Reviews slot (no fabricated reviews) ---------- */
.reviews-slot { border: 1px dashed rgba(201,168,76,.55); border-radius: var(--radius); padding: 30px; text-align: center; background: var(--bg-alt); color: var(--ink-soft); }

/* ---------- Footer ---------- */
.site-footer { background: var(--black); color: var(--taupe); padding-top: 56px; }
.site-footer h3 { font-family: var(--font-head); color: var(--white); font-size: 1.15rem; margin: 0 0 .8rem; }
.site-footer a { color: var(--cream); text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.footer-nap { font-style: normal; line-height: 1.8; }
.footer-nap .phone { color: var(--gold); font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; }
.map-slot { border: 1px dashed rgba(201,168,76,.5); border-radius: var(--radius); min-height: 160px; display: grid; place-items: center; text-align: center; color: var(--taupe); font-size: .8rem; padding: 12px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: 40px; padding: 20px 0; font-size: .85rem; text-align: center; }

/* ---------- Sticky mobile call bar ---------- */
.mobile-call { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: var(--gold); color: var(--black); text-align: center; padding: 14px; font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; text-decoration: none; box-shadow: 0 -4px 20px rgba(0,0,0,.25); }

/* ---------- Breadcrumb ---------- */
.crumbs { font-size: .85rem; color: var(--ink-soft); padding: 14px 0 0; }
.crumbs a { color: var(--gold-dark); text-decoration: none; }

/* ---------- Build note banner (staging only) ---------- */
.staging-note { background: #2a1f00; color: var(--gold); text-align: center; font-size: .8rem; padding: 6px 12px; font-family: var(--font-body); letter-spacing: .3px; }

/* ============ Responsive ============ */
@media (max-width: 960px) {
  .hero .container { grid-template-columns: 1fr; gap: 26px; }
  .grid--4 { grid-template-columns: repeat(2,1fr); }
  .steps { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .nav, .header-phone { display: none; }
  .nav-toggle { display: block; }
  .nav.open { display: flex; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; background: var(--black); padding: 18px 20px; gap: 1rem; border-bottom: 1px solid rgba(201,168,76,.3); }
  .grid--3, .grid--2, .grid--4 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .mobile-call { display: block; }
  body { padding-bottom: 56px; }
}

/* footer logo lockup (real brand asset, added 2026-07-27) */
.footer-logo{display:block;max-width:260px;width:100%;height:auto;margin:0 0 1.1rem;border-radius:var(--radius)}

/* illustrative gallery images (stock, honest framing — added 2026-07-27) */
.photo-img{border-radius:var(--radius);width:100%;height:100%;min-height:220px;object-fit:cover;display:block}

/* header P monogram (real mark, added 2026-07-27) */
img.brand__mark{object-fit:cover;background:transparent;padding:0}

/* accessibility: skip link + keyboard focus (added 2026-07-27) */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--gold);color:#111;padding:10px 16px;font-weight:700;border-radius:0 0 var(--radius) 0}
.skip-link:focus{left:0}
main:focus{outline:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:var(--radius-sm)}

/* ---------------------------------------------------------------
   Social proof: Google listing embed + form rating strip
   Additive only. Added 2026-07-27 with the verified GBP (CID 4905030837346236877).
   --------------------------------------------------------------- */
.gbp-embed { display: block; width: 100%; border-radius: var(--radius); overflow: hidden; background: var(--surface-dark); }

.form-rating {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  margin: 0 0 1.1rem; padding: .6rem .85rem;
  background: var(--bg-alt); border: 1px solid var(--hairline); border-radius: var(--radius);
}
.form-rating__stars { color: var(--gold); font-size: 1.05rem; letter-spacing: .08em; line-height: 1; }
.form-rating__text  { font-family: var(--font-body); font-size: .92rem; color: var(--ink-soft); }
.form-rating__text b { color: var(--ink); font-weight: 600; }

/* dark cards keep the strip readable */
.section--dark .form-rating,
.site-footer  .form-rating { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.section--dark .form-rating__text,
.site-footer  .form-rating__text { color: var(--cream); }
.section--dark .form-rating__text b,
.site-footer  .form-rating__text b { color: var(--white); }

/* form error banner returned by submit.php */
.form-error {
  margin: 0 0 1rem; padding: .7rem .9rem; border-radius: var(--radius);
  background: #FDECEC; border: 1px solid #F2C2C2; color: #8A1F1F; font-size: .92rem;
}

/* footer utility links row (new pages: gallery, reviews, financing, faq, blog, contact) */
.footer-links {
  padding: 1.1rem 0 0; margin-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.10);
  font-size: .92rem; color: var(--taupe); line-height: 2;
}
.footer-links a { color: var(--cream); }
.footer-links a:hover { color: var(--gold); }


/* ===============================================================
   QUIET LUXURY PASS - 2026-07-27
   Brief: "match my logo - baby blue, white, navy and gold",
   "professional, but highly brandable", reject anything "too busy".
   Colours sampled from the logo: navy #203048 field, gold #B08848-#C8A860
   slab, white #F8F8F8 lettering.
   Principle: fewer elements, more air, one accent used sparingly.
   Flat colour only - no gradients, no glow, no decorative boxes.
   =============================================================== */
:root {
  --navy-900: #0D1526;
  --navy-800: #16233F;
  --navy-700: #1E2C4A;
  --navy-600: #203048;
  --gold-deep: #A8813F;
  --gold: #C2A25C;
  --gold-light: #DFC489;
  --ice: #E7ECF5;
  --mist: #9AA6BC;

  --black: var(--navy-800);
  --black-2: var(--navy-900);
  --surface-dark: var(--navy-700);
  --navy: var(--navy-600);
  --cream: var(--ice);
  --taupe: var(--mist);

  --bg: #FFFFFF;
  --bg-alt: #F7F8FB;
  --hairline: #E6E9F0;
  --ink: #16233F;
  --ink-soft: #5A6478;
  --shadow: 0 18px 50px rgba(13,21,38,.08);
  --measure: 62ch;
  --radius: 4px;              /* soft-round corners read cheap; near-square reads tailored */
}

/* ---------- Typography: serif headlines, generous air ---------- */
h1, h2, h3, .h { font-family: var(--font-serif); letter-spacing: -.015em; line-height: 1.12; font-weight: 500; }
h1 { font-size: clamp(2.4rem, 5vw, 4.1rem); font-weight: 500; line-height: 1.06; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.7rem); font-weight: 500; margin-bottom: .5em; }
h3 { font-size: 1.24rem; font-weight: 600; letter-spacing: -.005em; }
body { font-weight: 400; line-height: 1.75; letter-spacing: .002em; }
p { margin: 0 0 1.15rem; }
.lead { font-size: 1.12rem; line-height: 1.8; color: var(--ink-soft); font-weight: 400; }
.section--dark .lead { color: var(--mist); }

.eyebrow {
  font-family: var(--font-body); text-transform: uppercase;
  letter-spacing: .22em; font-weight: 500; font-size: .72rem;
  color: var(--gold-deep); margin: 0 0 1.1em;
}
.section--dark .eyebrow { color: var(--gold-light); }

/* brand wordmark + nav in the clean sans, not condensed */
.brand { font-family: var(--font-body); font-weight: 600; letter-spacing: .01em; font-size: 1.2rem; }
.nav a { font-family: var(--font-body); font-weight: 400; font-size: .95rem; letter-spacing: .01em; }
.header-phone { font-family: var(--font-body); font-weight: 600; font-size: 1rem; letter-spacing: .01em; }

/* ---------- Space ---------- */
.section { padding: clamp(64px, 9vw, 128px) 0; }
.container { max-width: 1120px; }

/* ---------- Buttons: flat, quiet, one accent ---------- */
.btn {
  font-family: var(--font-body); font-weight: 500; font-size: .95rem;
  letter-spacing: .04em; border-radius: var(--radius-sm); padding: .95rem 1.9rem;
  box-shadow: none; transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn--primary { background: var(--gold); color: var(--navy-900); border: 1px solid var(--gold); }
.btn--primary:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; filter: none; box-shadow: none; }
.btn--ghost { background: transparent; border: 1px solid rgba(255,255,255,.34); color: #fff; }
.btn--ghost:hover { background: transparent; border-color: var(--gold-light); color: var(--gold-light); }

/* ---------- Hero: let the photography breathe ---------- */
.hero { background-blend-mode: normal; }
.hero::before { background: linear-gradient(90deg, rgba(13,21,38,.86) 0%, rgba(13,21,38,.62) 48%, rgba(13,21,38,.26) 100%); }
.hero__sub { font-size: 1.12rem; line-height: 1.8; color: var(--ice); font-weight: 400; max-width: 46ch; }
.hero__cta { gap: .8rem; margin-top: 1.8rem; }

/* ---------- Trust marks: a quiet ruled line, not star pills ---------- */
.trust-chips {
  gap: 0; margin-top: 2.2rem; padding-top: 1.3rem;
  border-top: 1px solid rgba(226,236,245,.18); flex-wrap: wrap;
}
.trust-chips li {
  background: none; border: none; border-radius: 0;
  padding: .2rem 1.4rem .2rem 0; margin-right: 1.4rem;
  color: var(--ice); font-size: .82rem; font-weight: 400;
  letter-spacing: .06em; text-transform: uppercase;
  border-right: 1px solid rgba(226,236,245,.16);
}
.trust-chips li:last-child { border-right: none; margin-right: 0; }
.trust-chips .star { display: none; }          /* the stars were the busiest part */

/* ---------- Cards: no boxes. Air, a hairline, and the words. ---------- */
.card {
  background: transparent; border: none; border-top: 1px solid var(--hairline);
  border-radius: 0; padding: 1.9rem 0 0; box-shadow: none;
}
.card:hover { transform: none; box-shadow: none; border-top-color: var(--gold); }
.card::after { display: none; }
.card h3 { margin-bottom: .5em; }
.card p { color: var(--ink-soft); font-size: .98rem; }
.card .card__link { font-family: var(--font-body); font-weight: 500; font-size: .9rem; letter-spacing: .04em; color: var(--gold-deep); }

.promise-grid .card {
  background: transparent; border: none; border-top: 1px solid rgba(226,236,245,.16);
  padding: 1.9rem 0 0; color: var(--ice);
}
.promise-grid .card:hover { border-top-color: var(--gold); }
.promise-grid .card p { color: var(--mist); }

/* the grey icon boxes were the single most generic element on the page */
.icon-dot { display: none; }

.grid { gap: clamp(2rem, 4vw, 3.4rem); }

/* ---------- Surfaces ---------- */
.section--dark { background: var(--navy-800); }
.section--alt { background: var(--bg-alt); }
.site-header { background: var(--navy-800); box-shadow: none; border-bottom: 1px solid rgba(226,236,245,.10); }
.site-footer { background: var(--navy-900); border-top: 1px solid rgba(194,162,92,.22); }

/* ---------- Form: tailored, not bubbly ---------- */
.lead-form { border-radius: var(--radius-sm); border: 1px solid var(--hairline); box-shadow: var(--shadow); padding: 30px 28px; }
.lead-form h2 { font-size: 1.5rem; }
.field input, .field select, .field textarea { border-radius: var(--radius-sm); }
.form-rating {
  background: transparent; border: none; border-bottom: 1px solid var(--hairline);
  border-radius: 0; padding: 0 0 .9rem; margin-bottom: 1.2rem;
}
.form-rating__stars { color: var(--gold); font-size: .95rem; }
.form-rating__text { font-size: .88rem; letter-spacing: .01em; }

.gbp-embed { border: none; border-radius: var(--radius-sm); }

/* ---------- Header: nothing wraps ---------- */
.brand { white-space: nowrap; font-size: 1.14rem; }
.brand span, .brand small { white-space: nowrap; }
.nav { gap: clamp(.9rem, 1.5vw, 1.6rem); flex-wrap: nowrap; }
.nav a { white-space: nowrap; }
.site-header .btn { white-space: nowrap; padding: .8rem 1.4rem; font-size: .9rem; }
.header-phone { white-space: nowrap; }
@media (max-width: 1180px) {
  .nav a { font-size: .89rem; }
  .header-phone { font-size: .94rem; }
}

/* ---------- Logo: art only, no tile ----------
   The source PNGs shipped with a baked-in navy field and the CSS added an 8px
   radius plus a stray gold background, so the mark read as a patch sitting on
   the header rather than as a logo. Backgrounds are now keyed out of the files
   themselves; these rules remove the container styling. */
.brand .brand__mark {
  background: none; border-radius: 0; padding: 0;
  width: 42px; height: 42px; object-fit: contain;
}
img.brand__mark { object-fit: contain; background: none; }
.footer-logo { border-radius: 0; max-width: 232px; }
.brand { gap: .75rem; }


/* ===============================================================
   BRAND BOARD PASS - 2026-07-29
   Daniel's new brand board: script wordmark + tape-measure P icon.
   Palette (verbatim from board): navy #0D182A, steel #6A8FAF,
   gold #C89A3E, cream #F4F1EB. Direction: timeless, classic,
   pristine. Logo FILES still pending from client; palette applied
   now. Delete this block to revert to quiet-luxury tokens.
   =============================================================== */
:root {
  --navy-900: #0D182A;
  --navy-800: #142238;
  --navy-700: #1C2C46;
  --gold-deep: #A87E2F;
  --gold: #C89A3E;
  --gold-light: #E0BE72;
  --steel: #6A8FAF;
  --cream-warm: #F4F1EB;

  --bg-alt: var(--cream-warm);
  --hairline: #E7E2D6;
}

/* Lead-form pop (Daniel: "draw the most attention to the lead form") */
.lead-form { border-top: 3px solid var(--gold); box-shadow: 0 22px 60px rgba(13,24,42,.16); }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus {
  outline: none; border-color: var(--steel); box-shadow: 0 0 0 3px rgba(106,143,175,.25);
}

/* Footer tagline, verbatim from the brand board */
.footer-tagline { margin: .55rem 0 0; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .18em; color: var(--mist); }

/* Script lockup: SVG mark + Yellowtail wordmark (interim until the
   client's real logo exports arrive; markup drops in unchanged) */
.brand-script { font-family: "Yellowtail", cursive; font-size: 1.58rem; font-weight: 400;
  color: #F4F1EB; line-height: 1; display: flex; align-items: baseline; gap: .45rem;
  padding-right: .55em; /* Yellowtail swash ink overhangs its box */ }
.brand-script small { font-family: var(--font-body); font-weight: 700; color: var(--gold);
  font-size: .62rem; letter-spacing: .24em; transform: translateY(-.55em); }
.brand-script--footer { font-size: 2.15rem; }
.footer-brand-lockup { display: flex; align-items: center; gap: .7rem; margin-bottom: .2rem; }

/* Brand band: slogan + values strip from the brand board.
   Quiet-luxury treatment: flat navy, thin rules, one gold accent. */
.brand-band { background: var(--navy-900); border-top: 1px solid rgba(226,236,245,.08);
  padding: 2.6rem 0 2.4rem; text-align: center; }
.brand-band .container { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.brand-band__slogan { margin: 0; font-family: var(--font-body); font-weight: 700;
  font-size: .95rem; letter-spacing: .26em; text-transform: uppercase; color: #F4F1EB; }
.brand-band__slogan span { color: var(--gold); }
.brand-band__values { list-style: none; margin: .2rem 0 0; padding: 0; display: flex;
  flex-wrap: wrap; justify-content: center; }
.brand-band__values li { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mist); padding: 0 1.1rem; border-right: 1px solid rgba(226,236,245,.16);
  line-height: 1.9; }
.brand-band__values li:last-child { border-right: 0; }

/* ===============================================================
   JOLLY-REFERENCE PASS - 2026-07-29 (Dylan: "almost like
   jollyplumbing.com") - friendly energy on the premium base:
   real-offer promo bar, script accent words in H1s, pill CTAs,
   softer radius. Offers are VERBATIM from the client intake.
   =============================================================== */
.offer-bar { background: var(--gold); text-align: center; }
.offer-bar a { display: block; padding: .55rem 1rem; color: var(--navy-900);
  font-weight: 700; font-size: .88rem; letter-spacing: .02em; text-decoration: none; }
.offer-bar a:hover { text-decoration: underline; }

h1 .accent { font-family: "Yellowtail", cursive; font-weight: 400; font-size: 1.18em;
  letter-spacing: 0; padding-right: .18em; /* swash overhang */ }

.btn { border-radius: var(--radius-pill); }
:root {
  --radius: 8px;        /* container + card rung (this :root is last, so it wins) */
  --radius-pill: 999px; /* pill rung  - buttons, chips */
  --radius-sm: 2px;     /* small-chrome rung */
}

/* ===============================================================
   TYPE PASS - 2026-07-29 - the actual font swap.
   Playfair -> Fraunces (vintage-soul serif, Jolly-adjacent warmth)
   Inter/Barlow -> Nunito Sans (rounded friendly body).
   Vars cascade: every heading + paragraph sitewide changes at once.
   =============================================================== */
:root {
  --font-serif: "Fraunces", Georgia, serif;
  --font-head: "Fraunces", Georgia, serif;
  --font-body: "Nunito Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
h1, h2, h3, .h { font-family: var(--font-serif); font-weight: 600; }
h1 { font-weight: 600; }
body { font-family: var(--font-body); }

/* ===============================================================
   DISPLAY TYPE PASS - 2026-07-29 - unmistakable headline change.
   H1/H2 -> Alfa Slab One (chunky Americana slab, the Jolly energy).
   H3 stays Fraunces 600; body stays Nunito Sans.
   Alfa is a single heavy weight and runs WIDE - sizes pulled back.
   =============================================================== */
h1, h2 { font-family: "Alfa Slab One", "Fraunces", Georgia, serif;
  font-weight: 400; letter-spacing: .01em; line-height: 1.16; }
h1 { font-size: clamp(1.9rem, 4vw, 3.1rem); }
h2 { font-size: clamp(1.45rem, 2.6vw, 2.1rem); }
h1 .accent { font-size: 1.05em; } /* script accent rebalanced vs slab */

/* Title weight relief 2026-07-29: Alfa is single-weight; smaller sizes
   + looser leading read lighter while keeping the slab character. */
h1 { font-size: clamp(1.65rem, 3.4vw, 2.55rem); line-height: 1.22; }
h2 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.26; }

/* Live Google listing feature block (CID 4905030837346236877) */
.google-live__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
  align-items: center; margin-top: 1.6rem; }
.gbp-embed--feature { border-radius: var(--radius); box-shadow: var(--shadow); }
.google-live__score { font-size: 1.05rem; margin-bottom: .9rem; }
.google-live__stars { color: var(--gold); letter-spacing: .06em; }
.google-live__copy .btn { margin-top: .5rem; }
@media (max-width: 820px) { .google-live__grid { grid-template-columns: 1fr; } }

/* Real Google review cards (verbatim; pulled 2026-07-29) */
.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 1.6rem; }
.rev-card { margin: 0; padding: 1.5rem; background: var(--bg); border: 1px solid var(--hairline);
  border-radius: var(--radius); box-shadow: 0 10px 30px rgba(13,24,42,.05); display: flex; flex-direction: column; }
.rev-card__stars { color: var(--gold); letter-spacing: .1em; margin: 0 0 .7rem; font-size: 1rem; }
.rev-card blockquote { margin: 0 0 1rem; font-size: .96rem; line-height: 1.7; color: var(--ink); flex: 1; }
.rev-card--clamp blockquote { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.rev-card figcaption { font-size: .84rem; font-weight: 700; color: var(--ink); }
.rev-card figcaption span { font-weight: 400; color: var(--ink-soft); }
.section--alt .rev-card, .section--dark .rev-card { background: #fff; }
.rev-grid--all { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .rev-grid, .rev-grid--all { grid-template-columns: 1fr; } }

/* ============================================================
   EXACT BRAND LOGO PASS - 2026-07-31
   Assets pixel-extracted from Daniel's approved brand board
   (cream bg keyed out, navy recolored to cream for dark surfaces).
   Navy-on-transparent originals kept as pinnacle-*-navy.png for
   light surfaces (print, invoices, email).
   ============================================================ */
.brand .brand__mark--p { width: auto; height: 40px; border-radius: 0; background: none; display: block; }
.footer-brand-lockup img { height: 46px; width: auto; }
.brand-band__lockup { height: 110px; width: auto; }
@media (max-width: 640px) {
  .brand .brand__mark--p { height: 34px; }
  .brand-band__lockup { height: 84px; }
}


/* ============================================================
   PASS 2 - 2026-08-06
   E-E-A-T byline + last-updated strip (AI/GEO #6, #8),
   comparison tables (AI/GEO #4 / VISUAL #12),
   local-resource + access blocks on city pages (CITY #13, A2.2).
   ============================================================ */
.page-meta {
  display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between;
  align-items: baseline; margin: 34px 0 8px; padding-top: 14px;
  border-top: 1px solid rgba(27,42,59,.16);
  font-size: .86rem; color: var(--ink-soft); line-height: 1.6;
}
.page-meta strong { color: var(--ink); font-weight: 700; }
.page-meta a { color: var(--gold-dark); }
.section--dark .page-meta, .section--dark .page-meta strong { color: var(--cream); }

/* Comparison tables */
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 22px 0; }
table.cmp {
  width: 100%; min-width: 540px; border-collapse: collapse;
  font-size: .95rem; background: #fff;
  border: 1px solid rgba(27,42,59,.14); border-radius: var(--radius); overflow: hidden;
}
table.cmp caption {
  caption-side: top; text-align: left; font-family: var(--font-head);
  font-size: 1rem; font-weight: 700; color: var(--ink); padding: 0 0 10px;
}
table.cmp th, table.cmp td { padding: 12px 14px; text-align: left; vertical-align: top; }
table.cmp thead th {
  background: var(--navy-800); color: var(--cream);
  font-family: var(--font-head); font-size: .82rem;
  letter-spacing: .06em; text-transform: uppercase;
}
table.cmp tbody tr + tr { border-top: 1px solid rgba(27,42,59,.12); }
table.cmp tbody tr:nth-child(even) { background: rgba(27,42,59,.035); }
table.cmp tbody th { font-weight: 700; color: var(--ink); white-space: nowrap; }

/* Access / getting-here block */
.access-block {
  background: rgba(27,42,59,.04); border-left: 3px solid var(--gold);
  padding: 18px 20px; border-radius: 0 var(--radius) var(--radius) 0; margin: 22px 0;
}
.access-block h3 { margin: 0 0 8px; }
.access-block p:last-child { margin-bottom: 0; }
.local-resource { font-size: .93rem; }

.cmp-caption { font-family: var(--font-head); font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0 0 10px; }


/* ---------- Access band: titled service-radius section w/ photo column ---------- */
/* Added 2026-08-11 per client video feedback: the block read as an untitled */
/* stray box. Gives it an eyebrow+H2 header, an alt background, and a photo   */
/* column. Mirrors the header pattern the 23 city pages already use.          */
.access-band .access-block { margin: 0; }
.access-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: stretch;
  margin-top: 26px;
}
.access-split .access-block p { max-width: none; }
.access-photo {
  margin: 0; border-radius: 0 var(--radius) var(--radius) 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 22px;
  min-height: 220px;
}
.access-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); display: block; }
.access-photo figcaption { font-size: .85rem; color: var(--ink-soft); margin-top: 10px; }
/* Placeholder state — only while awaiting real job photos from the client. */
.access-photo--empty {
  border: 2px dashed rgba(200, 154, 62, .55);
  background: rgba(200, 154, 62, .05);
  border-radius: var(--radius);
}
.access-photo--empty .access-photo__label {
  font-family: var(--font-head); font-weight: 700;
  color: var(--gold-deep); font-size: .95rem; margin: 0 0 6px; max-width: none;
}
.access-photo--empty .access-photo__hint {
  font-size: .85rem; color: var(--ink-soft); margin: 0; max-width: 30ch;
}
@media (max-width: 860px) {
  .access-split { grid-template-columns: 1fr; }
  .access-photo { min-height: 160px; }
}

/* ---------- Intro video slot (About) ---------- */
.video-ph { aspect-ratio: 16 / 9; min-height: 0; max-width: 860px; margin-inline: auto; }
.intro-video { width: 100%; max-width: 860px; height: auto; display: block;
  margin-inline: auto; border-radius: var(--radius); background: #000; }

/* ---------- Fix: .center on a <p> could never actually centre ----------
   p{max-width:var(--measure)} constrains the box, and .center only set
   text-align, so every centred eyebrow/lead sat flush-left at the measure
   edge. Individual blocks had been hand-patched with inline margin:0 auto.
   This makes .center work on paragraphs sitewide. Added 2026-08-11. */
p.center, .lead.center, p.eyebrow.center { margin-inline: auto; }

/* ---------- A2.1 TLDR bullets (Page SOP Appendix 2) ----------
   Sits directly under .answer-first. Every bullet is the page's own FAQ question
   plus the verbatim opening of that FAQ's own answer - no new claims live here. */
.tldr { list-style: none; margin: 18px 0 0; padding: 0; max-width: 78ch; display: grid; gap: .7rem; }
.tldr li { position: relative; padding-left: 1.6rem; line-height: 1.55; color: var(--ink-soft); }
.tldr li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--gold-dark); font-weight: 700; }
.tldr li b { color: var(--ink); font-family: var(--font-head); font-weight: 700; font-size: 1.06em; letter-spacing: .01em; }

/* Compact, centered answer block for money-page intros with no side media. */
.section.section--answer-summary { padding: clamp(34px, 4.5vw, 58px) 0; }
.section--answer-summary .answer-first,
.section--answer-summary .tldr {
  width: min(900px, 100%);
  max-width: 100%;
  margin-inline: auto;
}
.section--answer-summary .tldr { margin-top: 14px; gap: .55rem; }
.section--answer-summary .tldr li { line-height: 1.48; }


/* ===============================================================
   MUTED STEEL BLUE PASS - 2026-08-17
   Client request (Daniel, iMessage 2026-08-17): swap the navy field
   for a "deep muted steel blue" - his reference swatch was #3B719F,
   with "maybe slightly darker or even exactly like this is fine" -
   and mute the gold: "not super bright or just a deeper gold likely
   darker. I think I'll add to luxurious feel."

   Method: the whole ramp is built at the reference swatch's own
   hue/saturation (H 208deg, S 46%) and stepped only on lightness, so
   #3B719F IS the palette rather than sitting next to it. Large text
   fields use the darker steps (his "slightly darker"); #3B719F itself
   is kept as the mid accent so his exact hex is on the page.
   Gold drops from S 56% / L 51% to S 42% / L 48% - visibly muted and
   deeper, and it clears WCAG AA on white for the first time
   (old link gold #B8952A was 2.85:1; new #826935 is 5.2:1).

   Delete this block to revert to the 2026-07-29 brand-board navy.
   NOTE: the 23 inline hero gradients in the HTML were also retinted
   from rgba(13,21,38,..) to rgba(22,42,60,..) - inline styles beat
   this stylesheet, so they cannot be reverted from here alone.
   =============================================================== */
:root {
  /* Steel-blue ramp - H208 S46, stepped on lightness only */
  --navy-900: #162A3C;   /* L16% - footer, hero scrim, deepest field */
  --navy-800: #244461;   /* L26% - header, dark sections            */
  --navy-700: #2C5477;   /* L32% - raised dark surface              */
  --navy-600: #33618A;   /* L37%                                    */
  --steel:    #3B719F;   /* L43% - Daniel's reference hex, verbatim */
  --steel-light: #72A1CB;/* L62% - accents on dark                  */

  /* Muted gold - S42 (was 56), deeper */
  --gold-deep:  #826935;
  --gold:       #AE8C47;
  --gold-dark:  #826935; /* link colour on light; was #B8952A, failed AA */
  --gold-light: #C7AC75;

  --shadow: 0 18px 50px rgba(22,42,60,.10);
}

/* ---------- Hardcoded tints that predate the token system ---------- */
/* Hero: base gradient + scrim both carried literal navy values. */
.hero { background: linear-gradient(180deg, #162A3C 0%, #1D3852 100%); }
.hero::before {
  background: linear-gradient(90deg, rgba(22,42,60,.86) 0%, rgba(22,42,60,.62) 48%, rgba(22,42,60,.26) 100%);
}

.site-footer { border-top: 1px solid rgba(174,140,71,.26); }

.lead-form { box-shadow: 0 22px 60px rgba(22,42,60,.18); }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus {
  border-color: var(--steel); box-shadow: 0 0 0 3px rgba(59,113,159,.28);
}
.rev-card { box-shadow: 0 10px 30px rgba(22,42,60,.06); }

.page-meta { border-top: 1px solid rgba(22,42,60,.16); }
table.cmp { border: 1px solid rgba(22,42,60,.14); }
table.cmp tbody tr + tr { border-top: 1px solid rgba(22,42,60,.12); }
table.cmp tbody tr:nth-child(even) { background: rgba(22,42,60,.035); }
.access-block { background: rgba(59,113,159,.06); }
.access-photo--empty {
  border: 2px dashed rgba(174,140,71,.55);
  background: rgba(174,140,71,.05);
}

/* Gold-tinted chrome still keyed to the retired #C9A84C */
.town-list li { background: rgba(174,140,71,.12); border: 1px solid rgba(174,140,71,.35); }
.reviews-slot { border: 1px dashed rgba(174,140,71,.55); }
.map-slot { border: 1px dashed rgba(174,140,71,.5); }
.nav.open { border-bottom: 1px solid rgba(174,140,71,.30); }
.skip-link { color: var(--navy-900); }

/* Staging banner: neutral so it stops competing with the brand bar */
.staging-note { background: var(--navy-900); color: var(--gold-light); }

/* Hero eyebrow sits on photography, not a flat panel, and .hero is not
   .section--dark so it never picked up the light-gold rule. The deeper
   muted gold made it unreadable over the scrim - use the light step. */
.hero .eyebrow { color: var(--gold-light); }


/* ============================================================
   L5 STRUCTURE + VISUAL PASS - 2026-09-02
   ============================================================ */

/* Social-proof strip: full-width band between the header and the hero */
.proof-strip {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: .55rem 1rem; width: 100%;
  background: var(--navy-800); color: var(--cream);
  padding: .7rem 1rem; text-decoration: none;
  font-size: .92rem; letter-spacing: .02em;
  border-bottom: 1px solid rgba(201,168,76,.35);
}
.proof-strip__stars { color: var(--gold); letter-spacing: .12em; }
.proof-strip__text b { color: #fff; }
.proof-strip__cta { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.proof-strip:hover .proof-strip__cta { color: var(--gold-light); }

/* Trust chips: discrete bounded elements, one claim per chip */
.trust-chips li {
  border: 1px solid rgba(201,168,76,.45);
  border-right: 1px solid rgba(201,168,76,.45);
  border-radius: var(--radius-pill);
  padding: .35rem .9rem; margin-right: .55rem; margin-bottom: .5rem;
  background: rgba(201,168,76,.08);
}
.trust-chips li:last-child { border-right: 1px solid rgba(201,168,76,.45); margin-right: 0; }
.trust-chips { gap: 0; }

/* Offer block */
.offer-grid { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; gap: 18px; grid-template-columns: repeat(4,1fr); }
.offer-card { background: #fff; border: 1px solid var(--hairline); border-top: 3px solid var(--gold); border-radius: var(--radius); padding: 22px; }
.offer-card h3 { margin: 0 0 .5rem; font-size: 1.08rem; }
.offer-card p { margin: 0; font-size: .95rem; }

/* Numbered how-it-works steps */
.step { counter-increment: step; padding-top: 46px; }
.step::before {
  content: counter(step);
  position: absolute; top: 18px; left: 22px;
  width: 34px; height: 34px; border-radius: var(--radius-pill);
  background: var(--gold); color: var(--navy-900);
  font-family: var(--font-head); font-weight: 800; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
}

/* Area map */
.area-map { margin: 1.6rem 0 0; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; line-height: 0; }
.area-map iframe { display: block; width: 100%; border: 0; }

/* Folded answer summary at the top of the services band */
.answer-summary-inline { max-width: var(--measure); margin: 0 auto 2.2rem; }
.answer-summary-inline p { margin-top: 0; }

/* Closing lead form band */
.lead-form--closing { max-width: 560px; margin: 1.8rem auto 0; }

/* Motion: the sticky mobile call bar announces itself. Opacity + transform only. */
@keyframes bv-call-in { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 760px) { .mobile-call { animation: bv-call-in .32s ease-out both; } }
@media (prefers-reduced-motion: reduce) { .mobile-call { animation: none; } }

@media (max-width: 980px) { .offer-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px) { .offer-grid { grid-template-columns: 1fr; } .proof-strip { font-size: .84rem; } }
.calc-tag { display: inline-block; margin-left: .5rem; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--gold-dark); border: 1px solid rgba(201,168,76,.5); border-radius: var(--radius-pill); padding: .15rem .6rem; vertical-align: middle; }
.proof-cta { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 1.6rem; }
/* On 19 pages the CTA sits INSIDE .rev-grid, so it becomes a one-column grid item
   pinned hard-left with ~735px of dead space beside it. It is a full-width centered
   button row, so make it span every column. No-op under 900px (grid is 1 column). */
.rev-grid > .proof-cta { grid-column: 1 / -1; }
.photo-figure { margin: 0; }
.photo-figure .photo-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-figure figcaption { margin-top: .5rem; font-size: .82rem; line-height: 1.45; color: var(--ink-soft); }
.review-job { display: block; margin-top: .25rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--gold-dark); }
/* Same-tint neighbours announce themselves: hairline + deeper top padding than alternating bands */
.section--alt + .section--alt,
.section:not(.section--alt):not(.section--dark):not(.hero):not(.cta-band):not(.google-live) + .section:not(.section--alt):not(.section--dark):not(.cta-band):not(.google-live) {
  border-top: 1px solid var(--hairline);
  padding-top: clamp(64px, 9vw, 122px);
}
/* Orphan-class closure (row 244): every class token in the markup resolves to a rule */
.hero__copy { position: relative; z-index: 1; }
.page-meta__by { display: inline; }
.page-meta__date { display: inline; }