/* ===========================================================================
   AgataLab — foglio di stile del tema (CSS statico, nessuna compilazione).
   I sorgenti SCSS restano in assets/scss/ come riferimento per lo sviluppo:
   se in futuro si attiva Vite, compilare quelli e sostituire il link nel layout.
   =========================================================================== */

:root {
    --ink: #161C1F;
    --ink-raised: #1D2427;
    --ink-raised-hover: #222A2E;
    --paper: #F4F1ED;
    --paper-ink: #232C31;
    --vermilion: #DB4C24;
    --salmon: #EE8A66;
    --flame: #EE8A66;
    --brick: #B23A16;

    --on-ink: #F4F1ED;
    --on-ink-70: rgba(244, 241, 237, 0.72);
    --on-ink-60: rgba(244, 241, 237, 0.60);
    --on-ink-55: rgba(244, 241, 237, 0.55);
    --on-ink-50: rgba(244, 241, 237, 0.50);
    --on-ink-40: rgba(244, 241, 237, 0.40);
    --rule-ink: rgba(244, 241, 237, 0.16);
    --rule-ink-soft: rgba(244, 241, 237, 0.12);
    --rule-paper: rgba(35, 44, 49, 0.20);
    --on-paper-70: rgba(35, 44, 49, 0.72);
    --on-paper-50: rgba(35, 44, 49, 0.50);

    --font-display: 'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-body: 'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --gutter: clamp(20px, 4vw, 56px);
    --max-w: 1560px;
    --space-md: 26px;
    --space-lg: clamp(36px, 5vw, 72px);
    /* Ritmo verticale in vw, non vh: su un telefono il viewport è stretto ma
       ALTO, quindi un clamp in vh dava 110-120px di padding sopra e sotto ogni
       sezione (220-240px per sezione) proprio dove lo spazio manca. In vw la
       spaziatura segue la larghezza dello schermo, cioè la dimensione reale
       del dispositivo. Stessi valori su desktop. */
    --space-xl: clamp(52px, 10vw, 160px);

    --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

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

img, picture, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.28s ease; }
a:hover { color: var(--salmon); }
button { font: inherit; color: inherit; }
::selection { background: var(--vermilion); color: var(--paper); }
:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 4px; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    margin: 0; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
    position: absolute; left: -9999px; z-index: 80;
    padding: 14px 20px; background: var(--paper); color: var(--ink);
    font-family: var(--font-mono); font-size: 12px;
    letter-spacing: 0.14em; text-transform: uppercase;
}
.skip-link:focus { left: var(--gutter); top: 14px; }

.container-fluid { width: 100%; max-width: var(--max-w); margin-inline: auto; }

/* ------------------------------------------------------------- typography */
.display {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 0.87;
    letter-spacing: -0.045em;
    text-wrap: balance;
}
.display .accent, .accent { color: var(--salmon); }
.display--hero { font-size: clamp(48px, 10vw, 172px); max-width: 17ch; }
.display--xl { font-size: clamp(44px, 7.6vw, 128px); }
.display--lg { font-size: clamp(40px, 6.2vw, 100px); }
.display--md { font-size: clamp(32px, 4.6vw, 74px); }

/* Il padding compensa ascendente e discendente che sporgono dal line box
   quando line-height < 1: senza, i glifi vengono tagliati. */
.mask { display: block; overflow: hidden; padding: 0.3em 0; margin: -0.3em 0; }
.mask > span { display: block; }

/* Stato iniziale della hero, valido dal primo paint (classe messa da uno
   script inline nel <head>). Deve combaciare esattamente con il "from" del
   timeline GSAP: yPercent:108 == translateY(108%). Quando GSAP è pronto
   scrive gli stessi valori inline e toglie la classe, senza scarti visibili. */
.anim [data-hero-line] { transform: translateY(108%); }
.anim [data-hero-foot] { opacity: 0; }
/* Stesso motivo per la figura della hero: è animata al caricamento, non allo
   scroll, quindi senza questo stato resterebbe visibile finché GSAP arriva
   dalla CDN e poi salterebbe giù per rianimarsi.
   Solo opacity, nessun transform: lo spostamento lo mette GSAP, e un
   translateY qui verrebbe letto come trasformazione di base e sommato al
   proprio (stesso inciampo documentato sopra per le righe del titolo). */
.anim [data-hero-figure] { opacity: 0; }

/* Chi ha chiesto meno movimento non deve mai vedere lo stato nascosto:
   initAnimations() esce subito e non toglierebbe la classe. */
@media (prefers-reduced-motion: reduce) {
    .anim [data-hero-line] { transform: none; }
    .anim [data-hero-foot] { opacity: 1; }
    .anim [data-hero-figure] { opacity: 1; }
}

.statement {
    margin: 0; font-weight: 400;
    font-size: clamp(25px, 3.2vw, 50px);
    line-height: 1.24; letter-spacing: -0.015em;
    max-width: 34ch; text-wrap: pretty;
}
.statement > span { display: block; }
.statement > span + span { margin-top: 0.5em; }
.statement .muted { color: var(--on-ink-50); }

.lede {
    margin: 0; max-width: 52ch;
    font-size: clamp(15px, 1.15vw, 19px);
    line-height: 1.6; color: var(--on-ink-70); text-wrap: pretty;
}
.lede--lg { font-size: clamp(16px, 1.3vw, 21px); max-width: 62ch; }

.eyebrow {
    margin: 0; font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-ink-50);
}

.num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--on-ink-40); }
.num.accent { color: var(--salmon); }

.client {
    margin: 0; font-weight: 500;
    font-size: clamp(36px, 6.2vw, 100px);
    line-height: 0.96; letter-spacing: -0.035em; text-transform: uppercase;
}
.client--sm { font-size: 25px; line-height: 1.1; letter-spacing: -0.02em; }

.prose {
    display: grid; gap: var(--space-md); max-width: 62ch;
    font-size: clamp(15px, 1.15vw, 18px); line-height: 1.65; color: var(--on-ink-70);
}
.prose p { margin: 0; text-wrap: pretty; }

.measure { max-width: 56ch; }
.measure--wide { max-width: 60ch; }

.signature {
    margin: 0; font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-ink-50);
}

.rule {
    flex: 1; min-width: 40px; height: 1px;
    background: var(--rule-ink); position: relative; overflow: hidden;
}
.rule > span {
    position: absolute; inset: 0; display: block;
    background: var(--vermilion); transform-origin: left center;
}

/* ------------------------------------------------------------- components */
.btn {
    display: inline-flex; align-items: center; gap: 12px;
    justify-self: start; /* in un contenitore grid il bottone non si stira */
    padding: 17px 26px; border: 1px solid transparent; border-radius: 999px;
    font-family: var(--font-mono); font-size: 12px;
    letter-spacing: 0.14em; text-transform: uppercase;
    cursor: pointer; background: none;
    transition: background 0.28s ease, border-color 0.28s ease, color 0.28s ease;
}
.btn--solid { background: var(--paper); color: var(--ink); }
.btn--solid:hover { background: var(--vermilion); color: var(--paper); }
.btn--ink { background: var(--paper-ink); color: var(--paper); }
.btn--ink:hover { background: var(--vermilion); color: var(--paper); }
.btn--ghost { border-color: rgba(244, 241, 237, 0.28); }
.btn--ghost:hover { border-color: var(--vermilion); color: var(--salmon); }
.btn--lg { padding: 21px 32px; font-size: 13px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.link-arrow {
    justify-self: start;
    font-family: var(--font-mono); font-size: 12px;
    letter-spacing: 0.14em; text-transform: uppercase;
    border-bottom: 1px solid rgba(244, 241, 237, 0.3); padding-bottom: 5px;
}
.link-arrow--accent { color: var(--salmon); border-bottom-color: rgba(238, 138, 102, 0.4); }
.link-arrow--ink { color: var(--brick); border-bottom-color: rgba(178, 58, 22, 0.4); }
.link-row { display: flex; flex-wrap: wrap; gap: 14px 32px; }

.tag-list {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: 10px 34px; margin: 0; padding: 0; list-style: none;
}
/**
 * Etichette STATICHE (livelli, attività): non sono cliccabili, quindi non
 * devono avere pillola e bordo — quella forma è l'affordance dei bottoni del
 * sito (.btn) e dei tag-link dell'articolo, e infatti invitava al click.
 * Qui: microtipografia in fila, separata solo dalla spaziatura. Niente filetti
 * divisori: con flex-wrap resterebbero appesi a fine riga, perché il CSS non
 * sa quale elemento chiude una riga — solo quale chiude la lista.
 */
.tag {
    display: inline-flex; align-items: baseline;
    padding: 0; margin: 0; border: 0; border-radius: 0;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-ink-60);
}
.section--paper .tag { color: rgba(35, 44, 49, 0.62); }
/* La categoria nelle card: già senza contenitore, non un finto bottone. */
.tag--accent {
    border: 0; padding: 0;
    color: var(--salmon); font-size: 10px; letter-spacing: 0.18em;
}

.rule-list {
    margin: 0; padding: 0; list-style: none; display: grid;
    font-family: var(--font-mono); font-size: 12px;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-ink-60);
}
.rule-list li { padding: 13px 0; border-top: 1px solid var(--rule-ink); }
.rule-list li:last-child { border-bottom: 1px solid var(--rule-ink); }

.mono-list {
    margin: 0; padding: 0; list-style: none; display: grid; gap: 9px;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-ink-60);
}

.grid-list {
    margin: 0; padding: 0; list-style: none;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 1px; background: var(--rule-ink);
}
.grid-list li {
    background: var(--ink); padding: 20px 16px;
    font-family: var(--font-mono); font-size: 12px;
    letter-spacing: 0.14em; text-transform: uppercase;
}
.grid-list li.accent { color: var(--salmon); }
.grid-list--wide { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.grid-list--wide li { padding: clamp(20px, 2.8vw, 36px) 18px; }

.card-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1px; background: var(--rule-ink);
}
.card {
    background: var(--ink); padding: clamp(24px, 3vw, 38px) clamp(20px, 2vw, 30px);
    display: grid; gap: 18px; align-content: start; transition: background 0.28s ease;
}
.card:hover { background: var(--ink-raised); color: inherit; }
.card h3 { margin: 0; font-size: clamp(20px, 1.6vw, 25px); line-height: 1.25; font-weight: 500; letter-spacing: -0.015em; }
.card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--on-ink-60); text-wrap: pretty; }
.card__meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-ink-40); }

.media-frame {
    position: relative; margin: 0; overflow: hidden;
    border: 1px solid var(--rule-ink);
    background: repeating-linear-gradient(135deg, rgba(244, 241, 237, 0.07) 0 1px, transparent 1px 9px);
    display: grid; place-items: center;
}
.media-frame--16x9 { aspect-ratio: 16 / 9; }
.media-frame--16x10 { aspect-ratio: 16 / 10; }
.media-frame--4x3 { aspect-ratio: 4 / 3; }
.media-frame--3x2 { aspect-ratio: 3 / 2; }
.media-frame__el { width: 100%; height: 100%; object-fit: cover; }
.media-frame__placeholder {
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--on-ink-50); text-align: center; padding: 0 12px;
}

.breadcrumb {
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-ink-50);
}
.breadcrumb [aria-current] { color: var(--on-ink); }
.breadcrumb__sep { padding: 0 8px; }

/* ----------------------------------------------------------------- header */
.site-header {
    position: fixed; inset: 0 0 auto; z-index: 60;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 24px var(--gutter);
    border-bottom: 1px solid transparent;
    transition: padding 0.4s var(--ease-out), background 0.4s ease, border-color 0.4s ease;
}
.site-header.is-compact {
    padding: 13px var(--gutter);
    background: rgba(22, 28, 31, 0.86);
    backdrop-filter: blur(14px);
    border-bottom-color: var(--rule-ink-soft);
}
/* Il minimo del clamp è quello che vale su mobile: 2.4vw a 390px dà 9px,
   quindi sotto i ~1500px il logo resta sempre inchiodato al minimo. */
.site-header__logo img { height: clamp(38px, 2.4vw, 40px); width: auto; }
.site-header__actions { display: flex; align-items: center; gap: 16px; }
.site-header__cta { display: none; padding: 11px 20px; }

.site-nav {
    display: none; align-items: center; gap: 32px;
    font-family: var(--font-mono); font-size: 12px;
    letter-spacing: 0.12em; text-transform: uppercase;
}
.site-nav > a { opacity: 0.72; }
.site-nav > a:hover { opacity: 1; }
.site-nav > a[aria-current] { opacity: 1; color: var(--salmon); }
.site-nav__group { position: relative; display: flex; align-items: center; gap: 7px; }
.site-nav__toggle { width: 16px; height: 16px; padding: 0; background: none; border: 0; cursor: pointer; position: relative; }
.site-nav__toggle::after {
    content: ''; position: absolute; top: 4px; left: 5px;
    width: 5px; height: 5px;
    border-right: 1px solid var(--on-ink-60);
    border-bottom: 1px solid var(--on-ink-60);
    transform: rotate(45deg);
}
.site-nav__menu {
    position: absolute; top: 100%; left: -20px; padding-top: 22px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
}
.site-nav__menu > a {
    display: block; min-width: 290px; padding: 15px 20px;
    background: var(--ink-raised);
    border: 1px solid var(--rule-ink); border-bottom: 0;
    letter-spacing: 0.1em;
}
.site-nav__menu > a:last-child { border-bottom: 1px solid var(--rule-ink); }
.site-nav__menu > a:hover { background: var(--ink-raised-hover); }
.site-nav__group:hover .site-nav__menu,
.site-nav__group:focus-within .site-nav__menu,
.site-nav__menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.burger {
    display: flex; flex-direction: column; gap: 5px;
    width: 44px; height: 44px; align-items: center; justify-content: center;
    padding: 0; background: none;
    border: 1px solid rgba(244, 241, 237, 0.22); border-radius: 999px; cursor: pointer;
}
.burger span { display: block; width: 16px; height: 1px; background: var(--paper); }

.mobile-menu {
    position: fixed; inset: 0; z-index: 70;
    background: var(--ink);
    /* Il fondo lascia spazio ai pulsanti flottanti (chat, cookie): senza,
       l'ultima voce di menu finisce sotto l'avatar della chat. */
    padding: 24px var(--gutter) calc(96px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; justify-content: flex-start;
    gap: clamp(22px, 4vh, 40px);
    overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu__top img { height: 38px; width: auto; }
.mobile-menu__nav {
    display: flex; flex-direction: column; gap: 2px;
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(30px, 8vw, 54px); line-height: 1.04; letter-spacing: -0.04em;
}
/* Area di tocco piena su ogni voce, non solo sul testo. */
.mobile-menu__nav > a { padding: 6px 0; }
.mobile-menu__sub {
    display: flex; flex-direction: column; gap: 10px;
    padding: 10px 0 14px 2px;
    font-family: var(--font-mono); font-weight: 400; font-size: 12px;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-ink-60);
}

/* --------------------------------------------------------------- sections */
.section { padding: var(--space-xl) var(--gutter); }
.section--ruled { border-top: 1px solid var(--rule-ink-soft); }
.section--flush-top { padding-top: 0; }
.section__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px; }

.section--paper { background: var(--paper); color: var(--paper-ink); }
.section--paper .eyebrow,
.section--paper .num { color: var(--on-paper-50); }
.section--paper .lede,
.section--paper .prose { color: var(--on-paper-70); }
.section--paper .rule-list li,
.section--paper .col-block { border-color: var(--rule-paper); }
.section--paper .media-frame {
    border-color: rgba(35, 44, 49, 0.14);
    background: repeating-linear-gradient(135deg, rgba(35, 44, 49, 0.08) 0 1px, transparent 1px 9px);
}
.section--paper .media-frame__placeholder { color: var(--on-paper-50); }
.section--paper a:hover { color: var(--brick); }

.stack { display: grid; gap: var(--space-lg); }
.stack--tight { gap: var(--space-md); }
.two-col { display: grid; gap: clamp(30px, 4vw, 72px); align-items: start; }
.cols-3, .cols-4 { display: grid; gap: clamp(22px, 3vw, 44px); }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.cols-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.col-block {
    display: grid; gap: 11px; align-content: start;
    border-top: 1px solid rgba(244, 241, 237, 0.22); padding-top: 18px;
}
.col-block h3 { margin: 0; font-size: clamp(19px, 2vw, 29px); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; }
.col-block p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--on-ink-60); }
.section--paper .col-block p { color: var(--on-paper-70); }

/* hero */
.hero {
    position: relative; min-height: 100svh;
    display: grid; align-items: end;
    padding: 132px var(--gutter) clamp(30px, 5vw, 72px);
    overflow: clip;
}
.hero__agate { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero__agate picture { display: block; }
.hero__agate img {
    position: absolute; top: -6%; right: -6%;
    width: min(112%, 1900px); height: 112%;
    aspect-ratio: auto;            /* ignora width/height dell'attributo */
    object-fit: cover;
    object-position: 82% 58%;
    opacity: 0.78;
}

@media (max-width: 700px) {
    /* Crop verticale: riempie il viewport senza deformarsi, centrato sul nucleo. */
    .hero__agate img {
        top: 0; right: 0; left: 0;
        width: 100%; height: 100%;
        object-position: 50% 50%;
        opacity: 0.7;
    }
    .hero__scrim--diagonal {
        background: linear-gradient(175deg, rgba(22,28,31,0.55) 0%, rgba(22,28,31,0.2) 34%, rgba(22,28,31,0.72) 72%, #161C1F 100%);
    }
    .hero__scrim--bottom {
        background: linear-gradient(to top, #161C1F 0%, rgba(22,28,31,0.72) 30%, transparent 66%);
    }
}
.hero__scrim { position: absolute; inset: 0; }
.hero__scrim--diagonal {
    background: linear-gradient(100deg, #161C1F 0%, rgba(22,28,31,0.92) 26%, rgba(22,28,31,0.45) 54%, rgba(22,28,31,0.12) 78%, rgba(22,28,31,0.4) 100%);
}
.hero__scrim--bottom {
    background: linear-gradient(to top, #161C1F 0%, rgba(22,28,31,0.35) 24%, transparent 52%);
}
.hero__inner { position: relative; z-index: 1; display: grid; gap: clamp(26px, 5vw, 72px); }
.hero__meta {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 24px; margin: 0;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-ink-50);
}
.hero__meta > span:first-child { color: var(--on-ink); }
.hero__foot {
    display: grid; gap: 32px; align-items: end;
    border-top: 1px solid var(--rule-ink-soft); padding-top: 28px;
}

/* page hero */
.page-hero {
    position: relative; overflow: clip;
    padding: clamp(104px, 15vw, 220px) var(--gutter) clamp(38px, 7.6vw, 110px);
}
.page-hero__agate {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(110% 90% at 70% 0%, transparent 40%, #161C1F 100%);
}
.page-hero__agate > span {
    position: absolute; top: -30%; right: -14%;
    width: min(62vw, 760px); aspect-ratio: 1; border-radius: 50%; filter: blur(40px);
    background:
        radial-gradient(circle at 46% 44%, rgba(219,76,36,0.40) 0 16%, transparent 17%),
        radial-gradient(circle at 46% 44%, rgba(238,138,102,0.26) 22% 31%, transparent 32%),
        radial-gradient(circle at 46% 44%, rgba(244,241,237,0.08) 38% 48%, transparent 49%);
}
.page-hero__agate--left { background: radial-gradient(110% 90% at 20% 0%, transparent 40%, #161C1F 100%); }
.page-hero__agate--left > span { right: auto; left: -12%; }
.page-hero .container-fluid { position: relative; z-index: 1; }
.page-hero .stack { gap: clamp(22px, 3.6vw, 52px); }
.page-hero__foot {
    display: grid; gap: 30px; align-items: start;
    border-top: 1px solid var(--rule-ink-soft); padding-top: 26px;
}

.manifesto__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; }

/* narrative */
.narrative { position: relative; border-top: 1px solid var(--rule-ink-soft); }
.narrative__stage {
    min-height: 100svh; display: grid; align-content: center;
    padding: clamp(56px, 9.7vw, 140px) var(--gutter);
}
.narrative__rail { display: flex; align-items: center; gap: 18px; }
.narrative__panels { position: relative; display: grid; gap: clamp(44px, 9.7vw, 140px); }
.narrative.is-pinned .narrative__panels {
    gap: 0;
    /* I pannelli entrano ed escono lungo l'asse X: senza clip si vedrebbero
       transitare fuori dai margini, allargando la pagina. */
    overflow: clip;
}
/* I pannelli si muovono per tutta la corsa: promuoverli su layer GPU una volta
   sola evita che il browser decida a metà animazione di rasterizzarli di nuovo
   — una delle cause di micro-scatto su testo grande. Lo stesso vale per la
   headline, che si muove a velocità propria. */
.narrative.is-pinned .panel,
.narrative.is-pinned .panel .display { will-change: transform; }
.narrative.is-pinned .panel { grid-area: 1 / 1; }

.panel { display: grid; gap: clamp(24px, 3vw, 56px); align-items: start; }
.panel__body { display: grid; gap: var(--space-md); max-width: 720px; }

/* work */
.work__list { display: grid; gap: clamp(34px, 7.6vw, 110px); }
.work-item { display: grid; gap: var(--space-md); align-items: end; }
.work-item__body { display: grid; gap: 15px; }
.work-item__excerpt { margin: 0; max-width: 44ch; font-size: 16px; line-height: 1.55; color: var(--on-paper-70); text-wrap: pretty; }

/* capabilities */
.capabilities__grid { display: grid; gap: clamp(36px, 5vw, 72px); align-items: start; }

/* Blocco ecosistema: headline a sinistra, marchio del gruppo a destra.
   In colonna su mobile, affiancati da 900px. */
.ds-intro { display: grid; gap: clamp(32px, 3vw, 52px); align-items: center; }
.ds-intro .display { max-width: 15ch; }
.ds-intro .lede { max-width: 46ch; }
/* Le tre aree sono la didascalia del blocco, non una sezione a sé: il gap
   standard da 72px le staccava dal discorso che le introduce. */
.stack:has(> .ds-intro) { gap: clamp(30px, 3.4vw, 48px); }

/* Marchio Digital Stones: una cornice leggera col logo al centro. Il riquadro
   dà un bordo allo spazio che prima restava aperto a destra, e il logo non ha
   più bisogno di un'etichetta sotto: il link è il marchio. */
.ds-mark {
    display: grid; place-items: center;
    text-decoration: none;
    /* Padding contenuto: il riquadro è una cornice attorno al marchio, non un
       contenitore con aria propria — 110px di vuoto interno rendevano il logo
       più piccolo del buco che lo conteneva. */
    padding: clamp(22px, 2.4vw, 34px);
    border: 1px solid var(--rule-ink);
    transition: border-color 0.4s ease, background-color 0.4s ease;
}
.ds-mark:hover, .ds-mark:focus-visible {
    border-color: rgba(244, 241, 237, 0.28);
    background: rgba(244, 241, 237, 0.02);
}
.ds-logo {
    display: block; width: 100%; height: auto;
    max-width: clamp(200px, 27vw, 360px);
    color: var(--paper);          /* il lettering usa currentColor */
    overflow: visible;            /* le schegge escono dal box durante l'entrata */
}
.ds-logo__shard { transform-box: fill-box; transform-origin: center; }

/* Senza JS il logo è completo e visibile: l'animazione è progressiva. */
.ds-logo__shard, .ds-logo__word { opacity: 1; }

@media (min-width: 900px) {
    /* Il gruppo riempie il contenitore: la cornice chiude sul margine destro
       della pagina, come i filetti delle tre aree sotto. Il cap da 1180px che
       c'era prima teneva il riquadro staccato dal bordo, lasciando una fascia
       vuota a destra. La misura di lettura resta garantita dai max-width in ch
       su headline e paragrafo. */
    .ds-intro {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
    }
}
.cap-list { margin: 0; padding: 0; list-style: none; display: grid; }
.cap-list li { border-top: 1px solid var(--rule-ink); }
.cap-list li:last-child { border-bottom: 1px solid var(--rule-ink); }
.cap-list__item {
    display: grid; grid-template-columns: auto 1fr auto;
    gap: 16px 26px; align-items: baseline; padding: clamp(24px, 2.8vw, 38px) 0;
}
.cap-list__body { display: grid; gap: 11px; }
.cap-list__title { font-size: clamp(25px, 3.2vw, 50px); line-height: 1.06; letter-spacing: -0.025em; }
.cap-list__excerpt { max-width: 52ch; font-size: 15px; line-height: 1.6; color: var(--on-ink-60); }
.cap-list__arrow { font-family: var(--font-mono); font-size: 14px; }

/* method */
.ai-layer {
    position: relative; display: flex; align-items: center;
    height: 52px; margin: 0; padding: 0 18px;
    border: 1px solid var(--rule-ink); overflow: hidden;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.24em; text-transform: uppercase;
}
.ai-layer__sweep {
    position: absolute; inset: 0; display: block; transform-origin: left center;
    background: linear-gradient(90deg, rgba(219,76,36,0.34), rgba(238,138,102,0.12));
}
.ai-layer > span:last-child { position: relative; }

/* service vertical */
.area-list { display: grid; }
.area { display: grid; gap: 24px 40px; padding: clamp(34px, 4.5vw, 64px) 0; border-top: 1px solid var(--rule-ink); }
.area:last-child { border-bottom: 1px solid var(--rule-ink); }
.area__meta { display: flex; align-items: baseline; gap: 16px; }
.area__body { display: grid; gap: 18px; }

.phase-list { display: grid; }
.phase { display: grid; gap: 16px 40px; padding: clamp(24px, 3vw, 40px) 0; border-top: 1px solid var(--rule-paper); }
.phase:last-child { border-bottom: 1px solid var(--rule-paper); }
.phase__head { display: flex; align-items: baseline; gap: 16px; }
.phase h3 { margin: 0; font-size: clamp(21px, 2.4vw, 34px); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; }
.phase p { margin: 0; max-width: 60ch; font-size: 15px; line-height: 1.65; color: var(--on-paper-70); text-wrap: pretty; }

.deliverables { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; background: var(--rule-ink); }
.deliverables li { background: var(--ink); padding: 22px 20px; display: grid; gap: 8px; }
.deliverables h3 { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.3; }
.deliverables p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--on-ink-60); }

.case-grid { display: grid; gap: clamp(24px, 3vw, 44px); }
.case-card { display: grid; gap: 18px; }
.case-card__body { display: grid; gap: 9px; }

.faq-list { display: grid; }
.faq { display: grid; gap: 12px; padding: 24px 0; border-top: 1px solid var(--rule-ink); }
.faq:last-child { border-bottom: 1px solid var(--rule-ink); }
.faq h3 { margin: 0; font-size: clamp(17px, 1.5vw, 22px); font-weight: 500; line-height: 1.35; }
.faq p { margin: 0; max-width: 66ch; font-size: 15px; line-height: 1.65; color: var(--on-ink-60); text-wrap: pretty; }

/* related */
.related { padding: clamp(44px, 9vw, 130px) var(--gutter); }
.related .container-fluid { display: grid; gap: clamp(22px, 3.6vw, 52px); }
.related__grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1px; background: var(--rule-ink);
}
.related__item {
    background: var(--ink); padding: clamp(24px, 3vw, 36px) clamp(20px, 2vw, 28px);
    display: grid; gap: 14px; align-content: start; transition: background 0.28s ease;
}
.related__item:hover { background: var(--ink-raised); color: inherit; }
.related__item h3 { margin: 0; font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -0.015em; }
.related__item p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--on-ink-60); }

/* cta */
.cta {
    position: relative; overflow: clip;
    padding: clamp(56px, 11.8vw, 170px) var(--gutter);
    border-top: 1px solid var(--rule-ink-soft);
}
.cta--agate { min-height: 88svh; display: grid; align-content: center; }
.cta__agate {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(100% 70% at 50% 50%, transparent 28%, #161C1F 100%);
}
.cta__agate > span {
    position: absolute; left: 50%; top: 50%;
    width: min(120vw, 1200px); aspect-ratio: 1;
    margin: -50% 0 0 -50%; border-radius: 50%; filter: blur(42px);
    background:
        radial-gradient(circle at 50% 50%, rgba(219,76,36,0.32) 0 14%, transparent 15%),
        radial-gradient(circle at 50% 50%, rgba(238,138,102,0.22) 22% 32%, transparent 33%),
        radial-gradient(circle at 50% 50%, rgba(244,241,237,0.09) 44% 56%, transparent 57%);
}
.cta__inner { position: relative; z-index: 1; display: grid; gap: clamp(22px, 3.3vw, 48px); }

/* footer — firma + colonne.
   Gerarchia: la firma pesa, le colonne di link sono secondarie, i dati
   societari sono una riga in chiusura. Prima erano quattro colonne di pari
   peso, con social nei link legali e indirizzo in verticale. */
/* Il padding inferiore lascia spazio ai pulsanti flottanti (chat, cookie):
   ancorati in basso a destra, coprivano l'ultima riga del footer a fine
   scroll. Un'altezza pulsante + respiro. */
.site-footer { padding: clamp(38px, 6vw, 86px) var(--gutter) clamp(30px, 3.5vh, 44px); border-top: 1px solid var(--rule-ink-soft); }
@media (max-width: 700px) {
    /* I pulsanti flottanti stanno negli angoli bassi e su mobile la riga
       legale è centrata a tutta larghezza: passa sotto entrambi. Lo spazio
       deve superare l'altezza del pulsante più alto (avatar chat ~72px). */
    .site-footer { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
}
.site-footer__inner { display: grid; gap: clamp(30px, 4vw, 56px); }

.site-footer__top {
    display: grid; gap: clamp(36px, 5vw, 72px);
    /* auto-fit: firma e colonne si affiancano quando c'è spazio, si impilano
       su mobile senza media query. */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.site-footer__sign { display: grid; gap: 20px; justify-items: start; align-content: start; }
.site-footer__sign img { height: 34px; width: auto; }
.site-footer__concept {
    margin: 0; max-width: 22ch;
    font-weight: 600; font-size: clamp(20px, 2vw, 29px);
    line-height: 1.12; letter-spacing: -0.035em;
}
/* Email e social sulla stessa riga: i social appartengono ai contatti, non
   alle note legali dove stavano prima. */
.site-footer__contact {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 22px;
    font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em;
}
.site-footer__contact a { color: var(--on-ink-70); }
.site-footer__contact a:hover { color: var(--flame); }
.site-footer__sep { color: rgba(244, 241, 237, 0.28); }
.site-footer__email {
    color: var(--paper);
    border-bottom: 1px solid rgba(238, 138, 102, 0.4);
}
.site-footer__email:hover { color: var(--flame); border-bottom-color: var(--flame); }

.site-footer__cols {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: clamp(26px, 3vw, 44px); align-content: start;
}
.site-footer__col { display: grid; gap: 13px; align-content: start; }
.site-footer__col a { font-size: 14.5px; }
.site-footer__col a:hover { color: var(--flame); }
/* Le aree di competenza puntano tutte alla stessa pagina Services: un tono più
   basso le rende secondarie rispetto alla navigazione vera. */
.site-footer__col--muted a { color: var(--on-ink-70); }

/* Dati societari e link legali centrati, su più righe. */
.site-footer__base {
    display: grid; gap: 14px; justify-items: center; text-align: center;
    padding-top: 24px; border-top: 1px solid var(--rule-ink);
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-ink-40);
}
.site-footer__legal { margin: 0; display: grid; gap: 6px; line-height: 1.7; }
.site-footer__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 24px; }
.site-footer__meta a:hover { color: var(--flame); }


/* ------------------------------------------------- SERVICES (pagina unica) */
.display--sm { font-size: clamp(24px, 3.2vw, 50px); line-height: 1.02; letter-spacing: -0.04em; }

.services-intro { display: grid; gap: clamp(36px, 5vw, 80px); align-items: start; }
.services-intro__sticky { align-content: start; }

.services-index { display: grid; }
.services-index__item {
    display: grid; grid-template-columns: auto 1fr auto;
    gap: 14px 24px; align-items: baseline;
    padding: clamp(22px, 2.6vw, 34px) 0;
    border-top: 1px solid var(--rule-ink);
}
.services-index__item:last-child { border-bottom: 1px solid var(--rule-ink); }
.services-index__body { display: grid; gap: 10px; }
.services-index__title { font-weight: 600; font-size: clamp(24px, 3.1vw, 48px); line-height: 1.04; letter-spacing: -0.04em; }
.services-index__arrow { font-family: var(--font-mono); font-size: 14px; }

.service-area {
    position: relative;
    overflow: clip;
    scroll-margin-top: 110px;   /* libera l'header fisso quando si arriva via anchor */
    padding: clamp(48px, 10.4vw, 150px) var(--gutter);
    border-top: 1px solid var(--rule-ink-soft);
}
.service-area.section--paper { border-top: 0; }
.service-area .container-fluid { position: relative; z-index: 1; }
.service-area__head { max-width: none; }
.service-area__head .display { max-width: 24ch; }
.service-area__meta { display: flex; align-items: baseline; gap: 16px; margin: 0; }
.service-area__count {
    font-family: var(--font-mono);
    /* min 30px: a 40px il numero pareggiava l'H2 (44px su mobile) e invece di
       fare da indice gli competeva. Da desktop resta il grande numero fantasma. */
    font-size: clamp(30px, 6vw, 96px);
    line-height: 0.9; letter-spacing: -0.02em;
    color: rgba(244, 241, 237, 0.14);
}
.service-area__count--accent { color: rgba(238, 138, 102, 0.24); }
.section--paper .service-area__count { color: rgba(35, 44, 49, 0.14); }

.service-area__opening {
    margin: 0; max-width: 42ch;
    font-size: clamp(19px, 2.2vw, 34px);
    line-height: 1.22; letter-spacing: -0.02em;
    text-wrap: pretty;
}

.service-area__grid { display: grid; gap: clamp(32px, 4vw, 72px); align-items: start; }
.service-area__grid--ruled { border-top: 1px solid var(--rule-ink); padding-top: clamp(22px, 3.3vw, 48px); }

.service-area__statement {
    margin: 0; padding: 22px 26px;
    border-left: 2px solid var(--vermilion);
    font-weight: 600; font-size: clamp(20px, 2.4vw, 34px);
    line-height: 1.1; letter-spacing: -0.03em;
}
.service-area__statement--sm {
    font-weight: 400;
    font-size: clamp(17px, 1.7vw, 25px);
    line-height: 1.32; letter-spacing: -0.02em;
    text-wrap: pretty;
}

.service-area__definition {
    display: grid; gap: 14px;
    border-top: 1px solid var(--rule-ink);
    padding-top: 24px;
}
.service-area__definition h3 { margin: 0; font-weight: 600; font-size: clamp(21px, 2.2vw, 32px); line-height: 1.08; letter-spacing: -0.035em; }
.service-area__definition p { margin: 0; max-width: 60ch; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.65; color: var(--on-ink-70); text-wrap: pretty; }

.service-area__agate {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(105% 85% at 18% 40%, transparent 42%, #161C1F 100%);
}
.service-area__agate > span {
    position: absolute; top: 8%; left: -16%;
    width: min(52vw, 660px); aspect-ratio: 1;
    border-radius: 50%; filter: blur(46px);
    background:
        radial-gradient(circle at 52% 48%, rgba(219,76,36,0.28) 0 16%, transparent 17%),
        radial-gradient(circle at 52% 48%, rgba(238,138,102,0.18) 24% 34%, transparent 35%),
        radial-gradient(circle at 52% 48%, rgba(244,241,237,0.06) 42% 54%, transparent 55%);
}

.process {
    margin: 0; padding: 0; list-style: none;
    display: grid;
    /* Mobile: una colonna, numero e passo affiancati — si legge come una
       sequenza. In due colonne diventava una tabella 2×4, che nega l'idea
       di processo lineare. Da 720px torna la griglia. */
    grid-template-columns: 1fr;
    border-top: 1px solid var(--rule-paper);
    border-left: 1px solid var(--rule-paper);
}
.process li {
    padding: 15px 16px;
    display: grid; grid-template-columns: auto 1fr;
    align-items: baseline; gap: 16px;
    border-right: 1px solid var(--rule-paper);
    border-bottom: 1px solid var(--rule-paper);
    font-family: var(--font-mono); font-size: 12px;
    letter-spacing: 0.14em; text-transform: uppercase;
}
@media (min-width: 720px) {
    .process { grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); }
    .process li {
        grid-template-columns: 1fr; align-items: start;
        gap: 10px; padding: 24px 16px; align-content: start;
    }
}

.frame-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.media-frame--4x5 { aspect-ratio: 4 / 5; }
.media-frame--21x9 { aspect-ratio: 21 / 9; }

.cycle { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--rule-ink); }
.cycle__item { background: var(--ink); padding: clamp(26px, 3.2vw, 44px) 20px; display: grid; gap: 12px; align-content: start; }
.cycle__title { font-weight: 600; font-size: clamp(22px, 2.4vw, 34px); letter-spacing: -0.035em; }
.cycle__body { font-size: 13px; line-height: 1.55; color: var(--on-ink-60); }

.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--rule-ink); }
.compare__item { background: var(--ink); padding: clamp(26px, 3vw, 40px) 22px; display: grid; gap: 12px; align-content: start; }
.compare__item h3 { margin: 0; font-size: 12px; letter-spacing: 0.18em; }
.compare__item p { margin: 0; font-size: clamp(16px, 1.5vw, 21px); line-height: 1.35; letter-spacing: -0.015em; }

@media (min-width: 1000px) {
    .services-intro { grid-template-columns: 0.75fr 1.25fr; }
    .services-intro__sticky { position: sticky; top: 120px; }
    .service-area__grid { grid-template-columns: 1.25fr 0.75fr; }
    .service-area__grid--ruled { grid-template-columns: 0.85fr 1.15fr; }
    .frame-row { grid-template-columns: repeat(4, 1fr); }
}


.site-header__progress {
    position: absolute; bottom: -1px; left: 0;
    height: 2px; width: 100%;
    background: var(--vermilion);
    transform: scaleX(0); transform-origin: left center;
}

/* ------------------------------------------------------- PAGINA AGATA
   Pagina identitaria. Non riusa i blocchi della Home: la sua progressione è
   pietra → identità → metodo → AI → il personaggio → gruppo → conversazione.
   Le classi del vecchio layout (layer-row, method-phase, ai-flow) sono state
   rimosse insieme alle sezioni che le usavano. */

.page-hero__foot { display: grid; gap: clamp(22px, 3vw, 48px); align-items: end; }
.split { display: grid; gap: clamp(32px, 4vw, 80px); align-items: start; }
.split__col { display: grid; align-content: start; }
/* Titolo della colonna agganciata: più contenuto del display di sezione.
   Non è una scelta estetica ma strutturale — con il corpo pieno occupava
   507px dei 528 disponibili e lo sticky non aveva spazio per esistere. */
.split__sticky .display { font-size: clamp(28px, 3.5vw, 54px); max-width: 15ch; }
/* Affermazioni separate da filetti: danno alla colonna destra l'altezza che
   serve perché lo sticky di sinistra abbia spazio di corsa, e nel farlo
   scandiscono il ragionamento invece di impilarlo. */
.steps { display: grid; }
.steps__item {
    margin: 0; padding: clamp(22px, 2.8vw, 38px) 0;
    border-top: 1px solid var(--rule-ink);
    max-width: 52ch;
    font-size: clamp(16px, 1.35vw, 20px); line-height: 1.55;
    color: rgba(244, 241, 237, 0.82); text-wrap: pretty;
}
.steps__foot { margin: 0; padding: clamp(22px, 2.6vw, 34px) 0 0; border-top: 1px solid var(--rule-ink); }
.steps__claim {
    margin: 0; padding: clamp(26px, 3.2vw, 44px) 0 0;
    border-top: 1px solid var(--rule-ink);
    font-weight: 600; color: var(--paper);
    font-size: clamp(24px, 2.8vw, 44px);
    line-height: 1.04; letter-spacing: -0.04em;
}
/* Occhiello che non deve mai spezzarsi su due righe. */
.eyebrow--nowrap { white-space: nowrap; }

/* Corpo redazionale statico: stessa misura del blog, senza dipendere da .prose
   (che stilizza l'HTML in arrivo dall'editor). */
.prose--static { display: grid; gap: 26px; max-width: 62ch; font-size: clamp(16px, 1.2vw, 19.5px); line-height: 1.68; color: rgba(244, 241, 237, 0.8); }
.prose--static > * { margin: 0; }
.prose__lead { font-size: clamp(19px, 2.1vw, 30px); line-height: 1.24; letter-spacing: -0.025em; color: var(--paper); text-wrap: pretty; }
.prose__muted { color: var(--on-ink-60); }

/* --- hero: solo strati astratti e tipografia, nessun volto --- */
.agata-hero {
    position: relative; overflow: clip;
    min-height: 92svh; display: grid; align-content: center;
    padding: clamp(96px, 16vh, 190px) var(--gutter) clamp(56px, 10vh, 110px);
}
.agata-hero__inner {
    position: relative; z-index: 1;
    display: grid; gap: clamp(20px, 3vw, 48px);
    align-items: end;
}
.agata-hero__text { display: grid; gap: clamp(22px, 3.2vh, 46px); align-content: center; }

/* La figura è ancorata al fondo e sborda oltre il bordo inferiore della hero:
   lo sguardo sale verso il titolo, quindi deve stare sotto di esso. */
.agata-hero__figure {
    position: relative; margin: 0; align-self: end;
    width: 100%; max-width: 620px; justify-self: center;
    margin-bottom: clamp(-96px, -9vh, -40px);
}
.agata-hero__figure img { display: block; width: 100%; height: auto; }
/* Alone caldo sotto i piedi: la figura si stacca dal fondo senza contorni. */
.agata-hero__figure::before {
    content: ""; position: absolute; z-index: -1;
    left: 2%; right: 2%; bottom: 8%; height: 46%;
    border-radius: 50%; filter: blur(46px);
    background: rgba(219, 76, 36, 0.28);
}
.agata-hero__strata { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* Tre bande sovrapposte, non tre cerchi: sono la sezione di una pietra. */
.agata-hero__strata > span {
    position: absolute; left: -12%; right: -12%;
    border-radius: 50%; filter: blur(60px);
}
.agata-hero__strata > span[data-stratum="1"] {
    top: -30%; height: 78%;
    background: radial-gradient(60% 50% at 70% 60%, rgba(219,76,36,0.30), transparent 70%);
}
.agata-hero__strata > span[data-stratum="2"] {
    top: 6%; height: 66%;
    background: radial-gradient(56% 46% at 30% 50%, rgba(238,138,102,0.20), transparent 72%);
}
.agata-hero__strata > span[data-stratum="3"] {
    bottom: -26%; height: 62%;
    background: radial-gradient(58% 48% at 62% 40%, rgba(169,52,21,0.22), transparent 72%);
}

.agata-hero__title {
    margin: 0; font-weight: 600;
    font-size: clamp(52px, 11vw, 190px);
    line-height: 0.86; letter-spacing: -0.052em;
}
/* Le righe sono in .mask, che aggiunge 0.3em di respiro sopra e sotto per non
   tagliare accenti e discendenti. Senza questa correzione i due blocchi
   restano distanti come una riga vuota. */
.agata-hero__title .mask + .mask { margin-top: -0.42em; }
.agata-hero__title em { font-style: normal; color: var(--salmon); }
.agata-hero__foot { display: grid; gap: clamp(26px, 3.5vw, 56px); align-items: end; margin-top: clamp(12px, 3vh, 40px); }
.prose--lede { max-width: 54ch; font-size: clamp(16px, 1.35vw, 21px); line-height: 1.55; color: rgba(244, 241, 237, 0.8); }
.agata-hero__claim {
    margin: 0; align-self: end;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--salmon);
}

/* --- il nome: la sezione più materica --- */
.agata-name { position: relative; overflow: clip; }
.agata-name__inner { position: relative; z-index: 1; display: grid; gap: clamp(32px, 4vw, 72px); align-items: start; }
.agata-name__strata { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(100% 90% at 88% 20%, transparent 42%, var(--ink) 100%); }
.agata-name__strata > span {
    position: absolute; top: -18%; right: -14%;
    width: min(56vw, 720px); aspect-ratio: 1;
    border-radius: 50%; filter: blur(54px);
    background:
        radial-gradient(circle at 50% 50%, rgba(219,76,36,0.24) 0 13%, transparent 14%),
        radial-gradient(circle at 50% 50%, rgba(238,138,102,0.17) 20% 29%, transparent 30%),
        radial-gradient(circle at 50% 50%, rgba(244,241,237,0.06) 38% 50%, transparent 51%),
        radial-gradient(circle at 50% 50%, rgba(169,52,21,0.15) 58% 70%, transparent 71%);
}
.agata-name__body { max-width: 58ch; }

.agata-name__body { display: grid; gap: clamp(24px, 3vw, 44px); }
.agata-name__open {
    margin: 0; max-width: 46ch;
    font-size: clamp(17px, 1.7vw, 26px);
    line-height: 1.38; letter-spacing: -0.018em;
    color: rgba(244, 241, 237, 0.82); text-wrap: pretty;
}

/* I quattro versi sono il ragionamento della sezione, non un elenco di voci:
   hanno il peso tipografico più alto qui, e la prosa scende a nota. */
.verses { margin: 0; padding: 0; list-style: none; display: grid; }
.verses li {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 20px; align-items: baseline;
    padding: clamp(15px, 1.8vw, 24px) 0;
    border-top: 1px solid var(--rule-ink);
}
.verses li:last-child { border-bottom: 1px solid var(--rule-ink); }
.verses__n { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; color: var(--on-ink-40); }
.verses li:last-child .verses__n { color: var(--salmon); }
.verses__t {
    font-weight: 500;
    font-size: clamp(19px, 2.2vw, 34px);
    line-height: 1.18; letter-spacing: -0.03em;
    color: var(--paper); text-wrap: pretty;
}

.note { margin: 0; max-width: 46ch; font-size: clamp(14px, 1.1vw, 17px); line-height: 1.6; color: var(--on-ink-60); text-wrap: pretty; }
.agata-name__close { display: grid; gap: 18px; }
.agata-name__punch {
    margin: 0; font-weight: 600; color: var(--paper);
    font-size: clamp(26px, 3.2vw, 52px);
    line-height: 1.02; letter-spacing: -0.042em;
}

/* --- metodo: tre momenti tipografici, non tre blocchi di servizi --- */
.method__list { display: grid; gap: 0; }
.method__item {
    position: relative;
    display: grid; gap: 10px 40px; align-items: start;
    padding: clamp(30px, 5vh, 68px) 0;
    border-top: 1px solid var(--rule-ink);
}
.method__list > .method__item:last-child { border-bottom: 1px solid var(--rule-ink); }
/* Numerale fantasma dietro la parola: dà profondità senza aggiungere una
   riga di testo. Solo da desktop e solo dietro la colonna del titolo: in
   colonna unica finiva dietro al corpo del testo, rendendolo illeggibile. */
.method__ghost { display: none; }
@media (min-width: 1000px) {
    .method__ghost {
        display: block;
        position: absolute; left: -0.06em; top: 50%;
        transform: translateY(-50%);
        z-index: 0; pointer-events: none;
        font-weight: 600; font-size: clamp(150px, 15vw, 260px);
        line-height: 1; letter-spacing: -0.06em;
        color: rgba(244, 241, 237, 0.045);
    }
}
.method__title {
    position: relative; z-index: 1;
    margin: 0; font-weight: 600;
    font-size: clamp(42px, 7vw, 120px);
    line-height: 0.86; letter-spacing: -0.05em;
}
.method__body {
    position: relative; z-index: 1;
    margin: 0; max-width: 46ch;
    font-size: clamp(16px, 1.5vw, 23px);
    line-height: 1.36; letter-spacing: -0.015em;
    color: rgba(244, 241, 237, 0.82); text-wrap: pretty;
}

.agata-claim {
    font-weight: 600; color: var(--paper);
    font-size: clamp(22px, 2.6vw, 40px);
    line-height: 1.06; letter-spacing: -0.04em;
}

/* --- il personaggio: l'acronimo è il momento tipografico --- */
.persona { overflow-x: clip; }
.persona__inner { display: grid; gap: clamp(30px, 4.5vw, 70px); align-items: end; }
.persona__text { display: grid; gap: clamp(22px, 2.6vw, 38px); justify-items: start; }

/* AGATA letto in verticale lungo il bordo: ogni lettera apre la sua riga.
   Non è una didascalia sotto il nome, è la struttura della sezione. */
.acronym { margin: 0; padding: 0; display: grid; width: 100%; }
.acronym__row {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: 3px 18px; align-items: baseline;
    padding: clamp(11px, 1.4vw, 17px) 0;
    border-top: 1px solid var(--rule-paper);
}
.acronym__row:last-child { border-bottom: 1px solid var(--rule-paper); }
.acronym__letter {
    grid-row: span 2;
    font-weight: 600; font-size: clamp(30px, 3.6vw, 54px);
    line-height: 0.82; letter-spacing: -0.05em; color: var(--ink);
}
.acronym__letter--last { color: var(--vermilion); }
.acronym__word {
    margin: 0; font-weight: 600;
    font-size: clamp(17px, 1.7vw, 25px);
    line-height: 1.1; letter-spacing: -0.03em; color: var(--ink);
}
.acronym__gloss {
    margin: 0; font-size: clamp(13px, 1.05vw, 15.5px);
    line-height: 1.45; color: rgba(35, 44, 49, 0.62); text-wrap: pretty;
}
.persona__note {
    margin: 0; max-width: 44ch;
    font-size: clamp(16px, 1.5vw, 22px); line-height: 1.38;
    letter-spacing: -0.018em; color: var(--ink); text-wrap: pretty;
}

/* Palmi aperti: gesto di invito, quindi la figura sta dalla parte del
   pulsante e poggia sul fondo della sezione invece di stare in un riquadro. */
.persona__col { display: grid; justify-items: center; }
.persona__figure {
    position: relative; margin: 0;
    width: 100%; max-width: 320px;
}
.persona__figure img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.persona__figure::before {
    content: ""; position: absolute; z-index: 0;
    left: -8%; right: -8%; bottom: 5%; height: 26%;
    border-radius: 50%; filter: blur(32px);
    background: rgba(35, 44, 49, 0.12);
}

/* ------------------------------------------------ INSIGHTS (blog Winter) */
.page-hero--compact { padding-top: clamp(100px, 13.6vw, 196px); padding-bottom: clamp(32px, 5.8vw, 84px); }
.display--md { font-size: clamp(28px, 4vw, 64px); line-height: 0.97; letter-spacing: -0.04em; }

.eyebrow--accent { color: var(--flame); }
.eyebrow--ink-accent { color: #B23A16; }

.post-meta {
    margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--on-ink-50);
}
.post-meta__cat { color: var(--flame); }
.post-meta .dot, .article__byline .dot { opacity: 0.4; }

.article__tags {
    margin: 4px 0 0; padding: 0; list-style: none;
    display: flex; flex-wrap: wrap; gap: 8px;
}
.article__tags a {
    display: inline-flex; align-items: center;
    padding: 8px 14px; border-radius: 999px;
    border: 1px solid rgba(244, 241, 237, 0.22);
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--on-ink-70);
    transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.article__tags a:hover {
    border-color: var(--vermilion);
    color: var(--paper);
    background: rgba(219, 76, 36, 0.1);
}
@media (prefers-reduced-motion: reduce) { .article__tags a { transition: none; } }

.cat-bar {
    position: sticky; top: 0; z-index: 40;
    background: rgba(22, 28, 31, 0.9);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--rule-ink-soft);
    border-bottom: 1px solid var(--rule-ink-soft);
}
.cat-bar__inner {
    display: flex; gap: 26px; overflow-x: auto;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase;
    scrollbar-width: none;
}
.cat-bar__inner::-webkit-scrollbar { display: none; }
.cat-bar__inner > a {
    padding: 17px 0; white-space: nowrap; flex: 0 0 auto;
    border-bottom: 1px solid transparent;
    color: var(--on-ink-50);
}
.cat-bar__inner > a:hover { color: var(--paper); }
.cat-bar__inner > a.is-active { color: var(--paper); border-bottom-color: var(--vermilion); }

.featured__item { display: grid; gap: clamp(26px, 3.5vw, 56px); align-items: center; }
.featured__media { display: block; overflow: hidden; }
.featured__media img { display: block; width: 100%; height: auto; }
.featured__body { align-content: center; }

.archive__label {
    margin: 0; padding: 0 0 clamp(12px, 1.8vw, 26px);
    font-family: var(--font-mono); font-size: 11px; font-weight: 400;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-ink-50);
}
/* Il confine featured → archivio sommava tre spaziature: il fondo della
   sezione in evidenza, la testa dell'archivio e il padding dell'etichetta
   (~360px in tutto). Il featured chiude senza padding inferiore, perché il
   filetto dell'archivio fa già da separatore. */
.featured + .archive { padding-top: clamp(30px, 4vw, 56px); }
.featured { padding-bottom: clamp(26px, 3.4vw, 48px); }
.archive__list { display: grid; }

/**
 * Un solo trattamento per tutti gli articoli dell'archivio.
 * Prima ruotavano tre layout (--wide a piena larghezza, --flip con immagine a
 * destra, --text senza immagine): con pochi articoli non leggeva come ritmo ma
 * come disordine, e non si distinguevano i confini fra un post e l'altro.
 * La gerarchia la dà il featured sopra; qui serve scansionabilità.
 */
.post {
    display: grid; gap: clamp(18px, 2.4vw, 38px); align-items: start;
    padding: clamp(20px, 3vw, 44px) 0;
    border-top: 1px solid var(--rule-ink);
}
.post:last-child { border-bottom: 1px solid var(--rule-ink); }
/* Su mobile la cover è a piena larghezza: 16:9 la tiene bassa, mentre 3:2
   occupava mezzo schermo per articolo. Il 3:2 torna a due colonne. */
.post__media {
    display: block; overflow: hidden;
    aspect-ratio: 16 / 9; background: #0F1416;
    border: 1px solid var(--rule-ink);
}
.post__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post__body { display: grid; gap: 14px; align-content: start; }
.post__title { margin: 0; font-weight: 600; line-height: 1.04; letter-spacing: -0.035em; text-wrap: pretty; font-size: clamp(21px, 2vw, 32px); }
.post__excerpt { margin: 0; max-width: 56ch; font-size: 15px; line-height: 1.62; color: var(--on-ink-60); text-wrap: pretty; }

/* Due colonne già da tablet: a colonna singola oltre i 700px le cover
   diventavano altissime — seconda causa del disordine percepito. Rapporto
   fisso 3:2, perché le copertine caricate hanno proporzioni qualsiasi e senza
   vincolo ogni riga assumeva un'altezza diversa. */
@media (min-width: 700px) {
    .post { grid-template-columns: 0.4fr 1fr; align-items: center; }
    .post__media { aspect-ratio: 3 / 2; }
}

.pager {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
    padding: clamp(24px, 4.2vw, 60px) 0 0;
    border-top: 1px solid var(--rule-ink);
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase;
}
.pager__status { color: rgba(244, 241, 237, 0.4); }
.pager__links { display: flex; align-items: center; gap: 8px; }
.pager__links > a, .pager__num {
    display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 14px;
    border-radius: 999px; border: 1px solid rgba(244, 241, 237, 0.2);
}
.pager__num.is-current { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.pager__links > a:hover { border-color: var(--paper); }

/* --------------------------------------------------------- ARTICOLO #}  */
.article__head { padding: clamp(96px, 12.5vw, 180px) var(--gutter) clamp(22px, 3.6vw, 52px); }
.article__title {
    margin: 0; max-width: 26ch;
    font-weight: 600; font-size: clamp(33px, 5.4vw, 90px);
    line-height: 0.96; letter-spacing: -0.042em; text-wrap: balance;
}
.article__standfirst {
    margin: 0; max-width: 60ch;
    font-size: clamp(17px, 1.5vw, 25px); line-height: 1.42;
    letter-spacing: -0.012em; color: rgba(244, 241, 237, 0.78); text-wrap: pretty;
}
.article__byline {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
    padding-top: 18px; border-top: 1px solid var(--rule-ink);
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-ink-50);
}

.article__hero-media { margin: 0 auto clamp(30px, 6.1vw, 88px); max-width: 1560px; padding: 0 var(--gutter); }
.article__hero-media img { display: block; width: 100%; height: auto; border: 1px solid var(--rule-ink); }

/* L'iframe del plugin arriva con width/height fissi nel markup: il wrapper
   impone il rapporto e l'iframe lo riempie, così resta responsive senza
   dover toccare l'HTML generato. */
.video-embed {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--rule-ink);
    background: #0F1416;
}
.video-embed iframe,
.video-embed object,
.video-embed embed,
.video-embed video {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}
/* Alcuni plugin avvolgono l'iframe in un proprio div: va appiattito. */
.video-embed > div { position: absolute; inset: 0; }


/* ------------------------------------------------------------------ REEL
   Embed video click-to-play. Il rapporto 16:9 sta sul contenitore, non
   sull'immagine: il poster di YouTube può arrivare in formati diversi
   (maxresdefault 16:9, hqdefault 4:3 con bande) e senza un box fisso il
   blocco cambiava altezza a seconda di quale dei due risponde. */
.reel {
    position: relative; margin: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0F1416;
    border: 1px solid var(--rule-ink);
}
.reel__poster {
    position: absolute; inset: 0;
    display: block; width: 100%; height: 100%;
    padding: 0; margin: 0; border: 0;
    background: none; cursor: pointer;
    -webkit-appearance: none; appearance: none;
}
.reel__poster img {
    display: block; width: 100%; height: 100%;
    /* cover, non contain: hqdefault arriva 4:3 con bande nere già dentro
       l'immagine — contain le avrebbe sommate a quelle del box. */
    object-fit: cover;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reel__poster:hover img, .reel__poster:focus-visible img { transform: scale(1.035); }
.reel__scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(22,28,31,0.12) 0%, rgba(22,28,31,0.52) 100%);
}
.reel__button {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(58px, 6vw, 84px); aspect-ratio: 1;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(244, 241, 237, 0.94);
    transition: background 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.reel__button > span {
    /* triangolo geometrico, non un'icona importata */
    width: 0; height: 0; margin-left: 4px;
    border-left: 15px solid var(--ink);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}
.reel__poster:hover .reel__button, .reel__poster:focus-visible .reel__button {
    background: var(--vermilion); transform: translate(-50%, -50%) scale(1.06);
}
.reel__poster:hover .reel__button > span,
.reel__poster:focus-visible .reel__button > span { border-left-color: var(--paper); }
.reel__label {
    position: absolute; left: clamp(14px, 1.6vw, 22px); bottom: clamp(12px, 1.4vw, 18px);
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper);
}
.reel__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.reel__fallback {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-family: var(--font-mono); font-size: 12px;
    letter-spacing: 0.14em; text-transform: uppercase;
}
.section--paper .reel { border-color: var(--rule-paper); }

.article__hero-media--video .reel { border-color: var(--rule-ink); }
.article__hero-media--video .reel__label { font-size: 11px; }
.article__hero-media figcaption,
.prose figcaption {
    margin-top: 12px;
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244, 241, 237, 0.4);
}

.article__grid {
    display: grid; gap: clamp(36px, 4vw, 72px); align-items: start;
    /* Gutter laterale esplicito: questo container-fluid non sta dentro una
       .section, che è dove il padding orizzontale è normalmente definito —
       senza, il testo dell'articolo tocca i bordi dello schermo su mobile. */
    padding-inline: var(--gutter);
    padding-bottom: clamp(38px, 7.6vw, 110px);
}
.article__toc { display: grid; gap: 14px; align-content: start; }
.article__toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: 13px; line-height: 1.45; }
.article__toc a {
    display: block; padding: 7px 0 7px 13px;
    border-left: 1px solid rgba(244, 241, 237, 0.16);
    color: var(--on-ink-50);
}
.article__toc a:hover { color: var(--paper); }
.article__toc a.is-current { color: var(--paper); border-left-color: var(--vermilion); }

/* Il corpo arriva dall'editor del blog: stili applicati agli elementi nudi.
   display:block sovrascrive il .prose degli estratti (che è una griglia). */
.article__grid .prose {
    display: block;
    max-width: 68ch;
    font-size: clamp(16px, 1.15vw, 18.5px);
    /* 1.62, non 1.72: a 17px una riga misurava ~29px contro i 26px di stacco
       fra paragrafi — lo spazio interno al blocco superava quello fra blocchi,
       e il testo si leggeva come massa unica invece che per capoversi. */
    line-height: 1.52; color: rgba(244, 241, 237, 0.82);
}
/* Stacco in em: resta proporzionato al corpo a ogni breakpoint e sempre
   maggiore dell'interlinea, che è ciò che separa un paragrafo dal successivo. */
.article__grid .prose > * + * { margin-top: 1.55em; }
.prose p { margin: 0; }
.prose h2 { margin: 40px 0 0; font-weight: 600; font-size: clamp(24px, 2.6vw, 40px); line-height: 1.08; letter-spacing: -0.035em; color: var(--paper); scroll-margin-top: 110px; }
.prose h3 { margin: 30px 0 0; font-weight: 600; font-size: clamp(19px, 1.9vw, 26px); line-height: 1.2; letter-spacing: -0.025em; color: var(--paper); }
.prose ul, .prose ol { margin: 0; padding-left: 22px; display: grid; gap: 9px; }
.prose a { color: var(--flame); border-bottom: 1px solid rgba(238, 138, 102, 0.4); }
.prose img { display: block; width: 100%; height: auto; border: 1px solid var(--rule-ink); }
.prose figure { margin: 0; }
.prose blockquote {
    margin: 0; padding: 0 0 0 clamp(20px, 2.4vw, 32px);
    border-left: 2px solid var(--vermilion);
}
.prose blockquote p {
    font-weight: 600; font-size: clamp(21px, 2.3vw, 32px);
    line-height: 1.18; letter-spacing: -0.028em; color: var(--paper); text-wrap: pretty;
}
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--rule-ink); }
.prose th { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-ink-60); }
.prose pre {
    margin: 0; padding: 22px; overflow-x: auto;
    background: rgba(244, 241, 237, 0.04); border: 1px solid var(--rule-ink);
    font-family: var(--font-mono); font-size: 13.5px; line-height: 1.6;
}
.prose code { font-family: var(--font-mono); font-size: 0.92em; }
.prose iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }

.article__share {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    margin-top: clamp(28px, 4.7vw, 68px);
    padding-top: clamp(18px, 2.2vw, 32px);
    border-top: 1px solid var(--rule-ink);
    max-width: 68ch;
}
.article__share > p {
    margin: 0 8px 0 0;
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-ink-50);
}
.share-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 18px; border-radius: 999px;
    border: 1px solid rgba(244, 241, 237, 0.22);
    background: none; color: var(--on-ink-70); cursor: pointer;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.12em; text-transform: uppercase;
    transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.share-btn:hover { border-color: var(--vermilion); color: var(--paper); background: rgba(219, 76, 36, 0.1); }
.share-btn[data-copied] { border-color: var(--flame); color: var(--flame); }

@media (prefers-reduced-motion: reduce) { .share-btn { transition: none; } }

.rel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--rule-ink); }
.rel-card { background: var(--ink); padding: clamp(24px, 3vw, 36px) clamp(20px, 2vw, 28px); display: grid; gap: 12px; align-content: start; }
.rel-card:hover { background: #1D2427; }
.rel-card__title { font-weight: 600; font-size: clamp(20px, 2vw, 28px); line-height: 1.1; letter-spacing: -0.03em; }
.rel-card__body { font-size: 14px; line-height: 1.55; color: var(--on-ink-60); }

.card-grid--paper { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(22px, 3vw, 44px); background: none; }
.post-card { display: grid; gap: 16px; align-content: start; background: none; padding: 0; }
.post-card img { display: block; width: 100%; height: auto; border: 1px solid rgba(35, 44, 49, 0.14); }
.post-card__title { font-weight: 600; font-size: clamp(19px, 1.7vw, 25px); line-height: 1.18; letter-spacing: -0.025em; }

/* --------------------------------------------------------------- CONTACT */
.contact__grid {
    display: grid; gap: clamp(40px, 5vw, 90px); align-items: start;
    border-top: 1px solid var(--rule-ink);
    padding-top: clamp(26px, 4.4vw, 64px);
}
.contact__main form { display: grid; gap: clamp(20px, 2.8vw, 40px); }
.form-row { display: grid; gap: clamp(20px, 2.4vw, 32px); }

.field { margin: 0; display: grid; gap: 9px; }
.field > label, .field-check label {
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-ink-50);
}
.field .req, .field-check .req { color: var(--flame); }
.field .opt { opacity: 0.6; }
.field input, .field select, .field textarea {
    width: 100%; min-height: 52px; padding: 13px 0;
    background: none; border: 0;
    border-bottom: 1px solid rgba(244, 241, 237, 0.24);
    font: inherit; font-size: 17px; color: var(--paper);
}
.field textarea { min-height: 0; line-height: 1.6; resize: vertical; }
.field select { appearance: none; cursor: pointer; }
.field select option { background: #1D2427; color: var(--paper); }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--vermilion); }
.field input::placeholder, .field textarea::placeholder { color: rgba(244, 241, 237, 0.3); }
.field__error:not(:empty) { font-size: 13px; line-height: 1.5; color: var(--flame); }

.field-check { margin: 0; display: flex; align-items: flex-start; gap: 13px; }
.field-check input { flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--vermilion); }
.field-check label {
    font-family: var(--font-body); font-size: 14px; line-height: 1.6;
    letter-spacing: normal; text-transform: none; color: var(--on-ink-60);
}
.field-check a { color: var(--flame); border-bottom: 1px solid rgba(238, 138, 102, 0.4); }

/* Esito dell'invio: il plugin inietta qui il suo partial di conferma. Vuoto
   non deve occupare spazio, altrimenti stacca il titolo dal primo campo. */
.confirm-contact-container:not(:empty) { margin-bottom: clamp(20px, 2.8vw, 36px); }
.confirm-contact-container .alert,
.confirm-contact-container p {
    margin: 0; padding: 15px 18px;
    border-left: 2px solid var(--vermilion);
    font-size: 14.5px; line-height: 1.55;
}

/* Nota reCAPTCHA v3: obbligatoria quando si nasconde il badge Google. */
.recaptcha-notice {
    margin: clamp(16px, 2vw, 24px) 0 0;
    font-size: 12px; line-height: 1.55; color: var(--on-ink-50);
}
.recaptcha-notice a { color: var(--on-ink-60); border-bottom: 1px solid var(--rule-ink); }
.recaptcha-notice a:hover { color: var(--flame); }

/* Il campo file eredita il bordo inferiore degli input: qui non serve. */
.field input[type="file"] {
    min-height: 0; padding: 12px 0; border-bottom: 0;
    font-family: var(--font-mono); font-size: 12px; color: var(--on-ink-60);
}

.form-note { margin: 0; padding: 15px 18px; border-left: 2px solid var(--vermilion); font-size: 14.5px; line-height: 1.55; }
.form-note--error { background: rgba(219, 76, 36, 0.09); }
.form-note--ok {
    display: grid; gap: 16px; justify-items: start;
    padding: clamp(28px, 4vw, 44px);
    border: 1px solid rgba(238, 138, 102, 0.4); border-left-width: 1px;
    background: rgba(238, 138, 102, 0.07);
}
.form-note__title { margin: 0; font-size: clamp(19px, 2vw, 28px); line-height: 1.24; letter-spacing: -0.02em; }

.contact__aside { display: grid; gap: clamp(22px, 3.3vw, 48px); align-content: start; }
.contact__block { display: grid; gap: 13px; }
.contact__block--ruled { border-top: 1px solid var(--rule-ink); padding-top: 22px; }
.contact__email { font-weight: 600; font-size: clamp(21px, 2.2vw, 32px); line-height: 1.12; letter-spacing: -0.03em; word-break: break-word; }
.contact__todo { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(244, 241, 237, 0.45); }
.contact__note { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--on-ink-60); text-wrap: pretty; }
.contact__social { display: grid; gap: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-ink-70); }

.media-frame--16x11 { aspect-ratio: 16 / 11; }

@media (min-width: 1000px) {
    .featured__item { grid-template-columns: 1.15fr 1fr; }
    .contact__grid { grid-template-columns: 1.4fr 0.6fr; }
    .form-row { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1080px) {
    .article__grid--toc { grid-template-columns: minmax(190px, 240px) minmax(0, 1fr); }
    .article__toc { position: sticky; top: 124px; }
}


/* ============================================ WORK — CASE STUDY ARCHIVE */
.cs__principle {
    margin: 0; font-family: var(--font-mono); font-size: 12px;
    letter-spacing: 0.12em; line-height: 1.7;
    color: rgba(244, 241, 237, 0.45);
}
.cs__principle span { color: var(--flame); }

/* Il lead è a filo pagina: la cover arriva ai bordi del viewport. */
.section--flush { padding-left: 0; padding-right: 0; }
.cs__lead { aspect-ratio: 16 / 9; }
.cs__cta--over { color: var(--paper); }

.cs__head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 18px 28px;
    padding-bottom: clamp(16px, 2.2vw, 32px);
    border-bottom: 1px solid var(--rule-ink);
}

.cs-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-filter__btn {
    appearance: none; cursor: pointer;
    padding: 10px 18px; border-radius: 999px;
    border: 1px solid rgba(244, 241, 237, 0.2);
    background: transparent; color: rgba(244, 241, 237, 0.68);
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase;
    transition: border-color 0.25s ease, color 0.25s ease;
}
.cs-filter__btn:hover { border-color: var(--paper); color: var(--paper); }
.cs-filter__btn.is-on {
    background: var(--paper); color: var(--ink); border-color: var(--paper);
}
.cs-filter__empty {
    margin: 0; font-family: var(--font-mono); font-size: 12px;
    letter-spacing: 0.12em; color: var(--on-ink-50);
}

.cs-list { display: grid; gap: clamp(56px, 9vw, 132px); }
.cs-slot[hidden] { display: none; }

.cs { display: grid; gap: clamp(20px, 2.6vw, 40px); align-items: center; }
.cs__media {
    position: relative; display: block; overflow: hidden;
    background: #0F1416; border: 1px solid var(--rule-ink);
    aspect-ratio: 3 / 2;
}
.cs__media img {
    display: block; width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.cs:hover .cs__media img { transform: scale(1.035); }

.cs__body { display: grid; gap: 14px; align-content: center; }

.cs__index {
    margin: 0; display: flex; align-items: baseline; gap: 14px;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.2em; color: rgba(244, 241, 237, 0.4);
}
.cs__year { color: rgba(244, 241, 237, 0.28); }

/* Cliente sopra il titolo: è l'ancora di riconoscimento del case study. */
.cs__client {
    margin: 0; font-weight: 600;
    font-size: clamp(32px, 4.6vw, 74px);
    line-height: 0.9; letter-spacing: -0.05em;
}
.cs__title {
    margin: 0; font-weight: 400;
    font-size: clamp(17px, 1.6vw, 24px);
    line-height: 1.28; letter-spacing: -0.02em;
    max-width: 34ch; text-wrap: pretty;
}
/* Affordance di link sul titolo: senza, il case study non dichiarava in alcun
   modo di essere cliccabile (l'hover da solo non basta, e su touch non esiste). */
.cs__title a {
    text-decoration: underline;
    text-decoration-color: rgba(244, 241, 237, 0.28);
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    transition: color 0.3s ease, text-decoration-color 0.3s ease;
}
.cs__title a:hover { color: var(--flame); text-decoration-color: var(--flame); }
.cs:hover .cs__title a { text-decoration-color: rgba(244, 241, 237, 0.5); }

/* Category = settore: peso editoriale, in evidenza. */
.cs__category {
    margin: 0; justify-self: start;
    padding: 8px 16px; border-radius: 999px;
    border: 1px solid rgba(238, 138, 102, 0.42);
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--flame);
}
.cs__excerpt {
    margin: 0; max-width: 48ch;
    font-size: 15px; line-height: 1.62;
    color: var(--on-ink-60); text-wrap: pretty;
}
/* Tags = attività: discreti, una riga di micro-etichette. */
.cs__tags {
    margin: 0; padding: 0; list-style: none;
    display: flex; flex-wrap: wrap; gap: 6px 14px;
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(244, 241, 237, 0.42);
}
.cs__tags li + li::before { content: '/'; margin-right: 14px; opacity: 0.5; }

.cs__cta {
    justify-self: start; /* la larghezza è quella del testo, non della colonna */
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(244, 241, 237, 0.5);
    transition: color 0.3s ease;
}
.cs:hover .cs__cta { color: var(--flame); }

@media (min-width: 900px) {
    .cs { grid-template-columns: 1.1fr 0.9fr; gap: clamp(36px, 5vw, 96px); }
    /* Il testo si alterna di lato: nessuna riga uguale alla precedente. */
    .cs--flip .cs__body { order: -1; }

    /* Un solo rapporto per tutte le cover: con pochi case study la rotazione
       di tre formati leggeva come incoerenza, non come ritmo. Il ritmo resta,
       affidato all'alternanza del lato del testo e alla larghezza delle colonne. */
    .cs--0, .cs--1, .cs--2 { grid-template-columns: 1.08fr 0.92fr; }
    .cs--0 .cs__media, .cs--1 .cs__media, .cs--2 .cs__media { aspect-ratio: 3 / 2; }
}

@media (prefers-reduced-motion: reduce) {
    .cs__media img, .cs__cta, .cs-filter__btn { transition: none; }
    .cs:hover .cs__media img { transform: none; }
}

/* Paginazione del componente: HTML di Laravel, ristilizzato senza toccarlo. */
.wpager { padding-top: clamp(24px, 4.2vw, 60px); border-top: 1px solid var(--rule-ink); }
.wpager ul, .wpager .pagination {
    margin: 0; padding: 0; list-style: none;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
}
.wpager li > a, .wpager li > span {
    display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 14px;
    border-radius: 999px; border: 1px solid rgba(244, 241, 237, 0.2);
}
.wpager li.active > span, .wpager li[aria-current] > span {
    background: var(--paper); color: var(--ink); border-color: var(--paper);
}
.wpager li.disabled > span { opacity: 0.35; }
.wpager li > a:hover { border-color: var(--paper); }

/* -------------------------------------------------------- FEATURED WORKS */
/* Layout "lead": primo progetto protagonista, gli altri secondari. */
.wlead { display: grid; gap: clamp(26px, 3.2vw, 52px); }

.wlead__hero {
    position: relative; display: block; overflow: hidden;
    /* Mobile-first: 4:3. A 21:9 su un telefono la cover è alta ~150px e
       l'overlay del testo ne occupa 147 — l'immagine del progetto, che è il
       senso del blocco, non si vede. Il 21:9 torna da tablet in su. */
    aspect-ratio: 4 / 3; background: #0F1416;
}
.wlead__hero img {
    display: block; width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.wlead__hero:hover img { transform: scale(1.03); }

/* Il testo sta sopra una sfumatura: leggibile su qualsiasi cover, e su fondo
   chiaro non ha bisogno di varianti. */
.wlead__over {
    position: absolute; inset: auto 0 0 0;
    padding: clamp(20px, 3vw, 46px);
    display: grid; gap: 10px;
    background: linear-gradient(to top, rgba(15, 20, 22, 0.84), rgba(15, 20, 22, 0) 92%);
    color: var(--paper);
}
.wlead__cats {
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--flame);
}
.wlead__client {
    /* min 28px, non 36: sotto i 520px il clamp restava inchiodato al minimo e
       il nome mangiava tutta l'altezza dell'overlay. */
    font-weight: 600; font-size: clamp(28px, 7vw, 116px);
    line-height: 0.86; letter-spacing: -0.05em;
}
.wlead__title {
    font-size: clamp(14px, 1.2vw, 18px); line-height: 1.4;
    color: rgba(244, 241, 237, 0.72); max-width: 46ch;
}

.wlead__rest { display: grid; gap: clamp(24px, 3vw, 44px); }
.wlead__item { display: grid; gap: 16px; align-content: start; }
.wlead__media {
    position: relative; display: block; overflow: hidden;
    aspect-ratio: 16 / 10; background: #0F1416;
    border: 1px solid var(--rule-ink);
}
.wlead__media img {
    display: block; width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.wlead__item:hover .wlead__media img { transform: scale(1.04); }
.wlead__body { display: grid; gap: 11px; }
.wlead__name {
    margin: 0; font-weight: 600; font-size: clamp(26px, 3vw, 46px);
    line-height: 0.95; letter-spacing: -0.042em;
}
.wlead__name a:hover { color: var(--flame); }
.wlead__sub {
    margin: 0; max-width: 42ch; font-size: 14px; line-height: 1.55;
    color: var(--on-ink-60); text-wrap: pretty;
}

@media (min-width: 820px) {
    .wlead__hero { aspect-ratio: 21 / 9; }
    .wlead__rest { grid-template-columns: 1fr 1fr; }
}
/* Con 4+ featured i secondari restano su tre colonne invece di spaiarsi. */
@media (min-width: 1080px) {
    .wlead__rest:has(.wlead__item:nth-child(3)) { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .wlead__hero img, .wlead__media img { transition: none; }
    .wlead__hero:hover img,
    .wlead__item:hover .wlead__media img { transform: none; }
}

/* Varianti su fondo chiaro: Home e Services incorporano work-featured
   dentro section--paper. Senza queste regole il blocco resta tarato sui
   fondi scuri (bordo scuro, media nero, iniziale invisibile). */
.section--paper .wlead__media {
    border-color: rgba(35, 44, 49, 0.14);
    background: #E7E2DB;
}
.section--paper .wcard__fallback {
    background:
        repeating-linear-gradient(135deg, rgba(35, 44, 49, 0.07) 0 1px, transparent 1px 10px),
        radial-gradient(120% 100% at 25% 15%, rgba(219, 76, 36, 0.14), transparent 62%);
}
.section--paper .wcard__initial { color: rgba(35, 44, 49, 0.13); }
.section--paper .wlead__name a:hover { color: var(--brick); }

.section--paper .wlead__sub { color: var(--on-paper-70); }

/* ------------------------------------------------------ DETTAGLIO PROGETTO */
/* Struttura 1a: il media apre senza essere annunciato, i dati stanno in una
   scheda a filetti accanto al testo, la gallery chiude come sequenza. */

.case__hero { padding: clamp(76px, 11.7vw, 168px) 0 clamp(30px, 4.6vw, 66px); }
.case__title {
    margin: 0; max-width: 19ch;
    font-weight: 600; font-size: clamp(38px, 6.4vw, 104px);
    line-height: 0.92; letter-spacing: -0.048em;
    text-wrap: pretty;
}
.case__excerpt {
    margin: 0; max-width: 56ch;
    font-size: clamp(17px, 1.7vw, 25px);
    line-height: 1.35; letter-spacing: -0.018em;
    color: var(--on-ink-80); text-wrap: pretty;
}

/* Media di apertura: a piena larghezza, filettato sopra e sotto. Nessun
   titoletto lo precede — è la copertina, non una sezione "Video". */
.case__opening { margin: 0; }
.case__opening .video-embed,
.case__opening--image img {
    border-top: 1px solid var(--rule-ink);
    border-bottom: 1px solid var(--rule-ink);
}
.case__opening--image img {
    display: block; width: 100%; height: auto;
    max-height: 78svh; object-fit: cover;
}
.case__opening figcaption {
    margin: 12px var(--gutter) 0;
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244, 241, 237, 0.4);
}

/* Testo + scheda dati */
.case__body { padding: clamp(40px, 5.6vw, 80px) 0; }
/* Il gap non deve sommarsi allo spazio lasciato dal max-width della prosa:
   è la colonna a definire la misura di lettura, non un cap in ch. */
.case__layout { display: grid; gap: clamp(30px, 3.4vw, 52px); align-items: start; }
.case__prose { max-width: none; }

.case__facts {
    display: grid; align-content: start;
    border-top: 1px solid rgba(244, 241, 237, 0.2);
}
.case__fact {
    display: grid; gap: 6px;
    padding: 16px 0;
    border-bottom: 1px solid var(--rule-ink);
}
.case__fact-key {
    font-family: var(--font-mono); font-size: 9.5px;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(244, 241, 237, 0.38);
}
.case__fact-val { font-size: 15px; line-height: 1.5; }
.case__fact-list {
    margin: 3px 0 0; padding: 0; list-style: none;
    display: grid; gap: 4px;
    font-size: 14.5px; line-height: 1.6; color: var(--on-ink-70);
}
.case__fact-cta {
    margin-top: 20px; justify-self: start;
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--flame);
    border-bottom: 1px solid rgba(238, 138, 102, 0.4);
}
.case__fact-cta:hover { border-bottom-color: var(--flame); }

/* Gallery a masonry, con le PROPORZIONI ORIGINALI delle immagini.
   Niente ritaglio: un mosaico a celle fisse impone un aspect-ratio e taglia
   verticali e panoramiche allo stesso modo.

   CSS multi-column invece di grid: le colonne si bilanciano da sé in altezza e
   ogni immagine conserva la sua, quindi non servono né span calcolati né un
   pattern ciclico legato al numero di immagini. L'ordine di lettura scende
   lungo la colonna. */
.case__gallery {
    column-count: 2;
    /* Nessun gap: le immagini si toccano. Un separatore da 2px, con il fondo
       pagina scuro dietro, si leggeva come una cornice attorno a ogni thumb. */
    column-gap: 0;
}
.case__shot {
    position: relative; display: block; overflow: hidden;
    margin: 0;
    /* display:block sull'<img> elimina anche lo spazio da riga di testo che
       un'immagine inline lascia sotto di sé. */
    break-inside: avoid;
}
.case__shot img {
    display: block; width: 100%; height: auto;
    /* height:auto + nessun object-fit: l'immagine detta la propria altezza. */
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}
@media (min-width: 700px)  { .case__gallery { column-count: 3; } }
@media (min-width: 1100px) { .case__gallery { column-count: 4; } }

.case__shot:hover img, .case__shot:focus-visible img { transform: scale(1.06); opacity: 0.72; }

/* Segnale di apribilità: una croce sottile, non un'icona lente. Compare
   sull'hover, ma la thumb è comunque un link — su touch non serve. */
.case__shot-zoom {
    position: absolute; top: 50%; left: 50%;
    width: 22px; height: 22px; margin: -11px 0 0 -11px;
    opacity: 0; transition: opacity 0.3s ease;
}
.case__shot-zoom::before, .case__shot-zoom::after {
    content: ""; position: absolute; background: var(--paper);
}
.case__shot-zoom::before { top: 50%; left: 0; width: 100%; height: 1px; margin-top: -0.5px; }
.case__shot-zoom::after { left: 50%; top: 0; height: 100%; width: 1px; margin-left: -0.5px; }
.case__shot:hover .case__shot-zoom, .case__shot:focus-visible .case__shot-zoom { opacity: 1; }

/* Il lightbox del plugin resta sul suo fondo scuro: allineo solo la toolbar
   alla palette, senza toccarne la struttura (le classi sono minificate e
   cambierebbero a ogni aggiornamento del vendor). */
.fslightbox-toolbar { background: rgba(22, 28, 31, 0.86) !important; }

.case__foot { border-top: 1px solid var(--rule-ink); }
.case__foot-inner {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: 18px 40px;
    padding: clamp(30px, 4vw, 52px) 0;
}

@media (min-width: 900px) {
    /* Due colonne accostate, non distese sul contenitore: il case study è un
       documento da leggere, quindi il blocco testo+scheda ha una larghezza
       massima propria (~1050px). Distendere le colonne su tutta la pagina
       lasciava centinaia di pixel vuoti fra il testo e la scheda ai viewport
       larghi — oppure, cappando la sola prosa, sommava il residuo al gap.
       72ch tiene la misura di lettura sotto i 75 caratteri. */
    .case__layout {
        grid-template-columns: minmax(0, 72ch) minmax(190px, 260px);
        justify-content: start;
        max-width: 1050px;
    }
}

/* ------------------------------------------------- PAGINE LEGALI
   Privacy e Cookie Policy. Documenti da leggere: misura di lettura stretta,
   indice laterale agganciato su desktop, nessuna animazione.
   (Queste regole erano andate perse in una modifica precedente al foglio:
   le pagine restavano senza stile.) */
.legal {
    /* Il gutter va qui: .container-fluid non ha padding proprio, sulle altre
       pagine lo porta .section. Senza, il testo tocca il bordo dello schermo. */
    padding: clamp(96px, 14vh, 170px) var(--gutter) clamp(64px, 10vh, 120px);
}
.legal__grid { display: grid; gap: clamp(34px, 5vw, 76px); align-items: start; }

.legal__toc { display: grid; gap: 16px; align-content: start; }
.legal__toc ol {
    margin: 0; padding: 0; list-style: none;
    display: grid; gap: 2px;
    counter-reset: toc;
}
.legal__toc li { counter-increment: toc; }
.legal__toc a {
    display: grid; grid-template-columns: 26px 1fr; gap: 10px;
    padding: 9px 0;
    border-top: 1px solid var(--rule-ink);
    font-size: 14px; line-height: 1.35; color: var(--on-ink-60);
    transition: color 0.25s ease;
}
.legal__toc a::before {
    content: counter(toc, decimal-leading-zero);
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.1em; color: var(--on-ink-40);
}
.legal__toc li:last-child a { border-bottom: 1px solid var(--rule-ink); }
.legal__toc a:hover { color: var(--paper); }

.legal__body { display: grid; gap: clamp(34px, 4.6vh, 60px); min-width: 0; }

.legal-section { display: grid; gap: 16px; scroll-margin-top: 110px; }
.legal-section h2 {
    margin: 0; max-width: 28ch;
    font-weight: 600; font-size: clamp(21px, 2.3vw, 32px);
    line-height: 1.1; letter-spacing: -0.035em;
}
.legal-section h3 {
    margin: 8px 0 0;
    font-weight: 600; font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.25; letter-spacing: -0.02em;
}
.legal-section p, .legal-section li {
    margin: 0; max-width: 68ch;
    font-size: clamp(15px, 1.1vw, 17px); line-height: 1.7;
    color: rgba(244, 241, 237, 0.78); text-wrap: pretty;
}
.legal-section ul, .legal-section ol { margin: 0; padding-left: 20px; display: grid; gap: 9px; }
.legal-section a { color: var(--salmon); text-decoration: underline; text-underline-offset: 3px; }
.legal-section a:hover { color: var(--paper); }

/* Riferimenti societari: blocco compatto, non un paragrafo qualunque. */
.legal-entity {
    display: grid; gap: 4px;
    padding: clamp(18px, 2.2vw, 26px) clamp(18px, 2.2vw, 26px);
    border-left: 2px solid var(--vermilion);
    background: rgba(244, 241, 237, 0.03);
}
.legal-entity p { margin: 0; max-width: none; font-size: 15px; line-height: 1.65; }
.legal-entity strong { color: var(--paper); font-weight: 600; }

/* Tabella degli strumenti: su mobile scorre invece di rompere il layout. */
.legal-table {
    width: 100%; border-collapse: collapse;
    display: block; overflow-x: auto; white-space: nowrap;
    font-size: 13.5px;
}
.legal-table th, .legal-table td {
    padding: 13px 18px 13px 0;
    text-align: left; vertical-align: top;
    border-bottom: 1px solid var(--rule-ink);
}
.legal-table th {
    font-family: var(--font-mono); font-size: 10px; font-weight: 500;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-ink-50);
}
.legal-table td { color: rgba(244, 241, 237, 0.78); }
.legal-table tbody tr:last-child th, .legal-table tbody tr:last-child td { border-bottom: 0; }

.legal-prefs {
    display: grid; gap: 12px;
    padding: clamp(20px, 2.4vw, 30px);
    border: 1px solid var(--rule-ink);
}
.legal-prefs p { max-width: 60ch; }

@media (min-width: 1000px) {
    .legal__grid { grid-template-columns: minmax(190px, 0.26fr) minmax(0, 1fr); }
    /* L'indice resta agganciato: un documento lungo ha bisogno di una
       bussola sempre visibile. */
    .legal__toc { position: sticky; top: 108px; }
    .legal-table { display: table; white-space: normal; }
}

/* ------------------------------------------------------------ responsive */
@media (min-width: 1000px) {
    .site-nav { display: flex; }
    .site-header__cta { display: inline-flex; }
    .burger { display: none; }
    .mobile-menu { display: none !important; }

    .hero__foot { grid-template-columns: 1.1fr auto; }
    .page-hero__foot { grid-template-columns: 1.4fr auto; }
    .page-hero__foot--split { grid-template-columns: 1.5fr 0.5fr; }

    .panel { grid-template-columns: 1.1fr 1fr; align-items: center; }

    /* --- pagina Agata --- */
    .split { grid-template-columns: 0.8fr 1.2fr; }
    /* La colonna di sinistra resta ferma mentre il testo a destra scorre.
       align-self:stretch sul contenitore è la parte che conta: senza, la
       cella è alta quanto il titolo e lo sticky non ha spazio di corsa. */
    .split__col { align-self: stretch; }
    .split__sticky { position: sticky; top: clamp(100px, 12vh, 150px); }
    /* Hero: il titolo tiene la colonna larga, Agata quella stretta a destra e
       in basso — lo sguardo sale verso le parole. */
    .agata-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr); }
    .agata-hero__figure { justify-self: end; max-width: 720px; }
    .agata-hero__foot { grid-template-columns: minmax(0, 1fr) auto; }
    .agata-name__inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; }
    /* Il numerale è dietro, quindi la griglia non gli riserva una colonna:
       parola e testo su due colonne, e le fasi pari rientrano. */
    .method__item { grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr); align-items: baseline; }
    .method__item--shift { padding-left: 9vw; }
    .method__item--shift .method__ghost { left: auto; right: -0.06em; }
    /* align-items:start, non end: la foto deve partire dall'alto della
       sezione per poi restare agganciata mentre l'acronimo scorre. */
    .persona__inner { grid-template-columns: minmax(0, 1fr) minmax(220px, 0.42fr); align-items: start; }
    .persona__col { align-self: stretch; align-content: start; justify-items: end; }
    .persona__figure {
        position: sticky; top: clamp(100px, 12vh, 150px);
        max-width: 370px;
    }

    .capabilities__grid { grid-template-columns: 0.8fr 1.5fr; }
    /* Colonna di sinistra ferma mentre l'elenco delle cinque aree scorre.
       Serve il doppio livello: .capabilities__col si estende per l'altezza
       della riga e fornisce lo spazio di corsa, .capabilities__sticky è
       l'elemento agganciato. Con sticky direttamente sul grid item e
       align-items:start la cella è alta quanto il contenuto e l'aggancio si
       stacca dopo poche centinaia di pixel (misurato: si sganciava a 800px).
       top calcolato sull'header fisso. */
    .capabilities__col { align-self: stretch; }
    .capabilities__sticky {
        position: sticky;
        top: clamp(100px, 12vh, 150px);
    }
    .two-col { grid-template-columns: 0.85fr 1.15fr; }
    .area { grid-template-columns: 0.35fr 1.65fr; }
    .phase { grid-template-columns: 0.75fr 1.25fr; }
    .case-grid { grid-template-columns: repeat(3, 1fr); }

    .work-item { grid-template-columns: 1.25fr 0.9fr; }
    .work-item--flip { grid-template-columns: 0.9fr 1.25fr; }
    .work-item--flip .work-item__media { order: 2; }
}

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