/* Pensacola Christmas Lights — shared styles
   Palette + type sampled directly from the printed door hanger for cross-channel congruence. */
:root{
  /* oxblood (top half of the hanger) */
  --oxblood:#660C11;--oxblood-deep:#3E0608;--wine:#8D171C;
  /* forest (bottom half of the hanger) */
  --evergreen:#154A2A;--forest-deep:#0C2F1A;
  /* antique gold foil */
  --gold:#C5A364;--gold-bright:#E8D5A6;--gold-deep:#A8853F;
  /* holiday red for checkmarks — deep on paper, brighter on the dark bands */
  --red:#B5342C;--red-bright:#E8695C;
  /* paper */
  --cream:#F7F1E4;--paper:#FFFDF8;--ink:#2A2320;--muted:#6E6055;
  --line:rgba(232,213,166,.20);--border:#E0D3BB;--maxw:1180px;
  /* legacy aliases — kept so nothing downstream breaks */
  --midnight:#660C11;--midnight-deep:#3E0608;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:18px}
body{overflow-x:clip}
@media(max-width:520px){html{font-size:17.5px}}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--cream);
  font-size:1.06rem;line-height:1.62;-webkit-font-smoothing:antialiased;padding-bottom:68px}
@media(min-width:900px){body{padding-bottom:0}}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
@media(max-width:430px){.nav{padding-left:16px;padding-right:16px}}
@media(max-width:384px){.nav-phone{display:none}}
.narrow{max-width:780px}

/* ---- type ---------------------------------------------------------------
   Playfair Display  = the high-contrast serif from "CHRISTMAS"
   Cinzel            = the engraved letterspaced caps from "ELEVATE YOUR HOME"
   Inter             = body, matching the clean sans on the hanger's checklist   */
h1,h2,h3{font-family:'Playfair Display',Georgia,serif;font-weight:700;line-height:1.12;letter-spacing:-.005em}
h1{font-size:clamp(1.95rem,4.3vw,3.05rem)}
h2{font-size:clamp(1.72rem,3.4vw,2.65rem);margin-bottom:.55em}
h3{font-size:1.3rem;font-weight:600}
p+p{margin-top:1rem}
section{padding:76px 0}
@media(max-width:700px){section{padding:52px 0}}
.eyebrow{font-family:'Cinzel',Georgia,serif;font-size:.92rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-deep);margin-bottom:1rem}
.lede{font-size:1.32rem;line-height:1.55;color:var(--muted);max-width:62ch}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}

/* signature 1: gold hairline with a centre diamond — lifted from the hanger's dividers */
.rule{display:flex;align-items:center;gap:12px;margin:1.5rem 0;color:var(--gold)}
.rule::before,.rule::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,currentColor,transparent);opacity:.65}
.rule i{width:7px;height:7px;transform:rotate(45deg);background:currentColor;flex:none}
.center .rule{margin-left:auto;margin-right:auto;max-width:340px}

/* signature 2: the gold arc where oxblood meets forest on the hanger.
   Drawn as the PREVIOUS section's colour dipping down into this one, clipped to
   the section box — so it never leaves gaps at the corners or overflows the page.
   Set --arc-from to whatever colour sits directly above. */
.arc{position:relative;overflow:hidden;padding-top:104px}
.arc::before{content:"";position:absolute;top:-104px;left:-30%;right:-30%;height:130px;
  border-radius:0 0 50% 50%/0 0 100% 100%;background:var(--arc-from,var(--cream));
  border-bottom:2px solid var(--gold);pointer-events:none}
.arc>.wrap{position:relative;z-index:1}
@media(max-width:700px){.arc{padding-top:70px}
  .arc::before{top:-104px;height:118px;left:-60%;right:-60%}}

/* header */
header{position:sticky;top:0;z-index:60;background:rgba(62,6,8,.96);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px;gap:10px}
.brand{font-family:'Cinzel',serif;color:var(--cream);font-size:clamp(.8rem,3.1vw,1rem);font-weight:700;
  letter-spacing:.09em;text-decoration:none;white-space:nowrap;text-transform:uppercase}
@media(max-width:360px){footer .brand{white-space:normal;font-size:1rem!important;line-height:1.25}
  .foot-motto{letter-spacing:.12em;word-break:normal;overflow-wrap:anywhere}}
.brand span{color:var(--gold)}
.nav-links{display:none;gap:26px;align-items:center}
@media(min-width:1040px){.nav-links{display:flex}}
.nav-links a{color:rgba(247,241,228,.82);text-decoration:none;font-size:.98rem;font-weight:500;
  letter-spacing:.02em;white-space:nowrap}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--gold-bright)}
.nav-cta{display:none;background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:var(--oxblood-deep);
  text-decoration:none;font-weight:700;font-size:.92rem;letter-spacing:.03em;padding:14px 22px;
  border-radius:3px;white-space:nowrap}
@media(min-width:1040px){.nav-cta{display:inline-block}}
.nav-phone{color:var(--cream);text-decoration:none;font-weight:600;
  font-size:clamp(.88rem,3.4vw,1.02rem);white-space:nowrap}
@media(min-width:1040px){.nav-phone{display:none}}

/* hero — oxblood upper, warm gold bokeh, exactly as the hanger reads */
.hero{position:relative;background:var(--oxblood-deep);color:var(--cream);overflow:hidden}
.hero-sky{position:absolute;inset:0;background:
  radial-gradient(760px 300px at 78% 8%,rgba(197,163,100,.20),transparent 62%),
  radial-gradient(900px 440px at 50% 96%,rgba(197,163,100,.22),transparent 66%),
  linear-gradient(180deg,#3E0608 0%,#660C11 55%,#8D171C 100%)}
.stars{position:absolute;inset:0;opacity:.55}
.star{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--gold-bright);
  box-shadow:0 0 6px rgba(232,213,166,.9);animation:tw 4s infinite ease-in-out}
@keyframes tw{0%,100%{opacity:.12}50%{opacity:.9}}
.roofline{position:absolute;left:0;right:0;bottom:0;height:150px;pointer-events:none;z-index:1}
.roofline svg{width:100%;height:100%}
.bulb{fill:var(--gold-bright);animation:glow 3.4s infinite ease-in-out}
@keyframes glow{0%,100%{opacity:.45}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.star,.bulb{animation:none;opacity:.8}}
.hero-inner{position:relative;z-index:2;padding:58px 22px 130px}
@media(max-width:700px){.hero-inner{padding:38px 22px 110px}}
/* Mobile: headline, then the FORM, then the trust marks and phone.
   Ad traffic already knows what it clicked — don't make it scroll two screens
   past the pitch to reach a field. Desktop keeps the two-column layout.
   DOM order is unchanged, so the H1 still comes first in the source. */
.hero-split{display:grid;gap:26px;align-items:start;
  grid-template-areas:"top" "form" "bot"}
.hero-top{grid-area:top}
.hero-bot{grid-area:bot}
.hero-split .form-card{grid-area:form}
@media(min-width:940px){.hero-split{grid-template-columns:1.05fr .95fr;gap:20px 52px;
  grid-template-areas:"top form" "bot form"}}
.hero h1{color:var(--cream)}
.hero h1 em{font-style:normal;color:var(--gold-bright)}
.hero-sub{margin-top:1rem;font-size:1.22rem;color:rgba(247,241,228,.82);max-width:50ch}
.hero-trust{display:flex;flex-wrap:wrap;gap:9px 26px;margin-top:1.6rem;font-size:1.02rem;
  color:rgba(247,241,228,.86);font-family:'Cinzel',serif;letter-spacing:.14em;text-transform:uppercase}
.hero-trust span::before{content:"\25C6";color:var(--gold);margin-right:9px;font-size:.62em;vertical-align:middle}
.hero-call{display:inline-block;margin-top:1.6rem;color:var(--cream);font-family:'Playfair Display',serif;
  font-size:1.78rem;font-weight:700;text-decoration:none;
  background:var(--evergreen);border:1px solid var(--gold);border-radius:3px;padding:13px 24px 15px;
  box-shadow:0 8px 22px rgba(20,30,20,.3);
  transition:background .15s ease,border-color .15s ease,transform .15s ease}
.hero-call:hover{background:var(--forest-deep);border-color:var(--gold-bright);transform:translateY(-2px)}
.hero-call:focus-visible{outline:3px solid var(--gold-bright);outline-offset:3px}
@media(max-width:600px){.hero-call{padding:12px 20px 14px;font-size:1.62rem}}
.hero-call small{display:block;font-family:'Cinzel',serif;font-size:.82rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin-bottom:3px;font-weight:600}

/* interior page banner */
.banner{position:relative;background:var(--oxblood-deep);color:var(--cream);padding:62px 0 56px;overflow:hidden}
.banner .hero-sky{opacity:.95}
.banner .wrap{position:relative;z-index:2}
.banner h1{color:var(--cream);max-width:20ch}
.banner p{color:rgba(247,241,228,.8);margin-top:.9rem;max-width:58ch}
.crumbs{font-size:.92rem;color:rgba(247,241,228,.55);margin-bottom:1rem;letter-spacing:.04em}
.crumbs a{color:rgba(247,241,228,.72);text-decoration:none}
.crumbs a:hover{color:var(--gold-bright)}

/* buttons — gold foil on oxblood, matching the hanger's CTA block */
.btn{display:inline-block;background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  color:var(--oxblood-deep);text-decoration:none;font-weight:700;letter-spacing:.02em;
  font-size:1.1rem;padding:17px 34px;border-radius:3px;border:none;cursor:pointer;font-family:inherit;
  transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(197,163,100,.34)}
.btn:focus-visible{outline:3px solid var(--gold-bright);outline-offset:3px}
.btn-ghost{background:transparent;color:var(--cream);border:1px solid rgba(232,213,166,.45)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-bright);box-shadow:none}
.btn-row{display:flex;flex-wrap:wrap;gap:13px;margin-top:1.9rem}

/* quote form card */
.form-card{background:var(--paper);color:var(--ink);border-radius:4px;padding:30px;
  border:1px solid rgba(197,163,100,.5);box-shadow:0 20px 54px rgba(17,7,7,.42)}
@media(max-width:600px){.form-card{padding:21px}}
.form-card h2,.form-card h3{font-size:1.58rem;margin-bottom:.35em}
.form-card .sub{font-size:1.04rem;color:var(--muted);margin-bottom:1.3rem}
.field{margin-bottom:15px}
.field label{display:block;font-size:.95rem;font-weight:600;margin-bottom:6px;letter-spacing:.02em}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:1rem;padding:14px 15px;
  border:1px solid #D5C6AB;border-radius:3px;background:#fff;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold-deep);
  box-shadow:0 0 0 3px rgba(197,163,100,.24)}
.field .opt{font-weight:400;color:var(--muted);font-size:.88rem}
.form-card .btn{width:100%;font-size:1.14rem;padding:17px}
.fineprint{text-align:center;font-size:.92rem;color:var(--muted);margin-top:12px}
.formStatus{display:none;text-align:center;font-weight:600;margin-top:14px;padding:12px;border-radius:3px}
.formStatus.ok{display:block;background:#ECF2E9;color:#154A2A}
.formStatus.err{display:block;background:#F6E7E6;color:#7E2A26}

/* blocks */
.panel{background:var(--paper);border:1px solid var(--border);border-radius:4px;padding:28px}
.grid{display:grid;gap:20px}
@media(min-width:760px){.grid.g2{grid-template-columns:repeat(2,1fr)}
  .grid.g3{grid-template-columns:repeat(3,1fr)}
  .grid.g4{grid-template-columns:repeat(4,1fr)}}
.white{background:var(--paper)}
/* gold tick list — the "WE HANDLE EVERY DETAIL" panel on the hanger back */
.checklist{list-style:none;display:grid;gap:14px;margin-top:1.5rem}
@media(min-width:760px){.checklist{grid-template-columns:repeat(2,1fr);gap:14px 34px}}
.checklist li{position:relative;padding-left:32px}
.checklist li::before{content:"\2713";position:absolute;left:0;top:.25em;width:19px;height:19px;
  border:1px solid var(--red);border-radius:2px;color:var(--red);
  font-size:.74rem;line-height:17px;text-align:center;font-weight:700}


/* ---- door-hanger colour bands ------------------------------------------
   The hanger is oxblood on top, forest below, gold between. These two
   classes let any section take either field. */
.oxblood{background:var(--oxblood);color:var(--cream)}
.forest{background:var(--evergreen);color:var(--cream)}
.oxblood h2,.oxblood h3,.forest h2,.forest h3{color:var(--cream)}
.oxblood .lede,.forest .lede{color:rgba(247,241,228,.82)}
.oxblood .eyebrow,.forest .eyebrow{color:var(--gold)}
.oxblood p,.forest p{color:rgba(247,241,228,.86)}
.oxblood .checklist li,.forest .checklist li{color:rgba(247,241,228,.9)}
.oxblood .checklist li::before,.forest .checklist li::before,
.price .checklist li::before,.quote-section .checklist li::before{
  border-color:var(--red-bright);color:var(--red-bright)}
.oxblood .panel,.forest .panel{background:rgba(255,253,248,.05);
  border-color:rgba(232,213,166,.3);color:rgba(247,241,228,.88)}
.oxblood .btn-ghost,.forest .btn-ghost{color:var(--cream)}
.oxblood .step p,.forest .step p{color:rgba(247,241,228,.78)}
.oxblood .step::after,.forest .step::after{
  background:linear-gradient(90deg,rgba(232,213,166,.5),rgba(232,213,166,.05))}
.oxblood .step::before,.forest .step::before{color:var(--gold)}

/* pricing band */
.price{background:var(--oxblood);color:var(--cream)}
.price h2{color:var(--cream)}
.price .lede{color:rgba(247,241,228,.8)}
.price .eyebrow{color:var(--gold)}
.price-figure{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(2.1rem,5vw,3.3rem);
  color:var(--gold-bright);margin:1rem 0 .3rem;line-height:1}
.price-note{font-size:1.02rem;color:rgba(247,241,228,.62)}
/* the four-up gold icon row, hairline dividers and all */
.factors{display:grid;gap:12px;margin-top:2rem}
@media(min-width:760px){.factors{grid-template-columns:repeat(4,1fr);gap:0}}
.factor{padding:16px 20px;position:relative}
@media(min-width:760px){.factor+.factor::before{content:"";position:absolute;left:0;top:14%;bottom:14%;
  width:1px;background:linear-gradient(180deg,transparent,rgba(232,213,166,.42),transparent)}}
.factor strong{display:block;font-family:'Cinzel',serif;font-size:.84rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:7px;font-weight:600}
.factor span{font-size:1.02rem;color:rgba(247,241,228,.8)}

/* process steps */
.steps{counter-reset:s;display:grid;gap:24px;margin-top:2rem}
@media(min-width:760px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{counter-increment:s;position:relative;padding-top:44px}
.step::before{content:counter(s,decimal-leading-zero);position:absolute;top:0;left:0;
  font-family:'Playfair Display',serif;font-weight:700;font-size:1.65rem;color:var(--gold-deep)}
.step::after{content:"";position:absolute;top:15px;left:44px;right:0;height:1px;
  background:linear-gradient(90deg,rgba(197,163,100,.55),rgba(197,163,100,.06))}
.step h3{margin-bottom:.35rem}
.step p{font-size:1.04rem;color:var(--muted)}

/* cards */
.card{background:var(--paper);border:1px solid var(--border);border-radius:4px;padding:26px;
  text-decoration:none;color:inherit;display:block;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
a.card:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 14px 32px rgba(102,13,17,.13)}
.card h3{margin-bottom:.45rem}
.card p{font-size:1.04rem;color:var(--muted)}
.card .more{display:inline-block;margin-top:.9rem;font-size:.92rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep)}

/* image placeholders */
.shots{display:grid;gap:16px;margin-top:1.7rem}
@media(min-width:760px){.shots{grid-template-columns:repeat(3,1fr)}}
.shot{aspect-ratio:4/3;border-radius:4px;border:1px dashed var(--gold-deep);background:#F1E7D4;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;
  color:#8A7350;font-size:.96rem;font-weight:500}
.review-slot{border:1px dashed var(--gold-deep);border-radius:4px;padding:24px;background:#F1E7D4;
  color:#8A7350;font-size:1.01rem}

/* faq */
.faq details{border-bottom:1px solid var(--border);padding:20px 0}
.faq summary{font-family:'Playfair Display',serif;font-size:1.26rem;font-weight:600;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline:2px solid var(--gold-deep);outline-offset:4px}
.faq summary::after{content:"+";color:var(--gold-deep);font-family:'Inter',sans-serif;font-size:1.5rem;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin-top:11px;color:var(--muted);max-width:72ch}

/* service areas — forest band */
.areas{background:var(--forest-deep);color:var(--cream)}
.areas h2{color:var(--cream)}
.areas .lede{color:rgba(247,241,228,.8)}
.areas .eyebrow{color:var(--gold)}
.city-list{display:flex;flex-wrap:wrap;gap:9px;margin-top:1.6rem}
/* default = light background: dark text. The cream version is scoped to the
   dark bands below, otherwise it renders cream-on-white and disappears. */
.city-list a{text-decoration:none;border:1px solid var(--border);border-radius:2px;
  padding:10px 17px;font-size:.97rem;letter-spacing:.03em;color:var(--oxblood);
  background:var(--paper);font-weight:500;
  transition:border-color .12s ease,background .12s ease,color .12s ease}
.city-list a:hover{border-color:var(--gold-deep);color:var(--red);background:#FCF7EC}
.areas .city-list a,.oxblood .city-list a,.forest .city-list a,
.price .city-list a,.quote-section .city-list a{
  border-color:rgba(232,213,166,.3);color:rgba(247,241,228,.92);background:transparent}
.areas .city-list a:hover,.oxblood .city-list a:hover,.forest .city-list a:hover,
.price .city-list a:hover,.quote-section .city-list a:hover{
  border-color:var(--gold);color:var(--gold-bright);background:rgba(197,163,100,.1)}

/* capacity / closing note */
.capacity{background:var(--cream)}
.capacity .wrap{max-width:740px}

/* quote section */
.quote-section{background:var(--oxblood-deep);color:var(--cream)}
.quote-section h2{color:var(--cream)}
.quote-section .lede{color:rgba(247,241,228,.8)}
.quote-section .eyebrow{color:var(--gold)}
.quote-grid{display:grid;gap:30px;align-items:start;margin-top:2rem}
@media(min-width:940px){.quote-grid{grid-template-columns:1fr 1fr;gap:48px}}

/* footer */
footer{background:var(--forest-deep);color:rgba(247,241,228,.75);padding:58px 0 30px;font-size:1rem}
.foot-grid{display:grid;gap:30px}
@media(min-width:760px){.foot-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
footer h4{font-family:'Cinzel',serif;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px;font-weight:600}
footer a{color:rgba(247,241,228,.72);text-decoration:none;display:block;margin-bottom:8px}
footer a:hover{color:var(--gold-bright)}
.foot-bottom{border-top:1px solid var(--line);margin-top:36px;padding-top:18px;font-size:.9rem;
  color:rgba(247,241,228,.48);display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
/* the hanger's closing line */
.foot-motto{font-family:'Cinzel',serif;letter-spacing:.18em;text-transform:uppercase;font-size:.86rem;
  color:var(--gold);margin-top:10px;font-weight:600}

/* sticky mobile bar */
.sticky{position:fixed;bottom:0;left:0;right:0;z-index:70;display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid rgba(197,163,100,.4)}
@media(min-width:900px){.sticky{display:none}}
.sticky a{text-align:center;padding:20px 8px;text-decoration:none;font-weight:700;font-size:1.1rem;letter-spacing:.02em}
.sticky .s-quote{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:var(--oxblood-deep)}
.sticky .s-call{background:var(--oxblood);color:var(--cream)}

/* ---- design-preference choice ------------------------------------------ */
.choice{border:0;padding:0;margin-bottom:15px}
.choice legend{font-size:.95rem;font-weight:600;margin-bottom:8px;padding:0;letter-spacing:.02em}
.choice .opt-card{display:flex;align-items:center;gap:12px;padding:13px 15px;margin-bottom:8px;
  border:1px solid #D5C6AB;border-radius:3px;background:#fff;cursor:pointer;
  font-size:1.05rem;line-height:1.35;font-weight:500;margin-bottom:8px;
  transition:border-color .12s ease,background .12s ease}
.choice .opt-card:last-child{margin-bottom:0}
.choice .opt-card input{appearance:none;-webkit-appearance:none;flex:none;width:19px;height:19px;margin:0 2px 0 0;
  border:1px solid var(--gold-deep);border-radius:50%;background:#fff;cursor:pointer;position:relative}
.choice .opt-card input::after{content:"";position:absolute;inset:4px;border-radius:50%;
  background:var(--gold-deep);transform:scale(0);transition:transform .12s ease}
.choice .opt-card input:checked::after{transform:scale(1)}
.choice .opt-card span{margin:0;font-size:1.05rem;font-weight:500;letter-spacing:0}
.choice .opt-card:has(input:checked){border-color:var(--gold-deep);background:#FCF7EC}
.choice .opt-card input:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}

/* ---- keep light cards readable inside dark bands ------------------------
   .quote-section/.price/.oxblood/.forest set cream text for their own copy;
   without this the form card's own heading and helper text inherited cream
   and went nearly invisible on the near-white card. */
.form-card p,.form-card label,
.form-card legend,.form-card li,.form-card strong{color:var(--ink)}
/* form heading picks up the hanger's forest green */
.form-card h2,.form-card h3{color:var(--evergreen)}
.form-card .sub,.form-card .fineprint,.form-card .opt{color:var(--muted)}
.form-card .formStatus.ok{color:var(--evergreen)}
.form-card .formStatus.err{color:#7E2A26}

/* ---- service / feature titles in brand oxblood --------------------------
   Green is doing the conversion job (form headings), so content titles take
   the hanger's red field. The dark-band overrides below must stay LAST so
   panels sitting on oxblood or forest keep their cream text. */
.panel h3,.card h3,.step h3{color:var(--oxblood)}
.oxblood .panel h3,.forest .panel h3,.price .panel h3,.quote-section .panel h3,
.oxblood .card h3,.forest .card h3,
.oxblood .step h3,.forest .step h3{color:var(--cream)}

/* ---- proof carousel ----------------------------------------------------- */
.gallery{background:var(--cream)}
.carousel{margin-top:2rem;position:relative;max-width:940px}
.carousel-frame{position:relative;overflow:hidden;border-radius:4px;
  border:1px solid rgba(197,163,100,.55);background:var(--oxblood-deep);
  box-shadow:0 18px 44px rgba(62,6,8,.22)}
.carousel-track{display:flex;transition:transform .45s cubic-bezier(.4,.02,.2,1);will-change:transform}
@media(prefers-reduced-motion:reduce){.carousel-track{transition:none}}
.carousel-track .slide{flex:0 0 100%;margin:0;min-width:0}
.carousel-track .slide img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:center;display:block}
@media(max-width:760px){.carousel-track .slide img{aspect-ratio:4/3}}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:54px;height:54px;border-radius:50%;border:1px solid rgba(232,213,166,.55);
  background:rgba(62,6,8,.82);color:var(--gold-bright);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
  transition:background .15s ease,transform .15s ease}
.carousel-btn svg{width:26px;height:26px}
.carousel-btn:hover{background:var(--oxblood);transform:translateY(-50%) scale(1.06)}
.carousel-btn:focus-visible{outline:3px solid var(--gold-bright);outline-offset:3px}
.carousel-btn.prev{left:14px}
.carousel-btn.next{right:14px}
@media(max-width:600px){.carousel-btn{width:46px;height:46px}
  .carousel-btn.prev{left:8px}.carousel-btn.next{right:8px}}
.carousel-foot{display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-top:14px;flex-wrap:wrap}
.dots{display:flex;gap:9px;flex-wrap:wrap}
.dots button{width:10px;height:10px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--gold-deep);background:transparent;transition:background .15s ease}
.dots button[aria-current="true"]{background:var(--gold-deep)}
.dots button:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
.counter{font-family:'Cinzel',serif;font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}

/* real photos now live in the .shot frames */
.shot{padding:0;border:1px solid rgba(197,163,100,.5);background:var(--oxblood-deep);overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover;display:block}

/* the quote block runs in a narrow column, so its lead copy can go up a step */
.quote-section .lede{font-size:1.4rem;line-height:1.5}
@media(max-width:700px){.quote-section .lede{font-size:1.28rem}}

/* ---- post-submission thank-you state ------------------------------------ */
.thanks{text-align:center;padding:8px 4px 4px}
.thanks-mark{width:56px;height:56px;margin:0 auto 16px;border-radius:50%;
  background:var(--evergreen);color:var(--gold-bright);font-size:1.7rem;line-height:56px;font-weight:700}
.thanks h3{color:var(--evergreen);font-size:1.5rem;margin-bottom:.5rem}
.thanks-lead{color:var(--ink);font-size:1.05rem;margin-bottom:1.5rem}
.thanks-h{font-family:'Cinzel',serif;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:600;margin-bottom:.8rem}
.thanks-steps{counter-reset:tk;list-style:none;text-align:left;max-width:34ch;margin:0 auto 1.6rem;padding:0}
.thanks-steps li{counter-increment:tk;position:relative;padding-left:34px;margin-bottom:12px;
  font-size:1rem;color:var(--ink);line-height:1.45}
.thanks-steps li::before{content:counter(tk);position:absolute;left:0;top:1px;
  width:23px;height:23px;border-radius:50%;background:var(--red);color:#fff;
  font-size:.82rem;line-height:23px;text-align:center;font-weight:700}
.thanks-call{font-size:.98rem;color:var(--muted)}
.thanks .hero-call{margin-top:.7rem;font-size:1.5rem}

/* required-field marker */
.req{color:var(--red);font-weight:700;margin-left:1px}
.form-card .req{color:var(--red)}
.req-note{font-size:.88rem;color:var(--muted);margin:-4px 0 14px}
.req-note .req{color:var(--red)}

/* =========================================================================
   LIVELINESS LAYER
   The door-hanger palette is unchanged — oxblood, forest, antique gold, cream.
   What changes is luminosity: real photography behind the brand scrim, bulbs
   that actually bloom, warm light pooling into the dark bands, and motion.
   A lighting company's site should look lit.
   ========================================================================= */

/* ---- hero + banner photography -----------------------------------------
   The strongest asset on this site is a photograph of a finished install at
   dusk. It used to sit four screens down inside a carousel. Now it is the
   ground the headline stands on, with the oxblood scrim laid over the top so
   the page still reads as the printed hanger. */
.hero,
.banner{
  background-color:var(--oxblood-deep);
  background-image:image-set(url("/images/hero-pensacola-christmas-lights.webp") type("image/webp"),
                             url("/images/hero-pensacola-christmas-lights.jpg") type("image/jpeg"));
  /* the photograph spans the full width and sits on the bottom edge, so the
     whole lit house is always visible no matter how tall the hero grows.
     Brand colour fills the space above it and the scrim blends the seam. */
  background-size:100% auto;
  background-position:center bottom;
  background-repeat:no-repeat;
}
.banner{
  background-image:image-set(url("/images/banner-pensacola-christmas-lights.webp") type("image/webp"),
                             url("/images/banner-pensacola-christmas-lights.jpg") type("image/jpeg"));
  background-size:cover;
  background-position:center 62%;
}
@media(max-width:940px){
  /* A phone hero runs past 2000px tall once the form is in it, so covering the
     whole thing would zoom the photo to mush. Instead the photograph is a band
     across the top — behind the headline, above the form — and the scrim fades
     it into the brand colour before the fields begin. */
  .hero{background-image:none}
  .hero::before{content:"";position:absolute;top:0;left:0;right:0;height:min(58vh,540px);
    background-image:image-set(url("/images/hero-pensacola-christmas-lights-sm.webp") type("image/webp"),
                               url("/images/hero-pensacola-christmas-lights-sm.jpg") type("image/jpeg"));
    background-size:cover;background-position:center 62%;background-repeat:no-repeat}
  .banner{background-image:image-set(url("/images/banner-pensacola-christmas-lights-sm.webp") type("image/webp"),
                                     url("/images/banner-pensacola-christmas-lights-sm.jpg") type("image/jpeg"))}
}

/* The scrim is directional: heavy where the words are, thin where the house
   is, so the photograph survives instead of being flattened to a colour. */
.hero .hero-sky{
  background:
    radial-gradient(680px 300px at 76% 14%,rgba(197,163,100,.20),transparent 64%),
    radial-gradient(900px 400px at 46% 100%,rgba(141,24,29,.55),transparent 68%),
    linear-gradient(180deg,rgba(59,8,10,.97) 0%,rgba(69,9,12,.90) 30%,rgba(87,11,15,.44) 55%,rgba(91,12,15,.14) 78%,rgba(74,9,13,.60) 100%),
    linear-gradient(96deg,rgba(54,7,9,.72) 0%,rgba(64,8,11,.30) 46%,transparent 70%);
}
.banner .hero-sky{
  opacity:1;
  background:
    radial-gradient(700px 260px at 78% 6%,rgba(197,163,100,.17),transparent 64%),
    linear-gradient(101deg,rgba(54,7,9,.95) 0%,rgba(87,11,15,.90) 42%,rgba(116,15,20,.74) 74%,rgba(102,13,17,.60) 100%),
    linear-gradient(180deg,rgba(54,7,9,.66) 0%,rgba(64,8,11,.42) 45%,rgba(77,10,13,.80) 100%);
}
/* On narrow screens the copy and the form span the full width, so the scrim
   has to cover the whole frame rather than just the left of it. */
@media(max-width:940px){
  .hero .hero-sky{
    background:
      linear-gradient(180deg,rgba(49,6,8,.88) 0,rgba(54,7,9,.72) 190px,
                      rgba(59,8,10,.78) 340px,rgba(79,10,13,.93) 470px,#3E0608 552px);
  }
  .banner .hero-sky{
    background:
      radial-gradient(620px 280px at 70% 10%,rgba(197,163,100,.16),transparent 66%),
      linear-gradient(180deg,rgba(49,6,8,.88) 0%,rgba(64,8,11,.76) 40%,rgba(94,12,16,.88) 100%);
  }
}

/* a slow drift, so the night sky is never quite still */
@media(min-width:941px){
  .hero{animation:skydrift 34s ease-in-out infinite alternate}
}
@keyframes skydrift{from{background-size:100% auto}to{background-size:106% auto}}

/* ---- bulbs that bloom ---------------------------------------------------
   A 3px flat circle does not read as a light. Each bulb now carries a soft
   halo behind it and a bloom filter over it, and they warm up in sequence
   the way a real string does. */
.roofline{height:190px}
.bulb{fill:#FFF0C9;filter:url(#bulbGlow);animation:glow 3.4s infinite ease-in-out}
.bulb-halo{fill:url(#haloGrad);animation:halo 3.4s infinite ease-in-out}
@keyframes glow{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes halo{0%,100%{opacity:.22}50%{opacity:.72}}
/* warm light pooling down off the roofline onto the section below */
.roofline::after{content:"";position:absolute;left:0;right:0;bottom:0;height:130px;
  background:linear-gradient(180deg,transparent,rgba(197,163,100,.16) 55%,rgba(197,163,100,.26));
  mix-blend-mode:screen;pointer-events:none}

.star{width:2.5px;height:2.5px;box-shadow:0 0 7px 1px rgba(232,213,166,.95),0 0 14px rgba(197,163,100,.5)}
.stars{opacity:.75}

/* ---- draped string lights ----------------------------------------------
   A hanging strand across the top of each dark band. It is the product,
   used as the divider. */
.lightstring{position:absolute;top:0;left:0;right:0;height:74px;pointer-events:none;z-index:2;
  line-height:0;overflow:hidden}
.lightstring svg{width:100%;height:74px;display:block}
.lightstring .wire{fill:none;stroke:rgba(255,240,201,.30);stroke-width:1.6}
.lightstring .lb{filter:url(#bulbGlow);animation:glow 3.8s infinite ease-in-out}
section.has-string{position:relative}
section.has-string>.wrap{padding-top:26px}
section.has-string.arc>.wrap{padding-top:0}

/* ---- warm depth on the dark bands -------------------------------------- */
.forest,.price,.areas{position:relative}
.forest::after,.price::after,.areas::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(1100px 420px at 50% -8%,rgba(197,163,100,.13),transparent 66%);}
.forest>*,.price>*,.areas>*{position:relative;z-index:1}

/* ---- cards with warmth --------------------------------------------------
   They were flat paper rectangles. Now they lift, and a gold filament runs
   across the top on hover. */
.card{transition:transform .3s cubic-bezier(.22,.7,.31,1),box-shadow .3s,border-color .3s;
  position:relative;overflow:hidden}
.card::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-bright),var(--gold),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.22,.7,.31,1)}
.card:hover::after{transform:scaleX(1)}
.card:hover{transform:translateY(-5px);border-color:var(--gold);
  box-shadow:0 16px 40px rgba(102,13,17,.16),0 0 0 1px rgba(197,163,100,.28)}

/* ---- stat band ---------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;list-style:none;margin:0}
.stat{text-align:center;padding:26px 16px;border:1px solid var(--line);border-radius:4px;
  background:rgba(255,253,248,.05)}
.stat .n{display:block;font-family:'Playfair Display',Georgia,serif;font-weight:700;line-height:1;
  font-size:clamp(2.1rem,4.2vw,3rem);color:var(--gold-bright);
  text-shadow:0 0 26px rgba(232,213,166,.4)}
.stat .l{display:block;margin-top:.7rem;font-family:'Cinzel',Georgia,serif;font-size:.82rem;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(247,241,228,.8);line-height:1.5}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ---- photo mosaic -------------------------------------------------------
   Eleven finished installs sat behind a carousel that showed one at a time.
   Four of them now land at once, above the fold of the proof section. */
.mosaic{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:repeat(2,150px);
  gap:12px;margin-bottom:1.6rem}
.mosaic figure{margin:0;position:relative;overflow:hidden;border-radius:4px;
  border:1px solid rgba(197,163,100,.28);background:var(--oxblood-deep)}
.mosaic figure:first-child{grid-row:span 2}
.mosaic img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.7,.31,1),filter .4s;filter:saturate(1.02)}
.mosaic figure:hover img{transform:scale(1.06);filter:saturate(1.12) brightness(1.06)}
@media(max-width:760px){
  .mosaic{grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,124px)}
  .mosaic figure:first-child{grid-row:span 1}
  .mosaic figure:nth-child(n+5){display:none}
}

/* ---- carousel polish ---------------------------------------------------- */
.carousel-frame{box-shadow:0 22px 60px rgba(94,12,16,.28);border:1px solid rgba(197,163,100,.3)}

/* ---- reveal on scroll --------------------------------------------------- */
.js-rv{opacity:0;transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.22,.7,.31,1),transform .7s cubic-bezier(.22,.7,.31,1)}
.js-rv.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .js-rv{opacity:1;transform:none;transition:none}
  .hero{animation:none}
  .bulb,.bulb-halo,.lightstring .lb,.star{animation:none;opacity:.85}
  .mosaic img,.card{transition:none}
}

/* ---- contrast corrections ----------------------------------------------
   Pre-existing, unrelated to the photography above: antique gold at #A8853F
   reaches only 3.1:1 on cream, short of the 4.5:1 small text needs. Borders,
   focus rings and glyphs keep the original tone — they are not text — while
   the words move to a deeper gold that still reads as the same foil. */
:root{--gold-text:#856527}
.eyebrow{color:var(--gold-text)}
.card .more{color:var(--gold-text)}
.foot-bottom,.foot-bottom span,.foot-bottom a{color:#96978D}


/* ==== conversion pass =====================================================
   Added: season ribbon, text-message CTAs, three-up sticky bar, promise
   block, objection FAQ, in-form reassurance. Nothing above was changed. */
.ribbon{background:var(--evergreen);color:var(--cream);border-bottom:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 16px;
  padding:11px 20px;text-align:center;font-size:.98rem;line-height:1.35}
.ribbon strong{font-weight:600;letter-spacing:.01em}
.ribbon a{color:var(--gold-bright);font-weight:700;text-decoration:none;white-space:nowrap}
.ribbon a:hover{color:#fff}
@media(max-width:600px){.ribbon{font-size:.9rem;padding:9px 16px}}

.hero-text{display:inline-block;margin-top:.85rem;margin-left:12px;color:var(--cream);
  font-family:'Playfair Display',serif;font-size:1.34rem;font-weight:700;text-decoration:none;
  background:transparent;border:1px solid rgba(232,213,166,.5);border-radius:3px;padding:11px 20px 13px;
  transition:border-color .15s ease,color .15s ease,transform .15s ease}
.hero-text:hover{border-color:var(--gold);color:var(--gold-bright);transform:translateY(-2px)}
.hero-text:focus-visible{outline:3px solid var(--gold-bright);outline-offset:3px}
.hero-text small{display:block;font-family:'Cinzel',serif;font-size:.78rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin-bottom:3px;font-weight:600}
@media(max-width:600px){.hero-text{margin-left:0;display:block;text-align:center;font-size:1.26rem}}

.sticky{grid-template-columns:1.15fr 1fr 1fr}
.sticky .s-text{background:var(--evergreen);color:var(--cream);border-left:1px solid rgba(197,163,100,.4)}
.sticky .s-call{border-left:1px solid rgba(197,163,100,.4)}

.form-assure{list-style:none;margin:2px 0 16px;padding:0;font-size:.95rem;color:var(--muted)}
.form-assure li{position:relative;padding-left:24px;margin-bottom:7px;line-height:1.45}
.form-assure li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--red);font-weight:700}
.field .hint{display:block;margin-top:6px;font-size:.87rem;color:var(--muted);line-height:1.4}

.promise{background:var(--forest-deep);color:var(--cream)}
.promise h2{color:var(--cream)}
.promise .eyebrow{color:var(--gold)}
.promise-grid{display:grid;gap:18px;margin-top:2rem}
@media(min-width:760px){.promise-grid{grid-template-columns:1fr 1fr}}
.promise-card{background:rgba(247,241,228,.05);border:1px solid var(--line);border-radius:4px;padding:26px 24px}
.promise-card h3{color:var(--gold-bright);margin-bottom:.5rem}
.promise-card p{color:rgba(247,241,228,.82);font-size:1.02rem}
.promise-foot{margin-top:1.8rem;font-family:'Cinzel',serif;font-size:.88rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(247,241,228,.7);text-align:center}

.objections{background:var(--paper)}
.objections .faq{margin-top:1.6rem}
.btn-dark{background:var(--evergreen);color:var(--cream)}
.btn-dark:hover{background:var(--forest-deep);box-shadow:0 10px 26px rgba(30,38,32,.3)}

.promise{background:var(--evergreen)}
.promise-card{background:rgba(247,241,228,.07)}


/* ==== glitter pass =======================================================
   Denser, livelier night sky and a chase that travels along every string.
   All of it switches off under prefers-reduced-motion. */
.star{animation-duration:var(--tw,4s)}
.star-md{width:3.6px;height:3.6px;
  box-shadow:0 0 9px 1px rgba(232,213,166,.95),0 0 18px rgba(197,163,100,.55)}
.star-lg{width:5px;height:5px;
  box-shadow:0 0 12px 2px rgba(255,248,225,.95),0 0 26px rgba(197,163,100,.6)}
/* the four-point glint that makes the brightest ones read as stars, not dots */
.star-lg::before,.star-lg::after{content:"";position:absolute;left:50%;top:50%;
  background:linear-gradient(90deg,transparent,rgba(255,248,225,.85),transparent);
  transform:translate(-50%,-50%)}
.star-lg::before{width:22px;height:1px}
.star-lg::after{width:1px;height:22px;
  background:linear-gradient(180deg,transparent,rgba(255,248,225,.85),transparent)}

.shooting{position:absolute;width:3px;height:3px;border-radius:50%;
  background:#FFF8E1;box-shadow:0 0 10px 2px rgba(255,248,225,.9);
  animation:shoot 1.5s ease-in forwards;pointer-events:none}
.shooting::after{content:"";position:absolute;right:3px;top:50%;width:90px;height:1.5px;
  transform:translateY(-50%);
  background:linear-gradient(270deg,rgba(255,248,225,.85),transparent)}
@keyframes shoot{
  0%{opacity:0;transform:translate(0,0) rotate(18deg)}
  12%{opacity:1}
  100%{opacity:0;transform:translate(340px,110px) rotate(18deg)}
}

/* the chase — each bulb swells briefly as the wave reaches it. Transform is
   used rather than opacity so it layers over the existing glow instead of
   fighting it. */
.bulb,.lightstring .lb{transform-box:fill-box;transform-origin:center}
.bulb{animation:glow 3.4s infinite ease-in-out,chase 6.5s linear infinite}
.bulb-halo{animation:halo 3.4s infinite ease-in-out,chaseHalo 6.5s linear infinite}
.lightstring .lb{animation:glow 3.8s infinite ease-in-out,chase 6.5s linear infinite}
@keyframes chase{0%,88%,100%{transform:scale(1)}
  93%{transform:scale(1.85)}
  96%{transform:scale(1.25)}}
@keyframes chaseHalo{0%,88%,100%{transform:scale(1)}
  93%{transform:scale(1.5)}}

@media(prefers-reduced-motion:reduce){
  .star,.star-lg::before,.star-lg::after,.bulb,.bulb-halo,.lightstring .lb{
    animation:none;opacity:.85;transform:none}
  .shooting{display:none}
}


/* ---- hero drift, rebuilt for performance --------------------------------
   The old drift animated background-size on the hero photograph, which forces
   the browser to repaint a full-width image every frame (measured: 16fps on
   desktop). The same "sky is never quite still" effect now runs as a transform
   on the gradient scrim, which the compositor handles for free. */
@media(min-width:941px){
  .hero{animation:none}
  .hero .hero-sky{will-change:transform;transform-origin:50% 40%;
    animation:skyfloat 30s ease-in-out infinite alternate}
}
@keyframes skyfloat{from{transform:scale(1)}to{transform:scale(1.05)}}
@media(prefers-reduced-motion:reduce){.hero .hero-sky{animation:none;transform:none}}

/* ==== SMS consent checkbox ==============================================
   Unchecked by default, never required to submit. Small muted type on
   purpose — it is a disclosure, not a selling point — but the whole row is
   tappable. Selectors are doubled up to beat `.field label`. */
.field.consent{margin:4px 0 16px}
.field.consent .consent-row{display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  font-weight:400;font-size:.86rem;line-height:1.45;color:var(--muted);margin:0}
.field.consent .consent-row input[type="checkbox"]{flex:none;width:20px;height:20px;
  margin:1px 0 0;accent-color:var(--gold-deep);cursor:pointer}
.field.consent .consent-row span{display:block}
.field.consent .consent-row a{color:var(--gold-deep);text-decoration:underline}
.field.consent .consent-row a:hover{color:var(--oxblood)}


/* ===== ported from Tampa ===== */
/* ===== Offer bar + countdown (free wreath, ends Nov 20) ===== */
.notice.offer{background:linear-gradient(90deg,#0C2F1A,#154A2A 50%,#0C2F1A);
  border-bottom:1px solid rgba(197,163,100,.5);padding:12px 20px;position:relative;z-index:70}
.offer-in{max-width:var(--maxw);margin-inline:auto;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:12px 24px}
.offer-txt{margin:0;color:var(--cream);font-size:1rem;display:flex;align-items:center;gap:12px;
  flex-wrap:wrap;justify-content:center}
.offer-txt b{color:var(--gold-bright)}
.offer-tag{font:700 .66rem/1 "Cinzel",Georgia,serif;letter-spacing:.2em;text-transform:uppercase;
  background:var(--red);color:var(--gold-bright);padding:7px 10px;border-radius:999px;
  border:1px solid rgba(197,163,100,.6)}
.cd{display:flex;align-items:center;gap:6px}
.cd div{display:grid;justify-items:center;gap:3px;min-width:46px;padding:6px 8px 5px;border-radius:6px;
  background:rgba(0,0,0,.28);border:1px solid rgba(197,163,100,.45)}
.cd b{font:800 1.15rem/1 "Inter",system-ui,sans-serif;letter-spacing:-.01em;color:var(--gold-bright);
  font-variant-numeric:tabular-nums}
.cd span{font:700 .56rem/1 "Inter",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#D8C7A6}
.cd i{font-style:normal;color:var(--gold);font-weight:700}
.offer-cta{color:#2A1A10;background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  font-weight:800;font-size:.9rem;text-decoration:none;padding:10px 16px;border-radius:6px;white-space:nowrap}
.offer-cta:hover{filter:brightness(1.05)}
.notice .offer-cta,.notice .offer-cta:visited{color:#2A1A10}
@media (max-width:700px){
  .notice.offer{padding:14px 16px 16px}
  .offer-in{gap:12px}
  .offer-txt{flex-direction:column;gap:8px;text-align:center}
  .offer-tag{font-size:.6rem;padding:6px 10px}
  .offer-line{font-size:.98rem;line-height:1.35;max-width:30ch}
  .cd{gap:5px}
  .cd div{min-width:54px;padding:7px 4px 6px}
  .cd b{font-size:1.25rem}
  .cd span{font-size:.55rem}
  .offer-cta{width:100%;max-width:340px;text-align:center;padding:12px 16px}
}

/* ===== Streamline-style "what's included" band + season card ===== */
.inc-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}
.inc-main{display:grid;gap:18px}
.inc-main h2{font-size:clamp(2.1rem,4vw,3.1rem);line-height:1.1;color:var(--cream)}
.inc-main h2 em{font-style:italic;color:var(--gold-bright);font-weight:600}
.inc-main .lead{font-size:1.12rem;color:#E6D8BE;max-width:54ch;margin:0}
.caps{font:700 .82rem/1.4 "Cinzel",Georgia,serif;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin:0}
.inc-list{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:14px;
  border-top:1px solid rgba(197,163,100,.35)}
.inc-col{padding:26px 0 6px}
.inc-col:first-child{padding-right:28px}
.inc-col + .inc-col{padding-left:28px;border-left:1px solid rgba(197,163,100,.35)}
.inc-col h3{font:700 .78rem/1 "Cinzel",Georgia,serif;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin:0 0 16px}
.inc-col ul{list-style:none;margin:0;padding:0;display:grid}
.inc-col li{display:flex;gap:14px;align-items:baseline;padding:11px 0;
  border-bottom:1px solid rgba(247,241,228,.09);color:#F4E9D2;font-size:1rem}
.inc-col li:last-child{border-bottom:0}
.inc-col li::before{content:"\2726";color:var(--gold-bright);font-size:.72rem;flex:none;transform:translateY(-1px)}
/* Inside the included band the stats are a slim strip, not boxes — the boxed
   version fought the list above it and left a ragged gap on the right. */
.inc-main .stats{display:flex;flex-wrap:wrap;gap:0;justify-content:flex-start;
  margin-top:28px;padding-top:24px;border-top:1px solid rgba(197,163,100,.25)}
.inc-main .stat{display:block;text-align:left;border:0;border-radius:0;background:none;
  padding:2px 40px 2px 0}
.inc-main .stat + .stat{padding-left:40px;border-left:1px solid rgba(197,163,100,.25)}
.inc-main .stat .n{font-size:clamp(2.1rem,3.4vw,2.7rem);line-height:1;
  text-shadow:0 0 22px rgba(232,213,166,.35)}
.inc-main .stat .l{margin-top:.55rem;font-size:.73rem;letter-spacing:.17em;
  max-width:none;white-space:nowrap;color:rgba(247,241,228,.74)}
@media(max-width:640px){
  .inc-main .stat{padding-right:24px}
  .inc-main .stat + .stat{padding-left:24px}
  .inc-main .stat .l{white-space:normal;max-width:14ch}
}

.season-card{position:relative;background:linear-gradient(180deg,#FFFDF8,#FBF2DE);color:var(--ink);
  border-radius:6px;padding:40px 36px 32px;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.season-card::before{content:"";position:absolute;inset:8px;border:1px solid rgba(197,163,100,.6);
  border-radius:3px;pointer-events:none}
.season-card h3{font:700 clamp(1.7rem,2.6vw,2.1rem)/1.15 "Playfair Display",Georgia,serif;
  color:var(--oxblood);text-align:center;margin:12px 0 26px}
.season-card h3 span{display:block;font-style:italic;font-weight:600;color:var(--evergreen)}
.season-card .btn{width:100%;position:relative;justify-content:center}
.sc-kicker{font:700 .74rem/1.4 "Cinzel",Georgia,serif;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-text);text-align:center;margin:0}
.sc-steps{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:0;counter-reset:sn;position:relative}
.sc-steps::before{content:"";position:absolute;left:17px;top:18px;bottom:18px;width:1px;
  background:linear-gradient(180deg,var(--gold),rgba(197,163,100,.25))}
.sc-steps li{counter-increment:sn;position:relative;display:grid;gap:2px;padding:0 0 20px 54px;text-align:left}
.sc-steps li:last-child{padding-bottom:0}
.sc-steps li::before{content:counter(sn);position:absolute;left:0;top:-2px;width:36px;height:36px;
  border-radius:50%;display:grid;place-items:center;background:var(--paper);border:1.5px solid var(--gold);
  color:var(--oxblood);font:700 1rem/1 "Playfair Display",Georgia,serif}
.sc-steps li:last-child::before{background:var(--oxblood);border-color:var(--oxblood);color:var(--gold-bright)}
.sc-steps b{font:700 1.08rem/1.3 "Playfair Display",Georgia,serif;color:var(--ink)}
.sc-steps span{color:var(--muted);font-size:.93rem;line-height:1.5}
.sc-note{text-align:center;font-size:.8rem;color:var(--muted);margin-top:12px}
.btn-gold{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#2A1A10;
  box-shadow:0 8px 24px rgba(197,163,100,.3);border:0}
.btn-gold:hover{filter:brightness(1.05)}
@media (max-width:980px){
  .inc-grid{grid-template-columns:1fr;gap:38px}
  .season-card{padding:32px 24px 26px}
}
@media (max-width:560px){
  .inc-list{grid-template-columns:1fr}
  .inc-col:first-child{padding-right:0}
  .inc-col + .inc-col{padding-left:0;border-left:0;border-top:1px solid rgba(197,163,100,.35)}
  .inc-main .stats{gap:22px}
}

/* ---- light card inside a dark band -------------------------------------
   .forest sets cream text for its own copy. The season card is cream paper,
   so those inherited rules have to be undone inside it or the kicker and the
   note render cream-on-cream and the card reads washed out. */
.forest .season-card p,
.forest .season-card li,
.forest .season-card span,
.forest .season-card b,
.forest .season-card strong{color:var(--ink)}
.forest .season-card h3{color:var(--oxblood)}
.forest .season-card h3 span{color:var(--evergreen)}
.forest .season-card .sc-kicker{color:var(--gold-text)}
.forest .season-card .sc-steps li span{color:var(--muted)}
.forest .season-card .sc-note{color:var(--muted)}
.forest .season-card .sc-steps li::before{color:var(--oxblood)}
.forest .season-card .sc-steps li:last-child::before{color:var(--gold-bright)}
.forest .season-card .btn-gold{color:var(--oxblood-deep)}

/* =========================================================================
   STREAMLINE-STYLE SECTIONS
   Shared section head, numbered service cards, cost factors, promise grid,
   centred season band, two-column FAQ and the closing CTA band.
   ========================================================================= */

/* ---- shared section head ---- */
.caps{font:700 .82rem/1.4 "Cinzel",Georgia,serif;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-text);margin:0}
.sec-head{display:grid;gap:14px;max-width:62ch;margin-bottom:52px}
.sec-head h2{margin:0}
.sec-head .lead{margin:0;color:var(--muted);font-size:1.12rem;line-height:1.7}
.sec-head.center{margin-inline:auto;text-align:center;justify-items:center}
.sec-head.dark .caps{color:var(--gold)}
.sec-head.dark h2{color:var(--cream)}
.sec-head.dark .lead{color:rgba(247,241,228,.82)}
@media(max-width:700px){.sec-head{margin-bottom:34px}}

/* ---- what we install: numbered cards ---- */
.install{background:var(--paper)}
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:900px){.pcards{grid-template-columns:1fr}}
.pcard{background:#fff;border:1px solid var(--border);border-radius:6px;display:flex;flex-direction:column;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.pcard:hover{transform:translateY(-3px);border-color:rgba(197,163,100,.75);
  box-shadow:0 22px 48px rgba(42,35,32,.14)}
.pcard .body{padding:34px 30px 30px;display:flex;flex-direction:column;gap:12px;flex:1}
.pcard .pnum{font:600 italic 1.6rem/1 "Playfair Display",Georgia,serif;color:var(--gold-deep);
  border-bottom:1px solid var(--border);padding-bottom:14px;margin-bottom:4px}
.pcard h3{margin:0;color:var(--oxblood);font:700 1.3rem/1.25 "Playfair Display",Georgia,serif}
.pcard p{margin:0;color:var(--muted);line-height:1.68}
.pcard a{font:700 .78rem/1 "Cinzel",Georgia,serif;letter-spacing:.16em;color:var(--gold-text);
  text-decoration:none;margin-top:auto;padding-top:14px;align-self:start}
.pcard a:hover{color:var(--oxblood)}

/* ---- cost factors ---- */
.factors{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:10px}
@media(max-width:900px){.factors{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.factors{grid-template-columns:1fr}}
.factors .factor{border:1px solid rgba(197,163,100,.5);border-radius:6px;padding:24px;
  background:rgba(0,0,0,.14);display:grid;gap:6px;text-align:left}
.factors .factor b{font:700 .9rem/1 "Cinzel",Georgia,serif;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-bright)}
.factors .factor span{color:#F2E2C5;font-size:.98rem;line-height:1.55}
.cost-section .ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}

/* ---- gallery CTA ---- */
.gx-cta{display:flex;justify-content:center;margin-top:40px}

/* ---- promises ---- */
.promise{background:var(--forest-deep);color:var(--cream);position:relative}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:760px){.pgrid{grid-template-columns:1fr}}
.pgrid>div{border:1px solid rgba(197,163,100,.35);border-radius:6px;padding:30px;
  background:rgba(255,255,255,.03);display:grid;gap:10px;align-content:start}
.pgrid h3{margin:0;color:var(--gold-bright);font:700 1.26rem/1.3 "Playfair Display",Georgia,serif}
.pgrid p{margin:0;color:#E6D8BE;line-height:1.7}
.promise .strip{margin:44px 0 0;text-align:center;font:700 .8rem/1.6 "Cinzel",Georgia,serif;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}

/* ---- season band ---- */
.season-section{background:var(--cream);text-align:center}
.season-section .caps{margin-bottom:14px}
.season-section h2{margin:0 0 18px;color:var(--oxblood)}
.season-section .lead{max-width:64ch;margin:0 auto;color:var(--muted);font-size:1.12rem;line-height:1.75}
.season-section .btn{margin-top:30px}

/* ---- two-column FAQ ---- */
.home-faq{background:var(--paper)}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
@media(max-width:900px){.faq-grid{grid-template-columns:1fr;gap:28px}}
.faq-grid .sec-head{position:sticky;top:110px;margin-bottom:0}
@media(max-width:900px){.faq-grid .sec-head{position:static}}
.faq-grid .sec-head .lead a{color:var(--gold-text)}

/* ---- closing CTA band ---- */
.final{background:linear-gradient(180deg,var(--oxblood) 0%,var(--oxblood-deep) 100%);
  color:var(--cream);text-align:center}
.final .caps{color:var(--gold);margin-bottom:14px}
.final h2{margin:0;color:var(--cream);max-width:22ch;margin-inline:auto}
.final .ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:30px}

/* ---- outline button used beside the gold one on dark bands ---- */
.btn-line{background:transparent;color:var(--cream);border:1.5px solid rgba(232,213,166,.55)}
.btn-line:hover{background:rgba(232,213,166,.12);border-color:var(--gold)}

/* two-up variant of the numbered cards, for pages with longer copy */
.pcards.two{grid-template-columns:1fr 1fr}
@media(max-width:860px){.pcards.two{grid-template-columns:1fr}}

/* ---- install examples gallery (feature row + grid + lightbox) ----------- */
.installs-section .gx{margin:0}
.gx-open{display:block;width:100%;padding:0;border:0;background:#1a0d0b;cursor:zoom-in;
  border-radius:6px;overflow:hidden;position:relative}
.gx-open img{display:block;width:100%;height:auto;transition:transform .5s}
.gx-open:hover img{transform:scale(1.03)}
.gx-open:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.gx-feat-row{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:16px;margin-bottom:16px}
.gx-feat .gx-open{height:100%}
.gx-feat-row .gx-open{height:340px;box-shadow:0 18px 44px rgba(62,6,8,.22);
  outline:1px solid rgba(197,163,100,.5);outline-offset:-1px}
.gx-feat-row .gx-open img{height:100%;object-fit:cover}
@media(max-width:900px){
  .gx-feat-row{grid-template-columns:1fr 1fr}
  .gx-feat-row .gx:first-child{grid-column:1/-1}
  .gx-feat-row .gx-open{height:260px}
}
@media(max-width:520px){
  .gx-feat-row{grid-template-columns:1fr}
  .gx-feat-row .gx-open{height:230px}
}

.gx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;grid-auto-rows:210px}
.gx-grid .gx-open{height:100%}
.gx-grid .gx-open img{height:100%;object-fit:cover}
@media(max-width:900px){.gx-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:180px}}
@media(max-width:620px){.gx-grid{grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:12px}}

/* lightbox */
.lbx{position:fixed;inset:0;z-index:200;background:rgba(17,7,7,.94);
  display:grid;place-items:center;padding:24px}
.lbx[hidden]{display:none}
.lbx figure{margin:0;max-width:min(1200px,94vw);max-height:86vh;display:grid;gap:12px;justify-items:center}
.lbx img{max-width:100%;max-height:78vh;width:auto;height:auto;border-radius:6px;
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lbx figcaption{color:var(--cream);font-size:.92rem;text-align:center;max-width:70ch}
.lbx-x{position:absolute;top:16px;right:20px;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(232,213,166,.4);background:rgba(0,0,0,.4);color:var(--cream);
  font-size:1.9rem;line-height:1;cursor:pointer}
.lbx-nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;
  border:1px solid rgba(232,213,166,.4);background:rgba(0,0,0,.4);color:var(--cream);
  font-size:2.2rem;line-height:1;cursor:pointer}
.lbx-prev{left:18px}.lbx-next{right:18px}
.lbx-x:hover,.lbx-nav:hover{background:rgba(197,163,100,.3);border-color:var(--gold)}
.lbx-x:focus-visible,.lbx-nav:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media(max-width:620px){.lbx-nav{width:44px;height:44px;font-size:1.8rem}.lbx-prev{left:8px}.lbx-next{right:8px}}

/* ---- hero form, Streamline structure --------------------------------------
   Name and phone share a row so the card stops running past the fold, the
   address carries a one-line explanation, and the reassurances sit directly
   above the button where they do the most work. */
.form-card{border-radius:10px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:480px){.field-row{grid-template-columns:1fr;gap:0}}
.field .hint{display:block;margin-top:7px;font-size:.84rem;line-height:1.45;color:var(--muted)}
.assure{list-style:none;margin:4px 0 20px;padding:16px 0 0;display:grid;gap:9px;
  border-top:1px solid var(--border)}
.assure li{position:relative;padding-left:26px;font-size:.93rem;line-height:1.5;color:var(--muted)}
.assure li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--gold-deep);font-weight:700}
.form-card .fineprint a{color:var(--gold-text)}

/* "Rather talk it through?" block */
.talk{margin-top:1.6rem;display:inline-grid;gap:4px;justify-items:start;
  background:var(--evergreen);border:1px solid var(--gold);border-radius:6px;padding:13px 24px 15px;
  box-shadow:0 8px 22px rgba(8,26,16,.34)}
.talk small{font-family:'Cinzel',serif;font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);font-weight:600}
.talk .talk-num{font-family:'Playfair Display',serif;font-size:1.78rem;font-weight:700;
  color:var(--cream);text-decoration:none;line-height:1.1}
.talk .talk-sms{font-size:.92rem;color:var(--gold-bright);text-decoration:none;margin-top:2px}
.talk .talk-sms:hover,.talk .talk-num:hover{color:#fff}
@media(max-width:600px){.talk{padding:12px 20px 14px}.talk .talk-num{font-size:1.62rem}}

/* the left column should hug its content instead of stretching to the form */
@media(min-width:940px){.hero-bot{align-self:start}}

/* trust marks: two per line at desktop like Streamline, not one per line */
.hero-trust{gap:9px 30px;font-size:.96rem;letter-spacing:.12em}
@media(min-width:940px){.hero-trust{max-width:38ch}}

@media(min-width:940px){
  /* row 1 hugs the headline; the slack from the taller form lands in row 2,
     so the trust marks sit right under the paragraph instead of floating. */
  .hero-split{grid-template-rows:auto 1fr}
  .hero-top{align-self:start}
  .hero-trust{max-width:52ch;font-size:.92rem;letter-spacing:.11em}
}

/* ---- nav phone pill -------------------------------------------------------
   The desktop header CTA is the number itself, in a gold-rimmed pill with a
   slow shine across the digits. A phone number converts harder than a button
   on a service site, and it matches the sticky bar's "Call Now". */
.nav-tel{display:none;text-decoration:none;white-space:nowrap;
  font:800 1.12rem/1 'Inter',system-ui,sans-serif;letter-spacing:.01em;
  padding:13px 22px;border-radius:999px;
  background:linear-gradient(180deg,#5A080C,#2E0406);
  box-shadow:inset 0 0 0 1.5px rgba(232,196,110,.8),0 6px 18px rgba(0,0,0,.35);
  transition:transform .15s ease,box-shadow .15s ease}
@media(min-width:1160px){.nav-tel{display:inline-block}}
.nav-tel:hover{transform:translateY(-1px);
  box-shadow:inset 0 0 0 1.5px var(--gold-bright),0 10px 24px rgba(0,0,0,.42)}
.nav-tel:focus-visible{outline:3px solid var(--gold-bright);outline-offset:3px}

.gshine{background:linear-gradient(100deg,#F6D98A 0%,#D4A24C 30%,#FFF6DA 48%,#D4A24C 66%,#F1C76B 100%);
  background-size:260% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:gsh 4.5s ease-in-out infinite}
@keyframes gsh{0%,35%{background-position:100% 0}70%,100%{background-position:0 0}}
@media(prefers-reduced-motion:reduce){.gshine{animation:none;background-position:50% 0}}

/* brand wordmark: the second half carries Streamline's vibrant gold, not the
   muted one used for rules and hairlines */
.brand span{color:#F1C76B}
footer .brand span{color:#F1C76B}

/* Six nav links plus the phone pill no longer fit the old spacing, so the
   full nav starts a little wider and tightens inside the 1180px wrap. */
@media(min-width:1160px){
  .nav{gap:24px}
  .nav-links{gap:17px}
  .nav-links a{font-size:.92rem}
  .nav-tel{padding:11px 17px;font-size:1rem}
}
@media(min-width:1280px){
  .nav{gap:30px}
  .nav-links{gap:22px}
  .nav-links a{font-size:.96rem}
  .nav-tel{padding:12px 20px;font-size:1.08rem}
}

/* ---- headline emphasis ----------------------------------------------------
   The pale cream-gold barely separated from the white half of the headline.
   This is Streamline's vibrant gold, with a faint bloom so the phrase reads
   as lit rather than just tinted. */
.hero h1 em,
.banner h1 em{font-style:normal;color:#F1C76B;
  text-shadow:0 0 28px rgba(241,199,107,.28)}
.inc-main h2 em{color:#F1C76B;text-shadow:0 0 26px rgba(241,199,107,.24)}

/* Eyebrows on the dark bands were using the dark gold meant for cream
   backgrounds, which left them almost unreadable on the red hero. */
.hero .eyebrow,
.banner .eyebrow,
.hero .caps,
.banner .caps,
.price .caps,
.promise .caps,
.areas .caps,
.final .caps,
.forest .caps,
.quote-section .eyebrow{color:#F1C76B}

/* Hero and banner body copy: a warm, lit cream rather than the neutral
   translucent one, which went grey against the red. */
.hero-sub{color:#EEDFC3}
.banner p{color:#E4D3B6}
.hero-trust{color:#EEDFC3}

/* ---- hero trust row + "rather talk it through" ----------------------------
   Streamline's treatment: diamonds in a plain row, then a hairline rule and
   the number itself as the focal point, with no box around either. */
.hero-trust{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:28px;
  font:700 .74rem/1.2 'Inter',system-ui,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cream);font-family:'Inter',system-ui,sans-serif}
.hero-trust span{display:flex;align-items:center;gap:10px}
.hero-trust span::before{content:"\2726";color:#F1C76B;font-size:1em;margin-right:0}

.talk{display:grid;gap:6px;justify-items:start;margin-top:34px;padding:24px 0 0;
  background:none;border:0;border-top:1px solid rgba(212,162,76,.35);
  border-radius:0;box-shadow:none}
.talk small{font:700 .72rem/1 'Cinzel',Georgia,serif;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold)}
.talk .talk-num{font:800 clamp(1.9rem,4vw,2.4rem)/1.1 'Inter',system-ui,sans-serif;
  color:var(--cream);text-decoration:none;user-select:all}
.talk .talk-sms{color:#F1C76B;font-weight:600;text-decoration:none;font-size:1rem}
.talk .talk-sms:hover{color:#FFF6DA}
@media(max-width:600px){.talk{margin-top:26px;padding-top:20px}}

/* ---- mobile header: the number as a pill, same as desktop ----------------
   The plain gold text ran to the edge of a phone screen. It is the same
   gold-rimmed pill now, just smaller. */
.nav-tel{display:inline-block;padding:9px 14px;font-size:clamp(.78rem,3.3vw,.95rem)}
@media(min-width:1160px){.nav-tel{padding:11px 17px;font-size:1rem}}
@media(min-width:1280px){.nav-tel{padding:12px 20px;font-size:1.08rem}}
.nav-phone{display:none}
@media(max-width:1159px){
  .nav{gap:10px}
  .brand{font-size:clamp(.68rem,2.9vw,.95rem)}
  .nav-tel{padding:9px 13px}
}
@media(max-width:380px){.nav-tel{padding:8px 11px}}

/* ---- keep the roofline lights clear of the hero copy ---------------------
   The decoration is 190px tall and sits on the bottom edge, so the hero body
   needs at least that much clearance or the strand lands on the text. */
.roofline{z-index:0}
.hero-inner{padding-bottom:215px}
@media(max-width:700px){.hero-inner{padding-bottom:265px}}

/* 320px screens: the wordmark plus the pill need every pixel */
@media(max-width:360px){
  .wrap.nav{padding-left:14px;padding-right:14px}
  .nav{gap:8px}
  .brand{font-size:.62rem;letter-spacing:.06em}
  .nav-tel{padding:8px 10px;font-size:.76rem}
}

.form-card h2,.form-card h3{color:var(--oxblood)}

/* ---- hero + banner photography (added with the Tampa port) --------------- */
.hero{background-color:var(--oxblood-deep);
  background-image:image-set(url("/images/hero-pensacola-christmas-lights.webp") type("image/webp"),
                             url("/images/hero-pensacola-christmas-lights.jpg") type("image/jpeg"));
  background-size:100% auto;background-position:center bottom;background-repeat:no-repeat}
.banner{background-image:image-set(url("/images/banner-pensacola-christmas-lights.webp") type("image/webp"),
                                   url("/images/banner-pensacola-christmas-lights.jpg") type("image/jpeg"));
  background-size:cover;background-position:center 62%}
@media(max-width:940px){
  .hero{background-image:none}
  .hero::before{content:"";position:absolute;top:0;left:0;right:0;height:min(58vh,540px);
    background-image:image-set(url("/images/hero-pensacola-christmas-lights-sm.webp") type("image/webp"),
                               url("/images/hero-pensacola-christmas-lights-sm.jpg") type("image/jpeg"));
    background-size:cover;background-position:center 62%;background-repeat:no-repeat}
  .banner{background-image:image-set(url("/images/banner-pensacola-christmas-lights-sm.webp") type("image/webp"),
                                     url("/images/banner-pensacola-christmas-lights-sm.jpg") type("image/jpeg"))}
}

/* ---- nav fit + sideways-scroll fix (ported with the Tampa work) -----------
   The full link row now waits until there is room for it beside the wordmark
   and the phone pill, and the page is clipped on both html and body because
   the carousel track and the decorative SVGs were pushing the document wider
   than the viewport on phones. */
@media(max-width:1159px){
  .nav-links{display:none}
  .nav-cta{display:none}
}
@media(min-width:1160px){
  .nav{gap:24px}
  .nav-links{display:flex;gap:17px}
  .nav-links a{font-size:.92rem}
  .nav-tel{padding:11px 17px;font-size:1rem}
}
@media(min-width:1280px){
  .nav{gap:30px}
  .nav-links{gap:22px}
  .nav-links a{font-size:.96rem}
  .nav-tel{padding:12px 20px;font-size:1.08rem}
}
@media(max-width:1159px){
  .nav{gap:10px}
  .brand{font-size:clamp(.64rem,2.8vw,.95rem)}
  .nav-tel{padding:9px 12px}
}
@media(max-width:380px){
  .wrap.nav{padding-left:14px;padding-right:14px}
  .nav{gap:8px}
  .brand{font-size:.58rem;letter-spacing:.05em}
  .nav-tel{padding:8px 10px;font-size:.72rem}
}

html{overflow-x:clip}
body{overflow-x:clip}
.carousel,.carousel-frame{max-width:100%;overflow:hidden}
.carousel-frame{overflow-x:hidden}
.mosaic img,.slide img,.carousel img{max-width:100%}
.roofline,.lightstring,.stars{max-width:100vw;overflow:hidden}

/* City names here run longer than Tampa's, so the nav needs its own sizing:
   tighter at the breakpoint where the links appear, and the wordmark allowed
   to wrap on very narrow phones instead of pushing the pill off-screen. */
@media(min-width:1160px){
  .nav{gap:18px}
  .brand{font-size:.84rem;letter-spacing:.06em}
  .nav-links{gap:13px}
  .nav-links a{font-size:.86rem}
  .nav-tel{padding:10px 13px;font-size:.92rem}
}
@media(min-width:1400px){
  .nav{gap:24px}
  .brand{font-size:.94rem;letter-spacing:.08em}
  .nav-links{gap:18px}
  .nav-links a{font-size:.93rem}
  .nav-tel{padding:11px 17px;font-size:1.02rem}
}
@media(max-width:420px){
  .brand{white-space:normal;line-height:1.15;max-width:52vw;font-size:.6rem}
  .nav{align-items:center}
}
@media(max-width:340px){
  .brand{font-size:.55rem;max-width:50vw}
  .nav-tel{padding:7px 9px;font-size:.68rem}
}