/* homepage.css — ported from cbcl-homepage-v3-snow.html mockup. Hand-authored; not generated by apply-brand. */
  :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;
    /* 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:92px 0; position:relative;}

  /* 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 */
  .garland{display:flex; justify-content:center; gap:clamp(20px,4vw,54px); align-items:flex-start;
    position:relative; height:32px; overflow:hidden;}
  .garland::before{content:""; position:absolute; top:5px; left:-2%; right:-2%; height:2px;
    background:linear-gradient(90deg,transparent,var(--night-line) 8%,var(--night-line) 92%,transparent);}
  .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;}}

  /* Vertical garland framing the page (desktop) */
  .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;}}
  @media(min-width:1240px){.vstrand{display:block;}}

  /* Header — centered logo, split nav, phone CTA, green quote button.
     (Mirrors global.css; homepage.css loads after it on the front page.) */
  header{position:fixed; top:0; left:0; right:0; z-index:60; background:transparent; border-bottom:0;}
  body{padding-top:var(--hdr-h,110px);}  /* garland hugs the header bottom */
  /* front page: garland sits between header and hero, so no hero tuck here */
  .hero::before{content:none;}
  .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;}

  .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;}

  .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;}

  .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;}

  .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:212px; display:flex; flex-direction:column; gap:2px; padding:10px;
    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;}
  .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:9px 12px; border-radius:8px; font-size:14px; white-space:nowrap; color:#F3E9D2;}
  .nav-dd .dd-menu a:hover{background:rgba(230,207,150,.14); color:#fff;}

  .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;}

  /* Hero */
  /* Pull the hero up under the transparent header + lights so its photo fills
     the whole top with no dark band. Pull = header height (96) + garland (32).
     Selector specificity must beat WP's :root :where(.is-layout-flow) > :first-child. */
  .home .entry-content{margin-top:0;}
  .hero{position:relative; overflow:hidden; padding:196px 0 0; color:#F6EFDD;}
  .home .entry-content > .hero{margin-top:-174px;}
  /* WP's flow layout adds a 24px top margin to non-first children; on the
     absolutely-positioned hero layers that leaves a gradient-only strip at the
     very top (visible behind the transparent header). Zero it so the photo
     covers the full hero. */
  .hero .hero-bg, .hero .hero-photo, .hero .hero-veil{margin:0;}
  /* WP's flow layout adds a 24px top margin between every top-level block, which
     exposes the dark body background as bands between sections. Zero them so the
     sections sit flush — each .section's own 92px padding handles the spacing.
     (The hero keeps its negative pull-up via the more specific rule above.)
     Specificity (0,2,0) beats :root :where(.is-layout-flow) > * (0,1,0). */
  .home .entry-content > *{margin-top:0;}
  /* The warm section's top vignette is meant to soften a dark→cream transition;
     when two cream sections meet it just adds a faint shadow, so hide it there. */
  .section--warm + .section--warm::before{display:none;}
  .hero-bg{position:absolute; inset:0;
    background:radial-gradient(1100px 560px at 50% -10%,rgba(201,154,59,.22),transparent 60%),
      radial-gradient(760px 520px at 80% 20%,rgba(185,28,28,.20),transparent 62%),
      linear-gradient(180deg,#181B24,#14161E 60%,#0E1016);}
  .hero-photo{position:absolute; inset:0; background-size:cover; background-position:center 52%; opacity:.62;
    background-image:url('/wp-content/themes/ces-christmas-lights/assets/images/hero.webp');}
  .hero-veil{position:absolute; inset:0; background:linear-gradient(180deg,rgba(13,15,22,.42),rgba(13,15,22,.82));}
  .hero-inner{position:relative; z-index:3; max-width:900px; margin:0 auto; padding:40px 24px 0; text-align:center;}
  .hero h1{font-size:clamp(40px,6.4vw,76px); letter-spacing:-.01em; text-shadow:0 2px 40px rgba(0,0,0,.5);}
  .hero h1 .glow{color:var(--gold-soft); text-shadow:0 0 26px rgba(230,207,150,.55);}
  .hero .lede{font-size:clamp(18px,2.2vw,22px); color:#E7DCC6; max-width:660px; margin:22px auto 0;}
  .hero-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:32px;}
  .trust{display:flex; gap:10px 26px; justify-content:center; flex-wrap:wrap; margin-top:34px; font-size:16px; color:#CDBF9F;}  /* up from 13px — client: too small to read (#18/22/23/24/38) */
  .trust span{display:inline-flex; align-items:center; gap:8px;}
  .trust .dot{width:5px; height:5px; border-radius:50%; background:var(--gold-base);}

  /* Photo band high on page (overlaps hero bottom) */
  .photoband{position:relative; z-index:4; margin-top:54px; padding-bottom:70px;}
  .photoband .row{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:14px; max-width:1180px; margin:0 auto; padding:0 24px;}
  .photoband .ph{height:210px; border-radius:14px; background:var(--img,none) center/cover no-repeat, var(--glow-tile);
    box-shadow:0 18px 40px -20px rgba(0,0,0,.7), inset 0 0 0 1px rgba(230,207,150,.16); position:relative;}
  .photoband .ph::after{content:""; position:absolute; inset:0; border-radius:14px;
    background:linear-gradient(180deg,transparent 50%,rgba(13,15,22,.5));}
  .photoband .ph:nth-child(2),.photoband .ph:nth-child(3){margin-top:24px;}

  /* Countdown */
  .countdown{text-align:center;}
  .cd-grid{display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-top:36px;}
  .cd-cell{min-width:152px; background:rgba(255,247,230,.04); border:1px solid rgba(230,207,150,.22);
    border-radius:18px; padding:30px 26px; backdrop-filter:blur(3px);}
  .cd-num{font-family:"DM Serif Display"; font-size:clamp(56px,7.5vw,86px); font-weight:700; color:var(--gold-soft); line-height:1;
    text-shadow:0 0 24px rgba(230,207,150,.35);}
  .cd-lab{font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:#C9BCA1; margin-top:12px;}
  .cd-note{margin-top:26px; color:#D6C9AE; font-size:15px;}

  /* Section headings */
  .head-block{max-width:700px; margin:0 auto 52px; text-align:center;}
  .head-block h2{font-size:clamp(28px,3.8vw,46px); margin-top:14px;}
  .head-block p{color:var(--text-muted); margin-top:14px; font-size:17px;}
  .section--night .head-block p,.section--dusk .head-block p{color:#C9BCA1;}

  /* Services with photos */
  .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: 19px star line-box + 15px = the same 34px offset, so all
     four captions sit on one line (#179). */
  .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{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;}
  /* #183 — reviews line instead of a quote button */
  .why-card .card-link{display:inline-block; margin-top:24px; font-weight:600; font-size:15.5px;
    color:var(--gold-soft); border-bottom:1.5px solid rgba(230,207,150,.55); padding-bottom:2px;
    transition:color .18s, border-color .18s;}
  .why-card .card-link:hover{color:#fff; border-color:#fff;}

  /* Gallery */
  .gal{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:155px; gap:14px;}
  /* Tiles aren't destinations (href is the section itself) — keep the hover
     glow but a default cursor so they don't read as clickable. */
  .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); cursor:zoom-in;} /* #277 — tiles now open a lightbox */
  .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;}

  /* Service area */
  .area{text-align:center;}
  .area .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;
    transition:border-color .18s, box-shadow .18s, color .18s;}
  /* #180 — soft gold glow on hover */
  .pill:hover{border-color:var(--gold-base); color:#3A2A0C;
    box-shadow:0 0 0 4px rgba(201,154,59,.14), 0 8px 22px -10px rgba(201,154,59,.55);}

  /* Final CTA */
  .final{text-align:center; position:relative; overflow:hidden;}
  .final .glow-bg{position:absolute; inset:0;
    background:radial-gradient(720px 400px at 50% 0,rgba(201,154,59,.26),transparent 60%),
      radial-gradient(620px 380px at 50% 120%,rgba(185,28,28,.20),transparent 60%);}
  .final h2{font-size:clamp(30px,4.6vw,54px); color:#fff;}
  .final p{color:#D8CBB0; margin:18px auto 0; max-width:540px; font-size:17px;}
  .final .hero-cta{margin-top:30px;} .final .resp{margin-top:18px; font-size:15px; color:#C9BCA1;} /* #181 */

  /* 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 (mirrors global.css) */
  .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;}
  .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;}
  .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;}
    .nav{height:68px;} .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;}
    .photoband .row{grid-template-columns:1fr 1fr;} .photoband .ph:nth-child(n){margin-top:0;}
    .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,.photoband .row{grid-template-columns:1fr;}
    .credbar{grid-template-columns:1fr 1fr; gap:26px 14px;}  /* #214 — 2-up on phones */
    .gal .wide{grid-column:span 1;} .hero h1{font-size:36px;} .cd-cell{min-width:44%;}
    .foot-bar{flex-direction:column; align-items:flex-start;}
  }
  @media(prefers-reduced-motion:reduce){.bulb,.vbulb{animation:none!important;} html{scroll-behavior:auto;}}

  /* --- 2-column services (Residential + Permanent) --- */
  .cards.two{grid-template-columns:repeat(2,1fr); max-width:none;}  /* match the commercial block's full width (#7) */
  /* --- Standalone commercial feature --- */
  .cfeature{margin-top:54px; display:grid; grid-template-columns:1.02fr .98fr; background:var(--parch-raised);
    border:1px solid var(--parch-border); border-radius:18px; overflow:hidden;
    box-shadow:0 24px 60px -32px rgba(40,28,14,.45);
    transition:transform .2s, box-shadow .2s, border-color .2s;}
  /* #189 — same slight lift as the Residential/Permanent cards above */
  .cfeature:hover{transform:translateY(-6px); box-shadow:0 30px 70px -30px rgba(40,28,14,.55); border-color:var(--gold-base);}
  .cfeature-img{min-height:360px; background:var(--img,none) center/cover no-repeat, var(--glow-tile);}
  .cfeature-panel{background:linear-gradient(158deg,#0f4327 0%,#125231 38%,var(--green-base) 100%);
    color:#EAF3EC; padding:48px 46px; display:flex; flex-direction:column; justify-content:center;}
  .cfeature-panel .eyebrow{color:var(--gold-soft);}
  .cfeature-panel h2{color:#fff; font-size:clamp(26px,3vw,40px); margin:12px 0 16px;}
  .cfeature-panel p{color:#D7E6DB; font-size:15.5px; line-height:1.6;}
  .cfeature-list{list-style:none; padding:0; margin:20px 0 28px; display:grid;
    grid-template-columns:1fr 1fr; gap:11px 20px;}
  .cfeature-list li{position:relative; padding-left:24px; color:#EAF3EC; font-size:14.5px;}
  .cfeature-list li::before{content:"\2713"; position:absolute; left:0; top:0; color:var(--gold-soft); font-weight:700;}
  .cfeature-panel .btn-gold{align-self:flex-start;}
  @media(max-width:760px){
    .cfeature{grid-template-columns:1fr;}
    .cfeature-img{min-height:240px;}
    .cfeature-panel{padding:36px 28px;}
    .cd-cell{flex:1 1 40%; min-width:40%;}  /* countdown 2-up on mobile/tablet (#6) */
  }
  @media(max-width:560px){
    .cards.two{grid-template-columns:1fr; max-width:420px;}
    .cfeature-list{grid-template-columns:1fr;}
  }

/* ── Client punch-list overrides — CL Website Update PDF ───────────────── */
/* Hero: charcoal #2B2B2B grey overlay at ~75% (replaces the navy veil) */
.hero-veil{ background:linear-gradient(180deg, rgba(43,43,43,.66), rgba(43,43,43,.86)); }

@media(max-width:560px){
  /* Keep the stat bar 2-up on mobile (not single column) */
  .credbar{ grid-template-columns:1fr 1fr; }
  /* Center every section headline on mobile, including the Why block */
  .why{ text-align:center; }
  .why .why-item{ text-align:left; }       /* benefit copy stays readable */
  /* Hero trust bullets stack vertically */
  .trust{ flex-direction:column; align-items:center; gap:8px; }
  /* Tighten the gap from the photo band into the countdown (~¾ less) */
  .photoband{ padding-bottom:18px; }
}
/* ===== 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;}

/* ── Sticky mobile CTA bar (#159) ─────────────────────────────────────
 * #258 round 4: the .mobile-menu rules that used to sit here were a stale
 * DUPLICATE of the global.css block. homepage.css loads after global.css on
 * the front page, so this copy silently overrode every menu fix exactly
 * where the client tests. global.css is the single source of truth now —
 * never restate .mobile-menu rules in a page stylesheet. */
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;}
.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;}
@media(max-width:760px){
  .mcta{display:flex;}
  body.has-mcta{padding-bottom:0;}
}