/* === base.css === */
/* ==========================================================================
   Bedouin — base: font, design token, reset.
   Valori misurati sugli stili calcolati di bedouin.it (Chrome, 21-09-2026),
   non copiati dallo spec: dove i due divergono vince il sito vivo.
   ========================================================================== */

/* --- Font self-hosted ----------------------------------------------------
   Inter: file variabile, asse wght 100–900 (il CSS usa da 100 a 900). Nessun intervallo di peso
   dichiarato, come sul vivo: Chrome applica comunque il peso richiesto tramite l'asse.

   Il file intero (190 KB, 900 caratteri, assi opsz+wght) era la richiesta piu' pesante della pagina
   e in preload rubava la banda ai CSS che sbloccano il disegno (FCP 3,6 s). Diviso in due
   sottoinsiemi con unicode-range, come fa Google Fonts: le pagine italiane e inglesi scaricano solo
   il primo. L'asse opsz e' fissato a 14 (il suo valore di default) perche' nessuna regola usa
   font-optical-sizing o font-variation-settings.
     latin     64 KB  — tutto il sito tranne due caratteri
     latin-ext 75 KB  — solo dove compare "ā" (/prodotti/)
   Rigenerare dopo un aggiornamento di Inter: scripts/build_fonts.py */
@font-face {
  font-family: "Inter Display";
  src: url("../../fonts/InterVariable-latin.woff2") format("woff2");
  font-display: swap;
  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+2264, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Display";
  src: url("../../fonts/InterVariable-latinext.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}

/* DM Mono: i 12 file che Elementor scaricava da Google Fonts (latin + latin-ext). */
@font-face { font-family: "DM Mono"; font-style: italic; font-weight: 300; src: url("../../fonts/dmmono-75f3f285.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-display: swap; }
@font-face { font-family: "DM Mono"; font-style: italic; font-weight: 300; src: url("../../fonts/dmmono-9a087a1b.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-display: swap; }
@font-face { font-family: "DM Mono"; font-style: italic; font-weight: 400; src: url("../../fonts/dmmono-32e9ba6a.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-display: swap; }
@font-face { font-family: "DM Mono"; font-style: italic; font-weight: 400; src: url("../../fonts/dmmono-cb2a35ab.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-display: swap; }
@font-face { font-family: "DM Mono"; font-style: italic; font-weight: 500; src: url("../../fonts/dmmono-719d7d41.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-display: swap; }
@font-face { font-family: "DM Mono"; font-style: italic; font-weight: 500; src: url("../../fonts/dmmono-c32e5a77.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-display: swap; }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 300; src: url("../../fonts/dmmono-63d829a7.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-display: swap; }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 300; src: url("../../fonts/dmmono-c5d273fb.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-display: swap; }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; src: url("../../fonts/dmmono-9ad76cd0.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-display: swap; }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; src: url("../../fonts/dmmono-a175863f.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-display: swap; }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; src: url("../../fonts/dmmono-36c1af8e.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-display: swap; }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; src: url("../../fonts/dmmono-6a59878c.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-display: swap; }

/* artifex-hand-cf arriva da Adobe Fonts (kit hci5pck), caricato in functions.php. */

/* --- Design token --------------------------------------------------------
   Breakpoint (le media query non leggono le variabili: valori da ripetere a mano)
     mobile   ≤ 767px    Elementor mobile
     tablet   768–1024   Elementor tablet
     desktop  ≥ 1025px
     header   ≤ 991px    solo l'header passa a hamburger qui, non a 1024
   Il sito vivo NON ha breakpoint laptop/widescreen attivi: 1440 e 1920
   condividono gli stessi valori, cambia solo lo spazio disponibile. */
:root {
  /* colori del kit Elementor 15 */
  --color-beige: #fffae7;          /* Beige: sfondi chiari, testo su scuro */
  --color-nero: #1c1d20;           /* Nero: sezioni scure, footer */
  --color-mattone: #91441e;        /* Mattone: CTA */
  /* colori scritti a mano nei widget */
  --color-mattone-caldo: #8b4528;  /* testo CTA header, hover sottomenu */
  --color-testo: #1a1917;          /* testo su beige nelle pagine */
  --color-beige-supporto: #cec9b8; /* bordi, divisori */
  --color-ardesia: #2c313a;        /* voci sottomenu desktop, chiudi menu mobile, header crema */
  --color-header-line: #e5e5e5;    /* filo sotto l'header crema */
  --color-footer-label: #868582;   /* etichette colonne footer */
  --color-footer-credit: #929088;  /* "Designed by" */
  --color-body: #333;              /* testo di default (reset Hello Elementor) */
  --color-link: #c36;              /* link di default (reset Hello Elementor) */
  --color-link-hover: #336;
  --color-bg: #fff;                /* sfondo body: si vede nella fascia di 20px sopra la prima sezione */

  /* famiglie */
  --font-display: "artifex-hand-cf", "Artifex Hand CF", serif;
  --font-sans: "Inter Display", "Inter", sans-serif;
  --font-mono: "DM Mono", monospace;
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  /* scala tipografica misurata (header, menu, footer) */
  --fs-nav: 0.85rem;          /* 13.6px voci menu desktop, lingua */
  --fs-subnav: 0.8rem;        /* 12.8px sottomenu desktop e mobile */
  --fs-cta-header: 0.95rem;   /* 15.2px "Preventivo" */
  --fs-offcanvas: 1.6rem;     /* 25.6px voci menu mobile */
  --fs-footer-claim: 69px;    /* "Nomadic art of life" */
  --fs-footer-claim-m: 30px;
  --fs-footer-link: 18px;
  --fs-footer-link-m: 14px;
  --fs-footer-label: 12px;
  --fs-footer-legal: 14px;
  --fs-footer-legal-m: 12px;
  /* scala dei titoli di pagina (censimento del CSS Elementor sulle 19 pagine):
     ogni widget ha il suo valore in px, questi sono i piu' ricorrenti.
     Le pagine (milestone 3) useranno i valori esatti di ogni sezione. */
  --fs-title-xl: 61px;
  --fs-title-l: 50px;
  --fs-title-m: 29px;
  --fs-title-l-tablet: 46px;
  --fs-title-m-mobile: 24px;

  /* spaziature */
  --space-container: 10px;    /* padding di default dei container Elementor */
  --gap-container: 20px;      /* gap di default dei container Elementor */
  --gutter: 50px;             /* margine laterale delle fasce (desktop e tablet) */
  --gutter-mobile: 20px;
  --header-pad-y: 30px;
  --header-pad-x: 40px;
  --header-pad-mobile: 20px;

  /* movimento */
  --ease-out-power2: cubic-bezier(0.215, 0.61, 0.355, 1); /* = GSAP power2.out */
}

/* --- Reset ---------------------------------------------------------------
   Sottoinsieme del reset di Hello Elementor che il sito vivo eredita: le misure
   di header e footer dipendono da queste regole (line-height 1.5, colori link). */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-system);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-body);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin-block: 0.5rem 1rem;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
}

p {
  margin-block: 0 0.9rem;
}

a {
  background-color: transparent;
  color: var(--color-link);
  text-decoration: none;
}

a:hover,
a:active {
  color: var(--color-link-hover);
}

b,
strong {
  font-weight: bolder;
}

img {
  border-style: none;
  height: auto;
  max-width: 100%;
}

ul,
ol,
li {
  margin-block: 0;
}

button {
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}

/* Lenis (scorrimento morbido, assets/js/smooth-scroll.js): regole della libreria */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* "Riduci movimento": cambi di stato istantanei (header crema, menu mobile, hover).
   Anche il ritardo va azzerato, altrimenti il pannello chiuso resta visibile 0.45s. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation-duration: 0.01ms !important;
  }
}

/* === header.css === */
/* ==========================================================================
   Header: barra fissa trasparente + menu mobile off-canvas.
   Fonte: CSS dei due widget HTML del template 13629 + il "CSS personalizzato"
   Elementor del secondo widget. Le due fonti si contraddicevano: qui c'e' il
   risultato finale della cascata, verificato sugli stili calcolati del sito vivo.
   ========================================================================== */

/* Contenitore di header e off-canvas: contiene solo elementi fissi, quindi e' alto 0.
   CORREZIONE rispetto al sito vivo: li' il container Elementor e' alto 20px (gap tra due
   widget vuoti) e lascia una fascia bianca sopra la prima sezione da 768px in su.
   Qui la fascia non c'e': nei confronti usare --ref-crop-top 20@768,1024,1440,1920.
   Lo z-index crea il contesto di impilamento (99999, da mobile 99, come sul vivo). */
.bedouin-header-wrap {
  position: relative;
  z-index: 99999;
}

/* Sentinella per header-sticky.js: quando esce dallo schermo si e' scrollato oltre 120px
   (la soglia "sticky start" impostata nel template Animation Addons). */
.bedouin-header-sentinel {
  position: absolute;
  top: 120px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* --- Barra ---------------------------------------------------------------
   Trasparente in cima alla pagina, crema dopo lo scroll (.is-scrolled, header-sticky.js).
   CORREZIONE rispetto al sito vivo: li' le regole dello stato crema esistono ma nessuno
   script le attiva, e sopra le sezioni beige il menu bianco sparisce. */
.bedouin-site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  padding: var(--header-pad-y) var(--header-pad-x);
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s ease, padding 0.4s ease, border-bottom-color 0.4s ease;
}

.bedouin-header-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bedouin-header-logo {
  position: relative;
  display: block;
  height: 36px;
}

.bedouin-header-logo img {
  display: block;
  width: auto;
  height: 100%;
  transition: opacity 0.4s ease, transform 0.3s ease;
}

/* logo scuro sovrapposto, visibile solo nello stato crema */
.bedouin-header-logo .logo-dark {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.bedouin-header-logo:hover img {
  transform: scale(1.05);
}

/* --- Menu desktop -------------------------------------------------------- */
.bedouin-desktop-nav {
  display: flex;
  gap: 40px;
  align-items: center;
}

.bedouin-desktop-nav a.menu-item,
.bedouin-desktop-nav .menu-item-wrapper > span {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 5px;
  font-family: var(--font-sans);
  font-size: var(--fs-nav);
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-beige);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.4s ease;
}

.bedouin-desktop-nav .menu-item-parent,
.bedouin-desktop-nav .menu-item-parent:hover {
  color: inherit;
  text-decoration: none;
}

/* sottolineatura che si allarga */
.bedouin-desktop-nav a.menu-item::after,
.bedouin-desktop-nav .menu-item-wrapper > span::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-beige);
  transition: width 0.3s ease, background-color 0.4s ease;
}

.bedouin-desktop-nav a.menu-item:hover::after,
.bedouin-desktop-nav .menu-item-wrapper:hover > span::after,
.bedouin-desktop-nav .menu-item-wrapper:focus-within > span::after {
  width: 100%;
}

/* Voce con sottomenu. Il padding compensato dal margine negativo tiene aperto il
   sottomenu mentre il mouse scende. Vale anche per le voci del menu mobile (stessa classe). */
.bedouin-menu-item-has-children {
  position: relative;
  padding-bottom: 15px;
  margin-bottom: -15px;
}

.bedouin-desktop-dropdown-arrow {
  width: 12px;
  height: 12px;
  transition: transform 0.3s ease;
}

.bedouin-menu-item-has-children:hover .bedouin-desktop-dropdown-arrow,
.bedouin-menu-item-has-children:focus-within .bedouin-desktop-dropdown-arrow {
  transform: rotate(180deg);
}

.bedouin-desktop-submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 180px;
  padding: 20px 25px;
  background-color: var(--color-beige);
  border: 1px solid rgba(0, 0, 0, 0.03);
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.bedouin-menu-item-has-children:hover .bedouin-desktop-submenu,
.bedouin-menu-item-has-children:focus-within .bedouin-desktop-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.bedouin-desktop-submenu a {
  font-family: var(--font-sans);
  font-size: var(--fs-subnav);
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-ardesia);
  text-decoration: none;
  transition: color 0.3s ease;
}

.bedouin-desktop-submenu a:hover {
  color: var(--color-mattone-caldo);
}

/* --- Selettore lingua (markup di TranslatePress) --------------------------
   Gli !important battono il CSS del plugin, che arriva con selettori propri. */
.bedouin-lang-switcher {
  display: flex;
  align-items: center;
}

.desktop-lang::before {
  content: "";
  display: block;
  width: 1px;
  height: 15px;
  margin-right: 25px;
  margin-left: -5px;
  background-color: var(--color-beige);
  opacity: 0.4;
  transition: background-color 0.4s ease;
}

.bedouin-lang-switcher .trp-language-switcher {
  position: relative;
  border: none !important;
  background: transparent !important;
}

.bedouin-lang-switcher .trp-ls-shortcode-current-language {
  display: none !important;
}

.bedouin-lang-switcher .trp-ls-shortcode-language {
  display: block !important;
  position: static !important;
  width: auto !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.bedouin-lang-switcher a,
.bedouin-lang-switcher a span {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-nav) !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--color-beige) !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: opacity 0.3s ease, color 0.4s ease !important;
}

.bedouin-lang-switcher a:hover {
  opacity: 0.6;
}

.mobile-lang {
  display: none;
}

.desktop-lang {
  display: flex;
}

/* --- Azioni: CTA e hamburger --------------------------------------------- */
.bedouin-header-actions {
  display: flex;
  align-items: center;
  gap: 30px;
}

.bedouin-header-cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 10px 24px;
  font-family: var(--font-display);
  font-size: var(--fs-cta-header);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-mattone-caldo);
  background-color: var(--color-beige);
  border: 1px solid var(--color-beige);
  transition: color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.4s ease, border-color 0.4s ease;
}

/* riempimento mattone da sinistra all'hover */
.bedouin-header-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: var(--color-mattone-caldo);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.bedouin-header-cta:hover {
  color: var(--color-beige);
}

.bedouin-header-cta:hover::before {
  transform: scaleX(1);
}

.bedouin-hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 12px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}

.bedouin-hamburger-btn:focus:not(:focus-visible) {
  outline: none;
}

.bedouin-hamburger-btn span {
  display: block;
  width: 100%;
  height: 1.5px;
  background-color: var(--color-beige);
  transition: transform 0.3s ease, background-color 0.4s ease;
}

.bedouin-hamburger-btn:hover span:first-child {
  transform: translateY(-2px);
}

.bedouin-hamburger-btn:hover span:last-child {
  transform: translateY(2px);
}

/* --- Stato crema (dopo 120px di scroll) -----------------------------------
   Regole dello stato ".wcf-sticky-header" scritte nel widget 4e57ad56 del sito vivo. */
.bedouin-header-wrap.is-scrolled .bedouin-site-header {
  padding: 15px var(--header-pad-x);
  background-color: var(--color-beige);
  border-bottom-color: var(--color-header-line);
}

.is-scrolled .bedouin-header-logo .logo-light {
  opacity: 0;
}

.is-scrolled .bedouin-header-logo .logo-dark {
  opacity: 1;
}

.is-scrolled .bedouin-desktop-nav a.menu-item,
.is-scrolled .bedouin-desktop-nav .menu-item-wrapper > span {
  color: var(--color-ardesia);
}

.is-scrolled .bedouin-desktop-nav a.menu-item::after,
.is-scrolled .bedouin-desktop-nav .menu-item-wrapper > span::after {
  background-color: var(--color-ardesia);
}

.is-scrolled .bedouin-hamburger-btn span {
  background-color: var(--color-ardesia);
}

.is-scrolled .bedouin-header-cta {
  color: var(--color-mattone-caldo);
  background-color: transparent;
  border-color: var(--color-mattone-caldo);
}

/* Sul vivo la regola sopra (con !important) batteva anche l'hover: testo mattone sul
   riempimento mattone, cioe' "Preventivo" invisibile al passaggio del mouse. Corretto. */
.is-scrolled .bedouin-header-cta:hover {
  color: var(--color-beige);
}

.is-scrolled .bedouin-lang-switcher a,
.is-scrolled .bedouin-lang-switcher a span {
  color: var(--color-ardesia) !important;
}

.is-scrolled .desktop-lang::before {
  background-color: var(--color-ardesia);
}

@media (max-width: 991px) {
  .bedouin-site-header {
    padding: var(--header-pad-mobile);
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  .bedouin-header-wrap.is-scrolled .bedouin-site-header {
    padding: 15px var(--header-pad-mobile);
  }

  .bedouin-hamburger-btn {
    display: flex;
  }

  .bedouin-desktop-nav,
  .bedouin-header-cta,
  .desktop-lang {
    display: none;
  }

  .mobile-lang {
    display: flex;
  }

  .bedouin-header-actions {
    gap: 20px;
  }
}

@media (max-width: 767px) {
  .bedouin-header-wrap {
    z-index: 99;
  }
}

/* ==========================================================================
   Menu mobile off-canvas
   ========================================================================== */
.bedouin-offcanvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(28, 29, 32, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.bedouin-offcanvas-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* Pannello che scorre da destra, in apertura e in chiusura.
   CORREZIONE rispetto al sito vivo: li' due regole in conflitto (right:-100% animato +
   translateX(100%) non animato) lo facevano aprire scorrendo e chiudere di scatto.
   Qui un solo meccanismo, transform (niente ricalcolo del layout).
   visibility nascosta a pannello chiuso, con ritardo pari alla transizione: l'ombra non
   sborda sul bordo destro della pagina e i link del menu chiuso escono dal giro del Tab. */
.bedouin-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  width: 340px;
  max-width: 85vw;
  height: 100%;
  overflow-y: auto;
  background-color: var(--color-beige);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.08);
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    visibility 0s linear 0.45s;
}

.bedouin-offcanvas.is-open {
  transform: translateX(0);
  visibility: visible;
  transition:
    transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    visibility 0s linear 0s;
}

@media (min-width: 992px) {
  .bedouin-offcanvas,
  .bedouin-offcanvas-overlay {
    display: none;
  }
}

.bedouin-offcanvas-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  min-height: 100%;
  padding: 2.5rem 2rem;
}

body.bedouin-menu-open {
  overflow: hidden;
  touch-action: none;
}

.bedouin-menu-close {
  position: absolute;
  top: 24px;
  right: 24px;
  display: inline-block;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1;
  color: var(--color-ardesia);
  text-align: center;
  white-space: nowrap;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.bedouin-menu-close:hover {
  opacity: 0.5;
}

.bedouin-menu-nav {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}

.bedouin-menu-nav > a {
  display: block;
  padding: 0.9rem 0;
  font-family: var(--font-display);
  font-size: var(--fs-offcanvas);
  color: var(--color-nero);
  text-decoration: none;
  border-bottom: 1px solid rgba(28, 29, 32, 0.08);
  transition: opacity 0.3s ease;
}

.bedouin-menu-nav > a:hover,
.bedouin-submenu-toggle:hover {
  color: var(--color-nero);
  opacity: 0.5;
}

.bedouin-submenu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.9rem 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-offcanvas);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-nero);
  text-align: left;
  white-space: nowrap;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(28, 29, 32, 0.08);
  /* raggio ereditato sul sito vivo dallo stile pulsanti del kit Elementor:
     incurva appena le estremita' del filo inferiore */
  border-radius: 4px;
  box-shadow: none;
  appearance: none;
  user-select: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.bedouin-submenu-toggle:focus:not(:focus-visible) {
  outline: none;
}

.bedouin-dropdown-arrow {
  width: 18px;
  height: 18px;
  pointer-events: none;
  transition: transform 0.3s ease;
}

.bedouin-menu-item-has-children.is-open .bedouin-dropdown-arrow {
  transform: rotate(180deg);
}

.bedouin-submenu {
  display: flex;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.bedouin-menu-item-has-children.is-open .bedouin-submenu {
  max-height: 300px;
  margin-top: 20px;
}

.bedouin-submenu a {
  display: block;
  padding: 0.5rem 0;
  font-family: var(--font-mono);
  font-size: var(--fs-subnav);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-nero);
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.bedouin-submenu a:hover {
  color: var(--color-nero);
  opacity: 1;
}

.bedouin-menu-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  width: 100%;
  margin-top: auto;
  padding-top: 2rem;
  padding-bottom: 30px;
}

.bedouin-menu-socials {
  display: flex;
  gap: 1rem;
  margin-bottom: 32px;
}

.bedouin-menu-socials a {
  color: var(--color-nero);
  text-decoration: none;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

.bedouin-menu-socials a:hover {
  color: var(--color-nero);
  opacity: 1;
}

.bedouin-menu-socials svg {
  width: 20px;
  height: 20px;
}

.bedouin-menu-cta {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  overflow: hidden;
  padding: 1.1rem 2rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--color-beige);
  background-color: var(--color-nero);
  border: 1px solid var(--color-nero);
  transition: color 0.3s ease;
}

/* velo beige che entra da sinistra all'hover ed esce a destra */
.bedouin-menu-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: var(--color-beige);
  transform: translateX(-101%);
}

.bedouin-menu-cta:hover {
  color: var(--color-nero);
}

.bedouin-menu-cta:hover::before {
  animation: bedouinMenuSlideIn 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1);
}

.bedouin-menu-cta:not(:hover)::before {
  animation: bedouinMenuSlideOut 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes bedouinMenuSlideIn {
  from { transform: translateX(-101%); }
  to { transform: translateX(0); }
}

@keyframes bedouinMenuSlideOut {
  from { transform: translateX(0); }
  to { transform: translateX(101%); }
}

/* --- Barra di amministrazione di WordPress (la vede solo chi è collegato) -------------------
   È fissa in alto con z-index 100000, sopra il nostro header fisso: senza questa regola copre
   logo e menu. Sotto i 783px WordPress la fa scorrere con la pagina, quindi lì l'header resta a 0
   (con un margine fisso resterebbe uno spazio vuoto appena si scorre). */
@media screen and (min-width: 783px) {
  body.admin-bar .bedouin-site-header,
  body.admin-bar .bedouin-offcanvas {
    top: 32px;
  }

  body.admin-bar .bedouin-offcanvas {
    height: calc(100% - 32px);
  }
}

/* === footer.css === */
/* ==========================================================================
   Footer (template Elementor 12793).
   Misure dei container Elementor riportate 1:1: larghezze in %, padding di default
   di 10px solo dove il sito vivo non lo azzerava, altezze minime in vh.
   ========================================================================== */

/* --- Fascia scura -------------------------------------------------------- */
.site-footer__main {
  display: flex;
  flex-direction: column;
  min-height: 75vh;
  padding: 0 var(--gutter);
  background-color: var(--color-nero);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-container);
  width: 100%;
  padding-top: 50px;
}

.site-footer__cols {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--gap-container);
  width: 95%;
  min-width: 0;
  padding: var(--space-container);
}

.site-footer__brand,
.site-footer__col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gap-container);
  min-width: 0;
}

/* le quattro colonne partono da 100% / 37% / 37% / 37% e si restringono in proporzione */
.site-footer__brand {
  width: 100%;
  padding: var(--space-container);
}

.site-footer__col {
  width: 37%;
}

.site-footer__col--1 {
  padding: var(--space-container);
}

.site-footer__claim {
  width: 368px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--fs-footer-claim);
  font-weight: 100;
  line-height: 1;
  color: var(--color-beige);
}

.site-footer__label {
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--fs-footer-label);
  font-weight: 500;
  line-height: 1;
  color: var(--color-footer-label);
}

.site-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__list li {
  position: relative;
  display: flex;
  align-items: center;
}

.site-footer__list li:not(:last-child) {
  padding-bottom: 5px;
}

.site-footer__list li:not(:first-child) {
  margin-top: 5px;
}

.site-footer__list a {
  display: flex;
  align-items: center;
  width: 100%;
  font-family: var(--font-display);
  font-size: var(--fs-footer-link);
  font-weight: 300;
}

.site-footer__list span {
  color: var(--color-beige);
  transition: color 0.3s;
}

/* --- Logotipo "bedouin" -------------------------------------------------- */
.site-footer__wordmark-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  overflow: hidden;
}

.site-footer__wordmark {
  width: 100%;
  margin-top: 50px;
  overflow: hidden;
  text-align: center;
}

/* SVG stirato alla misura del box, come sul sito vivo (object-fit: fill) */
.site-footer__wordmark img {
  display: inline-block;
  vertical-align: middle;
  width: 90vw;
  max-width: 100%;
  height: 31vh;
  object-fit: fill;
}

/* --- Barra legale beige -------------------------------------------------- */
.site-footer__bar {
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter);
  background-color: var(--color-beige);
}

.site-footer__bar-inner {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: center;
  gap: var(--gap-container);
  width: 95%;
  min-height: 97px;
}

.site-footer__legal,
.site-footer__credit {
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--fs-footer-legal);
  font-weight: 600;
  line-height: 1;
}

.site-footer__credit {
  color: var(--color-footer-credit);
}

.site-footer__credit a,
.site-footer__credit a:hover {
  color: inherit;
}

/* --- Tablet (≤1024) ------------------------------------------------------ */
@media (max-width: 1024px) {
  .site-footer__inner {
    padding-top: 100px;
  }

  .site-footer__cols {
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 60px 20px;
    width: 100%;
    padding: 0;
  }

  .site-footer__claim {
    width: 348px;
  }

  .site-footer__col {
    width: 32%;
    padding: 0;
  }

  .site-footer__col--2,
  .site-footer__col--3 {
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 30px;
  }

  .site-footer__col--3 {
    width: 30%;
  }

  .site-footer__list li:not(:last-child) {
    padding-bottom: 2.5px;
  }

  .site-footer__list li:not(:first-child) {
    margin-top: 2.5px;
  }

  .site-footer__wordmark {
    margin-top: 100px;
  }

  .site-footer__wordmark img {
    width: 86vw;
    max-width: 88vw;
    height: 156px;
  }

  .site-footer__bar-inner {
    width: 100%;
    min-height: 64px;
  }
}

/* --- Mobile (≤767) ------------------------------------------------------- */
@media (max-width: 767px) {
  .site-footer__main {
    min-height: 49vh;
    padding: 0 var(--gutter-mobile);
  }

  .site-footer__inner {
    padding-top: 50px;
  }

  .site-footer__cols {
    justify-content: space-between;
    gap: 40px 20px;
    margin-bottom: -27px;
  }

  .site-footer__brand {
    width: 44%;
    padding: 0;
  }

  .site-footer__claim {
    width: 100%;
    font-size: var(--fs-footer-claim-m);
  }

  .site-footer__col {
    width: 46%;
    align-items: flex-start;
  }

  .site-footer__col--3 {
    width: 46%;
  }

  .site-footer__list li:not(:last-child) {
    padding-bottom: 2px;
  }

  .site-footer__list li:not(:first-child) {
    margin-top: 2px;
  }

  .site-footer__list a {
    font-size: var(--fs-footer-link-m);
  }

  .site-footer__wordmark {
    margin: 30px 0 -10px;
  }

  .site-footer__wordmark img {
    width: 93%;
    max-width: 92vw;
    height: 85px;
  }

  .site-footer__bar {
    padding: 10px var(--gutter-mobile);
  }

  .site-footer__bar-inner {
    flex-wrap: nowrap;
    gap: 0;
    min-height: 9px;
  }

  .site-footer__legal {
    width: 183px;
    max-width: 183px;
    font-size: var(--fs-footer-legal-m);
    line-height: 1.5em;
  }

  .site-footer__credit {
    width: 87px;
    max-width: 87px;
    font-size: var(--fs-footer-legal-m);
    line-height: 15px;
    text-align: end;
  }
}

/* --- Animazioni d'ingresso (footer-reveal.js) -----------------------------
   Le classi .reveal-pending le mette lo script: senza JS, o con "riduci movimento",
   il footer resta visibile e fermo. Equivalenti CSS delle animazioni GSAP del sito vivo. */
.reveal-pending[data-reveal="fade-left"] {
  opacity: 0;
  transform: translateX(-50px);
}

.reveal-pending[data-reveal="wipe"] {
  transform: translateY(-100%);
}

.reveal-pending[data-reveal="wipe"] img {
  transform: translateY(100%) scale(1.3);
}

.reveal-pending.is-revealed[data-reveal="fade-left"] {
  opacity: 1;
  transform: none;
  transition:
    opacity 1.5s var(--ease-out-power2) var(--reveal-delay, 0s),
    transform 1.5s var(--ease-out-power2) var(--reveal-delay, 0s);
}

.reveal-pending.is-revealed[data-reveal="wipe"],
.reveal-pending.is-revealed[data-reveal="wipe"] img {
  transform: none;
  transition: transform 1.5s var(--ease-out-power2);
}

/* === components/button.css === */
/* ==========================================================================
   Bottone (widget "wcf--button" di Animation Addons, effetto "rollover-left").
   All'hover un fondo mattone entra da sinistra e il testo diventa beige; uscendo
   il fondo si ritira verso destra. Sul vivo animava width/left/right: qui lo stesso
   movimento con transform: scaleX (niente ricalcolo del layout).
     .btn--outline  bordo mattone, fondo trasparente   (es. "scopri le nostre tende")
     .btn--solid    fondo beige, senza bordo            (es. sopra le foto scure)
   La larghezza la decide il contenitore: il bottone lo riempie (width 100%), come sul
   vivo; per un bottone largo quanto il testo basta un contenitore che non si allarga
   (in una colonna flex: align-self: flex-start).
   ========================================================================== */
.btn {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 20px 30px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: var(--color-mattone);
  transition: color 0.4s var(--ease-out-power2), background-color 0.4s var(--ease-out-power2);
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-mattone);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}

.btn:hover,
.btn:focus-visible {
  color: var(--color-beige);
}

.btn:hover::after,
.btn:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.btn--outline {
  border: 1px solid var(--color-mattone);
  background-color: transparent;
}

.btn--solid {
  border: 0;
  background-color: var(--color-beige);
}

@media (max-width: 1024px) {
  .btn {
    font-size: 16px;
  }
}

/* === components/reveal.css === */
/* ==========================================================================
   Animazioni d'ingresso allo scroll (reveal.js). Due meccanismi:

   1. [data-anim]  — l'elemento entra da una posizione spostata e trasparente.
      Rifa' il "fade" di Animation Addons (GSAP "from") e le animazioni d'ingresso di
      Elementor (es. fadeInRight). Si regola con variabili CSS nell'attributo style:
        --anim-x / --anim-y   spostamento di partenza (es. -40px, 50px, 100%)   default 0
        --anim-duration       durata                                          default 1s
        --anim-delay          ritardo                                         default 0s
        --anim-ease           curva            default power2.out di GSAP
      Parte quando l'elemento arriva all'85% dell'altezza dello schermo ("top 85%").
      data-anim-watch="parent" = osserva il genitore (per chi parte fuori dal suo box,
      es. spostato del 100%: altrimenti non entrerebbe mai nello schermo).

   2. [data-inview="0.15"] — lo script mette subito .inview-pending e aggiunge .is-inview
      quando l'elemento e' visibile per la frazione indicata. Lo stile dei due stati lo scrive
      il componente, e deve nascondere solo con .inview-pending (cosi' senza JS si vede):
        .x.inview-pending { opacity: 0; }   .x.inview-pending.is-inview { opacity: 1; }
      (es. .bdn-anim nei pannelli della home, copiato dal widget del vivo).

   Senza JS o con "riduci movimento": tutto visibile e fermo (le classi .anim-pending
   le mette solo lo script).
   ========================================================================== */
.anim-pending {
  opacity: 0;
  transform: translate(var(--anim-x, 0), var(--anim-y, 0));
}

.anim-pending.is-animated {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--anim-duration, 1s) var(--anim-ease, var(--ease-out-power2)) var(--anim-delay, 0s),
    transform var(--anim-duration, 1s) var(--anim-ease, var(--ease-out-power2)) var(--anim-delay, 0s);
}

/* === components/headline-rotate.css === */
/* ==========================================================================
   Titolo a parole rotanti (widget "animated-headline" di Elementor, stile "rotate",
   animazione "swirl" lettera per lettera). headline-rotate.js scompone le parole in
   lettere e le fa ruotare; senza JS o con "riduci movimento" resta la prima parola, ferma.
   Misure di default del widget; font, dimensione e colori li decide la sezione.
   ========================================================================== */
.headline-rotate {
  display: block;
  font-size: 43px;
  line-height: 1.2;
}

.headline-rotate__text,
.headline-rotate__words {
  vertical-align: bottom;
}

/* Contenitore delle parole: largo quanto la parola attiva (headline-rotate.js ne anima la larghezza). */
.headline-rotate__words {
  position: relative;
  display: inline-block;
  overflow: hidden;
  text-align: start;
  perspective: 300px;
  transition: width 0.5s;
}

.headline-rotate__word {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: inline-block;
  white-space: nowrap;
  opacity: 0;
}

.headline-rotate__word.is-active {
  position: relative;
  opacity: 1;
}

/* scomposto in lettere (headline-rotate.js): le parole restano visibili, decidono le lettere */
.headline-rotate.is-split .headline-rotate__word {
  opacity: 1;
}

.headline-rotate__letter {
  display: inline-block;
  opacity: 0;
}

.headline-rotate__letter.is-in {
  animation: headline-swirl-in 0.4s forwards;
}

.headline-rotate__letter.is-out {
  animation: headline-swirl-out 0.4s forwards;
}

/* keyframe dell'animazione "swirl" di Elementor */
@keyframes headline-swirl-in {
  0% { opacity: 0; transform: translateZ(-20px) rotateX(90deg); }
  60% { opacity: 1; transform: translateZ(-20px) rotateX(-10deg); }
  100% { opacity: 1; transform: translateZ(-20px) rotateX(0deg); }
}

@keyframes headline-swirl-out {
  0% { opacity: 1; transform: translateZ(-20px) rotateX(0); }
  60% { opacity: 0; transform: translateZ(-20px) rotateX(-100deg); }
  100% { opacity: 0; transform: translateZ(-20px) rotateX(-90deg); }
}

/* Titoli doppi IT/EN (classi testo-rotante-it / testo-rotante-en, come sul vivo):
   TranslatePress mette la lingua nel body, si mostra solo quello della lingua corrente.
   Sul vivo queste due regole stavano nel CSS aggiuntivo del Customizer di Hello Elementor,
   che col cambio di tema non si applica piu': per questo stanno qui. */
body.translatepress-it_IT .testo-rotante-en,
body.translatepress-en_GB .testo-rotante-it {
  display: none !important;
}

/* === components/counter.css === */
/* ==========================================================================
   Contatore (widget "counter" di Elementor). Numero grande sopra, didascalia sotto.
   Il valore finale e' gia' scritto nell'HTML (utile senza JS e a chi legge la pagina):
   counter.js lo riporta a zero e lo fa contare quando entra nello schermo.
   Nel DOM la didascalia viene prima del numero, come sul vivo: column-reverse li inverte.
   Misure di default del widget Elementor; font e colori li decide la sezione che lo usa.
   ========================================================================== */
.counter {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: stretch;
}

.counter__number {
  display: flex;
  flex: 1;
  font-size: 69px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

/* prefisso e suffisso si prendono lo spazio libero: il numero resta centrato sotto la didascalia */
.counter__prefix {
  flex-grow: 1;
  text-align: end;
  white-space: pre-wrap;
}

.counter__value {
  flex-grow: 0;
}

.counter__suffix {
  flex-grow: 1;
  text-align: start;
  white-space: pre-wrap;
}

.counter__title {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  font-size: 19px;
  font-weight: 400;
  line-height: 2.5;
}

/* === components/marquee.css === */
/* ==========================================================================
   Marquee dei loghi (widget HTML 7de90dae "CAROSELLO LOGHI INFINITO", CSS scritto a
   mano sul vivo e portato quasi di peso). Solo CSS, nessuno script.
   Markup: .bedouin-marquee-section > .bedouin-marquee-track > .bedouin-logo-item > img,
   con la serie di loghi scritta DUE volte: la pista scorre di meta' e il giro non ha salti.
   Bordi sfumati con una maschera; loghi color crema al 70% via filtro, colori veri all'hover.
   Differenze dal vivo: con "riduci movimento" la pista sta ferma (sul vivo girava comunque).
   ========================================================================== */
.bedouin-marquee-section {
  width: 100%;
  overflow: hidden;
  padding: 50px 0;
  background-color: transparent;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.bedouin-marquee-track {
  display: flex;
  width: max-content;
  animation: bedouinScroll 80s linear infinite;
}

@keyframes bedouinScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.bedouin-logo-item {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 190px;
  height: 80px;
  padding: 0 30px;
}

.bedouin-logo-item img {
  max-width: 85%;
  max-height: 40px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(98%) sepia(16%) saturate(550%) hue-rotate(325deg) brightness(104%) contrast(102%);
  opacity: 0.7;
  transition: filter 0.4s ease, transform 0.4s ease, opacity 0.4s ease;
  cursor: pointer;
}

.bedouin-logo-item:hover img {
  filter: none;
  opacity: 1;
  transform: scale(1.08);
}

@media (max-width: 1199px) {
  .bedouin-logo-item { width: calc(100vw / 7); padding: 0 20px; }
}

@media (max-width: 991px) {
  .bedouin-logo-item { width: calc(100vw / 6); padding: 0 15px; }
}

@media (max-width: 767px) {
  .bedouin-logo-item { width: calc(100vw / 4); padding: 0 10px; height: 60px; }
}

/* base.css porta a 0.01ms ogni animazione: su una animazione infinita darebbe un tremolio. */
@media (prefers-reduced-motion: reduce) {
  .bedouin-marquee-track {
    animation: none;
  }
}

/* === components/hscroll.css === */
/* ==========================================================================
   Scroll orizzontale fissato (horizontal-scroll di Animation Addons, pista "pista-orizzontale").
   La sezione resta ferma sullo schermo e, scorrendo in giu', i pannelli scorrono in orizzontale.
   Markup:
     section.hscroll[data-hscroll][data-hscroll-distance="3744"]
       > .hscroll__viewport > .hscroll__track > .hscroll__panel (x N, larghi 100vw, alti 100vh)
   data-hscroll-distance = quanti px di scroll verticale servono per attraversare tutta la pista
   (sul vivo "horizontal_scroll_end": 3744 px, uguale a ogni larghezza).

   Stato di base (senza JS, o con "riduci movimento"): nessun pin, la sezione e' alta uno
   schermo, si vede il primo pannello e gli altri si raggiungono scorrendo di lato (swipe,
   trackpad, shift+rotella), con aggancio ai pannelli. E' anche lo stato "a riposo" che il
   confronto pixel fotografa, uguale a quello del vivo con il pin sciolto.
   Stato attivo (.is-active, lo mette hscroll.js): sezione alta 100vh + distanza, finestra
   sticky, pista spostata con transform.
   ========================================================================== */
.hscroll__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.hscroll__track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
}

.hscroll__panel {
  position: relative;
  flex: 0 0 100vw;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  scroll-snap-align: start;
}

.hscroll.is-active {
  height: calc(100vh + var(--hscroll-distance, 0px));
}

.hscroll.is-active .hscroll__viewport {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  scroll-snap-type: none;
}

.hscroll.is-active .hscroll__track {
  transform: translate3d(var(--hscroll-x, 0px), 0, 0);
  will-change: transform;
}

/* === components/text-path.css === */
/* ==========================================================================
   Testo su cerchio (widget "text-path" di Elementor), SVG che ruota su se stesso.
   Markup: .text-path > svg[viewBox] > path#id + text > textPath[href=#id] (> a).
   Dimensione con --text-path-size (larghezza dell'SVG, default 150px); font e posizione
   li decide la sezione. Con "riduci movimento" sta fermo.
   ========================================================================== */
.text-path svg {
  width: var(--text-path-size, 150px);
  max-width: 100%;
  height: auto;
  overflow: visible;
  animation: text-path-rotate 20s linear infinite;
}

.text-path path {
  fill: transparent;
  stroke: transparent;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

@keyframes text-path-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .text-path svg {
    animation: none;
  }
}

/* === components/carousel.css === */
/* ==========================================================================
   Carosello (loop-carousel di Elementor Pro, Swiper) + card articolo (loop-item 12019).

   Carosello — markup:
     .carousel[data-carousel][data-carousel-speed="5000"]
       > .carousel__viewport > .carousel__track > .carousel__slide (x N)
   Larghezza delle slide: (larghezza - offset - (n-1) * gap) / n, con
     --carousel-per-view  slide intere visibili    (default 4, tablet 2, mobile 1)
     --carousel-gap       spazio fra le slide      (default 20px)
     --carousel-offset    spazio a destra dove si intravede la slide successiva (default 80px)
   carousel.js: scorrimento continuo una slide ogni data-carousel-speed ms (come l'autoplay
   di Swiper con ritardo 0), giro infinito, pausa al passaggio del mouse, trascinamento con
   mouse/dito. Nessuna freccia: sul vivo sono disattivate. Senza JS o con "riduci movimento"
   resta fermo sulla prima slide e si trascina lo stesso.
   ========================================================================== */
.carousel {
  --carousel-per-view: 4;
  --carousel-gap: 20px;
  --carousel-offset: 80px;
  position: relative;
}

/* senza JS la fila si scorre di lato a mano; con carousel.js (.is-ready) la muove lo script */
.carousel__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.carousel.is-ready .carousel__viewport {
  overflow: hidden;
  scroll-snap-type: none;
  touch-action: pan-y;
}

.carousel__track {
  display: flex;
  gap: var(--carousel-gap);
}

.carousel__slide {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: calc((100% - var(--carousel-offset) - (var(--carousel-per-view) - 1) * var(--carousel-gap)) / var(--carousel-per-view));
}

.carousel.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.carousel.is-dragging a {
  pointer-events: none;
}

/* I caroselli Elementor cambiano numero di slide 1px prima degli altri widget
   (Swiper: tablet fino a 1023px, mobile fino a 766px), verificato sul vivo a 1024 e 767. */
@media (max-width: 1023px) {
  .carousel { --carousel-per-view: 2; }
}

@media (max-width: 766px) {
  .carousel { --carousel-per-view: 1; }
}

/* --- Card articolo ---------------------------------------------------------
   Foto in evidenza come sfondo con velo scuro al 45%. Titolo in alto; estratto e
   "Leggi l'articolo" in basso, nascosti fino all'hover da 768px in su (le altre card
   si sfocano), sempre visibili e chiari su mobile. Valori dal CSS del vivo. */
.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 581px;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: filter 0.4s ease-in-out;
}

.post-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-nero);
  opacity: 0.45;
}

/* copia sfocata della foto sopra le card non puntate, mentre il mouse e' sul carosello */
.post-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: inherit;
  filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.carousel--blog:hover .post-card:not(:hover)::after {
  opacity: 1;
}

.post-card__head,
.post-card__details {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.post-card__head {
  padding: 20px;
  background-color: transparent;
  transition: background-color 0.1s ease-in-out;
}

.post-card__title {
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-beige);
}

.post-card__title a {
  color: inherit;
}

.post-card__details {
  width: 100%;
  padding: 1vw;
  background-color: transparent;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.1s ease-in-out;
}

.post-card__excerpt {
  font-family: "helvetica-neue-lt-pro", sans-serif;
  font-size: 1vw;
  font-weight: 400;
  line-height: 1.5em;
  color: var(--color-beige);
}

.post-card__cta {
  line-height: 1.5;
}

.post-card__link {
  display: inline-flex;
  gap: 5px;
  font-family: var(--font-display);
  font-size: 1vw;
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  color: var(--color-nero);
  /* la freccia resta scura anche quando il testo diventa beige (mobile): sul vivo e' cosi',
     su mobile la freccia sparisce sulla foto */
  fill: var(--color-nero);
}

.post-card__link-icon {
  width: 1em;
  height: auto;
}

.post-card:hover .post-card__head,
.post-card:focus-within .post-card__head {
  background-color: var(--color-beige);
}

.post-card:hover .post-card__details,
.post-card:focus-within .post-card__details {
  background-color: var(--color-beige);
  opacity: 1;
  transform: translateY(0);
}

.post-card:hover .post-card__title,
.post-card:hover .post-card__excerpt,
.post-card:hover .post-card__link,
.post-card:focus-within .post-card__title,
.post-card:focus-within .post-card__excerpt,
.post-card:focus-within .post-card__link {
  color: var(--color-nero);
}

@media (max-width: 1024px) {
  .post-card { min-height: 426px; }
  .post-card__title { font-size: 22px; }
}

@media (max-width: 767px) {
  .post-card { min-height: 433px; }

  .post-card__details {
    padding: 20px;
    opacity: 1;
    transform: none;
  }

  .post-card__excerpt {
    margin-bottom: -20px;
    font-size: 14px;
  }

  .post-card__link { font-size: 14px; }

  /* su mobile niente hover: testi sempre chiari, nessuno sfondo, nessuna sfocatura */
  .post-card .post-card__head,
  .post-card .post-card__details,
  .post-card:hover .post-card__head,
  .post-card:hover .post-card__details {
    background-color: transparent;
  }

  .post-card .post-card__title,
  .post-card .post-card__excerpt,
  .post-card .post-card__link,
  .post-card:hover .post-card__title,
  .post-card:hover .post-card__excerpt,
  .post-card:hover .post-card__link {
    color: var(--color-beige);
  }

  .post-card::after,
  .carousel--blog:hover .post-card:not(:hover)::after {
    opacity: 0;
    transition: none;
  }
}

@media (min-width: 2400px) {
  .post-card__excerpt { font-size: 0.6vw; line-height: 1em; }
}

/* === components/faq.css === */
/* ==========================================================================
   FAQ a fisarmonica (widget HTML 81f498e della home, CSS del vivo portato di peso).
   <details> nativi: nessuno script. name="..." uguale su tutti = se ne apre uno alla volta.
   Markup:
     .bd-faq-section > h2.bd-faq-main-title + .bd-faq-list >
       details.bd-faq-item[name] > summary.bd-faq-question + div.bd-faq-answer-content
   Lo schema FAQPage della home lo emette il mu-plugin bedouin-schema.php: i testi delle
   domande e delle risposte devono restare identici a quelli dello schema.
   ========================================================================== */
.bd-faq-section,
.bd-faq-section * {
  box-sizing: border-box;
}

.bd-faq-section {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 72px 20px;
}

.bd-faq-main-title {
  margin: 0 0 50px;
  font-family: var(--font-display);
  font-size: 3.2rem;
  text-align: center;
  color: var(--color-ardesia);
}

.bd-faq-item {
  margin-bottom: 15px;
  overflow: hidden;
  background: var(--color-beige);
  border: 1px solid var(--color-header-line);
  border-radius: 4px;
}

.bd-faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 22px 25px;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--color-ardesia);
  outline: none;
}

.bd-faq-question:focus-visible {
  outline: 2px solid var(--color-mattone);
  outline-offset: -4px;
}

.bd-faq-question::-webkit-details-marker {
  display: none;
}

.bd-faq-question::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
  color: var(--color-ardesia);
}

.bd-faq-item[open] .bd-faq-question::after {
  content: "−";
}

.bd-faq-question:hover {
  color: #5a5e65;
}

.bd-faq-answer-content {
  padding: 0 25px 25px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.6;
  color: #666;
}

.bd-faq-answer-content a {
  color: var(--color-mattone);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 768px) {
  .bd-faq-section { padding: 40px 0; }
  .bd-faq-main-title { font-size: 2.5rem; }
  .bd-faq-question { padding: 18px 20px; font-size: 1.15rem; }
  .bd-faq-answer-content { padding: 0 20px 20px; }
}

/* === components/text-split.css === */
/* ==========================================================================
   Testo che entra lettera per lettera o parola per parola allo scroll (animazione di testo
   "char"/"word" di Animation Addons, GSAP SplitText). Comportamento in text-split.js.

     <h2 class="text-split" data-text-split="char" data-text-delay="0.15">…</h2>
     <div class="text-split" data-text-split="word" data-text-delay="0.25"><p>…</p></div>

   Valori del vivo: ogni pezzo parte spostato di 20px a destra e trasparente, 1s, 0.02s fra un
   pezzo e il successivo, curva power1.out (predefinita di GSAP), dopo data-text-delay secondi,
   quando il testo arriva all'85% dello schermo.

   A riposo il testo del vivo resta spezzato da SplitText in lettere inline-block: niente
   crenatura ne' legature fra le lettere. Le due regole qui sotto danno lo stesso disegno anche
   quando il testo non viene spezzato (senza JS, "riduci movimento"): stesso ingombro, stessi a capo.
   ========================================================================== */
.text-split {
  font-kerning: none;
  font-variant-ligatures: none;
}

.text-split__word,
.text-split__char {
  position: relative;
  display: inline-block;
}

.text-split.is-pending .text-split__unit {
  opacity: 0;
  transform: translateX(20px);
}

.text-split.is-pending.is-revealed .text-split__unit {
  opacity: 1;
  transform: none;
  transition:
    opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--text-split-delay, 0s),
    transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--text-split-delay, 0s);
}

/* === pages/front-page.css === */
/* ==========================================================================
   Home (pagina Elementor 13596). Valori dal CSS Elementor della pagina e dai widget HTML
   del vivo, verificati sugli stili calcolati. I container Elementor diventano flex/blocchi
   semplici: dove Elementor metteva un gap o un padding di default (20px / 10px) e' scritto.
   Breakpoint del vivo: tablet ≤1024, mobile ≤767 (i widget HTML ne usano altri: 768, 991, 1199).
   ========================================================================== */

/* --- Titoli e testi ricorrenti -------------------------------------------- */
.home-intro__title,
.home-turnkey__title,
.home-services__title,
.home-experience__title,
.home-blog__title,
.home-blog__subtitle {
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -3px;
  color: #111;
}

.home-intro__p,
.home-turnkey__p {
  align-self: flex-start;
  width: 579px;
  max-width: 100%;
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 400;
  line-height: 33px;
  letter-spacing: -1px;
  color: var(--color-nero);
}

.home-intro__p p,
.home-turnkey__p p,
.home-experience__p p,
.home-cta__p p {
  margin-block-end: 0;
}

/* --- Hero ------------------------------------------------------------------ */
.home-hero {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 50px;
  min-height: 100vh;
  padding: 50px 50px 20px;
  background: var(--color-nero) url("https://bedouin.it/wp-content/uploads/2026/06/TT-5002-hero.webp") center center / cover no-repeat;
}

.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #131414;
  opacity: 0.38;
}

.home-hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  width: 100%;
  min-height: 55vh;
}

.home-hero__logo {
  display: block;
  width: 186px;
  height: auto;
}

.home-hero__title {
  width: 403px;
  max-width: 100%;
  margin: 0 0 30px;
  font-family: var(--font-sans);
  font-size: 38px;
  font-weight: 400;
  line-height: 42px;
  letter-spacing: -1.5px;
  text-align: center;
  color: var(--color-beige);
}

/* --- Titolo rotante, contatori, loghi -------------------------------------- */
.home-stats {
  padding: 120px 20px 80px;
  background-color: var(--color-nero);
}

.home-stats__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1240px;
  margin: 0 auto;
}

.home-stats__headline {
  align-self: center;
  width: 570px;
  max-width: 100%;
}

.home-stats__headline .headline-rotate {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 300;
  text-align: center;
  color: var(--color-beige);
}

.home-stats__headline .headline-rotate__word {
  font-family: var(--font-display);
  font-weight: 900;
}

/* Il blocco inglese (widget 485ee263) sul vivo è più grande dell'italiano su desktop: 43px contro 40.
   Da tablet in giù le regole dopo lo riportano a 31/28px, come sul vivo. */
.home-stats__headline--en {
  width: 603px;
}

.home-stats__headline--en .headline-rotate {
  font-size: 43px;
}

.home-stats__counters {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.home-stats__col {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 19%;
  min-width: 0;
  padding: 40px 0;
}

.home-stats .counter__number {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-beige);
}

.home-stats .counter__title {
  font-family: var(--font-display);
  font-weight: 100;
  color: var(--color-beige-supporto);
}

.home-stats__logos {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: center;
  width: 100%;
  min-height: 87px;
}

/* --- Le tende che trasformano lo spazio naturale --------------------------- */
.home-intro {
  display: flex;
  padding-left: 50px;
  overflow-x: clip;
  background-color: var(--color-beige);
}

.home-intro__text {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  width: 50%;
  min-width: 0;
  padding: 80px 0;
}

.home-intro__title {
  width: 680px;
  max-width: 100%;
  margin-bottom: 20px;
  font-size: 61px;
  line-height: 58px;
}

.home-intro__p--last {
  margin-bottom: 40px;
}

.home-intro__cta,
.home-turnkey__cta {
  align-self: flex-start;
}

.home-intro__media {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  width: 50%;
  min-width: 0;
}

.home-intro__img {
  display: block;
  width: 100%;
  height: 815px;
  object-fit: cover;
  object-position: 40% 50%;
}

/* --- I nostri servizi ------------------------------------------------------ */
.home-services {
  min-height: 100vh;
  padding: 100px 50px;
  background-color: var(--color-beige);
}

.home-services__title {
  font-size: 61px;
  line-height: 71px;
}

.home-services__subtitle {
  margin: 0.5rem 0 0;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: var(--color-nero);
}

/* widget HTML 3f1e6aae, CSS del vivo */
.bedouin-services-section {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 80px 0;
  background-color: transparent;
}

.bedouin-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.bedouin-service-card {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.bedouin-service-card:hover {
  color: inherit;
}

.bedouin-service-image-wrapper {
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: 25px;
  overflow: hidden;
  background-color: #e5e5e5;
}

.bedouin-service-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.bedouin-service-card:hover .bedouin-service-image-wrapper img {
  transform: scale(1.06);
}

.bedouin-service-content {
  display: flex;
  flex-direction: column;
}

.bedouin-service-subtitle {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-mattone-caldo);
}

.bedouin-service-title,
.bedouin-feature-title {
  position: relative;
  margin: 0 0 15px;
  padding-bottom: 15px;
  font-family: var(--font-display);
  color: var(--color-ardesia);
}

.bedouin-service-title {
  font-size: 2rem;
}

.bedouin-service-title::after,
.bedouin-feature-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 1.5px;
  background-color: var(--color-mattone-caldo);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.bedouin-service-card:hover .bedouin-service-title::after,
.bedouin-feature-card:hover .bedouin-feature-title::after {
  transform: scaleX(2);
}

.bedouin-service-text {
  margin: 0 0 25px;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.6;
  color: #5a5e65;
}

.bedouin-service-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-nero);
  transition: gap 0.3s ease;
}

.bedouin-service-btn::after {
  content: "→";
  font-size: 1.2em;
  transition: transform 0.3s ease;
}

.bedouin-service-card:hover .bedouin-service-btn {
  gap: 12px;
}

/* --- Tende stretch e glamping chiavi in mano ------------------------------- */
.home-turnkey {
  display: flex;
  padding-left: 50px;
  overflow-x: clip;
  background-color: var(--color-beige);
}

.home-turnkey__text {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  width: 50%;
  min-width: 0;
  padding: 50px 0;
}

.home-turnkey__title {
  width: 646px;
  max-width: 100%;
  margin-bottom: 20px;
  font-size: 61px;
  line-height: 58px;
}

.home-turnkey__p--last {
  margin-bottom: 30px;
}

.home-turnkey__media {
  position: relative;
  flex: 0 1 auto;
  width: 50%;
  min-width: 0;
  padding: 0 0 20px 20px;
}

.home-turnkey__photo {
  position: absolute;
  inset: 0;
  background: url("https://bedouin.it/wp-content/uploads/2026/03/bedouin-glamping-nomade-1147x1536.jpg") center center / cover no-repeat;
}

/* --- Tende Bedouin (widget HTML 1d2728e4, CSS del vivo) -------------------- */
.home-tents {
  position: relative;
  z-index: 2;
  padding: 80px 50px 50px;
  overflow: hidden;
  background-color: var(--color-beige);
}

.bedouin-custom-section {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 80px 0;
  background-color: transparent;
}

.bedouin-top-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: start;
  gap: 60px;
  margin-bottom: 70px;
}

.bedouin-top-title-wrapper {
  display: flex;
  flex-direction: column;
}

.bedouin-section-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 61px;
  line-height: 58px;
  letter-spacing: -3px;
  color: var(--color-nero);
}

.bedouin-section-subtitle {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: var(--color-nero);
}

.bedouin-top-text-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.bedouin-intro-text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 33px;
  letter-spacing: -1px;
  color: var(--color-nero);
}

.bedouin-intro-text strong {
  font-weight: 600;
  color: var(--color-nero);
}

.bedouin-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.bedouin-feature-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.bedouin-feature-image-wrapper {
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: 25px;
  overflow: hidden;
  background-color: #e5e5e5;
  border-radius: 2px;
}

.bedouin-feature-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.bedouin-feature-card:hover .bedouin-feature-image-wrapper img {
  transform: scale(1.06);
}

.bedouin-feature-content {
  display: flex;
  flex-direction: column;
}

.bedouin-feature-title {
  font-size: 1.6rem;
}

.bedouin-feature-text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.6;
  color: #5a5e65;
}

/* --- Trasforma un evento in esperienza ------------------------------------- */
.home-experience {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 90vh;
  padding: 120px 60px 150px;
  background: url("https://bedouin.it/wp-content/uploads/2026/03/Bedouin-foto-sfondo-1-1536x1013.jpg") center center / cover;
}

.home-experience::before,
.home-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-nero);
}

.home-experience::before {
  opacity: 0.63;
}

.home-experience__inner,
.home-cta__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.home-experience__title {
  align-self: center;
  width: 563px;
  max-width: 100%;
  margin-bottom: 40px;
  font-size: 61px;
  line-height: 64px;
  text-align: center;
  color: var(--color-beige);
}

.home-experience__p {
  align-self: center;
  width: 755px;
  max-width: 100%;
  margin-bottom: 10px;
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 400;
  line-height: 29px;
  letter-spacing: -1px;
  text-align: center;
  color: var(--color-beige);
}

.home-experience__p--last {
  margin-bottom: 40px;
}

.home-experience__cta,
.home-cta__cta {
  align-self: center;
  padding-top: 30px;
}

/* --- Produzione eventi, lista tablet/mobile (widget HTML 17202bc, CSS del vivo) --- */
.home-production-list {
  display: none;
}

.bdn-svc-mobile-intro {
  padding: 8vh 6vw 6vh;
  background: #1a1917;
}

.bdn-svc-mobile-intro__label {
  display: block;
  margin-bottom: 32px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 250, 231, 0.4);
}

.bdn-svc-mobile-intro__title {
  max-width: 500px;
  margin: 0 0 32px;
  font-family: var(--font-display);
  font-size: clamp(32px, 8vw, 52px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--color-beige);
}

.bdn-svc-mobile-intro__body {
  max-width: 480px;
  margin: 0 0 20px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 250, 231, 0.6);
}

.bdn-svc-mobile-intro__body:last-child {
  margin-bottom: 0;
}

.bdn-svc-mobile-intro__body strong {
  font-weight: 600;
  color: var(--color-beige);
}

.bdn-svc-mobile {
  padding: 0 6vw 10vh;
  background: #1a1917;
}

.bdn-svc-mobile__item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 36px 0;
  border-bottom: 1px solid rgba(255, 250, 231, 0.08);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* ingresso allo scroll: .inview-pending la mette reveal.js, quindi senza JS la lista si vede */
.bdn-svc-mobile__item.inview-pending {
  opacity: 0;
  transform: translateY(24px);
}

.bdn-svc-mobile__item:first-child {
  padding-top: 36px;
  border-top: 1px solid rgba(255, 250, 231, 0.08);
}

.bdn-svc-mobile__item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.bdn-svc-mobile__item.inview-pending.is-inview {
  opacity: 1;
  transform: translateY(0);
}

.bdn-svc-mobile__item:nth-child(2) { transition-delay: 0.08s; }
.bdn-svc-mobile__item:nth-child(3) { transition-delay: 0.16s; }
.bdn-svc-mobile__item:nth-child(4) { transition-delay: 0.24s; }
.bdn-svc-mobile__item:nth-child(5) { transition-delay: 0.32s; }

.bdn-svc-mobile__num {
  flex-shrink: 0;
  width: 72px;
  padding-top: 4px;
  font-family: var(--font-display);
  font-size: clamp(48px, 12vw, 72px);
  font-weight: 400;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: rgba(255, 250, 231, 0.12);
  user-select: none;
}

.bdn-svc-mobile__text {
  flex: 1;
  min-width: 0;
}

.bdn-svc-mobile__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(22px, 5.5vw, 30px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-beige);
}

.bdn-svc-mobile__desc {
  max-width: 380px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 250, 231, 0.55);
}

/* --- Produzione eventi, pannelli orizzontali (widget HTML 1484bdb, 5217c1a1 e seguenti) --- */
.home-production {
  display: block;
}

.home-production__intro {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* ingresso dei testi e delle foto dei pannelli (reveal.js, data-inview): come sopra, senza JS si vedono */
.bdn-anim {
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.bdn-anim.inview-pending {
  opacity: 0;
  transform: translateY(30px);
}

.bdn-anim.inview-pending.is-inview {
  opacity: 1;
  transform: translateY(0);
}

.bdn-delay-1 { transition-delay: 0.1s; }
.bdn-delay-2 { transition-delay: 0.25s; }
.bdn-delay-3 { transition-delay: 0.4s; }
.bdn-delay-5 { transition-delay: 0.7s; }

.bdn-panel--intro {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: 100%;
  height: 100vh;
  padding: 18vh 50px 0;
  overflow: hidden;
  background-color: var(--color-beige);
}

/* Il widget del vivo dava opacita' .45 all'occhiello e .7 al testo, ma la sua regola
   .bdn-anim.is-inview { opacity: 1 } vince: a riposo sono pieni. Si replica il risultato. */
.bdn-intro__eyebrow {
  display: block;
  margin-bottom: 24px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-testo);
}

.bdn-intro__heading {
  margin: 0 0 32px;
  font-family: var(--font-display);
  font-size: clamp(38px, 5.5vw, 78px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-testo);
}

.bdn-intro__body {
  max-width: 520px;
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 400;
  line-height: 29px;
  letter-spacing: -1px;
  color: var(--color-testo);
}

.bdn-intro__body strong {
  font-weight: 600;
  color: var(--color-testo);
}

.home-production__textpath {
  --text-path-size: 150px;
  position: absolute;
  top: 117px;
  right: 112px;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 35px;
  font-weight: 400;
  text-align: right;
}

.home-production__arrow {
  position: absolute;
  top: 156px;
  right: 148px;
  z-index: 1;
  display: inline-block;
}

.home-production__arrow img {
  display: inline-block;
  width: 76px;
  vertical-align: middle;
}

.bdn-panel--svc {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100vw;
  height: 100vh;
  padding: 0 5vw 0 50px;
  overflow: hidden;
  background: #1a1917;
}

.bdn-svc__inner {
  position: relative;
  z-index: 2;
  width: 45%;
}

.bdn-svc__title {
  max-width: 560px;
  margin: 0 0 36px;
  font-family: var(--font-display);
  font-size: clamp(34px, 4.5vw, 70px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--color-beige);
}

.bdn-svc__divider {
  width: 40px;
  height: 1px;
  margin-bottom: 28px;
  background: rgba(255, 250, 231, 0.16);
}

.bdn-svc__desc {
  max-width: 440px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 400;
  line-height: 29px;
  letter-spacing: -1px;
  color: rgba(255, 250, 231, 0.85);
}

.bdn-svc__visual {
  position: relative;
  z-index: 2;
  display: flex;
  width: 45%;
  margin-right: 12%;
}

.bdn-img-1,
.bdn-img-2 {
  width: 50%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 4px;
}

.bdn-img-1 {
  position: relative;
  z-index: 1;
}

.bdn-img-2 {
  position: absolute;
  top: 15%;
  right: 15%;
  z-index: 3;
  box-shadow: -15px 15px 40px rgba(0, 0, 0, 0.5);
}

.bdn-svc__bg-num {
  position: absolute;
  right: 40px;
  bottom: -0.05em;
  z-index: 0;
  font-family: var(--font-display);
  font-size: clamp(120px, 22vw, 260px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.06em;
  color: rgba(255, 250, 231, 0.12);
  pointer-events: none;
  user-select: none;
}

.bdn-svc__counter {
  position: absolute;
  bottom: 44px;
  left: 50px;
  z-index: 2;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(255, 250, 231, 0.18);
}

/* --- Invito alla produzione ----------------------------------------------- */
.home-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 70vh;
  padding: 150px 60px;
  background: url("https://bedouin.it/wp-content/uploads/2026/05/bedouin-tenda-123.jpg") center center / cover no-repeat;
}

.home-cta::before {
  opacity: 0.26;
}

.home-cta__p {
  position: relative;
  z-index: 2;
  align-self: center;
  width: 652px;
  max-width: 100%;
  margin-top: 30px;
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 400;
  line-height: 31px;
  letter-spacing: -1px;
  text-align: center;
  color: var(--color-beige);
}

.home-cta__cta {
  position: relative;
  z-index: 2;
}

/* --- Blog ------------------------------------------------------------------ */
.home-blog {
  position: relative;
  z-index: 2;
  padding: 90px 50px 150px;
  background-color: var(--color-beige);
}

.home-blog__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1600px;
  margin: 0 auto;
}

.home-blog__title {
  font-size: 128px;
  line-height: 115px;
}

.home-blog__subtitle {
  align-self: flex-start;
  margin-bottom: 60px;
  padding: 30px 30px 0 0;
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 32px;
  letter-spacing: -2px;
}

/* --- Domande frequenti ----------------------------------------------------- */
.home-faq {
  padding: 10px;
  background-color: var(--color-beige);
}

/* ==========================================================================
   Tablet (≤1024)
   ========================================================================== */
@media (max-width: 1024px) {
  .home-hero__title {
    width: 348px;
    font-size: 36px;
    line-height: 37px;
  }

  .home-stats {
    padding: 90px 20px 60px;
  }

  .home-stats__headline {
    width: 448px;
  }

  .home-stats__headline .headline-rotate {
    font-size: 31px;
  }

  .home-stats__counters {
    gap: 30px 40px;
    margin-top: 20px;
  }

  .home-stats__col {
    padding: 30px 0;
  }

  .home-stats .counter__number {
    font-size: 50px;
  }

  .home-stats__logos {
    min-height: 0;
  }

  .home-intro {
    flex-wrap: wrap;
    padding: 0 30px;
  }

  .home-intro__text {
    padding: 60px 30px 80px 0;
  }

  .home-intro__title {
    width: 100%;
    margin-bottom: 50px;
    font-size: 50px;
    line-height: 56px;
  }

  .home-intro__p,
  .home-intro__p--last {
    margin: -30px 0 40px;
    font-size: 20px;
    line-height: 28px;
  }

  .home-intro__cta {
    width: 388px;
    max-width: 100%;
  }

  .home-intro__media {
    min-height: 482px;
  }

  .home-intro__img {
    height: 448px;
  }

  .home-services {
    padding: 50px 30px;
  }

  .home-services__title {
    font-size: 50px;
    line-height: 58px;
  }

  .home-services__subtitle {
    margin-bottom: 40px;
    font-size: 16px;
  }

  .bedouin-services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 30px;
  }

  .home-turnkey {
    flex-wrap: wrap;
    padding: 0 0 0 30px;
  }

  .home-turnkey__title {
    font-size: 50px;
    line-height: 58px;
  }

  .home-turnkey__p {
    font-size: 20px;
    line-height: 28px;
  }

  .home-turnkey__p--last {
    margin-bottom: 40px;
  }

  .home-turnkey__media {
    min-height: 482px;
    margin-top: -100px;
    padding: 0;
  }

  .home-turnkey__photo {
    background-position: 0 -384px;
  }

  .home-tents {
    padding: 50px 30px 100px;
  }

  .bedouin-section-title {
    font-size: 50px;
    line-height: 48px;
    letter-spacing: -3px;
  }

  .bedouin-intro-text {
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -1px;
  }

  .bedouin-top-row {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 50px;
  }

  .bedouin-features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 30px;
  }

  .home-experience {
    min-height: 54vh;
  }

  .home-experience__title {
    font-size: 50px;
    line-height: 58px;
  }

  .home-experience__p {
    width: 535px;
    font-size: 20px;
    line-height: 28px;
  }

  .home-production-list {
    display: block;
  }

  .home-cta {
    min-height: 74vh;
  }

  .home-cta__p {
    width: 450px;
    margin-top: -30px;
    font-size: 24px;
    line-height: 32px;
  }

  .home-blog {
    padding: 90px 30px 50px;
  }

  .home-blog__title {
    font-size: 50px;
    line-height: 58px;
  }

  .home-blog__subtitle {
    padding: 0;
  }

  /* pannelli orizzontali: da tablet in colonna (CSS del vivo) */
  .bdn-panel--svc {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding: 12vh 5vw 8vh;
  }

  .bdn-svc__inner {
    width: 100%;
    margin-bottom: 50px;
  }

  .bdn-svc__desc {
    max-width: 100%;
    font-size: 18px;
    line-height: 26px;
  }

  .bdn-svc__visual {
    position: relative;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-right: 0;
    padding-bottom: 10%;
  }

  .bdn-img-1,
  .bdn-img-2 {
    width: 40%;
    height: auto;
    aspect-ratio: 3 / 4;
  }

  .bdn-img-1 {
    position: relative;
    left: auto;
    z-index: 1;
    margin-right: 25%;
  }

  .bdn-img-2 {
    position: absolute;
    top: 20%;
    right: 5%;
    z-index: 3;
  }

  .bdn-svc__bg-num {
    display: none;
  }

  .bdn-svc__title {
    font-size: clamp(32px, 8vw, 50px);
  }

  .bdn-svc__counter {
    bottom: 20px;
    left: 5vw;
  }

  .home-production__arrow {
    top: calc(37vw - 132px);
    right: 13vw;
  }
}

/* Solo tablet (768–1024): larghezze che Elementor dava in questa fascia e non su mobile */
@media (min-width: 768px) and (max-width: 1024px) {
  .home-stats__col {
    width: 25%;
  }

  .home-stats__logos {
    width: 644px;
  }

  .home-intro__text,
  .home-intro__media,
  .home-turnkey__text,
  .home-turnkey__media {
    width: 100%;
  }
}

/* Pannello intro: il widget del vivo usa 768px, non 767 */
@media (max-width: 768px) {
  .bdn-panel--intro {
    align-items: flex-start;
    width: 100%;
    padding: 15vh 20px 0;
  }

  .bdn-intro__heading {
    font-size: clamp(28px, 9vw, 44px);
  }

  .bdn-intro__body {
    font-size: 18px;
    line-height: 26px;
  }
}

/* ==========================================================================
   Mobile (≤767)
   ========================================================================== */
@media (max-width: 767px) {
  .home-hero {
    min-height: 698px;
    padding: 80px 30px 30px;
    background-image: url("https://bedouin.it/wp-content/uploads/2026/03/Bedouin-matrimonio-bagno-piero.jpg");
  }

  .home-hero__content {
    min-height: 35vh;
  }

  .home-hero__logo {
    width: 178px;
  }

  .home-hero__title {
    width: 310px;
    margin: 0;
    font-size: 25px;
    line-height: 28px;
    letter-spacing: -0.5px;
  }

  .home-stats {
    padding: 60px 15px;
  }

  .home-stats__headline {
    width: 245px;
  }

  .home-stats__headline .headline-rotate {
    font-size: 28px;
  }

  .home-stats__counters {
    flex-wrap: wrap;
    gap: 30px 0;
    margin-top: 0;
    padding-top: 20px;
  }

  .home-stats__col {
    width: 50%;
    padding: 20px 0 0;
  }

  .home-stats__col:nth-child(n + 3) {
    padding: 0;
  }

  .home-stats__logos {
    width: 100%;
    min-height: 5vh;
  }

  .home-intro {
    padding: 0;
  }

  .home-intro__text {
    width: 100%;
    padding: 60px 20px 0;
  }

  .home-intro__title {
    margin-bottom: 40px;
  }

  .home-intro__p {
    margin: 0 0 10px;
  }

  .home-intro__p--last {
    margin: 0 0 20px;
  }

  .home-intro__cta {
    width: 100%;
    margin-bottom: 50px;
  }

  .home-intro__media {
    width: 100%;
    min-height: 55vh;
    margin: 0 20px;
  }

  .home-intro__img {
    height: 56vh;
  }

  .home-services {
    padding: 100px 0 50px;
  }

  .home-services__title {
    padding: 0 20px;
    font-size: 56px;
    line-height: 56px;
  }

  .home-services__subtitle {
    margin: 0;
    padding: calc(10px + 0.5rem) 20px 40px;
    font-size: 14px;
  }

  .home-services .bedouin-services-section {
    margin-top: -66px;
    padding: 60px 20px;
  }

  .bedouin-services-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .bedouin-service-image-wrapper {
    aspect-ratio: 4 / 3;
  }

  .home-turnkey {
    padding: 0;
  }

  .home-turnkey__text {
    order: 99999;
    width: 100%;
    padding: 60px 0;
  }

  .home-turnkey__title {
    margin: 0;
    padding: 0 20px 2px;
  }

  .home-turnkey__p {
    margin: 0;
    padding: 0 20px;
  }

  .home-turnkey__p--last {
    padding-bottom: 20px;
  }

  .home-turnkey__cta {
    align-self: center;
    width: 100%;
    padding: 0 20px;
  }

  .home-turnkey__cta .btn {
    padding: 20px 0;
  }

  .home-turnkey__media {
    width: 100%;
    min-height: 55vh;
    margin: 0 20px;
  }

  .home-turnkey__photo {
    background-position: 0 0;
  }

  .home-tents {
    padding: 0 20px 50px;
  }

  .bedouin-custom-section {
    padding: 60px 0;
  }

  .bedouin-top-text-wrapper {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .bedouin-features-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .bedouin-feature-image-wrapper {
    aspect-ratio: 4 / 3;
  }

  .home-experience {
    padding: 60px 20px;
  }

  .home-experience__title {
    width: 100%;
    margin: 0;
    padding: 0 0 40px;
    font-size: 36px;
    line-height: 39px;
    letter-spacing: -2px;
    text-align: start;
  }

  .home-experience__p,
  .home-experience__p--last {
    align-self: flex-start;
    width: 100%;
    margin: 0;
    padding: 0 0 10px;
    text-align: start;
  }

  .home-experience__p--last {
    padding-bottom: 40px;
  }

  .home-experience__cta,
  .home-cta__cta {
    align-self: flex-start;
    width: 100%;
    padding-top: 0;
    padding-bottom: 50px;
  }

  .home-production {
    display: none;
  }

  .home-cta {
    padding: 80px 20px 0;
    background-position: center left;
  }

  .home-cta__p {
    align-self: flex-start;
    width: 100%;
    margin: 0;
    padding: 0 0 40px;
    line-height: 28px;
    text-align: start;
  }

  .home-cta__cta .btn {
    font-size: 14px;
  }

  .home-blog {
    padding: 50px 20px;
  }

  .home-blog__title {
    margin-left: -8px;
    font-size: 64px;
  }
}