/* ==========================================================================
   Service page layout — built on the same visual language as the home page:
   navy hero, gold accents, trust strip, card grid, CTA band.
   ========================================================================== */

/* ---- hero ---- */
/* Hero: per-page photograph behind a navy scrim. The page sets --hero-img;
   the gradient below it is the fallback if that file is missing, so the hero
   never renders as bare text. Swap the file in images/hero/ to change a page. */
.pg-hero{
  position:relative;overflow:hidden;
  padding:clamp(34px,4.4vw,80px) 0;
  /* the page sets background-image inline, per page. The colour beneath is the
     fallback so the hero still reads if an image is missing. */
  background-color:var(--navy-b);
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
/* navy scrim over the photo, so white text stays legible on any image */
.pg-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg, rgba(6,18,64,.95) 0%, rgba(6,18,64,.88) 40%,
             rgba(6,18,64,.60) 70%, rgba(6,18,64,.45) 100%)}
.pg-hero::after{content:"";position:absolute;inset:auto 0 0 0;height:5px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold) 34%,transparent 34%);
  pointer-events:none}
.pg-crumb{margin:0 0 clamp(8px,1vw,16px);color:#AFC0E6;font-weight:700;
  font-size:clamp(11px,.8vw,13px)}
.pg-crumb a{color:var(--gold)}
.pg-crumb a:hover{text-decoration:underline;text-underline-offset:2px}
.pg-crumb span{margin:0 7px;opacity:.55}
.pg-h1{margin:0 0 clamp(10px,1.2vw,20px);color:#fff;font-weight:900;
  text-transform:uppercase;letter-spacing:-.5px;line-height:1.05;
  font-size:clamp(24px,3.1vw,54px);max-width:19ch}
.pg-h1::after{content:"";display:block;width:clamp(60px,7vw,120px);height:5px;
  background:var(--gold);border-radius:3px;margin-top:clamp(10px,1.1vw,18px)}
.pg-lead{margin:clamp(12px,1.4vw,22px) 0 clamp(16px,1.8vw,30px);max-width:70ch;
  color:#D8DEEC;font-size:clamp(13px,1vw,17px);line-height:1.62}
.pg-actions{display:flex;flex-wrap:wrap;gap:clamp(9px,1vw,16px)}
.pg-call,.pg-quote{display:inline-flex;align-items:center;gap:9px;border-radius:10px;
  padding:clamp(10px,1.05vw,17px) clamp(16px,1.8vw,30px);
  font-weight:900;text-transform:uppercase;font-size:clamp(11px,.86vw,15px);
  transition:filter .15s ease,transform .15s ease}
.pg-call{background:var(--gold-cta);color:var(--blue)}
.pg-call-ic{width:clamp(17px,1.5vw,24px);height:clamp(17px,1.5vw,24px);flex:none}
.pg-call-ic svg{width:100%;height:100%;display:block}
.pg-quote{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.pg-call:hover,.pg-quote:hover{filter:brightness(1.06);transform:translateY(-2px)}

/* ---- trust strip ---- */
.pg-trust{background:#F7F8FB;border-bottom:1px solid var(--line)}
.pg-trust ul{list-style:none;margin:0;padding:clamp(12px,1.3vw,22px) 0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,26px)}
.pg-trust li{display:grid;grid-template-columns:auto 1fr;gap:clamp(8px,.9vw,14px);
  align-items:center;padding-left:clamp(10px,1.2vw,22px);border-left:1px solid var(--line)}
.pg-trust li:first-child{border-left:0;padding-left:0}
.pg-tic{width:clamp(26px,2.3vw,38px);height:clamp(26px,2.3vw,38px);flex:none;color:var(--blue);
  grid-row:span 2}
.pg-tic svg{width:100%;height:100%;display:block}
.pg-trust b{display:block;font-weight:900;text-transform:uppercase;color:var(--blue);
  font-size:clamp(9.5px,.76vw,13px);line-height:1.2}
.pg-trust span:last-child{display:block;color:#5A6472;
  font-size:clamp(9px,.7vw,12px);line-height:1.3}

/* ---- body + sidebar ---- */
.pg-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);
  gap:clamp(18px,2.4vw,44px);align-items:start}
.pg-body{min-width:0}
.pg-eyebrow{display:flex;align-items:center;justify-content:center;gap:12px;
  margin:0 0 clamp(6px,.8vw,12px);font-weight:800;text-transform:uppercase;
  letter-spacing:.14em;color:var(--gold-trust);font-size:clamp(10px,.82vw,13px)}
.pg-eyebrow::before,.pg-eyebrow::after{content:"";width:clamp(26px,3vw,52px);height:2px;
  background:var(--gold-trust)}
.pg-h2{margin:clamp(20px,2.1vw,36px) 0 clamp(8px,.9vw,14px);font-weight:900;
  text-transform:uppercase;color:var(--blue);line-height:1.2;
  font-size:clamp(15px,1.3vw,24px);position:relative;padding-left:clamp(13px,1.1vw,18px)}
.pg-h2::before{content:"";position:absolute;left:0;top:.12em;bottom:.12em;width:4px;
  border-radius:2px;background:var(--gold)}
.pg-h2-center{text-align:center;padding-left:0;margin-top:0}
.pg-h2-center::before{display:none}
.pg-body > .pg-h2:first-child{margin-top:0}
.pg-body p{margin:0 0 clamp(10px,1vw,16px);color:#4A5261;
  font-size:clamp(13px,.94vw,16px);line-height:1.68}
.pg-body b{color:var(--blue);font-weight:800}
.pg-body a:hover b{text-decoration:underline;text-underline-offset:2px}
.pg-checks{list-style:none;margin:0 0 clamp(10px,1vw,16px);padding:0;display:grid;
  gap:clamp(5px,.6vw,10px);grid-template-columns:repeat(2,minmax(0,1fr))}
.pg-checks li{position:relative;padding-left:clamp(20px,1.6vw,28px);color:#4A5261;
  font-size:clamp(12px,.88vw,15px);line-height:1.45}
.pg-checks li::before{content:"";position:absolute;left:0;top:.18em;
  width:clamp(13px,1.05vw,18px);height:clamp(13px,1.05vw,18px);border-radius:50%;
  background:var(--blue) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m6 12.5 4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/72% no-repeat}

.pg-side{display:grid;gap:clamp(10px,1.1vw,18px);position:sticky;top:clamp(84px,7vw,110px)}
.pg-card{background:#fff;border:1px solid var(--line);border-top:5px solid var(--gold);
  border-radius:12px;padding:clamp(14px,1.4vw,24px);box-shadow:0 8px 22px rgba(6,26,72,.07)}
.pg-card h3{margin:0 0 clamp(7px,.8vw,12px);font-weight:900;text-transform:uppercase;
  color:var(--blue);font-size:clamp(12px,.95vw,17px)}
.pg-card p{margin:0 0 clamp(10px,1vw,16px);color:#4A5261;
  font-size:clamp(11.5px,.82vw,14px);line-height:1.55}
.pg-side-call{display:block;text-align:center;background:linear-gradient(180deg,var(--navy-a),var(--navy-b));
  color:#fff;border-radius:9px;padding:clamp(9px,.95vw,15px);font-weight:900;
  font-size:clamp(14px,1.1vw,20px);margin-bottom:8px}
.pg-side-btn{display:block;text-align:center;background:var(--gold-cta);color:var(--blue);
  border-radius:9px;padding:clamp(9px,.95vw,15px);font-weight:900;text-transform:uppercase;
  font-size:clamp(10.5px,.8vw,13.5px)}
.pg-side-call:hover,.pg-side-btn:hover{filter:brightness(1.06)}
.pg-card-list ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.pg-card-list a{display:block;padding:clamp(7px,.7vw,11px) clamp(8px,.8vw,12px);border-radius:7px;
  font-weight:700;color:var(--blue);font-size:clamp(11px,.8vw,13.5px);
  text-transform:capitalize;transition:background .15s ease,color .15s ease}
.pg-card-list a:hover{background:#F0F3FA}
.pg-card-list a.on{background:var(--blue);color:#fff}

/* ---- faq ---- */
.pg-faq{display:grid;gap:clamp(8px,.85vw,14px);
  grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.pg-q{background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:10px;overflow:hidden;transition:border-color .15s ease,box-shadow .15s ease}
.pg-q[open]{border-left-color:var(--blue);box-shadow:0 8px 20px rgba(6,26,72,.09)}
.pg-q summary{list-style:none;cursor:pointer;position:relative;
  padding:clamp(11px,1.05vw,18px) clamp(36px,3vw,50px) clamp(11px,1.05vw,18px) clamp(12px,1.2vw,20px);
  font-weight:800;color:var(--blue);font-size:clamp(12.5px,.9vw,15.5px);line-height:1.35}
.pg-q summary::-webkit-details-marker{display:none}
.pg-q summary::after{content:"";position:absolute;right:clamp(10px,1vw,16px);top:50%;
  width:clamp(19px,1.7vw,26px);height:clamp(19px,1.7vw,26px);transform:translateY(-50%);
  border-radius:50%;background:var(--gold) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 5v14M5 12h14' fill='none' stroke='%23061560' stroke-width='3' stroke-linecap='round'/></svg>") center/62% no-repeat}
.pg-q[open] summary::after{background-color:var(--blue);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12h14' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'/></svg>")}
.pg-q div{padding:0 clamp(12px,1.2vw,20px) clamp(12px,1.15vw,19px);border-top:1px solid var(--line)}
.pg-q p{margin:clamp(9px,1vw,15px) 0 0;color:#4A5261;
  font-size:clamp(12px,.86vw,15px);line-height:1.6}

/* ---- related ---- */
.pg-related ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(9px,.95vw,16px)}
.pg-related a{display:block;padding:clamp(11px,1.1vw,18px);background:#F7F8FB;
  border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:10px;
  transition:background .15s ease,transform .15s ease,border-color .15s ease}
.pg-related a b{display:block;font-weight:800;color:var(--blue);
  font-size:clamp(11px,.84vw,14.5px);text-transform:capitalize;line-height:1.3}
.pg-related a span{display:block;margin-top:2px;color:#5A6472;
  font-size:clamp(9.5px,.7vw,12px)}
.pg-related a:hover{background:var(--blue);border-color:var(--blue);transform:translateY(-2px)}
.pg-related a:hover b,.pg-related a:hover span{color:#fff}

@media (max-width:1000px){
  .pg-grid{grid-template-columns:1fr}
  .pg-side{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-trust ul{grid-template-columns:repeat(2,1fr);row-gap:14px}
  .pg-trust li:nth-child(3){border-left:0;padding-left:0}
}
@media (max-width:860px){
  .pg-faq{grid-template-columns:1fr}
  .pg-related ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .pg-checks{grid-template-columns:1fr}
  .pg-related ul{grid-template-columns:1fr}
  .pg-side{grid-template-columns:1fr}
  .pg-trust ul{grid-template-columns:1fr}
  .pg-trust li{border-left:0;padding-left:0}
}

/* ==========================================================================
   Imagery — mascot in the hero and CTA band, dog on the sidebar card,
   a material photo at the head of the body copy.
   ========================================================================== */
.pg-hero{position:relative}
.pg-hero .wrap{position:relative;z-index:3;max-width:min(1708px,calc(100% - 32px))}
.pg-hero-fig{
  position:absolute;right:clamp(8px,3vw,90px);bottom:0;z-index:2;
  height:clamp(210px,26vw,400px);width:auto;display:block;pointer-events:none;
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.34));
}
.pg-hero .pg-h1,.pg-hero .pg-lead{max-width:min(62ch,60%)}

.pg-shot{margin:0 0 clamp(14px,1.6vw,26px);border-radius:12px;overflow:hidden;
  line-height:0;border:3px solid var(--gold-border)}
.pg-shot img{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover}

.pg-card-call{position:relative;padding-top:clamp(46px,4.6vw,74px)}
.pg-card-dog{position:absolute;top:clamp(-46px,-4.4vw,-70px);right:clamp(6px,.9vw,14px);
  width:clamp(76px,7.4vw,118px);height:auto;display:block;
  filter:drop-shadow(0 8px 16px rgba(6,26,72,.28))}

@media (max-width:1100px){
  .pg-hero-fig{height:clamp(170px,22vw,260px);right:0;opacity:.5}
  .pg-hero .pg-h1,.pg-hero .pg-lead{max-width:none}
}
@media (max-width:700px){
  .pg-hero-fig{display:none}
  .pg-card-dog{width:70px;top:-40px}
  .pg-card-call{padding-top:44px}
}

/* ---- mobile usability ---- */
@media (max-width:1100px){
  .pg-eyebrow{font-size:12px!important}
  .pg-body p,.pg-checks li{font-size:14px!important}
  .pg-q summary{min-height:48px;display:flex;align-items:center;font-size:14px!important}
  .pg-q p{font-size:14px!important}
  .pg-card-list a{min-height:46px;display:flex;align-items:center;font-size:14px!important}
  .pg-related a{min-height:56px}
  .pg-related a b{font-size:14px!important}
  .pg-related a span{font-size:12px!important}
  .pg-trust b{font-size:12px!important}
  .pg-trust span:last-child{font-size:11.5px!important}
  .pg-side-call,.pg-side-btn{min-height:50px;display:flex;align-items:center;justify-content:center}
  .pg-crumb,.pg-crumb a{font-size:12px!important;min-height:44px;display:inline-flex;align-items:center}
}

/* sidebar "talk to a roofer" card: supplied artwork with clickable hotspots */
.pg-roofer{position:relative;line-height:0;border-radius:12px;overflow:hidden}
.pg-roofer img{display:block;width:100%;height:auto}
.pg-hot{position:absolute;display:block;border-radius:9px;
  transition:box-shadow .15s ease,background .15s ease}
.pg-hot:hover{background:rgba(255,255,255,.14);
  box-shadow:0 0 0 2px rgba(253,185,24,.9)}
.pg-hot:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
/* rectangles measured off the artwork */
.pg-hot-phone{left:9.7%;top:67.8%;width:85.3%;height:13.4%}
.pg-hot-est{left:9.7%;top:83.4%;width:85.5%;height:11.6%}

/* ==========================================================================
   Service page layout: the page's own content leads, so give it more room.
   ========================================================================== */
.pg-grid{grid-template-columns:minmax(0,1fr) minmax(0,320px);
  gap:clamp(18px,2.6vw,50px);padding-top:clamp(18px,2.2vw,40px)}
.pg-body > .pg-h2:first-of-type{margin-top:0}
/* lead paragraph reads larger, since it is now the first thing after the hero */
.pg-body > p:first-of-type{font-size:clamp(13.5px,1vw,17px);line-height:1.7;color:#333B4D}
/* section rhythm */
.pg-body .pg-h2{margin-top:clamp(22px,2.4vw,40px)}
.pg-body .pg-h2 + p{margin-top:0}
/* the shot sits smaller now that it is above the fold */
.pg-shot img{aspect-ratio:21/8}
@media (max-width:1000px){
  .pg-grid{grid-template-columns:1fr}
  .pg-side{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){ .pg-side{grid-template-columns:1fr} }

/* nearby cities interlink grid */
.city-near{list-style:none;margin:clamp(12px,1.4vw,22px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(7px,.8vw,13px)}
.city-near a{display:flex;align-items:center;min-height:46px;
  padding:clamp(8px,.9vw,14px) clamp(9px,1vw,15px);background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--gold);border-radius:9px;font-weight:800;color:var(--blue);
  font-size:clamp(10.5px,.78vw,13.5px);line-height:1.25;
  transition:background .15s ease,color .15s ease,transform .15s ease}
.city-near a:hover{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-2px)}
@media (max-width:1100px){ .city-near{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:860px){  .city-near{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:620px){  .city-near{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:400px){  .city-near{grid-template-columns:1fr} }