/* Home services world: the blueprint, the estimate, the forecast. */

/* ── HERO: blueprint sheet ────────────── */
.wd-hero--bp .gx-hero-bg { background:
    radial-gradient(ellipse 60% 60% at 75% 40%, rgba(25,114,138,.45), transparent 70%),
    linear-gradient(rgba(106,205,224,.05) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(106,205,224,.05) 1px, transparent 1px) 0 0 / 24px 24px; }
.wd-hero--bp .wd-hero-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 44px; }
.wt-bp { position: relative; padding: 16px 0 24px; }
.wt-bp-sheet { position: relative; border-radius: 18px; background: linear-gradient(160deg, #0E2A40, #0A1D2E); border: 1px solid rgba(106,205,224,.28); box-shadow: 0 40px 100px rgba(0,0,0,.5), inset 0 0 0 6px rgba(106,205,224,.04); overflow: hidden; }
.wt-bp-sheet::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(106,205,224,.18); border-radius: 10px; pointer-events: none; }
.wt-bp-svg { display: block; width: 100%; height: auto; }
.wt-bp-l { fill: none; stroke: #6ACDE0; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wt-bp-l .wt-bp-d { stroke-dasharray: 5 5; opacity: .75; }
.wt-bp-l .wt-bp-f { fill: rgba(106,205,224,.08); }
.wt-bp-l .wt-bp-dim { stroke-width: 1; opacity: .6; }
.wt-bp-txt { fill: #6ACDE0; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; opacity: .75; }
.wt-bp-tb rect, .wt-bp-tb path { fill: rgba(11,18,32,.5); stroke: rgba(106,205,224,.5); stroke-width: 1; }
.wt-bp-tb text { fill: #C4D0DD; font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; }
.wt-bp-sheet .wt-bp-l > * { stroke-dasharray: 900; stroke-dashoffset: 900; animation: bpDraw 2.6s cubic-bezier(.4,0,.2,1) forwards; }
.wt-bp-sheet .wt-bp-l > .wt-bp-d { stroke-dasharray: 5 5; stroke-dashoffset: 0; animation: bpFade 1s ease 1.2s both; }
@keyframes bpDraw { to { stroke-dashoffset: 0; } }
@keyframes bpFade { from { opacity: 0; } to { opacity: .75; } }
.wt-bp-pins { position: absolute; inset: 0; }
.wt-bp-pin { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 26px; height: 26px; margin: -13px 0 0 -13px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid #6ACDE0; background: #0B1220; color: #6ACDE0; cursor: pointer; font-family: var(--font-heading); font-size: .66rem; font-weight: 800; box-shadow: 0 4px 12px rgba(0,0,0,.4); opacity: 0; animation: bpPin .4s cubic-bezier(.16,1,.3,1) forwards; animation-delay: calc(1.4s + var(--x) * 12ms); transition: transform .2s, background .2s, color .2s; }
@keyframes bpPin { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.wt-bp-pin:hover { transform: scale(1.15); }
.wt-bp-pin.on { background: #3CC9A8; border-color: #fff; color: #0B1220; transform: scale(1.2); z-index: 2; }
.wt-bp-pin.on::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #3CC9A8; animation: wxRing 1.8s ease-out infinite; }
.wt-bp-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "k b l" "n b l" "c b l"; align-items: center; gap: 2px 18px; margin-top: 12px; padding: 14px 18px; border-radius: 16px; background: rgba(11,18,32,.92); border: 1px solid rgba(106,205,224,.3); box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.wt-bp-card-k { grid-area: k; display: block; font-family: var(--font-mono); font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; color: #9AA8BC; }
.wt-bp-card-k b { color: #3CC9A8; }
.wt-bp-card-n { grid-area: n; display: block; margin: 2px 0 0; font-family: var(--font-heading); font-size: 1.1rem; font-weight: 800; color: #fff; }
.wt-bp-card-c { grid-area: c; display: block; white-space: nowrap; font-family: var(--font-heading); font-size: .84rem; font-weight: 700; color: #3CC9A8; }
.wt-bp-card p { grid-area: b; margin: 0; padding-left: 18px; border-left: 1px solid rgba(238,241,246,.1); font-size: .74rem; line-height: 1.5; color: #C4D0DD; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wt-bp-card-l { grid-area: l; display: flex; flex-direction: column; gap: 5px; }
.wt-bp-card .ix-l { background: rgba(238,241,246,.06); border-color: rgba(238,241,246,.14); color: #EEF1F6; }
.wt-bp-card .ix-l:hover { border-color: #6ACDE0; color: #6ACDE0; }

/* ── Trade list ───────────────────────── */
.wt-tl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.wt-tl-r { display: grid; grid-template-columns: 28px 30px minmax(0, 1fr) auto; grid-template-areas: "n i a c" "n i l l"; align-items: center; gap: 2px 12px; padding: 14px 4px; border-top: 1px solid var(--gx-line); }
.wt-tl-n { grid-area: n; font-family: var(--font-mono); font-size: .66rem; color: var(--gx-dim); }
.wt-tl-r .ix-ico { grid-area: i; width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: color-mix(in srgb, #34A3BC 14%, transparent); color: var(--gx-accent); }
.wt-tl-a { grid-area: a; font-family: var(--font-heading); font-size: .98rem; font-weight: 800; letter-spacing: -.015em; color: var(--gx-ink); text-decoration: none; }
.wt-tl-a:hover { color: var(--gx-accent); }
.wt-tl-c { grid-area: c; font-family: var(--font-heading); font-size: .84rem; font-weight: 700; color: var(--gx-body); white-space: nowrap; }
.wt-tl-r nav { grid-area: l; display: flex; gap: 5px; margin-top: 6px; }
.wt-tl-r.on .wt-tl-n { color: var(--gx-accent); }

/* ── Estimate ─────────────────────────── */
.wt-es { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 28px; align-items: start; }
.wt-es-in { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 26px; border-radius: 22px; background: var(--gx-card); border: 1px solid var(--gx-line); box-shadow: var(--gx-shadow); }
.wt-es-in-h { grid-column: 1 / -1; font-family: var(--font-heading); font-size: 1.05rem; font-weight: 800; color: var(--gx-ink); }
html body .wt-es select#wd-c-ind { height: 50px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--gx-line) !important; background: var(--gx-bg2) !important; color: var(--gx-ink) !important; font-family: var(--font-heading); font-size: .95rem; font-weight: 700; }
html body .wt-es input[type="range"]#wd-c-bud { width: 100%; height: 8px; border-radius: 99px; -webkit-appearance: none; appearance: none; background: linear-gradient(90deg, #19728A, #34A3BC var(--p, 13%), var(--gx-bg2) var(--p, 13%)) !important; border: 1px solid var(--gx-line) !important; outline: 0; }
.wt-es input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid #19728A; box-shadow: 0 4px 12px rgba(11,18,32,.25); cursor: pointer; }
.wt-es input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid #19728A; cursor: pointer; }
.wt-es-paper { position: relative; padding: 30px 32px 26px; border-radius: 6px; background: #FFFDF8; color: #283850; box-shadow: 0 30px 70px rgba(11,18,32,.22), 0 2px 0 #E9E3D6; transform: rotate(.6deg); font-family: var(--font-body); }
.wt-es-paper::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 16px; background: radial-gradient(circle at 8px 0, transparent 7px, #FFFDF8 7.5px) 0 8px / 16px 16px repeat-x; }
.wt-es-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 16px; border-bottom: 2px solid #0B1220; }
.wt-es-brand { display: block; font-family: var(--font-heading); font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; color: #0B1220; }
.wt-es-top span { font-size: .74rem; color: #5B6B82; }
.wt-es-no { text-align: right; }
.wt-es-no span, .wt-es-for span { display: block; font-family: var(--font-mono); font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; color: #5B6B82; }
.wt-es-no b { font-family: var(--font-mono); font-size: .86rem; color: #0B1220; }
.wt-es-for { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px 0; border-bottom: 1px dashed #C9C2B2; }
.wt-es-for b { display: block; margin-top: 3px; font-family: var(--font-heading); font-size: .86rem; color: #0B1220; }
.wt-es-t { width: 100%; border-collapse: collapse; margin: 6px 0 0; font-size: .86rem; }
.wt-es-t th { padding: 10px 0 8px; font-family: var(--font-mono); font-size: .56rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #5B6B82; text-align: right; border-bottom: 1px solid #E3DDCF; }
.wt-es-t th:first-child, .wt-es-t td:first-child { text-align: left; }
.wt-es-t td { padding: 12px 0; text-align: right; border-bottom: 1px solid #EFEAE0; color: #0B1220; font-family: var(--font-mono); font-size: .86rem; }
.wt-es-t td:first-child { font-family: var(--font-body); font-weight: 600; }
.wt-es-t td em { display: block; font-style: normal; font-weight: 400; font-size: .72rem; color: #5B6B82; }
.wt-es-t td:last-child em { display: inline; }
.wt-es-t .wt-es-hi td { background: rgba(60,201,168,.1); }
.wt-es-t .wt-es-hi td:first-child { padding-left: 8px; }
.wt-es-t .wt-es-hi td:last-child { padding-right: 8px; }
.wt-es-sum { display: grid; grid-template-columns: 1fr 1fr minmax(120px, auto); gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 2px solid #0B1220; }
.wt-es-sum span { display: block; font-family: var(--font-mono); font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; color: #5B6B82; }
.wt-es-sum b { display: block; margin-top: 4px; font-family: var(--font-heading); font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; color: #0B1220; }
.wt-es-roi { padding: 8px 14px; border-radius: 10px; background: #0B1220; }
.wt-es-roi span { color: #9AA8BC; }
.wt-es-roi b { color: #3CC9A8; font-size: 1.6rem; }
.wt-es-roi-n { margin: 10px 0 0; font-size: .74rem; color: #5B6B82; }
.wt-es-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-top: 22px; }
.wt-es-sign { flex: 1; display: flex; align-items: flex-end; gap: 10px; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: #5B6B82; }
.wt-es-sign i { flex: 1; height: 1px; background: #9AA8BC; margin-bottom: 3px; }
.wt-es-stamp { padding: 6px 10px; border: 2px solid #19728A; border-radius: 6px; font-family: var(--font-mono); font-size: .58rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #19728A; transform: rotate(-4deg); opacity: .85; }

/* ── Dispatch ─────────────────────────── */
.wt-ds { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.wt-ds-copy h2 { font-family: var(--font-heading); font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; color: #fff !important; margin: 16px 0 18px; }
.wt-ds-copy > p { margin: 0 0 20px; font-size: 1rem; line-height: 1.7; color: #C4D0DD; }
.wt-ds-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.wt-ds-list li { padding-left: 18px; border-left: 2px solid #34A3BC; }
.wt-ds-list b { display: block; font-family: var(--font-heading); font-size: .96rem; color: #fff; }
.wt-ds-list span { font-size: .86rem; color: #9AA8BC; }
.wt-ds .wd-feed { padding: 0; }

/* ── Forecast ─────────────────────────── */
.wt-fc-strip { list-style: none; margin: 0; padding: 4px 2px 14px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: 16px; scrollbar-width: thin; }
.wt-fc-t { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px 14px; border-radius: 18px; background: var(--gx-card); border: 1px solid var(--gx-line); scroll-snap-align: start; min-height: 230px; }
.wt-fc-m { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gx-dim); }
.wt-fc-g { width: 34px; height: 34px; color: var(--gx-accent); }
.wt-fc-l { font-family: var(--font-heading); font-size: .92rem; color: var(--gx-ink); }
.wt-fc-bar { display: block; height: 5px; border-radius: 99px; background: var(--gx-bg2); overflow: hidden; }
.wt-fc-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #19728A, #3CC9A8); }
.wt-fc-p, .wt-fc-b { font-size: .74rem; line-height: 1.4; color: var(--gx-body); }
.wt-fc-p em, .wt-fc-b em { display: block; font-style: normal; font-family: var(--font-mono); font-size: .54rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gx-dim); }
.wt-fc-p { font-weight: 700; color: var(--gx-ink); }
.wt-fc-t.is-now { border-color: #3CC9A8; box-shadow: 0 0 0 3px rgba(60,201,168,.18); }
.wt-fc-t.is-now::before { content: 'This month'; position: absolute; top: 14px; right: 12px; padding: 3px 8px; border-radius: 99px; background: #3CC9A8; color: #0B1220; font-family: var(--font-mono); font-size: .5rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

/* ── RESPONSIVE ───────────────────────── */
@media (max-width: 1100px) {
    .wt-fc-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .wd-hero--bp .wd-hero-grid { grid-template-columns: minmax(0, 1fr); }
    .wt-bp { max-width: 820px; }
    .wt-es, .wt-ds { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .wt-es-paper { transform: none; }
}
@media (max-width: 760px) {
    .wt-bp-pin { width: 20px; height: 20px; margin: -10px 0 0 -10px; font-size: .5rem; border-width: 1px; }
    .wt-bp-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "k" "n" "c" "b" "l"; }
    .wt-bp-card p { padding: 6px 0 4px; border: 0; }
    .wt-bp-card-l { flex-direction: row; flex-wrap: wrap; }
    .wt-bp-tb, .wt-bp-txt { display: none; }
    .wt-tl { grid-template-columns: minmax(0, 1fr); }
    .wt-tl-r { grid-template-columns: 22px 28px minmax(0, 1fr) auto; gap: 2px 10px; }
    .wt-es-in { grid-template-columns: 1fr; padding: 18px; }
    .wt-es-paper { padding: 22px 16px 18px; }
    .wt-es-for { grid-template-columns: 1fr 1fr; }
    .wt-es-for div:last-child { display: none; }
    .wt-es-t td, .wt-es-t th { font-size: .74rem; }
    .wt-es-sum { grid-template-columns: 1fr 1fr; }
    .wt-es-roi { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; }
    .wt-fc-strip { grid-template-columns: repeat(12, 72%); overflow-x: auto; margin: 0 -16px; padding: 4px 16px 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .wt-bp-sheet .wt-bp-l > *, .wt-bp-pin { animation: none !important; stroke-dashoffset: 0; opacity: 1; }
    .wt-bp-pin.on::after { animation: none; }
}