/* =========================================================================
   Apulia Suite — Castellana Grotte — style.css
   Palette & type derived from the real property (moodboard analysis):
   stone vault + night-blue atmosphere lighting, warm amber/brass accents.
   Structure & rhythm preserved from the original design template.
   ========================================================================= */

/* ---------- Design tokens ---------- */
:root {
    /* Il sito ha un solo tema: senza questa riga Chrome su Android puo' invertire
       i colori da solo e la pietra chiara diventa un fondo scuro sporco. */
    color-scheme: light;

    /* Colours — extracted from the property photos; NO pure black anywhere */
    --color-primary:     #263A44;  /* night blue / deep petrol — vault lighting */
    --color-secondary:   #5E7079;  /* medium petrol-grey */
    --color-accent:      #C08A3E;  /* warm amber / brass — sparingly */
    --color-accent-deep: #9A6B28;
    --color-background:  #F7F3EC;  /* light Apulian stone cream */
    --color-surface:     #F1E9DD;  /* warmer sand band/card */
    --color-surface-2:   #E8DED0;
    --color-text:        #3A3732;  /* dark warm grey (no black) */
    --color-text-soft:   #726B60;
    --color-border:      #D8CDBB;  /* warm stone — REPLACES ALL BLACK */
    --color-border-soft: #EAE2D4;
    --color-on-dark:     #F5EFE4;

    /* Type */
    --font-brand:   "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --font-body:    "Mulish", "Helvetica Neue", Arial, sans-serif;
    --font-ui:      "Jost", "Helvetica Neue", Arial, sans-serif;

    /* Radius — 3 tiers: pills / cards / gallery */
    --r-pill: 999px;
    --r-card: 32px;
    --r-img:  50px;
    --r-sm:   16px;

    /* Spacing scale (8px base) */
    --s-1: 4px;  --s-2: 8px;  --s-3: 16px; --s-4: 24px;
    --s-5: 32px; --s-6: 48px; --s-7: 64px; --s-8: 96px; --s-9: 128px;

    /* Shadows — soft & warm only */
    --shadow-sm: 0 4px 14px rgba(60, 51, 40, .08);
    --shadow-md: 0 8px 24px rgba(60, 51, 40, .12);
    --shadow-lg: 0 18px 48px rgba(60, 51, 40, .18);

    --container: 1240px;
    /* Margine laterale del contenuto: si stringe sui telefoni piccoli, dove
       48px complessivi di aria valgono piu' del 15% della larghezza utile. */
    --gutter: var(--s-4);
    --nav-h: 76px;
    --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-background);
    line-height: 1.7;
    font-size: 1.05rem;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
:focus-visible { outline: 2.5px solid var(--color-accent); outline-offset: 3px; border-radius: 6px; }
/* Sui fondi scuri l'ambra scende sotto il rapporto minimo: li serve l'avorio. */
.footer :focus-visible, .shuttle :focus-visible, .lightbox :focus-visible,
.hero :focus-visible, .nav-menu :focus-visible { outline-color: var(--color-on-dark); }

.skip-link {
    position: absolute; left: 16px; top: -60px; z-index: 2000;
    background: var(--color-primary); color: var(--color-on-dark);
    padding: 10px 18px; border-radius: var(--r-pill); transition: top .25s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; line-height: 1.12; color: var(--color-text); }
.brand-script { font-family: var(--font-brand); font-weight: 600; line-height: 1.02; letter-spacing: .015em; }
p + p { margin-top: var(--s-3); }

.eyebrow {
    font-family: var(--font-ui); font-weight: 500;
    text-transform: uppercase; letter-spacing: .22em;
    font-size: .74rem; color: var(--color-text-soft);
    margin-bottom: var(--s-3);
}
.eyebrow--center { text-align: center; }

.section__title { font-size: clamp(2rem, 4.2vw, 3.1rem); margin-bottom: var(--s-4); }
.section__title--center { text-align: center; }
.section__intro { max-width: 60ch; margin: 0 auto var(--s-6); text-align: center; color: var(--color-text-soft); }
.section__intro--left { margin-left: 0; text-align: left; }

/* ---------- Layout utilities ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-left: auto; margin-right: auto; margin-inline: auto; }
.section { padding-block: clamp(var(--s-7), 11vw, var(--s-9)); position: relative; }
.section + .section { border-top: 1px solid var(--color-border-soft); }
.section--surface { background: var(--color-surface); border-top-color: transparent; }

/* ---------- Pills / buttons ---------- */
.pill {
    --pill-bg: transparent;
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-family: var(--font-ui); font-weight: 500; font-size: .95rem;
    padding: 12px 22px; min-height: 44px; border-radius: var(--r-pill);
    border: 1.5px solid var(--color-border);
    background: var(--pill-bg); color: var(--color-primary);
    transition: transform .3s var(--ease), background-color .3s var(--ease),
                color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
    white-space: nowrap;
}
.pill__arrow {
    display: inline-grid; place-items: center; width: 22px; height: 22px;
    border-radius: 50%; background: rgba(110, 90, 67, .12);
    transition: transform .3s var(--ease), background-color .3s var(--ease);
}
.pill:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.pill:hover .pill__arrow { transform: translate(2px, -2px); }

.pill--ghost:hover { background: var(--color-primary); color: var(--color-on-dark); border-color: var(--color-primary); }
.pill--ghost:hover .pill__arrow { background: rgba(246, 239, 228, .22); }

.pill--solid { background: var(--color-primary); color: var(--color-on-dark); border-color: var(--color-primary); }
.pill--solid .pill__arrow { background: rgba(246, 239, 228, .2); }
.pill--solid:hover { background: var(--color-accent); border-color: var(--color-accent); }

.chip {
    font-family: var(--font-ui); font-size: .8rem; font-weight: 500;
    padding: 5px 14px; border-radius: var(--r-pill);
    border: 1.5px solid var(--color-border); color: var(--color-text-soft);
    white-space: nowrap; align-self: center;
}

/* ====================================================================
   NAVBAR
   ==================================================================== */
.navbar {
    position: sticky; top: 0; z-index: 1000;
    background: rgba(246, 239, 228, .82);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--color-border-soft);
    transition: box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.navbar.is-scrolled { box-shadow: var(--shadow-sm); background: rgba(246, 239, 228, .94); }
.navbar__inner {
    min-height: var(--nav-h);
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-3);
}
.navbar__brand { justify-self: center; text-align: center; display: grid; line-height: 1; min-width: 0; padding-block: 7px; }
/* "Apulia Suite" spezzato su due righe raddoppia l'altezza della barra e fa perdere
   leggibilita' al marchio: nella navbar resta sempre su una riga sola. */
.navbar__brand .brand-script { font-size: 2.1rem; color: var(--color-primary); white-space: nowrap; }
.navbar__brand .brand-sub {
    font-family: var(--font-ui); font-size: .62rem; letter-spacing: .28em;
    text-transform: uppercase; color: var(--color-text-soft); margin-top: 2px;
    white-space: nowrap;
}
.navbar__actions { justify-self: end; display: flex; align-items: center; gap: var(--s-2); }

.lang { position: relative; }
.lang-pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-ui); font-size: .85rem; font-weight: 500;
    padding: 8px 14px; min-height: 44px; border: 1.5px solid var(--color-border);
    border-radius: var(--r-pill); color: var(--color-text-soft);
    transition: border-color .25s var(--ease), color .25s var(--ease);
}
.lang-pill:hover { border-color: var(--color-primary); color: var(--color-primary); }
.lang-pill svg { color: var(--color-border); transition: transform .3s var(--ease); }
.lang-pill[aria-expanded="true"] svg { transform: rotate(180deg); }
.lang-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 1200;
    min-width: 160px; padding: 6px;
    background: var(--color-background); border: 1px solid var(--color-border-soft);
    border-radius: var(--r-sm); box-shadow: var(--shadow-md);
    display: grid; gap: 2px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.lang.is-open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-opt {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-ui); font-size: .9rem; color: var(--color-text);
    padding: 9px 12px; min-height: 44px; border-radius: 10px; transition: background-color .2s var(--ease);
}
.lang-opt:hover { background: var(--color-surface); }
.lang-opt.is-active { color: var(--color-primary); font-weight: 600; background: var(--color-surface); }
.lang-opt.is-active::after { content: "✓"; margin-left: auto; color: var(--color-accent); }
.nav-contact { padding: 9px 18px; }

/* language switch inside the card menu */
.nav-menu__lang { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }
.nav-menu__lang-opt {
    display: inline-flex; align-items: center;
    font-family: var(--font-ui); font-size: .82rem; letter-spacing: .03em;
    padding: 7px 14px; min-height: 44px; border-radius: var(--r-pill);
    border: 1.5px solid var(--color-border-soft); color: var(--color-text-soft);
    transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.nav-menu__lang-opt:hover { border-color: var(--color-border); color: var(--color-primary); }
.nav-menu__lang-opt.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-dark); }

/* menu toggle */
.nav-toggle { justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 10px; min-height: 44px; min-width: 44px; border-radius: var(--r-pill); }
.nav-toggle__bars { display: grid; gap: 5px; width: 26px; }
.nav-toggle__bars span { height: 2px; background: var(--color-primary); border-radius: 2px; transition: transform .35s var(--ease), opacity .25s var(--ease); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* overlay menu — sliding card from the left (page stays visible & dimmed behind) */
.nav-menu {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 1100;
    width: min(380px, 86vw);
    padding: var(--s-3);
    padding-top: calc(var(--s-3) + env(safe-area-inset-top, 0px));
    padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
    display: flex;
    transform: translateX(-100%); transition: transform .5s var(--ease);
    visibility: hidden;
}
.nav-menu.is-open { transform: translateX(0); visibility: visible; }
.nav-menu__panel {
    position: relative;
    width: 100%; height: 100%;
    background: var(--color-background);
    border-radius: 50px;
    box-shadow: var(--shadow-lg);
    padding: var(--s-7) var(--s-5) var(--s-5);
    display: flex; flex-direction: column; justify-content: space-between;
    overflow-y: auto; overscroll-behavior: contain;
}
.nav-menu__close {
    position: absolute; top: var(--s-4); right: var(--s-4);
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: var(--r-pill);
    color: var(--color-primary); border: 1.5px solid var(--color-border-soft);
    transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.nav-menu__close:hover { background: var(--color-surface); border-color: var(--color-border); }
.nav-menu__list { display: grid; gap: var(--s-2); }
.nav-menu__link {
    font-family: var(--font-heading); font-size: clamp(1.6rem, 4.5vw, 2.2rem);
    color: var(--color-text); display: inline-block; padding: 8px 0; min-height: 44px; width: fit-content;
    position: relative; transition: color .3s var(--ease), padding-left .3s var(--ease);
}
.nav-menu__link::before {
    content: ""; position: absolute; left: -2px; bottom: 10px;
    width: 0; height: 2px; background: var(--color-accent); transition: width .35s var(--ease);
}
.nav-menu__link:hover { color: var(--color-primary); padding-left: 14px; }
.nav-menu__link:hover::before { width: 100%; }
.nav-menu__foot { display: grid; gap: 4px; border-top: 1px solid var(--color-border-soft); padding-top: var(--s-4); }
.nav-menu__brand { font-size: 2.4rem; color: var(--color-primary); }
.nav-menu__tag { font-family: var(--font-ui); font-size: .8rem; letter-spacing: .12em; color: var(--color-text-soft); text-transform: uppercase; }
.nav-backdrop { position: fixed; inset: 0; z-index: 1050; background: rgba(60, 51, 40, .4); opacity: 0; transition: opacity .4s var(--ease); }
.nav-backdrop.is-open { opacity: 1; }

/* ====================================================================
   HERO
   ==================================================================== */
.hero {
    /* La navbar e' sticky: occupa spazio nel flusso. Con 100svh pieni l'eroe
       sborda sotto la piega e sui telefoni bassi i bottoni finiscono fuori. */
    position: relative; min-height: calc(100vh - var(--nav-h)); min-height: calc(100svh - var(--nav-h));
    display: flex; align-items: center; justify-content: center;
    text-align: center; color: var(--color-on-dark); overflow: hidden;
}
.hero__bg {
    /* La foto sta qui e non nell'attributo style dell'HTML: da inline nessuna
       media query potrebbe sostituirla con la versione ridotta per telefoni. */
    background-image: url('../images/hero-suite.jpg');
    background-image: -webkit-image-set(url('../images/hero-suite.webp') type('image/webp'), url('../images/hero-suite.jpg') type('image/jpeg'));
    background-image: image-set(url('../images/hero-suite.webp') type('image/webp'), url('../images/hero-suite.jpg') type('image/jpeg'));
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background-size: cover; background-position: center;
    transform: scale(1.08); animation: heroZoom 18s var(--ease) forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }
.hero__overlay {
    position: absolute; inset: 0;
    background:
        linear-gradient(to bottom, rgba(40,32,22,.34) 0%, rgba(40,32,22,.18) 35%, rgba(40,32,22,.5) 100%),
        radial-gradient(120% 90% at 50% 40%, rgba(40,32,22,.05), rgba(40,32,22,.45));
}
.hero__content { position: relative; z-index: 2; max-width: 880px; padding-block: clamp(var(--s-7), 12vw, var(--s-9)); }
.hero__eyebrow { color: rgba(246, 239, 228, .9); letter-spacing: .24em; font-size: clamp(.66rem, 1.05vw, .76rem); margin-bottom: var(--s-3); }
.hero__title { margin-bottom: var(--s-4); }
.hero__script { display: block; font-size: clamp(3.4rem, 9.6vw, 6.2rem); color: #fff; text-shadow: 0 2px 30px rgba(24, 30, 36, .55); }
.hero__sub {
    display: block; font-family: var(--font-heading); font-weight: 500;
    font-style: italic; letter-spacing: .01em;
    font-size: clamp(.8rem, 1.05vw, .94rem); letter-spacing: .18em; margin-top: var(--s-2);
    color: rgba(245, 239, 228, .94);
}
.hero__lead { max-width: 56ch; margin: 0 auto var(--s-6); font-size: clamp(.9rem, 1.4vw, 1.08rem); color: rgba(246, 239, 228, .95); }
.hero__actions { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }
.hero .pill--ghost { color: var(--color-on-dark); border-color: rgba(246, 239, 228, .65); }
.hero .pill--ghost .pill__arrow { background: rgba(246, 239, 228, .18); }
.hero .pill--ghost:hover { background: var(--color-on-dark); color: var(--color-primary); border-color: var(--color-on-dark); }
/* ====================================================================
   LA STRUTTURA
   ==================================================================== */
.struttura__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--s-5), 6vw, var(--s-8)); align-items: center; }
.struttura__media picture { display: block; }
.struttura__media img { width: 100%; border-radius: var(--r-img); box-shadow: var(--shadow-md); aspect-ratio: 4 / 5; object-fit: cover; object-position: 22% center; }
.facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin-top: var(--s-5); }
.fact {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-ui); font-size: .9rem; color: var(--color-text-soft);
    padding: 8px 16px; border: 1.5px solid var(--color-border); border-radius: var(--r-pill);
}
.fact .icon { color: var(--color-border); }

/* ====================================================================
   SERVIZI
   ==================================================================== */
.amenities { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); margin-bottom: var(--s-6); }
.amenity {
    display: flex; align-items: center; gap: var(--s-3);
    background: var(--color-background); border: 1px solid var(--color-border-soft);
    border-radius: var(--r-card); padding: var(--s-4);
    font-family: var(--font-ui); font-size: .98rem;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.section--surface .amenity { background: var(--color-background); }
.amenity:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-border); }
.amenity__ic { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--color-surface-2); color: var(--color-primary); }

.shuttle {
    display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
    background: linear-gradient(120deg, var(--color-primary), #5a4836);
    color: var(--color-on-dark); border-radius: var(--r-card);
    padding: clamp(var(--s-4), 4vw, var(--s-6)); box-shadow: var(--shadow-md);
}
.shuttle__ic { display: grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: 50%; background: rgba(246, 239, 228, .14); color: var(--color-on-dark); }
.shuttle__body { flex: 1 1 280px; }
.shuttle__title { color: var(--color-on-dark); font-size: 1.6rem; margin-bottom: 4px; }
.shuttle__body p { color: rgba(246, 239, 228, 1); }
.shuttle__cta { color: var(--color-on-dark); border-color: rgba(246, 239, 228, .6); }
.shuttle__cta .pill__arrow { background: rgba(246, 239, 228, .2); }
.shuttle__cta:hover { background: var(--color-on-dark); color: var(--color-primary); border-color: var(--color-on-dark); }

/* ====================================================================
   GALLERIA — asymmetric editorial grid, 50px radius
   ==================================================================== */
/* Masonry a colonne: ogni foto conserva il proprio formato nativo e le tessere si
   incastrano fra loro. La griglia a righe fisse di prima ritagliava ogni scatto a
   forza dentro celle da 220px, e le due foto verticali venivano decapitate. */
/* Tre colonne, non quattro: le prime nove tessere — quelle visibili prima di
   "Vedi di più" — riempiono cosi' una griglia 3x3 senza buchi in fondo. */
.gallery-grid { column-count: 3; column-gap: var(--s-3); }
/* Il contenitore e' multi-colonna: su WebKit una trasformazione DENTRO le colonne
   puo' far ricalcolare male l'incastro delle tessere e lasciare buchi. In entrata
   le foto animano quindi solo l'opacita', senza spostamento verticale. */
.gallery-grid.reveal, .gallery-item.reveal { transform: none; }
.gallery-item {
    position: relative; overflow: hidden; border-radius: var(--r-img);
    box-shadow: var(--shadow-sm); padding: 0; display: block; width: 100%;
    break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
    margin-bottom: var(--s-3);
}
.gallery-item picture { display: block; width: 100%; }
.gallery-item img { width: 100%; height: auto; display: block; transition: transform .7s var(--ease); }
.gallery-item::after {
    content: ""; position: absolute; inset: 0; border-radius: var(--r-img);
    background: linear-gradient(to top, rgba(60, 51, 40, .35), transparent 55%);
    opacity: 0; transition: opacity .4s var(--ease);
}
.gallery-item:hover img { transform: scale(1.07); }
.gallery-item:hover { box-shadow: var(--shadow-lg); }
.gallery-item:hover::after { opacity: 1; }
/* .g-wide / .g-tall / .g-big appartenevano alla griglia a righe fisse. Sono state
   tolte anche dall'HTML il 25 ago 2026: nel masonry a colonne non facevano nulla. */

/* ---- Tendina "vedi di più" ----
   Il pannello e' chiuso con height:0 e overflow:hidden; il JS misura l'altezza
   reale e anima verso quel valore, poi la rimette ad "auto" a fine transizione
   (cosi' una rotazione del telefono non lascia il pannello tagliato).
   ⚠️ `visibility: hidden` a tendina chiusa non e' un di piu': toglie le sedici
   foto nascoste dall'ordine di tabulazione in TUTTI i browser, anche dove
   `inert` non e' supportato.
   ⚠️ Senza JavaScript la classe .js non c'e' e il pannello resta APERTO: le foto
   non spariscono mai. Per questo la classe viene messa nello script in testa
   all'HTML e non in main.js, che arriva a fine pagina. */
.gallery-more { height: auto; overflow: visible; }
.js .gallery-more {
    height: 0; overflow: hidden; visibility: hidden;
    transition: height .6s var(--ease), visibility 0s linear .6s;
}
.js .gallery-more.is-open { visibility: visible; transition: height .6s var(--ease), visibility 0s linear 0s; }
.gallery-more__inner { padding-top: var(--s-3); }
.gallery-toggle-wrap { display: flex; justify-content: center; margin-top: var(--s-5); }
.gallery-toggle { min-width: 220px; justify-content: center; }
.gallery-toggle .gallery-toggle__ic { transition: transform .35s var(--ease); }
.gallery-toggle[aria-expanded="true"] .gallery-toggle__ic { transform: rotate(180deg); }
/* La freccia della tendina scende, invece di andare in diagonale come le altre pill */
.gallery-toggle:hover .pill__arrow { transform: translateY(2px); }
.gallery-count { font-family: var(--font-ui); font-size: .88rem; color: var(--color-text-soft); text-align: center; margin-top: var(--s-3); }

/* Lightbox */
.lightbox {
    position: fixed; inset: 0; z-index: 1600; display: flex; align-items: center; justify-content: center;
    background: rgba(40, 32, 22, .92); padding: var(--s-5);
    opacity: 0; visibility: hidden;
    /* visibility deve cambiare SUBITO all'apertura: con una transizione il valore
       calcolato resta 'hidden' nell'istante del focus() e da tastiera il fuoco
       non entra mai nel dialogo. */
    transition: opacity .35s var(--ease), visibility 0s linear .35s;
}
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity .35s var(--ease), visibility 0s linear 0s; }
.lightbox__fig { max-width: min(1100px, 92vw); text-align: center; }
.lightbox__img { max-height: 80vh; width: auto; margin: 0 auto; border-radius: var(--r-card); box-shadow: var(--shadow-lg); }
.lightbox__cap { color: rgba(246, 239, 228, .85); font-family: var(--font-ui); font-size: .9rem; margin-top: var(--s-3); }
.lightbox__close, .lightbox__nav {
    position: absolute; color: var(--color-on-dark); display: grid; place-items: center;
    width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid rgba(246, 239, 228, .4);
    background: rgba(246, 239, 228, .08); font-size: 2rem; line-height: 1; transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(246, 239, 228, .22); transform: scale(1.06); }
.lightbox__close { top: 22px; right: 22px; font-size: 1.8rem; }
.lightbox__nav--prev { left: 22px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 22px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev:hover { transform: translateY(-50%) scale(1.06); }
.lightbox__nav--next:hover { transform: translateY(-50%) scale(1.06); }

/* ====================================================================
   DINTORNI
   ==================================================================== */
.dintorni__group { font-size: 1.35rem; color: var(--color-primary); margin: var(--s-6) 0 var(--s-4); }
.dintorni__group:first-of-type { margin-top: var(--s-2); }
.places { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
.place {
    display: flex; align-items: center; gap: var(--s-3);
    background: var(--color-background); border: 1px solid var(--color-border-soft);
    border-radius: var(--r-card); padding: var(--s-4);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.place:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-border); }
.place__ic { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--color-surface-2); color: var(--color-primary); }
.place__body { flex: 1; }
.place__name { font-size: 1.2rem; }
.place__desc { font-family: var(--font-ui); font-size: .85rem; color: var(--color-text-soft); line-height: 1.5; }

/* ====================================================================
   RECENSIONI
   ==================================================================== */
.rating {
    display: grid; grid-template-columns: auto 1fr; gap: clamp(var(--s-5), 5vw, var(--s-7)); align-items: center;
    background: var(--color-surface); border: 1px solid var(--color-border-soft);
    border-radius: var(--r-card); padding: clamp(var(--s-4), 4vw, var(--s-6)); margin-bottom: var(--s-6);
}
.rating__score { display: flex; align-items: center; gap: var(--s-3); }
.rating__num {
    font-family: var(--font-heading); font-weight: 600; font-size: 3.6rem; line-height: 1;
    color: var(--color-on-dark); background: var(--color-primary);
    padding: 14px 18px; border-radius: 22px 22px 22px 6px;
}
.rating__meta { font-family: var(--font-ui); font-size: .9rem; color: var(--color-text-soft); }
.rating__meta strong { color: var(--color-text); font-size: 1.05rem; }
.rating__cats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-5); }
.rating__cat { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; font-family: var(--font-ui); font-size: .85rem; }
.rating__cat-label { color: var(--color-text-soft); }
.rating__cat-val { font-weight: 500; color: var(--color-primary); }
.rating__bar { grid-column: 1 / -1; height: 6px; border-radius: var(--r-pill); background: var(--color-surface-2); overflow: hidden; }
.rating__bar-fill { display: block; height: 100%; width: 0; background: var(--color-secondary); border-radius: var(--r-pill); transition: width 1.1s var(--ease); }
.rating.is-visible .rating__bar-fill { width: var(--w); }

/* ---- Recensioni: carosello orizzontale ----
   La pista e' un contenitore a scorrimento orizzontale con aggancio (scroll-snap):
   sul telefono si trascina con il dito, ovunque si puo' usare la tastiera, e le
   frecce fanno scorrere di una schermata alla volta.
   ⚠️ Le frecce vivono nell'INTESTAZIONE e non sopra le schede: sovrapposte
   avrebbero coperto il testo delle recensioni a qualche larghezza.
   ⚠️ Le schede NON hanno la classe .reveal, ed e' voluto: quelle fuori schermata
   a destra sono ritagliate dalla pista, quindi l'IntersectionObserver non le
   vedrebbe mai intersecare e resterebbero a opacita' zero anche dopo lo
   scorrimento. La comparsa in entrata e' della pista intera. */
/* Nell'intestazione ci sono SOLO le frecce: il paragrafo che stava qui e' stato
   tolto il 25 ago 2026 su richiesta del committente. Da qui `flex-end`: con lo
   `space-between` di prima, rimasto un figlio solo, le frecce scivolavano a
   sinistra. Se un giorno tornasse un testo a sinistra, si rimette space-between. */
.reviews-head {
    display: flex; align-items: flex-end; justify-content: flex-end;
    gap: var(--s-4); margin-bottom: var(--s-4);
}
.carousel-nav { display: flex; gap: var(--s-2); flex: none; }
.carousel-nav__btn {
    display: grid; place-items: center; width: 46px; height: 46px; flex: none;
    border-radius: 50%; border: 1.5px solid var(--color-primary); color: var(--color-primary);
    background: transparent;
    transition: opacity .3s var(--ease), visibility .3s var(--ease),
                background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.carousel-nav__btn:hover { background: var(--color-primary); color: var(--color-on-dark); transform: translateY(-2px); }
/* Disabilitata = nascosta, ma lo spazio resta occupato: cosi' la freccia destra
   non salta di posto nell'istante in cui compare quella sinistra. */
.carousel-nav__btn[disabled] { opacity: 0; visibility: hidden; pointer-events: none; }
.carousel-nav[hidden] { display: none; }

.reviews {
    --per: 4;
    display: flex; gap: var(--s-4); align-items: stretch;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    /* spazio per l'ombra e per il sollevamento di 4px al passaggio del mouse */
    padding-block: var(--s-2) var(--s-4);
    scrollbar-width: none; -ms-overflow-style: none;
}
.reviews::-webkit-scrollbar { display: none; }
.reviews:focus-visible { outline-offset: -3px; }
.review {
    flex: 0 0 calc((100% - (var(--per) - 1) * var(--s-4)) / var(--per));
    max-width: calc((100% - (var(--per) - 1) * var(--s-4)) / var(--per));
    scroll-snap-align: start;
    display: flex; flex-direction: column; gap: var(--s-3);
    background: var(--color-surface); border: 1px solid var(--color-border-soft);
    border-radius: var(--r-card); padding: var(--s-5);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.review:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.review__top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); }
.review__quote { color: var(--color-border); }
.review__score { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-ui); font-weight: 500; font-size: .9rem; color: var(--color-primary); background: var(--color-background); border-radius: var(--r-pill); padding: 4px 12px; }
.review__score .icon { color: var(--color-accent); }
/* Le citazioni hanno lunghezze molto diverse: il taglio a nove righe tiene le
   schede della stessa altezza senza che una recensione lunga faccia crescere
   tutta la fila. Il testo integrale resta a un clic, sui due bottoni qui sotto. */
.review__text {
    font-style: italic; color: var(--color-text); flex: 1;
    display: -webkit-box; -webkit-line-clamp: 9; line-clamp: 9;
    -webkit-box-orient: vertical; overflow: hidden;
}
.review__by { display: grid; gap: 2px; border-top: 1px solid var(--color-border-soft); padding-top: var(--s-3); }
.review__name { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 600; }
.review__country { font-family: var(--font-ui); font-size: .8rem; color: var(--color-text-soft); }

.reviews__cta { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* ====================================================================
   BUONO A SAPERSI
   ==================================================================== */
.info__grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(var(--s-5), 6vw, var(--s-8)); align-items: start; }
.info__head { position: sticky; top: calc(var(--nav-h) + var(--s-4)); }
.info__list { display: grid; gap: var(--s-3); }
.info__item {
    display: flex; gap: var(--s-3); align-items: flex-start;
    background: var(--color-background); border: 1px solid var(--color-border-soft);
    border-radius: var(--r-card); padding: var(--s-4) var(--s-5);
}
.info__item div { font-size: .98rem; }
.info__ic { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--color-surface-2); color: var(--color-primary); }

/* ====================================================================
   CONTATTI
   ==================================================================== */
.contatti__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(var(--s-5), 6vw, var(--s-8)); align-items: start; }
.contatti__list { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.contatti__list li { display: flex; gap: var(--s-3); align-items: center; }
.contatti__list a { display: inline-block; padding-block: 6px; }
.contatti__ic { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--color-surface); color: var(--color-primary); }
.contatti__lab { display: block; font-family: var(--font-ui); font-size: .72rem; text-transform: uppercase; letter-spacing: .18em; color: var(--color-text-soft); }
.contatti__card {
    background: var(--color-surface); border: 1px solid var(--color-border-soft);
    border-radius: var(--r-card); padding: clamp(var(--s-5), 4vw, var(--s-6)); box-shadow: var(--shadow-sm);
}
.contatti__card-title { font-size: 1.6rem; margin-bottom: var(--s-2); }
.contatti__cta { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.contatti__cta .pill { justify-content: center; }

/* ====================================================================
   LEGAL PAGES
   ==================================================================== */
.legal__wrap { max-width: 760px; }
.legal h2 { font-size: 1.5rem; margin: var(--s-6) 0 var(--s-2); color: var(--color-primary); }
.legal p { color: var(--color-text-soft); }
.legal__back { margin-top: var(--s-7); }

/* ====================================================================
   FOOTER
   ==================================================================== */
.footer { background: var(--color-primary); color: var(--color-on-dark); padding-top: var(--s-8); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-6); padding-bottom: var(--s-7); }
.footer__name { font-size: 2.8rem; color: var(--color-on-dark); display: block; }
.footer__sub { font-family: var(--font-ui); font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: rgba(246, 239, 228, .95); }
.footer__tag { margin-top: var(--s-3); color: rgba(246, 239, 228, 1); font-size: .95rem; }
.footer__title { color: var(--color-on-dark); font-size: 1.25rem; margin-bottom: var(--s-3); }
.footer__list { display: grid; gap: 10px; font-family: var(--font-ui); font-size: .92rem; color: rgba(246, 239, 228, 1); }
/* Nel footer i link stanno in colonna e si toccano col pollice: senza un po' di
   imbottitura verticale le aree attive si sfiorano e si sbaglia bersaglio. */
.footer__list a { display: inline-block; padding-block: 7px; }
.footer__list a { transition: color .25s var(--ease); }
.footer__list a:hover { color: var(--color-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.footer__bar { border-top: 1px solid rgba(246, 239, 228, .18); }
.footer__bar-inner { display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; padding-block: var(--s-4) calc(var(--s-4) + 56px); font-family: var(--font-ui); font-size: .82rem; color: rgba(246, 239, 228, 1); }

/* ====================================================================
   FLOATING BUTTONS
   ==================================================================== */
.fab {
    position: fixed; z-index: 900; display: inline-flex; align-items: center; gap: 10px;
    border-radius: var(--r-pill); box-shadow: var(--shadow-md);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), opacity .3s var(--ease), background-color .3s var(--ease);
}
.fab--contact { right: 22px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); background: var(--color-accent); color: var(--color-on-dark); padding: 14px 20px; font-family: var(--font-ui); font-weight: 500; }
.fab--contact:hover { transform: translateY(-3px); background: var(--color-accent-deep); box-shadow: var(--shadow-lg); }
.fab--top { right: 22px; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); width: 48px; height: 48px; justify-content: center; background: var(--color-background); color: var(--color-primary); border: 1.5px solid var(--color-border); }
.fab--top:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
/* `display:inline-flex` batte l'attributo hidden dell'UA: senza `visibility` il
   bottone resterebbe cliccabile e raggiungibile da tastiera anche da invisibile. */
.fab[hidden] { opacity: 0; pointer-events: none; visibility: hidden; transform: translateY(12px); display: inline-flex; }
.fab:not([hidden]) { visibility: visible; }

/* ====================================================================
   REVEAL ANIMATIONS
   ==================================================================== */
/* Nessun will-change permanente: promuoveva ~80 elementi a livello compositato,
   con costo di memoria sui telefoni e ridisegni inaffidabili su WebKit. */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
/* elemento sticky: la trasformazione ne falsava l'aggancio */
.info__head.reveal { transform: none; }
.reveal.is-visible { opacity: 1; transform: none; }
/* light stagger inside grids */
.amenities .amenity:nth-child(2), .places .place:nth-child(2), .gallery-item:nth-child(2) { transition-delay: .07s; }
.amenities .amenity:nth-child(3), .places .place:nth-child(3), .gallery-item:nth-child(3) { transition-delay: .14s; }
.amenities .amenity:nth-child(4), .gallery-item:nth-child(4) { transition-delay: .21s; }

/* ====================================================================
   RESPONSIVE
   --------------------------------------------------------------------
   Sei soglie, dalla piu' larga alla piu' stretta. Le regole si sommano:
   quello che vale a 860px vale anche a 375px, salvo riscrittura.

     1024px  tablet orizzontale — le griglie a 3/4 colonne scendono a 2/3
      860px  tablet verticale   — cade l'affiancamento testo/immagine
      700px  phablet            — le recensioni passano a colonna unica
      620px  telefono largo     — cio' che non si stringe va a capo
      560px  telefono           — impaginazione a colonna singola
      400px  telefono piccolo   — si recupera aria dai margini laterali
   ==================================================================== */
@media (max-width: 1024px) {
    :root { --nav-h: 70px; }
    .amenities { grid-template-columns: repeat(2, 1fr); }
    .reviews { --per: 3; }
}

@media (max-width: 860px) {
    /* Il marchio deve restare su una riga sola: "Apulia Suite" spezzato in due
       nella barra stretta raddoppia l'altezza della navbar e sfigura il logo. */
    .navbar__brand .brand-script { font-size: 1.45rem; }
    .navbar__brand .brand-sub { font-size: .52rem; letter-spacing: .16em; }
    .struttura__grid { grid-template-columns: 1fr; }
    .struttura__media { order: -1; }
    .struttura__media img { aspect-ratio: 4 / 3; object-position: center; max-width: 560px; margin-inline: auto; }
    .info__grid { grid-template-columns: 1fr; }
    .info__head { position: static; }
    .contatti__grid { grid-template-columns: 1fr; }
    .rating { grid-template-columns: 1fr; }
    .places { grid-template-columns: 1fr; }
    .gallery-grid { column-count: 2; }
    .reviews { --per: 2; }
    .shuttle { gap: var(--s-3); }
    /* Le quattro colonne del footer hanno una larghezza minima di contenuto di
       ~630px: sotto quella soglia sfondavano la finestra e la pagina scorreva
       lateralmente. Il marchio sale a riga intera, i tre elenchi restano affiancati. */
    .footer__grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-5) var(--s-4); }
    .footer__brand { grid-column: 1 / -1; }
}

/* Le recensioni sono schede di testo: sotto i ~350px di colonna le righe
   diventano troppo corte e il virgolettato si sbriciola. */
@media (max-width: 700px) {
}

/* Sotto i 620px le "chip" delle distanze e i pulsanti con testo lungo
   (soprattutto in inglese) non possono restringersi e spingono le schede
   oltre il bordo dello schermo: qui viene concesso loro di andare a capo. */
@media (max-width: 620px) {
    /* Una scheda per schermata: sotto i ~270px la citazione andrebbe a capo a
       ogni parola e le schede sembrerebbero colonne di parole. */
    .reviews { --per: 1; }
    /* Con una scheda alla volta il dito deve fermarsi su ognuna: senza questo,
       una passata veloce su iPhone ne salta una e si ferma a meta' strada fra due. */
    .review { scroll-snap-stop: always; }
    .reviews-head { flex-direction: column; align-items: stretch; }
    .carousel-nav { justify-content: flex-end; }
    .reviews__cta .pill,
    .gallery-toggle { white-space: normal; text-align: center; }
    .review__top { flex-wrap: wrap; }
    .place { flex-wrap: wrap; }
    .place__body { flex: 1 1 auto; min-width: 0; }
    .chip { align-self: flex-start; white-space: normal; }
    .contatti__card { padding: var(--s-4); }
    .contatti__cta .pill { white-space: normal; }
    .facts { gap: var(--s-2); }
    .fact { font-size: .85rem; padding: 8px 14px; }
    .shuttle { flex-direction: column; align-items: flex-start; }
    .shuttle__cta { width: 100%; justify-content: center; }
}

@media (max-width: 560px) {
    /* I due pulsanti flottanti coprivano CTA e link: sul telefono ne resta uno
       solo (in cima si torna comunque scorrendo) e il footer lascia spazio. */
    .fab--top { display: none; }
    .footer__col:last-child { padding-right: 84px; }
    .footer__bar-inner { padding-right: 84px; }

    body { font-size: 1rem; }

    /* --- Barra in alto -------------------------------------------------
       Marchio compatto ma leggibile, e il bottone "Prenota" resta: e' la
       chiamata all'azione principale, non un di piu'. Perde solo la
       freccia dentro il cerchio, che a questa larghezza e' solo ingombro. */
    .navbar__inner { gap: var(--s-2); }
    .navbar__brand .brand-script { font-size: 1.46rem; }
    .navbar__brand .brand-sub { font-size: .54rem; letter-spacing: .14em; }
    .nav-contact { padding: 8px 14px; font-size: .82rem; }
    .nav-contact .pill__arrow { display: none; }
    .lang { display: none; } /* la scelta lingua resta dentro il menu a scomparsa */

    /* --- Eroe ----------------------------------------------------------
       L'occhiello con .3em di spaziatura occupava tre righe intere e il
       nome della struttura finiva sotto la piega.

       ⚠️ Qui il contenuto NON e' semplicemente centrato, ed e' voluto: la
       colonna si distende su tutta l'altezza dell'eroe (`align-items:
       stretch`) e lo spazio libero viene spartito dai due margini `auto` —
       uno sopra l'occhiello, uno sopra i bottoni. Centrando e basta, il
       gruppo restava un blocco compatto a mezza altezza con un vuoto sotto,
       che e' il difetto segnalato dal committente il 25 ago 2026.
       I margini `auto` valgono zero quando lo spazio finisce, quindi sui
       telefoni bassi il testo non viene mai spinto fuori schermo. */
    .hero { align-items: stretch; }
    /* ⛔ Qui NON va `width: 100%`, per quanto sembri innocuo. `.container` non usa
       un'imbottitura per i margini laterali ma la LARGHEZZA
       (`width: min(100% - 2 * var(--gutter), …)`, riga ~105): dichiarare 100%
       la sovrascrive e il contenuto va a filo schermo. E' successo davvero il
       25 ago 2026 — i due bottoni dell'eroe finivano a 4px dal bordo — e da
       fuori sembra un problema dei bottoni, non del contenitore. */
    .hero__content {
        display: flex; flex-direction: column;
        padding-top: var(--s-5);
        /* Il pulsante flottante dei contatti sta fisso in basso a destra e sui
           telefoni bassi (568-667px) copriva il bordo destro delle due CTA: un
           tocco li' apriva i contatti invece della verifica disponibilita'.
           Il respiro in fondo tiene i bottoni sopra il cerchio. */
        padding-bottom: calc(var(--s-5) + 76px);
    }
    /* Lo spazio libero viene spartito da due distanziatori vuoti, in proporzione
       2 sopra : 1 sotto, mentre il distacco fra introduzione e bottoni resta
       LIMITATO da un `clamp` (32-48px).
       ⚠️ Le due versioni precedenti hanno sbagliato ognuna in un verso opposto,
       ed e' il motivo per cui la regola e' scritta cosi':
       - contenuto centrato e basta (fino al 25 ago) → un vuoto enorme SOTTO i
         bottoni, respinto dal committente;
       - due margini `auto` (primo tentativo del 25 ago) → tutto lo spazio finiva
         FRA introduzione e bottoni: 208px a 430x932, respinto anche quello.
       Con i distanziatori il respiro sta dove serve — attorno al blocco — e il
       gruppo testo+bottoni resta unito. */
    .hero__content::before,
    .hero__content::after { content: ""; display: block; }
    .hero__content::before { flex: 2 1 0; }
    .hero__content::after { flex: 1 1 0; }
    /* .66rem non ci sta: con i margini laterali rimessi a posto (il riquadro qui
       sopra) l'occhiello andava a capo su un telefono da 393 punti. */
    .hero__eyebrow { font-size: .64rem; letter-spacing: .14em; margin-bottom: var(--s-2); }
    .hero__title { margin-bottom: var(--s-4); }
    .hero__script { font-size: clamp(3.2rem, 15.5vw, 4.6rem); }
    .hero__sub { font-size: .74rem; letter-spacing: .2em; margin-top: 6px; }
    .hero__lead { font-size: .9rem; line-height: 1.5; margin-bottom: clamp(var(--s-5), 5vh, var(--s-6)); }
    /* Gli 8px di lato si sommano al margine del contenitore: sul telefono i due
       bottoni restano larghi ma non piu' a filo del bordo dello schermo. */
    .hero__actions { gap: var(--s-2); padding-inline: var(--s-2); }
    .hero__actions .pill { width: 100%; justify-content: center; }
    /* Sul telefono la foto ORIZZONTALE era il vero motivo della grana: con
       `cover` su uno schermo verticale il browser ne mostrava solo il 33%
       centrale e lo ingrandiva quasi tre volte. Qui si serve un RITAGLIO
       GIA' VERTICALE (3:4, generato dal master 1600px con Lanczos +
       maschera di contrasto): tutti i pixel scaricati finiscono a schermo e
       al browser resta un ingrandimento di circa 1x anche su un telefono a
       densita' 3. ⚠️ Le vecchie hero-suite-700/1200 erano le versioni
       ORIZZONTALI ridotte — la causa della grana — e sono state cancellate
       il 25 ago 2026: non rigenerarle e non rimetterle qui.
       ⚠️ La zoomata iniziale e' spenta di proposito: quel `scale(1.08)` e' un
       altro 8% di ingrandimento proprio sul primo fotogramma che si vede. */
    .hero__bg {
        background-position: center center;
        transform: none; animation: none;
        background-image: url('../images/hero-suite-mob-800.jpg');
        background-image: -webkit-image-set(
            url('../images/hero-suite-mob-800.webp') type('image/webp') 1x,
            url('../images/hero-suite-mob.webp') type('image/webp') 2x);
        background-image: image-set(
            url('../images/hero-suite-mob-800.webp') type('image/webp') 1x,
            url('../images/hero-suite-mob.webp') type('image/webp') 2x,
            url('../images/hero-suite-mob-800.jpg') type('image/jpeg') 1x,
            url('../images/hero-suite-mob.jpg') type('image/jpeg') 2x);
    }

    .section__title { font-size: clamp(1.75rem, 8vw, 2.2rem); }
    .amenities { grid-template-columns: 1fr; }
    .rating__cats { grid-template-columns: 1fr; }
    .rating__score { flex-direction: column; align-items: flex-start; }
    .rating__num { font-size: 2.8rem; }
    .info__item { padding: var(--s-4); }
    .gallery-grid { column-count: 1; }
    .gallery-toggle-wrap { display: block; }
    .gallery-toggle { width: 100%; }
    .reviews__cta { flex-direction: column; align-items: stretch; }
    .reviews__cta .pill { justify-content: center; }
    .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
    .footer__name { font-size: 2.1rem; }
    .fab--contact .fab__label { display: none; }
    .fab--contact { padding: 14px; }
    .lightbox { padding: var(--s-3); }
    .lightbox__nav { width: 44px; height: 44px; font-size: 1.5rem; }
    .lightbox__close { width: 44px; height: 44px; font-size: 1.4rem; top: 12px; right: 12px; }
    .lightbox__nav--prev { left: 8px; }
    .lightbox__nav--next { right: 8px; }
}

/* Sotto i 400px 48px complessivi di margine laterale valgono piu' del 12%
   della larghezza utile: il contenuto vale piu' dell'aria. */
@media (max-width: 400px) {
    :root { --gutter: var(--s-3); }
    .navbar__brand .brand-script { font-size: 1.28rem; }
    .navbar__brand .brand-sub { font-size: .48rem; letter-spacing: .12em; }
    .nav-contact { padding: 8px 12px; font-size: .78rem; }
    .footer__grid { grid-template-columns: 1fr; }
    .footer__col:last-child, .footer__bar-inner { padding-right: 0; }
}

/* Telefono basso in verticale (iPhone SE: 568px di altezza utile e meno).
   Le imbottiture dell'eroe sono calcolate sulla larghezza, che qui non dice
   nulla sull'altezza: senza questa correzione la seconda CTA finisce sotto la
   piega e l'ospite non la vede mai. */
@media (max-height: 680px) and (orientation: portrait) {
    .hero__content { padding-block: var(--s-4) calc(var(--s-4) + 76px); }
    .hero__eyebrow { font-size: .62rem; margin-bottom: var(--s-1); }
    .hero__script { font-size: clamp(2.8rem, 13.5vw, 4rem); }
    .hero__sub { font-size: .7rem; margin-top: 5px; }
    .hero__title { margin-bottom: var(--s-3); }
    .hero__lead { font-size: .84rem; line-height: 1.45; margin-bottom: var(--s-4); }
}

/* ⚠️ Qui l'imbottitura da sola NON basta, ed e' il motivo per cui questa regola
   esiste: quando il contenuto dell'eroe supera l'altezza dello schermo, l'eroe
   cresce insieme all'imbottitura e la CTA resta dov'era, sotto il pulsante
   flottante. L'unica leva che funziona e' ridurre davvero l'altezza del testo.
   Schermo piccolo in entrambe le dimensioni (iPhone SE: 320x568). */
@media (max-height: 600px) and (max-width: 360px) {
    .hero__content { padding-block: var(--s-3) calc(var(--s-3) + 76px); }
    .hero__eyebrow { font-size: .58rem; letter-spacing: .1em; }
    .hero__script { font-size: 2.75rem; }
    .hero__sub { font-size: .66rem; letter-spacing: .16em; }
    .hero__lead { font-size: .78rem; line-height: 1.4; margin-bottom: var(--s-3); }
    .hero__actions .pill { min-height: 46px; padding-block: 10px; }
}

/* Telefono coricato (e finestre basse in genere): l'eroe ha imbottiture
   calcolate sulla LARGHEZZA, che qui e' abbondante mentre l'altezza non lo e'.
   Senza questa correzione su uno schermo alto 375px il solo respiro sopra e
   sotto il testo occupa mezzo schermo e i due bottoni finiscono lontanissimi. */
@media (max-height: 500px) and (orientation: landscape) {
    .hero { min-height: 0; }
    .hero__content { padding-block: var(--s-5); }
    .hero__script { font-size: clamp(2.6rem, 7.5vw, 3.6rem); }
    .hero__sub { font-size: .72rem; }
    .hero__lead { margin-bottom: var(--s-4); font-size: .84rem; }
    .hero__actions .pill { width: auto; }
    /* il menu a scomparsa deve poter scorrere: in orizzontale non ci sta tutto */
    .nav-menu__panel { padding: var(--s-5) var(--s-5) var(--s-4); }
    .nav-menu__link { font-size: 1.4rem; padding: 4px 0; min-height: 40px; }
    .lightbox__img { max-height: 72vh; }
}

/* ====================================================================
   REDUCED MOTION
   ==================================================================== */
@media (prefers-reduced-motion: reduce) {
    html, .reviews { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .reveal { opacity: 1; transform: none; }
    .hero__bg { transform: none; animation: none; }
    .rating .rating__bar-fill { transition: none; }
}

/* ====================================================================
   STAMPA — le pagine legali vengono spesso salvate in PDF dagli ospiti
   ==================================================================== */
@media print {
    .navbar, .nav-menu, .nav-backdrop, .fab, .lightbox, .skip-link,
    .gallery-toggle-wrap, .carousel-nav { display: none !important; }
    html { scroll-behavior: auto; }
    body { background: #fff; color: #000; font-size: 11pt; }
    .reveal { opacity: 1 !important; transform: none !important; }
    .section { padding-block: 12pt; border: 0; }
    .section--surface { background: none; }
    h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
    p, li, .review, .place, .info__item { break-inside: avoid; page-break-inside: avoid; }
    .footer { background: none !important; color: #000 !important; padding-top: 12pt; }
    .footer a, .footer__list a, .footer__title, .footer__name, .footer__sub { color: #000 !important; }
    /* in un foglio stampato un link senza indirizzo e' inutile */
    main a[href^="http"]::after, .legal a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
    img { max-width: 100% !important; }
}

/* ====================================================================
   BOOKING ENGINE — sezione #prenota: calendario, esito disponibilità,
   pulsanti di contatto diretto.
   Non esistono form, preventivi o prezzi: è una scelta di progetto.
   ==================================================================== */

/* --- Token nuovi ---------------------------------------------------
   Servono due sole tinte semantiche (disponibile / non disponibile).
   Sono volutamente DESATURATE per convivere con pietra, ambra e blu
   notte: un verde eucalipto e un cotto pugliese, non un semaforo.
   Entrambe superano 4.5:1 su --color-background (#F7F3EC).
   ------------------------------------------------------------------- */
:root {
    --color-ok:        #4F6E53;  /* verde eucalipto — data disponibile */
    --color-ok-soft:   rgba(79, 110, 83, .12);
    --color-busy:      #9C5340;  /* cotto pugliese — data non disponibile */
    --color-busy-soft: rgba(156, 83, 64, .10);
    /* fondo tenue dell'intervallo selezionato: ambra al 14% */
    --range-soft:      rgba(192, 138, 62, .16);
    --range-hover:     rgba(192, 138, 62, .09);
}

/* --- Griglia: calendario + colonna laterale ------------------------- */
.avail {
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(var(--s-4), 3vw, var(--s-6)); align-items: start;
}

/* ====================================================================
   CALENDARIO
   ==================================================================== */
.cal {
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--r-card);
    padding: clamp(var(--s-3), 2.5vw, var(--s-5));
    box-shadow: var(--shadow-sm);
}
.cal__head { position: relative; }
.cal__nav {
    position: absolute; top: 0; z-index: 2;
    display: grid; place-items: center;
    width: 40px; height: 40px; border-radius: 50%;
    color: var(--color-primary);
    border: 1.5px solid var(--color-border-soft); background: var(--color-background);
    transition: background-color .25s var(--ease), border-color .25s var(--ease), opacity .25s var(--ease);
}
.cal__nav:hover:not([disabled]) { background: var(--color-surface-2); border-color: var(--color-border); }
.cal__nav[disabled] { opacity: .3; cursor: default; }
.cal__nav--prev { left: 0; }
.cal__nav--next { right: 0; }

.cal__months { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-5); }
.cal__month-name {
    font-family: var(--font-heading); font-weight: 600; font-size: 1.35rem;
    color: var(--color-primary); text-align: center;
    min-height: 40px; line-height: 40px; margin-bottom: var(--s-2);
}

/* Nessun gap orizzontale: così l'intervallo selezionato ha un fondo
   continuo, senza trucchi di box-shadow per "cucire" le celle. */
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 3px; }
.cal__wd {
    font-family: var(--font-ui); font-size: .66rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--color-text-soft); text-align: center; padding-bottom: var(--s-2);
}
.cal__blank { min-height: 46px; }

.cal__day {
    position: relative;
    display: grid; align-content: center; justify-items: center; gap: 1px;
    min-height: 46px; padding: 4px 2px;
    border-radius: 10px;
    color: var(--color-text);
    transition: background-color .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
}
.cal__num   { font-family: var(--font-ui); font-size: .95rem; font-weight: 500; line-height: 1.1; }

.cal__day.is-free:hover { background: var(--color-surface-2); }

.cal__day.is-past    { color: var(--color-text-soft); opacity: .42; cursor: default; }
.cal__day.is-unknown { color: var(--color-text-soft); opacity: .5; cursor: default; }
.cal__day.is-blocked { color: var(--color-busy); background: var(--color-busy-soft); cursor: default; }
.cal__day.is-blocked .cal__num { text-decoration: line-through; text-decoration-thickness: 1px; }

.cal__day.is-today { box-shadow: inset 0 0 0 1.5px var(--color-border); }

/* intervallo: fondo tenue continuo, estremi in ambra */
.cal__day.is-in-range    { background: var(--range-soft); border-radius: 0; }
.cal__day.is-hover-range { background: var(--range-hover); border-radius: 0; }
.cal__day.is-start, .cal__day.is-end {
    background: var(--color-accent); color: var(--color-on-dark); box-shadow: var(--shadow-sm);
}
.cal__day.is-start { border-radius: 10px 0 0 10px; }
.cal__day.is-end   { border-radius: 0 10px 10px 0; }
.cal__day.is-start.is-end { border-radius: 10px; }
.cal__day.is-start:hover, .cal__day.is-end:hover { background: var(--color-accent-deep); }

.cal__day:focus-visible { outline: 2.5px solid var(--color-primary); outline-offset: -3px; border-radius: 10px; z-index: 3; }

.cal__msg {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
    margin-top: var(--s-4); padding: 10px var(--s-3);
    font-family: var(--font-ui); font-size: .86rem; line-height: 1.5;
    color: var(--color-text-soft);
    background: var(--color-background); border: 1px solid var(--color-border-soft);
    border-radius: var(--r-sm);
}
/* `display:flex` batterebbe l'attributo hidden dell'UA: va ripristinato */
.cal__msg[hidden] { display: none; }
.cal__msg--error { color: var(--color-busy); background: var(--color-busy-soft); border-color: rgba(156, 83, 64, .28); }
.cal__retry {
    font-family: var(--font-ui); font-size: .82rem; font-weight: 500;
    padding: 6px 14px; min-height: 34px; border-radius: var(--r-pill);
    border: 1.5px solid currentColor; color: inherit;
    transition: background-color .25s var(--ease);
}
.cal__retry:hover { background: rgba(255, 255, 255, .5); }

.cal__legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-4); }
.cal__legend-item {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-ui); font-size: .78rem; color: var(--color-text-soft);
}
.cal__swatch { width: 13px; height: 13px; border-radius: 4px; flex: none; }
.cal__swatch--free { background: var(--color-ok-soft); box-shadow: inset 0 0 0 1.5px var(--color-ok); }
.cal__swatch--busy { background: var(--color-busy-soft); box-shadow: inset 0 0 0 1.5px var(--color-busy); }
.cal__swatch--sel  { background: var(--color-accent); }
.cal__hint { font-family: var(--font-ui); font-size: .78rem; color: var(--color-text-soft); margin-top: var(--s-2); line-height: 1.5; }

/* ====================================================================
   COLONNA LATERALE — verifica disponibilità + contatti
   ==================================================================== */
.avail__side { display: grid; gap: var(--s-4); }
.avail__check { justify-content: center; width: 100%; min-height: 48px; }

/* --- Pannello esito -------------------------------------------------- */
.avail__result {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--r-card);
    padding: clamp(var(--s-4), 3vw, var(--s-5));
    box-shadow: var(--shadow-sm);
}
.avail__hint, .avail__loading {
    font-family: var(--font-ui); font-size: .92rem; line-height: 1.6; color: var(--color-text-soft);
}
.avail__dates {
    display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
    padding-bottom: var(--s-3); margin-bottom: var(--s-3);
    border-bottom: 1px solid var(--color-border-soft);
}
.avail__slot { display: grid; gap: 2px; }
.avail__k { font-family: var(--font-ui); font-size: .68rem; text-transform: uppercase; letter-spacing: .16em; color: var(--color-text-soft); }
.avail__v { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600; color: var(--color-primary); line-height: 1.2; }
.avail__sep { color: var(--color-border); font-size: 1.2rem; }

/* Esito: verdetto grande + spiegazione. */
.avail__verdict {
    display: flex; align-items: center; gap: var(--s-3);
    font-family: var(--font-heading); font-size: 1.4rem; font-weight: 600; line-height: 1.25;
}
.avail__verdict-ic {
    flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
}
.avail__nights { font-family: var(--font-ui); font-size: .85rem; color: var(--color-text-soft); margin-top: var(--s-2); }
.avail__note { font-family: var(--font-ui); font-size: .88rem; line-height: 1.6; color: var(--color-text-soft); margin-top: var(--s-3); }
.avail__error { font-family: var(--font-ui); font-size: .9rem; line-height: 1.6; color: var(--color-busy); }

/* Stato positivo — verde eucalipto */
.avail__result.is-ok    { border-color: rgba(79, 110, 83, .45); background: var(--color-ok-soft); }
.avail__result.is-ok    .avail__verdict { color: var(--color-ok); }
.avail__result.is-ok    .avail__verdict-ic { color: var(--color-ok); background: rgba(79, 110, 83, .16); }
/* Stato neutro/attenuato — cotto pugliese desaturato */
.avail__result.is-busy  { border-color: rgba(156, 83, 64, .35); background: var(--color-busy-soft); }
.avail__result.is-busy  .avail__verdict { color: var(--color-busy); }
.avail__result.is-busy  .avail__verdict-ic { color: var(--color-busy); background: rgba(156, 83, 64, .14); }

/* --- Contatti diretti (sempre visibili) ----------------------------- */
.avail__contacts {
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--r-card);
    padding: clamp(var(--s-4), 3vw, var(--s-5));
}
.avail__contacts-title {
    font-family: var(--font-ui); font-size: .72rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: .2em; color: var(--color-text-soft);
    margin-bottom: var(--s-3);
}
.avail__contacts-list { display: grid; gap: var(--s-2); }

.contact-btn {
    display: flex; align-items: center; gap: var(--s-3); width: 100%;
    padding: 11px var(--s-3); min-height: 52px;
    border: 1.5px solid var(--color-border); border-radius: var(--r-sm);
    background: var(--color-background); color: var(--color-primary);
    text-decoration: none;
    transition: border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease);
}
a.contact-btn:hover { border-color: var(--color-accent); background: var(--color-surface-2); transform: translateY(-1px); }
.contact-btn__ic {
    flex: none; display: grid; place-items: center; width: 38px; height: 38px;
    border-radius: 50%; color: var(--color-accent); background: rgba(192, 138, 62, .12);
}
.contact-btn__body { display: grid; gap: 2px; }
.contact-btn__lab { font-family: var(--font-ui); font-size: .82rem; font-weight: 500; letter-spacing: .04em; color: var(--color-text-soft); }
.contact-btn__val { font-family: var(--font-body); font-size: 1rem; color: var(--color-primary); word-break: break-word; }

/* ====================================================================
   BOOKING — RESPONSIVE
   ==================================================================== */
@media (max-width: 1024px) {
    .avail { grid-template-columns: 1fr; }
    .avail__side { max-width: 560px; margin-inline: auto; width: 100%; }
}
@media (max-width: 560px) {
    .cal { padding: var(--s-3) var(--s-2) var(--s-3); }
    .cal__nav { left: 2px; }
    .cal__nav--next { left: auto; right: 2px; }
    .cal__month-name { font-size: 1.2rem; }
    .cal__day { min-height: 44px; border-radius: 8px; }
    .cal__day.is-start { border-radius: 8px 0 0 8px; }
    .cal__day.is-end { border-radius: 0 8px 8px 0; }
    .cal__num { font-size: .9rem; }
    .avail__verdict { font-size: 1.25rem; }
}
/* Sotto i 400px le sette colonne del calendario devono comunque restare
   sopra i 40px di lato utile: si recupera spazio dall'imbottitura, non
   dalla cella. Stessa soglia usata dal resto del sito. */
@media (max-width: 400px) {
    .cal { padding: var(--s-3) 6px; }
    .cal__grid { row-gap: 2px; }
    .cal__wd { font-size: .6rem; letter-spacing: .04em; }
    .cal__num { font-size: .86rem; }
    .cal__legend { gap: var(--s-2); }
    .cal__legend-item { font-size: .72rem; }
    .contact-btn { padding: 10px var(--s-2); gap: var(--s-2); }
    .contact-btn__ic { width: 34px; height: 34px; }
    .contact-btn__val { font-size: .92rem; }
}

/* ====================================================================
   BOOKING — REDUCED MOTION
   ==================================================================== */
@media (prefers-reduced-motion: reduce) {
    .cal__day, .cal__nav, .contact-btn { transition: none; }
}

/* ====================================================================
   BOOKING — CALENDARIO ADESIVO (revisione finale)
   --------------------------------------------------------------------
   Da 1025px in su la colonna laterale (esito + contatti) può essere più
   alta di quella del calendario: lasciandola statica resterebbe un vuoto a
   sinistra e l'ospite perderebbe di vista le date. Il calendario segue lo
   scorrimento, come già fa `.info__head`.
   Sotto i 1024px la griglia è a una colonna e la regola non si applica.
   Il vincolo `min-height: 760px` evita il caso patologico della finestra
   bassa: se la scheda del calendario (~610px) non ci sta tutta sotto la
   navbar, resta statica e nessuna riga finisce fuori schermo.
   ==================================================================== */
@media (min-width: 1025px) and (min-height: 760px) {
    .avail__calwrap { position: sticky; top: calc(var(--nav-h) + var(--s-4)); }
}

/* ====================================================================
   FONT SELF-HOSTED — aggiunto per compliance GDPR + performance.
   Sostituisce il caricamento da Google Fonts (fonts.googleapis.com):
   nessun IP dei visitatori inviato a terzi, nessuna richiesta esterna
   bloccante. Subset latin + latin-ext (IT/EN). File in sito/fonts/.
   NON modificare le regole sopra: questo blocco è APPESO in fondo.
   ==================================================================== */
/* Cormorant Garamond 400 italic — latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cormorant-400-italic-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;
}
/* Cormorant Garamond 400 italic — latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cormorant-400-italic-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;
}
/* Cormorant Garamond 500 italic — latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-500-italic-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;
}
/* Cormorant Garamond 500 italic — latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-500-italic-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;
}
/* Cormorant Garamond 600 italic — latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cormorant-600-italic-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;
}
/* Cormorant Garamond 600 italic — latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cormorant-600-italic-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;
}
/* Cormorant Garamond 400 normal — latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cormorant-400-normal-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;
}
/* Cormorant Garamond 400 normal — latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cormorant-400-normal-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;
}
/* Cormorant Garamond 500 normal — latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-500-normal-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;
}
/* Cormorant Garamond 500 normal — latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-500-normal-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;
}
/* Cormorant Garamond 600 normal — latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cormorant-600-normal-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;
}
/* Cormorant Garamond 600 normal — latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cormorant-600-normal-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;
}
/* Cormorant Garamond 700 normal — latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/cormorant-700-normal-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;
}
/* Cormorant Garamond 700 normal — latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/cormorant-700-normal-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;
}
/* Jost 400 normal — latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jost-400-normal-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;
}
/* Jost 400 normal — latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jost-400-normal-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;
}
/* Jost 500 normal — latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/jost-500-normal-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;
}
/* Jost 500 normal — latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/jost-500-normal-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;
}
/* Jost 600 normal — latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/jost-600-normal-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;
}
/* Jost 600 normal — latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/jost-600-normal-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;
}
/* Mulish 300 normal — latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/mulish-300-normal-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;
}
/* Mulish 300 normal — latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/mulish-300-normal-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;
}
/* Mulish 400 normal — latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/mulish-400-normal-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;
}
/* Mulish 400 normal — latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/mulish-400-normal-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;
}
/* Mulish 500 normal — latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/mulish-500-normal-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;
}
/* Mulish 500 normal — latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/mulish-500-normal-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;
}
/* Mulish 600 normal — latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/mulish-600-normal-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;
}
/* Mulish 600 normal — latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/mulish-600-normal-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;
}
/* Mulish 700 normal — latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/mulish-700-normal-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;
}
/* Mulish 700 normal — latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/mulish-700-normal-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;
}