/* ==========================================================================
   balcakovic.com
   Un manifesto svizzero: griglia a 12 colonne visibile, una sola famiglia
   di caratteri, campi di colore pieni, nessun angolo arrotondato.
   Il sito è un dialogo: la domanda è del cliente, la risposta è mia.
   ========================================================================== */

:root{
  /* scuro: bianchi caldi e smorzati, non bianco puro; l'ambra un filo meno accesa */
  --bg:#13110F; --bg-2:#191714; --surface:#1C1916;
  --line:#2A251F; --line-2:#3C352D; --line-3:#52493F;
  --text:#E3D9CC; --text-2:#C4B8AA; --muted:#A2968A; --faint:#8D8174;
  --accent:#EDA23A; --accent-2:#F2C27A;
  --accent-big:#EDA23A;            /* l'ambra dei titoli enormi */
  --accent-ink:#EDA23A;            /* l'ambra dei testi piccoli e dei link */
  --field:#EDA23A;                 /* i campi di colore pieno */
  --on-accent:#13110F; --on-accent-2:#3D2B0E;
  --rule:rgba(227,217,204,.05); --grain:.05; --tint:rgba(227,217,204,.022);

  /* titoli: Archivo stretto ma non al limite, nero ma non pieno, righe che respirano */
  --t-wdth:72%; --t-wght:800; --t-lh:.92; --t-ls:.006em;

  --max:1680px;
  --gut:clamp(1.25rem,3.2vw,3.5rem);    /* margine della pagina */
  --g:clamp(.9rem,1.6vw,1.75rem);        /* spazio fra le colonne */
  --cols:4;
  --nav-h:76px; --nav-h-sm:58px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --out:cubic-bezier(.16,1,.3,1);
  --snap:cubic-bezier(.2,.85,.3,1);
}
@media (min-width:900px){ :root{ --cols:12; --nav-h:88px } }
@media (min-width:2200px){ :root{ --max:1960px } html{ font-size:17.5px } }
@media (min-width:3000px){ :root{ --max:2400px } html{ font-size:19px } }

:root[data-theme="light"]{
  /* chiaro: carta più calda e meno luminosa, inchiostro morbido, ocra al posto dell'arancio */
  --bg:#EDE7DC; --bg-2:#E5DED2; --surface:#F4EFE6;
  --line:#D9D0C2; --line-2:#C8BCAB; --line-3:#AEA18F;
  --text:#2A241D; --text-2:#4A4036; --muted:#62574C; --faint:#695E52;
  --accent:#D0902F; --accent-2:#A2681F;
  --accent-big:#A2681F; --accent-ink:#82501A;
  --field:#DCA24F; --on-accent:#2A241D; --on-accent-2:#4A3514;
  --rule:rgba(42,36,29,.065); --grain:.04; --tint:rgba(42,36,29,.024);
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h-sm) + 2rem); -webkit-text-size-adjust:100% }
body{ margin:0; background:var(--bg); color:var(--text);
  font-family:Archivo,system-ui,sans-serif; font-stretch:100%;
  font-size:clamp(1rem,.96rem + .18vw,1.075rem); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; -webkit-tap-highlight-color:transparent }
body.is-locked{ overflow:hidden }
h1,h2,h3,h4{ margin:0; font-weight:700; line-height:1.1 }
p{ margin:0 } ul,ol,dl{ margin:0; padding:0; list-style:none } dd{ margin:0 }
a{ color:inherit; text-decoration:none }
img,svg,video{ display:block; max-width:100% }
button{ font:inherit; color:inherit }
::selection{ background:var(--field); color:var(--on-accent) }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
[hidden]{ display:none !important }
.sr{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
.skip{ position:fixed; top:.5rem; left:.5rem; z-index:400; transform:translateY(-250%); background:var(--field); color:var(--on-accent); padding:.7rem 1.1rem; font-weight:600; transition:transform .2s }
.skip:focus{ transform:none }

/* ---------- griglia ---------- */
.wrap{ width:min(100%,var(--max)); margin-inline:auto; padding-inline:var(--gut) }
.g{ display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); column-gap:var(--g) }

/* la griglia si vede: una riga sul bordo sinistro di ogni colonna, più il bordo destro */
.bg{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden }
.bg::before{ content:""; position:absolute; top:0; bottom:0; left:50%; translate:-50% 0;
  width:min(100%,var(--max)); padding-inline:var(--gut);
  background-image:
    linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 100%),
    linear-gradient(90deg, transparent calc(100% - 1px), var(--rule) calc(100% - 1px));
  background-size:calc((100% + var(--g)) / var(--cols)) 100%, 100% 100%;
  background-origin:content-box; background-clip:content-box; background-repeat:repeat-x, no-repeat }
.bg::after{ content:""; position:absolute; inset:0; opacity:var(--grain); background-size:140px 140px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E") }

/* ---------- tipografia ---------- */
/* Titoli: Archivo stretto e nero, in maiuscolo. Il testo sorgente resta in
   minuscolo per i lettori di schermo e per la traduzione. */
.giant,.big,.mid{ font-stretch:var(--t-wdth); font-weight:var(--t-wght); text-transform:uppercase; letter-spacing:var(--t-ls); line-height:var(--t-lh) }
.giant{ font-size:clamp(2.4rem,9vw,calc(var(--max) * .09)) }
.big{ font-size:clamp(2rem,5vw,calc(var(--max) * .05)) }
.mid{ font-size:clamp(1.5rem,2.6vw,calc(var(--max) * .026)); line-height:.96 }
.amber{ color:var(--accent-big) }

/* etichette: la stessa famiglia, larga */
.lab{ font-stretch:118%; font-weight:600; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint) }
.lab b{ font-weight:600; color:var(--text-2) }
.num{ font-stretch:var(--t-wdth); font-weight:var(--t-wght); font-variant-numeric:tabular-nums; line-height:.88 }

.lead{ font-size:clamp(1.15rem,1.5vw,1.4rem); line-height:1.45; font-weight:450; letter-spacing:-.006em; color:var(--text) }
.body{ color:var(--muted); line-height:1.75; max-width:64ch }
.body + .body{ margin-top:1.1rem }

/* link: sottolineato sempre, più spesso al passaggio */
.ln{ position:relative; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.22em;
  text-decoration-color:var(--line-3); transition:text-decoration-color .2s, text-decoration-thickness .2s, color .2s }
/* area tattile di 44px: il link resta sottile, il dito no */
.ln::after{ content:""; position:absolute; left:-.25rem; right:-.25rem; top:50%; height:44px; transform:translateY(-50%) }
.ln:hover,.ln:focus-visible{ text-decoration-color:var(--accent-ink); text-decoration-thickness:2px; color:var(--text) }
.arr{ display:inline-block; width:.78em; height:.78em; vertical-align:-.04em; margin-left:.32em; flex:none;
  transition:transform .35s var(--out) }
a:hover > .arr,a:focus-visible > .arr{ transform:translate(.14em,-.14em) }
.arr-r{ vertical-align:-.06em }
a:hover > .arr-r,a:focus-visible > .arr-r{ transform:translateX(.22em) }

/* ---------- bottoni: rettangoli pieni, al passaggio si invertono ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.7rem; white-space:nowrap;
  min-height:52px; padding:.95rem 1.4rem; border:1px solid transparent; border-radius:0; cursor:pointer;
  font-stretch:112%; font-weight:650; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  transition:background-color .2s, color .2s, border-color .2s }
.btn .arr{ margin:0 }
.btn-1{ background:var(--field); color:var(--on-accent) }
.btn-1:hover,.btn-1:focus-visible{ background:var(--text); color:var(--bg) }
.btn-2{ background:transparent; color:var(--text); border-color:var(--line-3) }
.btn-2:hover,.btn-2:focus-visible{ background:var(--text); color:var(--bg); border-color:var(--text) }
.btn-sm{ min-height:44px; padding:.6rem 1rem; font-size:.72rem }

/* ==========================================================================
   Navbar — in cima è piatta e allineata alla griglia; scorrendo si stacca
   in un rettangolo pieno, a spigoli vivi. Numeri davanti alle voci.
   ========================================================================== */
.nav{ position:fixed; inset:0 0 auto 0; z-index:200; padding-top:env(safe-area-inset-top);
  transition:padding-top .5s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent }
.nav-shell{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut);
  transition:max-width .5s var(--ease) }
.nav-in{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:1.25rem;
  height:var(--nav-h); padding-inline:0; border:1px solid transparent; background:transparent;
  transition:height .5s var(--ease), padding-inline .5s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease) }
@media (min-width:1150px){
  .nav.is-stuck{ padding-top:calc(env(safe-area-inset-top) + 12px) }
  .nav.is-stuck .nav-shell{ max-width:min(var(--max), 76rem) }
  .nav.is-stuck .nav-in{ height:var(--nav-h-sm); gap:1rem; padding-inline:1.1rem 7px; background:var(--bg); border-color:var(--line-2) }
  /* la linguetta ambra a sinistra: è l'unico segno che l'isola si è staccata */
  .nav-in::before{ content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:4px; background:var(--field);
    transform:scaleY(0); transform-origin:50% 0; transition:transform .45s var(--out) }
  .nav.is-stuck .nav-in::before{ transform:scaleY(1) }
}
@media (max-width:1149px){
  .nav.is-stuck{ background:var(--bg); border-bottom-color:var(--line-2) }
  .nav.is-stuck .nav-in{ height:var(--nav-h-sm) }
}
.prog{ position:fixed; top:0; left:0; z-index:210; height:2px; width:100%; background:var(--field);
  transform:scaleX(var(--p,0)); transform-origin:0 50%; opacity:0; transition:opacity .45s var(--ease) }
body.is-scrolled .prog{ opacity:1 }

.nav-links{ position:relative; flex:0 1 auto; min-width:0; display:flex; align-items:center; gap:.2rem }
.nav-link{ position:relative; z-index:1; display:inline-flex; align-items:baseline; gap:.42rem;
  padding:.85rem .7rem; font-size:.9rem; font-weight:500; color:var(--muted); transition:color .25s }
.nav-link b{ font-stretch:120%; font-weight:600; font-size:.6rem; letter-spacing:.08em; color:var(--faint); transition:color .25s }
.nav-link:hover,.nav-link[aria-current="page"]{ color:var(--text) }
.nav-link[aria-current="page"] b{ color:var(--accent-ink) }
/* la barra che scorre sotto la voce: non una pastiglia, un tratto */
.ind{ position:absolute; left:0; bottom:.45rem; height:2px; width:0; background:var(--accent-ink);
  opacity:0; pointer-events:none; transition:transform .42s var(--out), width .42s var(--out), opacity .25s }

.nav-right{ flex:none; display:flex; align-items:center; gap:.7rem }
.nav.is-stuck .nav-right{ gap:.6rem }

/* strumenti: ricerca e tema, due caselle quadrate */
.tools{ flex:none; display:flex; border:1px solid var(--line-2) }
.tools > *{ flex:none; display:flex; align-items:center; justify-content:center; gap:.2rem; white-space:nowrap;
  min-height:42px; min-width:44px; padding:0 .6rem; border:0; background:none; cursor:pointer;
  color:var(--faint); font-stretch:118%; font-size:.64rem; font-weight:600; letter-spacing:.08em;
  transition:color .2s, background-color .2s }
.tools > * + *{ border-left:1px solid var(--line-2) }
.tools > *:hover{ color:var(--bg); background:var(--text) }
.tools svg{ width:15px; height:15px }
:root[data-theme="light"] .theme-sun{ display:none }
:root:not([data-theme="light"]) .theme-moon{ display:none }

/* lingua: interruttore quadrato con cursore pieno */
.lang{ position:relative; flex:none; display:flex; border:1px solid var(--line-2) }
.lang .thumb{ position:absolute; top:0; left:0; width:50%; height:100%; background:var(--text); transition:transform .38s var(--out) }
.lang.is-it .thumb{ transform:translateX(100%) }
.lang button{ position:relative; z-index:1; min-height:42px; min-width:2.75rem; padding:0 .55rem; border:0; background:none; cursor:pointer;
  color:var(--faint); font-stretch:118%; font-size:.66rem; font-weight:650; letter-spacing:.08em; transition:color .3s }
.lang button[aria-pressed="true"]{ color:var(--bg) }
.nav-cta{ flex:none }

.burger{ position:relative; display:none; width:44px; height:44px; border:0; background:none; cursor:pointer; padding:0 }
.burger span{ position:absolute; left:11px; top:50%; width:22px; height:2px; margin-top:-1px; background:var(--text);
  transform-origin:50% 50%; transition:transform .42s var(--out), width .3s var(--ease) }
.burger span:nth-child(1){ transform:translateY(-5px) }
.burger span:nth-child(2){ width:15px; transform:translateY(5px) }
.burger:hover span:nth-child(2){ width:22px }
.nav.menu-open .burger span:nth-child(1){ transform:rotate(45deg) }
.nav.menu-open .burger span:nth-child(2){ width:22px; transform:rotate(-45deg) }

@media (max-width:1149px){
  .burger{ display:block }
  .tools > *{ min-height:44px }
  .nav-links,.nav-cta,.nav .lang{ display:none }
}

/* menu mobile: a tutto schermo, le voci sono titoli */
.sheet{ position:fixed; inset:0; z-index:190; display:flex; flex-direction:column; justify-content:flex-end;
  padding:calc(var(--nav-h-sm) + env(safe-area-inset-top) + 1.5rem) var(--gut) calc(2rem + env(safe-area-inset-bottom));
  background:var(--bg); opacity:0; visibility:hidden; height:100dvh; overflow-y:auto; overflow-x:hidden;
  transition:opacity .3s var(--ease), visibility .3s }
.sheet.is-open{ opacity:1; visibility:visible }
.sheet nav{ border-top:1px solid var(--line-2) }
.sheet nav a{ display:flex; align-items:baseline; gap:1rem; padding:.55rem 0 .4rem; border-bottom:1px solid var(--line-2);
  font-stretch:var(--t-wdth); font-weight:var(--t-wght); text-transform:uppercase; line-height:.95; font-size:clamp(2.3rem,11vw,3.8rem);
  clip-path:inset(0 100% 0 0); transition:clip-path .55s var(--out) calc(var(--i,0)*45ms) }
.sheet.is-open nav a{ clip-path:inset(0 -2% 0 0) }
.sheet nav a span:first-child{ flex:none; width:2.4rem; font-stretch:118%; font-weight:600; font-size:.7rem;
  letter-spacing:.1em; color:var(--faint); line-height:1 }
.sheet nav a[aria-current="page"]{ color:var(--accent-big) }
.sheet-foot{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; justify-content:space-between; margin-top:1.6rem }
.sheet .lang button{ min-height:48px; min-width:3.6rem; font-size:.8rem }
.sheet .sheet-cta{ flex:1 1 12rem }

/* ---------- marchio ---------- */
.mark{ --tld:2.55em; position:relative; flex:none; display:inline-flex; align-items:baseline; white-space:nowrap;
  padding-right:var(--tld); box-sizing:content-box;
  font-family:Sora,sans-serif; font-weight:700; font-size:1.28rem; letter-spacing:-.038em; color:var(--text);
  transition:font-size .5s var(--ease) }
.nav.is-stuck .mark{ font-size:1.1rem }
.mark::after{ content:""; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%) }
.mark i{ display:inline-block; font-style:normal; color:var(--accent); opacity:0; transform:scale(.25);
  animation:markDot .34s var(--snap) .58s forwards }
.mark .w{ display:inline-block; clip-path:inset(0 100% 0 0); animation:markWipe .7s var(--out) .06s forwards }
@keyframes markWipe{ to{ clip-path:inset(0 -2% 0 0) } }
@keyframes markDot{ to{ opacity:1; transform:scale(1) } }
.mark .tld{ position:absolute; left:calc(100% - var(--tld)); top:0; color:var(--faint);
  max-width:0; overflow:hidden; opacity:0;
  transition:max-width .45s var(--out), opacity .3s var(--ease) }
a.mark:hover .tld,a.mark:focus-visible .tld{ max-width:var(--tld); opacity:1 }
.foot .mark .w{ animation:none; clip-path:none }
.foot .mark i{ animation:none; opacity:1; transform:none }


/* ---------- firma: lettere che salgono, e che si alzano sotto il puntatore ---------- */
.signoff{ display:block; padding-top:clamp(2rem,5vw,3.5rem); margin-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--line); line-height:.82; overflow:hidden }
.signoff .word{ display:block; font-family:Sora,sans-serif; font-weight:700; letter-spacing:-.055em;
  font-size:clamp(2.6rem,14.3vw,11.8rem); white-space:nowrap }
.signoff .l,.signoff i{ display:inline-block; font-style:normal;
  color:color-mix(in oklab, var(--text), var(--accent) calc(var(--h,0) * 85%));
  translate:0 calc(var(--h,0) * -.11em);
  transition:transform .85s var(--out) calc(var(--i,0)*32ms), opacity .55s var(--ease) calc(var(--i,0)*32ms),
             translate .4s var(--out), color .35s var(--ease) }
.signoff i{ color:var(--accent) }
.js .signoff:not(.in) .l{ transform:translateY(.45em); opacity:0 }
.js .signoff:not(.in) i{ transform:translateY(.45em) scale(.4); opacity:0 }
@supports not (color: color-mix(in oklab, red, blue)){ .signoff .l{ color:var(--text) } }



/* ==========================================================================
   Composizioni
   ========================================================================== */
section{ position:relative }

/* ---------- apertura ---------- */
.hero{ padding:calc(var(--nav-h) + clamp(1.5rem,6vh,4.5rem)) 0 clamp(3rem,6vw,5rem) }
@media (min-width:900px){
}
.motto{ margin-top:clamp(1.6rem,2.4vw,2.6rem) }
.motto span{ display:block }
.motto .b{ color:var(--accent-big); padding-left:calc((100% + var(--g)) / var(--cols) * 1) }
@media (min-width:900px){ .motto .b{ padding-left:calc((100% + var(--g)) / 12 * 3) } }
/* sul telefono il motto riempie la riga: la prima metà a sinistra, la seconda a filo destro */
@media (max-width:899px){
  .motto{ font-size:clamp(2rem,12vw,6.5rem) }
  .motto .b{ padding-left:0; text-align:right }
}

.hero .sub{ margin-top:clamp(2rem,3.4vw,3.2rem); padding-top:1.4rem; border-top:1px solid var(--line-2); row-gap:2rem }
.hero .sub > *{ grid-column:1 / -1 }
.tr{ font-size:clamp(1.3rem,1.9vw,1.7rem); font-weight:500; line-height:1.22; letter-spacing:-.012em }
html[lang="it"] .tr{ display:none }
.tr + .body{ margin-top:1rem }
.svc-mini li{ display:flex; align-items:baseline; gap:.8rem; padding:.6rem 0; border-bottom:1px solid var(--line) }
.svc-mini li:first-child{ border-top:1px solid var(--line) }
.svc-mini b{ font-stretch:118%; font-weight:600; font-size:.62rem; letter-spacing:.08em; color:var(--faint) }
.hero .acts{ display:flex; flex-direction:column; align-items:flex-start; gap:1rem }
@media (min-width:600px) and (max-width:899px){
  .hero .sub .svc-mini{ grid-column:1 / 3 }
  .hero .sub .acts{ grid-column:3 / 5; align-self:end; align-items:flex-end }
}
@media (min-width:900px){
  .hero .sub .say{ grid-column:1 / 6 }
  .hero .sub .svc-mini{ grid-column:7 / 10 }
  .hero .sub .acts{ grid-column:10 / 13; align-items:flex-end }
}

/* ---------- campo pieno: la seconda metà del motto ---------- */
.field{ background:var(--field); color:var(--on-accent); padding:clamp(3.5rem,7vw,6.5rem) 0 }
.field ::selection{ background:var(--on-accent); color:var(--field) }
.field .big{ font-size:clamp(2rem,10.4vw,4.4rem) }
@media (min-width:900px){ .field .big{ font-size:min(6.6vw, calc(var(--max) * .066)) } }
.field .tr{ margin-top:1.4rem; color:var(--on-accent) }
.field .note{ margin-top:1.1rem; max-width:52ch; color:var(--on-accent-2); line-height:1.6 }
.steps{ margin-top:clamp(2.5rem,5vw,4rem); row-gap:2rem }
.steps li{ grid-column:1 / -1; border-top:2px solid var(--on-accent); padding-top:1rem }
@media (min-width:900px){ .steps li{ grid-column:span 4 } }
.steps .num{ display:block; font-size:clamp(2.4rem,3.4vw,3.4rem) }
.steps h3{ margin-top:.7rem; font-size:1.08rem; font-weight:650; letter-spacing:-.006em }
.steps p{ margin-top:.5rem; color:var(--on-accent-2); line-height:1.6; max-width:42ch }
.field a.ln{ text-decoration-color:var(--on-accent-2) }
.field a.ln:hover{ text-decoration-color:var(--on-accent); color:var(--on-accent) }

/* ---------- sezioni a dialogo: domanda a sinistra, risposta a destra ---------- */
.sec{ padding:clamp(4rem,8vw,7rem) 0; border-top:1px solid var(--line-2) }
.sec-2{ background:var(--tint) }
.dlg{ row-gap:1.1rem; align-items:start; margin-bottom:clamp(2.4rem,4.5vw,4rem) }
.dlg .q{ grid-column:1 / -1; font-size:clamp(1rem,1.2vw,1.12rem); color:var(--muted); line-height:1.4; max-width:22ch }
.dlg .q::before{ content:"— "; color:var(--accent-ink) }
.dlg .a{ grid-column:1 / -1 }
.dlg .side{ grid-column:1 / -1; color:var(--muted); max-width:40ch }
@media (min-width:900px){
  .dlg .q{ grid-column:1 / 4; padding-top:.6em }
  .dlg .a{ grid-column:4 / 13 }
  .dlg .side{ grid-column:4 / 10; margin-top:.4rem }
}

/* ---------- intestazione delle pagine interne ---------- */
.phead{ padding:calc(var(--nav-h) + clamp(2rem,6vh,4.5rem)) 0 clamp(2.5rem,5vw,4rem); border-bottom:1px solid var(--line-2) }
.phead .g{ row-gap:1.2rem; align-items:start }
.phead .pn{ grid-column:1 / -1; display:flex; align-items:baseline; gap:1rem }
.phead .pn .num{ font-size:clamp(2.8rem,5.6vw,6rem); color:var(--accent-big) }
.phead .a{ font-size:clamp(2.3rem,6.2vw,calc(var(--max) * .062)) }
.phead .q{ grid-column:1 / -1; color:var(--muted); font-size:clamp(1rem,1.3vw,1.2rem) }
.phead .q::before{ content:"— "; color:var(--accent-ink) }
.phead .a{ grid-column:1 / -1 }
.phead .lead{ grid-column:1 / -1; max-width:46ch; margin-top:.6rem; color:var(--text-2) }
@media (min-width:900px){
  .phead .pn{ grid-column:1 / 4; flex-direction:column; gap:.6rem; grid-row:1 / span 3 }
  .phead .q,.phead .a{ grid-column:4 / 13 }
  .phead .lead{ grid-column:4 / 10 }
}

/* ---------- indice dei lavori ---------- */
.idx{ border-top:1px solid var(--line-2) }
.idx > li{ border-bottom:1px solid var(--line-2) }
.idx .row{ display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); column-gap:var(--g); row-gap:.5rem;
  align-items:baseline; padding:clamp(1.2rem,2.4vw,2rem) 0; transition:background-color .2s, color .2s }
.idx .n{ grid-column:1 / 2; font-stretch:118%; font-weight:600; font-size:.66rem; letter-spacing:.1em; color:var(--faint) }
.idx .nm{ grid-column:2 / -1; font-stretch:var(--t-wdth); font-weight:var(--t-wght); text-transform:uppercase; line-height:.9;
  font-size:clamp(2.1rem,4.6vw,calc(var(--max) * .046)) }
.idx .ds{ grid-column:2 / -1; color:var(--muted); line-height:1.55; max-width:46ch }
.idx .yr{ grid-column:2 / 3; font-variant-numeric:tabular-nums; font-size:.9rem; color:var(--faint) }
.idx .stat{ grid-column:3 / -1; justify-self:end; display:inline-flex; align-items:center; font-stretch:118%;
  font-weight:600; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-2) }
@media (min-width:900px){
  .idx .n{ grid-column:1 / 2 }
  .idx .nm{ grid-column:2 / 7 }
  .idx .ds{ grid-column:7 / 11 }
  .idx .yr{ grid-column:11 / 12 }
  .idx .stat{ grid-column:12 / 13 }
}
/* al passaggio la riga si riempie di ambra, da bordo a bordo */
.idx .row{ position:relative }
.idx .row::before{ content:""; position:absolute; inset:0 calc(var(--gut) * -1); background:var(--field); z-index:-1;
  transform:scaleY(0); transform-origin:50% 100%; transition:transform .35s var(--out) }
.idx .row:hover::before,.idx .row:focus-visible::before{ transform:scaleY(1) }
.idx .row:hover,.idx .row:focus-visible{ color:var(--on-accent) }
.idx .row:hover .n,.idx .row:hover .ds,.idx .row:hover .yr,.idx .row:hover .stat,
.idx .row:focus-visible .n,.idx .row:focus-visible .ds,.idx .row:focus-visible .yr,.idx .row:focus-visible .stat{ color:var(--on-accent-2) }
.idx .subs{ display:flex; flex-wrap:wrap; gap:.3rem 1.6rem; padding:0 0 clamp(1.1rem,2vw,1.6rem) }
@media (min-width:900px){ .idx .subs{ padding-left:calc((100% + var(--g)) / 12 * 6) } }
.idx .subs a{ display:inline-flex; align-items:center; font-stretch:118%; font-weight:600; font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-2); min-height:44px }
.idx .subs a:hover{ color:var(--accent-ink) }
.filters{ display:flex; flex-wrap:wrap; gap:.4rem 1.8rem; margin-bottom:clamp(1.6rem,3vw,2.4rem) }
.filters button{ position:relative; border:0; background:none; padding:.5rem 0; min-height:44px; cursor:pointer;
  font-stretch:118%; font-weight:600; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); transition:color .2s }
.filters button::after{ content:""; position:absolute; left:0; right:0; bottom:.5rem; height:2px; background:var(--accent-ink);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .4s var(--out) }
.filters button:hover{ color:var(--text-2) }
.filters button[aria-pressed="true"]{ color:var(--text) }
.filters button[aria-pressed="true"]::after{ transform:scaleX(1) }
.idx > li[hidden]{ display:none }
.empty{ margin-top:1.5rem; color:var(--faint) }

/* ---------- servizi: una tabella i cui bordi sono le righe della griglia ---------- */
.tbl{ display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); column-gap:var(--g);
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2) }
.tbl > *{ grid-column:1 / -1; position:relative; display:flex; flex-direction:column; gap:.8rem;
  padding:1.6rem 0 1.8rem; border-bottom:1px solid var(--line) }
.tbl > *:last-child{ border-bottom:0 }
@media (min-width:900px){
  .tbl{ grid-template-rows:auto auto 1fr auto; min-height:22rem }
  .tbl > *{ grid-column:span 3; grid-row:span 4; display:grid; grid-template-rows:subgrid; row-gap:.8rem;
    padding:1.6rem var(--g) 1.25rem 1.1rem; border-bottom:0; border-left:1px solid var(--line-2) }
  .tbl > * > .go{ align-self:end; justify-self:start }
}
.tbl .n{ font-stretch:118%; font-weight:600; font-size:.66rem; letter-spacing:.1em; color:var(--faint) }
.tbl h3{ font-stretch:var(--t-wdth); font-weight:var(--t-wght); text-transform:uppercase; line-height:.92; font-size:clamp(1.7rem,2.3vw,calc(var(--max) * .023)) }
.tbl p{ color:var(--muted); line-height:1.6; font-size:.96rem }
.tbl .go{ margin-top:auto; padding:.75rem 0; align-self:flex-start }
.tbl > *::before{ content:""; position:absolute; left:-1px; right:0; top:-1px; height:4px; background:var(--field);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .4s var(--out) }
.tbl > *:hover::before{ transform:scaleX(1) }

/* servizi, pagina completa: righe grandi */
.rows{ border-top:1px solid var(--line-2) }
.rows > div{ display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); column-gap:var(--g); row-gap:.8rem;
  padding:clamp(1.6rem,3vw,2.6rem) 0; border-bottom:1px solid var(--line-2) }
.rows .n{ grid-column:1 / -1; font-stretch:118%; font-weight:600; font-size:.66rem; letter-spacing:.1em; color:var(--faint) }
.rows dt{ grid-column:1 / -1; font-stretch:var(--t-wdth); font-weight:var(--t-wght); text-transform:uppercase; line-height:.9; font-size:clamp(1.9rem,3.6vw,calc(var(--max) * .036)) }
.rows dd.what{ grid-column:1 / -1; color:var(--muted); line-height:1.65; max-width:52ch }
.rows dd.what em{ display:block; margin-top:.7rem; font-style:normal; font-size:.9rem; color:var(--faint) }
.rows dd.go{ grid-column:1 / -1 }
@media (min-width:900px){
  .rows .n{ grid-column:1 / 2; padding-top:.6rem }
  .rows dt{ grid-column:2 / 7 }
  .rows dd.what{ grid-column:7 / 11 }
  .rows dd.go{ grid-column:11 / 13; justify-self:end; align-self:start }
}

/* ---------- tabelle di fatti ---------- */
.facts{ border-top:1px solid var(--line-2) }
.facts div{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--line) }
.facts dt{ font-stretch:118%; font-weight:600; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); padding-top:.2rem }
.facts dd{ color:var(--text-2) }

/* ---------- domande ---------- */
.faq > div{ display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); column-gap:var(--g); row-gap:.7rem;
  padding:clamp(1.4rem,2.6vw,2.2rem) 0; border-top:1px solid var(--line-2) }
.faq > div:last-child{ border-bottom:1px solid var(--line-2) }
.faq dt{ grid-column:1 / -1; font-stretch:var(--t-wdth); font-weight:var(--t-wght); text-transform:uppercase; line-height:.95; font-size:clamp(1.4rem,2vw,1.9rem) }
.faq dd{ grid-column:1 / -1; color:var(--muted); line-height:1.75; max-width:62ch }
@media (min-width:900px){ .faq dt{ grid-column:1 / 6 } .faq dd{ grid-column:7 / 12 } }

/* ---------- blocchi generici a due colonne ---------- */
.split{ row-gap:2.5rem }
.split > *{ grid-column:1 / -1 }
@media (min-width:900px){
  .split .l{ grid-column:1 / 5 }
  .split .r{ grid-column:6 / 12 }
  .split .l.sticky{ position:sticky; top:calc(var(--nav-h-sm) + 3rem); align-self:start }
}
.name-big{ font-stretch:var(--t-wdth); font-weight:var(--t-wght); text-transform:uppercase; line-height:.92; font-size:clamp(2.2rem,4.2vw,calc(var(--max) * .042)) }
.stack{ display:flex; flex-wrap:wrap; gap:.15rem .9rem; margin-top:1rem; font-size:1.05rem; color:var(--text-2) }
.stack li + li::before{ content:"/"; margin-right:.9rem; color:var(--line-3) }

/* ---------- partner ---------- */
.logos{ display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); column-gap:var(--g);
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2) }
.logos a{ grid-column:1 / -1; display:grid; place-items:center; min-height:11rem; border-bottom:1px solid var(--line);
  transition:background-color .2s }
.logos a:last-child{ border-bottom:0 }
@media (min-width:900px){ .logos a{ grid-column:span 6; border-bottom:0; border-left:1px solid var(--line-2) } }
@media (min-width:900px){ .logos.three a{ grid-column:span 4 } }
.logos img{ width:auto; height:auto; max-width:62%; max-height:3rem; object-fit:contain; opacity:.85; transition:opacity .2s }
.logos img.sq{ max-height:5rem; max-width:40% }
.logos a:hover img,.logos a:focus-visible img{ opacity:1 }
.logos a:hover{ background:var(--bg-2) }
.logos .lg-light{ display:none }
:root[data-theme="light"] .logos .lg-light{ display:block }
:root[data-theme="light"] .logos .lg-dark{ display:none }

/* ---------- contatti ---------- */
.form{ display:grid; gap:2rem }
.pair{ display:grid; gap:2rem }
@media (min-width:620px){ .pair{ grid-template-columns:1fr 1fr } }
.fld{ position:relative }
.fld input,.fld textarea,.fld select{ width:100%; border:0; border-bottom:1px solid var(--line-3); border-radius:0; background:none;
  color:var(--text); font:inherit; font-size:1.08rem; padding:1.55rem 0 .65rem; transition:border-color .25s }
.fld textarea{ min-height:7.5rem; line-height:1.6; resize:vertical }
.fld select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 7px) 1.8rem,calc(100% - 2px) 1.8rem; background-size:5px 5px; background-repeat:no-repeat }
.fld select option{ background:var(--bg); color:var(--text) }
.fld label{ position:absolute; left:0; top:1.55rem; color:var(--muted); font-size:1.08rem; pointer-events:none;
  transform-origin:0 0; transition:transform .3s var(--out), color .3s }
.fld input:focus + label,.fld textarea:focus + label,
.fld input:not(:placeholder-shown) + label,.fld textarea:not(:placeholder-shown) + label,
.fld select + label{ transform:translateY(-1.45rem) scale(.68); color:var(--faint); font-stretch:118%; font-weight:600; letter-spacing:.12em; text-transform:uppercase }
.fld input:focus,.fld textarea:focus,.fld select:focus{ outline:none; border-bottom:2px solid var(--accent-ink); padding-bottom:calc(.65rem - 1px) }
.fld:focus-within label{ color:var(--accent-ink) }
.fld.bad input,.fld.bad textarea{ border-bottom-color:#E0734A }
.err{ display:none; margin-top:.5rem; font-size:.84rem; color:#F09070 }
:root[data-theme="light"] .err{ color:#A8401C }
.fld.bad .err{ display:block }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.form-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem 1.6rem }
.sent{ display:none; padding:1rem 1.1rem; background:var(--field); color:var(--on-accent); font-weight:500 }
.sent.show{ display:block }
.reach{ border-top:1px solid var(--line-2) }
.reach a,.reach div{ display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; padding:1.05rem 0; border-bottom:1px solid var(--line) }
.reach .k{ font-stretch:118%; font-weight:600; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint) }
.reach .v{ text-align:right; color:var(--text) }
.reach a:hover .v{ color:var(--accent-ink) }

.cgrid{ row-gap:3rem }
.cgrid > *{ grid-column:1 / -1 }
@media (min-width:900px){ .cgrid .cform{ grid-column:1 / 8 } .cgrid .creach{ grid-column:9 / 13 } }

/* ---------- chiusura ---------- */
.close{ padding:clamp(4rem,9vw,8rem) 0; border-top:1px solid var(--line-2) }
.close .g > .acts{ grid-column:1 / -1 }
@media (min-width:900px){ .close .g > .acts{ grid-column:4 / 13 } }
.close .acts{ display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem 2rem; margin-top:clamp(1.8rem,3vw,2.6rem) }
.close .acts p{ color:var(--muted); max-width:36ch }

/* ---------- scheda progetto ---------- */
.shot{ border:1px solid var(--line-2); background:var(--bg-2) }
/* pagina di un progetto: icona sotto l'etichetta, negozi sotto il testo */
.phead-pj .pn{ flex-direction:column; align-items:flex-start; gap:1.2rem }
.phead-pj .ic{ width:clamp(4.5rem,7vw,7rem); height:auto; aspect-ratio:1; border-radius:22.37% }
.phead .stores{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1rem }
.phead .stores:empty{ display:none }
@media (min-width:900px){ .phead .stores{ grid-column:4 / 13 } }

/* ---------- pagine legali ---------- */
.legal{ grid-column:1 / -1; counter-reset:sez; max-width:68ch }
@media (min-width:900px){ .legal{ grid-column:4 / 12 } }
.legal h2{ counter-increment:sez; margin-top:2.8rem; padding-top:1.2rem; border-top:1px solid var(--line-2);
  font-stretch:var(--t-wdth); font-weight:var(--t-wght); text-transform:uppercase; line-height:.95; font-size:clamp(1.5rem,2.4vw,2.1rem) }
.legal h2::before{ content:"§ " counter(sez) "  "; color:var(--accent-big); white-space:pre }
.legal h2:first-of-type{ margin-top:1.4rem }
.legal p{ color:var(--muted); line-height:1.8; margin-top:.9rem }
.legal ul{ list-style:square; padding-left:1.2rem; margin-top:.9rem; display:grid; gap:.4rem }
.legal li{ color:var(--muted) }
.legal a{ text-decoration:underline; text-underline-offset:.2em }
.legal .warn{ margin-top:2.5rem; padding:1rem 1.1rem; background:var(--field); color:var(--on-accent) }
.legal .lab:first-child{ display:inline-block }

/* ---------- 404 ---------- */
.nf .num{ font-size:clamp(7rem,30vw,22rem); color:var(--accent-big); line-height:.8 }

/* ---------- footer ---------- */
.foot{ padding:clamp(3rem,6vw,5rem) 0 calc(1.6rem + env(safe-area-inset-bottom)); border-top:1px solid var(--line-2) }
.foot-top{ row-gap:2rem; align-items:start }
.foot-say{ grid-column:1 / -1; font-size:clamp(1.25rem,2vw,1.75rem); font-weight:500; line-height:1.25; letter-spacing:-.012em; max-width:22ch }
.foot-nav,.foot-legal{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:0 var(--g); align-content:start }
.foot-nav .lab,.foot-legal .lab{ grid-column:1 / -1; margin-bottom:.4rem }
.foot-nav a,.foot-legal a{ display:flex; align-items:baseline; gap:.6rem; padding:.7rem 0;
  border-bottom:1px solid var(--line); font-size:.88rem; color:var(--text-2); transition:color .2s }
.foot-nav a b{ font-stretch:118%; font-weight:600; font-size:.6rem; letter-spacing:.08em; color:var(--faint) }
.foot-nav a:hover,.foot-nav a[aria-current="page"],
.foot-legal a:hover,.foot-legal a[aria-current="page"]{ color:var(--accent-ink) }
@media (min-width:900px){
  .foot-say{ grid-column:1 / 6 }
  .foot-nav{ grid-column:7 / 10; grid-template-columns:1fr }
  .foot-legal{ grid-column:10 / 13; grid-template-columns:1fr }
}
.foot-bot{ display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:space-between; align-items:center;
  margin-top:clamp(1.6rem,3vw,2.4rem); padding-top:1.2rem; border-top:1px solid var(--line-2) }
.foot-bot p{ font-size:.82rem; color:var(--faint) }

/* ==========================================================================
   Movimento: i titoli si scoprono come il marchio, da sinistra
   ========================================================================== */
/* nascosti solo se il JavaScript c'è: senza, tutto resta leggibile */
.wipe{ transition:clip-path 1s var(--out) calc(var(--i,0) * 90ms) }
.js .wipe:not(.in){ clip-path:inset(0 100% 0 0) }
.wipe.in{ clip-path:inset(-.1em -2% -.2em 0) }
.rv{ transition:opacity .6s var(--ease), transform .7s var(--out) }
.js .rv:not(.in){ opacity:0; transform:translateY(14px) }
.st > *{ transition:opacity .5s var(--ease) calc(var(--i,0)*60ms), transform .6s var(--out) calc(var(--i,0)*60ms) }
.js .st:not(.in) > *{ opacity:0; transform:translateY(12px) }
.up{ clip-path:inset(0 100% 0 0); animation:upw 1.05s var(--out) forwards; animation-delay:calc(var(--d,0)*1ms) }
@keyframes upw{ to{ clip-path:inset(-.1em -2% -.2em 0) } }
.fade{ opacity:0; animation:fadein .8s var(--ease) forwards; animation-delay:calc(var(--d,0)*1ms) }
@keyframes fadein{ to{ opacity:1 } }

@media (hover:none){ .idx .row:hover::before{ transform:scaleY(0) } .idx .row:hover{ color:inherit } .tbl > *:hover::before{ transform:scaleX(0) } }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-delay:0ms !important; transition-duration:.001ms !important }
  .wipe,.up,.sheet nav a{ clip-path:none !important }
  .rv,.st > *,.fade{ opacity:1 !important; transform:none !important }
  .mark .w{ clip-path:none } .mark i{ opacity:1; transform:none }
  .signoff .l,.signoff i{ transform:none !important; opacity:1 !important; translate:none !important }
}