/* service.css — page-specific styling for single ces_service pages.
 * Layers on global.css + inner.css (which hold the shared hero, breadcrumb, and
 * final-CTA). Holds only what this template introduces: the two-column overview,
 * the all-inclusive list, and the FAQ accordion. */

/* ── Overview + all-inclusive list ────────────────────────────────────── */
.svc-overview{display:grid; grid-template-columns:1.25fr .85fr; gap:48px; align-items:start;}
.svc-overview-body h2{font-size:clamp(26px,3.4vw,42px); margin-top:14px;}
.svc-prose{margin-top:18px; color:var(--text-muted); font-size:17px; line-height:1.7;}
.svc-prose > * + *{margin-top:1em;}
.svc-prose a{color:var(--red-base); text-decoration:underline; text-underline-offset:2px;}

.svc-includes{background:var(--parch-raised); border:1px solid var(--parch-border);
  border-radius:18px; padding:32px 30px; box-shadow:0 18px 44px -28px rgba(40,28,14,.45);}
.svc-includes h3{font-size:21px; margin-bottom:18px;}
.svc-includes ul{list-style:none; margin:0; padding:0; display:grid; gap:13px;}
.svc-includes li{position:relative; padding-left:30px; font-size:15px; color:var(--text-base); line-height:1.5;}
.svc-includes li::before{content:"\2713"; position:absolute; left:0; top:1px;
  width:20px; height:20px; border-radius:50%; background:var(--green-base); color:#fff;
  font-size:12px; font-weight:700; display:grid; place-items:center;}

/* ── FAQ accordion ────────────────────────────────────────────────────── */
.svc-faq{max-width:820px; margin:0 auto; display:grid; gap:14px;}
.svc-faq-item{background:rgba(255,247,230,.04); border:1px solid rgba(230,207,150,.18);
  border-radius:14px; overflow:hidden;}
.svc-faq-item summary{list-style:none; cursor:pointer; padding:20px 24px; font-weight:600;
  font-size:16.5px; color:#F2E8D4; display:flex; justify-content:space-between; align-items:center; gap:16px;}
.svc-faq-item summary::-webkit-details-marker{display:none;}
.svc-faq-item summary::after{content:"+"; flex:none; font-size:22px; line-height:1; color:var(--gold-soft);
  transition:transform .2s;}
.svc-faq-item[open] summary::after{transform:rotate(45deg);}
.svc-faq-item summary:hover{color:#fff;}
.svc-faq-ans{padding:0 24px 20px; color:#C9BCA1; font-size:15px; line-height:1.7;}
.svc-faq-ans > * + *{margin-top:.8em;}
.svc-faq-ans a{color:var(--gold-soft); text-decoration:underline; text-underline-offset:2px;}

/* Full-width pull quote between overview and lead form (#79). Italic, centered,
 * sized to match the "Get Your Commercial Quote" headline (.lead-card h2 = 27px). */
.svc-pquote{margin:40px auto 44px; max-width:940px; padding:0 20px; border:0;
  font-family:"DM Serif Display",Georgia,serif; font-style:italic; font-size:27px;
  line-height:1.42; text-align:center; color:var(--head-brown);}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media(max-width:860px){
  .svc-overview{grid-template-columns:1fr; gap:30px;}
  .svc-pquote{font-size:22px; margin:28px auto 32px;}
}

/* Uniform lighting-options cards + gallery grid (copied from area.css for #52/#54). */
.ico {width:26px; height:26px; display:block;}
.ico-sm {width:20px; height:20px; display:block; color:var(--gold-hover); filter:drop-shadow(0 0 2px rgba(201,154,59,.4));}
.icowrap {width:58px; height:58px; border-radius:50%; display:grid; place-items:center; flex:none;
    color:var(--gold-hover);
    background:radial-gradient(circle at 34% 30%,#ffffff,var(--gold-50));
    border:1px solid var(--gold-soft);
    box-shadow:0 8px 20px -10px rgba(201,154,59,.55), 0 0 0 5px rgba(201,154,59,.05);}
.icowrap .ico {filter:drop-shadow(0 0 3px rgba(201,154,59,.45));}
.gal {display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:150px; gap:14px; grid-auto-flow:dense;}
.gal a {position:relative; border-radius:14px; overflow:hidden; background:var(--img,none) center/cover no-repeat, var(--glow-tile); box-shadow:0 18px 40px -28px rgba(40,28,14,.4); text-decoration:none;}
.gal a::after {content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 42%,rgba(20,16,10,.55)); transition:opacity .25s;}
.gal a:hover::after {opacity:.6;}
.gal .tall {grid-row:span 2;}
.gal .wide {grid-column:span 2;}
.cap {position:absolute; left:12px; bottom:12px; z-index:2; font-size:11.5px; letter-spacing:.02em; color:#F3E9D2; background:rgba(20,16,10,.5); border:1px solid rgba(230,207,150,.28); padding:4px 11px; border-radius:999px; backdrop-filter:blur(3px); display:inline-flex; align-items:center; gap:7px;}
.cap::before {content:""; width:6px; height:6px; border-radius:50%; background:#FFE7B0; box-shadow:0 0 6px 1px rgba(255,221,150,.9);}
.choose {display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:920px; margin:0 auto;}
.ccard {display:flex; gap:20px; align-items:flex-start; background:rgba(255,247,230,.04); border:1px solid rgba(230,207,150,.18); border-radius:18px; padding:28px 26px; transition:transform .18s,border-color .18s,box-shadow .18s;}
.ccard:hover {transform:translateY(-4px); border-color:rgba(230,207,150,.4); box-shadow:0 0 30px rgba(201,154,59,.18);}
.ccard h3 {font-size:20px; color:#F6EFDD; margin-bottom:7px;}
.ccard p {font-size:14px; color:#C9BCA1;}
.ccard .more {display:inline-flex; gap:6px; margin-top:13px; color:var(--gold-soft); font-weight:600; font-size:13.5px;}
.choose-cta {text-align:center; margin-top:38px; color:#C9BCA1; font-size:15.5px;}
.choose-cta a {color:var(--gold-soft); font-weight:600;}
/* Commercial segments footer line sits on a warm section (#152) */
.section--warm .choose-cta{color:var(--text-muted);}
.choose-cta .seg-cta{color:var(--green-btn,#1C7A3D);}
.choose-cta .seg-cta:hover{color:var(--green-btn-hover,#166431); text-decoration:underline; text-underline-offset:3px;} /* #152 — visible hover */
.choose-2nd {text-align:center; margin-top:12px; font-size:13.5px; color:#9c917c;}
.choose-2nd a {color:var(--gold-soft); font-weight:600;}
.choose-cta {text-align:center; margin-top:38px; color:#C9BCA1; font-size:15px;}

/* ── Commercial hero: two columns like the area pages — copy left, clean
 * framed image right (no overlay). Lead form sits under the Overview. */
.btn-green{background:var(--green-btn,#1C7A3D); color:#fff;}
.btn-green:hover{background:var(--green-btn-hover,#166431); color:#fff;}
.hero-commercial .hero-grid{position:relative; z-index:3; display:grid; grid-template-columns:1.02fr .98fr;
  gap:50px; align-items:center; padding:54px 0 60px;}
.hero-commercial .hero-inner{max-width:560px; margin:0; padding:0; text-align:left;}
.hero-commercial .hero-cta{justify-content:flex-start;}
.hero-commercial .hero-media{aspect-ratio:5/4; border-radius:20px;
  background:var(--hero-img,none) center/cover no-repeat, var(--glow-tile);
  border:1px solid rgba(230,207,150,.2); box-shadow:0 36px 80px -34px rgba(0,0,0,.7);}
.hero-commercial .resp{margin-top:18px; color:#CDBF9F; font-size:13.5px;}
.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;}
.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-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 input:not([type="submit"]),.lead-card select,.lead-card textarea{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;}
.lead-card textarea{min-height:96px; resize:vertical;}
.lead-card input:focus,.lead-card select:focus,.lead-card textarea:focus{outline:none; border-color:var(--gold-base); box-shadow:0 0 0 3px rgba(201,154,59,.18);}
.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(--green-btn,#1C7A3D) !important; color:#fff !important; transition:background .15s,transform .1s;}
.lead-card .gform_footer .gform_button:hover,
.lead-card .gform_wrapper .gform_footer input.gform_button:hover{background:var(--green-btn-hover,#166431) !important;}
.lead-card .gform_confirmation_message{text-align:center; padding:18px 6px; color:var(--text-muted); font-size:15px;}
/* Full-width lead card at the bottom of the Overview section (#130 v2). */
.lead-card--wide{max-width:1080px; margin:56px auto 0;}
.lead-card--wide h2,
.lead-card--wide .sub{text-align:center;}
.lead-card--wide .sub{margin-bottom:24px;}
.lead-card--wide .gform_wrapper .gform_fields{grid-template-columns:repeat(2,1fr);}
/* GF Orbital puts 1/-1 on every field — pair them up, comments stays full. */
.lead-card--wide .gform_fields .gfield{grid-column:span 1;}
.lead-card--wide .gform_fields .gfield--type-textarea{grid-column:1 / -1;}
.lead-card--wide .gform_footer{display:flex; justify-content:center; margin-top:20px;}
.lead-card--wide .gform_footer .gform_button,
.lead-card--wide .gform_wrapper .gform_footer input.gform_button{width:auto; min-width:340px;}
.lead-card--wide .form-note{justify-content:center;}
@media(max-width:980px){
  .hero-commercial .hero-grid{grid-template-columns:1fr; gap:32px;}
  .hero-commercial .hero-inner{max-width:640px;}
}
@media(max-width:720px){
  .lead-card--wide .gform_wrapper .gform_fields{grid-template-columns:1fr;}
  .lead-card--wide .gform_footer .gform_button,
  .lead-card--wide .gform_wrapper .gform_footer input.gform_button{width:100%; min-width:0;}
}
/* GF sets a fixed 38px height/line-height on selects that clips the value,
 * and Orbital's chevron icon can end up tiling across the whole control —
 * replace it with our own single right-aligned chevron. */
.lead-card select{height:auto !important; line-height:1.4 !important;
  appearance:none; -webkit-appearance:none;
  padding-right:40px !important;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235b5240' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") right 15px center / 12px 8px no-repeat !important;}

@media(max-width:560px){
  .gal{grid-template-columns:1fr 1fr; grid-auto-rows:120px;}
}
.choose .ccard{min-width:0;}

/* mobile collapse — MUST live after the base .choose/.gal rules above
   (equal specificity: later wins). Fixes 375px overflow on service pages. */
@media(max-width:860px){
  .choose{grid-template-columns:1fr;}
  .gal{grid-template-columns:repeat(2,1fr);}
}