/* E&H Plastering & Damp Proofing: scroll-story homepage (homepage only)
   Loads AFTER site.css and brand.css, and reuses their tokens (--ink, --gold, --paper, --serif,
   --ease…) and components (.btn, .eyebrow, .sec-head, .rv, .light/.dark, .g-points, .c-lines).
   New pieces are sx- prefixed. Motion model: .sx-motion (set in <head>, fail-open) enables
   pinning and hidden start states; scroll-story.js writes unitless custom properties
   (--lg, --hw, --wet, --fin…) and CSS maps them to opacity/transform/clip-path.
   No JS or reduced motion ⇒ a normal, fully visible page. */

:root{
  --water:#8fb0bd;          /* the one non-brand hue, used only for water inside the wall diagram */
  --brand:1;
}

.sx-btn-lg{padding:17px 30px;font-size:16px}
.sx-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:32px}
.sx-ctas .btn svg{width:18px;height:18px;flex:none}
.sx-ctas .btn-wa{padding:17px 19px}

/* ── header: transparent over the intro, the logo takes over as the big one leaves ── */
header.sx-head{transition:background-color .35s,border-color .35s}
header.sx-head.is-scrolled,.sx-head:has(#menu.open){background:rgba(13,11,8,.94)}
.sx-motion header.sx-head:not(.is-scrolled):not(:has(#menu.open)){background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.sx-motion .sx-head .logo{opacity:var(--brand);transition:opacity .2s}
.sx-head .logo:focus-visible{opacity:1}
@media (min-width:861px){.sx-motion .sx-head .nav > :not(.logo){animation:sxFade 1s ease .6s both}}

/* ── 1 · hook ─────────────────────────────────────────────────────────────── */
.sx-hook{position:relative;padding:0}
.sx-hook-stage{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:calc(var(--head) + 56px) 0 80px;
  background:radial-gradient(900px 480px at 85% -10%,rgba(201,164,92,.14),transparent 60%),radial-gradient(700px 400px at -10% 110%,rgba(201,164,92,.08),transparent 60%),url(../../img/plaster-dark.jpg) var(--ink)}
.sx-atmos{position:absolute;inset:0;pointer-events:none}
.sx-atmos::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,transparent 0 238px,rgba(201,164,92,.06) 238px 240px),radial-gradient(rgba(201,164,92,.08) 1.5px,transparent 2.2px);background-size:auto,120px 150px}
.sx-atmos::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 45%,transparent 45%,rgba(0,0,0,.6) 100%)}
.sx-glow{position:absolute;left:50%;top:44%;width:min(95vmin,900px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(201,164,92,.2),rgba(201,164,92,.06) 55%,transparent);animation:sxBreathe 9s ease-in-out infinite alternate}
.sx-mist{position:absolute;left:-10%;right:-10%;bottom:0;height:55%;background:radial-gradient(50% 70% at 50% 100%,rgba(143,176,189,.1),transparent 72%);transform:translateY(calc((1 - var(--q,1)) * 30%))}

.sx-intro,.sx-cue,.sx-mlogo{display:none}

.sx-hook-copy{position:relative;z-index:2;display:grid;justify-items:center;text-align:center}
.sx-hook-main{display:grid;justify-items:center}

/* hero survey form: desktop only (phones have the Book button, the floating pill and #contact) */
.sx-hero-form{display:none}
.sx-hero-form form{position:relative;padding:26px 26px 22px;border:1px solid rgba(201,164,92,.45);border-radius:18px;text-align:left;
  background:linear-gradient(165deg,rgba(35,29,21,.97),rgba(15,12,9,.97) 70%);box-shadow:0 44px 90px -40px rgba(0,0,0,.95),0 0 0 6px rgba(201,164,92,.05),inset 0 1px 0 rgba(230,199,137,.16)}
.sx-hero-form form::before{content:"";position:absolute;left:22px;right:22px;top:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--gold-2),transparent)}
.hf-kicker{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2)}
.hf-dot{width:7px;height:7px;border-radius:50%;background:var(--gold-2);animation:hfPing 2.2s ease-out infinite}
.hf-title{margin-top:10px;font:700 25px/1.15 var(--serif);color:#fff}
.hf-sub{margin-top:6px;font-size:14px;line-height:1.5;color:var(--txt-dm)}
.hf-sub a{color:var(--gold-2);font-weight:700}
.sx-hero-form label{margin:13px 0 6px;font-size:11px}
.sx-hero-form :is(input,select){padding:12px 13px;font-size:15px}
.sx-hero-form .f-row{gap:10px}
.sx-hero-form .btn-gold{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:18px;padding:16px 20px;font-size:16px}
.sx-hero-form .btn-gold svg{width:18px;height:18px;transition:transform .25s var(--ease)}
.sx-hero-form .btn-gold:hover svg{transform:translateX(4px)}
.hf-note{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12.5px;color:var(--txt-dim)}
.hf-note svg{flex:none;width:16px;height:16px;color:var(--gold)}
.hf-err{margin-top:10px;font-size:13.5px;font-weight:700;color:var(--gold-2)}
.hf-err a{color:inherit}
.hf-ok{padding:26px 4px 18px;text-align:center}
.hf-ok-tick{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));color:#171205;font-size:26px;font-weight:800;animation:qzPop .5s var(--ease) both}
@media (min-width:1024px){
  .sx-hook-copy{grid-template-columns:minmax(0,1.3fr) minmax(330px,.7fr);gap:clamp(40px,5vw,84px);align-items:center;justify-items:stretch;text-align:left}
  .sx-hook-main{justify-items:start}
  .sx-hook-copy .sx-h1{font-size:clamp(44px,min(4.9vw,8.8vh),80px);max-width:12em}
  .sx-hook-copy .sx-lede{max-width:33em}
  .sx-hook-copy .sx-hook-main :is(.sx-ctas,.hero-trust){justify-content:flex-start}
  .sx-hook-copy .sx-cta-book{display:none}   /* the form beside it is the booking CTA */
  .sx-hero-form{display:block}
}
@media (min-width:1024px) and (max-height:760px){
  .sx-hero-form form{padding:20px 22px 18px}
  .sx-hero-form label{margin-top:9px}
  .hf-sub,.hf-note{display:none}
}
.sx-hook-copy .eyebrow{margin-bottom:24px}
.sx-h1{font-size:clamp(34px,min(6.2vw,10.4vh),96px);line-height:1.04;letter-spacing:-.015em;color:#fff;max-width:13.5em;text-wrap:balance}
.sx-h1 em{display:block;margin-top:.04em;font-style:italic;color:var(--gold-2)}
.sx-h1 .w{display:inline-block}
.sx-lede{max-width:36em;margin-top:26px;font-size:clamp(16px,1.25vw,19px);color:var(--txt-dm)}
.sx-lede strong{color:#fff}
.sx-hook-copy .hero-trust{justify-content:center;margin-top:26px;font-size:14px}

/* motion: the hero is on screen from the first paint and rises in once on load. Until 2026-10-29 a
   scroll-scrubbed logo intro filled the first screen and held back the headline, buttons and
   (desktop) the survey form until people scrolled. */
.sx-motion .sx-h1 .w{animation:sxWord .7s var(--ease) calc(.1s + var(--i) * .05s) both}
.sx-motion .sx-hook-copy .sx-reveal{animation:sxRise .7s var(--ease) calc(.3s + var(--d,0) * .4s) both}

/* ── 2 · the damp story ───────────────────────────────────────────────────── */
.sx-story{position:relative;padding:0;background:radial-gradient(800px 500px at 20% 60%,rgba(201,164,92,.07),transparent 65%),var(--ink)}
.sx-story-head{text-align:center;padding-top:clamp(90px,16vh,160px);padding-bottom:clamp(36px,7vh,80px)}
.sx-story-head h2{margin-top:16px;font-size:clamp(32px,4.6vw,64px);line-height:1.06;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.sx-story-head h2 em{font-style:italic;color:var(--gold-2)}
.sx-story-head p{max-width:32em;margin:18px auto 0;color:var(--txt-dm)}

.sx-story-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,80px);align-items:start;padding-bottom:100px}
.sx-stage{position:sticky;top:calc(var(--head) + 24px)}

.sx-frame{position:relative;border:1px solid var(--line-d);border-radius:18px;padding:14px 14px 16px;background:linear-gradient(180deg,var(--panel-2),var(--panel) 60%,#110e0a);box-shadow:0 50px 90px -50px rgba(0,0,0,.9),inset 0 1px 0 rgba(230,199,137,.08)}
.sx-frame-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:2px 4px 12px;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-dim)}
.sx-cap [data-s],.sx-count [data-s]{display:none}
.sx-stage[data-stage="1"] [data-s="1"],.sx-stage[data-stage="2"] [data-s="2"],.sx-stage[data-stage="3"] [data-s="3"]{display:inline}
.sx-cap span{color:var(--txt-dm)}
.sx-count b{color:var(--gold)}
.sx-wall{display:block;width:100%;height:auto;border-radius:10px}

.sx-meter{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:14px 4px 0;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-dim)}
.sx-meter-bar{height:6px;border-radius:6px;background:rgba(201,164,92,.12);overflow:hidden}
.sx-meter-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--gold-deep),var(--water));transform-origin:left;transform:scaleX(var(--wet,1))}
.sx-read{min-width:5.5em;text-align:right}
.sx-read b{display:none}
.sx-stage[data-reading="high"] [data-r="high"]{display:inline;color:var(--water)}
.sx-stage[data-reading="raised"] [data-r="raised"]{display:inline;color:var(--gold-2)}
.sx-stage[data-reading="dry"] [data-r="dry"]{display:inline;color:var(--gold)}

/* wall diagram: every scrubbed value is a 0→1 custom property on .sx-stage */
.sx-wall .w-ground{opacity:var(--wet,1)}
.sx-wall .w-damp{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(var(--wet,1))}
.sx-wall .w-risk{opacity:calc(var(--risk,1) * (1 - var(--fin,0)))}
.sx-wall .w-risk-low{opacity:calc(var(--risk,1) * (1 - var(--strip,0)))}
.sx-wall .w-paint-low{opacity:calc(1 - var(--strip,0))}
.sx-wall .w-dpc{clip-path:inset(0 calc((1 - var(--dpc,0)) * 100%) 0 0)}
.sx-wall .w-mem{clip-path:inset(calc((1 - var(--mem,0)) * 100%) 0 0 0)}
.sx-wall .w-plaster{clip-path:inset(0 calc((1 - var(--fin,0)) * 100%) 0 0)}
.sx-wall .w-trowel{transform:translateX(calc(var(--fin,0) * 560px));opacity:min(calc(var(--fin,0) * 14),calc((1 - var(--fin,0)) * 14),1)}
.sx-wall .w-sheen{opacity:0}
.sx-stage.is-done .w-sheen{animation:sxSheen 1.5s ease .1s both}
.sx-wall .w-ghost{opacity:0;transition:opacity .6s ease .5s}
.sx-wall .w-ghost text{font:600 10px var(--sans);letter-spacing:.16em;fill:var(--gold-l)}
.sx-stage.is-done .w-ghost{opacity:.8}

.sx-wall .w-pill rect{fill:rgba(13,11,8,.92);stroke:var(--gold);stroke-opacity:.8}
.sx-wall .w-pill path{fill:none;stroke:var(--gold);stroke-width:1.4}
.sx-wall .w-pill text{font:700 10.5px var(--sans);letter-spacing:.14em;fill:#f3e6c8;text-anchor:middle}
.sx-wall .w-arrows path{fill:none;stroke:var(--water);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.sx-wall .w-flow{stroke-dasharray:6 9;animation:sxFlow 1.1s linear infinite}
.sx-stage:not([data-stage="2"]) :is(.w-flow,.w-pulse){animation-play-state:paused}
.sx-wall .w-pulse{fill:none;stroke:var(--gold-2);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:sxPulse 2s ease-out infinite}
.sx-wall :is(.w-note,.w-d1,.w-d2,.w-d3,.w-l-dpc,.w-l-mem){transition:opacity .35s ease}
.sx-wall .w-note{opacity:var(--n1,0)}
.sx-wall .w-d1{opacity:var(--d1,0)}
.sx-wall .w-d2{opacity:var(--d2,0)}
.sx-wall .w-d3{opacity:var(--d3,0)}
.sx-wall .w-l-dpc{opacity:min(var(--dpc,0),calc(1 - var(--fin,0) * 4))}
.sx-wall .w-l-mem{opacity:min(var(--mem,0),calc(1 - (var(--fin,0) - .45) * 4))}
.sx-wall .w-done{opacity:0;transform:translateY(6px);transition:opacity .5s ease .3s,transform .6s var(--ease) .3s}
.sx-wall .w-done rect{fill:rgba(13,11,8,.92);stroke:var(--gold)}
.sx-wall .w-done path{stroke:var(--gold-2)}
.sx-wall .w-done text{font:700 11px var(--sans);letter-spacing:.14em;fill:#f3e6c8}
.sx-stage.is-done .w-done{opacity:1;transform:none}

/* step copy */
.sx-stepnav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:clamp(24px,5vh,44px)}
.sx-stepnav a{position:relative;padding-top:14px;font-size:12px;font-weight:600;line-height:1.2;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-dim);text-decoration:none;transition:color .3s}
.sx-stepnav a::before,.sx-stepnav a::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;background:rgba(201,164,92,.2)}
.sx-stepnav a::after{background:var(--gold);transform-origin:left;transform:scaleX(var(--f,0))}
.sx-stepnav a[aria-current]{color:#fff}
.sx-stepnav b{margin-right:8px;font:700 13px/1 var(--serif);letter-spacing:0;color:var(--gold)}

.sx-steps{list-style:none;display:grid}
.sx-step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;padding:40px 0}
.sx-step-k{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.sx-step-k b{font:700 16px/1 var(--serif);letter-spacing:0}
.sx-step h3{margin-bottom:16px;font-size:clamp(30px,3vw,44px);line-height:1.08;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.sx-step > p{max-width:34em;color:var(--txt-dm)}
.sx-points{list-style:none;display:grid;gap:10px;margin-top:22px}
.sx-points li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;padding:14px 16px;border:1px solid var(--line-d);border-radius:12px;background:linear-gradient(165deg,var(--panel-2),var(--panel) 70%);transition:border-color .4s,box-shadow .4s}
.sx-points .ic{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:rgba(201,164,92,.12);color:var(--gold-2)}
.sx-points .ic svg{width:19px;height:19px}
.sx-points b{display:block;color:#fff}
.sx-points .t{display:block;font-size:15px;line-height:1.55;color:var(--txt-dm)}
.sx-points li.on{border-color:var(--gold);box-shadow:0 0 0 1px rgba(201,164,92,.25),0 16px 40px -24px rgba(201,164,92,.5)}
.sx-checks{list-style:none;display:grid;gap:10px;margin-top:22px}
.sx-checks li{display:flex;align-items:center;gap:10px;color:#fff}
.sx-checks .tick{width:18px;text-align:center}
.sx-link{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;margin-top:24px;padding-bottom:3px;font-weight:700;color:var(--gold-2);text-decoration:none;border-bottom:1px solid rgba(201,164,92,.4)}
.sx-link svg{width:17px;height:17px;transition:transform .25s var(--ease)}
.sx-link:hover svg{transform:translateX(4px)}
.sx-skip{display:inline-block;margin-top:24px;font-size:14px;color:var(--txt-dim);text-underline-offset:3px}
.sx-skip:hover{color:var(--gold-2)}

/* pinned layout: desktop + motion only */
@media (min-width:900px) and (min-height:600px){
  .sx-motion .sx-story-track{height:380vh}
  .sx-motion .sx-story-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding-top:var(--head)}
  .sx-motion .sx-story-grid{width:100%;align-items:center;padding-bottom:0}
  .sx-motion .sx-stage{position:relative;top:auto}
  .sx-motion .sx-frame{max-width:calc((100vh - var(--head) - 150px) * 1.185 + 30px);margin-inline:auto}
  .sx-motion .sx-step{grid-area:1/1;min-height:0;padding:0;justify-content:flex-start;opacity:0;transform:translateY(30px);pointer-events:none;transition:opacity .4s ease,transform .7s var(--ease)}
  .sx-motion .sx-step.is-past{transform:translateY(-30px)}
  .sx-motion .sx-step.is-active{opacity:1;transform:none;pointer-events:auto;transition-delay:.12s}
  .sx-motion .sx-step-k{display:none}   /* the step nav above already labels each step */
}
@media (min-width:900px) and (min-height:600px) and (max-height:820px){
  .sx-motion .sx-step h3{font-size:clamp(28px,2.6vw,36px)}
  .sx-motion .sx-points li{padding:11px 14px}
  .sx-motion .sx-points .t{font-size:14.5px;line-height:1.5}
  .sx-motion .sx-stepnav{margin-bottom:20px}
}
/* phones and tablets: the diagram sticks under the header, the steps scroll beneath it */
@media (max-width:899px){
  .sx-story-grid{grid-template-columns:1fr;gap:0;padding-bottom:40px}
  .sx-stage{top:var(--head);z-index:2;margin-inline:-20px;padding:8px 20px 12px;background:var(--ink)}
  .sx-stage::after{content:"";position:absolute;left:0;right:0;top:100%;height:28px;background:linear-gradient(var(--ink),rgba(13,11,8,0));pointer-events:none}
  .sx-frame{padding:8px 8px 10px;border-radius:14px}
  .sx-frame-top{padding:2px 4px 8px;font-size:10px;letter-spacing:.16em}
  .sx-wall{width:auto;max-height:27svh;margin-inline:auto}
  .sx-wall :is(.w-note,.w-pill,.w-done,.w-ghost){display:none}   /* would render at ~5px; the copy carries them */
  .sx-meter{padding-top:8px;gap:10px;font-size:10px;letter-spacing:.16em}
  .sx-stepnav,.sx-skip{display:none}
  .sx-step{min-height:0;padding:9vh 0 5vh}
  .sx-step h3{font-size:clamp(26px,7.2vw,34px)}
  .sx-step > p{font-size:15.5px}
  .sx-points li{padding:12px 14px}
  .sx-points .t{font-size:14.5px}
}

/* ── 3 · plaster sweep ────────────────────────────────────────────────────── */
.sx-sweep{position:relative;padding:0;background:linear-gradient(0deg,var(--paper) 2px,var(--ink) 2px)}   /* paper sliver: no dark hairline where a fractional-vh pin meets the services section */
.sx-sweep-pin{position:relative;overflow:hidden}
.sx-sweep-gold{display:none}
.sx-sweep-plaster{text-align:center;padding:clamp(80px,14vh,140px) 0 10px}
.sx-sweep-copy h2{max-width:15em;margin:14px auto 0;font-size:clamp(34px,5vw,74px);line-height:1.04;letter-spacing:-.015em;color:var(--txt-l);text-wrap:balance}
.sx-sweep-copy h2 em{font-style:italic;color:var(--gold-deep)}
.sx-sweep-copy > p{margin-top:14px;font-size:15px;color:var(--txt-lm)}
.sx-sweep-proof{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px}
.sx-sweep-proof li{display:inline-flex;align-items:center;gap:10px;padding:11px 18px 11px 14px;border:1px solid rgba(154,119,54,.35);border-radius:999px;background:rgba(255,255,255,.55);font-size:14.5px;font-weight:700;color:var(--txt-l);box-shadow:0 10px 24px -18px rgba(33,28,20,.6)}
.sx-sweep-proof svg{width:20px;height:20px;color:var(--gold-deep)}
.sx-motion .sx-sweep-proof li{opacity:var(--sc,0);transform:translateY(calc((1 - var(--sc,0)) * 18px))}
.sx-motion .sx-sweep{height:150vh}
/* services slide up over the empty lower part of the finished plaster panel, so the swept
   headline flows straight into the next section instead of leaving a blank screen */
.sx-motion .sx-sweep-plaster{padding-bottom:12vh}   /* copy sits a touch above centre, leaving room for the overlap */
.sx-motion .sx-svc{position:relative;z-index:1;margin-top:-28vh}
@media (max-width:899px),(max-height:599px){.sx-motion .sx-svc{margin-top:-14vh}}
.sx-motion .sx-sweep-pin{position:sticky;top:0;height:100vh;height:100svh}
.sx-motion :is(.sx-sweep-plaster,.sx-sweep-gold){position:absolute;inset:0;padding:0}
.sx-motion .sx-sweep-plaster{display:grid;place-items:center;clip-path:polygon(0 0,calc(var(--sw,0) * 140%) 0,calc(var(--sw,0) * 140% - 40%) 100%,0 100%)}
.sx-motion .sx-sweep-gold{display:block;background:linear-gradient(180deg,var(--gold-2),var(--gold) 55%,var(--gold-deep));clip-path:polygon(0 0,calc(var(--sw,0) * 140% + 10px) 0,calc(var(--sw,0) * 140% - 40% + 10px) 100%,0 100%)}
.sx-motion .sx-sweep-copy{opacity:var(--sc,0);transform:translateY(calc((1 - var(--sc,0)) * 40px))}

/* ── 4 · services: damp · plastering · below ground ──────────────────────── */
.sx-svc,.sx-plaster,.sx-below{padding:clamp(64px,10vh,110px) 0}
.sx-svc{padding-top:clamp(30px,6vh,70px)}
.sx-svc .sec-head{max-width:680px}

.sx-svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sx-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px;border:1px solid var(--line-l);border-radius:16px;background:rgba(255,255,255,.6);color:var(--txt-l);
  transition:opacity .6s ease,transform .6s ease,translate .35s var(--ease),box-shadow .35s,border-color .35s}
.sx-card h3{font-size:21px;line-height:1.2}
.sx-card p{font-size:15px;line-height:1.6;color:var(--txt-lm)}
.sx-ic{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,#2a2218,var(--ink));color:var(--gold-2);box-shadow:inset 0 0 0 1px rgba(201,164,92,.35)}
.sx-ic svg{width:22px;height:22px}
.sx-more{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:6px;font-size:14.5px;font-weight:700;color:var(--gold-l);text-decoration:none}
.sx-more::after{content:"";position:absolute;inset:0;border-radius:16px}   /* whole card is the link */
.sx-more svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.sx-card:has(.sx-more):hover{translate:0 -3px;border-color:rgba(154,119,54,.5);box-shadow:0 22px 44px -28px rgba(33,28,20,.55)}
.sx-card:has(.sx-more):hover .sx-more svg{transform:translateX(4px)}
.sx-chip{align-self:flex-start;padding:6px 11px;border:1px solid rgba(201,164,92,.35);border-radius:999px;background:rgba(201,164,92,.12);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2)}

.sx-card--feature{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;overflow:hidden;border-color:var(--line-d);background:linear-gradient(165deg,var(--panel-2),var(--ink) 70%);color:var(--txt-d)}
.sx-card--feature .media{position:relative;min-height:300px}
.sx-card--feature .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sx-card-body{display:flex;flex-direction:column;gap:12px;padding:30px}
.sx-card--feature h3{font-size:26px;color:#fff}
.sx-card--feature p{color:var(--txt-dm)}
.sx-card--feature .sx-more{color:var(--gold-2)}
.sx-card--more{grid-column:span 2;justify-content:center;background:rgba(255,255,255,.35);border-style:dashed;border-color:rgba(154,119,54,.45)}
.sx-links{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px}
.sx-links a{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:1px solid var(--line-l);border-radius:999px;background:rgba(255,255,255,.7);font-size:14.5px;font-weight:600;color:var(--txt-l);text-decoration:none;transition:border-color .2s,color .2s}
.sx-links a:hover{border-color:var(--gold-deep);color:var(--gold-l)}
.sx-card--more .btn{align-self:flex-start}

.sx-plaster-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:start}
.sx-plaster-photo{position:sticky;top:calc(var(--head) + 24px)}
.sx-plaster-photo img{aspect-ratio:4/5;object-fit:cover}
.sx-plaster-photo figcaption{margin-top:10px;font-size:13px;color:var(--txt-dim)}
.sx-plaster .sec-head{margin-bottom:26px}
.sx-plaster h2{color:#fff}
.sx-plaster-list{list-style:none;border-top:1px solid var(--line-d)}
.sx-plaster-list li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:4px 16px;padding:20px 0;border-bottom:1px solid var(--line-d)}
.sx-plaster-list .n{padding-top:4px;font:700 20px/1 var(--serif);color:var(--gold)}
.sx-plaster-list h3{margin-bottom:6px;font-size:20px;color:#fff}
.sx-plaster-list p{font-size:15px;line-height:1.6;color:var(--txt-dm)}
.sx-also{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:24px 0 26px;font-size:14px;color:var(--txt-dm)}
.sx-also a{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:1px solid var(--line-d);border-radius:999px;font-weight:600;color:var(--gold-2);text-decoration:none;transition:border-color .2s}
.sx-also a:hover{border-color:var(--gold)}

.sx-below-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.sx-below .sec-head{margin-bottom:0}
.sx-below .g-points{flex-direction:column;gap:10px;margin-top:22px;font-size:15px}
.sx-below-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.sx-below-cards{display:grid;gap:16px}
#results{padding-top:clamp(64px,10vh,100px)!important}   /* live markup zeroes it inline; it now follows a light section */

@media (max-width:980px){
  .sx-svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx-card--feature,.sx-card--more{grid-column:1 / -1}
}
@media (max-width:860px){
  .sx-plaster-grid,.sx-below-grid{grid-template-columns:1fr}
  .sx-plaster-photo{position:static}
  .sx-plaster-photo img{aspect-ratio:16/11}
}
@media (max-width:640px){
  .sx-svc-grid{grid-template-columns:1fr;gap:12px}
  .sx-card--feature{grid-template-columns:1fr}
  .sx-card--feature .media{min-height:0;aspect-ratio:16/10}
  .sx-card-body{padding:22px}
  .sx-card--feature h3{font-size:23px}
  /* compact rows: icon left, copy right */
  .sx-card:not(.sx-card--feature):not(.sx-card--more){display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 14px;align-content:start;padding:18px}
  .sx-card:not(.sx-card--feature):not(.sx-card--more) > :not(.sx-ic){grid-column:2}
  .sx-card:not(.sx-card--feature):not(.sx-card--more) .sx-ic{grid-row:1 / span 3;width:44px;height:44px}
  .sx-card h3{font-size:19px}
  .sx-card p{font-size:14.5px}
  .sx-card--more{padding:20px}
  .sx-card--more .btn{align-self:stretch}
  .sx-plaster-list li{grid-template-columns:40px minmax(0,1fr);padding:16px 0}
  .sx-plaster-list h3{font-size:18.5px}
  .sx-plaster-list p,.sx-below .g-points{font-size:14.5px}
  .sx-below-ctas .btn{flex:1 1 100%}
}

/* ── 5 · contact ──────────────────────────────────────────────────────────── */
.sx-contact{position:relative;overflow:hidden;padding:clamp(70px,11vh,120px) 0}
.sx-contact::before{content:"";position:absolute;left:-15%;top:-25%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(201,164,92,.12),transparent);pointer-events:none}
.sx-cv-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"intro form" "trust form";gap:0 clamp(36px,6vw,84px);align-items:start}
.sx-cv-intro{grid-area:intro}
.sx-cv-form{grid-area:form;position:sticky;top:calc(var(--head) + 20px)}
.sx-cv-trust{grid-area:trust}
.sx-cv-intro h2{margin:16px 0;font-size:clamp(34px,4.2vw,58px);line-height:1.05;letter-spacing:-.015em;color:#fff;text-wrap:balance}
.sx-cv-intro > p{max-width:34em;color:var(--txt-dm)}
.sx-cv-intro .sx-ctas{justify-content:flex-start}
.sx-badges{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:34px}
.sx-badges li{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line-d);border-radius:12px;background:linear-gradient(165deg,var(--panel-2),var(--panel) 70%)}
.sx-badges svg{flex:none;width:28px;height:28px;color:var(--gold)}
.sx-badges b{display:block;font-size:15px;line-height:1.3;color:#fff}
.sx-badges small{display:block;font-size:13px;line-height:1.4;color:var(--txt-dim)}
.sx-cv-trust .c-lines{margin-top:30px}
.sx-quote{margin-top:30px;padding-left:20px;border-left:2px solid var(--gold)}
.sx-quote blockquote{font:italic 400 20px/1.45 var(--serif);color:var(--txt-d)}
.sx-quote figcaption{margin-top:10px;font-size:13.5px;letter-spacing:.04em;color:var(--txt-dim)}
.sx-cv-form form{padding:clamp(22px,3vw,34px);border:1px solid var(--line-d);border-radius:18px;background:linear-gradient(165deg,var(--panel-2),var(--panel) 70%);box-shadow:0 50px 90px -50px rgba(0,0,0,.9)}
.sx-cv-form h3{font-size:26px;color:#fff}
.sx-form-sub{margin-top:6px;font-size:15px;color:var(--txt-dm)}
.sx-cv-form .btn-gold{width:100%;margin-top:22px;padding:17px 22px;font-size:16px}
@media (max-width:900px){
  .sx-cv-grid{grid-template-columns:1fr;grid-template-areas:"intro" "form" "trust";gap:28px}
  .sx-cv-form{position:static}
}
@media (max-width:600px){
  .sx-contact{padding:56px 0 64px}
  .sx-cv-intro .sx-ctas{display:grid;grid-template-columns:1fr}
  .sx-cv-intro .sx-ctas .btn{width:100%;padding:16px 18px}
  .sx-badges{gap:8px;margin-top:6px}
  .sx-badges li{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}
  .sx-badges svg{width:24px;height:24px}
  .sx-badges b{font-size:14px}
  .sx-badges small{font-size:12px}
  .sx-quote blockquote{font-size:18px}
}

/* ── phones: hook sizing, shorter pins, cheaper effects ───────────────────── */
@media (max-width:860px){
  .sx-motion .sx-h1 .w{filter:none}    /* per-word blur is the one repaint-heavy effect; skip it on phones */
}
@media (max-width:600px){
  .sx-hook-stage{padding:calc(var(--head) + 30px) 0 48px}
  .sx-hook-copy .eyebrow{margin-bottom:16px;font-size:10px;letter-spacing:.18em}
  .sx-hook-copy .eyebrow .eb-loc{display:none}
  .sx-h1{font-size:clamp(31px,9.2vw,40px)}
  .sx-lede{margin-top:16px;font-size:15.5px}
  .sx-ctas{display:grid;grid-template-columns:1fr;width:100%;margin-top:22px}
  .sx-ctas .sx-btn-lg{padding:17px 20px;font-size:16px}
  .sx-hook-copy .sx-ctas .btn-wa{display:none}   /* WhatsApp sits in the mobile nav already */
  .sx-hook-copy .hero-trust{gap:6px 14px;margin-top:16px;font-size:12.5px}
  .sx-hook-copy .hero-trust>span:nth-child(3){display:none}
  .sx-story-head{padding-top:72px}
  .sx-story-head h2{font-size:clamp(30px,8.6vw,38px)}
  .sx-sweep-copy h2{font-size:clamp(32px,9vw,42px)}
  .sx-sweep-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:22px}
  .sx-sweep-proof li{flex-direction:column;justify-content:center;gap:6px;padding:12px 6px;border-radius:14px;font-size:12.5px;line-height:1.25;text-align:center}
}
@media (max-width:600px) and (max-height:700px){
  .sx-hook .sx-mlogo{width:min(50vw,18svh,190px)}   /* beats the general phone rule below */
  .sx-h1{font-size:30px}
  .sx-lede{font-size:14.5px}
  .sx-hook-copy .hero-trust{display:none}
}

/* phones: the hero starts under the header instead of centring in a full screen, so the
   headline, the lede and the Book and Call buttons fit the first screen */
@media (max-width:600px){
  .sx-hook-stage{min-height:0;flex-direction:column;justify-content:flex-start;padding-top:calc(var(--head) + 22px)}
  /* the logo is sized by screen height too, so Book and Call still fit a 667px-tall phone */
  .sx-mlogo{display:block;position:relative;z-index:2;width:min(56vw,23svh,220px);margin:0 auto 18px;animation:sxLogoIn .8s var(--ease) both}
  .sx-mlogo img{display:block;width:100%;height:auto}
  .sx-mbadge{position:absolute;right:-8%;top:-2%;width:24%;filter:drop-shadow(0 8px 16px rgba(0,0,0,.45))}
  .sx-mbadge svg{display:block;width:100%;height:auto}
  .sx-hook-copy .eyebrow{display:none}   /* would only repeat the logo's words */
  .sx-motion{--brand:0}   /* header logo starts hidden under the hero logo, so it never flashes */
}

/* phones + tablets (story not pinned): the sweep starts as the panel rises into view, so the
   story hands straight over to the plaster instead of scrolling through an empty dark screen */
@media (max-width:899px),(max-height:599px){
  .sx-motion .sx-sweep{height:115vh}
}
@media (max-width:899px){
  .sx-step{padding:48px 0 8px}
  .sx-steps > .sx-step:first-child{padding-top:36px}
  .sx-points{gap:8px;margin-top:18px}
  .sx-points li{padding:11px 13px}
  .sx-checks{gap:8px;margin-top:18px}
}

/* ── 6 · quote builder: icon tiles, progress track, live count-up estimate ─── */
.sx-quote-sec{position:relative;background:radial-gradient(700px 420px at 88% 20%,rgba(201,164,92,.13),transparent 65%),radial-gradient(600px 400px at 0% 100%,rgba(201,164,92,.07),transparent 60%),url(../../img/plaster-dark.jpg) var(--ink)}
.sx-quote-sec .qz-wrap{grid-template-columns:minmax(0,1fr) 360px;gap:20px}
.sx-quote-sec .qz-card{position:relative;padding:28px 30px 26px;border-color:rgba(201,164,92,.35);border-radius:20px;background:linear-gradient(165deg,var(--panel-2),var(--panel) 60%,#110e0a);box-shadow:0 50px 90px -50px rgba(0,0,0,.9),inset 0 1px 0 rgba(230,199,137,.1)}

/* progress: numbered dots on a track that fills in gold */
.qz-prog{position:relative;margin:0 6px 26px;--qp:0}
.qz-track{position:absolute;left:12.5%;right:12.5%;top:15px;height:2px;border-radius:2px;background:rgba(201,164,92,.18)}
.qz-track i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--gold-deep),var(--gold-2));transform-origin:left;transform:scaleX(var(--qp));transition:transform .6s var(--ease)}
.sx-quote-sec .qz-steps{position:relative;margin:0;gap:0}
.sx-quote-sec .qz-step{display:grid;justify-items:center;gap:8px;padding:0;border:0;background:none}
.sx-quote-sec .qz-step .n{display:grid;place-items:center;width:32px;height:32px;border:1px solid rgba(201,164,92,.35);border-radius:50%;background:var(--panel);font:700 14px/1 var(--serif);color:var(--txt-dim);transition:background .35s,color .35s,border-color .35s,box-shadow .35s}
.sx-quote-sec .qz-step .l{margin:0;font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--txt-dim);transition:color .35s}
.sx-quote-sec .qz-step.on .n{border-color:var(--gold);color:var(--gold-2);box-shadow:0 0 0 5px rgba(201,164,92,.12)}
.sx-quote-sec .qz-step.on .l{color:#fff}
.sx-quote-sec .qz-step.done .n{background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));border-color:transparent;color:transparent;box-shadow:none;position:relative}
.sx-quote-sec .qz-step.done .n::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;font:800 14px/1 var(--sans);color:#171205}
.sx-quote-sec .qz-legend{font-size:clamp(22px,2vw,27px)}
.sx-quote-sec .qz-legend:focus{outline:none}
.sx-quote-sec .qz-sub{font-size:14px}
.sx-quote-sec .qz-grid{margin-top:14px;gap:12px}
.sx-quote-sec .qz-blocklabel{margin:22px 0 0}

/* option tiles */
.sx-quote-sec .opt{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2px 14px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.025);
  transition:border-color .2s,background .2s,transform .25s var(--ease),box-shadow .25s}
.sx-quote-sec .opt > :not(.oi):not(.qz-room){grid-column:2}
.sx-quote-sec .opt .oi,.sx-quote-sec .opt .qz-room{grid-row:1 / span 2}
.sx-quote-sec .opt:hover{transform:translateY(-2px);box-shadow:0 16px 30px -20px rgba(0,0,0,.9)}
.sx-quote-sec .opt:active{transform:scale(.98)}
.sx-quote-sec .opt.sel{background:linear-gradient(160deg,rgba(201,164,92,.2),rgba(201,164,92,.06));box-shadow:inset 0 0 0 1px var(--gold),0 18px 34px -22px rgba(201,164,92,.55)}
.sx-quote-sec .opt.sel::after{content:"✓";position:absolute;top:-8px;right:-8px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));color:#171205;font-size:13px;font-weight:800;box-shadow:0 4px 12px rgba(0,0,0,.5);animation:qzPop .4s var(--ease) both}
.oi{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:rgba(201,164,92,.1);color:var(--gold-2);transition:background .25s,color .25s,transform .35s var(--ease)}
.oi svg{width:22px;height:22px}
.opt.sel .oi{background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,var(--gold-deep));color:#171205;transform:rotate(-6deg) scale(1.06)}
.opt:hover .oi{transform:rotate(-4deg)}
/* the big first/last choices stack their icon on top */
.sx-quote-sec #qzForm{padding:0;border:0;border-radius:0;background:none}   /* site.css boxes every form */
.sx-quote-sec .qz-big .opt{grid-template-columns:1fr;justify-items:start;align-content:start;gap:4px;padding:18px}
.sx-quote-sec .qz-big .opt > :not(.oi):not(.qz-room){grid-column:1}
.sx-quote-sec .qz-big .opt > :is(.oi,.qz-room){grid-column:1;grid-row:auto}
.sx-quote-sec .qz-big .oi{width:50px;height:50px;margin-bottom:10px;border-radius:13px}
.sx-quote-sec .qz-big .oi svg{width:26px;height:26px}
.sx-quote-sec .qz-big .opt .t{font-size:16px}
/* room-size tiles: a floor plan that grows with the room */
.qz-room{display:grid;place-items:center;width:50px;height:50px;margin-bottom:10px}
.qz-room i{display:block;width:calc(var(--s) * 100%);aspect-ratio:1;border:2px solid var(--gold);border-radius:4px;background:repeating-linear-gradient(45deg,rgba(201,164,92,.16) 0 3px,transparent 3px 7px);transition:transform .35s var(--ease),background-color .25s}
.opt.sel .qz-room i{background-color:rgba(201,164,92,.35);transform:scale(1.08)}

.sx-quote-sec .qz-nav{margin-top:26px}
.sx-quote-sec .qz-panel.active{animation:qzIn .45s var(--ease) both}
.qz-mini{display:none}

/* live estimate */
.sx-quote-sec .qz-aside{top:calc(var(--head) + 20px);padding:24px;border-color:rgba(201,164,92,.35);border-radius:20px;background:radial-gradient(120% 70% at 100% 0%,rgba(201,164,92,.16),transparent 60%),linear-gradient(165deg,var(--panel-2),var(--panel) 70%)}
.qz-aside-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.qz-aside-head h3{font:700 18px/1.2 var(--serif);color:#fff}
.sx-quote-sec .qz-aside .cap{margin-top:20px;font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-dim)}
.sx-quote-sec .est-total{min-height:1.2em;margin-top:6px;font:700 clamp(30px,2.6vw,38px)/1.1 var(--serif);color:#fff;font-variant-numeric:tabular-nums}
.est-num{background:linear-gradient(180deg,#fff 30%,var(--gold-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.sx-quote-sec #estTotal{font-size:clamp(24px,2vw,29px);line-height:1.15}
#estTotal.pop .est-num{display:inline-block;animation:qzIn .5s var(--ease) both}
.est-fix{margin-top:8px;font-size:14px;line-height:1.55;color:var(--txt-dm)}
.est-fix:empty{display:none}
.est-wait{display:block;font:italic 400 20px/1.3 var(--serif);color:var(--txt-dim)}
.est-acc{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin-top:16px;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-dim)}
.est-meter{height:6px;border-radius:6px;background:rgba(201,164,92,.14);overflow:hidden}
.est-meter i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--gold-deep),var(--gold-2));transform-origin:left;transform:scaleX(0);transition:transform .6s var(--ease)}
.est-acc b{min-width:3.6em;text-align:right;color:var(--gold-2)}
.sx-quote-sec .est-lines{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-d)}
.sx-quote-sec .est-lines li.new{animation:qzIn .45s var(--ease) both}
.est-inc{list-style:none;display:grid;gap:8px;margin-top:16px}
.est-inc:empty{display:none}
.est-inc li{display:flex;gap:9px;font-size:13.5px;color:var(--txt-d);animation:qzIn .45s var(--ease) both}
.sx-quote-sec .est-note{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-d)}

/* success */
.qz-done-tick{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));color:#171205;font-size:30px;font-weight:800;box-shadow:0 0 0 10px rgba(201,164,92,.12);animation:qzPop .55s var(--ease) both}

@media (max-width:980px){
  .sx-quote-sec .qz-wrap{grid-template-columns:1fr}
  .sx-quote-sec .qz-aside{position:static}
  /* the estimate panel sits below the card here, so the card carries a live total at the top */
  .qz-mini{position:sticky;top:calc(var(--head) + 8px);z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px;margin:-6px 0 18px;padding:11px 16px;border:1px solid rgba(201,164,92,.35);border-radius:12px;background:rgba(13,11,8,.92);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-dim)}
  .qz-mini b{font:700 17px/1.1 var(--serif);letter-spacing:0;text-transform:none;color:var(--gold-2)}
  .sx-quote-sec .qz-card.is-done .qz-mini{display:none}
}
@media (max-width:640px){
  .sx-quote-sec .qz-card{padding:20px 16px}
  .sx-quote-sec .qz-grid,.sx-quote-sec .qz-grid.three{grid-template-columns:1fr;gap:10px}
  .sx-quote-sec .qz-big .opt{grid-template-columns:auto minmax(0,1fr);justify-items:stretch;gap:2px 14px;padding:14px 16px}
  .sx-quote-sec .qz-big .opt > :not(.oi):not(.qz-room){grid-column:2}
  .sx-quote-sec .qz-big .opt > :is(.oi,.qz-room){grid-row:1 / span 2;margin:0}
  .sx-quote-sec .qz-big .oi{width:44px;height:44px}
  .qz-room{width:44px;height:44px}
  .sx-quote-sec .qz-step .l{font-size:9.5px;letter-spacing:.1em}
  .sx-quote-sec .qz-aside{padding:20px 18px}
}

/* ── keyframes ────────────────────────────────────────────────────────────── */
@keyframes sxWord{from{opacity:0;transform:translateY(.28em)}to{opacity:1;transform:none}}
@keyframes hfPing{0%{box-shadow:0 0 0 0 rgba(230,199,137,.55)}80%,100%{box-shadow:0 0 0 9px rgba(230,199,137,0)}}
@keyframes qzPop{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.12)}100%{transform:none}}
@keyframes qzIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* no filter:blur in the entrance: blur is not composited, so it repainted the logo every frame */
@keyframes sxLogoIn{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:none}}
/* same path as the old background-position 160% → -60% on a 220% layer, as transform */
@keyframes sxShine{from{transform:translateX(-87.3%)}to{transform:translateX(32.7%)}}
@keyframes sxBadgeIn{from{opacity:0;transform:scale(.6) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes sxRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes sxFade{from{opacity:0}to{opacity:1}}
@keyframes sxDrip{0%{transform:scaleY(0);opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
@keyframes sxBreathe{from{opacity:.75;scale:.94}to{opacity:1;scale:1.04}}
@keyframes sxFlow{to{stroke-dashoffset:-15}}
@keyframes sxPulse{from{transform:scale(.6);opacity:.9}to{transform:scale(2.6);opacity:0}}
@keyframes sxSheen{from{opacity:1;transform:translateX(0)}to{opacity:1;transform:translateX(760px)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}