:root { color-scheme: light; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  * { -webkit-font-smoothing: antialiased; }
  body { background: #F5F3EF; font-family: "Hanken Grotesk", sans-serif; color: #15171C; overflow-x: hidden; }
  ::selection { background: #E4002B; color: #fff; }

  /* mobile: niente flash grigio al tap, tap reattivo (no 300ms delay) */
  a, button, [role="button"], [data-view], label, summary, input[type="submit"] {
    -webkit-tap-highlight-color: rgba(228,0,43,.12);
    touch-action: manipulation;
  }
  /* immagini/iframe non sforano mai la viewport su mobile */
  img, svg, iframe, video { max-width: 100%; }
  /* iPhone/iPad: Safari ingrandisce la pagina quando si tocca un campo con testo sotto i 16px
     (e poi resta ingrandita). Solo su iOS (-webkit-touch-callout) i campi passano a 16px. */
  @supports (-webkit-touch-callout: none) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea { font-size: 16px !important; }
  }

  .kicker { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
  .mono { font-family: "JetBrains Mono", monospace; }
  .display { font-family: "Bricolage Grotesque", sans-serif; letter-spacing: -.02em; }

  /* faint blueprint grid */
  .grid-bg {
    background-image:
      linear-gradient(to right, rgba(21,23,28,.045) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(21,23,28,.045) 1px, transparent 1px);
    background-size: 56px 56px;
  }
  .glass { background: rgba(255,255,255,.72); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); }

  /* material swatches (CSS, no external images) */
  .mat { position: relative; overflow: hidden; }
  .mat::after { content:""; position:absolute; inset:0; background:
     radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,.5), transparent 50%),
     repeating-linear-gradient(115deg, rgba(0,0,0,.04) 0 2px, transparent 2px 9px); }
  .mat-grey  { background: linear-gradient(150deg,#cdc9c2,#9d9990 60%,#86837b); }
  .mat-white { background: linear-gradient(150deg,#fbfaf8,#e8e5df 60%,#d9d6cf); }
  .mat-ochre { background: linear-gradient(150deg,#e4c79a,#cf9f60 60%,#b9863f); }
  .mat-red   { background: linear-gradient(150deg,#e98a8a,#d24a48 55%,#a82e2c); }
  .mat-bio   { background: linear-gradient(150deg,#bcd9c6,#7bae90 60%,#4f8a6b); }
  .mat-anthr { background: linear-gradient(150deg,#3a3d45,#23252b 60%,#16181d); }

  /* card prodotto (elenco categoria, preferiti): area foto 4:3 a ogni breakpoint
     (la stessa proporzione è in CARD_RATIO, script.js). La foto è posizionata da
     script.js sul riquadro del prodotto; finché non è misurata resta nascosta, poi
     compare con una dissolvenza. La maschera sfuma ai lati l'ombra dei sacchi. */
  .pc-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
  .pc-stage { position: absolute; inset: 0; transition: transform .5s cubic-bezier(.2,.7,.2,1);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
  .pc-stage img { position: absolute; left: 6%; top: 6%; width: 88%; height: 88%; max-width: none;
    object-fit: contain; opacity: 0; transition: opacity .3s ease; }
  .pc-stage img.is-ready { opacity: 1; }
  @media (hover: hover) { .group:hover .pc-stage { transform: scale(1.04); } }
  @media (prefers-reduced-motion: reduce) { .pc-stage, .pc-stage img { transition: none; } }

  /* home, sezione catalogo: foto della categoria come sfondo della card, scurita
     verso il basso così il testo bianco resta leggibile su qualsiasi foto */
  .cat-tile-img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
  .cat-tile-shade { background: linear-gradient(180deg, rgba(21,23,28,.22) 0%, rgba(21,23,28,.5) 45%, rgba(21,23,28,.88) 100%); }
  .cat-tile h3, .cat-tile p { text-shadow: 0 1px 2px rgba(21,23,28,.45); }
  @media (hover: hover) { .cat-tile:hover .cat-tile-img { transform: scale(1.06); } }
  @media (prefers-reduced-motion: reduce) { .cat-tile-img { transition: none; } }

  /* reveal on scroll */
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
  .reveal.in { opacity: 1; transform: none; }

  /* staggered hero load */
  @keyframes rise { from { opacity:0; transform: translateY(26px);} to {opacity:1; transform:none;} }
  .rise { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }

  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity:1 !important; transform:none !important; transition:none; }
    .rise { animation:none; }
  }

  /* home: ogni sezione occupa una schermata intera sotto l'header sticky (68px + 1px di bordo);
     la hero sottrae anche la top bar (36px). svh = viewport "piccola" su mobile: l'altezza
     non salta quando la barra del browser compare/scompare. Contenuto centrato in verticale. */
  .home-screen { display: flex; flex-direction: column; justify-content: center;
    min-height: calc(100vh - 69px); min-height: calc(100svh - 69px); scroll-margin-top: 69px; }
  .home-hero { min-height: calc(100vh - 105px); min-height: calc(100svh - 105px); }

  /* hero cemento: la texture SVG (#mxConcrete) va su un layer proprio, così viene
     rasterizzata una volta sola e non ridisegnata dalle animazioni del testo */
  .concrete { transform: translateZ(0); }
  /* luce radente dall'alto a sinistra: schiarisce il cemento dietro al testo */
  .concrete-light { background:
    radial-gradient(70% 85% at 22% 42%, rgba(245,243,239,.62), rgba(245,243,239,.25) 55%, rgba(245,243,239,0) 80%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(21,23,28,.07)); }
  @media (max-width: 1023px) {
    .concrete-light { background:
      radial-gradient(95% 70% at 40% 45%, rgba(245,243,239,.6), rgba(245,243,239,.2) 60%, rgba(245,243,239,0) 85%),
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(21,23,28,.07)); }
  }

  /* foto cantieri in evidenza (home): entrata via .reveal + zoom "ken burns" leggero */
  @keyframes featKen { 0% { transform: scale(1); } 100% { transform: scale(1.07); } }
  .feat-shot img { animation: featKen 16s ease-in-out infinite alternate; will-change: transform; }
  .feat-shot:nth-of-type(even) img { animation-duration: 19s; animation-delay: -4s; }
  @media (prefers-reduced-motion: reduce) { .feat-shot img { animation: none !important; } }

  .view { display: none; }
  .view.active { display: block; animation: fade .45s ease both; }
  @keyframes fade { from{opacity:0; transform: translateY(8px);} to{opacity:1; transform:none;} }

  .lift { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; }

  .underline-grow { position: relative; }
  .underline-grow::after { content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:0; background:#E4002B; transition:width .3s; }

  /* effetti hover solo su dispositivi con puntatore reale: su touch non "si incollano" */
  @media (hover: hover) {
    .lift:hover { transform: translateY(-4px); }
    .underline-grow:hover::after { width:100%; }
    .sr-item:hover { background:#ECE8E1; }
  }

  /* faq accordion (cemento sfuso) */
  .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.2,.7,.2,1); }
  .faq-item.open .faq-a { grid-template-rows: 1fr; }
  .faq-a-inner { overflow: hidden; }
  .faq-ico { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
  .faq-item.open .faq-ico { transform: rotate(45deg); }

  /* campo trappola anti-spam dei moduli contatti/candidatura: fuori dalla vista e dal layout */
  .hp-field { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; }

  @media (prefers-reduced-motion: reduce) {
    .faq-a, .faq-ico { transition: none; }
  }

  /* admin form fields */
  .adm-in { width:100%; height:2.75rem; padding:0 .85rem; border:1px solid #E4E0D8; border-radius:.75rem; background:rgba(245,243,239,.45); font-size:14px; color:#15171C; outline:none; transition:border-color .2s, background .2s; }
  .adm-in:focus { border-color:#E4002B; background:#fff; }
  textarea.adm-in { height:auto; min-height:5rem; padding:.7rem .85rem; resize:vertical; }
  .adm-label { font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#5C5D64; display:block; margin-bottom:.5rem; }

  /* autocomplete indirizzi (tool trasferte) */
  .tr-sug { position:absolute; left:0; right:0; top:100%; z-index:20; margin-top:4px; max-height:16rem; overflow:auto; background:#fff; border:1px solid #E4E0D8; border-radius:.75rem; box-shadow:0 8px 24px -12px rgba(21,23,28,.18); }
  .tr-sug button { display:block; width:100%; text-align:left; padding:.55rem .8rem; font-size:13px; line-height:1.3; color:#33353D; border-bottom:1px solid #EEEBE5; }
  .tr-sug button:last-child { border-bottom:0; }
  .tr-sug button:hover, .tr-sug button.active { background:#ECE8E1; color:#15171C; }

  /* stampa: isola il riepilogo trasferta (solo quando body.tr-printing è attivo,
     così la stampa delle altre pagine del sito resta invariata) */
  @media print {
    body.tr-printing * { visibility:hidden; }
    body.tr-printing #tr-print-area, body.tr-printing #tr-print-area * { visibility:visible; }
    body.tr-printing #tr-print-area { position:absolute; inset:0; padding:2rem; }
  }

  /* mobile nav drawer */
  .drawer-panel { transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
  #mobileNav.open .drawer-panel { transform: none; }
  #mobileNav.open [data-mclose] { opacity: 1; }
  .mnav-acc-body { display:grid; grid-template-rows:0fr; transition: grid-template-rows .3s cubic-bezier(.2,.7,.2,1); }
  .mnav-acc.open .mnav-acc-body { grid-template-rows:1fr; }
  .mnav-acc-inner { overflow:hidden; }
  .mnav-acc.open .mnav-chev { transform: rotate(180deg); }

  /* scroll-down cue (catalogo prodotti) */
  @keyframes cueBob { 0%, 100% { transform: translateY(0); opacity:.85; } 50% { transform: translateY(7px); opacity:1; } }
  .scroll-cue-arrow { animation: cueBob 1.5s cubic-bezier(.45,0,.55,1) infinite; }
  @media (prefers-reduced-motion: reduce) { .scroll-cue-arrow { animation: none; } }

  /* mega menu open animation */
  #megaMenu { opacity:0; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease; pointer-events:none; }
  #megaMenu.open { opacity:1; transform:none; pointer-events:auto; }

  /* overlay panels (search + article reader) */
  #searchOverlay:not(.hidden), #articleOverlay:not(.hidden) { animation: fade .2s ease both; }
  #searchOverlay:not(.hidden) > div:last-child,
  #articleOverlay:not(.hidden) > div:last-child { animation: rise .35s cubic-bezier(.2,.7,.2,1) both; }
  body.ov-lock { overflow: hidden; }

  /* pannello preferiti: "pop" dal cuore flottante in basso a destra */
  .fav-panel { transform-origin: bottom right; }
  .fav-panel:not(.hidden) { animation: favPop .22s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes favPop { from { opacity:0; transform: translateY(10px) scale(.96); } to { opacity:1; transform:none; } }
  /* cuore ↔ chiudi a pannello aperto; tooltip nascosto mentre è aperto */
  #favFab .fav-ico-close { display:none; }
  #favFab[aria-expanded="true"] .fav-ico-heart, #favFab[aria-expanded="true"] .fav-tip { display:none; }
  #favFab[aria-expanded="true"] .fav-ico-close { display:block; }
  /* feedback quando si aggiunge un preferito */
  @keyframes favBump { 0%,100% { transform: scale(1); } 40% { transform: scale(1.2); } }
  .fav-bump { animation: favBump .45s cubic-bezier(.2,.7,.2,1); }
  @media (prefers-reduced-motion: reduce) { .fav-panel:not(.hidden), .fav-bump { animation: none; } }

  /* search result row */
  .sr-item { display:flex; align-items:center; gap:.75rem; padding:.7rem .8rem; border-radius:.75rem; cursor:pointer; transition:background .15s; }
  .sr-item.active { background:#ECE8E1; }
  .sr-ico { width:2.25rem; height:2.25rem; border-radius:.6rem; display:grid; place-items:center; flex-shrink:0; }

  @media (prefers-reduced-motion: reduce) {
    .drawer-panel, .mnav-acc-body, #megaMenu { transition: none; }
  }

  /* mobile: link di footer più comodi da toccare (area tap più alta, design invariato su desktop) */
  @media (max-width: 1023px) {
    footer a[data-view], footer a[href^="tel"], footer a[href^="mailto"], footer li > a {
      display: inline-block; padding-top: .3rem; padding-bottom: .3rem;
    }
  }