/* GENERATED from site/index.html by scripts/build-home-parts.js (hero layout + quote wizard styles). Do not edit: change the homepage, then run node scripts/build-home-parts.js. */
section.cine-hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:#0A0C10;margin:0;padding:0}
.cine-hero::before{display:none}
.cine-hero .cine-media{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.cine-hero .cine-media picture,.cine-hero .cine-media img{display:block;width:100%;height:100%}
.cine-hero .cine-media img{object-fit:cover;object-position:center 30%}
@media (max-width: 768px) and (orientation: portrait){.cine-hero .cine-media img{object-position:25% 30%}}
.cine-hero .cine-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,12,16,.55) 0%,rgba(10,12,16,.12) 34%,rgba(10,12,16,.40) 64%,rgba(10,12,16,.97) 100%),radial-gradient(120% 80% at 50% 100%,rgba(10,12,16,.7),transparent 55%)}
.cine-hero .cine-inner{position:relative;z-index:2;width:100%;max-width:1240px;margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem) clamp(3.5rem,2.25rem + 5vh,6rem);text-align:center}
.cine-hero .cine-kicker{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#FFB24D;margin-bottom:1.1rem}
.cine-hero .cine-kicker::before{content:'';width:22px;height:1px;background:#FFB24D;opacity:.75}
.cine-hero h1{font-family:'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;font-weight:700;line-height:1;color:#F4F6F9;margin:0 auto;max-width:none;text-shadow:0 2px 2px rgba(0,0,0,.45),0 4px 12px rgba(0,0,0,.5),0 10px 44px rgba(0,0,0,.7)}
.cine-hero .cine-pre{display:block;font-size:clamp(1.0625rem,.85rem + .6vw,1.4rem);font-weight:400;line-height:1.3;margin-bottom:.4em;text-wrap:balance}
.cine-hero .cine-brand{display:block;font-size:clamp(1.875rem,1.1rem + 3.3vw,4rem);font-weight:700;letter-spacing:-.03em;line-height:1}
.cine-hero .cine-sub{display:block;max-width:none;margin:.7rem auto 0;font-size:clamp(.95rem,.85rem + .35vw,1.2rem);font-weight:400;line-height:1.45;color:#C9CED6;text-shadow:0 1px 2px rgba(0,0,0,.65),0 3px 10px rgba(0,0,0,.55),0 6px 30px rgba(0,0,0,.6);text-wrap:balance}
.cine-hero .cine-lead{font-family:'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;font-size:clamp(1.05rem,1.7vw,1.32rem);line-height:1.6;color:#E7EAEF;max-width:52ch;font-weight:400}
.cine-hero .cine-actions{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;margin:1.6rem 0 0}
.cine-hero .cine-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:inherit;font-weight:600;font-size:.95rem;border-radius:999px;cursor:pointer;padding:.8rem 1.75rem;text-decoration:none;transition:background-color .3s ease,color .3s ease,border-color .3s ease;border:1.5px solid transparent}
.cine-hero .cine-btn svg{width:18px;height:18px}
.cine-hero .cine-btn-primary{background:#fff;color:#0A0C10;border-color:#fff}
.cine-hero .cine-btn-primary:hover,.cine-hero .cine-btn-primary:focus-visible{background:transparent;color:#fff}
.cine-hero .cine-btn-primary:focus-visible{outline:2px solid #fff;outline-offset:3px}
.cine-hero .cine-btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.cine-hero .cine-btn-ghost:hover,.cine-hero .cine-btn-ghost:focus-visible{background:#fff;color:#0A0C10;border-color:#fff}
.cine-hero .cine-btn-ghost:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* "AI Demo of Your Home" (was "See Your Home With Lights"): its row is always reserved (no layout shift); the AI Home Preview boot block (above the hero) adds .is-on only when demo-config reports the feature live. */
.cine-hero .hp-cta{visibility:hidden;opacity:0;transition:opacity .45s ease}
.cine-hero .hp-cta.is-on{visibility:visible;opacity:1}
.cine-hero .cine-watch{display:inline-flex;align-items:center;gap:.6rem;color:#E7EAEF;font-weight:500;font-size:.96rem;text-decoration:none}
.cine-hero .cine-watch .play{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);border: 1px solid transparent;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cine-hero .cine-watch:hover .play{background:rgba(255,255,255,.12)}
/* phones: keep the CTA above the first-visit cookie card (fixed bottom-left, ~106px tall) */
@media(max-width:640px){.cine-hero .cine-inner{padding-bottom:7.5rem}}

/* ── Inline hero quote wizard (2026-09-23) ──
   One frosted white pill (light mode, black text): the current question's
   field on the left, the round Back (subtle) and Next (black) discs on the right. One step is visible
   at a time inside a fixed-height pill and the consent row is always
   reserved, so the hero never moves between steps. The question above
   the pill doubles as the feedback line: an error replaces it until the
   visitor types again. Borderless, no glow: focus is a slightly brighter
   pill with a faint inset ring; the discs get a plain white focus ring. */
.cine-hero .hero-quote {
    --hq-fill: rgba(255,255,255,.86);
    --hq-fill-hi: rgba(255,255,255,.97);
    --hq-ink: #0a0c10;
    --hq-ink-faint: rgba(10,12,16,.46);
    --hq-muted: rgba(255,255,255,.64);
    --hq-faint: rgba(255,255,255,.46);
    --hq-warn: #ffc2b5;
    width: min(100%, 620px);
    margin: 1.6rem auto 0;
    color: #fff;
    color-scheme: dark;
    -webkit-font-smoothing: antialiased;
    text-align: center;
}
.cine-hero .hq-head { position: relative; margin: 0 0 .7rem; }
.cine-hero .hq-q,
.cine-hero .pf-error {
    margin: 0;
    font-size: clamp(1.05rem, .95rem + .35vw, 1.2rem);
    font-weight: 500;
    line-height: 1.3;
    text-shadow: 0 1px 14px rgba(0,0,0,.45);
    text-wrap: balance;
}
.cine-hero .hq-q { color: #fff; outline: none; }
.cine-hero .pf-error { color: var(--hq-warn); }
.cine-hero .pf-error[hidden],
.cine-hero .hq-head.has-error .hq-q { display: none; }
.cine-hero .hq-form { margin: 0; }
.cine-hero .hq-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 66px;
    padding: 7px 7px 7px 10px;
    border: 0;
    border-radius: 999px;
    background: var(--hq-fill);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    box-shadow: 0 20px 50px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.18);
    color: var(--hq-ink);
    color-scheme: light;
    text-align: left;
    transition: background-color .2s ease, box-shadow .2s ease;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .cine-hero .hq-pill { background: rgba(255,255,255,.97); }
}
.cine-hero .hq-pill:focus-within {
    background: var(--hq-fill-hi);
    box-shadow: 0 20px 50px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.18), inset 0 0 0 1.5px rgba(10,12,16,.12);
}
.cine-hero .hq-pill .pf-step { flex: 1 1 auto; min-width: 0; animation: hqStepIn .32s cubic-bezier(.16,1,.3,1) both; }
.cine-hero .hq-pill .pf-step.is-back { animation-name: hqStepBack; }
.cine-hero .hq-pill .pf-step[hidden] { display: none; }
@keyframes hqStepIn { from { opacity: 0; transform: translateX(10px); } }
@keyframes hqStepBack { from { opacity: 0; transform: translateX(-10px); } }
.cine-hero .pf-field { position: relative; }
.cine-hero .pf-field label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
/* 17px desktop, 16px phones: never under 16px (iOS zoom). */
.cine-hero .pf-field input {
    display: block;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 0 14px;
    font: inherit;
    font-size: 17px;
    line-height: 1.25;
    color: var(--hq-ink);
    background: transparent;
    border: 0;
    border-radius: 999px;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    text-overflow: ellipsis;
}
.cine-hero .pf-field input::placeholder { color: var(--hq-ink-faint); opacity: 1; }
.cine-hero .pf-field input[aria-invalid="true"]::placeholder { color: rgba(190,52,32,.7); }
/* Autofill: no pale-yellow box inside the white pill. */
.cine-hero .pf-field input:-webkit-autofill,
.cine-hero .pf-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--hq-ink);
    caret-color: var(--hq-ink);
    -webkit-box-shadow: 0 0 0 60px #fff inset;
    transition: background-color 9999s;
}
.cine-hero .hq-nav { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.cine-hero .pf-nav {
    display: grid;
    place-items: center;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    font: inherit;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .18s ease, color .18s ease, opacity .18s ease, transform .18s ease;
}
.cine-hero .pf-nav svg { width: 20px; height: 20px; }
.cine-hero .pf-back { width: 44px; height: 44px; background: rgba(10,12,16,.07); color: rgba(10,12,16,.8); }
.cine-hero .pf-back[hidden] { display: none; }
.cine-hero .pf-next { width: 52px; height: 52px; background: var(--hq-ink); color: #fff; }
.cine-hero .pf-next svg { width: 22px; height: 22px; }
.cine-hero .pf-next .hq-ico-send,
.cine-hero .hero-quote.is-last .pf-next .hq-ico-next { display: none; }
.cine-hero .hero-quote.is-last .pf-next .hq-ico-send { display: block; }
.cine-hero .pf-nav:active { transform: scale(.94); }
.cine-hero .pf-nav:focus-visible { outline: 2px solid var(--hq-ink); outline-offset: 3px; }
.cine-hero .pf-nav:disabled { cursor: default; pointer-events: none; }
.cine-hero .pf-back:disabled { opacity: .4; }
@media (hover: hover) {
    .cine-hero .pf-back:hover { background: rgba(10,12,16,.13); color: var(--hq-ink); }
    .cine-hero .pf-next:hover { background: rgba(10,12,16,.82); }
}
/* Sending: the black disc keeps its weight, the icon becomes a small ring. */
.cine-hero .pf-next.is-busy svg { display: none; }
.cine-hero .pf-next.is-busy::after {
    content: '';
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.28);
    border-top-color: #fff;
    animation: hqSpin .8s linear infinite;
}
@keyframes hqSpin { to { transform: rotate(360deg); } }
.cine-hero .hq-foot { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 10px; }
/* The consent line shows on the address step only, but its row is always
   reserved so the hero does not move when it appears. */
.cine-hero .hq-consent {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 24px;
    margin: 0;
    font-size: .84rem;
    line-height: 1.3;
    color: var(--hq-muted);
    cursor: pointer;
    visibility: hidden;
}
.cine-hero .hq-consent.is-on { visibility: visible; }
.cine-hero .hq-consent input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1.5px solid rgba(255,255,255,.5);
    border-radius: 6px;
    background: transparent no-repeat center / 11px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.cine-hero .hq-consent input[type="checkbox"]:checked {
    background-color: #fff;
    border-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0c10' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.cine-hero .hq-consent input[type="checkbox"]:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cine-hero .hq-consent.is-invalid { color: var(--hq-warn); }
.cine-hero .hq-consent.is-invalid input[type="checkbox"] { border-color: var(--hq-warn); }
.cine-hero .hq-consent a {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,.4);
    text-underline-offset: 3px;
    border-radius: 3px;
    outline: none;
}
.cine-hero .hq-consent a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cine-hero .hq-progress { display: inline-flex; align-items: center; gap: 10px; margin: 0; line-height: 1; }
.cine-hero .hq-track { display: inline-flex; gap: 4px; }
.cine-hero .hq-track i {
    display: block;
    width: 18px;
    height: 3px;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
    transition: background-color .3s ease;
}
.cine-hero .hq-track i.is-done,
.cine-hero .hq-track i.is-current { background: #fff; }
.cine-hero .hq-step { font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--hq-faint); }
/* Sent: the same block; the question becomes the confirmation. */
/* Compact on purpose: it must fit inside the height the wizard reserved. */
.cine-hero .hq-done { display: flex; flex-direction: column; align-items: center; gap: .5rem; animation: hqStepIn .45s cubic-bezier(.16,1,.3,1) both; }
.cine-hero .hq-done-mark { width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #0a0c10; display: grid; place-items: center; }
.cine-hero .hq-done-mark svg { width: 22px; height: 22px; }
.cine-hero .hq-done-text { margin: 0; max-width: 36ch; font-size: .98rem; line-height: 1.5; color: var(--hq-muted); text-wrap: balance; }
.cine-hero .hero-quote.is-done .hq-q { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); font-weight: 700; letter-spacing: -.02em; }
.cine-hero .hero-quote.is-done .hq-head { margin-bottom: .75rem; }
.cine-hero .hero-quote + .cine-actions { margin-top: 1.1rem; }
/* Google's suggestion list, appended to body: same radius family as the
   pill and 44px rows so a suggestion is an easy tap. */
.pac-container { border: 0; border-radius: 16px; margin-top: 6px; overflow: hidden; box-shadow: 0 18px 44px rgba(0,0,0,.3); font-family: inherit; }
.pac-container .pac-item { min-height: 44px; padding: 10px 14px; line-height: 1.4; font-size: 15px; cursor: pointer; }
/* Desktop-card pieces: absent from the phone / tablet pill. */
.cine-hero .hq-sub,
.cine-hero .hq-cta,
.cine-hero .hq-back-text { display: none; }
@media (max-width: 640px) {
    .cine-hero .hero-quote { margin-top: 1.3rem; }
    .cine-hero .hq-pill { min-height: 62px; padding: 6px 6px 6px 8px; }
    .cine-hero .pf-field input { min-height: 48px; padding: 0 12px; font-size: 16px; }
    .cine-hero .pf-next { width: 50px; height: 50px; }
    .cine-hero .hq-consent { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
    .cine-hero .hq-pill .pf-step,
    .cine-hero .hq-done { animation: none; }
    .cine-hero .hq-pill,
    .cine-hero .pf-nav,
    .cine-hero .hq-track i,
    .cine-hero .hq-consent input[type="checkbox"] { transition: none; }
    .cine-hero .pf-next.is-busy::after { animation-duration: 1.6s; }
}

/* ── Desktop hero (2026-09-28, >= 1024px only) ──
   Two columns on a grid: the brand headline stays dominant on the left,
   the same wizard sits on the right as a small frosted setup card
   (name, phone, address → Continue → email + consent → Get my quote).
   The hero fills the first screen (2026-09-30) so it reads as a complete
   scene; "Preview your house" (moved right under it on desktop, see
   #hpSection) begins just below the fold after a hairline, never inside
   the hero. Phones and tablets keep the centred pill above. */
@media (min-width: 1024px) {
    section.cine-hero { min-height: clamp(640px, 100vh, 1080px); min-height: clamp(640px, 100svh, 1080px); align-items: center; }
    .cine-hero .cine-scrim {
        background:
            linear-gradient(90deg, rgba(10,12,16,.66) 0%, rgba(10,12,16,.34) 42%, rgba(10,12,16,.1) 68%, rgba(10,12,16,.18) 100%),
            linear-gradient(180deg, rgba(10,12,16,.5) 0%, rgba(10,12,16,.08) 28%, rgba(10,12,16,.22) 70%, #0A0C10 100%);
    }
    .cine-hero .cine-inner {
        display: grid;
        grid-template-columns: minmax(0, 1.3fr) minmax(340px, .7fr);
        grid-template-rows: 1fr auto auto auto 1fr;
        grid-template-areas: ". form" "title form" "sub form" "actions form" ". form";
        column-gap: clamp(48px, 6vw, 96px);
        max-width: 1360px;
        padding: clamp(6.5rem, 12vh, 8rem) clamp(2rem, 4vw, 3.5rem) clamp(5rem, 10vh, 7.5rem);
        text-align: left;
    }
    .cine-hero h1 { grid-area: title; margin: 0; }
    /* Left column rhythm: lead-in 14px above the brand, the line 22px under it,
       the button 30px under that. Both small lines are full white with a firmer
       shadow so they hold over the lit house. */
    .cine-hero .cine-pre { max-width: none; margin: 0 0 14px; white-space: nowrap; font-size: clamp(1.1rem, .8rem + .5vw, 1.35rem); font-weight: 500; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.65), 0 3px 10px rgba(0,0,0,.55), 0 6px 30px rgba(0,0,0,.6); }
    .cine-hero .cine-brand { font-size: clamp(3.75rem, 1.4rem + 4.5vw, 6.25rem); letter-spacing: -.04em; line-height: .95; }
    .cine-hero .cine-sub { grid-area: sub; margin: 22px 0 0; font-size: clamp(1.1rem, .9rem + .35vw, 1.3rem); font-weight: 500; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.65), 0 3px 10px rgba(0,0,0,.55), 0 6px 30px rgba(0,0,0,.6); }
    .cine-hero .cine-actions,
    .cine-hero .hero-quote + .cine-actions { grid-area: actions; align-items: flex-start; margin: 30px 0 0; }
    /* "AI Demo of Your Home": the secondary action, a white pill over the photo.
       Bright enough to find, quieter than the card's blue Continue. On desktop it
       scrolls to "Preview your house" (script after #hpSection). The site-wide
       .ihb enhancer (end of page) rebuilds it as label + hover swap + dot; here the
       swap and dot are switched off for a plain lift, and the sparkle is drawn on
       the label because the enhancer keeps text only. .cine-actions raises the
       specificity over the enhancer's .cine-hero .ihb.cine-btn padding. */
    .cine-hero .cine-actions .cine-btn-ghost.hp-cta {
        gap: 8px;
        padding: 14px 22px;
        border: 0;
        background: rgba(255,255,255,.96);
        color: #1d1d1f;
        font-weight: 600;
        box-shadow: 0 6px 20px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.8);
        transition: opacity .45s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
    }
    .cine-hero .cine-actions .cine-btn-ghost.hp-cta:hover,
    .cine-hero .cine-actions .cine-btn-ghost.hp-cta:focus-visible {
        background: #fff;
        color: #1d1d1f;
        transform: translateY(-1px);
        box-shadow: 0 8px 24px rgba(0,0,0,.13), inset 0 1px 0 rgba(255,255,255,.8);
    }
    .cine-hero .cine-actions .hp-cta .ihb__hover,
    .cine-hero .cine-actions .hp-cta .ihb__dot { display: none; }
    .cine-hero .cine-actions .hp-cta .ihb__label,
    .cine-hero .cine-actions .hp-cta:hover .ihb__label,
    .cine-hero .cine-actions .hp-cta:focus-visible .ihb__label { display: inline-flex; align-items: center; gap: 8px; transform: none; opacity: 1; }
    .cine-hero .cine-actions .hp-cta .ihb__label::before {
        content: '';
        flex: none;
        width: 15px;
        height: 15px;
        background: #6e6e73;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 2.5l1.9 5.6 5.6 1.9-5.6 1.9L11 17.5l-1.9-5.6L3.5 10l5.6-1.9z'/%3E%3Cpath d='M19 14.5l.8 2.2 2.2.8-2.2.8L19 20.5l-.8-2.2-2.2-.8 2.2-.8z'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 2.5l1.9 5.6 5.6 1.9-5.6 1.9L11 17.5l-1.9-5.6L3.5 10l5.6-1.9z'/%3E%3Cpath d='M19 14.5l.8 2.2 2.2.8-2.2.8L19 20.5l-.8-2.2-2.2-.8 2.2-.8z'/%3E%3C/svg%3E") center / contain no-repeat;
    }
    .hp-sec { scroll-margin-top: 72px; }
}

/* ── The frosted card: desktop (>= 1024px) and phones (<= 767px, 2026-09-30
   mobile hero "Option B"). Tablets keep the one-question pill above. The
   phone-only layout on top of this is the block after it. */
@media (min-width: 1024px), (max-width: 767px) {
    /* The card. */
    .cine-hero .hero-quote {
        grid-area: form;
        justify-self: end;
        align-self: center;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 420px;
        margin: 0;
        padding: 30px 28px 20px;
        border-radius: 28px;
        background: rgba(20,22,28,.6);
        -webkit-backdrop-filter: blur(36px) saturate(170%);
        backdrop-filter: blur(36px) saturate(170%);
        box-shadow: 0 24px 64px rgba(0,0,0,.34);
        color: #fff;
        color-scheme: dark;
        -webkit-font-smoothing: antialiased;
        text-align: left;
    }
    @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
        .cine-hero .hero-quote { background: rgba(20,22,28,.96); }
    }
    .cine-hero .hq-head { margin: 0 0 20px; }
    .cine-hero .hq-q,
    .cine-hero .pf-error { text-shadow: none; text-wrap: pretty; }
    .cine-hero .hq-q { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: #fff; }
    .cine-hero .hq-sub { display: block; margin-top: 6px; font-size: .95rem; line-height: 1.4; color: rgba(255,255,255,.66); }
    .cine-hero .pf-error { margin-top: 6px; font-size: .92rem; font-weight: 500; line-height: 1.4; color: #ffb4b4; }
    /* The error takes the supporting line's place, not the title's. */
    .cine-hero .hq-head.has-error .hq-q { display: block; }
    .cine-hero .hq-head.has-error .hq-sub { display: none; }

    /* Fields: the AI Assistant's pill inputs, stacked; the discs give way to .hq-cta. */
    .cine-hero .hq-form { display: flex; flex-direction: column; flex: 1 1 auto; }
    .cine-hero .hq-pill,
    .cine-hero .hq-pill:focus-within {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        min-height: 0;
        padding: 0;
        border-radius: 0;
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: none;
    }
    .cine-hero .hq-nav { display: none; }
    .cine-hero .pf-field input {
        height: 50px;
        min-height: 50px;
        padding: 0 20px;
        border-radius: 999px;
        background: rgba(255,255,255,.09);
        color: #fff;
        transition: background-color .2s ease, box-shadow .2s ease;
    }
    .cine-hero .pf-field input::placeholder { color: rgba(255,255,255,.5); }
    .cine-hero .pf-field input:focus { background-color: rgba(255,255,255,.14); box-shadow: 0 0 0 2px #0071e3; }
    .cine-hero .pf-field input[aria-invalid="true"] { box-shadow: 0 0 0 2px rgba(255,105,97,.7); }
    .cine-hero .pf-field input[aria-invalid="true"]::placeholder { color: rgba(255,180,180,.75); }
    .cine-hero .pf-field input:-webkit-autofill,
    .cine-hero .pf-field input:-webkit-autofill:focus { -webkit-text-fill-color: #fff; caret-color: #fff; -webkit-box-shadow: 0 0 0 60px #2b2d34 inset; }

    /* Footer: consent (last step only), the button, then Back + a quiet note. */
    .cine-hero .hq-foot {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 14px 8px;
        margin-top: auto;
        padding-top: 16px;
    }
    .cine-hero .hq-consent,
    .cine-hero .hq-cta { grid-column: 1 / -1; }
    .cine-hero .hq-consent { display: none; visibility: visible; font-size: .86rem; color: rgba(255,255,255,.66); }
    .cine-hero .hq-consent.is-on { display: inline-flex; }
    .cine-hero .hq-consent input[type="checkbox"] { border-color: rgba(255,255,255,.4); background-color: rgba(255,255,255,.09); }
    .cine-hero .hq-consent input[type="checkbox"]:checked {
        background-color: #0071e3;
        border-color: #0071e3;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    }
    .cine-hero .hq-consent input[type="checkbox"]:focus-visible { outline: 2px solid #0071e3; }
    .cine-hero .hq-consent a { color: #fff; text-decoration-color: rgba(255,255,255,.4); }
    .cine-hero .hq-consent a:focus-visible { outline: 2px solid #0071e3; }
    .cine-hero .hq-consent.is-invalid { color: #ffb4b4; }
    .cine-hero .hq-consent.is-invalid input[type="checkbox"] { border-color: #ff6961; }
    .cine-hero .hq-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        margin: 0;
        padding: 0 24px;
        border: 0;
        border-radius: 999px;
        background: #fff;
        color: #0a0c10;
        font: inherit;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background-color .18s ease, color .18s ease, transform .18s ease;
    }
    /* White like the assistant's send button; Starise blue on hover / keyboard focus. */
    .cine-hero .hq-cta:hover,
    .cine-hero .hq-cta:focus-visible { background: #0071e3; color: #fff; }
    .cine-hero .hq-cta:active { transform: scale(.985); }
    .cine-hero .hq-cta:focus-visible { outline: 2px solid #0071e3; outline-offset: 3px; }
    .cine-hero .hq-cta:disabled { cursor: default; pointer-events: none; }
    .cine-hero .hq-cta.is-busy { color: transparent; position: relative; }
    .cine-hero .hq-cta.is-busy::after {
        content: '';
        position: absolute;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 2px solid rgba(10,12,16,.2);
        border-top-color: #0a0c10;
        animation: hqSpin .8s linear infinite;
    }
    .cine-hero .hq-back-text:not([hidden]) {
        display: inline-flex;
        grid-column: 1;
        justify-self: start;
        align-items: center;
        min-height: 28px;
        margin: 0;
        padding: 0 4px;
        border: 0;
        border-radius: 6px;
        background: none;
        color: rgba(255,255,255,.66);
        font: inherit;
        font-size: .86rem;
        cursor: pointer;
    }
    .cine-hero .hq-back-text:hover { color: #fff; }
    .cine-hero .hq-back-text:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; }
    .cine-hero .hq-back-text:disabled { opacity: .4; cursor: default; }
    .cine-hero .hq-progress { grid-column: 2; justify-content: center; }
    .cine-hero .hq-track { display: none; }
    .cine-hero .hq-step { font-size: .8rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.5); white-space: nowrap; }

    /* Sent: same card, left-aligned confirmation. */
    .cine-hero .hq-done { align-items: flex-start; }
    .cine-hero .hq-done-mark { background: rgba(255,255,255,.09); color: #fff; }
    .cine-hero .hq-done-text { color: rgba(255,255,255,.66); }
    .cine-hero .hero-quote.is-done .hq-q { font-size: 1.6rem; }
    .cine-hero .hero-quote.is-done .hq-sub { display: none; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce), (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .cine-hero .pf-field input,
    .cine-hero .hq-cta { transition: none; }
    .cine-hero .hq-cta.is-busy::after { animation-duration: 1.6s; }
}

/* ── Mobile hero, Option B (2026-09-30, <= 767px only) ──
   Form-first: left-aligned service headline over the night photo, then
   the frosted card with all four fields visible (name, phone, email,
   address + consent → Get my quote). Same form, fields, validation and
   single POST as every other layout. The service phrase is the big line;
   "by Starise Lighting" drops to a quiet signature under it (the "by" is
   moved onto that line with ::before; the H1 text itself is unchanged).
   Scoped to "h1 .cine-pre" so the generated city pages, whose lead line
   sits outside the H1, keep their own hierarchy. */
@media (max-width: 767px) {
    .cine-hero .cine-inner { text-align: left; padding: 5.75rem 1.25rem 2rem; }
    .cine-hero h1 { margin: 0; }
    .cine-hero h1 .cine-pre {
        margin: 0 0 .55rem;
        font-size: clamp(2rem, 1.1rem + 4.4vw, 2.6rem);
        font-weight: 700;
        letter-spacing: -.03em;
        line-height: 1.04;
        color: #fff;
        text-wrap: balance;
    }
    .cine-hero h1 .cine-by { display: none; }
    .cine-hero h1 .cine-pre + .cine-brand { font-size: 1rem; font-weight: 500; letter-spacing: 0; line-height: 1.3; color: rgba(255,255,255,.78); }
    .cine-hero h1 .cine-pre + .cine-brand::before { content: 'by '; }
    .cine-hero .cine-sub { margin: .8rem 0 0; font-size: 1rem; color: rgba(255,255,255,.8); }
    .cine-hero .hero-quote { max-width: none; margin: 1.5rem 0 0; padding: 20px 18px 16px; }
    /* The H1 above already says what this is: the card opens straight on the
       fields. The head only carries an error line, or the sent confirmation. */
    .cine-hero .hq-head { margin: 0; }
    .cine-hero .hq-q,
    .cine-hero .hq-head.has-error .hq-q,
    .cine-hero .hq-sub { display: none; }
    .cine-hero .hero-quote.is-done .hq-q { display: block; margin-bottom: .75rem; }
    .cine-hero .pf-error { margin: 0 0 12px; }
    /* 54px pills, 16px text (no iOS zoom), a quiet icon in each. */
    .cine-hero .pf-field input {
        height: 54px;
        min-height: 54px;
        padding: 0 18px 0 50px;
        font-size: 16px;
        background-repeat: no-repeat;
        background-position: 18px center;
        background-size: 20px 20px;
    }
    .cine-hero #pfName { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-opacity='.62' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
    .cine-hero #pfPhone { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-opacity='.62' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
    .cine-hero #pfEmail { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-opacity='.62' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
    .cine-hero #pfAddress { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-opacity='.62' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
    .cine-hero .hq-foot { gap: 12px 8px; padding-top: 14px; }
    .cine-hero .hq-consent { font-size: .84rem; }
    .cine-hero .hq-cta { height: 54px; font-size: 1.05rem; }
    /* Touch: no sticky blue after a tap; blue stays for keyboard focus. */
    .cine-hero .hq-cta:hover { background: #fff; color: #0a0c10; }
    .cine-hero .hq-cta:focus-visible { background: #0071e3; color: #fff; }
    .cine-hero .hero-quote + .cine-actions { align-items: flex-start; margin-top: 1rem; }
}