/* =========================================================
   Compagnia dei Piccoli — foglio di stile del sito
   =========================================================
   Struttura del file:
   1. Font
   2. Colori e variabili (:root)
   3. Reset di base
   4. Elementi comuni a tutte le pagine (header, footer, bottoni)
   5. Homepage
   6. Pagina "Spettacoli" (listino)
   7. Pagina di dettaglio spettacolo
   8. Utility varie
   9. Pagina "Laboratori" e iscrizione
   10. Transizioni tra pagine (Barba.js)
   11. Utility (fine file)

   Per cambiare un colore del brand, modifica solo le variabili
   nella sezione 2: si aggiorna automaticamente ovunque nel sito.
   ========================================================= */

/* 1. Font ------------------------------------------------- */
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-variable.woff2') format('woff2');
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Archivo Black';
  src:url('../fonts/archivo-black.woff2') format('woff2');
  font-weight:900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Piazzolla Italic';
  src:url('../fonts/piazzolla-italic.woff2') format('woff2');
  font-weight:500;
  font-style:italic;
  font-display:swap;
}

/* 2. Colori e variabili ------------------------------------
   Presi dalla guida cromatica ufficiale del rebrand 2022
   ("CROMIE"). Il rosso è l'unico accento vivo del sito: usalo
   con parsimonia (bottoni, tag di categoria, dettagli), mai
   come sfondo di grandi superfici di testo. */
:root{
  --red: #D91441;        /* "la formica e il sipario" — accento primario */
  --red-hover: #B70F35;   /* variante più scura per stato hover sui bottoni pieni */
  --navy: #201F2C;        /* "il buio del fuoriscena" — fondo scena, footer, hero */
  --navy-2: #2B293B;
  --paper: #F5F2F5;        /* fondo pagina chiaro */
  --atmosfera: #C9C2C9;    /* "atmosfera" — grigio neutro ufficiale */
  --ink: #201F2C;          /* testo principale */
  --ink-soft: #5B5868;     /* testo secondario */
  --line: rgba(32,31,44,0.14);
  --card-bg: #ffffff;
  --shadow: 0 18px 40px -20px rgba(32,31,44,0.35);

  /* colori accento della guida CROMIE, usati SOLO per marcare
     le categorie di spettacolo (mai come colore di brand) */
  --cat-prosa: #9E1447;
  --cat-famiglie: #F6C500;
  --cat-laboratori: #296BAF;
  --cat-eventi: #8B2BF4;
  --cat-reading: #1E8A72;
}

@media (prefers-color-scheme: dark){
  :root{
    --navy:#111017; --navy-2:#1C1B26; --paper:#17161F;
    --atmosfera:#4A4855; --ink:#EFEDF2; --ink-soft:#B3AFC0; --red:#E91646; --red-hover:#C41139;
    --line: rgba(239,237,242,0.14); --card-bg:#1E1D27;
    --shadow: 0 18px 44px -18px rgba(0,0,0,0.6);
  }
}

/* 3. Reset di base ------------------------------------------ */
*{ box-sizing:border-box; }
/* Lo scroll fluido è gestito da Lenis (assets/js/main.js), non dal CSS:
   niente scroll-behavior:smooth qui, altrimenti i due sistemi entrano in conflitto. */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto; }
.lenis.lenis-stopped{ overflow:hidden; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'neue-haas-grotesk-text','Archivo', sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4,p{ margin:0; }

.display{
  font-family:'Archivo Black','Archivo',sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.01em;
  text-wrap:balance;
}
.italic-accent{
  font-family:'Piazzolla Italic', serif;
  font-style:italic;
  font-weight:500;
}
.eyebrow{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif;
  font-weight:700;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
}

/* 4. Elementi comuni ----------------------------------------- */
.sitehead{
  position:relative; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(20px,5vw,56px);
  border-bottom:1px solid var(--line);
  background:var(--paper);
}
.brand{ display:flex; align-items:center; text-decoration:none; }
.brand-logo{ height:40px; width:auto; }
.brand-logo-footer{ height:34px; width:auto; }
/* In dark mode l'header ha sfondo scuro (vedi --paper in :root dark):
   il logo "rgb" ha la scritta in un blu quasi illeggibile su quello
   sfondo, quindi va sostituito con la variante bianca. */
@media (prefers-color-scheme: dark){
  .brand-logo{ content:url('../img/logo/logo-orizzontale-white.png'); }
}
.sitenav{ display:flex; align-items:center; gap:clamp(14px,2.4vw,32px); flex-wrap:wrap; }
.sitenav a{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-weight:700; font-size:0.86rem;
  text-decoration:none; color:var(--ink); opacity:0.82;
}
.sitenav a:hover, .sitenav a[aria-current="page"]{ opacity:1; }
.sitenav a[aria-current="page"]{
  border-bottom:2px solid var(--red); padding-bottom:2px;
}

/* Hamburger: pulsante nascosto su desktop, mostrato sotto gli 850px
   al posto della .sitenav (vedi media query più sotto). Le tre barre
   sono tre span assoluti che si trasformano in una "X" quando il menu
   è aperto (classe .is-open sul bottone stesso). */
.nav-toggle{
  display:none; position:relative; width:34px; height:34px; flex:none;
  border:none; background:none; cursor:pointer; padding:0;
}
.nav-toggle span{
  position:absolute; left:6px; right:6px; height:2px; background:var(--ink);
  border-radius:2px; transition:transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle span:nth-child(1){ top:11px; }
.nav-toggle span:nth-child(2){ top:16px; }
.nav-toggle span:nth-child(3){ top:21px; }
.nav-toggle.is-open span:nth-child(1){ top:16px; transform:rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ top:16px; transform:rotate(-45deg); }

/* Pannello di navigazione mobile: nascosto su desktop, agganciato
   sotto l'header quando aperto. Vive fuori da .sitenav (che resta
   display:none sotto gli 850px) così i due non si accavallano. */
.mobile-nav{
  display:none; position:fixed; inset:0; z-index:90;
  background:var(--paper);
  padding:96px clamp(24px,8vw,56px) 40px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}
.mobile-nav.is-open{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity 0.22s ease, transform 0.22s ease;
}
.mobile-nav nav a{
  display:block; font-family:'Archivo Black','Archivo',sans-serif; font-weight:900;
  text-transform:uppercase; font-size:clamp(1.6rem,7vw,2.2rem); color:var(--ink);
  text-decoration:none; padding:14px 0; border-bottom:1px solid var(--line);
}
.mobile-nav nav a[aria-current="page"]{ color:var(--red); }
.mobile-nav .cta-pill{
  margin-top:28px; display:block; text-align:center;
  font-size:1rem; padding:15px 22px;
}

/* Bottone pieno e bottone con bordo condividono lo stesso effetto hover:
   un riempimento bianco che sale dal basso (pseudo-elemento in scaleY,
   non un'animazione di background-color/height che causerebbe layout
   thrash) e il testo passa a nero non appena il riempimento lo raggiunge. */
.cta-pill{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-weight:700; font-size:0.82rem;
  background:var(--red); color:#fff; padding:11px 22px; border-radius:999px;
  text-decoration:none; white-space:nowrap; border:1.5px solid var(--red); cursor:pointer;
  display:inline-block; transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.cta-pill:hover{ background:#fff; border-color:var(--red); color:var(--red); }

.cta-outline{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-weight:700; font-size:0.95rem;
  border:1.5px solid rgba(245,242,245,0.5); color:#F5F2F5; background:transparent;
  padding:14px 28px; border-radius:999px; text-decoration:none; display:inline-block;
  transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.cta-outline:hover{ border-color:var(--red); color:var(--red); }

.section{ padding:clamp(56px,8vw,96px) clamp(20px,6vw,72px); }
.section-narrow{ max-width:1180px; margin:0 auto; }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; margin-bottom:36px; flex-wrap:wrap;
}
.section-head h2{ font-size:clamp(1.7rem,3vw,2.5rem); margin:8px 0 0; }
.section-head .eyebrow{ color:var(--red); }
.section-head a.see-all{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-weight:700; font-size:0.86rem;
  text-decoration:none; color:var(--ink); border-bottom:2px solid var(--red);
  padding-bottom:2px; white-space:nowrap;
}

.sitefoot{ background:var(--navy); color:#D9D6E0; padding:56px clamp(20px,6vw,72px) 30px; }
.foot-grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:32px;
  padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,0.12);
}
@media (max-width:820px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .foot-grid{ grid-template-columns:1fr; } }
.foot-grid h4{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-size:0.76rem; letter-spacing:0.09em;
  text-transform:uppercase; color:#9C98AC; margin:0 0 14px;
}
.foot-grid a{
  display:block; font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-size:0.9rem;
  text-decoration:none; color:#EDEAF0; margin-bottom:10px; opacity:0.9;
}
.foot-grid a:hover{ opacity:1; color:var(--red); }
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:22px; font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-size:0.8rem;
  color:#9C98AC; flex-wrap:wrap; gap:12px;
}
.foot-social{ display:flex; gap:14px; }
.foot-social svg{ width:18px; height:18px; }
.foot-credit{ opacity:0.75; }

/* pagina semplice (chi siamo, contatti, laboratori) */
.simple-page h1{ font-size:clamp(2.2rem,5vw,3.4rem); margin-bottom:22px; max-width:30ch; }
.simple-page .lede{
  font-family:'Piazzolla Italic'; font-style:italic;
  font-size:clamp(1.1rem,1.8vw,1.35rem); color:var(--ink-soft);
  max-width:52ch; margin-bottom:34px;
}
.simple-page p{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; line-height:1.75; color:var(--ink-soft);
  font-size:1.02rem; margin:0 0 18px;
}
.simple-page p strong, .about-copy-p strong{ color:var(--ink); font-weight:700; }
.simple-page p a{ color:var(--red); font-weight:600; }

/* 5. Homepage -------------------------------------------------- */
.hero{
  position:relative; overflow:hidden; color:#F5F2F5;
  /* Sfondo a righe, sempre presente sotto le foto delle slide: è quello
     che si vede se una foto non carica (background-image rotto) o se
     una slide non ne ha una — mai un buco navy vuoto dietro il testo. */
  background:var(--navy) repeating-linear-gradient(90deg,
    rgba(217,20,65,0.55) 0 34px,
    rgba(107,101,119,0.4) 34px 60px,
    rgba(43,41,59,0.7) 60px 96px,
    rgba(217,20,65,0.55) 96px 130px,
    rgba(32,31,44,0.85) 130px 168px
  );
  /* Ogni .hero-slide è absolute e quindi fuori dal flusso: senza
     un'altezza esplicita qui, .hero collasserebbe a zero (nessun
     contenuto in flusso normale la fa crescere). min-height replica
     l'ingombro che il vecchio .hero-inner statico dava naturalmente. */
  min-height:clamp(520px,82vh,760px);
}
@media (max-width:850px){
  /* Su mobile l'hero diventa a schermo intero (tolta l'altezza
     dell'header, che sta sopra nel flusso normale): più impatto come
     prima schermata e, dato che il contenuto è centrato verticalmente
     invece che appoggiato in alto, elimina anche il vuoto che restava
     tra i pulsanti e i puntini con un min-height fisso più piccolo del
     content. 100dvh (non 100vh) segue la vera altezza visibile su
     Safari iOS, che nasconde/mostra la barra degli indirizzi. */
  .hero{ min-height:calc(100dvh - var(--sitehead-h, 76px)); }
  .hero-slide.is-active{ display:flex; align-items:center; }
  .hero-slide .hero-inner{ width:100%; }
}
/* Carosello dell'hero: la foto di sfondo e il testo di ogni slide sono
   due livelli indipendenti, non un'unica cosa che sfuma insieme.
   - .hero-slide-bg: le foto restano sempre sovrapposte (position:absolute,
     tutte nello stesso posto) e passano da una all'altra con un semplice
     crossfade in opacity — qui la sovrapposizione durante la transizione
     è voluta e corretta, è quello che rende il cambio morbido.
   - .hero-slide (testo): non usa opacity/visibility con transizione:
     JS alterna direttamente display:none/block tra gli slide, uno stacco
     netto e istantaneo. Provare a farlo sfumare come la foto crea la
     sovrapposizione illeggibile dei due blocchi di testo — un problema
     che una foto non ha (sfondo dietro comunque scuro), un testo sì. */
.hero .stripes{ position:absolute; inset:0; }
.hero-slide-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity 1s ease;
}
.hero-slide-bg.is-active{ opacity:1; }
.hero-slide{
  position:absolute; inset:0; display:none;
  /* .hero-slide contiene il testo di ogni slide (ora un figlio per
     slide, non un unico blocco fisso): deve quindi ripetere lo stesso
     padding di .hero, altrimenti il testo perde il margine laterale e
     trabocca fuori dallo schermo. */
  padding:clamp(45px,6vw,140px) clamp(20px,6vw,72px) clamp(45px,9vw,110px);
}
.hero-slide.is-active{ display:block; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(17,16,23,0.5) 0%, rgba(17,16,23,0.9) 78%, var(--navy) 100%);
}
.hero-inner{ position:relative; z-index:2; max-width:1180px; justify-content:space-evenly; display:flex; flex-direction:column; height:100%; }

/* Puntini del carosello: indicano lo slide attivo e permettono di
   saltare direttamente a uno specifico (laboratori o progetti). */
.hero-dots{
  position:absolute; z-index:3; left:clamp(20px,6vw,72px); bottom:24px;
  display:flex; gap:10px;
}
.hero-dots[hidden]{ display:none; }
.hero-dot{
  width:9px; height:9px; border-radius:999px; border:none; padding:0;
  background:rgba(245,242,245,0.4); cursor:pointer; transition:background 0.2s ease, transform 0.2s ease;
}
.hero-dot.is-active{ background:var(--red); transform:scale(1.2); }
.hero .eyebrow{ color:#FFD9E2; margin-bottom:18px; display:inline-flex; align-items:center; gap:10px; }
.hero .eyebrow::before{ content:""; width:26px; height:2px; background:var(--red); display:inline-block; }
.hero h1{ font-size:clamp(2.6rem,7vw,5.6rem); line-height:0.98; margin:0 0 28px; max-width:14ch; }
.hero h1 .line-red{ color:var(--red); }
.hero p.lede{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-size:clamp(1rem,1.4vw,1.2rem); line-height:1.6;
  max-width:46ch; color:#E4E1EA; margin:0 0 34px;
}
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
.cta-pill-lg{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-weight:700; font-size:0.95rem;
  background:var(--red); color:#fff; padding:15px 30px; border-radius:999px; text-decoration:none;
  display:inline-block; border:1.5px solid var(--red);
  transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.cta-pill-lg:hover{ background:#fff; border-color:var(--red); color:var(--red); }

/* Homepage — Eventi del mese */
.events-section{ padding-top:clamp(16px,2vw,40px); padding-bottom:clamp(16px,2vw,40px); }
.events-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; margin-bottom:36px; flex-wrap:wrap;
}
/* Lo spazio del badge resta sempre riservato (visibility, non display)
   così l'header non trasla verticalmente quando si esce dal mese
   corrente e il badge scompare: solo il testo si nasconde, l'altezza
   della riga sopra al titolo resta identica in ogni mese. */
.events-badge{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-weight:700;
  font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--red);
  display:block; margin-bottom:8px; visibility:visible;
}
.events-badge.is-hidden{ visibility:hidden; }
.events-head h2{ font-size:clamp(1.7rem,3vw,2.5rem); margin:0; }
.events-nav-group{ display:flex; align-items:center; gap:10px; flex:none; }
.events-nav{
  flex:none; width:38px; height:38px; border-radius:999px; border:none;
  background:transparent; color:var(--ink); font-size:1.3rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background-color 0.2s, color 0.2s;
}
.events-nav:hover{ background:var(--red); color:#fff; }
@media (max-width:480px){
  /* Mese e pulsanti restano sulla stessa riga: senza wrap, il titolo
     più stretto (clamp più basso) lascia sempre spazio ai pulsanti,
     invece di andare a capo e spostarli in basso ad ogni cambio mese. */
  .events-head{ flex-wrap:nowrap; align-items:center; }
  .events-head h2{ font-size:clamp(1.3rem,5.5vw,1.7rem); }
  .events-nav{ width:38px; height:38px; }
  .events-nav-group{ margin-left:auto; }
}

/* Cambio mese: la griglia sfuma e si sposta leggermente in verticale
   (opacity + transform, entrambe animabili sul compositor, zero
   reflow). .events-viewport NON cambia più altezza: se collassasse
   con grid-template-rows trascinerebbe con sé tutto il resto della
   pagina sotto, facendola "saltare" ad ogni cambio mese. Qui invece
   resta ferma e fa solo da contenitore con overflow nascosto. */
.events-viewport{ position:relative; overflow:hidden; }
.events-viewport-inner{ min-height:0; }
.events-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
  transition:opacity 0.22s ease, transform 0.22s ease; opacity:1; transform:translateY(0);
}
.events-viewport.is-changing .events-grid{ opacity:0; transform:translateY(6px); }
@media (max-width:980px){ .events-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .events-grid{ grid-template-columns:1fr; gap:16px; } }

/* .event-card riusa il componente .show-card (stessa "media card": stesso
   border-radius, aspect-ratio, layout, scrim, tag pill) e aggiunge solo le
   due parti che gli sono proprie: l'immagine come <img> invece che come
   sfondo, e il badge data al posto del sottotitolo. */
.event-card{ background:var(--navy); }
@media (max-width:620px){ .event-card{ aspect-ratio:4/3; } }
.event-card .event-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.event-card .event-date{ display:flex; align-items:baseline; gap:6px; margin-bottom:6px; }
.event-card .event-day{ font-family:'Archivo Black',sans-serif; font-size:1.2rem; line-height:1; }
.event-card .event-monthshort{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-weight:700; font-size:0.68rem;
  letter-spacing:0.07em; text-transform:uppercase; opacity:0.85;
}

.events-empty{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; color:var(--ink-soft); font-size:0.95rem;
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:220px; margin:0; border:1px dashed var(--line); border-radius:16px;
}
.events-empty[hidden]{ display:none; }

.marquee{ background:var(--red); color:#fff; overflow:hidden; white-space:nowrap; padding:13px 0; position:relative; z-index:3; }
.marquee-track{ display:inline-flex; gap:40px; animation:scroll-left 26s linear infinite; padding-left:40px; }
.marquee span{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-weight:700; font-size:0.82rem;
  letter-spacing:0.1em; text-transform:uppercase; display:inline-flex; align-items:center; gap:40px;
}
.marquee span::after{ content:"—"; opacity:0.6; margin-left:40px; }
@keyframes scroll-left{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }

/* Sezione "Chi siamo": resta sul fondo chiaro (non un'altra banda scura,
   che si fonderebbe visivamente con la curtain-band dei laboratori appena
   sotto) ma prende peso da manifesto tramite la scala, non il colore — il
   motto occupa una riga sola, enorme, come una vera citazione editoriale,
   non due righe spezzate a caso. I numeri sono il fuoco visivo del blocco
   sotto, non una didascalia in piccolo. */
.about-band{ background:var(--paper); padding:clamp(64px,9vw,110px) clamp(20px,6vw,72px); }
.quote-big{
  font-size:clamp(1.4rem,4vw,3rem); line-height:1.2; color:var(--ink);
  margin:0 0 clamp(40px,6vw,64px); white-space:nowrap;
}
@media (max-width:700px){ .quote-big{ white-space:normal; font-size:clamp(1.3rem,7vw,2rem); } }
.about-grid{
  display:grid; grid-template-columns:1.3fr 0.7fr; gap:clamp(40px,6vw,88px);
  align-items:end; padding-top:clamp(28px,4vw,40px); border-top:1px solid var(--line);
}
@media (max-width:820px){ .about-grid{ grid-template-columns:1fr; gap:40px; } }
.about-copy-p{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; line-height:1.7;
  color:var(--ink-soft); font-size:1rem; margin:0; max-width:56ch;
}
.about-stats{ display:flex; gap:clamp(24px,4vw,44px); }
.about-stats div{ flex:1; }
.about-stats .num{
  font-family:'Archivo Black'; font-size:clamp(2.4rem,4.4vw,3.2rem); line-height:1;
  color:var(--red); display:block; margin-bottom:8px;
}
.about-stats .lbl{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-size:0.84rem;
  line-height:1.4; color:var(--ink-soft);
}

.cat-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:44px; }
@media (max-width:820px){ .cat-strip{ grid-template-columns:1fr 1fr; } }
.cat-chip{
  border-radius:14px; padding:18px; min-height:88px; text-decoration:none;
  display:flex; flex-direction:column; justify-content:space-between; color:#fff;
}
.cat-chip .cat-name{ font-weight:700; font-size:1.02rem; font-family:'neue-haas-grotesk-text','Archivo'; }
.cat-chip .cat-count{ font-size:0.76rem; opacity:0.85; font-weight:700; font-family:'neue-haas-grotesk-text','Archivo'; }

/* Utility di colore per categoria: sostituiscono gli inline style
   "background:var(--cat-...)" ripetuti su tag/chip di spettacoli, eventi
   e cat-strip in tutto il sito. */
.tag-prosa{ background:var(--cat-prosa); }
.tag-famiglie{ background:var(--cat-famiglie); color:#201F2C; }
.tag-laboratori{ background:var(--cat-laboratori); }
.tag-eventi{ background:var(--cat-eventi); }
.tag-reading{ background:var(--cat-reading); }

.show-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:980px){ .show-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .show-grid{ grid-template-columns:1fr; } }
.show-grid.show-grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .show-grid.show-grid-4{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .show-grid.show-grid-4{ grid-template-columns:1fr; } }
.show-card{
  border-radius:16px; overflow:hidden; text-decoration:none; color:#fff;
  position:relative; aspect-ratio:3/4; display:flex; flex-direction:column;
  justify-content:flex-end; box-shadow:var(--shadow);
}
.show-card .art{ position:absolute; inset:0; }
.show-card .art.photo{ background-size:cover; background-position:center; }
.show-card .scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(17,16,23,0) 34%, rgba(17,16,23,0.86) 100%); }
.show-card .tag{
  position:relative; z-index:2; margin:16px 16px 0; align-self:flex-start;
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-weight:700; font-size:0.68rem; letter-spacing:0.07em;
  text-transform:uppercase; padding:5px 11px; border-radius:999px; color:#fff;
}
.show-card .cc{ position:relative; z-index:2; padding:14px 16px 18px; }
.show-card h3{ font-family:'Archivo Black'; font-size:1.15rem; margin:0 0 4px; text-transform:none; letter-spacing:0; }
.show-card p{ font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-size:0.78rem; margin:0; opacity:0.82; }

/* Pagina "Chi siamo" — Direttivo e Collaboratori. Stessa famiglia di forma
   delle show-card (locandina: raggio 16px, scrim, ombra), ma qui il "poster"
   non esiste ancora: finché non arrivano foto vere, il campo .art resta un
   blocco a righe diagonali nei toni CROMIE (non un colore di categoria,
   che etichetta solo gli spettacoli) con le iniziali della persona in primo
   piano — un segnaposto onesto, non una foto stock. */
.people-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:22px; margin-bottom:56px; }
@media (max-width:980px){ .people-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:480px){ .people-grid{ grid-template-columns:1fr 1fr; gap:14px; } }
.people-grid.people-grid-collab{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .people-grid.people-grid-collab{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:480px){ .people-grid.people-grid-collab{ grid-template-columns:1fr 1fr; } }
.person-card{
  border-radius:16px; overflow:hidden; position:relative; aspect-ratio:3/4;
  display:flex; flex-direction:column; justify-content:flex-end; color:#fff;
  box-shadow:var(--shadow);
}
.person-card .art{
  position:absolute; inset:0;
  background:var(--navy) repeating-linear-gradient(135deg,
    rgba(217,20,65,0.5) 0 18px,
    rgba(43,41,59,0.9) 18px 36px,
    rgba(32,31,44,0.95) 36px 54px
  );
}
.person-card .art.photo{ background-size:cover; background-position:center; }
.person-card .initials{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Archivo Black'; font-size:clamp(1.8rem,4vw,2.6rem); color:rgba(245,242,245,0.92);
  letter-spacing:0.02em;
}
.person-card .art.photo + .initials{ display:none; }
.person-card .scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(17,16,23,0) 46%, rgba(17,16,23,0.9) 100%); }
.person-card .pc{ position:relative; z-index:2; padding:14px 14px 16px; }
.person-card h3{ font-family:'Archivo Black'; font-size:clamp(0.86rem,2.6vw,0.98rem); line-height:1.2; margin:0 0 3px; text-transform:none; letter-spacing:0; overflow-wrap:break-word; }
.person-card p{ font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-size:0.72rem; line-height:1.35; margin:0; opacity:0.82; overflow-wrap:break-word; }
.people-block{ margin-bottom:8px; }
.people-block + .people-block{ margin-top:clamp(48px,6vw,72px); }
.people-block h2{ font-size:clamp(1.5rem,3vw,2rem); margin-bottom:6px; }
.people-block .desc{ font-family:'neue-haas-grotesk-text','Archivo'; color:var(--ink-soft); font-size:0.92rem; margin-bottom:28px; max-width:60ch; }

.curtain-band{ background:var(--navy); color:#F5F2F5; }
.lab-inner{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
@media (max-width:820px){ .lab-inner{ grid-template-columns:1fr; } }
.lab-inner p{ font-family:'neue-haas-grotesk-text','Archivo',sans-serif; line-height:1.7; color:#D3CFDC; max-width:46ch; }

/* Barba.js page-transition curtain overlay: scende dall'alto */
.curtain{
  position:fixed; inset:0; z-index:9999;
  background:var(--red);
  transform:scaleY(0) translateY(0);
  transform-origin:top;
  pointer-events:none;
  will-change:transform;
}

/* Durante lo swap Barba tiene per un istante sia il container in uscita
   che quello in entrata nel DOM: il primo va sfilato dal flusso normale
   e nascosto, altrimenti le due altezze si sommano (spazio bianco) e i
   contenuti si sovrappongono visivamente. */
[data-barba="container"].is-leaving{
  position:absolute; top:0; left:0; width:100%;
  visibility:hidden;
  pointer-events:none;
}

/* 6. Pagina "Spettacoli" (listino) ------------------------------ */
.filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:34px; }
.filter-pill{
  font-family:'neue-haas-grotesk-text','Archivo'; font-weight:700; font-size:0.8rem;
  border:1.5px solid var(--line); border-radius:999px; padding:8px 16px;
  text-decoration:none; color:var(--ink-soft);
}
.filter-pill[aria-current="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.listing-block{ margin-bottom:56px; }
.listing-block h2{ font-size:1.5rem; margin-bottom:6px; }
.listing-block .desc{ font-family:'neue-haas-grotesk-text','Archivo'; color:var(--ink-soft); font-size:0.92rem; margin-bottom:24px; max-width:60ch; }

/* 7. Pagina di dettaglio spettacolo ------------------------------ */
.show-hero{ position:relative; height:min(64vh,520px); min-height:320px; background:var(--navy); overflow:hidden; }
.show-hero .art{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.show-hero .scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(17,16,23,0.15) 0%, rgba(17,16,23,0.92) 100%); }
.show-hero-inner{
  position:absolute; left:0; right:0; bottom:0; padding:0 clamp(20px,6vw,72px) 44px;
  color:#fff; max-width:1180px; margin:0 auto;
}
.show-tag{
  display:inline-block; font-family:'neue-haas-grotesk-text','Archivo'; font-weight:700; font-size:0.72rem;
  letter-spacing:0.08em; text-transform:uppercase; padding:6px 13px; border-radius:999px; margin-bottom:16px;
}
.show-hero-inner h1{ font-size:clamp(2.4rem,6vw,4.6rem); margin:0 0 10px; line-height:0.98; }
.show-hero-inner .subtitle{ font-family:'Piazzolla Italic'; font-style:italic; font-size:clamp(1.1rem,1.8vw,1.4rem); color:#E4E1EA; margin:0; }

.show-body{
  max-width:1180px; margin:0 auto; padding:clamp(44px,7vw,72px) clamp(20px,6vw,72px);
  display:grid; grid-template-columns:1.55fr 1fr; gap:clamp(32px,5vw,64px);
}
@media (max-width:900px){ .show-body{ grid-template-columns:1fr; } }
h2.kicker{
  font-family:'neue-haas-grotesk-text','Archivo'; font-weight:700; font-size:0.78rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--red); margin:0 0 14px;
}
h2.kicker.kicker-spaced{ margin-top:44px; }
.show-main p{ font-family:'neue-haas-grotesk-text','Archivo'; line-height:1.75; color:var(--ink-soft); font-size:1.02rem; max-width:65ch; margin:0 0 18px; }

blockquote.director{ margin:46px 0 38px; position:relative; }
blockquote.director::before{
  content:"\201C"; font-family:'Archivo Black'; font-size:4.6rem; line-height:1;
  color:var(--red); display:block; margin:0 0 -0.5rem -0.05em; opacity:0.9;
}
blockquote.director p{
  font-family:'Piazzolla Italic'; font-style:italic; font-size:clamp(1.15rem,1.8vw,1.4rem);
  line-height:1.55; color:var(--ink); max-width:52ch;
}
blockquote.director cite{
  font-family:'neue-haas-grotesk-text','Archivo'; font-style:normal; font-weight:700; font-size:0.86rem;
  color:var(--ink-soft); display:block; margin-top:14px;
}
blockquote.director cite::before{ content:"— "; color:var(--red); }

/* Sezione "Foto di scena": vive fuori da .show-body per poter usare
   tutta la larghezza della pagina, non solo la colonna dei contenuti. */
.show-gallery{ max-width:1180px; margin:0 auto; padding:0 clamp(20px,6vw,72px) clamp(44px,7vw,72px); }
.gallery-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.gallery-strip .g{
  width:100%; height:100%; aspect-ratio:3/2; object-fit:cover;
  border-radius:10px; cursor:zoom-in; transition:opacity 0.2s; display:block;
}
.gallery-strip a{ display:block; border-radius:10px; overflow:hidden; }
.gallery-strip a:hover .g{ opacity:0.85; }
@media (max-width:900px){ .gallery-strip{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .gallery-strip{ grid-template-columns:1fr; } }

.sidebar-poster{ display:block; border-radius:16px; overflow:hidden; margin-bottom:20px; cursor:zoom-in; }
.sidebar-poster img{ width:100%; height:auto; display:block; transition:opacity 0.2s; }
.sidebar-poster:hover img{ opacity:0.9; }

.sidebar-card{ background:var(--card-bg); border:1px solid var(--line); border-radius:16px; padding:26px 24px; margin-bottom:20px; }
.sidebar-card h3{ font-family:'neue-haas-grotesk-text','Archivo'; font-weight:700; font-size:0.78rem; letter-spacing:0.09em; text-transform:uppercase; color:var(--red); margin:0 0 16px; }
.credit-row{ display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-top:1px solid var(--line); font-family:'neue-haas-grotesk-text','Archivo'; font-size:0.88rem; }
.credit-row:first-of-type{ border-top:none; }
.credit-row .role{ color:var(--ink-soft); }
.credit-row .who{ font-weight:600; text-align:right; }
.sidebar-cta{ background:var(--red); color:#fff; border-radius:16px; padding:26px 24px; }
.sidebar-cta h3{ font-family:'Archivo Black'; font-size:1.15rem; margin:0 0 8px; text-transform:none; }

/* split-inner: variante chiara di .lab-inner (2 colonne), per sezioni
   su sfondo pagina invece che sulla curtain-band navy. */
.split-inner{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
@media (max-width:820px){ .split-inner{ grid-template-columns:1fr; } }

/* fiscal-card: riquadro con intestazione scura e corpo chiaro, usato
   per box informativi "in evidenza" dentro pagine a sfondo chiaro. */
.fiscal-card{ border-radius:18px; overflow:hidden; border:1.5px solid var(--line); margin-bottom:34px; }
.fiscal-card-head{ background:var(--navy); padding:18px 28px; }
.fiscal-card-head h3{
  margin:0; font-family:'Archivo'; font-weight:700; font-size:1.05rem;
  letter-spacing:0.02em; text-transform:uppercase; color:#fff;
}
.fiscal-card-body{ padding:24px 28px; background:var(--paper); }
.fiscal-card-body p{ max-width:none; }
.fiscal-card-body p:last-child{ margin-bottom:0; }
.fiscal-card-body a{ color:var(--red); font-weight:600; }
.sidebar-cta p{ font-family:'neue-haas-grotesk-text','Archivo'; font-size:0.88rem; line-height:1.6; color:#FCE1E8; margin:0 0 18px; }
.sidebar-cta .cta-pill{ background:#fff; color:var(--red); }

/* contact-grid: card di contatto autonome (email + descrizione), usate
   in contatti.html. Riusa .sidebar-card per lo scaffold visivo. */
.contact-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin:28px 0 34px; }
.contact-grid .sidebar-card{ margin-bottom:0; }
.contact-grid .sidebar-card p{ color:var(--ink-soft); margin:0 0 16px; }
.contact-grid .sidebar-card a{ color:var(--red); font-weight:600; }

.updown{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--navy); }
@media (max-width:700px){ .updown{ grid-template-columns:1fr; } }
.updown a{
  position:relative; padding:34px clamp(20px,4vw,56px); min-height:150px; color:#F5F2F5;
  text-decoration:none; display:flex; flex-direction:column; justify-content:center; overflow:hidden;
}
.updown a .bg{ position:absolute; inset:0; opacity:0.5; }
.updown a .cc{ position:relative; z-index:2; }
.updown .eyebrow{ color:#C9C2C9; margin-bottom:8px; }
.updown h4{ font-family:'Archivo Black'; font-size:1.4rem; margin:0; text-transform:none; }
.updown a.next{ text-align:right; align-items:flex-end; }

/* 9. Pagina "Laboratori" e iscrizione ---------------------------- */
.lab-hero{
  display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(28px,5vw,64px); align-items:center;
  padding:clamp(56px,8vw,96px) clamp(20px,6vw,72px); max-width:90%; margin:0 auto;
}
@media (max-width:820px){ .lab-hero{ grid-template-columns:1fr; } }
.lab-hero-img{ width:100%; height:auto; border-radius:16px; display:block; }
.lab-hero-copy .eyebrow{ color:var(--red); margin-bottom:12px; display:block; }
.lab-hero-copy h1{ margin:0 0 6px; font-size:clamp(2.2rem,4.4vw,3.6rem); }
.lab-hero-copy .subtitle{ font-size:clamp(1.05rem,1.6vw,1.3rem); color:var(--ink-soft); margin:0 0 22px; }
.lab-hero-copy p{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; line-height:1.75; color:var(--ink-soft);
  font-size:0.98rem; margin:0 0 16px;
}

.lab-list{ display:grid; grid-template-columns:1fr; gap:16px; }
.lab-card{
  background:var(--card-bg); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; display:grid; grid-template-columns:300px 1fr;
}
@media (max-width:680px){ .lab-card{ grid-template-columns:1fr; } }
/* Da desktop (due colonne fisse, riga alta quanto il testo più lungo),
   l'immagine deve riempire tutta l'altezza della riga: height:100%.
   Sotto 680px la card diventa una colonna singola impilata (l'immagine
   non condivide più riga con nient'altro): lì height:100% + aspect-ratio
   creano una dipendenza circolare sull'altezza del grid item che
   Chrome/Firefox risolvono in modo permissivo ma Safari no — l'immagine
   collassava/si sovrapponeva al testo sotto. height:auto in quel solo
   breakpoint toglie l'ambiguità, lasciando aspect-ratio a determinare
   l'altezza da sé. Anche gli attributi HTML width="800" height="1000"
   sull'img contribuiscono a un aspect-ratio intrinseco di bassa
   specificità: height:auto esplicito lo neutralizza comunque. */
.lab-card-img{ width:100%; height:100%; aspect-ratio:4/5; object-fit:cover; display:block; }
@media (max-width:680px){ .lab-card-img{ height:auto; aspect-ratio:16/9; } }
.lab-card-body{ padding:22px 24px 26px; }
.lab-card.no-img{ grid-template-columns:1fr; }
.lab-card.no-img .lab-card-body{ padding:26px 24px; }
.lab-card-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.lab-card-head h3{
  font-family:'Archivo Black',sans-serif; font-size:1.15rem; text-transform:none; letter-spacing:0;
}
.lab-age{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-weight:700; font-size:0.68rem;
  letter-spacing:0.07em; text-transform:uppercase; color:#fff; background:var(--cat-laboratori);
  padding:5px 11px; border-radius:999px; white-space:nowrap;
}
.lab-desc{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; line-height:1.6; color:var(--ink-soft);
  font-size:0.92rem; margin:0 0 18px;
}
.lab-meta{ display:grid; gap:0; border-top:1px solid var(--line); }
.lab-meta div{
  display:flex; justify-content:space-between; gap:14px; padding:9px 0;
  border-bottom:1px solid var(--line); font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-size:0.84rem;
}
.lab-meta div:last-child{ border-bottom:none; }
.lab-meta .k{ color:var(--ink-soft); }
.lab-meta .v{ font-weight:600; text-align:right; }

.lab-link{ font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-size:0.86rem; margin-top:16px; }
.lab-link a{ color:var(--red); font-weight:600; }

.lab-cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.cta-outline-light{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-weight:700; font-size:0.82rem;
  border:1.5px solid var(--line); color:var(--ink);
  padding:9.5px 20.5px; border-radius:999px; text-decoration:none; display:inline-block;
  transition:border-color 0.2s ease, color 0.2s ease;
}
.cta-outline-light:hover{ border-color:var(--red); color:var(--red); }
.lab-embed{ margin-top:16px; border-radius:10px; overflow:hidden; }
.lab-embed iframe{ display:block; width:100%; }

.lab-modules{ display:grid; gap:12px; margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.lab-module{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-size:0.84rem; line-height:1.6; color:var(--ink-soft);
}
.lab-module b{ color:var(--ink); }

.lab-modules-group{ border-top:1px solid var(--line); padding-top:14px; margin-top:14px; }
.lab-modules-group:first-child{ border-top:none; padding-top:0; margin-top:0; }
.lab-modules-group summary{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-weight:700; color:var(--ink);
  font-size:0.9rem; cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px;
}
.lab-modules-group summary::-webkit-details-marker{ display:none; }
.lab-modules-group summary::before{
  content:"+"; color:var(--red); font-weight:700; width:16px; text-align:center; flex:none;
}
.lab-modules-group[open] summary::before{ content:"–"; }
.lab-modules-group .lab-modules{ margin-top:12px; padding-top:0; border-top:none; }

.lab-steps{ list-style:none; margin:0 0 8px; padding:0; display:grid; gap:16px; }
.lab-steps li{ display:flex; gap:14px; align-items:flex-start; font-family:'neue-haas-grotesk-text','Archivo',sans-serif; line-height:1.6; color:#D3CFDC; }
.lab-step-n{
  flex:none; width:28px; height:28px; border-radius:999px; background:var(--red); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.86rem;
}
.lab-payment{ background:rgba(245,242,245,0.06); border:1px solid rgba(255,255,255,0.14); border-radius:16px; padding:26px 24px; }
.lab-payment h3{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-weight:700; font-size:0.78rem; letter-spacing:0.09em;
  text-transform:uppercase; color:#FFD9E2; margin:0 0 16px;
}
.lab-payment .credit-row{ border-top-color:rgba(255,255,255,0.14); }
.lab-payment .role{ color:#B3AFC0; }
.lab-payment .who{ color:#F5F2F5; }

.lab-form{ display:grid; gap:20px; margin-top:28px; }
.form-row{ display:grid; gap:8px; }
.form-row-group{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-row-group-3{ grid-template-columns:1fr 1.4fr 1fr; }
.form-row-group[hidden]{ display:none; }
@media (max-width:620px){ .form-row-group, .form-row-group-3{ grid-template-columns:1fr; } }
.form-row label{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-weight:700; font-size:0.82rem; color:var(--ink);
}
.form-row label .optional{ font-weight:400; color:var(--ink-soft); }
.req{ color:var(--red); }
.form-row input, .form-row select, .form-row textarea{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-size:0.95rem; color:var(--ink);
  background:var(--card-bg); border:1.5px solid var(--line); border-radius:10px; padding:12px 14px;
  width:100%;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  outline:2px solid var(--red); outline-offset:1px; border-color:var(--red);
}
.form-row textarea{ resize:vertical; }
.form-section-label{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-weight:700; font-size:0.78rem;
  letter-spacing:0.05em; color:var(--ink-soft); margin:8px 0 -6px;
}
.form-check{ display:flex; gap:12px; align-items:flex-start; font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-size:0.86rem; color:var(--ink-soft); line-height:1.5; }
.form-check input{ flex:none; width:18px; height:18px; margin-top:2px; accent-color:var(--red); }
.lab-form button[type="submit"]{ border:none; justify-self:start; }
.lab-form button[type="submit"]:disabled{ opacity:0.6; cursor:not-allowed; }

/* Campo honeypot anti-spam (vedi api/iscrizione.php): spostato fuori
   schermo invece di display:none/visibility:hidden, che i bot più
   attenti controllano prima di compilare un form. Un utente reale non
   lo vede né lo raggiunge da tastiera (tabindex="-1" nell'HTML). */
.form-hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

.lab-choice-group{ border:none; margin:0; padding:0; display:grid; gap:10px; }
.lab-choice-group-inline{ grid-template-columns:1fr 1fr; max-width:320px; }
@media (max-width:480px){ .lab-choice-group-inline{ grid-template-columns:1fr; } }
.lab-choice{
  display:flex; align-items:center; gap:12px; cursor:pointer;
  border:1.5px solid var(--line); border-radius:10px; padding:12px 14px;
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-size:0.92rem; color:var(--ink);
  transition:border-color 0.15s ease, background 0.15s ease;
}
.lab-choice:has(input:checked){ border-color:var(--red); background:rgba(217,20,65,0.05); }
.lab-choice input{ flex:none; width:18px; height:18px; accent-color:var(--red); }
.lab-choice em{ font-style:normal; color:var(--ink-soft); }
.lab-choice-price{ margin-left:auto; font-weight:700; color:var(--red); flex:none; }

.lab-price-summary{ background:var(--card-bg); border:1.5px solid var(--line); border-radius:12px; padding:6px 18px; }
.lab-price-summary .credit-row{ display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-top:1px solid var(--line); }
.lab-price-summary .credit-row[hidden]{ display:none; }
.lab-price-summary .credit-row:first-child{ border-top:none; }
.lab-price-summary .role{ font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-size:0.86rem; color:var(--ink-soft); }
.lab-price-summary .role em{ font-style:normal; }
.lab-price-summary .who{ font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-weight:700; color:var(--ink); }
.lab-price-summary .lab-price-total .role, .lab-price-summary .lab-price-total .who{ color:var(--red); font-weight:700; }

.form-hint{
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-size:0.8rem; line-height:1.6;
  color:var(--ink-soft); margin:-8px 0 0;
}

.form-feedback{
  border-radius:12px; padding:16px 18px; margin-bottom:8px;
  font-family:'neue-haas-grotesk-text','Archivo',sans-serif; font-size:0.9rem; line-height:1.5;
}
.form-feedback.success{ background:rgba(41,107,175,0.12); color:#1c4c7a; border:1px solid rgba(41,107,175,0.3); }
.form-feedback.error{ background:rgba(217,20,65,0.08); color:var(--red); border:1px solid rgba(217,20,65,0.3); }
@media (prefers-color-scheme: dark){
  .form-feedback.success{ color:#8fb8e0; }
}


/* 11. Utility ---------------------------------------------------- */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}


@media(max-width:850px) {
  .sitenav { display: none; }
  .sitehead > .cta-pill { display: none; }
  .nav-toggle { display: block; }
  .mobile-nav { display: block; }
  body.nav-open { overflow: hidden; }
}