/* ===== Creative layer ===== */
/* loader */
.loader{position:fixed;inset:0;z-index:100;background:var(--forest);display:grid;place-items:center;transition:opacity .6s,visibility .6s}
.loader .logo-mark{width:64px;height:64px;font-size:1.8rem;animation:pulse 1.2s ease-in-out infinite}
.loader i{position:absolute;bottom:40%;width:120px;height:2px;background:rgba(255,255,255,.1);overflow:hidden;transform:translateY(60px)}
.loader i::after{content:"";position:absolute;inset:0;background:var(--gold);animation:load 1s var(--ease) forwards}
.loader.done{opacity:0;visibility:hidden}
@keyframes pulse{50%{transform:scale(1.08)}}@keyframes load{from{transform:translateX(-100%)}}

/* scroll progress + grain */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:70;background:linear-gradient(90deg,var(--gold),var(--saffron));transform-origin:0;transform:scaleX(0)}
.grain{position:fixed;inset:0;pointer-events:none;z-index:80;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* split headline */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.split .w>span{display:inline-block;transform:translateY(110%);transition:transform 1.1s var(--ease)}
.split.go .w>span{transform:none}

/* arch hero image */
.arch img{border-radius:999px 999px var(--r) var(--r);aspect-ratio:4/5;object-fit:cover;object-position:top;width:100%}
.orbit{position:absolute;width:150px;top:-40px;left:-50px;z-index:2;animation:spin 18s linear infinite;fill:var(--gold);font:600 13px var(--sans);letter-spacing:3px}
@keyframes spin{to{transform:rotate(360deg)}}
.scroll-cue{position:absolute;bottom:24px;left:50%;width:26px;height:42px;border:1.5px solid rgba(255,255,255,.4);border-radius:20px;transform:translateX(-50%)}
.scroll-cue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--gold);animation:cue 1.8s infinite}
@keyframes cue{to{transform:translateY(14px);opacity:0}}
@media(max-width:860px){.orbit{width:110px;left:-10px;top:-30px}.arch img{aspect-ratio:1}}

/* marquee */
.marquee{background:var(--saffron);color:#fff;overflow:hidden;padding:1rem 0;white-space:nowrap;font:600 1.3rem var(--serif);transform:rotate(-1.2deg);margin:-14px -10px 0;position:relative;z-index:3}
.marquee>div{display:inline-flex;gap:2rem;animation:marq 32s linear infinite}
@keyframes marq{to{transform:translateX(-50%)}}

/* stacked sticky showcases */
#showcases .show{position:sticky;top:90px;background:var(--ivory);border:1px solid var(--line);border-radius:28px;padding:clamp(1.2rem,3vw,2.5rem);margin-bottom:2rem;box-shadow:0 -20px 50px rgba(15,42,31,.08)}
#showcases .show-img{max-height:440px}
@media(max-width:860px){#showcases .show{position:relative;top:0}}

/* cards: spotlight hover */
.card{position:relative}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(217,178,95,.18),transparent 40%);opacity:0;transition:opacity .4s}
.card:hover::after{opacity:1}

/* calculator */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.calc label{margin-top:1.2rem;color:var(--ivory)}
.calc label b{color:var(--gold)}
input[type=range]{padding:0;border:0;background:transparent;accent-color:var(--saffron);height:28px}
.calc-out{background:var(--forest-2);border:1px solid rgba(217,178,95,.25);border-radius:28px;padding:clamp(1.4rem,3vw,2.4rem)}
.plot-viz{display:grid;grid-template-columns:repeat(11,1fr);gap:5px;margin-bottom:1.6rem}
.plot-viz i{aspect-ratio:1;border:1px solid rgba(217,178,95,.35);border-radius:4px;transition:background .4s,transform .4s}
.plot-viz i.on{background:var(--gold);transform:translateY(-3px)}
.calc dl{display:grid;gap:1rem}
.calc dl div{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px dashed rgba(255,255,255,.12);padding-bottom:.7rem}
.calc dt{opacity:.7;font-size:.9rem}.calc dd{font:600 1.5rem var(--serif)}
.calc dd.big{font-size:2.3rem;color:var(--gold)}
.calc-out .note{color:rgba(248,245,238,.55);margin:1rem 0 1.4rem}
@media(max-width:860px){.calc{grid-template-columns:1fr}}

/* mobile sticky bar */
.mbar{display:none}
@media(max-width:700px){
  .mbar{display:grid;grid-template-columns:1fr 1fr 1.4fr;position:fixed;left:0;right:0;bottom:0;z-index:65;background:#fff;box-shadow:0 -6px 24px rgba(0,0,0,.12);transform:translateY(100%);transition:transform .4s var(--ease)}
  .mbar.show{transform:none}
  .mbar a{text-align:center;padding:1rem .4rem;font-weight:600;font-size:.9rem;text-decoration:none;color:var(--forest)}
  .mbar .hot{background:var(--saffron);color:#fff}
  .wa{bottom:76px}
}

/* exit-intent modal */
.exit{position:fixed;inset:0;z-index:95;background:rgba(10,20,15,.7);backdrop-filter:blur(6px);display:grid;place-items:center;padding:16px}
.exit[hidden]{display:none}
.exit-card{position:relative;display:grid;grid-template-columns:.8fr 1fr;max-width:760px;width:100%;background:var(--ivory);border-radius:24px;overflow:hidden;animation:pop .5s var(--ease)}
.exit-card img{height:100%;object-fit:cover;object-position:top}
.exit-card>div{padding:2rem;display:grid;gap:.8rem;align-content:center}
.exit-card form{background:none;padding:0;gap:.7rem}
.exit .x{position:absolute;top:10px;right:14px;background:rgba(255,255,255,.85);border:0;border-radius:50%;width:36px;height:36px;font-size:1.5rem;cursor:pointer;z-index:2}
@keyframes pop{from{transform:scale(.92);opacity:0}}
@media(max-width:620px){.exit-card{grid-template-columns:1fr}.exit-card img{max-height:180px}}