/* ============================================================
   IKAROS — CSS condiviso (palette F)  ·  v2 per WordPress/Elementor
   Incollare TUTTO questo UNA volta in: Elementor → Impostazioni sito → CSS personalizzato.
   Header e footer usano le classi .ikhdr / .ikftr (non i tag) per non
   entrare in conflitto con i contenitori di Elementor.
   ============================================================ */
/* i font sono self-hosted: vedi assets/fonts/fonts.css, incluso dal build */

:root{
  --paper:#EFEADE; --sand:#ECE6D9; --tint:#E7E1D3; --surface:#F5F1E6; --surface-2:#FAF6EC;
  /* --soft e --ottone-deep sono stati scuriti il 28/07/2026 per raggiungere il contrasto 4.5:1
     (WCAG AA, testo normale): erano a 3.03:1 e 3.51:1 sul fondo piu' critico (--tint).
     Cambia SOLO la luminosita' — tinta e saturazione sono identiche a prima, cosi' il grigio
     resta verdastro e l'ottone resta ottone. Sono i colori della riga meta delle card, delle
     etichette dei filtri, dei link e del testo del consenso privacy. */
  --ink:#16303A; --body:#414B4C; --soft:#636560;
  --blu:#173C44; --blu-deep:#112C33; --blu-soft:rgba(23,60,68,.07);
  --ivory:#F0E7D3; --ivory-mut:rgba(240,231,211,.72);
  --ottone:#B89149; --ottone-deep:#7E5F1A; --ottone-soft:rgba(184,145,73,.16);
  --line:rgba(22,48,58,.14); --line-soft:rgba(22,48,58,.07);
  --r:11px; --r-sm:9px;
}
/* ——— base GLOBALE (vale per header, footer e tutte le pagine) ——— */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overscroll-behavior:none;background:linear-gradient(to bottom,var(--blu) 0%,var(--blu) 50%,var(--blu-deep) 50%,var(--blu-deep) 100%)}
body{background:var(--paper);color:var(--body);font-family:'Jost',sans-serif;font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
.container{max-width:1180px;margin:0 auto;padding:0 28px}
section[id]{scroll-margin-top:84px}
h1,h2,h3{font-family:'Cormorant Garamond',serif;font-weight:600;color:var(--ink);line-height:1.07}
a{color:inherit}
::selection{background:rgba(226,192,121,.5);color:var(--blu-deep)}

/* ——— occhielli ——— */
.kicker{display:inline-flex;align-items:center;gap:13px;margin-bottom:8px}
.kicker__n{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.08rem;line-height:1;color:var(--ottone-deep)}
.kicker__r{width:40px;height:1px;background:var(--ottone)}
.kicker__t{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--soft)}
.kicker--light .kicker__n{color:#E2C079}
.kicker--light .kicker__t{color:var(--ivory-mut)}
.kicker--light .kicker__r{background:rgba(226,192,121,.55)}

/* ——— sezione base ——— */
/* RITMO VERTICALE — clamp e non media query, ed e' una scelta contro la deriva del file.
   88px di respiro sono giusti su 1.400px di larghezza e sono il 23% dello schermo su 390: le
   spaziature verticali non venivano ridotte da nessuna soglia, e solo .pg-hero era stato
   adattato al telefono (170 -> 140 -> 116). Chi aveva sistemato l'eroe si era fermato li'.
   Misurato a 390px: 746px di padding su /proprietari/ e /investitori/ (18% dell'altezza,
   quasi una schermata intera di vuoto), 1.142px su /lo-studio/ (19%, una schermata e mezza).
   Il clamp scala con la larghezza e NON aggiunge soglie — questo file ne ha gia' nove su sei
   valori diversi, ciascuna decisa quando il suo componente e' stato scritto, ed e' la ragione
   per cui il sito sembra un desktop riadattato. Il massimo del clamp e' il valore di prima,
   quindi sopra ~980px il disegno e' identico al pixel. */
.sec{padding:clamp(48px,9vw,88px) 0}
.sec__h{max-width:680px;margin-bottom:clamp(24px,4.5vw,44px)}
.sec__h h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin:12px 0 10px}
.sec__h h2 em{font-style:italic;color:var(--ottone-deep)}
.sec__h p{color:var(--soft);font-size:1rem}

/* ——— BOTTONI ——— */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;padding:15px 26px;border-radius:7px;transition:transform .2s,background .22s,color .22s,border-color .22s,box-shadow .22s;cursor:pointer;border:1px solid transparent}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
/* pieno oro */
.btn--gold,.btn--gold:link,.btn--gold:visited{background:var(--ottone);color:var(--blu-deep);border-color:var(--ottone)}
.btn--gold:hover,.btn--gold:focus-visible{background:#CDA451;color:var(--blu-deep);box-shadow:0 10px 24px rgba(184,145,73,.34)}
/* pieno blu */
.btn--blu,.btn--blu:link,.btn--blu:visited{background:var(--blu);color:var(--ivory);border-color:var(--blu)}
.btn--blu:hover,.btn--blu:focus-visible{background:var(--blu-deep);color:#FFF;border-color:var(--ottone);box-shadow:0 12px 26px rgba(17,44,51,.32)}
/* contorno chiaro su scuro */
.btn--ghost,.btn--ghost:link,.btn--ghost:visited{border-color:rgba(240,231,211,.5);color:var(--ivory)}
.btn--ghost:hover,.btn--ghost:focus-visible{border-color:var(--ottone);color:#E2C079;background:rgba(240,231,211,.06)}
/* contorno blu su chiaro */
.btn--line,.btn--line:link,.btn--line:visited{background:none;border-color:var(--blu);color:var(--blu)}
.btn--line:hover,.btn--line:focus-visible{background:var(--blu);color:var(--ivory);border-color:var(--blu);box-shadow:0 10px 24px rgba(17,44,51,.22)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ottone);outline-offset:3px;border-radius:4px}
/* Da tastiera bisognava attraversare tutte le voci di menu a ogni pagina per arrivare
   al contenuto. Il link resta invisibile finche' non riceve il fuoco. */
.skiplink{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--blu);color:var(--ivory);
  padding:12px 20px;border-radius:0 0 8px 0;font-size:.8rem;text-decoration:none}
.skiplink:focus{left:0}

/* ——— LOCKUP LOGO — base valida OVUNQUE (header, footer, qualsiasi .brandlk) ——— */
/* min-height qui, sulla base, e non solo su header e footer: il lockup compare anche in
   card.html, che ha una veste propria e non passa da nessuna delle due. Con la regola qui
   l'area toccabile e' garantita ovunque il marchio venga usato, anche in un contesto futuro. */
.brandlk{display:inline-flex!important;align-items:center!important;text-decoration:none;flex-direction:row!important;min-height:44px}
.brandlk .em{height:42px!important;width:auto!important;display:block;flex:none}
.brandlk .tx{display:flex;flex-direction:column;line-height:1;margin-left:8px}
.brandlk .ik{font-family:'Cinzel',serif;font-weight:600;letter-spacing:.5px;white-space:nowrap}
.brandlk .re{font-family:'Cinzel',serif;font-weight:500;letter-spacing:2px;margin-top:3px;white-space:nowrap}

/* ——— HEADER (.ikhdr) — fisso, trasparente sull'hero, opaco allo scroll ——— */
.ikhdr{position:fixed;top:0;left:0;right:0;z-index:9000;background:transparent;border-bottom:1px solid transparent;transition:background .3s,border-color .3s,backdrop-filter .3s}
.ikhdr.scrolled{background:rgba(239,234,222,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.ikhdr .nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.ikhdr .menu{display:flex;gap:30px;list-style:none;margin:0;padding:0}
.ikhdr .menu a{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(240,231,211,.85);text-decoration:none;transition:color .25s;position:relative}
.ikhdr .menu a::after{content:"";position:absolute;left:0;bottom:-6px;height:1.5px;width:100%;background:#E2C079;transform:scaleX(0);transform-origin:left center;transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.ikhdr .menu a:hover,.ikhdr .menu a.active{color:#E2C079}
.ikhdr .menu a:hover::after,.ikhdr .menu a.active::after{transform:scaleX(1)}
.ikhdr.scrolled .menu a{color:var(--body)}
.ikhdr.scrolled .menu a:hover,.ikhdr.scrolled .menu a.active{color:var(--ottone-deep)}
.ikhdr.scrolled .menu a::after{background:var(--ottone-deep)}
.ikhdr .navcta{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ivory);border:1px solid var(--ottone);padding:11px 18px;border-radius:7px;text-decoration:none;transition:all .25s}
.ikhdr .navcta:hover{background:var(--ottone);color:var(--blu-deep)}
.ikhdr.scrolled .navcta{color:var(--blu)}.ikhdr.scrolled .navcta:hover{color:var(--blu-deep)}
/* min-height 44: il link e' alto quanto l'emblema, 42px, e mancava di due pixel su 69 pagine.
   Il contenuto resta centrato e l'emblema non cambia dimensione: cresce l'area toccabile, non
   il disegno. */
.ikhdr .brandlk{display:flex;align-items:center;text-decoration:none;perspective:700px;min-height:44px}
.ikhdr .brandlk .em{display:block;width:auto;height:42px;transform-style:preserve-3d;transition:filter .4s ease;will-change:transform,filter}
.ikhdr .brandlk:hover .em{animation:ikSpin 2.5s linear infinite;filter:drop-shadow(0 0 11px rgba(226,192,121,.6))}
@keyframes ikSpin{to{transform:rotateY(360deg)}}
.ikhdr .brandlk .tx{display:flex;flex-direction:column;line-height:1;margin-left:8px}
.ikhdr .brandlk .ik{font-family:'Cinzel',serif;font-weight:600;font-size:19px;letter-spacing:.5px;color:var(--ivory);transition:color .3s;white-space:nowrap}
.ikhdr .brandlk .re{font-family:'Cinzel',serif;font-weight:500;font-size:7px;letter-spacing:2px;margin-top:3px;color:var(--ivory);transition:color .3s;white-space:nowrap}
.ikhdr.scrolled .brandlk .ik,.ikhdr.scrolled .brandlk .re,.ikhdr.menu-open .brandlk .ik,.ikhdr.menu-open .brandlk .re{color:var(--ink)}
.ikhdr .menu__cta{display:none} /* su desktop la CTA e' quella accanto al menu */
/* min 44x44: misurato 48x40, quattro pixel sotto la soglia, su 68 pagine. Il bottone non ha
   sfondo, quindi l'area cresce e l'aspetto no. WCAG 2.2 §2.5.8 chiede 24x24; 44 e' la soglia
   che soddisfa anche Apple HIG e Material 3, ed e' quella su cui misura tools/audit_mobile.mjs. */
.ikhdr .navtoggle{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:none;border:0;cursor:pointer;padding:6px;min-width:44px;min-height:44px}
.ikhdr .navtoggle span{width:24px;height:2px;background:var(--ivory);transition:background .3s,transform .3s,opacity .3s}
.ikhdr.scrolled .navtoggle span{background:var(--ink)}
.ikhdr.menu-open{background:var(--paper);border-bottom:1px solid var(--line)}
.ikhdr.menu-open .navtoggle span{background:var(--ink)}
.ikhdr.menu-open .navtoggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ikhdr.menu-open .navtoggle span:nth-child(2){opacity:0}
.ikhdr.menu-open .navtoggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ——— FOOTER (.ikftr) ——— */
/* padding-top col clamp: 60px fissi sono giusti su un monitor e sommati alla coda della
   pagina davano 150px di bianco prima del piede su un telefono. Il massimo e' il valore
   di prima e si raggiunge intorno agli 800px. */
.ikftr{background:var(--blu-deep);color:var(--ivory-mut);padding:clamp(38px,7.5vw,60px) 0 34px;border-top:3px solid var(--ottone)}
.ikftr .fgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:34px;padding-bottom:30px;border-bottom:1px solid rgba(240,231,211,.14)}
.ikftr .fcol h4{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:#E2C079;margin:0 0 14px;font-weight:400}
/* 44px di area toccabile col padding, NON con un riquadro invisibile piu' grande: due aree
   da 44 su link distanti 8px si sovrapporrebbero, e bersagli sovrapposti si sbagliano piu'
   di bersagli piccoli. WCAG 2.2 §2.5.8 guarda la spaziatura quanto la misura. Il margine
   va a zero perche' 22px di testo piu' 11+11 di padding fanno gia' il passo di 44. */
.ikftr .fcol a{display:block;width:fit-content;font-size:.85rem;color:var(--ivory-mut);text-decoration:none;padding:11px 0;margin-bottom:0;position:relative;transition:color .25s}
/* bottom:9px e non -2px: il riquadro ora e' alto 44 e il fondo sta undici pixel sotto il
   testo. Senza questa riga la sottolineatura si staccherebbe dalla parola. */
.ikftr .fcol a::after{content:"";position:absolute;left:0;bottom:9px;height:1.5px;width:100%;background:#E2C079;transform:scaleX(0);transform-origin:left center;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.ikftr .fcol a:hover{color:var(--ivory)}
.ikftr .fcol a:hover::after{transform:scaleX(1)}
/* Stesso min-height dell'header, e per la stessa ragione. Nota: la riga qui sotto dichiara
   l'emblema a 44px, ma non vale — la regola base .brandlk .em ha height:42px!important e la
   batte. Misurato: il link del footer e' alto 42. Non tolgo l'!important, che serve contro i
   contenitori di Elementor; il min-height sul link ottiene l'area toccabile senza toccarlo. */
.ikftr .brandlk{display:flex;align-items:center;text-decoration:none;min-height:44px}
.ikftr .brandlk .em{height:44px;width:auto}
.ikftr .brandlk .tx{display:flex;flex-direction:column;line-height:1;margin-left:8px}
.ikftr .brandlk .ik{font-family:'Cinzel',serif;font-weight:600;font-size:20px;letter-spacing:.5px;color:var(--ivory);white-space:nowrap}
.ikftr .brandlk .re{font-family:'Cinzel',serif;font-weight:500;font-size:7.5px;letter-spacing:2px;margin-top:3px;color:var(--ivory);white-space:nowrap}
.ikftr .fbtm{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:20px;font-size:.72rem;color:rgba(240,231,211,.5)}
.ikftr .fbtm span,.ikftr .fcol>p{text-wrap:balance} /* righe bilanciate: niente parole orfane sull'ultima riga */

.ikftr .fcol--r{justify-self:end;text-align:right}
.ikftr .fcol--r a{margin-left:auto}
.ikftr .fcol--r a::after{transform-origin:right center}
.ikftr .fcol a.brandlk::after{display:none}
.ikftr .fcol a.brandlk{margin-bottom:0}

/* ——— nascondi il titolo pagina del tema (l'hero porta già il titolo) ——— */
.page-header,.elementor-page-title,.entry-title.page-title{display:none!important}

/* La larghezza piena delle fasce e l'assenza di strisce si impostano
   nell'EDITOR Elementor (Container → Larghezza contenuto: A tutta larghezza, padding 0;
   Pagina → Layout: Elementor a tutta larghezza). Nessun hack CSS qui. */

/* ——— form: stato errore inline ——— */
.fld input.err,.fld input.err:focus,.kform input.err{border-color:#A23B2E!important}
.ferr{display:block;font-size:.72rem;color:#A23B2E;margin-top:5px}

/* tap mobile: niente lampo di selezione di sistema */
a,button{-webkit-tap-highlight-color:transparent}

/* ——— reveal allo scroll ——— */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

/* Chi ha chiesto al sistema di ridurre le animazioni non deve subirle comunque.
   Restavano scoperti lo scorrimento morbido — su una home di 23 schermate e' il caso
   peggiore (WCAG 2.3.3) — e la rotazione infinita del logo al passaggio del mouse. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .brandlk:hover .em{animation:none}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* =========================================================================
   MOBILE — correzioni verificate su iPhone reale (iOS Safari), 28/07/2026
   ========================================================================= */

/* 1. Zoom automatico al focus.
   Sotto i 16px iOS Safari ingrandisce la pagina appena si tocca un campo, e non
   la riporta indietro. Nessun campo del sito arrivava a 16px: la ricerca stava a
   14.7, i filtri prezzo e l'ordinamento a 13.4, il form scheda a 14.4.
   Solo su touch: su desktop la scala tipografica resta quella scelta. */
/* !important e' necessario, non pigrizia: le dimensioni dei campi sono dichiarate nei blocchi
   <style> di pagina (.search, .kform input, i filtri prezzo), che vincono per specificita' e
   ordine su qualunque regola di questo foglio. Qui l'override e' voluto e circoscritto al touch. */
@media(hover:none){
  input,select,textarea{font-size:16px !important}
}

/* 2. Hover appiccicato.
   Senza questa guardia gli stili :hover si applicano anche al tocco: su iOS il
   primo tap "accende" l'hover e serve un secondo tap per attivare il link. */
@media(hover:none){
  a:hover,button:hover,.btn:hover,.door:hover,.kard:hover,.chip:hover{
    transform:none;box-shadow:none}
}

/* 3. Notch, Dynamic Island e barra home: il sito non aveva un solo env(safe-area). */
@supports(padding:max(0px)){
  body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  .ikftr{padding-bottom:max(40px,env(safe-area-inset-bottom))}
}

/* 4. Bersagli troppo piccoli per un pollice (WCAG 2.5.8). */
@media(hover:none){
  .ikhdr .navtoggle{padding:12px;margin:-12px}          /* era 36x28 */
  .kard__hintopen{display:inline-block;padding:12px 0;margin:-6px 0}  /* era alto 16px */
  .star,.kmodal__x,.kmodal__ar{min-width:44px;min-height:44px;
    display:inline-flex;align-items:center;justify-content:center}
  .pgbtn{min-width:44px;min-height:44px}
}

/* ——— mobile: menu a tendina ——— */
@media(max-width:920px){
  .ikhdr .menu,.ikhdr .navcta{display:none}
  .ikhdr .navtoggle{display:flex}
  .ikhdr .menu{position:fixed;top:74px;left:0;right:0;background:var(--paper);flex-direction:column;gap:0;padding:6px 28px 16px;border-bottom:1px solid var(--line);box-shadow:0 16px 30px rgba(22,48,58,.12)}
  .ikhdr.menu-open .menu{display:flex}
  .ikhdr .menu a{padding:14px 2px;border-bottom:0;color:var(--body);-webkit-tap-highlight-color:transparent}
  .ikhdr .menu a::after{display:none} /* la sottolineatura animata è pensata per il menu orizzontale: qui finiva sulla voce successiva */
  .ikhdr .menu a:active{color:var(--ottone-deep);background:var(--ottone-soft)}
  .ikhdr .menu a.active{color:var(--ottone-deep)}
  /* CTA dentro il menu mobile: e' l'azione principale del sito, non puo' sparire sotto i 920px */
  .ikhdr .menu__cta{display:block;margin-top:10px;padding-top:16px;border-top:1px solid var(--line)}
  .ikhdr .menu__cta a{display:block;text-align:center;padding:16px 18px;min-height:48px;
    border:1px solid var(--ottone);border-radius:7px;color:var(--blu);background:var(--ottone-soft);
    font-size:.72rem;letter-spacing:.13em;text-transform:uppercase}
  .ikhdr .menu__cta a:active{background:var(--ottone);color:var(--blu-deep)}
  /* footer tablet: emblema a tutta riga, le due colonne link affiancate sotto */
  .ikftr .fgrid{grid-template-columns:1fr 1fr}
  .ikftr .fcol:first-child{grid-column:1/-1}
}
@media(max-width:560px){
  /* footer telefono: Percorsi a sinistra, Lo Studio a bandiera destra */
  .ikftr .fgrid{grid-template-columns:1fr 1fr;gap:26px}
  .ikftr .fcol--r{justify-self:start;text-align:left}
  .ikftr .fcol--r a{margin-left:0}
  .ikftr .fcol--r a::after{transform-origin:left center}
  .ikftr .fcol--r:last-of-type{justify-self:end;text-align:right}
  .ikftr .fcol--r:last-of-type a{margin-left:auto}
  .ikftr .fcol--r:last-of-type a::after{transform-origin:right center}
  .ikftr .fbtm{flex-direction:column;gap:7px;line-height:1.5}
}


/* ============================================================
   v3 — AGGIUNTE (variante header su hero chiaro + componenti pagina)
   ============================================================ */

/* ——— header su pagine con hero CHIARO: testo scuro fin da subito ——— */
.ikhdr--light .menu a{color:var(--body)}
.ikhdr--light .menu a:hover,.ikhdr--light .menu a.active{color:var(--ottone-deep)}
.ikhdr--light .menu a::after{background:var(--ottone-deep)}
.ikhdr--light .navcta{color:var(--blu);border-color:var(--ottone)}
.ikhdr--light .navcta:hover{background:var(--ottone);color:var(--blu-deep)}
.ikhdr--light .brandlk .ik,.ikhdr--light .brandlk .re{color:var(--ink)}
.ikhdr--light .navtoggle span{background:var(--ink)}

/* ——— hero di pagina (interna) ——— */
.pg-hero{padding:170px 0 78px;background:radial-gradient(120% 100% at 50% 0%,var(--surface-2),var(--sand));border-bottom:1px solid var(--line);box-shadow:inset 0 -30px 44px -34px rgba(22,48,58,.16)}
.pg-hero h1{font-size:clamp(2.2rem,5vw,3.4rem);max-width:18ch;margin:10px 0 0}
.pg-hero h1 em{font-style:italic;color:var(--ottone-deep)}
.pg-hero .lead{color:var(--body);font-size:1.06rem;max-width:56ch;margin-top:18px;line-height:1.6}
.pg-hero .chips{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;min-height:44px;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blu);text-decoration:none;border:1px solid var(--line);border-radius:99px;padding:10px 18px;transition:all .25s}
.chip:hover{border-color:var(--ottone);color:var(--ottone-deep);transform:translateY(-2px)}

/* ——— blocco servizio ——— */
.svc{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.svc.rev{grid-template-columns:.95fr 1.05fr}
.svc.rev .svc__tx{order:2}
.svc__tx h2{font-size:clamp(1.8rem,3.2vw,2.5rem);margin:12px 0 14px}
.svc__tx h2 em{font-style:italic;color:var(--ottone-deep)}
.svc__tx p{color:var(--body);max-width:52ch}
.svc__tx .btn{margin-top:26px}
.pt{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:6px}
.pt li{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);padding:16px 18px;transition:transform .25s,border-color .25s,box-shadow .25s}
.pt li:hover{transform:translateY(-3px);border-color:var(--ottone);box-shadow:0 14px 32px rgba(22,48,58,.10)}
.pt b{display:block;font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.12rem;color:var(--ink);margin-bottom:3px}
.pt span{font-size:.9rem;color:var(--body);line-height:1.5}

/* ——— banda scura (petrolio) ——— */
.band{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--blu) 0%,var(--blu-deep) 100%);color:var(--ivory);padding:clamp(36px,6vw,58px) 0;border-top:1px solid rgba(226,192,121,.25);border-bottom:1px solid rgba(226,192,121,.25)}
.band::after{content:"";position:absolute;right:-50px;top:50%;transform:translateY(-50%);width:320px;height:320px;background:url('/assets/ikaros-emblem.png?v=d95f8a03') center/contain no-repeat;opacity:.07;pointer-events:none}
.band .container{position:relative;z-index:1}
.band--light::after{content:none}
.band h2{color:var(--ivory);font-size:clamp(1.7rem,3vw,2.4rem)}
.band h2 em{font-style:italic;color:#E2C079}
.band p{color:var(--ivory-mut);max-width:58ch;margin-top:12px}
.band .btn{margin-top:26px}
.band--center{text-align:center}
.band--center p{margin-left:auto;margin-right:auto}

/* ——— illustrazioni monolinea (tratto che si disegna) ——— */
.pg-hero{position:relative;overflow:hidden}
.pg-hero>.container{position:relative;z-index:1}
.pgart{position:absolute;right:0;bottom:0;width:min(560px,46vw);height:78%;z-index:0;pointer-events:none}
.pgart svg{width:100%;height:100%}
.lineart path,.lineart circle{fill:none;stroke:var(--ottone-deep);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:ikdraw2 2.4s cubic-bezier(.4,0,.2,1) forwards}
@keyframes ikdraw2{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.lineart path,.lineart circle{animation:none;stroke-dashoffset:0}}
@media(max-width:760px){.pgart{width:min(420px,86vw);height:64%;opacity:.22}}

/* ——— rubrica esplicativa ——— */
.rub{margin-top:24px;border-left:2px solid var(--ottone);background:var(--surface);border-radius:0 10px 10px 0;padding:14px 18px;max-width:52ch}
.rub b{display:block;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ottone-deep);margin-bottom:6px;font-weight:500}
.rub p{font-size:.85rem;color:var(--body);line-height:1.55}

/* ——— banda chiara (CTA finale prima del footer scuro) ——— */
.band--light{background:linear-gradient(to bottom,var(--tint),var(--sand));color:var(--body);border-top:1px solid var(--line);border-bottom:0}
.band--light h2{color:var(--ink)}
.band--light h2 em{color:var(--ottone-deep)}
.band--light p{color:var(--body)}

/* ——— due percorsi (card affiancate) ——— */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
.path{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);padding:26px 26px 24px;transition:transform .25s,border-color .25s,box-shadow .25s}
.path:hover{transform:translateY(-3px);border-color:var(--ottone);box-shadow:0 14px 32px rgba(22,48,58,.10)}
.path .pk{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ottone-deep)}
.path h3{font-size:1.4rem;margin:7px 0 8px}
.path p{font-size:.92rem;color:var(--body);line-height:1.55}

.svc--half{grid-template-columns:1fr 1fr}

@media(max-width:880px){
  .svc,.svc.rev,.svc--half{grid-template-columns:1fr}
  .pt{grid-template-columns:1fr}
  .svc.rev .svc__tx{order:0}
  .paths{grid-template-columns:1fr}
  .pg-hero{padding:140px 0 60px}
}

/* ——— privacy in overlay: si apre sopra la pagina corrente, /privacy/ resta il fallback ——— */
.prvmodal{position:fixed;inset:0;z-index:9600;display:none;align-items:center;justify-content:center;background:rgba(17,44,51,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:26px}
.prvmodal.show{display:flex}
/* svh e non vh sui modali: su Safari e Chrome mobile la barra degli indirizzi si
   ritrae mentre si scorre, e 100vh resta ancorato all'altezza SENZA barra — il modale
   si ridimensiona sotto le dita, ed e' anche un contributo diretto al CLS. svh e'
   l'altezza minima garantita, quella con la barra visibile: il pannello sta fermo.
   Non si misura in headless, dove non c'e' barra che si ritragga: si chiude a mano su
   un telefono vero. */
.prvmodal__p{display:flex;flex-direction:column;background:var(--paper);border-top:3px solid var(--ottone);border-radius:12px;max-width:880px;width:100%;max-height:88svh;box-shadow:0 30px 80px rgba(17,44,51,.4);overflow:hidden}
.prvmodal__h{flex:none;display:flex;align-items:center;justify-content:space-between;padding:18px 26px;border-bottom:1px solid var(--line-soft)}
.prvmodal__h span{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ottone-deep)}
.prvmodal__h button{background:none;border:0;font-size:1.45rem;color:var(--soft);cursor:pointer;line-height:1;padding:2px 8px}
.prvmodal__h button:hover{color:var(--ottone-deep)}
.prvmodal__b{overflow:auto;padding:10px 40px 40px}
.prvmodal__b .prv{max-width:none;margin:0;padding:14px 0 0}
.prvmodal__b .prv h1{font-size:clamp(1.5rem,3vw,2rem);margin:12px 0 8px}
.prvmodal__b .prv h1 em{font-style:italic;color:var(--ottone-deep)}
.prvmodal__b .prv .lead{color:var(--soft);margin-bottom:28px}
.prvmodal__b .prv h2{font-size:1.2rem;margin:30px 0 8px}
.prvmodal__b .prv p,.prvmodal__b .prv li{font-size:.92rem;color:var(--body);line-height:1.65}
.prvmodal__b .prv ul{padding-left:20px;margin:8px 0}
.prvmodal__b .prv .upd{font-size:.76rem;color:var(--soft);margin-top:34px;font-style:italic}
.cmodal{position:fixed;inset:0;z-index:9600;display:none;align-items:center;justify-content:center;background:rgba(17,44,51,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:26px}
.cmodal.show{display:flex}
.cmodal__p{position:relative;background:var(--paper);border-top:3px solid var(--ottone);border-radius:12px;max-width:460px;width:100%;max-height:90svh;overflow:auto;padding:30px 30px 26px;box-shadow:0 30px 80px rgba(17,44,51,.4)}
.cmodal__x{position:absolute;top:12px;right:14px;background:none;border:0;font-size:1.5rem;line-height:1;color:var(--soft);cursor:pointer}
.cmodal__x:hover{color:var(--ottone-deep)}
.cmodal__k{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ottone-deep);margin-bottom:8px}
.cmodal__h{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.7rem;color:var(--ink);line-height:1.1;margin:0 0 8px}
.cmodal__sub{font-size:.95rem;color:var(--soft);margin-bottom:18px}
.cmodal__form{display:grid;gap:10px}
.cmodal__form input,.cmodal__form textarea{font:inherit;font-size:.95rem;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:11px 13px;width:100%}
.cmodal__form button[type=submit]{margin-top:2px}
.cmodal__send{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:2px}
.cmodal__or{font-size:.8rem;color:var(--soft)}
.cmodal__call{background:transparent;border:1px solid var(--ottone);color:var(--ottone-deep)}
.cmodal__call:hover{background:var(--ottone);color:var(--blu-deep)}
.cmodal__call strong{color:#fff;letter-spacing:.04em}
.cmodal__note{font-size:.78rem;color:var(--soft);margin-top:11px}
.cmodal__done{font-size:1.05rem;color:var(--ink);padding:10px 0}
@media(max-width:600px){
  .prvmodal{padding:0}
  .prvmodal__p{max-height:none;height:100%;border-radius:0}
  .prvmodal__b{padding:6px 22px 40px}
}

/* ——— mobile: hero di pagina meno affastellati ——— */
@media(max-width:560px){
  .pg-hero{padding:116px 0 46px}
  .pg-hero h1{font-size:clamp(1.85rem,8vw,2.4rem);line-height:1.14}
  .pg-hero .lead{font-size:.95rem;margin-top:14px}
  .pg-hero .chips{gap:9px;margin-top:22px}
  .chip{padding:8px 13px;font-size:.6rem;letter-spacing:.12em}
  /* occhielli su una riga sola: resta la parte dorata col filo, cade la coda in maiuscoletto */
  .kicker__t{display:none}
  .kicker__r{width:26px}
}

/* ——— mobile: carosello più raccolto, sezioni a colonna con meno aria ——— */
@media(max-width:680px){
  .svc,.svc.rev,.svc--half{gap:28px}
}


/* ——— carosello 3D orizzontale (anteprima operazioni) ——— */
.hcar__scene{width:100%;height:384px;overflow:hidden;perspective-origin:50% 32%;perspective:1200px;display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.hcar__scene:active{cursor:grabbing}
.hcar__stage{position:relative;width:228px;height:268px;transform-style:preserve-3d}
.hcard{position:absolute;inset:0;pointer-events:none;transform-style:preserve-3d}
.hcface,.hcback{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:12px;border:1px solid var(--line);box-shadow:0 18px 40px rgba(22,48,58,.16)}
.hcface{background:var(--surface-2);padding:18px 20px;display:flex;flex-direction:column}
.hcback{background:linear-gradient(135deg,var(--blu),var(--blu-deep));transform:rotateY(180deg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;box-shadow:inset 0 0 0 1px rgba(226,192,121,.3),0 18px 40px rgba(22,48,58,.16)}
/* carosello su telefono: anello più stretto (il raggio segue la larghezza dello stage via JS) */
@media(max-width:680px){
  .hcar__scene{height:258px;perspective:950px}
  .hcar__stage{width:176px;height:206px}
  .hcface{padding:14px 15px}
}
.hcback img{width:74px;height:74px;object-fit:contain;opacity:.55}
.hcback span{font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(240,231,211,.55)}
.hcard__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.hcard__ico{width:34px;height:34px;border-radius:9px;background:var(--blu);display:flex;align-items:center;justify-content:center}
.hcard__ico svg{width:16px;height:16px;stroke:#E2C079;fill:none;stroke-width:1.5}
.hcard__tag{font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ottone-deep);border:1px solid var(--ottone);border-radius:99px;padding:5px 10px}
.hcard__t{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.3rem;color:var(--ink);line-height:1.05}
.hcard__m{font-size:.85rem;color:var(--soft);margin-top:6px;flex:1}
.hcard__nda{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);border-top:1px solid var(--line-soft);padding-top:10px}


/* ——— operazioni: filtri ——— */
/* La griglia e le card vivono nello <style> di operazioni.html (.pgrid2, .kard*).
   Qui c'erano .pfgrid, .pfcard*, .pfempty e .pfnote: morte da tempo, perche' la
   pagina usa pfgrid e pfempty come ID, non come classi, e quei selettori di classe
   non agganciavano nulla. Rimosse, non rinominate: rinominare codice morto lo
   avrebbe solo fatto sembrare vivo. */
.filters{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px}
.filters .fld{flex:1;min-width:190px}

/* ——— modulo contatti ——— */
.form{display:flex;flex-direction:column;gap:18px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* .75rem e non .62: 9,9px erano il testo piu' piccolo che il visitatore DEVE leggere per
   sapere cosa scrivere. Il maiuscoletto spaziato aiuta, ma su un campo da compilare
   l'illeggibilita' non costa un fastidio, costa il modulo. Restano maiuscole e spaziate:
   cambia solo il corpo. */
.fld label{display:block;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin-bottom:7px}
.fld input,.fld select,.fld textarea{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:13px 14px;font-family:'Jost',sans-serif;font-size:.95rem;color:var(--ink);transition:border-color .25s,box-shadow .25s}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--ottone);box-shadow:0 0 0 3px var(--ottone-soft);outline:none}
.fld textarea{min-height:130px;resize:vertical}
.fhint{font-size:.78rem;color:var(--soft);margin-top:6px;font-style:italic}
.pills{display:flex;flex-wrap:wrap;gap:9px}
.pill{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line);border-radius:99px;padding:11px 17px;cursor:pointer;background:var(--surface-2);color:var(--body);transition:all .25s;font-family:'Jost',sans-serif}
.pill:hover{border-color:var(--ottone);color:var(--ottone-deep)}
.pill.on{background:var(--blu);color:var(--ivory);border-color:var(--blu)}
.cinfo{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);padding:28px}
.cinfo h3{font-size:1.3rem;margin-bottom:14px}
.cinfo p{font-size:.9rem;color:var(--body);line-height:1.6;margin-bottom:12px}
.cinfo .clab{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ottone-deep);display:block;margin:16px 0 4px}
.fld select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ottone-deep) 50%),linear-gradient(135deg,var(--ottone-deep) 50%,transparent 50%);background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%;background-size:6px 6px;background-repeat:no-repeat;cursor:pointer}
.fcheck{display:flex;gap:10px;align-items:flex-start;font-size:.82rem;color:var(--soft);line-height:1.5;cursor:pointer}
.fcheck input{width:16px;height:16px;margin-top:2px;accent-color:var(--ottone-deep);flex:none;cursor:pointer}
@media(max-width:680px){.frow{grid-template-columns:1fr}}


/* ——— cilindro schede (anteprima operazioni) ——— */
.pcyl{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px}
.pcyl__scene{width:100%;height:290px;perspective:1100px;display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none;-webkit-mask-image:linear-gradient(180deg,transparent,#000 24%,#000 76%,transparent);mask-image:linear-gradient(180deg,transparent,#000 24%,#000 76%,transparent)}
.pcyl__scene.draggable{cursor:grab;touch-action:pan-y}
.pcyl__scene.draggable:active{cursor:grabbing}
.pcyl__stage{position:relative;width:min(100%,440px);height:100px;transform-style:preserve-3d}
.pcyl__card{position:absolute;inset:0;background:var(--surface-2);border:1px solid var(--line);border-radius:11px;overflow:hidden;display:flex;flex-direction:row;align-items:stretch;box-shadow:0 18px 40px rgba(22,48,58,.18);will-change:opacity}
.pcyl__ph{width:54px;flex:none;background:var(--blu);display:flex;align-items:center;justify-content:center}
.pcyl__ph svg{width:17px;height:17px;stroke:#E2C079;fill:none;stroke-width:1.5}
.pcyl__main{flex:1;min-width:0;padding:0 17px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.pcyl__t{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.28rem;color:var(--ink);line-height:1.05}
.pcyl__m{font-size:.78rem;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcyl__right{flex:none;width:118px;padding:0 15px;border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;gap:4px}
.pcyl__right .x{font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ottone-deep)}
.pcyl__right .nda{font-size:.62rem;color:var(--soft)}
.pcyl__hint{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}