/* Roof repair: repair-specific sections on the shared service shell. */
.roof-repair-page {
  --roof-repair-green: #3e6b55;
  --roof-repair-amber: #a56923;
  --roof-repair-alt: #dfdbd3;
  --roof-repair-accent-glow: rgba(86,99,106,.5);
  --roof-repair-replace-bg: #eef0f1;
  --hero-x: 50%;
  --hero-y: 45%;
}
.roof-repair-page .service-detail-hero::after {
  background:
    linear-gradient(to top, rgba(10,9,8,.88) 0%, rgba(10,9,8,.6) 46%, rgba(10,9,8,.08) 100%),
    linear-gradient(to right, rgba(10,9,8,.56) 0%, rgba(10,9,8,.04) 72%);
}

.roof-repair-answer { background: var(--roof-repair-alt); }
.roof-repair-outcomes { display: grid; border-block: 1px solid var(--rule); }
@media (min-width: 780px) { .roof-repair-outcomes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.roof-repair-outcome { position: relative; padding: clamp(26px, 3vw, 40px); display: grid; gap: 13px; }
.roof-repair-outcome + .roof-repair-outcome { border-top: 1px solid var(--rule); }
@media (min-width: 780px) {
  .roof-repair-outcome + .roof-repair-outcome { border-top: 0; border-left: 1px solid var(--rule); }
}
.roof-repair-outcome__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.roof-repair-outcome__icon {
  width: 42px; height: 42px; border-radius: 8px; display: grid; place-items: center;
  color: var(--orange); background: var(--service-accent-soft);
  transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.roof-repair-outcome:hover .roof-repair-outcome__icon { transform: translateY(-3px) rotate(-3deg); color: #fff; background: var(--orange); }
.roof-repair-outcome__icon svg { width: 21px; height: 21px; }
.roof-repair-outcome__status { color: var(--ink-60); font: 500 .67rem/1 var(--f-mono); }
.roof-repair-outcome h3 { font-size: clamp(1.16rem, 1.7vw, 1.42rem); letter-spacing: 0; }
.roof-repair-outcome p { color: var(--ink-60); font-size: .95rem; line-height: 1.6; }

.roof-repair-scope { background: var(--bg); }
.roof-repair-scope__head { margin-bottom: clamp(38px, 5vw, 64px); }
.roof-repair-scope__grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 940px) { .roof-repair-scope__grid { grid-template-columns: minmax(360px, .95fr) minmax(0, 1.05fr); } }
.roof-repair-scope__media {
  position: relative; isolation: isolate; width: 100%; min-width: 0;
  min-height: 460px; overflow: hidden; border-radius: 8px; background: #191816;
  display: flex; flex-direction: column;
}
@media (min-width: 940px) {
  .roof-repair-scope__media {
    position: sticky; top: calc(var(--header-h) + 24px);
    height: min(680px, calc(100svh - var(--header-h) - 48px));
    min-height: min(560px, calc(100svh - var(--header-h) - 48px));
  }
}
.roof-repair-scope__media::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border: 1px solid rgba(255,255,255,.22); border-radius: inherit; }
.roof-repair-leakmap__head {
  position: relative; z-index: 2; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  color: rgba(255,255,255,.45); font: 400 .63rem/1.3 var(--f-mono); text-transform: uppercase;
}
.roof-repair-leakmap__head > span:first-child { display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.84); }
.roof-repair-leakmap__head i { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px var(--service-accent-soft); }
.roof-repair-leakmap__stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; padding: 12px 18px 0; }
.roof-repair-leakmap__art { width: 100%; max-height: 100%; overflow: visible; }
.roof-repair-leakmap__surface,
.roof-repair-leakmap__deck,
.roof-repair-leakmap__fascia,
.roof-repair-leakmap__rafter,
.roof-repair-leakmap__wall,
.roof-repair-leakmap__ceiling { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.roof-repair-leakmap__surface { stroke: rgba(255,255,255,.82); stroke-width: 8; }
.roof-repair-leakmap__deck { stroke: rgba(255,255,255,.28); stroke-width: 5; }
.roof-repair-leakmap__fascia { stroke: rgba(255,255,255,.16); stroke-width: 3; }
.roof-repair-leakmap__rafter { stroke: rgba(255,255,255,.13); stroke-width: 3; }
.roof-repair-leakmap__wall { stroke: rgba(255,255,255,.1); stroke-width: 2; }
.roof-repair-leakmap__ceiling { stroke: rgba(255,255,255,.34); stroke-width: 5; }
.roof-repair-leakmap .roof-repair-leakmap__path { stroke: #69a7af; stroke-width: 5; filter: drop-shadow(0 0 5px rgba(105,167,175,.34)); transition-duration: 2.1s; }
.roof-repair-leakmap .roof-repair-leakmap__entry { fill: var(--orange); stroke: #191816; stroke-width: 5; filter: drop-shadow(0 0 7px var(--roof-repair-accent-glow)); }
.roof-repair-leakmap__release { fill: #69a7af; stroke: #191816; stroke-width: 4; opacity: 0; transition: opacity .45s var(--ease) 1.35s; }
.roof-repair-leakmap.is-in .roof-repair-leakmap__release { opacity: 1; }
.roof-repair-leakmap .roof-repair-leakmap__exit { fill: #69a7af; stroke: #191816; stroke-width: 5; }
.roof-repair-leakmap .roof-repair-leakmap__drip { fill: #69a7af; filter: drop-shadow(0 0 5px rgba(105,167,175,.4)); }
.roof-repair-leakmap__pulse { fill: #b9e2e5; opacity: 0; filter: drop-shadow(0 0 5px rgba(185,226,229,.85)); transition: opacity .4s var(--ease) 2s; }
.roof-repair-leakmap.is-in .roof-repair-leakmap__pulse { opacity: .95; }
.roof-repair-leakmap__label {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 5px;
  color: rgba(255,255,255,.86); background: rgba(25,24,22,.84); backdrop-filter: blur(8px);
  font: 500 .63rem/1.2 var(--f-mono); opacity: 0; transform: translateY(6px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.roof-repair-leakmap__label b { color: var(--orange); font-weight: 500; }
.roof-repair-leakmap__label--entry { top: 8%; right: 7%; transition-delay: .55s; }
.roof-repair-leakmap__label--travel { top: 34%; left: 32%; transition-delay: 1.15s; }
.roof-repair-leakmap__label--stain { right: 3%; bottom: 7%; transition-delay: 1.75s; }
.roof-repair-leakmap.is-in .roof-repair-leakmap__label { opacity: 1; transform: none; }
.roof-repair-leakmap__caption {
  position: relative; z-index: 2; margin: 0 20px 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.52); font: 400 .72rem/1.55 var(--f-mono);
}
.roof-repair-leakmap__caption span { color: rgba(255,255,255,.9); }
.roof-repair-passes { min-width: 0; display: grid; gap: 14px; }
.roof-repair-passes__head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.roof-repair-passes__head span { color: var(--ink-40); font: 400 .68rem/1 var(--f-mono); }
.roof-repair-passes__head strong { color: var(--orange); font: 500 .72rem/1 var(--f-mono); letter-spacing: 0; }
.roof-repair-pass { position: relative; padding: clamp(22px, 2.6vw, 32px); border: 1px solid var(--rule); border-radius: 8px; background: rgba(245,243,239,.58); transition: transform .26s var(--ease), background-color .26s var(--ease), border-color .26s var(--ease); }
.roof-repair-pass:hover { transform: translateX(4px); background: var(--paper); border-color: var(--service-accent-border); }
.roof-repair-pass__top { display: flex; align-items: center; gap: 14px; }
.roof-repair-pass__icon { width: 43px; height: 43px; flex: none; border-radius: 8px; display: grid; place-items: center; color: var(--orange); background: var(--service-accent-soft); transition: transform .25s var(--ease), color .25s var(--ease), background-color .25s var(--ease); }
.roof-repair-pass:hover .roof-repair-pass__icon { color: #fff; background: var(--orange); transform: translateY(-3px) rotate(-3deg); }
.roof-repair-pass__icon svg { width: 22px; height: 22px; }
.roof-repair-pass__title { min-width: 0; display: grid; gap: 5px; }
.roof-repair-pass__title span { color: var(--ink-40); font: 400 .66rem/1 var(--f-mono); }
.roof-repair-pass__title h3 { font-size: clamp(1.14rem, 1.6vw, 1.35rem); line-height: 1.18; letter-spacing: 0; }
.roof-repair-pass > p { margin-top: 16px; color: var(--ink-60); font-size: .94rem; line-height: 1.62; }
.roof-repair-pass__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 20px; border-top: 1px solid var(--rule); }
.roof-repair-pass__facts > div { min-width: 0; padding-top: 14px; }
.roof-repair-pass__facts > div + div { padding-left: 16px; border-left: 1px solid var(--rule); }
.roof-repair-pass__facts dt { color: var(--orange); font: 500 .64rem/1.2 var(--f-mono); }
.roof-repair-pass__facts dd { margin-top: 7px; color: var(--ink-80); font-size: .82rem; line-height: 1.5; }
.roof-repair-lesson {
  margin-top: clamp(36px, 5vw, 60px); padding: clamp(26px, 3vw, 38px);
  border: 1px solid var(--rule); border-left: 3px solid var(--orange); border-radius: 8px;
  background: rgba(255,255,255,.34); display: grid; gap: 20px;
}
@media (min-width: 840px) { .roof-repair-lesson { grid-template-columns: 52px minmax(260px, 1fr) minmax(0, 1.1fr); align-items: center; gap: clamp(22px, 3vw, 44px); } }
.roof-repair-lesson__icon { width: 48px; height: 48px; border-radius: 8px; display: grid; place-items: center; color: var(--orange); background: var(--night); }
.roof-repair-lesson__icon svg { width: 24px; height: 24px; }
.roof-repair-lesson h3 { margin-top: 8px; font-family: "Instrument Serif", Georgia, serif; font-size: clamp(1.65rem, 2.35vw, 2.25rem); font-weight: 400; line-height: 1.08; letter-spacing: 0; }
.roof-repair-lesson > p { max-width: 64ch; color: var(--ink-60); line-height: 1.68; }

.roof-repair-proof { background: var(--night); color: var(--paper); }
.roof-repair-proof__grid { display: grid; gap: clamp(38px, 6vw, 88px); align-items: center; }
@media (min-width: 900px) { .roof-repair-proof__grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); } }
.roof-repair-proof__copy { display: grid; gap: 22px; }
.roof-repair-proof__copy .h-lg { color: #fff; max-width: 11ch; }
.roof-repair-proof__copy .lede { color: rgba(245,243,239,.68); }
.roof-repair-proof__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.roof-repair-proof__meta span { border: 1px solid var(--rule-dark); padding: 8px 11px; border-radius: 100px; font: 400 .68rem/1 var(--f-mono); color: rgba(245,243,239,.64); }
.roof-repair-proof__sheet { border-block: 1px solid var(--rule-dark); }
.roof-repair-finding { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 15px; align-items: center; padding: clamp(18px, 2.4vw, 26px) 0; border-bottom: 1px solid var(--rule-dark); }
.roof-repair-finding:last-child { border-bottom: 0; }
.roof-repair-finding__num { font: 500 .68rem/1 var(--f-mono); color: rgba(245,243,239,.36); }
.roof-repair-finding h3 { color: #fff; font-size: 1rem; letter-spacing: 0; }
.roof-repair-finding p { margin-top: 5px; color: rgba(245,243,239,.58); font-size: .84rem; line-height: 1.45; }
.roof-repair-status { padding: 7px 9px; border-radius: 4px; font: 500 .61rem/1 var(--f-mono); white-space: nowrap; }
.roof-repair-status--repair { color: #dce3e6; background: rgba(86,99,106,.42); }
.roof-repair-status--sound { color: #c7e5d4; background: rgba(62,107,85,.28); }
.roof-repair-status--watch { color: #f4ddb8; background: rgba(165,105,35,.25); }

.roof-repair-process { background: var(--roof-repair-alt); }
.roof-repair-process .step { background: var(--bg); }
.roof-repair-process__foot { margin-top: clamp(26px, 3vw, 38px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.roof-repair-process__foot p { max-width: 52ch; color: var(--ink-60); }
.roof-repair-process__foot .btnrow { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }

.roof-repair-decision { background: var(--bg); }
.roof-repair-decision__grid { display: grid; margin-top: clamp(38px, 5vw, 66px); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
@media (min-width: 820px) { .roof-repair-decision__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.roof-repair-decision__side { position: relative; isolation: isolate; overflow: hidden; padding: clamp(28px, 4vw, 52px); background: var(--paper); transition: background-color .3s var(--ease); }
.roof-repair-decision__side--repair { background: #f1f4f0; box-shadow: inset 0 3px 0 var(--roof-repair-green); }
.roof-repair-decision__side--replace { background: var(--roof-repair-replace-bg); box-shadow: inset 0 3px 0 var(--orange); }
.roof-repair-decision__side + .roof-repair-decision__side { border-top: 1px solid var(--rule); }
@media (min-width: 820px) { .roof-repair-decision__side + .roof-repair-decision__side { border-top: 0; border-left: 1px solid var(--rule); } }
.roof-repair-decision__mark { display: flex; align-items: center; gap: 13px; margin-bottom: clamp(24px, 3vw, 36px); }
.roof-repair-decision__icon { width: 46px; height: 46px; border-radius: 8px; display: grid; place-items: center; color: #fff; transition: transform .3s var(--ease); }
.roof-repair-decision__side:hover .roof-repair-decision__icon { transform: translateY(-3px) rotate(-3deg); }
.roof-repair-decision__side--repair .roof-repair-decision__icon { background: var(--roof-repair-green); }
.roof-repair-decision__side--replace .roof-repair-decision__icon { background: var(--orange); }
.roof-repair-decision__icon svg { width: 22px; height: 22px; }
.roof-repair-decision__mark-copy { display: grid; gap: 6px; }
.roof-repair-decision__mark-copy strong { font-size: .91rem; letter-spacing: 0; }
.roof-repair-decision__side h3 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: clamp(2.1rem, 3.4vw, 3rem); letter-spacing: 0; }
.roof-repair-decision__side > p { margin-top: 12px; color: var(--ink-60); }
.roof-repair-decision__list { display: grid; margin: 26px 0 24px; border-top: 1px solid rgba(20,19,17,.11); }
.roof-repair-decision__list li { display: flex; gap: 11px; padding: 13px 0; border-bottom: 1px solid rgba(20,19,17,.11); color: var(--ink-80); font-size: .94rem; }
.roof-repair-decision__list svg { width: 16px; height: 16px; flex: none; margin-top: 5px; }
.roof-repair-decision__side--repair .roof-repair-decision__list svg { color: var(--roof-repair-green); }
.roof-repair-decision__side--replace .roof-repair-decision__list svg { color: var(--orange); }
.roof-repair-decision__link { display: flex; align-items: center; justify-content: space-between; gap: 18px; color: var(--ink); font-weight: 600; text-decoration: none; }
.roof-repair-decision__link:is(button) { width: 100%; padding: 0; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.roof-repair-decision__link svg { width: 18px; height: 18px; transition: transform .22s var(--ease); }
.roof-repair-decision__link:hover { color: var(--orange); }
.roof-repair-decision__link:hover svg { transform: translateX(4px); }

.roof-repair-page .service-credentials { background: var(--roof-repair-alt); }
.roof-repair-faq { background: var(--bg); border-top: 0; }
.roof-repair-faq .faq__list,
.roof-repair-faq .head { max-width: 940px; margin-inline: auto; }
.roof-repair-faq .head { margin-bottom: clamp(38px, 5vw, 64px); }
.roof-repair-final { padding-top: 0; background: var(--bg); }

@media (max-width: 899px) {
  .roof-repair-page { --hero-x: 56%; --hero-y: 50%; }
  .roof-repair-page .service-detail-hero::after {
    background: linear-gradient(to bottom, rgba(10,9,8,.38) 0%, rgba(10,9,8,.64) 42%, rgba(10,9,8,.9) 78%);
  }
  .roof-repair-scope__media { min-height: 470px; }
  .roof-repair-leakmap__stage { padding-inline: 10px; }
  .roof-repair-leakmap__label { font-size: .57rem; }
  .roof-repair-pass__facts { grid-template-columns: 1fr; }
  .roof-repair-pass__facts > div + div { padding-left: 0; padding-top: 14px; margin-top: 14px; border-left: 0; border-top: 1px solid var(--rule); }
  .roof-repair-finding { grid-template-columns: auto minmax(0,1fr); }
  .roof-repair-status { grid-column: 2; justify-self: start; }
  .roof-repair-process__foot,
  .roof-repair-process__foot .btnrow { align-items: stretch; }
  .roof-repair-process__foot .btnrow { width: 100%; flex-direction: column; }
  .roof-repair-process__foot .btn,
  .roof-repair-process__foot .link { width: 100%; justify-content: center; }
}
@media (max-width: 839px) {
  .roof-repair-lesson { width: 100%; padding: 24px 20px 26px; grid-template-columns: 44px minmax(0,1fr); column-gap: 14px; row-gap: 18px; }
  .roof-repair-lesson.rv { opacity: 1; pointer-events: auto; transform: none; }
  .roof-repair-lesson__icon { width: 44px; height: 44px; }
  .roof-repair-lesson__heading { display: contents; }
  .roof-repair-lesson .eyebrow { grid-column: 2; align-self: center; }
  .roof-repair-lesson h3 { grid-column: 1 / -1; margin-top: 0; font-size: clamp(1.65rem, 7vw, 1.95rem); }
  .roof-repair-lesson > p { grid-column: 1 / -1; max-width: none; font-size: .96rem; }
}
@media (max-width: 420px) {
  .roof-repair-leakmap__head { padding: 15px 16px; }
  .roof-repair-leakmap__head > span:last-child { display: none; }
  .roof-repair-leakmap__caption { margin: 0 16px 16px; font-size: .66rem; }
  .roof-repair-leakmap__label--entry { right: 3%; }
  .roof-repair-leakmap__label--travel { top: 36%; left: 27%; }
}
@media (hover: none) {
  .roof-repair-outcome:hover .roof-repair-outcome__icon,
  .roof-repair-pass:hover .roof-repair-pass__icon,
  .roof-repair-decision__side:hover .roof-repair-decision__icon { transform: none; }
  .roof-repair-pass:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .roof-repair-leakmap__pulse { display: none; }
  .roof-repair-leakmap__release { opacity: 1; transition: none; }
  .roof-repair-leakmap__label { opacity: 1; transform: none; transition: none; }
  .roof-repair-outcome__icon, .roof-repair-pass__icon, .roof-repair-decision__icon { transform: none !important; transition: none !important; }
}