/* Shared visual system for replacement, claims, emergency, and commercial pages. */
.journey-page {
  --journey-alt: #dfdbd3;
  --journey-signal: #4d7188;
  --journey-soft: rgba(77,113,136,.1);
}
.journey-page--replacement { --journey-signal: #55705e; --journey-soft: rgba(85,112,94,.1); --service-accent: #55705e; --service-accent-hover: #435949; --service-accent-soft: rgba(85,112,94,.1); --service-accent-border: rgba(85,112,94,.38); --service-accent-shadow: rgba(85,112,94,.25); --hero-x: 52%; --hero-y: 48%; }
.journey-page--claims { --journey-signal: #4d7188; --journey-soft: rgba(77,113,136,.1); --service-accent: #4d7188; --service-accent-hover: #3d5c70; --service-accent-soft: rgba(77,113,136,.1); --service-accent-border: rgba(77,113,136,.38); --service-accent-shadow: rgba(77,113,136,.25); --hero-x: 50%; --hero-y: 45%; }
.journey-page--emergency { --journey-signal: #b54d33; --journey-soft: rgba(181,77,51,.1); --service-accent: #b54d33; --service-accent-hover: #923d2a; --service-accent-soft: rgba(181,77,51,.1); --service-accent-border: rgba(181,77,51,.38); --service-accent-shadow: rgba(181,77,51,.25); }
.journey-page--emergency .service-detail-hero { background: #171b17; }
.journey-page--emergency .service-detail-hero__img {
  object-fit: cover;
  object-position: center 43%;
  transform: none;
  animation: none;
}
.journey-page--emergency .service-detail-hero::after {
  background:
    linear-gradient(to top, rgba(10,9,8,.84) 0%, rgba(10,9,8,.54) 46%, rgba(10,9,8,.06) 100%),
    linear-gradient(to right, rgba(10,9,8,.5) 0%, rgba(10,9,8,.02) 72%);
}
@media (max-width: 899px) {
  .journey-page--emergency .service-detail-hero__img { object-fit: contain; object-position: center top; }
  .journey-page--emergency .service-detail-hero::after {
    background: linear-gradient(to bottom, rgba(10,9,8,.08) 0%, rgba(10,9,8,.18) 28%, rgba(10,9,8,.82) 58%, #171b17 85%);
  }
}
.journey-page--commercial { --journey-signal: #3e6b55; --journey-soft: rgba(62,107,85,.1); --service-accent: #3e6b55; --service-accent-hover: #315541; --service-accent-soft: rgba(62,107,85,.1); --service-accent-border: rgba(62,107,85,.38); --service-accent-shadow: rgba(62,107,85,.25); --hero-x: 54%; --hero-y: 34%; }
.journey-page main,
.journey-page .service-mobile-call {
  --orange: var(--service-accent);
  --orange-lo: var(--service-accent-hover);
}

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

.journey-feature { background: var(--bg); }
.journey-feature > .wrap > .head { margin-bottom: clamp(38px,5vw,64px); }
.journey-feature__grid { display: grid; gap: clamp(28px,4vw,56px); align-items: start; }
@media (min-width: 940px) { .journey-feature__grid { grid-template-columns: minmax(360px,.95fr) minmax(0,1.05fr); } }
.journey-visual { position: relative; isolation: isolate; min-height: 470px; overflow: hidden; border-radius: 8px; color: #fff; background: #191816; display: flex; flex-direction: column; }
.journey-visual::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border: 1px solid rgba(255,255,255,.2); border-radius: inherit; }
@media (min-width: 940px) { .journey-visual { 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)); } }
.journey-visual__top { 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; }
.journey-visual__top strong { display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.86); font-weight: 500; }
.journey-visual__top i { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px var(--journey-soft); }
.journey-visual__stage { position: relative; flex: 1; min-height: 0; padding: clamp(20px,3vw,34px); }
.journey-visual__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); }
.journey-visual__caption strong { color: rgba(255,255,255,.9); font-weight: 500; }
.journey-passes { min-width: 0; display: grid; gap: 14px; }
.journey-passes__head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.journey-passes__head span { color: var(--ink-40); font: 400 .68rem/1 var(--f-mono); }
.journey-passes__head strong { color: var(--orange); font: 500 .72rem/1 var(--f-mono); }
.journey-pass { 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), border-color .26s var(--ease), background-color .26s var(--ease); }
.journey-pass:hover { transform: translateX(4px); border-color: var(--service-accent-border); background: var(--paper); }
.journey-pass__top { display: flex; align-items: center; gap: 14px; }
.journey-pass__icon { width: 43px; height: 43px; flex: none; border-radius: 8px; display: grid; place-items: center; color: var(--journey-signal); background: var(--journey-soft); transition: transform .25s var(--ease), color .25s var(--ease), background-color .25s var(--ease); }
.journey-pass:hover .journey-pass__icon { color: #fff; background: var(--journey-signal); transform: translateY(-3px) rotate(-3deg); }
.journey-pass__icon svg { width: 22px; height: 22px; }
.journey-pass__title { display: grid; gap: 5px; }
.journey-pass__title span { color: var(--ink-40); font: 400 .65rem/1 var(--f-mono); }
.journey-pass__title h3 { font-size: clamp(1.14rem,1.6vw,1.35rem); line-height: 1.18; letter-spacing: 0; }
.journey-pass > p { margin-top: 16px; color: var(--ink-60); font-size: .94rem; line-height: 1.62; }
.journey-pass__facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 20px; border-top: 1px solid var(--rule); }
.journey-pass__facts > div { padding-top: 14px; }
.journey-pass__facts > div + div { padding-left: 16px; border-left: 1px solid var(--rule); }
.journey-pass__facts dt { color: var(--journey-signal); font: 500 .63rem/1.2 var(--f-mono); }
.journey-pass__facts dd { margin-top: 7px; color: var(--ink-80); font-size: .82rem; line-height: 1.5; }
.journey-note { margin-top: clamp(34px,5vw,58px); padding: clamp(25px,3vw,38px); border: 1px solid var(--rule); border-left: 3px solid var(--journey-signal); border-radius: 8px; background: rgba(255,255,255,.35); display: grid; gap: 18px; }
@media (min-width: 840px) { .journey-note { grid-template-columns: 48px minmax(240px,.9fr) minmax(0,1.1fr); align-items: center; gap: clamp(20px,3vw,42px); } }
.journey-note__icon { width: 46px; height: 46px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: var(--journey-signal); transition: transform .25s var(--ease); }
.journey-note:hover .journey-note__icon { transform: translateY(-3px) rotate(-3deg); }
.journey-note__icon svg { width: 22px; height: 22px; }
.journey-note h3 { margin-top: 8px; font: 400 clamp(1.65rem,2.35vw,2.25rem)/1.08 "Instrument Serif",Georgia,serif; letter-spacing: 0; }
.journey-note > p { color: var(--ink-60); line-height: 1.68; }

.journey-proof { background: var(--night); color: var(--paper); }
.journey-proof__grid { display: grid; gap: clamp(38px,6vw,88px); align-items: center; }
@media (min-width: 900px) { .journey-proof__grid { grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); } }
.journey-proof__copy { display: grid; gap: 21px; }
.journey-proof__copy .h-lg { max-width: 12ch; color: #fff; }
.journey-proof__copy .lede { color: rgba(245,243,239,.66); }
.journey-proof__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.journey-proof__tags span { padding: 8px 11px; border: 1px solid var(--rule-dark); border-radius: 100px; color: rgba(245,243,239,.64); font: 400 .67rem/1 var(--f-mono); }
.journey-report { border-block: 1px solid var(--rule-dark); }
.journey-report__row { 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); }
.journey-report__row:last-child { border-bottom: 0; }
.journey-report__num { color: rgba(245,243,239,.34); font: 500 .67rem/1 var(--f-mono); }
.journey-report h3 { color: #fff; font-size: 1rem; letter-spacing: 0; }
.journey-report p { margin-top: 5px; color: rgba(245,243,239,.56); font-size: .84rem; line-height: 1.45; }
.journey-status { padding: 7px 9px; border-radius: 4px; white-space: nowrap; font: 500 .6rem/1 var(--f-mono); color: #fff; background: var(--journey-signal); }
.journey-status--watch { color: #f4ddb8; background: rgba(165,105,35,.28); }
.journey-status--sound { color: #c7e5d4; background: rgba(62,107,85,.3); }

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

.journey-decision { background: var(--bg); }
.journey-options { display: grid; margin-top: clamp(38px,5vw,66px); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.journey-options--2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.journey-options--4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.journey-option { min-width: 0; padding: clamp(25px,3vw,42px); background: var(--paper); box-shadow: inset 0 3px 0 var(--journey-signal); }
.journey-option + .journey-option { border-left: 1px solid var(--rule); }
.journey-option:nth-child(even) { background: rgba(255,255,255,.35); box-shadow: inset 0 3px 0 var(--orange); }
.journey-option__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.journey-option__icon { width: 42px; height: 42px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: var(--journey-signal); transition: transform .25s var(--ease); }
.journey-option:nth-child(even) .journey-option__icon { background: var(--orange); }
.journey-option:hover .journey-option__icon { transform: translateY(-3px) rotate(-3deg); }
.journey-option__icon svg { width: 20px; height: 20px; }
.journey-option__k { color: var(--ink-40); font: 500 .62rem/1 var(--f-mono); }
.journey-option h3 { margin-top: 24px; font: 400 clamp(1.8rem,2.7vw,2.55rem)/1.04 "Instrument Serif",Georgia,serif; letter-spacing: 0; }
.journey-option > p { margin-top: 12px; color: var(--ink-60); font-size: .91rem; line-height: 1.58; }
.journey-option ul { display: grid; margin-top: 22px; border-top: 1px solid var(--rule); }
.journey-option li { padding: 11px 0; border-bottom: 1px solid var(--rule); color: var(--ink-80); font-size: .84rem; line-height: 1.45; }

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

/* Replacement: exploded roof assembly. */
.assembly { position: absolute; inset: 22px; display: grid; place-items: center; perspective: 900px; }
.assembly__layer { position: absolute; width: 76%; height: 20%; border: 1px solid rgba(255,255,255,.2); transform: rotateX(58deg) rotateZ(-7deg); border-radius: 4px; transition: transform .7s var(--ease), background-color .3s var(--ease); }
.assembly__layer::after { content: attr(data-layer); position: absolute; right: -8px; top: 50%; transform: translate(100%,-50%) rotateZ(7deg); color: rgba(255,255,255,.7); font: 500 .59rem/1 var(--f-mono); white-space: nowrap; }
.assembly__layer--finish { background: #9a7968; transform: translateY(-116px) rotateX(58deg) rotateZ(-7deg); }
.assembly__layer--under { background: #4d5a5b; transform: translateY(-55px) rotateX(58deg) rotateZ(-7deg); }
.assembly__layer--deck { background: #866b52; transform: translateY(6px) rotateX(58deg) rotateZ(-7deg); }
.assembly__layer--frame { background: #5a4435; transform: translateY(67px) rotateX(58deg) rotateZ(-7deg); }
.assembly__base { position: absolute; bottom: 13%; width: 62%; height: 2px; background: rgba(255,255,255,.15); }
.assembly__measure { position: absolute; left: 7%; bottom: 9%; color: rgba(255,255,255,.42); font: 400 .6rem/1 var(--f-mono); }
.journey-visual.is-in .assembly__layer--finish { animation: layer-float 5s ease-in-out infinite; }
@keyframes layer-float { 0%,100% { transform: translateY(-116px) rotateX(58deg) rotateZ(-7deg); } 50% { transform: translateY(-124px) rotateX(58deg) rotateZ(-7deg); } }

/* Claims: evidence packet. */
.claim-board { height: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; align-content: center; }
.claim-card { min-height: 118px; padding: 17px; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; background: rgba(255,255,255,.045); display: grid; align-content: space-between; gap: 18px; opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease), border-color .25s var(--ease); }
.journey-visual.is-in .claim-card { opacity: 1; transform: none; }
.claim-card:nth-child(2) { transition-delay: .12s; }.claim-card:nth-child(3) { transition-delay: .24s; }.claim-card:nth-child(4) { transition-delay: .36s; }
.claim-card:hover { border-color: var(--service-accent-border); }
.claim-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: rgba(255,255,255,.44); font: 400 .59rem/1 var(--f-mono); }
.claim-card__top svg { width: 18px; height: 18px; color: var(--orange); }
.claim-card strong { color: #fff; font-size: .88rem; }
.claim-card span { color: rgba(255,255,255,.55); font-size: .76rem; line-height: 1.4; }
.claim-board__line { grid-column: 1/-1; height: 2px; background: linear-gradient(90deg,var(--orange) 0 25%,rgba(255,255,255,.15) 25% 100%); }

/* Emergency: triage ladder. */
.triage { height: 100%; display: grid; align-content: center; gap: 10px; }
.triage__row { position: relative; padding: 18px 18px 18px 58px; border: 1px solid rgba(255,255,255,.13); border-radius: 6px; background: rgba(255,255,255,.04); opacity: 0; transform: translateX(-10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.journey-visual.is-in .triage__row { opacity: 1; transform: none; }
.triage__row:nth-child(2) { transition-delay: .14s; }.triage__row:nth-child(3) { transition-delay: .28s; }
.triage__num { position: absolute; left: 17px; top: 18px; color: var(--orange); font: 500 .65rem/1 var(--f-mono); }
.triage__row strong { display: block; color: #fff; font-size: .9rem; }
.triage__row p { margin-top: 6px; color: rgba(255,255,255,.55); font-size: .77rem; line-height: 1.45; }
.triage__signal { position: absolute; right: 17px; top: 17px; width: 8px; height: 8px; border-radius: 50%; background: var(--journey-signal); box-shadow: 0 0 0 5px rgba(181,77,51,.12); }
.triage__line { width: 1px; height: 26px; margin-left: 28px; background: rgba(255,255,255,.16); }

/* Commercial: low-slope roof plan. */
.roofplan { position: relative; height: 100%; min-height: 330px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.035); }
.roofplan__zone { position: absolute; border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.42); font: 400 .57rem/1 var(--f-mono); }
.roofplan__zone--a { inset: 8% 52% 52% 7%; }.roofplan__zone--b { inset: 8% 7% 52% 50%; }.roofplan__zone--c { inset: 50% 36% 8% 7%; }.roofplan__zone--d { inset: 50% 7% 8% 62%; }
.roofplan__zone span { position: absolute; left: 10px; top: 10px; }
.roofplan__unit { position: absolute; width: 17%; aspect-ratio: 1.35; border: 1px solid rgba(255,255,255,.3); background: #353431; box-shadow: 5px 5px 0 rgba(0,0,0,.18); }
.roofplan__unit--1 { left: 20%; top: 24%; }.roofplan__unit--2 { right: 17%; top: 27%; }.roofplan__unit--3 { left: 42%; bottom: 19%; }
.roofplan__drain { position: absolute; width: 14px; height: 14px; border: 3px solid #69a7af; border-radius: 50%; animation: drain-pulse 3s ease-in-out infinite; }
.roofplan__drain--1 { right: 11%; bottom: 13%; }.roofplan__drain--2 { left: 11%; bottom: 13%; }
.roofplan__path { position: absolute; left: 12%; right: 12%; bottom: 15%; border-top: 1px dashed rgba(105,167,175,.65); }
@keyframes drain-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(105,167,175,.2); } 50% { box-shadow: 0 0 0 8px rgba(105,167,175,0); } }

@media (max-width: 1040px) { .journey-options--4 { grid-template-columns: repeat(2,minmax(0,1fr)); } .journey-options--4 .journey-option:nth-child(3) { border-left: 0; border-top: 1px solid var(--rule); } .journey-options--4 .journey-option:nth-child(4) { border-top: 1px solid var(--rule); } }
@media (max-width: 899px) {
  .journey-page { --hero-x: 56%; --hero-y: 50%; }
  .journey-visual { min-height: 470px; }
  .journey-pass__facts { grid-template-columns: 1fr; }
  .journey-pass__facts > div + div { padding-left: 0; padding-top: 14px; margin-top: 14px; border-left: 0; border-top: 1px solid var(--rule); }
  .journey-report__row { grid-template-columns: auto minmax(0,1fr); }
  .journey-status { grid-column: 2; justify-self: start; }
  .journey-process__foot, .journey-process__actions { align-items: stretch; }
  .journey-process__actions { width: 100%; flex-direction: column; }
  .journey-process__actions .btn, .journey-process__actions .link { width: 100%; justify-content: center; }
}
@media (max-width: 760px) {
  .journey-options--2, .journey-options--4 { grid-template-columns: 1fr; }
  .journey-option + .journey-option, .journey-options--4 .journey-option:nth-child(3) { border-left: 0; border-top: 1px solid var(--rule); }
  .claim-board { grid-template-columns: 1fr; overflow: auto; align-content: start; }
  .claim-board__line { display: none; }
}
@media (max-width: 420px) {
  .journey-visual__top { padding: 15px 16px; }
  .journey-visual__top > span { display: none; }
  .journey-visual__stage { padding: 18px 14px; }
  .journey-visual__caption { margin: 0 16px 16px; font-size: .66rem; }
  .assembly__layer { width: 68%; }
  .assembly__layer::after { right: -4px; font-size: .5rem; }
}
@media (hover: none) {
  .journey-outcome:hover .journey-outcome__icon,
  .journey-pass:hover .journey-pass__icon,
  .journey-note:hover .journey-note__icon,
  .journey-option:hover .journey-option__icon { transform: none; }
  .journey-pass:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .assembly__layer--finish, .roofplan__drain { animation: none !important; }
  .claim-card, .triage__row { opacity: 1; transform: none; transition: none; }
  .journey-outcome__icon, .journey-pass__icon, .journey-note__icon, .journey-option__icon { transform: none !important; transition: none !important; }
}