/* =================================================================
   MediaVTour — homepage
   Palette: deep burgundy ground, "vino chiaro" mauve highlight
   ================================================================= */

:root{
  --bg:        #170910;
  --bg-1:      #1e0d17;
  --bg-2:      #29121f;
  --ink:       #f7edf0;
  --ink-dim:   #dcc2cd;
  --muted:     #a98a97;
  --line:      rgba(240,210,222,.12);
  --line-2:    rgba(240,210,222,.22);

  --wine:      #7c1f3f;
  --wine-2:    #a62c56;
  --mauve:     #cf85a6;   /* violaceo / vino chiaro */
  --rose:      #ecb0cc;
  --glow:      #ff86b2;

  --grad:      linear-gradient(120deg,#7c1f3f 0%,#cf85a6 55%,#ecb0cc 100%);
  --grad-soft: linear-gradient(120deg,rgba(124,31,63,.9),rgba(207,133,166,.85));

  --radius:    20px;
  --radius-sm: 12px;
  --pad:       clamp(20px,5vw,88px);
  --maxw:      1280px;

  --ease:      cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);

  --fs-hero:   clamp(2.9rem,8.6vw,8.4rem);
  --fs-h2:     clamp(2rem,4.8vw,4.3rem);
  --fs-h3:     clamp(1.25rem,2.3vw,1.9rem);
  --fs-lead:   clamp(1.02rem,1.5vw,1.28rem);

  --nav-h:     78px;
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }   /* deve battere i display: delle classi (es. .quote-form__success) */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;      /* fallback */
  overflow-x:clip;        /* doesn't create a scroll container -> keeps position:sticky intact */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body::before{ /* ambient light field */
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(60vw 60vw at 12% -8%, rgba(166,44,86,.28), transparent 60%),
    radial-gradient(50vw 50vw at 100% 8%, rgba(207,133,166,.18), transparent 60%),
    radial-gradient(70vw 55vw at 50% 118%, rgba(124,31,63,.26), transparent 62%);
  pointer-events:none;
  z-index:0;
}

img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }
ul{ list-style:none; }
::selection{ background:var(--mauve); color:#1a0a12; }

h1,h2,h3,h4{
  font-family:"Fraunces", Georgia, "Times New Roman", serif;
  font-weight:360;
  line-height:1.02;
  letter-spacing:-.02em;
  font-variation-settings:"opsz" 144, "SOFT" 40, "WONK" 1;
}
em{ font-style:italic; font-variation-settings:"opsz" 144, "SOFT" 60, "WONK" 1; color:var(--rose); }

main{ position:relative; z-index:1; }

/* ---------------------------------------------------------------- utilities */
.eyebrow{
  font-size:.74rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--mauve); font-weight:500;
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:currentColor; opacity:.6;
}

.dot{ width:8px; height:8px; border-radius:50%; background:var(--glow); box-shadow:0 0 14px var(--glow); display:inline-block; }

.skip-link{
  position:fixed; top:8px; left:8px; z-index:999;
  background:var(--ink); color:#1a0a12; padding:10px 16px; border-radius:8px;
  transform:translateY(-160%); transition:transform .2s;
}
.skip-link:focus{ transform:none; }

.hp{ position:absolute!important; left:-9999px!important; width:1px; height:1px; opacity:0; }

/* ---------------------------------------------------------------- buttons */
.btn{
  --bh:56px;
  position:relative; display:inline-flex; align-items:center; gap:.65em;
  height:var(--bh); padding:0 1.6rem; border-radius:999px;
  font-size:.92rem; font-weight:500; letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; isolation:isolate;
  transition:transform .35s var(--ease), color .3s, box-shadow .4s;
}
.btn svg{ position:relative; z-index:2; transition:transform .35s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }
.btn__play{ font-size:.7em; }

.btn--solid{ background:var(--grad); color:#20090f; box-shadow:0 10px 40px -12px rgba(236,176,204,.55); }
.btn--solid::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg,#ecb0cc,#fff 50%,#ecb0cc);
  opacity:0; transition:opacity .4s var(--ease);
}
.btn--solid:hover{ box-shadow:0 18px 60px -14px rgba(236,176,204,.75); transform:translateY(-2px); }
.btn--solid:hover::before{ opacity:1; }

.btn--ghost{ border:1px solid var(--line-2); color:var(--ink); }
.btn--ghost::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--ink);
  transform:translateY(101%); transition:transform .45s var(--ease);
}
.btn--ghost:hover{ color:#1a0a12; border-color:transparent; }
.btn--ghost:hover::before{ transform:none; }

.btn--pill{
  height:44px; padding:0 1.15rem; font-size:.82rem;
  border:1px solid var(--line-2);
}
.btn--pill::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--grad);
  transform:scale(.4); opacity:0; border-radius:inherit;
  transition:transform .45s var(--ease), opacity .4s;
}
.btn--pill:hover{ color:#1a0a12; border-color:transparent; }
.btn--pill:hover::before{ transform:none; opacity:1; }

.btn--block{ width:100%; justify-content:center; height:60px; }

/* ---------------------------------------------------------------- grain */
.grain{
  position:fixed; inset:-50%; z-index:60; pointer-events:none;
  opacity:.045; mix-blend-mode:overlay;
  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='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(5) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0) }
  20%{ transform:translate(-4%,3%) }
  40%{ transform:translate(3%,-4%) }
  60%{ transform:translate(-2%,-2%) }
  80%{ transform:translate(4%,2%) }
}

/* ---------------------------------------------------------------- preloader */
.preloader{
  position:fixed; inset:0; z-index:200;
  background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2rem;
  transition:transform .9s var(--ease), opacity .4s .6s;
}
.preloader.is-done{ transform:translateY(-101%); pointer-events:none; }
.preloader__inner{
  display:flex; align-items:baseline; gap:1rem;
  font-family:"Fraunces", serif; font-size:clamp(1.6rem,5vw,3rem);
}
.preloader__word{ letter-spacing:-.03em; }
.preloader__count{ color:var(--mauve); font-feature-settings:"tnum"; font-size:.7em; }
.preloader__bar{
  width:min(280px,60vw); height:2px; background:var(--line); overflow:hidden;
}
.preloader__bar span{
  display:block; height:100%; width:0%;
  background:var(--grad);
}
.brand__v{ color:var(--mauve); font-style:italic; }

/* ---------------------------------------------------------------- cursor */
.cursor{ position:fixed; inset:0; z-index:150; pointer-events:none; display:none; }
@media (pointer:fine){ .cursor{ display:block; } body.has-cursor{ cursor:none; } body.has-cursor a,body.has-cursor button{ cursor:none; } }
.cursor__ring,.cursor__dot{
  position:absolute; top:0; left:0; border-radius:50%;
  transform:translate(-50%,-50%);
  will-change:transform;
}
.cursor__ring{
  width:38px; height:38px; border:1px solid var(--rose);
  transition:width .3s var(--ease), height .3s var(--ease), background .3s, border-color .3s, opacity .3s;
}
.cursor__dot{ width:5px; height:5px; background:var(--rose); }
.cursor__label{
  position:absolute; top:0; left:0; transform:translate(-50%,-50%);
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:#1a0a12; opacity:0; transition:opacity .3s; white-space:nowrap;
}
.cursor.is-hover .cursor__ring{ width:64px; height:64px; background:rgba(236,176,204,.16); }
.cursor.is-cta .cursor__ring{ width:82px; height:82px; background:var(--rose); border-color:transparent; }
.cursor.is-cta .cursor__label{ opacity:1; }
.cursor.is-cta .cursor__dot{ opacity:0; }
.cursor.is-hidden{ opacity:0; }
.cursor.is-down .cursor__ring{ width:26px; height:26px; }

/* ---------------------------------------------------------------- scroll progress */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:120;
  background:var(--line);
}
.scroll-progress span{
  display:block; height:100%; width:0%;
  background:var(--grad); box-shadow:0 0 12px var(--glow);
}

/* ---------------------------------------------------------------- header */
.site-head{
  position:fixed; top:0; left:0; right:0; z-index:110;
  padding:1rem var(--pad);
  transition:padding .4s var(--ease), background .4s, backdrop-filter .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
.site-head.is-stuck{
  padding:.55rem var(--pad);
  background:rgba(23,9,16,.72);
  backdrop-filter:blur(14px) saturate(1.4);
  border-color:var(--line);
}
.site-head.is-hidden{ transform:translateY(-100%); }
.site-head__inner{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.brand{ display:inline-flex; align-items:center; gap:.6rem; font-family:"Fraunces",serif; font-size:1.25rem; letter-spacing:-.02em; }
.brand__mark{ display:inline-flex; width:42px; height:42px; flex:none; }
.brand__mark img{ width:100%; height:100%; object-fit:contain; image-rendering:-webkit-optimize-contrast; animation:brand-spin 14s linear infinite; }
@keyframes brand-spin{ to{ transform:rotate(360deg); } }
.brand__word{ font-weight:400; }

.site-nav{ display:flex; gap:2rem; }
.site-nav a{
  position:relative; font-size:.86rem; letter-spacing:.02em; color:var(--ink-dim);
  padding:.3rem 0; transition:color .3s;
}
.site-nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--mauve); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.site-nav a:hover,.site-nav a.is-current{ color:var(--ink); }
.site-nav a:hover::after,.site-nav a.is-current::after{ transform:scaleX(1); transform-origin:left; }

.site-head__actions{ display:flex; align-items:center; gap:1rem; }

.menu-toggle{ display:none; align-items:center; gap:.6rem; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; }
.menu-toggle__bars{ display:flex; flex-direction:column; gap:5px; width:24px; }
.menu-toggle__bars i{ height:1.5px; background:var(--ink); transition:transform .35s var(--ease), opacity .3s; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:first-child{ transform:translateY(3.25px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

body.menu-open{ overflow:hidden; }

/* ---------------------------------------------------------------- overlay menu */
.overlay-menu{ position:fixed; inset:0; z-index:105; display:flex; }
.overlay-menu[hidden]{ display:none; }
.overlay-menu__bg{
  position:absolute; inset:0; background:var(--bg-2);
  clip-path:circle(0% at calc(100% - 60px) 46px);
  transition:clip-path .7s var(--ease);
}
.overlay-menu.is-open .overlay-menu__bg{ clip-path:circle(150% at calc(100% - 60px) 46px); }
.overlay-menu__inner{
  position:relative; margin:auto; width:min(var(--maxw),100%); padding:var(--nav-h) var(--pad) var(--pad);
  display:flex; flex-direction:column; justify-content:center; gap:2rem;
  opacity:0; transition:opacity .3s .1s;
}
.overlay-menu.is-open .overlay-menu__inner{ opacity:1; }
.overlay-menu__eyebrow{ font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--mauve); }
.overlay-menu__nav{ display:flex; flex-direction:column; }
.overlay-menu__nav a{
  display:flex; align-items:baseline; gap:1.2rem; padding:.6rem 0;
  border-bottom:1px solid var(--line);
  font-family:"Fraunces",serif; font-size:clamp(2.2rem,9vw,5.5rem); line-height:1.05;
  opacity:0; transform:translateY(40px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s;
  transition-delay:calc(var(--i) * .06s);
}
.overlay-menu.is-open .overlay-menu__nav a{ opacity:1; transform:none; }
.overlay-menu__nav a:hover{ color:var(--mauve); }
.overlay-menu__index{ font-family:"Space Grotesk",sans-serif; font-size:.9rem; color:var(--muted); }
.overlay-menu__foot{ display:flex; flex-wrap:wrap; gap:1.6rem; color:var(--ink-dim); font-size:.9rem; }
.overlay-menu__foot a:hover{ color:var(--mauve); }

/* ---------------------------------------------------------------- HERO */
.hero{
  position:relative;
  min-height:100vh;            /* fallback */
  min-height:100svh;
  padding:calc(var(--nav-h) + 6vh) var(--pad) 8vh;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
}
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.9; }
.hero__glow{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(40vw 40vw at 70% 30%, rgba(236,176,204,.14), transparent 70%);
}
/* content sits ABOVE the decorative floating card */
.hero__inner{ position:relative; z-index:3; max-width:var(--maxw); margin:0 auto; width:100%; }

.hero__eyebrow{
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim);
  padding:.5rem .9rem; border:1px solid var(--line); border-radius:999px;
  background:rgba(23,9,16,.4); backdrop-filter:blur(6px);
}
.hero__title{
  font-size:var(--fs-hero); margin:1.6rem 0 0; max-width:16ch;
}
.hero__lead{
  margin-top:1.8rem; max-width:52ch; font-size:var(--fs-lead); color:var(--ink-dim);
}
.hero__actions{ margin-top:2.4rem; display:flex; flex-wrap:wrap; gap:1rem; }
.hero__trust{
  margin-top:3.2rem; display:flex; flex-wrap:wrap; gap:1.4rem 2.4rem;
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.hero__trust span{ position:relative; padding-left:1.1rem; }
.hero__trust span::before{ content:""; position:absolute; left:0; top:.45em; width:5px; height:5px; border-radius:50%; background:var(--mauve); }

/* [data-float] layers are moved by JS via --fx/--fy so CSS keeps full
   control of the base transform (centering etc.) */
[data-float]{ transform:translate3d(var(--fx,0px), var(--fy,0px), 0); }

/* ---- 360° panorama: full-bleed, automatic camera move ----
   The equirectangular image tiles seamlessly on X, so a strip of it
   slides forever = a continuous turn around the room (no WebGL). */
.hero__pano{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:var(--bg) var(--poster) center/cover no-repeat;
}
.hero__pano.is-live{ background-image:none; }
.hero__pano-layer{
  position:absolute; inset:0; opacity:0; visibility:hidden; transform-origin:50% 50%;
  transition:opacity 1.8s var(--ease), visibility 0s linear 1.8s; will-change:opacity,transform;
}
.hero__pano-layer.is-on{ opacity:1; visibility:visible; transition:opacity 1.8s var(--ease); }
.hero__pano-strip{
  position:absolute; left:0; top:0;
  background-repeat:repeat-x; background-position:0 0;
  will-change:transform;
}

/* brand tint over the photo */
.hero .hero__canvas{ z-index:1; opacity:.45; mix-blend-mode:soft-light; pointer-events:none; }
/* legibility: dark from the text side, fade into the page at the bottom */
.hero__shade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(23,9,16,.88) 0%, rgba(23,9,16,.62) 38%, rgba(23,9,16,.12) 72%, rgba(23,9,16,.28) 100%),
    linear-gradient(180deg, rgba(23,9,16,.55) 0%, transparent 22%, transparent 70%, var(--bg) 100%),
    radial-gradient(120% 90% at 65% 45%, transparent 55%, rgba(23,9,16,.6) 100%);
  opacity:var(--shade,1);
}
.hero .hero__glow{ z-index:1; }
.hero__title{ text-shadow:0 2px 40px rgba(23,9,16,.55); }
.hero__lead{ color:var(--ink); opacity:.86; text-shadow:0 1px 18px rgba(23,9,16,.7); }

/* HUD */
.hero__hud{
  position:absolute; right:var(--pad); bottom:3vh; z-index:3;
  display:grid; grid-template-columns:auto auto; align-items:center; gap:.55rem 1.4rem;
  min-width:260px; padding:1rem 1.2rem;
  border:1px solid var(--line-2); border-radius:var(--radius);
  background:rgba(23,9,16,.42); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  font-size:.74rem; color:var(--ink-dim); pointer-events:none;
}
.hero__hud-live{ display:flex; align-items:center; gap:.45rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); font-size:.66rem; }
.hero__hud-live i{ width:7px; height:7px; border-radius:50%; background:var(--glow); box-shadow:0 0 10px var(--glow); animation:pulse 1.6s infinite; }
@keyframes pulse{ 50%{ opacity:.25; } }
.hero__hud-scene{ display:flex; justify-content:flex-end; gap:.8rem; align-items:baseline; }
.hero__hud-scene b{ font-family:"Fraunces",serif; font-style:italic; font-weight:400; font-size:1rem; color:var(--ink); }
.hero__hud-scene span{ font-variant-numeric:tabular-nums; letter-spacing:.08em; }
.hero__hud-bar{ grid-column:1 / -1; height:2px; background:var(--line); border-radius:2px; overflow:hidden; }
.hero__hud-bar span{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--mauve),var(--rose)); }

/* ---- hero hotspots: pinned to the panorama by JS (--x/--y) ---- */
.hero__spots{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.hero__spots-set{ position:absolute; inset:0; opacity:0; transition:opacity 1.2s var(--ease); }
.hero__spots-set.is-on{ opacity:1; transition-delay:.6s; }
.hspot{
  position:absolute; left:0; top:0; width:0; height:0;
  transform:translate3d(var(--x,-999px),var(--y,-999px),0);
}
.hspot.is-off{ visibility:hidden; }
.hspot__dot{
  position:absolute; left:-17px; top:-17px; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(23,9,16,.55); border:1.5px solid rgba(255,255,255,.85);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 4px 18px rgba(0,0,0,.35);
  transition:transform .45s var(--ease), background .3s, border-color .3s;
}
.hspot__dot svg{ width:16px; height:16px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.hspot--go .hspot__dot{ background:rgba(207,133,166,.55); }
.hspot__ring{
  position:absolute; left:-17px; top:-17px; width:34px; height:34px; border-radius:50%;
  border:1.5px solid var(--rose); animation:hspot-ping 2.4s var(--ease) infinite;
}
.hspot:nth-child(2n) .hspot__ring{ animation-delay:.8s; }
.hspot:nth-child(3n) .hspot__ring{ animation-delay:1.6s; }
@keyframes hspot-ping{ 0%{ transform:scale(1); opacity:.9; } 100%{ transform:scale(2.3); opacity:0; } }
.hspot__label{
  position:absolute; left:24px; top:-14px; white-space:nowrap;
  padding:.38rem .7rem; border-radius:999px; font-size:.74rem; letter-spacing:.04em; color:var(--ink);
  background:rgba(23,9,16,.62); border:1px solid var(--line-2);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; transform:translateX(-6px); transition:opacity .35s var(--ease), transform .45s var(--ease);
}
.hspot.is-left .hspot__label{ left:auto; right:24px; transform:translateX(6px); }
.hspot.is-hover .hspot__dot{ transform:scale(1.22); background:var(--mauve); border-color:#fff; }
.hspot.is-hover .hspot__label{ opacity:1; transform:none; }
.hspot.is-press .hspot__dot{ transform:scale(.88); transition-duration:.12s; }
.hspot.is-open .hspot__label{ opacity:0; }
.hspot__card{
  position:absolute; left:-120px; bottom:30px; width:240px;
  border-radius:var(--radius-sm); overflow:hidden;
  background:rgba(23,9,16,.78); border:1px solid var(--line-2);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  opacity:0; transform:translateY(10px) scale(.94); transform-origin:50% 100%;
  transition:opacity .35s var(--ease), transform .55s var(--ease);
}
.hspot.is-left .hspot__card{ left:auto; right:-30px; transform-origin:85% 100%; }
.hspot.is-right .hspot__card{ left:-30px; transform-origin:15% 100%; }
.hspot.is-open .hspot__card{ opacity:1; transform:none; }
.hspot__thumb{ height:96px; background-repeat:no-repeat; }
.hspot__body{ padding:.75rem .9rem .85rem; }
.hspot__body b{ display:block; font-family:"Fraunces",serif; font-weight:400; font-size:1rem; color:var(--ink); }
.hspot__body p{ margin:.2rem 0 0; font-size:.78rem; line-height:1.4; color:var(--ink-dim); }
.hspot__tag{ display:inline-block; margin-bottom:.35rem; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--rose); }

/* simulated visitor driving the tour */
.hero__op{
  position:absolute; left:0; top:0; z-index:4; pointer-events:none;
  transform:translate3d(var(--x,-100px),var(--y,-100px),0);
  opacity:0; transition:opacity .5s var(--ease);
}
.hero__op.is-on{ opacity:1; }
.hero__op svg{ position:absolute; left:-4px; top:-2px; filter:drop-shadow(0 3px 6px rgba(0,0,0,.45)); transition:transform .15s; }
.hero__op-grab{ left:-12px !important; top:-12px !important; opacity:0; }
.hero__op.is-grab .hero__op-arrow{ opacity:0; }
.hero__op.is-grab .hero__op-grab{ opacity:1; }
.hero__op.is-down svg{ transform:scale(.86); }
.hero__op-ripple{
  position:absolute; left:-22px; top:-22px; width:44px; height:44px; border-radius:50%;
  border:2px solid #fff; opacity:0;
}
.hero__op.is-click .hero__op-ripple{ animation:op-ripple .6s var(--ease); }
@keyframes op-ripple{ 0%{ transform:scale(.3); opacity:.9; } 100%{ transform:scale(1.5); opacity:0; } }

/* kept: badge also used on work cards */
.tour-card__badge{
  position:absolute; top:14px; left:14px; padding:.35rem .6rem; border-radius:8px;
  font-size:.72rem; letter-spacing:.1em; background:var(--ink); color:#1a0a12; font-weight:600;
}

.hero__scroll{
  position:absolute; left:var(--pad); bottom:3vh; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
}
.hero__scroll-line{ width:1px; height:52px; background:linear-gradient(var(--mauve),transparent); position:relative; overflow:hidden; }
.hero__scroll-line::after{ content:""; position:absolute; top:0; left:0; width:100%; height:50%; background:var(--rose); transform:translateY(-100%); animation:scrolldown 1.8s var(--ease) infinite; }
@keyframes scrolldown{ to{ transform:translateY(200%); } }

/* ---------------------------------------------------------------- marquee */
.marquee{
  border-block:1px solid var(--line);
  padding:1.1rem 0; overflow:hidden; white-space:nowrap;
  background:var(--bg-1);
}
.marquee__track{ display:inline-flex; align-items:center; gap:2.5rem; animation:marquee 34s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__item{ font-family:"Fraunces",serif; font-size:clamp(1.3rem,3vw,2.4rem); color:var(--ink-dim); }
.marquee__sep{ color:var(--mauve); font-size:1rem; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---------------------------------------------------------------- section rhythm */
section{ position:relative; }
.manifesto,.works,.stats,.method,.studio,.quotes,.faq{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(80px,12vw,180px) var(--pad);
}

/* ---------------------------------------------------------------- manifesto */
.manifesto__grid{ display:grid; grid-template-columns:1.4fr .9fr; gap:clamp(2rem,6vw,6rem); align-items:center; }
.manifesto__statement{ font-size:var(--fs-h2); margin:1.4rem 0 2rem; }
.manifesto__aside p{ color:var(--ink-dim); max-width:44ch; }
.tick-list{ margin-top:1.4rem; display:grid; gap:.7rem; }
.tick-list li{ position:relative; padding-left:1.8rem; color:var(--ink); font-size:.98rem; }
.tick-list li::before{
  content:""; position:absolute; left:0; top:.15em; width:14px; height:14px; border-radius:50%;
  border:1px solid var(--mauve);
}
.tick-list li::after{ content:""; position:absolute; left:5px; top:calc(.15em + 5px); width:4px; height:4px; border-radius:50%; background:var(--mauve); }
.manifesto__figure{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5; border:1px solid var(--line); }
.manifesto__figure{ background:var(--bg-1); }
.manifesto__figure .poster{ position:absolute; left:0; top:-6%; width:100%; height:112%; object-fit:cover; object-position:50% 50%; display:block; }
/* ---- manifesto: looping demo of a point-of-interest interaction ----
   One 9s timeline shared by every piece; transform/opacity only, and it
   runs only while the figure is on screen (.is-play set by JS). */
.mf-demo{ position:absolute; inset:0; z-index:1; pointer-events:none; --t:9s; }
.mf-demo *{ animation-duration:var(--t); animation-iteration-count:infinite; animation-play-state:paused; }
.mf-demo.is-play *{ animation-play-state:running; }
.mf-demo__spot{ position:absolute; left:var(--x); top:var(--y); width:0; height:0; }
.mf-demo__ring,.mf-demo__dot{ position:absolute; left:-16px; top:-16px; width:32px; height:32px; border-radius:50%; }
.mf-demo__ring{ border:1.5px solid var(--rose); animation:hspot-ping 2.4s var(--ease) infinite; }
.mf-demo__dot{
  display:grid; place-items:center;
  background:rgba(23,9,16,.6); border:1.5px solid rgba(255,255,255,.85);
  box-shadow:0 4px 18px rgba(0,0,0,.35);
  animation-name:mf-dot; animation-timing-function:var(--ease);
}
.mf-demo__dot svg{ width:15px; height:15px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; }
.mf-demo__card{
  position:absolute; right:-34px; bottom:26px; width:min(212px,62vw);
  display:flex; flex-direction:column; gap:.3rem; padding:.85rem .95rem;
  border-radius:var(--radius-sm); border:1px solid var(--line-2);
  background:rgba(23,9,16,.88); box-shadow:0 18px 50px rgba(0,0,0,.45);
  font-size:.74rem; line-height:1.4; color:var(--ink-dim); text-align:left;
  transform-origin:84% 100%; opacity:0;
  animation-name:mf-card; animation-timing-function:var(--ease);
}
.mf-demo__card b{ font-family:"Fraunces",serif; font-weight:400; font-size:1rem; color:var(--ink); }
.mf-demo__tag{ font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--rose); }
.mf-demo__cta{
  margin-top:.35rem; align-self:flex-start; padding:.38rem .7rem; border-radius:999px;
  background:var(--ink); color:#1a0a12; font-weight:600; font-size:.7rem;
  animation-name:mf-cta;
}
/* the "operator": full-size layer, so translate % = % of the figure */
.mf-demo__op{ position:absolute; inset:0; opacity:0; animation-name:mf-op; animation-timing-function:cubic-bezier(.6,0,.2,1); }
.mf-demo__hand{ position:absolute; left:-5px; top:-3px; width:24px; height:24px; }
.mf-demo__hand svg{ display:block; filter:drop-shadow(0 3px 6px rgba(0,0,0,.45)); transform-origin:5px 3px; animation-name:mf-press; }
.mf-demo__ripple{
  position:absolute; left:-13px; top:-15px; width:36px; height:36px; border-radius:50%;
  border:2px solid #fff; opacity:0; animation-name:mf-ripple;
}
@keyframes mf-op{
  0%  { transform:translate(96%,104%); opacity:0; }
  6%  { opacity:1; }
  26% { transform:translate(68%,58%); }
  44% { transform:translate(68%,58%); }
  56% { transform:translate(calc(68% - 110px),calc(58% - 50px)); }
  74% { transform:translate(calc(68% - 110px),calc(58% - 50px)); opacity:1; }
  92%,100% { transform:translate(26%,104%); opacity:0; }
}
@keyframes mf-press{
  0%,28%,33%,58%,63%,100%{ transform:none; }
  30%,60%{ transform:scale(.82); }
}
@keyframes mf-ripple{
  0%,28.5%{ transform:scale(.3); opacity:0; }
  29%{ opacity:.9; }
  36%,58.5%{ transform:scale(1.5); opacity:0; }
  59%{ transform:scale(.3); opacity:.9; }
  66%,100%{ transform:scale(1.5); opacity:0; }
}
@keyframes mf-dot{
  0%,22%{ transform:none; background:rgba(23,9,16,.6); }
  26%,76%{ transform:scale(1.2); background:var(--mauve); }
  30%{ transform:scale(.9); }
  34%{ transform:scale(1.2); }
  82%,100%{ transform:none; background:rgba(23,9,16,.6); }
}
@keyframes mf-card{
  0%,30%{ opacity:0; transform:translateY(10px) scale(.92); }
  36%,80%{ opacity:1; transform:none; }
  86%,100%{ opacity:0; transform:translateY(10px) scale(.92); }
}
@keyframes mf-cta{
  0%,58%{ transform:none; box-shadow:0 0 0 0 rgba(236,176,204,0); }
  60%{ transform:scale(.94); }
  64%{ transform:none; box-shadow:0 0 0 6px rgba(236,176,204,.35); }
  76%,100%{ box-shadow:0 0 0 12px rgba(236,176,204,0); }
}
@media (prefers-reduced-motion: reduce){
  .mf-demo__card{ opacity:1; transform:none; }
  .mf-demo__op{ display:none; }
}
.manifesto__figure figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:1rem 1.2rem;
  font-size:.76rem; letter-spacing:.06em; color:var(--ink-dim);
  background:linear-gradient(transparent,rgba(23,9,16,.85));
}

/* ---------------------------------------------------------------- services (horizontal) */
.services{ position:relative; }
.services__pin{
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--nav-h) + 4vh) 0 6vh; gap:2.5rem;
}
.services__head{ padding-inline:var(--pad); max-width:var(--maxw); margin:0 auto; width:100%; }
.services__title{ font-size:var(--fs-h2); margin-top:1rem; }
.services__hint{ margin-top:1rem; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.services__track{
  display:flex; gap:1.5rem; padding-inline:var(--pad); will-change:transform;
  /* native fallback: if JS pinning is off (reduced-motion, small screens,
     script error) the cards stay reachable by swipe/scroll */
  overflow-x:auto; scroll-snap-type:x proximity;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.services__track::-webkit-scrollbar{ display:none; }
.service{
  flex:0 0 min(360px,80vw);
  display:flex; flex-direction:column;
  padding:2rem; border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(160deg,var(--bg-1),var(--bg));
  transition:border-color .4s, transform .4s var(--ease), background .4s;
  scroll-snap-align:start;
}
.service:hover{ border-color:var(--line-2); background:linear-gradient(160deg,var(--bg-2),var(--bg-1)); }
.service__index{ font-family:"Fraunces",serif; font-size:1.1rem; color:var(--mauve); }
.service__title{ font-size:var(--fs-h3); margin:1.4rem 0 .8rem; }
.service__desc{ color:var(--ink-dim); font-size:.96rem; flex:1; }
.service__tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.6rem; }
.service__tags li{ font-size:.72rem; letter-spacing:.06em; padding:.3rem .6rem; border:1px solid var(--line); border-radius:999px; color:var(--muted); }
.service__arrow{ margin-top:1.4rem; font-size:1.2rem; color:var(--mauve); transition:transform .4s var(--ease); }
.service:hover .service__arrow{ transform:translate(4px,-4px); }
.service--cta{ background:var(--grad-soft); color:#1e0910; justify-content:center; gap:1rem; }
.service--cta .service__title,.service--cta .service__desc{ color:#22070e; }
.service--cta .btn{ align-self:flex-start; }

/* ---------------------------------------------------------------- works */
.works__head{ display:grid; gap:1.4rem; margin-bottom:3.5rem; }
.works__title{ font-size:var(--fs-h2); }
.works__filters{ display:flex; flex-wrap:wrap; gap:.6rem; }
.chip{
  padding:.5rem 1rem; border:1px solid var(--line); border-radius:999px;
  font-size:.82rem; color:var(--ink-dim); transition:all .3s var(--ease);
}
.chip:hover{ border-color:var(--line-2); color:var(--ink); }
.chip.is-active{ background:var(--ink); color:#1a0a12; border-color:transparent; }

.works__grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1rem,2.4vw,2rem); }
.work{ grid-column:span 6; transition:opacity .5s var(--ease), filter .5s, transform .5s var(--ease); }
.work:nth-child(3n-1){ margin-top:clamp(1rem,6vw,5rem); }
.work.is-dim{ opacity:.12; filter:grayscale(1); }
.work.is-hide{ display:none; }
.work__link{ display:block; }
.work__media{
  position:relative; display:block; aspect-ratio:16/11; overflow:hidden;
  border-radius:var(--radius); border:1px solid var(--line);
}
.work__media .poster{ width:100%; height:100%; transition:transform .8s var(--ease); }
.work__media img.poster{ object-fit:cover; display:block; }
.work__link:hover .poster{ transform:scale(1.06); }
.work__media.is-distort{ filter:url(#mvt-distort); }
.work__meta{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-top:1rem; }
.work__name{ font-family:"Fraunces",serif; font-size:1.3rem; }
.work__info{ font-size:.78rem; color:var(--muted); letter-spacing:.04em; text-align:right; }

.demo-card{
  display:grid; grid-template-columns:1.15fr 1fr; margin-top:clamp(3rem,7vw,6rem);
  border:1px solid var(--line-2); border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(135deg,var(--bg-2),var(--bg-1));
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.demo-card:hover{ border-color:var(--mauve); box-shadow:0 30px 80px -30px rgba(207,133,166,.45); }
.demo-card__media{ position:relative; display:block; min-height:280px; overflow:hidden; }
.demo-card__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.demo-card:hover .demo-card__media img{ transform:scale(1.05); }
.demo-card__body{ display:flex; flex-direction:column; align-items:flex-start; gap:1.1rem; padding:clamp(1.6rem,4vw,3.2rem); }
.demo-card__title{ font-family:"Fraunces",serif; font-size:var(--fs-h3); line-height:1.15; }
.demo-card__desc{ color:var(--ink-dim); }
.demo-card__tags{ display:flex; flex-wrap:wrap; gap:.5rem; }
.demo-card__cta{ margin-top:.4rem; }

/* ---------------------------------------------------------------- stats */
.stats{ text-align:center; }
.stats__grid{ margin-top:3rem; display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.stat{ display:grid; gap:.6rem; padding:2rem 1rem; border-left:1px solid var(--line); }
.stat:first-child{ border-left:0; }
.stat__value{
  font-family:"Fraunces",serif; font-size:clamp(2.6rem,6vw,4.6rem); line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  font-feature-settings:"tnum";
}
.stat__label{ font-size:.82rem; color:var(--muted); letter-spacing:.04em; }

/* ---------------------------------------------------------------- method */
.method__grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,6vw,6rem); }
.method__intro{ position:sticky; top:calc(var(--nav-h) + 4vh); align-self:start; }
.method__title{ font-size:var(--fs-h2); margin:1rem 0 1.4rem; }
.method__intro p{ color:var(--ink-dim); max-width:36ch; }
.method__steps{ display:grid; gap:1.2rem; }
.step{
  display:flex; gap:1.6rem; padding:2rem; border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(160deg,var(--bg-1),var(--bg));
  position:sticky; top:calc(var(--nav-h) + 10vh);
}
.step:nth-child(2){ top:calc(var(--nav-h) + 12vh); }
.step:nth-child(3){ top:calc(var(--nav-h) + 14vh); }
.step:nth-child(4){ top:calc(var(--nav-h) + 16vh); }
.step__index{ font-family:"Fraunces",serif; font-size:1.6rem; color:var(--mauve); }
.step__title{ font-size:var(--fs-h3); margin-bottom:.6rem; }
.step__desc{ color:var(--ink-dim); font-size:.96rem; }

/* ---------------------------------------------------------------- studio */
.studio__head{ max-width:36ch; margin-bottom:3.5rem; }
.studio__title{ font-size:var(--fs-h2); margin-top:1rem; }
.studio__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.reason{ padding:1.8rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-1); transition:transform .4s var(--ease), border-color .4s; }
.reason:hover{ transform:translateY(-6px); border-color:var(--line-2); }
.reason__num{ font-family:"Fraunces",serif; color:var(--mauve); font-size:1.1rem; }
.reason__title{ font-size:1.15rem; margin:1rem 0 .6rem; }
.reason__desc{ font-size:.9rem; color:var(--ink-dim); }

/* ---------------------------------------------------------------- quotes */
.quotes__viewport{ overflow:hidden; }
.quotes__track{ display:flex; transition:transform .7s var(--ease); }
.quote{ flex:0 0 100%; text-align:center; padding:0 clamp(0px,6vw,90px); }
.quote blockquote{
  font-family:"Fraunces",serif; font-size:clamp(1.5rem,3.6vw,2.8rem); line-height:1.22; letter-spacing:-.01em;
}
.quote figcaption{ margin-top:1.8rem; display:flex; flex-direction:column; gap:.2rem; font-size:.86rem; }
.quote figcaption span{ color:var(--ink); letter-spacing:.1em; text-transform:uppercase; }
.quote figcaption em{ color:var(--muted); }
.quotes__nav{ margin-top:2.6rem; display:flex; align-items:center; justify-content:center; gap:1.4rem; }
.quotes__nav button{ width:44px; height:44px; border:1px solid var(--line-2); border-radius:50%; transition:background .3s,color .3s; }
.quotes__nav button:hover{ background:var(--ink); color:#1a0a12; }
.quotes__dots{ display:flex; gap:.5rem; }
.quotes__dots button{ width:8px; height:8px; padding:0; border-radius:50%; border:0; background:var(--line-2); }
.quotes__dots button.is-active{ background:var(--mauve); width:24px; border-radius:4px; }

/* ---------------------------------------------------------------- faq */
.faq__grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,6vw,6rem); align-items:start; }
.faq__head{ position:sticky; top:calc(var(--nav-h) + 4vh); }
.faq__title{ font-size:var(--fs-h2); margin:1rem 0 1.4rem; }
.faq__head p{ color:var(--ink-dim); max-width:32ch; }
.faq__head a{ color:var(--mauve); text-decoration:underline; text-underline-offset:3px; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item:first-child{ border-top:1px solid var(--line); }
.faq-item__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.5rem 0; text-align:left; font-family:"Fraunces",serif; font-size:clamp(1.05rem,1.8vw,1.4rem);
  color:var(--ink-dim); transition:color .3s;
}
.faq-item__q:hover,.faq-item__q[aria-expanded="true"]{ color:var(--ink); }
.faq-item__icon{ position:relative; flex:0 0 18px; width:18px; height:18px; }
.faq-item__icon::before,.faq-item__icon::after{
  content:""; position:absolute; inset:50% 0 auto 0; height:1.5px; background:var(--mauve);
  transform:translateY(-50%); transition:transform .35s var(--ease), opacity .3s;
}
.faq-item__icon::after{ transform:translateY(-50%) rotate(90deg); }
.faq-item__q[aria-expanded="true"] .faq-item__icon::after{ transform:translateY(-50%) rotate(0); opacity:0; }
.faq-item__a{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
.faq-item__a p{ padding-bottom:1.5rem; color:var(--muted); max-width:56ch; }

/* ---------------------------------------------------------------- CTA / form */
.cta{ position:relative; padding:clamp(80px,12vw,180px) var(--pad); overflow:hidden; }
.cta__bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(50vw 50vw at 15% 20%, rgba(166,44,86,.4), transparent 60%),
    radial-gradient(50vw 50vw at 90% 90%, rgba(207,133,166,.32), transparent 60%);
}
.cta__grid{
  position:relative; z-index:1; max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:start;
}
.cta__title{ font-size:var(--fs-h2); margin:1.2rem 0 1.8rem; }
.cta__bullets{ display:grid; gap:.9rem; }
.cta__bullets li{ display:flex; gap:.7rem; color:var(--ink-dim); }
.cta__bullets span{ color:var(--mauve); }
.cta__direct{ margin-top:2.4rem; display:flex; flex-direction:column; gap:.4rem; font-family:"Fraunces",serif; font-size:1.3rem; }
.cta__direct a:hover{ color:var(--mauve); }

.quote-form{
  border:1px solid var(--line-2); border-radius:var(--radius);
  background:rgba(23,9,16,.55); backdrop-filter:blur(12px);
  padding:clamp(1.5rem,4vw,2.5rem); display:grid; gap:1.2rem;
  position:relative;
}
.quote-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field{ position:relative; }
.field input,.field textarea{
  width:100%; padding:1.4rem 1rem .6rem; background:rgba(255,255,255,.03);
  border:1px solid var(--line); border-radius:var(--radius-sm); outline:none;
  transition:border-color .3s, background .3s;
  resize:vertical;
}
.field textarea{ min-height:96px; }
.field input:focus,.field textarea:focus{ border-color:var(--mauve); background:rgba(255,255,255,.06); }
.field label{
  position:absolute; left:1rem; top:1rem; font-size:.9rem; color:var(--muted);
  pointer-events:none; transition:transform .25s var(--ease), font-size .25s, color .25s;
}
.field label span{ font-size:.8em; opacity:.7; }
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label{
  transform:translateY(-11px); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mauve);
}
.field--area label{ top:1rem; }

.pills{ border:0; display:grid; gap:.7rem; }
.pills legend{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:.3rem; }
.pills{ grid-auto-flow:row; }
.pills > label.pill{ display:inline-flex; }
fieldset.pills{ display:flex; flex-wrap:wrap; gap:.6rem; }
.pill input{ position:absolute; opacity:0; }
.pill span{
  display:inline-block; padding:.5rem .95rem; border:1px solid var(--line); border-radius:999px;
  font-size:.82rem; color:var(--ink-dim); transition:all .3s var(--ease);
}
.pill input:checked + span{ background:var(--grad); color:#1e0910; border-color:transparent; }
.pill input:focus-visible + span{ outline:2px solid var(--mauve); outline-offset:2px; }

.range-field{ display:grid; gap:.7rem; }
.range-field__head{ display:flex; align-items:baseline; justify-content:space-between; }
.range-field__head label{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.range-field__head output{ font-family:"Fraunces",serif; color:var(--rose); font-size:1.05rem; }
input[type="range"]{
  -webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:3px;
  background:var(--line-2); outline:none;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--grad); cursor:grab; box-shadow:0 0 0 4px rgba(236,176,204,.2);
}
input[type="range"]::-moz-range-thumb{ width:20px; height:20px; border:0; border-radius:50%; background:#ecb0cc; cursor:grab; }
.range-field__scale{ display:flex; justify-content:space-between; font-size:.68rem; color:var(--muted); }

.consent{ display:flex; gap:.7rem; font-size:.82rem; color:var(--ink-dim); align-items:flex-start; }
.consent input{ margin-top:.2rem; accent-color:var(--mauve); width:16px; height:16px; }

.quote-form__note{ font-size:.82rem; min-height:1.2em; }
.quote-form__note.is-error{ color:#ff8fae; }
.quote-form__note.is-ok{ color:var(--mauve); }

.quote-form.is-sending{ opacity:.7; pointer-events:none; }
.quote-form__success{
  position:absolute; inset:0; z-index:2;
  background:rgba(23,9,16,.9); backdrop-filter:blur(8px);
  border-radius:var(--radius);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:1rem; padding:2rem; color:var(--rose);
}
.quote-form__success h3{ font-size:1.6rem; color:var(--ink); }
.quote-form__success p{ color:var(--ink-dim); max-width:34ch; }
.check-draw{ stroke-dasharray:44; stroke-dashoffset:44; }
.quote-form__success:not([hidden]) .check-draw{ animation:draw .7s var(--ease) .1s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

/* ---------------------------------------------------------------- footer */
.site-foot{
  border-top:1px solid var(--line);
  padding:clamp(60px,10vw,140px) var(--pad) 3rem;
  max-width:var(--maxw); margin:0 auto;
}
.site-foot__cta{ text-align:center; margin-bottom:clamp(3rem,8vw,7rem); }
.foot-word{
  display:inline-block; margin-top:1.2rem; font-family:"Fraunces",serif;
  font-size:clamp(3.5rem,16vw,12rem); line-height:.9; letter-spacing:-.03em;
}
.foot-word__arrow{ display:inline-block; font-size:.4em; vertical-align:super; color:var(--mauve); transition:transform .4s var(--ease); }
.foot-word:hover .foot-word__arrow{ transform:translate(8px,-8px); }
.site-foot__grid{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2rem;
  padding-block:3rem; border-top:1px solid var(--line);
}
.site-foot__brand .brand__word{ font-family:"Fraunces",serif; font-size:1.6rem; }
.site-foot__brand p{ margin-top:1rem; color:var(--ink-dim); max-width:34ch; font-size:.92rem; }
.site-foot__base{ color:var(--muted)!important; font-size:.8rem!important; margin-top:.4rem!important; }
.site-foot__col{ display:flex; flex-direction:column; gap:.6rem; }
.site-foot__col h4{ font-family:"Space Grotesk",sans-serif; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:500; margin-bottom:.4rem; }
.site-foot__col a{ color:var(--ink-dim); font-size:.92rem; transition:color .3s; }
.site-foot__col a:hover{ color:var(--mauve); }
.site-foot__col address{ font-style:normal; color:var(--muted); font-size:.86rem; line-height:1.5; margin-top:.2rem; }
.site-foot__bottom{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  padding-top:2rem; font-size:.78rem; color:var(--muted);
}
.site-foot__bottom a:hover{ color:var(--mauve); }

/* ---------------------------------------------------------------- work page (/lavori/{slug}/): tour esterno a tutto schermo */
.work-page{ height:100vh; height:100dvh; display:flex; flex-direction:column; overflow:hidden; }
.work-page__bar{
  display:flex; align-items:center; gap:clamp(.8rem,2vw,1.6rem);
  padding:.7rem clamp(.8rem,2.4vw,1.6rem); border-bottom:1px solid var(--line); background:var(--bg-1);
}
.work-page__bar .brand{ flex:none; }
.work-page__title{ flex:1; min-width:0; }
.work-page__title h1{ font-family:"Fraunces",serif; font-weight:400; font-size:clamp(1.05rem,2vw,1.4rem); line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.work-page__title p{ font-size:.76rem; color:var(--muted); letter-spacing:.04em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.work-page__actions{ flex:none; display:flex; gap:.6rem; }
.work-page__actions .btn{ padding:.6rem 1rem; font-size:.82rem; }
.work-page__frame{ position:relative; flex:1; background:#000; }
.work-page__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.work-page__loader{
  position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center;
  background:#000 center/cover no-repeat; pointer-events:none; transition:opacity .6s ease, visibility .6s;
}
.work-page__loader::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.45); }
.work-page__loader.is-done{ opacity:0; visibility:hidden; }
.work-page__loader-box{ position:relative; display:flex; flex-direction:column; align-items:center; gap:.9rem; color:#fff; font-size:.85rem; letter-spacing:.04em; }
.work-page__spinner{ width:42px; height:42px; border-radius:50%; border:3px solid rgba(255,255,255,.25); border-top-color:#fff; animation:work-spin .9s linear infinite; }
@keyframes work-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .work-page__spinner{ animation-duration:2.4s; } }
@media (max-width:720px){
  .work-page__bar .brand__word, .work-page__cta{ display:none; }
}

/* ---------------------------------------------------------------- reserved area login modal */
.login-modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:1.2rem; }
.login-modal[hidden]{ display:none; }
.login-modal__backdrop{
  position:absolute; inset:0; background:rgba(10,4,7,.72); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .35s var(--ease);
}
.login-modal.is-open .login-modal__backdrop{ opacity:1; }
.login-modal__panel{
  position:relative; width:min(360px,100%);
  background:var(--bg-1); border:1px solid var(--line-2); border-radius:var(--radius);
  padding:clamp(1.6rem,4vw,2.2rem); box-shadow:0 30px 80px rgba(0,0,0,.45);
  transform:translateY(16px) scale(.97); opacity:0;
  transition:transform .4s var(--ease), opacity .35s var(--ease);
}
.login-modal.is-open .login-modal__panel{ transform:translateY(0) scale(1); opacity:1; }
.login-modal__panel h2{ font-family:"Fraunces",serif; font-weight:400; font-size:1.5rem; margin-bottom:.3rem; }
.login-modal__hint{ color:var(--muted); font-size:.85rem; margin-bottom:1.4rem; }
.login-modal__panel form{ display:grid; gap:1.1rem; }
.login-modal__close{
  position:absolute; top:1rem; right:1rem; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; line-height:1;
  color:var(--ink-dim); background:transparent; border:1px solid var(--line); cursor:pointer;
  transition:color .3s, border-color .3s;
}
.login-modal__close:hover{ color:var(--ink); border-color:var(--mauve); }
.login-modal__note{ font-size:.82rem; min-height:1.2em; color:var(--mauve); }
.login-modal__note.is-error{ color:#ff8fae; }

.field--password input{ padding-right:2.6rem; }
.field__toggle{
  position:absolute; right:.35rem; top:50%; transform:translateY(-50%);
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; border-radius:50%; color:var(--muted); cursor:pointer;
  transition:color .3s, background .3s;
}
.field__toggle:hover{ color:var(--ink); background:rgba(255,255,255,.05); }
.field__toggle:focus-visible{ outline:2px solid var(--mauve); outline-offset:1px; }
.field__toggle svg{ display:block; }
.field__toggle .icon-eye-off{ display:none; }
.field__toggle[aria-pressed="true"] .icon-eye{ display:none; }
.field__toggle[aria-pressed="true"] .icon-eye-off{ display:block; }

body.login-open{ overflow:hidden; }

/* ---------------------------------------------------------------- legal pages */
.legal{ padding:calc(var(--nav-h) + clamp(40px,8vw,100px)) var(--pad) clamp(80px,10vw,140px); }
.legal__inner{ max-width:76ch; margin:0 auto; }
.legal__title{ font-size:var(--fs-h2); margin:1.2rem 0 .6rem; }
.legal__updated{ color:var(--muted); font-size:.86rem; margin-bottom:3rem; }
.legal__body h2{
  font-family:"Fraunces",serif; font-size:clamp(1.3rem,2.4vw,1.7rem); font-weight:400;
  margin:3rem 0 1rem; padding-top:2rem; border-top:1px solid var(--line);
}
.legal__body h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.legal__body h3{ font-family:"Space Grotesk",sans-serif; font-size:1rem; color:var(--ink); margin:1.8rem 0 .6rem; }
.legal__body p{ color:var(--ink-dim); line-height:1.7; margin-bottom:1.1rem; }
.legal__body ul{ display:grid; gap:.6rem; margin:0 0 1.1rem; padding-left:1.3rem; }
.legal__body li{ color:var(--ink-dim); line-height:1.6; list-style:disc; }
.legal__body li::marker{ color:var(--mauve); }
.legal__body a{ color:var(--mauve); text-decoration:underline; text-underline-offset:3px; }
.legal__body strong{ color:var(--ink); font-weight:600; }
.legal__table{ width:100%; border-collapse:collapse; margin:0 0 1.5rem; font-size:.9rem; }
.legal__table th,.legal__table td{ text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--line); color:var(--ink-dim); vertical-align:top; }
.legal__table th{ color:var(--ink); font-family:"Space Grotesk",sans-serif; font-weight:500; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; }

.svg-defs{ position:absolute; width:0; height:0; overflow:hidden; }

/* ---------------------------------------------------------------- reveal states */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:calc(var(--rd,0) * .1s); }
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal="clip"]{ opacity:1; transform:none; clip-path:inset(0 0 100% 0); transition:clip-path .9s var(--ease); transition-delay:calc(var(--i,0) * .08s); }
[data-reveal="clip"].is-in{ clip-path:inset(0 0 0 0); }

.split-word{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.14em; margin-bottom:-.14em; }
.split-word__i{ display:inline-block; transform:translateY(115%); transition:transform .9s var(--ease); transition-delay:calc(var(--wi,0) * .03s); }
.is-in .split-word__i, .split-ready.is-in .split-word__i{ transform:none; }
[data-split].is-in .split-word__i{ transform:none; }

.no-js [data-reveal], .no-js [data-split]{ opacity:1!important; transform:none!important; clip-path:none!important; }

/* ---------------------------------------------------------------- responsive */
@media (max-width:1080px){
  .manifesto__grid{ grid-template-columns:1fr; }
  .manifesto__figure{ max-width:440px; }
  .method__grid{ grid-template-columns:1fr; }
  .method__intro{ position:static; }
  .step{ position:static; }
  .faq__grid{ grid-template-columns:1fr; }
  .faq__head{ position:static; }
  .stats__grid{ grid-template-columns:repeat(2,1fr); }
  .studio__grid{ grid-template-columns:repeat(2,1fr); }
  .cta__grid{ grid-template-columns:1fr; }
  .site-foot__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:820px){
  :root{ --nav-h:64px; }
  .site-nav{ display:none; }
  .menu-toggle{ display:inline-flex; }
  .site-head__actions .btn--pill{ display:none; }
  .brand{ font-size:1.1rem; gap:.5rem; }
  .brand__mark{ width:36px; height:36px; }
  .hero__title{ font-size:clamp(2.6rem,12vw,4rem); }
  .works__grid{ grid-template-columns:1fr; }
  .work{ grid-column:auto; }
  .work:nth-child(3n-1){ margin-top:0; }
  .demo-card{ grid-template-columns:1fr; }
  .demo-card__media{ aspect-ratio:16/10; min-height:0; }
  .quote-form__row{ grid-template-columns:1fr; }
  /* services -> native horizontal swipe */
  .services__pin{ min-height:auto; }
  .services__track{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:1rem; }
  .service{ scroll-snap-align:start; }
}

@media (max-width:560px){
  .stats__grid{ grid-template-columns:1fr; }
  .stat{ border-left:0; border-top:1px solid var(--line); }
  .stat:first-child{ border-top:0; }
  .studio__grid{ grid-template-columns:1fr; }
  .site-foot__grid{ grid-template-columns:1fr; }
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .btn{ justify-content:center; }
}

@media (max-width:820px){
  .hero__shade{
    background:
      linear-gradient(180deg, rgba(23,9,16,.7) 0%, rgba(23,9,16,.5) 45%, rgba(23,9,16,.78) 80%, var(--bg) 100%);
  }
  .hero__hud{ left:var(--pad); right:auto; top:calc(var(--nav-h) + 1rem); bottom:auto; min-width:0; padding:.55rem .8rem; gap:.3rem .9rem; }
  .hero__hud-bar{ display:none; }
  .hero__hud-scene b{ font-size:.86rem; }
  .hero__inner{ padding-top:2.6rem; }
  /* the hero is taller than the screen here: the cue would sit on the
     trust badges, and the content already invites the scroll */
  .hero__scroll{ display:none; }
}

/* ---- touch / small screens: keep the 360° hero smooth ----
   Full-screen blend layers and backdrop blurs over a moving panorama
   are re-composited every frame: drop them where the GPU is weak. */
@media (max-width:820px), (hover:none){
  .grain{ display:none; }
  .hero .hero__canvas{ display:none; }
  .hero__eyebrow,.hero__hud,.hspot__dot,.hspot__label,.hspot__card{ backdrop-filter:none; -webkit-backdrop-filter:none; }
  .hero__eyebrow{ background:rgba(23,9,16,.6); }
  .hero__hud{ background:rgba(23,9,16,.72); }
  .hspot__label{ background:rgba(23,9,16,.8); }
  .hspot__card{ background:rgba(23,9,16,.92); }
  .site-head.is-stuck{ backdrop-filter:none; background:rgba(23,9,16,.94); }
}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  [data-reveal],[data-split] .split-word__i,[data-reveal="clip"]{ opacity:1!important; transform:none!important; clip-path:none!important; }
  .hero__scroll-line::after,.marquee__track,.grain{ animation:none!important; }
  .cursor{ display:none!important; }
  body.has-cursor{ cursor:auto; }
}