/* ═══════════════════════════════════════════════════════════════
   YOST — Your style, always.
   Brand profile one-page site
   ═══════════════════════════════════════════════════════════════ */

:root{
  --bg:           #08080a;
  --bg-soft:      #0e0e11;
  --bg-light:     #f4f1ea;
  --ink:          #f5f3ee;
  --ink-soft:     #b9b5ad;
  --ink-mute:     #6f6c66;
  --line:         rgba(245,243,238,.12);
  --line-strong:  rgba(245,243,238,.32);

  --c-blue:       #2c6bff;
  --c-red:        #ef4444;
  --c-orange:     #f97316;
  --c-pink:       #ec4899;
  --c-violet:     #a855f7;
  --c-gold:       #d4a44a;

  --serif:        'Newsreader', 'Times New Roman', serif;
  --sans:         'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  --ease:         cubic-bezier(.7,0,.2,1);
  --ease-out:     cubic-bezier(.16,1,.3,1);

  --pad-x:        clamp(1.25rem, 4vw, 4rem);
  --max-w:        1480px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body{
  overflow-x:hidden;
  min-height:100dvh;
  position:relative;
}
img,svg,video,canvas{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }

::selection{ background:var(--ink); color:var(--bg); }

/* Lenis */
html.lenis{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}

/* ─────────────── PRELOADER ─────────────── */
.preloader{
  position:fixed; inset:0;
  z-index:200;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink);
}
.preloader__inner{
  position:relative;
  width:min(420px, 80vw);
  aspect-ratio: 1.4 / 1;
  display:flex; align-items:center; justify-content:center;
}
.preloader__brackets{ position:absolute; inset:0; }
.preloader__brackets .b{
  position:absolute; width:38px; height:38px;
  border:1px solid var(--ink);
  opacity:0;
}
.b--tl{ top:0; left:0; border-right:none; border-bottom:none; }
.b--tr{ top:0; right:0; border-left:none; border-bottom:none; }
.b--bl{ bottom:0; left:0; border-right:none; border-top:none; }
.b--br{ bottom:0; right:0; border-left:none; border-top:none; }

.preloader__logo .logo-svg{ width:160px; height:auto; opacity:0; }
.preloader__count{
  position:absolute; bottom:0; right:0;
  font-family:var(--sans);
  font-size:.78rem; letter-spacing:.18em;
  color:var(--ink-soft);
}
.preloader__count i{ font-style:normal; opacity:.6; margin-left:1px; }

/* ─────────────── CUSTOM CURSOR ─────────────── */
.cursor{
  position:fixed; top:0; left:0;
  pointer-events:none;
  z-index:300;
  mix-blend-mode:difference;
}
.cursor__dot{
  position:absolute; left:0; top:0;
  width:6px; height:6px; border-radius:50%;
  background:#fff;
  transform:translate(-50%,-50%);
}
.cursor__ring{
  position:absolute; left:0; top:0;
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(255,255,255,.6);
  transform:translate(-50%,-50%);
  transition:width .35s var(--ease-out), height .35s var(--ease-out), border-color .3s;
}
.cursor.is-hover .cursor__ring{ width:64px; height:64px; }
.cursor.is-hidden{ opacity:0; }

@media (hover:none){ .cursor{ display:none; } }

/* ─────────────── SCROLL PROGRESS ─────────────── */
.progress{
  position:fixed; top:0; left:0;
  height:2px; width:0%;
  background:var(--ink);
  z-index:150;
  transition:width .1s linear;
}

/* ─────────────── NAV ─────────────── */
.nav{
  position:fixed; top:0; left:0; right:0;
  z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--pad-x);
  mix-blend-mode:difference;
  color:#fff;
  pointer-events:none;
}
.nav > *{ pointer-events:auto; }
.nav__logo .logo-svg{ width:78px; height:auto; }
.nav__links{
  display:flex; gap:2.2rem;
  font-size:.8rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-weight:400;
  align-items:center;
}
.nav__links > a,
.nav__trigger{
  position:relative; opacity:.85; transition:opacity .3s;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.6rem 0;
}
.nav__links > a:hover,
.nav__trigger:hover{ opacity:1; }
.nav__links > a::after,
.nav__trigger::after{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease-out);
}
.nav__links > a:hover::after,
.nav__item:hover .nav__trigger::after{ transform:scaleX(1); }
.nav__trigger svg{ transition:transform .35s var(--ease-out); }
.nav__item:hover .nav__trigger svg{ transform:rotate(180deg); }

/* Dropdown */
.nav__item{ position:relative; }
.nav__dropdown{
  position:absolute;
  top:100%; left:50%;
  transform:translate(-50%, 8px);
  margin-top:.8rem;
  min-width:240px;
  background:rgba(10,10,12,.92);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid rgba(255,255,255,.08);
  padding:.7rem;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden;
  pointer-events:none;
  transition:opacity .35s var(--ease-out), transform .35s var(--ease-out), visibility 0s linear .35s;
  mix-blend-mode:normal;            /* opt out of nav's difference blend */
  isolation:isolate;
  color:#f5f3ee;
  z-index:120;
}
.nav__item:hover .nav__dropdown,
.nav__item:focus-within .nav__dropdown{
  opacity:1; visibility:visible;
  transform:translate(-50%, 0);
  pointer-events:auto;
  transition:opacity .35s var(--ease-out), transform .35s var(--ease-out), visibility 0s;
}
/* invisible hover-bridge keeps the dropdown alive while moving the cursor */
.nav__dropdown::before{
  content:''; position:absolute;
  top:-1rem; left:0; right:0; height:1rem;
}
.nav__dropdown a{
  display:flex; align-items:center; gap:.9rem;
  padding:.85rem 1rem;
  font-family:var(--serif);
  font-size:1.05rem;
  letter-spacing:0;
  text-transform:none;
  color:#f5f3ee;
  border:1px solid transparent;
  transition:background .25s, border-color .25s, padding .35s var(--ease-out);
  position:relative;
}
.nav__dropdown a em{ font-style:italic; color:var(--ink-soft); margin-right:.25em; }
.nav__dropdown a:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
  padding-left:1.3rem;
}
.nav__dropdown-num{
  font-family:var(--sans);
  font-size:.65rem; letter-spacing:.2em;
  color:var(--ink-mute);
  min-width:1.5rem;
}

.nav__cta{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.6rem 1.1rem;
  border:1px solid rgba(255,255,255,.5);
  border-radius:999px;
  font-size:.78rem; letter-spacing:.08em;
  text-transform:uppercase;
  transition:background .35s, color .35s, border-color .35s;
}
.nav__cta:hover{ background:#fff; color:#000; border-color:#fff; }

/* ─── HAMBURGER BUTTON ─── */
.nav__burger{
  display:none;
  position:relative;
  width:44px; height:44px;
  background:transparent;
  border:1px solid rgba(255,255,255,.5);
  border-radius:999px;
  padding:0;
  cursor:pointer;
  color:#fff;
  transition:border-color .3s, background .3s;
}
.nav__burger span{
  position:absolute;
  left:50%; top:50%;
  width:18px; height:1px;
  background:currentColor;
  transform-origin:center;
  transition:transform .35s var(--ease-out), opacity .25s;
}
.nav__burger span:nth-child(1){ transform:translate(-50%, -6px); }
.nav__burger span:nth-child(2){ transform:translate(-50%, 0); }
.nav__burger span:nth-child(3){ transform:translate(-50%, 6px); }

.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translate(-50%, 0) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translate(-50%, 0) rotate(-45deg); }
.nav__burger:hover{ background:rgba(255,255,255,.06); }

/* ─── MOBILE MENU OVERLAY ─── */
.mobile-menu{
  position:fixed; inset:0;
  z-index:130;
  background:rgba(4,4,6,.96);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  display:flex; flex-direction:column; justify-content:space-between;
  padding: 6rem var(--pad-x) 3rem;
  overflow-y:auto;
  transition:opacity .4s var(--ease-out), visibility 0s linear .4s;
}
.mobile-menu.is-open{
  opacity:1; visibility:visible;
  pointer-events:auto;
  transition:opacity .4s var(--ease-out), visibility 0s;
}
.mobile-menu__nav{
  display:flex; flex-direction:column;
  gap:.5rem;
}
.mobile-menu__nav a{
  display:flex; align-items:baseline; gap:1.2rem;
  padding:1.2rem 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2rem, 8vw, 3rem);
  line-height:1;
  color:#fff;
  letter-spacing:-.01em;
  transform:translateY(20px);
  opacity:0;
  transition:transform .55s var(--ease-out), opacity .55s var(--ease-out), padding-left .35s var(--ease-out);
}
.mobile-menu.is-open .mobile-menu__nav a{
  opacity:1; transform:translateY(0);
}
.mobile-menu.is-open .mobile-menu__nav a:nth-child(1){ transition-delay:.10s; }
.mobile-menu.is-open .mobile-menu__nav a:nth-child(2){ transition-delay:.16s; }
.mobile-menu.is-open .mobile-menu__nav a:nth-child(3){ transition-delay:.22s; }
.mobile-menu.is-open .mobile-menu__nav a:nth-child(4){ transition-delay:.28s; }
.mobile-menu.is-open .mobile-menu__nav a:nth-child(5){ transition-delay:.34s; }
.mobile-menu__nav a:active{ padding-left:.7rem; }
.mobile-menu__n{
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.2em;
  color:rgba(255,255,255,.5);
  flex-shrink:0;
}
.mobile-menu__cta{
  display:flex; flex-direction:column; align-items:flex-start; gap:1.5rem;
  margin-top:3rem;
}
.mobile-menu__cta .btn-primary{ width:fit-content; }
.mobile-menu__alt{
  font-size:.78rem;
  letter-spacing:.06em;
  color:var(--ink-soft);
  line-height:1.8;
  margin:0;
}
.mobile-menu__alt a{
  color:var(--ink);
  border-bottom:1px solid rgba(255,255,255,.25);
  padding-bottom:1px;
}

@media (max-width: 820px){
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
  .nav__burger{ display:inline-flex; align-items:center; justify-content:center; }
}
@media (min-width: 821px){
  .mobile-menu{ display:none !important; }
  /* Center nav__links horizontally on the navbar, independent of left/right groups */
  .nav__links{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
  }
  /* With nav__links taken out of flow, push the CTA + lang-switch to the right */
  .nav__cta{ margin-left:auto; }
}

/* ═══════════════════ HERO ═══════════════════ */
.hero{
  position:relative;
  height:100dvh; min-height:680px;
  display:flex; align-items:flex-end;
  padding:0 var(--pad-x) clamp(2rem, 5vw, 4rem);
  overflow:hidden;
  background:#000;
}
.hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  /* Show the full video frame edge-to-edge vertically — no top/bottom crop */
  object-fit:contain;
  object-position:center;
  z-index:0;
  pointer-events:none;
  /* Desktop: 15% smaller */
  transform: scale(.85);
  transform-origin: center;
  transition: transform .3s ease;
}
@media (max-width: 720px){
  .hero__video{
    /* Mobile: 20% larger */
    transform: scale(1.20);
  }
}
.hero__grain{
  position:absolute; inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:3px 3px, 7px 7px;
  background-position:0 0, 1px 2px;
  mix-blend-mode:overlay;
  opacity:.4;
  z-index:1;
}

/* Frame brackets */
.hero__bracket{ position:absolute; width:54px; height:54px; z-index:3; }
.hero__bracket span{ position:absolute; background:var(--ink); }
.hero__bracket span:nth-child(1){ width:100%; height:1px; }
.hero__bracket span:nth-child(2){ width:1px; height:100%; }
.hero__bracket--tl{ top:6rem; left:var(--pad-x); }
.hero__bracket--tl span:nth-child(1){ top:0; left:0; }
.hero__bracket--tl span:nth-child(2){ top:0; left:0; }
.hero__bracket--tr{ top:6rem; right:var(--pad-x); }
.hero__bracket--tr span:nth-child(1){ top:0; right:0; }
.hero__bracket--tr span:nth-child(2){ top:0; right:0; }
.hero__bracket--bl{ bottom:6rem; left:var(--pad-x); }
.hero__bracket--bl span:nth-child(1){ bottom:0; left:0; }
.hero__bracket--bl span:nth-child(2){ bottom:0; left:0; }
.hero__bracket--br{ bottom:6rem; right:var(--pad-x); }
.hero__bracket--br span:nth-child(1){ bottom:0; right:0; }
.hero__bracket--br span:nth-child(2){ bottom:0; right:0; }

.hero__content{
  position:relative; z-index:4;
  max-width:var(--max-w);
  width:100%;
  margin:0 auto;
  /* Inset the text content from the corner brackets so they never overlap at
     narrow desktop widths (between mobile and wide screens). */
  padding-inline: clamp(0px, calc(4vw + 1rem), 5rem);
}
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 2rem;
}
.hero__eyebrow .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--c-red);
  box-shadow:0 0 0 0 rgba(239,68,68,.6);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(239,68,68,.6); }
  50%   { box-shadow:0 0 0 10px rgba(239,68,68,0); }
}

.hero__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(4.5rem, 14vw, 16rem);
  line-height:.86;
  letter-spacing:-.02em;
  margin:0 0 2rem;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line .word{
  display:inline-block;
  opacity:0;
}
.js-ready .hero__title .line .word{ opacity:1; }
.hero__title .italic{ font-style:italic; color:var(--ink-soft); }

.hero__sub{
  font-size:clamp(.95rem, 1.3vw, 1.1rem);
  color:var(--ink-soft);
  max-width:46ch;
  line-height:1.55;
  margin:0 0 3rem;
}
.hero__sub em{ color:var(--ink); font-style:normal; font-weight:500; }

.hero__meta{
  display:flex; flex-wrap:wrap; gap:2rem;
  font-size:.78rem; letter-spacing:.06em;
  color:var(--ink-soft);
  text-transform:uppercase;
}
.hero__meta div span{ color:var(--ink-mute); margin-right:.4rem; }

.hero__scroll{
  position:absolute;
  bottom:1.6rem; right:var(--pad-x);
  z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft);
}
.hero__scroll .line{
  width:1px; height:64px;
  background:linear-gradient(to bottom, transparent, var(--ink-soft));
  position:relative; overflow:hidden;
}
.hero__scroll .line::after{
  content:''; position:absolute; top:-40%; left:0;
  width:100%; height:40%;
  background:linear-gradient(to bottom, transparent, var(--ink));
  animation:scrollDown 2.2s ease-in-out infinite;
}
@keyframes scrollDown{
  0%   { top:-40%; }
  100% { top:100%; }
}

@media (max-width: 720px){
  .hero__bracket{ width:32px; height:32px; }
  .hero__meta{ gap:1rem; font-size:.7rem; }
}

/* ═══════════════════ MANIFESTO ═══════════════════ */
.manifesto{
  position:relative;
  padding:0rem 0 9rem;
  background:var(--bg);
  border-top:1px solid var(--line);
  overflow:hidden;
}

.marquee{
  overflow:hidden;
  border-bottom:1px solid var(--line);
  padding:1.5rem 0;
  margin-bottom:7rem;
}
.marquee__track{
  display:inline-flex; gap:2rem;
  white-space:nowrap;
  font-family:var(--serif);
  font-size:clamp(1.75rem, 4.5vw, 4.5rem);
  line-height:1;
  color:var(--ink);
  will-change:transform;
}
.marquee__track .sep{ color:var(--ink-mute); font-style:italic; }
.marquee__track .italic{ font-style:italic; color:var(--ink-soft); }

.manifesto__grid{
  position:relative;
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 var(--pad-x);
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:3rem;
  align-items:start;
}
.manifesto__num{
  font-size:.78rem; letter-spacing:.18em;
  color:var(--ink-mute);
  text-transform:uppercase;
  padding-top:1rem;
}
.manifesto__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.4rem, 5vw, 5rem);
  line-height:1.02;
  letter-spacing:-.015em;
  margin:0;
}
.manifesto__title em{ font-style:italic; color:var(--ink-soft); }
.manifesto__body{
  font-size:1rem;
  line-height:1.7;
  color:var(--ink-soft);
  max-width:38ch;
}
.manifesto__body strong{ color:var(--ink); font-weight:500; }

/* ─── SHOWCASE: intro video, plays on viewport entry ─── */
.showcase-video{
  grid-column: 1 / -1;
  position:relative;
  margin: 3rem 0 2rem;
  aspect-ratio: 16 / 9;
  overflow:hidden;
  background:#000;
}
.showcase-video video{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.showcase-video__bracket{
  position:absolute;
  width:44px; height:44px;
  pointer-events:none;
  z-index:2;
}
.showcase-video__bracket::before,
.showcase-video__bracket::after{
  content:''; position:absolute; background:var(--ink);
}
.showcase-video__bracket::before{ width:100%; height:1px; }
.showcase-video__bracket::after { width:1px; height:100%; }
.showcase-video__bracket--tl{ top:1rem; left:1rem; }
.showcase-video__bracket--tr{ top:1rem; right:1rem; }
.showcase-video__bracket--tr::before{ right:0; }
.showcase-video__bracket--tr::after { right:0; }
.showcase-video__bracket--bl{ bottom:1rem; left:1rem; }
.showcase-video__bracket--bl::before{ bottom:0; }
.showcase-video__bracket--bl::after { bottom:0; }
.showcase-video__bracket--br{ bottom:1rem; right:1rem; }
.showcase-video__bracket--br::before{ bottom:0; right:0; }
.showcase-video__bracket--br::after { bottom:0; right:0; }

/* ─── (legacy showcase styles below — retained for backwards compat) ─── */
.showcase{
  grid-column: 1 / -1;
  margin: 6rem 0 4rem;
  position:relative;
}
.showcase__head{
  display:flex; flex-direction:column; gap:1rem;
  margin-bottom:3rem;
  max-width:var(--max-w);
}
.showcase__heading{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2rem, 4vw, 3.4rem);
  line-height:1;
  margin:0;
  letter-spacing:-.015em;
}
.showcase__heading em{ font-style:italic; color:var(--ink-soft); }

/* the pinned stage */
.showcase__stage{
  position:relative;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:4rem;
  align-items:center;
  min-height:78vh;
  padding:2rem 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* counter top-left of stage */
.showcase__counter{
  position:absolute;
  top:2rem; left:0;
  display:flex; align-items:baseline; gap:.4rem;
  font-family:var(--serif);
  color:var(--ink);
  z-index:3;
}
.showcase__num{
  font-size:clamp(3rem, 5vw, 4.5rem);
  font-weight:400;
  line-height:1;
  font-variant-numeric:tabular-nums;
  transition:opacity .25s;
}
.showcase__total{
  font-size:1rem;
  color:var(--ink-mute);
  letter-spacing:.04em;
  margin-left:.4rem;
}

/* image stack */
.showcase__images{
  position:relative;
  aspect-ratio: 4 / 5;
  width:100%;
  max-width:520px;
  margin:0 auto;
}
.showcase__img{
  position:absolute; inset:0;
  margin:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transform:scale(.92);
  transition:opacity .7s var(--ease-out), transform .9s var(--ease-out);
  background:#000;
  overflow:hidden;
  pointer-events:none;
}
.showcase__img img{
  width:100%; height:100%;
  object-fit:contain;
  object-position:center;
  padding:1.4rem;
}
.showcase__img.is-active{
  opacity:1;
  transform:scale(1);
  pointer-events:auto;
}

/* SLIDE 1: lineup orizzontale delle 5 famiglie */
.showcase__img--lineup{ padding:0; background:#000; }
.showcase__lineup{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  gap:.6rem;
  padding: 1.4rem .6rem;
}
.showcase__lineup img{
  flex:1 1 0;
  min-width:0;
  height:auto;
  max-height:96%;
  width:auto;
  object-fit:contain;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.55));
  transition:transform .8s var(--ease-out), filter .8s;
}
/* staggered vertical rhythm — each bottle slightly off the baseline */
.showcase__lineup img:nth-child(1){ transform: translateY(10px);  }
.showcase__lineup img:nth-child(2){ transform: translateY(-12px); }
.showcase__lineup img:nth-child(3){ transform: translateY(6px);   }
.showcase__lineup img:nth-child(4){ transform: translateY(-14px); }
.showcase__lineup img:nth-child(5){ transform: translateY(12px);  }
/* gentle entry: each bottle slides up into place when the slide becomes active */
.showcase__img--lineup .showcase__lineup img{ opacity:0; }
.showcase__img--lineup.is-active .showcase__lineup img{
  opacity:1;
  transition:opacity .6s var(--ease-out), transform .9s var(--ease-out);
}
.showcase__img--lineup.is-active .showcase__lineup img:nth-child(1){ transition-delay:.05s; }
.showcase__img--lineup.is-active .showcase__lineup img:nth-child(2){ transition-delay:.15s; }
.showcase__img--lineup.is-active .showcase__lineup img:nth-child(3){ transition-delay:.25s; }
.showcase__img--lineup.is-active .showcase__lineup img:nth-child(4){ transition-delay:.35s; }
.showcase__img--lineup.is-active .showcase__lineup img:nth-child(5){ transition-delay:.45s; }

/* SLIDE 2: tablet PNG con trasparenza */
.showcase__img--tablet{ background:transparent; }
.showcase__img--tablet img{
  padding:0;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.6));
}

/* inline pill list under the label */
.showcase__inline-list{
  list-style:none; padding:0; margin:.6rem 0 0;
  display:flex; flex-wrap:wrap; gap:.45rem;
}
.showcase__inline-list li{
  font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding:.45rem .8rem;
  border:1px solid var(--line);
  border-radius:999px;
}
/* bracket frame around the images */
.showcase__bracket{
  position:absolute;
  width:32px; height:32px;
  pointer-events:none;
  z-index:2;
}
.showcase__bracket::before,
.showcase__bracket::after{ content:''; position:absolute; background:var(--ink); }
.showcase__bracket::before{ width:100%; height:1px; }
.showcase__bracket::after { width:1px; height:100%; }
.showcase__bracket--tl{ top:0; left:0; }
.showcase__bracket--tr{ top:0; right:0; }
.showcase__bracket--tr::before{ right:0; } .showcase__bracket--tr::after{ right:0; }
.showcase__bracket--bl{ bottom:0; left:0; }
.showcase__bracket--bl::before{ bottom:0; } .showcase__bracket--bl::after{ bottom:0; }
.showcase__bracket--br{ bottom:0; right:0; }
.showcase__bracket--br::before{ bottom:0; right:0; } .showcase__bracket--br::after{ bottom:0; right:0; }

/* labels */
.showcase__labels{
  position:relative;
  min-height:300px;
}
.showcase__label{
  position:absolute; inset:0;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .55s var(--ease-out), transform .65s var(--ease-out);
  pointer-events:none;
  display:flex; flex-direction:column; gap:1.4rem;
  padding-right:1rem;
}
.showcase__label.is-active{ opacity:1; transform:translateY(0); pointer-events:auto; }
.showcase__kicker{
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-mute);
}
.showcase__label h4{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.6rem, 5vw, 4.2rem);
  line-height:.92;
  margin:0;
  letter-spacing:-.015em;
}
.showcase__label h4 em{
  font-style:italic; color:var(--ink-soft);
  display:block; font-size:.55em;
  letter-spacing:.03em;
  margin-bottom:.4rem;
}
.showcase__label p{
  font-size:.98rem; line-height:1.6;
  color:var(--ink-soft);
  max-width:36ch;
  margin:0;
}

/* dot nav */
.showcase__nav{
  position:absolute;
  bottom:1.5rem; right:0;
  list-style:none; padding:0; margin:0;
  display:flex; gap:1.6rem;
  z-index:3;
}
.showcase__nav li{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-mute);
  cursor:pointer;
  transition:color .3s;
}
.showcase__nav li .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--ink-mute);
  transition:background .3s, transform .3s;
}
.showcase__nav li.is-active{ color:var(--ink); }
.showcase__nav li.is-active .dot{ background:var(--ink); transform:scale(1.4); }
.showcase__nav li:hover{ color:var(--ink); }

@media (max-width: 900px){
  .showcase__stage{ grid-template-columns:1fr; gap:2rem; }
  .showcase__counter{ position:static; margin-bottom:1rem; }
  .showcase__nav{ position:static; flex-wrap:wrap; margin-top:1.5rem; }
  .showcase__labels{ min-height:220px; }
}

.manifesto__stats{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:2rem;
  margin-top:5rem;
  padding-top:3rem;
  border-top:1px solid var(--line);
}
.stat{
  display:flex; flex-direction:column; gap:.5rem;
}
.stat b{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(3rem, 6vw, 6.4rem);
  line-height:1;
  color:var(--ink);
}
.stat b.infinity{ font-size:clamp(4rem, 8vw, 7.5rem); }
.stat span{
  font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-mute);
}

@media (max-width: 900px){
  .manifesto__grid{ grid-template-columns: 1fr; gap:1.5rem; }
  .manifesto__num{ padding-top:0; }
  .manifesto__stats{ grid-template-columns:repeat(2,1fr); }
}

/* ═══════════════════ PRODUCTS HORIZONTAL ═══════════════════ */
.products{
  position:relative;
  background:var(--bg-light);
  color:#1a1a1a;
}
.products__intro{
  max-width:var(--max-w);
  margin:0 auto;
  padding:8rem var(--pad-x) 4rem;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:3rem;
  align-items:end;
}
.kicker{
  display:inline-block;
  font-size:.78rem; letter-spacing:.18em;
  text-transform:uppercase;
  color:#777;
  margin-bottom:1.5rem;
}
.kicker.light{ color:var(--ink-mute); }

.products__heading{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(3rem, 7vw, 7rem);
  line-height:.96;
  letter-spacing:-.02em;
  margin:0;
  color:#0a0a0a;
}
.products__heading em{ font-style:italic; color:#888; }
.products__lede{
  font-size:1.05rem;
  line-height:1.65;
  color:#444;
  max-width:42ch;
  margin:0 0 1rem;
}

.products__pin{
  position:relative;
  height:100vh;
  overflow:hidden;
}
.products__track{
  position:absolute; top:0; left:0;
  height:100%;
  display:flex;
  align-items:center;
  gap:2rem;
  padding:0 var(--pad-x);
  will-change:transform;
}
.card{
  position:relative;
  flex:0 0 auto;
  width:clamp(360px, 28vw, 460px);
  height:auto;
  max-height:100%;            /* never overflow the pin viewport */
  background:#fff;
  display:flex; flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.06);
  transition:transform .6s var(--ease-out);
}
.card__body{ flex-shrink:0; }  /* body keeps its natural height */
.card__num{
  font-family:var(--sans);
  font-size:.78rem; letter-spacing:.18em;
  color:#aaa;
  padding:1.4rem 1.6rem 0;
}
.card__body{
  padding:1rem 1.6rem 1.6rem;
  display:flex; flex-direction:column; gap:.6rem;
}
.card__body h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.4rem, 4vw, 3.6rem);
  line-height:1;
  margin:0;
  letter-spacing:-.01em;
}
.card__body h3 em{ font-style:italic; color:#999; }
.card__tag{
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:#888; margin:.4rem 0 0;
  line-height:1.4;
  /* Reserve space for 2 lines so all cards have uniform height (the longest tag wraps to 2) */
  min-height: calc(0.78rem * 1.4 * 2);
}
.card__desc{
  font-size:.92rem; line-height:1.55;
  color:#444;
  max-width:36ch;
  margin:.4rem 0 0;
}
.card__more{
  display:inline-flex; align-items:center; gap:.55rem;
  margin-top:1.2rem;
  padding-bottom:.35rem;
  font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase;
  color:#0a0a0a;
  border-bottom:1px solid rgba(0,0,0,.18);
  transition:gap .35s var(--ease-out), border-color .35s, color .3s;
  align-self:flex-start;
}
.card__more svg{ transition:transform .4s var(--ease-out); }
.card__more:hover{
  gap:.9rem;
  border-color:#0a0a0a;
}
.card__more:hover svg{ transform:translateX(4px); }
.card__visual{
  position:relative;
  overflow:hidden;
  background:var(--swatch, #f4f1ea);
  width:100%;
  /* Preferred portrait aspect ratio (4:5). On short viewports the visual
     shrinks first so the body content stays fully visible. */
  aspect-ratio: 4 / 5;
  flex-shrink:1;
  min-height:0;
}
.card__visual img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1.05);
  transition:transform 1.2s var(--ease-out), filter 1.2s;
  filter:saturate(.95);
}
.card:hover .card__visual img{ transform:scale(1.18); filter:saturate(1.1); }
.card__swatch{
  position:absolute; top:1rem; right:1rem;
  width:14px; height:14px; border-radius:50%;
  background:var(--swatch);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 0 0 1px rgba(0,0,0,.05);
}

@media (max-width: 900px){
  .products__intro{ grid-template-columns:1fr; padding-top:5rem; }
  .products__pin{ height:auto; }
  .products__track{ position:relative; flex-direction:column; align-items:stretch; height:auto; padding:2rem var(--pad-x) 5rem; gap:1.2rem; }
  .card{ width:100%; height:auto; min-height:auto; }
  .card__visual{ aspect-ratio: 4 / 5; }
}

/* ═══════════════════ WAND ═══════════════════ */
.wand{
  position:relative;
  background:#05050a;
  padding:9rem 0 8rem;
  overflow:hidden;
  border-top:1px solid var(--line);
}
.wand__sky{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 80% 10%, rgba(44,107,255,.18) 0%, transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(168,85,247,.10) 0%, transparent 50%);
  pointer-events:none;
}
.wand__head{
  position:relative;
  max-width:var(--max-w);
  margin:0 auto 4rem;
  padding:0 var(--pad-x);
}
.wand__title{
  margin:0;
  display:flex; flex-direction:column; align-items:flex-start; gap:1rem;
  line-height:2;
}
.wand__logo{
  display:block;
  width:clamp(280px, 38vw, 620px);
  /* SVG ships with a lot of empty space above/below the wordmark — crop it
     with object-fit:cover so only the central band (where WAND lives) shows */
  height:clamp(70px, 9vw, 150px);
  object-fit:cover;
  object-position:center;
  filter:drop-shadow(0 0 24px rgba(111, 169, 255, .12));
}
.wand__image small{
  display:block;
  font-family:var(--sans);
  font-weight:300;
  font-size:.85rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

.wand__stage{
  position:relative;
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 var(--pad-x);
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:5rem;
  align-items:center;
}
.wand__image{
  position:relative;
  aspect-ratio: 4 / 5;
  overflow:hidden;
  border-radius:2px;
  transform-style:preserve-3d;
  transition:transform .25s var(--ease-out);
}
.wand__image img{
  width:100%; height:100%;
  object-fit:cover;
  filter:contrast(1.05) saturate(1.05);
}
.wand__hud{
  position:absolute; inset:0;
  pointer-events:none;
  font-family:var(--sans);
  color:#fff;
}
.hud-line{
  position:absolute;
  background:rgba(255,255,255,.7);
  box-shadow:0 0 12px rgba(168,180,255,.6);
}
.hud-line--1{ top:24%; left:6%; width:30%; height:1px; }
.hud-line--2{ top:60%; left:50%; width:1px; height:25%; }
.hud-dot{
  position:absolute; top:24%; left:36%;
  width:8px; height:8px;
  background:#fff; border-radius:50%;
  box-shadow:0 0 0 4px rgba(255,255,255,.18);
  transform:translate(-50%,-50%);
}
.hud-tag{
  position:absolute; top:calc(24% - 22px); left:38%;
  font-size:.65rem; letter-spacing:.2em;
  background:rgba(255,255,255,.1);
  padding:.25rem .55rem;
  border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(8px);
}

.wand__features{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem 2.2rem;
}
.feature{
  border-top:1px solid var(--line-strong);
  padding-top:1.2rem;
}
.feature__img{
  margin:0 0 1.2rem;
  width:100%;
  /* No fixed aspect-ratio: the tablet mock is wider than tall and the
     container should follow the natural image proportions, so nothing
     is cropped. */
  overflow:hidden;
  cursor: zoom-in;
  position:relative;
  transition: opacity .3s;
}
.feature__img::after{
  content:'';
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0);
  transition: background .3s;
  pointer-events:none;
}
.feature__img:hover{ opacity:.92; }
.feature__img:hover::after{ background: rgba(0,0,0,.08); }

/* ─── Image lightbox (WAND screenshots) ─── */
.lightbox{
  position:fixed; inset:0;
  z-index:500;
  display:flex; align-items:center; justify-content:center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity .4s var(--ease-out), visibility 0s linear .4s;
}
.lightbox.is-open{
  opacity:1; visibility:visible;
  pointer-events:auto;
  transition: opacity .4s var(--ease-out), visibility 0s;
}
.lightbox__backdrop{
  position:absolute; inset:0;
  cursor: zoom-out;
}
.lightbox__close{
  position:absolute;
  top:1.4rem; right:1.4rem;
  z-index:5;
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.55rem 1rem;
  background: rgba(255,255,255,.06);
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  font-family: var(--sans);
  font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  transition: background .25s, border-color .25s;
}
.lightbox__close:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.4);
}
.lightbox__frame{
  position:relative;
  z-index:1;
  margin:0;
  max-width: 92vw;
  max-height: 88vh;
  display:flex;
  transform: scale(.94);
  opacity:0;
  transition: transform .5s var(--ease-out), opacity .35s var(--ease-out);
}
.lightbox.is-open .lightbox__frame{
  transform: scale(1);
  opacity: 1;
}
.lightbox__frame img{
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  height: auto;
  display: block;
  box-shadow: 0 30px 80px rgba(0,0,0,.7);
}
.feature__img img{
  width:100%;
  height:auto;
  display:block;
  filter:contrast(1.02) saturate(.96);
}
.feature__n{
  display:inline-block;
  font-size:.7rem; letter-spacing:.18em;
  color:var(--c-blue);
  margin-bottom:.6rem;
  font-weight:500;
}
.feature h4{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.5rem;
  margin:0 0 .5rem;
  letter-spacing:-.005em;
}
.feature p{
  font-size:.92rem;
  line-height:1.6;
  color:var(--ink-soft);
  margin:0;
}

@media (max-width: 900px){
  .wand__stage{ grid-template-columns:1fr; gap:3rem; }
  .wand__features{ grid-template-columns:1fr; gap:1.5rem; }
  /* On mobile, show the whole tablet photo (it's wider than 4:5) without crop */
  .wand__image{
    aspect-ratio: auto;
    height: auto;
    background: transparent;
  }
  .wand__image img{
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

/* ═══════════════════ TAILORED ═══════════════════ */
.tailored{
  position:relative;
  background:var(--bg);
  padding:0;
}
.tailored__sticky{
  position:relative;
  display:flex;
  align-items:stretch;
  min-height: 100vh;
}

.tailored__image{
  position:relative;
  width:48%; height:100vh;
  overflow:hidden;
  flex-shrink:0;
}
.tailored__image img,
.tailored__image .tailored__media{
  width:100%; height:100%;
  object-fit:cover;
  /* Anchor to the top — if the container crops vertically, the cut is on the bottom */
  object-position:center top;
  transform:scale(1.1);
  transform-origin:center top;
  filter:grayscale(.2) contrast(1.05);
  will-change:transform;
}
.tailored__image .tailored__media{
  display:block;
  pointer-events:none;
}
.tailored__bracket{ position:absolute; width:44px; height:44px; }
.tailored__bracket::before, .tailored__bracket::after{
  content:''; position:absolute; background:var(--ink);
}
.tailored__bracket::before{ width:100%; height:1px; }
.tailored__bracket::after { width:1px; height:100%; }
.tailored__bracket--tl{ top:1.4rem; left:1.4rem; }
.tailored__bracket--tr{ top:1.4rem; right:1.4rem; }
.tailored__bracket--tr::before{ right:0; }
.tailored__bracket--tr::after { right:0; }
.tailored__bracket--bl{ bottom:1.4rem; left:1.4rem; }
.tailored__bracket--bl::before{ bottom:0; }
.tailored__bracket--bl::after { top:auto; bottom:0; }
.tailored__bracket--br{ bottom:1.4rem; right:1.4rem; }
.tailored__bracket--br::before{ bottom:0; right:0; }
.tailored__bracket--br::after { bottom:0; right:0; }

.tailored__text{
  position:relative;
  width:52%;
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding: 0 clamp(2rem, 5vw, 6rem);
}
.tailored__phrase{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.8rem, 3.4vw, 3.4rem);
  line-height:1.18;
  letter-spacing:-.005em;
  margin:0;
  color:var(--ink-mute);
}
.tailored__phrase span{
  display:inline;
  transition:color .3s var(--ease-out);
  margin-right:.18em;
}
.tailored__phrase .italic{ font-style:italic; }
.tailored__phrase span.is-on{ color:var(--ink); }

@media (max-width: 900px){
  .tailored__sticky{ flex-direction:column; min-height:auto; }
  .tailored__image{ position:relative; width:100%; height:60vh; }
  .tailored__text{ position:relative; width:100%; height:auto; padding:4rem var(--pad-x); }
}

/* ═══════════════════ SUSTAINABILITY ═══════════════════ */
.sustain{
  background:var(--bg-light);
  color:#0a0a0a;
  padding:9rem 0;
  border-top:1px solid rgba(0,0,0,.08);
}
.sustain__inner{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 var(--pad-x);
}
.sustain .kicker{ color:#777; }

.sustain__row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:4rem;
  align-items:center;
  margin-top:2rem;
}
.sustain__big{
  position:relative;
}
.counter{
  display:flex; align-items:flex-end;
  font-family:var(--serif);
  font-weight:400;
  line-height:.95;
  color:#0a0a0a;
  padding-bottom:1rem;
}
.counter .num{
  font-size:clamp(8rem, 24vw, 24rem);
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  line-height:.95;
}
.counter .pct{
  font-size:clamp(3rem, 8vw, 7rem);
  font-style:italic;
  color:#999;
  line-height:1;
  margin-bottom:.6em;
  margin-left:.55em;
}
.sustain__label{
  font-size:1rem;
  color:#555;
  max-width:30ch;
  margin:2.4rem 0 0;
  line-height:1.5;
}
.sustain__body h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.2rem, 4vw, 3.4rem);
  line-height:1.05;
  letter-spacing:-.01em;
  margin:0 0 1.5rem;
}
.sustain__body h3 em{ font-style:italic; color:#777; }
.sustain__body p{
  font-size:1rem;
  line-height:1.7;
  color:#444;
  max-width:42ch;
  margin:0 0 2rem;
}
.sustain__list{ list-style:none; padding:0; margin:0; }
.sustain__list li{
  display:flex; align-items:flex-start; gap:1rem;
  padding:1rem 0;
  border-top:1px solid rgba(0,0,0,.1);
  font-size:.94rem;
  color:#333;
}
.sustain__list li span{
  flex-shrink:0;
  width:6px; height:6px; border-radius:50%;
  background:#0a0a0a;
  margin-top:.55rem;
}

@media (max-width: 900px){
  .sustain__row{ grid-template-columns:1fr; gap:3rem; }
}

/* ═══════════════════ GALLERY ═══════════════════ */
.gallery{
  background:var(--bg);
  padding:6rem 0;
  overflow:hidden;
  border-top:1px solid var(--line);
}
.gallery__row{ overflow:hidden; }
.gallery__track{
  display:flex; gap:1.2rem;
  white-space:nowrap;
  will-change:transform;
}
.gallery__track figure{
  flex:0 0 auto;
  margin:0;
  width:clamp(280px, 26vw, 420px);
  height:clamp(360px, 32vw, 520px);
  overflow:hidden;
  border-radius:2px;
}
.gallery__track img{
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(.95);
  transition:transform 1.2s var(--ease-out);
}
.gallery__track figure:hover img{ transform:scale(1.1); }

/* Image 11 in the gallery is cropped from the bottom so the model's head
   stays visible. Anchor the cover crop to the top of the photo. */
.gallery__track img[src*="gallery/11.jpg"]{
  object-position: center top;
}

/* ═══════════════════ GROW TOGETHER ═══════════════════ */
.grow{
  background:var(--bg);
  padding:9rem 0;
  border-top:1px solid var(--line);
}
.grow__inner{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 var(--pad-x);
}
.grow__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(3rem, 7vw, 7rem);
  line-height:.96;
  margin:0 0 4rem;
  letter-spacing:-.02em;
}
.grow__title em{ font-style:italic; color:var(--ink-soft); display:block; }

.grow__cols{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:3rem;
  padding-top:3rem;
  border-top:1px solid var(--line);
}
.grow__cols h4{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.6rem;
  margin:0 0 1rem;
}
.grow__cols p{
  color:var(--ink-soft);
  line-height:1.65;
  font-size:.95rem;
  margin:0;
  max-width:32ch;
}
@media (max-width: 900px){
  .grow__cols{ grid-template-columns:1fr; gap:2rem; }
}

/* ═══════════════════ CTA / FOOTER ═══════════════════ */
.cta{
  position:relative;
  background:#040406;
  padding:10rem 0 4rem;
  overflow:hidden;
  border-top:1px solid var(--line);
}
.cta__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
  opacity:.55;
  pointer-events:none;
}
.cta__inner{
  position:relative; z-index:2;
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 var(--pad-x);
  text-align:center;
}
.cta__pre{
  font-size:.78rem; letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin:0 0 2rem;
}
.cta__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.75rem, 5.5vw, 6.5rem);
  line-height:.92;
  letter-spacing:-.025em;
  margin:0 0 3.5rem;
}
.cta__title .line{ display:block; overflow:hidden; }
.cta__title .line + .line{ margin-top:.35em; }
.cta__title .line span{ display:inline-block; opacity:0; }
.js-ready .cta__title .line span{ opacity:1; }
.cta__title .italic{ font-style:italic; color:var(--ink-soft); }

.cta__actions{
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
  margin-bottom:5rem;
}

/* ─── CONTACT FORM (inside .cta) ─── */
.cta-form{
  position:relative;
  max-width:780px;
  margin: 0 auto 5rem;
  text-align:left;
  padding: clamp(2rem, 4vw, 3.4rem) clamp(1.4rem, 3.5vw, 3rem);
  background: rgba(4, 4, 6, .82);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.cta-form__intro{
  text-align:center;
  margin-bottom:3rem;
}
.cta-form__intro p{
  font-size:1rem;
  line-height:1.6;
  color:var(--ink-soft);
  max-width:48ch;
  margin:1rem auto 0;
}

.cta-form__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:2.4rem 2rem;
}

/* Field */
.field{
  position:relative;
  display:block;
  cursor:text;
}
.field--full{ grid-column: 1 / -1; }
.field__label{
  position:absolute;
  left:0;
  top:1rem;
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-mute);
  pointer-events:none;
  transform-origin:left center;
  transition:transform .35s var(--ease-out), color .25s, top .35s var(--ease-out);
}
.field__label i{ font-style:normal; color:var(--c-red); margin-left:.15em; }

.field input,
.field textarea{
  width:100%;
  background:transparent;
  border:0;
  border-radius:0;
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.05rem;
  line-height:1.5;
  padding:1rem 0 .8rem;
  outline:none;
  resize:vertical;
  caret-color:var(--ink);
}
.field textarea{ min-height:7rem; max-height:24rem; }
.field input::placeholder,
.field textarea::placeholder{ color:transparent; }

.field__line{
  display:block; position:relative;
  height:1px;
  background:rgba(255,255,255,.18);
  overflow:hidden;
}
.field__line::after{
  content:''; position:absolute;
  left:0; top:0; bottom:0; width:0%;
  background:var(--ink);
  transition:width .45s var(--ease-out);
}

/* Floating label: lift when focused or filled.
   The label sits BEFORE the input in the DOM, so we use :has() on the parent
   instead of the sibling combinator. */
.field input:focus + .field__line::after,
.field textarea:focus + .field__line::after{ width:100%; }

.field:focus-within .field__label,
.field:has(input:not(:placeholder-shown)) .field__label,
.field:has(textarea:not(:placeholder-shown)) .field__label{
  transform: translateY(-22px) scale(.85);
  color: var(--ink);
}

/* Chrome / Safari autofill — kill the yellow/lavender background and keep ink color */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field textarea:-webkit-autofill,
.field textarea:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  box-shadow: 0 0 0 1000px transparent inset;
  transition: background-color 9999s ease-out, color 9999s ease-out;
}

/* Native-validation styling: red line + red label for invalid */
.cta-form.is-submitted .field input:invalid + .field__line,
.cta-form.is-submitted .field textarea:invalid + .field__line{
  background: rgba(239, 68, 68, .55);
}
.cta-form.is-submitted .field:has(input:invalid) .field__label,
.cta-form.is-submitted .field:has(textarea:invalid) .field__label{
  color: var(--c-red);
}

/* Checkbox field */
.field--check{
  display:flex; align-items:flex-start; gap:.85rem;
  cursor:pointer;
  padding-top:.4rem;
  font-size:.85rem;
  line-height:1.5;
  color:var(--ink-soft);
}
.field--check input{
  position:absolute; opacity:0; pointer-events:none;
  width:0; height:0;
}
.field__box{
  flex-shrink:0;
  width:18px; height:18px; margin-top:.1rem;
  border:1px solid rgba(255,255,255,.35);
  background:transparent;
  position:relative;
  transition:border-color .25s, background .25s;
}
.field__box::after{
  content:''; position:absolute;
  inset:3px;
  background:var(--ink);
  transform:scale(0);
  transition:transform .25s var(--ease-out);
}
.field--check:hover .field__box{ border-color:var(--ink); }
.field--check input:checked ~ .field__box{ border-color:var(--ink); }
.field--check input:checked ~ .field__box::after{ transform:scale(1); }
.field--check a{ color:var(--ink); border-bottom:1px solid var(--ink-mute); }
.cta-form.is-submitted .field--check input:invalid ~ .field__box{
  border-color: var(--c-red);
}

/* Footer of form */
.cta-form__foot{
  margin-top:2.4rem;
  display:flex; flex-direction:column; align-items:center; gap:1.2rem;
  text-align:center;
}
.cta-form__alt{
  font-size:.78rem;
  letter-spacing:.06em;
  color:var(--ink-mute);
  margin:0;
}
.cta-form__alt a{
  color:var(--ink);
  border-bottom:1px solid var(--ink-mute);
  padding-bottom:1px;
  transition:border-color .25s;
}
.cta-form__alt a:hover{ border-color:var(--ink); }

/* Success message — replaces form after submit */
.cta-form__success{
  text-align:center;
  padding:3rem 1rem;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.02);
}
.cta-form__success h3{
  font-family:var(--serif);
  font-weight:400;
  font-style:italic;
  font-size:clamp(2rem, 4vw, 3.4rem);
  line-height:1;
  margin:.8rem 0 1rem;
  color:var(--ink);
}
.cta-form__success p{
  color:var(--ink-soft);
  max-width:42ch;
  margin:0 auto;
  line-height:1.6;
}
.cta-form.is-success .cta-form__grid,
.cta-form.is-success .cta-form__foot,
.cta-form.is-success .cta-form__intro{ display:none; }

/* Error banner — non-destructive: form stays so the user can retry */
.cta-form__error{
  margin-top:1.4rem;
  padding:1.2rem 1.4rem;
  border:1px solid rgba(255,100,100,.35);
  background:rgba(255,80,80,.06);
  color:var(--ink-soft);
}
.cta-form__error .kicker{ color:#ff7a7a; }
.cta-form__error p{
  margin:.5rem 0 0;
  line-height:1.55;
  color:var(--ink);
}

/* Loading state */
.cta-form.is-loading .cta-form__submit{
  opacity:.55;
  pointer-events:none;
}

@media (max-width: 720px){
  .cta-form__grid{ grid-template-columns: 1fr; gap:1.8rem; }
}
.btn-primary, .btn-ghost{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:1.1rem 1.8rem;
  border-radius:999px;
  font-size:.85rem; letter-spacing:.06em;
  text-transform:uppercase;
  transition:all .35s var(--ease-out);
  border:1px solid var(--ink);
}
.btn-primary{ background:var(--ink); color:#000; }
.btn-primary:hover{ background:transparent; color:var(--ink); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:rgba(255,255,255,.3); }
.btn-ghost:hover{ border-color:var(--ink); }

.cta__grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:2rem 4rem;
  padding-top:3rem;
  border-top:1px solid var(--line);
  text-align:center;
}
.cta__grid > div{
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  font-size:.92rem;
}
.cta__grid span{
  font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.cta__grid a{ color:var(--ink); }

/* Social link: icon on top + label + handle */
.cta__social{
  display:inline-flex; flex-direction:column; align-items:center;
  gap:.55rem;
  padding:.4rem .6rem;
  color:var(--ink);
  transition: color .25s, transform .35s var(--ease-out);
}
.cta__social:hover{ transform: translateY(-2px); }
.cta__icon{
  width:42px; height:42px;
  padding:.5rem;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  color:var(--ink);
  transition: border-color .25s, background .25s, color .25s;
}
.cta__social:hover .cta__icon{
  border-color:var(--ink);
  background:rgba(255,255,255,.06);
}
.cta__social span{
  font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.cta__social em{
  font-style:normal;
  font-size:.95rem;
  color:var(--ink);
}
@media (max-width: 720px){
  .cta__grid{ grid-template-columns:repeat(2,1fr); }
}

.footer{
  position:relative; z-index:2;
  max-width:var(--max-w);
  margin:5rem auto 0;
  padding:2rem var(--pad-x) 0;
  display:flex; justify-content:space-between; gap:1rem;
  font-size:.74rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-mute);
  border-top:1px solid var(--line);
}
@media (max-width: 720px){
  .footer{ flex-direction:column; }
}

/* ═══════════════════ PRODUCT PAGE ═══════════════════ */
.product-page{ background:var(--bg); color:var(--ink); }

.breadcrumb{
  max-width:var(--max-w);
  margin:0 auto;
  padding: 7rem var(--pad-x) 0;
  display:flex; align-items:center; gap:.7rem;
  font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.breadcrumb a{ color:var(--ink-soft); transition:color .25s; }
.breadcrumb a:hover{ color:var(--ink); }
.breadcrumb span[aria-hidden]{ opacity:.4; }
.breadcrumb .is-current{ color:var(--ink); }

/* HERO */
.prod-hero{
  max-width:var(--max-w);
  margin:0 auto;
  padding:3rem var(--pad-x) 6rem;
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap:5rem;
  align-items:center;
  min-height:80vh;
}
.prod-hero__col--text{ display:flex; flex-direction:column; gap:1.8rem; }
.prod-hero__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(4rem, 11vw, 11rem);
  line-height:.88;
  margin:0;
  letter-spacing:-.02em;
}
.prod-hero__title em{
  font-style:italic; color:var(--ink-soft);
  font-size:.45em; display:block;
  letter-spacing:.04em;
  margin-bottom:.4rem;
}
.prod-hero__lede{
  font-size:clamp(1rem, 1.4vw, 1.2rem);
  line-height:1.6;
  color:var(--ink-soft);
  max-width:46ch;
  margin:0;
}
.prod-hero__lede strong{ color:var(--ink); font-weight:500; }
.prod-hero__meta{
  display:flex; flex-wrap:wrap; gap:1.6rem;
  font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft);
  margin-top:.6rem;
}
.prod-hero__meta div span{ color:var(--ink-mute); display:block; margin-bottom:.25rem; font-size:.7rem; letter-spacing:.18em; }

.prod-hero__frame{
  position:relative;
  aspect-ratio: 4 / 5;
  overflow:hidden;
  transform-style:preserve-3d;
}
.prod-hero__frame img{
  width:100%; height:100%; object-fit:cover;
  filter:contrast(1.05) saturate(.96);
}
.prod-hero__bracket{ position:absolute; width:44px; height:44px; }
.prod-hero__bracket::before, .prod-hero__bracket::after{
  content:''; position:absolute; background:var(--ink);
}
.prod-hero__bracket::before{ width:100%; height:1px; }
.prod-hero__bracket::after { width:1px; height:100%; }
.prod-hero__bracket--tl{ top:1rem; left:1rem; }
.prod-hero__bracket--tr{ top:1rem; right:1rem; }
.prod-hero__bracket--tr::before{ right:0; }
.prod-hero__bracket--tr::after { right:0; }
.prod-hero__bracket--bl{ bottom:1rem; left:1rem; }
.prod-hero__bracket--bl::before{ bottom:0; }
.prod-hero__bracket--bl::after { bottom:0; }
.prod-hero__bracket--br{ bottom:1rem; right:1rem; }
.prod-hero__bracket--br::before{ bottom:0; right:0; }
.prod-hero__bracket--br::after { bottom:0; right:0; }

@media (max-width: 900px){
  .prod-hero{ grid-template-columns:1fr; gap:3rem; padding-top:2rem; min-height:auto; }
}

/* PROMISE */
.prod-promise{
  background:var(--bg-light);
  color:#0a0a0a;
  padding:8rem 0;
}
.prod-promise__inner{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 var(--pad-x);
}
.prod-promise .kicker{ color:#777; }
.prod-promise h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.4rem, 5.5vw, 5rem);
  line-height:1;
  margin:0 0 4rem;
  letter-spacing:-.015em;
  color:#0a0a0a;
}
.prod-promise h2 em{ font-style:italic; color:#888; }
.prod-stats{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:2rem;
  padding-top:3rem;
  border-top:1px solid rgba(0,0,0,.1);
}
.prod-stats .stat b{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(3rem, 6vw, 6rem);
  line-height:1;
  color:#0a0a0a;
}
.prod-stats .stat span{
  font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase;
  color:#666;
  display:block; margin-top:.6rem;
}
@media (max-width: 700px){
  .prod-stats{ grid-template-columns:repeat(2, 1fr); }
}

/* INGREDIENTS */
.prod-ingredients{
  max-width:var(--max-w);
  margin:0 auto;
  padding:9rem var(--pad-x);
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:5rem;
  align-items:center;
}
.prod-ingredients__media{
  aspect-ratio: 4 / 5;
  overflow:hidden;
}
.prod-ingredients__media img{
  width:100%; height:100%; object-fit:cover;
  filter:contrast(1.05) saturate(1.05);
}
.prod-ingredients__body h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.4rem, 4.5vw, 4rem);
  line-height:1.02;
  letter-spacing:-.01em;
  margin:0 0 2rem;
}
.prod-ingredients__body h2 em{ font-style:italic; color:var(--ink-soft); }
.ingredient-list{ list-style:none; padding:0; margin:0 0 2rem; }
.ingredient-list li{
  display:flex; align-items:center; gap:1rem;
  padding:1rem 0;
  border-top:1px solid var(--line);
  font-size:1rem;
  color:var(--ink);
}
.ingredient-list li:last-child{ border-bottom:1px solid var(--line); }
.ingredient-list .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--ink); flex-shrink:0;
}
.muted{ color:var(--ink-soft); font-size:.95rem; line-height:1.6; max-width:42ch; margin:0; }

@media (max-width: 900px){
  .prod-ingredients{ grid-template-columns:1fr; gap:3rem; padding:5rem var(--pad-x); }
}

/* HOW TO */
.prod-howto{
  background:#05050a;
  border-top:1px solid var(--line);
  padding:9rem 0;
}
.prod-howto__head{
  max-width:var(--max-w);
  margin:0 auto 5rem;
  padding:0 var(--pad-x);
}
.prod-howto__head h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.6rem, 5.5vw, 5rem);
  line-height:1;
  margin:0;
}
.prod-howto__head h2 em{ font-style:italic; color:var(--ink-soft); }
.steps{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 var(--pad-x);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2.5rem;
  list-style:none;
}
.steps li{
  border-top:1px solid var(--line-strong);
  padding-top:1.5rem;
}
.steps__n{
  font-family:var(--serif);
  font-size:3rem; font-weight:400;
  line-height:1;
  color:var(--ink-mute);
  display:block; margin-bottom:1rem;
}
.steps h4{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.6rem;
  margin:0 0 .8rem;
  color:var(--ink);
}
.steps p{
  font-size:.95rem;
  line-height:1.6;
  color:var(--ink-soft);
  margin:0;
}
@media (max-width: 900px){
  .steps{ grid-template-columns:1fr; gap:2rem; }
}

/* SPECS */
.prod-specs{
  background:var(--bg);
  padding:8rem 0;
}
.prod-specs__inner{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 var(--pad-x);
}
.prod-specs table{
  width:100%;
  border-collapse:collapse;
  margin-top:2rem;
}
.prod-specs th,
.prod-specs td{
  padding:1.4rem 0;
  border-top:1px solid var(--line);
  text-align:left;
  vertical-align:top;
  font-size:1rem;
}
.prod-specs tr:last-child th,
.prod-specs tr:last-child td{ border-bottom:1px solid var(--line); }
.prod-specs th{
  font-family:var(--sans);
  font-weight:400;
  font-size:.78rem; letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-mute);
  width:30%;
}
.prod-specs td{ color:var(--ink); }

/* RELATED */
.prod-related{
  max-width:var(--max-w);
  margin:0 auto;
  padding:8rem var(--pad-x);
  border-top:1px solid var(--line);
}
.prod-related__head{ margin-bottom:3rem; }
.prod-related__head h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.2rem, 4.5vw, 4rem);
  line-height:1;
  margin:0;
}
.prod-related__head h2 em{ font-style:italic; color:var(--ink-soft); }
.prod-related__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1rem;
}
.rel-card{
  position:relative;
  display:block;
  padding:2.2rem 2rem 2rem;
  border:1px solid var(--line);
  background:rgba(255,255,255,.015);
  transition:background .35s, border-color .35s, transform .5s var(--ease-out);
  min-height:240px;
}
.rel-card:hover{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.25);
}
.rel-card__n{
  font-size:.7rem; letter-spacing:.2em;
  color:var(--ink-mute);
  display:block; margin-bottom:1.5rem;
}
.rel-card h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:2rem;
  line-height:1;
  margin:0 0 1rem;
}
.rel-card h3 em{ font-style:italic; color:var(--ink-soft); margin-right:.25em; }
.rel-card p{
  color:var(--ink-soft);
  font-size:.95rem;
  line-height:1.5;
  margin:0;
  max-width:30ch;
}
.rel-card__arrow{
  position:absolute;
  bottom:1.6rem; right:1.6rem;
  font-size:1.4rem;
  color:var(--ink-soft);
  transition:transform .4s var(--ease-out), color .3s;
}
.rel-card:hover .rel-card__arrow{ transform:translateX(8px); color:var(--ink); }

@media (max-width: 900px){
  .prod-related__grid{ grid-template-columns:1fr; }
}

/* ═══════════════════ COURSES / FORMAZIONE — light style ═══════════════════ */
.courses{
  background:var(--bg-light);
  color:#1a1a1a;
  padding:9rem 0;
  border-top:1px solid rgba(0,0,0,.08);
}
.courses__inner{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 var(--pad-x);
}
.courses .kicker{ color:#777; }

.courses__head{
  display:flex; flex-direction:column; gap:1.6rem;
  margin-bottom:5rem;
  max-width:60ch;
}
.courses__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(3rem, 7vw, 7rem);
  line-height:.96;
  margin:0;
  letter-spacing:-.02em;
  color:#0a0a0a;
  /* Disable fi/fl ligatures — Playfair Display merges "fi" into a single glyph */
  font-variant-ligatures: no-common-ligatures;
  font-feature-settings: "liga" 0, "clig" 0;
}
.courses__title em{ font-style:italic; color:#888; }
.courses__lede{
  font-size:1.05rem;
  line-height:1.65;
  color:#444;
  max-width:54ch;
  margin:0;
}

.courses__groups{
  display:flex; flex-direction:column;
  gap:5rem;
}
.course-group{ }
.course-group__head{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  width:100%;
  padding:1.4rem 0;
  margin:0;
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(0,0,0,.25);
  text-align:left;
  cursor:pointer;
  color:#0a0a0a;
  font:inherit;
  transition: border-color .25s;
}
.course-group__head:hover{ border-bottom-color:#0a0a0a; }
.course-group__title{
  display:flex; flex-direction:column; gap:.4rem;
  flex:1; min-width:0;
}
.course-group__label{
  font-family:var(--serif);
  font-weight:400;
  font-style:italic;
  font-size:clamp(1.6rem, 2.6vw, 2.4rem);
  line-height:1;
  color:#0a0a0a;
  margin:0;
  letter-spacing:-.01em;
}
.course-group__intro{
  font-size:.85rem;
  letter-spacing:.06em;
  color:#666;
  margin:0;
}
.course-group__chevron{
  flex-shrink:0;
  width:42px; height:42px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.3);
  display:inline-flex; align-items:center; justify-content:center;
  color:#0a0a0a;
  transition: transform .5s var(--ease-out), border-color .25s, background .25s;
}
.course-group__head:hover .course-group__chevron{
  border-color:#0a0a0a;
  background:rgba(0,0,0,.04);
}
.course-group.is-open .course-group__chevron{
  transform: rotate(180deg);
}

/* Collapsible body — max-height transition (robust across browsers) */
.course-group__body{
  max-height:0;
  overflow:hidden;
  transition: max-height .55s var(--ease-out);
}
.course-group.is-open .course-group__body{
  max-height: 1600px;
}
.course-group .course-list{ margin:0; }

.course-list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column;
}
.course-item{
  display:grid;
  grid-template-columns: 70px 1fr auto 60px;
  align-items:center;
  gap:1.4rem;
  padding:1.6rem 0;
  border-bottom:1px solid rgba(0,0,0,.1);
  cursor:pointer;
  position:relative;
  color:#0a0a0a;
  transition:color .25s, padding .35s var(--ease-out);
}
.course-item::before{
  content:''; position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px; background:#0a0a0a;
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease-out);
}
.course-item:hover{ padding-left:.8rem; }
.course-item:hover::before{ transform:scaleX(1); }
.course-item:hover .course-item__arrow{ transform:translateX(6px); }

.course-item__n{
  font-family:var(--sans);
  font-size:.7rem; letter-spacing:.2em;
  color:#999;
}
.course-item__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.3rem, 2.2vw, 1.9rem);
  line-height:1.1;
  letter-spacing:-.005em;
  color:#0a0a0a;
  margin:0;
}
.course-item__meta{
  font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase;
  color:#666;
}
.course-item__arrow{
  display:inline-flex; align-items:center; justify-content:flex-end;
  font-size:1.2rem; color:#666;
  transition:transform .4s var(--ease-out), color .25s;
}
.course-item:hover .course-item__arrow{ color:#0a0a0a; }

@media (max-width: 720px){
  .course-item{ grid-template-columns: 38px 1fr auto; row-gap:.4rem; }
  .course-item__arrow{ grid-column:3; grid-row:1; }
  .course-item__meta{ grid-column:2 / -1; grid-row:2; }
}

/* COURSE POPUP variant — reuses .popup but the body is a stack of images */
.pop-course{
  display:flex; flex-direction:column;
  background:#0a0a0c;
}
.pop-course__hero{
  position:relative;
  margin:0;
  width:100%;
  aspect-ratio: 16 / 10;
  max-height: 44dvh;
  overflow:hidden;
  background:#000;
}
.pop-course__hero img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  filter:contrast(1.04) saturate(.96);
}
.pop-course__hero::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(10,10,12,.55) 90%, #0a0a0c 100%);
  pointer-events:none;
}
.pop-course__head{
  position:relative;
  padding:clamp(1.6rem, 4vw, 2.6rem) clamp(1.4rem, 4vw, 2.6rem) clamp(1.4rem, 3vw, 2rem);
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex; flex-direction:column; gap:.8rem;
  padding-right:9rem; /* room for close btn */
}
.pop-course__kicker{
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-mute);
}
.pop-course__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.2rem, 5.5vw, 4rem);
  line-height:1;
  letter-spacing:-.015em;
  margin:0;
  color:var(--ink);
}
.pop-course__meta{
  display:flex; flex-wrap:wrap; gap:1.2rem;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft);
}
.pop-course__meta span{ color:var(--ink-mute); margin-right:.4rem; }
.pop-course__pages{
  display:flex; flex-direction:column;
}
.pop-course__pages img{
  display:block;
  width:100%; height:auto;
  background:#0a0a0c;
}
.pop-course__subtitle{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1rem, 1.6vw, 1.3rem);
  color:var(--ink-soft);
  margin:.4rem 0 0;
}

/* Hide the meta info block in all course popups */
.pop-course__info{ display:none !important; }

/* Meta grid (Durata / Docenti / A chi si rivolge / etc.) */
.pop-course__meta-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:1.2rem 2rem;
  margin:0;
}
.pop-course__meta-grid > div{
  display:flex; flex-direction:column;
  gap:.35rem;
}
.pop-course__meta-grid dt{
  font-family:var(--sans);
  font-weight:500;
  font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin:0;
}
.pop-course__meta-grid dd{
  font-family:var(--serif);
  font-size:1rem;
  line-height:1.45;
  color:var(--ink);
  margin:0;
}

/* Objective list (with checkmarks) */
.pop-course__obj{
  list-style:none;
  padding:0;
  margin:1.2rem 0 0;
  display:flex; flex-direction:column;
}
.pop-course__obj li{
  display:flex; gap:1rem;
  padding:1rem 0;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:.96rem;
  line-height:1.55;
  color:var(--ink);
}
.pop-course__obj li:last-child{ border-bottom:1px solid rgba(255,255,255,.06); }
.pop-course__obj .pop-check{
  flex-shrink:0;
  width:24px; height:24px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  color:#9be88f;
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:.1rem;
}
.pop-course__obj .pop-check svg{ width:14px; height:14px; }

/* Multi-day program */
.pop-course__days{
  display:flex; flex-direction:column;
  gap:2rem;
  margin-top:1.2rem;
}
.pop-course__day{
  padding:1.6rem 1.6rem;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
}
.pop-course__day h4{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.35rem;
  letter-spacing:-.005em;
  margin:0 0 1rem;
  color:var(--ink);
}
.pop-course__day ul{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:.6rem;
}
.pop-course__day li{
  font-size:.92rem;
  line-height:1.6;
  color:var(--ink-soft);
  padding-left:1.2rem;
  position:relative;
}
.pop-course__day li::before{
  content:'';
  position:absolute;
  left:0; top:.65rem;
  width:6px; height:6px;
  background:var(--ink);
  border-radius:50%;
}

/* Topics list (Sartoriale) */
.pop-course__topics{
  list-style:none; padding:0; margin:1.2rem 0 0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:.5rem 1.4rem;
}
.pop-course__topics li{
  font-family:var(--serif);
  font-size:1.05rem;
  color:var(--ink);
  padding:.7rem 0;
  border-top:1px solid rgba(255,255,255,.06);
}
.pop-course__topics li:first-child{ border-top:none; }

/* ═══════════════════ PRODUCT POPUP ═══════════════════ */
.popup{
  position:fixed; inset:0;
  z-index:400;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(.6rem, 3vw, 2rem);
}
.popup.is-open{ pointer-events:auto; }

.popup__backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;
  transition:opacity .45s var(--ease-out);
}
.popup.is-open .popup__backdrop{ opacity:1; }

.popup__panel{
  position:relative;
  width:min(880px, 100%);
  max-height:100%;
  background:#0a0a0c;
  color:var(--ink);
  overflow-y:auto;
  overflow-x:hidden;
  border:1px solid rgba(255,255,255,.08);
  opacity:0;
  transform:translateY(24px) scale(.97);
  transition:opacity .45s var(--ease-out), transform .55s var(--ease-out);
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.25) transparent;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.popup__panel::-webkit-scrollbar{ width:6px; }
.popup__panel::-webkit-scrollbar-track{ background:transparent; }
.popup__panel::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.2); border-radius:3px; }
.popup.is-open .popup__panel{
  opacity:1;
  transform:translateY(0) scale(1);
}

.popup__close{
  position:absolute;
  top:1rem; right:1rem;
  z-index:5;
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.55rem 1rem;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .25s, border-color .25s;
  font-family:var(--sans);
}
.popup__close:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.4); }
.popup__close svg{ stroke:currentColor; }

/* slim scroll-progress bar at top of panel */
.popup__progress{
  position:sticky;
  top:0;
  left:0;
  height:2px;
  background:rgba(255,255,255,.08);
  z-index:4;
}
.popup__progress span{
  display:block; height:100%; width:0%;
  background:var(--ink);
  transition:width .1s linear;
}

.popup__content{ padding:0; }

/* ── popup content blocks ── */
.pop-hero{
  position:relative;
  width:100%;
  aspect-ratio: 2 / 1;
  max-height: 40dvh;
  overflow:hidden;
  background:var(--swatch, #1a1a1a);
}
.pop-hero img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center;
  filter:contrast(1.05) saturate(.95);
}

/* Oxygen popup ONLY: keep full-width cover but anchor the crop 30% below
   the vertical centre, so the lower-middle band of the photo is shown. */
.popup[data-product-key="oxygen"] .pop-hero img{
  object-fit:cover;
  object-position:center 80%;
}
.pop-hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 30%, rgba(10,10,12,.5) 75%, #0a0a0c 100%);
}
.pop-hero__inner{
  position:absolute; inset:0;
  z-index:2;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(1.2rem, 3.5vw, 2.4rem);
  gap:.7rem;
}
.pop-kicker{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft);
}
.pop-hero__num{
  font-family:var(--sans);
  font-size:.78rem; letter-spacing:.2em;
  color:var(--ink-soft);
}
.pop-title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(3.4rem, 9vw, 7rem);
  line-height:.88;
  letter-spacing:-.02em;
  margin:0;
  color:var(--ink);
}
.pop-title em{
  font-style:italic;
  color:var(--ink-soft);
}
.pop-tagline{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.05rem, 1.5vw, 1.3rem);
  color:var(--ink-soft);
  margin:0;
}

.pop-section{
  padding: clamp(2.2rem, 4vw, 3.4rem) clamp(1.6rem, 4vw, 3rem);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.pop-section:last-child{ border-bottom:none; }
.pop-section h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.8rem, 3vw, 2.6rem);
  line-height:1;
  margin:0 0 1.6rem;
  letter-spacing:-.01em;
}
.pop-section h3 em{ font-style:italic; color:var(--ink-soft); }
.pop-section p{
  font-size:1rem;
  line-height:1.7;
  color:var(--ink-soft);
  margin:0 0 .8rem;
  max-width:60ch;
}
.pop-section p strong{ color:var(--ink); font-weight:500; }

.pop-meta{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1.2rem 2rem;
  margin-top:1.2rem;
}
.pop-meta div{ display:flex; flex-direction:column; gap:.25rem; }
.pop-meta dt, .pop-meta span:first-child{
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-mute);
}
.pop-meta dd, .pop-meta span:last-child{
  font-family:var(--serif);
  font-size:1.1rem;
  color:var(--ink);
  margin:0;
}

/* Principi attivi grid */
.pop-ingredients{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:1.2rem;
  margin-top:1.2rem;
}
.pop-ingredient{
  padding:1.2rem 1.2rem 1.4rem;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.015);
  border-radius:2px;
  display:flex; flex-direction:column;
}
.pop-ingredient h4{
  font-family:var(--sans);
  font-weight:500;
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
  margin:0 0 .8rem;
  padding-bottom:.8rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.pop-ingredient p{ font-size:.9rem; line-height:1.55; margin:0; color:var(--ink-soft); }
.pop-ingredient__icon{
  width:50%;
  aspect-ratio: 4 / 3;
  overflow:hidden;
  margin:0 0 1rem;
  background:#000;
  border:1px solid rgba(255,255,255,.08);
  border-radius:2px;
}
.pop-ingredient__icon img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.95);
  transition:transform .8s var(--ease-out);
}
.pop-ingredient--has-icon:hover .pop-ingredient__icon img{
  transform:scale(1.06);
}
.pop-ingredient__text{ display:flex; flex-direction:column; }

.pop-extra-ingredients{ margin-top:2.4rem; }
.pop-extra-ingredients h4{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.4rem;
  margin:0 0 1rem;
  color:var(--ink);
}
.pop-extra-ingredients ul{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:.8rem 1.6rem; }
.pop-extra-ingredients li{
  font-size:.9rem; line-height:1.55;
  color:var(--ink-soft);
  padding-left:1.2rem; position:relative;
}
.pop-extra-ingredients li::before{
  content:''; position:absolute; left:0; top:.6rem;
  width:6px; height:6px; border-radius:50%;
  background:var(--ink);
}
.pop-extra-ingredients li strong{ color:var(--ink); font-weight:500; }

/* Vantaggi */
.pop-advantages{ list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.4rem; }
.pop-advantages li{
  display:flex; gap:1.1rem;
  padding:1.1rem 0;
  border-top:1px solid rgba(255,255,255,.06);
}
.pop-advantages li:last-child{ border-bottom:1px solid rgba(255,255,255,.06); }
.pop-advantages .pop-check{
  flex-shrink:0;
  width:24px; height:24px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  color:#9be88f;
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:.15rem;
}
.pop-advantages .pop-check svg{ width:14px; height:14px; }
.pop-advantages b{
  display:block;
  font-family:var(--serif);
  font-weight:400;
  font-size:1.2rem;
  color:var(--ink);
  margin-bottom:.3rem;
}
.pop-advantages span{
  font-size:.94rem; line-height:1.55;
  color:var(--ink-soft);
}

/* Usage steps (Now) */
.pop-usage{ list-style:none; padding:0; margin:1.2rem 0 0; }
.pop-usage li{
  display:flex; gap:1.4rem;
  padding:1rem 0;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:1rem;
  color:var(--ink);
}
.pop-usage li:last-child{ border-bottom:1px solid rgba(255,255,255,.06); }
.pop-usage li::before{
  content: counter(usage-step, decimal-leading-zero);
  counter-increment: usage-step;
  font-family:var(--serif);
  font-weight:400; font-size:1.4rem; line-height:1;
  color:var(--ink-mute);
  min-width:2rem;
}
.pop-usage{ counter-reset: usage-step; }

/* Nuance groups */
.pop-nuance{ display:grid; gap:2rem; margin-top:1.2rem; }
.pop-nuance__group h4{
  font-family:var(--sans);
  font-weight:500;
  font-size:.74rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin:0 0 1rem;
  padding-bottom:.8rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.pop-nuance__list{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:.55rem 1.4rem;
}
.pop-nuance__list li{
  font-family:var(--serif);
  font-size:1.05rem;
  color:var(--ink);
  padding:.55rem 0;
  border-top:1px solid rgba(255,255,255,.04);
}
.pop-nuance__list li:first-child{ border-top:none; }
.pop-nuance__img{
  margin-top:1.6rem; aspect-ratio: 4 / 3;
  overflow:hidden; background:#fff;
  border:1px solid rgba(255,255,255,.06);
}
.pop-nuance__img img{ width:100%; height:100%; object-fit:cover; }

/* Tech table (Power, Oxygen) */
.pop-tech{ overflow-x:auto; margin-top:1.2rem; }
.pop-tech table{
  width:100%; min-width:540px;
  border-collapse:collapse;
}
.pop-tech th, .pop-tech td{
  text-align:left;
  padding:.85rem .9rem;
  border-bottom:1px solid rgba(255,255,255,.06);
  font-size:.9rem;
  vertical-align:top;
}
.pop-tech thead th{
  font-family:var(--sans);
  font-weight:500;
  font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-mute);
  border-bottom:1px solid rgba(255,255,255,.18);
}
.pop-tech tbody th{
  font-family:var(--sans);
  font-weight:500;
  font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-mute);
  width:30%;
}
.pop-tech tbody td{
  font-family:var(--serif);
  font-size:1rem;
  color:var(--ink);
}

/* card visual click affordance */
.card{ cursor:pointer; }
.card__visual{ cursor:pointer; }

/* Body lock when popup open */
body.popup-locked{ overflow:hidden; }

@media (max-width: 720px){
  .popup__close{ top:.8rem; right:.8rem; padding:.45rem .8rem; }
  .pop-hero{ aspect-ratio: 4 / 5; }
  .pop-meta{ grid-template-columns:1fr; }
}

/* ═══════════════════ ANIMATION UTILITIES ═══════════════════ */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
}
[data-split-lines] .reveal-line{
  display:block;
  overflow:hidden;
  /* Make room for tall ascenders (e.g. dots of "i", "f") so they don't get
     clipped when line-height is < 1. Negative margin compensates so the
     layout flow stays identical to before. */
  padding-top: .14em;
  margin-top: -.14em;
}
[data-split-lines] .reveal-line__inner{ display:inline-block; opacity:0; }
.js-ready [data-split-lines] .reveal-line__inner{ opacity:1; }

/* ═══════════════════ LANGUAGE SELECTOR ═══════════════════ */
.lang-switch{
  position:relative;
  display:inline-flex;
  align-items:center;
  margin-left:.8rem;
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  z-index:130;
}
.lang-switch__current{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.5rem .85rem;
  background:transparent;
  border:1px solid rgba(255,255,255,.4);
  border-radius:999px;
  color:inherit;
  cursor:pointer;
  transition:background .3s, border-color .3s, color .3s;
  white-space:nowrap;
}
.lang-switch__current:hover,
.lang-switch.is-open .lang-switch__current{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.7);
}
.lang-switch__current svg{
  flex-shrink:0;
  opacity:.85;
}
.lang-switch__chev{
  transition:transform .35s var(--ease-out);
}
.lang-switch.is-open .lang-switch__chev{
  transform:rotate(180deg);
}
.lang-switch__code{
  font-weight:500;
}
.lang-switch__menu{
  position:absolute;
  top:calc(100% + .65rem);
  right:0;
  min-width:200px;
  list-style:none;
  margin:0;
  padding:.5rem;
  background:rgba(10,10,12,.95);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid rgba(255,255,255,.1);
  border-radius:6px;
  display:flex;
  flex-direction:column;
  gap:1px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s linear .3s;
  mix-blend-mode:normal;
  isolation:isolate;
  color:#f5f3ee;
}
.lang-switch.is-open .lang-switch__menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s;
}
.lang-switch__menu li{
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:.7rem .9rem;
  cursor:pointer;
  border:1px solid transparent;
  border-radius:4px;
  transition:background .2s, border-color .2s, padding .35s var(--ease-out);
  color:#f5f3ee;
  white-space:nowrap;
}
.lang-switch__menu li:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
  padding-left:1.2rem;
}
.lang-switch__menu li[aria-selected="true"]{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
}
.lang-switch__opt-code{
  font-family:var(--sans);
  font-size:.65rem;
  letter-spacing:.22em;
  color:var(--ink-mute);
  min-width:1.6rem;
  font-weight:500;
}
.lang-switch__menu li[aria-selected="true"] .lang-switch__opt-code{
  color:#fff;
}
.lang-switch__opt-label{
  font-family:var(--serif);
  font-size:1rem;
  letter-spacing:0;
  text-transform:none;
  color:#f5f3ee;
}

/* Desktop: hide on small screens, the mobile variant is in the mobile menu */
@media (max-width: 820px){
  .lang-switch:not(.lang-switch--mobile){ display:none; }
}

/* Mobile variant inside the mobile menu */
.lang-switch--mobile{
  display:flex;
  margin:1.3rem 0 0;
  width:100%;
  justify-content:flex-start;
}
.lang-switch--mobile .lang-switch__menu{
  right:auto;
  left:0;
}
@media (min-width: 821px){
  .lang-switch--mobile{ display:none; }
}