/* ripiego con metriche allineate a Inter: niente "salto" di dimensione quando Inter carica */
@font-face{font-family:"Inter Fallback";src:local("Arial");ascent-override:90%;descent-override:22.43%;line-gap-override:0%;size-adjust:107.4%}
:root{
  --bg:#0b0b0c;
  --ink:#15110d;
  --paper:#fbfaf7;
  --muted:#7c7468;
  --muted-d:#9a9384;
  --red:#cf2e25;
  --line:rgba(255,255,255,.12);
  --card-h:74vh;
  --text:#efece6;
  --overlay:rgba(8,8,9,.46);
  --ctrl:rgba(255,255,255,.72);
  --ctrl-h:#ffffff;
  --frame-deep:#0c0c0e;
  --frame-ring:rgba(255,255,255,.28);
  --shadow-ink:rgba(0,0,0,.9);
}
/* light mode: si attiva cliccando la tagline */
body.light{
  --bg:#f3f1ec;
  --text:#15110d;
  --muted-d:#857d70;
  --overlay:rgba(243,241,236,.6);
  --ctrl:rgba(21,17,13,.55);
  --ctrl-h:#15110d;
  --frame-deep:#f6f4ef;
  --frame-ring:rgba(0,0,0,.16);
  --shadow-ink:rgba(25,20,15,.35);
}
button,.story{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:1px solid var(--ctrl-h);outline-offset:4px}
:focus:not(:focus-visible){outline:none}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  font-family:"Inter","Inter Fallback",system-ui,sans-serif;
  background:var(--bg);color:var(--text);
  transition:background-color .45s ease,color .45s ease;
  overflow:hidden;height:100vh;height:100dvh;
  position:fixed;inset:0;width:100%;
}
body.no-scroll{overflow:hidden}

/* header */
.top{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  padding:24px clamp(20px,4vw,40px);
  pointer-events:none;
}
.brand{justify-self:start;color:var(--text);font-weight:300;font-size:clamp(16px,1.7vw,20px);letter-spacing:.01em;line-height:1;text-decoration:none}
.story{justify-self:center;text-align:center;font-size:11.5px;letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;color:var(--muted-d);font-weight:300;white-space:nowrap;pointer-events:auto;cursor:pointer;padding:14px 12px;margin:-14px -12px;-webkit-user-select:none;user-select:none;text-decoration:none}
.counter{justify-self:end;font-size:11.5px;letter-spacing:.26em;margin-right:-.26em;text-transform:uppercase;color:var(--muted-d);font-variant-numeric:tabular-nums;white-space:nowrap}
.nav{justify-self:end;display:flex;align-items:center;pointer-events:auto}
.nav-set{display:flex;align-items:center;gap:24px}
.nav-toggle{display:none}
.nav-link{font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted-d);text-decoration:none;font-weight:300;white-space:nowrap;transition:color .35s ease;position:relative;padding:4px 0}
.nav-link:hover{color:var(--text)}
.nav-link.active{color:var(--text)}
.nav-link.active::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;opacity:.55}
.brand,.story,.counter,.hint span{transition:color .45s ease}

/* stage + track */
.stage{
  position:relative;height:100vh;height:100dvh;width:100vw;overflow:hidden;
  display:flex;align-items:center;
  transform:translateY(10px);
  cursor:grab;touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none;
}
.stage.grabbing{cursor:grabbing}
.track{
  display:flex;align-items:center;gap:clamp(26px,4vw,64px);
  will-change:transform;
  height:var(--card-h);
}
.card{
  position:relative;flex:0 0 auto;
  height:var(--card-h);aspect-ratio:2/3;
  border:0;padding:0;margin:0;background:#141414;
  border-radius:0;overflow:hidden;cursor:inherit;contain:layout paint;
  box-shadow:0 30px 60px -40px var(--shadow-ink);
  opacity:0;transform:translateY(8px);
  transition:opacity .7s ease, transform .7s ease;
}
.card.in{opacity:1;transform:none}
.card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
.card-cap{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:baseline;gap:10px;
  padding:34px 18px 16px;
  background:linear-gradient(to top,rgba(0,0,0,.45),transparent);
  opacity:0;transition:opacity .3s ease;pointer-events:none;
}
.card:hover .card-cap{opacity:1;transition-delay:.15s}
.card-cap .c-num{font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums}
.card-cap .c-title{font-size:13px;letter-spacing:.02em;color:#fff}

/* hint */
.hint{
  position:fixed;left:0;right:0;bottom:26px;z-index:20;text-align:center;
  pointer-events:none;transition:opacity .6s ease;
}
.hint span{
  font-size:10.5px;letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;color:var(--muted-d);
  animation:breathe 2.6s ease-in-out infinite;
}
.hint.hidden{opacity:0}
@keyframes breathe{0%,100%{opacity:.45}50%{opacity:.95}}

/* copyright: compare al posto dell'hint quando questo svanisce */
.copyright{position:fixed;left:0;right:0;bottom:26px;z-index:20;text-align:center;pointer-events:none;
  font-size:10.5px;letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;color:var(--muted-d);
  opacity:0;transition:opacity .5s ease,color .45s ease}
.copyright.show{opacity:1;transition:opacity .6s ease .5s}

/* focus overlay */
.focus{
  position:fixed;inset:0;z-index:60;display:none;
  align-items:center;justify-content:center;
  touch-action:manipulation;
  outline:none;
  --blur:20px;
}
/* sfondo sfocato su uno pseudo-elemento separato, cosi il backdrop-filter
   non avvolge il sottoalbero 3D del flip (evita glitch su Safari/iOS) */
.focus::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:var(--overlay);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(.9);backdrop-filter:blur(var(--blur)) saturate(.9);
  opacity:0;
  transition:opacity .5s cubic-bezier(.2,.7,.25,1);
}
.focus.open{display:flex}
/* sfocato graduale ma LEGGERO: il blur e statico (calcolato una volta sola),
   sale solo l'opacity del velo = dissolvenza incrociata da nitido a sfocato */
.focus.visible::before{opacity:1}
.card-focus{
  position:relative;aspect-ratio:2/3;
  height:82vh;height:min(82vh,82dvh,132vw);
  will-change:transform;perspective:1600px;
  --depth:clamp(22px,3.6vmin,34px);
}
.flip-inner{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;transition:transform .9s cubic-bezier(.66,0,.34,1);
}
.flip-inner.flipped{transform:rotateY(180deg)}
.face{
  position:absolute;inset:0;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  border-radius:0;overflow:hidden;
  box-shadow:0 50px 90px -50px var(--shadow-ink);
}
/* spessore in avanti: il retro riposa a trasformazione identita (testo nitido su Safari) */
.face.front{cursor:pointer;background:transparent;box-shadow:none;border-radius:0;overflow:visible;
  transform:translateZ(var(--depth,18px))}
/* acrilico colorato TRANSLUCIDO: il colore lascia passare il fondo sfocato,
   riflessi netti e sottili da vetro, bordi luminosi. Foto opaca sotto vetro. */
.acrylic{
  position:absolute;inset:0;border-radius:0;
  padding:clamp(6px,1.2vmin,11px);
  background:var(--frame,#d8d8d8);
  background:
    linear-gradient(118deg, rgba(255,255,255,.6) 0 1.4%, rgba(255,255,255,0) 9%),
    linear-gradient(305deg, rgba(255,255,255,.22) 0 1%, rgba(255,255,255,0) 7%),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 24%, rgba(0,0,0,.2) 100%),
    color-mix(in srgb, var(--frame,#d8d8d8) 84%, var(--frame-deep));
  box-shadow:
    0 0 0 1px var(--frame-ring),
    0 0 9px -1px var(--frame-glow,transparent),
    0 42px 80px -38px var(--shadow-ink);
}
/* lo scalino: ripiano recessed translucido, stesso colore ma piu chiaro */
.ledge{
  position:relative;width:100%;height:100%;border-radius:0;
  padding:clamp(7px,1.4vmin,13px);
  background:var(--frame,#d8d8d8);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 45%),
    color-mix(in srgb, var(--frame,#d8d8d8) 50%, #ffffff);
  box-shadow:
    inset 0 2px 5px -1px rgba(0,0,0,.38),
    inset 0 0 0 1px rgba(255,255,255,.3);
}
/* la foto sotto vetro, con il filo d'ombra dello stacco */
.glass{
  position:relative;width:100%;height:100%;border-radius:0;overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.6), inset 0 1px 10px -4px rgba(0,0,0,.5);
}
.glass img{width:100%;height:100%;object-fit:cover;display:block}
/* riflesso morbido del vetro sulla foto (leggero, niente blend) */
.gloss{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(130% 90% at 20% 3%, rgba(255,255,255,.13), rgba(255,255,255,0) 50%),
    linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,0) 26%);}
/* lampo speculare in apertura e sul giro: solo transform+opacity, fluido */
.sheen{position:absolute;top:-30%;bottom:-30%;left:-12%;width:60%;pointer-events:none;opacity:0;
  background:linear-gradient(115deg, transparent 24%, rgba(255,255,255,.06) 42%, rgba(255,255,255,.42) 50%, rgba(255,255,255,.06) 58%, transparent 76%);
  transform:translateX(-185%) rotate(9deg);}
.sheen.run{animation:sheen-sweep .9s cubic-bezier(.42,0,.16,1)}
@keyframes sheen-sweep{0%{transform:translateX(-185%) rotate(9deg);opacity:0}16%{opacity:1}80%{opacity:1}100%{transform:translateX(300%) rotate(9deg);opacity:0}}
.face.back{
  transform:rotateY(180deg);
  background:var(--paper);color:var(--ink);
  display:flex;cursor:pointer;
}
/* i quattro lati colorati: lo spessore del blocco (esteso in avanti, stesso
   materiale del fronte grazie al color-mix condiviso) */
.edge{position:absolute;background:color-mix(in srgb, var(--frame,#888) 84%, var(--frame-deep))}
.edge-l,.edge-r{top:0;height:100%;width:var(--depth,18px);
  -webkit-backface-visibility:hidden;backface-visibility:hidden}
.edge-r{right:0;transform-origin:right center;transform:rotateY(90deg);
  background:linear-gradient(90deg, rgba(255,255,255,.16), rgba(0,0,0,.28)), color-mix(in srgb, var(--frame,#888) 84%, var(--frame-deep))}
.edge-l{left:0;transform-origin:left center;transform:rotateY(-90deg);
  background:linear-gradient(90deg, rgba(0,0,0,.28), rgba(255,255,255,.16)), color-mix(in srgb, var(--frame,#888) 84%, var(--frame-deep))}
.edge-t,.edge-b{left:0;width:100%;height:var(--depth,18px)}
.edge-t{top:0;transform-origin:center top;transform:rotateX(90deg);
  background:linear-gradient(180deg, rgba(0,0,0,.26), rgba(255,255,255,.18)), color-mix(in srgb, var(--frame,#888) 84%, var(--frame-deep))}
.edge-b{bottom:0;transform-origin:center bottom;transform:rotateX(-90deg);
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.26)), color-mix(in srgb, var(--frame,#888) 84%, var(--frame-deep))}
.back-inner{
  width:100%;height:100%;padding:34px 30px 30px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:18px;
}
.back-inner h2{font-weight:400;font-size:26px;letter-spacing:-.01em;line-height:1.05}
.back-inner .meta{margin-top:8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.back-inner .story-text{font-size:14px;line-height:1.6;color:#46403a;font-weight:300;max-width:46ch}
.spec{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;
  font-size:12px;line-height:1.4;font-weight:300;letter-spacing:.01em;color:#6b6258}
.bb-left{display:flex;flex-direction:column;gap:9px}
.price-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.price-row .price{font-size:15px;font-weight:400;color:var(--ink);letter-spacing:.01em}
.price-row .vat{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.back-bottom{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border-top:1px solid #e8e3da;padding-top:18px;margin-top:4px}
.dots{display:flex;gap:12px;align-items:center}
.dot{width:17px;height:17px;border-radius:50%;border:2px solid var(--red);background:transparent}
.dot.sold{background:var(--red)}
.buy{
  appearance:none;border:1px solid var(--ink);background:transparent;color:var(--ink);
  font:inherit;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  min-width:148px;white-space:nowrap;text-align:center;
  padding:11px 24px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s;
}
.buy:hover{background:var(--ink);color:var(--paper)}
.buy.soldout{border-style:dashed;opacity:.45;cursor:default}
.buy.soldout:hover{background:transparent;color:var(--ink)}

/* overlay controls */
.focus-close,.fnav{
  position:absolute;z-index:5;appearance:none;border:0;background:transparent;cursor:pointer;
  color:var(--ctrl);opacity:0;transition:color .2s ease,opacity .35s ease;
  line-height:1;-webkit-user-select:none;user-select:none;
}
.focus.visible .focus-close,.focus.visible .fnav{opacity:1}
.focus-close:hover,.fnav:hover{color:var(--ctrl-h)}
.focus-close{top:clamp(6px,1.6vw,16px);right:clamp(6px,1.8vw,18px);font-size:30px;font-weight:300;padding:10px 14px}
.fnav{top:50%;transform:translateY(-50%);font-size:46px;font-weight:200;padding:12px 16px}
.fprev{left:clamp(4px,2vw,26px)}
.fnext{right:clamp(4px,2vw,26px)}
.flip-hint{
  position:absolute;bottom:clamp(16px,3vw,30px);left:0;right:0;text-align:center;
  font-size:10px;letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;color:var(--ctrl);
  opacity:0;pointer-events:none;transition:opacity .4s ease;
}
.focus.visible .flip-hint{opacity:1}
.focus.flipped .flip-hint{opacity:0}

/* mobile: swiper orizzontale a scatti (la classe .swipe la mette il JS su <=640px) */
.swipe .stage{
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pinch-zoom;
  scrollbar-width:none;cursor:auto;
  transform:translateY(22px);   /* foto un filo piu in basso, sfrutta lo spazio sotto */
}
.swipe .stage::-webkit-scrollbar{display:none}
.swipe .track{height:auto;align-items:center;gap:16px;padding:0 10vw;transform:none!important;will-change:auto}
/* touch-action:manipulation = tap immediato, niente zoom/ritardo da doppio tap (anti-glitch apertura) */
.swipe .card{flex:0 0 80vw;height:auto;aspect-ratio:2/3;scroll-snap-align:center;touch-action:manipulation}
/* tagline staccata dal logo e portata appena sopra l'inizio delle foto (card alta 120vw, centrata + 22px) */
.swipe .top{grid-template-areas:"brand nav";row-gap:0}
.swipe .story{position:fixed;left:0;right:0;z-index:20;top:calc(50vh - 60vw - 4px);top:calc(50dvh - 60vw - 4px)}

@media (max-width:640px){
  :root{--card-h:64vh}
  .card-focus{height:74vh;height:min(74vh,74dvh,132vw)}
  .fnav{font-size:32px}
  .back-inner h2{font-size:22px}
  .focus{--blur:12px}
  /* header su due livelli: logo + Contact in alto, tagline a riga intera sotto */
  .top{grid-template-columns:1fr auto;grid-template-areas:"brand nav" "story story";align-items:center;row-gap:11px;column-gap:16px;padding:16px 20px}
  .brand{grid-area:brand;font-size:16px}
  .nav{grid-area:nav}
  .story{grid-area:story;justify-self:center;text-align:center;white-space:nowrap;max-width:none;font-size:10px;letter-spacing:.2em;text-indent:.2em;line-height:1.3;margin:0;padding:2px 0}
  /* sotto-pagine (contatti, terms) su mobile: tagline rimossa */
  .contact-page .story, .terms-page .story{display:none}
  .contact-page .top, .terms-page .top, .home .top{grid-template-areas:"brand nav";row-gap:0}
  /* nav: hamburger su mobile, link in overlay a tutto schermo */
  .nav-set{position:fixed;inset:0;z-index:70;background:var(--bg);flex-direction:column;justify-content:center;gap:30px;opacity:0;pointer-events:none;transition:opacity .3s ease}
  body.menu-open .nav-set{opacity:1;pointer-events:auto}
  body.menu-open .top{z-index:90}
  body.menu-open{overflow:hidden}
  .nav-set .nav-link{font-size:15px;letter-spacing:.22em}
  .nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:6px;width:26px;height:26px;padding:0;background:none;border:0;cursor:pointer;position:relative;z-index:80;pointer-events:auto}
  .nav-toggle span{display:block;width:22px;height:1.5px;background:var(--text);transition:transform .3s ease,opacity .3s ease}
  body.menu-open .nav-toggle span:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
  body.menu-open .nav-toggle span:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}
}
@media (prefers-reduced-motion: reduce){
  .card{transition:none;opacity:1;transform:none}
  .card-focus,.flip-inner{transition:none}
  .focus::before{transition:none}
  .hint span{animation:none}
  .sheen{display:none}
}

/* pagina contatti */
body.contact-page{position:static;inset:auto;overflow-x:hidden;overflow-y:auto;height:auto;min-height:100vh}
.contact{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:flex-start;padding:clamp(90px,12vh,140px) clamp(22px,5vw,40px) 70px}
.contact-bg{position:absolute;inset:0;z-index:0;background:#050507 url(../assets/img/contact-bg.jpg?v=2) center/cover no-repeat}
.contact-bg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 22%),
             linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.1) 58%)}
.contact-info{position:relative;z-index:2;display:flex;flex-direction:column;gap:7px;max-width:min(440px,86vw)}
.contact-info > a,.contact-info > span{color:#fff;text-decoration:none;font-weight:300;
  font-size:clamp(20px,2.3vw,26px);letter-spacing:.01em;line-height:1.25}
.contact-info > a{width:max-content;transition:opacity .3s ease}
.contact-info > a:hover{opacity:.7}
.contact-form{display:flex;flex-direction:column;gap:14px;margin-top:26px;width:min(360px,82vw)}
.contact-form .hp{display:none}
.contact-form input,.contact-form textarea{appearance:none;-webkit-appearance:none;background:transparent;border:0;
  border-bottom:1px solid rgba(255,255,255,.32);color:#fff;font:inherit;font-size:16px;font-weight:300;padding:9px 0;
  outline:none;border-radius:0;transition:border-color .3s ease}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:rgba(255,255,255,.5);letter-spacing:.01em}
.contact-form input:focus,.contact-form textarea:focus{border-color:#fff}
.contact-form textarea{resize:vertical;min-height:84px;line-height:1.55}
.contact-form button{align-self:flex-start;margin-top:8px;appearance:none;border:1px solid rgba(255,255,255,.7);
  background:transparent;color:#fff;font:inherit;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:11px 28px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s}
.contact-form button:hover{background:#fff;color:#0b0b0c}
.contact-form button:disabled{opacity:.6;cursor:default}
.contact-sent{color:#fff;font-size:16px;font-weight:300;line-height:1.4;margin-top:26px}
.contact-error{color:rgba(255,255,255,.85);font-size:13px;font-weight:300;margin-top:14px}
.brand[href]{pointer-events:auto;cursor:pointer}
.contact-page .story, .terms-page .story{cursor:default;pointer-events:none}

/* pagina Terms: testo legale, pagina scorrevole e leggibile */
body.terms-page{position:static;inset:auto;overflow-x:hidden;overflow-y:auto;height:auto;min-height:100vh}
.terms-page .top{background:var(--bg)}
.terms{padding:clamp(96px,14vh,150px) clamp(22px,5vw,40px) 90px}
.terms-inner{max-width:680px;margin:0 auto}
.terms-inner h1{font-weight:300;font-size:clamp(24px,3.2vw,34px);letter-spacing:.005em;line-height:1.1;margin:0 0 10px}
.terms-inner .lead{font-size:14px;line-height:1.75;color:var(--muted-d);font-weight:300;margin:0 0 40px;max-width:62ch}
.terms-inner section{margin:0 0 30px;max-width:64ch}
.terms-inner h2{font-weight:400;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--text);margin:0 0 12px}
.terms-inner p{font-size:14px;line-height:1.75;color:var(--muted-d);font-weight:300;margin:0 0 10px}
.terms-inner p strong{color:var(--text);font-weight:400}
.terms-inner a{color:var(--text);text-decoration:underline;text-underline-offset:2px}

/* ===== home / copertina ===== */
body.home{position:static;inset:auto;overflow-x:hidden;overflow-y:auto;height:auto;min-height:100vh;scroll-behavior:smooth}
.home .top{grid-template-columns:1fr auto;background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 100%)}
.intro{background:var(--bg)}
.intro-hero{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:70px 24px}
.intro-hero-bg{position:absolute;inset:0;z-index:0;background:#0b0b0c url(../assets/img/cover.jpg) center/cover no-repeat}
.intro-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.36) 26%, rgba(0,0,0,.42) 62%, rgba(0,0,0,.85) 100%)}
.intro-hero-bg::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:overlay;opacity:.09;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.intro-hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.intro-brand{font-size:13px;letter-spacing:.28em;text-indent:.28em;text-transform:uppercase;color:rgba(255,255,255,.78);font-weight:300;margin-bottom:30px}
.intro-title{font-weight:200;font-size:clamp(31px,6vw,66px);line-height:1.06;letter-spacing:.005em;color:#fff;margin:0;max-width:15ch;text-shadow:0 2px 40px rgba(0,0,0,.45)}
.intro-sub{font-size:clamp(12px,1.5vw,14px);letter-spacing:.05em;color:rgba(255,255,255,.72);font-weight:300;margin:20px 0 0}
.intro-enter{margin-top:40px;display:inline-block;text-decoration:none;appearance:none;background:transparent;border:1px solid rgba(255,255,255,.72);color:#fff;
  font:inherit;font-size:11px;letter-spacing:.26em;text-transform:uppercase;padding:13px 42px;border-radius:999px;cursor:pointer;transition:background .3s,color .3s}
.intro-enter:hover{background:#fff;color:#0b0b0c}
.intro-scroll{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:1;width:34px;height:34px;display:flex;align-items:center;justify-content:center;text-decoration:none}
.intro-scroll span{display:block;width:9px;height:9px;border-right:1px solid rgba(255,255,255,.8);border-bottom:1px solid rgba(255,255,255,.8);transform:rotate(45deg);animation:introbob 2.2s ease-in-out infinite}
@keyframes introbob{0%,100%{transform:translateY(-3px) rotate(45deg);opacity:.45}50%{transform:translateY(3px) rotate(45deg);opacity:1}}
.intro-read{background:var(--bg);padding:clamp(72px,12vh,120px) clamp(24px,6vw,40px) clamp(80px,14vh,130px)}
.intro-read-inner{max-width:600px;margin:0 auto}
.intro-read-inner .intro-lead{font-size:clamp(19px,2.4vw,25px);line-height:1.45;color:var(--text);font-weight:200;letter-spacing:.005em;margin:0 0 30px}
.intro-read-inner p{font-size:15px;line-height:1.8;color:var(--muted-d);font-weight:300;margin:0 0 18px}
.intro-read-inner h2{font-weight:400;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--text);margin:50px 0 24px;padding-top:34px;border-top:1px solid rgba(255,255,255,.12)}
.intro-read-inner .intro-enter.big{display:block;width:max-content;margin:58px auto 0}