/* ============================================================
   WEBGL TEMPLATE - MOTION + LAYOUT STYLESHEET
   ------------------------------------------------------------
   Shared styling for the hero, story breaks, masked reveals,
   velocity marquee, pinned gallery and forms.

   You should not need to edit this file. Colours, fonts and
   spacing all come from the :root{} block in index.html.
   ============================================================ */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ font-family:var(--font-body); background:rgb(var(--bg-rgb)); color:var(--ink); line-height:1.7; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--c2); color:#fff; }
:root{ --wrap:min(1140px,92vw); --radius:20px; }
.wrap{ width:var(--wrap); margin-inline:auto; }
.section{ padding:clamp(4.5rem,11vh,8rem) 0; position:relative; }

/* hero canvas + fallback */
#heroGL{ position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block; opacity:0; transition:opacity 1.1s ease; }
html.gl-on #heroGL{ opacity:1; }
.hero-fallback{ position:fixed; inset:0; z-index:0; background:radial-gradient(ellipse at 30% 20%, rgba(var(--c1-rgb),.35), transparent 55%), radial-gradient(ellipse at 75% 70%, rgba(var(--c2-rgb),.28), transparent 55%), rgb(var(--bg-rgb)); }
html.gl-on .hero-fallback{ display:none; }
body::after{ content:""; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.stage{ position:relative; z-index:2; background:linear-gradient(to bottom, transparent, rgba(var(--bg-rgb),0.78) 90vh, rgba(var(--bg-rgb),0.9) 130vh); }

/* type */
h1,h2,h3{ font-family:var(--font-display); font-weight:600; line-height:1.05; letter-spacing:-.015em; }
h2{ font-size:clamp(2.1rem,5vw,3.5rem); }
h3{ font-size:1.22rem; }
.lead{ font-size:clamp(1.05rem,1.6vw,1.28rem); color:var(--muted); max-width:56ch; }
.eyebrow{ font-family:var(--font-mono); font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--c1); display:inline-flex; gap:.55rem; align-items:center; margin-bottom:1.1rem; }
.eyebrow::before{ content:"✦"; opacity:.7; }
/* gradient headline with a slow living sheen sweeping across it */
.gradient-text{ background-image:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.9) 50%,transparent 60%),var(--grad); background-size:230% 100%,100% 100%; background-position:190% 0,0 0; background-repeat:no-repeat; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:gtSheen 6.5s cubic-bezier(.5,0,.35,1) 1.4s infinite; }
@keyframes gtSheen{ 0%{ background-position:190% 0,0 0; } 55%,100%{ background-position:-90% 0,0 0; } }

.btn{ display:inline-flex; align-items:center; gap:.6rem; cursor:pointer; font-family:var(--font-body); font-weight:600; font-size:1rem; padding:.95rem 1.7rem; border-radius:100px; border:0; transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.btn-primary{ background:var(--grad); color:var(--btn-ink); box-shadow:0 10px 36px -10px rgba(var(--c1-rgb),.55); }
.btn-primary:hover{ box-shadow:0 16px 48px -10px rgba(var(--c2-rgb),.7); }
.btn-ghost{ background:rgba(255,255,255,.05); color:var(--ink); border:1px solid var(--line-2); backdrop-filter:blur(6px); }
.btn-ghost:hover{ border-color:var(--c1); }
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--c1); outline-offset:3px; border-radius:8px; }

/* NAV — 100% transparent always (no box behind the logo), text-shadow keeps it readable */
.nav{ position:fixed; top:0; left:0; right:0; z-index:40; padding:1rem 0; background:transparent; border:0; }
.nav-inner{ width:var(--wrap); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; }
/* tight edge only — a wide blurred shadow reads as a grey box behind the wordmark */
.nav-links a, .logo{ text-shadow:0 1px 2px rgba(var(--bg-rgb),.75), 0 0 1px rgba(var(--bg-rgb),.7); }
.logo{ font-family:var(--font-display); font-weight:700; font-size:1.35rem; letter-spacing:.01em; }
.logo em{ font-style:italic; color:var(--c1); }
.nav-links{ display:flex; gap:2rem; align-items:center; }
.nav-links a{ font-size:.95rem; color:var(--muted); transition:color .2s; }
.nav-links a:hover{ color:var(--ink); }
.menu-btn{ display:none; background:none; border:0; color:var(--ink); cursor:pointer; font-size:1.6rem; line-height:1; }

/* ANIMATED LOGO — orbiting sparks + breathing glow + shine sweep. Eye candy from second one. */
.logo-fx{ position:relative; display:inline-flex; align-items:center; }
.logo-fx::before{ content:""; position:absolute; inset:-10px -18px; border-radius:100px; background:radial-gradient(closest-side, rgba(var(--c1-rgb),.28), transparent 72%); animation:logoGlow 3.2s ease-in-out infinite; pointer-events:none; }
@keyframes logoGlow{ 0%,100%{ opacity:.45; transform:scale(1); } 50%{ opacity:.95; transform:scale(1.12); } }
.logo-orbit{ position:absolute; left:50%; top:50%; width:0; height:0; pointer-events:none; }
.logo-orbit i{ position:absolute; left:0; top:0; width:5px; height:5px; margin:-2.5px; border-radius:50%; background:var(--c1); box-shadow:0 0 10px var(--c1); animation:orbitA 5s linear infinite, twinkle 1.6s ease-in-out infinite; }
.logo-orbit i:nth-child(2){ width:4px; height:4px; background:var(--c2); box-shadow:0 0 9px var(--c2); animation:orbitB 7.5s linear infinite reverse, twinkle 2.1s ease-in-out infinite .4s; }
.logo-orbit i:nth-child(3){ width:3px; height:3px; background:var(--c3); box-shadow:0 0 8px var(--c3); animation:orbitC 6.2s linear infinite, twinkle 1.9s ease-in-out infinite .8s; }
@keyframes orbitA{ from{ transform:rotate(0deg) translateX(52px) rotate(0deg); } to{ transform:rotate(360deg) translateX(52px) rotate(-360deg); } }
@keyframes orbitB{ from{ transform:rotate(0deg) translateX(38px) translateY(6px) rotate(0deg); } to{ transform:rotate(360deg) translateX(38px) translateY(6px) rotate(-360deg); } }
@keyframes orbitC{ from{ transform:rotate(0deg) translateX(64px) rotate(0deg); } to{ transform:rotate(360deg) translateX(64px) rotate(-360deg); } }
@keyframes twinkle{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* HERO */
.hero{ position:relative; z-index:2; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:6rem 0 3rem; }
.hero::before{ content:""; position:absolute; z-index:-1; width:min(780px,88vw); height:min(780px,88vw); border-radius:50%; background:radial-gradient(circle, rgba(var(--bg-rgb),.66), rgba(var(--bg-rgb),.3) 45%, transparent 70%); }
.hero-badge{ display:inline-flex; align-items:center; gap:.6rem; padding:.5rem 1.1rem; border-radius:100px; border:1px solid var(--line-2); background:transparent; font-size:.85rem; color:var(--muted); margin-bottom:1.6rem; text-shadow:0 2px 12px rgba(var(--bg-rgb),.95); }
.hero-badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--c1); box-shadow:0 0 12px var(--c1); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
.hero h1{ font-size:clamp(3rem,9vw,6.8rem); margin:.3rem 0 1.4rem; text-shadow:0 6px 60px rgba(var(--bg-rgb),.8); }
.hero h1 em{ font-style:italic; }
.hero .lead{ margin:0 auto 2.2rem; text-align:center; }
.hero-cta{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.trust{ margin-top:2.4rem; display:flex; gap:1.6rem; justify-content:center; flex-wrap:wrap; font-family:var(--font-mono); font-size:.76rem; color:var(--muted); letter-spacing:.03em; }
.trust span{ display:inline-flex; align-items:center; gap:.5rem; }
.trust span::before{ content:"✦"; color:var(--c1); }
.scroll-cue{ position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.scroll-cue .line{ width:1px; height:34px; background:linear-gradient(var(--c1),transparent); animation:drop 1.8s ease-in-out infinite; }
@keyframes drop{ 0%{ transform:scaleY(0); transform-origin:top; } 45%{ transform:scaleY(1); transform-origin:top; } 55%{ transform:scaleY(1); transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* MARQUEE */
.marquee{ position:relative; z-index:2; padding:1.4rem 0; border-block:1px solid var(--line); overflow:hidden; background:rgba(var(--bg-rgb),.55); }
.marquee-track{ display:flex; width:max-content; animation:scrollx 34s linear infinite; }
.marquee-track span{ font-family:var(--font-display); font-weight:500; font-style:italic; font-size:clamp(1.2rem,2.8vw,1.9rem); color:transparent; -webkit-text-stroke:1px var(--line-2); display:inline-flex; align-items:center; gap:2.4rem; padding-right:2.4rem; }
.marquee-track span b{ color:var(--c1); -webkit-text-stroke:0; font-weight:500; }
@keyframes scrollx{ to{ transform:translateX(-50%); } }
html.js .marquee-track{ will-change:transform; }

.sec-head{ max-width:60ch; margin-bottom:3rem; }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head p{ margin-top:1rem; color:var(--muted); font-size:1.05rem; }
.grid{ display:grid; gap:1.3rem; }

/* SERVICES */
.services-grid{ grid-template-columns:repeat(4,1fr); }
.card{ background:linear-gradient(160deg,var(--card-a),var(--card-b)); border:1px solid var(--line); border-radius:var(--radius); padding:2rem 1.7rem; transition:transform .3s, border-color .3s, box-shadow .3s; backdrop-filter:blur(6px); }
.card:hover{ transform:translateY(-6px); border-color:var(--line-2); box-shadow:0 24px 60px -24px rgba(var(--c1-rgb),.4); }
.card .ico{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; margin-bottom:1.2rem; background:linear-gradient(135deg,rgba(var(--c1-rgb),.16),rgba(var(--c2-rgb),.16)); border:1px solid var(--line-2); color:var(--c1); }
.card .ico svg{ width:22px; height:22px; }
.card h3{ margin-bottom:.55rem; }
.card p{ color:var(--muted); font-size:.95rem; }

/* SCROLL-FX */
.progress-bar{ position:fixed; top:0; left:0; right:0; height:3px; z-index:45; background:var(--grad); transform:scaleX(0); transform-origin:left; pointer-events:none; }
.hline{ display:block; overflow:hidden; padding-block:.06em; margin-block:-.06em; }
.hline-in{ display:inline-block; transform:translateY(118%); animation:heroUp 1s cubic-bezier(.19,1,.22,1) forwards; }
.hline:nth-child(2) .hline-in{ animation-delay:.14s; }
@keyframes heroUp{ to{ transform:none; } }
.w{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-block:.08em; margin-block:-.08em; }
.wi{ display:inline-block; transform:translateY(118%); transition:transform .85s cubic-bezier(.19,1,.22,1); transition-delay:var(--wd,0s); }
h2.split.in .wi{ transform:none; }
html.js .reveal{ opacity:0; transform:translateY(30px) scale(.985); filter:blur(12px); transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1), filter .9s cubic-bezier(.2,.8,.2,1); }
html.js .reveal.in{ opacity:1; transform:none; filter:blur(0); }
.reveal.d1{ transition-delay:.09s; } .reveal.d2{ transition-delay:.18s; } .reveal.d3{ transition-delay:.27s; }

/* interactive 3D tilt + glare on cards (pointer devices only; JS adds .tilt3d) */
@media (hover:hover) and (pointer:fine){
  html.js .tilt3d{ position:relative; will-change:transform; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s; }
  html.js .tilt3d.tilting{ transition:transform .08s ease-out, box-shadow .3s, border-color .3s; }
  html.js .tilt3d::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:3; opacity:0; transition:opacity .4s; background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.20), rgba(255,255,255,0) 60%); mix-blend-mode:soft-light; }
  html.js .tilt3d.tilting::after{ opacity:1; }
}

/* pinned gallery */
.work-pin{ position:relative; height:380vh; }
.work-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; display:flex; flex-direction:column; justify-content:center; gap:2rem; }
.work-head{ width:var(--wrap); margin-inline:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.work-hint{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.work-track{ display:flex; gap:1.6rem; padding-inline:max(4vw,calc((100vw - var(--wrap))/2)); will-change:transform; }
.work-track .work-card{ flex:none; width:min(520px,76vw); }
.work-card{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--panel); transition:box-shadow .3s; }
.work-card:hover{ box-shadow:0 30px 70px -30px rgba(var(--c2-rgb),.5); }
.thumb{ height:min(46vh,420px); position:relative; display:grid; place-items:center; }
.thumb .ph-badge{ position:absolute; top:.8rem; left:.8rem; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; background:rgba(var(--bg-rgb),.65); color:#fff; padding:.32rem .58rem; border-radius:8px; border:1px solid rgba(255,255,255,.24); }
.thumb svg{ width:36px; height:36px; color:#fff; opacity:.9; }
.work-meta{ padding:1.15rem 1.3rem; display:flex; justify-content:space-between; align-items:center; }
.work-meta h3{ font-size:1.06rem; }
.work-meta .tag{ font-family:var(--font-mono); font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.wnum{ font-family:var(--font-mono); font-size:.7rem; color:var(--muted); letter-spacing:.12em; white-space:nowrap; }
.work-progress{ width:var(--wrap); margin-inline:auto; height:2px; background:var(--line); border-radius:2px; overflow:hidden; }
.work-progress i{ display:block; height:100%; background:var(--grad); transform:scaleX(0); transform-origin:left; width:100%; }

/* story break */
.story-break{ position:relative; height:100vh; min-height:560px; overflow:hidden; display:grid; place-items:center; }
.story-break canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.break-fallback{ position:absolute; inset:0; display:none; background:radial-gradient(ellipse at 50% 60%, rgba(var(--c1-rgb),.4), transparent 55%), rgb(var(--bg-rgb)); }
.story-break.no-gl canvas{ display:none; }
.story-break.no-gl .break-fallback{ display:block; }
.break-cap{ position:relative; z-index:2; text-align:center; padding:3rem 4rem; background:radial-gradient(closest-side, rgba(var(--bg-rgb),.55), transparent 78%); }
.break-cap h2{ font-size:clamp(2rem,5vw,3.8rem); text-shadow:0 4px 44px rgba(var(--bg-rgb),.9); max-width:22ch; }
.break-cap h2 em{ font-style:italic; color:var(--c1); }
.break-cap p{ color:var(--ink); opacity:.88; margin-top:.9rem; font-size:1.05rem; text-shadow:0 2px 20px rgba(var(--bg-rgb),.95); }

/* MENU / price list */
.menu{ max-width:820px; margin-inline:auto; background:linear-gradient(160deg,var(--card-a),var(--card-b)); border:1px solid var(--line); border-radius:var(--radius); padding:2.6rem clamp(1.4rem,4vw,3rem); backdrop-filter:blur(6px); }
.menu h3{ font-size:1.05rem; font-family:var(--font-mono); font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--c1); margin:1.8rem 0 1rem; }
.menu h3:first-child{ margin-top:0; }
.menu-item{ display:flex; align-items:baseline; gap:.8rem; padding:.55rem 0; }
.menu-item .name{ font-size:1.02rem; }
.menu-item .name small{ display:block; color:var(--muted); font-size:.83rem; }
.menu-item .dots{ flex:1; border-bottom:2px dotted var(--line-2); transform:translateY(-4px); }
.menu-item .price{ font-family:var(--font-display); font-weight:600; font-size:1.1rem; color:var(--c1); white-space:nowrap; font-variant-numeric:tabular-nums; }
.menu-note{ text-align:center; color:var(--muted); font-size:.85rem; margin-top:1.6rem; }

/* REVIEWS */
.quotes-grid{ grid-template-columns:repeat(3,1fr); }
.quote{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:1.9rem; display:flex; flex-direction:column; gap:1.1rem; backdrop-filter:blur(6px); }
.quote .stars{ color:var(--c1); letter-spacing:.12em; }
.quote p{ font-size:1rem; flex:1; }
.quote .who{ display:flex; align-items:center; gap:.8rem; }
.quote .avatar{ width:42px; height:42px; border-radius:50%; background:var(--grad); display:grid; place-items:center; font-family:var(--font-display); font-weight:600; color:var(--btn-ink); }
.quote .who small{ display:block; color:var(--muted); font-family:var(--font-mono); font-size:.7rem; }

/* FAQ */
.faq{ max-width:800px; margin-inline:auto; }
details{ border-bottom:1px solid var(--line); }
summary{ cursor:pointer; list-style:none; padding:1.25rem .4rem; font-family:var(--font-display); font-weight:600; font-size:1.1rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
summary::-webkit-details-marker{ display:none; }
summary .plus{ color:var(--c1); font-size:1.4rem; transition:transform .3s; flex:none; }
details[open] summary .plus{ transform:rotate(45deg); }
details p{ padding:0 .4rem 1.3rem; color:var(--muted); }

/* CONTACT / BOOK */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:3.2rem; align-items:start; }
.contact-left h2{ margin-bottom:1.1rem; }
.info-list{ list-style:none; display:flex; flex-direction:column; gap:.9rem; margin-top:1.8rem; }
.info-list li{ display:flex; gap:.8rem; align-items:flex-start; color:var(--muted); }
.info-list li b{ color:var(--ink); font-weight:600; }
.info-list .ph{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--c1); border:1px dashed var(--line-2); padding:.2rem .5rem; border-radius:6px; }
.socials{ display:flex; gap:1rem; margin-top:1.6rem; flex-wrap:wrap; }
.socials a{ font-family:var(--font-mono); font-size:.78rem; color:var(--muted); padding:.55rem .9rem; border:1px solid var(--line); border-radius:100px; transition:color .2s, border-color .2s; }
.socials a:hover{ color:var(--ink); border-color:var(--c1); }
form{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:2rem; display:flex; flex-direction:column; gap:1.1rem; backdrop-filter:blur(6px); }
label{ font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); display:block; margin-bottom:.5rem; }
input,select,textarea{ width:100%; background:rgba(var(--bg-rgb),.7); border:1px solid var(--line-2); border-radius:12px; padding:.85rem 1rem; color:var(--ink); font-family:var(--font-body); font-size:1rem; transition:border-color .2s; color-scheme:dark; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--c1); }
textarea{ resize:vertical; min-height:96px; }
form .btn{ justify-content:center; margin-top:.4rem; }
.form-note{ font-size:.78rem; color:var(--muted); text-align:center; }

footer{ border-top:1px solid var(--line); padding:3rem 0 2.4rem; position:relative; z-index:2; background:rgba(var(--bg-rgb),.88); }
.foot{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; color:var(--muted); font-size:.85rem; }
.foot .credit a{ color:var(--c1); }

/* RESPONSIVE */
@media (max-width:960px){
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .quotes-grid{ grid-template-columns:1fr; }
  .contact{ grid-template-columns:1fr; gap:2.4rem; }
  .work-pin{ height:auto; }
  .work-sticky{ position:static; height:auto; overflow:visible; }
  .work-track{ display:grid; grid-template-columns:repeat(2,1fr); width:var(--wrap); margin-inline:auto; padding-inline:0; transform:none !important; }
  .work-track .work-card{ width:auto; }
  .thumb{ height:auto; aspect-ratio:4/3; }
  .work-progress,.work-hint{ display:none; }
}
@media (max-width:640px){
  .nav-links{ position:fixed; inset:0 0 0 auto; width:min(78vw,320px); flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:1.4rem; padding:6rem 2rem; background:var(--panel); border-left:1px solid var(--line); transform:translateX(100%); transition:transform .35s cubic-bezier(.2,.8,.2,1); z-index:39; }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ font-size:1.1rem; }
  .menu-btn{ display:block; z-index:41; }
  .services-grid,.work-track{ grid-template-columns:1fr; }
  .logo-orbit{ display:none; }
}
/* FX-V2-CSS:BEGIN — synced into the standalone templates by
   shared/sync-standalone-fx.py. Edit here, then re-run that script. */
/* ============================================================
   FX v2 — the extra motion layer. Everything below is additive:
   remove this block and the site still works exactly as before.
   All of it is opacity/transform only (compositor-friendly) and
   all of it is switched off by the reduced-motion block at the end.
   ============================================================ */

/* angle custom property so conic gradients can actually animate.
   Unsupported browsers just skip the spin — the ring still shows. */
@property --bbAng{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes bbSpin{ to{ --bbAng:360deg; } }
@keyframes spinSlow{ to{ transform:rotate(360deg); } }

/* --- page intro: a brand curtain that wipes up off the hero --------- */
@media (prefers-reduced-motion:no-preference){
  html.js body::before{ content:""; position:fixed; inset:0; z-index:80; pointer-events:none;
    background:linear-gradient(180deg, rgb(var(--bg-rgb)) 60%, rgba(var(--c1-rgb),.22));
    animation:bbCurtain .95s cubic-bezier(.76,0,.24,1) .15s forwards; }
  @keyframes bbCurtain{ to{ transform:translateY(-101%); } }
  /* JS safety net: once loaded, the curtain can never linger */
  html.loaded body::before{ display:none; }
}

/* --- cursor spotlight: a soft brand-coloured light that follows you -- */
.fx-spot{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity .6s ease;
  background:radial-gradient(360px circle at var(--cx,50%) var(--cy,50%), rgba(var(--c1-rgb),.14), transparent 68%);
  mix-blend-mode:screen; }
html.js.fx-pointer .fx-spot{ opacity:1; }

/* --- ambient sparks drifting up through the hero -------------------- */
.fx-orbs{ position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.fx-orbs.off{ display:none; }
.fx-orbs i{ position:absolute; bottom:-6vh; width:var(--s,4px); height:var(--s,4px); border-radius:50%;
  background:var(--cc,var(--c1)); box-shadow:0 0 10px var(--cc,var(--c1)); opacity:0;
  animation:orbRise var(--dur,17s) linear var(--dly,0s) infinite; }
@keyframes orbRise{
  0%{ transform:translate3d(0,0,0) scale(.5); opacity:0; }
  12%{ opacity:.7; }
  85%{ opacity:.45; }
  100%{ transform:translate3d(var(--dx,20px),-112vh,0) scale(1.15); opacity:0; }
}

/* --- nav links: gradient underline draws in from the left ----------- */
.nav-links a{ position:relative; }
.nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:2px;
  background:var(--grad); transform:scaleX(0); transform-origin:right;
  transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.nav-links a:hover::after{ transform:scaleX(1); transform-origin:left; }

/* --- buttons: magnetic pull, sheen sweep, press squish, click ripple - */
.btn{ position:relative; overflow:hidden; isolation:isolate; }
html.js .btn.magnetic{ transform:translate3d(var(--mx,0px),var(--my,0px),0) scale(var(--ms,1)); }
html.js .btn.magnetic.mag-on{ transition:transform .14s ease-out, box-shadow .25s; }
html.js .btn.magnetic:active{ --ms:.955; }
.btn-primary::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.45) 50%,transparent 62%);
  transform:translateX(-150%); animation:btnSheen 5s cubic-bezier(.5,0,.35,1) 1.6s infinite; }
@keyframes btnSheen{ 0%{ transform:translateX(-150%); } 45%,100%{ transform:translateX(150%); } }
.btn .ripple{ position:absolute; z-index:-1; border-radius:50%; pointer-events:none;
  transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle, rgba(255,255,255,.6), rgba(255,255,255,0) 70%);
  animation:btnRipple .66s ease-out forwards; }
@keyframes btnRipple{ to{ transform:translate(-50%,-50%) scale(1); opacity:0; } }

/* --- section heads: a hairline that draws itself under the title ---- */
html.js .sec-head::after{ content:""; display:block; height:1px; width:0; margin-top:1.7rem;
  background:linear-gradient(90deg,var(--c1),transparent);
  transition:width 1.25s cubic-bezier(.2,.8,.2,1) .3s; }
html.js .sec-head.in::after{ width:min(300px,62%); }
html.js .sec-head.center::after{ margin-inline:auto;
  background:linear-gradient(90deg,transparent,var(--c1),transparent); }
.eyebrow::before{ display:inline-block; animation:spinSlow 9s linear infinite; }

/* --- cards: living gradient border, floating icon, hover ring ------- */
.card{ position:relative; }
/* guarded: without mask-composite the ring would flood the whole card, so skip it */
@supports ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
  .card::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
    pointer-events:none; opacity:0; transition:opacity .45s;
    background:conic-gradient(from var(--bbAng), transparent 0deg, var(--c1) 55deg,
               var(--c2) 125deg, var(--c3,var(--c2)) 175deg, transparent 235deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite:exclude; }
  .card:hover::before{ opacity:1; animation:bbSpin 3.6s linear infinite; }
}
.card .ico{ position:relative; animation:icoFloat 5.4s ease-in-out infinite; transition:color .3s; }
.card:nth-child(2n) .ico{ animation-delay:-1.35s; }
.card:nth-child(3n) .ico{ animation-delay:-2.7s; }
.card:nth-child(4n) .ico{ animation-delay:-4.05s; }
@keyframes icoFloat{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-6px) rotate(-5deg); } }
.card .ico::after{ content:""; position:absolute; inset:-5px; border-radius:50%; pointer-events:none;
  border:1px solid var(--c1); opacity:0; transform:scale(.85); }
.card:hover .ico{ color:var(--c2); }
.card:hover .ico::after{ animation:icoRing 1.2s ease-out infinite; }
@keyframes icoRing{ 0%{ opacity:.65; transform:scale(.85); } 100%{ opacity:0; transform:scale(1.55); } }

/* --- hero badge: gentle float + shimmer sweep ----------------------- */
.hero-badge{ position:relative; overflow:hidden; animation:badgeFloat 6.5s ease-in-out infinite; }
@keyframes badgeFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
.hero-badge::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);
  transform:translateX(-150%); animation:btnSheen 7s cubic-bezier(.5,0,.35,1) 2.4s infinite; }

/* --- marquee sparkles twinkle out of sync --------------------------- */
.marquee-track span b{ animation:twinkle 2.6s ease-in-out infinite; }
.marquee-track span b:nth-child(2n){ animation-delay:-.7s; }
.marquee-track span b:nth-child(3n){ animation-delay:-1.4s; }
.marquee-track span b:nth-child(5n){ animation-delay:-2.1s; }

/* --- pinned gallery: real photos, slow drift, lift + shine on hover -- */
.work-card{ transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.work-card:hover{ transform:translateY(-8px); }
.thumb{ overflow:hidden; }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.06); transition:transform 1.1s cubic-bezier(.2,.8,.2,1), filter .5s;
  animation:kenBurns 24s ease-in-out infinite alternate; filter:saturate(1.02); }
@keyframes kenBurns{
  from{ transform:scale(1.06) translate3d(0,0,0); }
  to{ transform:scale(1.16) translate3d(-1.6%,1.2%,0); }
}
.work-card:nth-child(2n) .thumb img{ animation-delay:-8s; }
.work-card:nth-child(3n) .thumb img{ animation-delay:-16s; }
.work-card:hover .thumb img{ filter:saturate(1.14) contrast(1.04); }
.thumb::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.24) 50%,transparent 58%);
  transform:translateX(-130%); transition:transform 1s cubic-bezier(.2,.8,.2,1); }
.work-card:hover .thumb::after{ transform:translateX(130%); }
.thumb svg{ transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.work-card:hover .thumb svg{ transform:scale(1.14) rotate(-4deg); }
.work-card:hover .wnum{ color:var(--c1); }
.wnum{ transition:color .3s; }

/* --- price list: rows fan in, dotted leader draws, price pops ------- */
html.js .menu-item{ opacity:0; transform:translateY(18px);
  transition:opacity .75s cubic-bezier(.2,.8,.2,1) calc(var(--si,0)*.055s),
             transform .75s cubic-bezier(.2,.8,.2,1) calc(var(--si,0)*.055s),
             padding-left .3s ease; }
html.js .menu.in .menu-item{ opacity:1; transform:none; }
.menu-item:hover{ padding-left:.55rem; }
html.js .menu-item .dots{ transform:translateY(-4px) scaleX(0); transform-origin:left;
  transition:transform .85s cubic-bezier(.2,.8,.2,1) calc(var(--si,0)*.055s + .12s); }
html.js .menu.in .menu-item .dots{ transform:translateY(-4px) scaleX(1); }
.menu-item .price{ display:inline-block; transition:transform .3s; }
.menu-item:hover .price{ transform:scale(1.12); }

/* --- reviews: stars pop in one by one ------------------------------- */
html.js .quote .stars s{ display:inline-block; text-decoration:none; opacity:0; transform:scale(.3) rotate(-40deg);
  transition:opacity .4s ease calc(var(--si,0)*.09s), transform .5s cubic-bezier(.3,1.6,.5,1) calc(var(--si,0)*.09s); }
html.js .quote.in .stars s{ opacity:1; transform:none; }

/* --- FAQ: accent bar, smooth open, answer slides down --------------- */
details{ position:relative; }
details::before{ content:""; position:absolute; left:-14px; top:50%; width:2px; height:0; border-radius:2px;
  background:var(--grad); transform:translateY(-50%); transition:height .4s cubic-bezier(.2,.8,.2,1); }
details:hover::before,details[open]::before{ height:62%; }
summary{ transition:color .25s; }
summary:hover{ color:var(--c1); }
details[open] p{ animation:faqIn .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes faqIn{ from{ opacity:0; transform:translateY(-8px); } }
@supports (interpolate-size:allow-keywords){
  details{ interpolate-size:allow-keywords; }   /* scoped, not global */
  details::details-content{ block-size:0; overflow:hidden;
    transition:block-size .45s cubic-bezier(.2,.8,.2,1), content-visibility .45s allow-discrete; }
  details[open]::details-content{ block-size:auto; }
}

/* --- contact: info rows slide in, socials lift ---------------------- */
html.js .info-list li{ opacity:0; transform:translateX(-16px);
  transition:opacity .6s ease calc(var(--si,0)*.1s), transform .6s cubic-bezier(.2,.8,.2,1) calc(var(--si,0)*.1s); }
html.js .contact-left.in .info-list li{ opacity:1; transform:none; }
.socials a,.trust span{ transition:transform .3s cubic-bezier(.2,.8,.2,1), color .2s, border-color .2s; }
.socials a:hover{ transform:translateY(-3px); }
.trust span:hover{ transform:translateY(-2px); color:var(--ink); }
.trust span::before{ display:inline-block; animation:twinkle 3s ease-in-out infinite; }
.trust span:nth-child(2)::before{ animation-delay:-1s; }
.trust span:nth-child(3)::before{ animation-delay:-2s; }

/* --- form: fields glow as you focus them ---------------------------- */
input,select,textarea{ transition:border-color .25s, box-shadow .25s, background-color .25s; }
input:focus,select:focus,textarea:focus{ box-shadow:0 0 0 3px rgba(var(--c1-rgb),.16); }

/* --- footer mark keeps twinkling ------------------------------------ */
.foot .credit a{ transition:color .25s; }
.foot .credit a:hover{ color:var(--c2); }
/* FX-V2-CSS:END */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
/* FX-V2-RM:BEGIN */
  /* FX v2 — hard-off, and never leave anything stuck invisible */
  html.js body::before{ display:none !important; }
  .fx-spot,.fx-orbs{ display:none !important; }
  html.js .menu-item,html.js .quote .stars s,html.js .info-list li{ opacity:1 !important; transform:none !important; }
  html.js .menu-item .dots{ transform:translateY(-4px) !important; }
  html.js .sec-head::after{ display:none; }
  html.js .btn.magnetic{ transform:none !important; }
/* FX-V2-RM:END */
  html.js .reveal{ opacity:1; transform:none; filter:none; }
  .hline-in,.wi{ transform:none !important; }
  .progress-bar{ display:none; }
  #heroGL{ display:none; }
  .hero-fallback{ display:block !important; }
  .work-pin{ height:auto; }
  .work-sticky{ position:static; height:auto; overflow:visible; }
  .work-track{ display:grid; grid-template-columns:repeat(2,1fr); width:var(--wrap); margin-inline:auto; padding-inline:0; transform:none !important; }
  .work-track .work-card{ width:auto; }
  .thumb{ height:auto; aspect-ratio:4/3; }
  .work-progress,.work-hint{ display:none; }
  .logo-orbit,.logo-fx::before{ display:none; }
}