/* global.css — site-wide chrome + reusable components.
 * Extracted (additive copy) from homepage.css so every page shares the same
 * tokens, base reset/typography, header/footer chrome, garland/snow effects,
 * and the reusable card/step/review/pill/gallery components. Front-page-only
 * sections (hero, photoband, countdown, final, cfeature, 2-col services and the
 * hero-veil punch-list) stay in homepage.css. Keep both in sync if a shared
 * rule changes. */

  :root{
    --red-base:#B91C1C; --red-hover:#9F1818; --red-100:#FBE0E0;
    --gold-base:#C99A3B; --gold-hover:#B0852E; --gold-soft:#E6CF96; --gold-50:#FBF5E8;
    --green-base:#104A2C; --green-100:#CFE3D5;
    --green-btn:#1C7A3D; --green-btn-hover:#166431;
    /* surfaces + ink — mapped to brand tokens (charcoal text on cream, per design guide) */
    --parch:var(--wp--preset--color--background); --parch-raised:var(--wp--preset--color--card);
    --parch-border:var(--wp--preset--color--border); --parch-divider:var(--wp--preset--color--divider);
    --text-base:var(--wp--preset--color--text); --text-muted:var(--wp--preset--color--text-muted);
    --head-brown:var(--wp--preset--color--text);
    /* warm darks */
    --night:#14161E; --night-2:#1B1E28; --dusk:#20242F; --night-line:rgba(230,207,150,.24);
    /* glowing placeholder so image slots never render as empty boxes */
    --glow-tile:
      radial-gradient(90px 70px at 26% 26%, rgba(255,221,150,.42), transparent 62%),
      radial-gradient(120px 90px at 74% 72%, rgba(185,28,28,.30), transparent 60%),
      radial-gradient(80px 80px at 82% 22%, rgba(127,207,154,.20), transparent 60%),
      linear-gradient(155deg,#261c15,#15100d);
  }
  .cap{position:absolute; left:11px; bottom:11px; z-index:2; font-size:11px; letter-spacing:.03em;
    color:#F3E9D2; background:rgba(13,15,22,.55); border:1px solid rgba(230,207,150,.28);
    padding:3px 10px; border-radius:999px; backdrop-filter:blur(3px); display:inline-flex; align-items:center; gap:6px;}
  .cap::before{content:""; width:6px; height:6px; border-radius:50%; background:#FFE7B0; box-shadow:0 0 6px 1px rgba(255,221,150,.9);}
  *{box-sizing:border-box;}
  *{font-synthesis-weight:none;}
  html{scroll-behavior:smooth;}
  body{margin:0; font-family:"DM Sans",system-ui,sans-serif; color:var(--text-base);
    background:var(--night); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
  h1,h2,h3{font-family:"DM Serif Display",Georgia,serif; font-weight:600; line-height:1.08; margin:0; color:var(--head-brown);}
  .section--night h2,.section--night h3,.section--dusk h2,.section--dusk h3,.hero h1{color:#F6EFDD;}
  p{margin:0;} a{color:inherit; text-decoration:none;} img{max-width:100%; display:block;}
  :focus-visible{outline:2px solid var(--gold-base); outline-offset:3px; border-radius:2px;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 24px; position:relative; z-index:2;}
  .eyebrow{font-size:13.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-hover);}
  .section--night .eyebrow{color:var(--gold-soft);}
  .section{padding:80px 0; position:relative;}  /* inner standard; front page keeps 92 via homepage.css */

  /* warm parchment sections + gentle top vignette so the join from dark is soft */
  .section--warm{background:var(--parch);}
  .section--warm::before{content:""; position:absolute; top:0; left:0; right:0; height:140px;
    background:radial-gradient(620px 150px at 50% 0,rgba(201,154,59,.16),transparent 70%),
      linear-gradient(180deg,rgba(18,20,28,.20),transparent);
    pointer-events:none;}
  .section--night{background:var(--night); color:#F2E8D4;}
  .section--dusk{background:linear-gradient(180deg,var(--dusk),var(--night-2)); color:#F2E8D4;}

  /* ambient bokeh for depth in dark sections */
  .bokeh{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1;}
  .bokeh i{position:absolute; border-radius:50%; filter:blur(7px); opacity:.5;}

  /* Buttons */
  .btn{display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:15px;
    padding:14px 26px; border-radius:999px; border:1.5px solid transparent; cursor:pointer;
    transition:background .18s,color .18s,border-color .18s,transform .18s;}
  .btn:active{transform:translateY(1px);}
  .btn-gold{background:var(--gold-base); color:#3A2A0C;}
  .btn-gold:hover{background:var(--gold-hover); color:#fff3de;}
  .btn-ghost{background:transparent; color:#F3E9D2; border-color:rgba(243,233,210,.45);}
  .btn-ghost:hover{border-color:var(--gold-soft); color:#fff;}

  /* Horizontal garland drape */
  /* #218 — overflow visible so the drawn wire can run past the corners and
   * overlap the side strands; the fallback line spans edge to edge instead
   * of fading out before it gets there. */
  .garland{display:flex; justify-content:center; gap:clamp(20px,4vw,54px); align-items:flex-start;
    position:relative; height:32px; overflow:visible;}
  .garland::before{content:""; position:absolute; top:5px; left:-2%; right:-2%; height:2px;
    background:var(--night-line);}
  .bulb{position:relative; width:9px; height:13px; border-radius:50% 50% 50% 50%/62% 62% 38% 38%;
    margin-top:6px; animation:tw 3.6s ease-in-out infinite;}
  .bulb::after{content:""; position:absolute; top:-3px; left:50%; width:3px; height:4px;
    background:#2f2718; border-radius:2px; transform:translateX(-50%);}
  .warm{background:#FFE7B0; box-shadow:0 0 6px 2px rgba(255,221,150,.85),0 0 14px 5px rgba(255,200,110,.45);}
  .gold{background:var(--gold-soft); box-shadow:0 0 6px 2px rgba(230,207,150,.8),0 0 15px 6px rgba(201,154,59,.4);}
  .red{background:#FF6A5E; box-shadow:0 0 6px 2px rgba(255,90,80,.75),0 0 15px 6px rgba(185,28,28,.45);}
  .green{background:#7FCF9A; box-shadow:0 0 6px 2px rgba(127,207,154,.7),0 0 15px 6px rgba(16,74,44,.5);}
  /* #37: warm-white + cool-pure-white pattern only — alternate every bulb,
     overriding the multicolor classes (nth-child beats the single-class colors). */
  .bulb:nth-child(odd),.vbulb:nth-child(odd){background:#FFE7B0; box-shadow:0 0 6px 2px rgba(255,221,150,.85),0 0 14px 5px rgba(255,200,110,.45);}
  .bulb:nth-child(even),.vbulb:nth-child(even){background:#EAF2FF; box-shadow:0 0 6px 2px rgba(216,232,255,.9),0 0 15px 6px rgba(150,190,255,.45);}
  .bulb:nth-child(2n){margin-top:11px; animation-delay:.5s;}
  .bulb:nth-child(3n){animation-delay:1.1s; margin-top:8px;}
  .bulb:nth-child(4n){animation-delay:1.7s;}
  .bulb:nth-child(5n){animation-delay:2.3s; margin-top:12px;}
  @keyframes tw{0%,100%{opacity:1;}45%{opacity:.45;}70%{opacity:.85;}}
  /* Naturally draped wire — drawn by JS through the hung bulbs (homepage.js).
     Falls back to the straight ::before line when JS is unavailable. */
  .garland-wire{position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:0;}
  .garland-wire path{fill:none; stroke:rgba(230,207,150,.4); stroke-width:1.4; stroke-linecap:round;}
  .garland.is-draped::before{display:none;}
  .garland.is-draped .bulb{z-index:1;}
  /* Draped garlands span the full width and meet the vertical strands at the corners. */
  .garland.is-draped{justify-content:space-between; padding-inline:clamp(6px,1.5vw,22px);}
  /* Vertical strands: JS draws a gently waving wire; hide the straight CSS one. */
  .vstrand-wire{position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible; pointer-events:none;}
  .vstrand-wire path{fill:none; stroke:rgba(230,207,150,.18); stroke-width:1.4; stroke-linecap:round;}
  .vstrand.is-waved .vwire{display:none;}

  /* Vertical garland framing the page (desktop). Absolute (not fixed) so the
     strands scroll with the page — JS sets top/height in document coords. */
  .vstrand{position:absolute; top:0; width:22px; z-index:56; pointer-events:none; display:none;}
  .vstrand.l{left:8px;} .vstrand.r{right:8px;}
  .vstrand .vwire{position:absolute; top:0; bottom:0; left:50%; width:2px; transform:translateX(-50%);
    background:linear-gradient(180deg,transparent,rgba(230,207,150,.22) 4%,rgba(230,207,150,.22) 96%,transparent);}
  .vbulb{position:absolute; left:50%; width:9px; height:13px; transform:translateX(-50%);
    border-radius:50% 50% 50% 50%/62% 62% 38% 38%; animation:twv 4s ease-in-out infinite;}
  /* Gentler twinkle for the side strands so they never fade to a wash on cream
     (they sit above the snow canvas via z-index, so they stay crisp). */
  @keyframes twv{0%,100%{opacity:1;}50%{opacity:.78;}}
  /* Pre-lit wreath covering each junction where a horizontal garland crosses a
     vertical strand. JS appends one .vjoint per garland and sets its top (in
     strand-local px); we center it on that crossing point. (#37) */
  .vjoint{position:absolute; left:50%; transform:translate(-50%,-50%);
    width:82px; height:84px; z-index:5; pointer-events:none;
    background:url(../images/wreath-junction.svg) center/contain no-repeat;}
  /* Sit the wreath over the strand crossing so the junction lands on the ring's
     upper outer corner (≈1:30 on the right, 10:30 on the left). (#37 follow-up) */
  .vstrand.l .vjoint{transform:translate(-27%,-23%);}
  .vstrand.r .vjoint{transform:translate(-73%,-23%);}
  @media(min-width:1240px){.vstrand{display:block;}}

  /* Header — sticky; centered logo flanked by split nav, phone CTA far left,
     green quote button far right. Shrinks + fades once the page is scrolled. */
  :root{--hdr-h:110px;}
  @media(max-width:980px){:root{--hdr-h:82px;}} /* #263/#265 — matches the taller mobile bar */
  /* Fixed (not sticky) so heroes slide underneath and the header is truly
     transparent at rest — no body-background band behind the nav. */
  header{position:fixed; top:0; left:0; right:0; z-index:60; background:transparent;
    border-bottom:0; transition:background .25s ease, box-shadow .25s ease;}
  /* Hero pages: no body offset — the hero starts at the viewport top and
     slides under the fixed header; its ::before spacer keeps the content
     where it was while the hero background fills the band behind the nav.
     (Negative margins don't survive WP's flow-margin resets, so we gate the
     body padding instead.) */
  .hero::before, .confirm::before{content:""; display:block; height:var(--hdr-h);}
  body:not(:has(.hero, .confirm)){padding-top:var(--hdr-h);}
  /* Pages without a dark hero (privacy, 404) keep a legible solid header. */
  body:not(:has(.hero, .confirm)) header{background:rgba(18,20,28,.92);}
  /* Transparent at rest (floats over the hero); gains a dark scrim once scrolled
     so the nav stays legible over the light sections below. */
  header.is-scrolled{background:rgba(18,20,28,.82); backdrop-filter:blur(10px);
    box-shadow:0 8px 24px -16px rgba(0,0,0,.6);}
  .nav{display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
    gap:clamp(16px,2.2vw,38px); height:110px; transition:height .25s ease;
    max-width:1680px; padding-inline:clamp(22px,3vw,56px);}
  header.is-scrolled .nav{height:82px;}
  /* Keep the sticky header clear of the WP admin bar when logged in. */
  .admin-bar header{top:32px;}
  @media(max-width:782px){.admin-bar header{top:46px;}}
  /* The header-border garland scrolls away with the page; hide the old in-hero
     one on the homepage so the top strand lives at the header border instead. */
  .home .hero > .garland{display:none;}
  /* Header-border strand: hugs the header's bottom edge, drapes into the hero,
     scrolls away with the page (it is not part of the sticky header). */
  .garland.topframe{position:relative; z-index:5; margin:0; padding-top:2px;
    transform:translateY(20px);}  /* nudge the top strand down off the header */
  /* #109: let the bulbs visibly dangle over the hero banner — deeper, more
     varied drops and no clipping on the top strand. */
  .garland.topframe{height:auto; overflow:visible;}
  .garland.topframe .bulb{margin-top:10px;}
  .garland.topframe .bulb:nth-child(2n){margin-top:19px;}
  .garland.topframe .bulb:nth-child(3n){margin-top:14px;}
  .garland.topframe .bulb:nth-child(4n){margin-top:8px;}
  .garland.topframe .bulb:nth-child(5n){margin-top:24px;}

  .nav-side{display:flex; align-items:center; gap:clamp(16px,2.2vw,32px); min-width:0;}
  .nav-side--left{justify-self:start;}
  .nav-side--right{justify-self:end;}

  /* Centered logo */
  .brand{justify-self:center; display:block;}
  .brand-logo{height:96px; width:auto; display:block; transition:height .25s ease;}
  header.is-scrolled .brand-logo{height:69px;}
  .brand-fallback{display:none;}

  /* Phone CTA block (far left) */
  .nav-cta{position:relative; display:inline-flex;}
  .cta-badge{position:absolute; top:-9px; left:50px; z-index:1; background:var(--red-base);
    color:#fff; font-size:9.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
    padding:3px 9px; border-radius:3px; line-height:1; white-space:nowrap;}
  .cta-phone{display:inline-flex; align-items:stretch; border:1px solid rgba(243,233,210,.32);
    border-radius:9px; overflow:hidden; background:rgba(255,255,255,.03);}
  .cta-phone:hover{border-color:rgba(230,207,150,.5);}
  .cta-icon{display:inline-flex; align-items:center; justify-content:center; width:46px;
    background:var(--red-base); color:#fff; flex:none;}
  .cta-num{display:inline-flex; align-items:center; padding:0 16px; min-height:48px;
    font-weight:700; font-size:18px; color:#F3E9D2; white-space:nowrap;}

  /* Split nav links — uppercase, bold */
  .nav-links{display:flex; align-items:center; gap:clamp(16px,1.9vw,28px);
    font-size:13.5px; font-weight:700; letter-spacing:.075em; text-transform:uppercase;}
  .nav-links a{color:#F3E9D2; padding:6px 0; display:inline-flex; align-items:center; gap:5px; white-space:nowrap;}
  .nav-links a:hover{color:#fff;}
  .nav-links .caret{font-size:10px; opacity:.7; transform:translateY(1px);}
  /* Services dropdown — reveals the 3 service pages on hover/focus. */
  .nav-dd{position:relative; display:inline-flex; align-items:center;}
  .nav-dd .dd-menu{position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px);
    min-width:248px; display:flex; flex-direction:column; gap:2px; padding:12px;
    background:rgba(18,20,28,.97); border:1px solid rgba(230,207,150,.22); border-radius:12px;
    box-shadow:0 18px 40px -18px rgba(0,0,0,.7); opacity:0; visibility:hidden;
    transition:opacity .18s ease, transform .18s ease; z-index:70;}
  /* Invisible bridge over the trigger→menu gap so the menu doesn't close
     mid-travel, and a wider open target overall (#192). */
  .nav-dd .dd-menu::before{content:""; position:absolute; left:-14px; right:-14px; top:-18px; height:18px;}
  .nav-dd:hover .dd-menu,.nav-dd:focus-within .dd-menu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(2px);}
  .nav-dd .dd-menu a{display:block; padding:12px 15px; border-radius:8px; font-size:15px; white-space:nowrap; color:#F3E9D2;}
  .nav-dd .dd-menu a:hover{background:rgba(230,207,150,.14); color:#fff;}

  /* Green quote button (far right) */
  .btn-quote{background:var(--red-base); color:#fff; border-radius:6px; text-transform:uppercase;
    letter-spacing:.06em; font-weight:700; font-size:13px; padding:14px 24px; white-space:nowrap;}
  .btn-quote:hover{background:var(--red-hover); color:#fff;}

  .menu-toggle{display:none; background:none; border:0; color:#F3E9D2; font-size:24px; cursor:pointer; margin-left:6px;}

  /* Section headings */
  .head-block{max-width:700px; margin:0 auto 52px; text-align:center;}
  .head-block h2{font-size:clamp(27px,3.4vw,42px); margin-top:12px;}
  .head-block p{color:var(--text-muted); margin-top:13px; font-size:16px;}
  .section--night .head-block p,.section--dusk .head-block p{color:#C9BCA1;}

  /* Cards (services / featured projects) */
  .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .card{background:var(--parch-raised); border:1px solid var(--parch-border); border-radius:18px; overflow:hidden;
    transition:transform .2s,box-shadow .2s,border-color .2s;}
  .card:hover{transform:translateY(-6px); box-shadow:0 22px 46px -24px rgba(58,39,22,.5); border-color:var(--gold-base);}
  .card .thumb{height:190px; background:var(--img,none) center/cover no-repeat, var(--glow-tile); position:relative;}
  .card.s-red .thumb{background-position:center top;}  /* show the full roofline, not center-cropped (#9) */
  .card .thumb::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(35,26,19,.35));}
  .card .body{padding:26px 26px 30px;}
  .card .ic{width:42px; height:42px; border-radius:11px; display:grid; place-items:center; margin:-44px 0 14px;
    position:relative; z-index:2; background:var(--green-base); color:#fff; box-shadow:0 8px 20px -8px rgba(0,0,0,.5);}
  .card.s-red .ic{background:var(--red-base);} .card.s-gold .ic{background:var(--gold-hover);}
  .card h3{font-size:23px; margin-bottom:10px;}
  .card .body p{color:var(--text-muted); font-size:15px;}
  .card .more{display:inline-flex; gap:6px; margin-top:18px; color:var(--red-base); font-weight:600; font-size:14.5px;}
  .card:hover .more{gap:11px;}

  /* Credibility bar */
  .credbar{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; max-width:900px; margin:54px auto 0; align-items:start;}
  .cred{text-align:center;} .cred b{font-family:"DM Serif Display"; font-size:34px; font-weight:700; color:var(--gold-base); display:block;}
  .section--night .cred b{color:var(--gold-soft);}
  .cred span{font-size:15px; color:var(--text-muted); letter-spacing:.02em;}
  .section--night .cred span{color:#C9BCA1;}
  /* Reserve the rating cell's star-row height in the single-line cells so every
     label lines up on the same row. (#19/#25) */
  .cred b + span:not(.stars){display:block; margin-top:34px;}
  /* Star column: star line-box + margins + 15px = the same 34px offset, so all
     four captions sit on one line (#179/#190). */
  .cred .stars + span{display:block; margin-top:15px;}
  /* 4.9 shown as 4.9/5 gold stars: dim 5-star base with a gold overlay clipped
     to --fill (4.9/5 = 98%). (#12) */
  .cred .stars{position:relative; display:block; width:-moz-fit-content; width:fit-content;
    margin:3px auto 5px; font-size:16px; line-height:1; letter-spacing:2px; color:transparent;}
  .cred .stars i{font-style:normal; display:block;}
  .cred .stars .base{color:rgba(43,43,43,.18);}
  .cred .stars .on{position:absolute; left:0; top:0; width:var(--fill,100%);
    overflow:hidden; white-space:nowrap; color:var(--gold-base);}
  .section--night .cred .stars .base{color:rgba(255,255,255,.18);}
  .section--night .cred .stars .on{color:var(--gold-soft);}
  /* Ampersand a touch smaller than the NC/SC it joins. (#12) */
  .cred .amp{font-size:.72em; font-weight:400; color:inherit; vertical-align:.04em;}

  /* Process steps */
  .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:26px;}
  .step{position:relative; padding-top:12px;}
  .step .n{font-family:"DM Serif Display"; font-size:46px; font-weight:600; color:var(--gold-soft); line-height:1;}
  .step h3{font-size:20px; margin:12px 0 9px;}
  .step p{font-size:14.5px; color:#C9BCA1;}
  .step::before{content:""; position:absolute; top:22px; left:48px; right:-13px; height:1px;
    background:linear-gradient(90deg,var(--night-line),transparent);}
  .step:last-child::before{display:none;}

  /* Why us */
  .why{display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:start;}
  .why-list{display:grid; gap:18px; margin-top:26px;}
  .why-item{display:flex; gap:14px; align-items:flex-start;}
  .why-item .check{flex:none; width:30px; height:30px; border-radius:50%; background:var(--green-base); color:#fff;
    display:grid; place-items:center; margin-top:2px; font-size:15px;}
  .why-item h4{margin:0 0 3px; font-family:"DM Sans"; font-size:16.5px; font-weight:600;}
  .why-item p{font-size:14.5px; color:var(--text-muted);}
  .why-card{background:var(--green-base); color:#EAF4ED; border-radius:22px; padding:42px 38px; position:relative; overflow:hidden;
    margin-top:0;}  /* top-align with the left column's text; moved up (#20, supersedes #15) */
  .why-card::after{content:""; position:absolute; width:240px; height:240px; right:-70px; top:-70px; border-radius:50%;
    background:radial-gradient(circle,rgba(230,207,150,.28),transparent 70%);}
  .why-card .big{font-family:"DM Serif Display"; font-size:54px; font-weight:700; color:var(--gold-soft); line-height:1; display:flex; align-items:center; gap:12px;}
  .why-card .big .rate-stars{font-size:28px; color:var(--gold-soft); letter-spacing:2px; line-height:1;}  /* 5-star rating (#41) */
  .why-card h3{color:#fff; font-size:26px; margin:14px 0 12px;}
  .why-card p{color:#CFE3D5; font-size:15px;} .why-card .btn{margin-top:24px;}

  /* Gallery */
  .gal{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:155px; gap:14px;}
  .gal a{position:relative; border-radius:14px; overflow:hidden; background:var(--img,none) center/cover no-repeat, var(--glow-tile);
    box-shadow:inset 0 0 0 1px rgba(230,207,150,.12);}
  .gal a::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(13,15,22,.5)); transition:opacity .25s;}
  .gal a:hover::after{opacity:.25;}
  .gal .tall{grid-row:span 2;} .gal .wide{grid-column:span 2;}

  /* Reviews */
  .reviews{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .review{background:var(--parch-raised); border:1px solid var(--parch-border); border-radius:16px; padding:30px 28px;}
  .stars{color:var(--gold-base); letter-spacing:3px; font-size:15px;}
  .review p{margin:14px 0 18px; font-size:15px; color:#4a3d2c;}
  .review .who{display:flex; align-items:center; gap:12px;}
  .review .av{width:40px; height:40px; border-radius:50%; background:var(--green-100); color:var(--green-base);
    display:grid; place-items:center; font-weight:600; font-family:"DM Serif Display";}
  .review .who b{font-size:15px;} .review .who small{display:block; color:var(--text-muted); font-size:12.5px;}

  /* Pills (service areas / tag rows) */
  .pills{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:840px; margin:26px auto 0;}
  .pill{border:1px solid var(--parch-border); background:#fff; border-radius:999px; padding:8px 16px; font-size:13.5px; color:#5b5240;}

  /* Footer with roofline crown */
  .roof-crown{position:relative; height:120px; background:#0F1016;}
  .roof-crown svg{position:absolute; bottom:-1px; left:0; width:100%; height:120px;}
  .roof-fill{fill:#0c0d14;} .roof-dot{fill:#FFE7B0; filter:drop-shadow(0 0 4px rgba(255,221,150,.9));}
  footer{background:#0F1016; color:#C7BBA3; padding:10px 0 34px; font-size:14px;}
  /* Top row: brand + contact · two link columns · newsletter signup */
  .foot-cols{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.5fr; gap:40px; padding-top:24px;}
  .foot-cols h5,.foot-news-title{font-size:12px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--gold-soft); margin:0 0 16px; font-family:inherit; font-weight:600;}
  .foot-brand .brand-logo{height:54px; width:auto;}
  .foot-tagline{margin-top:16px; max-width:320px; color:#9c917c; font-size:13.5px; line-height:1.6;}
  .foot-contact{margin-top:16px; color:#9c917c; font-size:13.5px; line-height:1.85;}
  .foot-contact a{color:#C7BBA3;} .foot-contact a:hover{color:var(--gold-soft);}
  .foot-links{list-style:none; margin:0; padding:0;}
  .foot-links a{display:block; color:#C7BBA3; padding:5px 0;} .foot-links a:hover{color:#fff;}
  /* Newsletter signup (visual — needs backend wiring) */
  .foot-news-lead{color:#9c917c; font-size:13.5px; line-height:1.6; margin:0 0 18px; max-width:320px;}
  .foot-news-form{display:flex; align-items:stretch; max-width:340px;
    border:1px solid rgba(230,207,150,.25); border-radius:10px; overflow:hidden; background:rgba(255,255,255,.04);}
  .foot-news-form:focus-within{border-color:var(--gold-soft);}
  .foot-news-input{flex:1; min-width:0; background:transparent; border:0; padding:12px 14px;
    color:#F3E9D2; font:inherit; font-size:13.5px;}
  .foot-news-input::placeholder{color:#7d745f;} .foot-news-input:focus{outline:none;}
  .foot-news-btn{flex:none; border:0; cursor:pointer; background:var(--gold-base); color:#3A2A0C;
    font-weight:700; font-size:12px; letter-spacing:.07em; text-transform:uppercase; padding:0 20px;
    transition:background .18s,color .18s;}
  .foot-news-btn:hover{background:var(--gold-hover); color:#fff3de;}
  .vh{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;}
  /* Divider + bottom bar: social left, copyright/legal right */
  .foot-rule{border:0; height:1px; background:rgba(230,207,150,.14); margin:44px 0 24px;}
  .foot-bar{display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap;}
  .foot-social{list-style:none; display:flex; gap:10px; margin:0; padding:0;}
  .foot-social a{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
    border-radius:50%; border:1px solid rgba(230,207,150,.22); color:#C7BBA3;
    transition:color .18s,background .18s,border-color .18s;}
  .foot-social a:hover{color:#14161E; background:var(--gold-soft); border-color:var(--gold-soft);}
  .foot-social svg{width:16px; height:16px;}
  .foot-legal{display:flex; align-items:center; gap:18px; flex-wrap:wrap; color:#8c8270; font-size:12.5px;}
  .foot-legal-links{display:flex; gap:18px;}
  .foot-legal-links a{color:#8c8270;} .foot-legal-links a:hover{color:#fff;}
  /* Footer scale-up: full-width container, 2x logo, 16px-minimum fonts
     (sizes scaled x4/3 from the base footer styles above; hierarchy preserved). */
  footer .wrap{max-width:none; padding-inline:clamp(24px,4vw,72px);}
  footer{font-size:18.7px; padding-bottom:44px;}
  .foot-cols{gap:52px; padding-top:32px;}
  .foot-cols h5,.foot-news-title{font-size:16px; margin-bottom:22px;}
  .foot-brand .brand-logo{height:108px;}
  .foot-tagline,.foot-contact,.foot-news-lead{font-size:18px;}
  .foot-tagline{max-width:380px;} .foot-news-lead{max-width:380px;}
  .foot-links a{font-size:18.7px; padding:7px 0;}
  .foot-news-form{max-width:430px;} .foot-news-input{font-size:18px; padding:15px 18px;}
  .foot-news-btn{font-size:16px; padding:0 24px;}
  .foot-legal{font-size:16.7px;}
  .foot-rule{margin:52px 0 30px;}
  .foot-social a{width:42px; height:42px;} .foot-social svg{width:20px; height:20px;}

  #snow{position:fixed; inset:0; z-index:55; pointer-events:none;}

  @media(max-width:980px){
    .nav-links,.nav-cta{display:none;} .menu-toggle{display:block;}
    /* Hamburger era: the mobile menu carries Request a Quote, so the header
       keeps only the centered logo + toggle. header-scoped so per-page .btn
       re-declarations (loaded later) can't resurrect it. */
    header .nav .btn-quote{display:none;}
    /* #263/#265 — taller mobile bar so the logo clears the top edge and the
     * hero gets breathing room below it (--hdr-h is bumped to match). */
    .nav{height:78px; padding-top:6px;} .brand-logo{height:48px;} header.is-scrolled .brand-logo{height:42px;}
    .cards,.steps,.reviews,.gal{grid-template-columns:1fr 1fr;}
    .why{grid-template-columns:1fr; gap:34px;} .why-card{margin-top:0;} .foot-cols{grid-template-columns:1fr 1fr;}
    .credbar{grid-template-columns:1fr 1fr;} .step::before{display:none;} .section{padding:68px 0;}
  }
  @media(max-width:560px){
    .btn-quote{display:none;}
    .cards,.steps,.reviews,.gal,.foot-cols{grid-template-columns:1fr;}
    /* #214 — stat bar stays 2-up on phones instead of a long single stack */
    .credbar{grid-template-columns:1fr 1fr; gap:26px 14px;}
    .gal .wide{grid-column:span 1;} .foot-bar{flex-direction:column; align-items:flex-start;}
  }
  @media(prefers-reduced-motion:reduce){.bulb,.vbulb{animation:none!important;} html{scroll-behavior:auto;}}

/* ===== Sitewide consistency fixes (2026-07-01) ===================================
   Header width: page-level .wrap (max-width:1180) loads after global.css and was
   shrinking the sticky nav on inner pages. header .nav (0,1,1) beats any .wrap so
   the header matches the homepage (1680) on every page.
   Section seams: WP adds a 24px block-gap between the full-bleed <section> blocks in
   post-content, exposing the dark body background between cream sections. Zero it so
   section backgrounds meet seamlessly (the homepage already did this via .home). */
header .nav{max-width:1680px; padding-inline:clamp(22px,3vw,56px);}
.entry-content > section,
.wp-site-blocks > section{margin-top:0;}
.wp-block-post-content > .hero, .wp-block-post-content > .confirm{margin-block-start:0;}
/* WP's block gap also puts 24px margin on the post-content wrapper itself,
 * which collapses to page top and shows a black band above hero/confirm
 * sections (visible on the thank-you pages). */
.wp-block-post-content:has(> .hero:first-child), .wp-block-post-content:has(> .confirm:first-child){margin-block-start:0;}
/* ===== Footer redesign (#55–58): centered brand (logo+address+social), badges,
   single italic tagline line at the bottom, social moved out of the legal bar. ===== */
.foot-brand{display:flex; flex-direction:column; align-items:center; text-align:center;}
.foot-contact{margin-top:14px;}
.foot-brand .foot-social{margin-top:18px; justify-content:center;}
.foot-badges{display:flex; flex-wrap:wrap; gap:12px; margin-top:22px;}
.foot-badges img{height:clamp(46px,4vw,58px); width:auto; background:#fff; border-radius:9px; padding:7px 11px; box-shadow:0 3px 14px rgba(0,0,0,.28);}
.foot-tagline-line{margin:0 auto 26px; max-width:960px; text-align:center; font-style:italic; color:#9c917c; font-size:clamp(13.5px,1.35vw,18px); line-height:1.6;}
.foot-bar{justify-content:center;}

/* ===== #64 GREEN MOCKUP — preview for Dan. To revert: remove this block and
   restore the header/footer logo to cl-logo-gold.png. Green = commercial-section green. */
.cta-badge{background:var(--green-base);}
.cta-icon{background:var(--green-base);}
.btn-quote{background:var(--green-base);}
.btn-quote:hover{background:#16643a;}

/* ── Mobile menu panel (#114) + sticky mobile CTA bar (#159) ─────────── */
.mobile-menu{position:fixed; top:0; left:0; right:0; z-index:80; overflow-y:auto;
  background:linear-gradient(180deg,#181B24,#14161E);
  /* #258 (r2) dvh tracks the visible viewport on iOS. (r6) NO bottom:0 — a
   * fixed element with top+bottom+height stretches to the LAYOUT viewport
   * (under the browser toolbar) and height:100dvh gets ignored, which pushed
   * the bottom CTA border under Safari's bar. top + height:100dvh alone keeps
   * the panel exactly the visible viewport tall. */
  height:100dvh;
  padding:104px 28px 0; /* bottom tail lives in the ::after spacer */
  display:flex; flex-direction:column; gap:4px;}
.mobile-menu[hidden]{display:none;}
/* #258 round 3 — iOS Safari doesn't count a scroll container's bottom PADDING
 * in the scrollable area, so the call button's bottom edge clipped at the end
 * of the scroll. A real flex-item spacer is always counted. */
.mobile-menu::after{content:""; flex:0 0 calc(40px + env(safe-area-inset-bottom));}
.mobile-menu a{display:block; padding:13px 2px; font-family:"DM Serif Display",Georgia,serif;
  font-size:24px; color:#F6EFDD; border-bottom:1px solid rgba(230,207,150,.14);}
.mobile-menu a:active{color:var(--gold-soft);}
.mobile-menu .mm-group{display:block; margin-top:10px; padding:13px 2px 4px; font-size:12px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft);}
.mobile-menu .mm-sub{font-size:19px; padding-left:14px;}
/* #258 round 6 — a MODERATE fixed gap below the last link (not margin-top:auto,
 * which soaked up all the slack and left a huge void + shoved the bottom CTA
 * under the browser bar). Both buttons sit just below the links, fully visible,
 * with the ::after spacer guaranteeing the bottom border clears the chrome. */
.mobile-menu .mm-cta{display:grid; gap:12px; margin-top:32px;}
.mobile-menu .mm-cta .btn{justify-content:center; font-size:16px; padding:15px 22px; border-bottom:0;}
.mobile-menu .mm-cta .btn-quote{border-radius:999px; font-family:"DM Sans",system-ui,sans-serif;}
.mobile-menu .mm-cta .btn-ghost{font-family:"DM Sans",system-ui,sans-serif;}
/* #258 rounds 4-5 — gently tighten the rhythm on phone-height screens so the
 * link list + pinned CTAs fit without scrolling ("squashed" was the round-4
 * overshoot: keep links comfortable, let margin-top:auto fill the slack).
 * Must stay BELOW the base .mobile-menu rules: same specificity, source
 * order decides. */
/* threshold at 860 (not 820) so a full-screen notched iPhone — 852pt tall with
 * the Safari toolbars hidden — also gets the gentle compression and the bottom
 * CTA clears the home indicator without scrolling (#258 r6). */
@media(max-height:860px){
  .mobile-menu{padding-top:80px; gap:2px;}
  .mobile-menu a{font-size:20px; padding:9px 2px;}
  .mobile-menu .mm-group{margin-top:6px; padding:9px 2px 3px;}
  .mobile-menu .mm-sub{font-size:18px;}
  .mobile-menu .mm-cta{gap:10px; margin-top:24px;}
  .mobile-menu .mm-cta .btn{font-size:15px; padding:14px 20px;}
}
@media(max-height:680px){
  .mobile-menu{padding-top:72px; gap:0;}
  .mobile-menu a{font-size:18px; padding:7px 2px;}
  .mobile-menu .mm-group{margin-top:4px; padding:8px 2px 2px; font-size:11px;}
  .mobile-menu .mm-sub{font-size:16px;}
  .mobile-menu .mm-cta{gap:8px; margin-top:16px;}
  .mobile-menu .mm-cta .btn{font-size:14px; padding:12px 18px;}
}
body.menu-open{overflow:hidden;}
body.menu-open header{background:#14161E; z-index:82;}
body.menu-open header .nav{z-index:83;}  /* lift the bar (its .wrap is z:2) above the overlay so ✕ stays tappable */
header .menu-toggle{position:relative; z-index:81;}
/* ── Promo ribbon along the hero bottom (#203) — matches the lp-quote
 * .offer ribbon treatment (red gradient + shimmer). JS drops it into .hero;
 * pages without a hero get the flow-bar variant under the header. */
.promo-ribbon{position:absolute; left:0; right:0; bottom:0; z-index:6;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:11px 20px; overflow:hidden;
  background:linear-gradient(180deg,#C9302C,var(--red-base) 45%,#8F1616);
  color:#FFF3DE; font-weight:600; font-size:14.5px; letter-spacing:.02em;
  box-shadow:0 -10px 26px -16px rgba(0,0,0,.6);}
.promo-ribbon .spark{color:#FFE7B0;}
.promo-ribbon .pr-go{transition:transform .18s;}
.promo-ribbon:hover{color:#fff;}
.promo-ribbon:hover .pr-go{transform:translateX(4px);}
.promo-ribbon::after{content:""; position:absolute; top:0; bottom:0; width:46px;
  background:linear-gradient(105deg,transparent,rgba(255,231,176,.55),transparent);
  animation:pr-shine 3.4s ease-in-out 1s infinite;}
@keyframes pr-shine{0%{left:-60px;} 55%,100%{left:110%;}}
/* In-flow band below the hero (#261). margin-block-start:0 kills the WP
 * block-gap that painted a black bar between the hero and the ribbon (#275/#284). */
.promo-ribbon--bar{position:relative; margin-block-start:0 !important;}
@media(max-width:760px){
  .promo-ribbon{padding:11px 16px;}
  /* #284 round 2: the 6px "air" below the band read as a black line — flush now. */
}
@media(prefers-reduced-motion:reduce){.promo-ribbon::after{animation:none; display:none;}}

/* ── Promo flag pop-up (#203/#120) ─────────────────────────────────────
 * Parchment gift-tag card, slides in bottom-left after a beat. Dismissal
 * is remembered per promo in homepage.js. */
.promo-pop{position:fixed; left:20px; bottom:20px; z-index:69; max-width:330px;
  background:#FCF5E7; border:1px solid var(--gold-soft); border-radius:16px;
  padding:20px 22px 20px; box-shadow:0 24px 60px -22px rgba(0,0,0,.55), 0 0 0 5px rgba(201,154,59,.08);
  transform:translateY(18px); opacity:0; transition:transform .35s cubic-bezier(.2,.9,.3,1.2), opacity .3s ease;}
.promo-pop.is-in{transform:translateY(0); opacity:1;}
.promo-pop .pp-flag{display:inline-block; background:var(--red-base); color:#fff; font-size:11px;
  font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:4px 11px;
  border-radius:999px; margin-bottom:10px;
  background-image:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  background-size:220% 100%; animation:pp-shimmer 3.2s ease-in-out infinite;}
@keyframes pp-shimmer{0%,60%{background-position:130% 0;}100%{background-position:-70% 0;}}
.promo-pop .pp-title{font-family:"DM Serif Display",Georgia,serif; font-size:19px; line-height:1.25;
  color:var(--head-brown); margin:0 18px 12px 0;}
.promo-pop .pp-cta{display:inline-flex; align-items:center; gap:7px; background:var(--gold-base);
  color:#3A2A0C; font-weight:600; font-size:13.5px; padding:9px 18px; border-radius:999px;
  transition:background .18s,color .18s;}
.promo-pop .pp-cta:hover{background:var(--gold-hover); color:#fff3de;}
.promo-pop .pp-x{position:absolute; top:9px; right:11px; background:none; border:0; cursor:pointer;
  color:#9c917c; font-size:15px; line-height:1; padding:5px;}
.promo-pop .pp-x:hover{color:var(--head-brown);}
@media(prefers-reduced-motion:reduce){.promo-pop{transition:none;} .promo-pop .pp-flag{animation:none;}}
@media(max-width:760px){
  /* sit above the sticky call/quote bar */
  .promo-pop{left:12px; right:12px; max-width:none; bottom:108px;}
}

.mcta{position:fixed; left:0; right:0; bottom:0; z-index:70; display:none; gap:10px; padding:10px 14px;
  background:rgba(13,15,22,.92); border-top:1px solid rgba(230,207,150,.22); backdrop-filter:blur(8px);
  transform:translateY(110%); transition:transform .25s ease;}
.mcta.is-visible{transform:translateY(0);}
.mcta a{flex:1; text-align:center; justify-content:center;}
.mcta .btn{padding:13px 18px;}
/* #177 — header-green capsules; #234 — phone number shown again, one line */
.mcta .mcta-quote{background:var(--green-base); color:#fff; border-radius:999px; flex:1.3;}
.mcta .mcta-quote:hover{background:#16643a; color:#fff;}
.mcta .mcta-call{background:transparent; color:#F3E9D2; border:1.5px solid var(--green-base); border-radius:999px; flex:1;
  padding:13px 8px; gap:7px; font-size:14px; white-space:nowrap;}
.mcta .mcta-call svg{flex:none; color:var(--green-soft,#7FCF9A);}
@media(max-width:760px){
  .mcta{display:flex;}
  body.has-mcta{padding-bottom:0;}
}
@media(max-width:359px){ /* #234 — number stays on one line on the narrowest phones */
  .mcta{gap:7px; padding:10px 10px;}
  .mcta .btn{padding:12px 10px; font-size:13.5px;}
  .mcta .mcta-call{font-size:13px; gap:5px;}
}

/* Green CTA (commercial) — promoted from service.css so every page can use it */
.btn-green{background:var(--green-btn,#1C7A3D); color:#fff;}
.btn-green:hover{background:var(--green-btn-hover,#166431); color:#fff;}

/* newsletter feedback line */
.foot-news-msg{margin-top:10px; font-size:13.5px; color:var(--gold-soft);}

/* ── Consistency guards (sitewide audit 2026-07-10) ────────────────────
   Eyebrows are <p class="eyebrow">; container rules like `.head-block p`
   and `.final p` out-specific `.eyebrow` and inflate them to 16-16.5px.
   These 0-2-0 selectors pin every eyebrow to the standard size. */
.head-block .eyebrow, .final .eyebrow, .section .eyebrow, .hero .eyebrow{font-size:13.5px; letter-spacing:.2em;}

/* hero-simple promoted from page sheets so every centered hero (incl. the
   service-areas index) gets the same alignment and rhythm */
.hero.hero-simple{position:relative; text-align:center; padding:clamp(48px,5.5vw,74px) 0 clamp(42px,5vw,64px);}  /* 0-2-0: beats per-page `.hero{padding:0}` */
/* 0-3-0 so per-page `.hero .lede` margins (later sheets) can't left-pin it */
.hero.hero-simple .lede{margin-left:auto; margin-right:auto;}

/* ── Gallery lightbox (#277) ─────────────────────────────────────────── */
.lbx{position:fixed; inset:0; z-index:120; background:rgba(10,12,18,.9); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:34px; animation:lbx-in .18s ease;}
.lbx-img{max-width:min(1200px,94vw); max-height:88vh; border-radius:12px;
  cursor:zoom-out; /* #289 — the enlarged photo itself clicks closed */
  box-shadow:0 30px 90px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(230,207,150,.22);}
.lbx-x{position:absolute; top:18px; right:20px; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(230,207,150,.4); background:rgba(20,22,30,.7); color:#F3E9D2;
  font-size:18px; cursor:pointer; display:grid; place-items:center;}
.lbx-x:hover{border-color:var(--gold-soft); color:#fff;}
@keyframes lbx-in{from{opacity:0;}to{opacity:1;}}
@media(prefers-reduced-motion:reduce){.lbx{animation:none;}}
/* Tiles that open the lightbox read as zoomable */
.gal a{cursor:zoom-in;}