/* =========================================================================
   Restyling del 05/10/2026 (richiesta di Marco): stessi colori, stesso menu
   e stesso parallax, ma struttura e dettagli che si staccano dalla reference.
   Caricato per ultimo, dopo motion.css. I movimenti legati allo scorrimento
   li scrive scenes.js (variabili --fill, --y, --out); senza JavaScript o con
   "riduci movimento" tutto resta fermo e leggibile.

   1. Eyebrow: numero di sezione + barra obliqua del logo, al posto della linea
   2. Home, "The approach": solo tipografia, la frase si accende scorrendo
   3. Home, Latest work: le ultime due carte dei progetti, affiancate
   4. Servizi: mosaico di card con numeri grandi e leggeri
   5. Contatto: lo stesso pannello in home e in Services, sopra una foto di barca
   6. Selected Works: carte a tutto schermo che si impilano
   ========================================================================= */

/* ------------------------------------------------------------ CONTRASTO
   WCAG 2.2 AA (09/10/2026): il grigio di etichette, kicker e schede progetto
   (#5c6a74) sul fondo sabbia arrivava a 3,7:1. Stessa tinta, piu' scura:
   4,6:1 su sabbia, 5,5:1 su sabbia chiara, 6,1:1 sulle card. Sulle sezioni
   scure resta la versione chiara definita in style.css. */
:root { --ink-muted: #4f5b64; }

/* ------------------------------------------------------------ 1. EYEBROW
   La linea dopo l'etichetta era il segno piu' riconoscibile della reference.
   Ora l'etichetta e' preceduta dal numero della sezione (contato in CSS, cosi'
   l'HTML resta quello che e') e da una barra obliqua con l'inclinazione di
   quella che attraversa il monogramma AE. */
main { counter-reset: eyebrow; }

.kicker--line {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  counter-increment: eyebrow;
}
.kicker--line::before {
  content: counter(eyebrow, decimal-leading-zero);
  order: -2;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: none;
  line-height: 1;
  color: var(--ink);
}
.kicker--line::after {
  content: "";
  order: -1;
  flex: none;
  width: 1px;
  max-width: none;
  height: 1.15rem;
  background: currentColor;
  opacity: .7;
  rotate: 20deg;
}
.section--dark .kicker--line::before,
.contact--panel .kicker--line::before { color: var(--on-dark); }

/* Le altre linee decorative della reference prendono la stessa barra */
.statement-sig::before,
.testi-author::before {
  width: 1px;
  height: 1.2rem;
  background: currentColor;
  opacity: .55;
  rotate: 20deg;
}

/* ------------------------------------------------------------ HERO
   Home (06/10/2026): titolo piu' grande (+50%, poi ridotto del 20%: in
   tutto +20% rispetto all'originale) e testo in basso, vicino ai punti dello
   slider. La grandezza ha un tetto: la parola piu' lunga,
   "CONSULTANT" (circa 7,1 volte il corpo), deve stare nello schermo. Quando
   "YACHT INTERIOR" non ci sta su una riga, va a capo da sola. */
.hero { align-items: end; }
.hero-content { max-width: var(--max); padding-bottom: clamp(4.6rem, 10vh, 6rem); }
.hero .display--hero {
  font-size: calc(min(var(--fs-hero) * 1.5, (100vw - 2 * max(var(--gutter), 1.5rem)) / 7.1) * .8);
  letter-spacing: .06em;
  line-height: .98;
}
.hero-sub { margin-top: clamp(1.1rem, 2.4vh, 1.6rem); }

/* La foto di Dawn e' verticale (06/10/2026): nel formato orizzontale del
   desktop il taglio centrale lasciava fuori lo scafo. Si alza l'inquadratura
   fino a tenere scafo e meta' bassa dell'albero. */
.hero-slide--dawn img { object-position: center 74%; }

/* Hero dei progetti (06/10/2026): la foto e la sua sfumatura stanno in un
   riquadro proprio, che transitions.js fa coincidere con la foto della card.
   Il testo resta fuori, cosi' durante il passaggio non viene deformato. */
.project-hero::before { content: none; }
.project-hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--ink);
}
.project-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,23,29,.55) 0%, rgba(15,23,29,.15) 45%, rgba(15,23,29,.78) 100%);
}

/* ------------------------------------------------------------ 2. APPROACH
   Niente foto accanto alla citazione: la frase occupa la larghezza e passa
   dal grigio all'inchiostro mentre la si legge. Il riempimento corre lungo
   le righe perche' lo sfondo di un elemento in linea si spezza riga per riga
   come un'unica striscia. */
.approach { padding-block: clamp(5rem, 16vh, 12rem); }

.approach-grid { display: grid; gap: clamp(1.6rem, 4vh, 2.6rem); }

.approach-quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.45rem, 2.7vw, 2.6rem);
  line-height: 1.22;
  letter-spacing: -.005em;
  max-width: 40ch;
}
/* La versione italiana va a capo in punti precisi (Marco, 06/10/2026):
   le righe sono piu' lunghe, quindi qui il limite si toglie. Su telefono
   gli a capo forzati spezzerebbero male le righe e si ignorano. */
html[lang="it"] .approach-quote { max-width: none; }
@media (max-width: 899px) { .approach-quote br { display: none; } }
.approach-quote span {
  --fill: 100%;
  background-image:
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(rgba(27, 39, 48, .2), rgba(27, 39, 48, .2));
  background-size: var(--fill) 100%, 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.approach-foot {
  display: grid;
  gap: 1.2rem 3rem;
  align-items: start;
  padding-top: clamp(1.4rem, 3vh, 2rem);
}
.approach-foot .statement-sig { margin-top: 0; }
.approach-foot .prose { max-width: 46ch; }

@media (min-width: 900px) {
  .approach-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); }
  .approach-grid > .kicker { grid-column: 1 / span 3; align-self: start; margin-top: 1.3rem; }
  .approach-quote { grid-column: 4 / -1; }
  .approach-foot { grid-column: 4 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}

/* ------------------------------------------------------------ 3. LATEST WORK
   Al posto del collage (06/10/2026): le ultime due carte di Selected Works,
   in verticale e affiancate. Stesso fondo, raggio, titolo e scheda delle
   carte impilate, cosi' le due sezioni si riconoscono come una cosa sola. */
.latest { background: var(--sand); }
.latest .section-head--split { align-items: end; }
.latest-all { justify-self: start; }
@media (min-width: 900px) { .latest-all { justify-self: end; } }

.latest-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: clamp(1.5rem, 4vh, 3rem);
}
@media (min-width: 700px) { .latest-grid { grid-template-columns: 1fr 1fr; } }

.latest-card {
  display: grid;
  grid-template-rows: auto 1fr;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--sand-lighter);
}
.latest-media { display: block; overflow: hidden; }
.latest-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.latest-info { padding: calc(clamp(1.2rem, 2.6vw, 2.4rem) + 4px); } /* +4px per lato (Marco, 06/10/2026) */
.latest-info .project-title { margin-top: 0; font-size: clamp(1.5rem, 2.6vw, 2.3rem); }
.latest-info .project-dl { margin-top: 1rem; grid-template-columns: auto auto; justify-content: start; gap: .6rem 2rem; }
.latest-info .project-dl > div:nth-child(3) { grid-column: 1 / -1; }
.latest-info .link-arrow { margin-top: 1.4rem; }

/* ------------------------------------------------------------ 4. SERVIZI
   Mosaico su dodici colonne: card di larghezze diverse, una scura e una con
   foto. Numeri grandi in Cormorant leggero, che si spostano al passaggio. */
.section-head--split .lead { margin-top: 0; }
@media (min-width: 900px) {
  .section-head--split:has(> .lead) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: clamp(2rem, 5vw, 5rem); }
}

.svc-mosaic {
  display: grid;
  gap: clamp(.75rem, 1.2vw, 1.1rem);
  margin-top: clamp(1rem, 3vh, 2rem);
}
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(2rem, 6vh, 4.5rem);
  min-height: clamp(260px, 38vh, 380px);
  padding: clamp(1.5rem, 2.8vw, 2.8rem);
  background: var(--sand-lighter);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
}
.svc-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(4.5rem, 10vw, 9.5rem);
  line-height: .78;
  letter-spacing: -.03em;
  color: var(--ink);
  opacity: .9;
  transition: translate .8s var(--ease), opacity .8s var(--ease);
}
.svc-card:hover .svc-num { translate: .4rem 0; opacity: 1; }
.svc-body { max-width: 52ch; }
.svc-card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.15;
}
.svc-card p { margin-top: .8rem; color: var(--ink-soft); font-size: .9rem; }

/* 01: la card scura */
.svc-card--01 { background: var(--ink); color: var(--on-dark); }
.svc-card--01 .svc-num { color: var(--on-dark); }
.svc-card--01 p { color: rgba(236, 233, 228, .75); }

/* 04: fondo sabbia scuro */
.svc-card--04 { background: var(--sand-dark); }

/* 06: foto di styling sotto un velo scuro, testo chiaro */
.svc-card--06 { color: var(--on-dark); background: var(--ink); }
.svc-card--06 .svc-num { color: var(--on-dark); }
.svc-card--06 p { color: rgba(236, 233, 228, .85); }
.svc-card-media { position: absolute; inset: 0; z-index: -1; margin: 0; }
.svc-card-media img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.6s var(--ease); }
.svc-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(15, 23, 29, .2) 0%, rgba(15, 23, 29, .55) 100%),
    linear-gradient(180deg, rgba(15, 23, 29, .5) 0%, rgba(15, 23, 29, .45) 45%, rgba(15, 23, 29, .88) 100%);
}
.svc-card--06:hover .svc-card-media img { scale: 1.04; }

@media (min-width: 700px) and (max-width: 1023px) {
  .svc-mosaic { grid-template-columns: 1fr 1fr; }
  .svc-card--04, .svc-card--06 { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .svc-mosaic { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .svc-card--01 { grid-column: span 7; }
  .svc-card--02 { grid-column: span 5; }
  .svc-card--03 { grid-column: span 4; }
  .svc-card--04 { grid-column: span 8; }
  .svc-card--05 { grid-column: span 5; }
  .svc-card--06 { grid-column: span 7; min-height: clamp(320px, 46vh, 460px); }
  /* nelle card larghe numero e testo stanno sulla stessa riga */
  .svc-card--01, .svc-card--04, .svc-card--06 {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .svc-card--01 .svc-body, .svc-card--04 .svc-body, .svc-card--06 .svc-body { max-width: 40ch; }
  .svc-card--01 .svc-num, .svc-card--04 .svc-num, .svc-card--06 .svc-num { align-self: flex-start; }
}

/* ------------------------------------------------------------ 5. CONTATTO
   Un solo blocco, uguale in home e in Services (06/10/2026): foto di barca a
   tutta larghezza e sopra un pannello scuro con titolo, recapiti e modulo.
   Linguaggio editoriale: niente riquadri ne' numeri, solo filetti sottili,
   etichette piccole in maiuscoletto e il serif per cio' che si legge. */
.contact--panel {
  position: relative;
  isolation: isolate;
  padding-block: clamp(6rem, 22vh, 14rem);
  color: var(--on-dark);
  --line: var(--line-light);
  --line-strong: rgba(236, 233, 228, .45);
  --ink-muted: rgba(236, 233, 228, .62);
}
.contact-bg { position: absolute; inset: 0; z-index: -1; margin: 0; }
.contact-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.contact-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 29, .3) 0%, rgba(15, 23, 29, .55) 100%);
}
.contact-panel {
  display: grid;
  gap: clamp(2.5rem, 6vh, 3.5rem);
  padding: clamp(1.75rem, 4.5vw, 4.5rem);
  background: rgba(27, 39, 48, .84);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.contact--panel .kicker--line::before { color: var(--on-dark); }
.contact-text .display { margin-top: 1.1rem; }
.contact-text .lead { margin-top: 1.2rem; max-width: 40ch; color: rgba(236, 233, 228, .78); }

/* Recapiti: due righe, il valore in serif */
.contact-list { margin: clamp(2rem, 5vh, 2.8rem) 0 0; display: grid; gap: 1.1rem; }
.contact-list div { display: grid; gap: .25rem; }
.contact-list dt { font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-muted); }
.contact-list dd { margin: 0; }
.contact-list a,
.contact-social a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  transition: text-decoration-color .3s var(--ease);
}
.contact-list a { font-family: var(--font-display); font-size: clamp(1.2rem, 1.9vw, 1.55rem); letter-spacing: .02em; overflow-wrap: anywhere; }
.contact-list a:hover, .contact-social a:hover { text-decoration-color: currentColor; }
.contact-social {
  margin-top: clamp(1.4rem, 3vh, 2rem);
  display: flex;
  gap: 1.8rem;
  font-size: .62rem;
  letter-spacing: .24em;
  text-transform: uppercase;
}

/* Modulo: campi a filetto, due colonne, il messaggio a tutta riga */
.contact-form { gap: 0; }
.contact-fields { display: grid; gap: 1.6rem 2rem; }
.contact-fields .form-group { display: contents; }
@media (min-width: 640px) {
  .contact-fields { grid-template-columns: 1fr 1fr; }
  .contact-fields .field--wide { grid-column: 1 / -1; }
}
/* La linea sotto i campi non si muove al clic (Marco, 05/10/2026): altezza
   fissa, niente stile nativo, al focus cambia solo il colore della linea.
   Vale anche per l'autocompletamento. */
.contact-form .field input,
.contact-form .field textarea {
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  outline: none;
  margin: 0;
  line-height: 1.5;
  color: var(--on-dark);
  -webkit-text-fill-color: var(--on-dark);
  caret-color: var(--on-dark);
}
.contact-form .field input { height: calc(1.5em + 1.6rem + 1px); padding-block: .8rem; }
.contact-form .field textarea { min-height: 7.5rem; }
.contact-form .field input:focus,
.contact-form .field textarea:focus { outline: none; border-bottom-width: 1px; border-color: var(--on-dark); }
/* Autocompletamento del browser (nome, email): Chrome e Safari forzano testo nero su fondo chiaro.
   currentColor non basta, perché in quel contesto è gia' il nero imposto dal browser: il colore va
   detto per esteso, con !important, e il fondo chiaro si copre con un'ombra interna blu notte. */
.contact-form .field input:-webkit-autofill,
.contact-form .field input:-webkit-autofill:hover,
.contact-form .field input:-webkit-autofill:focus,
.contact-form .field textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--on-dark) !important;
  color: var(--on-dark) !important;
  caret-color: var(--on-dark);
  -webkit-box-shadow: 0 0 0 1000px var(--ink) inset !important;
  box-shadow: 0 0 0 1000px var(--ink) inset !important;
  transition: background-color 9999s ease-out 0s;
}
.contact--panel :focus-visible { outline-color: var(--on-dark); }

.contact-form .form-foot { margin-top: clamp(1.8rem, 4vh, 2.4rem); }
.contact-form .form-note { color: rgba(236, 233, 228, .6); }
.contact--panel .btn--solid { background: var(--on-dark); border-color: var(--on-dark); color: var(--ink); }
.contact--panel .btn--solid:hover { background: transparent; color: var(--on-dark); border-color: var(--on-dark); }
.contact-form .form-msg { margin-top: 1.2rem; }
.contact--panel .form-msg--ok { border-color: var(--on-dark); background: rgba(236, 233, 228, .08); }
.contact--panel .form-msg--err { border-color: #d9a0a0; color: #f0c9c9; background: rgba(217, 160, 160, .1); }

@media (min-width: 1100px) {
  .contact-panel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
}

/* Telefono: la foto resta visibile come apertura, il pannello va a filo
   dei bordi e il pulsante diventa a tutta larghezza, facile da premere. */
@media (max-width: 699px) {
  .contact--panel { padding-block: 38svh 0; }
  .contact--panel .wrap { padding-inline: 0; }
  .contact-panel {
    padding: 2.4rem var(--gutter) 3rem;
    border-radius: 0;
    background: rgba(27, 39, 48, .94);
  }
  .contact-list a { font-size: 1.3rem; }
  .contact-social { gap: 1.5rem; }
  .contact-social a { padding-block: .6rem; }
  .contact-form .form-foot { flex-direction: column-reverse; align-items: stretch; gap: 1rem; }
  .contact-form .btn--solid { width: 100%; justify-content: center; }
  .contact-form .form-note { max-width: none; }
}

/* ------------------------------------------------------------ 6. CARTE IMPILATE
   Ogni progetto e' una carta alta quanto lo schermo, ferma in cima mentre la
   successiva le scorre sopra. La carta che viene coperta si ritira e si
   scurisce (--out, da scenes.js). Il testo sta sempre su un pannello pieno,
   mai sopra la foto. */
.stack { position: relative; padding-bottom: clamp(2rem, 6vh, 4rem); }

.stack-card {
  position: sticky;
  top: 0;
  height: 100svh;
  padding: calc(var(--nav-h) + .5rem) var(--gutter) clamp(1rem, 3vh, 2rem);
  background: var(--sand);
}
/* Pausa su ogni progetto (Marco, 06/10/2026): la carta resta ferma in cima
   per circa due scorrimenti prima che arrivi la successiva. Il margine e'
   spazio di scorrimento coperto dalla carta stessa, che e' alta uno schermo. */
.stack-card:not(:last-child) { margin-bottom: 40svh; }

.stack-inner {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--sand-lighter);
  transform-origin: 50% 0;
  scale: calc(1 - var(--out, 0) * .07);
}
.stack-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  opacity: calc(var(--out, 0) * .5);
  pointer-events: none;
}
.stack-media { display: block; overflow: hidden; min-height: 0; }
.stack-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: calc(1 + (1 - var(--in, 1)) * .12);
  transition: transform 1.6s var(--ease);
}
.stack-media:hover img { transform: scale(1.03); }

.stack-panel {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.2rem, 3vw, 3rem);
  align-content: end;
}
.stack-thumb { display: none; margin: 0; overflow: hidden; border-radius: var(--radius); }
.stack-thumb img { width: 100%; height: 100%; object-fit: cover; }
.stack-info .project-title { margin-top: 0; }
.stack-info .project-dl { margin-top: 1rem; }
.stack-info .link-arrow { margin-top: 1.4rem; }

@media (max-width: 899px) {
  /* scheda compatta: anno e luogo affiancati, commissione sotto */
  .stack-info .project-dl { grid-template-columns: auto auto; justify-content: start; gap: .6rem 2rem; }
  .stack-info .project-dl > div:nth-child(2) { grid-column: 1 / -1; order: 3; }
  .stack-info .project-title { font-size: clamp(1.6rem, 7vw, 2.2rem); }
}

/* Titolo, scheda e "See project" stanno in alto (Ana, 06/10/2026): la carta
   successiva copre questa dal basso, e con il testo in fondo il link spariva
   al primo scorrimento. In fondo resta la foto piccola, che si puo' perdere. */
@media (max-width: 899px) {
  .stack-inner { grid-template-rows: minmax(0, 50%) auto; align-content: start; }
  .stack-panel { align-content: start; }
}

@media (min-width: 900px) {
  .stack-inner { grid-template-rows: none; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .stack-card--rev .stack-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .stack-card--rev .stack-media { order: 2; }
  .stack-panel { grid-template-rows: auto minmax(0, 1fr); align-content: stretch; }
  .stack-info { order: -1; }
  /* la foto di supporto (Ana e Marco, 06/10/2026): larga quanto il pannello
     e alta quanto lo spazio che resta sotto la scheda */
  .stack-panel { gap: clamp(1.5rem, 3vh, 2.2rem); }
  .stack-thumb { display: block; align-self: stretch; width: 100%; height: 100%; min-height: 0; }
  .stack-card--rev .stack-thumb { justify-self: end; }
}

/* Schermi bassi (telefono in orizzontale): niente impilamento */
@media (max-height: 560px) {
  .stack-card { position: relative; height: auto; }
  .stack-card:not(:last-child) { margin-bottom: 0; }
  .stack-inner { scale: 1; }
  .stack-media { aspect-ratio: 16 / 9; }
}

/* ------------------------------------------------------------ 7. TELEFONO */
@media (max-width: 699px) {
  .approach { padding-block: 4.5rem; }
  .approach-quote { font-size: clamp(1.6rem, 7.4vw, 2.2rem); }
  .svc-card { min-height: 0; gap: 2.2rem; }
  .svc-num { font-size: 4.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .stack-inner, .stack-media img { translate: none !important; scale: none !important; }
  .stack-inner::after { opacity: 0; }
}

/* =========================================================================
   8. GIORNALE DI BORDO (09/10/2026, copia di prova /next)
   Le pagine interne prendono la griglia a 12 colonne della home: etichetta
   nelle prime tre colonne, contenuto dalla quarta, come in "The approach".
   Solo CSS: HTML e testi restano quelli approvati. Dove serve un aggancio
   si usa :has(); senza supporto resta l'impaginazione precedente.
   a. Testata delle pagine interne (About, Services, Selected Works)
   b. Invito finale (About, Selected Works, pagine progetto)
   c. Scheda, brief e scope delle pagine progetto
   d. Testimonianze
   ========================================================================= */

/* ------------------------------------------------------------ a. TESTATA
   Prima: titolo piccolo in alto a sinistra e una fascia vuota sotto. Ora il
   titolo e' grande e sta sulla griglia, il lead gli si allinea sotto. */
.page-hero {
  padding: calc(var(--nav-h) + clamp(3.5rem, 12vh, 8rem)) 0 clamp(3rem, 8vh, 5.5rem);
}
.page-hero .display {
  font-size: clamp(2.7rem, 6.4vw, 6rem);
  line-height: .98;
  letter-spacing: 0;
  text-wrap: balance;
}
.page-hero .lead { max-width: 52ch; color: var(--ink-soft); }

@media (min-width: 900px) {
  .page-hero .wrap {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1rem, 2vw, 2rem);
  }
  .page-hero .kicker { grid-column: 1 / span 3; grid-row: 1; align-self: start; margin-top: 1.5rem; }
  .page-hero .display { grid-column: 4 / -1; grid-row: 1; margin-top: 0; }
  .page-hero .lead { grid-column: 4 / span 6; margin-top: clamp(1.8rem, 4vh, 2.6rem); }
}

/* ------------------------------------------------------------ b. INVITO FINALE
   Prima: blocco centrato e recapiti in una riga di maiuscoletto, che su
   telefono si attaccavano ("...63 89LINKEDININSTAGRAM"). Ora stessa griglia
   delle altre sezioni e recapiti come righe di un registro, in serif:
   email e telefono si leggono e si toccano come il pulsante. */
.section--dark:has(> .cta-band) { padding-block: clamp(5rem, 15vh, 10rem); }
.cta-band { text-align: left; }
.cta-band .display {
  margin-top: 1.1rem;
  font-size: clamp(2.3rem, 4.8vw, 4.6rem);
  line-height: 1.02;
  max-width: 13ch;
  text-wrap: balance;
}
.cta-band .lead { margin: 1.5rem 0 0; text-align: left; max-width: 46ch; color: rgba(236, 233, 228, .8); }
.cta-band .btn { margin-top: 2.2rem; }

.cta-contacts {
  margin-top: clamp(2.8rem, 7vh, 4.5rem);
  padding-top: 0;
  border-top: 0;
  display: grid;
  gap: 0;
  justify-content: stretch;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  letter-spacing: .02em;
  text-transform: none;
}
.cta-contacts li { border-top: 1px solid var(--line-light); }
.cta-contacts li:last-child { border-bottom: 1px solid var(--line-light); }
.cta-contacts a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
  overflow-wrap: anywhere;
  text-decoration: none;
  transition: padding-left .5s var(--ease), color .5s var(--ease);
}
.cta-contacts a::after {
  content: "\2192";
  font-family: var(--font-ui);
  font-size: .9rem;
  opacity: .5;
  transition: opacity .5s var(--ease), translate .5s var(--ease);
}
.cta-contacts a:hover { text-decoration: none; padding-left: .4rem; }
.cta-contacts a:hover::after { opacity: 1; translate: .3rem 0; }

@media (min-width: 900px) {
  .cta-band {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1rem, 2vw, 2rem);
    align-items: start;
  }
  .cta-band > .kicker { grid-column: 1 / span 3; grid-row: 1; margin-top: 1.4rem; }
  .cta-band > .display { grid-column: 4 / span 7; grid-row: 1; margin-top: 0; max-width: 15ch; }
  .cta-band > .lead { grid-column: 4 / span 5; grid-row: 2; }
  .cta-band > .btn { grid-column: 10 / -1; grid-row: 2; justify-self: end; align-self: end; margin-top: 0; }
  .cta-contacts { grid-column: 4 / -1; grid-row: 3; grid-template-columns: max-content max-content repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); }
  .cta-contacts a { overflow-wrap: normal; white-space: nowrap; }
  .cta-contacts li:last-child { border-bottom: 0; }
}

/* ------------------------------------------------------------ c. PAGINA PROGETTO
   La scheda diventa un registro: valori in serif, leggibili. Il brief sta
   da solo sulla griglia, in serif grande come la frase di "The approach";
   lo scope sotto, in due colonne numerate. Aitana ha un'impaginazione sua
   (citazione e testo lungo) e resta com'e'. */
.project-meta dd {
  margin-top: .55rem;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.35vw, 1.3rem);
  line-height: 1.35;
  letter-spacing: .01em;
  color: var(--ink);
}

.grid--2:has(> div > [data-i18n="ui.brief"]):has(.scope-list:not(.scope-list--full)) > div:first-child .prose p {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.4rem, 2.3vw, 2.1rem);
  line-height: 1.32;
  letter-spacing: -.003em;
  color: var(--ink);
  text-wrap: pretty;
}
.scope-list li { font-size: .95rem; color: var(--ink); }
.scope-list li::before {
  font-style: italic;
  font-size: 1rem;
  letter-spacing: .04em;
  color: var(--ink-muted);
  padding-top: 0;
}

@media (min-width: 900px) {
  .grid--2:has(> div > [data-i18n="ui.brief"]):has(.scope-list:not(.scope-list--full)) {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1rem, 2vw, 2rem);
    row-gap: clamp(4rem, 11vh, 7.5rem);
  }
  .grid--2:has(> div > [data-i18n="ui.brief"]):has(.scope-list:not(.scope-list--full)) > div {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: start;
  }
  .grid--2:has(> div > [data-i18n="ui.brief"]):has(.scope-list:not(.scope-list--full)) > div > .kicker {
    grid-column: 1 / span 3;
    margin-top: .6rem;
  }
  .grid--2:has(> div > [data-i18n="ui.brief"]):has(.scope-list:not(.scope-list--full)) > div > .prose {
    grid-column: 4 / -1;
    margin-top: 0 !important;
    max-width: none;
  }
  .grid--2:has(> div > [data-i18n="ui.brief"]):has(.scope-list:not(.scope-list--full)) > div:first-child .prose p { max-width: 32ch; }
  .grid--2:has(> div > [data-i18n="ui.brief"]):has(.scope-list:not(.scope-list--full)) .scope-list {
    grid-column: 4 / -1;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(1.5rem, 3vw, 3rem);
    align-content: start;
  }
  .grid--2:has(> div > [data-i18n="ui.brief"]):has(.scope-list:not(.scope-list--full)) > div:last-child > .prose {
    max-width: 52ch;
    font-size: var(--fs-lead);
    margin-bottom: .4rem;
  }
}

/* ------------------------------------------------------------ d. TESTIMONIANZE
   Sulla griglia: titolo a sinistra, citazione a destra, piu' grande. */
@media (min-width: 900px) {
  .section--dark:has(.testi) > .wrap {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1rem, 2vw, 2rem);
    align-items: start;
  }
  .section--dark:has(.testi) .section-head { grid-column: 1 / span 4; margin-bottom: 0; }
  .section--dark:has(.testi) .testi { grid-column: 6 / -1; }
  .section--dark:has(.testi) .quote { font-size: clamp(1.5rem, 2.3vw, 2.2rem); line-height: 1.38; }
}

/* La barra obliqua dell'autore della testimonianza successiva, ruotata,
   sporgeva di qualche pixel oltre il bordo e restava visibile a destra. */
.testi-author::before { margin-left: 6px; }

/* ------------------------------------------------------------ e. ETICHETTE
   Il maiuscoletto spaziato era a 10,9 px (.68rem), sotto la soglia di 11 px
   per il testo che si usa. Un passo in su, stesso carattere e spaziatura. */
:root { --fs-kicker: .72rem; }
.btn, .link-arrow, .burger, .nav-desktop a, .cta-contacts-label { font-size: .72rem; }
.field label, .project-meta dt, .project-dl dt, .contact-list dt, .contact-social, .cred-list span { font-size: .7rem; }

/* ------------------------------------------------------------ TELEFONO */
@media (max-width: 899px) {
  .page-hero .kicker { margin-bottom: 1.2rem; }
  .cta-band .btn { width: 100%; justify-content: center; }
  .cta-band .display { max-width: none; }
}

/* =========================================================================
   9. REVISIONE FINALE DI ANA (mail del 15/10/2026, copia di prova /next)
   a. Header: il monogramma da solo, piu' grande (44 px, come nel footer)
   b. Home, apertura: il brand e' la scritta piu' grande, poi la professione,
      poi lo slogan; frecce e trattini piu' facili da toccare; quarta foto
      inquadrata sulla scultura
   c. Schede progetto a quattro righe nello stesso ordine ovunque:
      Completed, Shipyard / vessel, Place, Commission
   d. A+: la foto di profilo dello yacht in formato naturale, senza tagli
   ========================================================================= */

/* a. header */
/* Ana, 15/10 ore 12:21: "aún bastante imperceptible, al menos grande como el botón de get in touch" */
.brand-mark,
.footer-brand .brand-mark { width: 64px; height: 64px; }
@media (max-width: 699px) { .brand-mark { width: 52px; height: 52px; } }

/* b. apertura */
.hero .hero-title span { display: block; }
.hero-role {
  margin-top: clamp(.9rem, 2vh, 1.4rem);
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: clamp(.78rem, 1.3vw, 1.05rem);
  letter-spacing: .32em;
  text-transform: uppercase;
  line-height: 1.4;
  color: rgba(236, 233, 228, .88);
  text-shadow: none;
}
.hero .hero-sub {
  font-size: clamp(.85rem, 1.05vw, .98rem);
  line-height: 1.8;
  max-width: 52ch;
  color: rgba(236, 233, 228, .78);
}
.hero-slide--sculpture img { object-position: 35% 30%; }

.hero { touch-action: pan-y; }
.hero-nav {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.hero-nav .hero-dots { position: static; transform: none; gap: .3rem; }
.hero-dots button,
.hero-dots button[aria-pressed="true"] { position: relative; width: 44px; height: 44px; padding: 0; background: none; }
.hero-dots button::before { content: none; }
.hero-dots button::after {
  content: "";
  position: absolute;
  left: 6px; right: 6px; top: 50%;
  height: 2px;
  background: rgba(236, 233, 228, .35);
  transition: background .4s var(--ease);
}
.hero-dots button:hover::after,
.hero-dots button:focus-visible::after { background: rgba(236, 233, 228, .7); }
.hero-dots button[aria-pressed="true"]::after { background: rgba(236, 233, 228, .95); }
.hero-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: rgba(236, 233, 228, .8);
  transition: color .3s var(--ease), background .3s var(--ease);
}
.hero-arrow:hover, .hero-arrow:focus-visible { color: #fff; background: rgba(236, 233, 228, .12); }
.hero-arrow--prev svg { transform: scaleX(-1); }
.hero-arrow svg { width: 22px; height: 8px; }
.hero .hero-arrow:focus-visible { outline-color: var(--on-dark); }

/* c. schede a quattro righe */
.latest-info .project-dl,
.stack-info .project-dl { grid-template-columns: auto auto; justify-content: start; gap: .6rem 2rem; }
.latest-info .project-dl > div:nth-child(2),
.stack-info .project-dl > div:nth-child(2),
.latest-info .project-dl > div:nth-child(3),
.stack-info .project-dl > div:nth-child(3) { grid-column: auto; order: 0; }
.latest-info .project-dl > div:nth-child(4),
.stack-info .project-dl > div:nth-child(4) { grid-column: 1 / -1; }

/* scheda senza foto (Gitana): lo spazio della foto resta, con una nota */
.latest-media--pending {
  margin: 0;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  background: var(--sand-dark);
  font-size: .62rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* d. A+ */
.gallery-item--natural img { aspect-ratio: auto !important; height: auto; }

/* e. gallery: ogni foto nel formato esatto della sua cella (Ana, 15/10/2026: "not crop elements").
   Le foto sono gia' ritagliate a questi rapporti, quindi object-fit non toglie nulla. */
.gallery-item--r43 img { aspect-ratio: 4 / 3 !important; }
.gallery-item--r32 img { aspect-ratio: 3 / 2 !important; }
.gallery-item--r34 img { aspect-ratio: 3 / 4 !important; }
.gallery-item--r23 img { aspect-ratio: 2 / 3 !important; }
.gallery-item--r2 img { aspect-ratio: 2 / 1 !important; }
@media (max-width: 699px) {
  /* su telefono le celle strette vanno a due per riga: le verticali restano verticali */
  .gallery-item--third { grid-column: span 1; }
  .gallery-item--two-thirds { grid-column: span 2; }
}

/* f. Latest work (Marco, 15/10/2026, quarta versione): le carte della home hanno la struttura di quelle di
   Selected Works. Aitana occupa tre quarti della riga (nove colonne): foto grande a sinistra, pannello con
   titolo, scheda, "See project" e foto piccola a destra. Gitana occupa il quarto che resta (tre colonne), in
   verticale al suo fianco: foto sopra, scheda sotto, stessa altezza. I titoli hanno la stessa misura. */
.latest-thumb { display: none; }
@media (min-width: 900px) {
  .latest-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1rem, 2vw, 2rem);
    align-items: stretch;
  }
  .latest-card {
    display: grid;
    grid-template-rows: none;
    background: var(--sand-lighter);
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 0;
  }
  .latest-card--feature { grid-column: 1 / span 9; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .latest-card--small { grid-column: 10 / -1; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .latest-card .latest-media { display: block; overflow: hidden; min-height: 0; }
  .latest-card .latest-media img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
  .latest-card--small .latest-media img { aspect-ratio: auto; }
  .latest-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(1.5rem, 3vh, 2.2rem);
    padding: clamp(1.2rem, 3vw, 3rem);
    min-height: 0;
  }
  .latest-card--small .latest-panel { grid-template-rows: auto; align-content: start; padding: clamp(1.2rem, 2vw, 2rem); }
  .latest-info { padding: 0; }
  /* stesso corpo del titolo delle carte di Selected Works */
  .latest-info .project-title { font-size: clamp(1.7rem, 3.4vw, 2.9rem); }
  /* nella carta stretta la scheda va in una colonna sola */
  .latest-card--small .latest-info .project-dl { grid-template-columns: 1fr; gap: .5rem; }
  .latest-card--small .latest-info .project-dl > div:nth-child(4) { grid-column: auto; }
  .latest-thumb { display: block; margin: 0; overflow: hidden; border-radius: var(--radius); min-height: 0; }
  .latest-thumb img { width: 100%; height: 100%; object-fit: cover; }
}
@media (max-width: 899px) {
  .latest-card .latest-media img { aspect-ratio: 3 / 2; }
}

/* g. pagina di Gitana: la gallery arrivera' */
.gallery-soon {
  padding: clamp(3rem, 10vh, 6rem) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.gallery-soon .display { margin: 0; }
.gallery-soon .lead { margin: 1rem auto 0; max-width: 40ch; }

/* h. Instagram in vista (Marco, 15/10/2026): icona e nome nel pannello del menu, accanto al monogramma,
   e nel footer sotto la frase del brand. Il link testuale nella colonna Contact resta. */
.social-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: inherit;
  opacity: .85;
  transition: opacity .3s var(--ease);
}
.social-link:hover, .social-link:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.social-link svg { flex: none; }
.footer-brand .social-link { margin-top: 1.4rem; }
.nav-mobile-foot--brand { justify-content: space-between; align-items: center; gap: 1rem; }
/* nel menu lo stesso identico stile del footer: menu.css e ana.css ridisegnano i link del fondo
   (minuscolo, corpo .72rem, blocco), qui si riprende la mano con un selettore piu' specifico */
.nav-mobile .nav-mobile-foot--brand a.social-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem 0;
  border: 0;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: .66rem;
  letter-spacing: .22em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--on-dark);
  opacity: .85;
}
.nav-mobile .nav-mobile-foot--brand a.social-link:hover,
.nav-mobile .nav-mobile-foot--brand a.social-link:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.nav-mobile .nav-mobile-foot--brand a.social-link svg { width: 18px; height: 18px; }
@media (min-width: 1440px) {
  .nav-mobile-foot--brand { flex-direction: row; }
}

/* i. Services, testata (Ana, 15/10/2026, ultime indicazioni): la foto del mood board di materiali sta dietro
   il titolo, il testo e' il sottotitolo; sotto, la riga divisoria e poi la sezione 2 com'era. Riusa la
   testata delle pagine progetto. Lo sfondo del blocco contatti di Services e' la barca a vela al tramonto. */
.page-hero--photo { min-height: 72svh; }
.page-hero--photo .lead { margin-top: 1.4rem; max-width: 52ch; color: rgba(236, 233, 228, .86); }
.page-hero--photo + .section { border-top: 1px solid var(--line); }
@media (max-width: 699px) { .page-hero--photo { min-height: 64svh; } }

/* j. Blocco contatti (Marco, 15/10/2026): mai una foto dietro, in nessuna pagina. Il blocco e' blu notte come il
   footer e vi si appoggia senza stacco, con un filetto chiaro a dividere le due parti. */
.contact--plain { background: var(--ink); padding-block: clamp(4.5rem, 12vh, 8rem) clamp(3.5rem, 9vh, 6rem); }
.contact--plain .contact-panel {
  padding: 0;
  background: none;
  border-radius: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.contact--plain + .site-footer { border-top: 1px solid var(--line-light); }
@media (max-width: 699px) {
  .contact--plain { padding-block: 3.5rem 3rem; }
  .contact--plain .wrap { padding-inline: var(--gutter); }
  .contact--plain .contact-panel { padding: 0; background: none; }
}