/* lp-quote.css — Get a Quote landing page (#45). Mockup components +
 * Gravity Forms output styling (form #1 rendered inside .lead-card). */

h1,h2,h3{font-family:"DM Serif Display",Georgia,serif; line-height:1.08; margin:0; color:var(--head-brown);}
.section--night h2,.section--night h3,.section--dusk h2,.section--dusk h3,.hero h1{color:#F6EFDD;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
:focus-visible{outline:2px solid var(--gold-base); outline-offset:3px; border-radius:2px;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px; position:relative; z-index:2;}
.eyebrow{font-size:13.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-hover);}
.section--night .eyebrow,.section--dusk .eyebrow{color:var(--gold-soft);}
.section{padding:80px 0; position:relative;}
.section--warm{background:var(--parch);}
.section--warm::before{content:""; position:absolute; top:0; left:0; right:0; height:140px;
    background:radial-gradient(620px 150px at 50% 0,rgba(201,154,59,.16),transparent 70%),
      linear-gradient(180deg,rgba(18,20,28,.20),transparent); pointer-events:none;}
.section--night{background:var(--night); color:#F2E8D4;}
.section--dusk{background:linear-gradient(180deg,var(--dusk),var(--night-2)); color:#F2E8D4;}
.bokeh{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1;}
.bokeh i{position:absolute; border-radius:50%; filter:blur(7px); opacity:.5;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:600; font-size:15px;
    padding:14px 26px; border-radius:999px; border:1.5px solid transparent; cursor:pointer; font-family:inherit;
    transition:background .18s,color .18s,border-color .18s,transform .18s;}
.btn:active{transform:translateY(1px);}
.btn-gold{background:var(--gold-base); color:#3A2A0C;}
.btn-gold:hover{background:var(--gold-hover); color:#fff3de;}
.btn-ghost{background:transparent; color:#F3E9D2; border-color:rgba(243,233,210,.45);}
.btn-ghost:hover{border-color:var(--gold-soft); color:#fff;}
.btn-lg{padding:16px 30px; font-size:16px;}
.btn-block{width:100%;}
.warm{background:#FFE7B0; box-shadow:0 0 6px 2px rgba(255,221,150,.85),0 0 14px 5px rgba(255,200,110,.45);}
.gold{background:var(--gold-soft); box-shadow:0 0 6px 2px rgba(230,207,150,.8),0 0 15px 6px rgba(201,154,59,.4);}
.red{background:#FF6A5E; box-shadow:0 0 6px 2px rgba(255,90,80,.75),0 0 15px 6px rgba(185,28,28,.45);}
.green{background:#7FCF9A; box-shadow:0 0 6px 2px rgba(127,207,154,.7),0 0 15px 6px rgba(16,74,44,.5);}
@keyframes tw{0%,100%{opacity:1;}45%{opacity:.45;}70%{opacity:.85;}}
.hero{position:relative; overflow:hidden; color:#F6EFDD; padding:0;}
/* The hero garland's own height:32px + overflow:hidden was clipping the bulbs/glow;
   let it size to its content so the full light string shows (#45 feedback). */
.hero .garland{height:auto; overflow:visible;}
.hero-bg{position:absolute; inset:0;
    background:radial-gradient(1100px 560px at 25% -10%,rgba(201,154,59,.22),transparent 60%),
      radial-gradient(760px 520px at 85% 10%,rgba(185,28,28,.18),transparent 62%),
      linear-gradient(180deg,#181B24,#14161E 60%,#0E1016);}
.hero-photo{position:absolute; inset:0; background:var(--hero-img,none) center/cover no-repeat; opacity:.34;}
.hero-veil{position:absolute; inset:0; background:linear-gradient(110deg,rgba(13,15,22,.86) 38%,rgba(13,15,22,.5));}
.hero-grid{position:relative; z-index:3; display:grid; grid-template-columns:1.05fr .95fr; gap:48px;
    align-items:start; padding:44px 0 56px;}  /* top-align: the real GF form is taller than the copy (#45) */
.hero h1{font-size:clamp(33px,4.8vw,56px); letter-spacing:-.01em; text-shadow:0 2px 40px rgba(0,0,0,.5);}
.hero h1 .glow{color:var(--gold-soft); text-shadow:0 0 26px rgba(230,207,150,.55);}
.hero .lede{font-size:clamp(16px,1.6vw,18.5px); color:#E7DCC6; max-width:560px; margin:20px 0 0;}
.offer{display:inline-flex; align-items:center; gap:9px; margin-top:24px; padding:9px 18px; border-radius:999px;
    background:linear-gradient(120deg,rgba(201,154,59,.16),rgba(16,74,44,.22)); border:1px solid rgba(230,207,150,.42);
    color:var(--gold-soft); font-weight:600; font-size:14px; letter-spacing:.01em;}
.offer .spark{color:var(--gold-soft);}
.trust{display:flex; gap:9px 22px; flex-wrap:wrap; margin-top:26px; font-size:13px; color:#CDBF9F;}
.trust span{display:inline-flex; align-items:center; gap:8px;}
.trust .dot{width:5px; height:5px; border-radius:50%; background:var(--gold-base);}
.hero-call{display:inline-flex; align-items:center; gap:9px; margin-top:26px; color:#F6EFDD; font-weight:600; font-size:17px;}
.hero-call b{font-family:"DM Serif Display"; color:var(--gold-soft); font-size:20px;}
.lead-card{background:#FCF5E7; border:1px solid var(--parch-border); border-radius:20px;
    padding:30px 30px 28px; box-shadow:0 30px 70px -30px rgba(0,0,0,.7);}
.lead-card h2{color:var(--head-brown); font-size:27px; margin-bottom:4px;}
.lead-card .sub{color:var(--text-muted); font-size:14px; margin-bottom:18px;}
.field{margin-bottom:13px;}
.field label{display:block; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
    color:var(--head-brown); margin-bottom:6px;}
.field input,.field select{width:100%; font-family:inherit; font-size:15px; color:var(--text-base);
    background:#fff; border:1px solid var(--parch-border); border-radius:10px; padding:11px 13px; transition:border-color .15s,box-shadow .15s;}
.field input:focus,.field select:focus{outline:none; border-color:var(--gold-base); box-shadow:0 0 0 3px rgba(201,154,59,.18);}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:13px;}
.lead-card .btn-gold{margin-top:6px;}
.form-note{display:flex; align-items:center; gap:8px; margin-top:13px; font-size:14.5px; color:var(--text-muted);}
.form-note .ck{color:var(--green-base); font-weight:700;}
.lead-success{display:none; text-align:center; padding:18px 6px;}
.lead-success .seal{width:56px; height:56px; border-radius:50%; background:var(--green-base); color:#fff;
    display:grid; place-items:center; font-size:26px; margin:0 auto 16px;}
.lead-success h2{margin-bottom:8px;}
.lead-success p{color:var(--text-muted); font-size:15px;}
/* Credbar styles come from global.css so the stat row matches every page (#190).
 * (This sheet's own copy diverged — 6px caption offset vs the 34px reserve.) */
.head-block{max-width:680px; margin:0 auto 46px; text-align:center;}
.head-block h2{font-size:clamp(27px,3.4vw,42px); margin-top:12px;}
.head-block p{color:var(--text-muted); margin-top:13px; font-size:16px;}
.section--night .head-block p,.section--dusk .head-block p{color:#C9BCA1;}
.reviews{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.review{background:#FCF5E7; border:1px solid var(--parch-border); border-radius:16px; padding:28px 26px;}
.stars{color:var(--gold-base); letter-spacing:3px; font-size:15px;}
.review p{margin:13px 0 16px; font-size:15px; color:#4a3d2c;}
.review .who{display:flex; align-items:center; gap:12px;}
.review .av{width:40px; height:40px; border-radius:50%; background:var(--green-100); color:var(--green-base);
    display:grid; place-items:center; font-weight:600; font-family:"DM Serif Display";}
.review .who b{font-size:15px;}
.review .who small{display:block; color:var(--text-muted); font-size:12.5px;}
.gal{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:14px;}
.gal .g{position:relative; border-radius:14px; overflow:hidden; background:var(--img,none) center/cover no-repeat, var(--glow-tile);
    box-shadow:inset 0 0 0 1px rgba(230,207,150,.12);}
.gal .g::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(13,15,22,.55));}
.gal .tall{grid-row:span 2;}
.gal .wide{grid-column:span 2;}
.cap{position:absolute; left:11px; bottom:11px; z-index:2; font-size:11px; letter-spacing:.03em;
    color:#F3E9D2; background:rgba(13,15,22,.55); border:1px solid rgba(230,207,150,.28);
    padding:3px 10px; border-radius:999px; backdrop-filter:blur(3px); display:inline-flex; align-items:center; gap:6px;}
.cap::before{content:""; width:6px; height:6px; border-radius:50%; background:#FFE7B0; box-shadow:0 0 6px 1px rgba(255,221,150,.9);}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:26px;}
.step{position:relative; padding-top:12px;}
.step .n{font-family:"DM Serif Display"; font-size:46px; color:var(--gold-soft); line-height:1;}
.step h3{font-size:20px; margin:12px 0 9px;}
.step p{font-size:14.5px; color:#C9BCA1;}
.step::before{content:""; position:absolute; top:22px; left:48px; right:-13px; height:1px;
    background:linear-gradient(90deg,var(--night-line),transparent);}
.step:last-child::before{display:none;}
.faq{max-width:760px; margin:0 auto;}
.faq details{border-bottom:1px solid var(--parch-divider); padding:6px 0;}
.faq summary{list-style:none; cursor:pointer; padding:18px 40px 18px 4px; position:relative;
    font-family:"DM Serif Display"; font-size:19px; color:var(--head-brown);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%);
    font-family:"DM Sans"; font-size:24px; color:var(--gold-base); transition:transform .2s;}
.faq details[open] summary::after{content:"–";}
.faq .ans{padding:0 4px 20px; color:var(--text-muted); font-size:15.5px; max-width:720px;}
/* Countdown matches the front-page sizing exactly (BugHerd #121) */
.countdown{text-align:center;}
.cd-grid{display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-top:36px;}
.cd-cell{min-width:152px; background:rgba(255,247,230,.04); border:1px solid rgba(230,207,150,.22);
    border-radius:18px; padding:30px 26px; backdrop-filter:blur(3px);}
.cd-num{font-family:"DM Serif Display"; font-size:clamp(56px,7.5vw,86px); font-weight:700; color:var(--gold-soft); line-height:1;
    text-shadow:0 0 24px rgba(230,207,150,.35);}
.cd-lab{font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:#C9BCA1; margin-top:12px;}
@media(max-width:760px){.cd-cell{flex:1 1 40%; min-width:40%;}}
.final{text-align:center; position:relative; overflow:hidden;}
.final .glow-bg{position:absolute; inset:0;
    background:radial-gradient(720px 400px at 50% 0,rgba(201,154,59,.26),transparent 60%),
      radial-gradient(620px 380px at 50% 120%,rgba(185,28,28,.18),transparent 60%);}
.final h2{font-size:clamp(30px,4.4vw,50px); color:#fff;}
.final p{color:#D8CBB0; margin:16px auto 0; max-width:560px; font-size:16.5px;}
.final-cta{display:flex; gap:13px; justify-content:center; flex-wrap:wrap; margin-top:28px;}
.final .resp{margin-top:16px; font-size:13px; color:#B6A988;}
/* .mcta moved to global.css (#159) */
@media(max-width:980px){
.hero-grid{grid-template-columns:1fr; gap:30px; padding:34px 0 40px;}
.hero-veil{background:linear-gradient(180deg,rgba(13,15,22,.78),rgba(13,15,22,.9));}
.reviews,.gal,.steps{grid-template-columns:1fr 1fr;}
.credbar{grid-template-columns:1fr 1fr; gap:24px;}
.step::before{display:none;}
.section{padding:62px 0;}
.gal{grid-auto-rows:180px;}
}
@media(max-width:600px){
.reviews,.steps,.gal{grid-template-columns:1fr;}
.credbar{grid-template-columns:1fr 1fr; gap:26px 14px;}  /* #214 — 2-up on phones */
.gal{grid-auto-rows:200px;}
.gal .tall{grid-row:span 1;}
.gal .wide{grid-column:span 1;}
.field-row{grid-template-columns:1fr;}
}

/* ── Gravity Forms output inside .lead-card ─────────────────────────── */
.lead-card .sub{color:var(--text-muted); font-size:14px; margin-bottom:18px;}
.lead-card .gform_wrapper{margin:0;}
.lead-card .gform_wrapper form{margin:0;}
.lead-card .gform_required_legend{display:none;}
.lead-card .gform_validation_errors{background:var(--red-100); border:1px solid var(--red-base);
  border-radius:10px; padding:12px 14px; margin-bottom:16px; color:var(--red-base); font-size:13px;}
.lead-card .gform_wrapper .gform_heading{display:none;}
.lead-card .gfield{margin-bottom:0;}
.lead-card .gform_fields{display:grid; gap:0;}
.lead-card .gform_wrapper .gform_fields{row-gap:14px !important; column-gap:16px !important;}
.lead-card .gfield_label,
.lead-card .gfield legend.gfield_label{display:block; font-size:12px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--head-brown); margin-bottom:6px; padding:0;}
.lead-card .gfield_required{color:var(--red-base); margin-left:3px;}
.lead-card .gfield_radio,
.lead-card .gfield_checkbox{display:grid; gap:9px; margin:0; padding:0; list-style:none;}
.lead-card .gfield_radio .gchoice,
.lead-card .gfield_checkbox .gchoice{display:flex; align-items:center; gap:9px; margin:0;}
.lead-card .gfield_radio input,
.lead-card .gfield_checkbox input{width:auto; accent-color:var(--gold-base); margin:0; flex:none;}
.lead-card .gfield_radio label,
.lead-card .gfield_checkbox label{font-size:14.5px; color:var(--text-base); margin:0; font-weight:500;}
.lead-card .ginput_complex{display:grid; grid-template-columns:1fr 1fr; gap:11px;}
.lead-card .ginput_complex .ginput_full{grid-column:1 / -1;}
.lead-card .ginput_complex span{display:block;}
.lead-card .ginput_complex label{display:block; font-size:11px; font-weight:600; letter-spacing:.03em;
  text-transform:uppercase; color:var(--text-muted); margin:0 0 4px;}
.lead-card .gfield_error input,
.lead-card .gfield_error select,
.lead-card .gfield_error textarea{border-color:var(--red-base);}
.lead-card .gfield_validation_message,
.lead-card .validation_message{color:var(--red-base); font-size:12.5px; margin-top:5px;}
.lead-card .gform_footer{margin:14px 0 0; padding:0;}
.lead-card .gform_footer .gform_button,
.lead-card .gform_wrapper .gform_footer input.gform_button,
.lead-card .gform_button{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  width:100%; font-family:inherit; font-weight:600; font-size:16px; letter-spacing:.01em; cursor:pointer;
  padding:16px 30px; border:1px solid transparent !important; border-radius:999px !important;
  background:var(--gold-base) !important; color:#3A2A0C !important; transition:background .15s,transform .1s;}
.lead-card .gform_footer .gform_button:hover,
.lead-card .gform_wrapper .gform_footer input.gform_button:hover,
.lead-card .gform_button:hover{background:var(--gold-hover) !important; color:#3A2A0C !important;}
.lead-card .gform_footer .gform_button:active,
.lead-card .gform_wrapper .gform_footer input.gform_button:active{transform:translateY(1px);}
.lead-card .gform_confirmation_message{text-align:center; padding:18px 6px; color:var(--text-muted); font-size:15px;}

/* Commercial hand-off from the resi quote hero (#131) */
.commercial-link{margin-top:22px; font-size:14px; color:#CDBF9F; display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.commercial-link .btn{padding:10px 18px; font-size:13.5px;}

/* #166: commercial hand-off — label stacked over a green button */
.commercial-link{margin-top:22px; display:flex; flex-direction:column; align-items:flex-start; gap:10px;}
.commercial-link p{font-size:14px; color:#CDBF9F; margin:0;}
.commercial-link .btn{padding:11px 20px; font-size:13.5px;}
/* #167: room between the checkbox and its label; "(Required)" on the
   what-would-you-like-lit checkboxes reads "Select 1 or more." instead */
.lead-card .gfield_checkbox .gchoice{display:flex !important; align-items:center; gap:13px !important;} /* GF Orbital forces grid w/ 0 column-gap (#168) */
.lead-card .gfield--type-checkbox .gfield_required{display:none;}
.lead-card .gfield_description{font-size:12.5px; color:var(--text-muted); margin:2px 0 6px;}

/* #165: the promo is a red ribbon that sweeps in from the left with a light
   shimmer. Folded ribbon ends via clip-path; shimmer is a moving highlight. */
.offer{position:relative; display:inline-flex; align-items:center; gap:10px; margin-top:26px;
  padding:12px 26px 12px 20px; border:0; border-radius:0; overflow:hidden;
  background:linear-gradient(180deg,#C9302C,var(--red-base) 45%,#8F1616);
  color:#FFF3DE; font-weight:600; font-size:14.5px; letter-spacing:.02em;
  clip-path:polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%);
  box-shadow:0 10px 26px -12px rgba(133,20,20,.8);
  animation:ribbon-in .7s cubic-bezier(.22,1,.36,1) both;}
.offer .spark{color:#FFE7B0;}
.offer::after{content:""; position:absolute; top:0; bottom:0; width:46px;
  background:linear-gradient(105deg,transparent,rgba(255,231,176,.55),transparent);
  animation:ribbon-shine 3.4s ease-in-out 1s infinite;}
@keyframes ribbon-in{from{transform:translateX(-56px); opacity:0;} to{transform:translateX(0); opacity:1;}}
@keyframes ribbon-shine{0%{left:-60px;} 55%,100%{left:110%;}}
@media (prefers-reduced-motion: reduce){
  .offer{animation:none;}
  .offer::after{animation:none; display:none;}
}