/* ==========================================================================
   STARISE HOMEPAGE: "After Dark"
   --------------------------------------------------------------------------
   One continuous story on a single dark canvas:
     hero (quote form on the photo) -> one roofline, every occasion -> the finish
     is the proof (day / night / colour) -> specs -> see it on your home (AI
     preview) -> control (real footage + the app) -> installation -> recent
     rooflines -> reviews -> questions -> finish.
   Emerald (#50C878) is reserved for the primary action, the chapter line,
   focus and active states. Other colour comes from the lighting itself.
   Imagery: documentary sections (recent work, installers, footage) use real
   Starise photography; nothing on the page captions another image as a
   Starise job. Image sources are recorded in the homepage backup.

   Scope: everything lives under .sx (the homepage wrapper) or
   body.sx-home (nav, sticky phone bar, footer CTA), so no other page is
   affected. The hero quote wizard and the reviews block keep their shared
   markup (scripts/build-home-parts.js); this file only restyles them.
   Motion: transforms, opacity and clip-path; one scroll-linked sequence
   (01) driven by a passive listener + rAF while on screen; everything has a
   prefers-reduced-motion final state.
   ========================================================================== */


/* ---------- Tokens ---------- */
.sx,
body.sx-home {
    --sx-ink: #050607;
    --sx-bg: #08090b;
    --sx-char: #0f1114;
    --sx-char-2: #16191d;
    --sx-line: rgba(255, 255, 255, .09);
    --sx-line-2: rgba(255, 255, 255, .16);
    --sx-text: #f4f6f5;
    --sx-text-2: rgba(244, 246, 245, .7);
    --sx-text-3: rgba(244, 246, 245, .5);
    --sx-em: #50c878;
    --sx-em-hi: #74dc98;
    --sx-em-ink: #03140a;
    --sx-warm: #ffd9a3;
    --sx-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --sx-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
    --sx-gutter: clamp(1.25rem, 4.2vw, 3.5rem);
    --sx-max: 1360px;
    --sx-r-s: 12px;
    --sx-r-m: 20px;
    --sx-r-l: 28px;
    --sx-ease: cubic-bezier(.16, 1, .3, 1);
    --sx-ease-io: cubic-bezier(.65, 0, .35, 1);
    --sx-t-ui: 220ms;
    --sx-t-reveal: 900ms;
}

body.sx-home { background: var(--sx-bg); }

.sx {
    position: relative;
    background: var(--sx-bg);
    color: var(--sx-text);
    font-family: var(--sx-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}
.sx *, .sx *::before, .sx *::after { box-sizing: border-box; }
.sx img { max-width: 100%; }
.sx ::selection { background: rgba(80, 200, 120, .32); color: #fff; }

/* ---------- Layout primitives ---------- */
.sx-wrap { width: 100%; max-width: var(--sx-max); margin: 0 auto; padding: 0 var(--sx-gutter); }
.sx-sec { position: relative; padding: clamp(4.5rem, 3rem + 5vw, 8rem) 0; }
.sx-sec + .sx-sec { padding-top: clamp(2.5rem, 1.5rem + 3vw, 5rem); }

/* ---------- Type ---------- */
.sx-eyebrow {
    display: inline-flex; align-items: center; gap: .85rem;
    margin: 0 0 1.4rem;
    font-size: .74rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
    color: var(--sx-text-2);
}
.sx-eyebrow b { font-weight: 500; color: var(--sx-text); font-variant-numeric: tabular-nums; }
.sx-h2 {
    margin: 0;
    font-family: var(--sx-sans);
    font-size: clamp(2.5rem, 1.35rem + 4.4vw, 5.6rem);
    font-weight: 500;
    line-height: .96;
    letter-spacing: -.045em;
    color: var(--sx-text);
    text-wrap: balance;
}
.sx em,
.sx .sx-serif {
    font-family: var(--sx-serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.01em;
}
.sx-h2 em { font-size: 1.08em; line-height: .9; }
.sx-lede {
    max-width: 34rem;
    margin: 1.6rem 0 0;
    font-size: clamp(1.05rem, .98rem + .3vw, 1.25rem);
    line-height: 1.55;
    color: var(--sx-text-2);
    text-wrap: pretty;
}
.sx-h3 { margin: 0; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.55rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }

/* Line-mask reveal for headings: each .sx-l clips its inner span.
   The mask must be larger than the INK, not the line box: Instrument Serif italic descends ~.25em below the
   baseline and leans left of its own box (E, y, g, p were being cut). Padding grows the mask on every side and
   the same negative margins cancel it, so layout and line wrapping are unchanged. The hidden start position
   moves below the larger mask (140%) so nothing peeks out before the reveal. */
.sx-l { display: block; overflow: hidden; padding: .06em .36em .34em; margin: -.06em -.36em -.34em; }
.sx-l > span { display: block; }
.sx-js .sx-split .sx-l > span { transform: translate3d(0, 140%, 0); transition: transform 1.1s var(--sx-ease); }
.sx-js .sx-split .sx-l:nth-child(2) > span { transition-delay: .09s; }
.sx-js .sx-split .sx-l:nth-child(3) > span { transition-delay: .18s; }
.sx-js .sx-split.is-in .sx-l > span { transform: none; }

/* Generic fade-up reveal. */
.sx-js .sx-rv { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity var(--sx-t-reveal) var(--sx-ease), transform var(--sx-t-reveal) var(--sx-ease); transition-delay: var(--d, 0s); }
.sx-js .sx-rv.is-in { opacity: 1; transform: none; }


/* ---------- Chapter eyebrow: one short emerald line, no dots ---------- */
.sx-eyebrow::before {
    content: ''; flex: 0 0 auto; width: 28px; height: 1px; background: var(--sx-em);
    box-shadow: 0 0 12px rgba(80, 200, 120, .55);
}
.sx-eyebrow b:empty { display: none; }

/* ---------- Buttons ---------- */
.sx-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    min-height: 52px; padding: 0 1.6rem;
    border: 0; border-radius: 999px;
    font: inherit; font-size: 1rem; font-weight: 600; letter-spacing: -.005em;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--sx-t-ui) ease, color var(--sx-t-ui) ease, box-shadow var(--sx-t-ui) ease, transform var(--sx-t-ui) var(--sx-ease);
}
.sx-btn svg { width: 18px; height: 18px; flex: 0 0 auto; transition: transform var(--sx-t-ui) var(--sx-ease); }
.sx-btn--em { background: var(--sx-em); color: var(--sx-em-ink); }
.sx-btn--ghost { background: rgba(255, 255, 255, .07); color: var(--sx-text); box-shadow: inset 0 0 0 1px var(--sx-line-2); }
.sx-btn:active { transform: scale(.98); }
.sx-btn:focus-visible { outline: 2px solid var(--sx-em); outline-offset: 3px; }
@media (hover: hover) {
    .sx-btn--em:hover { background: var(--sx-em-hi); box-shadow: 0 10px 34px -8px rgba(80, 200, 120, .55); }
    .sx-btn--ghost:hover { background: rgba(255, 255, 255, .13); }
    .sx-btn:hover svg { transform: translateX(3px); }
}
/* text links keep their quiet look; an invisible ::before makes the touch target at least 44px tall */
.sx-link::before { content: ''; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); }
.sx-link {
    position: relative;
    display: inline-flex; align-items: center; gap: .5rem;
    color: var(--sx-text); font-weight: 500; text-decoration: none;
    border-bottom: 1px solid var(--sx-line-2); padding-bottom: 3px;
    transition: border-color var(--sx-t-ui) ease, color var(--sx-t-ui) ease;
}
.sx-link svg { width: 16px; height: 16px; transition: transform var(--sx-t-ui) var(--sx-ease); }
.sx-link:hover { border-color: var(--sx-em); }
.sx-link:hover svg { transform: translateX(3px); }
.sx-link:focus-visible { outline: 2px solid var(--sx-em); outline-offset: 4px; border-radius: 2px; }

/* ==========================================================================
   NAV (homepage only): clear over the hero, solid once scrolled.
   ========================================================================== */
@media (min-width: 769px) {
    html body.sx-home nav[aria-label="Main navigation"][aria-label]:not(.nav-scrolled):not(.sdh-scrolled) {
        background: linear-gradient(180deg, rgba(5, 6, 7, .62) 0%, rgba(5, 6, 7, 0) 100%) !important;
        border-bottom-color: transparent !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    html body.sx-home nav[aria-label="Main navigation"][aria-label].nav-scrolled,
    html body.sx-home nav[aria-label="Main navigation"][aria-label].sdh-scrolled {
        background: rgba(8, 9, 11, .82) !important;
        border-bottom-color: rgba(255, 255, 255, .07) !important;
    }
}
html body.sx-home a.sdh-cta {
    background: var(--sx-em);
    color: var(--sx-em-ink);
    -webkit-text-fill-color: var(--sx-em-ink);
    font-weight: 600;
}
html body.sx-home a.sdh-cta:hover { background: var(--sx-em-hi); box-shadow: 0 8px 26px -6px rgba(80, 200, 120, .55); filter: none; }
html body.sx-home a.sdh-cta:focus-visible { outline: 2px solid var(--sx-em); outline-offset: 3px; }

/* ==========================================================================
   HERO: a two-column hero over the full-bleed photograph.
   Left: the headline, one line of copy and Preview your home. Right: the
   quote form as a vertical card (the shared promo-popup wizard in its
   one-page card mode; only its look changes here). Both groups are centred
   on the same horizontal band, the trust row runs centred along the bottom.
   Phones and portrait tablets: copy first, then the form, then the trust row.
   Entrance: the photo is on screen from the first paint (LCP), a veil lifts
   while the roofline highlights sweep left to right.
   ========================================================================== */
.sx section.cine-hero {
    position: relative; isolation: isolate; overflow: hidden;
    display: block; margin: 0; padding: 0;
    background: var(--sx-bg);
}
.sx .cine-hero .sx-hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* a legacy phone rule paints an older hero photo (and a 62% black wash) behind the whole section: off here */
.sx section.cine-hero::before, .sx section.cine-hero::after { content: none !important; display: none !important; background: none !important; }
.sx-hero-photo, .sx-hero-glow { position: absolute; inset: 0; display: block; }
.sx-hero-photo img, .sx-hero-glow img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: var(--hero-pos, 50% 50%); }
.sx-hero-glow { mix-blend-mode: screen; opacity: .26; pointer-events: none; }
.sx-hero-veil { position: absolute; inset: 0; background: #040506; opacity: 0; pointer-events: none; }
.sx .cine-hero .cine-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.sx-hero-inner { position: relative; z-index: 2; box-sizing: border-box; width: 100%; margin: 0 auto; }
.sx .cine-hero .sx-hero-h1 { grid-area: auto; margin: 0; font-family: var(--sx-sans); font-weight: 500; color: #fff; text-align: left; text-shadow: 0 2px 28px rgba(0, 0, 0, .4); }
.sx-hero-kicker { display: block; margin: 0 0 1.1rem; font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .84); }
.sx-hero-title { display: block; letter-spacing: -.045em; line-height: 1; }
.sx-hero-sub { margin: 1.15rem 0 0; font-size: clamp(1.02rem, .96rem + .25vw, 1.2rem); line-height: 1.5; color: rgba(255, 255, 255, .86); text-shadow: 0 1px 18px rgba(0, 0, 0, .5); }
/* a legacy rule hides every <p> inside the hero on phones; the subtitle and the note are exceptions */
.sx section.cine-hero p.sx-hero-sub { display: block !important; opacity: 1; visibility: visible; text-align: left; }
.sx-hero-sub span { display: block; }
.sx-hero-ctas { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.9rem; }
.sx-hero-ctas .sx-btn { min-height: 54px; padding: 0 1.6rem 0 1.35rem; box-shadow: 0 14px 36px -14px rgba(80, 200, 120, .6); }
.sx-hero-ctas .sx-btn svg { width: 19px; height: 19px; }
@media (hover: hover) { .sx-hero-ctas .sx-btn:hover svg { transform: rotate(12deg); } }
.sx-btn--line { background: rgba(8, 9, 11, .2); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
@media (hover: hover) { .sx-btn--line:hover { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75); } }

/* trust row: centred, evenly spaced, no rules between items */
.sx-trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .55rem 2.25rem; margin: 0; padding: 0; list-style: none; }
.sx-trust li { display: inline-flex; align-items: center; gap: .5rem; font-size: .86rem; line-height: 1.2; color: rgba(255, 255, 255, .66); white-space: nowrap; }
.sx-trust b { font-weight: 600; color: #fff; }
.sx-trust-ic { width: 16px; height: 16px; flex: 0 0 auto; }
.sx-trust-culus { width: auto; height: 14px; opacity: .85; }

/* ---- the quote form on the hero: a vertical card (the wizard's card mode) ---- */
.sx .sx-hero-quote { position: relative; width: 100%; }
.sx .sx-hero-quote .hero-quote {
    justify-self: stretch; align-self: auto; max-width: none; width: 100%; margin: 0;
    /* production's frosted card (co-starise.com): translucent charcoal, deep blur, one soft shadow, no hairline */
    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);
}
/* no blur support: the same charcoal, opaque enough to read on any part of the photo */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .sx .sx-hero-quote .hero-quote { background: rgba(20, 22, 28, .96); } }
.sx .sx-hero-quote .hq-q { font-weight: 600; letter-spacing: -.02em; color: #fff; }
.sx .sx-hero-quote .hq-sub { color: rgba(255, 255, 255, .7); }
/* fill eases, the keyboard focus ring appears at once */
.sx .sx-hero-quote .pf-field input { transition: background-color .2s ease; }
/* card layouts (phones too): the placeholder is the visible label, so it keeps 4.5:1 over the brightest wall behind the frost */
@media (max-width: 767px) { .sx .sx-hero-quote .pf-field input::placeholder { color: rgba(255, 255, 255, .7); } }
/* the ping keeps the entrance fade in its list (same name = the finished fade is kept, not replayed) */
.sx .sx-hero-quote .hero-quote.is-ping { animation: sx-hero-fade 1.1s var(--sx-ease) .8s both, sx-ping 1.4s var(--sx-ease) 1; }
@keyframes sx-ping { 0% { box-shadow: inset 0 0 0 1px rgba(80, 200, 120, .9), 0 0 0 0 rgba(80, 200, 120, .45), 0 24px 64px rgba(0, 0, 0, .34); } 100% { box-shadow: inset 0 0 0 1px rgba(80, 200, 120, 0), 0 0 0 18px rgba(80, 200, 120, 0), 0 24px 64px rgba(0, 0, 0, .34); } }

/* ---------------------------------------------------------------- Desktop */
@media (min-width: 1024px) {
    .sx .cine-hero { --hero-pos: 50% 50%; }
    .sx section.cine-hero, .sx-hero-inner { min-height: max(680px, 100vh); min-height: max(680px, 100svh); }
    /* the copy side is darkened only as far as the copy reaches; the form brings its own surface */
    .sx .cine-hero .cine-scrim {
        background:
            linear-gradient(90deg, rgba(5, 7, 12, .78) 0%, rgba(5, 7, 12, .5) 26%, rgba(5, 7, 12, .12) 46%, rgba(5, 7, 12, 0) 58%),
            linear-gradient(180deg, rgba(4, 5, 6, .55) 0%, rgba(4, 5, 6, 0) 14%),
            linear-gradient(0deg, var(--sx-bg) 0%, rgba(8, 9, 11, .8) 8%, rgba(8, 9, 11, 0) 20%);
    }
    .sx-hero-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(380px, 410px);
        grid-template-rows: minmax(0, .62fr) auto minmax(0, 1fr) auto;
        column-gap: clamp(2.5rem, 1rem + 4vw, 6rem);
        max-width: var(--sx-max);
        padding: clamp(5.5rem, 4.5rem + 2vh, 6.75rem) var(--sx-gutter) clamp(1.2rem, .8rem + 1vh, 1.9rem);
    }
    .sx-hero-copy { grid-column: 1; grid-row: 2; align-self: start; max-width: 34rem; padding-top: 34px; }
    .sx-hero-title { font-size: clamp(2.9rem, 1.3rem + 2.9vw, 4.6rem); }
    .sx .sx-hero-quote { grid-column: 2; grid-row: 2; align-self: start; }
    .sx .sx-hero-quote .hero-quote { padding: 30px 28px 20px; border-radius: 28px; }
    .sx .sx-hero-quote .hq-head { margin-bottom: 20px; }
    .sx .sx-hero-quote .hq-q { font-size: 1.5rem; }
    .sx .sx-hero-quote .hq-sub { font-size: .95rem; }
    .sx .sx-hero-quote .hq-pill, .sx .sx-hero-quote .hq-pill:focus-within { gap: 10px; }
    /* production's pill fields: soft charcoal fill, no outline, 50px tall */
    .sx .sx-hero-quote .pf-field input {
        height: 50px; min-height: 50px; padding: 0 20px; border-radius: 999px;
        background-color: rgba(255, 255, 255, .09); box-shadow: none;
    }
    .sx .sx-hero-quote .pf-field input::placeholder { color: rgba(255, 255, 255, .7); }
    .sx .sx-hero-quote .pf-field input:hover { background-color: rgba(255, 255, 255, .12); }
    .sx .sx-hero-quote .pf-field input:focus { background-color: rgba(255, 255, 255, .14); box-shadow: 0 0 0 2px var(--sx-em); }
    .sx .sx-hero-quote .pf-field input[aria-invalid="true"] { box-shadow: 0 0 0 2px rgba(255, 105, 97, .8); }
    .sx .sx-hero-quote .hq-foot { gap: 14px 8px; padding-top: 16px; }
    .sx .sx-hero-quote .hq-consent { font-size: .88rem; color: rgba(255, 255, 255, .74); min-height: 28px; }
    .sx .sx-hero-quote .hq-consent input[type="checkbox"] { width: 20px; height: 20px; }
    .sx .sx-hero-quote .hq-cta { height: 50px; border-radius: 999px; font-size: 1rem; }
    .sx .sx-hero-quote .hq-step { color: rgba(255, 255, 255, .66); }
    .sx-trust { grid-column: 1 / -1; grid-row: 4; justify-self: center; margin-top: clamp(1rem, .6rem + 1vh, 1.6rem); }
}
@media (min-width: 1024px) and (max-width: 1199px) {
    .sx-hero-inner { grid-template-columns: minmax(0, 1fr) 372px; column-gap: 2.5rem; }
    .sx-hero-title { font-size: clamp(2.6rem, 1rem + 3vw, 3.4rem); }
}
@media (min-width: 1024px) and (max-height: 780px) {
    .sx-hero-inner { padding-top: 5.25rem; grid-template-rows: minmax(0, .3fr) auto minmax(0, 1fr) auto; }
    .sx-hero-copy { padding-top: 24px; }
    .sx .sx-hero-quote .hero-quote { padding: 22px 24px 14px; }
    .sx .sx-hero-quote .hq-head { margin-bottom: 14px; }
    .sx .sx-hero-quote .hq-q { font-size: 1.35rem; }
    .sx .sx-hero-quote .pf-field input { height: 48px; min-height: 48px; }
    .sx .sx-hero-quote .hq-pill, .sx .sx-hero-quote .hq-pill:focus-within { gap: 9px; }
    .sx .sx-hero-quote .hq-foot { padding-top: 12px; gap: 10px 8px; }
    .sx .sx-hero-quote .hq-cta { height: 50px; }
    .sx-hero-title { font-size: clamp(2.6rem, 1rem + 2.6vw, 3.8rem); }
}

/* ---------------------------------------------------------------- Tablets, phones */
@media (max-width: 1023px) {
    .sx .cine-hero { --hero-pos: 50% 50%; }
    .sx section.cine-hero { min-height: 0; }
    .sx .cine-hero .sx-hero-media { bottom: auto; height: 100vh; height: 100svh; max-height: 1100px; }
    .sx .cine-hero .cine-scrim {
        bottom: auto; height: 100vh; height: 100svh; max-height: 1100px;
        background:
            linear-gradient(180deg, rgba(4, 5, 6, .74) 0%, rgba(4, 5, 6, .34) 30%, rgba(4, 5, 6, 0) 44%),
            linear-gradient(0deg, var(--sx-bg) 0%, var(--sx-bg) 6%, rgba(8, 9, 11, .88) 16%, rgba(8, 9, 11, .3) 31%, rgba(8, 9, 11, 0) 42%);
    }
    .sx-hero-inner { display: flex; flex-direction: column; padding: 5.6rem 1.25rem calc(1.4rem + env(safe-area-inset-bottom, 0px)); }
    .sx-hero-kicker { margin-bottom: .8rem; font-size: .66rem; letter-spacing: .18em; }
    .sx-hero-title { font-size: clamp(2.5rem, 1.3rem + 6vw, 4rem); line-height: 1; }
    .sx-hero-sub { font-size: 1rem; margin-top: .85rem; }
    .sx-hero-ctas { margin-top: 1.4rem; }
    /* a glimpse of the lit roofline between the copy and the form */
    .sx .sx-hero-quote { margin-top: clamp(7rem, 21svh, 13rem); }
    .sx .sx-hero-quote .hero-quote { border-radius: 28px; }
    .sx .sx-hero-quote .hq-q { display: block !important; font-size: 1.3rem; margin-bottom: .2rem; }
    /* the wizard's rule: an error message takes the title's line (no extra line, so the fields never jump) */
    .sx .sx-hero-quote .hq-head.has-error .hq-q { display: none !important; }
    /* same line box as the title it replaces (1.3rem x 1.2 on phones, x 1.3 on tablets) */
    .sx .sx-hero-quote .pf-error { display: flex; align-items: center; min-height: 1.56rem; line-height: 1.3; margin: 0 0 .2rem; font-size: .98rem; }
    .sx .sx-hero-quote .pf-error[hidden] { display: none; }
    .sx .sx-hero-quote .hq-head { margin-bottom: 14px; }
    .sx-trust { justify-content: center; gap: .55rem 1.4rem; margin-top: 1.5rem; }
    .sx-trust li { font-size: .78rem; }
}
@media (max-width: 767px) {
    .sx-hero-ctas .sx-btn { width: 100%; }
    .sx-trust-x { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1023px) { .sx .sx-hero-quote .pf-error { min-height: 1.69rem; } }
@media (min-width: 600px) and (max-width: 1023px) {
    .sx-hero-inner { padding: 7rem 2.5rem 2rem; }
    .sx-hero-copy { max-width: 36rem; }
    .sx .sx-hero-quote { max-width: 520px; align-self: center; }
    .sx .sx-hero-quote .hero-quote { padding: 24px 22px 20px; }
    .sx-trust li { font-size: .84rem; }
}

/* entrance: the scene comes up, the roofline lights along its length */
.sx-js .sx-hero-photo img { animation: sx-hero-settle 3s var(--sx-ease) both; }
.sx-js .sx-hero-veil { animation: sx-hero-veil 2.4s .1s var(--sx-ease) both; }
.sx-js .sx-hero-glow {
    -webkit-mask-image: linear-gradient(90deg, #000 46%, transparent 54%); mask-image: linear-gradient(90deg, #000 46%, transparent 54%);
    -webkit-mask-size: 230% 100%; mask-size: 230% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    animation: sx-hero-sweep 2.3s .45s cubic-bezier(.45, 0, .2, 1) both, sx-hero-bloom 3.6s .45s var(--sx-ease) both;
}
.sx-js .sx-hero-kicker, .sx-js .sx-hero-title, .sx-js .sx-hero-sub, .sx-js .sx-hero-ctas, .sx-js .sx-hero-quote, .sx-js .sx-trust { animation: sx-hero-rise 1.1s var(--sx-ease) both; }
.sx-js .sx-hero-kicker { animation-delay: .5s; }
.sx-js .sx-hero-title { animation-delay: .62s; }
.sx-js .sx-hero-sub { animation-delay: .78s; }
.sx-js .sx-hero-ctas { animation-delay: .9s; }
.sx-js .sx-hero-quote { animation-delay: .8s; }
.sx-js .sx-trust { animation-delay: 1.1s; }
@keyframes sx-hero-settle { from { transform: scale(1.05); } to { transform: none; } }
@keyframes sx-hero-veil { from { opacity: .7; } to { opacity: 0; } }
@keyframes sx-hero-sweep { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes sx-hero-bloom { 0% { opacity: 0; } 45% { opacity: .85; } 100% { opacity: .26; } }
@keyframes sx-hero-rise { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
/* The quote card's entrance is split: the slot only moves, the card fades itself. Opacity (even a
   held 1 from a fill-mode animation) on an ANCESTOR makes it the backdrop root, so the card's
   backdrop-filter would blur nothing and the house would show through sharp. */
.sx-js .sx-hero-quote { animation-name: sx-hero-lift; }
.sx-js .sx-hero-quote > .hero-quote { animation: sx-hero-fade 1.1s var(--sx-ease) .8s both; }
@keyframes sx-hero-lift { from { transform: translate3d(0, 18px, 0); } to { transform: none; } }
@keyframes sx-hero-fade { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   GET A QUOTE POPUP: the promo-popup wizard (#heroQuote) in a dialog.
   Centered card on desktop and tablet, a bottom sheet on phones.
   ========================================================================== */
.sx.sx-portal { position: static; background: none; overflow: visible; }
.sx-qmodal { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 1.5rem; }
.sx-qmodal[hidden] { display: none; }
.sx-qmodal-backdrop { position: absolute; inset: 0; background: rgba(3, 4, 5, .72); opacity: 0; transition: opacity .35s ease; }
.sx-qmodal-panel {
    position: relative; width: min(100%, 440px); max-height: calc(100vh - 3rem); max-height: calc(100dvh - 3rem); overflow: auto;
    border-radius: 28px; opacity: 0; transform: translate3d(0, 16px, 0) scale(.98);
    transition: opacity .35s var(--sx-ease), transform .45s var(--sx-ease);
    overscroll-behavior: contain;
}
.sx-qmodal.is-open .sx-qmodal-backdrop { opacity: 1; }
.sx-qmodal.is-open .sx-qmodal-panel { opacity: 1; transform: none; }
html.sx-modal-open { overflow: hidden; }
.sx-qmodal-close {
    position: absolute; z-index: 3; top: 14px; right: 14px; width: 44px; height: 44px; display: grid; place-items: center;
    border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer;
}
.sx-qmodal-close svg { width: 18px; height: 18px; }
.sx-qmodal-close:focus-visible { outline: 2px solid var(--sx-em); outline-offset: 2px; }
@media (hover: hover) { .sx-qmodal-close:hover { background: rgba(255, 255, 255, .16); } }
/* the card itself: solid enough to read over the page, the wizard's own layout inside */
.sx .sx-qmodal .hero-quote { max-width: none; margin: 0; background: #14171b; box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .06); -webkit-backdrop-filter: none; backdrop-filter: none; }
.sx .sx-qmodal .hq-head { padding-right: 48px; }
.sx .sx-qmodal .hq-q { font-weight: 500; letter-spacing: -.025em; }
/* Submit is white (production's form): green stays the explore action (Preview your home), white submits. */
.sx .cine-hero .hq-cta { background: #fff; color: #0a0c10; font-weight: 600; letter-spacing: -.005em; box-shadow: none; }
.sx .cine-hero .hq-cta:focus-visible { background: #fff; color: #0a0c10; outline: 2px solid var(--sx-em); outline-offset: 3px; }
@media (hover: hover) { .sx .cine-hero .hq-cta:hover { background: #e8eaed; color: #0a0c10; } }
@media (hover: none) { .sx .cine-hero .hq-cta:hover { background: #fff; color: #0a0c10; } }
.sx .cine-hero .hq-cta:active { background: #dcdfe3; color: #0a0c10; transform: scale(.985); }
.sx .cine-hero .hq-consent input[type="checkbox"]:checked { background-color: var(--sx-em) !important; border-color: var(--sx-em) !important; }
.sx .cine-hero .hq-consent input[type="checkbox"]:focus-visible, .sx .cine-hero .hq-consent a:focus-visible, .sx .cine-hero .hq-back-text:focus-visible { outline-color: var(--sx-em); }
.sx .cine-hero .hq-track i.is-current { background: var(--sx-em); }
.sx .cine-hero .hq-done-mark { background: var(--sx-em); color: var(--sx-em-ink); }
@media (min-width: 1024px), (max-width: 767px) { .sx .cine-hero .pf-field input:focus { box-shadow: 0 0 0 2px var(--sx-em); } }
/* tablets run the wizard one question at a time: give its pill a card to sit on */
@media (min-width: 768px) and (max-width: 1023px) {
    .sx .sx-qmodal .hero-quote { padding: 28px 22px 22px; border-radius: 28px; }
    .sx .sx-qmodal .hq-q { color: #fff; font-size: 1.35rem; }
}
/* Google's error state (key refused, e.g. on localhost) tiles a warning icon across
   the address field and greys it out: keep the field clean and usable. */
.sx #popupForm input.gm-err-autocomplete { background-image: none !important; background-color: rgba(255, 255, 255, .09) !important; color: #fff !important; }
@media (min-width: 768px) and (max-width: 1023px) { .sx #popupForm input.gm-err-autocomplete { background-color: transparent !important; color: #0a0c10 !important; } }
@media (max-width: 767px) {
    .sx #popupForm #pfAddress.gm-err-autocomplete {
        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") !important;
        background-repeat: no-repeat !important; background-position: 18px center !important; background-size: 20px 20px !important;
    }
}
.sx #popupForm input { background-repeat: no-repeat; }
/* phones: a bottom sheet */
@media (max-width: 767px) {
    .sx-qmodal { place-items: end stretch; padding: 0; }
    .sx-qmodal-panel { width: 100%; max-height: 92dvh; border-radius: 26px 26px 0 0; transform: translate3d(0, 40px, 0); }
    .sx .sx-qmodal .hero-quote { border-radius: 26px 26px 0 0; padding: 26px 20px calc(20px + env(safe-area-inset-bottom, 0px)); }
    .sx .sx-qmodal .hq-q { display: block !important; font-size: 1.35rem; margin-bottom: .35rem; }
    .sx .sx-qmodal .hq-head { margin-bottom: 14px; }
}

/* ==========================================================================
   01 ONE ROOFLINE. EVERY OCCASION.
   One real home in four real lighting scenes. The section scrolls natively;
   a sticky stage lets the Accent photo arrive as a single frame, then the
   Holiday, Event and Security photos slide out from behind it until the
   four sit edge to edge. JS writes each panel's box from scroll progress
   (one passive listener, rAF, only while the section is near the viewport).
   After that the panels are buttons: one tap gives a scene most of the stage.
   Reduced motion: no sticky travel, the final four-up composition only.
   ========================================================================== */
.sx-occ { position: relative; padding-top: clamp(4.5rem, 3rem + 5vw, 8rem); }
.sx-occ-head { display: grid; gap: 1.5rem 4rem; align-items: end; }
@media (min-width: 1024px) { .sx-occ-head { grid-template-columns: 1.15fr .85fr; } .sx-occ-head .sx-lede { margin: 0 0 .4rem; justify-self: end; } }

.sx-occ-track { position: relative; height: 240vh; height: 240svh; margin-top: clamp(1.5rem, 1rem + 2vw, 3rem); }
.sx-occ-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.sx-occ-area { position: absolute; inset: 0; }
.sx-occ-glow {
    position: absolute; inset: -10%; pointer-events: none;
    background: radial-gradient(38% 46% at 50% 54%, var(--glow, rgba(255, 186, 102, .32)), transparent 72%);
    opacity: var(--glow-o, 1);
    transition: background 1.2s var(--sx-ease-io);
}
.sx-occ-panel {
    position: absolute; left: 35%; top: 11%; width: 30%; height: 78%;
    margin: 0; padding: 0; border: 0; border-radius: 28px; overflow: hidden;
    background: #14171b; color: #fff; font: inherit; text-align: left; cursor: pointer;
    box-shadow: 0 0 0 1px var(--sx-bg);
    -webkit-tap-highlight-color: transparent;
    contain: layout paint;
}
.sx-occ-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; pointer-events: none; }
.sx-occ-panel::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(0deg, rgba(5, 6, 7, .78) 0%, rgba(5, 6, 7, .1) 34%, rgba(5, 6, 7, 0) 50%);
    opacity: var(--lab, 0);
}
.sx-occ-label {
    position: absolute; z-index: 2; left: clamp(1rem, 1.6vw, 1.6rem); right: clamp(1rem, 1.6vw, 1.6rem); bottom: clamp(1.25rem, 3.4vh, 2.5rem);
    display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .2rem .7rem;
    opacity: var(--lab, 0); transform: translate3d(0, calc((1 - var(--lab, 0)) * 14px), 0);
}
.sx-occ-label i { grid-row: span 2; width: 4px; height: 100%; min-height: 34px; border-radius: 4px; }
.sx-occ-label b { font-size: .76rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.sx-occ-label span { font-size: .92rem; line-height: 1.35; color: rgba(255, 255, 255, .78); }
.sx-occ-panel:focus-visible { outline: 2px solid var(--sx-em); outline-offset: -5px; }
.sx-occ-hint {
    position: absolute; z-index: 3; left: 50%; top: 92px; transform: translateX(-50%);
    margin: 0; padding: .45rem .9rem; border-radius: 999px;
    background: rgba(8, 9, 11, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    font-size: .78rem; letter-spacing: .04em; color: rgba(255, 255, 255, .82); white-space: nowrap; pointer-events: none;
    opacity: calc(var(--lab, 0) * var(--hint, 1)); transition: opacity .4s ease;
}
/* settled: the boxes animate between layouts when a scene is chosen */
.sx-occ.is-settled .sx-occ-panel { transition: transform .85s var(--sx-ease), width .85s var(--sx-ease), height .85s var(--sx-ease), border-radius .85s var(--sx-ease), opacity .5s ease; }
.sx-occ.is-settled .sx-occ-label { transition: opacity .5s ease, transform .5s var(--sx-ease); }
.sx-occ-panel[aria-pressed="true"] .sx-occ-label b { color: #fff; }
.sx-occ-panel.is-minor .sx-occ-label span { opacity: 0; }
@media (max-width: 767px) {
    .sx-occ-track { height: 210vh; height: 210svh; }
    .sx-occ-area { inset: 68px 0 78px 0; }   /* clear of the nav and the sticky Get a Quote bar */
    .sx-occ-hint { top: 80px; }
    .sx-occ-label { grid-template-columns: auto 1fr; left: .85rem; right: .85rem; bottom: .9rem; }
    .sx-occ-label span { font-size: .8rem; }
    .sx-occ-label i { min-height: 30px; }
    .sx-occ-panel.is-minor .sx-occ-label { opacity: 0; }
}
/* static (reduced motion, or no JS): the final composition in a framed stage */
.sx-occ.is-static .sx-occ-track { height: auto; }
.sx-occ.is-static .sx-occ-stage { position: relative; height: min(88vh, 900px); }
@media (max-width: 767px) { .sx-occ.is-static .sx-occ-stage { height: 125vw; } .sx-occ.is-static .sx-occ-area { inset: 0; } }
html:not(.sx-js) .sx-occ-track { height: auto; }
html:not(.sx-js) .sx-occ-stage { position: relative; height: auto; display: block; }
html:not(.sx-js) .sx-occ-area { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); }
html:not(.sx-js) .sx-occ-panel { position: relative; left: auto; top: auto; width: auto; height: auto; aspect-ratio: 3 / 4; border-radius: 0; --lab: 1; }

/* ==========================================================================
   Display type: the headline does the talking (after /permanent-lighting)
   ========================================================================== */
.sx-display { font-size: clamp(3rem, 1.4rem + 6.2vw, 7.6rem); font-weight: 500; letter-spacing: -.055em; line-height: .9; }
.sx-display em { font-size: 1.06em; letter-spacing: -.02em; }
.sx-occ-head { display: block; text-align: center; }
.sx-occ-head .sx-display { margin: 0 auto; }

/* ==========================================================================
   THE FINISH IS THE PROOF (from the current site's night / day
   section): one home in one frame, Day / Night / Colour / Christmas / Canada
   Day. A choice crossfades the new state over the one on show (fast, and only
   once its picture is decoded). While the visitor has not chosen, it steps
   through the five states on its own (only while on screen); a choice stops
   that. The colour, Christmas and Canada Day states are looping films made
   from the same photograph.
   ========================================================================== */
.sx-fp-head { display: grid; gap: 1.25rem 4rem; align-items: end; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
@media (min-width: 1024px) { .sx-fp-head { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } .sx-fp-head .sx-lede { justify-self: end; max-width: 26rem; margin: 0; } }
.sx-fp-stage { position: relative; }
.sx-fp-canvas {
    position: relative; aspect-ratio: 16 / 9; max-height: 86vh; width: 100%; overflow: hidden;
    border-radius: var(--sx-r-l); background: #0e1114; isolation: isolate;
    box-shadow: 0 50px 120px -50px rgba(0, 0, 0, .9);
}
/* Five layers in one fixed stack (Day at the bottom, always opaque). A change only moves layer opacities,
   by transition, so a change asked for mid-fade carries on from what is on screen (js/home-cinema.js).
   Every layer is the same 1.2% larger than the frame: the Day photograph's 8 px dark band on its right
   edge falls outside the frame, and the registration nudges below never open a gap. `.sx` is needed:
   the site-wide `.sx img { max-width: 100% }` would otherwise pin the <img> layers to the frame width. */
.sx .sx-fp-layer {
    position: absolute; top: -.6%; left: -.6%; width: 101.2%; height: 101.2%; max-width: none; max-height: none;
    object-fit: cover; display: block; opacity: 0; transition: opacity .5s cubic-bezier(.33, 0, .2, 1);
    /* registration: the measured offset of each photograph against Day, in pixels of the 1600 x 900
       master, times the on-screen size of one master pixel (--fp-k, set by the script) */
    translate: calc(var(--fp-dx, 0) * var(--fp-k, 0) * -1px) calc(var(--fp-dy, 0) * var(--fp-k, 0) * -1px);
}
.sx .sx-fp-layer[data-layer="day"] { z-index: 1; opacity: 1; transition: none; }
.sx-fp-layer[data-layer="night"] { z-index: 2; --fp-dy: 1.9; }
.sx-fp-layer[data-layer="colour"] { z-index: 3; --fp-dx: 2.8; --fp-dy: 2.17; }
.sx-fp-layer[data-layer="christmas"] { z-index: 4; --fp-dx: 3.12; --fp-dy: 2.33; }
.sx-fp-layer[data-layer="canada"] { z-index: 5; --fp-dx: 3.03; --fp-dy: 2.28; }
/* the state on show before the script takes over (and without it) */
.sx-fp-stage[data-state="night"] [data-layer="night"],
.sx-fp-stage[data-state="colour"] [data-layer="colour"],
.sx-fp-stage[data-state="christmas"] [data-layer="christmas"],
.sx-fp-stage[data-state="canada"] [data-layer="canada"] { opacity: 1; }
.sx .sx-fp-layer.is-snap { transition: none; }
/* film states: the still is the film's first frame; the film fades in on that same frame */
.sx-fp-film img, .sx-fp-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-fp-film video { opacity: 0; transition: opacity .25s ease; }
.sx-fp-film.is-playing video { opacity: 1; }
/* state switch: a glass pill floating on the photo, bottom centre */
.sx-fp-tabs {
    position: absolute; z-index: 5; left: 50%; bottom: clamp(.9rem, .6rem + 1vw, 1.5rem); transform: translateX(-50%);
    display: flex; gap: 4px; padding: 5px; border-radius: 999px;
    background: rgba(8, 9, 11, .52); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 14px 40px -14px rgba(0, 0, 0, .7);
}
.sx-fp-tab {
    position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: 0 1.15rem;
    border: 0; border-radius: 999px; background: none; color: rgba(255, 255, 255, .72);
    font: inherit; font-size: .92rem; font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background-color var(--sx-t-ui) ease, color var(--sx-t-ui) ease;
}
.sx-fp-tab i { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.sx-fp-tab[data-state="day"] i { background: #f4f6f5; }
.sx-fp-tab[data-state="night"] i { background: var(--sx-warm); box-shadow: 0 0 10px var(--sx-warm); }
.sx-fp-tab[data-state="colour"] i { background: conic-gradient(#ff4d6d, #ffb347, #ffe066, #50c878, #4dabff, #9b5cff, #ff4d6d); box-shadow: 0 0 10px rgba(155, 92, 255, .6); }
.sx-fp-tab[data-state="christmas"] i { background: conic-gradient(#e0262f 0 33.3%, #1f9d55 0 66.6%, #fff 0); box-shadow: 0 0 10px rgba(224, 38, 47, .5); }
.sx-fp-tab[data-state="canada"] i { background: linear-gradient(90deg, #e0262f 0 30%, #fff 30% 70%, #e0262f 70%); box-shadow: 0 0 10px rgba(224, 38, 47, .5); }
.sx-fp-tab span { white-space: nowrap; }
.sx-fp-tab[aria-pressed="true"] { background: rgba(255, 255, 255, .95); color: #08090b; }
.sx-fp-tab:focus-visible { outline: 2px solid var(--sx-em); outline-offset: 2px; }
@media (hover: hover) { .sx-fp-tab[aria-pressed="false"]:hover { background: rgba(255, 255, 255, .1); color: #fff; } }
/* while it steps on its own, the active pill shows the time left */
.sx-fp-tab-bar { position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px; background: rgba(8, 9, 11, .14); opacity: 0; }
.sx-fp-tab-bar::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(8, 9, 11, .55); transform-origin: left; transform: scaleX(0); }
.sx-fp-stage.is-auto .sx-fp-tab[aria-pressed="true"] .sx-fp-tab-bar { opacity: 1; }
.sx-fp-stage.is-auto .sx-fp-tab[aria-pressed="true"] .sx-fp-tab-bar::after { animation: sx-fp-bar var(--hold, 4.5s) linear both; }
.sx-fp-stage.is-auto.is-paused .sx-fp-tab[aria-pressed="true"] .sx-fp-tab-bar::after { animation-play-state: paused; }
@keyframes sx-fp-bar { to { transform: none; } }
.sx-fp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 1.6rem; }
.sx-fp-foot p { margin: 0; max-width: 58ch; font-size: clamp(.95rem, .9rem + .2vw, 1.05rem); line-height: 1.5; color: var(--sx-text-2); }
@media (max-width: 767px) {
    .sx-fp-canvas { aspect-ratio: 4 / 3.4; border-radius: var(--sx-r-m); }
    .sx-fp-layer { object-position: 50% 50%; }
    .sx-fp-tabs { position: relative; left: auto; bottom: auto; transform: none; width: 100%; margin-top: .75rem; justify-content: stretch; background: rgba(255, 255, 255, .05); }
    .sx-fp-tabs { gap: 2px; padding: 4px; }
    .sx-fp-tab { flex: 1 1 auto; justify-content: center; gap: .4rem; padding: 0 .45rem; font-size: .85rem; white-space: nowrap; }
}
/* five states on a phone: drop the dots before the labels get tight */
@media (max-width: 420px) { .sx-fp-tab i { display: none; } .sx-fp-tab { padding: 0 .3rem; font-size: .82rem; } }

/* ==========================================================================
   SPECS (from the current site's spec strip): one bento, five
   proof points, each with a quiet live visual. Everything stops under
   reduced motion and nothing moves until the bento is on screen.
   ========================================================================== */
.sx-specs-head { display: grid; gap: 1rem 4rem; align-items: end; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
@media (min-width: 1024px) { .sx-specs-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .sx-specs-head .sx-lede { justify-self: end; max-width: 24rem; margin: 0; } }
.sx-bento { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .sx-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(220px, auto); } .sx-b--hours { grid-column: span 2; grid-row: span 2; } }
@media (max-width: 1023px) { .sx-b--hours { grid-column: 1 / -1; } }
.sx-b {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; justify-content: flex-end; min-height: 200px;
    padding: clamp(1.25rem, 1rem + 1vw, 1.9rem); border-radius: var(--sx-r-l);
    background: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .055), rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, #121519, #0c0e11);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .075);
    transition: box-shadow .4s ease, transform .5s var(--sx-ease);
}
@media (hover: hover) { .sx-b:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); transform: translateY(-2px); } }
.sx-b p { margin: 0; }
.sx-b-k { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sx-text-3); }
.sx-b-v { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem); font-weight: 500; letter-spacing: -.045em; line-height: 1; color: var(--sx-text); font-variant-numeric: tabular-nums; }
.sx-b-l { margin-top: .45rem !important; font-size: .95rem; color: var(--sx-text-2); }
.sx-b-vis { position: absolute; z-index: -1; pointer-events: none; }
/* every season */
.sx-b--hours { min-height: 360px; }
.sx-b--hours .sx-b-v { font-size: clamp(3.6rem, 2rem + 5.4vw, 7.4rem); font-weight: 400; letter-spacing: -.065em; margin-top: .2rem; }
.sx-b--hours .sx-b-l { font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); }
.sx-b--hours .sx-b-l { text-wrap: balance; }
.sx-b--hours { container-type: inline-size; }
.sx-b--hours .sx-b-motto { font-size: clamp(2.1rem, 10cqi, 4.3rem); letter-spacing: -.045em; line-height: 1.02; }
.sx-b-motto span { display: block; white-space: nowrap; }
.sx-b-l a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: .2em; white-space: nowrap; transition: text-decoration-color .2s ease; }
.sx-b-l a:hover { text-decoration-color: currentColor; }
/* every season: a wall calendar drawn in hairlines. Its days are small light points (the roofline's
   nodes), laid out as the real month. The first time the card is well in view, the pages riffle through
   the months and seasons, year after year: slow, then a blur, then slowing to rest on this month
   (js/home-cinema.js). No year count is shown. At rest only today's point keeps a slow, faint breath. */
.sx-cal { right: clamp(1rem, -1rem + 4vw, 3rem); top: clamp(1rem, -.5rem + 3vw, 2.6rem); width: clamp(112px, 4.5rem + 8.2vw, 204px); container-type: inline-size; }
.sx-cal-frame { position: relative; aspect-ratio: 1 / 1.08; border-radius: 10cqw; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012) 70%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15), 0 24px 48px -28px rgba(0, 0, 0, .9); perspective: 220cqw; }
.sx-cal-tab { position: absolute; top: -4.5cqw; left: 30%; width: 1.4cqw; min-width: 1.5px; height: 10cqw; border-radius: 2px; background: rgba(255, 255, 255, .42); z-index: 3; }
.sx-cal-tab + .sx-cal-tab { left: auto; right: 30%; }
.sx-cal-page, .sx-cal-leaf { position: absolute; inset: 0; padding: 15cqw 12cqw 11cqw; border-radius: inherit; }
.sx-cal-leaf { background: linear-gradient(180deg, #1b1e22, #15181c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); transform-origin: 50% 0; backface-visibility: hidden; will-change: transform, opacity; z-index: 2; }
.sx-cal-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 6cqw; margin-bottom: 7.5cqw; border-bottom: 1px solid rgba(255, 255, 255, .1); line-height: 1; }
.sx-cal-m { font-size: 10cqw; font-weight: 500; letter-spacing: .16em; color: var(--sx-text); }
.sx-cal-y { font-size: 7cqw; letter-spacing: .12em; color: #ffd29a; font-variant-numeric: tabular-nums; }
.sx-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 5.6cqw; justify-items: center; }
.sx-cal-grid i { width: 3.2cqw; min-width: 2px; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .06); }
.sx-cal-grid i.is-d { background: rgba(255, 255, 255, .34); }
.sx-cal-grid i.is-now { background: #fff3df; box-shadow: 0 0 1.6cqw rgba(255, 210, 154, .95), 0 0 4.5cqw rgba(255, 186, 102, .5); }
.sx-bento.is-on .sx-cal.is-rested .is-now { animation: sx-cal-breathe 6s 1s ease-in-out infinite; }
@keyframes sx-cal-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .68; } }
@keyframes sx-spin { to { transform: rotate(360deg); } }
/* IP68: one light module below a waterline. Every few seconds a single drop meets the surface and
   rings out; the light underneath stays lit. */
.sx-ip { right: clamp(1.25rem, 1rem + 1vw, 1.9rem); top: clamp(1.25rem, 1rem + 1vw, 1.9rem); width: clamp(84px, 60px + 3vw, 112px); }
.sx-ip svg { display: block; width: 100%; height: auto; overflow: visible; }
.sx-ip-water { fill: url(#sxIpWater); }
.sx-ip-line { fill: none; stroke: url(#sxIpLine); stroke-width: 1; }
.sx-ip-housing { fill: #0d1013; stroke: rgba(255, 255, 255, .24); stroke-width: 1; }
.sx-ip-led { fill: #fff3df; filter: drop-shadow(0 0 3px rgba(255, 210, 154, .9)) drop-shadow(0 0 10px rgba(255, 186, 102, .45)); }
.sx-ip-drop { stroke: rgba(170, 205, 255, .75); stroke-width: 1; stroke-linecap: round; opacity: 0; }
.sx-ip-ripple { fill: none; stroke: rgba(170, 205, 255, .6); stroke-width: .8; opacity: 0; transform-box: fill-box; transform-origin: center; }
.sx-bento.is-on .sx-ip-drop { animation: sx-ip-drop 6.5s 1.2s infinite; }
.sx-bento.is-on .sx-ip-ripple { animation: sx-ip-ripple 6.5s 1.2s ease-out infinite; }
@keyframes sx-ip-drop { 0% { transform: translateY(0); opacity: 0; animation-timing-function: cubic-bezier(.5, 0, 1, 1); } 3% { opacity: 1; } 12% { transform: translateY(26px); opacity: 1; } 12.5%, 100% { transform: translateY(26px); opacity: 0; } }
@keyframes sx-ip-ripple { 0%, 12% { transform: scale(.15); opacity: 0; } 13% { opacity: .9; } 46%, 100% { transform: scale(1); opacity: 0; } }
/* millions of colours: a slow colour wheel */
.sx-orb { right: -18%; top: -22%; width: 78%; aspect-ratio: 1; }
.sx-orb i { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, #ff4d6d, #ffb347, #ffe066, #50c878, #4dabff, #9b5cff, #ff4d6d); filter: blur(28px) saturate(1.2); opacity: .55; }
.sx-bento.is-on .sx-orb i { animation: sx-spin 40s linear infinite; }
/* thousands of effects: one roofline of light nodes running a programmed sequence. Warm white, then
   alternating red and green, then violet and blue; each change travels node by node along the line.
   This is the section's one continuously moving graphic; the other cards stay quiet around it. */
.sx-fx { left: clamp(1.25rem, 1rem + 1vw, 1.9rem); right: clamp(1.25rem, 1rem + 1vw, 1.9rem); top: clamp(1.25rem, 1rem + 1vw, 1.9rem); }
.sx-fx svg { display: block; width: 100%; max-width: 264px; height: auto; overflow: visible; }
.sx-fx-track { fill: none; stroke: rgba(255, 255, 255, .09); stroke-width: 1; stroke-linejoin: round; }
.sx-fx-nodes circle { fill: #ffd7a3; }
.sx-bento.is-on .sx-fx-nodes circle { animation: sx-fx-a 9s calc(var(--n) * .07s) linear infinite; }
.sx-bento.is-on .sx-fx-nodes circle:nth-child(even) { animation-name: sx-fx-b; }
@keyframes sx-fx-a { 0%, 27% { fill: #ffd7a3; } 33%, 60% { fill: #ff6f6a; } 66%, 93% { fill: #a98bff; } 100% { fill: #ffd7a3; } }
@keyframes sx-fx-b { 0%, 27% { fill: #ffd7a3; } 33%, 60% { fill: #4fd18b; } 66%, 93% { fill: #6fa8ff; } 100% { fill: #ffd7a3; } }
/* one app: an occasional tap */
.sx-tap { right: clamp(1.25rem, 1rem + 1vw, 1.9rem); top: clamp(1.25rem, 1rem + 1vw, 1.9rem); width: 46px; height: 74px; }
.sx-tap-phone { position: absolute; inset: 0; border-radius: 11px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); display: grid; align-content: center; justify-items: center; gap: 5px; }
.sx-tap-phone i { width: 22px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .22); }
.sx-tap-phone i:nth-child(2) { background: var(--sx-em); box-shadow: 0 0 8px rgba(80, 200, 120, .8); }
.sx-tap-ring { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(80, 200, 120, .85), 0 0 10px rgba(80, 200, 120, .35); opacity: 0; }
.sx-bento.is-on .sx-tap-ring { animation: sx-tap 7s 4.4s ease-out infinite; }
@keyframes sx-tap { 0% { transform: scale(.35); opacity: 0; } 4% { opacity: 1; } 20%, 100% { transform: scale(1.4); opacity: 0; } }
/* Off screen every loop pauses where it is (nothing restarts, nothing snaps back on the way in or out). */
.sx-bento.is-on:not(.is-live) .sx-b-vis, .sx-bento.is-on:not(.is-live) .sx-b-vis * { animation-play-state: paused; }
/* the rest: one quiet line */
.sx-spec-rail { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 0; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.sx-spec-rail li { font-size: .88rem; color: var(--sx-text-2); white-space: nowrap; }
.sx-spec-rail li + li { margin-left: 1.25rem; padding-left: 1.25rem; border-left: 1px solid var(--sx-line-2); }
@media (max-width: 767px) {
    .sx-b { min-height: 168px; border-radius: var(--sx-r-m); }
    .sx-b--hours { min-height: 300px; }
    .sx-tap { width: 40px; height: 64px; }
    .sx-ip { width: 66px; }
    .sx-spec-rail { justify-content: flex-start; gap: .5rem; }
    .sx-spec-rail li + li { margin-left: 0; padding-left: .8rem; border-left: 0; }
    .sx-spec-rail li { padding: .45rem .8rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--sx-line); font-size: .82rem; }
}

/* ==========================================================================
   SEE IT ON YOUR HOME: what the AI Home Preview does, shown with a
   real phone photo and the AI preview made from it (drag to compare). The
   launcher block keeps its id and behaviour; the labelling is explicit.
   ========================================================================== */
.sx-pv { overflow: hidden; }
.sx-pv::before { content: ''; position: absolute; z-index: -1; right: -10%; top: 10%; width: 60%; height: 80%; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 199, 122, .1), rgba(255, 199, 122, 0) 70%); pointer-events: none; }
.sx-pv-grid { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 6rem); align-items: center; }
@media (min-width: 1024px) { .sx-pv-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); } }
.sx-pv-copy .sx-lede { max-width: 26rem; }
.sx-pv-steps { display: grid; gap: .6rem; margin: 2rem 0 0; padding: 0; list-style: none; max-width: 26rem; }
.sx-pv-steps li { display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; border-radius: var(--sx-r-s); background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--sx-line); font-size: .98rem; color: var(--sx-text); }
.sx-pv-steps b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; font-size: .8rem; font-weight: 600; color: var(--sx-em-ink); background: var(--sx-em); }
.sx-prev-cta, .sx-prev-fallback { margin-top: 2rem; }
.sx-prev-local { margin: 1rem 0 0; max-width: 28rem; padding: .7rem .95rem; border-radius: var(--sx-r-s); background: rgba(255, 199, 122, .1); box-shadow: inset 0 0 0 1px rgba(255, 199, 122, .28); font-size: .82rem; line-height: 1.5; color: #ffd9a3; }
.sx-prev-local[hidden] { display: none; }
#hpSection[hidden] { display: none; }
#hpSection:not([hidden]) + .sx-prev-fallback { display: none; }
.sx-pv-stage { position: relative; margin: 0; }
.sx-pv-stage figcaption { margin-top: .9rem; font-size: .8rem; letter-spacing: .02em; color: var(--sx-text-3); text-align: center; }
/* the drag comparison (shared with nothing else on the page) */
.sx-cmp {
    --pos: 50%;
    position: relative; aspect-ratio: 3 / 4; max-height: 82vh; margin: 0 auto; border-radius: var(--sx-r-l); overflow: hidden;
    background: #1a1d21; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 50px 120px -40px rgba(0, 0, 0, .9);
}
.sx-cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.sx-cmp-on { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); will-change: clip-path; }
/* the divider moves with a transform (a full-width layer slid by --pos), not with left: the intro sweep
   animates it and a moving left registers as layout shift */
.sx-cmp-line { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; z-index: 3; pointer-events: none; transform: translate3d(var(--pos), 0, 0); will-change: transform; }
.sx-cmp-line::before { content: ''; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: rgba(255, 255, 255, .92); box-shadow: 0 0 18px rgba(255, 199, 122, .6); }
.sx-cmp-knob { position: absolute; top: 50%; left: 0; width: 54px; height: 54px; margin: -27px 0 0 -27px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .96); color: #08090b; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: transform var(--sx-t-ui) var(--sx-ease); }
.sx-cmp-knob svg { width: 22px; height: 22px; }
.sx-cmp.is-drag .sx-cmp-knob { transform: scale(.92); }
.sx-cmp-range { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; }
.sx-cmp-range:focus-visible ~ .sx-cmp-line .sx-cmp-knob { outline: 3px solid var(--sx-em); outline-offset: 3px; }
.sx-cmp-tag { position: absolute; z-index: 2; top: 1rem; display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .8rem; border-radius: 999px; background: rgba(8, 9, 11, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #fff; pointer-events: none; }
.sx-cmp-tag i { width: 7px; height: 7px; border-radius: 50%; }
.sx-cmp-tag--on { left: 1rem; }
.sx-cmp-tag--on i { background: var(--sx-em); box-shadow: 0 0 10px var(--sx-em); }
.sx-cmp-tag--off { right: 1rem; }
.sx-cmp-tag--off i { background: rgba(255, 255, 255, .45); }
@media (max-width: 767px) { .sx-cmp { border-radius: var(--sx-r-m); } }

/* ==========================================================================
   THE APP: a hand-held phone at blue hour with the real app screens
   inside it (the screen is a live layer, so the app stays sharp and changes
   screens). Three features as tabs; it steps through them on its own while on
   screen until the visitor picks one.
   ========================================================================== */
.sx-app2 { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 6rem); align-items: center; }
@media (min-width: 1024px) { .sx-app2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.sx-app2-stage { position: relative; margin: 0; width: 100%; max-width: 560px; justify-self: center; aspect-ratio: 1080 / 1764; max-height: 92vh; border-radius: var(--sx-r-l); overflow: hidden; isolation: isolate; background: #0a0d12; }
@media (min-width: 1024px) and (max-height: 900px) { .sx-app2-stage { max-width: calc(92vh * 1080 / 1764); } }
.sx-app2-hand { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-app2-stage::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(120% 90% at 50% 40%, rgba(8, 9, 11, 0) 55%, rgba(8, 9, 11, .55) 100%); }
/* the phone's screen in the photograph: 616..1175 x 591..1820 of the 1792 x 2400 frame, cropped at 296, 371 */
.sx-app2-screen { position: absolute; z-index: 2; left: 26.667%; top: 11.224%; width: 46.583%; height: 62.704%; overflow: hidden; border-radius: 12.9% / 5.86%; background: #000; }
.sx-app2-screen img { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; display: block; opacity: 0; transform: translate3d(0, 3%, 0); transition: opacity .55s var(--sx-ease-io), transform .8s var(--sx-ease); }
.sx-app2-screen img.is-on { opacity: 1; transform: none; }
.sx-app2-glare { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .02) 28%, rgba(255, 255, 255, 0) 42%); }
.sx-app2-glow { position: absolute; z-index: 1; left: 18%; top: 4%; width: 64%; height: 78%; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, var(--app-glow, rgba(155, 92, 255, .32)), transparent 70%); filter: blur(30px); pointer-events: none; transition: background .8s ease; }
.sx-app2-stage[data-shot="patterns"] { --app-glow: rgba(255, 140, 90, .3); }
.sx-app2-stage[data-shot="timer"] { --app-glow: rgba(77, 171, 255, .3); }
.sx-app2-copy .sx-lede { max-width: 26rem; }
.sx-app2 .sx-feats { display: grid; gap: 0; margin: 2.25rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--sx-line); max-width: 30rem; }
.sx-app2 .sx-feat { border-bottom: 1px solid var(--sx-line); }
.sx-app2 .sx-feat-btn {
    position: relative; display: grid; grid-template-columns: 2.4rem 1fr; grid-template-areas: 'n t' 'n s'; align-items: baseline; column-gap: .75rem; row-gap: .15rem;
    width: 100%; padding: 1.15rem 0 1.25rem; border: 0; background: none; cursor: pointer; text-align: left;
    font: inherit; color: var(--sx-text-3); -webkit-tap-highlight-color: transparent; transition: color .4s ease;
}
.sx-feat-n { grid-area: n; font-size: .78rem; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.sx-feat-t { grid-area: t; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.1; }
.sx-feat-s { grid-area: s; font-size: .95rem; line-height: 1.45; color: var(--sx-text-3); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--sx-ease), opacity .4s ease; }
.sx-feat.is-on .sx-feat-btn { color: var(--sx-text); }
.sx-feat.is-on .sx-feat-n { color: var(--sx-em); }
.sx-feat.is-on .sx-feat-s { max-height: 3.2em; opacity: 1; color: var(--sx-text-2); }
@media (hover: hover) { .sx-app2 .sx-feat-btn:hover { color: var(--sx-text-2); } }
.sx-app2 .sx-feat-btn:focus-visible { outline: 2px solid var(--sx-em); outline-offset: 4px; border-radius: 8px; }
.sx-feat-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; overflow: hidden; }
.sx-feat-bar i { position: absolute; inset: 0; background: var(--sx-em); transform-origin: left; transform: scaleX(0); }
.sx-app2.is-auto .sx-feat.is-on .sx-feat-bar i { animation: sx-fp-bar 4.2s linear both; }
.sx-app2.is-auto.is-paused .sx-feat.is-on .sx-feat-bar i { animation-play-state: paused; }
@media (max-width: 767px) {
    .sx-app2-stage { max-width: 420px; border-radius: var(--sx-r-m); }
    .sx-app2-copy { order: -1; }
}

/* ==========================================================================
   QUOTE PROMPT: once per session, a quiet card (bottom right). Tablets and
   desktop only; phones keep the sticky Get Quote bar.
   ========================================================================== */
.sx-qprompt {
    position: fixed; z-index: 99990; right: 24px; bottom: 24px; width: min(360px, calc(100vw - 48px));
    padding: 20px 20px 18px; border-radius: 24px; color: var(--sx-text);
    background: rgba(16, 18, 22, .88); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 80px -20px rgba(0, 0, 0, .8);
    opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .45s var(--sx-ease), transform .55s var(--sx-ease);
    font-family: var(--sx-sans);
}
.sx-qprompt[hidden] { display: none; }
.sx-qprompt.is-in { opacity: 1; transform: none; }
.sx-qprompt p { margin: 0; }
.sx-qprompt-k { display: inline-flex; align-items: center; gap: .5rem; font-size: .7rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--sx-text-2); }
.sx-qprompt-k i { width: 6px; height: 6px; border-radius: 50%; background: var(--sx-em); box-shadow: 0 0 8px rgba(80, 200, 120, .8); }
.sx-qprompt-t { margin-top: .55rem !important; font-size: 1.3rem; font-weight: 500; letter-spacing: -.025em; line-height: 1.2; }
.sx-qprompt-s { margin-top: .4rem !important; font-size: .9rem; line-height: 1.45; color: var(--sx-text-2); padding-right: .5rem; }
.sx-qprompt-a { display: flex; align-items: center; gap: .5rem; margin-top: 1.1rem; }
.sx-qprompt-a .sx-btn { min-height: 46px; padding: 0 1.3rem; font-size: .95rem; }
.sx-qprompt-later { min-height: 46px; padding: 0 1rem; border: 0; border-radius: 999px; background: none; color: var(--sx-text-2); font: inherit; font-size: .92rem; cursor: pointer; }
.sx-qprompt-later:hover { color: #fff; }
.sx-qprompt-x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .06); color: var(--sx-text-2); cursor: pointer; }
.sx-qprompt-x svg { width: 16px; height: 16px; }
.sx-qprompt-x:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.sx-qprompt-x:focus-visible, .sx-qprompt-later:focus-visible { outline: 2px solid var(--sx-em); outline-offset: 2px; }
@media (max-width: 767px) { .sx-qprompt { display: none !important; } }

/* the dialog's slot: the hero wizard is moved here while the dialog is open */
.sx-qmodal-slot { display: block; }

/* ==========================================================================
   ONE INSTALLATION. ENDLESS POSSIBILITIES.
   Real colour-chase footage carries the title; then the app (below).
   ========================================================================== */
.sx-app { padding-top: 0; }
.sx-chase { position: relative; margin: 0 0 clamp(4rem, 3rem + 5vw, 8rem); min-height: min(92vh, 900px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; background: #0d0f12; }
.sx-chase video { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; display: block; }
.sx-chase::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    /* top and bottom both resolve to the page background, so the footage melts into the sections around it */
    background: linear-gradient(180deg, var(--sx-bg) 0%, rgba(8, 9, 11, 0) 22%, rgba(8, 9, 11, 0) 48%, rgba(8, 9, 11, .62) 78%, var(--sx-bg) 100%);
}
/* Soft scrim behind the headline only (bottom-left), so the sky and the LEDs on the right stay clean and bright. */
.sx-chase::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(85% 65% at 0% 100%, rgba(8, 9, 11, .55) 0%, rgba(8, 9, 11, .28) 45%, rgba(8, 9, 11, 0) 75%);
}
.sx-chase .sx-display { text-shadow: 0 2px 24px rgba(8, 9, 11, .35); }
/* The poster frame also sits under the video, so the first play can open on it (see data-sx-reveal in home-cinema.js). */
.sx-chase { background: #0d0f12 url("/assets/home/permanent-lighting-colour-chase-winter-calgary-enhanced-loop-poster-1920.webp") 50% 55% / cover no-repeat; }
.sx-chase video.sx-warm { opacity: 0; }
/* Video one layer below ::before / ::after (all three were z-index -1, so the video painted over the ::before
   gradient and the top/bottom fades never showed). The figure is isolated, so this stays inside it. */
.sx-chase video { z-index: -2; }
.sx-chase figcaption { position: relative; padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.sx-chase .sx-display { max-width: 12ch; }
.sx-chase-tag { padding: .4rem .75rem; border-radius: 999px; background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: .7rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .86); }
@media (max-width: 767px) { .sx-chase { min-height: 78svh; background-position: 62% 50%; } .sx-chase video { object-position: 62% 50%; } }

/* ==========================================================================
   REAL PEOPLE INSTALL THIS: real footage, a real photo, three short steps.
   ========================================================================== */
.sx-inst-grid { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 6rem); align-items: center; }
@media (min-width: 1024px) { .sx-inst-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.sx-inst-media { position: relative; margin-right: 12%; }
.sx-inst-video { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--sx-r-l); overflow: hidden; background: #14171b; }
.sx-inst-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.sx-inst-photo { position: absolute; right: -14%; bottom: -8%; width: 44%; aspect-ratio: 3 / 4; margin: 0; border-radius: var(--sx-r-m); overflow: hidden; background: #14171b; box-shadow: 0 0 0 6px var(--sx-bg), 0 30px 60px -20px rgba(0, 0, 0, .8); }
.sx-inst-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@supports (animation-timeline: view()) {
    .sx-inst-photo { animation: sx-inset linear both; animation-timeline: view(); animation-range: cover 10% cover 70%; }
    @keyframes sx-inset { from { transform: translate3d(0, 16%, 0); } to { transform: none; } }
}
@media (max-width: 767px) { .sx-inst-media { margin: 0 14% 10% 0; } .sx-inst-photo { right: -16%; width: 46%; } }
.sx-h2--calm { font-size: clamp(2.3rem, 1.4rem + 2.8vw, 3.8rem); letter-spacing: -.04em; line-height: 1.02; }
.sx-steps { display: grid; gap: 2rem; margin: 2.75rem 0 0; padding: 0; list-style: none; }
.sx-step { display: grid; grid-template-columns: clamp(3rem, 2rem + 2vw, 4.5rem) 1fr; column-gap: 1.25rem; align-items: baseline; }
.sx-step-n { grid-row: span 2; font-size: clamp(3rem, 2rem + 2.6vw, 4.6rem); font-weight: 300; line-height: .8; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px rgba(244, 246, 245, .45); }
.sx-step h3 { margin: 0 0 .3rem; font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); font-weight: 500; letter-spacing: -.02em; }
.sx-step p { margin: 0; font-size: .98rem; line-height: 1.5; color: var(--sx-text-2); }
.sx-facts {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
    margin: clamp(3.5rem, 2.5rem + 4vw, 6rem) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--sx-line);
}
.sx-facts li { padding: 1.5rem 1.25rem 1.5rem 0; border-bottom: 1px solid var(--sx-line); }
.sx-facts li:nth-child(odd) { border-right: 1px solid var(--sx-line); }
.sx-facts li:nth-child(even) { padding-left: 1.25rem; }
.sx-facts strong { display: block; font-size: clamp(2rem, 1.5rem + 2vw, 3.2rem); font-weight: 500; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.sx-facts span { display: block; margin-top: .6rem; font-size: .9rem; line-height: 1.4; color: var(--sx-text-2); }
@media (min-width: 900px) {
    .sx-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sx-facts li { border-bottom: 0; border-right: 1px solid var(--sx-line); padding: 1.75rem 1.75rem 0 0; }
    .sx-facts li + li, .sx-facts li:nth-child(even) { padding-left: 1.75rem; }
    .sx-facts li:last-child { border-right: 0; }
}

/* ==========================================================================
   PROOF: live Google reviews over a real roofline. The markup, the live
   script and the base styles are shared with /permanent-lighting (generated
   by scripts/build-home-parts.js), so this page restyles them here only.
   ========================================================================== */
.sx #reviews.rvb {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; align-items: center; min-height: min(100vh, 1000px);
    padding: clamp(6rem, 4rem + 8vw, 11rem) 0; margin: 0;
    background: var(--sx-bg); color: var(--sx-text);
}
.sx #reviews .rvb-media img { object-position: 62% 40%; }
.sx #reviews .rvb-media::after {
    background:
        linear-gradient(180deg, var(--sx-bg) 0%, rgba(8, 9, 11, .15) 20%, rgba(8, 9, 11, .15) 78%, var(--sx-bg) 100%),
        linear-gradient(90deg, rgba(8, 9, 11, .96) 0%, rgba(8, 9, 11, .82) 36%, rgba(8, 9, 11, .1) 72%);
}
.sx #reviews .rvb-panel {
    width: 100%; max-width: var(--sx-max); margin: 0 auto; padding: 0 var(--sx-gutter);
    background: none; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.sx #reviews .rvb-top, .sx #reviews .rvb-quotes, .sx #reviews .rvb-foot, .sx #reviews #google-attribution { max-width: 36rem; }
.sx #reviews .rvb-num { font-size: clamp(4rem, 3rem + 4vw, 6.5rem); font-weight: 500; letter-spacing: -.055em; }
.sx #reviews .rvb-stars { color: var(--sx-warm); font-size: 1.1rem; letter-spacing: .2em; }
.sx #reviews h2 {
    margin: 1.2rem 0 0; font-size: clamp(2.3rem, 1.4rem + 3.2vw, 4.4rem); font-weight: 500;
    line-height: .98; letter-spacing: -.045em; color: var(--sx-text); text-align: left; text-wrap: balance;
}
.sx #reviews .rvb-sub { margin-top: 1rem; font-size: 1.05rem; color: var(--sx-text-2); }
.sx #reviews .rvb-quotes { margin-top: 2.5rem; gap: 0; border-top: 1px solid var(--sx-line); }
.sx #reviews .rvb-quote { padding: 1.6rem 0; border-radius: 0; background: none; border-bottom: 1px solid var(--sx-line); }
.sx #reviews .rvb-quote-stars { color: var(--sx-warm); font-size: .78rem; letter-spacing: .18em; margin-bottom: .7rem; }
.sx #reviews .rvb-quote p { font-family: var(--sx-serif); font-style: italic; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); line-height: 1.3; letter-spacing: 0; color: var(--sx-text); text-wrap: pretty; }
.sx #reviews .rvb-quote small { margin-top: .7rem; font-size: .84rem; color: var(--sx-text-3); }
.sx #reviews .rvb-quotes .review-loading { height: 7rem; border-radius: 0; background: none; border-bottom: 1px solid var(--sx-line); position: relative; overflow: hidden; }
.sx #reviews .rvb-quotes .review-loading .review-stars { display: none; }
.sx #reviews .rvb-quotes .review-loading::after { content: ''; position: absolute; left: 0; top: 1.6rem; width: 70%; height: 1.1rem; border-radius: 6px; background: rgba(255, 255, 255, .06); box-shadow: 0 2rem 0 rgba(255, 255, 255, .04); }
.sx #reviews .rvb-quotes .review-fallback { padding: 1.6rem 0; border-radius: 0; background: none; border-bottom: 1px solid var(--sx-line); }
.sx #reviews .rvb-quotes .review-fallback .review-text { color: var(--sx-text-2); font-size: 1.02rem; }
.sx #reviews .rvb-quotes .review-fallback a { color: var(--sx-text); }
.sx #reviews .rvb-foot { margin-top: 1.75rem; justify-content: flex-start; gap: 1rem 1.75rem; }
.sx #reviews .rvb-count { font-size: .88rem; color: var(--sx-text-3); }
.sx #reviews .rvb-cta { min-height: 48px; padding: 0 1.35rem; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px var(--sx-line-2); font-weight: 500; }
.sx #reviews .rvb-cta:hover { background: rgba(255, 255, 255, .14); }
.sx #reviews .rvb-cta:focus-visible { outline: 2px solid var(--sx-em); outline-offset: 3px; }
.sx #reviews #google-attribution { justify-content: flex-start !important; margin-top: 1.1rem !important; }
.sx #reviews .rvb-place { right: var(--sx-gutter); bottom: clamp(3rem, 2rem + 4vw, 6rem); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
@media (max-width: 860px) {
    .sx #reviews.rvb { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 4.5rem var(--sx-gutter) 4rem; }
    .sx #reviews .rvb-panel { display: contents; }
    .sx #reviews .rvb-media { margin: 2rem 0 0; border-radius: var(--sx-r-m); }
    .sx #reviews .rvb-place { top: 2.4rem; right: var(--sx-gutter); bottom: auto; }
    .sx #reviews h2 { font-size: 2.4rem; }
    .sx #reviews .rvb-num { font-size: 4.25rem; }
}


/* ==========================================================================
   QUESTIONS
   ========================================================================== */
.sx-faq-grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .sx-faq-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 6rem; } .sx-faq-aside { position: sticky; top: 16vh; align-self: start; } }
.sx-faq-aside .sx-h2 { font-size: clamp(2.3rem, 1.4rem + 3.2vw, 4.2rem); }
.sx-faq-aside-links { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; margin-top: 2rem; }
.sx-faq-aside-links a[href^="tel"] { color: var(--sx-text-2); text-decoration: none; font-size: .95rem; }
.sx-faq-aside-links a[href^="tel"]:hover { color: var(--sx-text); }
.sx-qas { border-top: 1px solid var(--sx-line); }
.sx-qa { border-bottom: 1px solid var(--sx-line); }
.sx-qa h3 { margin: 0; }
.sx-qa-q {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%;
    padding: 1.6rem 0; border: 0; background: none; color: var(--sx-text); cursor: pointer; text-align: left;
    font: inherit; font-size: clamp(1.1rem, 1rem + .45vw, 1.35rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.3;
    -webkit-tap-highlight-color: transparent;
}
.sx-qa-q:focus-visible { outline: 2px solid var(--sx-em); outline-offset: 4px; border-radius: 6px; }
.sx-qa-ic { position: relative; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--sx-line-2); transition: background-color var(--sx-t-ui) ease, box-shadow var(--sx-t-ui) ease; }
.sx-qa-ic::before, .sx-qa-ic::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: currentColor; border-radius: 2px; transition: transform .45s var(--sx-ease); }
.sx-qa-ic::after { transform: rotate(90deg); }
.sx-qa-q[aria-expanded="true"] .sx-qa-ic { background: var(--sx-em); color: var(--sx-em-ink); box-shadow: none; }
.sx-qa-q[aria-expanded="true"] .sx-qa-ic::after { transform: rotate(0deg); }
@media (hover: hover) { .sx-qa-q:hover .sx-qa-ic { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); } }
.sx-qa-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--sx-ease); }
.sx-qa-a > div { overflow: hidden; }
.sx-qa-a p { margin: 0; padding: 0 3.5rem 1.75rem 0; font-size: 1.02rem; line-height: 1.65; color: var(--sx-text-2); max-width: 44rem; }
.sx-qa.is-open .sx-qa-a { grid-template-rows: 1fr; }
/* collapsed answers leave the tab order and the accessibility tree once closed */
.sx-qa:not(.is-open) .sx-qa-a > div { visibility: hidden; transition: visibility 0s .55s; }
.sx-qa.is-open .sx-qa-a > div { visibility: visible; }

/* ==========================================================================
   FINISH
   ========================================================================== */
.sx-final { position: relative; min-height: min(100svh, 980px); display: flex; align-items: flex-end; padding: 10rem 0 clamp(3.5rem, 3rem + 3vw, 6rem); isolation: isolate; overflow: hidden; }
.sx-final-media { position: absolute; inset: 0; z-index: -1; }
.sx-final-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; display: block; }
@supports (animation-timeline: view()) {
    .sx-final-media img { animation: sx-final-in linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
    @keyframes sx-final-in { from { transform: scale(1.12); } to { transform: none; } }
}
.sx-final-media::after {
    content: ''; position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(8, 9, 11, .82) 0%, rgba(8, 9, 11, .5) 38%, rgba(8, 9, 11, 0) 70%),
        linear-gradient(180deg, var(--sx-bg) 0%, rgba(8, 9, 11, .15) 28%, rgba(8, 9, 11, .3) 60%, rgba(8, 9, 11, .94) 100%);
}
@media (max-width: 767px) {
    .sx-final-media::after { background: linear-gradient(180deg, var(--sx-bg) 0%, rgba(8, 9, 11, .1) 25%, rgba(8, 9, 11, .55) 55%, rgba(8, 9, 11, .95) 85%); }
}
.sx-final .sx-h2 { font-size: clamp(3rem, 1.5rem + 6vw, 7.2rem); }
.sx-final .sx-lede { color: rgba(255, 255, 255, .84); }
.sx-final-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.25rem; }
.sx-final-notes { display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; margin: 2.5rem 0 0; padding: 1.25rem 0 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .14); }
.sx-final-notes li { display: inline-flex; align-items: center; gap: .55rem; font-size: .9rem; color: rgba(255, 255, 255, .8); }
.sx-final-notes li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--sx-em); box-shadow: 0 0 8px rgba(80, 200, 120, .8); }
@media (max-width: 767px) {
    .sx-final { min-height: 92svh; padding-bottom: 6.5rem; }
    .sx-final-actions .sx-btn { flex: 1 1 100%; }
}

/* ---------- Emerald on the page-level CTAs outside .sx (sticky phone bar, footer) ---------- */
body.sx-home .mobile-cta-btn { background: var(--sx-em); color: var(--sx-em-ink) !important; -webkit-text-fill-color: var(--sx-em-ink) !important; font-weight: 600; box-shadow: 0 10px 30px -10px rgba(80, 200, 120, .6); }
body.sx-home .sfx-btn { background: var(--sx-em); color: var(--sx-em-ink); font-weight: 600; }
body.sx-home .sfx-btn:hover { background: var(--sx-em-hi); }
body.sx-home .sfx-btn:focus-visible { outline: 2px solid var(--sx-em); outline-offset: 3px; }

/* ---------- Footer hand-off: no seam between the finish and the footer ---------- */
body.sx-home footer.sfx { margin-top: 0; }


/* ==========================================================================
   RECENT ROOFLINES: an architectural project index.
   Desktop: the photo stage runs to the left edge of the screen; the right
   column is a typographic index (number, lighting style, time of day).
   Hover, focus or click a row and the stage crossfades to that project.
   Phones: a swipeable full-width track with a counter.
   ========================================================================== */
.sx-work { position: relative; padding: clamp(4.5rem, 3rem + 5vw, 8rem) 0; }
.sx-work-layout { display: grid; gap: 2rem; }
@media (min-width: 1024px) {
    .sx-work-layout { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: stretch; column-gap: clamp(3rem, 2rem + 3vw, 6rem); padding-right: max(var(--sx-gutter), calc((100vw - var(--sx-max)) / 2 + var(--sx-gutter))); }
}
.sx-work-stage { position: relative; }
.sx-work-list { margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) {
    .sx-work-list { position: relative; height: min(88vh, 900px); overflow: hidden; background: #0b0d10; }
    .sx-work-item { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1s var(--sx-ease-io), visibility 0s 1s; }
    .sx-work-item.is-on { opacity: 1; visibility: visible; transition: opacity 1s var(--sx-ease-io), visibility 0s 0s; }
    .sx-work-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.05); transition: transform 7s var(--sx-ease); }
    .sx-work-item.is-on img { transform: none; }
    /* portrait photos keep their whole frame: a blurred, darkened fill behind, the photo contained on top */
    .sx-work-item.is-portrait::before { content: ''; position: absolute; inset: -60px; background: var(--fill) center / cover; filter: blur(48px) brightness(.4) saturate(1.2); }
    .sx-work-item.is-portrait img { object-fit: contain; }
}
@media (min-width: 1024px) { .sx-work-list { border-radius: 0 var(--sx-r-l) var(--sx-r-l) 0; } }
@media (min-width: 768px) and (max-width: 1023px) { .sx-work-list { margin: 0 var(--sx-gutter); border-radius: var(--sx-r-l); } }
.sx-work-count { position: absolute; z-index: 2; left: clamp(1.25rem, 3vw, 3rem); bottom: clamp(1.25rem, 3vw, 2.5rem); margin: 0; display: flex; align-items: baseline; gap: .5rem; color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, .5); font-variant-numeric: tabular-nums; pointer-events: none; }
.sx-work-count b { font-size: clamp(2.6rem, 2rem + 2vw, 4rem); font-weight: 300; letter-spacing: -.05em; line-height: 1; }
.sx-work-count span { font-size: .9rem; color: rgba(255, 255, 255, .7); }
.sx-work-index { display: flex; flex-direction: column; justify-content: center; padding: 0 var(--sx-gutter); }
@media (min-width: 1024px) { .sx-work-index { padding: 0; } }
.sx-work-rows { margin: clamp(2rem, 1.5rem + 2vw, 3.25rem) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--sx-line); }
.sx-work-row {
    display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: baseline; gap: 1rem; width: 100%;
    padding: 1rem 0; border: 0; border-bottom: 1px solid var(--sx-line); background: none; color: var(--sx-text-3);
    font: inherit; text-align: left; cursor: pointer; transition: color .35s ease;
    -webkit-tap-highlight-color: transparent;
}
.sx-work-n { font-size: .78rem; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.sx-work-s { font-family: var(--sx-serif); font-style: italic; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.85rem); line-height: 1.1; letter-spacing: -.01em; }
.sx-work-w { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; }
.sx-work-row[aria-pressed="true"] { color: var(--sx-text); }
.sx-work-row[aria-pressed="true"] .sx-work-n { color: var(--sx-em); }
@media (hover: hover) { .sx-work-row:hover { color: var(--sx-text-2); } }
.sx-work-row:focus-visible { outline: 2px solid var(--sx-em); outline-offset: 4px; border-radius: 6px; }
.sx-work-controls { display: none; gap: .6rem; margin-top: 1.25rem; }
.sx-work-controls button {
    display: inline-grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--sx-line-2); color: var(--sx-text); cursor: pointer;
}
.sx-work-controls button svg { width: 20px; height: 20px; }
.sx-work-controls button:focus-visible { outline: 2px solid var(--sx-em); outline-offset: 3px; }
.sx-work-all { align-self: flex-start; margin-top: 1.75rem; }
@media (max-width: 1023px) { .sx-work-index { order: -1; } }
@media (max-width: 767px) {
    .sx-work-list {
        display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: .75rem;
        overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
        padding: 0 var(--sx-gutter); scroll-padding: 0 var(--sx-gutter);
    }
    .sx-work-list::-webkit-scrollbar { display: none; }
    .sx-work-item { scroll-snap-align: start; aspect-ratio: 4 / 5; border-radius: var(--sx-r-m); overflow: hidden; background: #14171b; }
    .sx-work-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .sx-work-rows { display: none; }
    .sx-work-controls { display: flex; }
    .sx-work-count { left: calc(var(--sx-gutter) + 1rem); bottom: 1rem; }
    .sx-work-count b { font-size: 2.2rem; }
}

/* Quieter reviews intro on the homepage (shared markup unchanged) */
.sx #reviews .rvb-sub { display: none; }
/* FAQ + finish, trimmed */
.sx-faq-aside .sx-link { margin-top: 1.75rem; }
.sx-final .sx-display { max-width: 11ch; }
.sx-final-notes li::before { display: none; }
.sx-final-notes li + li { padding-left: 1.75rem; border-left: 1px solid rgba(255, 255, 255, .2); }
@media (max-width: 767px) { .sx-final-notes li + li { padding-left: 0; border-left: 0; } }

/* ==========================================================================
   Reduced motion: every effect lands on its final, readable state.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .sx-js .sx-hero-photo img, .sx-js .sx-hero-veil, .sx-js .sx-hero-glow,
    .sx-js .sx-hero-kicker, .sx-js .sx-hero-title, .sx-js .sx-trust { animation: none !important; }
    .sx-js .sx-hero-glow { -webkit-mask-image: none; mask-image: none; }
    .sx-qmodal-backdrop, .sx-qmodal-panel { transition: none !important; }
    .sx-js .sx-split .sx-l > span,
    .sx-js .sx-rv { transform: none !important; opacity: 1 !important; transition: none !important; }
    .sx-js .sx .cine-hero .cine-media picture:not(.sx-hero-photo),
    .sx-js .sx .cine-hero .cine-media::after { animation: none !important; opacity: 0; }
    .sx .cine-hero .cine-media img, .sx-inst-photo, .sx-final-media img { animation: none !important; transform: none !important; }
    .sx-occ.is-settled .sx-occ-panel, .sx-occ.is-settled .sx-occ-label, .sx-occ-glow,
    .sx-qa-a, .sx-work-item, .sx-work-item img { transition: none !important; }
    .sx-work-item img { transform: none !important; }
    .sx-js .sx-hero-sub, .sx-js .sx-hero-ctas, .sx-js .sx-hero-quote { animation: none !important; }
    .sx .sx-hero-quote .hero-quote.is-ping, .sx-js .sx-hero-quote > .hero-quote { animation: none !important; }
    .sx .sx-fp-layer { transition: none !important; }
    .sx-fp-film video, .sx-app2-screen img, .sx-feat-s, .sx-qprompt, .sx-b { transition: none !important; }
    .sx-bento .sx-b-vis, .sx-bento .sx-b-vis * { animation: none !important; }
    .sx-cal-leaf { display: none !important; }
    .sx-fx-nodes circle:nth-child(odd) { fill: #ffd7a3; } .sx-fx-nodes circle:nth-child(even) { fill: #ff8a7a; }
    .sx-feat-bar i, .sx-fp-tab-bar::after { animation: none !important; }
}

/* ==========================================================================
   QA PASS (2026-11-10): fixes found in the full-page visual audit.
   ========================================================================== */
/* Small phones: the eyebrow fits on one line instead of leaving "CALGARY" alone on a second. */
@media (max-width: 360px) { .sx-hero-kicker { letter-spacing: .12em; font-size: .62rem; } }
/* Specs bento below 380px: two columns left ~94px per card, which cut "Thousands" and pushed
   "One app" into the phone glyph. One column, the visual on the right, the words on the left. */
@media (max-width: 379px) {
    .sx-bento { grid-template-columns: minmax(0, 1fr); }
    .sx-b { min-height: 132px; }
    .sx-b--hours { min-height: 280px; } /* the warranty line runs to three lines here; keep the words below the dial */
    .sx-cal { width: 92px; right: 1.1rem; top: 1.1rem; }
    .sx-fx { left: auto; right: 1.1rem; top: 1.1rem; width: 100px; }
    .sx-ip { right: 1.1rem; top: 1.1rem; width: 66px; }
    .sx-b-v { padding-right: 64px; }
    .sx-b--hours .sx-b-v { padding-right: 0; }
}
/* Footer (homepage only): below 1080px its single column was `1fr`, which grows to the widest child's
   min-content (the email address, the newsletter row), so at 320px the column was 350px wide and the
   footer's overflow:hidden cut "Permanent Lighting", "Driveway Lighting" and "Subscribe". */
@media (max-width: 1080px) { body.sx-home .sfx-body { grid-template-columns: minmax(0, 1fr); } }
body.sx-home .sfx-contact { grid-template-columns: minmax(0, 1fr); }
body.sx-home .sfx-item a, body.sx-home .sfx-item span { overflow-wrap: anywhere; }
body.sx-home .sfx-news { max-width: min(380px, 100%); grid-template-columns: minmax(0, 1fr); }
body.sx-home .sfx-news .sfx-lbl { white-space: normal; overflow-wrap: anywhere; }
body.sx-home .sfx-news-row { min-width: 0; }
body.sx-home .sfx-news-row button { padding: 0 14px; }
body.sx-home .sfx-nav a { overflow-wrap: anywhere; }
/* Footer rating: .sfx-trust is a flex row, which trims the spaces around its loose text, so it read
   "5.0on Google ·201reviews". A gap restores the spacing without touching the shared markup. */
body.sx-home .sfx-trust { column-gap: .3em; flex-wrap: wrap; }
/* The quote prompt is desktop-only: phones and tablets already have the sticky Get a Quote bar. */
@media (max-width: 1023px) { .sx-qprompt { display: none !important; } }
/* Day / Night / Colour / Christmas / Canada Day: five tabs share one row on phones; keep even the shortest (Day) 44px wide. */
@media (max-width: 767px) { .sx-fp-tab { min-width: 44px; } }
/* Below 375px the five labels no longer fit one row without clipping: wrap to two rows
   (Day · Night · Colour / Christmas · Canada Day) instead of shrinking the type. */
@media (max-width: 374px) {
    .sx-fp-tabs { flex-wrap: wrap; border-radius: 26px; }
    .sx-fp-tab { flex: 1 1 28%; }
    .sx-fp-tab[data-state="christmas"], .sx-fp-tab[data-state="canada"] { flex-basis: 40%; }
}