/* Layout: 75rem grid in thirds. Hero = white column + diagonal photo panel bleeding off the right edge,
   a cut-out van crossing the diagonal. Below, bands on the same thirds; every cut runs on a slant. */
:root{
  --vw:1vw;               /* phones and tablets: a real viewport unit; on desktop it becomes 1/100 of the 1440 stage */
  --bleed:0rem;           /* extra width beyond the stage on ultrawide screens, filled by backgrounds only */
  --red:#dc342c;          /* blocks, buttons, strips (white text passes 4.6:1) */
  --red-ink:#c42a23;      /* red used as text on white or mist */
  --ink:#2b2c31;          /* charcoal: headings, dark panels, footer */
  --ink-2:#3a3b41;        /* raised dark surfaces */
  --ink-line:#3f4046;     /* rules on dark */
  --text:#303136;
  --muted:#6a6b71;
  --line:#dcdde1;
  --mist:#f1f1f3;         /* light grey bands */
  --mist-2:#e9e9ec;       /* the grey wedge at the top of the hero */
  --paper:#ffffff;
  --on-dark:#ffffff;
  --on-dark-muted:#adaeb4;
  --red-soft:#ff7a6e;     /* red text and icons on ink (5.5:1) */
  --ph-dark:#3b3c42; --ph-mid:#74767d; --ph-light:#cdcfd4;

  --f-display:"Exo 2","Trebuchet MS",system-ui,sans-serif;
  --f-body:"Barlow","Helvetica Neue",Arial,sans-serif;

  --wrap:75rem;
  --gl:max(1.5rem, env(safe-area-inset-left,0rem));
  --gr:max(1.5rem, env(safe-area-inset-right,0rem));
  --foot-h:4.75rem;
  color-scheme:light;
}
@media (max-width:700px){
  :root{ --gl:max(1rem, env(safe-area-inset-left,0rem)); --gr:max(1rem, env(safe-area-inset-right,0rem)); }
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);font:400 0.9375rem/1.6 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit}
h1,h2,h3,p,ul,ol,address,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:0.125rem solid var(--red);outline-offset:0.1875rem}
/* scrollbars: thin, quiet grey thumb on white, darker while in use.
   Chrome, Edge and Safari use the ::-webkit rules; Firefox only understands the colours and "thin". */
html{scrollbar-gutter:stable}   /* the page does not jump sideways when a popup locks scrolling */
::-webkit-scrollbar{width:0.625rem;height:0.625rem}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:#b9bac0;border:0.125rem solid var(--paper);background-clip:padding-box;min-height:3rem}
::-webkit-scrollbar-thumb:hover{background-color:#8f9096}
::-webkit-scrollbar-thumb:active{background-color:var(--ink)}
::-webkit-scrollbar-corner{background:var(--paper)}
.pd-body::-webkit-scrollbar,.qd::-webkit-scrollbar,textarea::-webkit-scrollbar{width:0.5rem}   /* a touch thinner inside popups and the notes box */
textarea::-webkit-scrollbar-track{background:transparent}
textarea::-webkit-scrollbar-thumb{border-color:transparent}
@supports not selector(::-webkit-scrollbar){
  html,.pd-body,.qd,textarea{scrollbar-color:#b9bac0 transparent;scrollbar-width:thin}
}
.sr{position:absolute!important;width:0.0625rem;height:0.0625rem;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.wrap{width:100%;max-width:calc(var(--wrap) + 3rem);margin-inline:auto;
  padding-left:max(1.5rem, env(safe-area-inset-left,0rem));padding-right:max(1.5rem, env(safe-area-inset-right,0rem))}
@media (max-width:700px){
  .wrap{padding-left:max(1rem, env(safe-area-inset-left,0rem));padding-right:max(1rem, env(safe-area-inset-right,0rem))}
}

/* shared type */
.sec-title{font:300 clamp(1.5rem,calc(2.3 * var(--vw)),2rem)/1.1 var(--f-display);text-transform:uppercase;letter-spacing:.02em;color:var(--ink);text-wrap:balance}
.sec-title b{font-weight:800}
.eyebrow{font:700 0.7188rem/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--red-ink)}
.link-more{display:inline-block;font:700 0.7188rem/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);padding-bottom:0.4375rem;border-bottom:0.125rem solid var(--red);transition:color .2s}
.link-more:hover{color:var(--red-ink)}

/* photo slots: diagonal hatch placeholder until the real file loads */
.ph{position:relative;overflow:hidden;background-color:var(--ph-mid);
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 0.0625rem,transparent 0.0625rem 0.875rem);
  background-position:center;--ph-fg:#f3f3f5}
.ph[data-tone="dark"]{background-color:var(--ph-dark);--ph-fg:#bdbec4}
.ph[data-tone="light"]{background-color:var(--ph-light);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.45) 0 0.0625rem,transparent 0.0625rem 0.875rem);--ph-fg:#3a3b41}
.ph.is-missing::after{content:"FOTO · " attr(data-label) "\A" attr(data-img);white-space:pre-wrap;overflow-wrap:anywhere;position:absolute;left:1.125rem;top:1rem;right:1.125rem;
  font:600 0.6562rem/1.6 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--ph-fg);pointer-events:none}
.ph.is-loaded{background-size:cover}
.ph.is-loaded::after{display:none}

/* ---------- header ---------- */
.site-header{position:absolute;inset:0 0 auto;z-index:20}
.header-in{display:flex;align-items:center;height:5.75rem;gap:1.5rem}
/* logo: the slanted S (same angle as the site's cuts) beside the stacked wordmark */
.logo{display:inline-flex;align-items:center;gap:0.5em;font-size:1.25rem;color:var(--ink);white-space:nowrap;line-height:1}
.logo-s{flex:none;width:2.05em;height:2.05em;fill:var(--red)}
.logo-word{display:flex;flex-direction:column;gap:0.36em;font-family:var(--f-display);text-transform:uppercase}
.logo-word b{font-size:1em;font-weight:800;line-height:.82;letter-spacing:.02em}
.logo-word span{font-size:.54em;font-weight:300;letter-spacing:.825em;margin-right:-.825em}   /* spaced to the exact width of SALVATORE */
.logo.is-light{color:var(--on-dark);margin-bottom:1.25rem}
/* PC menu: the links sit in a white bar slanted at both ends, floating on a soft shadow (the wrapper carries the shadow, the clip would cut it) */
.nav-wrap{margin-left:1.5rem;filter:drop-shadow(0 0.4rem 0.9rem rgba(20,20,24,.16))}
.nav{display:flex;align-items:stretch;background:var(--paper);padding:0 1.6rem;clip-path:polygon(1.2rem 0,100% 0,calc(100% - 1.2rem) 100%,0 100%)}
.nav a{position:relative;display:flex;align-items:center;gap:0.5rem;padding:1.25rem 1.1rem;color:var(--ink);font:600 0.75rem/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase}
.nav a::after{content:"";position:absolute;left:1.1rem;right:1.1rem;bottom:0.85rem;height:0.125rem;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.nav a:focus-visible{outline-offset:-0.375rem}
/* language menu: a button with the current flag (IT ▾) that opens the three languages, each with its flag.
   After the menu bar on PC, at the top of the full screen menu on phones (.is-light) */
.lang-dd{position:relative;z-index:30;margin-left:1rem}
.lang-btn{display:flex;align-items:center;gap:0.5rem;height:2.5rem;padding:0 0.75rem;border:0;background:var(--paper);color:var(--ink);
  font:700 0.75rem/1 var(--f-display);letter-spacing:.12em;box-shadow:0 0.4rem 0.9rem rgba(20,20,24,.16);cursor:pointer}
.lang-caret{width:0.375rem;height:0.375rem;margin-left:0.125rem;border:solid currentColor;border-width:0 0.094rem 0.094rem 0;transform:translateY(-25%) rotate(45deg);transition:transform .2s}
.lang-dd.is-open .lang-caret{transform:translateY(25%) rotate(-135deg)}
.lang-btn:hover,.lang-dd.is-open .lang-btn{color:var(--red-ink)}
.lang-list{position:absolute;right:0;top:calc(100% + 0.375rem);min-width:10.5rem;margin:0;padding:0.375rem 0;list-style:none;
  background:var(--paper);border-top:0.1875rem solid var(--red);box-shadow:0 1.25rem 2.75rem rgba(20,20,24,.22),0 0 0 0.0625rem rgba(20,20,24,.06)}
.lang-list a{display:flex;align-items:center;gap:0.75rem;padding:0.6875rem 1.125rem;color:var(--ink);font:500 0.9375rem/1 var(--f-body);transition:background .12s}
.lang-list a:hover,.lang-list a:focus-visible{background:var(--mist);outline:none}
.lang-list a[aria-current]{color:var(--red-ink);font-weight:700}
.flag{flex:none;width:1.375rem;height:1.03125rem;object-fit:cover;box-shadow:0 0 0 0.0625rem rgba(20,20,24,.15)}   /* 4:3 flag-icons files */
.lang-dd.is-light{margin:0 1.25rem 0 auto}
.lang-dd.is-light .lang-btn{background:rgba(255,255,255,.12);color:var(--on-dark);box-shadow:none}
.lang-dd.is-light .lang-btn:focus-visible{outline:0.125rem solid var(--on-dark)}
/* phones and tablets: a dark MENU button that opens the full screen menu */
.menu-btn{display:none;align-items:center;gap:0.75rem;margin-left:auto;height:2.625rem;padding:0 1.25rem 0 1.1rem;border:0;background:var(--ink);color:var(--on-dark);
  font:700 0.75rem/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase}
.menu-btn:focus-visible{outline-color:var(--on-dark);outline-offset:-0.3125rem}
.mb-lines{display:flex;flex-direction:column;gap:0.28rem}
.mb-lines i{display:block;width:1.15rem;height:0.125rem;background:currentColor}

/* ---------- full screen menu (phones and tablets) ---------- */
html.is-menu-open{overflow:hidden}
.fs-menu{position:fixed;inset:0;z-index:100;display:grid;grid-template-rows:1fr auto;overflow-y:auto;overscroll-behavior:contain;background:var(--ink);color:var(--on-dark);
  visibility:hidden;opacity:0;transition:opacity .25s,visibility 0s .25s}
.fs-menu.is-open{visibility:visible;opacity:1;transition:opacity .25s}
.fs-top{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:space-between;height:4.25rem;padding:0 var(--gr) 0 var(--gl)}
.fs-top .logo{margin:0}
.fs-close{display:flex;align-items:center;gap:0.75rem;height:2.75rem;margin-right:-0.25rem;padding:0 0.25rem;border:0;background:none;color:var(--on-dark);font:700 0.75rem/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase}
.fs-close i{position:relative;width:1.25rem;height:1.25rem}
.fs-close i::before,.fs-close i::after{content:"";position:absolute;left:-0.125rem;right:-0.125rem;top:50%;height:0.125rem;margin-top:-0.0625rem;background:currentColor;transform:rotate(45deg)}
.fs-close i::after{transform:rotate(-45deg)}
.fs-close:focus-visible{outline-color:var(--on-dark)}
.fs-links{display:flex;flex-direction:column;justify-content:center;gap:0.25rem;padding:6rem var(--gr) 2rem var(--gl);counter-reset:fs}
.fs-links a{counter-increment:fs;display:flex;align-items:baseline;gap:1.25rem;padding:0.1rem 0;color:var(--on-dark);font:800 2rem/1.1 var(--f-display);letter-spacing:.01em;text-transform:uppercase;
  opacity:0;transform:translateY(0.75rem);transition:opacity .35s,transform .35s,color .2s}
.fs-links a::before{content:counter(fs,decimal-leading-zero);flex:none;width:1.75rem;color:var(--red-soft);font:700 0.8125rem/1 var(--f-display);letter-spacing:.14em}
.fs-links a.is-active,.fs-links a:hover{color:var(--red-soft)}
.fs-links a:focus-visible{outline-color:var(--on-dark)}
.fs-menu.is-open .fs-links a{opacity:1;transform:none}
.fs-menu.is-open .fs-links a:nth-child(2){transition-delay:.04s}
.fs-menu.is-open .fs-links a:nth-child(3){transition-delay:.08s}
.fs-menu.is-open .fs-links a:nth-child(4){transition-delay:.12s}
.fs-menu.is-open .fs-links a:nth-child(5){transition-delay:.16s}
.fs-info{display:flex;flex-direction:column;justify-content:center;gap:1rem;padding:2rem var(--gr) calc(2.5rem + env(safe-area-inset-bottom,0rem)) var(--gl);background:var(--red)}
.fs-info small{display:block;margin-bottom:0.4rem;font:700 0.6875rem/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.fs-info p{font:500 1rem/1.4 var(--f-body)}
.fs-info a:hover{text-decoration:underline;text-underline-offset:0.1875rem}
.fs-info :focus-visible{outline-color:var(--on-dark)}
.fs-phone{display:flex;align-items:center;gap:0.875rem}
.fs-info .fs-phone a:first-child{font:700 1.375rem/1.1 var(--f-display)}
.fs-wa{flex:none;display:grid;place-items:center;width:2.25rem;height:2rem;background:var(--on-dark);color:var(--red-ink)}
.fs-wa svg{width:1.125rem;height:1.125rem}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:clamp(45rem,calc(47 * var(--vw)),53.75rem);background:var(--paper)}
.hero-visual{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-visual::before{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--foot-h);background:var(--mist)}
/* one figure: photo diagonal runs 70% (top) to 34% (bottom); a grey wedge mirrors it at the top (the X);
   at the foot the photo turns red, and the grey carries the same diagonal down into the services band */
.hero-sheen{position:absolute;inset:0;background:var(--mist-2);clip-path:polygon(45% 0,70% 0,57.5% 34.72%)}
.hero-photo{position:absolute;top:0;right:0;bottom:0;width:66%;clip-path:polygon(54.55% 0,100% 0,100% 100%,0 100%);background:var(--ink)}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;background-position:85% center;background-size:cover}   /* black and red, like the photo in Perché sceglierci */
.hero-slide.is-active{opacity:1}
.hero-slide canvas{display:none;width:100%;height:100%}   /* drawn only if img/hero.jpg is missing */
.hero-slide.is-missing canvas{display:block}
.hero-slide.is-loaded canvas{display:none}
/* perspective match: the road photo's horizon (45.54% down, vanishing point at 97.66% across) is placed on the
   van's own horizon, where its box edges meet (2.0796 × canvas width from the canvas left, 0.3053 down).
   Horizon height is exact; sideways the road's vanishing point follows the van's but is held back so the sun
   (7.33% of the photo width left of it) stays at the right edge of the photo. Clamps keep the panel covered. */
.hero-slide.is-loaded{--w1:clamp(27.5rem,calc(40 * var(--vw)),50rem);--hh:clamp(45rem,calc(47 * var(--vw)),53.75rem);
  --vpx:calc(calc(5 * var(--vw)) + var(--w1) * 1.9394);
  --vpy:calc(var(--hh) * .81 - var(--w1) * .3283);
  --bgh:max(calc(var(--vpy) / .4554), var(--hh), calc(45 * var(--vw)));
  --vpr:min(var(--vpx), calc(calc(67 * var(--vw)) + var(--bgh) * .11));
  background-size:auto var(--bgh);
  background-position:clamp(calc(calc(66 * var(--vw)) - var(--bgh) * 1.4995), calc(var(--vpr) - var(--bgh) * 1.4644), 0rem)
                      clamp(calc(var(--hh) - var(--bgh)), calc(var(--vpy) - var(--bgh) * .4554), 0rem)}
/* darker road in the lower half so the vehicles and their shadows sit in the scene */
.hero-slide.is-loaded::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(14,14,16,0) 42%,rgba(14,14,16,.36) 68%,rgba(14,14,16,.62) 100%)}
/* the van and its shadow are two aligned layers on the same canvas (1500×1129); --w1 is the canvas width on screen.
   The van's front starts at 39% and its front wheels touch the road at 81% of the banner height. */
.hero-van,.hero-shadow,.hero-trail{--w1:clamp(27.5rem,calc(40 * var(--vw)),50rem);position:absolute;left:calc(39% - var(--w1) * .1387);top:calc(81% - var(--w1) * .6334);
  width:var(--w1);aspect-ratio:1500/1129;max-width:none;background-repeat:no-repeat;background-position:center bottom}
.hero-van.is-loaded,.hero-shadow.is-loaded{background-size:contain}
/* speed: a trail and light streaks behind the van, drawn toward its vanishing point. Same box as the van;
   the picture covers 2.1 × 1.35 van widths from 0.35 widths above the van, and stays inside the photo (shadow clip). */
.hero-trail::before{content:"";position:absolute;left:0;top:-46.5%;width:210%;height:179.35%;background:url(../img/scia.webp) no-repeat 0 0/100% 100%}
/* the shadow only falls on the photo, never on the white column (same diagonal as the photo) */
.hero-shadow-clip{position:absolute;inset:0;pointer-events:none;clip-path:polygon(70% 0,100% 0,100% 100%,34% 100%)}
.hero-van svg{display:none;width:100%;height:100%;overflow:visible}   /* drawn van only if the photo is missing */
.hero-van.is-missing svg{display:block}
/* van, shadow and trail fade in together once the van is ready, never one by one */
.hero-van,.hero-shadow-clip{opacity:0;transition:opacity .5s ease}
.hero-visual.van-ready .hero-van,.hero-visual.van-ready .hero-shadow-clip{opacity:1}
.hero-van.is-loaded svg{display:none}

.hero-main{position:relative;z-index:3;flex:1;padding-top:7.75rem;padding-bottom:2.75rem}
.hero-copy{width:min(29.375rem,100%)}
.hero-title{font:300 clamp(1.625rem,calc(2.25 * var(--vw)),2.25rem)/1.16 var(--f-display);text-transform:uppercase;color:var(--ink);letter-spacing:.01em}
.hero-title b,.hero-title span{display:block;white-space:nowrap}
.hero-title b{font-weight:800}
/* big first line, kept on the white side of the photo diagonal */
.hero-title .t-big{width:max-content;font-size:1.95em;line-height:.92;letter-spacing:.005em}
.hero-title .t-small{margin-top:.55em;font-size:.72em;font-weight:700;line-height:1.1;letter-spacing:.04em}   /* same size as the dark tag below */
/* third line on a dark block, white text; straight left edge, the right end leans like the button */
.hero-hl{position:relative;z-index:0;display:inline-block;margin-top:.38em;padding:.2em .8em .16em .6em;font-style:normal;font-weight:700;font-size:.72em;line-height:1.1;letter-spacing:.04em;color:var(--on-dark);white-space:nowrap}
.hero-hl::before{content:"";position:absolute;z-index:-1;inset:0;background:var(--ink);clip-path:polygon(0 0,100% 0,calc(100% - .55em) 100%,0 100%)}

/* quote form: filled fields with an icon each, a header with a small note, the slanted button */
.quote{width:min(25rem,100%);margin-top:1.875rem}
/* header: a red slanted tab sitting on a thin red line, like the red labels on the service panels */
.quote-head{display:flex;align-items:flex-end;border-bottom:4px solid var(--red)}   /* one red line under the tab; the tab overlaps it so they read as one shape */
.quote-title{display:inline-block;background:var(--red);color:var(--on-dark);font:700 0.75rem/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;
  position:relative;margin-bottom:-1px;padding:0.6rem 1.4rem 0.6rem 0.9rem;clip-path:polygon(0 0,100% 0,calc(100% - 0.55rem) 100%,0 100%)}
.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;padding-top:0.5rem}
.field{position:relative;display:block;min-width:0;background:var(--mist);transition:background .2s,box-shadow .2s}
.field.is-wide{grid-column:1 / -1}
.field:hover{background:#e9e9ec}
.field:focus-within{background:var(--paper);box-shadow:inset 0 0 0 0.0625rem var(--line),inset 0 -0.125rem 0 var(--red)}
.field > svg{position:absolute;left:0.8125rem;top:50%;width:1rem;height:1rem;transform:translateY(-50%);color:#86878d;pointer-events:none;transition:color .2s}
.field:focus-within > svg{color:var(--red)}
.field input,.field select{display:block;width:100%;height:2.75rem;border:0;border-radius:0;background:transparent;padding:0 0.875rem 0 2.5rem;font:500 0.875rem/1 var(--f-body);color:var(--text);outline:none}
.field input::placeholder{color:var(--muted);opacity:1;font-weight:400}
.field select{appearance:none;-webkit-appearance:none;color:var(--muted);font-weight:400;padding-right:2rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%236a6b71' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 0.875rem center}
.field select.has-value{color:var(--text);font-weight:500}
/* service + date pickers: a button in the field opens a panel styled like the form (red top line, square corners) */
.pick-btn{position:relative;display:flex;align-items:center;width:100%;height:2.75rem;border:0;border-radius:0;background:transparent;padding:0 2.25rem 0 2.5rem;
  font:400 0.875rem/1 var(--f-body);color:var(--muted);text-align:left;cursor:pointer;outline:none}
.pick-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-btn::after{content:"";position:absolute;right:0.95rem;top:50%;width:0.375rem;height:0.375rem;border:solid #86878d;border-width:0 0.094rem 0.094rem 0;
  transform:translateY(-70%) rotate(45deg);transition:transform .2s,border-color .2s}
.field.has-value .pick-btn{color:var(--text);font-weight:500}
.field.is-open{background:var(--paper);box-shadow:inset 0 0 0 0.0625rem var(--line)}   /* the panel below carries the red line */
.field.is-open > svg{color:var(--red)}
.field.is-open .pick-btn::after{transform:translateY(-25%) rotate(-135deg);border-color:var(--red)}
.pop{position:fixed;z-index:97;background:var(--paper);color:var(--text);border-top:0.1875rem solid var(--red);
  box-shadow:0 1.25rem 2.75rem rgba(20,20,24,.22),0 0 0 0.0625rem rgba(20,20,24,.06);
  opacity:0;visibility:hidden;transform:translateY(-0.375rem);pointer-events:none;transition:opacity .16s,transform .16s,visibility 0s .16s}
.pop.is-open{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .16s,transform .16s,visibility 0s}
.pop.is-up{border-top:0;border-bottom:0.1875rem solid var(--red);transform:translateY(0.375rem)}
.pop.is-up.is-open{transform:none}
/* service list */
.pop-list{margin:0;padding:0.375rem 0;list-style:none;outline:none}
.pop-opt{position:relative;display:flex;align-items:center;gap:0.75rem;padding:0.6875rem 1rem 0.6875rem 1.125rem;cursor:pointer;transition:background .12s}
.pop-opt.is-active{background:var(--mist)}
.po-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.25rem}
.po-txt b{font:700 0.9375rem/1.15 var(--f-display);color:var(--ink)}
.po-txt small{font-size:0.8125rem;line-height:1.3;color:var(--muted)}
.po-tick{flex:none;width:0.875rem;height:0.875rem;color:var(--red);opacity:0}
.pop-opt[aria-selected="true"]::before{content:"";position:absolute;left:0;top:0.5rem;bottom:0.5rem;width:0.1875rem;background:var(--red)}
.pop-opt[aria-selected="true"] b{color:var(--red-ink)}
.pop-opt[aria-selected="true"] .po-tick{opacity:1}
/* calendar */
.cal{width:18.5rem}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;background:var(--ink);color:var(--on-dark);padding:0.5rem 0.5rem 0.5rem 1rem}
.cal-title{font:700 0.8125rem/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase}
.cal-nav{display:flex;gap:0.25rem}
.cal-nav button{position:relative;display:grid;place-items:center;width:2.125rem;height:2.125rem;border:0;background:none;color:var(--on-dark);cursor:pointer}
.cal-nav button::before{content:"";position:absolute;inset:0.4rem;transform:rotate(45deg);background:var(--ink-2);transition:background .15s}
.cal-nav button:hover::before,.cal-nav button:focus-visible::before{background:var(--red)}
.cal-nav button:focus-visible{outline:none}
.cal-nav button:disabled{opacity:.3;cursor:default}
.cal-nav button:disabled::before{background:var(--ink-2)}
.cal-nav svg{position:relative;width:0.75rem;height:0.75rem}
.cal-body{padding:0.625rem 0.75rem 0.5rem}
.cal-week,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:0.125rem}
.cal-week span{padding:0.25rem 0 0.5rem;text-align:center;font:700 0.625rem/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cal-day{position:relative;height:2.25rem;border:0;border-radius:0;background:none;font:500 0.875rem/1 var(--f-body);color:var(--text);cursor:pointer;transition:background .12s}
.cal-day:hover{background:var(--mist)}
.cal-day:focus-visible{outline:0.125rem solid var(--red);outline-offset:-0.125rem}
.cal-day:disabled{color:#c4c5ca;background:none;cursor:default}
.cal-day.is-today{color:var(--red-ink);font-weight:700}
.cal-day.is-today::after{content:"";position:absolute;left:50%;bottom:0.3rem;width:0.875rem;height:0.125rem;margin-left:-0.4375rem;background:var(--red)}
.cal-day[aria-pressed="true"]{background:var(--red);color:var(--on-dark);font-weight:700;clip-path:polygon(0.3rem 0,100% 0,calc(100% - 0.3rem) 100%,0 100%)}
.cal-day[aria-pressed="true"]::after{background:var(--on-dark)}
.cal-day[aria-pressed="true"]:focus-visible{outline:none;background:var(--red-ink)}
.cal-foot{display:flex;justify-content:space-between;border-top:0.0625rem solid var(--line);padding:0.25rem 0.5rem}
.cal-foot button{border:0;background:none;padding:0.625rem 0.5rem;font:700 0.6875rem/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--red-ink);cursor:pointer}
.cal-foot button:hover{text-decoration:underline;text-underline-offset:0.25rem}
.cal-foot .is-quiet{color:var(--muted)}
.quote-privacy{display:flex;align-items:center;gap:0.5rem;margin-top:0.875rem;font-size:0.8125rem;color:var(--muted);cursor:pointer}
/* consent box: light like the fields, red with a white tick once accepted */
.quote-privacy input{appearance:none;-webkit-appearance:none;flex:none;width:1.0625rem;height:1.0625rem;margin:0;border:0.0625rem solid #d3d4d9;border-radius:0;
  background:var(--paper) no-repeat center/0.75rem;cursor:pointer;transition:background-color .15s,border-color .15s}
.quote-privacy:hover input{border-color:#b9bac0}
.quote-privacy input:checked{border-color:var(--red);background-color:var(--red);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3 4.9 8.7 9.7 3.6' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E")}
.quote-privacy input:focus-visible{outline:0.125rem solid var(--red);outline-offset:0.125rem}
.quote .btn-slant{margin-top:1rem}
.btn-slant{display:flex;align-items:center;justify-content:center;width:100%;height:3.375rem;margin-top:1.375rem;border:0;background:var(--ink);color:var(--on-dark);
  font:600 0.875rem/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;transition:background .2s}   /* straight edges (the floating buttons are straight too) */
.btn-slant:hover{background:var(--red)}
.btn-slant:focus-visible{outline:none;background:var(--red);text-decoration:underline;text-underline-offset:0.3125rem}
.quote-status:empty{display:none}
.quote-status{min-height:1.375rem;margin-top:0.75rem;font-size:0.8438rem;line-height:1.45;color:var(--muted)}
.quote-status.is-error{color:var(--red-ink)}
.quote-status a{color:var(--red-ink);font-weight:600;text-decoration:underline;text-underline-offset:0.1875rem}

/* ---------- quote confirmation popup ---------- */
html.is-dialog-open{overflow:hidden}
.qd{width:min(31rem, calc(100% - 2rem));max-width:none;max-height:calc(100dvh - 2rem);margin:auto;padding:0;border:0;background:var(--paper);color:var(--text);
  box-shadow:0 1.5rem 3.5rem rgba(20,20,24,.3);overflow:auto;overscroll-behavior:contain}
.qd::backdrop{background:rgba(20,20,24,.62)}
.qd[open]{animation:qd-in .25s ease-out}
@keyframes qd-in{from{opacity:0;transform:translateY(0.75rem)}}
.qd-in{position:relative;padding:1.75rem 1.75rem 1.5rem}
.qd-x{position:absolute;top:1rem;right:1rem;display:grid;place-items:center;width:2.25rem;height:2.25rem;border:0;background:none;color:var(--muted)}
.qd-x:hover{color:var(--ink)}
.qd-x i{position:relative;width:1rem;height:1rem}
.qd-x i::before,.qd-x i::after{content:"";position:absolute;left:-0.125rem;right:-0.125rem;top:50%;height:0.125rem;margin-top:-0.0625rem;background:currentColor;transform:rotate(45deg)}
.qd-x i::after{transform:rotate(-45deg)}
.qd .quote-head{margin-right:2.5rem}
.qd-lead{margin:1rem 0 0.5rem;font-size:0.875rem;color:var(--muted)}
.qd-list{display:grid;grid-template-columns:auto minmax(0,1fr);margin:0}
.qd-list dt,.qd-list dd{margin:0;padding:0.7rem 0;border-bottom:0.0625rem solid var(--line)}
.qd-list dt{padding-right:1.5rem;font:700 0.6875rem/1.9 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.qd-list dd{font:600 0.9375rem/1.4 var(--f-body);color:var(--ink);overflow-wrap:anywhere}
.qd-list dd.is-empty{font-weight:400;color:var(--muted)}
.qd-note{display:block;margin-top:1rem}
.qd-note span{display:block;margin-bottom:0.4rem;font:700 0.6875rem/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.qd-note textarea{display:block;width:100%;min-height:4.75rem;padding:0.75rem 0.875rem;border:0;border-radius:0;background:var(--mist);font:400 0.875rem/1.5 var(--f-body);color:var(--text);resize:vertical;outline:none;transition:background .2s,box-shadow .2s}
.qd-note textarea::placeholder{color:var(--muted);opacity:1}
.qd-note textarea:focus{background:var(--paper);box-shadow:inset 0 0 0 0.0625rem var(--line),inset 0 -0.125rem 0 var(--red)}
.qd-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:0.5rem;margin-top:1.25rem}
.qd-actions .btn-slant{margin-top:0;height:3.125rem;gap:0.5rem;padding:0 1rem}
.qd-actions .btn-slant svg{flex:none;width:1.0625rem;height:1.0625rem}
.btn-slant.is-light{background:var(--mist);color:var(--ink)}
.btn-slant.is-light:hover,.btn-slant.is-light:focus-visible{background:#e2e3e7}
@media (max-width:480px){
  .qd-in{padding:1.5rem 1.25rem 1.25rem}
  .qd-actions{grid-template-columns:minmax(0,1fr)}
  .qd-actions #qd-send{order:-1}   /* send first, edit underneath */
}
.qd-alt{margin-top:0.875rem;font-size:0.8125rem;color:var(--muted);text-align:center}
.qd-alt a{color:var(--red-ink);font-weight:600;text-decoration:underline;text-underline-offset:0.1875rem}
.qd-done{padding-top:0.5rem;text-align:center}
.qd-done[hidden],.qd-form[hidden]{display:none}
.qd-ok{display:grid;place-items:center;width:3.375rem;height:3.125rem;margin:0.5rem auto 1rem;background:var(--red);color:var(--on-dark);clip-path:polygon(0.55rem 0,100% 0,calc(100% - 0.55rem) 100%,0 100%)}
.qd-ok svg{width:1.375rem;height:1.375rem}
.qd-done h3{font:700 1.375rem/1.2 var(--f-display);color:var(--ink);outline:none}
.qd-done p{max-width:26rem;margin:0.625rem auto 0;font-size:0.9375rem;color:var(--muted)}
.qd-done p a{color:var(--red-ink);font-weight:600;white-space:nowrap}
.qd-done .btn-slant{max-width:14rem;margin:1.5rem auto 0}

/* ---------- call and WhatsApp buttons, fixed in the corner ---------- */
.float-cta{position:fixed;right:max(1.25rem, env(safe-area-inset-right,0rem));bottom:max(1.25rem, env(safe-area-inset-bottom,0rem));z-index:90;display:flex;filter:drop-shadow(0 0.35rem 0.75rem rgba(20,20,24,.28))}   /* side by side, WhatsApp then call, one shadow for the pair */
.fc-btn + .fc-btn{margin-left:-0.25rem}   /* the slants nest, leaving a thin even gap */
.fc-btn{position:relative;z-index:0;display:flex;align-items:center;justify-content:center;gap:0.5rem;height:3.25rem;padding:0 1.125rem 0 1.25rem;color:var(--on-dark)}
.fc-label{font:700 0.8125rem/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase}   /* the word next to the icon */
.fc-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--red);clip-path:polygon(0.6rem 0,100% 0,calc(100% - 0.6rem) 100%,0 100%);transition:background .2s}
.fc-btn.is-wa{color:var(--ink)}
.fc-btn.is-wa::before{background:var(--paper)}   /* white like the menu bar: it stays visible on the dark footer too */
.fc-btn svg{width:1.375rem;height:1.375rem}
.fc-btn:focus-visible{outline:0.125rem solid var(--ink);outline-offset:0.125rem}
.fc-tip{position:absolute;right:0;bottom:calc(100% + 0.5rem);padding:0.625rem 0.875rem;background:var(--ink);color:var(--on-dark);white-space:nowrap;
  font:700 0.6875rem/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;opacity:0;transform:translateY(0.375rem);pointer-events:none;transition:opacity .2s,transform .2s}
@media (hover:hover){
  .fc-btn.is-call:hover::before{background:var(--red-ink)}
  .fc-btn.is-wa:hover{color:var(--on-dark)}
  .fc-btn.is-wa:hover::before{background:var(--red)}
  .fc-btn:hover .fc-tip,.fc-btn:focus-visible .fc-tip{opacity:1;transform:none}
}
.float-cta{transition:opacity .2s,visibility .2s}

/* ---------- privacy and cookie popups ---------- */
.pd{width:min(46rem, calc(100% - 2rem));max-width:none;height:min(52rem, calc(100dvh - 2rem));max-height:none;margin:auto;padding:0;border:0;
  background:var(--paper);color:var(--text);box-shadow:0 1.5rem 3.5rem rgba(20,20,24,.3);overflow:hidden}
.pd[open]{display:flex;flex-direction:column;animation:qd-in .25s ease-out}
.pd::backdrop{background:rgba(20,20,24,.62)}
.pd-head{flex:none;display:flex;align-items:flex-end;gap:1rem;padding:1.5rem 1.25rem 1rem 2rem}
.pd-head .quote-head{flex:1}
.pd-head .qd-x{position:static;margin-bottom:0.25rem}
.pd-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0.5rem 2rem 2.5rem;font-size:0.9375rem;line-height:1.7}
.pd-meta{font-size:0.8125rem;color:var(--muted)}
.pd-body > p,.pd-sec > p{margin-top:0.75rem;max-width:68ch}
.pd-sec{margin-top:2.25rem}
.pd-sec h3{display:flex;align-items:center;gap:0.875rem;font:700 1.1875rem/1.25 var(--f-display);color:var(--ink)}
.pd-n{flex:none;display:grid;place-items:center;width:2.25rem;height:2rem;background:var(--red);color:var(--on-dark);font:700 0.8125rem/1 var(--f-display);
  clip-path:polygon(0.4rem 0,100% 0,calc(100% - 0.4rem) 100%,0 100%)}
.pd-sec h4{margin-top:1.375rem;font:700 1rem/1.3 var(--f-display);color:var(--ink)}
.pd-list{display:grid;gap:0.375rem;margin:0.75rem 0 0;max-width:68ch}
.pd-list li{position:relative;padding-left:1.125rem}
.pd-list li::before{content:"";position:absolute;left:0;top:.65em;width:0.375rem;height:0.375rem;background:var(--red)}
.pd-body a:not(.btn-slant){color:var(--red-ink);font-weight:600;text-decoration:underline;text-underline-offset:0.1875rem;overflow-wrap:anywhere}
.pd-link{padding:0;border:0;background:none;color:var(--red-ink);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:0.1875rem;cursor:pointer}
.pd-link:hover{color:var(--ink)}
/* purposes: fold-out rows like the FAQ */
.pd-acc{display:grid;gap:0.375rem;margin-top:1rem}
.pd-acc details{background:var(--mist)}
.pd-acc summary{display:flex;align-items:center;gap:0.875rem;padding:0.875rem 1rem 0.875rem 1.125rem;list-style:none;cursor:pointer;font:600 0.9375rem/1.35 var(--f-body);color:var(--ink)}
.pd-acc summary::-webkit-details-marker{display:none}
.pd-acc summary b{flex:none;width:1.75rem;font:700 0.75rem/1 var(--f-display);letter-spacing:.08em;color:var(--red-ink)}
.pd-acc summary::after{content:"";flex:none;margin-left:auto;width:1.75rem;height:1.625rem;clip-path:polygon(0.35rem 0,100% 0,calc(100% - 0.35rem) 100%,0 100%);
  background:linear-gradient(#fff,#fff) center/0.625rem 0.125rem no-repeat,linear-gradient(#fff,#fff) center/0.125rem 0.625rem no-repeat,var(--red)}
.pd-acc details[open] summary::after{background:linear-gradient(#fff,#fff) center/0.625rem 0.125rem no-repeat,var(--ink)}
.pd-acc summary:hover{color:var(--red-ink)}
.pd-acc summary:focus-visible{outline-offset:-0.125rem}
.pd-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 1.5rem;margin:0;padding:0 1.125rem 0.875rem 3.75rem}
.pd-facts dt,.pd-facts dd{margin:0;padding:0.5rem 0;border-top:0.0625rem solid var(--line)}
.pd-facts dt{font:700 0.6875rem/1.9 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pd-facts dd{font-size:0.875rem;line-height:1.55;color:var(--ink)}
.pd-facts.is-flat{padding:0}
.pd-cookie{margin-top:1rem;padding:1rem 1.125rem 0.5rem;background:var(--mist)}
.pd-cookie h4{margin:0 0 0.625rem}
.pd-cookie code{padding:0.25rem 0.5rem;background:var(--paper);font:600 0.8125rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink)}
.pd-cats{display:grid;gap:0.375rem;margin-top:1rem}
.pd-cats li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0.375rem 1rem;padding:0.875rem 1.125rem;background:var(--mist)}
.pd-cats b{font:700 0.9375rem/1.3 var(--f-display);color:var(--ink)}
.pd-cats p{grid-column:1 / -1;font-size:0.875rem;line-height:1.55;color:var(--muted)}
.pd-chip{align-self:start;padding:0.3125rem 0.5rem;background:var(--ink);color:var(--on-dark);font:700 0.625rem/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.pd-chip.is-opt{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 0.0625rem var(--line)}
.pd-sec .btn-slant.is-inline{margin-top:1.125rem}
.pd-contact{margin-top:1rem;padding:1.25rem 1.375rem;background:var(--ink);color:var(--on-dark-muted);font-size:0.9062rem;line-height:1.75}
.pd-contact b{display:block;margin-bottom:0.25rem;font:700 1.0625rem/1.3 var(--f-display);color:var(--on-dark)}
.pd-body .pd-contact a{color:var(--on-dark);font-weight:500}
@media (max-width:600px){
  .pd{width:100%;height:100%}   /* phones: full screen, easier to read */
  .pd-head{padding:1rem 0.75rem 0.75rem var(--gl)}
  .pd-body{padding:0.5rem var(--gr) 2.5rem var(--gl)}
  .pd-sec h3{font-size:1.0625rem}
  .pd-facts{padding:0 1rem 0.75rem 1.125rem;gap:0 1rem}
}

/* ---------- cookie banner and preferences: the look, ready to hand over to a consent tool ---------- */
.ck{position:fixed;left:max(1.25rem, env(safe-area-inset-left,0rem));bottom:max(1.25rem, env(safe-area-inset-bottom,0rem));z-index:95;
  width:min(27rem, calc(100% - 2.5rem));padding:1.5rem 1.5rem 1rem;background:var(--paper);color:var(--text);box-shadow:0 1.25rem 3rem rgba(20,20,24,.3);
  opacity:0;visibility:hidden;transform:translateY(1rem);transition:opacity .3s,transform .3s,visibility 0s .3s}
.ck.is-visible{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .3s}
.ck:focus{outline:none}
/* until a choice is made the banner sits in the middle over a dark veil and the page behind can't be used.
   Refusing (Rifiuta or the X) is as easy as accepting, so this asks for a choice without forcing consent */
.ck-veil{position:fixed;inset:0;z-index:94;background:rgba(20,20,24,.6);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
html.has-cookie-banner{overflow:hidden}
html.has-cookie-banner .float-cta{opacity:0;visibility:hidden}
html.has-cookie-banner .ck-veil{opacity:1;visibility:visible;transition:opacity .3s}
html.has-cookie-banner .ck{top:0;right:0;bottom:0;left:0;margin:auto;height:fit-content;max-height:calc(100% - 1.5rem);overflow:auto}
.ck .quote-head{margin-right:2.25rem}
.ck .qd-x{top:0.875rem;right:0.75rem}
.ck p{margin-top:0.875rem;font-size:0.875rem;line-height:1.6;color:var(--muted)}
.ck-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0.5rem;margin-top:1.125rem}
.ck-actions .btn-slant{margin-top:0;height:2.875rem;font-size:0.8125rem;padding:0 0.875rem}
.ck-more{display:block;margin:0.625rem auto 0;padding:0.375rem;border:0;background:none;font:600 0.8125rem/1.2 var(--f-body);color:var(--ink);text-decoration:underline;text-underline-offset:0.1875rem;cursor:pointer}
.ck-more:hover{color:var(--red-ink)}
.qd.cp{width:min(36rem, calc(100% - 2rem))}
.cp-list{display:grid;gap:0.375rem;margin-top:0.75rem}
.cp-list li{display:flex;align-items:center;gap:1rem;padding:0.875rem 1rem 0.875rem 1.125rem;background:var(--mist)}
.cp-list li > div{flex:1;min-width:0}
.cp-list li > div > b{font:700 0.9375rem/1.3 var(--f-display);color:var(--ink)}
.cp-list p{margin-top:0.2rem;font-size:0.8125rem;line-height:1.5;color:var(--muted)}
.cp-switch{position:relative;flex:none;display:block;width:2.875rem;height:1.625rem}
.cp-switch input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.cp-switch span{position:absolute;inset:0;background:#cfd0d5;transition:background .2s}
.cp-switch span::before{content:"";position:absolute;top:0.1875rem;left:0.1875rem;width:1.375rem;height:1.25rem;background:var(--paper);
  clip-path:polygon(0.25rem 0,100% 0,calc(100% - 0.25rem) 100%,0 100%);transition:transform .2s}
.cp-switch:hover span{background:#bfc0c6}
.cp-switch input:checked + span{background:var(--red)}
.cp-switch input:checked + span::before{transform:translateX(1.125rem)}
.cp-switch input:focus-visible + span{outline:0.125rem solid var(--ink);outline-offset:0.125rem}
.cp-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.5rem;margin-top:1.25rem}
.cp-actions .btn-slant{margin-top:0;height:3rem;font-size:0.75rem;padding:0 0.875rem}
@media (max-width:700px){
  .ck{left:0.75rem;right:0.75rem;bottom:max(0.75rem, env(safe-area-inset-bottom,0rem));width:auto;padding:1.25rem 1.125rem 0.875rem}
  html.has-cookie-banner .ck{left:0.75rem;right:0.75rem}
}
@media (max-width:480px){
  .cp-actions{grid-template-columns:minmax(0,1fr)}
  .cp-actions #cp-accept{order:-1}
}

.hero-foot{position:relative;z-index:3;height:var(--foot-h);display:flex;align-items:center}
/* contact bar in the grey foot band: one white bar holding both items. Chiamaci leads with the red slanted
   icon tile; Orari sits after a hairline with an outline icon. The bar's end leans at the photo's angle
   (0.72 across per unit down), so it keeps an even gap from the photo. On tablets and phones: two white cards. */
.hero-contact{display:flex;align-items:center;flex-wrap:wrap;gap:0}
.hc-item{display:flex;align-items:center;gap:0.75rem;height:3rem;padding:0 1.25rem;background:var(--paper)}
.hc-item:first-child{padding-left:0.375rem}
.hc-item + .hc-item{border-left:0.0625rem solid var(--line);padding-right:2.5rem;clip-path:polygon(0 0,100% 0,calc(100% - 2.16rem) 100%,0 100%)}
.hc-ico{flex:none;width:2.25rem;height:2.25rem;display:grid;place-items:center;background:var(--red);color:var(--on-dark);
  clip-path:polygon(0.45rem 0,100% 0,calc(100% - 0.45rem) 100%,0 100%);transition:background .2s}
.hc-ico svg{width:1rem;height:1rem}
.hc-item + .hc-item .hc-ico{width:1.25rem;background:none;color:var(--red);clip-path:none}
.hc-item + .hc-item .hc-ico svg{width:1.25rem;height:1.25rem}
.hc-text{display:flex;flex-direction:column;gap:0.25rem;line-height:1}
.hc-label{font:700 0.625rem/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hc-value{font:700 0.875rem/1.1 var(--f-display);color:var(--ink);letter-spacing:.01em;font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .2s}
a.hc-item:hover .hc-ico,a.hc-item:focus-visible .hc-ico{background:var(--ink)}
a.hc-item:hover .hc-value,a.hc-item:focus-visible .hc-value{color:var(--red-ink)}
a.hc-item:focus-visible{outline:none}
a.hc-item:focus-visible .hc-value{text-decoration:underline;text-underline-offset:0.2rem}
@media (max-width:1099px){
  .hero-contact{gap:0.375rem}
  .hc-item + .hc-item{border-left:0;clip-path:none;padding:0 1.25rem 0 0.375rem}
  .hc-item + .hc-item .hc-ico{width:2.25rem;background:var(--red);color:var(--on-dark);clip-path:polygon(0.45rem 0,100% 0,calc(100% - 0.45rem) 100%,0 100%)}
  .hc-item + .hc-item .hc-ico svg{width:1rem;height:1rem}
}
.nowrap{white-space:nowrap}

/* ---------- servizi: three slanted panels ---------- */
.services{position:relative;overflow:hidden;margin-top:-1px;background:var(--paper);padding-block:7.375rem 8rem}   /* 1px under the hero, so no hairline shows between the two grey bands on scaled screens */
/* grey continues from under the red strip (52% across) down-left, parallel to the hero diagonal */
.services::before{content:"";position:absolute;inset:0;background:var(--mist);pointer-events:none;
  clip-path:polygon(0 0,52% 0,0 calc(clamp(45rem,calc(47 * var(--vw)),53.75rem) * 1.4444))}
.services > .wrap{position:relative}
.svc-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:center}
.slats{--sk:4rem;display:flex;height:28.75rem}
.slat{position:relative;flex:1 1 0;min-width:0;display:block;overflow:hidden;color:var(--on-dark);
  clip-path:polygon(var(--sk) 0,100% 0,calc(100% - var(--sk)) 100%,0 100%);transition:flex-grow .45s ease}
.slat:first-child{clip-path:polygon(0 0,100% 0,calc(100% - var(--sk)) 100%,0 100%)}
.slat + .slat{margin-left:calc(var(--sk) * -1 + 0.625rem)}
.slat:hover,.slat:focus-visible{flex-grow:1.55}
.slat:focus-visible{outline:none}
.slat-photo{position:absolute;inset:0;transition:transform .7s ease}
.slat:hover .slat-photo{transform:scale(1.05)}
.slat-photo.is-loaded{background-position:var(--focus,50%) center}   /* --focus: where the action is in each photo */
.slat .ph::after{left:calc(var(--sk) + 0.75rem);top:3.375rem}
.gframe .ph::after{top:3.25rem}
.slat:first-child .ph::after{left:1.125rem}
.slat .w-tag{z-index:1}
.slat-body{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:0.375rem;
  padding:1.375rem calc(var(--sk) + 1.25rem) 1.625rem calc(var(--sk) * .45 + 1.375rem);background:rgba(43,44,49,.94);transition:background .35s ease}
.slat:first-child .slat-body{padding-left:1.5rem}
.slat-body b{font:800 1.5rem/1.1 var(--f-display);text-transform:uppercase;letter-spacing:.02em}
.slat-body small{font-size:0.8438rem;line-height:1.45;color:#e3e4e7}
.slat-body em{font:700 0.6875rem/1 var(--f-display);font-style:normal;letter-spacing:.12em;text-transform:uppercase;margin-top:0.5rem;
  align-self:flex-start;padding-bottom:0.3125rem;border-bottom:0.125rem solid var(--red);transition:border-color .35s}
.slat:hover .slat-body,.slat:focus-visible .slat-body{background:var(--red)}
.slat:hover .slat-body small,.slat:focus-visible .slat-body small{color:var(--on-dark)}
.slat:hover .slat-body em,.slat:focus-visible .slat-body em{border-color:var(--on-dark)}
.slat:focus-visible .slat-body b{text-decoration:underline;text-underline-offset:0.3125rem}
.svc-intro{padding-left:3.25rem;display:flex;flex-direction:column;align-items:flex-start;gap:1.125rem;min-width:0}
.svc-intro > p:not(.eyebrow){font-size:0.9375rem;line-height:1.65;color:var(--muted);max-width:34ch}
.svc-intro .svc-hint{display:flex;align-items:center;gap:0.625rem;font-size:0.875rem;color:var(--text)}
.svc-hint .sq{flex:none;background:var(--red)}
.btn-outline{flex:none;border:0.0625rem solid var(--red);color:var(--red-ink);font:600 0.75rem/1 var(--f-body);letter-spacing:.02em;padding:0.4375rem 0.75rem;transition:background .2s,color .2s}
.btn-outline:hover,.btn-outline:focus-visible{background:var(--red);color:var(--on-dark)}
.sq{display:block;width:0.4375rem;height:0.4375rem;background:currentColor}

/* ---------- lavori: before/after, photo strip, areas (ink band) ---------- */
.works{position:relative;overflow:hidden;background:var(--ink);color:var(--on-dark);padding-block:6.25rem 7.75rem}
.works-head,.band-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;margin-bottom:2.25rem}
.works-head .sec-title,.band-head .sec-title{grid-column:2;text-align:center}
.works-head .link-more,.band-head .link-more{grid-column:3;justify-self:end}
.link-more.on-dark{color:var(--on-dark)}
.link-more.on-dark:hover{color:var(--red-soft)}
.w-arrows{margin-top:auto;display:flex;gap:0.125rem;margin-left:-0.25rem}
.diamond{position:relative;width:2.875rem;height:2.875rem;border:0;background:none;padding:0;display:grid;place-items:center;color:var(--on-dark)}
.diamond::before{content:"";position:absolute;inset:0.625rem;border:0.0938rem solid var(--red);transform:rotate(45deg);transition:background .2s}
.diamond:hover::before,.diamond:focus-visible::before{background:var(--red)}
.diamond:focus-visible{outline-offset:0}
.diamond svg{position:relative;width:0.75rem;height:0.75rem}
.w-tag{position:absolute;top:1.125rem;right:1.125rem;background:var(--red);color:var(--on-dark);font:700 0.6562rem/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;padding:0.375rem 0.5625rem}

.ba-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:center}
.ba{--pos:50%;position:relative;aspect-ratio:16/10;max-width:100%;overflow:hidden;background:var(--ink-2);cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ba-img{position:absolute;inset:0}
/* the split runs on a slant, like every cut on the site: 7.5% of the width each side of --pos */
.ba-before{clip-path:polygon(0 0,calc(var(--pos) + 7.5%) 0,calc(var(--pos) - 7.5%) 100%,0 100%)}
.ba-chip{position:absolute;bottom:1.125rem;background:var(--ink);color:var(--on-dark);font:700 0.6875rem/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;padding:0.5rem 0.75rem}
.ba-before .ba-chip{left:1.125rem}
.ba-after .ba-chip{right:1.125rem;background:var(--red)}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:0.125rem;margin-left:-0.0625rem;background:var(--on-dark);transform:skewX(-13.5deg);pointer-events:none}
.ba-knob{position:absolute;top:50%;left:var(--pos);width:2.875rem;height:2.875rem;transform:translate(-50%,-50%) rotate(45deg);background:var(--red);pointer-events:none;display:grid;place-items:center}
.ba-knob span{display:flex;gap:0.125rem;transform:rotate(-45deg);color:var(--on-dark)}
.ba-knob svg{width:0.6875rem;height:0.6875rem}
.ba-range:focus-visible ~ .ba-knob{outline:0.125rem solid var(--on-dark);outline-offset:0.3125rem}
.ba-side{padding-left:3.25rem;display:flex;flex-direction:column;align-items:flex-start;gap:1rem;min-width:0}
.ba-side h3{font:700 1.5rem/1.25 var(--f-display);color:var(--on-dark);max-width:16ch}
.ba-side > p:not(.eyebrow){font-size:0.9375rem;line-height:1.65;color:var(--on-dark-muted);max-width:32ch}

.gal-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin:5.25rem 0 1.625rem}
.gal-bar .w-arrows{margin-top:0}
.chips{display:flex;flex-wrap:wrap;gap:0.375rem}
.chip{border:0;background:var(--ink-2);color:var(--on-dark);font:600 0.75rem/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;padding:0.6875rem 1.25rem;
  transition:background .2s}
.chip:hover{background:#4a4b52}
.chip[aria-pressed="true"]{background:var(--red)}
.chip:focus-visible{outline:none;text-decoration:underline;text-underline-offset:0.25rem}
.gal{--per:4;--gap:1.125rem;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));gap:var(--gap);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
.gal::-webkit-scrollbar{display:none}
@media (max-width:1099px){ .gal{--per:3} }
@media (max-width:700px){ .gal{--per:2;--gap:0.75rem} }
@media (max-width:440px){ .gal{--per:1.25} }
.gal-track{position:relative;height:0.1875rem;margin-top:1.75rem;background:var(--ink-2)}
.gal-thumb{position:absolute;top:0;bottom:0;left:0;width:100%;background:var(--red);transition:left .15s linear,width .25s}
.diamond:disabled{opacity:.3;cursor:default}
.diamond:disabled::before{background:none}
.gal:focus-visible{outline-offset:-0.125rem}
.gcard{scroll-snap-align:start;margin:0;display:flex;flex-direction:column;gap:0.875rem;min-width:0}
.gcard[hidden]{display:none}
.gframe{position:relative;aspect-ratio:4/5;max-width:100%;overflow:hidden;clip-path:polygon(0 0,100% 0,100% calc(100% - 2.875rem),calc(100% - 2.875rem) 100%,0 100%)}
.gframe .ph{position:absolute;inset:0;transition:transform .7s ease}
.gcard:hover .gframe .ph{transform:scale(1.05)}
.gframe .w-tag{z-index:1}
.gcard h3{font:600 1rem/1.3 var(--f-body);color:var(--on-dark)}
.gcard figcaption p{font-size:0.8438rem;line-height:1.45;color:var(--on-dark-muted)}

.works-info{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);margin-top:2.75rem}
.wi-areas{display:grid;grid-template-columns:minmax(0,1fr) 19.5rem;gap:2.75rem;align-items:start;padding:2.75rem 3rem 0 0;min-width:0}
.wi-contact{padding:2.75rem 0 0 3.25rem;min-width:0}
.wi-label{font-size:0.7812rem;color:var(--on-dark-muted);letter-spacing:.02em}
.wi-h{font:700 1.125rem/1.3 var(--f-display);color:var(--on-dark);margin:0.125rem 0 1.125rem}
.wi-title{font:300 1.75rem/1.1 var(--f-display);text-transform:uppercase;letter-spacing:.02em;color:var(--on-dark);margin:0.25rem 0 1.5rem}
.wi-title b{font-weight:800}
.cover{border-top:0.0625rem solid var(--ink-line)}
.cover li{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0.8125rem 0;border-bottom:0.0625rem solid var(--ink-line)}
.cv-s{display:flex;align-items:center;gap:0.75rem;font:600 0.8125rem/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark)}
.cv-s::before{content:"";flex:none;width:0.4375rem;height:0.4375rem;background:var(--red);transform:rotate(45deg)}
.cv-a{font-size:0.9375rem;color:var(--on-dark-muted)}
.cover .is-it .cv-a{font:700 0.75rem/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark);background:var(--red);padding:0.4375rem 0.875rem;
  clip-path:polygon(0.4375rem 0,100% 0,calc(100% - 0.4375rem) 100%,0 100%)}
.tmap{display:block;width:100%;height:auto;overflow:visible}
.tm-land{fill:var(--ink-2)}
.tm-prov{fill:none;stroke:var(--ink);stroke-width:3;stroke-linejoin:round}
.tm-routes path{fill:none;stroke:var(--red-soft);stroke-width:2.5;stroke-dasharray:7 9;opacity:.5}
.pin rect{fill:var(--on-dark)}
.pin text{font:600 40px var(--f-body);fill:var(--on-dark)}
.pin.is-base rect{fill:var(--red)}
.pin.is-base text{fill:var(--red-soft)}
.pin .pulse{fill:none!important;stroke:var(--red);stroke-width:3;transform-box:fill-box;transform-origin:center;animation:pin-pulse 2.4s ease-out infinite}
@keyframes pin-pulse{from{transform:scale(1);opacity:.9}to{transform:scale(2.6);opacity:0}}
.ct-list{border-top:0.0625rem solid var(--ink-line)}
.ct-list li{display:grid;grid-template-columns:2.5rem minmax(0,1fr);column-gap:1rem;row-gap:0.3125rem;align-items:center;padding:0.8125rem 0;border-bottom:0.0625rem solid var(--ink-line)}
.ct-ico{grid-row:1 / 3;width:2.5rem;height:2.375rem;display:grid;place-items:center;background:var(--red);color:var(--on-dark);clip-path:polygon(0.4375rem 0,100% 0,calc(100% - 0.4375rem) 100%,0 100%)}
.ct-ico svg{width:1.125rem;height:1.125rem}
.ct-k{font:600 0.6875rem/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted)}
.ct-v{font-size:0.9375rem;line-height:1.3;color:var(--on-dark);overflow-wrap:anywhere}
a.ct-v:hover{color:var(--red-soft)}
.ct-v.is-big{font:700 1.5rem/1.05 var(--f-display);color:var(--red-soft);letter-spacing:.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.ct-v.is-big:hover{color:var(--on-dark)}
.ct-status{display:inline-flex;align-items:center;gap:0.375rem;margin-left:0.375rem;vertical-align:0.0625rem;font:700 0.625rem/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-muted);white-space:nowrap}
.ct-status::before{content:"";width:0.4375rem;height:0.4375rem;border-radius:50%;background:#2fbf71;box-shadow:0 0 0 0.1875rem rgba(47,191,113,.2)}
.ct-status.is-closed::before{background:var(--red-soft);box-shadow:0 0 0 0.1875rem rgba(255,122,110,.18)}
.ct-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.5rem;margin-top:1.375rem}
.ct-actions .btn-slant{margin-top:0;height:3rem;gap:0.5rem;padding:0 0.75rem}
.ct-actions .btn-slant svg{width:1.0625rem;height:1.0625rem;flex:none}
.ct-wa{background:var(--ink-2)}
.ct-wa:hover,.ct-wa:focus-visible{background:var(--paper);color:var(--ink)}
.wi-note{margin-top:1.125rem;font-size:0.875rem;line-height:1.6;color:var(--on-dark-muted)}
.phone-big{font:700 clamp(1.5rem,calc(2.2 * var(--vw)),1.875rem)/1.1 var(--f-display);color:var(--red-ink);letter-spacing:.01em;margin:0 0 1rem;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- why us (ink band, photo on the diagonal) ---------- */
/* the photo runs to the left edge, cut by the same diagonal as the hero, in black and red; the copy sits on the right */
.why{position:relative;overflow:hidden;background:var(--ink);color:var(--on-dark);padding-block:6.25rem 6.75rem;--pw:37rem;--pcut:10rem}
.why-photo{position:absolute;top:0;bottom:0;left:0;width:calc(var(--bleed) + var(--pw));overflow:hidden;clip-path:polygon(0 0,100% 0,calc(100% - var(--pcut)) 100%,0 100%)}
.why-img{position:absolute;inset:0;background-position:30% center}   /* black and red duotone, any photo */
.why-photo::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(270deg,rgba(43,44,49,.5),rgba(43,44,49,0) 45%)}
.why-copy{position:relative;max-width:38rem;margin-left:auto;display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem}
.sec-title.on-dark{color:var(--on-dark)}
.eyebrow.on-dark{color:var(--red-soft)}
.why-lead{font-size:0.9375rem;line-height:1.65;color:var(--on-dark-muted);max-width:52ch}
.btn-slant.is-inline{display:inline-flex;width:auto;padding:0 2rem;margin-top:0.375rem}
.btn-slant.is-red{background:var(--red)}
.btn-slant.is-red:hover,.btn-slant.is-red:focus-visible{background:var(--paper);color:var(--ink)}
.why-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem 2.25rem;width:100%;margin:1rem 0 0.75rem}
.why-list li{display:grid;grid-template-columns:2.75rem minmax(0,1fr);gap:1rem;align-items:start}
.why-ico{width:2.75rem;height:2.625rem;display:grid;place-items:center;background:var(--red);color:var(--on-dark);clip-path:polygon(0.5rem 0,100% 0,calc(100% - 0.5rem) 100%,0 100%)}
.why-ico svg{width:1.25rem;height:1.25rem}
.why-list h3{font:700 1rem/1.3 var(--f-display);color:var(--on-dark);margin-bottom:0.25rem}
.why-list p{font-size:0.8438rem;line-height:1.55;color:var(--on-dark-muted)}

/* ---------- cosa facciamo ---------- */
.detail{background:var(--paper);padding-top:6.5rem}
.detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.d-card{display:flex;flex-direction:column;min-width:0}
.d-photo{position:relative;aspect-ratio:4/3;max-width:100%}
.d-photo .w-tag{z-index:1}
.d-photo.is-loaded{background-position:var(--focus,50%) center}   /* --focus: where the action is in each photo */
.d-body{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:0.875rem;padding:2.125rem 2.25rem 2.5rem;background:var(--mist)}
.d-body h3{font:700 1.3125rem/1.25 var(--f-display);color:var(--ink)}
.d-body > p{font-size:0.9062rem;line-height:1.6;color:var(--muted);max-width:34ch}
.d-list{display:grid;gap:0.4375rem;margin-bottom:0.5rem}
.d-list li{position:relative;padding-left:1.125rem;font-size:0.9062rem;line-height:1.45;color:var(--text)}
.d-list li::before{content:"";position:absolute;left:0;top:.5em;width:0.375rem;height:0.375rem;background:var(--red)}
.d-body .btn-outline{margin-top:auto}
.d-card.is-dark .d-body{background:var(--ink)}
.d-card.is-dark h3{color:var(--on-dark)}
.d-card.is-dark .d-body > p{color:var(--on-dark-muted)}
.d-card.is-dark .d-list li{color:#e3e4e7}
.d-card.is-dark .btn-outline{border-color:var(--red-soft);color:var(--red-soft)}
.d-card.is-dark .btn-outline:hover,.d-card.is-dark .btn-outline:focus-visible{background:var(--red);border-color:var(--red);color:var(--on-dark)}

/* ---------- come funziona ---------- */
.steps{background:var(--paper);padding-block:6.25rem 6.75rem}
.steps .band-head{margin-bottom:3.25rem}
.steps-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
/* each step: a red slanted icon tile and a small "PASSO 0n" label; the last tile is dark */
.steps-list li{position:relative;display:flex;flex-direction:column;align-items:center;gap:0.625rem;min-width:0;padding:0 1rem;text-align:center}   /* centred under the title */
.step-top{display:flex;flex-direction:column;align-items:center;gap:0.875rem;margin-bottom:0.5rem}
.step-ico{flex:none;width:3.375rem;height:3.125rem;display:grid;place-items:center;background:var(--red);color:var(--on-dark);
  clip-path:polygon(0.55rem 0,100% 0,calc(100% - 0.55rem) 100%,0 100%);transition:background .25s}
.step-ico svg{width:1.375rem;height:1.375rem}
@media (hover:hover){ .steps-list li:hover .step-ico{background:var(--ink)} }   /* mouse only, so a tap on a phone doesn't leave a step dark */
.step-n{font:700 0.75rem/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.steps-list h3{font:700 1.0625rem/1.3 var(--f-display);color:var(--ink)}
.steps-list p{font-size:0.875rem;line-height:1.6;color:var(--muted);max-width:30ch;margin-inline:auto}

/* ---------- recensioni ---------- */
.reviews{position:relative;overflow:hidden;background:var(--mist);padding-block:6.5rem 7.25rem}
.rev-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.rev-score{position:relative;background:var(--red);color:var(--on-dark);padding:2.875rem 2.5rem 2.5rem;display:flex;flex-direction:column;align-items:flex-start;gap:0.5rem;min-width:0}
.rev-score::before{content:"";position:absolute;top:0;bottom:0;right:100%;width:calc(50 * var(--vw));background:var(--red)}
.rev-score .rev-num{font:800 4.75rem/1 var(--f-display);letter-spacing:-.01em;font-variant-numeric:tabular-nums;max-width:none}
.rev-score .rev-num small{font:300 1.625rem/1 var(--f-display);margin-left:0.25rem}
.stars{display:flex;gap:0.1875rem;color:inherit}
.stars svg{width:1rem;height:1rem}
.rev-score p{font-size:0.875rem;line-height:1.5;max-width:26ch}
.rev-score .w-arrows{margin-top:auto;padding-top:1.75rem}
.diamond.is-light::before{border-color:var(--on-dark)}
.diamond.is-light:hover::before,.diamond.is-light:focus-visible::before{background:var(--on-dark)}
.diamond.is-light:hover,.diamond.is-light:focus-visible{color:var(--red-ink)}
.diamond.is-light:focus-visible{outline-color:var(--on-dark)}
.rev-track{grid-column:2 / 4;display:grid;grid-template-columns:subgrid}
.rev-track > :nth-child(n+3){display:none}
.rev-track > :nth-child(2){border-left:0.0625rem solid var(--line)}
.rev-card{margin:0;background:var(--paper);padding:2.5rem 2.5rem 2.125rem;display:flex;flex-direction:column;gap:1rem;min-width:0}
.rev-card .stars{color:var(--red)}
.rev-mark{font:800 4rem/.5 var(--f-display);color:var(--red);height:1.625rem;margin-top:0.375rem}
.rev-card blockquote{margin:0;font:500 1.0625rem/1.55 var(--f-body);color:var(--ink)}
.rev-who{margin-top:auto;display:flex;flex-direction:column;gap:0.125rem;padding-top:1.125rem;border-top:0.0625rem solid var(--line)}
.rev-who b{font:600 0.9062rem/1.3 var(--f-body);color:var(--ink)}
.rev-who span{font-size:0.7812rem;color:var(--muted)}

/* ---------- domande frequenti ---------- */
.faq{background:var(--paper);padding-block:6.5rem 7rem}
.faq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.faq-intro{padding-right:3rem;display:flex;flex-direction:column;align-items:flex-start;gap:1.125rem;min-width:0}
.faq-intro > p:not(.eyebrow):not(.phone-big){font-size:0.9375rem;line-height:1.65;color:var(--muted);max-width:30ch}
.faq-help{display:flex;flex-direction:column;gap:1rem;width:100%;max-width:20rem;margin-top:0.5rem}
.faq-phone{display:flex;align-items:center;gap:0.75rem;font:700 1.75rem/1 var(--f-display);color:var(--red-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.faq-phone:hover{color:var(--ink)}
.faq-pi{flex:none;width:2.5rem;height:2.375rem;display:grid;place-items:center;background:var(--red);color:var(--on-dark);clip-path:polygon(0.4375rem 0,100% 0,calc(100% - 0.4375rem) 100%,0 100%)}
.faq-pi svg{width:1.125rem;height:1.125rem}
.faq-wa{margin-top:0;height:3rem;gap:0.5rem;padding-right:0.75rem;background:var(--ink)}
.faq-wa svg{flex:none;width:1.0625rem;height:1.0625rem}
.faq-wa:hover,.faq-wa:focus-visible{background:var(--red)}
/* questions: numbered slabs with a cut corner; the open one turns dark */
.faq-list{display:grid;gap:0.5rem;counter-reset:faq;min-width:0}
.faq-list details{background:var(--mist);transition:background .25s;clip-path:polygon(0 0,100% 0,100% calc(100% - 1rem),calc(100% - 1rem) 100%,0 100%)}
.faq-list summary{counter-increment:faq;list-style:none;cursor:pointer;display:flex;align-items:center;gap:1.25rem;padding:1.125rem 1.25rem 1.125rem 1.5rem;font:600 1.0312rem/1.4 var(--f-body);color:var(--ink);transition:color .2s}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::before{content:counter(faq,decimal-leading-zero);flex:none;width:1.75rem;font:700 0.8125rem/1 var(--f-display);letter-spacing:.12em;color:var(--red-ink)}
.faq-list summary::after{content:"";flex:none;margin-left:auto;width:2.25rem;height:2.125rem;background:linear-gradient(#fff,#fff) center/0.75rem 0.125rem no-repeat,linear-gradient(#fff,#fff) center/0.125rem 0.75rem no-repeat,var(--red);clip-path:polygon(0.4375rem 0,100% 0,calc(100% - 0.4375rem) 100%,0 100%)}
.faq-list summary:hover{color:var(--red-ink)}
.faq-list summary:focus-visible{outline:none;text-decoration:underline;text-underline-offset:0.25rem}
.faq-list details[open]{background:var(--ink)}
.faq-list details[open] summary,.faq-list details[open] summary:hover{color:var(--on-dark)}
.faq-list details[open] summary::before{color:var(--red-soft)}
.faq-list details[open] summary::after{background:linear-gradient(#fff,#fff) center/0.75rem 0.125rem no-repeat,var(--red)}
.faq-list details p{padding:0 4.5rem 1.625rem 4.5rem;font-size:0.9375rem;line-height:1.65;color:var(--on-dark-muted);max-width:64ch;box-sizing:content-box}

/* ---------- call to action ---------- */
.cta{position:relative;overflow:hidden;background:var(--red);color:var(--on-dark);padding-block:3.75rem}
.cta-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1.75rem 2.5rem;flex-wrap:wrap}
.cta h2{font:300 clamp(1.5rem,calc(2.3 * var(--vw)),2.125rem)/1.15 var(--f-display);text-transform:uppercase;letter-spacing:.01em}
.cta h2 b{display:block;font-weight:800}
.cta-actions{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;gap:0.5rem}
/* the dark slanted panel sits behind the contact block itself, so the diagonal always clears it */
.cta-actions::before{content:"";position:absolute;z-index:-1;top:-4rem;bottom:-4rem;left:-8.1rem;right:-100vw;background:var(--ink);clip-path:polygon(7.43rem 0,100% 0,100% 100%,0 100%)}   /* 0.25rem past the band, top and bottom, so no red hairline shows at its edges */
.cta-actions small{font-size:0.8438rem;color:var(--on-dark-muted)}
.cta-phone{font:700 clamp(1.75rem,calc(2.6 * var(--vw)),2.375rem)/1.05 var(--f-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.cta .btn-slant{margin-top:0.625rem}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:var(--on-dark-muted)}
.foot-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:2rem;padding-block:4rem 2.5rem}
/* areas and services in plain words: visible, for visitors and for search */
.foot-areas{padding-bottom:2.75rem}
.foot-areas h2{margin-bottom:0.625rem;font:700 0.75rem/1.3 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark)}
.foot-areas p{max-width:none;font-size:0.8125rem;line-height:1.85;color:var(--on-dark-muted)}
.foot-name{font:600 0.875rem/1.4 var(--f-body);color:var(--on-dark);margin-bottom:1.375rem}
.socials{display:flex;gap:0.625rem}
.socials a{width:2.5rem;height:2.5rem;border-radius:50%;background:var(--ink-2);display:grid;place-items:center;color:var(--on-dark);transition:background .2s}
.socials a:hover,.socials a:focus-visible{background:var(--red)}
.socials svg{width:1.0625rem;height:1.0625rem}
.foot-nav{display:flex;flex-wrap:wrap;gap:0.625rem 2.125rem;margin-bottom:1.375rem}
.foot-nav a{font:600 0.875rem/1.2 var(--f-body);color:var(--on-dark)}
.foot-nav a:hover{color:#ffb3ae}
.site-footer address{font-style:normal;font-size:0.8125rem;line-height:1.85}
.foot-bottom{border-top:0.0625rem solid var(--ink-line);padding-bottom:4.5rem}   /* room under the last row for the corner buttons */
.foot-bottom .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.75rem 1rem;padding-block:1.25rem;font-size:0.7812rem}
.tags{display:flex;flex-wrap:wrap;gap:0.375rem}
.tags a,.tags button{background:none;cursor:pointer;border:0.0625rem solid #5a5b61;padding:0.3125rem 0.5625rem;font:600 0.6562rem/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:#d4d5d9}
.tags a:hover,.tags button:hover{border-color:var(--red)}

/* ---------- every desktop screen: one layout, scaled as a whole ----------
   The page is drawn on a 1440 px stage (90rem at 16px). From 1100px up the root size follows the screen, so every
   element keeps the same size and place relative to the others on any monitor or TV. Growth stops at 18px (a 1620px
   stage) so large and ultrawide screens are not zoomed in; there, and on screens wider than about 2:1, the stage stays
   centred and only the backgrounds and the photo grow into the extra width (--bleed). */
@media (min-width:1100px){
  html{font-size:min(calc(100vw / 90), calc(100vh / 46), 18px)}   /* grows with the screen up to 1.125×, then stays put */
  :root{--vw:.9rem;--bleed:max(0rem, calc((100vw - 90rem) / 2))}
  .hero{min-height:45rem}
  /* the van grows on big screens up to --vanmax: as big as it can get while its roof stays clear of the title */
  :root{--vanmax:42.8rem}
  .hero-main{padding-top:6rem}
  .quote{margin-top:2.75rem}
  .hero-visual{left:var(--bleed);right:auto;width:90rem}
  .hero-visual::before{left:calc(-1 * var(--bleed))}
  .hero-sheen{clip-path:polygon(40.5rem 0,63rem 0,51.75rem 15.624rem)}
  .hero-photo{left:30.6rem;right:auto;width:calc(59.4rem + var(--bleed));clip-path:polygon(32.4rem 0,100% 0,100% 100%,0 100%)}
  .hero-shadow-clip{right:calc(-1 * var(--bleed));clip-path:polygon(63rem 0,100% 0,100% 100%,30.6rem 100%)}
  /* the van keeps its front at 35.1rem and its wheels on the road at 36.45rem; on big screens it grows with the
     screen (unlike the text, which stops at 18px), up to --vanmax */
  .hero-van,.hero-shadow,.hero-trail{--w1:clamp(36rem, min(calc(100vw * .4), calc(100vh * .7826)), var(--vanmax));left:calc(35.1rem - var(--w1) * .1387);top:calc(36.45rem - var(--w1) * .6334)}
  .hero-slide.is-loaded{--w1:clamp(36rem, min(calc(100vw * .4), calc(100vh * .7826)), var(--vanmax));--hh:45rem;
    --vpx:calc(4.5rem + var(--w1) * 1.9394);
    --vpy:calc(var(--hh) * .81 - var(--w1) * .3283);
    --bgh:max(calc(var(--vpy) / .4554), var(--hh), 40.5rem, calc((59.4rem + var(--bleed)) / 1.4995));   /* always wide enough for the photo panel */
    --vpr:min(var(--vpx), calc(60.3rem + var(--bgh) * .11));
    background-position:clamp(calc(59.4rem + var(--bleed) - var(--bgh) * 1.4995), calc(var(--vpr) - var(--bgh) * 1.4644), 0rem)
                        clamp(calc(var(--hh) - var(--bgh)), calc(var(--vpy) - var(--bgh) * .4554), 0rem)}
  .services::before{clip-path:polygon(0 0,calc(var(--bleed) + 46.8rem) 0,0 calc((var(--bleed) + 46.8rem) * 1.3889))}
  .rev-score::before{width:calc(var(--bleed) + 45rem)}
}

/* ---------- responsive ---------- */
@media (max-width:1099px){
  .nav-wrap{display:none}
  .header-in .lang-dd{display:none}   /* on phones and tablets it is in the full screen menu */
  .menu-btn{display:flex}
}
@media (min-width:1100px){
  .fs-menu{display:none}   /* PC uses the bar menu */
}
@media (min-width:600px) and (max-width:860px){
  .fs-links a{font-size:2.75rem}
}
@media (min-width:861px) and (max-width:1099px){
  /* tablets: links on the left, contacts on a red slanted panel on the right */
  .fs-menu{grid-template-rows:none;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
  .fs-links{padding:6rem 2rem 3rem var(--gl)}
  .fs-links a{font-size:2.75rem}
  .fs-info{gap:1.5rem;padding:6rem var(--gr) 3rem 4.5rem;clip-path:polygon(3.5rem 0,100% 0,100% 100%,0 100%)}
  .fs-info .fs-phone a:first-child{font-size:1.625rem}
}
@media (max-width:1099px){
  .site-header{position:relative;background:var(--paper)}
  .header-in{height:4.25rem}
  .hero{min-height:0}
  .hero-visual{position:relative;inset:auto;height:clamp(13.75rem,calc(50 * var(--vw)),27.5rem)}
  .hero-visual::before,.hero-sheen{display:none}
  .hero-photo{left:0;width:100%;clip-path:polygon(0 0,100% 0,100% 80%,0 100%)}
  .hero-van,.hero-shadow,.hero-trail{--w1:min(calc(66 * var(--vw)),32.5rem);left:auto;top:auto;right:calc(5% - var(--w1) * .0370);bottom:calc(15% - var(--w1) * .1193)}
  /* same perspective match for the stacked layout (photo full width, wheels at 85% of its height) */
  .hero-slide.is-loaded{--hv:clamp(13.75rem,calc(50 * var(--vw)),27.5rem);--w1:min(calc(66 * var(--vw)),32.5rem);
    --vpx:calc(calc(95 * var(--vw)) + var(--w1) * 1.1151);
    --vpy:calc(var(--hv) * .85 - var(--w1) * .3283);
    --bgh:max(calc(var(--vpy) / .4554), var(--hv), calc(67 * var(--vw)));
    --vpr:min(var(--vpx), calc(calc(100 * var(--vw)) + var(--bgh) * .11));
    background-size:auto var(--bgh);
    background-position:clamp(calc(calc(100 * var(--vw)) - var(--bgh) * 1.4995), calc(var(--vpr) - var(--bgh) * 1.4644), 0rem)
                        clamp(calc(var(--hv) - var(--bgh)), calc(var(--vpy) - var(--bgh) * .4554), 0rem)}
  .hero-shadow-clip{clip-path:polygon(0 0,100% 0,100% 80%,0 100%)}
  .hero-main{padding-top:2.125rem;padding-bottom:1.875rem}
  .hero-copy{max-width:35rem}
  .hero-title{font-size:clamp(1.5rem,calc(5.6 * var(--vw)),2.25rem)}
  .hero-title b,.hero-title span{white-space:normal}
  .hero-title .t-big{width:auto;font-size:1.95em;line-height:.95}
  .quote{width:100%}
  .hero-foot{height:auto;padding-block:1.125rem;background:var(--mist)}
  .services{padding-block:5.25rem 6rem}
}
@media (max-width:860px){
  /* phones: the van sits further left and lower, the wheels just past the photo edge */
  .hero-van,.hero-shadow,.hero-trail{right:calc(30% - var(--w1) * .0370);bottom:calc(2% - var(--w1) * .1193)}
}
@media (max-width:860px){
  .services{padding-block:3.5rem 4rem}
  .svc-grid{grid-template-columns:minmax(0,1fr)}
  .svc-intro{order:-1;padding:0 0 1.875rem}
  .slats{--sk:0rem;flex-direction:column;height:auto;gap:0.5rem}
  .slat + .slat{margin-left:0}
  .slat{flex:none;height:auto;display:flex;flex-direction:column}
  .slat-photo{position:relative;inset:auto;flex:none;height:clamp(12.5rem,calc(56 * var(--vw)),17.5rem)}
  .slat-body{position:relative}
  .slat-body{padding:1.125rem 1.25rem 1.25rem}
  .slat:first-child .slat-body{padding-left:1.25rem}
  .slat .ph::after,.slat:first-child .ph::after{left:1.125rem}
  .works{padding-block:3.75rem 6.25rem}
  .ba-row{grid-template-columns:minmax(0,1fr)}
  .ba-side{padding:1.75rem 0 0}
  .gal-bar{margin:3.25rem 0 1.125rem}
  .works-info{grid-template-columns:minmax(0,1fr);margin-top:1.5rem}
  .wi-areas{grid-template-columns:minmax(0,1fr);gap:2rem;padding:2rem 0 0}
  .tmap{max-width:20rem;margin-inline:auto}
  .wi-contact{padding:2rem 0 0;margin-top:1.5rem}
  .foot-top{grid-template-columns:minmax(0,1fr);padding-block:3rem 2.5rem}
}
@media (max-width:420px){
  .quote-grid{grid-template-columns:minmax(0,1fr)}
  .logo{font-size:1.0625rem}
}
/* new sections, smaller screens */
@media (max-width:1099px){
  .services{background:var(--mist)}
  .services::before{display:none}
  .svc-intro,.ba-side{padding-left:2.25rem}
  .faq-grid{grid-template-columns:minmax(0,1fr)}
  .faq-intro{padding:0 0 2.25rem}
  .why{padding-top:0}
  .why-photo{position:relative;width:auto;height:clamp(15rem,calc(48 * var(--vw)),26rem);margin-bottom:3.5rem;clip-path:polygon(0 0,100% 0,100% calc(100% - 2.5rem),0 100%)}
  .why-copy{max-width:none}
  .detail-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .d-body{padding:1.75rem 1.625rem 2rem}
}
@media (max-width:860px){
  .band-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:0.875rem 1.25rem;margin-bottom:1.5rem}
  .band-head .sec-title{text-align:left}
  .svc-intro{padding:0 0 1.875rem}
  .ba-side{padding:1.75rem 0 0}
  .why{padding-bottom:4rem}
  .why-photo{margin-bottom:2.5rem;clip-path:polygon(0 0,100% 0,100% calc(100% - 1.75rem),0 100%)}
  .why-list{grid-template-columns:minmax(0,1fr);gap:1.375rem}
  .detail{padding-top:3.75rem}
  .detail-grid{grid-template-columns:minmax(0,1fr)}
  .d-photo{aspect-ratio:16/9}
  .steps{padding-block:3.75rem 4rem}
  .steps .band-head{margin-bottom:2rem;justify-content:center}
  .steps .band-head .sec-title{text-align:center}
  .steps-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.25rem 1.25rem}
  .steps-list li{padding:0}
  .reviews{padding-block:3.75rem 4.25rem}
  .rev-grid{grid-template-columns:minmax(0,1fr)}
  .rev-score{padding:1.875rem 1.5rem 1.625rem}
  .rev-score::before{display:none}
  .rev-score .w-arrows{padding-top:0.875rem}
  .rev-track{grid-column:1;grid-template-columns:minmax(0,1fr)}
  .rev-track > :nth-child(n+2){display:none}
  .rev-track > :nth-child(2){border-left:0}
  .rev-card{padding:1.875rem 1.5rem 1.625rem}
  .faq{padding-block:3.75rem 4.25rem}
  .faq-list summary{gap:0.875rem;padding:1rem 1rem 1rem 1.125rem;font-size:0.9688rem}
  .faq-list summary::before{width:1.5rem}
  .faq-list details p{padding:0 1.125rem 1.375rem 3.5rem}
  .cta{padding-block:2.75rem}
  .cta-actions::before{display:none}
  .cta-actions small{color:var(--on-dark)}
  .cta .btn-slant.is-red{background:var(--ink)}
  .cta .btn-slant.is-red:hover,.cta .btn-slant.is-red:focus-visible{background:var(--paper);color:var(--ink)}
}
@media (max-width:520px){
  .steps-list{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:861px) and (max-width:1099px){
  .slats{height:26.25rem}   /* tablets only: on phones the panels stack and the strip grows with them */
}

/* ---------- action buttons (design C): a square block with an arrow on the right ----------
   Red block on dark buttons, darker red on red ones; on hover the whole button turns red and the block
   blends in. The cookie choices (Rifiuta / Accetta / Personalizza) keep plain buttons. */
.btn-slant{--arr:3.25rem;position:relative;padding-left:1.25rem;padding-right:calc(var(--arr) + 1rem)}
.btn-slant::after{content:"";position:absolute;top:0;right:0;bottom:0;width:var(--arr);transition:background-color .2s;
  background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5'/%3E%3C/svg%3E") center/0.9375rem no-repeat}
.btn-slant.is-red::after{background-color:var(--red-ink)}
.btn-slant.is-red:hover,.btn-slant.is-red:focus-visible{background:var(--red-ink);color:var(--on-dark)}
.btn-slant:hover::after,.btn-slant:focus-visible::after{background-color:var(--red)}
.btn-slant.is-red:hover::after,.btn-slant.is-red:focus-visible::after{background-color:var(--red-ink)}
.btn-slant.is-inline{padding-left:1.75rem;padding-right:calc(var(--arr) + 1.5rem)}
.ct-actions .btn-slant{--arr:2.75rem;padding-left:0.75rem;padding-right:calc(var(--arr) + 0.5rem)}   /* two side by side: narrower block */
.qd-actions .btn-slant{padding-left:1rem;padding-right:calc(var(--arr) + 1rem)}
.ck-actions .btn-slant,.cp-actions .btn-slant{padding:0 0.875rem}
.ck-actions .btn-slant::after,.cp-actions .btn-slant::after{content:none}
@media (max-width:860px){
  /* the button is dark on the red band here (white on hover, as before): its block stays red */
  .cta .btn-slant.is-red::after,.cta .btn-slant.is-red:hover::after,.cta .btn-slant.is-red:focus-visible::after{background-color:var(--red)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}