/* =========================================================
   DECORAT — "Luce e gesso"
   Direzione: luce calda LED su superfici fredde di gesso.
   Display: Bricolage Grotesque · Etichette: Space Mono · Testo: Inter
   ========================================================= */

/* ===== TOKENS ===== */
:root{
  --chalk:    #E9E7E1;   /* gesso: fondo base */
  --pale:     #F3F1EC;   /* gesso chiaro: sezioni alternate */
  --panel:    #FCFBF8;   /* pannello bianco in rilievo */
  --ink:      #23211D;   /* grafite caldo: testo */
  --ink-2:    #6E6A62;   /* testo secondario */
  --graphite: #21272C;   /* banda scura (render, atmosfera) */
  --line:     #D9D5CC;   /* filo sottile */
  --line-d:   rgba(255,255,255,.14);
  --glow:     #E0A24A;   /* ambra LED 2700K: la luce */
  --glow-2:   #F3D8A9;   /* alone chiaro */
  --maxw:     1200px;
  --r:        3px;
  --ease:     cubic-bezier(.22,.61,.36,1);
  --panel-sh: 0 1px 0 rgba(255,255,255,.75) inset,
              0 26px 50px -34px rgba(35,33,29,.55),
              0 3px 10px -6px rgba(35,33,29,.14);
  --lightline:linear-gradient(90deg,var(--glow),rgba(224,162,74,0));
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--chalk);color:var(--ink);
  line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased;
  text-underline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,5vw,52px)}
h1,h2,h3{font-family:'Bricolage Grotesque','Inter',sans-serif;font-weight:500;line-height:1.02;
  letter-spacing:-.02em;color:var(--ink)}
a{color:inherit;text-decoration:none}
.st{color:var(--glow);letter-spacing:.06em}
::selection{background:var(--glow);color:#1a1712}

/* ===== ETICHETTA + FIRMA "taglio di luce" ===== */
.eyebrow{display:inline-flex;align-items:center;gap:.75rem;
  font-family:'Space Mono',monospace;font-size:.72rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.18em;color:var(--ink-2);margin-bottom:1.5rem}
.eyebrow::before{content:"";width:30px;height:2px;border-radius:2px;
  background:var(--lightline);box-shadow:0 0 9px 0 rgba(224,162,74,.65)}
.sec-head.center .eyebrow{justify-content:center}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:500;font-size:.96rem;
  letter-spacing:.005em;padding:.95em 1.7em;border-radius:var(--r);border:1px solid transparent;
  cursor:pointer;transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s,box-shadow .25s}
.btn:active{transform:translateY(1px)}
/* il CTA "si accende" d'ambra */
.btn-dark{background:var(--ink);color:var(--chalk)}
.btn-dark:hover{background:var(--glow);color:#1a1712;box-shadow:0 0 0 1px var(--glow),0 14px 34px -12px rgba(224,162,74,.55)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--glow);color:#1a1712;box-shadow:0 14px 34px -12px rgba(224,162,74,.5)}
.btn-line{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.btn-line:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn-outline{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-outline:hover{border-color:var(--ink);background:var(--ink);color:var(--chalk)}
.btn.full{width:100%}
.lnk{color:var(--ink);font-weight:500;background-image:linear-gradient(var(--glow),var(--glow));
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;padding-bottom:2px;
  transition:background-size .3s var(--ease)}
.lnk:hover{background-size:100% 2px}

/* ===== HEADER ===== */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .4s,box-shadow .4s}
.hdr.solid{background:rgba(233,231,225,.9);backdrop-filter:blur(14px) saturate(1.1);box-shadow:0 1px 0 var(--line)}
.hdr-in{display:flex;align-items:center;gap:1.5rem;height:76px}
.brand{font-family:'Bricolage Grotesque',serif;font-size:1.5rem;font-weight:600;color:#fff;
  display:flex;flex-direction:column;line-height:1;letter-spacing:-.02em;transition:color .4s}
.brand small{font-family:'Space Mono',monospace;font-size:.56rem;font-weight:400;letter-spacing:.22em;
  text-transform:uppercase;margin-top:5px;opacity:.85}
.hdr.solid .brand{color:var(--ink)}
.nav{display:flex;gap:2rem;margin-left:auto;font-size:.9rem;font-weight:400}
.nav a{color:rgba(255,255,255,.82);transition:color .25s;position:relative}
.hdr.solid .nav a{color:var(--ink-2)}
.nav a:hover{color:#fff}
.hdr.solid .nav a:hover{color:var(--ink)}
.hdr-call{font-family:'Space Mono',monospace;font-size:.82rem;font-weight:400;color:#fff;
  border:1px solid rgba(255,255,255,.4);padding:.6em 1.2em;border-radius:var(--r);transition:all .25s}
.hdr.solid .hdr-call{color:var(--ink);border-color:var(--line)}
.hdr-call:hover{background:var(--glow);color:#1a1712;border-color:var(--glow)}
.hdr.solid .hdr-call:hover{background:var(--glow);color:#1a1712;border-color:var(--glow)}
.nav-call{display:none}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
  background:none;border:0;cursor:pointer;padding:0;margin-left:.2rem}
.nav-toggle span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s}
.hdr.solid .nav-toggle span{background:var(--ink)}
.hdr.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hdr.nav-open .nav-toggle span:nth-child(2){opacity:0}
.hdr.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===== HERO ===== */
.hero{position:relative;min-height:94svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--graphite)}
.hero-photo{position:absolute;inset:0;width:100%;height:100%}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-photo::after{content:"";position:absolute;inset:0;z-index:1;background:
  radial-gradient(130% 90% at 82% 4%, rgba(224,162,74,.20), transparent 52%),
  linear-gradient(transparent 28%, rgba(20,19,15,.34) 60%, rgba(17,16,12,.84))}
.hero-overlay{position:relative;z-index:2;width:100%}
.hero-content{padding:clamp(3rem,9vw,7rem) 0 clamp(2.6rem,5vw,4rem);color:#fff;max-width:760px}
.hero-kicker{display:inline-flex;align-items:center;gap:.75rem;font-family:'Space Mono',monospace;
  font-size:.74rem;text-transform:uppercase;letter-spacing:.16em;color:rgba(255,255,255,.88);margin-bottom:1.7rem}
.hero-kicker::before{content:"";width:34px;height:2px;border-radius:2px;
  background:var(--lightline);box-shadow:0 0 10px 1px rgba(224,162,74,.75)}
/* Lo slogan grande: prima era ".hero h1", ora è un <p class="hero-title"> */
.hero .hero-title{font-family:'Bricolage Grotesque','Inter',sans-serif;
  font-size:clamp(2.9rem,8.4vw,6.4rem);font-weight:500;margin-bottom:1.5rem;
  letter-spacing:-.035em;line-height:.97;color:#fff;max-width:none}
/* L'H1 SEO ha l'aspetto del kicker: annullo peso e interlinea che arrivano da "h1,h2,h3" */
.hero h1.hero-kicker{font-weight:400;line-height:1.6}
.hero-content>p{font-size:clamp(1.05rem,2vw,1.32rem);font-weight:300;color:rgba(255,255,255,.9);
  max-width:46ch;margin-bottom:2.3rem}
.hero-btns{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:2.1rem}
.hero-rating{font-family:'Space Mono',monospace;font-size:.82rem;letter-spacing:.04em;color:rgba(255,255,255,.9)}

/* ===== STRISCIA FIDUCIA ===== */
.trust{background:var(--ink)}
.trust-in{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.9rem 2.6rem;
  padding:1.15rem 0;font-family:'Space Mono',monospace;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.trust-in span{display:inline-flex;align-items:center;gap:.75rem;color:rgba(255,255,255,.88)}
.trust-in span::before{content:"";width:18px;height:2px;border-radius:2px;
  background:var(--lightline);box-shadow:0 0 8px 0 rgba(224,162,74,.65)}

/* ===== SECTIONS ===== */
.sec{padding:clamp(4.5rem,10vw,8.5rem) 0;background:var(--chalk)}
.sec-soft{background:var(--pale)}
.sec-head{margin-bottom:clamp(2.8rem,5vw,4rem);max-width:660px}
.sec-head.center{text-align:center;margin-left:auto;margin-right:auto}
.sec-head h2{font-size:clamp(2.1rem,5.2vw,3.6rem);font-weight:500}
.sec-intro{margin-top:1.1rem;font-size:1.12rem;color:var(--ink-2);font-weight:400}
.sec-note{margin-top:1.8rem;font-size:.82rem;color:var(--ink-2);font-family:'Space Mono',monospace}
.sec-note.center{text-align:center}

/* ===== LAVORI ===== */
.works{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.2vw,30px)}
.work{position:relative}
.work .ph{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;
  background:var(--panel);box-shadow:var(--panel-sh)}
.work .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s var(--ease)}
/* "taglio di luce" che si accende sull'immagine al hover */
.work .ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--glow),transparent);
  opacity:0;transform:scaleX(.4);transform-origin:center;
  box-shadow:0 0 16px 1px rgba(224,162,74,.7);
  transition:opacity .4s var(--ease),transform .5s var(--ease)}
.work:hover .ph img{transform:scale(1.05)}
.work:hover .ph::after{opacity:1;transform:scaleX(1)}
.work figcaption{padding-top:1.15rem;display:flex;flex-direction:column;gap:.25rem}
.w-title{font-family:'Bricolage Grotesque',serif;font-size:1.32rem;font-weight:500;color:var(--ink);transition:color .25s}
.work:hover .w-title{color:#9a6f28}
.w-loc{font-family:'Space Mono',monospace;font-size:.76rem;letter-spacing:.04em;color:var(--ink-2)}

/* ===== SERVIZI ===== */
.serv-list{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.6rem,3vw,3rem) clamp(2.5rem,5vw,5rem)}
.serv{display:flex;gap:1.4rem;align-items:flex-start;padding-top:1.9rem;position:relative;
  border-top:1px solid var(--line)}
/* segmento di luce sul filo superiore */
.serv::before{content:"";position:absolute;top:-1px;left:0;width:46px;height:2px;
  background:var(--lightline);box-shadow:0 0 8px 0 rgba(224,162,74,.55)}
.serv-no{font-family:'Space Mono',monospace;font-size:.9rem;color:var(--glow);min-width:2.6ch;padding-top:.25rem;font-weight:700}
.serv h3{font-size:1.45rem;font-weight:500;margin-bottom:.5rem}
.serv p{color:var(--ink-2);font-size:1rem;font-weight:400}

/* ===== RECENSIONI ===== */
.recs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,1.8rem)}
.rec{padding:clamp(1.6rem,2.5vw,2rem);background:var(--panel);border-radius:var(--r);
  box-shadow:var(--panel-sh);display:flex;flex-direction:column;gap:1.1rem;position:relative}
.rec p{font-family:'Bricolage Grotesque',serif;font-size:1.18rem;line-height:1.5;color:var(--ink);font-weight:400}
.rec cite{font-style:normal;font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.04em;color:var(--ink-2)}
.rec-cta{text-align:center;margin-top:2.8rem}

/* ===== CONTATTI ===== */
.sec-contact{background:var(--pale)}
.contact-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:start}
.contact-text h2{font-size:clamp(2rem,4.6vw,3.1rem);font-weight:500;margin-bottom:1rem}
.contact-text>p{color:var(--ink-2);font-weight:400;margin-bottom:2.3rem;max-width:38ch}
.contact-list{list-style:none;display:flex;flex-direction:column;gap:1.4rem}
.contact-list li{display:flex;flex-direction:column;gap:.35rem;padding-bottom:1.4rem;border-bottom:1px solid var(--line)}
.contact-list li:last-child{border-bottom:none}
.cl-label{font-family:'Space Mono',monospace;font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-2)}
.contact-list a{font-family:'Bricolage Grotesque',serif;font-size:1.5rem;font-weight:500;color:var(--ink)}
.contact-list span{color:var(--ink-2);font-weight:400}
.form{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.8rem,3vw,2.6rem);box-shadow:var(--panel-sh)}
.f{margin-bottom:1.15rem}
.f label{display:block;font-size:.8rem;font-weight:500;margin-bottom:.45rem;color:var(--ink)}
.f input,.f select,.f textarea{width:100%;padding:.85em .95em;font-family:inherit;font-size:.98rem;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink);
  transition:border-color .2s,box-shadow .2s}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--glow);
  box-shadow:0 0 0 3px rgba(224,162,74,.18)}
.f textarea{resize:vertical}
.form-hint{font-size:.78rem;color:var(--ink-2);text-align:center;margin-top:.9rem;font-family:'Space Mono',monospace}

/* ===== FOOTER ===== */
.ftr{background:var(--graphite);color:rgba(255,255,255,.75);padding:clamp(3rem,5vw,4.2rem) 0 2.4rem;text-align:center}
.ftr-in{display:flex;flex-direction:column;align-items:center;gap:1rem}
.ftr .brand{color:#fff}
.ftr-zone{font-size:.9rem;color:rgba(255,255,255,.6);font-weight:300;max-width:54ch}
.ftr-meta{font-family:'Space Mono',monospace;font-size:.74rem;color:rgba(255,255,255,.5);letter-spacing:.03em}
.ftr-meta a{color:var(--glow)}

/* ===== ABOUT / CHI SIAMO ===== */
.about-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.about-photo{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;
  background:var(--panel);box-shadow:var(--panel-sh)}
.about-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.about-text h2{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:500;margin-bottom:1.5rem}
.about-text p{color:var(--ink-2);font-weight:400;margin-bottom:1.1rem}
.about-text p:last-child{margin-bottom:0}
.about-text strong{color:var(--ink);font-weight:600}

/* ===== FAQ ===== */
.faq-list{max-width:800px;margin:0 auto}
.faq{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1.5rem 2.5rem 1.5rem 0;position:relative;
  font-family:'Bricolage Grotesque',serif;font-size:1.22rem;font-weight:500;color:var(--ink);transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:2px;top:50%;width:13px;height:2px;
  background:var(--glow);transform:translateY(-50%);box-shadow:0 0 8px 0 rgba(224,162,74,.6)}
.faq summary::before{content:"";position:absolute;right:8px;top:50%;width:2px;height:13px;
  background:var(--glow);transform:translateY(-50%);transition:transform .3s var(--ease);box-shadow:0 0 8px 0 rgba(224,162,74,.6)}
.faq[open] summary::before{transform:translateY(-50%) scaleY(0)}
.faq summary:hover{color:#9a6f28}
.faq-a{padding:0 2.5rem 1.7rem 0}
.faq-a p{color:var(--ink-2);font-weight:400}

/* ===== PAGINA CITTÀ ===== */
.page-hero{padding:clamp(8rem,13vw,11rem) 0 clamp(2.6rem,5vw,4rem);background:var(--graphite);color:#fff;position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 88% 0%,rgba(224,162,74,.16),transparent 55%);pointer-events:none}
.page-hero .wrap{position:relative;z-index:1}
.page-hero .eyebrow{color:rgba(255,255,255,.82)}
.page-hero h1{font-size:clamp(2.5rem,6.4vw,4.2rem);font-weight:500;margin-bottom:1.2rem;color:#fff;letter-spacing:-.03em}
.page-lead{font-size:clamp(1.05rem,2vw,1.25rem);color:rgba(255,255,255,.82);font-weight:300;max-width:54ch;margin-bottom:2.1rem}
.narrow{max-width:800px}
.narrow h2{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:500;margin:2.8rem 0 1rem}
.narrow h2:first-child{margin-top:0}
.narrow p{color:var(--ink-2);font-weight:400;margin-bottom:1.1rem}
.narrow strong{color:var(--ink);font-weight:600}
.page-cta{margin-top:3.6rem;padding:clamp(2rem,4vw,3rem);background:var(--panel);border-radius:var(--r);
  box-shadow:var(--panel-sh);text-align:center}
.page-cta h3{font-size:1.6rem;font-weight:500;margin-bottom:.6rem}
.page-cta>p{color:var(--ink-2);margin-bottom:1.6rem;font-weight:400}
.page-cta .hero-btns{justify-content:center}
.page-back{margin-top:1.8rem}

/* ===== WHATSAPP FLOAT ===== */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:60;width:56px;height:56px;border-radius:50%;
  background:#25A65B;color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(37,166,91,.34);transition:transform .25s var(--ease)}
.wa-float:hover{transform:scale(1.08)}

/* ===== REVEAL ===== */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].in{opacity:1;transform:none}

/* ===== FEATURE / PROGETTAZIONE (banda scura, atmosfera render) ===== */
.feature{background:var(--graphite);color:#fff;position:relative;overflow:hidden}
.feature::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 60% at 15% 100%,rgba(224,162,74,.14),transparent 55%)}
.feature .wrap{position:relative;z-index:1}
.feature .eyebrow{color:rgba(255,255,255,.78)}
.feature h2{color:#fff}
.feature .sec-intro{color:rgba(255,255,255,.72)}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px);margin-top:clamp(2rem,4vw,3rem)}
.feature-grid figure{position:relative;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;
  box-shadow:0 30px 60px -34px rgba(0,0,0,.8)}
.feature-grid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.feature-cap{margin-top:1.7rem;font-family:'Space Mono',monospace;font-size:.76rem;color:rgba(255,255,255,.55)}

/* ===== LAVORI COMMERCIALI (McDonald's) ===== */
.mc-grid{display:grid;grid-template-columns:1.55fr 1fr;grid-template-rows:1fr 1fr;
  gap:clamp(12px,1.6vw,20px);margin-top:clamp(2rem,4vw,3rem)}
.mc-grid figure{position:relative;border-radius:var(--r);overflow:hidden;min-height:200px;box-shadow:var(--panel-sh)}
.mc-grid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease)}
.mc-grid figure:hover img{transform:scale(1.05)}
.mc-a{grid-row:1 / span 2}
.mc-cap{margin-top:1.5rem;font-family:'Space Mono',monospace;font-size:.76rem;color:var(--ink-2)}

/* ===== RESPONSIVE ===== */
@media(max-width:860px){
  .nav-toggle{display:flex}
  .nav{position:absolute;top:76px;left:0;right:0;flex-direction:column;gap:0;margin-left:0;
    padding:.4rem clamp(22px,5vw,52px) 1.1rem;
    background:rgba(233,231,225,.98);backdrop-filter:blur(14px);
    border-top:1px solid var(--line);box-shadow:0 16px 30px -10px rgba(35,33,29,.18);
    opacity:0;transform:translateY(-10px);pointer-events:none;
    transition:opacity .25s var(--ease),transform .25s var(--ease)}
  .hdr.nav-open .nav{opacity:1;transform:none;pointer-events:auto}
  .nav a,.hdr.solid .nav a{color:var(--ink);padding:1rem 0;border-bottom:1px solid var(--line);font-size:1.05rem}
  .nav a:last-child{border-bottom:none}
  .nav-call{display:block;color:#9a6f28!important;font-weight:600}
  .works,.serv-list,.recs,.contact-in,.feature-grid,.about-in{grid-template-columns:1fr}
  .recs{gap:1.4rem}
  .mc-grid{grid-template-columns:1fr;grid-template-rows:none}
  .mc-a{grid-row:auto}
  .mc-grid figure{aspect-ratio:16/10;min-height:0}
}
@media(max-width:560px){
  .hdr-call{display:none}
  .hero{min-height:90svh}
}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}[data-reveal]{opacity:1;transform:none}}