/* Shared layout for the roofing, HVAC and plumbing demos (Bedrock-level structure).
   Each demo sets its own colours, fonts and corner radius through the variables below. */
:root {
    --ink: #161a1f; --accent: #a94219; --accent-dark: #8a3513; --dark: #11161d; --dark-2: #1c232d;
    --bg: #ffffff; --alt: #f5f1ea; --line: #e2dbcf; --muted: #5b6370; --on-accent: #fff; --accent-soft: #f6e3da;
    --display: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
    --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
    --head-weight: 800; --head-track: -.03em; --head-transform: none; --r: 6px; --r-lg: 10px; --btn-r: 6px;
    --blue: var(--accent);
}
body { background: var(--bg); color: var(--ink); font-family: var(--body); }
h1, h2, h3 { font-family: var(--display); font-weight: var(--head-weight); letter-spacing: var(--head-track); text-transform: var(--head-transform); }
.pro-wrap { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.pro-eyebrow { font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: .9rem; }
.pro-eyebrow.light { color: var(--eyebrow-light, #f3b08f); }
.pro-copy { color: var(--muted); font-size: 1.1rem; line-height: 1.65; }

/* Utility bar + header */
.pro-utility { background: var(--dark); color: rgba(255,255,255,.78); font-size: .85rem; }
.pro-utility-row { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; min-height: 40px; }
.pro-utility a { color: #fff; font-weight: 800; text-decoration: none; }
.pro-nav { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); padding: .85rem 2rem; box-shadow: 0 6px 24px rgba(0,0,0,.05); }
/* The nav's logo and CTA sit on the same left and right lines as .pro-wrap content at every width. */
.pro-nav { --gutter: 2rem; padding-left: max(var(--gutter), calc(50% - 600px + var(--gutter))); padding-right: max(var(--gutter), calc(50% - 600px + var(--gutter))); }
.pro-logo { display: inline-flex; align-items: center; gap: .65rem; color: var(--ink); text-transform: none; letter-spacing: 0; }
.pro-mark { width: 36px; height: 36px; flex: 0 0 auto; }
.pro-logo-text { display: flex; flex-direction: column; line-height: 1.05; font-family: var(--display); }
.pro-logo-text strong { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.pro-logo-text em { font-style: normal; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-family: var(--body); }
.demo-nav-actions { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.demo-nav-actions a { color: var(--ink); text-decoration: none; font-weight: 700; font-size: .95rem; }
.demo-nav-actions a:hover { color: var(--accent); }
.demo-nav-actions .quote-link { background: var(--accent); color: var(--on-accent); padding: .7rem 1.1rem; border-radius: var(--btn-r); font-weight: 800; }
.demo-nav-actions .quote-link:hover { background: var(--accent-dark); color: var(--on-accent); }

/* Buttons */
.demo-btn { background: var(--accent); color: var(--on-accent); border-radius: var(--btn-r); padding: 1.05rem 1.8rem; font-weight: 800; }
.demo-btn:hover { background: var(--accent-dark); }
.demo-btn.ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.75); }
.demo-btn.ghost:hover { background: #fff; color: var(--ink); }
.demo-btn.outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.demo-btn.outline:hover { background: var(--ink); color: #fff; }
.pro-actions { display: flex; flex-wrap: wrap; gap: .9rem; }
.pro-ticks { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin-top: 2rem; }
.pro-ticks li { position: relative; padding-left: 1.6rem; font-weight: 700; }
.pro-ticks li::before, .pro-checks li::before { content: ""; position: absolute; left: 0; top: .2em; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center / 80% no-repeat; }
.pro-badge { display: inline-block; font-size: .78rem; font-weight: 700; border: 1px solid currentColor; border-radius: var(--btn-r); padding: .35rem .65rem; margin-bottom: 1.4rem; }

/* Hero: full-bleed photo */
.pro-hero-full { position: relative; min-height: 640px; display: flex; align-items: center; color: #fff; overflow: hidden; background: var(--dark); }
.pro-hero-full > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos, 65% center); }
.pro-hero-full::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--hero-shade, rgba(10,16,24,.94)) 0%, var(--hero-shade-mid, rgba(10,16,24,.78)) 42%, rgba(10,16,24,.15) 78%), linear-gradient(0deg, rgba(10,16,24,.45), transparent 40%); }
.pro-hero-inner { position: relative; z-index: 1; padding-top: 5rem; padding-bottom: 5rem; width: 100%; }
.pro-hero-full h1 { font-size: clamp(2.7rem, 5.6vw, 4.8rem); line-height: 1; max-width: 760px; margin-bottom: 1.3rem; }
.pro-lede { font-size: 1.2rem; line-height: 1.6; max-width: 560px; margin-bottom: 2.2rem; }
.pro-hero-full .pro-lede { color: rgba(255,255,255,.86); }
.pro-hero-full .pro-ticks li { color: rgba(255,255,255,.92); }

/* Hero: framed (rounded box with photo) */
.pro-hero-framed { padding: 1.5rem 0 0; }
.pro-hero-frame { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 600px; display: flex; align-items: center; background: var(--dark); color: #fff; }
.pro-hero-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos, 65% center); }
.pro-hero-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--hero-shade, rgba(10,38,46,.94)) 0%, var(--hero-shade-mid, rgba(10,38,46,.76)) 42%, rgba(10,38,46,.12) 80%); }
.pro-hero-frame .pro-hero-copy { position: relative; z-index: 1; padding: 4rem 3.5rem; max-width: 680px; }
.pro-hero-frame h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1.02; margin-bottom: 1.2rem; }
.pro-hero-frame .pro-lede { color: rgba(255,255,255,.86); }
.pro-hero-frame .pro-ticks li { color: rgba(255,255,255,.92); }

/* Hero: light split */
.pro-hero-split { background: var(--alt); padding: 4.5rem 0 4rem; }
.pro-split-grid { display: grid; gap: 2.5rem; align-items: center; }
.pro-hero-split h1 { font-size: clamp(2.6rem, 5vw, 4.3rem); line-height: 1.02; color: var(--ink); margin-bottom: 1.2rem; }
.pro-hero-split .pro-lede { color: var(--muted); }
.pro-hero-split .pro-badge { color: var(--accent); }
.pro-hero-photo { margin: 0; position: relative; }
.pro-hero-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: var(--r-lg); box-shadow: 0 30px 60px rgba(0,0,0,.18); }
.pro-hero-photo figcaption { position: absolute; left: 1rem; bottom: 1rem; max-width: 300px; background: #fff; color: var(--ink); border-radius: var(--r); padding: .8rem 1rem; font-size: .9rem; box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.pro-hero-photo figcaption strong { color: var(--accent); }

/* Proof bar under the hero */
.pro-proofbar { list-style: none; display: grid; grid-template-columns: 1fr; background: var(--bg); border-bottom: 1px solid var(--line); }
.pro-proofbar li { padding: 1.3rem 0; border-bottom: 1px solid var(--line); }
.pro-proofbar li:last-child { border-bottom: 0; }
.pro-proofbar strong { display: block; font-size: 1.02rem; }
.pro-proofbar span { display: block; color: var(--muted); font-size: .88rem; margin-top: .15rem; }

/* Sections */
.pro-section { padding: 6rem 0; }
.pro-section.alt { background: var(--alt); }
.pro-intro { max-width: 760px; margin-bottom: 3.5rem; }
.pro-intro.center { margin-left: auto; margin-right: auto; text-align: center; }
.pro-intro h2, .pro-h2 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); line-height: 1.02; margin-bottom: 1rem; }
.pro-intro p { color: var(--muted); font-size: 1.1rem; }

/* Zig-zag service rows */
.pro-service { display: grid; gap: 2rem; align-items: center; margin-bottom: 5rem; }
.pro-service:last-child { margin-bottom: 0; }
.pro-service figure { margin: 0; position: relative; }
.pro-service figure::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 2px solid var(--line); border-radius: var(--r-lg); }
.pro-service img { position: relative; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); box-shadow: 0 24px 50px rgba(0,0,0,.16); }
.pro-num { display: block; font-family: var(--display); font-weight: 800; font-size: 3rem; line-height: 1; color: var(--accent); margin-bottom: .6rem; }
.pro-service h3 { font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.02; margin-bottom: .9rem; }
.pro-service-copy > p { font-size: 1.12rem; color: var(--muted); margin-bottom: 1.2rem; max-width: 480px; }
.pro-service ul { list-style: none; display: grid; gap: .55rem; margin-bottom: 1.6rem; }
.pro-service li { position: relative; padding-left: 1.4rem; font-weight: 600; }
.pro-service li::before { content: ""; position: absolute; left: 0; top: .55em; width: .6rem; height: .6rem; background: var(--accent); border-radius: var(--dot-r, 0); }
.pro-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-weight: 800; color: var(--accent-dark); text-decoration: none; border-bottom: 2px solid var(--accent); }
.pro-link::after { content: "\2192"; }
.pro-link:hover { color: var(--ink); }

/* Full-width feature band */
.pro-feature { position: relative; padding: 7rem 0; overflow: hidden; background: var(--dark); }
.pro-feature > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--feature-pos, center); }
.pro-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.05), rgba(0,0,0,.5)); }
.pro-feature .pro-wrap { position: relative; z-index: 1; display: flex; justify-content: flex-end; }
.pro-feature-card { background: var(--bg); max-width: 520px; padding: 2.6rem; border-radius: var(--r-lg); border-top: 6px solid var(--accent); box-shadow: 0 30px 60px rgba(0,0,0,.3); }
.pro-feature-card h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.04; margin-bottom: 1rem; }
.pro-feature-card > p { color: var(--muted); font-size: 1.05rem; }
.pro-checks { list-style: none; display: grid; gap: .8rem; margin-top: 1.4rem; }
.pro-checks li { position: relative; padding-left: 1.8rem; color: var(--muted); }
.pro-checks strong { color: var(--ink); }

/* Icon cards (used for buyers / reasons) */
.pro-icons { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.pro-icon-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.8rem 1.6rem; transition: transform .25s ease, box-shadow .25s ease; }
.pro-icon-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.08); }
.pro-icon-card svg { width: 52px; height: 52px; padding: 12px; box-sizing: border-box; border-radius: var(--icon-r, 50%); background: var(--accent-soft); fill: none; stroke: var(--accent); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 1.1rem; }
.pro-icon-card h3 { font-size: 1.3rem; margin-bottom: .45rem; }
.pro-icon-card p { color: var(--muted); }

/* Dark band: numbered tiles and steps */
.pro-dark { background: var(--dark); color: #fff; }
.pro-dark .pro-intro h2 { color: #fff; }
.pro-dark .pro-intro p { color: rgba(255,255,255,.72); }
.pro-tiles { display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg); overflow: hidden; }
.pro-tile { background: var(--dark); padding: 2rem 1.8rem; transition: background .25s ease; }
.pro-tile:hover { background: var(--dark-2); }
.pro-tile-num { display: block; color: var(--eyebrow-light, #f3b08f); font-weight: 800; font-size: .85rem; letter-spacing: .1em; margin-bottom: 1rem; }
.pro-tile strong { display: block; font-family: var(--display); font-size: 1.35rem; letter-spacing: var(--head-track); margin-bottom: .45rem; }
.pro-tile span:not(.pro-tile-num) { display: block; color: rgba(255,255,255,.72); }
.pro-steps { list-style: none; display: grid; gap: 2rem; counter-reset: step; }
.pro-steps li { counter-increment: step; position: relative; padding-top: 4.2rem; }
.pro-steps li::before { content: counter(step, decimal-leading-zero); position: absolute; top: 0; left: 0; font-family: var(--display); font-weight: 800; font-size: 3.2rem; line-height: 1; color: var(--accent); }
.pro-steps h3 { font-size: 1.4rem; margin-bottom: .45rem; }
.pro-steps p { color: rgba(255,255,255,.72); }

/* Areas */
.pro-areas { display: grid; gap: 2.5rem; align-items: center; }
.pro-areas p { color: var(--muted); font-size: 1.1rem; margin-top: 1rem; max-width: 520px; }
.pro-towns { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: .1rem 2rem; }
.pro-towns li { font-family: var(--display); font-weight: 800; font-size: 1.3rem; letter-spacing: var(--head-track); padding: .75rem 0; border-bottom: 1px solid var(--line); }

/* FAQ */
.pro-faq { display: grid; gap: 1.5rem; }
.pro-faq-list details { border-bottom: 1px solid var(--line); padding: 1.3rem 0; }
.pro-faq-list details:first-child { border-top: 2px solid var(--ink); }
.pro-faq-list summary { cursor: pointer; font-family: var(--display); font-weight: 800; font-size: 1.25rem; letter-spacing: var(--head-track); list-style: none; position: relative; padding-right: 2rem; }
.pro-faq-list summary::-webkit-details-marker { display: none; }
.pro-faq-list summary::after { content: "+"; position: absolute; right: 0; top: -.15rem; font-size: 1.7rem; color: var(--accent); }
.pro-faq-list details[open] summary::after { content: "\2212"; }
.pro-faq-list p { color: var(--muted); margin-top: .7rem; max-width: 640px; }

/* Request band with example form */
.pro-request { background: var(--request-bg, var(--dark)); color: #fff; padding: 6rem 0; }
.pro-request h2 { color: #fff; font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.02; }
.pro-request p { color: rgba(255,255,255,.86); font-size: 1.1rem; margin-top: 1rem; max-width: 460px; }
.pro-request-grid { display: grid; gap: 2.5rem; align-items: center; }
.pro-phone { display: inline-flex; flex-direction: column; margin-top: 2rem; color: #fff; text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 2.1rem; letter-spacing: -.01em; }
.pro-phone span { font-family: var(--body); font-size: .85rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.pro-form { background: var(--bg); color: var(--ink); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,.28); }
.pro-form-head { background: var(--form-head, var(--accent)); color: #fff; display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1rem 1.3rem; }
.pro-form-head span { color: #fff; font-size: .82rem; font-weight: 700; opacity: .95; }
.pro-form-fields { display: grid; gap: .8rem; padding: 1.3rem 1.3rem .4rem; }
.fake-field { border: 1px solid var(--line); border-radius: var(--r); padding: .85rem; background: var(--alt); }
.fake-field label { display: block; font-size: .74rem; font-weight: 800; color: var(--muted); margin-bottom: .3rem; text-transform: uppercase; letter-spacing: .1em; }
.fake-field div { color: var(--ink); font-weight: 700; }
.pro-submit { margin: .8rem 1.3rem 1.3rem; background: var(--submit-bg, var(--ink)); color: #fff; text-align: center; font-weight: 800; padding: 1rem; border-radius: var(--btn-r); }

/* Footer */
.pro-footer { background: var(--footer-bg, #0b0f14); color: rgba(255,255,255,.72); padding: 4rem 0 2rem; }
.pro-footer-grid { display: grid; gap: 2rem; }
.pro-footer-logo { font-family: var(--display); font-size: 1.4rem; font-weight: 800; color: #fff; margin-bottom: .6rem; letter-spacing: -.02em; }
.pro-footer-logo span { color: var(--eyebrow-light, #f3b08f); }
.pro-footer h3 { font-family: var(--body); font-size: .85rem; letter-spacing: .16em; text-transform: uppercase; color: #fff; margin-bottom: .9rem; }
.pro-footer ul { list-style: none; display: grid; gap: .25rem; }
.pro-footer a { color: rgba(255,255,255,.85); text-decoration: none; display: inline-flex; min-height: 32px; align-items: center; }
.pro-footer a:hover { color: #fff; text-decoration: underline; }
.pro-footer-note { margin-top: 3rem; font-size: .82rem; color: rgba(255,255,255,.55); }
.pro-footer-note p { padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); }

.sticky-mobile { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; grid-template-columns: 1fr 1fr; background: var(--dark); border-top: 1px solid rgba(255,255,255,.16); }
.sticky-mobile a { color: #fff; text-decoration: none; text-align: center; font-weight: 800; padding: .95rem .7rem; }
.sticky-mobile a:first-child { background: var(--accent); }

@media (min-width: 700px) {
    .pro-icons { grid-template-columns: repeat(2, 1fr); }
    .pro-tiles { grid-template-columns: repeat(2, 1fr); }
    .pro-steps { grid-template-columns: repeat(2, 1fr); }
    .pro-form-fields { grid-template-columns: repeat(2, 1fr); }
    .pro-footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
    .pro-proofbar { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; }
}
@media (min-width: 900px) {
    .pro-service { grid-template-columns: 1.05fr 1fr; gap: 4.5rem; }
    .pro-service.flip figure { order: 2; }
    .pro-service.flip figure::before { inset: 18px 18px -18px -18px; }
    .pro-tiles { grid-template-columns: repeat(3, 1fr); }
    .pro-areas { grid-template-columns: 1fr 1fr; gap: 4rem; }
    .pro-faq { grid-template-columns: .9fr 1.4fr; gap: 4rem; align-items: start; }
    .pro-request-grid { grid-template-columns: .9fr 1.1fr; gap: 4rem; }
    .pro-split-grid { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
}
@media (min-width: 1024px) {
    .pro-icons { grid-template-columns: repeat(4, 1fr); }
    .pro-steps.four { grid-template-columns: repeat(4, 1fr); }
    .pro-steps.three { grid-template-columns: repeat(3, 1fr); }
    .pro-proofbar { grid-template-columns: repeat(4, 1fr); }
    .pro-proofbar li { border-bottom: 0; }
}
@media (max-width: 1100px) and (min-width: 821px) { .demo-nav-actions { gap: .9rem; } .demo-nav-actions a { font-size: .88rem; } }
@media (max-width: 820px) {
    .pro-nav { padding-top: .75rem; padding-bottom: .75rem; gap: .75rem; }
    .demo-nav-actions { display: none; }
    .demo-nav .nav-call { display: inline-flex; background: var(--accent); border-radius: var(--btn-r); }
    .pro-utility-mid { display: none; }
    .pro-hero-full { min-height: 0; }
    .pro-hero-full::after { background: linear-gradient(180deg, var(--hero-shade-mid, rgba(10,16,24,.7)), var(--hero-shade, rgba(10,16,24,.93))); }
    .pro-hero-frame { min-height: 0; }
    .pro-hero-frame::after { background: linear-gradient(180deg, var(--hero-shade-mid, rgba(10,38,46,.7)), var(--hero-shade, rgba(10,38,46,.93))); }
    .pro-hero-frame .pro-hero-copy { padding: 3rem 2rem; }
    .pro-feature .pro-wrap { justify-content: center; }
}
@media (max-width: 600px) {
    /* Phones: the nav's Call button and the sticky bar already carry the number, so the top bar goes and the hero gets the room. */
    .pro-utility { display: none; }
    .pro-utility-row > span:first-child { display: none; }
    .pro-utility-row { justify-content: center; }
    .pro-wrap { padding: 0 1.25rem; }
    .pro-nav { --gutter: 1.25rem; }
    .pro-hero-inner { padding-top: 3rem; padding-bottom: 3.5rem; }
    .pro-hero-framed { padding-top: 1rem; }
    .pro-hero-frame .pro-hero-copy { padding: 2.5rem 1.4rem; }
    .pro-hero-split { padding: 2.5rem 0 3rem; }
    .pro-section { padding: 4.5rem 0; }
    .pro-service figure::before { display: none; }
    .pro-feature { padding: 4rem 0; }
    .pro-feature-card { padding: 1.8rem; }
    .pro-towns li { font-size: 1.12rem; }
}
@media (max-width: 520px) {
    .sticky-mobile { display: grid; }
    body { padding-bottom: 56px; }
}
@media (max-width: 430px) {
    .pro-logo-text strong { font-size: 1.1rem; }
    .pro-mark { width: 30px; height: 30px; }
    .pro-hero-full h1, .pro-hero-frame h1, .pro-hero-split h1 { font-size: 2.4rem; }
    .btn-premium { width: 100%; }
    .pro-phone { font-size: 1.7rem; }
}
/* Phones: open icon items read as icon-left rows with room between them. */
@media (max-width: 699px) {
    .pro-icons { gap: 1.8rem; }
    .pro-icon-card { display: grid; grid-template-columns: 52px 1fr; column-gap: 1rem; text-align: left; align-items: start; }
    .pro-icon-card svg { grid-row: 1 / span 2; margin: 0; }
    .pro-icon-card h3 { margin-top: .2rem; }
}

/* First screen: every demo hero fills exactly the space under the demo's top bar and nav (--stack; the Iron Canyon notice
   sits at the end of the page since 2026-10-27),
   and scales its type and spacing with the screen height too, so the headline and buttons show without scrolling. */
:root { --stack: 115px; --hero-h: max(440px, calc(100svh - var(--stack))); --hero-pad: clamp(1rem, 5vh, 5rem); }
@media (max-width: 820px) { :root { --stack: 105px; } }
/* Phones: the sticky Call / Book bar (52px) covers the bottom of the screen and already carries Call, so the hero's outline Call button goes. */
@media (max-width: 600px) { :root { --stack: 65px; --hero-h: calc(100svh - var(--stack) - 52px); --hero-pad: clamp(1rem, 3.5vh, 2.25rem); } .demo-hero .demo-btn.ghost { display: none; } }
.demo-hero .pro-badge { margin-bottom: clamp(.4rem, 1.5vh, 1.4rem); }

/* Shared demo motion (Iron Canyon playbook): footage hero and one load moment. A demo opts in with
   .demo-hero-video (data-webm/data-mp4, a "-phone" cut at <=800px) and .demo-hero-copy; demo-motion.js starts the
   footage after the page loads. The poster image underneath is the first frame, so the fade-in is seamless. */
.demo-hero-video { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.demo-hero-video video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.demo-hero-video video.is-playing { opacity: 1; }
.demo-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@keyframes demo-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.demo-hero-copy > * { animation: demo-rise .8s cubic-bezier(.22,1,.36,1) both; }
.demo-hero-copy > :nth-child(2) { animation-delay: .1s; }
.demo-hero-copy > :nth-child(3) { animation-delay: .2s; }
.demo-hero-copy > :nth-child(4) { animation-delay: .28s; }
.demo-hero-copy > :nth-child(5) { animation-delay: .36s; }
@media (prefers-reduced-motion: reduce) { .demo-hero-video video { display: none; } .demo-hero-copy > * { animation: none; } }
/* Phones of every size (the 440 pt Pro Max included): hero buttons run full width. */
@media (max-width: 600px) { .demo-hero .demo-button-row { display: grid; grid-template-columns: 1fr; } .demo-hero .demo-btn { width: 100%; max-width: none; justify-content: center; text-align: center; } }

/* Layout review (2026-10-27): shared fixes for all demos. */
/* Even line breaks: no orphan words in headings, no ragged last lines in paragraphs. */
h1, h2, h3, summary, .bk-features strong { text-wrap: balance; }
p, li { text-wrap: pretty; }
/* Utility bar: the call line ("24/7 leak line", "Open 7 days") sits right beside the phone number it describes,
   instead of floating alone mid-bar. */
@media (min-width: 801px) {
    .pro-utility-mid { margin-left: auto; }
    .pro-utility-mid + .sample-call { margin-left: -.5rem; }
    .pro-utility-mid::after { content: "\00b7"; margin-left: .75rem; opacity: .6; }
}
/* Footer columns step evenly: plain text rows get the same height as link rows. */
.pro-footer li { min-height: 32px; display: flex; align-items: center; }
/* Request band: the copy starts level with the top of the form instead of floating in the middle. */
@media (min-width: 801px) { .pro-request-grid { align-items: start; } }

/* Header phone: the number sits beside the main button with its label above it, the way contractor sites put the
   call line where people look first (the utility bar keeps only the service area). */
/* The number shares the nav links' line and the same gap as every other item; its small label sits under it
   as a caption without pushing it up. */
.demo-nav-actions .nav-tel { position: relative; font-weight: 800; color: var(--ink); }
.demo-nav-actions .nav-tel span { position: absolute; right: 0; top: 100%; margin-top: 3px; white-space: nowrap; font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); line-height: 1; }
.demo-nav-actions .nav-tel:hover { color: var(--accent); }