/* ==========================================================================
   Margherita Giorgi Photography — design tokens
   Monochrome editorial system. Radius 0 everywhere. One accent-free palette.
   ========================================================================== */

/* Cross-document page transitions (native, no JS). Unsupported browsers just
   navigate instantly, so this is a pure enhancement. */
@view-transition{
  navigation:auto;
}
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:0.45s;
  animation-timing-function:cubic-bezier(0.16,1,0.3,1);
}
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){
    animation:none !important;
  }
}

/* Manual fade-out fallback for browsers without the View Transitions API
   (Safari, Firefox). The .is-leaving class is only ever added by JS on
   those browsers, so this is inert everywhere else. */
body.is-leaving{
  opacity:0;
  transition:opacity 0.3s cubic-bezier(0.16,1,0.3,1);
}
@media (prefers-reduced-motion: reduce){
  body.is-leaving{ transition:none; opacity:1; }
}

:root{
  --ink:#141414;
  --ink-soft:#4a4946;
  --paper:#f2f1ee;
  --paper-dim:#e7e5e0;
  --dark:#0e0e0e;
  --dark-2:#1a1a1a;
  --on-dark:#f2f1ee;
  --on-dark-soft:#a8a6a1;
  --line-light:rgba(20,20,20,0.14);
  --line-dark:rgba(242,241,238,0.18);

  --font-display:'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --font-body:'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;

  --container:1320px;
  --nav-h:76px;

  --ease:cubic-bezier(0.16,1,0.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; color-scheme:dark; -webkit-tap-highlight-color:transparent; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--dark);
  color:var(--on-dark);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,p,blockquote,figure{ margin:0; }

.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--on-dark); color:var(--dark); padding:12px 20px; z-index:1000;
}
.skip-link:focus{ left:12px; top:12px; }

:focus-visible{ outline:2px solid var(--on-dark); outline-offset:3px; }

/* ==========================================================================
   Navigation
   ========================================================================== */
/* Default state is the safe/solid one (paper bg, ink text) so the nav stays
   readable even if JS never runs. JS adds .is-transparent as an enhancement
   only while the dark hero fills the viewport behind it. */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(20px,4vw,56px);
  background:rgba(14,14,14,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-dark);
  transition:background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.nav.is-transparent{
  background:transparent;
  backdrop-filter:none;
  border-bottom-color:transparent;
}
.nav__mark img{ height:34px; width:auto; filter:invert(1) brightness(2); }

.nav__links{ display:flex; gap:clamp(20px,3vw,40px); }
.nav__links a{
  font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--on-dark); padding:6px 2px; position:relative;
  transition:color 0.3s var(--ease);
}
.nav.is-transparent .nav__links a{ color:var(--on-dark); }
.nav__links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:currentColor; transition:right 0.35s var(--ease);
}
.nav__links a:hover::after{ right:0; }

.nav__toggle{
  display:none; flex-direction:column; gap:6px;
  width:44px; height:44px; align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer; padding:0;
}
.nav__toggle span{
  display:block; width:22px; height:1px; background:var(--on-dark);
  transition:background 0.3s var(--ease);
}
.nav.is-transparent .nav__toggle span{ background:var(--on-dark); }

.nav-mobile{
  position:fixed; inset:var(--nav-h) 0 0 0; z-index:99;
  background:var(--dark);
  display:flex; flex-direction:column; gap:0;
  padding:8px clamp(20px,6vw,56px);
  transform:translateY(-8px); opacity:0; visibility:hidden;
  transition:opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.nav-mobile.is-open{ opacity:1; transform:translateY(0); visibility:visible; }
.nav-mobile a{
  padding:18px 0; border-bottom:1px solid var(--line-dark);
  font-family:var(--font-display); font-size:28px;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  min-height:100dvh;
  display:flex; align-items:center;
  background:var(--dark);
  color:var(--on-dark);
  padding:calc(var(--nav-h) + 24px) clamp(20px,6vw,64px) 64px;
  overflow:hidden;
}
.hero__inner{ position:relative; z-index:2; max-width:var(--container); margin:0 auto; width:100%; }

/* Home hero photo layer: the can-can dancers, on every screen. */
.hero__slides{ position:absolute; inset:0; z-index:0; }
.hero__slides::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,14,14,0.3) 0%, rgba(14,14,14,0.12) 30%, rgba(14,14,14,0.55) 52%, rgba(14,14,14,0.9) 74%, rgba(14,14,14,0.97) 100%);
}
/* Phone: copy sits low so the dancers' faces stay clear above it. */
@media (max-width:860px){
  .hero{ align-items:flex-end; padding-bottom:clamp(40px,8vh,72px); }
}
.hero__slide{
  position:absolute; inset:0;
  background-size:cover; background-repeat:no-repeat;
}
.hero__slide--danza{
  background-image:url("../assets/img/gallery/danza/12.webp");
  background-position:var(--hero-x, 70%) center;
}
.hero__title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(3rem, 10vw, 7.5rem);
  line-height:1.08;
  letter-spacing:-0.01em;
  margin:0 0 14px;
}
.hero__title-line{ display:block; overflow:hidden; padding-bottom:0.1em; margin-bottom:-0.1em; }
.hero__title-line span{ display:block; }

/* Hero entrance: name assembles first, then the supporting copy follows in
   reading order. transform/opacity only, disabled under reduced motion. */
@keyframes heroLineUp{
  from{ transform:translateY(100%); }
  to{ transform:translateY(0); }
}
@keyframes heroFadeUp{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}
.hero__title-line span{
  animation:heroLineUp 0.9s var(--ease) both;
}
.hero__title-line:nth-child(1) span{ animation-delay:0.05s; }
.hero__title-line:nth-child(2) span{ animation-delay:0.16s; }
.hero__sub,
.hero__tagline,
.hero__inner > .btn{
  animation:heroFadeUp 0.8s var(--ease) both;
}
.hero__sub{ animation-delay:0.5s; }
.hero__tagline{ animation-delay:0.62s; }
.hero__inner > .btn{ animation-delay:0.76s; }

@media (prefers-reduced-motion: reduce){
  .hero__title-line span,
  .hero__sub,
  .hero__tagline,
  .hero__inner > .btn{
    animation:none;
  }
}
.hero__sub{
  font-size:clamp(13px,1.6vw,16px);
  letter-spacing:0.4em;
  text-transform:uppercase;
  color:var(--on-dark-soft);
  margin-bottom:28px;
}
.hero__tagline{
  max-width:46ch;
  font-size:clamp(15px,1.6vw,18px);
  line-height:1.6;
  color:var(--on-dark-soft);
  margin-bottom:36px;
}

.btn{
  display:inline-block;
  padding:16px 34px;
  font-size:13px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  border:1px solid currentColor;
  transition:transform 0.25s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease);
  cursor:pointer;
  white-space:nowrap;
}
.btn:active{ transform:scale(0.97); }
.btn--light{ color:var(--on-dark); }
.btn--light:hover{ background:var(--on-dark); color:var(--dark); }
.btn--dark{ color:var(--on-dark); }
.btn--dark:hover{ background:var(--on-dark); color:var(--dark); }

/* ==========================================================================
   Intro statement
   ========================================================================== */
.intro{
  padding:clamp(80px,12vw,160px) clamp(20px,6vw,64px);
  max-width:900px; margin:0 auto;
  text-align:center;
}
.intro__text{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.5rem,3.4vw,2.6rem);
  line-height:1.35;
}
.intro__text em{ font-style:italic; font-weight:500; }

/* ==========================================================================
   Shared section chrome
   ========================================================================== */
.eyebrow{
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--on-dark-soft); margin:0 0 14px;
}
.section-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2rem,4vw,3.2rem);
  line-height:1.08;
  margin-bottom:clamp(40px,6vw,64px);
}

/* ==========================================================================
   Work grid — asymmetric bento
   ========================================================================== */
.work{
  padding:clamp(60px,10vw,120px) clamp(20px,6vw,64px);
  max-width:var(--container); margin:0 auto;
}
.work > .eyebrow{ margin-bottom:clamp(20px,3vw,32px); }
.work__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(10px,1.4vw,20px);
}
.work__tile{
  position:relative;
  aspect-ratio:4/5;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:24px;
  overflow:hidden;
  color:var(--on-dark);
  background:var(--dark-2);
  transition:transform 0.5s var(--ease);
}
.work__tile img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  transition:transform 0.6s var(--ease);
}
.work__tile:hover img{ transform:scale(1.04); }
.work__tile::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.18) 45%, rgba(0,0,0,0) 70%);
}

.work__tile--a{ grid-column:span 7; grid-row:span 2; aspect-ratio:auto; }
.work__tile--b{ grid-column:span 5; }
.work__tile--g{ grid-column:span 5; }
.work__tile--c{ grid-column:span 4; }
.work__tile--d{ grid-column:span 4; }
.work__tile--e{ grid-column:span 4; }

.work__tile:hover{ transform:translateY(-4px); }

.work__label{
  position:relative; z-index:2;
  font-family:var(--font-display); font-weight:600; letter-spacing:-0.02em;
  font-size:clamp(1.3rem,2.2vw,2rem);
}
.work__note{
  position:relative; z-index:2;
  font-size:13px; line-height:1.4; letter-spacing:0.01em;
  color:var(--on-dark-soft); margin-top:8px; max-width:32ch;
}

@media (max-width:860px){
  .work__tile{
    grid-column:span 12; grid-row:auto; aspect-ratio:4/5;
  }
}

/* ==========================================================================
   About
   ========================================================================== */
.about{
  max-width:var(--container); margin:0 auto;
  padding:clamp(70px,10vw,130px) clamp(20px,6vw,64px);
}
.about__text{
  font-size:clamp(16px,1.6vw,19px);
  line-height:1.7;
  color:var(--on-dark-soft);
  max-width:60ch;
  margin:0 auto 32px;
}
.about__tags{ display:flex; flex-wrap:wrap; gap:10px; }
.about__tags li a{
  display:block;
  font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  border:1px solid var(--line-dark);
  padding:9px 16px;
  transition:background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.about__tags li a:hover{ background:var(--on-dark); color:var(--dark); }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact{
  max-width:900px; margin:0 auto;
  padding:clamp(70px,12vw,150px) clamp(20px,6vw,64px);
  text-align:center;
}
.contact__text{
  font-size:clamp(15px,1.6vw,18px);
  color:var(--on-dark-soft);
  margin-bottom:36px;
}
.contact__email{
  display:inline-block;
  font-family:var(--font-display);
  font-size:clamp(1rem,4.6vw,2.6rem);
  max-width:100%; white-space:nowrap; letter-spacing:-0.02em;
  font-weight:600;
  border-bottom:1px solid var(--line-dark);
  padding-bottom:10px;
  transition:opacity 0.3s var(--ease);
}
.contact__email:hover{ opacity:0.6; }
.contact__social{
  display:flex; justify-content:center; gap:28px;
  margin-top:32px;
}
.contact__social a{
  font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
  position:relative; padding-bottom:4px;
}
.contact__social a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:currentColor; transition:right 0.3s var(--ease);
}
.contact__social a:hover::after{ right:0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{
  background:var(--dark); color:var(--on-dark);
  padding:clamp(56px,8vw,90px) clamp(20px,6vw,64px) 32px;
  text-align:center;
}
.footer__mark{ height:40px; width:auto; margin:0 auto 18px; filter:invert(1) brightness(2); }
.footer__wordmark{
  font-family:var(--font-display); font-size:clamp(1.4rem,2.4vw,2rem);
  margin-bottom:28px;
}
.footer__wordmark span{ display:block; font-family:var(--font-body); font-size:11px; letter-spacing:0.3em; text-transform:uppercase; color:var(--on-dark-soft); margin-top:6px; }
.footer__links{
  display:flex; flex-wrap:wrap; justify-content:center; gap:24px;
  margin-bottom:36px;
}
.footer__links a{
  font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--on-dark-soft); transition:color 0.3s var(--ease);
}
.footer__links a:hover{ color:var(--on-dark); }
.footer__copy{ font-size:11px; color:var(--on-dark-soft); letter-spacing:0.02em; }

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
[data-reveal].reveal-pending{
  opacity:0; transform:translateY(24px);
  transition:opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].reveal-pending.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  [data-reveal].reveal-pending{ opacity:1; transform:none; transition:none; }
}

/* ==========================================================================
   Nav toggle responsive
   ========================================================================== */
@media (max-width:760px){
  .nav__links{ display:none; }
  .nav__toggle{ display:flex; }
}

/* Work tiles as links */
a.work__tile{ color:inherit; }

/* ==========================================================================
   Category page — banner
   ========================================================================== */
.cat-hero{
  position:relative;
  min-height:60vh;
  display:flex; align-items:flex-end;
  background:var(--dark);
  color:var(--on-dark);
  padding:calc(var(--nav-h) + 40px) clamp(20px,6vw,64px) clamp(48px,6vw,72px);
  overflow:hidden;
}
.cat-hero__bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  object-position:var(--hero-pos, 50% 50%);
}
.cat-hero::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(14,14,14,0.55) 0%, rgba(14,14,14,0.35) 40%, rgba(14,14,14,0.92) 100%);
}
.cat-hero__inner{ position:relative; z-index:2; max-width:var(--container); margin:0 auto; width:100%; }
.cat-hero__back{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--on-dark-soft); margin-bottom:28px;
  transition:color 0.3s var(--ease);
}
.cat-hero__back:hover{ color:var(--on-dark); }
.cat-hero__title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.6rem,7vw,5rem);
  line-height:1; margin-bottom:20px;
}
.cat-hero__intro{
  max-width:60ch;
  font-size:clamp(15px,1.6vw,18px);
  line-height:1.65;
  color:var(--on-dark-soft);
}

/* ==========================================================================
   Category page — masonry gallery
   ========================================================================== */
.gallery{
  max-width:var(--container); margin:0 auto;
  padding:clamp(48px,7vw,80px) clamp(20px,6vw,64px) clamp(80px,10vw,120px);
  column-count:3; column-gap:clamp(10px,1.4vw,20px);
}
.gallery__item{
  display:block; width:100%;
  break-inside:avoid; margin-bottom:clamp(10px,1.4vw,20px);
  border:0; background:none; padding:0; cursor:pointer;
  position:relative; overflow:hidden;
}
.gallery__item img{
  display:block; width:100%; height:auto;
  transition:transform 0.5s var(--ease), opacity 0.5s var(--ease);
}
.gallery__item:hover img{ transform:scale(1.02); opacity:0.92; }
.gallery__item:focus-visible{ outline:2px solid var(--on-dark); outline-offset:2px; }

@media (max-width:900px){ .gallery{ column-count:2; } }
@media (max-width:560px){ .gallery{ column-count:1; } }

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(14,14,14,0.96);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity 0.3s var(--ease), visibility 0.3s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__img{
  max-width:88vw; max-height:82vh;
  width:auto; height:auto;
  box-shadow:0 30px 80px rgba(0,0,0,0.5);
}
.lightbox__close,
.lightbox__prev,
.lightbox__next{
  position:absolute;
  background:none; border:1px solid var(--line-dark);
  color:var(--on-dark);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background-color 0.25s var(--ease);
}
.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover{ background:rgba(242,241,238,0.12); }
.lightbox__close{
  top:20px; right:20px; width:44px; height:44px; font-size:20px;
}
.lightbox__prev,
.lightbox__next{
  top:50%; transform:translateY(-50%);
  width:52px; height:52px; font-size:22px;
}
.lightbox__prev{ left:20px; }
.lightbox__next{ right:20px; }
.lightbox__counter{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  font-size:12px; letter-spacing:0.08em; color:var(--on-dark-soft);
}
@media (max-width:640px){
  .lightbox__prev,.lightbox__next{ width:44px; height:44px; font-size:18px; }
  .lightbox__prev{ left:8px; } .lightbox__next{ right:8px; }
  .lightbox__close{ top:12px; right:12px; }
}

/* ==========================================================================
   Category hero — plain variant (no background photo)
   ========================================================================== */

/* ==========================================================================
   Full-bleed cinematic video banner (trailer / reel) — long and thin,
   spans the full viewport width, ambient autoplay loop, muted, no controls.
   ========================================================================== */
.video-banner{
  position:relative;
  width:100%;
  aspect-ratio:2/1;
  max-height:600px;
  overflow:hidden;
  background:var(--dark-2);
}
.video-banner video{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover;
}
.video-banner::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 45%);
}
.video-banner__label{
  position:absolute; z-index:2; left:clamp(20px,6vw,64px); bottom:clamp(16px,2.4vw,28px);
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--on-dark-soft);
}

/* ==========================================================================
   Serate — single 16:9 hover-to-play clip
   ========================================================================== */

/* Inline text links */
.inline-link{ border-bottom:1px solid var(--line-dark); transition:border-color 0.25s var(--ease); }
.inline-link:hover{ border-color:var(--on-dark); }
.nav__links a[aria-current="page"]::after{ right:0; }


.video-intro{
  max-width:var(--container); margin:0 auto;
  padding:clamp(48px,7vw,88px) clamp(20px,6vw,64px) clamp(24px,4vw,40px);
}
.video-intro__text{
  max-width:60ch;
  font-size:clamp(15px,1.6vw,18px); line-height:1.65;
  color:var(--on-dark-soft);
}
.cat-cta{ border-top:1px solid var(--line-dark); }

/* ==========================================================================
   Guideline fixes: anchors clear the fixed nav, balanced headings,
   no double-tap delay, contained lightbox scroll, trailer pause control.
   ========================================================================== */
[id]{ scroll-margin-top:calc(var(--nav-h) + 16px); }
h1, h2, h3{ text-wrap:balance; }
p{ text-wrap:pretty; }
a, button{ touch-action:manipulation; }
.lightbox{ overscroll-behavior:contain; }
.video-banner__toggle{
  position:absolute; z-index:2;
  right:clamp(20px,6vw,64px); bottom:clamp(12px,2vw,22px);
  font:inherit; font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--on-dark); background:rgba(14,14,14,0.45);
  border:1px solid var(--line-dark); padding:8px 14px; cursor:pointer;
  transition:background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.video-banner__toggle:hover{ background:var(--on-dark); color:var(--dark); }
html, body{ overflow-x:clip; }

/* ==========================================================================
   Apple-style layer
   1. Scroll-linked hero: photo eases in, headline lifts and fades.
   3. Frosted-glass nav.
   4. Lightbox morph (View Transitions) — see js/gallery.js.
   All CSS-only progressive enhancement; off under reduced motion.
   ========================================================================== */

/* 3 — frosted glass nav */
.nav{
  background:rgba(14,14,14,0.62);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom-color:rgba(242,241,238,0.08);
}
.nav.is-transparent{ -webkit-backdrop-filter:none; backdrop-filter:none; }

/* 4 — lightbox morph timing */
.lightbox.is-morphing{ transition:none; }
::view-transition-group(lb-photo){
  animation-duration:0.5s;
  animation-timing-function:cubic-bezier(0.32,0.72,0,1);
}
::view-transition-old(lb-photo),
::view-transition-new(lb-photo){ height:100%; object-fit:cover; }

/* 1 — scroll-linked hero */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    @keyframes heroPhotoIn{
      from{ transform:scale(1); }
      to{ transform:scale(1.12); }
    }
    @keyframes heroCopyOut{
      from{ opacity:1; transform:translateY(0); }
      to{ opacity:0; transform:translateY(-12vh); }
    }
    .hero__slides{
      animation:heroPhotoIn linear both;
      animation-timeline:scroll(root);
      animation-range:0 100vh;
      transform-origin:center 40%;
    }
    .hero .hero__inner{
      animation:heroCopyOut linear both;
      animation-timeline:scroll(root);
      animation-range:0 70vh;
    }
  }
}

/* ==========================================================================
   Page loader (first page of the session only)
   ========================================================================== */
.loader{
  position:fixed; inset:0; z-index:1000;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  background:var(--dark);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 0.6s var(--ease), visibility 0.6s;
}
html.is-loading .loader{ opacity:1; visibility:visible; pointer-events:auto; }
html.is-loading body{ overflow:hidden; }
.loader__mark{ width:64px; height:auto; filter:invert(1) brightness(2); animation:loaderMark 1.1s var(--ease) both; }
.loader__line{ width:120px; height:1px; background:var(--line-dark); overflow:hidden; }
.loader__line::after{
  content:''; display:block; height:100%; background:var(--on-dark);
  transform-origin:left; animation:loaderLine 1.2s var(--ease) both;
}
.loader__name{ font-size:11px; letter-spacing:0.4em; text-transform:uppercase; color:var(--on-dark-soft); }
@keyframes loaderMark{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes loaderLine{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@media (prefers-reduced-motion: reduce){
  .loader__mark, .loader__line::after{ animation:none; }
}

/* ==========================================================================
   WhatsApp button
   ========================================================================== */
.wa-float{
  position:fixed; right:clamp(16px,2.4vw,28px); bottom:calc(clamp(16px,2.4vw,28px) + env(safe-area-inset-bottom));
  z-index:150; width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:#25d366; color:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
  transition:transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.wa-float svg{ width:30px; height:30px; }
.wa-float:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(0,0,0,0.45); }
.wa-float:active{ transform:scale(0.95); }
.wa-float:focus-visible{ outline:2px solid var(--on-dark); outline-offset:3px; }

/* ==========================================================================
   Cookie banner — low, wide glass bar in the nav's language:
   mark | line-art cookie | copy | actions. Details unfold underneath.
   ========================================================================== */
.cookie{
  position:fixed; z-index:160;
  left:50%; bottom:calc(clamp(12px,2vw,24px) + env(safe-area-inset-bottom));
  width:min(1100px, calc(100vw - 2 * clamp(12px,2vw,24px)));
  background:rgba(20,20,20,0.78);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border:1px solid var(--line-dark); border-radius:14px;
  color:var(--on-dark);
  box-shadow:0 20px 50px rgba(0,0,0,0.45);
  opacity:0; transform:translate(-50%, 14px);
  transition:opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.cookie.is-open{ opacity:1; transform:translate(-50%, 0); }
.cookie__bar{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:clamp(16px,2.4vw,32px);
  padding:14px clamp(16px,2vw,22px);
}
.cookie__brand{ display:flex; align-items:center; gap:14px; }
.cookie__logo{ height:26px; width:auto; filter:invert(1) brightness(2); }
.cookie__sep{ width:1px; height:26px; background:var(--line-dark); }
.cookie__icon{ width:34px; height:34px; display:block; color:var(--on-dark); }
.cookie__icon svg{ width:100%; height:100%; overflow:visible; }
.cookie.is-open .cookie__icon{ animation:cookieIn 0.8s var(--ease) 0.2s both; }
@keyframes cookieIn{ from{ opacity:0; transform:rotate(-30deg) scale(0.7); } to{ opacity:1; transform:none; } }
.cookie__title{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; line-height:1.2; margin-bottom:2px; }
.cookie__text{ font-size:13px; line-height:1.5; color:var(--on-dark-soft); }
.cookie__text a{ color:var(--on-dark); border-bottom:1px solid var(--line-dark); white-space:nowrap; }
.cookie__text a:hover{ border-color:var(--on-dark); }
.cookie__actions{ display:flex; gap:10px; }
.cookie__btn{
  font:inherit; font-size:13px; font-weight:500; white-space:nowrap; cursor:pointer;
  padding:9px 18px; border-radius:999px;
  border:1px solid var(--on-dark); background:var(--on-dark); color:var(--dark);
  transition:background-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.cookie__btn:hover{ background:#fff; }
.cookie__btn:active{ transform:scale(0.97); }
.cookie__btn--ghost{ background:transparent; color:var(--on-dark); border-color:var(--line-dark); }
.cookie__btn--ghost:hover{ background:rgba(242,241,238,0.08); border-color:var(--on-dark); }
.cookie a:focus-visible, .cookie__btn:focus-visible{ outline:2px solid var(--on-dark); outline-offset:2px; }
.cookie__details{ border-top:1px solid var(--line-dark); padding:4px clamp(16px,2vw,22px) 8px; }
.cookie__row{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,2fr) auto; gap:16px; align-items:center;
  padding:10px 0; font-size:13px; border-bottom:1px solid var(--line-dark);
}
.cookie__row:last-child{ border-bottom:0; }
.cookie__row strong{ font-weight:600; }
.cookie__row span{ color:var(--on-dark-soft); }
.cookie__row em{ font-style:normal; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--on-dark-soft); }
.cookie__row:first-child em{ color:var(--on-dark); }

.wa-float{ transition:transform 0.25s var(--ease), box-shadow 0.25s var(--ease), bottom 0.35s var(--ease); }
html.has-cookie .wa-float{ bottom:calc(clamp(16px,2.4vw,28px) + env(safe-area-inset-bottom) + var(--cookie-h, 0px) + 12px); }

@media (max-width:760px){
  .cookie__bar{ grid-template-columns:auto minmax(0,1fr); gap:12px 14px; padding:14px 16px; }
  .cookie__brand{ grid-row:1; }
  .cookie__copy{ grid-row:1; grid-column:2; }
  .cookie__actions{ grid-column:1 / -1; justify-content:flex-end; }
  .cookie__logo, .cookie__sep{ display:none; }
  .cookie__row{ grid-template-columns:minmax(0,1fr) auto; }
  .cookie__row span{ grid-column:1; grid-row:2; }
  .cookie__row em{ grid-row:1 / span 2; }
}
@media (prefers-reduced-motion: reduce){
  .cookie{ transition:opacity 0.15s linear; }
  .cookie.is-open .cookie__icon{ animation:none; }
}
.footer__links .footer__cookie{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--on-dark-soft); transition:color 0.3s var(--ease);
}
.footer__links .footer__cookie:hover{ color:var(--on-dark); }

/* ==========================================================================
   Legal pages (cookie policy)
   ========================================================================== */
.legal{
  max-width:760px; margin:0 auto;
  padding:calc(var(--nav-h) + 64px) clamp(20px,6vw,64px) clamp(80px,10vw,120px);
}
.legal__title{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.4rem,6vw,4rem); line-height:1.05; margin-bottom:10px; }
.legal__updated{ font-size:13px; color:var(--on-dark-soft); margin-bottom:40px; }
.legal h2{ font-family:var(--font-display); font-weight:700; font-size:1.35rem; margin:40px 0 12px; }
.legal p{ color:var(--on-dark-soft); line-height:1.7; max-width:65ch; }
.legal a, .legal__link{ color:var(--on-dark); border-bottom:1px solid var(--line-dark); }
.legal__link{ background:none; border-top:0; border-left:0; border-right:0; padding:0; font:inherit; cursor:pointer; }
.legal__table{ margin:8px 0 16px; border-top:1px solid var(--line-dark); }
.legal__row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1.2fr); gap:16px; padding:14px 0; border-bottom:1px solid var(--line-dark); font-size:14px; color:var(--on-dark-soft); }
.legal__row--head{ font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--on-dark); }
.legal code{ font-size:13px; color:var(--on-dark); overflow-wrap:anywhere; }
@media (max-width:620px){
  .legal__row{ grid-template-columns:minmax(0,1fr); gap:4px; }
  .legal__row--head{ display:none; }
}

/* ==========================================================================
   404 — "Fuori fuoco": the dancers photo, deliberately out of focus
   ========================================================================== */
.notfound{
  position:relative; min-height:100dvh; overflow:hidden;
  display:flex; align-items:center;
  padding:calc(var(--nav-h) + 24px) clamp(20px,6vw,64px) 64px;
}
.notfound__bg{
  position:absolute; inset:-40px; z-index:0;
  background:url("/assets/img/work/hero-bg.webp") center 22% / cover no-repeat;
  filter:blur(18px) brightness(0.45) saturate(0.9);
  animation:notfoundFocus 6s var(--ease) infinite alternate;
}
@keyframes notfoundFocus{ from{ filter:blur(22px) brightness(0.42); } to{ filter:blur(12px) brightness(0.5); } }
.notfound__inner{ position:relative; z-index:1; max-width:var(--container); margin:0 auto; width:100%; }
.notfound__title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(3rem,11vw,8rem); line-height:1; margin-bottom:20px;
}
.notfound__text{ max-width:44ch; color:var(--on-dark-soft); font-size:clamp(15px,1.6vw,18px); line-height:1.6; margin-bottom:32px; }
.notfound__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:24px 28px; }
.notfound__link{ font-size:13px; letter-spacing:0.08em; text-transform:uppercase; border-bottom:1px solid var(--line-dark); padding-bottom:4px; }
.notfound__link:hover{ border-color:var(--on-dark); }
@media (prefers-reduced-motion: reduce){ .notfound__bg{ animation:none; } }

/* ==========================================================================
   Desktop home hero: the whole landscape fits, name on the left.
   ========================================================================== */
@media (min-width:861px){
  .hero__slide--danza{ background-position:center 62%; }
  .hero__slides::after{
    background:
      linear-gradient(90deg, rgba(14,14,14,0.9) 0%, rgba(14,14,14,0.72) 30%, rgba(14,14,14,0.25) 58%, rgba(14,14,14,0.1) 100%),
      linear-gradient(to top, rgba(14,14,14,0.6) 0%, rgba(14,14,14,0) 32%);
  }
}

/* Category heroes: landscape photos, full-bleed banner. */
.cat-hero--wide{ min-height:min(78vh, 760px); }
@media (min-width:861px){
  .cat-hero--wide{ min-height:min(86vh, 860px); align-items:flex-end; }
  .cat-hero--wide::after{
    background:
      linear-gradient(90deg, rgba(14,14,14,0.82) 0%, rgba(14,14,14,0.45) 38%, rgba(14,14,14,0) 70%),
      linear-gradient(to top, var(--dark) 0%, rgba(14,14,14,0.55) 22%, rgba(14,14,14,0) 50%);
  }
  .cat-hero--wide .cat-hero__title, .cat-hero--wide .cat-hero__intro{ max-width:min(46vw, 56ch); }
}

/* ==========================================================================
   About — portrait beside the bio
   ========================================================================== */
.about__grid{
  display:grid; grid-template-columns:minmax(0,4fr) minmax(0,6fr);
  gap:clamp(36px,5vw,80px); align-items:stretch;
}
/* The photo sets the row height; if the copy ever runs longer the photo
   stretches with it (cropping, never distorting), so nothing hangs below. */
.about__photo{ margin:0; align-self:stretch; aspect-ratio:1025/1535; }
.about__photo img{
  width:100%; height:100%; object-fit:cover; object-position:50% 35%;
  border-radius:4px; display:block;
}
.about__content{ display:flex; flex-direction:column; justify-content:space-between; gap:28px; }
.about__body > :first-child{ margin-top:-0.2em; }
.about__content .section-title{ margin-bottom:18px; }
.about__lead{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.2rem,1.9vw,1.55rem); line-height:1.35;
  margin-bottom:22px;
}
.about__content .about__text{ margin:0 0 16px; max-width:60ch; font-size:clamp(15px,1.35vw,18px); }
.about__body > :last-child{ margin-bottom:0; }
.about__facts{
  display:grid; gap:12px; margin:0 0 24px; padding:22px 0 0;
  border-top:1px solid var(--line-dark);
}
.about__facts li{ display:grid; grid-template-columns:9.5em 1fr; gap:16px; font-size:15px; line-height:1.5; }
.about__facts strong{
  font-weight:400; font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--on-dark-soft); padding-top:3px;
}
.about__content .about__tags{ margin:0; }
.about__tags li a{ line-height:1; }
@media (max-width:860px){
  .about__grid{ grid-template-columns:1fr; }
  .about__photo{ max-width:460px; width:100%; margin:0 auto; }
}
@media (max-width:480px){
  .about__facts li{ grid-template-columns:1fr; gap:4px; }
}

/* ==========================================================================
   Video page — Infrante player: the film's own title card as poster,
   YouTube loads only on play. Pink accent taken from the title card.
   ========================================================================== */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.film{
  --film-pink:#f6c8ca;
  max-width:var(--container); margin:0 auto;
  padding:clamp(56px,8vw,110px) clamp(20px,6vw,64px) clamp(40px,6vw,72px);
}
.film--top{ padding-top:calc(var(--nav-h) + clamp(28px,4vw,56px)); }
.film__eyebrow{ margin-bottom:clamp(14px,2vw,22px); }
/* Keep the whole player above the fold on short laptop screens. */
.film__stage{ max-width:min(100%, calc((100svh - var(--nav-h) - 150px) * 16 / 9)); min-width:min(100%, 640px); margin-inline:auto; }
.yt{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:#000; border-radius:6px;
  box-shadow:0 50px 120px -60px rgba(246,200,202,0.35), 0 0 0 1px rgba(242,241,238,0.08);
}
.yt iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
  opacity:0; transition:opacity 0.6s var(--ease);
}
.yt.is-ready iframe{ opacity:1; }
.yt__play{
  position:absolute; inset:0; width:100%; height:100%;
  padding:0; border:0; background:#000; color:inherit; cursor:pointer; font:inherit;
  transition:opacity 0.5s var(--ease);
}
.yt.is-loading .yt__play{ opacity:0; pointer-events:none; }
.yt__poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  animation:ytDrift 22s ease-in-out infinite alternate;
}
@keyframes ytDrift{ from{ transform:scale(1); } to{ transform:scale(1.06); } }
.yt__play::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.45) 100%),
    linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 32%);
  transition:background-color 0.4s var(--ease);
}
.yt__bar{
  position:absolute; z-index:1; left:0; right:0; bottom:clamp(14px,4.5%,40px);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.yt__cta{
  display:inline-flex; align-items:center; gap:12px;
  padding:7px 22px 7px 7px; border-radius:999px;
  background:var(--film-pink); color:#1b1414;
  font-size:13px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase;
  box-shadow:0 12px 30px -10px rgba(0,0,0,0.6);
  transition:transform 0.3s var(--ease), background-color 0.3s var(--ease);
}
.yt__icon{
  position:relative; display:grid; place-items:center;
  width:40px; height:40px; border-radius:50%;
  background:#1b1414; color:var(--film-pink);
}
.yt__icon svg{ width:15px; margin-left:2px; }
.yt__icon::before{
  content:''; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid rgba(27,20,20,0.55);
  animation:ytPulse 2.4s var(--ease) infinite;
}
@keyframes ytPulse{
  0%{ transform:scale(0.9); opacity:0.9; }
  70%,100%{ transform:scale(1.35); opacity:0; }
}
.yt__kbd{
  font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:rgba(255,255,255,0.75);
}
.yt__kbd kbd{
  font:inherit; color:#fff; border:1px solid rgba(255,255,255,0.45);
  border-radius:4px; padding:2px 7px; margin-left:4px;
}
.yt__play:hover .yt__cta, .yt__play:focus-visible .yt__cta{ transform:scale(1.05); background:#fff; }
.yt__play:focus-visible{ outline:2px solid var(--film-pink); outline-offset:-5px; }
.yt__spinner{
  position:absolute; left:50%; top:50%; width:34px; height:34px; margin:-17px 0 0 -17px;
  border:2px solid rgba(246,200,202,0.25); border-top-color:var(--film-pink); border-radius:50%;
  animation:ytSpin 0.9s linear infinite;
}
.yt.is-ready .yt__spinner{ display:none; }
@keyframes ytSpin{ to{ transform:rotate(360deg); } }

.film__info{
  display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:clamp(28px,5vw,80px); margin-top:clamp(36px,5vw,60px);
}
.film__synopsis{
  font-size:clamp(15px,1.5vw,18px); line-height:1.7; color:var(--on-dark-soft); max-width:62ch;
}
.film__meta{ display:grid; gap:16px; align-content:start; border-top:1px solid var(--line-dark); padding-top:18px; margin:0; }
.film__meta div{ display:grid; gap:4px; }
.film__meta dt{ font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--on-dark-soft); }
.film__meta dd{ margin:0; font-size:16px; }
.video-more{ border-top:1px solid var(--line-dark); }
.video-more .section-title{ margin-bottom:18px; }

@media (max-width:760px){
  .film__info{ grid-template-columns:1fr; }
  .yt__bar{ left:auto; right:10px; bottom:10px; align-items:flex-end; }
  .yt__cta{ font-size:10px; letter-spacing:0.12em; gap:8px; padding:4px 13px 4px 4px; }
  .yt__icon{ width:26px; height:26px; }
  .yt__icon svg{ width:10px; }
  .yt__kbd{ display:none; }
}
@media (hover:none){ .yt__kbd{ display:none; } }
@media (prefers-reduced-motion: reduce){
  .yt__poster, .yt__icon::before{ animation:none; }
  .yt__cta, .yt__play, .yt iframe{ transition:none; }
}

/* ==========================================================================
   Per le aziende (social.html) — the work first: vertical reels that play
   on their own while in view, then a quiet editorial run of text.
   ========================================================================== */
.biz-hero{
  max-width:var(--container); margin:0 auto;
  padding:calc(var(--nav-h) + clamp(40px,6vw,88px)) clamp(20px,6vw,64px) clamp(56px,8vw,104px);
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:clamp(36px,6vw,96px); align-items:center;
}
.biz-back{
  display:inline-block; margin-bottom:clamp(28px,4vw,48px);
  font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--on-dark-soft); transition:color 0.25s var(--ease);
}
.biz-back:hover{ color:var(--on-dark); }
.biz-hero__title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.6rem,6.2vw,5.4rem); line-height:1.02; letter-spacing:-0.01em;
  margin-bottom:clamp(20px,2.6vw,30px); max-width:12ch;
}
.biz-hero__intro{
  max-width:46ch; font-size:clamp(16px,1.6vw,19px); line-height:1.6;
  color:var(--on-dark-soft); margin-bottom:clamp(28px,3.4vw,40px);
}
.biz-hero__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 30px; }
.biz-btn{
  display:inline-block; padding:15px 28px;
  background:var(--on-dark); color:var(--dark);
  font-size:13px; letter-spacing:0.1em; text-transform:uppercase;
  transition:background-color 0.25s var(--ease), transform 0.2s var(--ease);
}
.biz-btn:hover{ background:#fff; }
.biz-btn:active{ transform:scale(0.98); }
.biz-link{
  font-size:13px; letter-spacing:0.1em; text-transform:uppercase;
  border-bottom:1px solid var(--line-dark); padding-bottom:4px;
  transition:border-color 0.25s var(--ease);
}
.biz-link:hover{ border-color:var(--on-dark); }

/* Reel: a 9:16 frame, caption underneath like a film credit */
.reel{ margin:0; }
.reel__frame{
  position:relative; aspect-ratio:9/16; overflow:hidden;
  background:var(--dark-2); border-radius:3px;
}
.reel__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.reel__sound{
  position:absolute; right:10px; bottom:10px; z-index:1;
  font:inherit; font-size:10px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--on-dark); background:rgba(14,14,14,0.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(242,241,238,0.35); padding:8px 12px; cursor:pointer;
  transition:background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.reel__sound:hover{ background:var(--on-dark); color:var(--dark); }
.reel__sound-on{ display:none; }
.reel__sound[aria-pressed="true"]{ background:var(--on-dark); color:var(--dark); }
.reel__sound[aria-pressed="true"] .reel__sound-off{ display:none; }
.reel__sound[aria-pressed="true"] .reel__sound-on{ display:inline; }
.reel figcaption{
  display:grid; grid-template-columns:auto 1fr; column-gap:14px; row-gap:2px;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line-dark);
}
.reel__num{ grid-row:span 2; font-family:var(--font-display); font-weight:500; font-size:1.05rem; color:var(--on-dark-soft); line-height:1.3; }
.reel__title{ font-family:var(--font-display); font-size:1.08rem; line-height:1.3; }
.reel__sub{ font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--on-dark-soft); }
.reel--hero{ max-width:380px; margin-left:auto; }

.biz-work, .biz-section, .biz-for, .biz-final{
  max-width:var(--container); margin:0 auto;
  padding:clamp(64px,9vw,120px) clamp(20px,6vw,64px) 0;
}
.biz-work{ border-top:1px solid var(--line-dark); margin-top:0; }
.biz-head{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(20px,5vw,72px); align-items:end; margin-bottom:clamp(28px,4vw,48px);
}
.biz-h2{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.08;
}
.biz-head__text{ color:var(--on-dark-soft); line-height:1.65; max-width:52ch; }
.biz-reels{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,28px);
}

.biz-statement{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.6rem,3.4vw,2.7rem); line-height:1.22; max-width:26ch;
  margin-bottom:clamp(20px,3vw,32px);
}
.biz-for__text{ color:var(--on-dark-soft); line-height:1.75; max-width:62ch; margin-left:auto; margin-right:0; font-size:clamp(15px,1.4vw,17px); }

.biz-section{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(20px,5vw,72px); }
.biz-section > .biz-h2{ align-self:start; position:sticky; top:calc(var(--nav-h) + 24px); }
.biz-steps{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line-dark); }
.biz-steps li{
  display:grid; grid-template-columns:4.5rem 1fr; column-gap:clamp(12px,2vw,28px);
  padding:clamp(20px,2.6vw,30px) 0; border-bottom:1px solid var(--line-dark);
}
.biz-steps__n{ grid-row:span 2; font-family:var(--font-display); font-weight:500; font-size:clamp(1.6rem,2.6vw,2.2rem); line-height:1; color:var(--on-dark-soft); }
.biz-steps h3{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.15rem,1.6vw,1.35rem); margin-bottom:6px; }
.biz-steps p{ color:var(--on-dark-soft); line-height:1.65; max-width:56ch; }

.biz-plans{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line-dark); }
.biz-plan{ padding:clamp(22px,2.6vw,30px) clamp(18px,2.4vw,32px) clamp(22px,2.6vw,30px) 0; }
.biz-plan + .biz-plan{ border-left:1px solid var(--line-dark); padding-left:clamp(18px,2.4vw,32px); padding-right:0; }
.biz-plan h3{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.3rem,2vw,1.6rem); margin-bottom:6px; }
.biz-plan__desc{ color:var(--on-dark-soft); line-height:1.6; margin-bottom:18px; }
.biz-plan ul{ list-style:none; margin:0; padding:0; }
.biz-plan li{ padding:9px 0; border-top:1px solid var(--line-dark); font-size:15px; }
.biz-note{ grid-column:2; color:var(--on-dark-soft); font-size:14px; line-height:1.6; padding-top:18px; border-top:1px solid var(--line-dark); }

.biz-faq__list details{ border-top:1px solid var(--line-dark); }
.biz-faq__list details:last-of-type{ border-bottom:1px solid var(--line-dark); }
.biz-faq__list summary{
  list-style:none; cursor:pointer; padding:20px 40px 20px 0; position:relative;
  font-family:var(--font-display); font-weight:700; font-size:clamp(1.05rem,1.5vw,1.2rem);
}
.biz-faq__list summary::-webkit-details-marker{ display:none; }
.biz-faq__list summary::after{
  content:'+'; position:absolute; right:4px; top:50%; transform:translateY(-50%);
  font-family:var(--font-body); font-weight:300; font-size:1.5rem; line-height:1;
  transition:transform 0.25s var(--ease);
}
.biz-faq__list details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.biz-faq__list details p{ color:var(--on-dark-soft); line-height:1.7; padding:0 0 22px; max-width:62ch; }

.biz-final{ padding-bottom:clamp(80px,10vw,140px); }
.biz-final__title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.2rem,5vw,4rem); line-height:1.05; margin-bottom:16px; max-width:16ch;
}
.biz-final__text{ color:var(--on-dark-soft); line-height:1.65; max-width:52ch; margin-bottom:28px; }

@media (max-width:900px){
  .biz-hero{ grid-template-columns:1fr; }
  .reel--hero{ margin:0; max-width:300px; }
  .biz-head, .biz-section{ grid-template-columns:1fr; }
  .biz-section > .biz-h2{ position:static; }
  .biz-note{ grid-column:auto; }
  .biz-reels{
    display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
    margin:0 calc(-1 * clamp(20px,6vw,64px)); padding:0 clamp(20px,6vw,64px) 4px;
    scroll-padding-inline:clamp(20px,6vw,64px); scrollbar-width:none;
  }
  .biz-reels::-webkit-scrollbar{ display:none; }
  .biz-reels .reel{ flex:0 0 68vw; max-width:300px; scroll-snap-align:start; }
}
@media (max-width:620px){
  .biz-plans{ grid-template-columns:1fr; }
  .biz-plan, .biz-plan + .biz-plan{ padding:22px 0; border-left:0; }
  .biz-plan + .biz-plan{ border-top:1px solid var(--line-dark); }
  .biz-steps li{ grid-template-columns:3rem 1fr; }
}

/* Category hero: small line inside the H1 naming the service and the place */
.cat-hero__kicker{
  display:block; margin-bottom:14px;
  font-family:var(--font-body); font-weight:400;
  font-size:12px; letter-spacing:0.18em; text-transform:uppercase; line-height:1.5;
  color:var(--on-dark-soft);
}

/* Titles in Inter Tight: a grotesk wants less weight and tighter tracking
   than the old serif. */
.hero__title, .cat-hero__title, .section-title, .biz-hero__title, .biz-final__title, .notfound__title{
  font-weight:600; letter-spacing:-0.035em;
}
.biz-h2, .biz-plan h3, .biz-steps h3, .biz-statement, .reel__title, .footer__wordmark{ letter-spacing:-0.02em; }

/* Legal pages: four-column table (privacy), footer legal line, video note */
.legal__table--4 .legal__row{ grid-template-columns:minmax(0,1.3fr) minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr); }
@media (max-width:760px){
  .legal__row, .legal__table--4 .legal__row{ grid-template-columns:1fr; gap:4px; }
  .legal__row--head{ display:none; }
  .legal__row span:first-child{ color:var(--on-dark); }
}
.legal__title{ font-weight:600; letter-spacing:-0.035em; }
.footer__legal{ font-size:12px; color:var(--on-dark-soft); margin-top:18px; text-align:center; line-height:1.6; }
.footer__legal a{ border-bottom:1px solid var(--line-dark); }
.film__note{
  margin-top:8px; text-align:right;
  font-size:10px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--on-dark-soft); opacity:0.45;
  transition:opacity 0.25s var(--ease);
}
.film__note:hover, .film__note:focus-within{ opacity:0.9; }
.film__note a{ color:inherit; }

/* ==========================================================================
   Home hero, "gate" version: the couple in the field, a small framed name
   in the middle; pressing it reveals the headline and the navigation.
   ========================================================================== */
/* Editorial group in the field: sky on top leaves the centre free for the name. */
.hero__slide--prato{
  background-image:url("../assets/img/gallery/editoriale/18.webp");
  background-position:center 70%;
}
.hero--gate .hero__slides::after{
  background:linear-gradient(180deg, rgba(14,14,14,0.25) 0%, rgba(14,14,14,0.05) 35%, rgba(14,14,14,0.15) 65%, rgba(14,14,14,0.45) 100%);
  transition:background 0.9s var(--ease);
}
.hero--gate.is-open .hero__slides::after{
  background:linear-gradient(90deg, rgba(14,14,14,0.85) 0%, rgba(14,14,14,0.55) 38%, rgba(14,14,14,0.15) 70%, rgba(14,14,14,0.05) 100%),
             linear-gradient(to top, rgba(14,14,14,0.6) 0%, rgba(14,14,14,0) 35%);
}
.hero__gate{
  position:absolute; z-index:3; left:0; right:0; top:50%;
  translate:0 -50%;
  width:max-content; margin:0 auto;
  padding:19px 40px;
  font:inherit; font-size:14px; font-weight:500;
  letter-spacing:0.32em; text-transform:uppercase; white-space:nowrap;
  color:var(--on-dark);
  background:rgba(14,14,14,0.18);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  border:1.5px solid rgba(242,241,238,0.85);
  cursor:pointer;
  transition:background-color 0.35s var(--ease), color 0.35s var(--ease), opacity 0.6s var(--ease), transform 0.6s var(--ease);
  animation:heroFadeUp 1.1s var(--ease) 0.3s both;
}
.hero__gate:hover, .hero__gate:focus-visible{ background:var(--on-dark); color:var(--dark); }
.hero__gate:focus-visible{ outline:2px solid var(--on-dark); outline-offset:4px; }
@keyframes gateOut{
  from{ opacity:1; transform:translateY(0); }
  to{ opacity:0; transform:translateY(14px); visibility:hidden; }
}
.hero--gate.is-open .hero__gate{
  pointer-events:none;
  animation:gateOut 0.55s var(--ease) both;
}
/* Closed: headline waits, nav hidden. Open: the usual entrance plays. */
.hero--gate:not(.is-open) .hero__inner{ visibility:hidden; }
.hero--gate:not(.is-open) .hero__title-line span,
.hero--gate:not(.is-open) .hero__sub,
.hero--gate:not(.is-open) .hero__tagline,
.hero--gate:not(.is-open) .hero__inner > .btn{ animation:none; }
/* Closed: only the monogram stays in the bar. */
html.gate-closed .nav__links,
html.gate-closed .nav__toggle{ opacity:0; pointer-events:none; }
.nav__links, .nav__toggle{ transition:opacity 0.6s var(--ease); }
html.gate-closed .wa-float{ opacity:0; pointer-events:none; }
.wa-float{ transition:opacity 0.6s var(--ease); }
@media (max-width:860px){
  .hero__gate{ font-size:12px; padding:16px 28px; letter-spacing:0.28em; }
  .hero__slide--prato{ background-position:50% 70%; }
}
/* Wide screens: keep the box in the sky, clear of the heads. */
@media (min-width:861px){ .hero__gate{ top:43%; } }
@media (prefers-reduced-motion: reduce){
  .hero__gate{ animation:none; transition:none; }
  .hero--gate.is-open .hero__gate{ animation:none; visibility:hidden; }
  .hero--gate .hero__slides::after{ transition:none; }
}

.footer__credit{ margin-top:6px; font-size:11px; letter-spacing:0.04em; color:var(--on-dark-soft); opacity:0.7; text-align:center; }