/* =========================================================================
   Società Gestioni Lavori — Design System
   Brand: SGL red on white. Type: Fraunces (display) + Manrope (UI/body).
   ========================================================================= */

/* ----- Tokens ----------------------------------------------------------- */
:root {
  /* Brand */
  --red:        #E1251B;   /* brand graphic red */
  --red-cta:    #C81D13;   /* darker red for buttons -> white text AA */
  --red-ink:    #B5170F;   /* red text on white (AA) */
  --red-700:    #9C140D;
  --red-050:    #FDF2F1;   /* tint background */
  --red-100:    #FBE3E1;

  /* Neutrals */
  --ink:        #16181D;   /* near-black text */
  --ink-2:      #3A3F49;   /* secondary text */
  --ink-3:      #6B7280;   /* muted */
  --line:       #E6E7EB;   /* hairline border */
  --line-2:     #D4D6DC;
  --surface:    #FFFFFF;
  --surface-2:  #F7F7F5;   /* warm off-white section */
  --surface-3:  #F1F1EE;
  --charcoal:   #16181D;   /* dark footer */
  --charcoal-2: #20232B;

  /* Effects */
  --radius:     14px;
  --radius-sm:  10px;
  --radius-lg:  22px;
  --radius-pill:999px;
  --shadow-sm:  0 1px 2px rgba(16,18,29,.06), 0 1px 3px rgba(16,18,29,.05);
  --shadow:     0 8px 24px -10px rgba(16,18,29,.18), 0 2px 6px -2px rgba(16,18,29,.08);
  --shadow-lg:  0 30px 60px -22px rgba(16,18,29,.34);
  --ring:       0 0 0 3px rgba(225,37,27,.30);

  /* Layout */
  --container:  1200px;
  --container-wide: 1340px;
  --gutter:     clamp(1.15rem, 4vw, 2.5rem);

  /* Type scale (fluid) */
  --fs-hero:   clamp(2.5rem, 6.2vw, 4.6rem);
  --fs-h1:     clamp(2.1rem, 4.6vw, 3.4rem);
  --fs-h2:     clamp(1.7rem, 3.4vw, 2.5rem);
  --fs-h3:     clamp(1.25rem, 2vw, 1.55rem);
  --fs-lead:   clamp(1.05rem, 1.5vw, 1.3rem);
  --fs-body:   1.0625rem;
  --fs-sm:     0.9rem;
  --fs-xs:     0.78rem;

  --ease:      cubic-bezier(.22,.61,.36,1);
  --t:         .28s var(--ease);

  --z-nav: 100;
  --z-overlay: 800;
  --z-modal: 1000;
}

/* ----- Reset ------------------------------------------------------------ */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg,video { display: block; max-width: 100%; height: auto; }
img { background: var(--surface-3); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
ul { list-style: none; padding: 0; }
input,textarea,select,button { font: inherit; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 4px; }

/* ----- Typography ------------------------------------------------------- */
h1,h2,h3,h4 { font-family: "Fraunces", Georgia, "Times New Roman", serif;
  line-height: 1.08; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
p { text-wrap: pretty; }
strong { font-weight: 700; }

.display { font-size: var(--fs-hero); font-weight: 600; letter-spacing: -.02em; }
.lead { font-size: var(--fs-lead); color: var(--ink-2); line-height: 1.6; }
.eyebrow {
  font-family: "Manrope", sans-serif; font-weight: 700; font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--red-ink);
  display: inline-flex; align-items: center; gap: .55rem;
}
.eyebrow::before { content:""; width: 26px; height: 2px; background: var(--red); border-radius: 2px; }
.muted { color: var(--ink-3); }

/* ----- Layout ----------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container.wide { max-width: var(--container-wide); }
.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section.tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section.alt { background: var(--surface-2); }
.section-head { max-width: 64ch; margin-bottom: clamp(2rem,4vw,3.2rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-top: .7rem; }
.section-head .lead { margin-top: 1rem; }

.grid { display: grid; gap: clamp(1rem, 2.4vw, 1.8rem); }
.cols-2 { grid-template-columns: repeat(2,1fr); }
.cols-3 { grid-template-columns: repeat(3,1fr); }
.cols-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 980px){ .cols-4{grid-template-columns:repeat(2,1fr);} .cols-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 640px){ .cols-2,.cols-3,.cols-4{grid-template-columns:1fr;} }

/* ----- Buttons ---------------------------------------------------------- */
.btn {
  --pad: .9rem 1.5rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: var(--pad); border-radius: var(--radius-pill);
  font-weight: 700; font-size: .98rem; letter-spacing: .01em;
  transition: transform var(--t), background var(--t), color var(--t), box-shadow var(--t), border-color var(--t);
  white-space: nowrap; cursor: pointer; border: 1.5px solid transparent;
}
.btn svg { width: 1.15em; height: 1.15em; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--red-cta); color: #fff; box-shadow: 0 10px 24px -12px rgba(200,29,19,.8); }
.btn-primary:hover { background: var(--red-700); box-shadow: 0 14px 30px -12px rgba(200,29,19,.9); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-outline { border-color: var(--line-2); color: var(--ink); background: #fff; }
.btn-outline:hover { border-color: var(--ink); }
.btn-ghost { color: var(--ink); padding-inline: .6rem; }
.btn-ghost:hover { color: var(--red-ink); }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: #f1f1ee; }
.btn-lg { --pad: 1.05rem 1.9rem; font-size: 1.05rem; }
.btn-block { width: 100%; }
.back-immobili { margin-bottom: 1.6rem; }
.link-arrow { display:inline-flex; align-items:center; gap:.45rem; font-weight:700; color:var(--red-ink); }
.link-arrow svg { transition: transform var(--t); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ----- Chips / badges --------------------------------------------------- */
.chip {
  display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .8rem;
  border-radius: var(--radius-pill); font-size:.78rem; font-weight:700; letter-spacing:.03em;
  background: var(--surface-3); color: var(--ink-2);
}
.badge {
  display:inline-flex; align-items:center; gap:.4rem; padding:.42rem .8rem;
  border-radius: var(--radius-pill); font-size:.74rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
}
.badge-sale { background: var(--red); color:#fff; }
.badge-done { background: var(--ink); color:#fff; }
.badge-class { background:#fff; color: var(--red-ink); border:1.5px solid var(--red-100); }
.badge-dot::before { content:""; width:7px;height:7px;border-radius:50%;background:currentColor; }
.badge-build { background:#fff; color: var(--ink); border:1.5px solid var(--line-2); }
.badge-build::before {
  content:""; width:7px; height:7px; border-radius:50%; background: var(--red);
  box-shadow: 0 0 0 0 rgba(225,37,27,.55); animation: badgePulse 2.2s infinite;
}
@keyframes badgePulse {
  70% { box-shadow: 0 0 0 7px rgba(225,37,27,0); }
  100% { box-shadow: 0 0 0 0 rgba(225,37,27,0); }
}
@media (prefers-reduced-motion: reduce) { .badge-build::before { animation: none; } }

/* =========================================================================
   Header / nav
   ========================================================================= */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: rgba(255,255,255,.86); backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  height: 76px; }
.brand { display:flex; align-items:center; gap:.6rem; }
.brand img { height: 42px; width:auto; background: transparent; }
.nav-links { display:flex; align-items:center; gap:.35rem; }
.nav-links a { padding:.55rem .85rem; border-radius:10px; font-weight:600; font-size:.97rem;
  color: var(--ink-2); transition: color var(--t), background var(--t); }
.nav-links a:hover { color: var(--ink); background: var(--surface-2); }
.nav-links a.active { color: var(--red-ink); }
.nav-cta { display:flex; align-items:center; gap:.7rem; }
.nav-tel { display:inline-flex; align-items:center; gap:.5rem; font-weight:700; color:var(--ink); }
.nav-tel svg { width:18px;height:18px; color: var(--red-ink); }
.nav-toggle { display:none; width:46px;height:46px; border-radius:12px; border:1px solid var(--line);
  align-items:center; justify-content:center; }
.nav-toggle svg{ width:24px;height:24px; }

@media (max-width: 1024px){
  .nav-links, .nav-cta .nav-tel { display:none; }
  .nav-toggle { display:inline-flex; }
}

/* mobile drawer */
.drawer { position: fixed; inset:0; z-index: var(--z-modal); display:none; }
.drawer.open { display:block; }
.drawer-scrim { position:absolute; inset:0; background:rgba(16,18,29,.5); opacity:0; transition:opacity var(--t); }
.drawer.open .drawer-scrim { opacity:1; }
.drawer-panel { position:absolute; top:0; right:0; height:100%; width:min(86vw,360px);
  background:#fff; box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform var(--t);
  display:flex; flex-direction:column; padding: 1.1rem; }
.drawer.open .drawer-panel { transform: translateX(0); }
.drawer-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.drawer-head img { height:38px; width:auto; max-width:100%; object-fit:contain; background: transparent; }
.drawer-links { display:flex; flex-direction:column; gap:.2rem; margin-top:.5rem; }
.drawer-links a { padding:.8rem .6rem; border-radius:12px; font-weight:600; font-size:1.03rem; line-height:1.35;
  border-bottom:1px solid var(--line); }
.drawer-links a:hover { background: var(--surface-2); }
.drawer .btn { margin-top: 1.2rem; }
.drawer-contact {
  margin-top:auto;
  padding-top:1.2rem;
  border-top:1px solid var(--line);
  display:grid;
  gap:.75rem;
}
.drawer-contact-item {
  display:flex;
  align-items:flex-start;
  gap:.62rem;
  color:var(--ink-2);
  font-size:.92rem;
  line-height:1.5;
}
.drawer-contact-item svg {
  width:17px;
  height:17px;
  flex:none;
  color:var(--red-ink);
  margin-top:.12rem;
}
.drawer-contact-item:hover { color:var(--ink); }
.drawer-office {
  margin-top:.35rem;
  padding:.75rem .8rem;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-2);
}
.drawer-office-title {
  margin-bottom:.45rem;
  font-size:.76rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--red-ink);
}

@media (min-width: 1025px){
  .nav-inner { height: 98px; }
  .brand img { height: 60px; }
}

/* =========================================================================
   Hero
   ========================================================================= */
.hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 83% 15%, rgba(225,37,27,.10), transparent 24rem),
    linear-gradient(135deg, #fff 0%, #fbfaf8 54%, #f2efea 100%);
}
.hero::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.42;
  background-image:
    linear-gradient(rgba(22,24,29,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22,24,29,.035) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, transparent 45%, #000 80%);
  mask-image:linear-gradient(90deg, transparent 0%, transparent 45%, #000 80%);
}
.hero-main {
  display:grid;
  grid-template-columns:minmax(0,.93fr) minmax(480px,1.07fr);
  align-items:center;
  gap:clamp(2rem,5vw,5.5rem);
  min-height:clamp(590px,70vh,720px);
  padding-block:clamp(3.4rem,6vw,6rem) clamp(2.5rem,5vw,4.5rem);
}
.hero-copy { position:relative; z-index:2; max-width:660px; }
.hero .display {
  max-width:12.5ch;
  margin-top:1rem;
  color:var(--ink);
  font-size:clamp(3rem,5.2vw,5rem);
  line-height:1.02;
  text-wrap:balance;
}
.hero .lead { max-width:58ch; margin-top:1.45rem; color:var(--ink-2); }
.hero-cta { display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }
.hero-eyebrow { color:#fff; }
.hero-eyebrow::before { background:#fff; }
.hero-proof {
  display:flex;
  align-items:center;
  gap:.55rem;
  margin-top:1.3rem;
  color:var(--ink-2);
  font-size:.88rem;
  font-weight:700;
}
.hero-proof svg { width:18px; height:18px; color:var(--red-ink); }

.hero-collage { position:relative; min-height:560px; }
.hero-collage::before {
  content:"";
  position:absolute;
  left:3%;
  bottom:3%;
  width:42%;
  height:34%;
  border-radius:28px;
  background:var(--red);
  transform:rotate(-4deg);
}
.hero-shot {
  position:absolute;
  overflow:hidden;
  margin:0;
  border:7px solid rgba(255,255,255,.96);
  border-radius:26px;
  background:var(--surface-3);
  box-shadow:var(--shadow-lg);
}
.hero-shot img { width:100%; height:100%; object-fit:cover; }
.hero-shot figcaption {
  position:absolute;
  inset:auto .55rem .55rem;
  padding:.62rem .75rem;
  border:1px solid rgba(255,255,255,.2);
  border-radius:12px;
  background:rgba(22,24,29,.78);
  backdrop-filter:blur(8px);
  color:rgba(255,255,255,.84);
  font-size:.69rem;
  line-height:1.35;
}
.hero-shot figcaption span {
  display:block;
  color:#fff;
  font-size:.78rem;
  font-weight:800;
}
.hero-shot-main { inset:7% 22% 9% 0; z-index:1; }
.hero-shot-main img { object-position:center; }
.hero-shot-exterior { z-index:3; top:0; right:0; width:37%; height:38%; transform:rotate(2deg); }
.hero-shot-exterior img { object-position:center; }
.hero-shot-energy { z-index:2; right:1%; bottom:0; width:42%; height:42%; transform:rotate(-2deg); }
.hero-shot-energy img { object-position:center; }
.hero-collage-mark {
  position:absolute;
  z-index:4;
  top:46%;
  right:1%;
  padding:.8rem 1rem;
  border-radius:14px 0 0 14px;
  background:#fff;
  box-shadow:var(--shadow);
  color:var(--ink-2);
  font-size:.72rem;
  line-height:1.15;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-collage-mark span,.hero-collage-mark strong { display:block; }
.hero-collage-mark strong { margin-top:.18rem; color:var(--red-ink); font-size:.92rem; }

.hero-stats {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  padding-block:1.6rem;
  border-top:1px solid var(--line-2);
}
.hero-stat { padding-inline:clamp(.8rem,2.5vw,2rem); border-left:1px solid var(--line); }
.hero-stat:first-child { padding-left:0; border-left:0; }
.hero-stat .n {
  font-family:"Fraunces",serif;
  font-size:clamp(1.65rem,2.5vw,2.25rem);
  font-weight:600;
  line-height:1;
  color:var(--ink);
}
.hero-stat .l {
  margin-top:.42rem;
  color:var(--ink-3);
  font-size:.75rem;
  letter-spacing:.055em;
  line-height:1.35;
  text-transform:uppercase;
}

@media (max-width:1080px) {
  .hero-main { grid-template-columns:minmax(0,.9fr) minmax(400px,1.1fr); gap:2rem; }
  .hero-collage { min-height:500px; }
  .hero .display { font-size:clamp(2.8rem,5.4vw,4.25rem); }
}
@media (max-width:860px) {
  .hero-main { grid-template-columns:1fr; min-height:0; padding-top:3.5rem; }
  .hero-copy { max-width:720px; }
  .hero .display { max-width:14ch; }
  .hero-collage { min-height:520px; }
  .hero-stats { grid-template-columns:repeat(2,1fr); }
  .hero-stat { padding:1.15rem; }
  .hero-stat:nth-child(odd) { padding-left:0; border-left:0; }
  .hero-stat:nth-child(n+3) { border-top:1px solid var(--line); }
}
@media (max-width:560px) {
  .hero-main { padding-top:2.7rem; padding-bottom:2.5rem; }
  .hero .display { font-size:clamp(2.55rem,12vw,3.55rem); }
  .hero .lead { font-size:1rem; }
  .hero-cta { align-items:stretch; }
  .hero-cta .btn { width:100%; }
  .hero-collage { min-height:390px; margin-inline:-.35rem; }
  .hero-shot { border-width:5px; border-radius:19px; }
  .hero-shot figcaption { display:none; }
  .hero-shot-main { inset:6% 18% 8% 0; }
  .hero-shot-exterior { width:36%; height:36%; }
  .hero-shot-energy { width:42%; height:40%; }
  .hero-collage-mark { top:44%; font-size:.61rem; }
  .hero-collage-mark strong { font-size:.75rem; }
  .hero-stats { padding-block:.7rem 1.2rem; }
  .hero-stat .n { font-size:1.55rem; }
  .hero-stat .l { font-size:.67rem; }
}

/* page hero (smaller, for inner pages) */
.pagehero { position:relative; isolation:isolate; color:#fff; }
.pagehero-bg{ position:absolute; inset:0; z-index:-2; }
.pagehero-bg img{ width:100%;height:100%;object-fit:cover; }
.pagehero::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(16,18,29,.42), rgba(16,18,29,.72)); }
.pagehero-inner{ padding-block: clamp(3.5rem,9vw,6rem) clamp(2.2rem,5vw,3.4rem); }
.pagehero h1{ color:#fff; font-size: var(--fs-h1); max-width: 22ch; }
.pagehero .lead{ color:rgba(255,255,255,.9); margin-top:1rem; max-width:60ch; }

/* breadcrumb */
.crumbs{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; font-size:.85rem; color: var(--ink-3); }
.crumbs a:hover{ color:var(--red-ink); }
.crumbs .sep{ opacity:.5; }
.pagehero .crumbs{ color:rgba(255,255,255,.8); margin-bottom:1.1rem; }
.pagehero .crumbs a:hover{ color:#fff; }

/* =========================================================================
   Cards
   ========================================================================= */
/* service / value card */
.feature {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.4rem,2.5vw,1.9rem); height:100%;
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.feature:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: transparent; }
.feature .ic { width:52px;height:52px; border-radius:14px; display:grid;place-items:center;
  background: var(--red-050); color: var(--red-ink); margin-bottom:1.1rem; }
.feature .ic svg{ width:26px;height:26px; }
.feature h3{ margin-bottom:.5rem; }
.feature p{ color: var(--ink-2); font-size:.98rem; }

/* numbered value */
.value { display:flex; gap:1rem; }
.value .num{ font-family:"Fraunces",serif; font-size:1.6rem; font-weight:600; color:var(--red);
  line-height:1; flex:none; width:2.4rem; }
.value h3{ font-size:1.12rem; margin-bottom:.35rem; }
.value p{ color:var(--ink-2); font-size:.96rem; }

/* certification card */
.cert{ display:flex; gap:1.1rem; align-items:flex-start; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:1.5rem 1.6rem; }
.cert .seal{ width:56px;height:56px;flex:none;border-radius:50%;display:grid;place-items:center;
  background: var(--ink); color:#fff; }
.cert .seal svg{ width:28px;height:28px; }
.cert h3{ font-family:"Manrope",sans-serif; font-size:1.05rem; font-weight:800; letter-spacing:-.01em; }
.cert .sub{ color:var(--red-ink); font-weight:700; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; margin:.15rem 0 .5rem; }
.cert p{ color:var(--ink-2); font-size:.93rem; }

/* property card */
.pcard{ position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius: var(--radius-lg); overflow:hidden; transition: box-shadow var(--t), transform var(--t);
  height:100%; }
.pcard:hover{ box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.pcard-media{ position:relative; aspect-ratio: 4/3; overflow:hidden; }
.pcard-media img{ width:100%;height:100%;object-fit:cover; transition: transform .6s var(--ease); }
.pcard:hover .pcard-media img{ transform: scale(1.05); }
.pcard-badges{ position:absolute; top:.9rem; left:.9rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.pcard-body{ padding: 1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.pcard .loc{ display:inline-flex; align-items:center; gap:.4rem; color:var(--ink-3); font-size:.86rem; font-weight:600; }
.pcard .loc svg{ width:15px;height:15px; color:var(--red-ink); }
.pcard h3{ font-size:1.3rem; margin:.5rem 0 .4rem; }
.pcard .cat{ font-size:.82rem; color:var(--ink-3); font-weight:600; }
.pcard p{ color:var(--ink-2); font-size:.95rem; margin-top:.7rem; }
.pcard-foot{ margin-top:auto; padding-top:1.1rem; display:flex; align-items:center; justify-content:space-between; }
.pcard .stretched{ position:absolute; inset:0; z-index:1; }

/* spec list */
.specs{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem 1.6rem; }
@media (max-width:640px){ .specs{ grid-template-columns:1fr; } }
.specs li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.98rem; color:var(--ink-2); }
.specs li svg{ width:20px;height:20px;flex:none;color:var(--red-ink);margin-top:.15rem; }

/* info row (key facts on property page) */
.facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.fact{ background:#fff; padding:1.2rem 1.3rem; }
.fact .k{ font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
.fact .v{ font-family:"Fraunces",serif; font-size:1.25rem; font-weight:600; margin-top:.3rem; }
@media (max-width:640px){
  .facts{ grid-template-columns:1fr; }
  .fact{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:.95rem 1.1rem; }
  .fact .k{ margin-top:0; }
  .fact .v{ margin-top:0; font-size:1.05rem; text-align:right; }
}

/* =========================================================================
   Gallery + filters
   ========================================================================= */
.gallery-filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.6rem; }
.gallery-filters button{ padding:.55rem 1.05rem; border-radius:var(--radius-pill);
  font-weight:700; font-size:.9rem; color:var(--ink-2); background:var(--surface-2);
  border:1.5px solid transparent; transition: all var(--t); }
.gallery-filters button:hover{ color:var(--ink); }
.gallery-filters button.active{ background:var(--ink); color:#fff; }
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.5rem,1.2vw,.9rem); }
@media (max-width:900px){ .gallery{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:420px){ .gallery{ grid-template-columns:1fr; } }
.gallery figure{ position:relative; margin:0; aspect-ratio:4/3;
  border-radius:var(--radius-sm); overflow:hidden; cursor:zoom-in; background:var(--surface-3); }
.gallery figure img{ width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease), filter var(--t); }
.gallery figure:hover img{ transform:scale(1.04); }
.gallery figure::after{ content:""; position:absolute; inset:0; background:rgba(16,18,29,0); transition:background var(--t); }
.gallery figure:hover::after{ background:rgba(16,18,29,.08); }
.gallery figure .tag{ position:absolute; left:.6rem; bottom:.6rem; z-index:2; opacity:0; transform:translateY(6px);
  transition: all var(--t); }
.gallery figure:hover .tag{ opacity:1; transform:none; }
.gallery figure.hide{ display:none; }

/* lightbox */
.lb{ position:fixed; inset:0; z-index:var(--z-modal); background:rgba(10,11,15,.94);
  display:none; align-items:center; justify-content:center; opacity:0; transition:opacity var(--t); }
.lb.open{ display:flex; opacity:1; }
.lb img{ max-width:92vw; max-height:84vh; border-radius:8px; box-shadow:var(--shadow-lg); }
.lb-cap{ position:absolute; bottom:1.3rem; left:0; right:0; text-align:center; color:rgba(255,255,255,.8); font-size:.9rem; }
.lb-btn{ position:absolute; top:50%; transform:translateY(-50%); width:54px;height:54px;border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; display:grid;place-items:center; transition:background var(--t); }
.lb-btn:hover{ background:rgba(255,255,255,.25); }
.lb-prev{ left:clamp(.6rem,3vw,2rem); } .lb-next{ right:clamp(.6rem,3vw,2rem); }
.lb-close{ top:clamp(.8rem,3vw,1.6rem); right:clamp(.8rem,3vw,1.6rem); transform:none; width:48px;height:48px; }
.lb-btn svg{ width:26px;height:26px; }
@media (max-width:640px){ .lb-prev,.lb-next{ top:auto; bottom:1.2rem; transform:none; width:46px;height:46px;} .lb-prev{left:25%}.lb-next{right:25%} }

/* =========================================================================
   Diario di cantiere — "Monitora l'andamento dei lavori"
   ========================================================================= */
.page-actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:1.6rem; }
.page-actions .back-immobili{ margin-bottom:0; }

.diary-top{
  display:grid; grid-template-columns:minmax(200px,280px) 1fr; gap:clamp(1.2rem,3vw,2.6rem);
  align-items:center; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:clamp(1.3rem,2.6vw,2rem);
  margin-bottom:clamp(2rem,4vw,3rem); box-shadow:var(--shadow-sm);
}
@media (max-width:760px){ .diary-top{ grid-template-columns:1fr; } }
.diary-meter .k{ font-size:.76rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; }
.diary-meter .v{ font-family:"Fraunces",serif; font-size:clamp(1.9rem,4vw,2.6rem);
  font-weight:600; line-height:1.05; margin:.4rem 0 .7rem; }
.diary-bar{ height:10px; border-radius:var(--radius-pill); background:var(--surface-3); overflow:hidden; }
.diary-bar span{ display:block; height:100%; border-radius:var(--radius-pill);
  background:linear-gradient(90deg, var(--red), var(--red-cta)); }
.diary-note p{ color:var(--ink-2); }
.diary-note .btn{ margin-top:1.1rem; }

.timeline{ --tl-pad: clamp(1.7rem,3.5vw,2.4rem); position:relative; display:grid;
  gap:clamp(1rem,2.2vw,1.6rem); padding-left:var(--tl-pad); }
.timeline::before{ content:""; position:absolute; left:6px; top:1.1rem; bottom:1.1rem; width:2px;
  border-radius:2px; background:linear-gradient(180deg, var(--red) 0%, var(--red-100) 45%, var(--line) 100%); }
.tl-item{ position:relative; }
.tl-item::before{ content:""; position:absolute; left:calc(var(--tl-pad) * -1); top:1.35rem;
  width:14px; height:14px; border-radius:50%; background:#fff; border:3px solid var(--red-100); }
.tl-item:first-child::before{ border-color:var(--red); }
.tl-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.15rem,2.3vw,1.7rem); }
.tl-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; }
.tl-when{ font-size:.76rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--red-ink); }
.tl-pct{ display:inline-flex; align-items:center; padding:.24rem .65rem; border-radius:var(--radius-pill);
  background:var(--surface-2); color:var(--ink-2); font-size:.74rem; font-weight:700; letter-spacing:.03em; }
.tl-card h3{ font-size:clamp(1.15rem,2vw,1.35rem); margin:.45rem 0 0; }
.tl-card p{ color:var(--ink-2); font-size:.98rem; margin-top:.65rem; }
.tl-shots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:.55rem; margin-top:1.15rem; }
@media (max-width:420px){ .tl-shots{ grid-template-columns:repeat(2,1fr); } }
.tl-shots figure{ position:relative; margin:0; aspect-ratio:4/3; border-radius:var(--radius-sm);
  overflow:hidden; cursor:zoom-in; background:var(--surface-3); }
.tl-shots figure img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.tl-shots figure:hover img{ transform:scale(1.05); }

/* =========================================================================
   Split / showcase blocks
   ========================================================================= */
.split{ display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.6rem,4vw,4rem); align-items:center; }
.split.rev .split-media{ order:2; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } .split.rev .split-media{ order:0; } }
.split-media{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:5/4; }
.split-media img{ width:100%;height:100%;object-fit:cover; }
.split-body h2{ margin-bottom:1rem; }
.split-body p{ color:var(--ink-2); margin-bottom:1rem; }

/* stat strip */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); }
@media (max-width:640px){ .stats{ grid-template-columns:repeat(2,1fr);} }
.stat{ background:#fff; padding: clamp(1.4rem,3vw,2rem); text-align:center; }
.stat .n{ font-family:"Fraunces",serif; font-size:clamp(2rem,4vw,2.8rem); font-weight:600; color:var(--ink); line-height:1; }
.stat .n span{ color:var(--red); }
.stat .l{ color:var(--ink-3); font-size:.88rem; margin-top:.5rem; font-weight:600; }

/* CTA band */
.cta-band{ position:relative; isolation:isolate; color:#fff; border-radius:var(--radius-lg); overflow:hidden;
  padding: clamp(2.4rem,5vw,3.6rem); background: var(--charcoal); }
.cta-band::before{ content:""; position:absolute; inset:0; z-index:-1;
  background: radial-gradient(120% 140% at 100% 0%, rgba(225,37,27,.5), transparent 55%); }
.cta-band h2{ color:#fff; max-width:20ch; }
.cta-band p{ color:rgba(255,255,255,.82); margin-top:.8rem; max-width:52ch; }
.cta-band .hero-cta{ margin-top:1.8rem; }

/* =========================================================================
   Forms
   ========================================================================= */
.form{ display:grid; gap:1.1rem; }
.field{ display:flex; flex-direction:column; gap:.45rem; }
.field label{ font-weight:700; font-size:.9rem; }
.field .req{ color:var(--red-ink); }
.field input,.field textarea,.field select{
  padding:.85rem 1rem; border:1.5px solid var(--line-2); border-radius:12px; background:#fff;
  font-size:1rem; transition:border-color var(--t), box-shadow var(--t); width:100%; }
.field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--red); box-shadow:var(--ring); outline:none; }
.field textarea{ min-height:140px; resize:vertical; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }
.form-note{ font-size:.82rem; color:var(--ink-3); }
.consent-field{ display:grid; grid-template-columns:1.2rem 1fr; gap:.7rem; align-items:start; }
.consent-field input{ width:1.1rem; height:1.1rem; margin-top:.15rem; accent-color:var(--red); }
.consent-field label{ color:var(--ink-3); font-size:.84rem; line-height:1.5; }
.consent-field a{ color:var(--red-ink); text-decoration:underline; text-underline-offset:2px; }
.preview-bar{ position:sticky; top:0; z-index:1200; padding:.7rem 1rem; text-align:center;
  background:#FEF3C7; color:#854D0E; font-weight:700; border-bottom:1px solid #FDE68A; }
.preview-bar a{ margin-left:.8rem; color:#7C2D12; text-decoration:underline; }
.form-status{ display:none; padding:.9rem 1.1rem; border-radius:12px; font-weight:600; font-size:.95rem; }
.form-status.ok{ display:block; background:#ECFDF3; color:#067647; border:1px solid #ABEFC6; }
.form-status.err{ display:block; background:var(--red-050); color:var(--red-700); border:1px solid var(--red-100); }

/* contact tiles */
.contact-tile{ display:flex; gap:1rem; align-items:flex-start; padding:1.4rem 1.5rem; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius); }
.contact-tile .ic{ width:46px;height:46px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:var(--red-050); color:var(--red-ink); }
.contact-tile .ic svg{ width:22px;height:22px; }
.contact-tile h3{ font-family:"Manrope",sans-serif; font-size:1rem; font-weight:800; }
.contact-tile a, .contact-tile p{ color:var(--ink-2); font-size:.96rem; }
.contact-tile a:hover{ color:var(--red-ink); }

/* =========================================================================
   Footer
   ========================================================================= */
.footer{ background:var(--charcoal); color:rgba(255,255,255,.74); padding-block: clamp(3rem,6vw,4.5rem) 2rem; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:2.4rem; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:2rem; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-logo{ display:inline-block; line-height:0; background:transparent; padding:0; }
.footer-logo img{ height:58px; width:auto; display:block; background:transparent; }
/* social icons */
.socials{ list-style:none; margin:1.5rem 0 0; padding:0; display:flex; gap:.65rem; }
.socials a{ display:inline-grid; place-items:center; width:42px; height:42px; border-radius:11px;
  border:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.78);
  transition:color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease); }
.socials a:hover{ color:#fff; border-color:var(--red-ink); background:var(--red-ink); transform:translateY(-2px); }
.socials svg{ width:20px; height:20px; }
.footer h4{ font-family:"Manrope",sans-serif; color:#fff; font-size:.84rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:800; margin-bottom:1.1rem; }
.footer a{ color:rgba(255,255,255,.74); }
.footer a:hover{ color:#fff; }
.footer .f-links{ display:flex; flex-direction:column; gap:.6rem; font-size:.96rem; }
.footer address{ font-style:normal; line-height:1.7; font-size:.95rem; }
.footer address strong{ color:#fff; font-weight:700; }
.footer-about{ font-size:.95rem; max-width:34ch; margin-top:1.1rem; }
.footer-bottom{ margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.4rem; justify-content:space-between; font-size:.85rem; color:rgba(255,255,255,.55); }
.footer-legal{ display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; }
.footer-legal a{ color:rgba(255,255,255,.55); }
.footer-legal a:hover{ color:#fff; }
.footer-credit a{ color:rgba(255,255,255,.72); font-weight:700; letter-spacing:.02em; }
.footer-credit a:hover{ color:#fff; }

/* =========================================================================
   Utilities & motion
   ========================================================================= */
.center{ text-align:center; }
.mt-1{ margin-top:.5rem;} .mt-2{ margin-top:1rem;} .mt-3{ margin-top:1.6rem;} .mt-4{ margin-top:2.4rem; }
.maxw-prose{ max-width:68ch; }
.legal-page .display{ margin:.8rem 0 2rem; }
.legal-content{ color:var(--ink-2); line-height:1.8; }
.legal-content p + p{ margin-top:1.2rem; }
[hidden]{ display:none !important; }
.js .reveal{ opacity:0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.07s;} .reveal.d2{ transition-delay:.14s;} .reveal.d3{ transition-delay:.21s; }
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.001ms !important; transition-duration:.01ms !important; }
  .pcard-media img, .gallery figure img{ transition:none; }
}
.skip-link{ position:absolute; left:-999px; top:0; background:#fff; color:var(--ink); padding:.7rem 1rem;
  border-radius:8px; z-index:1100; }
.skip-link:focus{ left:1rem; top:1rem; box-shadow:var(--shadow); }
.noscroll{ overflow:hidden; }

/* =========================================================================
   Prezzo nelle schede immobile (gestito dal pannello /admin/)
   ========================================================================= */
.pcard-price{ font-family:"Fraunces",serif; font-size:1.28rem; font-weight:700; color:var(--red, #E1251B);
  margin-top:.35rem; }