/* Motion layer. Only active when <html class="fx"> (set by fx.js; off for reduced motion and edit mode). */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--brass),#F3DC9A);z-index:200;pointer-events:none}

/* hero canvas + kinetic headline */
#bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.9}
.hero .wrap{z-index:1}
.fx .hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.fx .hero h1 .w>i{display:inline-block;font-style:inherit;transform:translateY(112%) rotate(4deg);transition:transform 1s cubic-bezier(.2,.8,.15,1);transition-delay:calc(var(--i)*70ms + 150ms)}
.fx .hero.go h1 .w>i{transform:none}
.hero h1 em .w>i,.hero h1 em{font-style:italic}
.fx .hero .lead,.fx .hero .hero-cta{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.fx .hero .lead{transition-delay:.9s}.fx .hero .hero-cta{transition-delay:1.1s}
.fx .hero.go .lead,.fx .hero.go .hero-cta{opacity:1;transform:none}
.hero .flow-wrap{perspective:900px}
.hero .flow{transition:transform .25s ease-out;transform:rotateX(calc(var(--ry,0)*1deg)) rotateY(calc(var(--rx,0)*1deg));will-change:transform}
.flow .pkt{fill:var(--brass);filter:drop-shadow(0 0 6px rgba(217,180,92,.9))}
.flow .pkt--g{fill:var(--steel-l);filter:none}
.flow .pulse{fill:none;stroke:var(--brass);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:pulse 2.6s ease-out 1.6s infinite}
@keyframes pulse{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.35,1.9)}}
.scrollcue{position:absolute;left:50%;bottom:22px;width:26px;height:42px;border:2px solid var(--steel-l);border-radius:14px;transform:translateX(-50%);opacity:.8}
.scrollcue::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--brass);animation:cue 1.6s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}80%,100%{transform:translateY(14px);opacity:0}}

/* marquee */
.marquee{overflow:hidden;background:var(--brass);color:#16110A;border-block:1px solid #16110A;padding:.9rem 0;user-select:none}
.marquee .tr{display:flex;width:max-content;animation:mq 38s linear infinite}
.marquee:hover .tr{animation-play-state:paused}
.marquee span{font-family:var(--f-display);font-weight:800;font-size:clamp(1.5rem,3vw,2.3rem);text-transform:none;padding-inline:1.4rem;white-space:nowrap;display:flex;align-items:center;gap:2.8rem}
.marquee span::after{content:"";width:12px;height:12px;background:#16110A;transform:rotate(45deg)}
@keyframes mq{to{transform:translateX(-50%)}}

/* reveal on scroll */
.fx [data-rv]{opacity:0;transform:translateY(34px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--rd,0)*90ms)}
.fx [data-rv].in{opacity:1;transform:none}
.fx [data-rv="l"]{transform:translateX(-46px)}.fx [data-rv="r"]{transform:translateX(46px)}
.fx [data-rv="s"]{transform:scale(.94)}
.fx h2.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.fx h2.split .w>i{display:inline-block;font-style:inherit;transform:translateY(110%);transition:transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*55ms)}
.fx h2.split.in .w>i{transform:none}

/* cursor spotlight in dark sections */
.sec--ink,.sec--petrol,.sec--deep,.facts{position:relative}
.fx .spot::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(217,180,92,.13),transparent 60%);opacity:0;transition:opacity .4s}
.fx .spot:hover::before{opacity:1}
.fx .spot>.wrap{position:relative}

/* magnetic buttons */
.btn{transition:transform .25s cubic-bezier(.2,.8,.2,1),background .2s,color .2s,box-shadow .25s}
.btn--brass:hover{box-shadow:0 10px 30px rgba(217,180,92,.35)}
.btn .bl{display:inline-block;transition:transform .25s}

/* 3D tilt cards */
.tilt{transform:perspective(900px) rotateX(calc(var(--tx,0)*1deg)) rotateY(calc(var(--ty,0)*1deg)) translateZ(0);transition:transform .25s ease-out;will-change:transform}
.sv .im::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);transform:translateX(-120%);transition:transform .9s}
.sv:hover .im::after{transform:translateX(120%)}

/* service rows: slide + smooth open */
.svc summary{position:relative;overflow:hidden}
.svc summary::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(217,180,92,.14),transparent 70%);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s cubic-bezier(.2,.8,.2,1);z-index:0}
.svc summary:hover::before,.svc details[open] summary::before{transform:scaleX(1)}
.svc summary>*{position:relative;z-index:1}
.svc summary:hover{padding-left:14px}
.svc .svc-ic{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}.svc summary:hover .svc-ic{transform:rotate(-8deg) scale(1.18)}
.svc .more{overflow:hidden}

/* process driven by scroll */
.steps::after{transition:none}
.step b{transition:background .4s,color .4s,transform .5s cubic-bezier(.3,1.7,.5,1),box-shadow .4s}
.step h3,.step p{transition:opacity .5s,transform .5s}
.fx .step:not(.on) h3,.fx .step:not(.on) p{opacity:.38}
.fx .step.on b{background:var(--brass);color:#16110A;transform:scale(1.18);box-shadow:0 0 0 8px rgba(217,180,92,.18)}

/* "choose your side" explainer */
.sides{margin-bottom:clamp(28px,4vw,48px)}
.seg{display:inline-grid;grid-auto-flow:column;position:relative;border:2px solid var(--ink);border-radius:999px;padding:4px;background:#fff}
.seg button{position:relative;z-index:1;border:0;background:none;cursor:pointer;padding:.7rem 1.5rem;font-weight:700;border-radius:999px;color:var(--text-l);transition:color .3s}
.seg button[aria-selected=true]{color:var(--text-d)}
.seg i{position:absolute;top:4px;bottom:4px;left:4px;width:var(--w,50%);transform:translateX(var(--x,0));background:var(--ink);border-radius:999px;transition:transform .45s cubic-bezier(.3,1.3,.4,1),width .45s}
.sidepanel{margin-top:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sidepanel .sp{background:#fff;border:1px solid var(--line-l);padding:20px 22px;border-radius:var(--r);animation:pop .55s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:calc(var(--n)*90ms)}
.sidepanel .sp small{display:block;color:#4A5963;font-weight:600;margin-bottom:.4rem}
.sidepanel .sp b{font-family:var(--f-display);font-size:1.9rem;line-height:1}
.sidepanel .sp.price b{color:var(--brass-d)}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.96)}}
.sidepanel[hidden]{display:none}
@media(max-width:700px){.sidepanel{grid-template-columns:1fr}}

/* sheet items stagger in */
.fx .sheet li{opacity:0;transform:translateX(-14px);transition:opacity .6s,transform .6s;transition-delay:calc(var(--n,0)*80ms)}
.fx .sheet.in li{opacity:1;transform:none}
.fx .sheet section:last-child li{transform:translateX(14px)}.fx .sheet.in section:last-child li{transform:none}

/* brass band: huge text drifts with scroll */
.sec--brass{overflow:hidden}
.notice h2{will-change:transform;transform:translateX(calc(var(--sx,0)*1px))}

/* form polish */
.form .inp{transition:border-color .2s,box-shadow .25s,transform .25s}.form .inp:focus{transform:translateY(-1px);box-shadow:0 8px 22px rgba(13,27,34,.14)}
.form .ok{animation:pop .6s cubic-bezier(.2,.9,.3,1.2)}
.btn.busy{pointer-events:none;opacity:.8}.btn.busy::after{content:"";width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;margin-left:10px;animation:spin .7s linear infinite;display:inline-block;vertical-align:-3px}
@keyframes spin{to{transform:rotate(360deg)}}

/* floating chat button idle motion */
.fab .cb{animation:bob 4s ease-in-out infinite}.fab.open .cb{animation:none}
@keyframes bob{50%{transform:translateY(-5px)}}

@media(prefers-reduced-motion:reduce){.marquee .tr,.fab .cb,.scrollcue::after,.flow .pulse{animation:none}}
.fx .steps.in::after{width:calc(var(--p,0)*100%)}
.fx .tilt.in,.fx .tilt:not([data-rv]){transform:perspective(900px) rotateX(calc(var(--tx,0)*1deg)) rotateY(calc(var(--ty,0)*1deg))}
.fx .tilt[data-rv]{transition:opacity .9s ease,transform .25s ease-out}