/* =========================================================
   Big Easy Siding — Service page components
   Loads AFTER style.css and reuses its :root tokens.
   Header, trust bar, How It Works, Service Areas, CTA band and
   footer all come straight from style.css so service pages and
   the homepage stay one design.
   ========================================================= */

/* ---------- shared section heading ---------- */
.sec-head{max-width:760px;margin:0 0 34px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(26px,2.5vw,34px);margin:0 0 12px}
.sec-head p{font-size:15.5px;line-height:1.7;margin:0}

/* =========================================================
   HERO — compact variant of the homepage hero
   ========================================================= */
.svc-hero{
  position:relative;
  min-height:var(--hero-inner-h);display:flex;align-items:center;
  background:
    linear-gradient(90deg,rgba(4,18,33,.94) 0%,rgba(4,18,33,.86) 42%,rgba(4,18,33,.55) 74%,rgba(4,18,33,.42) 100%),
    var(--bes-band-photo, url("../img/hero-bg.png")) center/cover no-repeat;
  background-color:var(--navy-800);
  padding:44px 0 40px;
}
.svc-hero-grid{width:100%;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:44px;align-items:center}
.svc-hero-copy{min-width:0}
.svc-hero h1{
  font-family:var(--serif);font-weight:700;color:#fff;
  font-size:clamp(29px,3.5vw,45px);line-height:1.14;letter-spacing:-.012em;
  margin:0 0 16px;max-width:640px;
}
.svc-hero-sub{color:#D7E2ED;font-size:16.5px;line-height:1.64;margin:0 0 26px;max-width:560px}
.svc-hero .hero-btns{margin-bottom:32px}

/* breadcrumb */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0 0 16px;font-size:13px;color:#9FB4CA}
.crumbs a{color:#C6D6E6}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs .sep{opacity:.55}
.crumbs [aria-current]{color:#fff;font-weight:500}

/* quote card sitting in the hero */
.svc-quote{
  background:#fff;border-radius:var(--radius);
  padding:24px 24px 22px;box-shadow:var(--shadow-lift);
}
.svc-quote h2{font-family:var(--serif);font-size:22px;font-weight:700;margin:0 0 8px}
.svc-quote p{font-size:14px;line-height:1.58;color:#5A6E85;margin:0 0 18px}
.svc-quote .btn{width:100%}
.svc-quote .btn + .btn{margin-top:10px}
.svc-quote-note{
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);
  font-size:13px;line-height:1.5;color:#5A6E85;
}
.svc-quote-note b{color:var(--ink)}

/* =========================================================
   INTRO — copy + figure
   ========================================================= */
.svc-intro{background:#fff;padding:66px 0 58px}
.svc-intro-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:52px;align-items:center}
.prose h2{font-size:clamp(26px,2.5vw,34px);margin:0 0 16px}
.prose p{font-size:15.5px;line-height:1.75;margin:0 0 16px}
.prose p:last-child{margin-bottom:0}
.prose .lead,.prose .lead p{font-size:17px;line-height:1.68;color:#3C5570}
.prose .lead p{margin:0 0 1rem}
.svc-intro figure{margin:0}
.svc-intro img{width:100%;height:320px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow-card)}

/* =========================================================
   WHAT'S INCLUDED
   ========================================================= */
.included{background:var(--cool);padding:62px 0}
.incl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.incl{
  background:#fff;border:1px solid var(--line);border-radius:9px;padding:22px 20px;
  box-shadow:var(--shadow-card);
}
.incl h3{font-size:16.5px;margin:0 0 8px;display:flex;align-items:flex-start;gap:10px}
.incl h3 .chk{margin-top:3px}
.incl p{font-size:14.5px;line-height:1.65;margin:0}

/* =========================================================
   SIGNS YOU NEED THE SERVICE
   ========================================================= */
.signs{background:#fff;padding:62px 0}
.signs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 30px}
.sign{
  display:flex;gap:14px;align-items:flex-start;
  padding:16px 18px;border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:7px;background:#FCFDFE;
}
.sign-ico{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  background:#FFF6DE;color:#9A7208;display:grid;place-items:center;
}
.sign-ico svg{width:17px;height:17px}
.sign p{margin:0;font-size:14.5px;line-height:1.62}
.sign b{color:var(--ink)}
.signs-note{
  margin:26px 0 0;padding:16px 18px;background:var(--tint);border-radius:8px;
  font-size:14px;line-height:1.65;color:#4A5D72;
}

/* =========================================================
   BENEFITS
   ========================================================= */
.benefits{background:var(--tint);padding:62px 0}
/* A wrapping row rather than a grid, so a last row that cannot fill itself —
   five cards over three columns — sits centred instead of hanging left. The
   column count is the only thing the breakpoints below change. */
.benefit-grid{--ben-cols:4;--ben-gap:18px;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--ben-gap)}
.benefit-grid>*{flex:0 1 calc((100% - (var(--ben-cols) - 1) * var(--ben-gap)) / var(--ben-cols));min-width:0}
.benefit{
  background:#fff;border-radius:9px;padding:24px 20px;border:1px solid var(--line);
  box-shadow:var(--shadow-card);
}
.benefit-ico{
  width:44px;height:44px;border-radius:9px;margin-bottom:14px;
  background:var(--navy-700);color:#fff;display:grid;place-items:center;
}
.benefit-ico svg{width:23px;height:23px}
.benefit h3{font-size:16.5px;margin:0 0 8px}
.benefit p{font-size:14.5px;line-height:1.62;margin:0}

/* =========================================================
   TYPES / OPTIONS
   ========================================================= */
.types{background:#fff;padding:62px 0}
.types-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.type{
  border:1px solid var(--line);border-radius:9px;padding:20px;
  background:#FCFDFE;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.type:hover{border-color:#C4D4E6;box-shadow:var(--shadow-card);transform:translateY(-2px)}
.type h3{font-size:16px;margin:0 0 7px}
.type p{font-size:14px;line-height:1.6;margin:0}

/* =========================================================
   PRICING
   ========================================================= */
.pricing{background:var(--warm);padding:62px 0}
/* The right-hand card (price panel / NAP panel) runs 240-310px taller than the
   copy beside it. With align-items:start that left a dead block of white space
   under the copy — the thing the client marked up. Centring turns it into even
   breathing room above and below instead of one empty rectangle at the bottom. */
.pricing-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:44px;align-items:center}
.price-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 26px 22px;box-shadow:var(--shadow-card);
}
.price-figure{
  font-family:var(--serif);font-weight:700;color:var(--navy-700);
  font-size:clamp(25px,2.6vw,33px);line-height:1.16;margin:0 0 6px;
}
.price-unit{font-size:14px;color:#5A6E85;margin:0 0 16px}
.price-card .loc-map{height:170px;object-fit:cover;border-radius:8px}
.price-src{
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.55;color:#5F7288;
}
.price-src a{color:var(--navy-700);text-decoration:underline}
.factors{display:grid;gap:10px;margin:0 0 22px}
.factors li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.6}
.factors .chk{margin-top:3px}
.price-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.svc-reviews{background:#fff;padding:62px 0}
/* A wrapping row, so five reviews over three columns leave the last two
   centred rather than hanging left. */
.reviews-grid{--rev-cols:2;--rev-gap:18px;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--rev-gap)}
.reviews-grid>*{flex:0 1 calc((100% - (var(--rev-cols) - 1) * var(--rev-gap)) / var(--rev-cols));min-width:0}
.rev{
  border:1px solid var(--line);border-radius:9px;padding:22px 22px 20px;
  background:#FCFDFE;box-shadow:var(--shadow-card);margin:0;
}
.rev .stars{display:flex;gap:3px;margin-bottom:11px}
.rev .stars svg{width:17px;height:17px;color:var(--star)}
.rev blockquote{margin:0 0 14px;font-size:14.8px;line-height:1.72;color:#3F5570}
/* The design shows the quote marks. In the static build they are typed into
   the sentence; here they belong to the component, so an editor never has to
   type a curly quote and no review can end up with one and not the other. */
.rev blockquote::before{content:'C'}
.rev blockquote::after{content:'D'}
.rev figcaption{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:700;color:var(--ink)}
.rev img{width:36px;height:36px;border-radius:50%;object-fit:cover}

/* =========================================================
   RELATED SERVICES
   ========================================================= */
.related{background:var(--cool);padding:62px 0}
.related-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.rel{
  display:flex;align-items:center;gap:12px;
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:15px 16px;
  font-size:14.5px;font-weight:500;color:#28425F;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,color .18s ease;
}
.rel:hover{border-color:var(--navy-700);color:var(--navy-700);box-shadow:var(--shadow-card);transform:translateY(-2px)}
.rel .arrow{margin-left:auto;color:var(--navy-700)}

/* =========================================================
   FAQ
   ========================================================= */
.faq{background:#fff;padding:62px 0}
.faq-list{max-width:880px;margin:0 auto;display:grid;gap:12px}
.faq-item{
  border:1px solid var(--line);border-radius:9px;background:#FCFDFE;
  overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease;
}
.faq-item[open]{border-color:#C4D4E6;box-shadow:var(--shadow-card);background:#fff}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;gap:14px;
  padding:17px 20px;font-size:16px;font-weight:700;color:var(--ink);line-height:1.5;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--navy-700)}
.faq-item summary:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.faq-mark{
  flex:0 0 auto;margin-left:auto;width:22px;height:22px;border-radius:50%;
  background:var(--tint);color:var(--navy-700);display:grid;place-items:center;
  transition:transform .2s ease,background .2s ease;
}
.faq-mark svg{width:12px;height:12px}
.faq-item[open] .faq-mark{transform:rotate(180deg);background:var(--navy-700);color:#fff}
.faq-body{padding:0 20px 19px;font-size:14.8px;line-height:1.74}
.faq-body p{margin:0 0 12px}
.faq-body p:last-child{margin-bottom:0}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1200px){
  /* the home banner stacks its form underneath below this, so there is no
     shared height left to match — each banner sizes to its own content */
  .svc-hero{min-height:0}
  .benefit-grid{--ben-cols:2}
  .related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .incl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:1000px){
  .svc-hero-grid{grid-template-columns:1fr;gap:30px}
  .svc-quote{max-width:520px}
  .svc-intro-grid{grid-template-columns:1fr;gap:30px}
  .svc-intro img{height:260px}
  .pricing-grid{grid-template-columns:1fr;gap:28px}
}

@media (max-width:860px){
  .svc-hero{padding:34px 0 34px}
  .svc-intro,.included,.signs,.benefits,.types,.pricing,.svc-reviews,.related,.faq{padding:46px 0}
  .signs-grid{grid-template-columns:1fr;gap:12px}
  .reviews-grid{--rev-cols:1}
  .sec-head{margin-bottom:26px}
}

@media (max-width:600px){
  .incl-grid,.related-grid{grid-template-columns:1fr}
  .benefit-grid{--ben-cols:1}
  .types-grid{grid-template-columns:1fr}
  .svc-quote{padding:20px 18px 18px}
  .price-card{padding:22px 18px 18px}
  .faq-item summary{font-size:15px;padding:15px 16px;gap:10px}
  .faq-body{padding:0 16px 17px}
}

/* How It Works is reused from the homepage, where a testimonial sits beside it.
   Service pages carry their own testimonials section, so that card is stripped
   out and the steps get the full width back. */
.how-grid.how-solo{grid-template-columns:1fr}
.how-solo .how-main{max-width:none}

/* ---------- column-count modifiers ----------
   These replace inline grid-template-columns that used to sit on the markup. An
   inline style beats every media query, so .benefit-grid and .reviews-grid stayed
   at 3 squashed columns on phones and pushed the page past the viewport. */
.svc-hero-grid.is-solo{grid-template-columns:minmax(0,1fr)}
.reviews-grid.cols-3{--rev-cols:3}
.benefit-grid.cols-3{--ben-cols:3}
@media (max-width:1200px){
  .benefit-grid.cols-3{--ben-cols:2}
}
@media (max-width:1000px){
  .reviews-grid.cols-3{--rev-cols:2}
}
@media (max-width:860px){
  .reviews-grid.cols-3{--rev-cols:1}
}
@media (max-width:600px){
  .benefit-grid.cols-3{--ben-cols:1}
}

/* The button under the review strip. It replaces the inline margin the static
   build carried on a bare div, so the spacing survives the section being
   switched on and off from the page's own rail. */
.reviews-cta{margin-top:26px}

/* The office card on city pages. The static build carried these as inline
   styles on the markup; they belong to the component, not to the page. */
.price-card .office-name{display:flex;gap:10px;align-items:flex-start;font-weight:700;color:var(--ink);margin:0 0 12px}
.office-pin{color:var(--navy-700);width:22px;height:22px;flex:0 0 auto}
.price-card address{font-style:normal;font-size:14.5px;line-height:1.7;margin:0 0 14px}
.price-card address a{color:var(--navy-700);font-weight:700}
.price-card .office-hours{font-size:14px;margin:0 0 14px}
/* The live map of the office inside that card. */
.price-card .office-map{margin:0 0 14px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#e5e3df}
.price-card .office-map iframe{display:block;width:100%;height:auto;aspect-ratio:4/3;border:0}
.price-card .loc-map{width:100%;height:auto;object-fit:fill;border-radius:0;mix-blend-mode:multiply}  /* the design shows the whole map, not a 170px crop of it */

.price-src>p{margin:0}