/* =============================================================
   PIRAMARKETING — variables.css
   Design tokens: colors, typography, spacing, motion, breakpoints
   Warm Italian Luxury · Light · Leggibile · Affidabile
   ============================================================= */

   :root {

    /* ── BRAND COLORS ─────────────────────────────────────────── */
    --color-terra:        #B84018;   /* Terra bruciata — accent primario */
    --color-terra-dark:   #9A3212;   /* hover / pressed */
    --color-terra-light:  #D4622E;   /* tint */
    --color-terra-muted:  rgba(184, 64, 24, 0.07);
    --color-terra-muted2: rgba(184, 64, 24, 0.13);

    --color-rame:         #9C7726;   /* Oro sardo — accent secondario */
    --color-rame-dark:    #7E5F1A;
    --color-rame-muted:   rgba(156, 119, 38, 0.08);

    --color-olivo:        #405843;   /* Olivo sardo */
    --color-olivo-light:  #567558;
    --color-olivo-muted:  rgba(64, 88, 67, 0.08);

    /* ── NEUTRALS (warm light theme) ──────────────────────────── */
    --color-notte:        #F7F4EE;   /* Carta calda — main background */
    --color-fumo:         #F0EDE5;   /* Card / sezione alternata */
    --color-carbone:      #E8E3D8;   /* Input backgrounds, lichte fills */
    --color-ombra:        #D6D0C4;   /* Borders, dividers */
    --color-ombra-mid:    #C4BDAF;   /* Mid-tone border */
    --color-pietra:       #7A7268;   /* Muted body text — 5.2:1 contrast ✅ */
    --color-granito:      #9A9289;   /* Subtiel muted */

    /* ── TEXT (donker op licht) ───────────────────────────────── */
    --color-calcare:      #1C1710;   /* Warm near-black — primary text */
    --color-calcare-dim:  #3A332A;   /* Gedimde tekst */
    --color-avorio:       #5A5248;   /* Tertiaire tekst */

    /* ── SEMANTIC ─────────────────────────────────────────────── */
    --color-success:      #2E6B40;
    --color-warning:      #9C7726;
    --color-error:        #B03A16;
    --color-info:         #3A5E80;
  
    /* ── TYPOGRAPHY ───────────────────────────────────────────── */
    --font-display:       'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body:          'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:          'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  
    /* Font weights */
    --fw-light:           300;
    --fw-regular:         400;
    --fw-medium:          500;
    --fw-semibold:        600;
  
    /* Font sizes — fluid scale */
    --fs-10:              0.625rem;   /*  10px */
    --fs-11:              0.6875rem;  /*  11px */
    --fs-12:              0.75rem;    /*  12px */
    --fs-13:              0.8125rem;  /*  13px */
    --fs-14:              0.875rem;   /*  14px */
    --fs-16:              1rem;       /*  16px */
    --fs-18:              1.125rem;   /*  18px */
    --fs-20:              1.25rem;    /*  20px */
    --fs-24:              1.5rem;     /*  24px */
    --fs-28:              1.75rem;    /*  28px */
    --fs-32:              2rem;       /*  32px */
    --fs-40:              2.5rem;     /*  40px */
    --fs-48:              3rem;       /*  48px */
    --fs-56:              3.5rem;     /*  56px */
    --fs-64:              4rem;       /*  64px */
    --fs-80:              5rem;       /*  80px */
  
    /* Fluid hero heading: clamp(min, preferred, max) */
    --fs-hero:            clamp(3rem, 7vw, 5.5rem);
    --fs-section-title:   clamp(2rem, 4vw, 3.25rem);
    --fs-card-title:      clamp(1.1rem, 2vw, 1.3rem);
  
    /* Line heights */
    --lh-tight:           0.96;
    --lh-heading:         1.05;
    --lh-snug:            1.25;
    --lh-normal:          1.6;
    --lh-relaxed:         1.8;
    --lh-loose:           2.0;
  
    /* Letter spacing */
    --ls-tighter:         -0.04em;
    --ls-tight:           -0.02em;
    --ls-normal:          0;
    --ls-wide:            0.05em;
    --ls-wider:           0.1em;
    --ls-widest:          0.2em;
    --ls-label:           0.3em;     /* uppercase labels */
  
    /* ── SPACING SCALE ────────────────────────────────────────── */
    --space-1:    4px;
    --space-2:    8px;
    --space-3:    12px;
    --space-4:    16px;
    --space-5:    20px;
    --space-6:    24px;
    --space-8:    32px;
    --space-10:   40px;
    --space-12:   48px;
    --space-16:   64px;
    --space-20:   80px;
    --space-24:   96px;
    --space-32:  128px;
  
    /* Section vertical rhythm */
    --section-gap:        clamp(64px, 10vw, 120px);
    --section-gap-sm:     clamp(40px, 6vw, 72px);
  
    /* ── LAYOUT ───────────────────────────────────────────────── */
    --max-width:          1140px;
    --max-width-narrow:   820px;
    --max-width-text:     640px;
    --container-px:       clamp(20px, 5vw, 56px);
  
    /* Grid */
    --grid-cols:          12;
    --grid-gap:           clamp(16px, 2.5vw, 32px);
  
    /* ── BORDERS & RADIUS ─────────────────────────────────────── */
    --border-width:       0.5px;
    --border-color:       var(--color-ombra);
    --border-color-mid:   var(--color-ombra-mid);
    --border:             0.5px solid var(--color-ombra);
    --border-mid:         0.5px solid var(--color-ombra-mid);
  
    --radius-sm:          3px;
    --radius-md:          6px;
    --radius-lg:          10px;
    --radius-xl:          16px;
    --radius-full:        9999px;
  
    /* ── SHADOWS ──────────────────────────────────────────────── */
    --shadow-sm:          0 1px 4px rgba(28,23,16,.06), 0 0 0 1px rgba(28,23,16,.04);
    --shadow-md:          0 4px 20px rgba(28,23,16,.09), 0 1px 4px rgba(28,23,16,.05);
    --shadow-lg:          0 16px 56px rgba(28,23,16,.12), 0 4px 12px rgba(28,23,16,.06);
    --shadow-terra:       0 6px 28px rgba(184, 64, 24, 0.22);
    --shadow-terra-lg:    0 10px 44px rgba(184, 64, 24, 0.30);
  
    /* ── TRANSITIONS & MOTION ─────────────────────────────────── */
    --ease-out:           cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:        cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring:        cubic-bezier(0.34, 1.56, 0.64, 1);
  
    --duration-fast:      120ms;
    --duration-base:      220ms;
    --duration-slow:      380ms;
    --duration-enter:     560ms;
  
    --transition-base:    var(--duration-base) var(--ease-out);
    --transition-slow:    var(--duration-slow) var(--ease-out);
    --transition-color:   color var(--duration-base) var(--ease-out),
                          background-color var(--duration-base) var(--ease-out),
                          border-color var(--duration-base) var(--ease-out);
  
    /* ── Z-INDEX SCALE ────────────────────────────────────────── */
    --z-below:     -1;
    --z-base:       0;
    --z-raised:    10;
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-overlay:   300;
    --z-modal:     400;
    --z-toast:     500;
    --z-cursor:    9999;
  
    /* ── SARDIJNS PATROON ─────────────────────────────────────── */
    --pattern-sard: repeating-linear-gradient(
      90deg,
      var(--color-terra)    0   8px,
      transparent           8px 13px,
      var(--color-rame)     13px 19px,
      transparent           19px 26px,
      var(--color-olivo)    26px 32px,
      transparent           32px 42px
    );

    /* Overlay tokens */
    --overlay-subtle: rgba(28, 23, 16, 0.04);
    --overlay-mid:    rgba(28, 23, 16, 0.10);
    --overlay-heavy:  rgba(28, 23, 16, 0.72);
  
  }
  
  /* ── BREAKPOINTS (reference comments — use in media queries) ──
     --bp-sm:  480px
     --bp-md:  768px
     --bp-lg:  1024px
     --bp-xl:  1280px
     --bp-2xl: 1440px
     ─────────────────────────────────────────────────────────── */
  /* =============================================================
     PIRAMARKETING — base.css
     Reset, root, typography, accessibility, scroll, selection
     ============================================================= */
  
  /* Google Fonts geladen via functions.php (wp_enqueue_style 'ploko-fonts') */
  
  /* ── MODERN RESET ─────────────────────────────────────────── */
  *,
  *::before,
  *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    hanging-punctuation: first last;
  }
  
  body {
    background-color: var(--color-notte);
    /* Subtle paper grain texture */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.02'/%3E%3C/svg%3E");
    color: var(--color-calcare);
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
    font-size: var(--fs-16);
    line-height: var(--lh-relaxed);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    cursor: default;
  }
  
  /* ── TYPOGRAPHY BASE ──────────────────────────────────────── */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--fw-regular);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-tight);
    color: var(--color-calcare);
  }
  
  h1 { font-size: var(--fs-hero); }
  h2 { font-size: var(--fs-section-title); }
  h3 { font-size: var(--fs-24); }
  h4 { font-size: var(--fs-20); }
  h5 { font-size: var(--fs-18); }
  h6 { font-size: var(--fs-16); }
  
  p {
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
    font-size: var(--fs-14);
    line-height: var(--lh-relaxed);
    color: var(--color-pietra);
  }
  
  /* Lead paragraph */
  p.lead {
    font-size: var(--fs-16);
    line-height: var(--lh-normal);
    color: var(--color-calcare-dim);
    font-weight: var(--fw-regular);
  }
  
  /* Eyebrow / label utility */
  .eyebrow,
  [data-eyebrow] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
    font-size: var(--fs-10);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--color-terra);
  }
  
  .eyebrow::before {
    content: '';
    display: block;
    width: 24px;
    height: 0.5px;
    background: currentColor;
    flex-shrink: 0;
  }
  
  /* Italic / display accent */
  em.accent,
  i.accent {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--color-terra);
  }
  
  /* Strong */
  strong {
    font-weight: var(--fw-medium);
    color: var(--color-calcare);
  }
  
  /* ── LINKS ────────────────────────────────────────────────── */
  a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
  }
  
  a:focus-visible {
    outline: 2px solid var(--color-terra);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }
  
  /* ── IMAGES & MEDIA ───────────────────────────────────────── */
  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }
  
  img {
    height: auto;
    object-fit: cover;
  }
  
  /* ── LISTS ────────────────────────────────────────────────── */
  ul, ol {
    list-style: none;
  }
  
  /* ── FORMS ────────────────────────────────────────────────── */
  input,
  textarea,
  select,
  button {
    font: inherit;
    cursor: default;
  }
  
  button {
    background: none;
    border: none;
    cursor: pointer;
  }
  
  /* ── HORIZONTAL RULE ──────────────────────────────────────── */
  hr {
    border: none;
    border-top: var(--border);
  }
  
  /* ── BLOCKQUOTE ───────────────────────────────────────────── */
  blockquote {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: var(--fw-regular);
    font-size: var(--fs-28);
    line-height: 1.45;
    color: var(--color-calcare);
    letter-spacing: var(--ls-tight);
  }
  
  blockquote em {
    color: var(--color-terra);
    font-style: italic;
  }
  
  blockquote cite {
    display: block;
    margin-top: var(--space-6);
    font-family: var(--font-body);
    font-style: normal;
    font-size: var(--fs-10);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--color-pietra);
  }
  
  /* ── SELECTION ────────────────────────────────────────────── */
  ::selection {
    background: var(--color-terra);
    color: #F7F4EE;
  }
  
  ::-moz-selection {
    background: var(--color-terra);
    color: #F7F4EE;
  }
  
  /* ── SCROLLBAR ────────────────────────────────────────────── */
  ::-webkit-scrollbar {
    width: 4px;
  }
  
  ::-webkit-scrollbar-track {
    background: var(--color-fumo);
  }
  
  ::-webkit-scrollbar-thumb {
    background: var(--color-ombra-mid);
    border-radius: var(--radius-full);
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: var(--color-terra);
  }
  
  /* ── FOCUS MANAGEMENT ─────────────────────────────────────── */
  :focus {
    outline: none;
  }
  
  :focus-visible {
    outline: 1px solid var(--color-terra);
    outline-offset: 4px;
  }
  
  /* ── REDUCED MOTION ───────────────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
  
  /* ── ACCESSIBILITY HELPERS ────────────────────────────────── */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  
  .skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    z-index: var(--z-toast);
    background: var(--color-terra);
    color: var(--color-notte);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    font-weight: var(--fw-medium);
    font-size: var(--fs-14);
    transition: top var(--duration-fast);
  }
  
  .skip-link:focus {
    top: var(--space-4);
  }/* =============================================================
     PIRAMARKETING — layout.css
     Container, grid system, section rhythm, flex utilities
     ============================================================= */
  
  /* ── CONTAINER ────────────────────────────────────────────── */
  .container {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--container-px);
  }
  
  .container--narrow {
    max-width: var(--max-width-narrow);
  }
  
  .container--text {
    max-width: var(--max-width-text);
  }
  
  .container--flush {
    padding-inline: 0;
  }
  
  /* ── GRID SYSTEM ──────────────────────────────────────────── */
  .grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: var(--grid-gap);
  }
  
  /* Span helpers */
  .col-1  { grid-column: span 1; }
  .col-2  { grid-column: span 2; }
  .col-3  { grid-column: span 3; }
  .col-4  { grid-column: span 4; }
  .col-5  { grid-column: span 5; }
  .col-6  { grid-column: span 6; }
  .col-7  { grid-column: span 7; }
  .col-8  { grid-column: span 8; }
  .col-9  { grid-column: span 9; }
  .col-10 { grid-column: span 10; }
  .col-11 { grid-column: span 11; }
  .col-12 { grid-column: span 12; }
  
  /* Common two-column layouts */
  .grid--halves {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid--thirds {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .grid--quarters {
    grid-template-columns: repeat(4, 1fr);
  }
  
  /* Asymmetric: content + sidebar */
  .grid--content-aside {
    grid-template-columns: 1fr 340px;
    align-items: start;
  }
  
  /* Services list: number | body | tag */
  .grid--service {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: start;
    gap: var(--space-6);
  }
  
  /* ── FLEX UTILITIES ───────────────────────────────────────── */
  .flex         { display: flex; }
  .flex-col     { display: flex; flex-direction: column; }
  .flex-center  { display: flex; align-items: center; justify-content: center; }
  .flex-between { display: flex; align-items: center; justify-content: space-between; }
  .flex-start   { display: flex; align-items: flex-start; }
  .flex-end     { display: flex; align-items: flex-end; }
  .flex-wrap    { flex-wrap: wrap; }
  .flex-1       { flex: 1; }
  .flex-shrink-0 { flex-shrink: 0; }
  
  /* Gap utilities */
  .gap-1  { gap: var(--space-1); }
  .gap-2  { gap: var(--space-2); }
  .gap-3  { gap: var(--space-3); }
  .gap-4  { gap: var(--space-4); }
  .gap-6  { gap: var(--space-6); }
  .gap-8  { gap: var(--space-8); }
  .gap-10 { gap: var(--space-10); }
  .gap-12 { gap: var(--space-12); }
  
  /* ── SECTIONS ─────────────────────────────────────────────── */
  .section {
    padding-block: var(--section-gap);
  }
  
  .section--sm {
    padding-block: var(--section-gap-sm);
  }
  
  .section--flush-top  { padding-top: 0; }
  .section--flush-bottom { padding-bottom: 0; }
  
  /* Section divider line */
  .section__divider {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
  }
  
  .section__divider span {
    font-family: var(--font-body);
    font-size: var(--fs-10);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--color-pietra);
    white-space: nowrap;
  }
  
  .section__divider hr {
    flex: 1;
    border-top: var(--border);
  }
  
  /* Section header block */
  .section__header {
    margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));
  }
  
  .section__header .eyebrow {
    margin-bottom: var(--space-4);
  }
  
  .section__header h2 {
    max-width: 18ch;
    margin-bottom: var(--space-4);
  }
  
  .section__header p.lead {
    max-width: 52ch;
  }
  
  /* ── SITE STRUCTURE ───────────────────────────────────────── */
  .site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow: hidden;
  }
  
  .site-main {
    flex: 1;
  }
  
  /* ── HERO LAYOUT ──────────────────────────────────────────── */
  .hero-layout {
    position: relative;
    padding-top: clamp(100px, 14vh, 160px);
    padding-bottom: var(--section-gap);
  }
  
  .hero-layout__inner {
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--container-px);
  }
  
  /* ── STACK ────────────────────────────────────────────────── */
  /* Vertical rhythm via CSS lobotomized owl */
  .stack > * + * {
    margin-top: var(--space-4);
  }
  
  .stack--lg > * + * {
    margin-top: var(--space-8);
  }
  
  .stack--sm > * + * {
    margin-top: var(--space-2);
  }
  
  /* ── POSITION UTILITIES ───────────────────────────────────── */
  .relative  { position: relative; }
  .absolute  { position: absolute; }
  .sticky    { position: sticky; }
  .inset-0   { inset: 0; }
  
  /* ── OVERFLOW UTILITIES ───────────────────────────────────── */
  .overflow-hidden  { overflow: hidden; }
  .overflow-x-hidden { overflow-x: hidden; }
  
  /* ── DISPLAY UTILITIES ────────────────────────────────────── */
  .block         { display: block; }
  .inline-block  { display: inline-block; }
  .hidden        { display: none; }
  
  /* ── WIDTH UTILITIES ──────────────────────────────────────── */
  .w-full   { width: 100%; }
  .max-w-full { max-width: 100%; }
  
  /* ── RESPONSIVE GRID COLLAPSE ─────────────────────────────── */
  @media (max-width: 1024px) {
    .grid--quarters {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media (max-width: 768px) {
    .grid,
    .grid--halves,
    .grid--thirds,
    .grid--quarters,
    .grid--content-aside {
      grid-template-columns: 1fr;
    }
  
    .col-1, .col-2, .col-3, .col-4,
    .col-5, .col-6, .col-7, .col-8,
    .col-9, .col-10, .col-11, .col-12 {
      grid-column: span 1;
    }
  
    .grid--service {
      grid-template-columns: 40px 1fr;
    }
  
    /* Hide the pill tag column on mobile, show below */
    .grid--service > :last-child {
      grid-column: 2;
    }
  }
  
  @media (max-width: 480px) {
    .flex-between {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-4);
    }
  }
  /* =============================================================
     PIRAMARKETING — components.css
     All UI components: cursor, nav, buttons, cards, services,
     swatches, manifesto, pattern, footer, animations
     ============================================================= */
  
  /* ── CUSTOM CURSOR ────────────────────────────────────────── */
  .cursor {
    position: fixed;
    width: 8px;
    height: 8px;
    background: var(--color-terra);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition:
      width  var(--duration-base) var(--ease-out),
      height var(--duration-base) var(--ease-out),
      opacity var(--duration-base) var(--ease-out),
      background var(--duration-base) var(--ease-out);
    z-index: var(--z-cursor);
    will-change: transform;
  }
  
  .cursor-ring {
    position: fixed;
    width: 32px;
    height: 32px;
    border: 0.5px solid var(--color-terra);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition:
      left 80ms var(--ease-out),
      top  80ms var(--ease-out),
      width  var(--duration-base) var(--ease-spring),
      height var(--duration-base) var(--ease-spring),
      opacity var(--duration-base) var(--ease-out);
    z-index: calc(var(--z-cursor) - 1);
    opacity: 0.5;
    will-change: transform;
  }
  
  /* Cursor expand on interactive elements */
  body.cursor-hover .cursor {
    width: 14px;
    height: 14px;
  }
  
  body.cursor-hover .cursor-ring {
    width: 52px;
    height: 52px;
    opacity: 0.3;
  }
  
  /* Cursor on dark surfaces */
  body.cursor-text .cursor {
    width: 2px;
    height: 28px;
    border-radius: 1px;
    background: var(--color-calcare);
  }
  
  /* ── NURAGHE LOGO MARK ────────────────────────────────────── */
  .logo-mark {
    width: 40px;
    height: 44px;
    flex-shrink: 0;
  }
  
  .logo-mark svg {
    width: 100%;
    height: 100%;
  }
  
  .logo-wordmark {
    font-family: var(--font-body);
    font-weight: var(--fw-medium);
    font-size: var(--fs-14);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--color-calcare);
    line-height: 1;
  }
  
  .logo-wordmark em {
    color: var(--color-terra);
    font-style: normal;
  }
  
  .logo-tagline {
    font-size: var(--fs-10);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-pietra);
    margin-top: 4px;
  }
  
  /* ── NAVIGATION ───────────────────────────────────────────── */
  .site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    padding: var(--space-6) var(--container-px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background var(--duration-slow) var(--ease-out),
                border-color var(--duration-slow) var(--ease-out);
  }
  
  .site-nav.scrolled {
    background: rgba(247, 244, 238, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--color-ombra);
    box-shadow: 0 1px 0 var(--color-ombra), var(--shadow-sm);
  }
  
  .nav-logo {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    text-decoration: none;
  }
  
  .nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-8);
  }
  
  .nav-link {
    position: relative;
    font-family: var(--font-body);
    font-size: var(--fs-11);
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--color-pietra);
    text-decoration: none;
    padding-bottom: 4px;
    transition: color var(--transition-base);
  }
  
  .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0.5px;
    background: var(--color-terra);
    transition: width var(--duration-slow) var(--ease-out);
  }
  
  .nav-link:hover,
  .nav-link.active {
    color: var(--color-calcare);
  }
  
  .nav-link:hover::after,
  .nav-link.active::after {
    width: 100%;
  }
  
  /* Nav CTA button */
  .nav-cta {
    font-size: var(--fs-10);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--color-terra);
    border: 0.5px solid var(--color-ombra-mid);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    transition: var(--transition-color),
                border-color var(--transition-base);
  }
  
  .nav-cta:hover {
    color: #F7F4EE;
    background: var(--color-terra);
    border-color: var(--color-terra);
    box-shadow: var(--shadow-terra);
  }
  
  /* Mobile hamburger */
  .nav-burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 24px;
    cursor: pointer;
    padding: 4px 0;
  }
  
  .nav-burger span {
    display: block;
    height: 0.5px;
    background: var(--color-calcare);
    transition: transform var(--duration-base) var(--ease-out),
                opacity var(--duration-fast);
  }
  
  .nav-burger.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .nav-burger.open span:nth-child(2) { opacity: 0; }
  .nav-burger.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
  
  /* Mobile nav dropdown */
  .nav-mobile {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(247, 244, 238, 0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    z-index: calc(var(--z-sticky) - 1);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-slow) var(--ease-out);
  }
  
  .nav-mobile.open {
    display: flex;
    opacity: 1;
    pointer-events: auto;
  }
  
  .nav-mobile .nav-link {
    font-size: var(--fs-32);
    font-family: var(--font-display);
    letter-spacing: var(--ls-tight);
  }
  
  /* ── BUTTONS ──────────────────────────────────────────────── */
  
  .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-weight: var(--fw-medium);
    font-size: var(--fs-11);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    border-radius: var(--radius-sm);
    padding: var(--space-4) var(--space-8);
    transition: background var(--transition-base),
                color var(--transition-base),
                transform var(--duration-fast),
                box-shadow var(--transition-base);
    white-space: nowrap;
  }
  
  .btn:active {
    transform: scale(0.98);
  }
  
  .btn--primary {
    background: var(--color-terra);
    color: #F7F4EE;
    box-shadow: 0 2px 8px rgba(184,64,24,.18);
  }
  
  .btn--primary:hover {
    background: var(--color-terra-dark);
    color: #F7F4EE;
    box-shadow: var(--shadow-terra);
    transform: translateY(-1px);
  }
  
  /* Outline */
  .btn--outline {
    background: transparent;
    color: var(--color-calcare);
    border: 1px solid var(--color-ombra-mid);
  }
  
  .btn--outline:hover {
    border-color: var(--color-terra);
    color: var(--color-terra);
    background: var(--color-terra-muted);
  }
  
  /* Ghost / text */
  .btn--ghost {
    background: transparent;
    color: var(--color-pietra);
    padding-inline: 0;
    border-bottom: 1px solid var(--color-ombra);
    border-radius: 0;
  }
  
  .btn--ghost:hover {
    color: var(--color-calcare);
    border-bottom-color: var(--color-calcare);
  }
  
  /* Olivo accent */
  .btn--olivo {
    background: var(--color-olivo);
    color: #F7F4EE;
  }
  
  .btn--olivo:hover {
    background: var(--color-olivo-light);
  }
  
  /* Size variants */
  .btn--sm {
    font-size: var(--fs-10);
    padding: var(--space-2) var(--space-5);
  }
  
  .btn--lg {
    font-size: var(--fs-13);
    padding: var(--space-5) var(--space-10);
  }
  
  /* ── PILL / TAG ───────────────────────────────────────────── */
  .pill {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--fs-10);
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--color-rame);
    border: 0.5px solid var(--color-ombra);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: var(--transition-color),
                border-color var(--transition-base);
  }
  
  .pill--terra {
    color: var(--color-terra);
    border-color: rgba(212, 97, 42, 0.2);
  }
  
  .pill--olivo {
    color: var(--color-olivo-light);
    border-color: rgba(58, 74, 63, 0.4);
  }
  
  /* ── SERVICE ITEM ─────────────────────────────────────────── */
  .service-item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: start;
    gap: var(--space-6);
    padding-block: var(--space-10);
    border-bottom: var(--border);
    transition: background var(--duration-fast);
  }
  
  .service-item:first-of-type {
    border-top: var(--border);
  }
  
  .service-item:hover .service-num {
    color: var(--color-terra);
  }
  
  .service-item:hover .service-arrow {
    opacity: 1;
    transform: translateX(0);
  }
  
  .service-num {
    font-family: var(--font-body);
    font-size: var(--fs-10);
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-label);
    color: var(--color-pietra);
    padding-top: 3px;
    transition: color var(--transition-base);
  }
  
  .service-body h3 {
    font-family: var(--font-display);
    font-weight: var(--fw-regular);
    font-size: var(--fs-20);
    letter-spacing: var(--ls-tight);
    color: var(--color-calcare);
    margin-bottom: var(--space-3);
  }
  
  .service-body p {
    font-size: var(--fs-13);
    font-weight: var(--fw-light);
    line-height: var(--lh-relaxed);
    color: var(--color-pietra);
    max-width: 38ch;
  }
  
  .service-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
  }
  
  .service-arrow {
    font-size: var(--fs-18);
    color: var(--color-terra);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
  }
  
  /* ── COLOR SWATCH ─────────────────────────────────────────── */
  .swatch {
    flex: 1;
    min-width: 0;
  }
  
  .swatch__block {
    height: 72px;
    border-radius: var(--radius-sm);
    transition: transform var(--duration-base) var(--ease-spring);
    transform-origin: bottom;
  }
  
  .swatch:hover .swatch__block {
    transform: scaleY(1.07);
  }
  
  .swatch__name {
    font-size: var(--fs-10);
    font-weight: var(--fw-regular);
    color: var(--color-pietra);
    margin-top: var(--space-2);
    letter-spacing: 0.04em;
  }
  
  .swatch__hex {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--color-ombra-mid);
    margin-top: 2px;
  }
  
  /* ── TYPE SPECIMEN GRID ───────────────────────────────────── */
  .type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--color-ombra);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  
  .type-cell {
    background: var(--color-notte);
    padding: var(--space-10) var(--space-8);
  }
  
  .type-cell--alt {
    background: var(--color-fumo);
  }
  
  .type-cell__label {
    font-size: 9px;
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--color-pietra);
    margin-bottom: var(--space-5);
  }
  
  .type-cell__display {
    font-family: var(--font-display);
    font-weight: var(--fw-regular);
    font-size: clamp(2.5rem, 5vw, 3.2rem);
    line-height: 1.0;
    color: var(--color-calcare);
    letter-spacing: var(--ls-tight);
  }
  
  .type-cell__display i {
    color: var(--color-terra);
  }
  
  .type-cell__body {
    font-size: var(--fs-14);
    font-weight: var(--fw-light);
    line-height: var(--lh-relaxed);
    color: var(--color-pietra);
    margin-top: var(--space-1);
  }
  
  /* ── MANIFESTO BLOCK ──────────────────────────────────────── */
  .manifesto {
    position: relative;
    background: #FFFFFF;
    border: 1px solid var(--color-ombra);
    border-radius: var(--radius-lg);
    padding: clamp(var(--space-12), 6vw, var(--space-16)) clamp(var(--space-10), 6vw, var(--space-16));
    overflow: hidden;
    box-shadow: var(--shadow-sm);
  }
  
  .manifesto::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle at top right, rgba(184,64,24,.06) 0%, transparent 70%);
    pointer-events: none;
  }
  
  .manifesto::after {
    content: '"';
    position: absolute;
    top: -20px;
    left: var(--space-10);
    font-family: var(--font-display);
    font-size: 200px;
    color: var(--color-ombra);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    z-index: var(--z-below);
  }
  
  /* ── STATS / NUMBERS ──────────────────────────────────────── */
  .stat-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
  
  .stat-number {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--fs-56);
    line-height: 1;
    color: var(--color-terra);
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-tight);
  }
  
  .stat-label {
    font-size: var(--fs-12);
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--color-pietra);
  }
  
  /* ── CTA SECTION ──────────────────────────────────────────── */
  .cta-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    background: var(--color-calcare);
    border-radius: var(--radius-xl);
    padding: clamp(var(--space-10), 5vw, var(--space-16)) clamp(var(--space-8), 5vw, var(--space-16));
    position: relative; overflow: hidden;
  }
  
  .cta-block::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 80% at 90% 50%, rgba(184,64,24,.12) 0%, transparent 60%);
    pointer-events: none;
  }

  .cta-block h2 {
    max-width: 16ch;
    color: #F0EDE4;
    position: relative; z-index: 1;
  }
  
  .cta-block h2 em { color: var(--color-terra-light); }
  
  .cta-block__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-3);
    flex-shrink: 0;
    position: relative; z-index: 1;
  }
  
  /* ── SARDIJNS PATROON STRIP ───────────────────────────────── */
  .sardegna-pattern {
    height: 2px;
    background: var(--pattern-sard);
    opacity: 0.6;
    border-radius: var(--radius-full);
  }
  
  /* ── CARD ─────────────────────────────────────────────────── */
  .card {
    background: #FFFFFF;
    border: 1px solid var(--color-ombra);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
  }
  
  .card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
  
  .card--glass {
    background: rgba(247, 244, 238, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(214,208,196,.6);
    box-shadow: var(--shadow-sm);
  }
  
  .card__eyebrow {
    margin-bottom: var(--space-4);
  }
  
  .card__title {
    font-size: var(--fs-card-title);
    margin-bottom: var(--space-3);
  }
  
  .card__body {
    font-size: var(--fs-13);
    line-height: var(--lh-relaxed);
  }
  
  /* ── FORM ELEMENTS ────────────────────────────────────────── */
  .field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  
  .field label {
    font-size: var(--fs-11);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--color-pietra);
    font-weight: var(--fw-regular);
  }
  
  .field input,
  .field textarea,
  .field select {
    background: var(--color-notte);
    border: 1px solid var(--color-ombra);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    color: var(--color-calcare);
    font-size: var(--fs-14);
    font-weight: var(--fw-regular);
    outline: none;
    transition: border-color var(--transition-base),
                box-shadow var(--transition-base);
    width: 100%;
  }
  
  .field input:focus,
  .field textarea:focus,
  .field select:focus {
    border-color: var(--color-terra);
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(184,64,24,.08);
  }
  
  .field input::placeholder,
  .field textarea::placeholder {
    color: var(--color-granito);
  }
  
  /* ── SITE FOOTER ──────────────────────────────────────────── */
  .site-footer {
    padding-block: var(--section-gap-sm);
    border-top: 1px solid var(--color-ombra);
    background: #FFFFFF;
  }
  
  .footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-8);
    flex-wrap: wrap;
  }
  
  .footer-brand {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: var(--fw-regular);
    font-size: var(--fs-32);
    color: var(--color-terra);
    letter-spacing: var(--ls-tight);
  }
  
  .footer-meta {
    font-size: var(--fs-10);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--color-pietra);
    line-height: var(--lh-loose);
    margin-top: var(--space-2);
  }
  
  .footer-right {
    text-align: right;
  }
  
  .footer-right .footer-loc {
    font-size: var(--fs-10);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--color-pietra);
    line-height: var(--lh-loose);
  }
  
  .footer-right .footer-tag {
    font-size: var(--fs-10);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--color-olivo-light);
    margin-top: var(--space-1);
  }
  
  /* ── SCROLL REVEAL ANIMATION ──────────────────────────────── */
  [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity var(--duration-enter) var(--ease-out),
      transform var(--duration-enter) var(--ease-out);
  }
  
  [data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
  }
  
  [data-reveal-delay="1"] { transition-delay: 80ms; }
  [data-reveal-delay="2"] { transition-delay: 160ms; }
  [data-reveal-delay="3"] { transition-delay: 240ms; }
  [data-reveal-delay="4"] { transition-delay: 320ms; }
  
  /* ── LOADING / PAGE TRANSITION ────────────────────────────── */
  .page-loader {
    position: fixed;
    inset: 0;
    background: var(--color-notte);
    z-index: calc(var(--z-cursor) - 1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--duration-slow) var(--ease-out),
                visibility var(--duration-slow);
  }
  
  .page-loader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  
  /* ── RESPONSIVE COMPONENT ADJUSTMENTS ────────────────────── */
  @media (max-width: 1024px) {
    .cta-block {
      flex-direction: column;
      align-items: flex-start;
    }
  
    .cta-block__actions {
      align-items: flex-start;
      flex-direction: row;
      flex-wrap: wrap;
    }
  }
  
  @media (max-width: 768px) {
    .nav-links {
      display: none;
    }
  
    .nav-burger {
      display: flex;
    }
  
    .service-item {
      grid-template-columns: 40px 1fr;
    }
  
    .service-meta {
      grid-column: 2;
      align-items: flex-start;
      flex-direction: row;
      flex-wrap: wrap;
      gap: var(--space-3);
    }
  
    .service-arrow {
      display: none;
    }
  
    .type-grid {
      grid-template-columns: 1fr;
    }
  
    .footer-inner {
      flex-direction: column;
      align-items: flex-start;
    }
  
    .footer-right {
      text-align: left;
    }
  }
  
  @media (max-width: 480px) {
    .manifesto::after {
      font-size: 120px;
      top: -10px;
    }
  
    .stat-number {
      font-size: var(--fs-40);
    }
  }
  
  
  /* =============================================================
     PIRAMARKETING — page-home components
     Trust bar, Google badge, Process, Testimonials,
     FAQ, Contact form, Form status
     ============================================================= */
  
  /* ── TRUST BAR ────────────────────────────────────────────── */
  .trust-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-6);
    padding-block: var(--space-6);
    border-top: var(--border);
    border-bottom: var(--border);
  }
  
  .trust-bar__item {
    font-size: var(--fs-10);
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--color-pietra);
    white-space: nowrap;
  }
  
  /* ── GOOGLE BADGE ─────────────────────────────────────────── */
  .google-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-11);
    color: var(--color-pietra);
  }
  
  .google-badge__score {
    font-weight: var(--fw-medium);
    color: var(--color-calcare);
  }
  
  /* ── PROCESS ──────────────────────────────────────────────── */
  .process {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    padding-top: var(--space-8);
    border-top: var(--border);
  }
  
  .process-step {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-8);
    border: 1px solid var(--color-ombra);
    border-radius: var(--radius-lg);
    background: #FFFFFF;
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
  }
  
  .process-step:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
  
  .process-step__num {
    font-family: var(--font-body);
    font-size: var(--fs-10);
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-label);
    color: var(--color-terra);
  }
  
  .process-step h3 {
    font-size: var(--fs-18);
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-tight);
    color: var(--color-calcare);
  }
  
  .process-step p {
    font-size: var(--fs-13);
    line-height: var(--lh-relaxed);
    color: var(--color-pietra);
    flex: 1;
  }
  
  .process-step__time {
    font-size: var(--fs-10);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--color-ombra-mid);
    margin-top: auto;
  }
  
  /* ── TESTIMONIALS ─────────────────────────────────────────── */
  .testimonials {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
  
  .testimonial {
    background: #FFFFFF;
    border: 1px solid var(--color-ombra);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
  }
  
  .testimonial:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
  
  .testimonial__stars {
    display: flex;
    gap: var(--space-1);
  }
  
  .testimonial__star {
    width: 10px;
    height: 10px;
    background: var(--color-rame);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  }
  
  .testimonial__quote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--fs-16);
    line-height: var(--lh-normal);
    color: var(--color-calcare-dim);
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-tight);
    flex: 1;
  }
  
  .testimonial__author {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-top: var(--space-4);
    border-top: var(--border);
  }
  
  .testimonial__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-terra-muted);
    border: 0.5px solid var(--color-terra);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-10);
    font-weight: var(--fw-medium);
    letter-spacing: 0.05em;
    color: var(--color-terra);
    flex-shrink: 0;
  }
  
  .testimonial__name {
    font-size: var(--fs-13);
    font-weight: var(--fw-medium);
    color: var(--color-calcare);
  }
  
  .testimonial__role {
    font-size: var(--fs-11);
    color: var(--color-pietra);
    margin-top: 2px;
  }
  
  /* ── FAQ ──────────────────────────────────────────────────── */
  .faq {
    display: flex;
    flex-direction: column;
    border-top: var(--border);
  }
  
  .faq-item {
    border-bottom: var(--border);
  }
  
  .faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding-block: var(--space-6);
    font-family: var(--font-body);
    font-size: var(--fs-16);
    font-weight: var(--fw-light);
    color: var(--color-calcare-dim);
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--transition-base);
  }
  
  .faq-question:hover,
  .faq-question[aria-expanded="true"] {
    color: var(--color-calcare);
  }
  
  .faq-icon {
    font-size: var(--fs-20);
    color: var(--color-terra);
    flex-shrink: 0;
    transition: transform var(--duration-base) var(--ease-out);
    font-style: normal;
  }
  
  .faq-question[aria-expanded="true"] .faq-icon {
    transform: rotate(45deg);
  }
  
  .faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--duration-slow) var(--ease-out);
    overflow: hidden;
  }
  
  .faq-answer.open {
    grid-template-rows: 1fr;
  }
  
  .faq-answer__inner {
    overflow: hidden;
    padding-bottom: var(--space-6);
  }
  
  .faq-answer__inner p {
    font-size: var(--fs-14);
    line-height: var(--lh-relaxed);
    color: var(--color-pietra);
    max-width: 60ch;
  }
  
  /* ── CONTACT FORM ─────────────────────────────────────────── */
  .contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }
  
  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }
  
  .field textarea {
    min-height: 100px;
    resize: vertical;
  }
  
  .form-gdpr {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    cursor: pointer;
  }
  
  .form-gdpr input[type="checkbox"] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--color-terra);
    cursor: pointer;
  }
  
  .form-gdpr span {
    font-size: var(--fs-11);
    color: var(--color-pietra);
    line-height: var(--lh-relaxed);
  }
  
  .form-gdpr a {
    color: var(--color-terra);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  
  /* ── FORM STATUS ──────────────────────────────────────────── */
  .form-status {
    font-size: var(--fs-12);
    letter-spacing: var(--ls-wide);
    min-height: 1em;
  }
  
  .form-status--ok  { color: var(--color-success); }
  .form-status--err { color: var(--color-error); }
  
  /* ── FOOTER WHATSAPP LINK ─────────────────────────────────── */
  .footer-contact__whatsapp {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-12);
    color: #25D366;
    transition: opacity var(--transition-base);
  }
  
  .footer-contact__whatsapp:hover {
    opacity: 0.8;
  }
  
  /* ── RESPONSIVE — PAGE HOME ───────────────────────────────── */
  @media (max-width: 1024px) {
    .process {
      grid-template-columns: 1fr;
    }
  
    .testimonials {
      grid-template-columns: 1fr;
    }
  }
  
  @media (max-width: 768px) {
    .trust-bar {
      gap: var(--space-4);
    }
  
    .form-row {
      grid-template-columns: 1fr;
    }
  
    /* Hero two-column → single column on mobile */
    section.hero-layout [style*="grid-template-columns:1fr 1fr"] {
      grid-template-columns: 1fr !important;
    }
  
    /* Contact section two-column → single column */
    #contatti [style*="grid-template-columns:1fr 1fr"] {
      grid-template-columns: 1fr !important;
    }
  }