:root {
  --bg: #fff2e0;
  --primary: #b55500;
  --primary-strong: #8c3f00;
  --ink: #34170a;
  --muted: rgba(181, 85, 0, 0.64);
  --muted-strong: rgba(181, 85, 0, 0.68);
  /* Bordi/hairline sottili: è il vecchio valore di --muted (0.36), separato così
     alzare la leggibilità dei testi "muted" non appesantisce i bordi. */
  --line: rgba(181, 85, 0, 0.36);
  --paper-line: rgba(181, 85, 0, 0.16);
  --white: #fffaf2;
  --space: clamp(20px, 4vw, 56px);
  --title-font: 'Poiret One', system-ui, sans-serif;
  --body-font: 'Outfit', system-ui, sans-serif;
  --spine-x: 50%;
  --spine-stroke: 3px;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  background: var(--bg);
  color: var(--primary);
  font-family: var(--body-font);
  font-size: 16px;
  /* clip (non hidden): nasconde l'overflow orizzontale SENZA rendere l'elemento
     uno scroll-container. Con `hidden`, html E body diventavano entrambi
     scroller verticali → doppio scroll annidato sullo stesso contenuto. */
  overflow-x: clip;
  scroll-behavior: auto;
}
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--bg);
  cursor: none;
}
/* Su touch ScrollSmoother NON fissa il wrapper (smoothTouch è off di default):
   il contenuto resta in flusso nativo e qualsiasi figlio più largo del
   viewport allarga la pagina — iOS Safari permette il pan orizzontale anche
   con overflow-x: clip sulla radice (vecchio quirk WebKit). Si contiene
   l'overflow direttamente sui contenitori del contenuto: `clip`, non `hidden`,
   così non diventano scroll-container e l'overflow verticale resta visibile.
   NB: quando è attivo, ScrollSmoother mette `overflow: visible` INLINE su
   #smooth-content — perciò il clip "vero" sta su page-shell e footer, che lo
   smoother non tocca mai; la regola sui wrapper copre le route senza smoother. */
#smooth-wrapper,
#smooth-content,
main.page-shell,
global-footer {
  overflow-x: clip;
}
/* Pagina preventivo (/quote): la classe è messa sul body da pricing-estimator.
   Stato di pagina, quindi globale (il CSS dei componenti pricing è un modulo
   con classi hashate). Desktop immersivo senza scroll di pagina: ogni step
   riempie il viewport; sotto i 1024px la pagina scorre fino al footer. */
body.estimator-page {
  overflow: hidden;
}
@media (max-width: 1024px) {
  body.estimator-page {
    overflow: auto;
  }
}
a,
button {
  color: inherit;
  cursor: none;
}
/* iOS Safari: due tap ravvicinati (es. i bottoni + / − del preventivo) fanno
   partire il double-tap zoom; una volta zoomata, la pagina si trascina anche
   in orizzontale. `manipulation` lascia pan e pinch-zoom ma elimina il
   double-tap-to-zoom (e il ritardo sul tap). Sul root copre tutta la pagina;
   la lista degli interattivi resta come cintura di sicurezza. */
html {
  touch-action: manipulation;
}
a,
button,
input,
select,
textarea,
label,
.interactive {
  touch-action: manipulation;
}
a {
  text-decoration: none;
}
img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
::selection {
  background: var(--primary);
  color: var(--bg);
}

/* Scrollbar nascoste ovunque. Su macOS/Safari sono già overlay (invisibili a
   riposo); qui si toglie la barra anche su Windows (Chrome/Edge/Firefox), dove
   il browser disegna le scrollbar "classiche" che rovinano il layout. Lo scroll
   resta pienamente funzionante: sparisce solo la barra. Nessun componente usa
   shadow DOM, quindi questa regola raggiunge anche i contenitori scrollabili
   interni (menù, preventivo). */
* {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Edge/IE legacy */
}
*::-webkit-scrollbar {
  /* Chrome, Safari, Edge Chromium */
  width: 0;
  height: 0;
  display: none;
}

.container {
  width: 100%;
  padding: 0 var(--space);
  margin: 0 auto;
  max-width: 1200px;
}

.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;
}

.page-shell {
  width: 100%;
  padding: 0 40px;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .page-shell {
    padding: 0 16px;
  }
}

p {
  font-weight: 200;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 400;
}

img.sepia,
.sepia img {
  filter: sepia(1);
}

img.sepia-light,
.sepia-light img {
  filter: sepia(0.5);
}

/* Tritone di marca (ombre brune → arancio → crema) via il filtro SVG
   #brand-tone definito nel layout. È l'unico modo di mappare le 3 fasce di
   luminanza in modo fedele: un filtro CSS nativo (sepia/saturate/hue-rotate)
   ingiallisce le alte luci e schiaccia le ombre sul nero.
   will-change: transform promuove l'immagine filtrata su un layer GPU così
   Safari ne mette in cache il risultato e lo scroll (ScrollSmoother trasla
   #smooth-content) non deve ri-rasterizzare il filtro a ogni frame. */
img.toned,
.toned img {
  filter: sepia(1); /* fallback per browser senza supporto a filter: url() */
  filter: url(#brand-tone);
  will-change: transform;
}

.monochrome {
  filter: grayscale(1);
}

/* <seawomp-image>: il framework NON emette il CSS del wrap, va fornito qui.
   Senza, il wrap è uno <span> inline e le immagini non si dimensionano (su
   mobile collassavano una sotto l'altra). Il wrap riempie l'elemento — che
   dimensioniamo noi (es. .me nell'intro) — e l'img riempie il wrap. overflow
   lasciato visibile: l'intro trasla le img in parallasse e non vanno clippate. */
.seawomp-image__wrap {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.seawomp-image__wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.seawomp-image__placeholder {
  position: absolute;
  inset: 0;
  background: rgba(181, 85, 0, 0.1);
  transition: opacity 300ms ease;
}
.seawomp-image--loaded .seawomp-image__placeholder {
  opacity: 0;
}

/* Cambio lingua: la pagina d'arrivo parte già coperta dal sipario (uno script
   inline nel <head> mette .pt-covered su <html> PRIMA del paint, leggendo il
   flag in sessionStorage) e page-transition lo scopre al mount. Evita il flash
   della pagina nuova prima che GSAP prenda il controllo dei pannelli. */
html.pt-covered .pt {
  visibility: visible;
}
html.pt-covered .pt__panel {
  transform: translateY(0);
}

.h1 {
  font-family: var(--title-font);
  font-weight: 200;
  font-size: clamp(38px, 5.6vw, 84px);
  line-height: 1;
  color: var(--primary);
}

/* Sottolineatura animata riusabile per i link testuali: all'hover la linea
   entra da sinistra e, al rilascio, esce verso destra — lo stesso effetto del
   bottone testuale "See all works". Si applica a qualsiasi <a> aggiungendo la
   classe (es. i link del footer). */
.link-underline {
  position: relative;
  /* inline-block: box ben definito per la pseudo-linea e area di hover stabile,
     così la transizione resta sul transform per tutta la durata dell'hover e
     rientra verso destra all'uscita (come il bottone testuale). */
  display: inline-block;
}
.link-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  /* Ritardo SOLO sul ritiro: se il puntatore perde l':hover per un istante (es.
     il footer che si "assesta" sotto ScrollSmoother sulla home scorre di qualche
     px sotto il mouse fermo), la sottolineatura non si ritira di scatto. La
     comparsa resta immediata (delay 0 in :hover). */
  transition-delay: 120ms;
}
.link-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
  transition-delay: 0s;
}