/* =========================================================
   LUMEN · BRAND v2 · pagina caso studio Neri 
   Si carica dopo lo stile originale. Solo stile.
   ========================================================= */

:root{
  --bg:#f4f4f3; --shell:#f4f4f3; --panel:#ecebe8; --box:#fcfcfb;
  --ink:#121212; --ink2:#4a4a48; --mute:#686865; --set:#a3a29e;
  --line:rgba(18,18,18,.10); --line2:rgba(18,18,18,.16); --wire:rgba(18,18,18,.22);
  --acc:#8d8c87; --acc-soft:rgba(141,140,135,.22);
  --signal:#e4471b; --signal-soft:rgba(228,71,27,.18);
  --display:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,Menlo,monospace;
  --r:6px;
}

body{background-image:none;font-family:var(--sans)}
.shell{background:var(--shell);border-inline:0}
:focus-visible{outline-color:var(--signal)}

/* titoli serif, mai grassetto */
.h2,.brand,.hero h1,.meta dd,.disc b,.disc .ico,.cards3 h3,.built h3,.st b,.rules .n,.rules h3,
.res b,.todo b,.you b,.mark{
  font-family:var(--display)!important;font-weight:400!important;font-variant-numeric:lining-nums;
}
.h2,.hero h1{letter-spacing:-.025em;line-height:1.02}
.built h3{letter-spacing:-.015em;line-height:1.1}
.cards3 h3,.st b,.rules h3,.res b,.todo b,.you b,.meta dd,.disc b{letter-spacing:-.01em}
.cards3 h3,.you b{font-size:24px}
.rules .n{letter-spacing:-.02em}

/* etichette: testo normale, niente maiuscoletto mono */
.kick,.meta dt,.sh .num,.cards3 .k,.phone-cap,.draft-h,.todo .when,.you .k,.tag,.tbd{
  font-family:var(--sans)!important;text-transform:none!important;letter-spacing:.005em!important;
}
.kick{font-size:14px;color:var(--mute)}
.meta dt,.cards3 .k,.you .k,.todo .when,.phone-cap{font-size:13.5px}
.sh .num{font-size:14px}
/* la bozza email resta mono: è il registro dell'agente */
.draft-n{font-family:var(--mono)}

/* logo a parola */
.brand{font-size:27px;letter-spacing:-.02em;gap:0}
.brand .mark{display:none}

/* nav */
.nav-in{background:rgba(244,244,243,.9);border-inline:0}
.nav-r a{font-weight:400}

/* pulsanti */
.btn{border-radius:var(--r);border:0;box-shadow:inset 0 0 0 1px var(--ink)}
.btn-p{background:var(--ink);color:#f4f4f3}
.btn-p:hover{background:#2a2a28}
.btn-s:hover{background:var(--ink);color:#f4f4f3}
.lnk{font-weight:500}

/* HERO: foto in bianco e nero piena, come la home */
.hero{background:#0c0c0c;color:#f2f1ee;border-bottom:0}
.hero::before{filter:grayscale(1) contrast(1);opacity:1;-webkit-mask-image:none;mask-image:none}
.hero::after{background:linear-gradient(to bottom,rgba(10,10,10,.62),rgba(10,10,10,.82))}
.hero .kick{color:rgba(242,241,238,.7)}
.hero .kick::before,.hero .kick::after{background:rgba(242,241,238,.3)}
.hero h1 .g{color:rgba(242,241,238,.55)}
.hero .lead{color:rgba(242,241,238,.82)}
.hero .btn-p{background:#f2f1ee;color:#121212;box-shadow:none}
.hero .btn-p:hover{background:#fff}
.hero .btn-s{color:#f2f1ee;box-shadow:inset 0 0 0 1px rgba(242,241,238,.4)}
.hero .btn-s:hover{background:#f2f1ee;color:#121212}
.hero .meta{border-top-color:rgba(242,241,238,.22)}
.hero .meta div+div{border-left-color:rgba(242,241,238,.14)}
.hero .meta dt{color:rgba(242,241,238,.6)}
.hero .meta dd{color:#f2f1ee}
.hero .tbd{color:rgba(242,241,238,.75);border-color:rgba(242,241,238,.35);background:transparent}

/* segnaposto: grigio, non è una decisione */
.tbd{color:var(--ink2);border:1px dashed rgba(18,18,18,.3);background:transparent;border-radius:4px;font-size:12.5px}

/* superfici: niente riquadri con bordo */
.disc{border:0;border-radius:var(--r);background:var(--box)}
.disc .ico{border:0;background:var(--ink);color:#f4f4f3;border-radius:50%}
.cards3,.rules,.res{border:0;background:transparent;gap:2px}
.cards3 article,.rules article,.res div{background:var(--box)}
.cards3 article+article,.rules article+article,.res div+div{border-left:0}
@media (max-width:980px){.rules article:nth-child(n+3){border-top:0}}
@media (max-width:900px){.res div:nth-child(n+3){border-top:0}}
@media (max-width:860px){.cards3 article+article{border-top:0}}
@media (max-width:560px){.rules article+article{border-top:0}}
.built{border-top-color:var(--line)}
.ticks li::before{background:var(--ink)}

/* flusso dell'agente: il passo "Approva" è la decisione */
.flow{border:0;border-radius:var(--r);background:var(--panel)}
.st{border:0;border-radius:var(--r);background:var(--box);box-shadow:0 1px 0 rgba(18,18,18,.05)}
.st .tag{border-radius:4px;font-size:11.5px}
.tag i{display:none}
.st.hl{box-shadow:inset 0 0 0 1.5px var(--signal),0 0 0 4px var(--signal-soft)}
.st.hl .tag{background:var(--signal);color:#121212}

/* bozza email */
.draft{border:0;border-radius:var(--r);overflow:hidden;box-shadow:0 1px 0 rgba(18,18,18,.05),0 22px 44px -32px rgba(18,18,18,.45)}
.draft-h{font-size:13px;border-bottom-color:var(--line)}
.draft-h .st-b{color:var(--mute)}
.draft-a span{border-radius:4px;border-color:var(--line2)}
.draft-a .ok{background:var(--signal);color:#121212;border-color:var(--signal)}

/* ancora da fare */
.todo{border-top-color:var(--line)}
.todo li{border-bottom-color:var(--line)}

/* per voi */
.you a{border:0;border-radius:var(--r);background:var(--box);box-shadow:inset 0 0 0 1px var(--line)}
.you a:hover{box-shadow:inset 0 0 0 1px var(--ink)}

/* call finale: la prenotazione è la decisione */
.final{background:#121212}
.final .btn-p{background:var(--signal);color:#121212;box-shadow:none}
.final .btn-p:hover{background:#cf3d14}
.final .btn-s{color:#f2f1ee;box-shadow:inset 0 0 0 1px rgba(242,241,238,.4)}

.foot{border-top-color:var(--line)}

/* logo C: "Lumen." con il punto finale; nell'icona il punto è arancione */
.brand::after{content:"."}

/* CTA: un solo stile per tutti i pulsanti di prenotazione e contatto.
   Arancione pieno, testo inchiostro, angoli 6px, senza "+" e senza freccia. */
.btn-p,.nav-cta,.nav-r .cta{background:var(--signal)!important;color:#121212!important;box-shadow:none!important;border:0!important;border-radius:var(--r)!important;font:500 16px/1 var(--sans)!important;letter-spacing:0!important;padding:15px 20px!important;opacity:1!important;transition:background .2s}
.btn-p:hover,.nav-cta:hover,.nav-r .cta:hover{background:#cf3d14!important}
.btn-p .arr{display:none}
.nav-cta,.nav-r .cta{font-size:15px!important;padding:11px 16px!important}
.nav-r .cta{margin-left:4px}

/* Tutto schermo: sfondi e foto da bordo a bordo, contenuti centrati entro 1280px */
:root{--gut:max(clamp(20px,5vw,88px),calc((100vw - 1280px) / 2))}
.shell,.nav-in{max-width:none!important;border-inline:0!important}