/* =============================================================================
   Mark PR — Main Stylesheet
   Mobile-first · CSS custom properties · BEM + Bootstrap
   ============================================================================= */


/* ── Fonts (self-hosted, variable) ───────────────────────────────────────────── */
/* Geist (sans, body/UI) + Cormorant Garamond (serif, display/heading).
   File variabili: un solo woff2 per subset copre tutti i pesi. */

@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/geist-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/geist-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('../fonts/cormorant-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('../fonts/cormorant-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ── Custom Properties ───────────────────────────────────────────────────────── */

:root {
    /* ── Palette (Figma, B/N) ─────────────────────────────── */
    --color-black:        #000000;
    --color-white:        #ffffff;
    --color-gray-light:   #ededed;   /* fondo/gradiente footer */
    --color-bg-soft:      #fbfbfb;   /* fondino sezioni (insights, progetti) */
    --card-grad-from:     #dddddd;    /* card servizio rest */
    --card-grad-to:       #f7f7f7;
    --color-bg:           var(--color-white);
    --color-text:         var(--color-black);
    --color-border:       rgba(0,0,0,.12);
    --color-text-muted:   #7d7d7d;   /* meta/etichette secondarie */
    --color-gray-mid:     #c9c9c9;   /* controlli disabilitati (frecce carousel) */

    /* Bootstrap bridge */
    --bs-primary:         var(--color-black);

    /* ── Font family (già self-hosted) ────────────────────── */
    --font-family-base:    'Geist', system-ui, -apple-system, sans-serif;
    --font-family-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --line-height-base:    1.6;

    /* ── Type scale (--fs-NN = px @1920) — crescita lenta come temi fratelli (fm/derossi):
       base 1rem, il valore resta ~min per tutta la fascia -md e raggiunge il max solo a ~1920,
       così i testi in colonna (col-md-*) restano leggibili. */
    --fs-12:  0.75rem;                                     /* tag/badge — fisso */
    --fs-13:  0.8125rem;                                   /* didascalie — fisso */
    --fs-14:  0.875rem;                                    /* eyebrow — fisso */
    --fs-16:  1rem;                                        /* bottone/nav — fisso */
    --fs-18:  clamp(1rem,    0.1vw  + 1rem,  1.125rem);    /* 16→18 body */
    --fs-22:  clamp(1.125rem, 0.31vw + 1rem, 1.375rem);    /* 18→22 sottotitolo */
    --fs-28:  clamp(1.25rem, 0.63vw + 1rem,  1.75rem);     /* 20→28 pre-titolo/intro */
    --fs-32:  clamp(1.375rem, 0.9vw + 1rem,  2rem);         /* 22→32 sottotitolo feature About */
    --fs-40:  clamp(1.5rem,  1.25vw + 1rem,  2.5rem);      /* 24→40 titoli */
    --fs-56:  clamp(2rem,    2.08vw + 1rem,  3.5rem);      /* 32→56 page-title */
    --fs-64:  clamp(2.5rem,  2.5vw  + 1rem,  4rem);        /* 40→64 anno timeline About */
    --fs-72:  clamp(2.25rem, 2.92vw + 1rem,  4.5rem);      /* 36→72 titolo hero single */
    --fs-80:  clamp(2.5rem,  3.33vw + 1rem,  5rem);        /* 40→80 */
    --fs-96:  clamp(2.75rem, 4.17vw + 1rem,  6rem);        /* 44→96 hero */
    --fs-110: clamp(3rem,    4.90vw + 1rem,  6.875rem);    /* 48→110 titolo pagina (Contatti) */

    /* ── Spacing verticale ────────────────────────────────── */
    --p-60:   clamp(20px, 3.125vw, 60px);
    --p-90:   clamp(30px, 4.69vw,  90px);
    --p-120:  clamp(60px, 6.25vw,  120px);
    --p-160:  clamp(90px, 8.33vw,  160px);
    /* Testata pagina: clearance header fixed + respiro fino al titolo (Figma).
       Applicato direttamente alla prima sezione con titolo (.page-hero/.contact),
       NON via .main--offset (che scarica solo l'altezza barra). ~300px @1920. */
    --p-head: clamp(7.5rem, 10vw + 6.75rem, 18.75rem);

    /* ── Gutter (gutter-off = bs-gutter-x pieno; padding container = metà) ─
       Mobile-first, cresce a step: 6vw → 12vw (≥768) → 24vw (≥1200).
       Override in fondo al file (:root nelle media query min-width). */
    --gutter-off:   max(1.25rem, 6vw);
    --gutter-half:  calc(var(--gutter-off) / 2);
    --gutter-in:    max(0.9375rem, 0.8125vw);

    /* Ingombro header fixed — usato da .main--offset per liberare le pagine
       che NON iniziano con una cover full-bleed (hero) sotto la barra. */
    --header-h: 6.5rem;

    /* ── Focus ────────────────────────────────────────────── */
    --focus-ring:  3px solid var(--color-black);

    /* Transitions */
    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base:   0.25s var(--transition-timing);

    /* Header — solo per scroll-padding e spacer, mai min-height su .header */
    --header-height:    72px;
    --header-height-lg: 80px;
}

/* Gutter responsive — step mobile-first (min-width). Il padding container = metà. */
@media (min-width: 768px)  { :root { --gutter-off: 12vw; } }
@media (min-width: 1200px) { :root { --gutter-off: 24vw; } }


/* ── Reset minimale ──────────────────────────────────────────────────────────── */
/* Bootstrap reboot copre il grosso. Qui solo ciò che non gestisce. */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
}

p {
    margin-block: 0;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;   /* off-canvas: il drawer chiuso sta fuori a destra → niente scroll-x */
}

body {
    font-family:             var(--font-family-base);
    font-size:               var(--fs-16);
    line-height:             var(--line-height-base);
    color:                   var(--color-text);
    background:              var(--color-bg);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Nasconde il bordo su img senza src o con src vuoto */
img:not([src]),
img[src=""] {
    visibility: hidden;
}


/* ── Media utilities ─────────────────────────────────────────────────────────── */
/*
 * Pattern: wrapper posizionato + immagine assoluta che riempie il container.
 * Usare un <div class="media"> lascia <figure> libero per la semantica HTML:
 *
 *   Semplice:
 *   <div class="media" style="aspect-ratio: 16/9">
 *       <img class="img-cover" src="..." alt="..." loading="lazy">
 *   </div>
 *
 *   Con caption (semantica corretta):
 *   <figure>
 *       <div class="media" style="aspect-ratio: 16/9">
 *           <img class="img-cover" src="..." alt="..." loading="lazy">
 *       </div>
 *       <figcaption>Didascalia</figcaption>
 *   </figure>
 *
 * .media       — wrapper (position: relative, display: block)
 * .media-bg    — wrapper decorativo: no pointer-events, no select.
 *                Supporta ::after per overlay (solo su <div>, non su <img>)
 * .img-cover   — riempie il wrapper, object-fit: cover   (foto, hero, card)
 * .img-contain — riempie il wrapper, object-fit: contain (loghi, illustrazioni)
 * .img-scale   — riempie il wrapper, object-fit: scale-down (icone, asset misti)
 *
 * NB: Bootstrap ha .object-fit-cover ecc. ma senza il posizionamento assoluto —
 * queste classi coprono il pattern "fill container" completo.
 */

.media {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}

.img-cover,
.img-contain,
.img-scale,
.media-bg,
.media-bg::after {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.img-contain { object-fit: contain; }
.img-scale   { object-fit: scale-down; }

::selection {
    background: rgba(0,0,0,.15);
    color: var(--color-black);
}


/* ── Link base ───────────────────────────────────────────────────────────────── */
/* Neutri di default — colore e stile aggiunto nel contesto (header, footer, .text…) */

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-base);
}

/* Rimuove l'outline al click/tap ma lo preserva per navigazione da tastiera — EAA */
a:focus:not(:focus-visible) {
    outline: none;
}


/* ── Accessibility ───────────────────────────────────────────────────────────── */

/* Focus ring — EAA / WCAG 2.4.7 */
:focus-visible {
    outline: 3px solid var(--color-black);
    outline-offset: 2px;
}

/* Skip link — usa .visually-hidden-focusable di Bootstrap per show-on-focus */
.skip-link {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 9999;
    padding: 0.5rem 1rem;
    background: var(--color-black);
    color: #fff;
    font-weight: 600;
    border-radius: 4px;
}


/* ── Loader ──────────────────────────────────────────────────────────────────── */

.site-loader {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.site-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.site-loader__bars {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 16px;
}

.site-loader__bars span {
    display: inline-block;
    width: 1px;
    height: 100%;
    background: var(--color-black);
    animation: stretchdelay 1.2s ease-in-out infinite;
}

.site-loader__bars span:nth-child(2) { animation-delay: -1.1s; }
.site-loader__bars span:nth-child(3) { animation-delay: -1.0s; }
.site-loader__bars span:nth-child(4) { animation-delay: -0.9s; }
.site-loader__bars span:nth-child(5) { animation-delay: -0.8s; }

@keyframes stretchdelay {
    0%, 40%, 100% { transform: scaleY(0.4); }
    20%           { transform: scaleY(1); }
}


/* ── Brand (logo) ────────────────────────────────────────────────────────────── */
/* mpr_brand() in template-parts/brand.php — colore via currentColor, no PNG/CDN. */

.brand__logo    { height: 24px; width: auto; fill: currentColor; }
.brand--dark    { color: var(--color-black); }
.brand--light   { color: var(--color-white); }


/* ── Layout — Bootstrap overrides ───────────────────────────────────────────── */

.container-fluid {
    --bs-gutter-x: var(--gutter-off);
}

.row {
    --bs-gutter-x: var(--gutter-in);
}


/* ── Bootstrap .btn — override globali ──────────────────────────────────────── */
/*
 * Mai ricreare bottoni da zero — usare sempre classi Bootstrap native (.btn-primary, .btn-light…).
 * Le varianti progetto si definiscono sovrascrivendo --bs-btn-* sulla classe specifica.
 */

.btn {
    --bs-btn-font-family:      var(--font-family-base);
    --bs-btn-font-size:        var(--fs-16);
    --bs-btn-font-weight:      600;
    --bs-btn-padding-x:        1.875rem;
    --bs-btn-padding-y:        0.765rem;
    --bs-btn-border-radius:    100px;
    --bs-btn-focus-box-shadow: 0 0 0 3px rgba(0,0,0,.35);
    letter-spacing: -0.01em;
}


/* ── .text — Prosa ───────────────────────────────────────────────────────────── */
/*
 * Classe riutilizzabile per qualsiasi box testuale (moduli, descrizioni, body...).
 * Usare class="text" sul wrapper del contenuto.
 * Per contenuto editoriale full (page.php) combinare: class="page-content__body text"
 */

/* Stile corpo testo = Figma "5 Testo": Geist Light 18 / lh 1.6 / ls 0.8px. */
.text {
    font-weight: 300;
    font-size: var(--fs-18);
    line-height: 1.6;
    letter-spacing: .044em;
}

/* Gerarchia heading relativa al font-size del contesto (.text)
   em è corretto qui: scala automaticamente se .text cambia dimensione */
.text :is(h1, h2)     { font-size: 1.5em; }
.text :is(h3, h4)     { font-size: 1.25em; }
.text :is(h5, h6)     { font-size: 1.1em; }

.text :is(h1, h2, h3, h4, h5, h6) {
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0;
}

.text :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
    padding-top: 2em;
}

.text :is(p, ul, ol):not(:first-child) {
    padding-top: 1.2em;
}

.text :is(ul, ol) {
    padding-left: 1em;
}

.text strong {
    font-weight: 600;
}

.text a:not(.btn) {
    color: var(--color-black);
    text-decoration: underline;
}

.text a:not(.btn):hover {
    text-decoration: none;
}


/* ── Eyebrow & Title — tipografia modulare ───────────────────────────────────── */
/*
 * Classi standalone riutilizzabili nei moduli flessibili e ovunque serva
 * un blocco titolo strutturato. Non BEM — si usano da sole o in combinazione.
 *
 *   <p class="eyebrow">I nostri servizi</p>
 *   <h2 class="title">Cosa facciamo per te</h2>
 */

.eyebrow {
    display: block;
    font-size: var(--fs-14);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-black);
    margin-bottom: 0.75rem;
}

.title {
    font-size: var(--fs-40);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 1.5rem;
}


/* ── Page wrap — pagine semplici (legal, 404…) ───────────────────────────────── */
/*
 * .page-wrap    — padding verticale di sezione, max-width leggibile, centrato
 * .page-title   — h1 standalone, usabile in page.php, 404.php e simili
 *
 * page.php:  class="page-wrap"  +  class="page-title"  +  class="text"
 * 404.php:   class="page-wrap"  +  class="page-title"
 */

.page-wrap {
    padding-block: var(--p-head) var(--p-120);
}

/* Stesso stile del titolo pagina Servizi (.page-hero__title): Cormorant 500, non bold sans. */
.page-title {
    font-family: var(--font-family-heading);
    font-weight: 500;
    font-size: var(--fs-96);
    line-height: 1;
    letter-spacing: -.01em;
    margin-bottom: var(--p-60);
}

/* .page-content__body mantiene line-height editoriale per testi lunghi */
.page-content__body {
    font-size: var(--fs-16);
    line-height: 1.8;
}


/* ── Module: Hero ────────────────────────────────────────────────────────────── */

.module-hero {
    position: relative;
    min-height: clamp(60vh, 80vh, 90vh);
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--color-black);
    color: #fff;
}

.module-hero__media {
    position: absolute;
    inset: 0;
    margin: 0;
}

.module-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.45;
}

.module-hero__overlay {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-block: var(--p-90);
}

.module-hero__title {
    font-size: var(--fs-80);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 1rem;
    color: inherit;
}

.module-hero__subtitle {
    font-size: var(--fs-22);
    margin-bottom: 2rem;
    color: rgba(255,255,255,0.85);
}

.module-hero__cta {
    padding: 0.75rem 2rem;
    font-weight: 600;
}


/* ── Card Post ───────────────────────────────────────────────────────────────── */

.card-post {
    margin-bottom: 2rem;
}

.card-post__img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin-bottom: 1rem;
    border-radius: 4px;
}

.card-post__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.card-post__title a:hover,
.card-post__title a:focus-visible {
    color: var(--color-black);
}

.card-post__excerpt p {
    color: rgba(0,0,0,.6);
    font-size: 0.9375rem;
}


/* ── 404 ─────────────────────────────────────────────────────────────────────── */
/* Nessuna regola specifica: usa il body text di default + .page-wrap + .page-title */


/* ── Site header — barra frosted ──────────────────────────────────────────────── */

.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;padding-block:1.5rem;
  padding-inline:max(1rem, var(--gutter-half));pointer-events:none}
/* Header fixed sovrapposto al contenuto. L'offset NON è globale: ogni layout
   dichiara il proprio comportamento. Pagine con cover full-bleed in cima (home,
   singoli con hero) restano flush; le altre aggiungono .main--offset. */
.main--offset{padding-top:var(--header-h)}
/* Barra frosted. --glass-pad-x = padding orizzontale interno; da ≥768 la barra
   sconfina nel gutter di quel valore così logo/menu si allineano al contenuto. */
.site-header__bar{--glass-pad-x:2rem;border-radius:8px;pointer-events:auto;
  background:rgba(255,255,255,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 6px 60px rgba(0,0,0,.03),0 0 83px rgba(0,0,0,.06)}
.site-header__inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:2rem;padding:1.1rem 1.5rem}
/* Base = mobile: menu inline nascosto (mobile usa il drawer), burger visibile. */
.site-header__nav{display:none}
.primary-menu{position:relative;display:flex;gap:2rem;list-style:none;margin:0;padding:0;
  font-family:var(--font-family-base);font-size:var(--fs-16)}
.primary-menu a{color:var(--color-black);text-decoration:none}
/* Indicatore a pallino (richiama il • del logo) sotto la voce: scorre sulla voce
   in hover, torna sull'attiva al mouseleave. Posizione via JS (initMenuDot). */
.primary-menu__dot{position:absolute;bottom:-.5rem;left:0;width:5px;height:5px;
  border-radius:50%;background:var(--color-black);opacity:0;transform:translateX(-50%);
  transition:transform .3s var(--transition-timing),opacity .2s;pointer-events:none}
@media(prefers-reduced-motion:reduce){.primary-menu__dot{transition:opacity .2s}}

/* Burger (mobile) — 1 linea + pseudo → X quando drawer aperto.
   Bottone piccolo (dimensione del burger, non rompe gli allineamenti); l'area di
   click resta ≥44px via ::before invisibile centrato (touch target WCAG). */
.site-header__toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:0;background:none;border:0;cursor:pointer;color:var(--color-black)}
.site-header__toggle::before{content:"";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:44px;height:44px}
.site-header__toggle:focus-visible{outline:var(--focus-ring);outline-offset:6px;border-radius:2px}
.site-header__burger,.site-header__burger::before,.site-header__burger::after{
  display:block;width:26px;height:2px;background:currentColor;border-radius:1px}
.site-header__burger{position:relative}
.site-header__burger::before,.site-header__burger::after{content:"";position:absolute;left:0;
  transition:transform .3s var(--transition-timing),top .3s,bottom .3s}
.site-header__burger::before{top:-8px}
.site-header__burger::after{bottom:-8px}
body.menu-open .site-header__burger{background:transparent}
body.menu-open .site-header__burger::before{top:0;transform:rotate(45deg)}
body.menu-open .site-header__burger::after{bottom:0;transform:rotate(-45deg)}
body.menu-open{overflow:hidden}

/* ≥768: logo/menu allineati al gutter di contenuto (barra sconfina di --glass-pad-x). */
@media(min-width:768px){
  .site-header__bar{margin-inline:calc(-1 * var(--glass-pad-x))}
  .site-header__inner{padding-inline:var(--glass-pad-x)}
}

/* ≥992: menu inline visibile, niente burger né drawer. */
@media(min-width:992px){
  .site-header__nav{display:block}
  .site-header__toggle{display:none}
  .nav-drawer,.nav-drawer__backdrop{display:none}
}

/* ── Nav drawer mobile (slide-in da destra, meccanismo da temi fratelli) ─────────── */
.nav-drawer__backdrop{position:fixed;inset:0;z-index:1090;background:rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transition:opacity .3s var(--transition-timing),visibility 0s linear .3s}
body.menu-open .nav-drawer__backdrop{opacity:1;visibility:visible;
  transition:opacity .3s var(--transition-timing),visibility 0s linear 0s}
.nav-drawer{position:fixed;top:0;right:0;z-index:1100;width:min(360px,86vw);height:100dvh;
  background:var(--color-white);transform:translateX(100%);visibility:hidden;
  transition:transform .35s var(--transition-timing),visibility 0s linear .35s}
body.menu-open .nav-drawer{transform:translateX(0);visibility:visible;
  transition:transform .35s var(--transition-timing),visibility 0s linear 0s}
.nav-drawer__panel{display:flex;flex-direction:column;height:100%;overflow-y:auto;overscroll-behavior:contain}
.nav-drawer__head{display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.25rem;border-bottom:1px solid var(--color-border)}
.nav-drawer__close{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  padding:0;background:none;border:0;color:var(--color-black);cursor:pointer;border-radius:8px}
.nav-drawer__close:focus-visible{outline:var(--focus-ring);outline-offset:2px}
.nav-drawer__nav{padding:.5rem 0}
.nav-drawer__menu{list-style:none;margin:0;padding:0}
.nav-drawer__menu li{border-bottom:1px solid var(--color-border)}
.nav-drawer__menu a{display:block;padding:.9rem 1.25rem;color:var(--color-black);
  font-family:var(--font-family-base);font-size:var(--fs-22);text-decoration:none}
.nav-drawer__menu a:hover,.nav-drawer__menu .current-menu-item a{text-decoration:underline}
.nav-drawer__menu a:focus-visible{outline:var(--focus-ring);outline-offset:-3px}

/* ── Edit post link (admin) — pill flottante bottom-right ─────────────────────── */
.post-edit-link{position:fixed;z-index:9999;bottom:0;right:0;padding:10px 18px;
  background:var(--color-black);color:var(--color-white);
  font-family:var(--font-family-base);font-size:var(--fs-14);font-weight:600;
  text-decoration:none;border-top-left-radius:8px;box-shadow:0 4px 10px rgba(0,0,0,.15);
  transition:transform .2s ease,opacity .2s ease}
.post-edit-link:hover,.post-edit-link:focus-visible{color:var(--color-white);opacity:.85}


/* ── Bottone .btn-dot ────────────────────────────────────────────────────────── */
/* Pill-shaped button con dot decorativo. Struttura color-agnostic: colore/bordo/hover
   arrivano da Bootstrap .btn-outline-dark / .btn-outline-light (markup: .btn .btn-outline-* .btn-dot) */

.btn-dot {
    --bs-btn-border-radius: 100px;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: .625rem;
    --bs-btn-font-family: var(--font-family-base);
    --bs-btn-font-size: var(--fs-16);
    --bs-btn-font-weight: 300;
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    letter-spacing: .0125em;
    line-height: 1.5;
    white-space: nowrap;      /* pill non deve mai spezzarsi su più righe */
    flex: 0 0 auto;
}

.btn-dot__dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.btn-dot:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 3px;
}


/* ── Site footer — fascia CTA nera + footer bianco (ACF Options) ─────────────── */

.cta-band{background:var(--color-black);color:var(--color-white);padding-block:var(--fs-40)}
.cta-band__inner{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.cta-band__title{font-family:var(--font-family-heading);font-size:var(--fs-40);line-height:1;text-wrap:balance;margin:0}
.footer-main{background:linear-gradient(168deg,var(--color-gray-light) 0%,rgba(237,237,237,.15) 71%),var(--color-white);padding-block:var(--p-60)}
.footer-main__brand .brand__logo{height:44px}
.footer-main__contacts{display:flex;flex-direction:column;gap:1.5rem;font-size:var(--fs-14);font-style:normal;line-height:1.5;margin-top:4.5rem}
.footer-main__contacts strong{font-weight:500}
.footer-main__tagline{font-family:var(--font-family-heading);font-weight:400;font-size:var(--fs-28);line-height:1;letter-spacing:-.015em;margin:0}
.footer-main__social{display:flex;gap:1rem;list-style:none;padding:0;margin:1.75rem 0 0}
.footer-main__social a{display:inline-flex;color:var(--color-black)}
.footer-main__social svg{width:auto;height:22px;fill:currentColor}
.legal-menu{display:flex;flex-wrap:wrap;gap:1.75rem;list-style:none;padding:0;margin:0}
.legal-menu a{color:var(--color-black);text-decoration:none}
.legal-menu a:hover{text-decoration:underline}


/* ── Blocco services-grid — card servizio (rest gradiente / hover thumbnail) ── */

.services-grid{padding-block:var(--p-120)}
/* Heading = pre-titolo Geist 28 centrato (Figma "4 Pre-titolo"), non serif. */
.services-grid__title{font-family:var(--font-family-base);font-weight:400;
  font-size:var(--fs-28);line-height:1.4;letter-spacing:.018em;text-align:center;
  margin:0 0 var(--p-60)}
/* Card a filo (Figma): il `.row` boilerplate imposta --bs-gutter-x:var(--gutter-in)
   sovrascrivendo `.g-0` di Bootstrap (caricato prima) → azzero qui con specificità sup. */
.services-grid .row{--bs-gutter-x:0}

.service-card{position:relative;isolation:isolate;display:grid;place-items:center;
  min-height:100%;aspect-ratio:5/3;padding:2rem;text-align:center;overflow:clip;
  background:linear-gradient(214.28deg,var(--card-grad-from) 73.42%,var(--card-grad-to) 100%)}
/* Sfumature per posizione (Figma): 2 basi (A 214°/73%, B 242°/37%) a scacchiera,
   righe pari ruotate 180° → gli angoli chiari si specchiano sulle giunzioni. */
.services-grid article:nth-child(4n+2) .service-card{
  background:linear-gradient(242.38deg,var(--card-grad-from) 36.71%,var(--card-grad-to) 85.84%)}
.services-grid article:nth-child(4n+3) .service-card{
  background:linear-gradient(62.38deg,var(--card-grad-from) 36.71%,var(--card-grad-to) 85.84%)}
.services-grid article:nth-child(4n+4) .service-card{
  background:linear-gradient(34.28deg,var(--card-grad-from) 73.42%,var(--card-grad-to) 100%)}
/* Flex-services a 3 colonne (lancio single): i 3 gradienti esatti del Figma 3-up,
   non lo schema a scacchiera 2×2 (che a 3 col sbaglia gli angoli). */
.flex-services .col-md-4:nth-child(1) .service-card{
  background:linear-gradient(225.71deg,var(--card-grad-from) 73.42%,var(--card-grad-to) 100%)}
.flex-services .col-md-4:nth-child(2) .service-card{
  background:linear-gradient(250.82deg,var(--card-grad-from) 36.71%,var(--card-grad-to) 85.84%)}
.flex-services .col-md-4:nth-child(3) .service-card{
  background:linear-gradient(203.57deg,var(--card-grad-from) 0.42%,var(--card-grad-to) 76.99%)}
/* z-index:-1 dentro lo stacking context della card (isolation:isolate): media hover
   sopra al gradiente ma sotto al testo. Il titolo NON è posizionato → lo stretched-link
   trova come antenato la .service-card e copre tutta la card. */
/* Hover via :has(.stretched-link:hover) → fira solo sopra il link reale (non gap
   card); :focus-within per tastiera. Media e titolo stesso timing (.4s). */
.service-card__media{z-index:-1;opacity:0;transition:opacity .4s}
.service-card:has(.stretched-link:hover) .service-card__media,
.service-card:focus-within .service-card__media{opacity:1}
/* Overlay grigio in multiply sopra la foto (Figma): scurisce l'immagine su hover. */
.service-card__media::after{content:"";background:#606060;mix-blend-mode:multiply}
.service-card__title{font-family:var(--font-family-heading);
  font-weight:500;font-size:var(--fs-40);line-height:1.1;letter-spacing:-.02em;
  text-wrap:balance;margin:0}
.service-card:has(.stretched-link:hover) .service-card__title,
.service-card:focus-within .service-card__title{color:var(--color-white)}
/* transition sull'anchor (non sull'h3): il testo è dentro .stretched-link, che
   eredita il colore e lo anima con la SUA transition → override il global a{.25s}
   per allinearlo agli .4s del media. */
.service-card__title a{color:inherit;text-decoration:none;transition:color .4s}


/* ── Blocco insights-latest — righe data | titolo+CTA+tag | media ── */

.insights-latest{background:var(--color-bg-soft);padding-block:var(--p-120)}
.insights-latest__list{list-style:none;margin:0;padding:0}

.insight-row{position:relative;display:grid;gap:1.5rem 2rem;padding-block:var(--fs-40)}
/* Bordo solo tra righe adiacenti (non sopra la prima, non sotto l'ultima). */
.insight-row + .insight-row{border-top:1px solid var(--color-gray-light)}
@media (min-width:768px){
  .insight-row{grid-template-columns:minmax(8rem,0.7fr) minmax(0,2.4fr) minmax(0,1.6fr);
    column-gap:clamp(1.5rem,4vw,5rem)}
}
.insight-row__date{font-family:var(--font-family-base);font-size:var(--fs-13);white-space:nowrap}
.insight-row__body{display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem}
.insight-row__title{font-family:var(--font-family-heading);font-weight:500;
  font-size:var(--fs-40);line-height:1.1;letter-spacing:-.02em;text-wrap:pretty;margin:0}
.insight-row__title a{color:inherit;text-decoration:none}
/* CTA reale sopra lo stretched-link (z-index:1) → hover/click propri (pattern Apple tile-ctas). */
.insight-row__cta{align-self:flex-start;position:relative;z-index:2}
.insight-row__tag{font-family:var(--font-family-base);font-size:var(--fs-12);line-height:1.1;
  background:var(--color-gray-light);padding:.4167em;border-radius:2px;margin-top:auto}
/* Wrapper .media (position:relative) per l'utility .img-cover (absolute inset:0).
   order:-1 = media primo su mobile; reset desktop DOPO questa regola (deve vincere). */
.insight-row__media{position:relative;margin:0;order:-1;overflow:clip;
  background:var(--color-gray-light);aspect-ratio:4/3}
@media (min-width:768px){ .insight-row__media{order:0} }


/* ── Archivi (Insights / Comunicati) — titolo Cormorant + listing insight-row ── */

/* p-head = clearance header fixed + respiro fino al titolo (come Contatti). */
.archive-hero{padding-top:var(--p-head)}
.archive-hero__title{font-family:var(--font-family-heading);font-weight:500;
  font-size:var(--fs-96);line-height:1;letter-spacing:-.01em;margin:0}
.archive-list{padding-block:var(--p-90) var(--p-120)}
/* Figma: filo sopra la prima riga (sotto il titolo); i separatori tra righe
   arrivano da .insight-row + .insight-row. Nessun filo sotto l'ultima. */
.archive-list .insights-latest__list{border-top:1px solid var(--color-gray-light)}

/* Utility a11y — testo solo per screen reader (WP the_posts_pagination heading). */
.screen-reader-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* Paginazione — pagine = pallini (stesso stile dei bullet Swiper: cerchio nero,
   inattivo opacity .2, attivo opacity 1); prev/next = freccia SVG (Figma gallery).
   .pagination è flex via Bootstrap → centro qui (nav-links altrimenti si comprime a sx). */
.pagination{margin-top:var(--p-120);justify-content:center}
.pagination .nav-links{display:flex;align-items:center;justify-content:center;
  gap:.75rem;flex-wrap:wrap}
/* Pallino: numero nascosto, cerchio 8px come bullet Swiper. */
.pagination .page-numbers:not(.prev):not(.next){display:inline-block;
  width:.5rem;height:.5rem;border-radius:50%;background:var(--color-black);
  opacity:.2;font-size:0;line-height:0;overflow:hidden;text-indent:-999px;
  transition:opacity .2s}
.pagination a.page-numbers:not(.prev):not(.next):hover{opacity:.5}
.pagination .page-numbers.current{opacity:1}
.pagination .prev,.pagination .next{display:inline-flex;color:var(--color-black);
  text-decoration:none}
.pagination__arrow{display:inline-flex}
.pagination__arrow svg{width:.875rem;height:.875rem}
.pagination__arrow--prev{transform:scaleX(-1)}


/* ── Blocco featured-cards — card in evidenza multi-CPT ── */

.featured-cards{background:var(--color-bg-soft);padding-block:var(--p-160)}
/* Variante fondo bianco (es. lista Progetti, dove precede una sezione grigia). */
.featured-cards--white{background:var(--color-white)}
/* Card a filo (g-0): il .row boilerplate sovrascrive .g-0 → azzero qui. row-gap per i capi. */
.featured-cards .row{--bs-gutter-x:0;row-gap:var(--p-90)}
.featured-card{position:relative;display:flex;flex-direction:column;gap:1.5rem}
/* Media = wrapper .media (box grigio) per l'utility .img-cover. */
.featured-card__media{position:relative;margin:0;width:100%;overflow:clip;
  background:var(--color-gray-light);aspect-ratio:15/14}
.featured-card__body{display:flex;flex-direction:column;align-items:flex-start}
.featured-card__title{font-family:var(--font-family-heading);font-weight:500;
  font-size:var(--fs-40);line-height:1.1;letter-spacing:-.02em;text-wrap:balance;margin:0 0 .95em}
/* CTA reale sopra lo stretched-link (pattern Apple tile-ctas). */
.featured-card__cta{position:relative;z-index:2}


/* ── Section heading (eyebrow/title/intro) ── */

/* Header di sezione grande (insights, identità, progetti): sottotitolo Geist Light 18
   sopra + titolo Cormorant 96 (Figma). Services usa invece .services-grid__title. */
.section__eyebrow{font-family:var(--font-family-base);font-weight:300;font-size:var(--fs-18);line-height:1.6;letter-spacing:.044em;text-align:center;margin:0 0 1rem}
.section__title{font-family:var(--font-family-heading);font-weight:500;font-size:var(--fs-96);line-height:1;letter-spacing:-.01em;text-align:center;margin:0 0 .79em}
.section__intro{font-family:var(--font-family-base);font-weight:300;font-size:var(--fs-28);line-height:1.4;text-align:center;max-width:36ch;margin:0 auto var(--p-90)}


/* ── Footer main — layout righe/legal (integrazione) ── */

.footer-main__row{row-gap:2rem}
.footer-main__bottom{row-gap:1rem;margin-top:1.5rem;align-items:baseline}
.footer-main__legal-id{font-size:var(--fs-14);line-height:1.5;margin:0}
.footer-main__legal{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:1.75rem;font-size:var(--fs-14);line-height:1.5}
.footer-main__credits{color:var(--color-black);text-decoration:none;white-space:nowrap}
.footer-main__credits:hover{text-decoration:underline}
.featured-card__title a{color:inherit;text-decoration:none}


/* ── Home ── */

/* Cover + overlay per hero/single CPT. `.media-bg` = strato di sfondo (già assoluto
   inset:0, pointer-events:none dal boilerplate); va DENTRO al contenitore relativo,
   contiene l'immagine `.media-cover` e fornisce l'overlay via ::before (no div overlay). */
.media-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.home-hero .media-bg::after{content:"";z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.45) 100%)}

.home-hero{position:relative;min-height:70vh;display:flex;align-items:flex-end;
  padding-top:var(--p-90);padding-bottom:var(--p-60);background:var(--color-black)}  /* fallback scuro se manca hero_image → H1 bianco leggibile */
.home-hero__inner{position:relative;z-index:2}
.home-hero__title{font-family:var(--font-family-heading);font-weight:500;font-size:var(--fs-96);line-height:1;letter-spacing:-.01em;margin:0;max-width:20ch;color:var(--color-white);text-wrap:balance}

.home-intro{padding-block:36px}
.home-intro__text{font-family:var(--font-family-base);font-weight:400;font-size:var(--fs-28);
  line-height:1.4;letter-spacing:.005em;color:var(--color-black);
  max-width:40ch;text-wrap:pretty;margin-bottom:2rem}

.home-identity{text-align:center;padding-block:var(--p-160)}
/* Stats: numero grande Geist + label piccola a fianco (centrata in verticale).
   Mobile: incolonnate e centrate. Desktop: distribuite su tutta la larghezza. */
.home-identity__stats{display:flex;flex-direction:column;align-items:center;gap:2.5rem;
  list-style:none;padding:0;margin:0 0 var(--p-120)}
@media (min-width:768px){ .home-identity__stats{flex-direction:row;justify-content:space-between;align-items:center} }
.stat{display:flex;align-items:center;gap:1rem}
.stat__value{font-family:var(--font-family-base);font-weight:400;font-size:var(--fs-96);line-height:1}
.stat__label{font-family:var(--font-family-base);font-weight:300;font-size:var(--fs-18);line-height:1.6;text-align:left}
/* Il bio NON limita la larghezza né usa un gap unico: distanze diverse per elemento
   (il bottone stacca di più). max-width sui singoli in ch. Ritratto = wrapper .media
   tondo per l'utility .img-cover (no object-fit reinventato). */
.home-identity__bio{margin-inline:auto;display:flex;flex-direction:column;align-items:center}
.home-identity__portrait{position:relative;width:147px;height:147px;border-radius:50%;
  overflow:clip;margin:0 0 2.5rem}
.home-identity__heading{max-width:32ch;font-family:var(--font-family-base);font-weight:400;font-size:var(--fs-28);line-height:1.4;text-wrap:balance;margin:0 0 1.5rem}
.home-identity__text{max-width:51ch;margin:0 0 2.5rem}   /* font da .text (5 Testo) */


/* ══ Pagine statiche: Servizi + Contatti (Figma 8:2 / 19:431) ══════════════════ */

/* Testata pagina — titolo Cormorant grande flush-left (Servizi/Contatti). */
.page-hero__title{font-family:var(--font-family-heading);font-weight:500;font-size:var(--fs-96);
  line-height:1;letter-spacing:-.01em;margin:0}
/* Variante con filo orizzontale decorativo sotto (solo Servizi) — pseudo-elemento,
   larghezza piena (h1 block), niente elemento hr improprio. */
.page-hero__title--ruled::after{content:"";display:block;height:1px;
  background:var(--color-border);margin:var(--p-60) 0 var(--p-90)}

/* Intro Servizi — titolo + colonna testo rientrata (offset). Contenuto = editor unico:
   h2 = pre-titolo Geist 28, p = corpo Geist 18. */
.services-intro{padding-block:var(--p-head) var(--p-90)}
.services-intro__body h2{font-family:var(--font-family-base);font-weight:400;font-size:var(--fs-28);
  line-height:1.4;letter-spacing:.005em;margin:0 0 1rem}
.services-intro__body h2:not(:first-child){margin-top:var(--p-90)}
.services-intro__body p{font-family:var(--font-family-base);font-weight:300;font-size:var(--fs-18);
  line-height:1.6;letter-spacing:.008em;margin:0}

/* ── Pagina Progetti (lista) — hero image + intro 2 col + insight-row + featured ── */
/* Intro: titolo Cormorant sx (.page-hero__title) + testo dx, colonne col-md-6. */
.projects-intro{padding-block:var(--p-90)}
.projects-intro .row{row-gap:var(--p-60)}
.projects-intro__text{font-family:var(--font-family-base);font-weight:300;font-size:var(--fs-18);
  line-height:1.6;letter-spacing:.008em}
/* Sezione "Esplora i progetti" — fondino soft, header centrato, righe insight-row. */
.projects-explore{background:var(--color-bg-soft);padding-block:var(--p-120)}
.projects-explore .section__title{margin-bottom:var(--p-90)}
/* Filo sopra la prima riga (Figma); i separatori tra righe da .insight-row + .insight-row. */
.projects-explore .insights-latest__list{border-top:1px solid var(--color-gray-light)}


/* ── Single Servizio (non-flex) ──────────────────────────────────────────────── */
/* Contenuto = un solo wysiwyg (come le news): H2 = pre-titolo Geist 28, p = testo Geist 18. */
.single-service__intro{padding-block:var(--p-120) var(--p-90)}
.single-service__body h2{font-family:var(--font-family-base);font-weight:400;font-size:var(--fs-28);
  line-height:1.4;letter-spacing:.005em}
.single-service__faq{padding-block:var(--p-120)}
/* titolo + accordion: stesso spacing di metodo Servizi e flex (title default + accordion --p-60) */

/* Progetti in evidenza come card (3-up) — media + argomento + titolo + CTA. */
.projects-cards{background:var(--color-bg-soft);padding-block:var(--p-120)}
.projects-cards .section__title{margin-bottom:var(--p-90)}
.projects-cards .row{--bs-gutter-x:clamp(1.5rem,2vw,2rem);row-gap:var(--p-90)}
.project-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.project-card__media{position:relative;width:100%;margin:0;overflow:clip;
  background:var(--color-gray-light);aspect-ratio:3/2}
.project-card__label{font-family:var(--font-family-base);font-weight:300;font-size:var(--fs-16);line-height:1.5}
.project-card__title{font-family:var(--font-family-heading);font-weight:500;font-size:var(--fs-40);
  line-height:1.1;letter-spacing:-.02em;text-wrap:pretty;margin:0}
.project-card__title a{color:inherit;text-decoration:none}
.project-card__cta{position:relative;z-index:2;margin-top:.5rem}


/* ── Pagina About ────────────────────────────────────────────────────────────── */

/* Timeline — eyebrow + card [anno + testo], scroll orizzontale su spazio ridotto. */
.timeline{padding-block:var(--p-120)}
/* Timeline quasi full-bleed: gutter ridotto (edge-to-edge), non il gutter di progetto. */
.timeline > .container-fluid{--bs-gutter-x:1.5rem}
.timeline__eyebrow{font-family:var(--font-family-base);font-weight:400;font-size:var(--fs-28);
  line-height:1.4;letter-spacing:.005em;text-align:center;margin:0 0 var(--p-90)}
.timeline__track{--fade-l:0;--fade-r:0;list-style:none;margin:0;padding:0 0 1rem;display:flex;
  gap:clamp(2rem,4vw,4.5rem);overflow-x:auto;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;justify-content:safe center;
  scrollbar-width:none;-ms-overflow-style:none;
  /* Sfumatura ai bordi dal lato con overflow (aggiornata da JS initEdgeFade), al posto del crop netto. */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent 100%)}
.timeline__track::-webkit-scrollbar{display:none}
.timeline__item{flex:0 0 auto;scroll-snap-align:start;text-align:center}
.timeline__year{display:block;font-family:var(--font-family-heading);font-weight:400;
  font-size:var(--fs-64);line-height:1;letter-spacing:-.01em;margin-bottom:1rem}
/* Larghezza comandata dal testo (27ch): l'item si adatta. */
.timeline__text{width:27ch;font-family:var(--font-family-base);font-weight:300;
  font-size:var(--fs-18);line-height:1.6}

/* Feature — titolo + sottotitolo centrati + immagine piena + testo. */
.about-feature{padding-block:var(--p-120)}
.about-feature__subtitle{font-family:var(--font-family-base);font-weight:300;font-size:var(--fs-32);
  line-height:1.4;letter-spacing:.005em;text-align:center;max-width:50rem;margin:0 auto var(--p-90)}
.about-feature__media{position:relative;margin:0;overflow:clip;background:var(--color-gray-light);
  aspect-ratio:2/1}
.about-feature__body{margin-top:var(--p-90)}

/* Chi sono — eyebrow + titolo centrati + testo + gallery. */
.about-bio{padding-block:var(--p-120)}
.about-bio .section__title{margin-bottom:var(--p-60)}
.about-bio__gallery{margin-top:var(--p-90)}

/* Pubblicazioni — elenco righe titolo + freccia (fondino soft). */
.publications{padding-block:var(--p-120)}
.publications .section__title{margin-bottom:var(--p-60)}
.publications__intro{margin-bottom:var(--p-90)}
.publications__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--color-gray-light)}
.pub-line{border-bottom:1px solid var(--color-gray-light)}
.pub-line__link{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-block:1.25rem;text-decoration:none;color:var(--color-text)}
.pub-line__title{font-family:var(--font-family-base);font-weight:300;font-size:var(--fs-18);line-height:1.4}
.pub-line__arrow{flex:0 0 auto;display:inline-flex;color:var(--color-black);transition:transform .2s}
.pub-line__arrow svg{width:1.3125rem;height:1.125rem}
.pub-line__link:hover .pub-line__title{text-decoration:underline}
.pub-line__link:hover .pub-line__arrow{transform:translateX(.25rem)}


/* Il nostro metodo — fondino soft, heading centrato, accordion Bootstrap (icona +/−). */
.method{background:var(--color-bg-soft);padding-block:var(--p-120)}
.method__kicker{font-family:var(--font-family-base);font-weight:400;font-size:var(--fs-22);
  line-height:1.4;text-align:center;margin:0 0 1rem}
.method__accordion{
  --bs-accordion-bg:transparent;
  --bs-accordion-color:var(--color-text);
  --bs-accordion-border-color:var(--color-border);
  --bs-accordion-border-width:0;
  --bs-accordion-border-radius:0;
  --bs-accordion-inner-border-radius:0;
  --bs-accordion-btn-padding-x:0;
  --bs-accordion-btn-padding-y:1.6rem;
  --bs-accordion-btn-color:var(--color-black);
  --bs-accordion-btn-bg:transparent;
  --bs-accordion-active-color:var(--color-black);
  --bs-accordion-active-bg:transparent;
  --bs-accordion-btn-focus-box-shadow:none;
  --bs-accordion-body-padding-x:0;
  --bs-accordion-body-padding-y:0;
  --bs-accordion-btn-icon-width:1rem;
  --bs-accordion-btn-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000000' stroke-width='1' stroke-linecap='round'%3e%3cpath d='M8 3v10M3 8h10'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000000' stroke-width='1' stroke-linecap='round'%3e%3cpath d='M3 8h10'/%3e%3c/svg%3e");
  margin-top:var(--p-60)}
/* Filo sopra/sotto ogni item (Figma: righe divise da linee, prima e ultima incluse). */
.method__accordion .accordion-item{border-top:1px solid var(--bs-accordion-border-color)}
.method__accordion .accordion-item:last-child{border-bottom:1px solid var(--bs-accordion-border-color)}
.method__accordion .accordion-button{font-family:var(--font-family-base);font-weight:300;
  font-size:var(--fs-18);line-height:1.6;letter-spacing:.008em}
.method__accordion .accordion-button strong{font-weight:600}
/* icona minus: niente rotazione (resta orizzontale) */
.method__accordion .accordion-button:not(.collapsed)::after{transform:none}
.method__accordion .accordion-body{padding-bottom:2em;font-size:var(--fs-18);line-height:1.6}

/* Contatti — recapiti (col 7) + form GF (col 5). */
.contact{padding-top:var(--p-head);padding-bottom:var(--p-120)}
.contact__title{font-family:var(--font-family-heading);font-weight:400;
  font-size:var(--fs-110);line-height:1;letter-spacing:-.03em;
  margin:0 0 var(--p-90)}
.contact__details{font-family:var(--font-family-base);font-weight:300;
  font-size:var(--fs-22);line-height:1.4;letter-spacing:.008em}
.contact__details p{margin:0}
.contact__details p + p{margin-top:1.4em}
.contact__details strong{font-weight:500}
.contact__details a{text-decoration:underline}

/* ══ Gravity Forms — restyle globale via design token GF (orbital theme) ════════
   Variabili `--gf-*` con !important: copre form Contatti e ogni altro form del sito. */
.gform-theme{
  --gf-radius:0 !important;
  --gf-font-weight-secondary:400 !important;
  --gf-color-primary:#d0d0d0 !important;
  --gf-color-primary-rgb:208,208,208 !important;
  --gf-color-primary-contrast:var(--color-white) !important;
  --gf-color-primary-darker:#d0d0d0 !important;
  --gf-color-primary-light:#d0d0d0 !important;
  --gf-ctrl-shadow:none !important;
  --gf-ctrl-border-color:#d0d0d0 !important;
  --gf-ctrl-bg-color:var(--color-white) !important;
  --gf-ctrl-size-md:48px !important;
  --gf-color-in-ctrl:transparent !important;
  --gf-color-in-ctrl-contrast:currentColor !important;
  --gf-color-in-ctrl-primary:currentColor !important;
  --gf-ctrl-label-color-primary:currentColor !important;
  --gf-ctrl-label-color-secondary:currentColor !important;
  --gf-ctrl-shadow-focus:none !important;
  --gf-form-footer-margin-y-start:54px !important;
  --gf-ctrl-label-color-req:currentColor !important;
  --gf-ctrl-btn-padding-x:1.44em !important;
  --gf-ctrl-btn-padding-y:1em !important;
  --gf-ctrl-btn-font-weight:400 !important;
  --gf-ctrl-btn-font-size:var(--fs-14) !important;
  --gf-ctrl-btn-color-primary:var(--color-white) !important;
  --gf-ctrl-btn-color-hover-primary:var(--color-white) !important;
  --gf-ctrl-btn-color-focus-primary:var(--color-white) !important;
  --gf-ctrl-btn-text-transform:none !important;
  --gf-ctrl-btn-bg-color-primary:#1a1a1a !important;
  --gf-ctrl-btn-bg-color-hover-primary:#2a2a2a !important;
  --gf-ctrl-btn-bg-color-focus-primary:#333333 !important;
  --gf-ctrl-btn-border-color-primary:#1a1a1a !important;
  --gf-ctrl-btn-border-color-hover-primary:#242424 !important;
  --gf-ctrl-btn-border-color-focus-primary:#242424 !important;
}
.gform_required_legend{display:none}
.gfield_description a,.gfield_consent_label a{text-decoration:underline}
.ginput_container ::placeholder{color:#a2a2a1 !important}
.gfield_consent_label .gfield_required_text{padding-left:.4em}
.gform_drop_area::before{display:none !important}
.gform_drop_area .gform_drop_instructions{font-weight:400;color:var(--color-black)}
.gform_drop_area .gform_button_select_files{color:var(--color-white) !important;background:var(--color-black) !important}
/* Submit full-width (Figma). */
.contact__form .gform_footer{margin-top:var(--p-60)}
.contact__form .gform_footer .gform_button{width:100% !important}


/* ══ Single CPT — hero per-type + Flexible Content ═════════════════════════════ */

/* Single con hero full-bleed = flush sotto header fixed */
.main--single{padding-top:0}

/* ── Hero single (parte alta, non flex) ─────────────────────────────────────── */
.single-hero__cover{height:clamp(22rem,52vw,44rem);margin:0}
.single-hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;
  padding-block:1rem;border-bottom:1px solid var(--color-border)}
.single-hero__author{display:flex;align-items:center;gap:.75rem}
.single-hero__avatar{width:2.75rem;height:2.75rem;border-radius:50%;overflow:hidden;flex:0 0 auto}
.single-hero__author-name{font-family:var(--font-family-base);font-weight:400;font-size:var(--fs-16)}
.single-hero__info{display:flex;align-items:center;gap:1.5rem;margin-left:auto;
  font-family:var(--font-family-base);font-size:var(--fs-14);color:var(--color-text-muted)}
.single-hero__cat{text-decoration:none;color:inherit}
.single-hero--project .single-hero__info{gap:.75rem}
.single-hero__title{font-family:var(--font-family-heading);font-weight:400;font-size:var(--fs-72);
  line-height:1;letter-spacing:-.02em;margin:var(--p-60) 0 0}

/* ── Scaffold moduli flex + toggle sfondo ───────────────────────────────────── */
.flex-mod{padding-block:var(--p-120)}
.is-bg-grey{background:var(--color-bg-soft)}
.flex-mod.is-bg-white + .flex-mod.is-bg-white,
.flex-mod.is-bg-grey  + .flex-mod.is-bg-grey{padding-block-start:0}
.flex-mod__title{font-family:var(--font-family-base);font-weight:400;font-size:var(--fs-28);
  line-height:1.4;letter-spacing:.005em;margin:0 0 var(--p-60)}
/* Bottone opzionale sotto il testo (layout flex "testo"). */
.flex-text__cta{margin-top:var(--p-60)}

/* ── Post (elenco compatto) — eyebrow + titolo serif + righe numerate ────────── */
.flex-posts{text-align:center}
.flex-posts__eyebrow{font-family:var(--font-family-base);font-weight:400;font-size:var(--fs-22);
  line-height:1.4;letter-spacing:.005em;margin:0}
.flex-posts__title{font-family:var(--font-family-heading);font-weight:500;font-size:var(--fs-96);
  line-height:1;letter-spacing:-.01em;margin:1rem 0 var(--p-90)}
.flex-posts__list{list-style:none;margin:0;padding:0;text-align:left}
.post-line{border-top:1px solid var(--color-gray-light)}
.post-line:last-child{border-bottom:1px solid var(--color-gray-light)}
.post-line__link{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:1.5rem;padding-block:1.5rem;text-decoration:none;color:var(--color-text)}
.post-line__index{font-family:var(--font-family-base);font-weight:300;font-size:var(--fs-18);
  line-height:1.6;white-space:nowrap}
.post-line__index b{font-weight:700}
.post-line__title{font-family:var(--font-family-base);font-weight:300;font-size:var(--fs-18);
  line-height:1.6}
.post-line__arrow{display:inline-flex;color:var(--color-black);transition:transform .2s}
.post-line__arrow svg{width:1.3125rem;height:1.125rem}
.post-line__link:hover .post-line__title{text-decoration:underline}
.post-line__link:hover .post-line__arrow{transform:translateX(.25rem)}

/* ── Heading ────────────────────────────────────────────────────────────────── */
.flex-heading__eyebrow{font-family:var(--font-family-base);font-weight:300;font-size:var(--fs-18);
  line-height:1.6;letter-spacing:.044em;margin:0 0 1rem}
.flex-heading__title{font-family:var(--font-family-heading);font-weight:400;font-size:var(--fs-56);
  line-height:1;letter-spacing:-.02em;margin:0}

/* ── Text ───────────────────────────────────────────────────────────────────── */
.flex-text__body{font-size:var(--fs-18);line-height:1.6}

/* ── Media (immagine, full container-fluid) ─────────────────────────────────── */
.flex-media__figure{margin:0}
.flex-media__img{display:block;width:100%;height:auto}
.flex-media__caption{font-family:var(--font-family-base);font-size:var(--fs-13);
  line-height:1.5;color:var(--color-text);margin-top:.75rem}

/* ── Video / Embed (oEmbed) ─────────────────────────────────────────────────── */
.flex-embed__frame{position:relative;aspect-ratio:16/9}
.flex-embed__frame :is(iframe,video,embed,object){position:absolute;inset:0;width:100%;height:100%;border:0}

/* ── Gallery (Swiper) ───────────────────────────────────────────────────────── */
.flex-gallery__nav{display:flex;justify-content:flex-end;gap:.5rem;margin-bottom:1.5rem}
.flex-gallery__arrow{--arrow-size:clamp(2.25rem,3vw,2.5rem);
  width:var(--arrow-size);height:var(--arrow-size);font-size:var(--arrow-size);
  border-radius:50%;border:0;background:var(--color-black);color:var(--color-white);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:opacity .2s,background .2s,color .2s}
.flex-gallery__arrow svg{width:.35em;height:.35em}
.flex-gallery__arrow--prev svg{transform:scaleX(-1)}
.flex-gallery__arrow:not(.swiper-button-disabled):hover{opacity:.85}
.flex-gallery__arrow.swiper-button-disabled{background:var(--color-gray-mid);cursor:default}
.flex-gallery__item{margin:0}
.flex-gallery__media{position:relative;display:block;aspect-ratio:3/2;overflow:hidden}
.flex-gallery__caption{font-family:var(--font-family-base);font-size:var(--fs-13);
  line-height:1.5;color:var(--color-text);margin-top:.75rem}

/* ── Media + Testo ──────────────────────────────────────────────────────────── */
.flex-media-text__media{position:relative;aspect-ratio:3/2}
.flex-media-text__text{font-size:var(--fs-18);line-height:1.6;margin-top:1rem}

/* Accordion flex → riusa .method__kicker / .section__title / .method__accordion (Servizi). */

/* ── Banner CTA ─────────────────────────────────────────────────────────────── */
.flex-cta .flex-cta__inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.5rem}
.flex-cta__title{font-family:var(--font-family-heading);font-weight:500;font-size:var(--fs-56);
  line-height:1.1;letter-spacing:-.01em}
.flex-cta__text{font-family:var(--font-family-base);font-size:var(--fs-18);line-height:1.6;max-width:46ch}