/* ==========================================================================
   ADRIAN PAV -- PAGINE LAVORAZIONE (industriali, architettonici, drenanti)
   Loaded after style.css: tokens, header, menu and buttons come from
   there. What this file adds is the product-page grammar Apple uses on its
   dark pages -- a sticky local nav, a centred hero, bento tiles, a colour
   picker, a card rail, a sticky process index, a compare table, tech specs --
   set on the site's own black, type and red.

   The one deliberate break from the homepage's shape lock: tiles, frames and
   the local-nav buttons are rounded here (--r-lg / --r-md / pill). Rounded
   tiles are what makes the grid read as Apple; set both radii to 0 to go
   back to the sharp homepage look.
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
.page{
  --fg:      #08080a;
  --fg-2:    #59595e;
  --fg-3:    #8c8c91;
  --dim:     #c3c3c5;                /* words not yet reached by the scroll */
  --tile:    #f2f2f3;                /* light enough for red and grey text at 4.5:1 */
  --tile-2:  #e8e8ea;
  --tile-line: rgba(0,0,0,.08);
  --accent-2:#d4202a;                /* brand red for text and details on white */
  --r-lg:    clamp(18px,2vw,28px);
  --r-md:    clamp(12px,1.3vw,18px);
  --wrap:    76rem;
  --nav-h:   var(--head-total);       /* the fixed global bar */
  --apple:   cubic-bezier(.28,.11,.32,1);
  background:#ffffff;
  color:var(--fg);
}
.page [id]{scroll-margin-top:calc(var(--nav-h) + 12px)}

.wrap{width:min(100% - var(--gutter-l) - var(--gutter-r), var(--wrap));margin-inline:auto}
.wrap--narrow{--wrap:58rem}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:1rem;top:-100px;z-index:200;
  background:var(--fg);color:#ffffff;padding:.7rem 1rem;border-radius:8px;font-weight:var(--fw-strong);
}
.skip:focus{top:1rem}

/* ---------- 2. HEADER --------------------------------------------------
   The global bar from style.css stays fixed on these pages too (it is the
   only navigation: there is no local nav). Content that sticks to the top
   or is scrolled to clears it through --nav-h. */

/* ---------- 4. TYPE ------------------------------------------------------ */
.eyebrow{
  display:block;
  font-family:var(--f-mono);font-size:var(--fs-mono);font-weight:400;letter-spacing:.09em;text-transform:uppercase;line-height:1.35;
  color:var(--accent-2);margin-bottom:clamp(.5rem,1vw,.9rem);
}
.headline{
  font-size:clamp(2.35rem,5.4vw,4.9rem);
  font-weight:var(--fw-title);line-height:1.04;letter-spacing:-.03em;
  color:var(--fg);
  text-wrap:balance;
}
.headline--sm{font-size:clamp(2rem,4vw,3.5rem)}
.sub{
  font-size:clamp(1.08rem,1.55vw,1.45rem);font-weight:400;
  line-height:1.45;letter-spacing:-.012em;color:var(--fg-2);
  max-width:44ch;
  text-wrap:pretty;
}
.sub strong{color:var(--fg);font-weight:var(--fw-strong)}
.center{text-align:center}
.center .sub{margin-inline:auto}
.head{margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.head .sub{margin-top:clamp(1rem,1.8vw,1.5rem)}

/* Gradient type: the Apple signature, set white-to-brand-red. */
.grad{
  background:linear-gradient(92deg,#08080a 0%,#2d2b27 38%,#e8333b 78%,#d4202a 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  padding-bottom:.08em;
}

/* ---------- 5. BUTTONS & LINKS ------------------------------------------ */
.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:.45em;
  min-height:44px;padding:.72em 1.4em;border-radius:980px;
  background:var(--accent);color:#000000;
  font-family:var(--f-mono);font-size:var(--fs-mono);font-weight:400;letter-spacing:.09em;text-transform:uppercase;line-height:1.35;
  white-space:nowrap;
  transition:background .3s ease,transform .2s ease;
}
.pill:hover{background:#b3141f}
.pill:active{transform:scale(.98)}
.pill--ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.pill--ghost:hover{background:rgba(0,0,0,.08)}

.tlink{
  display:inline-flex;align-items:center;gap:.25em;min-height:44px;
  color:var(--accent-2);font-family:var(--f-mono);font-size:var(--fs-mono);font-weight:400;letter-spacing:.09em;text-transform:uppercase;line-height:1.35;
}
.tlink::after{content:"\203A";font-size:1.25em;line-height:1;transform:translateY(-.04em);transition:transform .3s var(--apple)}
.tlink:hover{text-decoration:underline;text-underline-offset:.2em}
.tlink:hover::after{transform:translate(3px,-.04em)}

/* ---------- 6. PHOTO PLACEHOLDERS ----------------------------------------
   Every photograph slot on these pages is an empty .ph frame. To fill one,
   put an <img> inside it (the HTML comment in each slot has the markup):
   the image covers the frame and the label disappears on its own. */
.ph{
  position:relative;overflow:hidden;isolation:isolate;
  aspect-ratio:var(--ar,16/9);
  border-radius:var(--r-lg);
  background:
    radial-gradient(120% 90% at 30% 20%,rgba(0,0,0,.055),rgba(0,0,0,0) 60%),
    linear-gradient(180deg,#e9e9eb,#f2f2f3);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.07);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.6rem;text-align:center;padding:1.25rem;
  color:var(--fg-3);
}
.ph::before{
  content:"";width:46px;height:46px;flex:none;border-radius:50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='m21 16-5-5-8 8'/%3E%3C/svg%3E") center/22px no-repeat,
    rgba(0,0,0,.06);
}
.ph__tag{
  font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.09em;text-transform:uppercase;
}
.ph__hint{font-size:.9rem;line-height:1.35;max-width:32ch;color:var(--fg-3)}
.ph > img,.ph > picture,.ph > video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;
}
.ph > picture img{width:100%;height:100%;object-fit:cover}
.ph:has(> img,> picture,> video){box-shadow:none}
.ph:has(> img,> picture,> video)::before,
.ph:has(> img,> picture,> video) .ph__tag,
.ph:has(> img,> picture,> video) .ph__hint{display:none}
@media (max-width:599px){.ph__hint{font-size:.875rem}}

/* ---------- 7. HERO ------------------------------------------------------ */
.phero{padding-top:calc(var(--head-total) + clamp(3.5rem,8vw,7rem));text-align:center;overflow:hidden}
.phero h1{font-weight:inherit}
.phero__kicker{
  display:block;
  font-family:var(--f-mono);font-size:var(--fs-mono);font-weight:400;letter-spacing:.09em;text-transform:uppercase;line-height:1.35;
  color:var(--accent-2);margin-bottom:clamp(.6rem,1.2vw,1rem);
}
.phero__title{
  display:block;
  font-size:clamp(2.9rem,8.2vw,7.4rem);font-weight:var(--fw-title);
  line-height:1;letter-spacing:-.035em;
  text-wrap:balance;
}
.phero__lead{margin:clamp(1.25rem,2.4vw,2rem) auto 0;max-width:40ch}
/* the gradient half of the title stays in one piece when it fits */
.phero__title .grad{display:inline-block}
.phero__title .grad,.pcta__title .grad{font-style:italic;font-weight:400;padding-right:.06em}
.phero__ctas{
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  gap:.75rem clamp(1.25rem,2.5vw,2rem);margin-top:clamp(1.75rem,3vw,2.5rem);
}
.phero__media{margin-top:clamp(3rem,6vw,5.5rem)}
.phero__media .ph{
  transform:scale(var(--hs,1));transform-origin:50% 0;
  will-change:transform;
}
/* Full-bleed variant (the three floor pages): like the homepage hero, the
   photograph fills the first screen edge to edge and the text sits on it,
   anchored low over a scrim, so the image leads and the copy follows. */
.phero--full{
  position:relative;isolation:isolate;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:calc(var(--head-total) + clamp(6rem,14vw,10rem));
  padding-bottom:clamp(3rem,6vw,5.5rem);
}
.phero--full .phero__media{
  position:absolute;inset:0;z-index:-1;margin:0;width:auto;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,.5) 84%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,.5) 84%,rgba(0,0,0,0) 100%);
}
.phero--full .phero__media .ph{
  aspect-ratio:auto;height:100%;border-radius:0;box-shadow:none;
  justify-content:flex-start;padding-top:clamp(2rem,6vw,4rem);
  transform:translate3d(0,var(--hy,0px),0) scale(1.06);transform-origin:50% 50%;
}
.phero--full .phero__media .ph > img,
.phero--full .phero__media .ph > picture img{object-position:var(--focus,50% 50%)}
/* scrim: keeps the copy readable on any photo, darkest where the text is */
.phero--full::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,.22) 38%,rgba(0,0,0,.72) 68%,#000 100%),
    linear-gradient(90deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 60%);
}
/* copy anchored bottom-left, like the homepage's hero foot: the upper half
   and the right side of the frame stay clear for the photograph */
.phero--full{text-align:left}
.phero--full .phero__title{font-size:clamp(2.6rem,6vw,5.6rem);max-width:20ch}
.phero--full .phero__kicker{text-shadow:0 1px 18px rgba(0,0,0,.55),0 0 2px rgba(0,0,0,.35)}
.phero--full .phero__lead{margin-left:0;max-width:42ch;color:rgba(245,245,247,.88)}
.phero--full .phero__ctas{justify-content:flex-start}
@media (max-width:599px){
  .phero--full{padding-top:calc(var(--head-total) + clamp(9rem,40vh,16rem))}
}
.pjs .phero--full .phero__media.hin{transform:none;animation-name:hfade}
@keyframes hfade{to{opacity:1}}

/* entrance: staggered fade-up on load, like apple.com's product heroes */
.pjs .hin{opacity:0;transform:translateY(26px);animation:hin 1.2s var(--apple) forwards;animation-delay:var(--d,0s)}
@keyframes hin{to{opacity:1;transform:none}}

/* ---------- 8. SECTIONS -------------------------------------------------- */
.sec{padding-block:clamp(5rem,11vw,10rem)}
.sec--tight{padding-block:clamp(3.5rem,7vw,6.5rem)}
.sec--top0{padding-top:0}
.sec--tile{background:#f4f4f5}
.divider{height:1px;background:var(--tile-line);border:0;margin:0}

/* Scroll-lit paragraph: the words brighten as the section is read. The
   dimming only exists once JS has split the text (html.pjs + .w spans). */
.scrolltext{
  font-size:clamp(1.75rem,4.1vw,3.6rem);font-weight:var(--fw-title);
  line-height:1.14;letter-spacing:-.028em;
  max-width:28ch;
  text-wrap:pretty;
}
.scrolltext .w{transition:color .45s ease}
.pjs .scrolltext .w{color:var(--dim)}
.pjs .scrolltext .w.on{color:var(--fg)}
.pjs .scrolltext .w.on.acc{color:var(--accent-2)}

/* ---------- 9. REVEAL ---------------------------------------------------- */
.pjs .rv{opacity:0;transform:translateY(40px);transition:opacity 1s var(--apple),transform 1.1s var(--apple);transition-delay:var(--d,0s)}
.pjs .rv.is-in{opacity:1;transform:none}

/* ---------- 10. BENTO ---------------------------------------------------- */
.bento{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  grid-auto-flow:dense;
  gap:clamp(.75rem,1.2vw,1.25rem);
}
.tile{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:.75rem;
  min-height:clamp(15rem,24vw,22rem);
  padding:clamp(1.6rem,2.8vw,2.6rem);
  border-radius:var(--r-lg);
  background:var(--tile);
  grid-column:span 2;
}
.tile--w3{grid-column:span 3}
.tile--w4{grid-column:span 4}
.tile--w6{grid-column:span 6}
.tile--tall{grid-row:span 2}
.tile__eyebrow{font-family:var(--f-mono);font-size:var(--fs-mono);font-weight:400;letter-spacing:.09em;text-transform:uppercase;line-height:1.35;color:var(--fg-2)}
.tile__title{
  font-size:clamp(1.55rem,2.5vw,2.4rem);font-weight:var(--fw-title);
  line-height:1.08;letter-spacing:-.025em;text-wrap:balance;
}
.tile__text{color:var(--fg-2);font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.5;max-width:46ch}
.tile__text strong{color:var(--fg);font-weight:var(--fw-strong)}
.tile__big{
  font-size:clamp(4.2rem,8.5vw,7.8rem);font-weight:var(--fw-mark);
  line-height:.9;letter-spacing:-.06em;
  font-stretch:var(--fx-mark);
}
.tile .ph{margin-top:auto;border-radius:var(--r-md)}
.tile--media{padding-bottom:clamp(1rem,1.6vw,1.4rem)}
/* wide tile: copy left, photograph right */
.tile--split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(1.5rem,4vw,4rem)}
.tile--split .ph{margin-top:0}
.tile--accent{background:linear-gradient(160deg,#f9d6d8 0%,#fcebec 55%,#ededee 100%)}

@media (max-width:1023px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile,.tile--w3{grid-column:span 1}
  .tile--w4,.tile--w6{grid-column:span 2}
  .tile--tall{grid-row:auto}
}
@media (max-width:639px){
  .bento{grid-template-columns:1fr}
  .tile,.tile--w3,.tile--w4,.tile--w6{grid-column:auto}
  .tile{min-height:0}
  .tile--split{grid-template-columns:1fr}
}

/* ---------- 11. PICKER (aggregati) -------------------------------------- */
.picker{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;
}
.picker__stage{position:relative;aspect-ratio:4/3}
.picker__stage .ph{
  position:absolute;inset:0;--ar:auto;
  opacity:0;transform:scale(.985);
  transition:opacity .6s var(--apple),transform .8s var(--apple);
}
.picker__stage .ph.is-active{opacity:1;transform:none}
.picker__name{
  font-size:clamp(1.9rem,3.4vw,3rem);font-weight:var(--fw-title);letter-spacing:-.03em;line-height:1.05;
}
.picker__text{margin-top:1rem;color:var(--fg-2);font-size:clamp(1.02rem,1.25vw,1.2rem);line-height:1.5;max-width:40ch;min-height:4.5em}
.swatches{display:flex;flex-wrap:wrap;gap:1.1rem 1.4rem;margin-top:clamp(1.75rem,3vw,2.5rem)}
.sw{display:flex;flex-direction:column;align-items:center;gap:.55rem;min-width:44px}
.sw__dot{
  width:40px;height:40px;border-radius:50%;
  background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
  outline:2px solid transparent;outline-offset:3px;
  transition:outline-color .25s ease,transform .25s ease;
}
.sw:hover .sw__dot{transform:scale(1.06)}
.sw[aria-pressed="true"] .sw__dot{outline-color:var(--fg)}
.sw__label{font-size:.875rem;color:var(--fg-2)}
.sw[aria-pressed="true"] .sw__label{color:var(--fg)}
.sw:focus-visible{outline:none}
.sw:focus-visible .sw__dot{outline-color:var(--accent-2)}
.picker__note{margin-top:clamp(1.5rem,2.5vw,2rem);color:var(--fg-3);font-size:.9rem}

/* aggregate swatches -- speckled stone, drawn in CSS */
.sw--chiaro   {--c:radial-gradient(circle at 30% 30%,#000000 0 3px,transparent 4px) 0 0/11px 11px,radial-gradient(circle at 70% 60%,#494030 0 3px,transparent 4px) 0 0/13px 13px,#272116}
.sw--scuro    {--c:radial-gradient(circle at 30% 30%,#a3a3a5 0 3px,transparent 4px) 0 0/11px 11px,radial-gradient(circle at 70% 60%,#e3e3e4 0 3px,transparent 4px) 0 0/13px 13px,#cacacc}
.sw--policromo{--c:radial-gradient(circle at 30% 30%,#c9a27a 0 3px,transparent 4px) 0 0/11px 11px,radial-gradient(circle at 70% 60%,#797d84 0 3px,transparent 4px) 0 0/13px 13px,radial-gradient(circle at 50% 10%,#e8dcc6 0 2px,transparent 3px) 0 0/9px 9px,#aa8973}
.sw--verde    {--c:radial-gradient(circle at 30% 30%,#54654f 0 3px,transparent 4px) 0 0/11px 11px,radial-gradient(circle at 70% 60%,#a9c0b0 0 3px,transparent 4px) 0 0/13px 13px,#8aa08e}

@media (max-width:899px){
  .picker{grid-template-columns:1fr}
  .picker__text{min-height:0}
}

/* ---------- 12. RAIL (card carousel) ------------------------------------- */
.rail{
  --pad:max(var(--gutter-l), (100% - var(--wrap)) / 2);
  display:grid;grid-auto-flow:column;
  grid-auto-columns:clamp(16.5rem,30vw,23rem);
  gap:clamp(.75rem,1.2vw,1.25rem);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding-inline:var(--pad);scroll-padding-inline:var(--pad);
  padding-bottom:.5rem;
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}
.card{
  scroll-snap-align:start;
  display:flex;flex-direction:column;
  border-radius:var(--r-lg);overflow:hidden;
  background:var(--tile);
}
.card__body{padding:clamp(1.4rem,2vw,1.9rem) clamp(1.4rem,2vw,1.9rem) 1.25rem}
.card__eyebrow{font-family:var(--f-mono);font-size:var(--fs-mono);font-weight:400;letter-spacing:.09em;text-transform:uppercase;line-height:1.35;color:var(--fg-3)}
.card__title{font-size:clamp(1.35rem,1.8vw,1.7rem);font-weight:var(--fw-title);letter-spacing:-.022em;line-height:1.12;margin-top:.3rem}
.card__text{color:var(--fg-2);margin-top:.6rem;font-size:1rem;line-height:1.45}
.card .ph{--ar:4/3;border-radius:0;margin-top:auto;box-shadow:none}
.rail__ctrl{display:flex;justify-content:flex-end;gap:.75rem;margin-top:1.25rem}
.rail__btn{
  width:44px;height:44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#e0e0e2;color:var(--fg);
  transition:background .25s ease,opacity .25s ease;
}
.rail__btn:hover{background:#d1d1d3}
.rail__btn:disabled{opacity:.35;cursor:default}
@media (max-width:599px){.rail{grid-auto-columns:80vw}}

/* ---------- 13. PROCESS (sticky index + steps) ---------------------------- */
.steps{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(2rem,6vw,6.5rem);
}
.steps__aside{position:sticky;top:calc(var(--nav-h) + clamp(2rem,5vh,4rem));align-self:start}
.steps__index{margin-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--tile-line)}
.steps__index li{border-bottom:1px solid var(--tile-line)}
.steps__index a{
  display:flex;gap:1rem;align-items:baseline;min-height:44px;padding:.7rem 0;
  color:var(--fg-3);font-weight:var(--fw-title);font-size:clamp(1rem,1.25vw,1.2rem);letter-spacing:-.015em;
  transition:color .35s ease;
}
.steps__index a span{font-family:var(--f-mono);font-size:var(--fs-mono);font-weight:400;letter-spacing:.09em}
.steps__index a.is-active{color:var(--fg)}
.steps__index a.is-active span{color:var(--accent-2)}
.step + .step{margin-top:clamp(4rem,9vw,8rem)}
.step__num{font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--accent-2)}
.step__title{font-size:clamp(1.7rem,3vw,2.7rem);font-weight:var(--fw-title);letter-spacing:-.03em;line-height:1.06;margin-top:.5rem}
.step__text{color:var(--fg-2);font-size:clamp(1.02rem,1.25vw,1.2rem);line-height:1.52;margin-top:.9rem;max-width:44ch}
.step .ph{margin-top:clamp(1.5rem,2.5vw,2rem);--ar:4/3}
@media (max-width:899px){
  .steps{grid-template-columns:1fr}
  .steps__aside{position:static}
  .steps__index{display:none}
}

/* ---------- 14. EXPLODED LAYERS (stratigrafia) ---------------------------
   A tall section with a sticky stage. JS writes --p (0 -> 1) from the scroll
   position; the plates separate by it and the legend lights up in order.
   On a phone, or with reduced motion, it rests half-open in plain flow. */
.layers{position:relative;height:300vh}
.layers__sticky{
  position:sticky;top:var(--nav-h);
  height:calc(100vh - var(--nav-h));height:calc(100svh - var(--nav-h));
  display:flex;align-items:center;overflow:hidden;
}
.layers__grid{
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  align-items:center;gap:clamp(2rem,5vw,5rem);
}
.layers__head{grid-column:1 / -1}
.layers__head .sub{margin-top:.9rem}
.layers__stage{
  --p:var(--lp,0);
  display:flex;align-items:center;justify-content:center;
  height:clamp(20rem,52vh,34rem);
}
.layers__iso{
  position:relative;width:clamp(12rem,24vw,19rem);aspect-ratio:1;
  /* the stack rises as it opens: shift it down by half the rise to keep it centred */
  transform:translateY(calc((var(--n) - 1) * (10px + var(--p) * 58px) * .42)) rotateX(58deg) rotateZ(-45deg);
  transform-style:preserve-3d;
}
.plate{
  position:absolute;inset:0;border-radius:6px;
  transform:translateZ(calc(var(--i) * (10px + var(--p) * 58px)));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.4);
  opacity:.55;
  transition:opacity .45s ease,box-shadow .45s ease;
}
.plate.is-on{opacity:1}
.plate.is-cur{box-shadow:inset 0 0 0 2px var(--accent-2),0 0 40px rgba(212,32,42,.25)}
.plate--terreno {background:radial-gradient(circle at 20% 30%,#c4ab94 0 2px,transparent 3px) 0 0/14px 14px,radial-gradient(circle at 70% 70%,#e6dcd3 0 2px,transparent 3px) 0 0/11px 11px,#d5c7bb}
.plate--misto   {background:radial-gradient(circle,#706b65 0 3px,transparent 4px) 0 0/13px 13px,radial-gradient(circle,#a8a4a0 0 2.5px,transparent 3.5px) 6px 6px/13px 13px,#c7c5c3}
.plate--telo    {background:linear-gradient(135deg,rgba(65,85,105,.55),rgba(157,169,185,.55))}
.plate--geo     {background:repeating-linear-gradient(45deg,rgba(0,0,0,.22) 0 1px,transparent 1px 5px),repeating-linear-gradient(-45deg,rgba(0,0,0,.16) 0 1px,transparent 1px 6px),#3d4046;opacity:.8}
.plate--rete    {background:repeating-linear-gradient(0deg,#c0773f 0 2px,transparent 2px 24px),repeating-linear-gradient(90deg,#c0773f 0 2px,transparent 2px 24px);box-shadow:none}
.plate--cls     {background:radial-gradient(circle at 30% 40%,rgba(255,255,255,.18) 0 1px,transparent 2px) 0 0/7px 7px,radial-gradient(circle at 60% 20%,rgba(0,0,0,.12) 0 1px,transparent 2px) 0 0/9px 9px,#7a7874}
.plate--quarzo  {background:linear-gradient(rgba(255,255,255,.55) 1.5px,transparent 1.5px) 0 0/33.34% 33.34%,linear-gradient(90deg,rgba(255,255,255,.55) 1.5px,transparent 1.5px) 0 0/33.34% 33.34%,linear-gradient(135deg,#24221d 0%,#53514c 55%,#2f2d28 100%)}
.plate--drenante{background:radial-gradient(circle,#f0f0f1 0 2.4px,transparent 3.2px) 0 0/10px 10px,radial-gradient(circle,#e1e1e3 0 2px,transparent 2.8px) 5px 5px/10px 10px,radial-gradient(circle,#6b6863 0 3px,transparent 3.6px) 2px 7px/10px 10px,#969490}

.layers__legend{counter-reset:none}
.layers__legend li{
  display:grid;grid-template-columns:2.5rem minmax(0,1fr);column-gap:.75rem;
  padding:clamp(.65rem,1.2vh,1rem) 0;border-top:1px solid var(--tile-line);
  opacity:.32;transition:opacity .45s ease;
}
.layers__legend li:last-child{border-bottom:1px solid var(--tile-line)}
.layers__legend li.is-on{opacity:1}
.layers__legend .num{grid-row:span 2;font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.09em;color:var(--fg-3);padding-top:.3em}
.layers__legend li.is-cur .num{color:var(--accent-2)}
.layers__legend strong{font-size:clamp(1.05rem,1.35vw,1.3rem);font-weight:var(--fw-title);letter-spacing:-.02em}
.layers__legend span:not(.num){color:var(--fg-2);font-size:clamp(.9rem,1vw,1rem);line-height:1.42}
.layers__hint{margin-top:1rem;color:var(--fg-3);font-size:.875rem}

@media (max-width:899px),(max-height:620px),(prefers-reduced-motion:reduce){
  .layers{height:auto;padding-block:clamp(4.5rem,11vw,7rem)}
  .layers__sticky{position:static;height:auto;display:block;overflow:visible}
  .layers__grid{grid-template-columns:1fr}
  .layers__stage{--p:.7;height:auto;padding-block:clamp(3rem,10vw,5rem) clamp(1rem,4vw,2rem)}
  .layers__iso{width:min(62vw,17rem)}
  .plate{opacity:1}
  .layers__legend li{opacity:1}
  .layers__hint{display:none}
}

/* ---------- 15. DRAIN DIAGRAM (drenanti) --------------------------------- */
.drain{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.75rem,1.2vw,1.25rem)}
.drain__panel{border-radius:var(--r-lg);background:var(--tile);overflow:hidden}
.drain__svg{display:block;width:100%;height:auto;background:linear-gradient(180deg,#e8ecf2 0%,#ededef 60%)}
.drain__cap{padding:clamp(1.3rem,2.2vw,2rem)}
.drain__cap h3{font-size:clamp(1.3rem,1.9vw,1.75rem);font-weight:var(--fw-title);letter-spacing:-.028em;line-height:1.1}
.drain__cap p{color:var(--fg-2);margin-top:.5rem;max-width:40ch}
.drain__panel--good .drain__cap h3{color:var(--fg)}
.drain__tag{display:inline-block;font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--fg-3);margin-bottom:.6rem}
.drain__panel--good .drain__tag{color:var(--accent-2)}

.drop{stroke:#7cc4f2;stroke-width:2;stroke-linecap:round;opacity:0}
.drop--short{animation:fallShort 1.5s linear infinite}
.drop--deep {animation:fallDeep 2.2s linear infinite}
.drop{animation-delay:var(--d,0s)}
@keyframes fallShort{0%{transform:translateY(0);opacity:0}8%{opacity:.95}90%{opacity:.95}100%{transform:translateY(108px);opacity:0}}
@keyframes fallDeep {0%{transform:translateY(0);opacity:0}6%{opacity:.95}62%{opacity:.95}100%{transform:translateY(220px);opacity:0}}
.puddle{fill:#4a9fd8;opacity:.55;transform-box:fill-box;transform-origin:50% 100%;animation:puddle 3.2s ease-in-out infinite}
@keyframes puddle{0%,100%{transform:scaleX(.8)}50%{transform:scaleX(1.05)}}
.runoff{stroke:#7cc4f2;stroke-width:2;fill:none;stroke-dasharray:6 8;animation:runoff 1s linear infinite}
@keyframes runoff{to{stroke-dashoffset:-14}}
.seep{fill:#4a9fd8;opacity:.18;animation:seep 3s ease-in-out infinite}
@keyframes seep{0%,100%{opacity:.1}50%{opacity:.24}}
.pjs .drain:not(.is-in) .drop,.pjs .drain:not(.is-in) .puddle,
.pjs .drain:not(.is-in) .runoff,.pjs .drain:not(.is-in) .seep{animation-play-state:paused}
@media (max-width:767px){.drain{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.drop{opacity:.8;animation:none}}

/* ---------- 16. COMPARE --------------------------------------------------- */
.compare{overflow-x:auto;scrollbar-width:thin;margin-inline:calc(-1 * var(--gutter-l)) calc(-1 * var(--gutter-r));padding-inline:var(--gutter-l) var(--gutter-r)}
.compare table{width:100%;min-width:680px;border-collapse:collapse}
.compare th,.compare td{padding:clamp(1rem,1.6vw,1.4rem) clamp(.75rem,1.4vw,1.25rem);text-align:left;vertical-align:top;border-bottom:1px solid var(--tile-line)}
.compare thead th{
  font-size:clamp(1.1rem,1.5vw,1.4rem);font-weight:var(--fw-title);letter-spacing:-.02em;
  border-bottom:1px solid rgba(0,0,0,.28);padding-top:0;
}
.compare thead th.is-us{color:var(--accent-2)}
.compare tbody th{font-weight:500;color:var(--fg-3);width:20%;font-size:.95rem}
.compare td{color:var(--fg-2);font-size:clamp(.95rem,1.05vw,1.05rem);line-height:1.45}
.compare td.is-us{color:var(--fg);font-weight:var(--fw-strong)}
.compare__note{margin-top:1.25rem;color:var(--fg-3);font-size:.875rem}

/* ---------- 17. SPECS ----------------------------------------------------- */
.specs{border-top:1px solid rgba(0,0,0,.28)}
.specs__row{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:1rem 2rem;
  padding-block:clamp(1.1rem,1.8vw,1.6rem);border-bottom:1px solid var(--tile-line);
}
.specs dt{font-weight:var(--fw-title);font-size:clamp(1.05rem,1.35vw,1.3rem);letter-spacing:-.02em}
.specs dd{color:var(--fg-2);font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.5}
.specs dd ul{display:grid;gap:.25rem}
@media (max-width:639px){.specs__row{grid-template-columns:1fr;gap:.35rem}}

/* ---------- 18. FEATURE (text + photo, two columns) ---------------------- */
.feature{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,6rem);align-items:center;
}
.feature--flip .feature__media{order:-1}
.feature__copy .headline + .sub{margin-top:clamp(1rem,1.8vw,1.5rem)}
.feature__copy .sub + .sub{margin-top:1.1rem}
.feature__list{margin-top:clamp(1.5rem,2.5vw,2rem);display:grid;gap:.9rem}
.feature__list li{
  display:grid;grid-template-columns:1.4rem minmax(0,1fr);gap:.6rem;
  color:var(--fg-2);font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.45;
}
.feature__list li::before{
  content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--accent-2);margin-top:.5em;
}
.feature__list strong{color:var(--fg);font-weight:var(--fw-strong)}
@media (max-width:899px){
  .feature{grid-template-columns:1fr}
  .feature--flip .feature__media{order:0}
}

/* ---------- 19. GALLERY --------------------------------------------------- */
.gallery{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(.75rem,1.2vw,1.25rem);
}
.gallery__item{grid-column:span 6;margin:0}
.gallery__item--7{grid-column:span 7}
.gallery__item--5{grid-column:span 5}
.gallery__item--12{grid-column:span 12}
.gallery__item .ph{--ar:auto;height:clamp(15rem,30vw,28rem)}
.gallery__item--12 .ph{height:clamp(16rem,40vw,36rem)}
.gallery__cap{
  display:flex;justify-content:space-between;gap:1rem;margin-top:.8rem;
  font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--fg-3);
}
.gallery__cap b{font-weight:400;color:var(--fg)}
@media (max-width:767px){
  .gallery{grid-template-columns:1fr}
  .gallery__item,.gallery__item--7,.gallery__item--5,.gallery__item--12{grid-column:auto}
  .gallery__item .ph,.gallery__item--12 .ph{--ar:4/3;height:auto}
  .gallery__cap{flex-direction:column;gap:.2rem}
}

/* ---------- 20. ZONE (local SEO band) ------------------------------------ */
.zone__list{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;
  margin-top:clamp(1.75rem,3vw,2.5rem);
}
.zone__list li{
  padding:.55em 1.1em;border-radius:980px;
  background:var(--tile-2);color:var(--fg-2);font-size:clamp(.9rem,1vw,1rem);
}
.zone__list li.is-home{background:rgba(212,32,42,.14);color:var(--fg);box-shadow:inset 0 0 0 1px rgba(212,32,42,.45)}

/* ---------- 21. FAQ (native details) ------------------------------------- */
.qa{border-top:1px solid rgba(0,0,0,.28)}
.qa__item{border-bottom:1px solid var(--tile-line)}
.qa__item summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  padding-block:clamp(1.2rem,2vw,1.7rem);
  font-size:clamp(1.1rem,1.65vw,1.5rem);font-weight:var(--fw-title);letter-spacing:-.02em;line-height:1.25;
  transition:color .25s ease;
}
.qa__item summary::-webkit-details-marker{display:none}
.qa__item summary:hover{color:var(--accent-2)}
.qa__item summary::after{
  content:"";flex:none;width:1.05rem;height:1.05rem;
  background:
    linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;
  transition:transform .4s var(--apple);
}
.qa__item[open] summary::after{transform:rotate(135deg)}
.qa__item[open] summary{color:var(--accent-2)}
.qa__answer{padding-bottom:clamp(1.3rem,2.2vw,1.9rem);max-width:68ch}
.qa__answer p{color:var(--fg-2);font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.6}
.qa__answer p + p{margin-top:.8em}
.qa__answer a{color:var(--accent-2);text-decoration:underline;text-underline-offset:.2em}
/* smooth open where the browser can animate to height:auto */
@supports (interpolate-size:allow-keywords){
  .qa{interpolate-size:allow-keywords}
  .qa__item::details-content{height:0;overflow:hidden;transition:height .45s var(--apple),content-visibility .45s allow-discrete}
  .qa__item[open]::details-content{height:auto}
}

/* ---------- 22. RELATED -------------------------------------------------- */
.related{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.75rem,1.2vw,1.25rem)}
.related__card{
  display:flex;flex-direction:column;gap:.5rem;
  padding:clamp(1.6rem,2.6vw,2.4rem);border-radius:var(--r-lg);background:var(--tile);
  transition:background .35s ease;
}
.related__card:hover{background:var(--tile-2)}
.related__card .ph{--ar:16/9;margin-top:1.25rem;border-radius:var(--r-md)}
.related__card .tile__title{margin-top:.1rem}
.related__card .tlink{margin-top:.25rem}
.related--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:767px){.related{grid-template-columns:1fr}}

/* ---------- 22b. SHOWCASE (large image-first cards) ---------------------
   The photograph is the card: full height, edge to edge, with the copy set
   on it over a dark foot. Used for the Home's Lavorazioni. */
.showcase{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.5rem,.9vw,1rem);
  padding-inline:max(clamp(.75rem,1.4vw,1.5rem),var(--safe-left)) max(clamp(.75rem,1.4vw,1.5rem),var(--safe-right));
}
.showcase__card{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  height:clamp(34rem,84svh,58rem);
  border-radius:var(--r-lg);background:var(--tile);color:#fff;
}
.showcase__card > img{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);transition:transform 1.1s var(--apple);
}
.showcase__card::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.3) 72%,rgba(0,0,0,.78) 100%);
  transition:opacity .6s var(--apple);
}
.showcase__body{
  display:flex;flex-direction:column;gap:.65rem;
  padding:clamp(1.4rem,2.4vw,2.5rem);
  transform:translateY(0);transition:transform .7s var(--apple);
}
.showcase__meta{
  font-family:var(--f-mono);font-size:var(--fs-mono);font-weight:400;letter-spacing:.09em;text-transform:uppercase;line-height:1.35;
  color:rgba(255,255,255,.78);
}
.showcase__title{
  font-size:clamp(2rem,3.3vw,3.5rem);font-weight:var(--fw-title);
  line-height:1.02;letter-spacing:-.03em;text-wrap:balance;
}
.showcase__text{
  max-width:36ch;color:rgba(255,255,255,.82);
  font-size:clamp(1rem,1.1vw,1.1rem);line-height:1.5;
}
.showcase__link{
  display:inline-flex;align-items:center;gap:.4em;min-height:44px;margin-top:.15rem;
  font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.09em;text-transform:uppercase;
}
.showcase__link::after{content:"\2192";transition:transform .4s var(--apple)}
/* with a pointer the description waits for the hover, so at rest the card
   is photograph, name and link only */
@media (hover:hover){
  .showcase__text{max-height:0;opacity:0;overflow:hidden;margin-top:-.65rem;
    transition:max-height .7s var(--apple),opacity .5s ease,margin .7s var(--apple)}
  .showcase__card:hover .showcase__text,.showcase__card:focus-visible .showcase__text{max-height:9em;opacity:1;margin-top:0}
  .showcase__card:hover::after{opacity:1}
  .showcase__card:hover > img{transform:scale(1.07)}
  .showcase__card:hover .showcase__body{transform:translateY(-6px)}
  .showcase__card:hover .showcase__link::after{transform:translateX(5px)}
}
.showcase__card:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}
@media (max-width:899px){
  .showcase{grid-template-columns:1fr}
  .showcase__card{height:auto;aspect-ratio:4/3}
}
@media (max-width:599px){
  .showcase__card{aspect-ratio:4/5}
}
@media (prefers-reduced-motion:reduce){
  .showcase__card > img,.showcase__body,.showcase__link::after{transition:none}
}

/* ---------- 22c. LOGHI CLIENTI (social proof) ----------------------------
   Three rows of logos sliding sideways, each row the opposite way to the
   one above, fading out at both edges (after kingkong.co's "featured in").
   pagina.js clones each row's list until it is wider than the screen and
   sets --shift / --dur, so the loop has no seam at any width. Without JS,
   or with reduced motion, the logos sit still in centred rows. */
.logos{padding-block:clamp(3.5rem,7vw,6rem);overflow:hidden}
.logos__title{text-align:center;color:var(--fg-3);margin-bottom:clamp(2rem,4vw,3.25rem)}
.logos__rows{
  display:grid;gap:clamp(1.75rem,3.5vw,3rem);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
}
.logos__row{display:flex;width:max-content;margin-inline:auto}
.logos__group{display:flex;align-items:center;flex:none}
.logos__group li{flex:none;padding-inline:clamp(1.5rem,3.2vw,3.25rem)}
/* --k (set per logo in the HTML) evens out the ink: tall marks get a
   taller box, long wordmarks a shorter one */
.logos__group img{
  display:block;width:auto;max-width:clamp(8.5rem,15vw,14rem);
  height:calc(clamp(2rem,3.2vw,3rem) * var(--k,1));object-fit:contain;
}
.logos.is-live .logos__row{margin-inline:0;animation:logos-left var(--dur,40s) linear infinite}
.logos.is-live .logos__row:nth-child(even){animation-name:logos-right}
/* the third row runs half a lap ahead, so it never lines up with the first */
.logos.is-live .logos__row:nth-child(3){animation-delay:calc(var(--dur,40s) / -2)}
.logos.is-live .logos__rows:hover .logos__row{animation-play-state:paused}
@keyframes logos-left{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--shift,50%)),0,0)}}
@keyframes logos-right{from{transform:translate3d(calc(-1 * var(--shift,50%)),0,0)}to{transform:translate3d(0,0,0)}}
/* resting state: no movement, so every logo has to fit on screen */
.logos:not(.is-live) .logos__row{width:auto;justify-content:center}
.logos:not(.is-live) .logos__group{flex-wrap:wrap;justify-content:center;row-gap:clamp(1.25rem,3vw,2rem)}
.logos:not(.is-live) .logos__rows{-webkit-mask-image:none;mask-image:none}
@media (max-width:599px){
  .logos__group li{padding-inline:1.1rem}
}

/* ---------- 22d. CALL CTA (big button + proof line) ----------------------
   After kingkong.co's "Hit the damn button": one wide, solid, rounded
   button that says what the visitor gets, then a line of proof under it.
   Every one of them dials the number; the benefit is the headline, the
   number sits under it so it can be read (and typed) on a desktop too. */
.cta{
  width:min(100%, 44rem);
  margin:clamp(3rem,6vw,5rem) auto 0;
  display:flex;flex-direction:column;align-items:center;gap:clamp(1rem,1.8vw,1.4rem);
  text-align:center;
}
section > .cta{width:min(100% - var(--gutter-l) - var(--gutter-r), 44rem)}
.cta__btn{
  width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  padding:clamp(1.25rem,2.4vw,1.9rem) clamp(1.25rem,3vw,2.5rem);
  border-radius:clamp(12px,1.2vw,16px);
  background:linear-gradient(100deg,#e3262f 0%,#d4202a 55%,#c41b24 100%);
  color:#fff;
  box-shadow:0 22px 44px -22px rgba(212,32,42,.75),0 2px 6px rgba(0,0,0,.08);
  transition:transform .3s var(--apple),box-shadow .3s var(--apple),filter .3s ease;
}
.cta__btn:hover{transform:translateY(-3px);filter:brightness(1.06);box-shadow:0 28px 52px -22px rgba(212,32,42,.85),0 2px 6px rgba(0,0,0,.08)}
.cta__btn:active{transform:translateY(0) scale(.99)}
.cta__btn:focus-visible{outline:3px solid var(--fg);outline-offset:4px}
.cta__main{
  font-family:var(--f-display);font-weight:var(--fw-mark);font-stretch:100%;
  font-size:clamp(1.3rem,2.7vw,2.25rem);line-height:1.02;letter-spacing:-.01em;
  text-transform:uppercase;text-wrap:balance;
  text-shadow:0 2px 0 rgba(0,0,0,.2);
}
.cta__sub{
  font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.06em;line-height:1.4;
  color:rgba(255,255,255,.92);text-wrap:balance;
}
.cta__proof{
  max-width:100%;
  color:var(--fg-2);font-size:clamp(.95rem,1.1vw,1.08rem);line-height:1.4;text-wrap:balance;
}
.cta__proof::before{
  content:"";display:inline-block;vertical-align:-.3em;margin-right:.55rem;width:1.35rem;height:1.35rem;border-radius:50%;
  background:var(--accent-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/62% no-repeat;
}
.cta__proof strong{color:var(--fg);font-weight:var(--fw-strong)}
/* inside the closing band it is the main action, not an aside */
.pcta .cta{margin-top:clamp(2rem,3.5vw,2.75rem)}
@media (prefers-reduced-motion:reduce){.cta__btn{transition:none}.cta__btn:hover{transform:none}}

/* ---------- 23. CLOSING CTA ---------------------------------------------- */
.pcta{text-align:center;padding-block:clamp(6rem,13vw,12rem)}
.pcta__title{
  font-size:clamp(2.8rem,8vw,7.2rem);font-weight:var(--fw-title);line-height:1;letter-spacing:-.035em;
}
.pcta .sub{margin:clamp(1.25rem,2.4vw,2rem) auto 0;max-width:46ch}
.pcta__actions{display:flex;justify-content:center;flex-wrap:wrap;gap:.75rem;margin-top:clamp(1.75rem,3vw,2.5rem)}
.pcta__direct{margin-top:1.25rem;color:var(--fg-3);font-size:.95rem}
.pcta__direct a{color:var(--fg-2);border-bottom:1px solid var(--tile-line)}
@media (max-width:599px){
  .pcta__actions .pill{width:100%}
}

/* ---------- 24. FOOTER ADDITIONS ----------------------------------------- */
.crumbs{margin-bottom:clamp(2rem,4vw,3rem)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.875rem;color:var(--fg-3)}
.crumbs li{display:inline-flex;align-items:center;gap:.5rem}
.crumbs li + li::before{content:"\203A";color:var(--fg-3)}
.crumbs a{color:var(--fg-2);min-height:44px;display:inline-flex;align-items:center}
.crumbs a:hover{color:var(--fg)}
.crumbs [aria-current]{color:var(--fg)}

/* ---------- 25. MENU ON THESE PAGES (CSS-driven, no GSAP) --------------- */
.page .menu__link{opacity:0;transform:translateY(40%);transition:opacity .5s var(--apple),transform .7s var(--apple)}
.page .menu__meta{opacity:0;transition:opacity .5s var(--apple) .25s}
.page.menu-open .menu__link{opacity:1;transform:none}
.page.menu-open .menu__meta{opacity:1}
.page.menu-open .menu__item:nth-child(2) .menu__link{transition-delay:.04s}
.page.menu-open .menu__item:nth-child(3) .menu__link{transition-delay:.08s}
.page.menu-open .menu__item:nth-child(4) .menu__link{transition-delay:.12s}
.page.menu-open .menu__item:nth-child(5) .menu__link{transition-delay:.16s}
.page.menu-open .menu__item:nth-child(6) .menu__link{transition-delay:.2s}

/* ---------- 26. REDUCED MOTION ------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .pjs .rv,.pjs .hin{opacity:1;transform:none;animation:none}
  .phero__media .ph{transform:none}
  .pjs .scrolltext .w{color:var(--fg)}
}

/* ==========================================================================
   27. CONTATTI
   ========================================================================== */

/* --- contact cards: the three ways in, each one a single tap ------------- */
.ccards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.75rem,1.2vw,1.25rem)}
.ccard{
  position:relative;display:flex;flex-direction:column;gap:.5rem;
  min-height:clamp(15rem,22vw,19rem);
  padding:clamp(1.6rem,2.6vw,2.4rem);border-radius:var(--r-lg);
  background:var(--tile);
  transition:background .35s ease,transform .35s var(--apple);
}
a.ccard:hover{background:var(--tile-2)}
a.ccard:active{transform:scale(.99)}
.ccard--accent{background:linear-gradient(160deg,#f4d9d5 0%,#f8ebea 55%,#ededee 100%)}
a.ccard--accent:hover{background:linear-gradient(160deg,#f1cfca 0%,#f7e6e4 55%,#e9e9ea 100%)}
.ccard__icon{
  width:48px;height:48px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.07);color:var(--fg);margin-bottom:auto;
}
.ccard--accent .ccard__icon{background:var(--accent);color:#000000}
.ccard__label{font-family:var(--f-mono);font-size:var(--fs-mono);font-weight:400;letter-spacing:.09em;text-transform:uppercase;line-height:1.35;color:var(--fg-2);margin-top:clamp(2rem,4vw,3rem)}
.ccard__value{
  font-size:clamp(1.45rem,2.3vw,2.2rem);font-weight:var(--fw-title);letter-spacing:-.025em;line-height:1.1;
  overflow-wrap:anywhere;
}
.ccard__note{color:var(--fg-3);font-size:.95rem;line-height:1.45}
.ccard .tlink{margin-top:.25rem}
@media (max-width:899px){.ccards{grid-template-columns:1fr}.ccard{min-height:0}.ccard__label{margin-top:1.25rem}}

/* --- request form: builds an email, no backend --------------------------- */
.request{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(2rem,6vw,6rem);align-items:start;
}
.request__aside{position:sticky;top:calc(var(--nav-h) + clamp(2rem,5vh,4rem))}
.request__aside .sub{margin-top:1rem}
.request__hint{
  margin-top:clamp(1.5rem,2.5vw,2rem);padding:1.1rem 1.25rem;border-radius:var(--r-md);
  background:var(--tile-2);color:var(--fg-2);font-size:.95rem;line-height:1.5;max-width:40ch;
}
.request__hint strong{color:var(--fg);font-weight:var(--fw-strong)}
@media (max-width:899px){
  .request{grid-template-columns:minmax(0,1fr)}
  .request__aside{position:static}
}

.form{
  display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1rem;
  padding:clamp(1.5rem,3vw,2.75rem);border-radius:var(--r-lg);background:var(--tile);
}
.form__field{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.form__field--full{grid-column:1 / -1}
.form__label{font-size:.9rem;font-weight:var(--fw-title);color:var(--fg)}
.form__label small{font-weight:400;color:var(--fg-3);font-size:.875rem}
.form__input{
  width:100%;min-height:52px;padding:.85rem 1rem;
  border-radius:12px;border:1px solid rgba(0,0,0,.14);
  background:#f4f4f5;color:var(--fg);font-size:1rem;line-height:1.4;
  transition:border-color .25s ease,box-shadow .25s ease;
  -webkit-appearance:none;appearance:none;
}
.form__input::placeholder{color:#9e9ea3}
.form__input:hover{border-color:rgba(0,0,0,.26)}
.form__input:focus{outline:none;border-color:var(--accent-2);box-shadow:0 0 0 4px rgba(212,32,42,.18)}
textarea.form__input{min-height:8.5rem;resize:vertical}
select.form__input{
  padding-right:2.5rem;
  background:#f4f4f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23a1a1a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 1rem center/12px no-repeat;
}
/* only flag a field once the visitor has tried to send */
.form.was-sent .form__input:invalid{border-color:var(--accent-2)}

/* segmented control: radios dressed as pills */
.seg{display:flex;flex-wrap:wrap;gap:.5rem;border:0;padding:0;margin:0;min-width:0}
.seg legend{padding:0;margin-bottom:.45rem}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{
  display:inline-flex;align-items:center;min-height:44px;padding:.55rem 1.1rem;
  border-radius:980px;cursor:pointer;
  background:#f4f4f5;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);
  color:var(--fg-2);font-size:.95rem;font-weight:500;
  transition:background .25s ease,color .25s ease,box-shadow .25s ease;
}
.seg label:hover{color:var(--fg);box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
.seg input:checked + label{background:var(--fg);color:#ffffff;box-shadow:none}
.seg input:focus-visible + label{outline:2px solid var(--accent-2);outline-offset:2px}

.form__foot{
  grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem 1.5rem;margin-top:.5rem;padding-top:1.25rem;border-top:1px solid var(--tile-line);
}
.form__legal{color:var(--fg-3);font-size:.875rem;line-height:1.5;max-width:44ch}
.form__legal a{color:var(--fg-2);text-decoration:underline;text-underline-offset:.2em}
.form__status{grid-column:1 / -1;color:var(--fg-2);font-size:.95rem;min-height:1.4em}
.form__status a{color:var(--accent-2);text-decoration:underline;text-underline-offset:.2em}
@media (max-width:599px){
  .form{grid-template-columns:1fr}
  .form__foot .pill{width:100%}
}

/* --- what happens next: four numbered steps in a row --------------------- */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.75rem,1.2vw,1.25rem);counter-reset:flow}
.flow__step{
  padding:clamp(1.5rem,2.4vw,2.2rem);border-radius:var(--r-lg);background:var(--tile);
  display:flex;flex-direction:column;gap:.6rem;
}
.flow__num{
  font-size:clamp(2.6rem,4.5vw,4rem);font-weight:var(--fw-mark);letter-spacing:-.05em;line-height:1;
  font-stretch:var(--fx-mark);margin-bottom:clamp(1rem,2vw,2rem);
}
.flow__title{font-size:clamp(1.2rem,1.6vw,1.5rem);font-weight:var(--fw-title);letter-spacing:-.02em;line-height:1.15}
.flow__text{color:var(--fg-2);font-size:clamp(.95rem,1.05vw,1.05rem);line-height:1.5}
@media (max-width:1023px){.flow{grid-template-columns:1fr 1fr}}
@media (max-width:599px){.flow{grid-template-columns:1fr}}

/* --- where we are ---------------------------------------------------------- */
.place{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(.75rem,1.2vw,1.25rem)}
.place .ph{--ar:auto;height:100%;min-height:clamp(18rem,34vw,30rem)}
.place__card{
  display:flex;flex-direction:column;gap:.9rem;
  padding:clamp(1.6rem,2.6vw,2.4rem);border-radius:var(--r-lg);background:var(--tile);
}
.place__addr{font-size:clamp(1.5rem,2.4vw,2.2rem);font-weight:var(--fw-title);letter-spacing:-.03em;line-height:1.12;font-style:normal}
.place__meta{color:var(--fg-2);line-height:1.5}
.place__actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:auto;padding-top:1rem}
@media (max-width:899px){.place{grid-template-columns:1fr}.place .ph{--ar:16/10;height:auto;min-height:0}}

/* ==========================================================================
   WHITE BACKGROUND (2026-10-18)
   The site runs on white. Neutral colours above were converted from the
   original black design; the brand reds are unchanged. What sits on a
   photograph stays dark: the Home hero (with its black overlay and fade),
   the preloader, the full-bleed product heroes and the showcase cards.
   ========================================================================== */
.page{--fg-2:#424245;--fg-3:#6b6b70}

/* --- Home hero: its own black ground, white type, original colours ------ */
.hero{background:#050505;color:#fff}
.hero .mono--muted{color:var(--muted)}
.hero .lead{color:var(--paper)}
.hero .btn{border:1px solid currentColor}
.hero .btn::before{background:currentColor}
.hero .btn:hover,.hero .btn:focus-visible{color:var(--paper)}
.hero .btn:hover .btn__label,.hero .btn:focus-visible .btn__label{color:var(--ink)}
.hero .btn:hover .btn__arrow{color:var(--ink)}
/* the hero button is the call: brand red, like every other call button */
.hero .btn{background:var(--accent);border-color:var(--accent);color:#fff}

/* --- full-bleed product heroes stay on their photograph ------------------ */
.phero--full{color:#f5f5f7}
.phero--full .ph{background:#141416;color:#8a8a8f}
.phero--full .grad{background-image:linear-gradient(92deg,#ffffff 0%,#f1dedd 38%,#f2453d 78%,#d4202a 100%)}
.phero--full .phero__kicker{color:#f2453d}
.phero--full .sub strong{color:#fff}

/* --- header: white type over a dark hero, a white bar everywhere else ---- */
.header{mix-blend-mode:normal !important;color:#111}
.header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid rgba(0,0,0,.08)}
body:has(.hero, .phero--full) .header:not(.is-solid){color:#fff}
body:has(.hero, .phero--full) .header:not(.is-solid)::before{
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 100%);border:0;
  -webkit-backdrop-filter:none;backdrop-filter:none}
body.menu-open .header{color:#111}
body.menu-open .header::before{background:#fff;border:0}

/* --- the brand red always carries white type --------------------------- */
.pill:not(.pill--ghost),.ccard--accent .ccard__icon{color:#fff}
::selection{background:var(--accent);color:#fff}

/* ==========================================================================
   PHOTO FIRST (2026-10-18)
   Same idea as the Home's showcase: where a component holds a photograph,
   the photograph gets more room and the copy sits on it, over a dark foot.
   Empty slots stay dark so the white copy reads before the photos arrive.
   ========================================================================== */
.tile--media .ph,.card .ph,.related__card .ph,.gallery__item .ph{
  background:#141416;color:#8a8a8f;box-shadow:none;
}
.tile--media .ph::before,.card .ph::before,.related__card .ph::before,.gallery__item .ph::before{
  background-color:rgba(255,255,255,.08);
}
/* the overlay foot, shared by the four components */
.tile--media::after,.card::after,.related__card::after,.gallery__item::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.35) 66%,rgba(0,0,0,.8) 100%);
}

/* --- bento: a tile with a photo becomes the photo ----------------------- */
.tile--media{
  isolation:isolate;justify-content:flex-end;color:#fff;background:#141416;
  min-height:clamp(30rem,44vw,44rem);
}
.tile--media .ph{
  position:absolute;inset:0;z-index:-2;margin:0;border-radius:0;aspect-ratio:auto;
  justify-content:flex-start;padding-top:clamp(2rem,4vw,3.5rem);
}
.tile--media .tile__eyebrow{color:rgba(255,255,255,.8)}
.tile--media .tile__title{color:#fff}
.tile--media .tile__text{color:rgba(255,255,255,.86)}
.tile--media .tile__text strong{color:#fff}
.tile--split{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.tile--split .ph{--ar:3/2}

/* --- aggregate picker: the stone gets two thirds ------------------------ */
.picker{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}

/* --- applications rail: tall photo cards, copy on the photo ------------- */
.rail{grid-auto-columns:clamp(18rem,32vw,27rem)}
.card{
  position:relative;isolation:isolate;justify-content:flex-end;
  aspect-ratio:4/5;color:#fff;background:#141416;
}
.card .ph{position:absolute;inset:0;z-index:-2;aspect-ratio:auto;height:100%;
  justify-content:flex-start;padding-top:clamp(1.75rem,3vw,2.5rem)}
.card__body{padding:clamp(1.4rem,2vw,1.9rem)}
.card__eyebrow{color:rgba(255,255,255,.8)}
.card__text{color:rgba(255,255,255,.86)}

/* --- process: the list column widens, the photo leads each step --------- */
.steps{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.step{display:flex;flex-direction:column}
.step .ph{order:-1;margin:0 0 clamp(1.25rem,2vw,1.75rem);--ar:3/2}

/* --- text + photo sections: the photo takes the larger column ----------- */
.feature{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.feature--flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}

/* --- gallery: taller frames, the caption sits on the photo -------------- */
.gallery__item{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-lg)}
.gallery__item .ph{height:clamp(19rem,40vw,38rem);border-radius:0;z-index:-2}
.gallery__item--12 .ph{height:clamp(22rem,52vw,48rem)}
.gallery__item .gallery__cap{
  position:absolute;left:0;right:0;bottom:0;margin:0;
  padding:clamp(1rem,2vw,1.6rem);color:rgba(255,255,255,.82);
}
.gallery__item .gallery__cap b{color:#fff}

/* --- related pages: the same card as the Home's showcase ---------------- */
.related__card{
  position:relative;isolation:isolate;overflow:hidden;justify-content:flex-end;
  min-height:clamp(24rem,40vw,34rem);color:#fff;background:#141416;
}
.related__card .ph{position:absolute;inset:0;z-index:-2;margin:0;border-radius:0;aspect-ratio:auto;
  justify-content:flex-start;padding-top:clamp(1.75rem,3vw,2.5rem)}
.related__card .tile__eyebrow{color:rgba(255,255,255,.8)}
.related__card .tile__title{color:#fff}
.related__card .tile__text{color:rgba(255,255,255,.86)}
.related__card .tlink{color:#fff}
.related__card:hover{background:#141416}
@media (hover:hover){
  .related__card .ph > img,.card .ph > img,.gallery__item .ph > img,.tile--media .ph > img{transition:transform 1.1s var(--apple)}
  .related__card:hover .ph > img,.gallery__item:hover .ph > img{transform:scale(1.05)}
}

@media (max-width:899px){
  .picker,.steps,.feature,.feature--flip{grid-template-columns:1fr}
  .tile--split{grid-template-columns:1fr}
}
@media (max-width:599px){
  .rail{grid-auto-columns:82vw}
  .tile--media{min-height:clamp(26rem,120vw,34rem)}
  .gallery__item .ph,.gallery__item--12 .ph{height:clamp(17rem,90vw,24rem)}
}

/* ==========================================================================
   SITE FOOTER (2026-10-19)
   After 21st.dev's "footer-01" (Théo Balick): brand column on the left,
   four link columns on the right, a thin bar with copyright, a status dot
   and the social icons, and the name set huge underneath, fading out and
   cut by the bottom edge. Black, like the Home hero that opens the site.
   ========================================================================== */
.foot{
  --f-fg:#f5f5f7;--f-2:rgba(245,245,247,.62);--f-line:rgba(255,255,255,.12);
  position:relative;overflow:hidden;
  background:#050505;color:var(--f-fg);
  padding-top:clamp(3.5rem,7vw,5.5rem);
}
.foot__inner{width:min(100% - var(--gutter-l) - var(--gutter-r), 76rem);margin-inline:auto}
.foot .crumbs ol{color:var(--f-2)}
.foot .crumbs li + li::before{color:var(--f-2)}
.foot .crumbs a{color:var(--f-2)}
.foot .crumbs a:hover,.foot .crumbs [aria-current]{color:var(--f-fg)}

.foot__top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,2fr);gap:clamp(2.5rem,5vw,4rem)}
.foot__brand{display:flex;flex-direction:column;align-items:flex-start;gap:1.4rem;max-width:24rem}
.foot__logo img{display:block;width:clamp(150px,14vw,190px);height:auto}
.foot__text{color:var(--f-2);font-size:.95rem;line-height:1.6}
/* the newsletter field of the original, turned into the call: same field
   + square arrow button, and it says what the visitor gets */
.foot__call{
  display:flex;align-items:center;gap:.5rem;width:100%;
  padding:.4rem .4rem .4rem 1rem;border-radius:12px;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--f-line);
  transition:background .25s ease,box-shadow .25s ease;
}
.foot__call:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.foot__call-text{flex:1;min-width:0;font-size:.95rem;line-height:1.3;color:var(--f-2)}
.foot__call-text b{display:block;color:var(--f-fg);font-weight:var(--fw-strong)}
.foot__call-btn{
  flex:none;width:44px;height:44px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;transition:transform .3s var(--apple);
}
.foot__call:hover .foot__call-btn{transform:translateX(2px)}

.foot__nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}
.foot__col h3{font-size:.95rem;font-weight:var(--fw-strong);color:var(--f-fg)}
.foot__col ul{margin-top:1rem;display:flex;flex-direction:column;gap:.75rem}
.foot__col li,.foot__col a{font-size:.95rem;line-height:1.4;color:var(--f-2)}
.foot__col a{transition:color .2s ease}
.foot__col a:hover,.foot__col a:focus-visible{color:var(--f-fg)}

.foot__bar{
  margin-top:clamp(3rem,6vw,4.5rem);padding-block:1.75rem;border-top:1px solid var(--f-line);
  display:flex;align-items:center;justify-content:space-between;gap:1.25rem 2rem;flex-wrap:wrap;
}
.foot__meta{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem 1.75rem;color:var(--f-2);font-size:.875rem}
.foot__status{display:inline-flex;align-items:center;gap:.55rem;transition:color .2s ease}
.foot__status:hover{color:var(--f-fg)}
.foot__dot{position:relative;width:8px;height:8px;border-radius:50%;background:#34c759;flex:none}
.foot__dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#34c759;animation:footping 2s ease-out infinite}
@keyframes footping{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.6);opacity:0}}
.foot__legal{display:inline-flex;gap:1.25rem}
.foot__legal a:hover{color:var(--f-fg)}
.foot__social{display:flex;align-items:center;gap:.25rem}
.foot__social a{
  width:44px;height:44px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--f-2);transition:color .2s ease,background .2s ease;
}
.foot__social a:hover,.foot__social a:focus-visible{color:var(--f-fg);background:rgba(255,255,255,.08)}
.foot__social svg{width:20px;height:20px}

/* the oversized name: fades from a whisper of white to nothing, and the
   bottom edge cuts it, as in the original */
.foot__word{
  margin:clamp(.5rem,2vw,1.5rem) 0 -.2em;text-align:center;white-space:nowrap;
  font-family:var(--f-display);font-weight:var(--fw-mark);font-stretch:var(--fx-mark);
  text-transform:uppercase;letter-spacing:-.045em;line-height:.85;
  font-size:clamp(3rem,12.4vw,15.5rem);
  background:linear-gradient(180deg,rgba(255,255,255,.17) 0%,rgba(255,255,255,0) 82%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  pointer-events:none;user-select:none;
}

@media (max-width:1023px){
  .foot__top{grid-template-columns:1fr}
  .foot__brand{max-width:30rem}
}
@media (max-width:639px){
  .foot__nav{grid-template-columns:1fr 1fr;row-gap:2.25rem}
  .foot__bar{flex-direction:column-reverse;align-items:flex-start}
  .foot__meta{flex-direction:column;align-items:flex-start;gap:.6rem}
  .foot__col a{display:inline-flex;align-items:center;min-height:44px}
  .foot__col ul{gap:0}
  .foot__social{margin-left:-.6rem}
}
@media (prefers-reduced-motion:reduce){.foot__dot::after{animation:none;opacity:0}}

/* ==========================================================================
   SECTION GROUNDS + SLANTED SEAMS (2026-10-19)
   After kingkong.co: sections sit on different grounds, and where the
   ground changes the edge runs on a slant with a few coloured bars laid
   along it. Grounds come from the materials: white, warm concrete, a
   breath of the brand red, and anthracite. The dark ground re-points the
   colour tokens, so every component inside it turns light on its own.
   ========================================================================== */
:root{
  --bg-white:#ffffff;
  --bg-stone:#f1eee9;          /* warm light concrete */
  --bg-tint:#fbeeed;           /* the brand red, barely */
  --bg-dark:#121213;           /* anthracite */
  --bg-black:#050505;          /* footer, Home hero */
  --seam-slope:8.75vw;         /* = tan(5deg) x 100vw: the bars below are skewed 5deg */
}
.bg-white{background:var(--bg-white)}
.bg-stone{background:var(--bg-stone);--tile:#ffffff;--tile-2:#f8f6f3}
.bg-tint{background:var(--bg-tint);--tile-2:#f6dcda}
.bg-dark{
  background:var(--bg-dark);color:#f5f5f7;
  --fg:#f5f5f7;--fg-2:rgba(245,245,247,.74);--fg-3:rgba(245,245,247,.52);
  --dim:#3b3b3e;--tile:#1c1c1e;--tile-2:#26262a;--tile-line:rgba(255,255,255,.13);
  --accent-2:#f2453d;
}
.bg-dark .ph{background:linear-gradient(180deg,#1d1d20,#161618);color:#8a8a8f;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.bg-dark .ph::before{background-color:rgba(255,255,255,.08)}
.bg-dark .specs,.bg-dark .qa,.bg-dark .compare thead th{border-color:rgba(255,255,255,.3)}
.bg-dark .pill--ghost{color:var(--fg);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.bg-dark .cta__btn:focus-visible{outline-color:#fff}

/* --- the seam -----------------------------------------------------------
   A strip as tall as a 5deg slope across the screen: --from on top, --to
   below the diagonal. The bar layer is skewed by the same 5deg from its
   bottom-left corner, so its bottom edge IS the diagonal and each bar is
   placed by how far it sits above (+) or below (-) it. .seam--flip mirrors
   the whole thing so the slopes alternate down the page. */
.seam{
  position:relative;z-index:2;height:var(--seam-slope);
  background:var(--from);pointer-events:none;
}
.seam::before{
  content:"";position:absolute;inset:0 0 -1px;background:var(--to);
  clip-path:polygon(0 100%,100% 0,100% 100%);
}
.seam--flip{transform:scaleX(-1)}
.seam__bars{position:absolute;inset:0;transform:skewY(-5deg);transform-origin:0 100%}
.seam__bars i{
  position:absolute;left:var(--x);width:var(--w);
  bottom:var(--y);                 /* in vw, so it scales with the slope */
  height:clamp(7px,1.25vw,20px);background:var(--c,var(--accent));
}
.seam__bars i.o{background:none;box-shadow:inset 0 0 0 2px var(--c,var(--accent))}
.seam__bars i.t{height:clamp(4px,.55vw,9px)}
/* the hero/footer black needs no extra gap: the seam is the gap */
.seam + .foot{padding-top:clamp(2.5rem,5vw,4rem)}
/* the slant already reads as a pause: the sections either side of it
   give back part of their own padding */
.sec:has(+ .seam),.pcta:has(+ .seam){padding-bottom:clamp(3rem,6vw,5.5rem)}
.seam + .sec{padding-top:clamp(3rem,6vw,5.5rem)}

/* --- header that steps aside on the way down (pagina.js adds .is-hidden) */
.header{transition:transform .4s cubic-bezier(.28,.11,.32,1)}
.header.is-hidden{transform:translateY(-100%)}
body.menu-open .header{transform:none}
@media (prefers-reduced-motion:reduce){.header{transition:none}}

/* --- self-running rails (pagina.js): no snapping while the rail drifts,
   or every frame would be pulled back to the nearest card */
.rail.is-auto{scroll-snap-type:none}

/* ==========================================================================
   TEXT-ONLY PAGE PIECES (2026-10-21) -- pavimenti drenanti, until there are
   photos of finished drainage floors
   ========================================================================== */
/* hero: anthracite, copy low and left like the photo heroes; the pores of
   the concrete drawn as a dot field that fades in from the right */
.phero--solo{
  position:relative;isolation:isolate;text-align:left;
  min-height:min(88svh,54rem);display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:calc(var(--head-total) + clamp(5rem,12vw,9rem));padding-bottom:clamp(3rem,6vw,5rem);
}
.phero--solo::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle,rgba(255,255,255,.16) 0 2.2px,transparent 3px) 0 0/22px 22px,
    radial-gradient(circle,rgba(255,255,255,.09) 0 3.4px,transparent 4.2px) 11px 11px/22px 22px,
    radial-gradient(circle,rgba(242,69,61,.35) 0 1.6px,transparent 2.4px) 5px 16px/44px 44px;
  -webkit-mask-image:linear-gradient(100deg,transparent 35%,#000 85%);
          mask-image:linear-gradient(100deg,transparent 35%,#000 85%);
}
.phero--solo .phero__title{font-size:clamp(2.6rem,6.2vw,5.8rem);max-width:15ch}
.phero--solo .phero__lead{margin-left:0;max-width:44ch}
.phero--solo .phero__ctas{justify-content:flex-start}
.phero--solo .grad{background-image:linear-gradient(92deg,#ffffff 0%,#f1dedd 38%,#f2453d 78%,#d4202a 100%)}
body:has(.phero--solo) .header:not(.is-solid){color:#fff}
body:has(.phero--solo) .header:not(.is-solid)::before{background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}

/* bento tiles without photos */
.tile--ink{background:var(--bg-dark);color:#f5f5f7;--fg:#f5f5f7;--fg-2:rgba(245,245,247,.74);justify-content:flex-end}
.tile--ink .tile__eyebrow{color:#f2453d}
.tile--ink .tile__text strong{color:#fff}
.tile__title--lg{font-size:clamp(1.9rem,3.4vw,3.2rem);max-width:16ch}
.tile--wide{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1rem,4vw,4rem);align-items:end;min-height:0}
.tile--app{min-height:0}
.tile__num{font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.09em;color:var(--accent-2);margin-bottom:clamp(1rem,2.4vw,2rem)}
@media (max-width:639px){.tile--wide{grid-template-columns:1fr}}

/* text + text: the list gets its own card instead of a photograph */
.feature--text{align-items:start}
.feature--text.feature{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.feature__aside{padding:clamp(1.6rem,2.8vw,2.6rem);border-radius:var(--r-lg);background:var(--tile)}
.feature__aside-title{font-size:clamp(1.2rem,1.6vw,1.5rem);font-weight:var(--fw-title);letter-spacing:-.02em}
.feature__aside .feature__list{margin-top:1.25rem}
@media (max-width:899px){.feature--text.feature{grid-template-columns:1fr}}