/* ════════════════════════════════════════════════════════════════════
   MOTONAUTICA ROBERTO CAPPONI — design system «Argento»
   Palette dal logo (grigio argento #959695, acromatico), tendente al chiaro.
   Display Playfair Display · testo Jost (Google Fonts)
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* superfici chiare */
  --porz:    #F4F4F2;   /* porcellana — fondo pagina */
  --carta:   #FBFBFA;   /* superfici in evidenza */
  --nebbia:  #E9E9E6;   /* fascia alternativa */
  --linea:   #D9D9D5;   /* hairline su chiaro */

  /* inchiostri */
  --inchiostro: #1E1F1F;/* testo primario */
  --acciaio:    #656767;/* testo secondario (AA su porcellana) */
  --argento:    #959695;/* marchio, dettagli, numeri — solo decorativo */
  --filo:       #C7C7C3;/* stroke decorativo chiaro */

  /* blocchi scuri radi (hero, CTA, footer) */
  --grafite:  #232525;
  --grafite-2:#1B1D1D;

  /* testo su scuro */
  --porz-dim: rgba(244, 244, 242, .66);

  --font-display: 'Playfair Display', 'Didot', Georgia, serif;
  --font-text:    'Jost', 'Futura', 'Century Gothic', Verdana, sans-serif;

  --wrap:  min(1240px, calc(100% - clamp(2.5rem, 6vw, 6rem)));
  --ease:  cubic-bezier(.19, 1, .22, 1);
}

/* ── Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  font-family: var(--font-text);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--inchiostro);
  background: var(--porz);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body.no-scroll { overflow: hidden; }

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
em { font-style: italic; }

::selection { background: var(--inchiostro); color: var(--porz); }

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

/* ── Utilities ─────────────────────────────────────────────────────── */
.wrap { width: var(--wrap); margin-inline: auto; }

.idx {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--argento);
}

.sec-label {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--acciaio);
}

.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.35rem, 5vw, 4.4rem);
  line-height: 1.14;
  letter-spacing: -.01em;
}

.display em { font-weight: 400; }

.display--center { text-align: center; }

.skip-link {
  position: fixed;
  top: .8rem; left: .8rem;
  z-index: 200;
  padding: .7rem 1.1rem;
  background: var(--inchiostro);
  color: var(--porz);
  font-size: .8rem;
  letter-spacing: .08em;
  transform: translateY(-300%);
}
.skip-link:focus { transform: none; }

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: .95rem 1.8rem;
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1px solid var(--inchiostro);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}

.btn--solid { background: var(--inchiostro); color: var(--porz); }
.btn--solid:hover { background: var(--grafite-2); border-color: var(--grafite-2); }

.btn--outline { background: transparent; color: var(--inchiostro); }
.btn--outline:hover { background: var(--inchiostro); color: var(--porz); }

/* varianti su fondo scuro */
.btn--solid.btn--invert { background: var(--porz); color: var(--inchiostro); border-color: var(--porz); }
.btn--solid.btn--invert:hover { background: transparent; color: var(--porz); }

.btn--outline.btn--invert { color: var(--porz); border-color: rgba(244,244,242,.45); }
.btn--outline.btn--invert:hover { background: var(--porz); color: var(--inchiostro); border-color: var(--porz); }

/* ── Grain ─────────────────────────────────────────────────────────── */
.grain {
  position: fixed; inset: -50%;
  z-index: 90;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══════════════════ PRELOADER ═══════════════════ */
.preloader {
  position: fixed; inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--porz);
  color: var(--inchiostro);
}

.preloader__inner { text-align: center; }

.preloader__kicker {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--acciaio);
}

.preloader__word {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: 1.1;
  margin-top: .6rem;
}

.preloader__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--acciaio);
  margin-top: .4rem;
}

.preloader__foot {
  position: absolute;
  right: clamp(1.6rem, 4vw, 3.4rem);
  bottom: 1.9rem;
  font-size: .82rem;
  letter-spacing: .12em;
  color: var(--acciaio);
  font-variant-numeric: tabular-nums;
}

.preloader__bar {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--inchiostro);
  transform: scaleX(0);
  transform-origin: left;
}

/* ═══════════════════ HEADER ═══════════════════ */
.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem clamp(1.4rem, 4vw, 3.2rem);
  --head-ink: var(--porz);
  --head-dim: rgba(244,244,242,.62);
  color: var(--head-ink);
  transition: transform .55s var(--ease), background .45s, color .45s, box-shadow .45s;
}

.site-head.is-scrolled {
  --head-ink: var(--inchiostro);
  --head-dim: var(--acciaio);
  background: rgba(244, 244, 242, .9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--linea);
}

.site-head.is-hidden { transform: translateY(-100%); }

.site-head__brand {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.site-head__logo {
  display: block;
  height: clamp(1.9rem, 3.2vw, 2.3rem);
  width: auto;
  transition: filter .45s;
}

/* il logo è argento: su header porcellana si scurisce, come il testo */
.site-head.is-scrolled .site-head__logo { filter: brightness(.3); }

.site-head__mono {
  display: grid;
  place-items: center;
  width: 2.35rem; height: 2.35rem;
  border: 1px solid var(--head-dim);
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: .04em;
}

.site-head__name {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.35;
}

.site-head__name small {
  display: block;
  font-weight: 300;
  font-size: .66rem;
  letter-spacing: .18em;
  color: var(--head-dim);
}

.site-head__nav {
  display: flex;
  gap: clamp(1.2rem, 2.6vw, 2.4rem);
}

.site-head__nav a {
  position: relative;
  font-size: .76rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--head-dim);
  transition: color .3s;
  padding-block: .4rem;
}

.site-head__nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}

.site-head__nav a:hover { color: var(--head-ink); }
.site-head__nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.site-head .btn { padding: .72rem 1.3rem; font-size: .7rem; color: inherit; border-color: var(--head-dim); }
.site-head .btn:hover { background: var(--head-ink); color: var(--porz); border-color: var(--head-ink); }
.site-head.is-scrolled .btn:hover { color: var(--porz); }

/* burger */
.site-head__burger {
  display: none;
  width: 2.6rem; height: 2.6rem;
  background: none;
  border: 1px solid var(--head-dim);
  color: var(--head-ink);
  cursor: pointer;
  position: relative;
}
.site-head__burger i,
.site-head__burger i::before,
.site-head__burger i::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 1.05rem; height: 1px;
  background: currentColor;
  transition: transform .4s var(--ease), opacity .3s;
}
.site-head__burger i { transform: translate(-50%, -50%); }
.site-head__burger i::before { transform: translateY(-4px); }
.site-head__burger i::after { transform: translateY(4px); }
body.menu-open .site-head__burger i { background: transparent; }
body.menu-open .site-head__burger i::before { transform: rotate(45deg); }
body.menu-open .site-head__burger i::after { transform: rotate(-45deg); }
body.menu-open .site-head__burger { color: var(--inchiostro); border-color: var(--filo); }

/* menu mobile */
.menu {
  position: fixed; inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  background: var(--porz);
  transform: translateY(-102%);
  transition: transform .65s var(--ease);
}
.menu.is-open { transform: none; }

.menu__links { display: grid; gap: 1.4rem; text-align: center; }
.menu__links a {
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 3.2rem);
  color: var(--inchiostro);
}
.menu__links a em { color: var(--acciaio); }

/* ═══════════════════ HERO ═══════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: clip;
  background: var(--grafite);
  color: var(--porz);
}

.hero__media { position: absolute; inset: 0; }
.hero__media img,
.hero__media video {
  width: 100%; height: 100%;
  object-fit: cover;
}

.hero__veil {
  position: absolute; inset: 0;
  /* velo uniforme e SEMPRE costante: il centro tenue (.28) lasciava "bucare"
     la scia/schiuma chiara del video, percepita come un velo grigio che
     compariva e scompariva a ogni loop. Il fondo più scuro regge il testo. */
  background: linear-gradient(to top,
    rgba(20, 22, 22, .78) 0%,
    rgba(20, 22, 22, .45) 45%,
    rgba(20, 22, 22, .45) 100%);
}

.hero__content {
  position: relative;
  width: var(--wrap);
  margin-inline: auto;
  padding-bottom: clamp(5.5rem, 12vh, 8.5rem);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3rem, 9vw, 7.8rem);
  line-height: 1.06;
  letter-spacing: -.012em;
}

.hero__line { display: block; }

.hero__line--ital {
  font-style: italic;
  color: var(--porz-dim);
  font-size: .88em;
}

.hero__sub {
  max-width: 44ch;
  margin-top: 1.6rem;
  font-size: 1.02rem;
  color: var(--porz-dim);
}

.hero__foot {
  position: absolute;
  left: 0; right: 0;
  bottom: 1.7rem;
  width: var(--wrap);
  margin-inline: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.hero__coords {
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--porz-dim);
}

.hero__cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  font-size: .7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--porz-dim);
}

.hero__cue-line {
  width: 1px; height: 3.4rem;
  background: rgba(244,244,242,.35);
  position: relative;
  overflow: hidden;
}

.hero__cue-line::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--porz);
  animation: cue 2.4s var(--ease) infinite;
}

@keyframes cue {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(102%); }
}

/* herosecondario (contatti) */
.hero--small { min-height: 66svh; }

.hero--small .hero__content { padding-bottom: clamp(3.6rem, 9vh, 6rem); }

/* ═══════════════════ MARQUEE ═══════════════════ */
.marquee {
  overflow: clip;
  border-block: 1px solid var(--linea);
  background: var(--carta);
  padding-block: 1.15rem;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}

.marquee__seq {
  display: flex;
  align-items: center;
  gap: 2.6rem;
  padding-right: 2.6rem;
  white-space: nowrap;
}

.marquee__seq span {
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--acciaio);
}

.marquee__seq em { color: var(--argento); font-style: normal; font-size: .7rem; }

@keyframes marquee { to { transform: translateX(-50%); } }

/* ═══════════════════ SEZIONI ═══════════════════ */
.sec { padding-block: clamp(5rem, 11vw, 9.5rem); }

.sec--nebbia { background: var(--nebbia); }

.sec__head {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 2.5rem;
  align-items: end;
  margin-bottom: clamp(2.8rem, 6vw, 4.8rem);
}

.sec__head .idx { display: block; margin-bottom: 1rem; }

.sec__aside {
  font-size: .98rem;
  color: var(--acciaio);
  border-left: 1px solid var(--filo);
  padding-left: 1.4rem;
}

/* ── Chi / Storia ──────────────────────────────────────────────────── */
.chi {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.6rem, 3vw, 2.6rem);
}

.chi__label { grid-column: 1 / 3; }

.chi__body { grid-column: 3 / 10; }

.chi__body .display { margin-bottom: 2.2rem; }

.chi__cols {
  columns: 2;
  column-gap: 2.6rem;
}

.chi__cols p {
  break-inside: avoid;
  color: var(--acciaio);
  font-size: 1.02rem;
}

.chi__cols p + p { margin-top: 1.2rem; }

.chi__quote {
  margin-top: 2.6rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--linea);
}

.chi__quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.3;
}

.chi__quote cite {
  display: block;
  margin-top: .9rem;
  font-style: normal;
  font-size: .76rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--acciaio);
}

.chi__portrait { grid-column: 10 / 13; align-self: end; }

/* ── Cornici immagine ──────────────────────────────────────────────── */
.frame {
  position: relative;
  overflow: hidden;
  background: var(--nebbia);
}

.frame img,
.frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frame--wide { aspect-ratio: 21 / 9; }
.chi__portrait .frame { aspect-ratio: 4 / 5; }

figure figcaption,
.hpanel figcaption {
  margin-top: .8rem;
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--acciaio);
}

figure figcaption em { font-family: var(--font-display); font-size: .92rem; }

/* ── Facts ─────────────────────────────────────────────────────────── */
.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(3.4rem, 7vw, 6rem);
  border-top: 1px solid var(--linea);
}

.facts__item {
  padding: 1.6rem 1.4rem 0 0;
}

.facts__item + .facts__item { padding-left: 1.6rem; border-left: 1px solid var(--linea); }

.facts__item span {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
}

.facts__item small {
  display: block;
  margin-top: .35rem;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--acciaio);
}

/* ── Magnum: cinema + orizzontale ──────────────────────────────────── */
.magnum__intro { margin-bottom: clamp(2.6rem, 5vw, 4.4rem); }

.magnum__cinema { margin-bottom: clamp(3.4rem, 7vw, 6rem); }

.hpin { position: relative; }

.htrack {
  display: flex;
  gap: clamp(1.4rem, 3vw, 3rem);
  padding-inline: clamp(1.4rem, 4vw, 3.2rem);
  width: max-content;
  will-change: transform;
}

.hpanel {
  width: min(46vw, 640px);
  flex-shrink: 0;
}

.hpanel--intro {
  width: min(34vw, 440px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 2rem;
}

.hpanel__kicker {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--argento);
  margin-bottom: 1.2rem;
}

.hpanel--intro h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.12;
}

.hpanel--intro p {
  margin-top: 1.1rem;
  color: var(--acciaio);
  font-size: .96rem;
}

.hpanel__img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--nebbia);
}

.hpanel__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}

.hprogress {
  width: var(--wrap);
  margin: 2.4rem auto 0;
  height: 2px;
  background: var(--linea);
}

.hprogress i {
  display: block;
  height: 100%;
  background: var(--inchiostro);
  transform: scaleX(0);
  transform-origin: left;
}

/* desktop: il blocco pinnato occupa tutto il viewport, galleria
   centrata verticalmente durante lo scroll orizzontale */
@media (min-width: 901px) {
  .hpin {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* verticale sotto i 901px (matchMedia del motore) */
@media (max-width: 900px) {
  .htrack {
    flex-direction: column;
    width: auto;
    /* stessi gutter del resto della pagina (.wrap) */
    padding-inline: calc((100% - var(--wrap)) / 2);
    row-gap: clamp(2.4rem, 7vw, 3rem);
  }
  .hpanel, .hpanel--intro { width: 100%; padding-right: 0; }
  .hpanel--intro { justify-content: flex-start; }
  .hprogress { display: none; }
}

/* ── Specifiche ────────────────────────────────────────────────────── */
.specs { border-top: 1px solid var(--linea); }

.specs__row {
  display: grid;
  grid-template-columns: minmax(11rem, .38fr) 1fr;
  gap: 1.5rem;
  align-items: baseline;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--linea);
}

.specs__row dt {
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--acciaio);
}

.specs__row dd {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.3;
}

.specs__note {
  margin-top: 1.4rem;
  font-size: .8rem;
  color: var(--acciaio);
}

/* ── Galleria ──────────────────────────────────────────────────────── */
.sec--galleria { position: relative; overflow: clip; }

.ghost {
  position: absolute;
  top: clamp(1rem, 4vw, 3rem);
  left: 0;
  z-index: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(5.5rem, 17vw, 15rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--filo);
  pointer-events: none;
  white-space: nowrap;
}

.gal {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
  margin-top: clamp(2.4rem, 5vw, 4rem);
}

/* parallax differenziale (desktop): hint di composizione GPU */
@media (min-width: 901px) {
  .gal__item { will-change: transform; }
}

.gal__item--a     { grid-column: 1 / 6; }
.gal__item--a .frame { aspect-ratio: 3 / 4.4; }
.gal__item--b     { grid-column: 7 / 13; margin-top: clamp(3rem, 8vw, 7rem); }
.gal__item--b .frame { aspect-ratio: 16 / 10; }
.gal__item--c     { grid-column: 1 / 6; margin-top: clamp(2rem, 5vw, 4rem); }
.gal__item--c .frame { aspect-ratio: 16 / 10; }
.gal__item--video { grid-column: 7 / 13; }
.gal__item--video .frame { aspect-ratio: 16 / 10; }
.gal__item--d     { grid-column: 1 / 8; margin-top: clamp(2rem, 5vw, 4rem); }
.gal__item--d .frame { aspect-ratio: 16 / 9; }
.gal__item--e     { grid-column: 9 / 13; }
.gal__item--e .frame { aspect-ratio: 4 / 5; }
.gal__item--f     { grid-column: 3 / 11; margin-top: clamp(2rem, 5vw, 4rem); }
.gal__item--f .frame { aspect-ratio: 21 / 9; }

/* ── CTA ───────────────────────────────────────────────────────────── */
.sec--cta {
  background: var(--grafite);
  color: var(--porz);
}

.cta .idx { color: var(--argento); }

.cta .display { margin-top: 1.2rem; }

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

/* ── Contatti ──────────────────────────────────────────────────────── */
.cgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.6vw, 2rem);
}

.ccard {
  border: 1px solid var(--linea);
  background: var(--carta);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: .9rem;
  min-height: 15rem;
}

.ccard h3 {
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--acciaio);
}

.ccard p, .ccard address {
  font-style: normal;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  line-height: 1.35;
}

.ccard a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--filo); }
.ccard a:hover { text-decoration-color: var(--inchiostro); }

.ccard__cta { margin-top: auto; }

.ccard__cta .btn { align-self: flex-start; }

.cnote {
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  columns: 2;
  column-gap: 2.6rem;
  color: var(--acciaio);
  font-size: .98rem;
}

/* ═══════════════════ FOOTER ═══════════════════ */
.foot {
  background: var(--grafite-2);
  color: var(--porz);
  padding: clamp(4rem, 8vw, 7rem) 0 2rem;
}

.foot__word {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(4rem, 13vw, 11rem);
  line-height: 1.06;
  color: transparent;
  -webkit-text-stroke: 1px rgba(149, 150, 149, .5);
  margin-bottom: clamp(2.6rem, 6vw, 4.6rem);
}

.foot__grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr 1fr;
  gap: 2.4rem;
  padding-bottom: 3rem;
}

.foot__tag {
  font-size: .92rem;
  color: var(--porz-dim);
  line-height: 1.7;
}

.foot__col h3 {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--argento);
  margin-bottom: 1.1rem;
}

.foot__col a {
  display: block;
  padding-block: .28rem;
  font-size: .92rem;
  color: var(--porz-dim);
  transition: color .3s;
}

.foot__col a:hover { color: var(--porz); }

.foot__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid rgba(149, 150, 149, .25);
  padding-top: 1.4rem;
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--porz-dim);
}

.foot__top {
  background: none;
  border: none;
  color: var(--porz-dim);
  font: inherit;
  cursor: pointer;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color .3s;
}

.foot__top:hover { color: var(--porz); }

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media (max-width: 1100px) {
  .chi__label { grid-column: 1 / 13; margin-bottom: .4rem; }
  .chi__body { grid-column: 1 / 8; }
  .chi__portrait { grid-column: 8 / 13; }
}

@media (max-width: 820px) {
  .site-head__nav { display: none; }
  .site-head__burger { display: block; }
  .site-head .btn { display: none; }
}

@media (max-width: 760px) {
  .sec__head { grid-template-columns: 1fr; align-items: start; gap: 1.4rem; }
  .chi__body { grid-column: 1 / 13; }
  .chi__portrait { grid-column: 2 / 13; }
  .chi__cols { columns: 1; }
  .facts { grid-template-columns: 1fr; }
  .facts__item + .facts__item { padding-left: 0; border-left: none; border-top: 1px solid var(--linea); margin-top: 1.2rem; padding-top: 1.2rem; }
  .gal { grid-template-columns: 1fr; }
  .gal__item--a, .gal__item--b, .gal__item--c, .gal__item--video,
  .gal__item--d, .gal__item--e, .gal__item--f { grid-column: 1 / -1; margin-top: 0; }
  .gal__item--a .frame, .gal__item--b .frame, .gal__item--c .frame,
  .gal__item--video .frame, .gal__item--d .frame, .gal__item--e .frame,
  .gal__item--f .frame { aspect-ratio: 16 / 10; }
  .cgrid { grid-template-columns: 1fr; }
  .cnote { columns: 1; }
  .specs__row { grid-template-columns: 1fr; gap: .3rem; }
  .foot__grid { grid-template-columns: 1fr; gap: 2rem; }
  .foot__base { flex-direction: column; align-items: flex-start; }
  .hero__foot { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
  .hero__cue { flex-direction: row; }
  .hero__cue-line { width: 3rem; height: 1px; }
  .hero__cue-line::after { animation: none; }
}

/* ═══════════════════ REDUCED MOTION ═══════════════════ */
@media (prefers-reduced-motion: reduce) {
  .preloader { display: none; }
  .marquee__track { animation: none; }
  .brands-marquee__track { animation: none; }
  .hero__cue-line::after { animation: none; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ═══════════════ SERVIZI (sgrid) ═══════════════ */
.sgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.6rem, 3.4vw, 2.8rem);
  margin-top: clamp(2.4rem, 5vw, 3.8rem);
}

.scard {
  border-top: 1px solid var(--linea);
  padding-top: 1.5rem;
}

.scard__n {
  font-family: var(--font-display);
  font-style: italic;
  font-size: .95rem;
  color: var(--argento);
}

.scard h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  line-height: 1.25;
  margin-top: .5rem;
}

.scard p {
  color: var(--acciaio);
  font-size: .98rem;
  line-height: 1.65;
  margin-top: .7rem;
}

/* striscia marchi */
.brands {
  margin-top: clamp(2.6rem, 5vw, 4.2rem);
}

.brands__label {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--acciaio);
}

/* marquee loghi marchi */
.brands-marquee {
  /* full-bleed: esce dal .wrap e arriva fino ai bordi del viewport */
  --bleed: calc((100% - 100vw) / 2);
  /* centrata: gap sopra (dal label) = gap sotto (a fine sezione).
     Il max() evita valori negativi su tablet/mobile (clamp con floor 5rem − 6rem < 0) */
  --band-gap: max(calc(clamp(5rem, 11vw, 9.5rem) - 6rem), 2.5rem);
  margin-top: var(--band-gap);
  /* Mangia il padding residuo della sezione finché il gap sotto non è = --band-gap */
  margin-bottom: calc(var(--band-gap) - clamp(5rem, 11vw, 9.5rem));
  margin-inline: var(--bleed);
  position: relative;
  overflow: clip;
  /* stesso fondo della sezione servizi (nebbia) */
  background: var(--nebbia);
  border-block: 1px solid var(--linea);
  padding-block: 1.5rem;
}

.brands-marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 36s linear infinite;
}

.brands-marquee__seq {
  display: flex;
  align-items: center;
  gap: clamp(2.4rem, 4.5vw, 4rem);
  padding-right: clamp(2.4rem, 4.5vw, 4rem);
}

.brands-marquee__seq em { color: var(--argento); font-style: normal; font-size: .7rem; }

.brands-marquee__logo { display: block; }

.brand-logo {
  display: block;
  height: clamp(26px, 3.4vw, 36px);
  width: auto;
  /* tone-down per fondo chiaro: grigio scuro attenuato */
  filter: grayscale(1) brightness(.6) opacity(.55);
  transition: filter .5s var(--ease), opacity .5s var(--ease);
  cursor: pointer;
}

.brand-logo:hover,
.brand-logo:focus-visible,
.brand-logo.is-color { filter: grayscale(0) brightness(1) opacity(1); }

/* logo nel footer */
.foot__logo {
  display: block;
  width: clamp(8.5rem, 13vw, 11.5rem);
  height: auto;
  margin-bottom: 1.15rem;
  opacity: .95;
}

@media (max-width: 700px) {
  .sgrid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   PAGE TRANSITION — fluid.glass
   (js/store.js · js/transition.js · js/page-transition.js)

   .rc-page avvolge <main> + footer ed è la radice animata dalla
   transizione: la nuova pagina sale da sotto e scala (enter), quella
   uscente si attenua al 50% e scivola dietro (leave). L'header resta
   fuori dalla radice: è la chrome persistente, come su fluid.glass.
   ════════════════════════════════════════════════════════════════════ */
.rc-page {
  position: relative;
  z-index: 1;
}

/* pagina in uscita: dietro quella entrante e non interagibile
   (stessa regola del kit: .page-leave { z-index:-1; pointer-events:none }) */
.rc-page.page-leave {
  z-index: -1;
  pointer-events: none;
}

/* pre-paint: quando la pagina entra con la transizione è nascosta finché
   il JS non la rivela. Le classi sono messe da uno script inline nel <head>
   (senza JS non esistono → contenuto sempre visibile). Failsafe: un'
   animation con delay rivela tutto anche se il JS si inceppa. */
html.rc-pre-enter .rc-page {
  visibility: hidden;
  animation: rc-reveal-failsafe 0s 2.8s forwards;
}

html.rc-pre-enter-head .site-head {
  visibility: hidden;
  animation: rc-reveal-failsafe 0s 2.8s forwards;
}

@keyframes rc-reveal-failsafe {
  to { visibility: visible; }
}

@media (prefers-reduced-motion: reduce) {
  html.rc-pre-enter .rc-page,
  html.rc-pre-enter-head .site-head {
    visibility: visible;
    animation: none;
  }
}

/* ── Router a fetch: velo + pagina entrante ────────────────────────── */

/* velo porcellana semi-trasparente che sfuma sopra la pagina 1 quando
   si naviga: la pagina 1 resta viva e fissa sotto, come su fluid.glass.
   Sta sopra il contenuto (z 1) ma sotto grain (90), menu (110) e header (120). */
.rc-veil {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--porz);
  opacity: 0;
  pointer-events: none;
}

/* pagina entrante montata fissa sopra il velo finché l'entrata non è
   conclusa: base porcellana opaca (nessuna trasparenza), poi torna in-flow */
.rc-page.is-entering {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  background: var(--porz);
}