/* ==========================================================================
   MADERA — interior design.  Sito DIMOSTRATIVO di GTK Studios.
   Registro: chiaro, arioso, editoriale. Serif nei titoli, molta aria,
   un solo accento terracotta. Volutamente lontano dagli altri due demo.
   ========================================================================== */

@font-face{ font-family:'Playfair'; font-weight:400; font-display:swap;
  src:url('../../assets/fonts/playfair-400.woff2') format('woff2'); }
@font-face{ font-family:'Playfair'; font-weight:600; font-display:swap;
  src:url('../../assets/fonts/playfair-600.woff2') format('woff2'); }
@font-face{ font-family:'Archivo'; font-weight:400; font-display:swap;
  src:url('../../assets/fonts/archivo-400.woff2') format('woff2'); }
@font-face{ font-family:'Archivo'; font-weight:500; font-display:swap;
  src:url('../../assets/fonts/archivo-500.woff2') format('woff2'); }

:root{
  --bg:#F7F4EF; --surface:#FFFFFF; --ink:#23201C; --muted:#6B6459;
  --terra:#B4533A; --sage:#7C8B72; --line:rgba(35,32,28,.14);
  --serif:'Playfair', Georgia, serif;
  --sans:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --pad:clamp(20px,5vw,72px);
  --e1:0 1px 2px rgba(35,32,28,.04), 0 6px 20px rgba(35,32,28,.06);
  --e2:0 8px 20px rgba(35,32,28,.08), 0 24px 60px rgba(35,32,28,.10);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6; overflow-x:hidden; }
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--terra); outline-offset:3px; }
::selection{ background:var(--terra); color:#fff; }

/* --- Barra: chiarisce subito che il sito e un esempio ------------------- */
.demobar{
  background:var(--ink); color:#F2EFE9; font-size:12.5px;
  padding:9px var(--pad); display:flex; gap:14px; flex-wrap:wrap;
  align-items:center; justify-content:space-between;
}
.demobar b{ font-weight:500; }
.demobar a{ white-space:nowrap; padding:5px 13px; border:1px solid currentColor;
  border-radius:99px; font-weight:500; transition:background .2s, color .2s; }
.demobar a:hover{ background:#F2EFE9; color:var(--ink); }

/* --- Intestazione ------------------------------------------------------- */
.hdr{ display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--pad); border-bottom:1px solid var(--line); }
.brand{ font-family:var(--serif); font-size:24px; letter-spacing:.14em; font-weight:600; }
.brand small{ display:block; font-family:var(--sans); font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-top:2px; }
.nav{ display:none; gap:30px; font-size:14px; }
@media(min-width:820px){ .nav{ display:flex; } }
.nav a{ color:var(--muted); padding:6px 0; border-bottom:1px solid transparent; transition:.25s; }
.nav a:hover{ color:var(--ink); border-bottom-color:var(--terra); }

/* --- Tipografia --------------------------------------------------------- */
.display{ font-family:var(--serif); font-weight:400;
  font-size:clamp(2.4rem,6.4vw,5rem); line-height:1.02; letter-spacing:-.02em; }
.h2{ font-family:var(--serif); font-weight:400;
  font-size:clamp(1.9rem,4vw,3rem); line-height:1.1; letter-spacing:-.01em; }
.h3{ font-family:var(--serif); font-size:1.35rem; font-weight:600; line-height:1.25; }
.kicker{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--terra); }
.lead{ font-size:1.08rem; color:var(--muted); max-width:52ch; }
.body{ color:var(--muted); max-width:60ch; }

.sec{ padding:clamp(64px,9vw,120px) var(--pad); }
.sec--tint{ background:var(--surface); }

/* --- Hero --------------------------------------------------------------- */
.hero{ padding:clamp(48px,7vw,88px) var(--pad) 0; }
.hero__top{ display:grid; gap:26px; margin-bottom:44px; }
@media(min-width:900px){
  .hero__top{ grid-template-columns:1.25fr .75fr; align-items:end; gap:56px; }
}

/* --- Prima / dopo ------------------------------------------------------- */
.ba{
  position:relative; aspect-ratio:16/10; overflow:hidden; cursor:ew-resize;
  border-radius:2px; box-shadow:var(--e2); background:#ddd; touch-action:none;
  --x:50%;
}
.ba__layer{ position:absolute; inset:0; }
.ba__layer svg{ width:100%; height:100%; display:block; }
/* Lo strato "dopo" occupa la meta destra: a sinistra resta il "prima",
   come dicono le due etichette. Portando la linea a sinistra si scopre
   la stanza finita. */
.ba__after{ clip-path:inset(0 0 0 var(--x)); }
.ba__line{
  position:absolute; top:0; bottom:0; left:var(--x); width:2px; margin-left:-1px;
  background:#fff; box-shadow:0 0 0 1px rgba(35,32,28,.18); pointer-events:none;
}
.ba__grip{
  position:absolute; top:50%; left:var(--x); width:46px; height:46px;
  margin:-23px 0 0 -23px; border-radius:50%; background:#fff;
  box-shadow:var(--e1); display:grid; place-items:center; pointer-events:none;
  font-size:13px; color:var(--ink); letter-spacing:.06em;
}
.ba__tag{
  position:absolute; bottom:16px; z-index:2; pointer-events:none;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  background:rgba(255,255,255,.92); color:var(--ink); padding:6px 12px; border-radius:2px;
}
.ba__tag--l{ left:16px; } .ba__tag--r{ right:16px; }
.ba__hint{ margin-top:14px; font-size:13px; color:var(--muted); text-align:center; }

/* --- Servizi ------------------------------------------------------------ */
.svc{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:44px; }
@media(min-width:760px){ .svc{ grid-template-columns:repeat(3,1fr); } }
.svc__i{ background:var(--bg); padding:36px 28px; transition:background .3s; }
.sec--tint .svc__i{ background:var(--surface); }
.svc__i:hover{ background:#F0EBE2; }
.svc__n{ font-family:var(--serif); font-size:2rem; color:var(--terra); line-height:1; }
.svc__i h3{ margin:14px 0 8px; }

/* --- Progetti ----------------------------------------------------------- */
.prj{ display:grid; gap:28px; margin-top:44px; }
@media(min-width:820px){ .prj{ grid-template-columns:repeat(3,1fr); } }
.prj__c figure{ margin:0; overflow:hidden; border-radius:2px; box-shadow:var(--e1); background:#fff; }
.prj__c svg{ transition:transform .7s cubic-bezier(.16,1,.3,1); }
.prj__c:hover svg{ transform:scale(1.04); }
.prj__c h3{ margin-top:16px; }
.prj__meta{ font-size:12.5px; color:var(--muted); letter-spacing:.04em; }

/* --- Metodo ------------------------------------------------------------- */
.steps{ display:grid; gap:30px; margin-top:44px; counter-reset:s; }
@media(min-width:760px){ .steps{ grid-template-columns:repeat(4,1fr); } }
.step{ padding-top:20px; border-top:2px solid var(--terra); }
.step h3{ font-size:1.1rem; margin-bottom:6px; }

/* --- Contatti ----------------------------------------------------------- */
.cta{ display:grid; gap:36px; }
@media(min-width:900px){ .cta{ grid-template-columns:1fr 1fr; gap:64px; } }
.form{ background:var(--surface); padding:32px; box-shadow:var(--e1); }
.f{ display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.f label{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.f input,.f textarea{ font:inherit; padding:12px; min-height:46px; background:var(--bg);
  border:1px solid var(--line); border-radius:2px; }
.f textarea{ min-height:110px; resize:vertical; }
.btn{ display:inline-block; font:inherit; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  background:var(--terra); color:#fff; border:0; padding:16px 30px; min-height:52px;
  cursor:pointer; transition:background .25s, transform .2s; }
.btn:hover{ background:#9C4530; transform:translateY(-2px); }
.note{ font-size:12.5px; color:var(--muted); margin-top:12px; }
.info li{ padding:14px 0; border-bottom:1px solid var(--line); }
.info b{ display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); font-weight:400; margin-bottom:3px; }

/* --- Footer ------------------------------------------------------------- */
.ftr{ background:var(--ink); color:#EDE8E0; padding:56px var(--pad) 28px; }
.ftr .brand{ color:#fff; }
.ftr__b{ margin-top:36px; padding-top:18px; border-top:1px solid rgba(255,255,255,.16);
  font-size:12.5px; color:rgba(237,232,224,.65); display:flex; gap:16px;
  flex-wrap:wrap; justify-content:space-between; }

/* --- Ingressi in scroll -------------------------------------------------- */
.js .rv{ opacity:0; transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0)*80ms); }
.js .rv.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .rv{ transform:none; transition-duration:.25s; }
  .prj__c:hover svg{ transform:none; }
  .btn:hover{ transform:none; }
}

/* Rimando a chi ha fatto il sito, in fondo: chi arriva qui ha visto tutto
   ed e il momento giusto per dirgli chi c'e dietro. */
.back{ text-align:center; background:#F0EBE2; }
.back .h2{ margin-bottom:14px; }
.back .body{ margin:0 auto; }
.back .btn{ margin-top:26px; }