@font-face{font-family:Fraunces;font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/Fraunces-regular.woff) format("woff")}
@font-face{font-family:Fraunces;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/Fraunces-bold.woff) format("woff")}
@font-face{font-family:Fraunces;font-style:italic;font-weight:400 600;font-display:swap;src:url(fonts/Fraunces-italic.woff) format("woff")}
@font-face{font-family:Lora;font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/Lora-regular.woff) format("woff")}
@font-face{font-family:Lora;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/Lora-bold.woff) format("woff")}
@font-face{font-family:Lora;font-style:italic;font-weight:400 600;font-display:swap;src:url(fonts/Lora-italic.woff) format("woff")}
@font-face{font-family:"Nova Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/NovaMono-regular.woff) format("woff")}
/* Concept: la brochure portata sul web. Fasce di citazione a tutta larghezza tra sezioni chiare, schede area con il colore dell'area, giallo solo come evidenziatore. */
:root {
  --bg:#F9FCFF; --surface:#FFFFFF; --fg:#163F47; --muted:#4A6B72; --line:#D3E3E8;
  --petrolio:#216975; --acqua:#118D8B; --giallo:#FFEE40; --arancio:#EFAA2B; --lampone:#E05163; --lampone-scuro:#8B323D; --petrolio-scuro:#163F47;
  --accent:#216975; --accent-fg:#FFFFFF; --mark:#FFEE40; --ph:#EAF3F6;
  --band-a:#216975; --band-b:#163F47; --band-c:#8B323D; --band-fg:#F9FCFF; --band-src:#FFEE40;
  --display:'Fraunces',Georgia,'Times New Roman',serif; --body:'Lora',Cambria,Georgia,serif; --mono:'Nova Mono','Courier New',monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:#0E2227; --surface:#153238; --fg:#EAF4F6; --muted:#A9C4CA; --line:#2A4A51; --accent:#94CCCB; --accent-fg:#0E2227; --ph:#153238;
  --band-a:#1B5560; --band-b:#0A181C; --band-c:#6E2630; color-scheme:dark; } }
:root[data-theme="dark"] {
  --bg:#0E2227; --surface:#153238; --fg:#EAF4F6; --muted:#A9C4CA; --line:#2A4A51; --accent:#94CCCB; --accent-fg:#0E2227; --ph:#153238;
  --band-a:#1B5560; --band-b:#0A181C; --band-c:#6E2630; color-scheme:dark; }
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--fg); font-family:var(--body); font-size:17px; line-height:1.6; }
body::before { content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:30; background:var(--bg); }
.wrap { max-width:1100px; margin:0 auto; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); }
h1,h2,h3 { font-family:var(--display); font-weight:600; line-height:1.15; text-wrap:balance; margin:0; }
p { margin:0; }
a { color:inherit; }
:focus-visible { outline:3px solid var(--arancio); outline-offset:3px; border-radius:2px; }
.label { font-family:var(--mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.btn { display:inline-block; font-family:var(--body); font-weight:600; font-size:1rem; padding:.85rem 1.4rem; border-radius:999px; text-decoration:none; border:2px solid var(--accent); cursor:pointer; }
.btn-primary { background:var(--accent); color:var(--accent-fg); }
.btn-primary:hover { background:var(--fg); border-color:var(--fg); color:var(--bg); }
.btn-ghost { background:transparent; color:var(--fg); border-color:var(--line); }
.btn-ghost:hover { border-color:var(--accent); }
/* striscia contatti sempre visibile */
.strip { background:var(--band-b); color:#F9FCFF; font-family:var(--mono); font-size:.76rem; letter-spacing:.06em; }
.strip .wrap { display:flex; gap:1.4rem; justify-content:flex-end; flex-wrap:wrap; padding-block:.4rem; }
.strip a { text-decoration:none; color:var(--band-src); }
.strip a:hover { text-decoration:underline; }
/* header */
.top { position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:var(--bg); border-bottom:1px solid var(--line); }
.top .wrap { display:flex; align-items:center; gap:.6rem 1.2rem; padding-block:.7rem; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:.7rem; text-decoration:none; margin-right:auto; }
.brand img { width:40px; height:40px; display:block; }
.brand span { font-family:var(--display); font-weight:600; font-size:1.05rem; line-height:1.1; }
.brand small { display:block; font-family:var(--mono); font-weight:400; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:.15rem; }
.top nav { display:flex; gap:.4rem 1.3rem; flex-wrap:wrap; font-size:.95rem; }
.top nav a { text-decoration:none; padding:.2rem 0; border-bottom:2px solid transparent; }
.top nav a:hover, .top nav a[aria-current="page"] { border-bottom-color:var(--lampone); }
.top .btn { padding:.55rem 1.1rem; font-size:.92rem; }
@media (max-width:820px) { .top nav { order:3; width:100%; } }
/* hero e intestazioni pagina */
.hero { padding-block:clamp(2.5rem,6vw,5rem); }
.hero .wrap { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(1.5rem,4vw,4rem); align-items:center; }
.hero h1 { font-size:clamp(2.6rem,7vw,5rem); letter-spacing:-.015em; margin:.8rem 0 1.2rem; }
h1 mark { background:linear-gradient(transparent 58%, var(--mark) 58%, var(--mark) 92%, transparent 92%); color:inherit; padding:0 .1em; }
.hero .lead { margin-top:1rem; max-width:54ch; color:var(--muted); font-size:1.08rem; }
.hero .cta { display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.8rem; }
.photo { aspect-ratio:4/5; max-width:100%; border:2px dashed var(--line); border-radius:50% 50% 12px 12px / 38% 38% 12px 12px; background:var(--ph); display:grid; place-items:center; text-align:center; padding:1.5rem; color:var(--muted); }
.photo b { display:block; font-family:var(--display); font-size:1.15rem; color:var(--fg); margin-bottom:.3rem; }
@media (max-width:820px) { .hero .wrap { grid-template-columns:1fr; } .photo { max-width:320px; } }
.head { padding-block:clamp(2.2rem,5vw,3.8rem) clamp(1.6rem,3vw,2.4rem); }
.head h1 { font-size:clamp(2.2rem,5.5vw,3.6rem); margin:.6rem 0 .8rem; letter-spacing:-.01em; }
.head .lead { max-width:56ch; color:var(--muted); font-size:1.1rem; }
/* bande citazione */
.band { color:var(--band-fg); padding-block:clamp(2.2rem,5vw,3.6rem); border-block:1px solid rgba(255,255,255,.08); }
.band-a { background:var(--band-a); } .band-b { background:var(--band-b); } .band-c { background:var(--band-c); }
.band .bimg { display:block; width:100%; height:auto; aspect-ratio:1400/552; object-fit:cover; border-radius:4px; margin:0 auto clamp(1.4rem,3vw,2.2rem); }
.band blockquote { margin:0 auto; max-width:60rem; }
.band blockquote p { font-family:var(--display); font-style:italic; font-weight:400; font-size:clamp(1.35rem,3vw,2.2rem); line-height:1.3; text-wrap:balance; }
.band blockquote footer { margin-top:1rem; font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--band-src); }
/* sezioni */
section.s { padding-block:clamp(2.6rem,6vw,4.6rem); }
.s h2 { font-size:clamp(1.9rem,4vw,2.9rem); margin:.5rem 0 1rem; }
.s .intro { max-width:58ch; color:var(--muted); }
.tre { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; margin-top:1.6rem; }
.tre p { font-family:var(--display); font-size:clamp(1.5rem,3.2vw,2.3rem); font-weight:600; line-height:1.15; padding-top:1rem; border-top:5px solid var(--c); }
.tre p:nth-child(1) { --c:var(--acqua); } .tre p:nth-child(2) { --c:var(--petrolio); } .tre p:nth-child(3) { --c:var(--arancio); }
@media (max-width:760px) { .tre { grid-template-columns:1fr; gap:1rem; } }
.citazione { font-family:var(--display); font-style:italic; font-weight:500; font-size:clamp(1.4rem,3vw,2rem); line-height:1.3; max-width:34rem; border-left:6px solid var(--giallo); padding-left:1.2rem; margin-bottom:2rem; text-wrap:balance; }
/* campi in home */
.campi { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-top:1.8rem; }
.campo { display:flex; flex-direction:column; gap:.6rem; background:var(--surface); border:1px solid var(--line); border-top:6px solid var(--c); border-radius:4px; padding:1.1rem 1.1rem 1.2rem; text-decoration:none; }
.campo:hover { border-color:var(--c); }
.campo h3 { font-size:1.35rem; }
.campo p { font-size:.95rem; color:var(--muted); }
.campo ul { list-style:none; margin:0; padding:0; display:grid; gap:.3rem; font-size:.92rem; }
.campo li::before { content:"\2192 "; color:var(--muted); }
.campo .go { margin-top:auto; padding-top:.5rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; text-decoration:underline; text-underline-offset:3px; }
@media (max-width:900px) { .campi { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px) { .campi { grid-template-columns:1fr; } }
/* competenze */
.campo-sez { border-top:6px solid var(--c); }
.campo-sez h2 { margin-top:.4rem; }
.aree-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.4rem; margin-top:1.6rem; }
@media (max-width:820px) { .aree-grid { grid-template-columns:1fr; } }
.area { background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:1.4rem 1.4rem 1.2rem; }
.area header { display:flex; gap:.8rem; align-items:center; margin-bottom:.8rem; }
.area .chip { flex:none; width:2.2rem; height:2.2rem; border-radius:50%; display:grid; place-items:center; background:var(--c); color:var(--on); font-family:var(--mono); font-size:.95rem; }
.area h3 { font-size:1.3rem; }
.area p { color:var(--muted); font-size:.98rem; }
.area .nb { font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg); margin-bottom:.5rem; }
.area .ex { margin-top:.7rem; color:var(--fg); }
.area details { margin-top:1rem; border-top:1px solid var(--line); padding-top:.8rem; }
.area summary { cursor:pointer; font-family:var(--mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; padding:.3rem 0; }
.area ul { margin:.7rem 0 0; padding-left:1.1rem; display:grid; gap:.35rem; font-size:.95rem; }
.area li::marker { color:var(--c); }
.fine .wrap { display:flex; gap:1.2rem 2rem; flex-wrap:wrap; align-items:center; }
/* metodo */
.passi { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; counter-reset:p; }
.passo { background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:1.2rem; }
.passo::before { counter-increment:p; content:"0" counter(p); font-family:var(--mono); font-size:.85rem; color:var(--muted); }
.passo h3 { font-size:1.35rem; margin:.3rem 0 .5rem; }
.passo p { font-size:.95rem; color:var(--muted); }
@media (max-width:900px) { .passi { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px) { .passi { grid-template-columns:1fr; } }
.due { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem; margin-top:1.6rem; }
.nota { border-left:6px solid var(--giallo); background:var(--surface); padding:1rem 1.2rem; border-radius:0 4px 4px 0; }
.nota b { display:block; font-family:var(--mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:.3rem; font-weight:400; }
@media (max-width:760px) { .due { grid-template-columns:1fr; } }
.mod { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-top:1.8rem; }
.mod div { background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:1.2rem; }
.mod h3 { font-size:1.25rem; margin-bottom:.4rem; }
.mod p { font-size:.95rem; color:var(--muted); }
@media (max-width:900px) { .mod { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px) { .mod { grid-template-columns:1fr; } }
/* chi sono */
.chi { max-width:46rem; display:grid; gap:1rem; }
.chi p { font-size:1.08rem; }
.perc { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,3.5rem); margin-top:1.8rem; }
@media (max-width:820px) { .perc { grid-template-columns:1fr; } }
.tl { list-style:none; margin:0; padding:0; border-left:3px solid var(--line); }
.tl li { padding:0 0 1.1rem 1.2rem; position:relative; }
.tl li::before { content:""; position:absolute; left:-8px; top:.45rem; width:13px; height:13px; border-radius:50%; background:var(--accent); }
.tl b { font-family:var(--mono); font-weight:400; font-size:.82rem; letter-spacing:.08em; color:var(--muted); display:block; }
.cred { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.cred li { padding:.55rem .8rem; background:var(--surface); border:1px solid var(--line); border-radius:4px; font-size:.97rem; }
.stampa { margin-top:2.4rem; }
.stampa h3 { font-size:1.4rem; margin-bottom:.3rem; }
.stampa .intro { margin-bottom:.8rem; }
.stampa ul { list-style:none; margin:0; padding:0; display:grid; gap:.6rem; max-width:46rem; }
.stampa li { display:grid; grid-template-columns:3.2rem 1fr; gap:.6rem; font-size:.95rem; }
.stampa li b { font-family:var(--mono); font-weight:400; color:var(--muted); }
.stampa a { text-decoration-thickness:1px; text-underline-offset:3px; }
/* contatti */
.contatti { background:var(--surface); border-block:1px solid var(--line); }
.contatti .wrap { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,3.5rem); }
@media (max-width:820px) { .contatti .wrap { grid-template-columns:1fr; } }
.dati { display:grid; gap:.9rem; margin-top:1.4rem; }
.dati div { display:flex; gap:.8rem; flex-wrap:wrap; align-items:baseline; }
.dati .label { min-width:5.5rem; }
.dati span.v { user-select:all; }
.copy { font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; background:transparent; color:var(--fg); border:1px solid var(--line); border-radius:999px; padding:.2rem .7rem; cursor:pointer; }
.copy:hover { border-color:var(--accent); }
form { display:grid; gap:1rem; }
label { display:grid; gap:.3rem; font-size:.9rem; font-family:var(--mono); letter-spacing:.04em; }
input[type=text],input[type=email],textarea { font:inherit; font-family:var(--body); font-size:1rem; letter-spacing:0; color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:4px; padding:.7rem .8rem; width:100%; }
textarea { min-height:7.5rem; resize:vertical; }
.chk { display:flex; gap:.6rem; align-items:flex-start; font-family:var(--body); letter-spacing:0; font-size:.88rem; color:var(--muted); }
.chk input { margin-top:.3rem; accent-color:var(--petrolio); }
.esito { font-size:.92rem; padding:.7rem .9rem; border-left:6px solid var(--arancio); background:var(--bg); }
footer.pie { padding-block:1.6rem; font-size:.88rem; color:var(--muted); }
footer.pie .wrap { display:flex; gap:1rem 2rem; flex-wrap:wrap; justify-content:space-between; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

.ph { background:var(--mark); color:#163F47; padding:0 .25em; border-radius:2px; font-family:var(--mono); font-size:.88em; }
.legal { max-width:46rem; display:grid; gap:1rem; }
.legal h2 { font-size:1.35rem; margin:1.2rem 0 0; }
.legal ul { margin:0; padding-left:1.2rem; display:grid; gap:.4rem; }
.legal p, .legal li { font-size:1rem; }

.portrait{display:block;width:100%;max-width:420px;height:auto;aspect-ratio:1/1;justify-self:center;border-radius:50%;box-shadow:0 0 0 8px #FFEE40}
@media (max-width:820px){.portrait{max-width:300px}}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;color:#000;padding:.5rem;z-index:9}
.page[hidden]{display:block}
.strip{font-family:var(--body,Lora,Georgia,serif);font-size:.85rem;letter-spacing:.02em}