/* Cimosa · template sartoria e atelier su misura (creativi). Chiaro, grigio gesso, vino e azzurro polvere. */
@font-face{font-family:'Brygada 1918';src:url('../_font/brygada-1918/brygada-1918-var.woff2') format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'Albert Sans';src:url('../_font/albert-sans/albert-sans-var.woff2') format('woff2');font-weight:300 800;font-display:swap}

:root{
  --p:#5c1f2e;   /* vino */
  --s:#eef1f4;   /* gesso da sarto */
  --t:#1c1b22;   /* inchiostro */
  --a:#9fb8cf;   /* azzurro polvere */
  --f-titoli:'Brygada 1918', Georgia, serif;
  --f-testo:'Albert Sans', system-ui, sans-serif;

  --muto:color-mix(in oklab, var(--t) 68%, var(--s));
  --riga:color-mix(in oklab, var(--t) 16%, var(--s));
  --carta:color-mix(in oklab, var(--a) 18%, var(--s));
  --bordo:clamp(16px, 3.6vw, 60px);
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--s);color:var(--t);font-family:var(--f-testo);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--f-titoli);font-weight:500;margin:0;line-height:1.08;letter-spacing:-.015em;text-wrap:balance}
p{margin:0}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--p);outline-offset:3px}
.salta{position:absolute;left:-9999px;top:8px;background:var(--p);color:var(--s);padding:10px 16px;z-index:100}
.salta:focus{left:8px}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:2px;background:var(--p);color:var(--s);font-weight:600;font-size:16px;letter-spacing:.02em;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;position:relative;transition:background .3s}
.btn::after{content:"";position:absolute;inset:4px;border:1px dashed color-mix(in oklab, var(--s) 55%, transparent);pointer-events:none;transition:inset .3s var(--ease)}
.btn:hover{background:var(--t)}
.btn:hover::after{inset:6px}
.btn-piccolo{min-height:44px;padding:0 20px;font-size:15px}
.btn-chiaro{background:var(--s);color:var(--p)}
.btn-chiaro::after{border-color:color-mix(in oklab, var(--p) 45%, transparent)}
.btn-chiaro:hover{background:var(--a);color:var(--t)}
.link-cucito{font-weight:600;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;background:repeating-linear-gradient(90deg,currentColor 0 6px,transparent 6px 10px) 0 calc(100% - 8px)/100% 1.5px no-repeat}
.link-cucito:hover{color:var(--p)}

/* barra di avanzamento: un punto filza */
.avanzamento{position:fixed;left:0;right:0;top:0;height:3px;z-index:70;pointer-events:none}
.avanzamento i{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--p) 0 10px,transparent 10px 16px);transform-origin:0 50%;transform:scaleX(0)}

/* testata */
.testata{position:fixed;inset:0 0 auto;z-index:60;display:flex;align-items:center;gap:32px;padding:16px var(--bordo);background:color-mix(in oklab, var(--s) 92%, transparent);transition:box-shadow .3s}
.testata.piena{box-shadow:0 1px 0 var(--riga)}
.logo{font-family:var(--f-titoli);font-weight:600;font-size:23px;text-decoration:none;margin-right:auto;max-width:18ch;line-height:1.1}
.nav{display:flex;gap:30px}
.nav a{text-decoration:none;font-size:16px;padding:10px 0;white-space:nowrap;background:repeating-linear-gradient(90deg,currentColor 0 5px,transparent 5px 9px) 0 calc(100% - 6px)/0 1px no-repeat;transition:background-size .5s var(--ease)}
.nav a:hover{background-size:100% 1px}
.testata-dx{display:flex;align-items:center;gap:12px}
.hamburger{display:none;width:48px;height:48px;border:1px solid var(--riga);border-radius:2px;background:none;cursor:pointer;position:relative}
.hamburger span{position:absolute;left:13px;right:13px;height:1.5px;background:currentColor;transition:transform .4s var(--ease), top .4s var(--ease)}
.hamburger span:first-child{top:19px}
.hamburger span:last-child{top:27px}
.hamburger[aria-expanded="true"] span:first-child{top:23px;transform:rotate(45deg)}
.hamburger[aria-expanded="true"] span:last-child{top:23px;transform:rotate(-45deg)}
.pannello{position:fixed;inset:0;z-index:55;background:var(--carta);padding:100px var(--bordo) 40px;display:flex;flex-direction:column;justify-content:space-between}
.pannello[hidden]{display:none}
.pannello nav{display:flex;flex-direction:column}
.pannello nav a{font-family:var(--f-titoli);font-size:clamp(2rem,8vw,2.8rem);text-decoration:none;padding:12px 0;border-bottom:1px dashed var(--riga)}
.pannello nav a[hidden]{display:none}
.pannello > p{color:var(--muto);line-height:1.8}

/* HERO: livelli */
.hero{position:relative;overflow:hidden;min-height:min(100svh,980px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;padding:clamp(100px,13vh,130px) var(--bordo) clamp(40px,6vh,72px)}
.hero-testo{position:relative;z-index:3}
.hero h1{font-size:clamp(2.6rem,5.2vw,5.4rem);line-height:1.02;max-width:12ch}
.hero-testo > p{margin-top:24px;font-size:19px;max-width:40ch;color:var(--muto)}
.azioni{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:36px}
.hero-scena{position:relative;height:min(74svh,700px);min-height:420px}
.livello{position:absolute;margin:0}
.livello img{width:100%;height:100%;object-fit:cover}
.l-fondo{top:0;right:6%;width:62%;height:100%;overflow:hidden}
.l-medio{left:0;bottom:8%;width:32%;aspect-ratio:4/5;overflow:hidden;border:10px solid var(--s);box-shadow:0 30px 60px -30px color-mix(in oklab, var(--t) 60%, transparent)}
.l-fronte{right:0;top:12%;width:24%;aspect-ratio:1;overflow:hidden;border-radius:50%;border:8px solid var(--s);box-shadow:0 30px 60px -30px color-mix(in oklab, var(--t) 60%, transparent)}
.l-filo{left:18%;bottom:-2%;width:60%;fill:none;stroke:var(--p);stroke-width:2.5;stroke-dasharray:10 7;stroke-linecap:round;z-index:4}

/* FRASE */
.frase{padding:clamp(100px,12vw,180px) var(--bordo);background:var(--carta)}
.frase-testo{font-family:var(--f-titoli);font-size:clamp(1.9rem,3.6vw,3.6rem);line-height:1.2;max-width:28ch;margin:0 auto;text-align:center}
.frase-testo .parola{color:color-mix(in oklab, var(--t) 22%, var(--carta))}

/* titoli con colore che scorre */
.titolo{font-size:clamp(2.4rem,4.6vw,4.4rem);background:linear-gradient(100deg,var(--p) 0 45%,var(--t) 55% 100%);background-size:240% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text}
.js .titolo{color:transparent}
.in-anteprima .titolo{color:var(--t)}
.piccolo{font-family:var(--f-testo);font-weight:600;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--muto);text-align:center}

/* SERVIZI */
.servizi{padding:clamp(90px,10vw,150px) var(--bordo)}
.servizi .titolo{margin-bottom:48px}
.righe{list-style:none;margin:0;padding:0;border-top:1px dashed var(--t)}
.riga{display:grid;grid-template-columns:70px minmax(0,1.6fr) minmax(0,1fr) 170px;gap:28px;align-items:center;padding:30px 0;border-bottom:1px dashed var(--t)}
.n{font-family:var(--f-titoli);font-size:1.3rem;color:var(--p)}
.riga h3{font-size:clamp(1.8rem,3vw,2.8rem)}
.riga-testo p{margin-top:10px;color:var(--muto);max-width:48ch}
.riga-foto{margin:0;aspect-ratio:16/10;overflow:hidden;clip-path:inset(0 50% 0 50%)}
.riga-foto img{width:100%;height:100%;object-fit:cover}
.riga-prezzo{font-family:var(--f-titoli);font-size:clamp(1.6rem,2.4vw,2.2rem);text-align:right;line-height:1}
.riga-prezzo small{display:block;font-family:var(--f-testo);font-size:14px;color:var(--muto);margin-bottom:6px}
.in-anteprima .riga-foto{clip-path:none}

/* PROVE */
.prove{padding:clamp(90px,10vw,150px) var(--bordo);background:var(--t);color:var(--s)}
.prove .titolo{background-image:linear-gradient(100deg,var(--a) 0 45%,var(--s) 55% 100%);color:var(--s);max-width:16ch}
.js .prove .titolo{color:transparent}
.in-anteprima .prove .titolo{color:var(--s)}
.prove-corpo{display:grid;grid-template-columns:80px minmax(0,1.2fr) minmax(0,1fr);gap:24px clamp(24px,5vw,80px);margin-top:56px;align-items:start}
.prove-foto{margin:0;position:sticky;top:120px;aspect-ratio:4/5;overflow:hidden}
.prove-foto img{width:100%;height:100%;object-fit:cover}
.cucitura{width:60px;height:100%;overflow:visible}
.cucitura-traccia{fill:none;stroke:color-mix(in oklab, var(--s) 15%, var(--t));stroke-width:2}
.cucitura-filo{fill:none;stroke:var(--a);stroke-width:3;stroke-dasharray:14 10;stroke-linecap:round}
.tappe{list-style:none;margin:0;padding:0;display:grid;gap:clamp(48px,7vw,96px)}
.tappe h3{font-size:clamp(1.7rem,2.6vw,2.4rem);color:var(--s)}
.tappe p{margin-top:10px;font-size:18px;max-width:46ch;color:color-mix(in oklab, var(--s) 78%, var(--t))}

/* LAVORI */
.lavori{padding:clamp(90px,10vw,150px) var(--bordo) clamp(60px,6vw,90px)}
.lavori .titolo{margin-bottom:40px}
.griglia-lavori{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:16px;align-items:end}
.griglia-lavori figure{margin:0;overflow:hidden}
.griglia-lavori img{width:100%;height:100%;object-fit:cover}
.w1{aspect-ratio:3/4}
.w2{aspect-ratio:4/3.3}
.w3{aspect-ratio:4/5;margin-bottom:60px}

/* TESSUTI: nastro di marchi */
.tessuti{padding:clamp(50px,6vw,80px) 0;border-top:1px dashed var(--riga);border-bottom:1px dashed var(--riga)}
.marchi{margin-top:28px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.marchi-pista{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:72px;width:max-content}
.marchi-pista li{white-space:nowrap;color:color-mix(in oklab, var(--t) 70%, var(--s));transition:color .3s}
.marchi-pista li:hover{color:var(--p)}
.m-a{font-family:var(--f-titoli);font-size:1.7rem;font-style:italic}
.m-b{font-family:var(--f-testo);font-weight:300;font-size:1.5rem;letter-spacing:.06em}
.m-c{font-family:var(--f-testo);font-weight:800;font-size:1.05rem;letter-spacing:.3em;border:1.5px solid currentColor;padding:6px 14px}

/* CORSO */
.corso{margin:clamp(70px,8vw,120px) var(--bordo) 0;padding:clamp(28px,4vw,56px);background:var(--p);color:var(--s);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 48px;outline:1px dashed color-mix(in oklab, var(--s) 45%, transparent);outline-offset:-10px}
.corso .titolo{font-size:clamp(1.8rem,3vw,2.8rem);background-image:linear-gradient(100deg,var(--a) 0 45%,var(--s) 55% 100%);color:var(--s)}
.js .corso .titolo{color:transparent}
.in-anteprima .corso .titolo{color:var(--s)}
.corso p{margin-top:12px;max-width:60ch;color:color-mix(in oklab, var(--s) 85%, var(--p))}

/* RECENSIONI */
.recensioni{padding:clamp(90px,10vw,150px) var(--bordo)}
.recensioni .titolo{margin-bottom:40px}
.rec-griglia{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px)}
.rec-griglia blockquote{margin:0;padding-left:28px;border-left:2px dashed var(--p)}
.rec-griglia p{font-family:var(--f-titoli);font-size:clamp(1.4rem,2.2vw,2rem);line-height:1.3}
.rec-griglia footer{margin-top:16px;font-weight:600;color:var(--muto)}
.stelle{margin-top:32px;color:var(--muto)}
.stelle span{color:var(--p);letter-spacing:3px;margin-right:6px}

/* CONTATTI */
.contatti{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px clamp(40px,6vw,100px);padding:clamp(90px,10vw,150px) var(--bordo);background:var(--carta)}
.contatti-info > p{margin-top:20px;font-size:19px;max-width:40ch;color:var(--muto)}
.contatti dl{margin:36px 0 0;display:grid;gap:14px}
.contatti dl div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding-top:14px;border-top:1px dashed var(--riga)}
.contatti dt{color:var(--muto)}
.contatti dd{margin:0;font-weight:500}
.contatti dd a{text-decoration:none}
.modulo{background:var(--s);padding:clamp(24px,3vw,44px);display:grid;gap:22px;align-content:start;outline:1px dashed var(--riga);outline-offset:-10px}
.campo{display:flex;flex-direction:column;gap:8px}
.campo-doppio{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.campo label,.scelta legend{font-weight:600;font-size:15px}
.campo input{min-height:50px;border:1px solid color-mix(in oklab, var(--t) 32%, var(--s));border-radius:2px;background:var(--s);color:var(--t);padding:0 14px}
.campo input:focus{outline:2px solid var(--p);outline-offset:0}
.scelta{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.scelta legend{margin-bottom:8px;width:100%}
.scelta label{position:relative}
.scelta input{position:absolute;opacity:0;width:1px;height:1px}
.scelta span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid color-mix(in oklab, var(--t) 30%, var(--s));cursor:pointer}
.scelta input:checked + span{background:var(--p);border-color:var(--p);color:var(--s)}
.scelta input:focus-visible + span{outline:2px solid var(--p);outline-offset:2px}
.modulo .btn{justify-self:start}

/* PIEDE */
.piede{padding:40px var(--bordo) 104px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}
.piede-logo{font-family:var(--f-titoli);font-size:1.6rem}
.piede-righe{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:15px;color:var(--muto)}
.piede-righe a{text-decoration:none}

.whatsapp{position:fixed;right:20px;bottom:20px;z-index:50;display:flex;align-items:center;gap:10px;min-height:52px;padding:0 20px 0 16px;background:var(--t);color:var(--s);text-decoration:none;font-weight:600;border-radius:2px}
.whatsapp svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}

.js .hero-testo > *{opacity:0}
.in-anteprima .hero-testo > *{opacity:1}

/* APERTURA: una cucitura corre al centro della stoffa, poi i due lembi si aprono sul sito */
.ap-cucitura{background:transparent}
.ap-meta{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;
  background:repeating-linear-gradient(90deg, color-mix(in oklab, var(--p) 92%, var(--s)) 0 2px, var(--p) 2px 5px), var(--p)}
.ap-meta.sx{left:0}
.ap-meta.dx{right:0}
.ap-meta .ap-nome{position:absolute;top:50%;width:100vw;margin:0;text-align:center;transform:translateY(-50%);font-family:var(--f-titoli);font-weight:500;font-size:clamp(1.8rem,7vw,5rem);color:var(--s);opacity:0;padding:0 16px;box-sizing:border-box}
.ap-meta.sx .ap-nome{left:0}
.ap-meta.dx .ap-nome{right:0}
.ap-punti{position:absolute;left:calc(50% - 2px);top:0;width:4px;height:100%;background:repeating-linear-gradient(to bottom, var(--a) 0 16px, transparent 16px 26px);transform-origin:50% 0;transform:scaleY(0)}
.ap-ago{position:absolute;left:calc(50% - 1px);top:0;width:2px;height:70px;background:linear-gradient(to bottom, transparent, var(--s));border-radius:2px;margin-top:-70px}

@media (max-width:1100px){
  .nav{display:none}
  .hamburger{display:block}
}
@media (max-width:1024px){
  .riga{grid-template-columns:50px minmax(0,1fr) 150px;}
  .riga-foto{grid-column:2;grid-row:2}
  .riga-prezzo{grid-column:3;grid-row:1}
}
@media (max-width:899px){
  body{font-size:16px}
  .testata .btn-piccolo{display:none}
  .logo{font-size:21px}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:96px;gap:28px}
  .hero h1{font-size:clamp(2.4rem,11vw,3.4rem)}
  .hero-testo > p{font-size:17px}
  .hero-scena{height:110vw;max-height:560px;min-height:0}
  .l-fondo{right:0;width:74%}
  .riga{grid-template-columns:40px minmax(0,1fr);gap:14px 16px}
  .riga-foto{grid-column:1 / -1;grid-row:auto}
  .riga-prezzo{grid-column:2;grid-row:auto;text-align:left}
  .prove-corpo{grid-template-columns:40px minmax(0,1fr);gap:14px}
  .prove-foto{grid-column:1 / -1;position:static;aspect-ratio:4/3}
  .cucitura{width:40px}
  .griglia-lavori{grid-template-columns:1fr 1fr}
  .w2{grid-column:1 / -1;grid-row:1}
  .w3{margin-bottom:0}
  .rec-griglia{grid-template-columns:1fr}
  .contatti{grid-template-columns:1fr}
  .campo-doppio{grid-template-columns:1fr}
  .contatti dl div{grid-template-columns:1fr;gap:2px}
  .whatsapp span{display:none}
  .whatsapp{width:56px;padding:0;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .js .hero-testo > *{opacity:1}
  .riga-foto{clip-path:none}
  .js .titolo{color:inherit}
  *{transition-duration:.01ms !important}
}