/* ==========================================================================
   Martin-Mayeur — contatti.css
   Foglio autosufficiente: token + font + esperienza, scopato sotto
   body.sitiamo-page--contatti. Generato dal design Claude Design (index/maison/contatti.html).
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Jost:wght@300;400;500&display=swap");

/* ==========================================================================
   Martin-Mayeur — Webfonts
   Belda Didone Condensed is the Maison display face (supplied by the brand).
   EB Garamond and Jost are loaded from Google Fonts (see styles.css @import):
     - EB Garamond : archival reading serif (the "libro d'arte" voice)
     - Jost        : geometric grotesque for micro-labels, nav, UI — its
                     architectural geometry echoes the Eiffel lattice.
   ========================================================================== */

@font-face {
  font-family: "Belda Didone Condensed";
  src: url("../../fonts/BeldaDidoneCondensed-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Belda Didone Condensed";
  src: url("../../fonts/BeldaDidoneCondensed-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ==========================================================================
   Martin-Mayeur — Color
   An archival, luminous palette: antique paper, ivory, sepia and blush,
   warm ink, and a single sober antique-gold accent. A muted archival blue
   (the ink of the old monograms) appears only as a rare secondary accent.
   Never a black-and-gold "generic luxury" scheme.
   ========================================================================== */

:root {
  /* ---- Raw palette ---------------------------------------------------- */

  /* Paper & ivory — warm, luminous surfaces */
  --paper-50:  #FCFAF5;   /* lightest ivory — cards, panels */
  --paper-100: #F8F3EA;   /* page base — antique paper */
  --paper-200: #F1E9DB;   /* raised parchment */
  --paper-300: #E8DECB;   /* deeper parchment / wells */

  /* Blush — the soft rose of the archive photography backdrops */
  --blush-100: #F3E9E6;
  --blush-200: #E9D8D4;

  /* Sepia & ink — text and structure, all warm */
  --ink-900:   #26211B;   /* primary text — warm near-black */
  --ink-700:   #4A4137;   /* strong secondary text */
  --ink-500:   #6E6152;   /* sepia body / captions */
  --ink-300:   #9C8E7B;   /* muted / disabled */

  /* Antique gold — sober, never bright. Hairlines, marks, rare fills. */
  --gold-700:  #8A7245;   /* deep gold — text on light */
  --gold-500:  #AD9260;   /* the accent */
  --gold-300:  #CBB588;   /* soft gold — tints, hovers */
  --gold-100:  #EADFC9;   /* gold wash */

  /* Archival blue — the monogram ink. Very rare secondary accent. */
  --blue-700:  #3A4A63;
  --blue-500:  #566A88;

  /* Lines — warm hairlines */
  --line-strong: #C7B99F;
  --line:        #DBD0BC;
  --line-soft:   #EBE3D3;

  /* Pure references */
  --white: #FFFFFF;
  --black: #1A1611;

  /* ---- Semantic aliases ---------------------------------------------- */

  /* Surfaces */
  --surface-page:    var(--paper-100);
  --surface-card:    var(--paper-50);
  --surface-raised:  var(--paper-200);
  --surface-well:    var(--paper-300);
  --surface-blush:   var(--blush-100);
  --surface-ink:     var(--ink-900);   /* dark sections / footer */
  --surface-invert-text: var(--paper-100);

  /* Text */
  --text-strong:   var(--ink-900);
  --text-body:     var(--ink-700);
  --text-muted:    var(--ink-500);
  --text-faint:    var(--ink-300);
  --text-gold:     var(--gold-700);
  --text-on-dark:  var(--paper-100);

  /* Accents */
  --accent:        var(--gold-500);
  --accent-strong: var(--gold-700);
  --accent-soft:   var(--gold-300);
  --accent-wash:   var(--gold-100);
  --accent-blue:   var(--blue-700);

  /* Borders */
  --border-strong: var(--line-strong);
  --border:        var(--line);
  --border-soft:   var(--line-soft);

  /* Focus */
  --focus-ring: var(--gold-500);
}

/* ==========================================================================
   Martin-Mayeur — Typography
   Three voices:
     - Display : Belda Didone Condensed — high-contrast condensed didone.
                 Titles, product names, editorial numerals. Often ALL-CAPS
                 with generous letterspacing, as in the Maison wordmark.
     - Serif   : EB Garamond — the reading voice. Body copy, descriptions,
                 the archival "art book" tone.
     - Sans    : Jost — geometric grotesque. Micro-labels, eyebrows, nav,
                 buttons, specs. Always uppercase + letterspaced, small.
   ========================================================================== */

:root {
  /* Families */
  --font-display: "Belda Didone Condensed", "Playfair Display", Didot, "Bodoni MT", serif;
  --font-serif:   "EB Garamond", "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --font-sans:    "Jost", "Futura", "Century Gothic", system-ui, sans-serif;

  /* Fluid display sizes — editorial scale */
  --text-display-xl: clamp(3.5rem, 8vw, 7rem);     /* hero wordmark */
  --text-display-lg: clamp(2.75rem, 5vw, 4.5rem);
  --text-display-md: clamp(2rem, 3.5vw, 3rem);
  --text-display-sm: clamp(1.5rem, 2.5vw, 2rem);

  /* Serif reading sizes */
  --text-lead:  1.375rem;   /* 22px — intro / lead paragraphs */
  --text-body:  1.0625rem;  /* 17px — body */
  --text-small: 0.9375rem;  /* 15px — captions, fine print */

  /* Sans label sizes (uppercase, letterspaced) */
  --text-label:    0.8125rem;  /* 13px */
  --text-label-sm: 0.6875rem;  /* 11px — eyebrows, tags */

  /* Weights */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;

  /* Line heights */
  --leading-tight:  1.05;   /* display */
  --leading-snug:   1.25;
  --leading-normal: 1.6;    /* body serif */
  --leading-relaxed: 1.75;

  /* Letter-spacing */
  --tracking-display: 0.02em;   /* condensed didone caps */
  --tracking-wordmark: 0.14em;  /* the Maison wordmark */
  --tracking-label:   0.22em;   /* sans eyebrows/labels */
  --tracking-label-wide: 0.34em;
  --tracking-body:    0;
}

/* ==========================================================================
   Martin-Mayeur — Spacing, radii, borders, shadow, motion, layout
   The system is airy and architectural: generous whitespace, hairline
   borders, almost no rounding, almost no shadow. Light is carried by
   emptiness, not by depth.
   ========================================================================== */

:root {
  /* Spacing scale (rem) */
  --space-1:  0.25rem;   /* 4  */
  --space-2:  0.5rem;    /* 8  */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  3rem;      /* 48 */
  --space-8:  4rem;      /* 64 */
  --space-9:  6rem;      /* 96 */
  --space-10: 8rem;      /* 128 — section rhythm */

  /* Corner radii — nearly rectilinear; the archive/technical-drawing feel. */
  --radius-none: 0;
  --radius-xs:   1px;
  --radius-sm:   2px;
  --radius-md:   3px;    /* default control radius */
  --radius-pill: 999px;  /* chips / tags only */

  /* Border widths — hairlines carry structure */
  --border-hair: 1px;
  --border-med:  1.5px;

  /* Shadow — used extremely sparingly; soft warm ambient only */
  --shadow-none: none;
  --shadow-sm:  0 1px 2px rgba(38, 33, 27, 0.04);
  --shadow-md:  0 8px 30px -18px rgba(38, 33, 27, 0.22);
  --shadow-lg:  0 24px 60px -32px rgba(38, 33, 27, 0.30);

  /* Motion — slow, calm, no bounce */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --dur-fast:  180ms; /* @kind other */
  --dur-base:  320ms; /* @kind other */
  --dur-slow:  600ms; /* @kind other */

  /* Layout */
  --measure:      68ch;    /* comfortable reading measure */
  --container:    1240px;  /* max content width */
  --container-narrow: 720px;
  --gutter:       clamp(1.25rem, 5vw, 5rem); /* @kind spacing */
}

/* =============================================================
   Martin-Mayeur — Esperienza (scroll-cinematic)
   The whole body is antique paper; acts are pinned scenes.
   ============================================================= */

body.sitiamo-page--contatti * { box-sizing: border-box; }
html { scroll-behavior: auto !important; }
body.sitiamo-page--contatti { margin: 0; padding: 0; }
body.sitiamo-page--contatti {
  background: #fff;
  color: var(--text-body);
  font-family: var(--font-serif);
  -webkit-font-smoothing: antialiased;
}
body.sitiamo-page--contatti a { color: inherit; text-decoration: none; }
body.sitiamo-page--contatti img { display: block; }

/* ---- Paper ground -------------------------------------------- */
/* Pagina Contatti: niente effetto carta, sfondo bianco pieno ovunque
   (richiesta esplicita — le altre pagine vetrina lo mantengono). */
body.sitiamo-page--contatti .mm-paper-ground {
  display: none;
}

/* ---- Paper grain overlay (fixed, whole viewport) ------------- */
body.sitiamo-page--contatti .mm-grain {
  display: none;
}

/* Subtle paper blotches + vignette behind everything */
body.sitiamo-page--contatti::before {
  content: none;
}

/* ---- Scroll progress hairline -------------------------------- */
body.sitiamo-page--contatti .mm-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60;
  background: transparent; pointer-events: none;
}
body.sitiamo-page--contatti .mm-progress span {
  display: block; height: 100%; width: 0%;
  background: var(--accent); transition: width 90ms linear;
}

/* ---- Top bar -------------------------------------------------- */
body.sitiamo-page--contatti .mm-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem clamp(1.25rem, 4vw, 3rem);
  transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
  border-bottom: 1px solid transparent;
}
body.sitiamo-page--contatti .mm-topbar.is-solid {
  background: color-mix(in srgb, var(--paper-100) 90%, transparent);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--border-soft);
}
body.sitiamo-page--contatti .mm-mark { display: block; height: 34px; position: relative; }
body.sitiamo-page--contatti .mm-mark img { height: 34px; width: auto; transition: opacity var(--dur-base) var(--ease); }
body.sitiamo-page--contatti .mm-mark-dark { position: absolute; top: 0; left: 0; opacity: 0; }
body.sitiamo-page--contatti .mm-topbar.is-solid .mm-mark-light { opacity: 0; }
body.sitiamo-page--contatti .mm-topbar.is-solid .mm-mark-dark { opacity: 1; }
body.sitiamo-page--contatti .mm-nav { display: flex; gap: 2rem; }
body.sitiamo-page--contatti .mm-nav a {
  font-family: var(--font-sans); font-size: var(--text-label-sm);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--paper-100); transition: color var(--dur-base) var(--ease);
  padding-bottom: 2px; border-bottom: 1px solid transparent;
}
body.sitiamo-page--contatti .mm-topbar.is-solid .mm-nav a { color: var(--text-muted); }
body.sitiamo-page--contatti .mm-nav a:hover { border-bottom-color: var(--accent); }
body.sitiamo-page--contatti .mm-topbar.is-solid .mm-nav a:hover { color: var(--text-strong); }

/* ---- Generic eyebrow ----------------------------------------- */
body.sitiamo-page--contatti .eyebrow {
  font-family: var(--font-sans); font-size: var(--text-label-sm);
  letter-spacing: var(--tracking-label-wide); text-transform: uppercase;
  color: var(--text-gold); margin: 0;
}
body.sitiamo-page--contatti .eyebrow--light { color: var(--paper-200); }
body.sitiamo-page--contatti .eyebrow--gold { color: var(--accent-strong); }
body.sitiamo-page--contatti .eyebrow--center { text-align: center; }

/* diamond-lozenge rule */
body.sitiamo-page--contatti .rule-marker { display: flex; align-items: center; gap: 1rem; width: min(360px, 60%); margin-inline: auto; }
body.sitiamo-page--contatti .rule-marker span { flex: 1; height: 1px; background: var(--border); }
body.sitiamo-page--contatti .rule-marker i { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--accent); }
body.sitiamo-page--contatti .rule-marker--light span { background: rgba(248,243,234,0.28); }
body.sitiamo-page--contatti .rule-marker--light i { border-color: var(--paper-200); }

/* ---- Scene scaffolding --------------------------------------- */
body.sitiamo-page--contatti .scene { position: relative; z-index: 2; }
body.sitiamo-page--contatti .pin {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}

/* ============================================================= */
/* ACT I · PARIGI                                                 */
/* ============================================================= */
body.sitiamo-page--contatti .scene--paris { z-index: 3; }
body.sitiamo-page--contatti .paris-stage { position: absolute; inset: 0; }
body.sitiamo-page--contatti .paris-frames { position: absolute; inset: 0; transform: scale(1.08); will-change: transform; }
body.sitiamo-page--contatti .paris-media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: saturate(0.82) contrast(1.03);
}
body.sitiamo-page--contatti .paris-media--video { background: transparent; }
body.sitiamo-page--contatti .paris-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 60% at 50% 50%, rgba(26,22,17,0.30) 0%, rgba(26,22,17,0.14) 45%, transparent 75%),
    linear-gradient(180deg, rgba(26,22,17,0.40) 0%, rgba(26,22,17,0.06) 30%, rgba(26,22,17,0.14) 65%, rgba(26,22,17,0.62) 100%);
}
body.sitiamo-page--contatti .paris-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, transparent 62%, rgba(26,22,17,0.34));
}
body.sitiamo-page--contatti .paris-copy {
  position: relative; z-index: 2; text-align: center; color: var(--paper-100);
  padding-inline: 1.5rem; max-width: 60rem;
  /* Legibility now comes from a soft halo on the type itself rather than a
     heavy scrim, so the film keeps its colour and luminosity. */
  text-shadow: 0 1px 2px rgba(26,22,17,0.55), 0 2px 18px rgba(26,22,17,0.45);
}
body.sitiamo-page--contatti .paris-copy > * { grid-area: 1 / 1; }
body.sitiamo-page--contatti .paris-copy { display: grid; }
body.sitiamo-page--contatti [data-cap] { opacity: 0; will-change: opacity, transform; }
body.sitiamo-page--contatti .paris-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(3rem, 9vw, 8rem); line-height: 0.98;
  letter-spacing: var(--tracking-display); margin: 1.2rem 0 0;
  text-wrap: balance;
}
body.sitiamo-page--contatti .paris-open { align-self: center; }
/* The 11px eyebrow is small text (needs 4.5:1) and the .paris-copy halo, tuned
   for 35–83px type, cannot carry it now that the scrim is light. Give it its
   own denser short-radius halo instead of re-darkening the film. */
body.sitiamo-page--contatti .paris-open .eyebrow {
  text-shadow: 0 1px 3px rgba(26,22,17,0.92), 0 0 10px rgba(26,22,17,0.8), 0 0 2px rgba(26,22,17,0.85);
}
body.sitiamo-page--contatti .paris-line {
  font-family: var(--font-serif); font-size: clamp(1.125rem, 3.2vw, 35px);
  line-height: var(--leading-snug); color: var(--paper-200); margin: 0;
  align-self: center;
}
body.sitiamo-page--contatti .paris-line em { color: var(--gold-300); font-style: italic; }
body.sitiamo-page--contatti .paris-logo {
  align-self: center; justify-self: center;
  width: min(360px, 62vw); height: auto; filter: drop-shadow(0 8px 30px rgba(0,0,0,0.35));
}

body.sitiamo-page--contatti .scroll-cue {
  position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  font-family: var(--font-sans); font-size: 0.625rem; letter-spacing: var(--tracking-label-wide);
  text-transform: uppercase; color: var(--paper-200);
}
body.sitiamo-page--contatti .scroll-cue__line { width: 1px; height: 42px; background: linear-gradient(var(--paper-200), transparent); }

/* ============================================================= */
/* ACT II · LA CARTA                                              */
/* ============================================================= */
body.sitiamo-page--contatti .scene--carta {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 14vh clamp(1.25rem, 4vw, 3rem) 10vh;
}
body.sitiamo-page--contatti .carta-wrap {
  width: 100%; max-width: none; margin: 0;
  display: flex; flex-direction: column; gap: clamp(2rem, 5vw, 4.5rem);
}
body.sitiamo-page--contatti .carta-lead {
  font-family: var(--font-display); font-weight: 400; font-style: normal;
  font-size: clamp(1.75rem, 4.4vw, 52px); line-height: 1.08; color: var(--text-strong);
  margin: 0; text-align: left; max-width: 22ch;
}
body.sitiamo-page--contatti .carta-lead em { font-style: italic; color: var(--accent-strong); }

/* Handwrite ink-in: each word wipes open left→right, in reading order. */
body.sitiamo-page--contatti .carta-lead.hw .hw-word {
  display: inline-block;
  opacity: 0;
  clip-path: inset(0 106% -20% 0);
  transition: clip-path 560ms var(--ease), opacity 260ms var(--ease);
  will-change: clip-path, opacity;
}
body.sitiamo-page--contatti .scene--carta.is-in .carta-lead.hw .hw-word, body.sitiamo-page--contatti .paper-title.is-in .carta-lead.hw .hw-word {
  opacity: 1;
  clip-path: inset(0 -6% -20% 0);
}
body.sitiamo-page--contatti .carta-plate {
  margin: 0; align-self: flex-end; justify-self: end;
  width: min(78%, 60rem); margin-top: -3rem;
}
body.sitiamo-page--contatti .carta-plate img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-sm, 2px);
  box-shadow: 0 34px 80px -44px rgba(38, 33, 27, 0.5);
}

@media (max-width: 860px) {
  body.sitiamo-page--contatti .carta-lead { font-size: clamp(2rem, 7.5vw, 52px); max-width: none; }
  body.sitiamo-page--contatti .carta-plate { width: 100%; align-self: center; margin-top: 0; }
}

/* ============================================================= */
/* ACT II · LA CARTA → GALLERIA (sticky-zoom + horizontal pan)   */
/* ============================================================= */
/* Section II rises up over the still-pinned hero (which holds on the logo). */
body.sitiamo-page--contatti .scene--paper {
  position: relative; z-index: 5; margin-top: -200vh;
  background: var(--white);
  box-shadow: 0 -34px 70px -30px rgba(38, 33, 27, 0.28);
}
body.sitiamo-page--contatti .scene--paper .pin { align-items: stretch; justify-content: flex-start; }
body.sitiamo-page--contatti .paper-title {
  position: absolute; z-index: 6; top: 15vh;
  left: clamp(1.25rem, 4vw, 3rem); max-width: 52vw;
  pointer-events: none; will-change: opacity, transform;
}
body.sitiamo-page--contatti .paper-title .carta-lead { text-align: left; max-width: 20ch; }

body.sitiamo-page--contatti .paper-gallery { position: absolute; inset: 0; overflow: hidden; z-index: 2; }
body.sitiamo-page--contatti .paper-track { display: flex; gap: 8px; height: 100vh; height: 100svh; width: max-content; will-change: transform; }
body.sitiamo-page--contatti .pslide { flex: 0 0 100vw; height: 100vh; height: 100svh; margin: 0; position: relative; }
body.sitiamo-page--contatti .pmedia {
  position: absolute; inset: 0; overflow: hidden;
  left: auto; top: auto; right: 0; bottom: 0; width: 100vw; height: 100vh; height: 100svh;
}
body.sitiamo-page--contatti .pmedia img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.sitiamo-page--contatti .pslide--ph .pmedia {
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(45deg, rgba(173,146,96,0.05) 0 12px, transparent 12px 24px),
    var(--paper-200);
  box-shadow: inset 0 0 0 1px var(--border);
}
body.sitiamo-page--contatti .ph-label {
  font-family: var(--font-sans); font-size: var(--text-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-faint);
}
body.sitiamo-page--contatti .pslide figcaption .slide-no { font-size: clamp(1.4rem, 2.6vw, 2rem); }
body.sitiamo-page--contatti .pslide figcaption .slide-cap { font-size: 11px; }
body.sitiamo-page--contatti .pslide figcaption {
  position: absolute; bottom: 8vh; left: clamp(2rem, 8vw, 8rem); z-index: 4;
  display: flex; align-items: baseline; gap: 0.85rem; opacity: 0;
  padding: 0.6rem 1rem; background: color-mix(in srgb, var(--paper-50) 62%, transparent);
  backdrop-filter: blur(3px); border-radius: var(--radius-sm);
}

/* ============================================================= */
/* ATELIER · IL GESTO — sticky scrubbed video + shop column      */
/* ============================================================= */
body.sitiamo-page--contatti .scene--shop { background: var(--white); }
body.sitiamo-page--contatti .shop-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
body.sitiamo-page--contatti .shop-media { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; }
body.sitiamo-page--contatti .shop-media-inner {
  flex: 1; overflow: hidden; background: var(--ink-900);
}
body.sitiamo-page--contatti .shop-video { width: 100%; height: 100%; object-fit: cover; display: block; }
body.sitiamo-page--contatti .shop-media-cap {
  flex: 0 0 auto; margin: 0; padding: 1.1rem clamp(1.25rem, 3vw, 2.5rem);
  font-family: var(--font-sans); font-size: var(--text-label-sm); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-muted); background: var(--white);
  border-top: 1px solid var(--border-soft);
}
body.sitiamo-page--contatti .shop-items {
  padding: 12vh clamp(2rem, 5vw, 5.5rem) 14vh;
  display: flex; flex-direction: column; gap: 12vh;
}
body.sitiamo-page--contatti .shop-intro { display: flex; flex-direction: column; gap: 1rem; }
body.sitiamo-page--contatti .shop-heading {
  font-family: var(--font-display); font-weight: 400; margin: 0;
  font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: 1.02; color: var(--text-strong);
}
body.sitiamo-page--contatti .shop-sub {
  font-family: var(--font-serif); font-size: 18px; line-height: var(--leading-normal);
  color: var(--text-muted); margin: 0; max-width: 46ch; text-wrap: pretty;
}

body.sitiamo-page--contatti .shop-card {
  display: grid; grid-template-columns: 40% 1fr; gap: clamp(1.25rem, 2.5vw, 2rem); align-items: center;
  opacity: 0; transform: translateY(30px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}
body.sitiamo-page--contatti .shop-card.is-in { opacity: 1; transform: none; }
body.sitiamo-page--contatti .shop-card-img {
  aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-100);
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
}
body.sitiamo-page--contatti .shop-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease); }
body.sitiamo-page--contatti .shop-card:hover .shop-card-img img { transform: scale(1.04); }
body.sitiamo-page--contatti .shop-card-body { display: flex; flex-direction: column; gap: 0.55rem; align-items: flex-start; }
body.sitiamo-page--contatti .shop-card-cat { margin: 0; }
body.sitiamo-page--contatti .shop-card-name { font-family: var(--font-display); font-weight: 400; font-size: var(--text-display-sm); line-height: 1.05; color: var(--text-strong); margin: 0.1rem 0 0.15rem; }
body.sitiamo-page--contatti .shop-card-spec { font-family: var(--font-serif); font-size: 18px; color: var(--text-muted); margin: 0; max-width: 30ch; }
body.sitiamo-page--contatti .shop-card-metals { justify-content: flex-start; margin-top: 0.3rem; }
body.sitiamo-page--contatti .shop-card-foot { display: flex; align-items: center; gap: 1.4rem; margin-top: 0.9rem; }
body.sitiamo-page--contatti .shop-card-price { font-family: var(--font-sans); font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-gold); }
body.sitiamo-page--contatti .shop-card-cta {
  font-family: var(--font-sans); font-size: var(--text-label-sm); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ink-900);
  padding-bottom: 3px; border-bottom: 1px solid var(--border-strong);
  transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
body.sitiamo-page--contatti .shop-card-cta:hover { color: var(--accent-strong); border-bottom-color: var(--accent); }

/* ============================================================= */
/* IL CATALOGO · 4 categorie × 9 referenze                        */
/* ============================================================= */
body.sitiamo-page--contatti .scene--catalogo { background: var(--white); padding: var(--space-10) clamp(1.25rem, 4vw, 3rem); }
body.sitiamo-page--contatti .catalogo-inner { max-width: var(--container); margin: 0 auto; }
body.sitiamo-page--contatti .catalogo-head { text-align: center; display: flex; flex-direction: column; gap: 1rem; margin-bottom: var(--space-7); }
body.sitiamo-page--contatti .catalogo-title {
  font-family: var(--font-display); font-weight: 400; margin: 0;
  font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.04; color: var(--text-strong);
}
body.sitiamo-page--contatti .catalogo-sub {
  font-family: var(--font-serif); font-size: 18px; line-height: var(--leading-normal);
  color: var(--text-muted); margin: 0 auto; max-width: 62ch; text-wrap: pretty;
}
body.sitiamo-page--contatti .cat-tabs { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-bottom: 1.25rem; }
body.sitiamo-page--contatti .cat-tab {
  font-family: var(--font-sans); font-size: var(--text-label-sm); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-muted); cursor: pointer;
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 0.7rem 1.2rem; transition: all var(--dur-base) var(--ease);
}
body.sitiamo-page--contatti .cat-tab:hover { border-color: var(--border-strong); color: var(--text-strong); }
body.sitiamo-page--contatti .cat-tab.is-active { background: var(--ink-900); border-color: var(--ink-900); color: var(--paper-100); }
body.sitiamo-page--contatti .cat-count {
  font-family: var(--font-sans); font-size: 0.625rem; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-faint); text-align: center; margin: 0 0 var(--space-6);
}
body.sitiamo-page--contatti .cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6) var(--space-5); }
body.sitiamo-page--contatti .cat-card { display: flex; flex-direction: column; gap: 0.9rem; }
body.sitiamo-page--contatti .cat-card-img {
  aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-100);
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
}
body.sitiamo-page--contatti .cat-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease); }
/* Image zoom on hover is a pointer affordance only — on touch it would fire
   on tap and never reset. */
@media (hover: hover) {
  body.sitiamo-page--contatti .cat-card:hover .cat-card-img img { transform: scale(1.04); }
}
body.sitiamo-page--contatti .cat-card-body { display: flex; flex-direction: column; gap: 0.3rem; }
body.sitiamo-page--contatti .cat-card-cat {
  font-family: var(--font-sans); font-size: 0.625rem; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-gold); margin: 0;
}
body.sitiamo-page--contatti .cat-card-name { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; line-height: 1.1; color: var(--text-strong); margin: 0.15rem 0 0.1rem; }
body.sitiamo-page--contatti .cat-card-metal, body.sitiamo-page--contatti .cat-card-size { font-family: var(--font-serif); font-size: 15px; color: var(--text-muted); margin: 0; }
body.sitiamo-page--contatti .cat-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.5rem; padding-top: 0.6rem; border-top: 1px solid var(--border-soft); }
body.sitiamo-page--contatti .cat-card-price { font-family: var(--font-sans); font-size: 0.625rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-gold); }
body.sitiamo-page--contatti .cat-dot { width: 11px; height: 11px; border-radius: var(--radius-pill); display: block; box-shadow: inset 0 -1px 2px rgba(0,0,0,0.12); }

/* ============================================================= */
/* LA MAISON                                                      */
/* ============================================================= */
body.sitiamo-page--contatti .scene--maison { background: var(--white); padding: var(--space-10) clamp(1.25rem, 4vw, 3rem); }
body.sitiamo-page--contatti .maison-inner {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: stretch;
}
body.sitiamo-page--contatti .maison-col { display: flex; flex-direction: column; gap: 1.2rem; align-items: flex-start; }
body.sitiamo-page--contatti .maison-title {
  font-family: var(--font-display); font-weight: 400; margin: 0.4rem 0 0.6rem;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: 1.02; color: var(--text-strong);
}
body.sitiamo-page--contatti .maison-body {
  font-family: var(--font-serif); font-size: 18px; line-height: var(--leading-relaxed);
  color: var(--text-body); margin: 0; max-width: 52ch; text-wrap: pretty;
}
body.sitiamo-page--contatti .maison-quote {
  font-family: var(--font-display); font-style: italic; font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.24; color: var(--accent-strong); margin: 0.6rem 0; max-width: 34ch;
}
body.sitiamo-page--contatti .maison-cta {
  margin-top: 1rem; font-family: var(--font-sans); font-size: var(--text-label-sm);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-900);
  padding-bottom: 3px; border-bottom: 1px solid var(--border-strong);
  transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
body.sitiamo-page--contatti .maison-cta:hover { color: var(--accent-strong); border-bottom-color: var(--accent); }
body.sitiamo-page--contatti .maison-figs { display: flex; flex-direction: column; gap: var(--space-6); }
body.sitiamo-page--contatti .maison-figs--single { justify-content: center; height: 100%; }
body.sitiamo-page--contatti .maison-fig { margin: 0; }

/* Carousel: one photograph at a time, filling the full height of the text
   column — this is what removes the white gap the two stacked figures left. */
body.sitiamo-page--contatti .maison-carousel {
  position: sticky; top: calc(var(--space-7) + 4rem);
  gap: 1.1rem; align-self: stretch;
}
body.sitiamo-page--contatti .mc-viewport {
  position: relative; flex: 1; min-height: 26rem;
  border-radius: var(--radius-sm); overflow: hidden; background: var(--paper-100);
}
body.sitiamo-page--contatti .mc-slide {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease);
}
body.sitiamo-page--contatti .mc-slide.is-active { opacity: 1; pointer-events: auto; }
body.sitiamo-page--contatti .mc-slide img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: var(--radius-sm); border: 1px solid var(--border-soft);
}
body.sitiamo-page--contatti .mc-slide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 2.5rem 1.1rem 0.9rem;
  background: linear-gradient(180deg, rgba(26,22,17,0) 0%, rgba(26,22,17,0.62) 100%);
  color: var(--paper-100);
}
body.sitiamo-page--contatti .mc-dots { display: flex; gap: 0.5rem; justify-content: flex-start; }
body.sitiamo-page--contatti .mc-dot {
  width: 2.25rem; min-width: 44px; min-height: 44px; height: 44px;
  padding: 0; border: none; cursor: pointer;
  background: transparent; position: relative;
  -webkit-tap-highlight-color: transparent;
}
/* The visible trace is a child bar, so the button can hold a full 44px touch
   target without drawing a thick line. Height is set explicitly (not via
   padding) because the global `* { box-sizing: border-box }` would otherwise
   absorb the padding into a 2px box. */
body.sitiamo-page--contatti .mc-dot::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  width: 2.25rem; margin-inline: auto;
  height: 2px; background: var(--border-strong);
  transition: background var(--dur-base) var(--ease);
}
body.sitiamo-page--contatti .mc-dot.is-active::after { background: var(--accent); }
body.sitiamo-page--contatti .maison-fig img { width: 100%; height: auto; display: block; border-radius: var(--radius-sm); border: 1px solid var(--border-soft); }
body.sitiamo-page--contatti .maison-fig figcaption {
  margin-top: 0.8rem; font-family: var(--font-sans); font-size: 0.625rem;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted);
}

/* ============================================================= */
/* CERTIFICAZIONI                                                 */
/* ============================================================= */
body.sitiamo-page--contatti .scene--cert { background: var(--paper-50); border-top: 1px solid var(--border-soft); padding: var(--space-9) clamp(1.25rem, 4vw, 3rem); }
body.sitiamo-page--contatti .cert-inner { max-width: var(--container); margin: 0 auto; }
body.sitiamo-page--contatti .cert-head { text-align: center; display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: var(--space-7); }
body.sitiamo-page--contatti .cert-title { font-family: var(--font-display); font-weight: 400; margin: 0; font-size: clamp(2rem, 3.4vw, 2.8rem); color: var(--text-strong); }
body.sitiamo-page--contatti .cert-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
body.sitiamo-page--contatti .cert-item { display: flex; flex-direction: column; gap: 0.7rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
body.sitiamo-page--contatti .cert-item-key { font-family: var(--font-sans); font-size: var(--text-label-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-gold); margin: 0; }
body.sitiamo-page--contatti .cert-item-val { font-family: var(--font-serif); font-size: 18px; line-height: var(--leading-normal); color: var(--text-body); margin: 0; text-wrap: pretty; }
body.sitiamo-page--contatti .cert-item-val strong { font-weight: 500; color: var(--text-strong); }
body.sitiamo-page--contatti .cert-marks {
  display: flex; flex-wrap: wrap; gap: var(--space-6); justify-content: center; align-items: center;
  margin-top: var(--space-7);
}
/* Both marks sit free on the ground — no frame, no plate. The RJC mark is a
   PORTRAIT panel and IGI a horizontal lockup, so they are matched by optical
   weight (RJC constrained by width, IGI by height), not by a shared box. */
body.sitiamo-page--contatti .cert-mark {
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: none; background: transparent;
}
body.sitiamo-page--contatti .cert-mark img { display: block; height: 4rem; width: auto; }
/* RJC is portrait (199×321), IGI horizontal (738×294): matched by AREA so
   neither dominates — IGI 161×64, RJC 80×129, both ≈10.3k px². */
body.sitiamo-page--contatti .cert-mark--rjc img { height: auto; width: 5rem; }
body.sitiamo-page--contatti .cert-note {
  margin: var(--space-7) auto 0; text-align: center; max-width: 60ch;
  font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
}

/* ---- Footer columns ---- */
body.sitiamo-page--contatti .mm-footer-cols {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6);
  text-align: left; margin: var(--space-7) 0 var(--space-6); width: 100%;
}
body.sitiamo-page--contatti .mm-footer-col { display: flex; flex-direction: column; gap: 0.6rem; }
body.sitiamo-page--contatti .mm-footer-key { font-family: var(--font-sans); font-size: var(--text-label-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--gold-300); margin: 0 0 0.3rem; }
body.sitiamo-page--contatti .mm-footer-col a, body.sitiamo-page--contatti .mm-footer-addr { font-family: var(--font-serif); font-size: 15px; color: var(--paper-300); text-decoration: none; margin: 0; line-height: 1.5; }
body.sitiamo-page--contatti .mm-footer-col a:hover { color: var(--gold-300); }

@media (max-width: 1080px) {
  body.sitiamo-page--contatti .cat-grid { grid-template-columns: repeat(3, 1fr); }
  body.sitiamo-page--contatti .cert-grid { grid-template-columns: repeat(2, 1fr); }
  body.sitiamo-page--contatti .mm-footer-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  body.sitiamo-page--contatti .cat-grid { grid-template-columns: repeat(2, 1fr); }
  body.sitiamo-page--contatti .maison-inner { grid-template-columns: 1fr; }
  body.sitiamo-page--contatti .maison-carousel { position: static; }
  body.sitiamo-page--contatti .mc-viewport { min-height: 20rem; }
}

/* ============================================================= */
/* PAGINE STATICHE · Maison & Contatti                            */
/* ============================================================= */
body.sitiamo-page--contatti .page-static { background: var(--white); }
body.sitiamo-page--contatti .page-static .mm-topbar { position: sticky; }
body.sitiamo-page--contatti .mm-nav a.is-current { color: var(--text-strong); border-bottom: 1px solid var(--accent); }
body.sitiamo-page--contatti .maison-inner--flip { direction: ltr; }

body.sitiamo-page--contatti .mh-hero { position: relative; height: 64svh; min-height: 380px; overflow: hidden; }
body.sitiamo-page--contatti .mh-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Localised protection gradient for the copy block. It spans the WHOLE hero
   (so no rectangle edge ever falls inside the photograph) and falls off on
   both axes from the bottom-left corner, leaving the right side luminous. */
body.sitiamo-page--contatti .mh-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(110% 110% at 0% 100%,
    rgba(26,22,17,0.78) 0%,
    rgba(26,22,17,0.62) 50%,
    rgba(26,22,17,0) 88%);
}
body.sitiamo-page--contatti .mh-hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(38,33,27,0.34) 0%, rgba(38,33,27,0.30) 34%, rgba(38,33,27,0.46) 62%, rgba(38,33,27,0.74) 100%); }
body.sitiamo-page--contatti .mh-hero-copy {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 0 clamp(1.25rem, 4vw, 3rem) clamp(3rem, 7vh, 5rem);
  display: flex; flex-direction: column; gap: 1.1rem;
}
body.sitiamo-page--contatti .mh-hero-title {
  font-family: var(--font-display); font-weight: 400; margin: 0;
  font-size: clamp(3rem, 7vw, 6rem); line-height: 0.98;
  letter-spacing: var(--tracking-display); color: var(--paper-100);
}
body.sitiamo-page--contatti .scene--manifattura { background: var(--paper-50); border-block: 1px solid var(--border-soft); padding: var(--space-10) clamp(1.25rem, 4vw, 3rem); }

body.sitiamo-page--contatti .ct-head {
  text-align: center; padding: var(--space-9) clamp(1.25rem, 4vw, 3rem) var(--space-7);
  display: flex; flex-direction: column; gap: 1rem; align-items: center;
}
body.sitiamo-page--contatti .ct-title { font-family: var(--font-display); font-weight: 400; margin: 0; font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1; color: var(--text-strong); }
body.sitiamo-page--contatti .ct-sub { font-family: var(--font-serif); font-size: 18px; line-height: var(--leading-normal); color: var(--text-muted); margin: 0; max-width: 52ch; text-wrap: pretty; }
body.sitiamo-page--contatti .scene--contatti { padding: 0 clamp(1.25rem, 4vw, 3rem) var(--space-10); }
body.sitiamo-page--contatti .ct-grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
body.sitiamo-page--contatti .ct-col { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
body.sitiamo-page--contatti .ct-h2 { font-family: var(--font-display); font-weight: 400; margin: 0.3rem 0 0.8rem; font-size: clamp(1.8rem, 2.8vw, 2.4rem); line-height: 1.06; color: var(--text-strong); }
body.sitiamo-page--contatti .ct-dl { margin: 0; width: 100%; }
body.sitiamo-page--contatti .ct-row { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--border-soft); }
body.sitiamo-page--contatti .ct-row dt { font-family: var(--font-sans); font-size: var(--text-label-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
body.sitiamo-page--contatti .ct-row dd { margin: 0; font-family: var(--font-serif); font-size: 18px; line-height: 1.5; color: var(--text-strong); }
body.sitiamo-page--contatti .ct-row dd a { color: var(--text-strong); text-decoration: none; border-bottom: 1px solid var(--border); }
body.sitiamo-page--contatti .ct-row dd a:hover { color: var(--accent-strong); border-bottom-color: var(--accent); }
body.sitiamo-page--contatti .ct-badges { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }
body.sitiamo-page--contatti .ct-badge {
  font-family: var(--font-sans); font-size: var(--text-label-sm); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-gold);
  padding: 0.55em 0.95em; border: 1px solid currentColor; border-radius: var(--radius-pill);
}
body.sitiamo-page--contatti .ct-form { width: 100%; }

/* ---- Restyle del form Forminator #63 sui token del design originale ----
   Forminator carica il proprio CSS di default (bordi, arrotondamenti,
   ombre): qui si sovrascrive con !important solo dove serve vincere sulla
   specificità/ordine di quel foglio, non per abitudine. Le classi sono
   quelle standard di Forminator — se una versione futura del plugin le
   cambia, va riverificato dopo un controllo visivo. */
body.sitiamo-page--contatti .ct-form .forminator-row { margin: 0 0 1.3rem; }
body.sitiamo-page--contatti .ct-form .forminator-row:last-child { margin-bottom: 0; }
body.sitiamo-page--contatti .ct-form .forminator-col { padding: 0 0.65rem; }
body.sitiamo-page--contatti .ct-form .forminator-col:first-child { padding-left: 0; }
body.sitiamo-page--contatti .ct-form .forminator-col:last-child { padding-right: 0; }

body.sitiamo-page--contatti .ct-form .forminator-label {
  font-family: var(--font-sans) !important; font-size: var(--text-label-sm) !important;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-muted) !important; font-weight: var(--weight-regular) !important;
  margin-bottom: 0.5rem !important;
}
body.sitiamo-page--contatti .ct-form .forminator-required { color: var(--accent-strong) !important; }

body.sitiamo-page--contatti .ct-form input.forminator-input,
body.sitiamo-page--contatti .ct-form textarea,
body.sitiamo-page--contatti .ct-form select.forminator-select {
  font-family: var(--font-serif) !important; font-size: 18px !important; color: var(--text-strong) !important;
  background: transparent !important; border: none !important; border-bottom: 1px solid var(--border-strong) !important;
  border-radius: 0 !important; box-shadow: none !important;
  padding: 0.5rem 0 !important; width: 100%;
  transition: border-color var(--dur-base) var(--ease);
}
body.sitiamo-page--contatti .ct-form textarea { resize: vertical; }
body.sitiamo-page--contatti .ct-form input.forminator-input:focus,
body.sitiamo-page--contatti .ct-form textarea:focus,
body.sitiamo-page--contatti .ct-form select.forminator-select:focus {
  border-bottom-color: var(--accent) !important; outline: none !important; box-shadow: none !important;
}

body.sitiamo-page--contatti .ct-form .forminator-button-submit {
  align-self: flex-start; cursor: pointer;
  font-family: var(--font-sans) !important; font-size: 0.75rem !important; letter-spacing: 0.24em; text-transform: uppercase;
  background: var(--ink-900) !important; color: var(--paper-100) !important; border: 1px solid var(--ink-900) !important;
  border-radius: var(--radius-md) !important; padding: 1rem 2.2rem !important; box-shadow: none !important;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
body.sitiamo-page--contatti .ct-form .forminator-button-submit:hover { background: transparent !important; color: var(--ink-900) !important; }

body.sitiamo-page--contatti .ct-form .forminator-response-message {
  font-family: var(--font-display) !important; font-size: 1.5rem !important; color: var(--accent-strong) !important;
  margin: 1rem 0 0 !important; background: none !important; border: none !important; padding: 0 !important;
}

@media (max-width: 860px) {
  body.sitiamo-page--contatti .ct-grid { grid-template-columns: 1fr; }
  body.sitiamo-page--contatti .ct-row { grid-template-columns: 1fr; gap: 0.35rem; }
}

@media (max-width: 860px) {
  body.sitiamo-page--contatti .shop-grid { grid-template-columns: 1fr; }
  body.sitiamo-page--contatti .shop-media { position: relative; height: 70vh; }
  body.sitiamo-page--contatti .shop-items { gap: 6vh; padding: 8vh clamp(1.5rem, 5vw, 3rem); }
  body.sitiamo-page--contatti .shop-card { grid-template-columns: 1fr; gap: 1rem; }
  body.sitiamo-page--contatti .shop-card-img { max-width: 20rem; }
}

/* ============================================================= */
/* ACT III · IL DISEGNO PRENDE FORMA                             */
/* ============================================================= */
/* From Act III onward the paper texture gives way to a clean white ground. */
body.sitiamo-page--contatti .scene--forma, body.sitiamo-page--contatti .scene--collezione { background: var(--white); }
body.sitiamo-page--contatti .scene--forma .pin { flex-direction: column; }
body.sitiamo-page--contatti .forma-stage {
  position: relative; width: min(78vh, 88vw); aspect-ratio: 1 / 1;
}
body.sitiamo-page--contatti .forma-draw { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
body.sitiamo-page--contatti .forma-draw .ink {
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
body.sitiamo-page--contatti .forma-photo {
  position: absolute; inset: 8%; z-index: 1; border-radius: var(--radius-sm);
  overflow: hidden; opacity: 0; transform: scale(0.96);
  will-change: opacity, transform;
  box-shadow: var(--shadow-lg);
}
body.sitiamo-page--contatti .forma-photo img { width: 100%; height: 100%; object-fit: cover; }
body.sitiamo-page--contatti .forma-bloom {
  position: absolute; inset: -20%; z-index: 3; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 42%, rgba(255,249,235,0.9), transparent 42%);
  mix-blend-mode: screen; will-change: opacity;
}
body.sitiamo-page--contatti .forma-copy {
  position: absolute; bottom: clamp(2rem, 6vh, 4rem); left: 0; right: 0;
  text-align: center; z-index: 4; display: grid;
}
body.sitiamo-page--contatti .forma-copy > * { grid-area: 1 / 1; }
body.sitiamo-page--contatti .forma-cap { font-size: var(--text-label); letter-spacing: var(--tracking-label-wide); }

/* ============================================================= */
/* ACT IV · LE DIAPOSITIVE (horizontal pan)                      */
/* ============================================================= */
body.sitiamo-page--contatti .scene--slides .pin { align-items: stretch; }
body.sitiamo-page--contatti .slides-track {
  display: flex; height: 100vh; will-change: transform;
}
body.sitiamo-page--contatti .slide {
  flex: 0 0 100vw; height: 100vh; margin: 0; position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 12vh clamp(2rem, 8vw, 8rem);
}
body.sitiamo-page--contatti .slide-img {
  width: min(52vh, 80vw); aspect-ratio: 3 / 4; border-radius: var(--radius-sm);
  overflow: hidden; border: 1px solid var(--border);
  background: var(--paper-200); box-shadow: var(--shadow-md);
}
body.sitiamo-page--contatti .slide-img img { width: 100%; height: 100%; object-fit: cover; }
body.sitiamo-page--contatti .slide figcaption {
  position: absolute; bottom: 8vh; left: clamp(2rem, 8vw, 8rem);
  display: flex; align-items: baseline; gap: 1.2rem;
}
body.sitiamo-page--contatti .slide-no {
  font-family: var(--font-display); font-size: clamp(2.5rem, 7vw, 5rem);
  color: var(--accent-soft); line-height: 1;
}
body.sitiamo-page--contatti .slide-cap {
  font-family: var(--font-sans); font-size: var(--text-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-muted);
}

/* ============================================================= */
/* ACT V · LA COLLEZIONE                                          */
/* ============================================================= */
body.sitiamo-page--contatti .scene--collezione { padding: var(--space-10) clamp(1.5rem, 6vw, 5rem); }
body.sitiamo-page--contatti .collezione-inner { max-width: var(--container); margin-inline: auto; }
body.sitiamo-page--contatti .collezione-head { text-align: center; margin-bottom: var(--space-8); display: flex; flex-direction: column; gap: 1rem; align-items: center; }
body.sitiamo-page--contatti .collezione-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-display-lg); color: var(--text-strong); margin: 0;
  letter-spacing: var(--tracking-display);
}
body.sitiamo-page--contatti .collezione-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-7); }
body.sitiamo-page--contatti .piece { display: block; text-align: center; }
body.sitiamo-page--contatti .piece-img {
  aspect-ratio: 4 / 5; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--border-soft); background: var(--paper-200); margin-bottom: 1.25rem;
}
body.sitiamo-page--contatti .piece-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
body.sitiamo-page--contatti .piece:hover .piece-img img { transform: scale(1.04); }
body.sitiamo-page--contatti .piece-cat { margin-bottom: 0.55rem; }
body.sitiamo-page--contatti .piece-name {
  font-family: var(--font-display); font-weight: 400; font-size: var(--text-display-sm);
  color: var(--text-strong); margin: 0 0 0.5rem; transition: color var(--dur-base) var(--ease);
}
body.sitiamo-page--contatti .piece:hover .piece-name { color: var(--accent-strong); }
body.sitiamo-page--contatti .piece-spec { font-family: var(--font-serif); font-size: 18px; color: var(--text-muted); margin: 0 auto 0.9rem; max-width: 26ch; }
body.sitiamo-page--contatti .piece-metals { display: flex; gap: 0.5rem; justify-content: center; }
body.sitiamo-page--contatti .piece-metals i { width: 12px; height: 12px; border-radius: 999px; box-shadow: inset 0 -1px 2px rgba(0,0,0,0.12); }
body.sitiamo-page--contatti .m-giallo { background: linear-gradient(145deg,#E7C77C,#C79B47); }
body.sitiamo-page--contatti .m-rosa { background: linear-gradient(145deg,#E8C1A8,#CF9576); }
body.sitiamo-page--contatti .m-bianco { background: linear-gradient(145deg,#EDEDEA,#CFCFCB); }

/* ============================================================= */
/* FOOTER                                                        */
/* ============================================================= */
body.sitiamo-page--contatti .mm-footer { position: relative; z-index: 2; background: var(--surface-ink); color: var(--paper-200); padding: var(--space-10) clamp(1.5rem, 6vw, 5rem) var(--space-7); margin-top: 0; }
body.sitiamo-page--contatti .mm-footer-inner { max-width: 46rem; margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
body.sitiamo-page--contatti .mm-footer-mark { height: 52px; width: auto; opacity: 0.95; }
body.sitiamo-page--contatti .mm-footer-line { font-family: var(--font-serif); font-style: italic; font-size: var(--text-lead); color: var(--paper-300); margin: 0; line-height: var(--leading-snug); }
body.sitiamo-page--contatti .mm-footer-meta { font-family: var(--font-sans); font-size: var(--text-label-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--gold-300); margin: 0; }
body.sitiamo-page--contatti .mm-footer-copy { font-family: var(--font-sans); font-size: 0.625rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-300); margin: 0; }

/* ---- Entrance reveals ---------------------------------------- */
body.sitiamo-page--contatti [data-reveal] .reveal-child, body.sitiamo-page--contatti [data-reveal].scene--carta .carta-lead, body.sitiamo-page--contatti [data-reveal] .eyebrow {
  opacity: 0; transform: translateY(22px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
body.sitiamo-page--contatti [data-reveal].is-in .reveal-child, body.sitiamo-page--contatti [data-reveal].is-in.scene--carta .carta-lead, body.sitiamo-page--contatti [data-reveal].is-in .eyebrow { opacity: 1; transform: none; }
body.sitiamo-page--contatti [data-reveal].is-in .reveal-child:nth-child(2) { transition-delay: 120ms; }
body.sitiamo-page--contatti [data-reveal].is-in .reveal-child:nth-child(3) { transition-delay: 240ms; }
body.sitiamo-page--contatti .collezione-grid .reveal-child:nth-child(1) { transition-delay: 0ms; }
body.sitiamo-page--contatti .collezione-grid .reveal-child:nth-child(2) { transition-delay: 140ms; }
body.sitiamo-page--contatti .collezione-grid .reveal-child:nth-child(3) { transition-delay: 280ms; }

/* ---- Responsive ---------------------------------------------- */
@media (max-width: 860px) {
  body.sitiamo-page--contatti .collezione-grid { grid-template-columns: 1fr; gap: var(--space-8); max-width: 26rem; margin-inline: auto; }
  body.sitiamo-page--contatti .mm-nav { gap: 1.2rem; }
}

/* =============================================================
   RESPONSIVE LAYER — tablet, phone, small phone, landscape
   Ordered narrow-to-narrower after all component rules so these
   always win. Pinned scenes use svh (set above) so the mobile URL
   bar collapsing never shifts the choreography.
   ============================================================= */

/* ---- Tablet / small laptop (≤1080px) ------------------------- */
@media (max-width: 1080px) {
  body.sitiamo-page--contatti .paper-title { max-width: 68vw; top: 13vh; }
  body.sitiamo-page--contatti .shop-items { padding: 10vh clamp(1.5rem, 4vw, 3rem) 12vh; gap: 10vh; }
  body.sitiamo-page--contatti .cert-marks { gap: clamp(2rem, 5vw, 3.5rem); }
}

/* ---- Portrait tablet / large phone (≤860px) ------------------ */
@media (max-width: 860px) {
  /* Shorten the scroll-driven acts: 640vh/520vh of scrolling is punishing on
     a phone. Inline heights need !important to be overridden. */
  body.sitiamo-page--contatti .scene--paris { height: 420vh !important; }
  body.sitiamo-page--contatti .scene--paper { height: 380vh !important; margin-top: -140vh; }

  body.sitiamo-page--contatti .paper-title { max-width: none; width: calc(100% - 2.5rem); top: 11vh; }
  body.sitiamo-page--contatti .paper-title .carta-lead { max-width: 18ch; }

  body.sitiamo-page--contatti .pslide figcaption { left: 1.25rem; right: 1.25rem; bottom: 6vh; gap: 0.7rem; }

  /* Film above, pieces below — a half-height sticky film keeps the ring in
     view while the products scroll past it. */
  body.sitiamo-page--contatti .shop-media { height: 56svh; }
  body.sitiamo-page--contatti .shop-items { padding: 8vh 1.5rem 10vh; gap: 8vh; }
  body.sitiamo-page--contatti .shop-card { grid-template-columns: 96px 1fr; gap: 1.1rem; align-items: start; }
  body.sitiamo-page--contatti .shop-card-img { max-width: none; }

  body.sitiamo-page--contatti .cat-tabs { gap: 0.5rem; }
  body.sitiamo-page--contatti .maison-title, body.sitiamo-page--contatti .catalogo-title, body.sitiamo-page--contatti .cert-title { text-wrap: balance; }
}

/* ---- Phone (≤640px) ----------------------------------------- */
@media (max-width: 640px) {
  body.sitiamo-page--contatti .mm-topbar { padding-inline: 1.1rem; }
  body.sitiamo-page--contatti .mm-mark, body.sitiamo-page--contatti .mm-mark img { height: 26px; }
  body.sitiamo-page--contatti .mm-nav { gap: 0.9rem; }
  body.sitiamo-page--contatti .mm-nav a { font-size: 0.625rem; letter-spacing: 0.14em; padding-block: 0.9rem; }

  body.sitiamo-page--contatti .paris-copy { padding-inline: 1.25rem; }
  body.sitiamo-page--contatti .scroll-cue { bottom: 1.4rem; }
  body.sitiamo-page--contatti .scroll-cue__line { height: 30px; }

  body.sitiamo-page--contatti .cat-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-4); }
  body.sitiamo-page--contatti .collezione-grid { max-width: 22rem; }
  body.sitiamo-page--contatti .cat-card-name { font-size: 1.1rem; }
  body.sitiamo-page--contatti .cat-card-metal, body.sitiamo-page--contatti .cat-card-size { font-size: 13px; }
  body.sitiamo-page--contatti .cat-card-foot { flex-wrap: wrap; }

  body.sitiamo-page--contatti .cert-grid { grid-template-columns: 1fr; }
  body.sitiamo-page--contatti .cert-marks { flex-direction: column; align-items: center; gap: 2rem; }

  body.sitiamo-page--contatti .mm-footer-cols { grid-template-columns: 1fr; gap: var(--space-6); }
  body.sitiamo-page--contatti .mm-footer { padding-inline: 1.25rem; }
  /* 44px touch targets for every footer / nav link */
  body.sitiamo-page--contatti .mm-footer-col a { padding-block: 0.55rem; }

  body.sitiamo-page--contatti .maison-carousel { position: static; }
  body.sitiamo-page--contatti .mc-viewport { min-height: 17rem; }
  body.sitiamo-page--contatti .mc-dots { justify-content: center; }
}

/* ---- Small phone (≤430px) ----------------------------------- */
@media (max-width: 430px) {
  body.sitiamo-page--contatti .cat-grid { grid-template-columns: 1fr; max-width: 22rem; margin-inline: auto; }
  body.sitiamo-page--contatti .shop-card { grid-template-columns: 1fr; }
  body.sitiamo-page--contatti .shop-card-img { max-width: 15rem; }
  body.sitiamo-page--contatti .cat-tab { padding: 0.7rem 0.9rem; font-size: 0.625rem; }
  body.sitiamo-page--contatti .paper-title .carta-lead { max-width: none; }
  body.sitiamo-page--contatti .pslide figcaption .slide-cap { font-size: 10px; letter-spacing: 0.12em; }
  body.sitiamo-page--contatti .scene--catalogo, body.sitiamo-page--contatti .scene--maison { padding-inline: 1.1rem; }
}

/* ---- Short / landscape phones -------------------------------- */
@media (max-height: 560px) and (orientation: landscape) {
  body.sitiamo-page--contatti .paris-title { font-size: clamp(2.2rem, 7vh, 4rem); }
  body.sitiamo-page--contatti .paris-line { font-size: clamp(1rem, 3.2vh, 1.4rem); }
  body.sitiamo-page--contatti .paris-logo { width: min(260px, 40vw); }
  body.sitiamo-page--contatti .scroll-cue { display: none; }
  body.sitiamo-page--contatti .paper-title { top: 8vh; }
  body.sitiamo-page--contatti .paper-title .carta-lead { font-size: clamp(1.35rem, 5.2vh, 2.2rem); }
  body.sitiamo-page--contatti .mh-hero { height: 88svh; }
  body.sitiamo-page--contatti .shop-media { height: 72svh; }
}

/* ---- Touch: no hover-only affordances ------------------------ */
@media (hover: none) {
  body.sitiamo-page--contatti .shop-card:hover .shop-card-img img, body.sitiamo-page--contatti .piece:hover .piece-img img { transform: none; }
  body.sitiamo-page--contatti .mm-nav a, body.sitiamo-page--contatti .cat-tab, body.sitiamo-page--contatti .shop-card-cta, body.sitiamo-page--contatti .maison-cta, body.sitiamo-page--contatti .mm-footer-col a { min-height: 44px; display: inline-flex; align-items: center; }
  body.sitiamo-page--contatti .cat-tab { justify-content: center; }
  body.sitiamo-page--contatti .mc-dot { min-height: 44px; min-width: 44px; }
  /* Primary touch targets of the contact form. */
  body.sitiamo-page--contatti .ct-form input.forminator-input, body.sitiamo-page--contatti .ct-form select.forminator-select { min-height: 44px; }
  body.sitiamo-page--contatti .ct-form textarea { min-height: 6rem; }
}

/* ---- Reduced motion: reveal everything statically ------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  body.sitiamo-page--contatti [data-cap] { opacity: 1 !important; }
  body.sitiamo-page--contatti .forma-photo { opacity: 1 !important; transform: none !important; }
  body.sitiamo-page--contatti .forma-draw .ink { stroke-dashoffset: 0 !important; }
  body.sitiamo-page--contatti [data-reveal] .reveal-child, body.sitiamo-page--contatti [data-reveal] .carta-lead, body.sitiamo-page--contatti [data-reveal] .eyebrow { opacity: 1 !important; transform: none !important; }
  body.sitiamo-page--contatti .carta-lead.hw .hw-word { opacity: 1 !important; clip-path: none !important; }
  body.sitiamo-page--contatti .paris-frames { transform: none !important; }
}