/* ==========================================================================
   ADRIAN PAV -- CONCEPT 01 "MASSA"
   Design language transposed from hobro.digital:
   black canvas, oversized deconstructed typography, mono micro-labels,
   off-grid section headings, offset project grid, GSAP scroll craft.
   Reference easing: cubic-bezier(.785,.135,.15,.86)
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root{
  /* surfaces -- locked duotone, single accent */
  --ink:        #050505;
  --ink-2:      #101010;
  --paper:      #ffffff;
  --paper-2:    #f2f1ee;
  --muted:      #8d8a86;
  --muted-dark: #6a6764;
  --line:       rgba(255,255,255,.14);
  --line-dark:  rgba(5,5,5,.14);
  --accent:     #d4202a;          /* Adrian Pav brand red: vivid crimson, 5.2:1 on white */

  /* type */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* ONE type system for the whole site, the homepage hero's. Five cuts,
     nothing else:
       mark    Archivo 800, width 112%, UPPERCASE  -> the ADRIAN PAV wordmark,
               giant display words, big numbers
       title   Archivo 500 (+ italic 400 for the second voice, as in
               "Solidita che / prende forma.")      -> every h1/h2/h3
       lead    Archivo 400 at --fs-lead             -> subtitles
       text    Archivo 400 (strong = 500)           -> body copy
       label   IBM Plex Mono 400, UPPERCASE         -> kickers, eyebrows,
               nav, buttons, meta                                         */
  --fw-mark:   800;
  --fx-mark:   112%;
  --fw-title:  500;
  --fw-strong: 500;

  --fs-mega:    16.2vw;
  --fs-display: clamp(2.9rem, 9.4vw, 11.5rem);
  --fs-statement: clamp(1.85rem, 5.1vw, 5.25rem);
  --fs-h3:      clamp(1.35rem, 2.5vw, 2.6rem);
  --fs-lead:    clamp(1.02rem, 1.45vw, 1.4rem);
  --fs-body:    clamp(.95rem, 1.02vw, 1.075rem);
  --fs-mono:    clamp(.875rem, .9vw, .9375rem);   /* 14px floor: no text on the site is smaller */

  /* rhythm */
  --gutter:  clamp(1.1rem, 2.6vw, 2.75rem);
  --section: clamp(6rem, 14vw, 16rem);
  --head-h:  clamp(60px, 5.2vw, 77px);

  /* The document declares viewport-fit=cover, so on a notched phone the
     layout box runs edge to edge: under the status bar, under the home
     indicator and, in landscape, under the sensor housing. Everything that
     touches an edge of the viewport reads these instead of the raw gutter.
     They resolve to 0px on every device that has no inset, so nothing on a
     rectangular screen moves. */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --gutter-l: max(var(--gutter), var(--safe-left));
  --gutter-r: max(var(--gutter), var(--safe-right));
  /* the bar plus whatever the status bar is occupying above it: this, not
     --head-h, is what content has to clear */
  --head-total: calc(var(--head-h) + var(--safe-top));

  /* motion */
  --ease:      cubic-bezier(.785,.135,.15,.86);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --t-micro:   .3s;
  --t-mid:     .6s;
  --t-reveal:  1.15s;

  --radius: 0px;            /* shape lock: this concept is all-sharp */
}

/* ---------- 2. RESET ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul,ol{list-style:none;padding:0}
img,video{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
b,strong{font-weight:var(--fw-strong)}
/* iOS and Android paint a translucent block over the whole tapped element.
   On full-bleed card links that is a grey flash across a photograph, which
   reads as a rendering fault rather than as feedback; :active states below
   do the acknowledging instead. */
a,button{-webkit-tap-highlight-color:transparent}
::selection{background:var(--accent);color:#fff}

/* The gutter is reserved at all times so releasing the preloader's scroll
   lock cannot change the page width -- a width change there would re-fit the
   measured wordmark and jolt the layout right as the hero comes in. */
html{scroll-behavior:auto}
/* A menu-open document has no scroll container at all. overscroll-behavior
   stops scroll chaining/rubber-banding at the root; the fixed body below is
   the iOS fallback, where overflow:hidden alone still accepts touch panning. */
html.menu-locked{
  overflow:hidden;overscroll-behavior:none;
  background:#fafafa;
}
/* Only a classic scrollbar takes layout space, so only a device that has one
   needs the gutter reserved. Asking for it on a touch screen just narrows the
   page by nothing anyone can see. */
@media (pointer:fine){html{scrollbar-gutter:stable}}
body{
  background:#fafafa;
  color:#000000;
  font-family:var(--f-display);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.6;
  letter-spacing:-.005em;
  font-stretch:100%;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-locked{
  position:fixed;left:0;width:100%;height:100%;
  overflow:hidden;overscroll-behavior:none;
}
/* Keep the page in place without turning body into a containing block. The
   menu can consequently remain fixed to the viewport at every scroll depth. */
body.menu-scroll-locked{
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:none;
}
/* Do not move either layer to the document's current scroll coordinate.
   Keeping them viewport-owned prevents the open sheet from being composited
   against whichever light or dark section happens to sit underneath it. */
body.menu-open{background-color:#fafafa}
body.menu-open .menu{
  position:fixed;
  inset:0;
}
body.menu-open .header{
  position:fixed;
  top:0;
}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Every in-page anchor lands under a bar that is always on screen, so each
   target reserves the bar's height for itself. Chi siamo is the exception:
   it is pulled up over the Metodo panel by --about-overlap and sets its own. */
#servizi,#lavori,#metodo,#faq,#contatti{scroll-margin-top:var(--head-total)}

/* ---------- 3. PRIMITIVES ------------------------------------------------ */
.shell{padding-inline:var(--gutter-l) var(--gutter-r)}

.mono{
  font-family:var(--f-mono);
  font-size:var(--fs-mono);
  font-weight:400;
  line-height:1.35;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.mono--muted{color:#797672}
.statement{
  font-size:var(--fs-statement);
  font-weight:500;
  font-weight:500;
  line-height:.94;
  letter-spacing:-.028em;
}
.statement em{
  font-style:italic;
  font-weight:400;
  letter-spacing:-.02em;
  padding-bottom:.06em;   /* italic descender clearance */
  display:inline-block;
}
.lead{
  font-size:var(--fs-lead);
  line-height:1.5;
  letter-spacing:-.012em;
  color:#000000;
  max-width:46ch;
}

/* mask-reveal primitives driven by GSAP; safe defaults if JS never runs */
.mask{overflow:hidden;display:block}
.mask > *{display:block}

/* ---------- 4. PRELOADER (Hobro signature: left-anchored growing bar) ----- */
.loader{
  position:fixed;inset:0;z-index:1000;background:var(--ink);
  display:flex;align-items:center;
}
.loader__bar{
  height:clamp(22px,2.2vw,30px);
  background:var(--paper);color:var(--ink);
  display:flex;align-items:center;
  padding-inline:.7rem;
  width:0;
  will-change:width;
}
.loader__bar .mono{white-space:nowrap;color:var(--ink)}
.loader__count{margin-left:auto;padding-left:2ch}
.loader.is-done{pointer-events:none}

/* ---------- 5. HEADER ---------------------------------------------------- */
.header{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  height:var(--head-total);
  padding-top:var(--safe-top);
  display:flex;align-items:center;
  padding-inline:var(--gutter-l) var(--gutter-r);
  mix-blend-mode:difference;   /* stays legible over black and white panels */
}
/* Difference blending makes a fixed bar re-composite everything underneath it
   on every frame of every scroll, which is the single most expensive thing
   this page asks of a phone -- and it is asked continuously, not once. Touch
   devices get a scrim instead: one paint, the same legibility over both the
   ink sections and the paper one, and no per-frame cost at all. */
@media (hover:none),(pointer:coarse){
  .header{mix-blend-mode:normal;color:#000000}
  .header::before{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(180deg,rgba(250,250,250,.92) 0%,rgba(250,250,250,.72) 55%,rgba(250,250,250,0) 100%);
  }
}
/* Once the page has moved (main.js / pagina.js add .is-solid) the bar gets
   its own ground, on every page and every device: the header is always on
   screen, and the copy scrolling under it must never collide with it. */
.header.is-solid{mix-blend-mode:normal;color:#000000}
.header.is-solid::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:rgba(250,250,250,.86);
  -webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid rgba(0,0,0,.14);
}
.header__inner{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.header__mark{
  font-stretch:var(--fx-mark);font-weight:var(--fw-mark);
  text-transform:uppercase;letter-spacing:-.03em;
  font-size:clamp(.95rem,1.25vw,1.2rem);line-height:1;
  min-height:44px;display:inline-flex;align-items:center;
}
.header__nav{display:flex;align-items:center;gap:clamp(1rem,1.9vw,2.4rem);letter-spacing:.05em}
.header__link{position:relative;padding-block:.4rem}
.header__link::after{
  content:"";position:absolute;left:0;bottom:.15rem;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform var(--t-micro) var(--ease);
}
.header__link:hover::after,.header__link:focus-visible::after{transform:scaleX(1);transform-origin:left}
/* the page you are on keeps its underline */
.header__link[aria-current="page"]::after{transform:scaleX(1)}
.header__burger{display:none;width:44px;height:44px;position:relative}
.header__burger span{
  position:absolute;left:50%;width:26px;height:1.5px;background:currentColor;
  transform:translateX(-50%);transition:transform var(--t-micro) var(--ease);
}
.header__burger span:first-child{top:15px}
.header__burger span:last-child{bottom:15px}
body.menu-open .header__burger span:first-child{transform:translate(-50%,6px) rotate(45deg)}
body.menu-open .header__burger span:last-child{transform:translate(-50%,-6px) rotate(-45deg)}

/* full-screen mobile menu */
.menu{
  position:fixed;inset:0;width:100%;height:100%;height:100dvh;min-height:100svh;
  z-index:99;background-color:#fafafa;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:
    calc(var(--head-total) + max(2rem,8vh))
    max(var(--gutter),env(safe-area-inset-right))
    max(var(--gutter),env(safe-area-inset-bottom))
    max(var(--gutter),env(safe-area-inset-left));
  /* The backdrop must never be animated. Both clip-path and translate3d
     promote this full-viewport sheet above the page's parallax/3D layers;
     real mobile browsers may then rasterise it in separate tiles, producing
     the horizontal bands of slightly different black visible in the user's
     screenshot. Mount one untransformed, opaque paint instead and animate
     only the content inside it. */
  transform:none;
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:none;
  visibility:hidden;
}
.menu__list{display:flex;flex-direction:column;gap:.4rem}
.menu__item{overflow:hidden}
/* "Pavimenti architettonici" is the longest entry: the size is set so its
   second word still fits a 360px phone on one line. */
.menu__link{
  display:block;font-stretch:var(--fx-mark);font-weight:var(--fw-mark);
  text-transform:uppercase;line-height:.95;letter-spacing:-.03em;
  font-size:clamp(1.5rem,7.4vw,4rem);
  padding-block:.08em;
}
.menu__link[aria-current="page"]{color:var(--accent)}
.menu__meta{margin-top:auto;padding-top:3rem;display:grid;gap:.15rem;color:#797672}
/* The phone number and the address are the point of the menu on a phone, so
   they are targets, not captions: full-width rows at thumb height. */
.menu__meta a,.menu__meta span{display:flex;align-items:center;min-height:44px}
.menu__meta a{color:#000000}

/* ---------- 6. HERO ------------------------------------------------------ */
.hero{
  position:relative;min-height:100svh;
  display:grid;grid-template-rows:1fr auto;
  padding-top:var(--head-total);
  overflow:hidden;
}
.hero__media{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;
  /* The photograph dissolves into the page instead of being cut off at the
     hero's bottom edge: the seam with the next (equally black) section then
     reads as one continuous surface while scrolling. Masking the container,
     not the <img>, keeps the fade anchored while the image parallaxes. */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 46%,rgba(0,0,0,.72) 68%,rgba(0,0,0,.28) 85%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 46%,rgba(0,0,0,.72) 68%,rgba(0,0,0,.28) 85%,rgba(0,0,0,0) 100%);
}
.hero__media img{
  width:100%;height:100%;object-fit:cover;
  opacity:.42;
  filter:grayscale(.35) contrast(1.06);
  transform:scale(1.14);
  will-change:transform;
}
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg, rgba(5,5,5,.46) 0%, rgba(5,5,5,.06) 24%, rgba(5,5,5,.12) 52%, rgba(5,5,5,.46) 76%, rgba(5,5,5,.84) 92%, var(--ink) 100%),
    radial-gradient(120% 78% at 50% 46%, rgba(5,5,5,0) 0%, rgba(5,5,5,.3) 80%, var(--ink) 100%);
}
/* Bleed band: guarantees the last slice of the hero is pure ink, so the
   handover to .services has no visible edge at any viewport height. */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;z-index:1;
  height:clamp(8rem,22vh,18rem);pointer-events:none;
  background:linear-gradient(180deg, rgba(5,5,5,0) 0%, rgba(5,5,5,.55) 45%, var(--ink) 100%);
}
.hero__body{
  position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding-block:clamp(2rem,5vw,4rem);
  width:100%;min-width:0;
}
/* The wordmark is measured and scaled to bleed edge to edge at every
   viewport (see fitWordmark in main.js). --fs-mega is only the pre-fit
   value so the first paint is never wildly wrong. */
.hero__wordmark{
  font-size:var(--fs-mega);
  line-height:.78;
  letter-spacing:-.038em;
  font-stretch:var(--fx-mark);font-weight:var(--fw-mark);
  text-transform:uppercase;
  width:100%;max-width:100%;min-width:0;
  display:flex;flex-wrap:nowrap;justify-content:center;align-items:baseline;
  gap:.2em;
}
.hero__wordmark .word{display:block;flex:0 0 auto;overflow:hidden;padding-bottom:.02em}
.hero__wordmark .word > span{display:inline-block;white-space:nowrap;will-change:transform}
.hero__meta{
  margin-top:clamp(1.1rem,2.4vw,2.1rem);
  text-align:center;display:grid;gap:.25rem;
  color:var(--paper);
}
.hero__foot{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.3fr 1fr auto;align-items:end;
  gap:clamp(2rem,4vw,4rem) clamp(1.5rem,3vw,3rem);
  padding:clamp(1.5rem,3vw,3rem) var(--gutter-r)
          calc(var(--gutter) + var(--safe-bottom)) var(--gutter-l);
}
.hero__headline{font-size:clamp(2rem,4.2vw,5.25rem);line-height:1.02}
.hero__headline em{white-space:nowrap}
.hero__location{margin-top:clamp(1rem,1.8vw,2rem)}
.hero__actions{display:flex;justify-content:flex-end;align-self:center}
.hero__baseline{
  grid-column:1/-1;display:flex;justify-content:space-between;gap:1rem;
  padding-top:1.1rem;border-top:1px solid var(--line);
}
.hero__scroll-arrow{margin-left:1.5rem}
.hero__actions .btn:hover .btn__arrow{transform:translateY(4px)}

/* buttons -- shape lock: sharp, 1px stroke, fill sweeps from the cursor side */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.7rem;
  padding:.85rem 1.5rem;
  border:1px solid currentColor;
  font-family:var(--f-mono);font-size:var(--fs-mono);
  letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  overflow:hidden;isolation:isolate;
  transition:color var(--t-micro) var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:currentColor;
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-mid) var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
.btn:hover,.btn:focus-visible{color:#000000}
.btn:hover .btn__label,.btn:focus-visible .btn__label{color:#fafafa}
.btn__label{position:relative;z-index:1;transition:color var(--t-mid) var(--ease)}
.btn__arrow{position:relative;z-index:1;transition:transform var(--t-mid) var(--ease),color var(--t-mid) var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}
.btn:hover .btn__arrow{color:#fafafa}
.btn:active{transform:translateY(1px)}

/* ---------- 10. LAVORAZIONI -- expanding image accordion ---------------- */

/* ---------- 10b. NO CURSOR -- the accordion becomes a stack --------------
   Width is not what decides this. A tablet in landscape is 1024px wide and
   still has nothing to hover with, so an accordion that only opens under a
   pointer leaves two of the three services collapsed into 150px slivers that
   nothing the visitor can do will ever open. The query is therefore on the
   input device, not on the viewport: every coarse pointer gets the stack, at
   any size, and the hover accordion is opt-in for the devices that can drive
   it. The narrow and reduced-motion cases join the same block because they
   want exactly the same layout.

   The card height comes from an aspect ratio rather than from svh, which is
   what makes this a recomposition instead of a squeeze: on a phone the card
   is an upright poster, on a tablet it is a wide banner, and neither is the
   other one scaled down. */
/* wider than a phone but still no cursor: the poster turns into a banner */

/* a phone on its side: the height, not the width, limits the card */

/* ---------- 12d. METODO, NARROW -- photograph first, steps below -------- */

/* Source order is text first; the grid puts the photograph before it. The
   portrait spans both rows, so the second frame lands in the void the copy
   leaves under itself rather than starting a third band below everything. */

/* Square, because the portrait is square: the frame is cut to the photograph
   rather than the photograph to the frame. */

/* --- tablet ------------------------------------------------------------- */

/* --- phone: recomposed, not shrunk -------------------------------------- */

/* --- no motion: every scrubbed or revealed part rests at its end state --- */

/* Below 900 the two columns give the copy about 280px, which is a measure
   for a caption and not for a paragraph. One column instead, in the reading
   order the source is already in. */

/* ---------- 12c. FAQ -- ruled rows ---------------------------------------- */

:root{--faq-num:clamp(2.4rem,5vw,5.5rem)}

/* ---------- 14. FOOTER: see "SITE FOOTER" in pagina.css ------------------ */

/* ---------- 15. REVEALS (defaults; GSAP overrides when it loads) --------- */
.js-on .r-up{opacity:0;transform:translateY(28px)}

/* ---------- 16. RESPONSIVE ----------------------------------------------- */
@media (min-width:1024px){
  .header__burger{display:none}
}

/* --- tablet ------------------------------------------------------------- */
@media (max-width:1023px){
  /* Five page links in mono need about 800px: below 1024 the bar keeps the
     mark and the burger, and the pages are reached from the menu. */
  .header__nav{display:none}
  .header__burger{display:block}
  body.menu-open .header{mix-blend-mode:normal;color:#000000}
  /* The header sits one layer above the menu. Replace its normal translucent
     mobile scrim while the drawer is open, otherwise that gradient is the
     only non-uniform black surface left behind the mark and close button. */
  body.menu-open .header::before{background:#fafafa}
  .hero__foot{grid-template-columns:1.2fr 1fr}
  .hero__actions{grid-column:1/-1;justify-content:flex-start}
}

/* --- mobile: recomposed, not shrunk --------------------------------------- */
@media (max-width:767px){
  :root{--fs-mega:19vw}
  .hero__wordmark{flex-direction:column;align-items:center;gap:0}

  /* Bottom-weight the hero on a phone: centring leaves a dead band
     between the meta block and the action bar. */
  .hero{padding-top:calc(var(--head-total) + .5rem)}
  .hero__body{justify-content:flex-end;padding-bottom:clamp(1.5rem,7vw,3rem)}
  .hero__wordmark{line-height:.82;letter-spacing:-.03em}
  .hero__media img{opacity:.44}
  /* the phone hero is bottom-weighted, so the dissolve starts lower to keep
     texture behind the wordmark while still fading out at the seam */
  .hero__media{
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,.6) 80%,rgba(0,0,0,0) 100%);
            mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,.6) 80%,rgba(0,0,0,0) 100%);
  }
  .hero::after{height:clamp(6rem,16vh,11rem)}
  .hero__foot{grid-template-columns:1fr;align-items:start;gap:1.5rem}
  .hero__headline{font-size:clamp(2rem,9vw,3.5rem)}
  .hero__location{margin-top:.8rem}
  .hero__actions{width:100%}
  .hero__baseline{flex-direction:column;gap:.65rem}
  .btn{justify-content:space-between;width:100%}

  
  

  
  :root{--faq-num:2rem}

  
}

/* --- a short phone in portrait: the hero must fit the screen it fills ----
   The section asks for 100svh and then puts about 700px of content into it,
   which is taller than every phone below an iPhone 14 -- and svh is measured
   with the browser chrome SHOWING, so the real shortfall on an SE or a 640px
   Android is larger than the raw numbers suggest. The result was a hero whose
   one call to action sat below the fold of a viewport that has no fold to
   spare, with the baseline strip off the bottom of the page entirely.

   Same reasoning as the landscape block below, different shape: the type
   comes down, the spacing closes up, and the baseline strip goes -- the
   "scorri per esplorare" cue is the one thing a screen this short does not
   need told, because the content is already touching the edge. */
@media (orientation:portrait) and (max-height:700px){
  .hero__body{padding-block:clamp(.85rem,2.5vh,1.75rem)}
  .hero__meta{margin-top:.75rem;gap:.1rem}
  .hero__foot{gap:1rem;padding-top:1rem}
  .hero__headline{font-size:clamp(1.7rem,7.6vw,2.4rem)}
  .hero__intro .lead{font-size:1rem;line-height:1.4}
  .hero__location{margin-top:.6rem}
  .hero__baseline{display:none}
}

/* --- a phone on its side: short and wide is a third shape ----------------
   Not a small desktop and not a tall phone. At 390px of height the hero's
   own wordmark is taller than the screen, so the headline and the one call
   to action on the page are both below the fold of a viewport that has no
   fold to spare. The type comes down, the baseline strip goes, and the
   whole section stops insisting on a full viewport it cannot fill well. */
@media (orientation:landscape) and (max-height:520px){
  :root{--fs-mega:9.6vw;--section:clamp(3.5rem,8vw,7rem)}
  .hero{min-height:0;padding-top:calc(var(--head-total) + .4rem)}
  .hero__body{padding-bottom:clamp(.75rem,2vh,1.5rem)}
  .hero__meta{gap:.15rem}
  .hero__foot{gap:1rem;padding-bottom:clamp(1rem,3vh,2rem)}
  .hero__headline{font-size:clamp(1.6rem,4.2vw,2.6rem)}
  .hero__baseline{display:none}
  /* headline, lead and the button share one row instead of stacking: on a
     screen this short the second row was what pushed the only call to action
     off the bottom of it */
  .hero__foot{grid-template-columns:1.1fr 1fr auto;align-items:end}
  .hero__actions{grid-column:auto;justify-content:flex-end;width:auto}
  .hero__location{display:none}
  
  .menu{padding-top:calc(var(--head-total) + 1rem)}
  .menu__link{font-size:clamp(1.6rem,6.5vh,2.4rem)}
  .menu__meta{padding-top:1.25rem}
}

/* ---------- 16b. NO CURSOR -- states that were only reachable on hover ----
   Every hover rule on this page is an enhancement except these, which were
   carrying real information: the photographs sit clipped or desaturated
   until the cursor arrives, and on a touch screen the cursor never does.

   POSITION MATTERS. These rules override declarations made in sections 11
   through 15 at the same specificity, so they only win by coming after
   them -- a media query adds no weight of its own. Sat where they used to
   (just after the Lavorazioni strip) the whole block was dead: `.r-clip`
   stayed clipped to zero height on every phone and tablet, which left all
   eight Lavori photographs as empty frames, and the Chi siamo ledger and
   caption rules stayed at scaleX(0), which left the section unruled. The
   scripts that would otherwise have revealed them stand down on touch (see
   buildWorks / buildAbout), so nothing was ever going to bring them back. */
@media (hover:none),(pointer:coarse){
  /* No permanent compositing layers. A will-change that never turns off holds
     GPU memory for the whole visit; the browser promotes these on its own for
     the second or so each entrance is actually running, which is all they
     need. (The pre-reveal states themselves -- .r-clip, the ledger rules --
     are NOT reset here any more: the scripts that animate them run on touch
     now, and a reset would show each element for a frame before hiding it
     again to start. revealStatic() in main.js is the floor if they never do.) */
  .hero__wordmark .word > span,
.hero__media img {will-change:auto}
  /* The full nav is kept from 768 up because it is worth having, but a
     0.4rem padding-block is a 30px target -- fine to click, not to hit with
     a thumb. The rule is on the pointer, so a tablet gets the room and a
     mouse keeps the tighter bar. */
  .header__link{min-height:44px;display:inline-flex;align-items:center}
}

/* ---------- 17. REDUCED MOTION ------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .js-on .r-up{opacity:1;transform:none}
  .js-on .mask > *{transform:none}
  .hero__media img{transform:scale(1)}
  
}