/* ===== Richy Models — One Page (Full) ===== */
:root{ --red:#FF1B1C; --white:#ffffff; --ink:#0B0B0B; --muted:#f6f6f6; }
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  color:var(--ink); background:var(--white); line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}

h1{font-size:clamp(36px,5vw,60px);line-height:1.08;font-weight:900;letter-spacing:.01em}
h2{font-size:clamp(28px,3.4vw,40px);font-weight:900;margin-bottom:8px}
h3{font-size:clamp(18px,2vw,22px);font-weight:800}
p,li{font-size:clamp(16px,1.35vw,18px)}
small{opacity:.8}

.container{width:min(1180px,92vw);margin:0 auto}
.section{padding:68px 0}
.grid{display:grid;gap:26px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width: 900px){.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}

.top-band{height:10px;background:var(--red)}

.header{padding:0;border-bottom:1px solid #eee}
.header .wrap{ display:flex; align-items:center; justify-content:space-between; padding:14px 0 }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none }
.brand img{ height:44px }
.brand span{ font-weight:900; letter-spacing:.04em; color:#111; font-size:18px }
nav a{ color:#222; text-decoration:none; margin-left:22px; font-weight:800 }
nav a:hover, nav a.active{ color:var(--red) }

.btn{ display:inline-block; border:none; border-radius:999px; padding:14px 26px; font-weight:900; cursor:pointer; text-decoration:none; transition:transform .08s ease, box-shadow .2s ease, background .2s ease }
.btn-primary{ background:var(--red); color:var(--white); box-shadow:0 10px 28px rgba(255,27,28,.25) }
.btn-primary:hover{ transform:translateY(-1px) }
.btn-outline{ background:transparent; color:var(--red); border:2px solid var(--red) }
.btn-outline:hover{ background:var(--red); color:#fff }

.hero{
  min-height:100svh; display:grid; place-items:center;
  background:var(--red) url('./assets/landing-bg.svg') center / contain no-repeat;
  position:relative; padding:24px 16px calc(24px + env(safe-area-inset-bottom));
}
.hero .cta{ position:fixed; left:50%; bottom:clamp(18px,6vh,88px); transform:translateX(-50%); }
.hero .btn-enter{ background:#fff; color:var(--red); font-weight:900; font-size:clamp(16px,2vw,18px);
  padding:16px 32px; border-radius:999px; border:none; box-shadow:0 12px 30px rgba(0,0,0,.18) }
.hero .btn-enter:hover{ transform:translateY(-1px) }

.block{ background:#fff; border:1px solid #eee; border-radius:22px; padding:22px; box-shadow:0 8px 24px rgba(0,0,0,.05) }
.block ul{ margin-top:8px; padding-left:18px }
.block ul li{ list-style:disc }

.highlight{ background:var(--red); color:#fff; border-radius:18px; padding:24px }
.kpis{ display:flex; gap:24px; flex-wrap:wrap }
.kpis .k{ flex:1 1 160px; text-align:center }
.k .n{ font-size:clamp(28px,4vw,40px); font-weight:900; line-height:1 }
.k .t{ opacity:.95 }

form{ display:grid; gap:16px; margin-top:12px }
input,select,textarea{ width:100%; border:1px solid #ddd; border-radius:14px; padding:14px 16px; font-size:16px }
textarea{ min-height:140px }
label{ font-weight:800; font-size:14px }
.form-row{ display:grid; gap:16px; grid-template-columns:1fr 1fr }
@media (max-width: 720px){ .form-row{ grid-template-columns:1fr } }

footer{ margin-top:64px; border-top:1px solid #eee; padding:28px 0; background:#fff; color:#444 }
footer .links{ display:flex; gap:18px; flex-wrap:wrap }

/* --- FINAL: compact centered header --- */
.header{padding:0;border-bottom:1px solid #eee}
.centered-nav{ justify-content:center !important }
.nav-centered{ display:flex; align-items:center; gap:24px }
.nav-centered a{ font-size:16px }

/* --- FINAL: About readability + banners --- */
#about p{ line-height:1.7; margin-bottom:12px }
.about-banners{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px }
.banner{ background:var(--red); color:#fff; border-radius:18px; padding:20px; box-shadow:0 10px 24px rgba(255,27,28,.22) }
.banner .ban-title{ font-weight:900; font-size:clamp(16px,1.6vw,18px); margin-bottom:6px }
.banner .ban-text{ font-size:clamp(14px,1.3vw,16px); opacity:.98 }
@media (max-width: 960px){ .about-banners{ grid-template-columns:1fr } }

/* Variant B - pill banners */
.about-banners{
  display:flex;
  justify-content:center;
  gap:16px;
  margin:28px auto;
  flex-wrap:wrap;
}
.banner{
  background:var(--red);
  color:#fff;
  border-radius:50px;
  padding:12px 22px;
  font-size:15px;
  line-height:1.4;
  box-shadow:0 6px 18px rgba(255,27,28,.18);
  flex:1 1 auto;
  max-width:280px;
  text-align:center;
}
.banner .ban-title{
  display:block;
  font-weight:800;
  margin-bottom:4px;
  font-size:16px;
}
.banner .ban-text{
  opacity:.9;
  font-weight:400;
  font-size:14px;
}

/* Variant B: pill banners (text-only) */
.about-banners{
  display:flex;
  justify-content:center;
  gap:16px;
  margin:28px auto;
  flex-wrap:wrap;
}
.about-banners .banner{
  background:var(--red);
  color:#fff;
  border-radius:50px;
  padding:12px 22px;
  font-size:15px;
  line-height:1.4;
  box-shadow:0 6px 18px rgba(255,27,28,.18);
  flex:1 1 auto;
  max-width:280px;
  text-align:center;
}
.banner .ban-title{
  display:block;
  font-weight:800;
  margin-bottom:4px;
  font-size:16px;
}
.banner .ban-text{
  opacity:.9;
  font-weight:400;
  font-size:14px;
}
#about p{line-height:1.7;margin-bottom:12px}
.about-banners{
  display:flex;justify-content:center;gap:16px;margin:28px auto;flex-wrap:wrap
}
.about-banners .banner{
  background:var(--red);color:#fff;border-radius:50px;padding:12px 22px;
  font-size:15px;line-height:1.4;box-shadow:0 6px 18px rgba(255,27,28,.18);
  flex:1 1 auto;max-width:280px;text-align:center
}
.banner .ban-title{display:block;font-weight:800;margin-bottom:4px;font-size:16px}
.banner .ban-text{opacity:.9;font-weight:400;font-size:14px}

/* Sticky header */
.header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:999;
  background:#fff;
}
body{ padding-top:60px } /* adjust to header height */

/* Sticky header */
.header{ position:fixed; top:0; left:0; width:100%; z-index:999; padding:0; border-bottom:1px solid #eee }
body{ padding-top:56px } /* adjust to actual header height */
.nav-centered a{ font-size:16px }

/* Pill banners (Variant B) */
.about-banners{
  display:flex;
  justify-content:center;
  gap:16px;
  margin:28px auto;
  flex-wrap:wrap;
}
.about-banners .banner{
  background:var(--red);
  color:#fff;
  border-radius:50px;
  padding:12px 22px;
  font-size:15px;
  line-height:1.4;
  box-shadow:0 6px 18px rgba(255,27,28,.18);
  flex:1 1 auto;
  max-width:280px;
  text-align:center;
}
.banner .ban-title{
  display:block;
  font-weight:800;
  margin-bottom:4px;
  font-size:16px;
}
.banner .ban-text{
  opacity:.9;
  font-weight:400;
  font-size:14px;
}

/* ==== FINAL: LOCK CTA STATIC INSIDE HERO ==== */
.hero{
  position:relative !important;
  height:100dvh !important;
  min-height:100dvh !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  background: var(--red) url('./2861d1ed-b1e0-4400-8e4b-d5620494b73f.svg') center/contain no-repeat !important;
  text-align:center;
}
.hero .cta{
  position:absolute !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  bottom: 112px !important; /* locked: ~64px from bottom */
  margin:0 !important;
  width:auto !important;
  z-index:10 !important;
}
/* ==== /FINAL ==== */

/* ==== HEADER FINAL TWEAK: bigger & tighter ==== */
.header .nav-centered{ gap:10px !important; }
.header .nav-centered a{ font-size:17px !important; padding:10px 6px !important; margin-left:0 !important; }
.header .nav-centered a.btn.btn-outline{ font-size:18px !important; padding:14px 28px !important; }
@media (max-width: 900px){
  .header .nav-centered{ gap:8px !important; }
  .header .nav-centered a{ font-size:16px !important; }
}
/* ==== /HEADER FINAL TWEAK ==== */

/* ==== HEADER MORE COMPACT ==== */
.header .wrap{ padding:8px 0 !important; }
.brand img{ height:38px !important; }
.nav-centered{ gap:8px !important; }
.nav-centered a{ font-size:16.5px !important; padding:8px 4px !important; margin-left:0 !important; }
.header .nav-centered a.btn.btn-outline{ font-size:17.5px !important; padding:12px 24px !important; }
body{ padding-top:52px !important; }
/* ==== /HEADER MORE COMPACT ==== */

/* === /ABOUT polish === */

/* ensure breathing room */
#about p{ line-height:1.7; margin-bottom:12px }
.about-highlights{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:20px 0 0;
  padding:0;
  list-style:none;
}
.about-highlights li{
  background:#fff;
  border:1px solid #eee;
  border-radius:16px;
  padding:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
}
.about-highlights .h-title{
  display:block;
  font-weight:900;
  margin-bottom:6px;
  font-size:16px;
}
.about-highlights .h-text{
  display:block;
  font-size:14.5px;
  color:#333;
  opacity:.95;
}
@media (max-width: 960px){
  .about-highlights{ grid-template-columns:1fr }
}
/* Hide legacy banners if any remain in DOM */
.about-banners{ display:none !important }
/* === /ABOUT === */

/* Hide any legacy banners lists */
.about-banners, .about-highlights{ display:none !important }
/* === /ABOUT === */

/* vertical centering vs text */
  align-items:stretch;
  max-width:380px;
  margin-inline:auto;
}
.about-stack .card{
  background:#ff1b1c;
  color:#fff;
  border-radius:16px; /* rectangle with soft corners */
  padding:16px 20px;
  box-shadow:0 8px 22px rgba(255,27,28,.18);
  text-align:left;
}
.about-stack .ban-title{ display:block; font-weight:900; font-size:16px; margin-bottom:6px }
.about-stack .ban-text{ display:block; font-size:14px; opacity:.95 }
.about-cta{ display:flex; justify-content:center; margin-top:6px }
.btn.btn-black{
  background:#111;
  color:#fff;
  font-weight:800;
  padding:12px 18px;
  border-radius:12px;
  display:inline-block;
  font-size:15.5px;
}
.btn.btn-black:hover{ opacity:.9 }
@media (max-width: 980px){
  .about-grid{ grid-template-columns: 1fr; }
  .about-stack{ max-width:520px; width:100% }
}
/* Hide any legacy banners/highlights if still present */
.about-banners, .about-highlights{ display:none !important }
/* === /ABOUT === */

/* vertically center stack vs text */
}
.about-text p{ line-height:1.7; margin-bottom:12px }
.about-stack{
  display:flex;
  flex-direction:column;
  gap:14px;
  align-self:center;
  width:100%;
  max-width:420px;
  margin-inline:auto;
}
/* Rectangular, minimal cards with red accent bar on the left */
.about-stack .card{
  position:relative;
  background:#fff !important;
  color:#111 !important;
  border:1px solid #EEE;
  border-radius:14px;
  padding:14px 18px 14px 20px;
  box-shadow:0 8px 20px rgba(0,0,0,.04);
  overflow:hidden;
}
.about-stack .card::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background:var(--red);
  border-radius:14px 0 0 14px;
}
.about-stack .ban-title{
  display:block;
  font-weight:900;
  font-size:16px;
  margin-bottom:4px;
}
.about-stack .ban-text{
  display:block;
  font-size:14.5px;
  color:#444;
  opacity:.95;
}
.about-cta{ display:flex; justify-content:center; margin-top:8px }
.btn.btn-black{
  background:#111;
  color:#fff !important;
  font-weight:800;
  padding:12px 18px;
  border-radius:12px;
  display:inline-block;
  font-size:15.5px;
  letter-spacing:.2px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.btn.btn-black:hover{ opacity:.94; transform:translateY(-1px) }
@media (max-width: 980px){
  .about-grid{ grid-template-columns: 1fr; gap:22px }
  .about-stack{ max-width:520px }
}
/* Neutralize any legacy pill styling */
.about-stack .banner{ background:#fff; color:#111; border-radius:14px; }
.about-banners, .about-highlights{ display:none !important }
/* === /ABOUT aesthetic refinement === */

/* vertically center all grid items */
}
.about-text{ align-self:center; }
.about-stack{
  place-self:center;          /* center the whole stack in its grid cell */
  display:flex;
  flex-direction:column;
  gap:14px;
  width:100%;
  max-width:420px;
}
.about-stack .card{
  position:relative;
  background:#fff;
  color:#111;
  border:1px solid #EEE;
  border-radius:14px;
  padding:14px 18px 14px 20px;
  box-shadow:0 8px 20px rgba(0,0,0,.04);
}
.about-stack .card::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--red);
  border-radius:14px 0 0 14px;
}
.about-stack .ban-title{ display:block; font-weight:900; font-size:16px; margin-bottom:4px }
.about-stack .ban-text{ display:block; font-size:14.5px; color:#444; opacity:.95 }
.about-cta{ display:flex; justify-content:center; margin-top:10px }
.btn.btn-black{ background:#111; color:#fff; font-weight:800; padding:12px 18px; border-radius:12px; display:inline-block; font-size:15.5px; letter-spacing:.2px; box-shadow:0 6px 18px rgba(0,0,0,.08) }
.btn.btn-black:hover{ opacity:.94; transform:translateY(-1px) }
.about-logo-wrap{ display:flex; justify-content:center; margin-top:10px }
.about-logo{ width:160px; height:auto; opacity:.9 }
@media (max-width: 980px){
  .about-grid{ grid-template-columns:1fr; gap:22px }
  .about-stack{ max-width:520px; place-self:center }
}
/* === /ABOUT === */

/* vertical centering of both columns */
}
.about-text{ align-self:center; }
.about-stack{
  place-self:center;          /* center the right column content within its grid cell */
  display:flex;
  flex-direction:column;
  gap:14px;
  width:100%;
  max-width:420px;
  align-items:stretch;
}
.about-logo-wrap{ display:flex; justify-content:center; margin-bottom:6px }
.about-logo{ width:200px; height:auto; opacity:.95 }
.about-stack .card{
  position:relative;
  background:#fff;
  color:#111;
  border:1px solid #EEE;
  border-radius:14px;
  padding:14px 18px 14px 20px;
  box-shadow:0 8px 20px rgba(0,0,0,.04);
}
.about-stack .card::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--red);
  border-radius:14px 0 0 14px;
}
.about-stack .ban-title{ display:block; font-weight:900; font-size:16px; margin-bottom:4px }
.about-stack .ban-text{ display:block; font-size:14.5px; color:#444; opacity:.95 }
.about-cta{ display:flex; justify-content:center; margin-top:8px }
.btn.btn-red{
  background:var(--red);
  color:#fff;
  font-weight:900;
  padding:12px 18px;
  border-radius:999px;
  display:inline-block;
  font-size:15.5px;
  letter-spacing:.2px;
  box-shadow:0 10px 24px rgba(255,27,28,.22);
}
.btn.btn-red:hover{ transform:translateY(-1px); opacity:.98 }
@media (max-width: 980px){
  .about-grid{ grid-template-columns:1fr; gap:22px }
  .about-stack{ max-width:520px }
}
/* === /ABOUT === */

/* center all children horizontally */
}
.about-stack .card{
  width:100%;
  max-width:380px;                 /* consistent, elegant width */
  margin-inline:auto;              /* keep cards centered */
  text-align:left;
}
.about-cta{
  justify-content:center !important;
}
/* === /ABOUT center === */

/* match stats width */
@media (max-width: 720px){
  .about-stats{ grid-template-columns:1fr; row-gap:10px; border-radius:24px }
  .about-stats .value{ font-size:20px }
}
/* === /ABOUT stats === */

/* === /ABOUT compact === */

/* kill inline-img bottom gap */
}
.about-logo{
  display:block;
  margin:0 auto 4px !important;
  max-width:100%;
  height:auto;
  opacity:.96;
}
.about-stats,
.about-stack .card,
.about-cta{
  width:100%;
  max-width:var(--colw) !important;
  margin-inline:auto;
}
.about-stats{
  padding:10px 14px !important;
  gap:8px !important;
  border-radius:999px !important;
}
.about-stats .value{ font-size:20px !important }
.about-stats .label{ font-size:13.5px !important }
.about-stack .card{
  padding:12px 16px !important;
}
.about-cta{ margin-top:8px !important; display:flex; justify-content:center }
.btn.btn-red{ padding:12px 20px !important }
/* === /ABOUT compact === */

/* helps the frame staccare anche su sfondi chiari */
  box-shadow: 0 6px 16px rgba(255,27,28,.10);
}
/* === /ABOUT logo frame === */

/* === /ABOUT === */

/* Red rectangular bullets */
.banner.bullet-red{
  background:var(--red);
  color:#fff;
  border-radius:0;
  padding:14px 16px;
  width:100%;
  box-shadow:0 10px 24px rgba(255,27,28,.18);
}
.banner.bullet-red .ban-title{ display:block; font-weight:900; font-size:16px; margin-bottom:4px }
.banner.bullet-red .ban-text{ display:block; font-size:14px; opacity:.96 }
/* Rectangular red CTA */
.about-cta{ display:flex; justify-content:center; width:100% }
.btn.btn-red-rect{
  background:var(--red);
  color:#fff;
  font-weight:900;
  padding:12px 20px;
  border-radius:0;
  display:inline-block;
  font-size:15.5px;
  letter-spacing:.2px;
  box-shadow:0 10px 24px rgba(255,27,28,.22);
}
.btn.btn-red-rect:hover{ transform:translateY(-1px); opacity:.98 }
/* Align the right column vertically to text */
.about-grid{ align-items:center }
@media (max-width:980px){
  .about-stack{ max-width:520px }
}
/* === /ABOUT === */

/* Bullet cards: rectangular, white, thin border, red left bar */
.about-stack .bullet-card{
  background:#fff !important;
  color:#111 !important;
  border:1px solid #EAEAEA !important;
  border-left:4px solid var(--red) !important;
  border-radius:0 !important;
  padding:12px 14px !important;
  box-shadow:none !important;
}
.about-stack .bullet-card .ban-title{ display:block; font-weight:800; font-size:15.5px; margin-bottom:4px }
.about-stack .bullet-card .ban-text{ display:block; font-size:13.5px; color:#444; opacity:.95 }

/* CTA rectangular, aligned to column */
.about-cta{ width:100%; display:flex; justify-content:center; margin-top:8px }
.about-cta .btn.btn-red-rect{
  background:var(--red); color:#fff; font-weight:900; padding:12px 18px; border-radius:0; border:1px solid var(--red);
  display:inline-block; width:100%; text-align:center; letter-spacing:.2px; box-shadow:none
}
.about-cta .btn.btn-red-rect:hover{ opacity:.97 }

/* Ensure alignment of right column with left text */
.about-grid{ align-items:center }
/* Remove any leftover styles from previous variants */
.about-stack .banner{ background:#fff; border:1px solid #EAEAEA; border-left:4px solid var(--red); border-radius:0; padding:12px 14px; box-shadow:none }

/* keep column width & alignment */
.about-stack{ --colw: 380px; width:100%; max-width:var(--colw); align-items:center }
/* === /NO FRAME === */

/* Make sure .btn-enter is visible on white bg (assumes global style exists) */
.btn.btn-enter{
  font-weight:900;
  border-radius:999px;
  padding:14px 22px;
}
/* === /ABOUT tuning === */

/* Make cards red + rounded, remove any previous borders/accents */
.about-stack .bullet-card{
  background: var(--red) !important;
  color: #fff !important;
  border: none !important;
  border-left: none !important;
  border-radius: 18px !important;
  padding: 16px 18px !important;
  width: 100% !important;
  max-width: var(--colw) !important;
  margin-inline: auto !important;
  box-shadow: 0 10px 24px rgba(255,27,28,.18) !important;
  text-align: left;
}
.about-stack .bullet-card .ban-title{ display:block; font-weight:900; font-size:16px !important; margin-bottom:6px }
.about-stack .bullet-card .ban-text{ display:block; font-size:14px !important; opacity:.96 }

/* Keep CTA consistent and centered under cards */
.about-cta{ width:100%; max-width:var(--colw); display:flex; justify-content:center; margin-top:6px !important }
.btn.btn-enter{ border-radius:999px; font-weight:900; padding:14px 22px }

@media (max-width: 980px){
  .about-stack{ max-width:520px }
}
/* === /ABOUT RIGHT COLUMN === */

/* === RIHEM FINAL — About right column (logo + red rounded cards + red CTA) === */
.about-grid{ grid-template-columns: 1.15fr .85fr !important; gap:36px !important; align-items:center !important; }
.about-text{ align-self:center !important; }

.about-stack{
  --colw: 420px;
  width:100%; max-width:var(--colw);
  place-self:center;
  display:flex; flex-direction:column; align-items:center !important;
  gap:16px !important;
}

.about-logo{
  display:block;
  margin:0 auto 6px !important;
  width:clamp(220px, 30vw, 280px) !important;
  height:auto;
  border:none !important; padding:0 !important; background:transparent !important; box-shadow:none !important;
}

.about-stack .bullet-card{
  background:var(--red) !important;
  color:#fff !important;
  border:none !important;
  border-radius:20px !important;
  padding:16px 20px !important;
  width:100% !important; max-width:var(--colw) !important;
  box-shadow:0 10px 24px rgba(255,27,28,.18) !important;
  text-align:left;
}
.about-stack .bullet-card .ban-title{ display:block; font-weight:900; font-size:16px !important; margin-bottom:6px }
.about-stack .bullet-card .ban-text{ display:block; font-size:14px !important; opacity:.96 }

.about-cta{ width:100%; max-width:var(--colw); display:flex; justify-content:center; margin-top:6px !important }
.about-cta .btn{ width:100%; text-align:center; border-radius:999px }

/* keep pills/metrics variants hidden if any */
.about-stats{ display:none !important }
/* === /RIHEM FINAL === */

/* === RESET/ENFORCE: About approved layout === */
.about-grid{ display:grid; grid-template-columns: 1.15fr .85fr; gap:36px; align-items:center }
.about-text{ align-self:center }
.about-stack{
  --colw: 420px;
  width:100%; max-width:var(--colw);
  place-self:center;
  display:flex; flex-direction:column; align-items:center;
  gap:16px;
}
.about-logo{
  display:block; margin:0 auto 6px;
  width:clamp(220px, 30vw, 280px); height:auto;
  border:none; padding:0; background:transparent; box-shadow:none;
}
/* Red rounded cards */
.about-stack .bullet-card{
  background: var(--red);
  color:#fff;
  border:none;
  border-radius:20px;
  padding:16px 20px;
  width:100%; max-width:var(--colw);
  box-shadow:0 10px 24px rgba(255,27,28,.18);
  text-align:left;
}
.about-stack .bullet-card .ban-title{ display:block; font-weight:900; font-size:16px; margin-bottom:6px }
.about-stack .bullet-card .ban-text{ display:block; font-size:14px; opacity:.96 }
/* CTA matches brand button, but forced red variant */
.about-cta{ width:100%; max-width:var(--colw); display:flex; justify-content:center; margin-top:6px }
.btn.btn-red{ background:var(--red); color:#fff; }
.about-stats, .about-banners, .about-highlights{ display:none !important }
/* === /About approved === */

/* keep CTA at same width */
.about-cta{ width:100%; max-width:var(--colw); display:flex; justify-content:center; margin-top:6px }
.about-cta .btn{ width:100%; text-align:center; border-radius:999px; font-weight:900; }
/* Remove any older styles that conflict */
.about-stack .bullet-card, .about-stack .banner{ all: unset; }

/* Red rounded cards */
.about-stack .info-card{
  background: var(--red) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 18px !important;
  padding: 16px 18px !important;
  width: 100% !important; max-width: var(--colw) !important;
  box-shadow: 0 10px 24px rgba(255,27,28,.18) !important;
  text-align: left;
}
.about-stack .info-card .ban-title{ display:block; font-weight:900; font-size:16px !important; margin-bottom:6px }
.about-stack .info-card .ban-text{ display:block; font-size:14px !important; opacity:.96 }
/* CTA: red rounded, full column width */
.about-cta{ width:100%; max-width:var(--colw); display:flex; justify-content:center; margin-top:6px !important }
.about-cta .btn{
  background: var(--red) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 14px 22px !important;
  font-weight: 900 !important;
  width: 100%; text-align: center;
  box-shadow: 0 8px 22px rgba(255,27,28,.18);
}
/* Kill any spacing or styles tied to removed logo */
.about-logo, .about-logo-wrap, .logo-card{ display:none !important; }
/* Hide metrics if any leftover */
.about-stats{ display:none !important; }
/* === /ABOUT RIGHT COLUMN === */

/* === VARIANT B • White cards with red outline + red titles; red solid CTA === */
.about-grid{ align-items:center !important; gap:32px !important; }
.about-stack{ --colw: 420px; width:100%; max-width:var(--colw); display:flex; flex-direction:column; align-items:center !important; gap:16px !important; place-self:center; }

/* Cards */
.about-stack .info-card{
  background:#fff !important;
  color:#111 !important;
  border:2px solid var(--red) !important;
  border-radius:18px !important;
  padding:14px 16px !important;
  width:100% !important; max-width:var(--colw) !important;
  box-shadow:none !important;
  text-align:left;
}
.about-stack .info-card .ban-title{ color:var(--red) !important; font-weight:900 !important; font-size:16px !important; margin-bottom:6px !important; }
.about-stack .info-card .ban-text{ color:#333 !important; opacity:1 !important; font-size:14px !important; }

/* CTA */
.about-cta{ width:100%; max-width:var(--colw); display:flex; justify-content:center; margin-top:6px !important; }
.about-cta .btn{
  background: var(--red) !important; color:#fff !important;
  border:none !important; border-radius:999px !important;
  padding:14px 22px !important; font-weight:900 !important;
  width:100% !important; text-align:center;
  box-shadow: none !important;
}
/* Remove logo if still present in DOM */
.about-logo, .about-logo-wrap, .logo-card{ display:none !important; }
/* Hide metrics banner if any leftover */
.about-stats{ display:none !important; }
/* === /VARIANT B === */

/* fallback for browsers without aspect-ratio */
  box-shadow: none;
}
.geo-card::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -8px;
  width: 60%;
  height: 12px;
  background: rgba(255, 27, 28, .18); /* red geoid shadow */
  filter: blur(8px);
  border-radius: 100px;
}
.geo-card .ban-title{ font-weight: 900; color: var(--red); font-size: 17px; margin-bottom: 8px; letter-spacing: .15px; }
.geo-card .ban-text{ font-size: 14px; color: #333; opacity: 1; }

.about-cta{ display:flex; justify-content:center; margin-top: 6px; }
.about-cta .btn.btn-red{ background: var(--red); color: #fff; border: none; }
.about-cta .btn{ border-radius: 999px; font-weight: 900; padding: 14px 22px; }

@media (max-width: 980px){
  .about-cards{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .about-cards{ grid-template-columns: 1fr; }
}
/* Hide old right-column structures if still present anywhere */
.about-grid, .about-stack, .about-logo, .about-stats, .logo-card { display: none !important; }
/* === /ABOUT WIDE === */

/* was ~1100px */
  gap: 14px !important;               /* was 18px */
  grid-template-columns: repeat(3, 1fr) !important;
  margin: 8px auto 8px !important;
}
.geo-card{
  padding: 12px 12px !important;      /* tighter padding */
  border-radius: 16px !important;
  min-height: 150px !important;       /* was 220px */
  aspect-ratio: 1 / 1 !important;     /* keep squares, just smaller */
}
.geo-card::after{
  width: 50% !important;
  height: 10px !important;
  bottom: -6px !important;
  filter: blur(7px) !important;
}
.geo-card .ban-title{ font-size: 15px !important; margin-bottom: 6px !important; }
.geo-card .ban-text{ font-size: 13px !important; }
/* Responsive stays the same: 2 cols @980px, 1 col @640px */

/* full circle */
  padding: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
.geo-card .ban-title{ font-size: 14.5px !important; margin-bottom: 4px !important; }
.geo-card .ban-text{ font-size: 12.5px !important; }
.geo-card::after{
  width: 40% !important;
  height: 10px !important;
  bottom: -6px !important;
  filter: blur(7px) !important;
  border-radius: 100px !important;
}
@media (max-width: 640px){
  .about-cards{ grid-template-columns: 1fr !important; max-width: 360px !important; }
}
/* === /ROUND === */

#services .block {
  border-left: 4px solid var(--red);
  padding-left: 18px;
}

#services .block h3 {
  color: var(--red);
  margin-bottom: 8px;
}

#services .block ul li::marker {
  color: var(--red);
}

#services h2 {
  color: var(--ink);
  text-align: center;
}

#services .grid {
  justify-content: center;
  align-items: stretch;
}

#services .block {
  border-left: none;
  padding-left: 0;
  text-align: left;
}

#services .block h3 {
  color: var(--ink);
  margin-bottom: 8px;
}

#services .block ul li::marker {
  color: var(--red);
}

/* Center the last paragraph/CTA */
#services p {
  text-align: center;
}

#services h2 {
  color: var(--red);
  text-align: left;
}

#services .block {
  border-left: 4px solid var(--red);
  padding-left: 18px;
  text-align: left;
}

#services .block h3 {
  color: var(--ink);
  margin-bottom: 8px;
}

#services .block ul li::marker {
  color: var(--red);
}

/* Ultimo paragrafo centrato */
#services > .container > p {
  text-align: center;
}

#services h2 {
  color: var(--ink);
  text-align: center;
}

#services .block {
  border-left: none;
  padding-left: 0;
  text-align: left;
}

#services .block h3 {
  color: var(--red);
  margin-bottom: 8px;
}

#services .block ul li::marker {
  color: var(--red);
}

/* Coordinamento & Supervisione centrato e in evidenza */
#services .block:last-child {
  text-align: center;
  border: 2px solid var(--red);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 8px 22px rgba(255,27,28,.15);
}
#services .block:last-child h3 {
  color: var(--red);
}

#services h2 {
  color: var(--ink);
  text-align: center;
}

#services .block {
  border-left: 4px solid var(--red);
  padding-left: 18px;
  text-align: left;
}

#services .block h3 {
  color: var(--red);
  margin-bottom: 8px;
}

#services .block ul li::marker {
  color: var(--red);
}

/* Ultimo blocco centrato */
#services .block:last-child {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  max-width: 720px;
}

#services h2 {
  color: var(--ink);
  text-align: left;
}

#services .block h3 {
  color: var(--red);
}

#services .grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}

#services .block:last-child {
  grid-column: 1 / -1;   /* spans across both columns */
  max-width: 800px;      /* limit width for readability */
  margin: 0 auto;        /* center horizontally */
}

#services h2{
  color: var(--ink);
  text-align: left;
}

#services .block h3{
  color: var(--red);
  margin-bottom: 8px;
}

/* ensure services grid is 2 columns and centered content spacing */
#services .grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}

/* last block centered and full-row, same style as others */
#services .block:last-child{
  grid-column: 1 / -1;   /* span both columns */
  max-width: 800px;
  margin: 0 auto;        # center the card
  text-align: left;      /* keep same text layout as others */
  /* do NOT change borders/paddings so it matches other blocks */
}

#services h2{
  color: var(--ink);
  text-align: left;
}

#services .block h3{
  color: var(--red);
  margin-bottom: 8px;
}

#services .grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}

/* last block spans full row, same style as others */
#services .block:last-child{
  grid-column: 1 / -1;   /* span both columns */
  max-width: 800px;
  margin: 0 auto;
}

/* all text inside blocks aligned right */
#services .block{
  text-align: right;
}

#services h2{
  color: var(--ink);
  text-align: left;
}

#services .block h3{
  color: var(--red);
  margin-bottom: 8px;
}

/* Grid stays two columns */
#services .grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}

/* Last block same layout as others but centered (full row) */
#services .block:last-child{
  grid-column: 1 / -1;
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
  border-left: 4px solid var(--red);
  padding-left: 18px;
}

/* Make "Richiedi una proposta" clickable like a button */
#services p strong{
  display: inline-block;
  background: var(--red);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
#services p strong:hover{
  opacity: 0.9;
}

#services h2{
  color: var(--ink);
  text-align: left;
}

/* Uniforma tutti i box */
#services .block{
  text-align: left;
  border-left: 4px solid var(--red);
  padding-left: 18px;
}

/* Titoli in rosso */
#services .block h3{
  color: var(--red);
  margin-bottom: 8px;
}

/* Griglia 2 colonne */
#services .grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}

/* L'ultimo blocco (Coordinamento & Supervisione) prende tutta la riga ma mantiene lo stesso layout */
#services .block:last-child{
  grid-column: 1 / -1;
  max-width: 800px;
  margin: 0 auto;
}

#services h2 {
  color: var(--ink);
  text-align: left;
}

#services .block {
  text-align: left;
  border-left: 4px solid var(--red);
  padding-left: 18px;
}

#services .block h3 {
  color: var(--red);
  margin-bottom: 8px;
}

#services .grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}

#services .block:last-child {
  grid-column: 1 / -1;
  max-width: 800px;
  margin: 0 auto;
}

#services h2{
  color: var(--ink);
  text-align: left;
}

/* Tutti i blocchi: testi a sinistra + bordo rosso uniforme */
#services .block{
  text-align: left;
  border-left: 4px solid var(--red);
  padding-left: 18px;
}

/* Titoli dei blocchi in rosso */
#services .block h3{
  color: var(--red);
  margin-bottom: 8px;
}

/* Griglia a due colonne coerente */
#services .grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}

/* Ultimo blocco: stessa grafica degli altri, ma esteso su due colonne */
#services .block:last-child{
  grid-column: 1 / -1;
  max-width: 800px;   /* opzionale, migliora leggibilità */
  margin: 0 auto;     /* posizione centrata come card, ma testo rimane a sinistra */
}

#services h2 {
  color: var(--ink);
  text-align: left;
}

/* Tutti i blocchi uniformi */
#services .block {
  text-align: left;              /* testi a sinistra */
  border-left: 4px solid var(--red);
  padding-left: 18px;
}

/* Titoli in rosso */
#services .block h3 {
  color: var(--red);
  margin-bottom: 8px;
}

/* Griglia a due colonne */
#services .grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}

/* Ultimo blocco: stessa grafica, ma esteso su due colonne */
#services .block:last-child {
  grid-column: 1 / -1;
  max-width: 800px;
  margin: 0 auto;
}

#services h2 {
  color: var(--ink);
  text-align: left;
}

/* Tutti i blocchi uniformi: testi a sinistra + bordo rosso */
#services .block {
  text-align: left;
  border-left: 4px solid var(--red);
  padding-left: 18px;
}

/* Titoli dei blocchi in rosso */
#services .block h3 {
  color: var(--red);
  margin-bottom: 8px;
}

/* Griglia a due colonne coerente */
#services .grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}

/* Ultimo blocco: stessa grafica, ma su due colonne (posizione) */
#services .block:last-child {
  grid-column: 1 / -1;
  max-width: 800px;   /* opzionale */
  margin: 0 auto;
}

/* --- SERVIZI (force) — testi a sinistra + layout identico + ultimo blocco span 2 --- */
#services h2{
  color: var(--ink) !important;
  text-align: left !important;
}

/* Tutti i blocchi identici */
#services .grid.grid-2 > .block{
  text-align: left !important;
  border-left: 4px solid var(--red) !important;
  padding-left: 18px !important;
}

/* Titoli in rosso */
#services .grid.grid-2 > .block h3{
  color: var(--red) !important;
  margin-bottom: 8px !important;
}

/* Mantieni 2 colonne in servizi */
#services .grid.grid-2{
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 26px !important;
}

/* Ultimo blocco: stessa grafica, ma si estende su due colonne */
#services .grid.grid-2 > .block:last-of-type{
  grid-column: 1 / -1 !important;
  max-width: 800px;
  margin: 0 auto;
}

/* === SERVIZI • ULTIMA PAROLA (force all) === */
#services h2{ color: var(--ink) !important; text-align: left !important; }

#services .grid.grid-2 > .block,
#services .grid.grid-2 > .block *{
  text-align: left !important;
}

#services .grid.grid-2 > .block{
  border-left: 4px solid var(--red) !important;
  padding-left: 18px !important;
}

#services .grid.grid-2 > .block h3{
  color: var(--red) !important;
  margin-bottom: 8px !important;
}

/* Make sure the target block spans two columns but keeps identical style */
#services .grid.grid-2 > #coord{
  grid-column: 1 / -1 !important;
  max-width: 800px !important;
  margin: 0 auto !important;
}

/* --- COORDINAMENTO: solo bordo sinistro --- */
#services .grid.grid-2 > #coord {
  grid-column: 1 / -1 !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  border: none !important;
  border-left: 4px solid var(--red) !important;
  padding-left: 18px !important;
}

/* === SOTTO: uniforma sezioni Portfolio, Lavora con noi, Preventivo, Contatti === */

/* Sezioni: titoli H2 inchiostro e allineati a sinistra */
#portfolio h2, #work h2, #preventivo h2, #contact h2{
  color: var(--ink);
  text-align: left;
}

/* Titoli H3 in rosso */
#portfolio .block h3, #work .block h3, #contact .block h3{
  color: var(--red);
}

/* Card/Block con bordo sinistro rosso e padding coerente */
#portfolio .block, #work .block, #contact .block{
  border-left: 4px solid var(--red);
  padding-left: 18px;
  text-align: left;
}

/* Griglie coerenti */
#portfolio .grid{ gap: 26px; }
#work .grid{ gap: 26px; }

/* Marker elenco rossi anche in Portfolio */
#portfolio .block ul li::marker{ color: var(--red); }

/* CTA stile brand: centra eventuali bottoni singoli dentro le sezioni */
#portfolio .container > .btn, #work .container > .btn, #preventivo .container > .btn, #contact .container > .btn{
  display: inline-block;
  margin: 10px auto 0;
}

/* Form: migliora leggibilità label/input */
#work form label, #preventivo form label, #contact form label{
  font-weight: 800;
}
#work form button.btn-primary, #preventivo form button.btn-primary, #contact form button.btn-primary{
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  display: block;
}

/* WhatsApp button style */
.btn-whatsapp {
  background-color: #25D366;
  color: #fff;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
}
.btn-whatsapp:hover {
  background-color: #1EBE5D;
  color: #fff;
}

/* Bigger red CTA button */
.btn-red.btn-big {
  font-size: 1.3rem;
  padding: 18px 40px;
}

/* --- Preventivo: professional lead + centered submit --- */
@media (max-width: 720px){
}

/* Coordinamento & Supervisione — no halo, left border only */
#services #coord {
  box-shadow: none !important;
  border: none !important;
  border-left: 4px solid var(--red) !important;
  padding-left: 18px !important;
}

/* Services: button spacing */
#services a.btn[href="#preventivo"] {
  margin-top: 12px;
  display: inline-block;
}

/* Extra large CTA button */
.btn-red.btn-xxl{ font-size:1.6rem; padding:22px 48px; }

/* Preventivo: inputs/textarea on white */

/* === CHI SIAMO — ordine finale: testo, poi pallini orizzontali, poi pulsante === */

@media (max-width: 1024px){  }
@media (max-width: 680px){  }

/* === FORM TYPOGRAPHY TWEAKS (preventivo) — slightly larger labels & submit === */

/* === COMPACT HEADER & FOOTER === */
header.header{ padding:10px 0; }
header.header .nav-centered a{ margin:0 10px; font-size:15px; }
footer{ padding:18px 0; font-size:15px; line-height:1.6; }

/* === COMPACT/STICKY HEADER & FOOTER === */
html, body{ height:100%; }
body{ display:flex; flex-direction:column; }
main{ flex:1 0 auto; }
footer{ flex-shrink:0; }
header.header{ padding:8px 0 !important; }
footer{ padding:14px 0 !important; }

/* === FINAL CONTACTS & FOOTER STYLE === */

/* Enlarge contacts block */
#contact p, #contact a{ font-size:17px !important; line-height:1.8 !important; }

/* Footer same style as header */
footer{ background:var(--red) !important; color:#fff !important; padding:24px 0 !important; }
footer a{ color:#fff !important; font-weight:600; }
footer .links{ display:flex; justify-content:center; flex-wrap:wrap; gap:20px; font-size:16px; }

/* === CONTACTS TYPO SCALE === */
#contact h2{ font-size:32px !important; margin-bottom:8px !important; }
#contact .block h3{ font-size:20px !important; margin-bottom:10px !important; }
#contact p, #contact a{ font-size:18px !important; line-height:1.9 !important; }
#contact .grid{ gap:22px !important; }

/* === EQUAL HEADER/FOOTER HEIGHT === */
header.header{ padding:20px 0 !important; }
footer{ padding:20px 0 !important; background:var(--red) !important; color:#fff !important; }
footer a{ color:#fff !important; font-weight:600; }

/* === HEADER/FOOTER COMPACT & CLEAN === */
header.header{ padding:10px 0 !important; }
header.header .nav-centered a{ margin:0 10px; font-size:15px; }

footer{ background:var(--red) !important; color:#fff !important; padding:12px 0 !important; }
footer .container{ display:flex; flex-direction:column; align-items:center; gap:6px; }
footer .links{ display:flex; justify-content:center; flex-wrap:wrap; gap:16px; font-size:15px; }
footer a{ color:#fff !important; font-weight:600; }
footer p{ margin:0; text-align:center; } /* diritti riservati al centro */

/* === CONTACT layout sanity === */
#contact .grid.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:24px; }
@media (max-width: 860px){ #contact .grid.grid-2{ grid-template-columns: 1fr; } }
#contact .micro-note{ font-size:14px; opacity:.85; margin-top:8px; }


/* === ABOUT 'PALLINI' STYLE (horizontal pills) === */
/* === FORM SUBMIT BUTTON BIGGER === */
#contact form button[type="submit"]{
  font-size:18px !important;
  padding:18px 28px !important;
}


/* === CONTACTS UTILI SPACING === */
#contact .block p{ margin-bottom:10px !important; }


/* === STICKY FOOTER === */
html, body{ height:100%; margin:0; }
body{ display:flex; flex-direction:column; }
main{ flex:1 0 auto; }
footer{ flex-shrink:0; }


/* === ENSURE FOOTER STICKS TO BOTTOM === */
html, body{ height:100%; margin:0; }
body{ display:flex; flex-direction:column; min-height:100vh; }
main{ flex:1; display:block; }
footer{ margin-top:auto; }


/* === STICKY FOOTER FINAL === */
html, body { height: 100%; }
body { display: flex; flex-direction: column; }
main { flex: 1 0 auto; display:block; }
footer { flex-shrink: 0; }


/* === ABOUT SPACING === */


/* === UNIFORMITA' NON DISTRUTTIVA (safe) === */

/* Container coerente */
.section .container{ max-width:1100px; margin:0 auto; }

/* Titoli sezione */
.section h2{
  font-size:34px;
  line-height:1.15;
  font-weight:900;
  letter-spacing:-0.01em;
  margin:0 0 16px 0;
}

/* Spaziatura verticale regolare */
.section{ padding:60px 0; }

/* Testi base */
.section p{ line-height:1.75; font-size:16px; }

/* Pulsanti coerenti (senza cambiare classi esistenti) */
.btn, .btn-primary, .btn-enter, .btn-red{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 22px; border-radius:999px; font-weight:800;
  text-decoration:none; border:2px solid var(--red);
  transition:transform .08s ease, box-shadow .12s ease;
}
.btn-red, .btn-primary{ background:var(--red); color:#fff; border-color:var(--red); }
.btn:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(255,27,28,.18); }

/* Header & Footer coerenti e compatti */
header.header{ padding:14px 0; }
header.header .nav-centered a{ margin:0 12px; font-size:15px; }
footer{ background:var(--red); color:#fff; padding:14px 0; }
footer .container{ display:flex; flex-direction:column; align-items:center; gap:6px; }
footer .links{ display:flex; justify-content:center; flex-wrap:wrap; gap:16px; font-size:15px; }
footer a{ color:#fff; font-weight:600; }
footer p{ margin:0; text-align:center; }

/* Sticky footer */
html, body{ height:100%; }
body{ display:flex; flex-direction:column; }
main{ flex:1 0 auto; display:block; }
footer{ flex-shrink:0; }

/* Chi siamo: distanza extra tra pallini e CTA, senza toccare layout */
/* Contatti: righe ben distanziate */
#contact .block p{ margin-bottom:10px; }


/* === FINAL UNIFORMATION (except first button) === */

/* General container and spacing */
.section .container{ max-width:1100px; margin:0 auto; }
.section{ padding:60px 0; }

/* Headings uniform */
.section h2{
  font-size:34px; line-height:1.15; font-weight:900; letter-spacing:-0.01em;
  margin:0 0 16px 0;
}
.section h3{
  font-size:22px; line-height:1.3; font-weight:700; margin:12px 0 10px 0;
}
.section p{ line-height:1.75; font-size:16px; }

/* Buttons uniform (except preventivo main) */
.btn, .btn-enter, .btn-red, #contact form button[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 22px; border-radius:999px; font-weight:800;
  text-decoration:none; border:2px solid var(--red);
  transition:transform .08s ease, box-shadow .12s ease;
  background:var(--red); color:#fff; border-color:var(--red);
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(255,27,28,.18); }

/* Do NOT override the first "Richiedi un preventivo" button (keep its class .btn-primary untouched) */

/* Header/Footer uniform */
header.header{ padding:14px 0; }
header.header .nav-centered a{ margin:0 12px; font-size:15px; }
footer{ background:var(--red); color:#fff; padding:14px 0; }
footer .container{ display:flex; flex-direction:column; align-items:center; gap:6px; }
footer .links{ display:flex; justify-content:center; flex-wrap:wrap; gap:16px; font-size:15px; }
footer a{ color:#fff; font-weight:600; }
footer p{ margin:0; text-align:center; }

/* Sticky footer */
html, body{ height:100%; }
body{ display:flex; flex-direction:column; }
main{ flex:1 0 auto; display:block; }
footer{ flex-shrink:0; }

/* About section spacing */
/* Contact section spacing */
#contact .block p{ margin-bottom:10px; }


/* === BUTTON TEXT UNIFORM SIZE === */
.btn, .btn-enter, .btn-red, #contact form button[type="submit"]{
  font-size:18px !important;
  font-weight:800 !important;
}


/* === BUTTON TEXT SIZE UNIFORM === */
.btn, .btn-enter, .btn-red, .btn-primary, #contact form button[type="submit"]{
  font-size:18px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
}


/* === FINAL BUTTON TEXT SIZE UNIFORM === */
.btn, .btn-enter, .btn-red, .btn-primary, #contact form button[type="submit"]{
  font-size:18px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
}


/* === HERO OVERLAY TEXT (SVG replacement) === */
#top.hero{ position:relative; }
#top.hero .hero-overlay-text{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:28px;
  font-weight:900;
  font-size:clamp(20px, 3.2vw, 36px);
  line-height:1.1;
  letter-spacing:-0.02em;
  color:var(--red);
  text-align:center;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
  pointer-events:none; /* purely visual */
}
@media (max-width: 640px){
  #top.hero .hero-overlay-text{ font-size:clamp(18px, 4.2vw, 28px); top:16px; }
}


/* === ABOUT CARDS: trasformati in pallini === */
.about-cards {
  display: flex !important;
  justify-content: center !important;
  gap: 20px !important;
  margin: 28px auto !important;
  flex-wrap: wrap !important;
}

.geo-card {
  background: var(--red) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 20px 30px !important;
  text-align: center !important;
  min-width: 200px !important;
  box-shadow: 0 6px 18px rgba(255,27,28,.18) !important;
}
.geo-card .ban-title {
  display: block;
  font-weight: 900;
  margin-bottom: 4px;
  font-size: 16px;
}
.geo-card .ban-text {
  font-size: 14px;
  opacity: .9;
}


/* === OVERRIDE • Pallini bianchi con bordo rosso e testo rosso === */
.about-cards{
  display:flex !important; justify-content:center !important; gap:20px !important;
  margin:28px auto !important; flex-wrap:wrap !important;
}
.geo-card{
  background:#fff !important; color:var(--red) !important;
  border:2px solid var(--red) !important; border-radius:999px !important;
  padding:18px 26px !important; text-align:center !important; min-width:220px !important;
  box-shadow:0 6px 16px rgba(255,27,28,.10) !important;
}
.geo-card .ban-title{ display:block; font-weight:900; margin-bottom:4px; font-size:17px !important; color:var(--red) !important; }
.geo-card .ban-text{ font-size:14.5px !important; color:var(--red) !important; opacity:1 !important; }
.geo-card::after{ display:none !important; } /* rimuovi alone/ombra ovale */

/* === OVERRIDE • Tipografia +1 tacca === */
h1{ font-size:clamp(40px,5.5vw,66px) !important; }
h2{ font-size:clamp(30px,3.8vw,44px) !important; }
h3{ font-size:clamp(20px,2.2vw,24px) !important; }
p, li{ font-size:clamp(17px,1.5vw,19px) !important; }

/* === OVERRIDE • Bottoni +1 tacca === */
.btn, .btn-enter, .btn-red, .btn-primary, #contact form button[type="submit"]{
  font-size:20px !important;
  padding:16px 26px !important;
}

/* Hero main CTA rimane XXL ma cresce un filo */
.btn-red.btn-xxl, .hero .btn-enter.btn-xxl{
  font-size:1.8rem !important;
  padding:24px 52px !important;
}


/* === OVERRIDE EQUILIBRATO — dimensioni testi e bottoni === */
h1{ font-size:clamp(38px,5vw,62px) !important; }
h2{ font-size:clamp(29px,3.5vw,42px) !important; }
h3{ font-size:clamp(19px,2vw,23px) !important; }
p, li{ font-size:clamp(16.5px,1.45vw,18.5px) !important; }

/* Bottoni leggermente più grandi ma non esagerati */
.btn, .btn-enter, .btn-red, .btn-primary, #contact form button[type="submit"]{
  font-size:18.5px !important;
  padding:15px 24px !important;
}

/* Hero main CTA XXL bilanciato */
.btn-red.btn-xxl, .hero .btn-enter.btn-xxl{
  font-size:1.55rem !important;
  padding:20px 46px !important;
}

/* Pallini bianchi con bordo rosso bilanciati */
.geo-card{
  background:#fff !important;
  color:var(--red) !important;
  border:2px solid var(--red) !important;
  border-radius:999px !important;
  padding:16px 22px !important;
  text-align:center !important;
  min-width:200px !important;
  box-shadow:0 4px 12px rgba(255,27,28,.10) !important;
}
.geo-card .ban-title{ font-size:15.5px !important; }
.geo-card .ban-text{ font-size:13.5px !important; }


/* === BOTTONI UNIFORMATI === */
.btn, .btn-red, .btn-primary, .btn-enter, #contact form button[type="submit"] {
  font-size:18px !important;
  padding:14px 24px !important;
  border-radius:999px !important;
  font-weight:800 !important;
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; border:2px solid var(--red);
  background:var(--red); color:#fff; border-color:var(--red);
  transition:transform .08s ease, box-shadow .12s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(255,27,28,.18); }

/* === HERO: "Richiedi un preventivo" mantiene stile diverso e PIÙ PICCOLO === */
.hero .btn-enter.btn-xxl {
  background:#fff !important;
  color:var(--red) !important;
  font-size:16px !important;
  padding:12px 22px !important;
  border:2px solid #fff !important;
  box-shadow:0 6px 16px rgba(0,0,0,.15) !important;
}


/* === BOTTONI UNIFORMI === */
.btn, .btn-red, .btn-primary, .btn-enter, #contact form button[type="submit"] {
  font-size:18px !important;
  padding:14px 26px !important;
  border-radius:999px !important;
  font-weight:800 !important;
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; border:2px solid var(--red);
  background:var(--red); color:#fff; border-color:var(--red);
  transition:transform .08s ease, box-shadow .12s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(255,27,28,.18); }

/* === HERO: "Richiedi un preventivo" unico leggermente più grande === */
.hero .btn-enter.btn-xxl {
  background:#fff !important;
  color:var(--red) !important;
  font-size:20px !important;
  padding:18px 34px !important;
  border:2px solid #fff !important;
  box-shadow:0 6px 16px rgba(0,0,0,.15) !important;
}


/* === HEADER & FOOTER STESSA ALTEZZA === */
header.header, footer {
  padding:16px 0 !important;
  background:#fff;
  color:#111;
}
footer p{
  margin:0;
  text-align:center;
  font-size:14px;
}
footer{ margin-top:auto !important; position:relative !important; bottom:0 !important; width:100%; }

/* === BOTTONI UNIFORMI === */
.btn, .btn-red, .btn-primary, .btn-enter, #contact form button[type="submit"] {
  font-size:18px !important;
  padding:14px 26px !important;
  border-radius:999px !important;
  font-weight:800 !important;
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; border:2px solid var(--red);
  background:var(--red); color:#fff; border-color:var(--red);
  transition:transform .08s ease, box-shadow .12s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(255,27,28,.18); }

/* === HERO: "Richiedi un preventivo" leggermente più grande === */
.hero .btn-enter.btn-xxl {
  background:#fff !important;
  color:var(--red) !important;
  font-size:20px !important;
  padding:18px 34px !important;
  border:2px solid #fff !important;
  box-shadow:0 6px 16px rgba(0,0,0,.15) !important;
}

/* === ASSICURA CHE "Prenota il tuo staff" SIA UGUALE AGLI ALTRI === */
.btn.btn-enter.btn-red.btn-xxl {
  font-size:18px !important;
  padding:14px 26px !important;
}


/* ==== MOBILE OPTIMIZATION (<= 768px) ==== */
@media (max-width: 768px){
  /* Header/Footer: stessa altezza, più compatti su mobile */
  header.header, footer{
    padding:12px 0 !important;
  }
  body{ padding-top:56px !important; } /* compensa header fisso */

  /* Hero più pulita e focalizzata */
  .hero{
    min-height:100dvh !important;
    padding:16px !important;
    background-size: 90% !important; /* logo non troppo grande */
  }
  .hero .btn-enter.btn-xxl{
    font-size:18px !important;
    padding:16px 32px !important;
  }

  /* Bottoni uniformi (leggermente ridotti per mano singola) */
  .btn, .btn-red, .btn-primary, .btn-enter, #contact form button[type="submit"]{
    font-size:17px !important;
    padding:12px 22px !important;
  }

  /* Pallini orizzontali: rientro e larghezza minima più smart */
  .about-cards{
    gap:12px !important;
    margin:18px auto !important;
  }
  .geo-card{
    min-width:180px !important;
    padding:14px 18px !important;
  }
  .geo-card .ban-title{ font-size:15px !important; }
  .geo-card .ban-text{ font-size:13px !important; }

  /* Griglie in 1 colonna per leggibilità */
  .grid-3, .grid-2, #services .grid{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  /* Servizi: box con spaziatura coerente */
  #services .block{
    padding-left:14px !important;
    border-left-width:3px !important;
  }

  /* Portfolio blocchi in pila */
  #portfolio .grid{ grid-template-columns:1fr !important; }

  /* Form: tap targets comodi */
  input, select, textarea{
    font-size:16px !important;
    padding:14px 14px !important;
  }
  label{ font-size:13.5px !important; }

  /* Titoli e paragrafi: scala morbida su schermi piccoli */
  h1{ font-size:clamp(30px, 8vw, 40px) !important; }
  h2{ font-size:clamp(22px, 6.5vw, 28px) !important; }
  h3{ font-size:clamp(18px, 5.2vw, 22px) !important; }
  p, li{ font-size:16px !important; line-height:1.75 !important; }

  /* Footer sempre attaccato e leggibile */
  footer p{ font-size:13.5px !important; }
}

/* ==== VERY SMALL DEVICES (<= 400px) ==== */
@media (max-width: 400px){
  .hero{ background-size: 100% !important; }
  .hero .btn-enter.btn-xxl{
    font-size:17px !important;
    padding:14px 26px !important;
  }
  .geo-card{ min-width:160px !important; padding:12px 16px !important; }
}



/* === Cookie Banner (GDPR) === */
.cookie-banner{position:fixed;left:1rem;right:1rem;bottom:1rem;background:#fff;border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 30px rgba(0,0,0,.1);border-radius:16px;padding:16px;z-index:9999;max-width:980px;margin:0 auto;font-size:14px}
.cookie-banner .cookie-content{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cookie-banner p{margin:0;line-height:1.5}
.cookie-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn-primary{padding:10px 14px;border-radius:999px;border:0;background:#FF1B1C;color:#fff;cursor:pointer}
.btn-outline{padding:10px 14px;border-radius:999px;border:1px solid #FF1B1C;background:transparent;color:#FF1B1C;cursor:pointer}
.btn-ghost{padding:10px 14px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;color:#111827;cursor:pointer}
.cookie-panel{margin-top:10px;padding-top:10px;border-top:1px dashed #e5e7eb;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
@media (max-width:640px){.cookie-banner{left:.5rem;right:.5rem}}