/* Roof service pages (/roofing-services/) · builds on areas.css · photos never carry text (WR-EYES-004) */
.sv-hero__g{display:grid;gap:28px;align-items:center}
@media (min-width:960px){.sv-hero__g{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px}}
.sv-hero h1{font-size:clamp(46px,7.4vw,92px)}
.sv-hero__ph{margin:0;position:relative}
.sv-hero__ph button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:18px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 30px 60px -24px rgba(0,0,0,.7);aspect-ratio:4/3}
.sv-hero__ph img{display:block;width:100%;height:100%;object-fit:cover}
.sv-hero__ph figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:12px;font-family:var(--cond);font-weight:600;letter-spacing:.06em;font-size:15px;color:var(--on-dark-mut)}
.sv-hero__ph figcaption b{padding:3px 9px;border-radius:999px;background:var(--red-600);color:#fff;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:12px}
.sv-signs{padding-top:0}
/* steps: a real sequence from Joe's own post, so the numbers carry meaning */
.sv-how h2{margin:14px 0 12px}
.sv-how .lede a{color:var(--red-600);font-weight:700}
.sv-steps{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:14px;max-width:1040px;position:relative}
.sv-step{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px;align-items:center;background:#fff;border-radius:18px;padding:20px;box-shadow:0 3px 0 #d4dbe7}
.sv-step__n{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--navy-900);color:#fff;align-self:start;
  font-family:var(--display);font-weight:900;font-size:28px;line-height:1;box-shadow:0 0 0 4px #fff,0 0 0 6px var(--red-600)}
.sv-step__tx h3{margin:2px 0 6px;font-family:var(--cond);font-weight:800;letter-spacing:.03em;text-transform:uppercase;font-size:24px;color:var(--navy-900);line-height:1.05}
.sv-step__tx p{margin:0;color:var(--text);max-width:60ch}
.sv-step__ph{grid-column:1 / -1;margin:6px 0 0}
.sv-step__ph button{aspect-ratio:16/10}
@media (min-width:820px){
  .sv-step{padding:22px 24px}
  .sv-step--ph{grid-template-columns:auto minmax(0,1fr) 300px}
  .sv-step__ph{grid-column:3;margin:0}
}
/* "read more" link to the matching advice article */
.sv-read{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-top:26px;padding:18px 20px;border-radius:16px;text-decoration:none;
  background:linear-gradient(100deg,var(--navy-900),#1d3d7a);color:#fff;box-shadow:0 3px 0 #0a1630}
.sv-read span{width:100%;font-family:var(--cond);font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:13px;color:var(--red-300)}
.sv-read b{flex:1;font-family:var(--cond);font-weight:800;letter-spacing:.03em;text-transform:uppercase;font-size:22px;line-height:1.1}
.sv-read i{font-style:normal;font-size:24px;color:var(--red-300)}
.sv-read:hover b{text-decoration:underline;text-underline-offset:4px}
/* other services */
.sv-more__h{margin-top:40px}
.sv-cards{display:grid;gap:10px;margin-top:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.sv-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sv-card{display:flex;align-items:center;gap:14px;padding:10px 16px 10px 10px;border-radius:14px;text-decoration:none;color:#fff;
  background:rgba(255,255,255,.06);box-shadow:0 0 0 1px rgba(255,255,255,.1) inset;transition:background .2s}
.sv-card:hover{background:rgba(255,255,255,.12)}
.sv-card__ph{flex:none;width:64px;height:64px;border-radius:10px;overflow:hidden;background:#0b1834}
.sv-card__ph img{width:100%;height:100%;object-fit:cover;display:block}
.sv-card__t{flex:1;font-family:var(--cond);font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:20px;line-height:1.05}
.sv-card__go{color:var(--red-300);font-size:22px}
/* hub */
.sv-bigs{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@media (min-width:820px){.sv-bigs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sv-big{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;text-decoration:none;background:#fff;box-shadow:0 3px 0 #d4dbe7;transition:transform .2s}
.sv-big:hover{transform:translateY(-2px)}
.sv-big__ph{aspect-ratio:16/10;overflow:hidden;background:#d9dfe9}
.sv-big__ph img{width:100%;height:100%;object-fit:cover;display:block}
.sv-big__tx{display:flex;flex-direction:column;gap:6px;padding:18px 20px 20px}
.sv-big__tx b{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(28px,3.4vw,36px);line-height:1;color:var(--navy-900)}
.sv-big__tx span{color:var(--text)}
.sv-big__tx i{font-style:normal;margin-top:6px;font-family:var(--cond);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:15px;color:var(--red-600)}
@media (prefers-reduced-motion:reduce){.sv-big,.sv-card{transition:none}.sv-big:hover{transform:none}}
@media (max-width:600px){.sv-step{padding:16px;gap:8px 14px}.sv-step__n{width:44px;height:44px;font-size:24px}.sv-step__tx h3{font-size:21px}}
.sv-home__all{margin:16px 0 0;font-family:var(--cond);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:16px}
.sv-home__all a{color:#fff;text-decoration:underline;text-decoration-color:var(--red-600);text-underline-offset:5px}
@media (min-width:820px){.sv-big:first-child{grid-column:1 / -1;flex-direction:row}.sv-big:first-child .sv-big__ph{flex:1.3;aspect-ratio:auto;min-height:320px}.sv-big:first-child .sv-big__tx{flex:1;justify-content:center;padding:28px 32px}}