/* Tampa 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:#4A2321;--oxblood-deep:#331917;--wine:#68322F;
  /* forest (bottom half of the hanger) */
  --evergreen:#2E3A2C;--forest-deep:#1E2620;
  /* 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:#4A2321;--midnight-deep:#331917;
}
*{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(51,25,23,.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,#2C1413 0%,#4A2321 55%,#68322F 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(20,8,8,.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:#2E3A2C}
.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(74,35,33,.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(51,25,23,.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(51,25,23,.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-tampa-christmas-lights.webp") type("image/webp"),
                             url("/images/hero-tampa-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-tampa-christmas-lights.webp") type("image/webp"),
                             url("/images/banner-tampa-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-tampa-christmas-lights-sm.webp") type("image/webp"),
                               url("/images/hero-tampa-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-tampa-christmas-lights-sm.webp") type("image/webp"),
                                     url("/images/banner-tampa-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(104,50,47,.55),transparent 68%),
    linear-gradient(180deg,rgba(28,11,10,.97) 0%,rgba(32,13,12,.90) 30%,rgba(40,17,16,.44) 55%,rgba(42,18,17,.14) 78%,rgba(34,14,13,.60) 100%),
    linear-gradient(96deg,rgba(26,10,10,.72) 0%,rgba(30,12,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(26,10,10,.95) 0%,rgba(40,18,17,.90) 42%,rgba(58,27,25,.74) 74%,rgba(74,35,33,.60) 100%),
    linear-gradient(180deg,rgba(26,10,10,.66) 0%,rgba(30,13,12,.42) 45%,rgba(35,15,14,.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(24,9,9,.88) 0,rgba(26,10,10,.72) 190px,
                      rgba(28,11,10,.78) 340px,rgba(36,15,14,.93) 470px,#2C1413 552px);
  }
  .banner .hero-sky{
    background:
      radial-gradient(620px 280px at 70% 10%,rgba(197,163,100,.16),transparent 66%),
      linear-gradient(180deg,rgba(24,9,9,.88) 0%,rgba(30,12,11,.76) 40%,rgba(44,20,19,.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(74,35,33,.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(44,20,19,.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}