@import url('https://fonts.googleapis.com/css2?family=Knewave&family=Open+Sans:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap');


/* =========================================================
   VARIABILI
========================================================= */

:root{
    --font-display:'Knewave',cursive;
  --font-heading:'Poppins',sans-serif;
  --font-body:'Open Sans',sans-serif;
  --ink:#202720;
  --ink-2:#334038;

  --green:#4f6d4e;
  --green-dark:#2f4a35;

  --sand:#eee7da;
  --sand-2:#f8f5ef;
  --sand-3:#f2ede6;
  --sand-4:#eae4dc;

  --gold:#c88d3b;
  --gold-dark:#a96c23;

  --brown-dark:#3c2d23;
  --brown-dark-2:#2b1f18;
  --brown-dark-3:#4b392d;

  --white:#ffffff;
  --muted:#6d756d;
  --line:#e4ded4;

  --shadow:0 18px 50px rgba(32,39,32,.11);

  --container:1180px;
}


/* =========================================================
   RESET
========================================================= */

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Open Sans',sans-serif;
  color:var(--ink);
  line-height:1.72;
  background:var(--sand-3);
  overflow-x:hidden;
}

body.menu-open{
  overflow:hidden;
}

img{
  display:block;
  width:100%;
  height:auto;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
textarea{
  font:inherit;
}

.container{
  width:min(var(--container),calc(100% - 40px));
  margin:0 auto;
}


/* =========================================================
   PRELOADER
========================================================= */

.preloader{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  background:var(--ink);
  transition:.55s ease;
  animation:loaderOut .7s ease 1.15s forwards;
}

.preloader.hide{
  opacity:0;
  visibility:hidden;
}

@keyframes loaderOut{
  to{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }
}

.loader{
  display:flex;
  gap:9px;
}

.loader i{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--gold);
  animation:pulse 1s infinite ease-in-out;
}

.loader i:nth-child(2){
  animation-delay:.12s;
}

.loader i:nth-child(3){
  animation-delay:.24s;
}

@keyframes pulse{
  0%,
  80%,
  100%{
    transform:translateY(0);
    opacity:.5;
  }

  40%{
    transform:translateY(-10px);
    opacity:1;
  }
}


/* =========================================================
   TOPBAR
========================================================= */

.topbar{
  background:var(--ink);
  color:#fff;
  font-size:11px;
  letter-spacing:.08em;
}

.topbar .container{
  min-height:38px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}

.topbar a{
  transition:color .25s ease;
}

.topbar a:hover{
  color:#f1c982;
}


/* =========================================================
   HEADER
========================================================= */

.header{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:1000;

  background:
    linear-gradient(
      180deg,
      rgba(14,22,16,.62),
      rgba(14,22,16,0)
    );

  border-bottom:1px solid rgba(255,255,255,.12);

  transition:.35s;
}

.header.scrolled{
  position:fixed;

  background:rgba(255,255,255,.97);

  backdrop-filter:blur(12px);

  border-bottom:1px solid rgba(228,222,212,.8);

  box-shadow:0 10px 28px rgba(32,39,32,.1);
}

.navbar{
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}


/* =========================================================
   LOGO
========================================================= */

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand-mark{
  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      var(--gold),
      #e2b774
    );

  color:#fff;
  font-size:20px;

  box-shadow:0 8px 22px rgba(200,141,59,.22);
}

.brand strong{
  display:block;

  font-family:Poppins,sans-serif;

  font-size:17px;
  line-height:1.05;

  letter-spacing:.08em;

  color:#fff;
}

.brand span{
  display:block;

  margin-top:5px;

  font-size:9px;

  letter-spacing:.17em;

  color:rgba(255,255,255,.72);
}

.header.scrolled .brand strong{
  color:var(--ink);
}

.header.scrolled .brand span{
  color:#8a908a;
}


/* =========================================================
   NAVIGAZIONE
========================================================= */

.nav{
  display:flex;
  align-items:center;
  gap:23px;
}

.nav a{
  position:relative;

  padding:31px 0;

  font-size:12px;
  font-weight:700;

  letter-spacing:.03em;

  color:rgba(255,255,255,.9);
}

.header.scrolled .nav a{
  color:var(--ink-2);
}

.nav a::after{
  content:'';

  position:absolute;

  left:0;
  right:100%;
  bottom:24px;

  height:2px;

  background:var(--gold);

  transition:right .25s;
}

.nav a:hover::after,
.nav a.active::after{
  right:0;
}

.nav a:hover,
.nav a.active{
  color:#fff;
}

.header.scrolled .nav a:hover,
.header.scrolled .nav a.active{
  color:var(--ink);
}

.nav .nav-cta{
  padding:11px 17px;

  border-radius:999px;

  background:var(--green);

  color:#fff;
}

.nav .nav-cta::after{
  display:none;
}


/* =========================================================
   MENU MOBILE
========================================================= */

.menu-toggle{
  display:none;

  width:44px;
  height:44px;

  border:1px solid var(--line);
  border-radius:50%;

  background:#fff;

  cursor:pointer;
}

.menu-toggle span{
  display:block;

  width:18px;
  height:2px;

  margin:4px auto;

  background:var(--ink);
}


/* =========================================================
   HERO HOME
========================================================= */

.hero{
  position:relative;

  min-height:100vh;

  padding-top:96px;

  display:flex;
  align-items:center;

  background:
    url('../images/hero.jpg')
    center / cover
    no-repeat;
}

.hero-overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(14,22,16,.26),
      rgba(14,22,16,.58) 62%,
      rgba(14,22,16,.76)
    );
}

.hero-center{
  position:relative;
  z-index:1;

  display:flex;
  justify-content:center;

  text-align:center;
}

.hero-inner{
  position:relative;
  z-index:1;

  max-width:920px;

  padding:90px 0 120px;

  color:#fff;
}

.hero-inner .kicker{
  justify-content:center;
}

.hero h1{
  margin-top:18px;

  font-family:Poppins,sans-serif;

  font-size:clamp(48px,7vw,92px);

  line-height:1.02;

  letter-spacing:-.045em;

  text-shadow:0 12px 40px rgba(0,0,0,.25);
}

.hero h1 span{
  display:block;

  margin-top:18px;

  font-size:.46em;

  letter-spacing:-.02em;

  color:#f1c982;
}

.hero p{
  max-width:680px;

  margin:22px auto 0;

  font-size:18px;

  color:rgba(255,255,255,.9);
}

.hero-actions{
  justify-content:center;
}


/* =========================================================
   KICKER
========================================================= */

.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;

  color:#f1c982;

  font-size:11px;
  font-weight:700;

  text-transform:uppercase;

  letter-spacing:.22em;
}

.kicker::before{
  content:'';

  width:34px;
  height:2px;

  background:var(--gold);
}


/* =========================================================
   BOTTONI
========================================================= */

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;

  margin-top:30px;
}

.btn{
  min-height:50px;

  padding:0 22px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;

  font-size:12px;
  font-weight:700;

  transition:
    transform .25s ease,
    background .25s ease,
    color .25s ease;
}

.btn-primary{
  background:var(--gold);

  color:#fff;

  box-shadow:0 12px 28px rgba(200,141,59,.25);
}

.btn-primary:hover{
  background:var(--gold-dark);

  transform:translateY(-2px);
}

.btn-light{
  border:1px solid rgba(255,255,255,.65);

  background:rgba(255,255,255,.08);

  backdrop-filter:blur(7px);

  color:#fff;
}

.btn-light:hover{
  background:#fff;

  color:var(--ink);

  transform:translateY(-2px);
}


/* =========================================================
   SCROLL CUE
========================================================= */

.scroll-cue{
  position:absolute;

  left:50%;
  bottom:24px;

  transform:translateX(-50%);

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;

  color:#fff;

  font-size:9px;

  text-transform:uppercase;

  letter-spacing:.25em;
}

.scroll-cue::after{
  content:'';

  width:1px;
  height:42px;

  background:
    linear-gradient(
      #fff,
      transparent
    );
}


/* =========================================================
   SEZIONI CHIARE TEXTURE
========================================================= */

.section{
  padding:104px 0;

  background-color:var(--sand-3);

  background-image:
    radial-gradient(
      circle at 12% 18%,
      rgba(255,255,255,.55) 0 2px,
      transparent 3px
    ),
    radial-gradient(
      circle at 78% 30%,
      rgba(255,255,255,.32) 0 1.5px,
      transparent 2.5px
    ),
    radial-gradient(
      circle at 28% 72%,
      rgba(255,255,255,.25) 0 2px,
      transparent 3px
    ),
    radial-gradient(
      circle at 88% 84%,
      rgba(255,255,255,.20) 0 1.5px,
      transparent 2.5px
    );

  background-size:
    180px 180px,
    240px 240px,
    220px 220px,
    260px 260px;
}


/* =========================================================
   SEZIONE ALTERNATA
========================================================= */

.section.alt{
  background-color:var(--sand-2);

  background-image:
    radial-gradient(
      circle at 15% 22%,
      rgba(255,255,255,.5) 0 2px,
      transparent 3px
    ),
    radial-gradient(
      circle at 82% 26%,
      rgba(255,255,255,.28) 0 1.5px,
      transparent 2.5px
    ),
    radial-gradient(
      circle at 36% 78%,
      rgba(255,255,255,.24) 0 2px,
      transparent 3px
    ),
    radial-gradient(
      circle at 72% 86%,
      rgba(255,255,255,.2) 0 1.5px,
      transparent 2.5px
    );
}


/* =========================================================
   SEZIONE SCURA
========================================================= */

.section.dark{
  background-color:var(--brown-dark);

  background-image:
    radial-gradient(
      ellipse at 15% 20%,
      rgba(255,255,255,.035) 0 16%,
      transparent 17%
    ),
    radial-gradient(
      ellipse at 48% 17%,
      rgba(255,255,255,.03) 0 18%,
      transparent 19%
    ),
    radial-gradient(
      ellipse at 80% 22%,
      rgba(255,255,255,.03) 0 16%,
      transparent 17%
    ),
    radial-gradient(
      ellipse at 28% 76%,
      rgba(255,255,255,.025) 0 17%,
      transparent 18%
    ),
    radial-gradient(
      ellipse at 72% 75%,
      rgba(255,255,255,.025) 0 18%,
      transparent 19%
    );

  background-size:
    300px 250px,
    350px 300px,
    320px 270px,
    340px 290px,
    370px 310px;

  color:#fff;
}


/* =========================================================
   TITOLI SEZIONI
========================================================= */

.section-head{
  display:flex;

  justify-content:space-between;
  align-items:flex-end;

  gap:28px;

  margin-bottom:46px;
}

.section-head.center{
  display:block;

  max-width:760px;

  margin:0 auto 46px;

  text-align:center;
}

.section-title{
  font-family:Poppins,sans-serif;

  font-size:clamp(31px,4vw,52px);

  line-height:1.1;

  letter-spacing:-.04em;
}

.section-intro{
  max-width:640px;

  color:var(--muted);

  font-size:15px;
}

.section.dark .section-intro{
  color:rgba(255,255,255,.72);
}


/* =========================================================
   INTRO HOME
========================================================= */

.intro-grid{
  display:grid;

  grid-template-columns:1.05fr .95fr;

  gap:58px;

  align-items:center;
}


/* =========================================================
   FOTO ABOUT
========================================================= */

.media-wrap{
  position:relative;

  isolation:isolate;

  display:flex;

  align-items:center;

  padding:24px 24px 24px 0;
}

.media-wrap::before{
  content:'';

  position:absolute;

  z-index:0;

  top:0;
  left:0;
  right:85px;
  bottom:0;

  border-radius:14px;

  background:var(--gold);
}

.media-wrap img{
  position:relative;

  z-index:1;

  width:100%;

  aspect-ratio:4/3;

  object-fit:cover;

  border-radius:14px;

  box-shadow:0 18px 50px rgba(32,39,32,.16);
}

.floating-note{
  position:absolute;

  z-index:2;

  right:-22px;
  bottom:24px;

  max-width:220px;

  padding:16px 18px;

  border-radius:14px;

  background:#fff;

  box-shadow:var(--shadow);
}

.floating-note strong{
  display:block;

  font-family:Poppins,sans-serif;

  font-size:27px;
}

.floating-note small{
  display:block;

  margin-top:3px;

  color:var(--muted);

  font-size:11px;
}

.intro-copy .lead{
  font-family:Poppins,sans-serif;

  font-size:24px;

  line-height:1.4;
}

.intro-copy p{
  margin-top:14px;

  color:var(--muted);
}


/* =========================================================
   CHECK LIST
========================================================= */

.check-list{
  display:grid;

  gap:12px;

  margin-top:22px;
}

.check-list div{
  display:flex;

  align-items:flex-start;

  gap:11px;

  color:var(--ink-2);
}

.check-list b{
  flex:0 0 23px;

  width:23px;
  height:23px;

  display:grid;

  place-items:center;

  border-radius:50%;

  background:var(--sand);

  color:var(--green-dark);

  font-size:12px;
}


/* =========================================================
   NUMERI
========================================================= */

.facts{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  overflow:hidden;

  border-radius:20px;

  background:var(--ink);
}

.fact{
  padding:28px;

  text-align:center;

  border-right:1px solid rgba(255,255,255,.09);
}

.fact:last-child{
  border-right:0;
}

.fact strong{
  display:block;

  font-family:Poppins,sans-serif;
  font-weight:700;

  color:#f1c982;

  font-size:clamp(22px,1.8vw,30px);
  line-height:1.1;

  white-space:nowrap;
}

.fact span{
  display:block;

  margin-top:14px;

  color:rgba(255,255,255,.72);

  font-size:10px;
  font-weight:500;

  text-transform:uppercase;
  letter-spacing:.14em;

  line-height:1.5;
}


/* =========================================================
   PLUS
========================================================= */

.plus-grid{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:17px;
}

.plus-card{
  padding:26px;

  border:1px solid var(--line);

  border-radius:16px;

  background:rgba(255,255,255,.9);

  transition:.3s;
}

.plus-card:hover{
  transform:translateY(-7px);

  border-color:transparent;

  box-shadow:var(--shadow);
}

.plus-icon{
  width:46px;
  height:46px;

  margin-bottom:17px;

  display:grid;

  place-items:center;

  border-radius:12px;

  background:var(--sand);

  color:var(--green-dark);

  font-size:18px;
}

.plus-card h3{
  font-family:Poppins,sans-serif;

  font-size:18px;
}

.plus-card p{
  margin-top:8px;

  color:var(--muted);

  font-size:13px;
}


/* =========================================================
   CARD SAFARI / ESCURSIONI
========================================================= */

.card-grid{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:22px;
}


.card-grid.two-cards{
  grid-template-columns:repeat(2,1fr);
}

.card-grid.four-cards{
  grid-template-columns:repeat(4,1fr);
}

.card{
  overflow:hidden;

  display:flex;

  flex-direction:column;

  border:1px solid var(--line);

  border-radius:18px;

  background:rgba(255,255,255,.92);

  transition:.3s;
}

.card:hover{
  transform:translateY(-8px);

  box-shadow:var(--shadow);
}

.card-image{
  position:relative;

  overflow:hidden;
}

.card-image img{
  aspect-ratio:1.4/1;

  object-fit:cover;

  transition:transform .7s;
}

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

.tag{
  position:absolute;

  left:15px;
  top:15px;

  padding:6px 9px;

  border-radius:999px;

  background:#fff;

  font-size:9px;

  font-weight:700;

  text-transform:uppercase;

  letter-spacing:.12em;
}

.card-body{
  flex:1;

  padding:23px;

  display:flex;

  flex-direction:column;

  gap:11px;
}

.card-body h3{
  font-family:Poppins,sans-serif;

  font-size:20px;

  line-height:1.2;
}

.card-body p{
  color:var(--muted);

  font-size:13.5px;
}

.meta{
  margin-top:auto;

  padding-top:8px;

  display:flex;

  justify-content:space-between;

  gap:10px;
}

.meta small{
  color:#9ba19b;

  font-size:10px;

  text-transform:uppercase;

  letter-spacing:.12em;
}

.text-link{
  color:var(--green-dark);

  font-size:11px;

  font-weight:700;

  text-transform:uppercase;

  letter-spacing:.12em;
}

.text-link:hover{
  color:var(--gold-dark);
}


/* =========================================================
   BANNER
========================================================= */

.full-banner{
  min-height:560px;

  display:flex;

  align-items:center;

  background-image:
    linear-gradient(
      90deg,
      rgba(16,26,19,.82),
      rgba(16,26,19,.2) 72%
    ),
    url('../images/safari.jpg');

  background-size:cover;

  background-position:center;
}

.banner-copy{
  max-width:680px;

  color:#fff;
}

.banner-copy h2{
  font-family:Poppins,sans-serif;

  font-size:clamp(36px,5vw,66px);

  line-height:1.05;
}

.banner-copy p{
  max-width:610px;

  margin-top:18px;

  color:rgba(255,255,255,.86);
}


/* =========================================================
   CHI SIAMO
========================================================= */

.story{
  display:grid;

  grid-template-columns:.9fr 1.1fr;

  gap:60px;

  align-items:center;
}

.story img{
  aspect-ratio:4/5;

  object-fit:cover;

  border-radius:20px;

  box-shadow:var(--shadow);
}

.story p{
  margin-top:15px;

  color:var(--muted);
}


/* =========================================================
   VIDEO CHI SIAMO
========================================================= */

.story-video-wrap{
  width:100%;

  display:flex;

  justify-content:center;

  align-items:center;
}

.story-video{
  display:block;

  width:100%;

  max-width:430px;

  aspect-ratio:9/16;

  object-fit:cover;

  border-radius:20px;

  background:#000;

  box-shadow:var(--shadow);
}


/* =========================================================
   HERO PAGINE INTERNE
========================================================= */

.page-hero{
  padding:190px 0 86px;

  color:#fff;

  background-image:
    linear-gradient(
      90deg,
      rgba(18,28,20,.76),
      rgba(18,28,20,.22)
    ),
    url('../images/hero.jpg');

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.page-hero.page-hero-tsavo{
  background-image:
    linear-gradient(
      90deg,
      rgba(18,28,20,.76),
      rgba(18,28,20,.22)
    ),
    url('../images/safari-tsavo2.jpg');

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* =========================================================
   HERO PERSONALIZZATI - SAFARI
========================================================= */

.page-hero.page-hero-amboseli{
  background-image:
    linear-gradient(
      90deg,
      rgba(18,28,20,.76),
      rgba(18,28,20,.22)
    ),
    url('../images/safari-amboseli2.jpg');

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}




.page-hero.page-hero-4-giorni{
  background-image:
    linear-gradient(
      90deg,
      rgba(18,28,20,.76),
      rgba(18,28,20,.22)
    ),
    url('../images/safari-4-giorni.jpg');

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.page-hero.page-hero-5-giorni{
  background-image:
    linear-gradient(
      90deg,
      rgba(18,28,20,.76),
      rgba(18,28,20,.22)
    ),
    url('../images/safari-5-giorni2.jpg');

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}


.page-hero.page-hero-7-giorni{
  background-image:
    linear-gradient(
      90deg,
      rgba(18,28,20,.76),
      rgba(18,28,20,.22)
    ),
    url('../images/safari-7-giorni.jpg');

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}


/* =========================================================
   HERO PERSONALIZZATI - ESCURSIONI
========================================================= */

.page-hero.page-hero-safari-blu{
  background-image:
    linear-gradient(
      90deg,
      rgba(18,28,20,.76),
      rgba(18,28,20,.22)
    ),
    url('../images/esc-safari-blu.jpg');

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}


.page-hero.page-hero-malindi{
  background-image:
    linear-gradient(
      90deg,
      rgba(18,28,20,.76),
      rgba(18,28,20,.22)
    ),
    url('../images/esc-malindi.jpg');

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}


.page-hero.page-hero-marafa{
  background-image:
    linear-gradient(
      90deg,
      rgba(18,28,20,.76),
      rgba(18,28,20,.22)
    ),
    url('../images/esc-marafa.jpg');

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}


.page-hero.page-hero-gede{
  background-image:
    linear-gradient(
      90deg,
      rgba(18,28,20,.76),
      rgba(18,28,20,.22)
    ),
    url('../images/esc-gede.jpg');

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}


.page-hero.page-hero-isola-amore{
  background-image:
    linear-gradient(
      90deg,
      rgba(18,28,20,.76),
      rgba(18,28,20,.22)
    ),
    url('../images/esc-isola-amore.jpg');

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.breadcrumbs{
  font-size:10px;

  text-transform:uppercase;

  letter-spacing:.18em;

  opacity:.75;
}

.page-hero h1{
  margin-top:16px;

  font-family:Poppins,sans-serif;

  font-size:clamp(42px,6vw,72px);

  line-height:1.02;
}

.page-hero p{
  max-width:650px;

  margin-top:14px;

  color:rgba(255,255,255,.84);
}


/* =========================================================
   ITINERARI
========================================================= */

.itinerary{
  margin-top:20px;

  overflow:hidden;

  border:1px solid var(--line);

  border-radius:18px;

  background:rgba(255,255,255,.94);
}

.day{
  border-bottom:1px solid var(--line);
}

.day:last-child{
  border-bottom:0;
}

.day-head{
  padding:21px 23px;

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:20px;

  cursor:pointer;
}

.day-head:hover{
  background:var(--sand-2);
}

.day-title{
  font-family:Poppins,sans-serif;

  font-size:16px;
}

.day-toggle{
  width:32px;
  height:32px;

  display:grid;

  place-items:center;

  border-radius:50%;

  background:var(--sand);

  transition:.25s;
}

.day.open .day-toggle{
  transform:rotate(45deg);

  background:var(--green);

  color:#fff;
}

.day-body{
  max-height:0;

  overflow:hidden;

  transition:max-height .4s ease;
}

.day.open .day-body{
  max-height:900px;
}

.day-content{
  padding:0 23px 23px;

  color:var(--muted);

  font-size:14px;
}

.note{
  margin-top:20px;

  padding:18px;

  border-left:3px solid var(--gold);

  border-radius:0 12px 12px 0;

  background:var(--sand-2);

  color:var(--ink-2);
}

.includes{
  margin-top:22px;

  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:11px;
}

.include{
  padding:12px 13px;

  border-radius:11px;

  background:var(--sand-2);

  font-size:13px;
}

.include strong{
  color:var(--green-dark);
}


/* =========================================================
   SERVIZI
========================================================= */

.service-grid,
.services-grid{
  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:18px;
}

.service-card{
  padding:27px;

  border:1px solid var(--line);

  border-radius:16px;

  background:rgba(255,255,255,.9);
}

.service-card h3{
  font-family:Poppins,sans-serif;

  font-size:19px;
}

.service-card p{
  margin-top:10px;

  color:var(--muted);

  font-size:14px;
}


/* =========================================================
   GALLERIA NORMALE
========================================================= */

.gallery{
  display:grid;

  grid-template-columns:repeat(12,1fr);

  gap:14px;
}

.gallery-item{
  min-height:250px;

  overflow:hidden;

  border-radius:16px;
}

.gallery-item img{
  height:100%;

  object-fit:cover;

  transition:transform .7s;
}

.gallery-item:hover img{
  transform:scale(1.06);
}

.gallery-item:nth-child(1){
  grid-column:span 7;

  grid-row:span 2;
}

.gallery-item:nth-child(2),
.gallery-item:nth-child(3){
  grid-column:span 5;
}

.gallery-item:nth-child(n+4){
  grid-column:span 4;
}


/* =========================================================
   GALLERIA PUZZLE
========================================================= */

.gallery-section{
  background-color:var(--sand-2);

  background-image:
    radial-gradient(
      circle at 14% 18%,
      rgba(255,255,255,.5) 0 2px,
      transparent 3px
    ),
    radial-gradient(
      circle at 76% 28%,
      rgba(255,255,255,.27) 0 1.5px,
      transparent 2.5px
    ),
    radial-gradient(
      circle at 30% 72%,
      rgba(255,255,255,.22) 0 2px,
      transparent 3px
    ),
    radial-gradient(
      circle at 86% 84%,
      rgba(255,255,255,.18) 0 1.5px,
      transparent 2.5px
    );

  background-size:
    200px 200px,
    260px 260px,
    220px 220px,
    280px 280px;
}

.gallery-masonry{
  width:100%;

  column-count:4;

  column-gap:14px;
}

.gallery-masonry .gallery-item{
  display:inline-block;

  vertical-align:top;

  width:100%;

  min-height:0;

  margin:0 0 14px;

  overflow:hidden;

  break-inside:avoid;

  -webkit-column-break-inside:avoid;

  page-break-inside:avoid;

  border-radius:8px;

  background:#eee;
}

.gallery-masonry .gallery-item img{
  width:100%;

  height:auto;

  object-fit:initial;

  transition:transform .7s ease;
}

.gallery-masonry .gallery-item:hover img{
  transform:scale(1.04);
}


/* =========================================================
   RECENSIONI
========================================================= */

.reviews{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:18px;
}

.review{
  padding:25px;

  border:1px solid var(--line);

  border-radius:16px;

  background:rgba(255,255,255,.9);
}

.stars{
  color:var(--gold);

  letter-spacing:.08em;
}

.review p{
  margin-top:12px;

  color:var(--muted);

  font-size:14px;
}

.review strong{
  display:block;

  margin-top:14px;

  font-family:Poppins,sans-serif;

  font-size:13px;
}

.review small{
  display:block;

  margin-top:3px;

  color:#9ba19b;

  font-size:10px;
}


/* =========================================================
   CONTATTI
========================================================= */

.contact-grid{
  display:grid;

  grid-template-columns:.82fr 1.18fr;

  gap:38px;
}

.contact-card{
  padding:32px;

  border-radius:20px;

  background:rgba(43,31,24,.94);

  color:#fff;
}

.contact-card h3{
  font-family:Poppins,sans-serif;

  font-size:25px;
}

.contact-card p{
  margin-top:10px;

  color:rgba(255,255,255,.7);
}

.contact-list{
  display:grid;

  gap:18px;

  margin-top:25px;
}

.contact-row{
  display:grid;

  grid-template-columns:40px 1fr;

  gap:12px;
}

.contact-row .icon{
  width:40px;
  height:40px;

  display:grid;

  place-items:center;

  border-radius:11px;

  background:rgba(255,255,255,.08);

  color:#f1c982;
}

.contact-row strong{
  font-family:Poppins,sans-serif;

  font-size:13px;
}

.contact-row span{
  display:block;

  color:rgba(255,255,255,.7);

  font-size:13px;
}

.form-card{
  padding:32px;

  border:1px solid rgba(228,222,212,.9);

  border-radius:20px;

  background:rgba(255,255,255,.82);

  backdrop-filter:blur(5px);

  box-shadow:var(--shadow);
}

.form-grid{
  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:16px;
}

.field{
  display:grid;

  gap:7px;
}

.field.full{
  grid-column:1/-1;
}

.field label{
  color:var(--ink-2);

  font-size:10px;

  font-weight:700;

  text-transform:uppercase;

  letter-spacing:.1em;
}

.field input,
.field textarea{
  width:100%;

  padding:12px 13px;

  border:1px solid var(--line);

  border-radius:11px;

  outline:0;

  background:#fff;
}

.field input:focus,
.field textarea:focus{
  border-color:var(--green);
}

.field textarea{
  min-height:145px;

  resize:vertical;
}

.form-card .btn{
  border:0;
}

.form-note{
  margin-top:9px;

  color:var(--muted);

  font-size:10px;
}


/* =========================================================
   EXTRA
========================================================= */

.center-actions{
  justify-content:center;
}

.compact-title{
  margin-top:10px;

  font-size:34px;
}

.stat-band{
  padding-top:0;
}


/* =========================================================
   SEZIONI FOTO + TESTO
========================================================= */

.split-feature{
  min-height:520px;

  padding:45px 0;

  display:grid;

  grid-template-columns:1fr 1fr;

  align-items:center;

  gap:48px;

  background-color:var(--sand-2);

  background-image:
    radial-gradient(
      circle at 14% 20%,
      rgba(255,255,255,.48) 0 2px,
      transparent 3px
    ),
    radial-gradient(
      circle at 78% 24%,
      rgba(255,255,255,.26) 0 1.5px,
      transparent 2.5px
    ),
    radial-gradient(
      circle at 28% 74%,
      rgba(255,255,255,.20) 0 2px,
      transparent 3px
    ),
    radial-gradient(
      circle at 84% 80%,
      rgba(255,255,255,.18) 0 1.5px,
      transparent 2.5px
    );

  background-size:
    180px 180px,
    240px 240px,
    220px 220px,
    260px 260px;
}

.split-feature + .split-feature{
  margin-top:30px;
}

.split-feature.reverse{
  background-color:var(--sand-3);

  background-image:
    radial-gradient(
      circle at 16% 20%,
      rgba(255,255,255,.45) 0 2px,
      transparent 3px
    ),
    radial-gradient(
      circle at 72% 26%,
      rgba(255,255,255,.24) 0 1.5px,
      transparent 2.5px
    ),
    radial-gradient(
      circle at 34% 76%,
      rgba(255,255,255,.20) 0 2px,
      transparent 3px
    ),
    radial-gradient(
      circle at 88% 82%,
      rgba(255,255,255,.17) 0 1.5px,
      transparent 2.5px
    );

  background-size:
    190px 190px,
    250px 250px,
    230px 230px,
    280px 280px;
}


/* =========================================================
   FOTO SEZIONI
========================================================= */

.feature-media{
  position:relative;

  isolation:isolate;

  min-height:480px;

  display:flex;

  align-items:center;

  overflow:visible;
}

.split-feature:not(.reverse) .feature-media{
  padding:26px 42px 26px 0;
}

.split-feature.reverse .feature-media{
  padding:26px 0 26px 42px;
}

.feature-media::before{
  content:'';

  position:absolute;

  z-index:0;

  top:0;
  bottom:0;

  border-radius:14px;

  background:var(--gold);
}

.split-feature:not(.reverse) .feature-media::before{
  left:0;
  right:85px;
}

.split-feature.reverse .feature-media::before{
  left:85px;
  right:0;
}

.feature-media img{
  position:relative;

  z-index:1;

  width:100%;
  height:100%;

  max-height:580px;

  object-fit:cover;

  border-radius:14px;

  box-shadow:0 18px 50px rgba(32,39,32,.16);

  transition:
    transform .8s ease,
    box-shadow .8s ease;
}

.feature-media:hover img{
  transform:scale(1.025);

  box-shadow:0 24px 60px rgba(32,39,32,.20);
}


/* =========================================================
   TESTO FEATURE
========================================================= */

.feature-copy{
  padding:
    80px
    max(40px,calc((100vw - 1180px)/2))
    80px
    80px;

  display:flex;

  flex-direction:column;

  justify-content:center;
}

.split-feature.reverse .feature-copy{
  padding-left:
    max(40px,calc((100vw - 1180px)/2));

  padding-right:80px;
}

.feature-copy h2{
  margin-top:14px;

  font-family:Poppins,sans-serif;

  font-size:clamp(34px,4.5vw,58px);

  line-height:1.08;

  letter-spacing:-.04em;
}

.feature-copy p{
  max-width:560px;

  margin-top:16px;

  color:var(--muted);
}

.large-link{
  margin-top:22px;

  font-size:12px;
}

.service-number{
  margin-bottom:14px;

  font-family:Poppins,sans-serif;

  color:var(--gold);

  font-size:12px;

  letter-spacing:.18em;
}


/* =========================================================
   FOOTER
========================================================= */

.footer{
  position:relative;

  /*
     Spazio sopra il footer riservato
     alla silhouette della savana.
  */
  margin-top:118px;

  padding:68px 0 24px;

  /*
     Deve essere VISIBLE.
     Altrimenti la silhouette viene tagliata.
  */
  overflow:visible;

  background-color:var(--brown-dark-2);

  background-image:
    radial-gradient(
      ellipse at 14% 20%,
      rgba(255,255,255,.03) 0 16%,
      transparent 17%
    ),
    radial-gradient(
      ellipse at 48% 20%,
      rgba(255,255,255,.026) 0 18%,
      transparent 19%
    ),
    radial-gradient(
      ellipse at 80% 22%,
      rgba(255,255,255,.026) 0 16%,
      transparent 17%
    ),
    radial-gradient(
      ellipse at 26% 76%,
      rgba(255,255,255,.02) 0 17%,
      transparent 18%
    ),
    radial-gradient(
      ellipse at 72% 74%,
      rgba(255,255,255,.02) 0 18%,
      transparent 19%
    );

  background-size:
    300px 250px,
    350px 300px,
    320px 270px,
    340px 290px,
    370px 310px;

  color:#fff;
}


/* =========================================================
   SILHOUETTE SAVANA INCORPORATA NEL CSS
   NON SERVE footer-savanna.svg
========================================================= */

.footer::before{
  content:'';

  position:absolute;

  z-index:1;

  left:0;
  right:0;

  top:-117px;

  width:100%;
  height:120px;

  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 180' preserveAspectRatio='none'%3E%3Cg fill='%232b1f18'%3E%3Cpath d='M0 118 C70 112 120 122 188 116 C260 109 312 121 384 116 C458 111 516 122 590 116 C664 110 718 121 792 116 C866 111 924 122 998 115 C1072 109 1125 121 1198 116 C1270 111 1332 122 1406 116 C1476 110 1532 120 1600 115 L1600 180 L0 180 Z'/%3E%3Cg transform='translate(90 22)'%3E%3Crect x='65' y='61' width='9' height='48' rx='2'/%3E%3Cellipse cx='69' cy='56' rx='58' ry='14'/%3E%3Cellipse cx='36' cy='61' rx='27' ry='9'/%3E%3Cellipse cx='102' cy='61' rx='27' ry='9'/%3E%3C/g%3E%3Cg transform='translate(395 32)'%3E%3Crect x='50' y='58' width='7' height='38' rx='2'/%3E%3Cellipse cx='54' cy='53' rx='40' ry='11'/%3E%3Cellipse cx='32' cy='57' rx='19' ry='7'/%3E%3Cellipse cx='76' cy='57' rx='19' ry='7'/%3E%3C/g%3E%3Cg transform='translate(610 20)'%3E%3Cpath d='M32 105 L36 74 L39 47 L45 29 L52 20 L61 22 L67 31 L65 42 L71 54 L69 68 L83 72 L86 81 L70 84 L67 104 L59 104 L60 84 L48 84 L47 105 L39 105 L40 84 L31 84 L30 105 Z'/%3E%3Crect x='49' y='10' width='3' height='13' rx='1'/%3E%3Crect x='59' y='11' width='3' height='13' rx='1'/%3E%3C/g%3E%3Cg transform='translate(800 46)'%3E%3Cpath d='M0 55 C0 36 18 24 44 24 H72 C95 24 112 35 116 53 L128 53 C140 53 148 62 148 74 V79 H136 C136 91 129 101 118 105 H108 V78 H95 V108 H84 V78 H59 V108 H48 V78 H29 V108 H18 V82 C7 79 0 70 0 55 Z'/%3E%3Cpath d='M148 59 C165 59 175 70 175 85 C175 102 163 114 147 114 H138 V104 H145 C155 104 163 96 163 86 C163 78 158 72 148 72 Z'/%3E%3Cellipse cx='27' cy='42' rx='17' ry='22'/%3E%3C/g%3E%3Cg transform='translate(1090 46)'%3E%3Cpath d='M0 74 C0 62 12 54 27 54 H45 C58 54 68 61 71 71 L83 71 L83 80 L73 80 L73 101 H64 V80 H48 V101 H39 V80 H22 V101 H13 V80 H0 Z'/%3E%3Cpath d='M59 57 L65 41 L71 44 L68 60 Z'/%3E%3C/g%3E%3Cg transform='translate(1250 20)'%3E%3Crect x='64' y='61' width='9' height='48' rx='2'/%3E%3Cellipse cx='69' cy='56' rx='58' ry='14'/%3E%3Cellipse cx='36' cy='61' rx='27' ry='9'/%3E%3Cellipse cx='102' cy='61' rx='27' ry='9'/%3E%3C/g%3E%3Cg transform='translate(1430 58)'%3E%3Cpath d='M0 60 C0 50 10 43 22 43 H38 C50 43 58 50 60 58 L70 58 L70 66 L62 66 L62 87 H54 V66 H40 V87 H32 V66 H18 V87 H10 V66 H0 Z'/%3E%3Cpath d='M46 45 L52 30 L56 32 L53 47 Z'/%3E%3Cpath d='M50 45 L59 33 L62 36 L55 48 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

  background-repeat:no-repeat;

  background-position:center bottom;

  background-size:100% 100%;

  pointer-events:none;
}


/* Contenuto del footer sopra la silhouette */

.footer .container{
  position:relative;

  z-index:2;
}

.footer-grid{
  display:grid;

  grid-template-columns:1.2fr 1fr 1fr;

  gap:40px;
}

.footer p{
  margin-top:10px;

  color:rgba(255,255,255,.6);

  font-size:13px;
}

.footer h4{
  margin-bottom:14px;

  font-family:Poppins,sans-serif;

  font-size:14px;
}

.footer-links{
  display:grid;

  gap:8px;

  color:rgba(255,255,255,.66);

  font-size:13px;
}

.footer-links a{
  transition:color .25s ease;
}

.footer-links a:hover{
  color:#fff;
}

.footer-bottom{
  margin-top:40px;

  padding-top:18px;

  display:flex;

  justify-content:space-between;

  gap:20px;

  border-top:1px solid rgba(255,255,255,.08);

  color:rgba(255,255,255,.38);

  font-size:10px;
}


/* =========================================================
   WHATSAPP
========================================================= */

.wa{
  position:fixed;

  right:18px;
  bottom:18px;

  z-index:1200;

  width:56px;
  height:56px;

  display:grid;

  place-items:center;

  border-radius:50%;

  background:#25d366;

  color:#fff;

  font-size:23px;

  box-shadow:0 15px 30px rgba(0,0,0,.2);

  transition:.25s;
}

.wa:hover{
  transform:translateY(-4px);
}


/* =========================================================
   ANIMAZIONI
========================================================= */

.reveal{
  transition:
    opacity .75s ease,
    transform .75s ease;
}

.js .reveal{
  opacity:0;

  transform:translateY(24px);
}

.reveal.visible{
  opacity:1;

  transform:none;
}

.delay-1{
  transition-delay:.08s;
}

.delay-2{
  transition-delay:.16s;
}

.delay-3{
  transition-delay:.24s;
}


/* =========================================================
   RESPONSIVE 1050px
========================================================= */

@media(max-width:1050px){

  .nav{
    gap:15px;
  }

  .nav a{
    font-size:11px;
  }

  .plus-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .card-grid,
  .reviews{
    grid-template-columns:repeat(2,1fr);
  }

  .intro-grid,
  .story,
  .contact-grid{
    grid-template-columns:1fr;
  }

  .service-grid,
  .services-grid{
    grid-template-columns:1fr;
  }

  .card-grid.four-cards{
    grid-template-columns:repeat(2,1fr);
  }

  .story-video{
    max-width:380px;
  }

  .media-wrap{
    max-width:760px;

    margin:0 auto;
  }

  .split-feature,
  .split-feature.reverse{
    grid-template-columns:1fr;

    gap:25px;

    padding:35px 0;
  }

  .feature-media,
  .split-feature:not(.reverse) .feature-media,
  .split-feature.reverse .feature-media{
    min-height:auto;

    padding:20px 30px 20px 0;
  }

  .feature-media::before,
  .split-feature:not(.reverse) .feature-media::before,
  .split-feature.reverse .feature-media::before{
    top:0;
    bottom:0;
    left:0;
    right:55px;
  }

  .feature-media img{
    height:auto;

    max-height:none;
  }

  .feature-copy,
  .split-feature.reverse .feature-copy{
    padding:45px 40px 60px;
  }

  .gallery-masonry{
    column-count:3;
  }

}


/* =========================================================
   RESPONSIVE 820px
========================================================= */

@media(max-width:820px){

  .navbar{
    min-height:74px;
  }

  .header{
    background:rgba(255,255,255,.97);
  }

  .header .brand strong{
    color:var(--ink);
  }

  .header .brand span{
    color:#8a908a;
  }

  .header .nav a{
    color:var(--ink-2);
  }

  .menu-toggle{
    display:block;
  }

  .nav{
    position:fixed;

    top:74px;
    left:0;
    right:0;

    padding:13px 20px 24px;

    display:none;

    flex-direction:column;

    align-items:stretch;

    gap:3px;

    background:#fff;

    box-shadow:0 18px 30px rgba(32,39,32,.12);
  }

  .nav.open{
    display:flex;
  }

  .nav a{
    padding:12px 0;
  }

  .nav a::after{
    bottom:5px;
  }

  .nav .nav-cta{
    margin-top:7px;

    text-align:center;
  }

  .hero{
    padding-top:74px;
  }

  .hero-inner{
    padding:80px 0 120px;
  }

  .section{
    padding:82px 0;
  }

  .section-head{
    display:block;
  }

  .section-intro{
    margin-top:13px;
  }

  .facts{
    grid-template-columns:repeat(2,1fr);
  }

  .fact{
    border-right:0;

    border-bottom:1px solid rgba(255,255,255,.1);
  }

  .page-hero{
    padding:145px 0 72px;
  }

  .gallery{
    grid-template-columns:repeat(2,1fr);
  }

  .gallery-item:nth-child(n){
    grid-column:span 1;

    grid-row:span 1;

    min-height:220px;
  }

  .gallery-item:first-child{
    grid-column:span 2;
  }

  .gallery-masonry{
    column-count:2;

    column-gap:12px;
  }

  .gallery-masonry .gallery-item{
    min-height:0;

    margin-bottom:12px;
  }


  /* FOOTER SAVANA TABLET */

  .footer{
    margin-top:96px;

    padding-top:58px;
  }

  .footer::before{
    top:-95px;

    height:98px;
  }

}


/* =========================================================
   RESPONSIVE 600px
========================================================= */

@media(max-width:600px){

  .container{
    width:min(
      var(--container),
      calc(100% - 28px)
    );
  }


  /* TOPBAR */

  .topbar .container{
    flex-direction:column;

    justify-content:center;

    gap:3px;

    padding:8px 0;
  }


  /* LOGO */

  .brand strong{
    font-size:15px;
  }

  .brand span{
    display:none;
  }


  /* HERO */

  .hero{
    min-height:88vh;
  }

  .hero-inner{
    padding:80px 0 100px;
  }

  .hero h1{
    font-size:42px;
  }

  .hero h1 span{
    font-size:.55em;
  }

  .hero p{
    font-size:16px;
  }


  /* GRIGLIE */

  .plus-grid,
  .card-grid,
  .reviews,
  .service-grid,
  .services-grid,
  .form-grid,
  .includes{
    grid-template-columns:1fr;
  }

  .card-grid.four-cards{
    grid-template-columns:1fr;
  }

  .field.full{
    grid-column:auto;
  }


  /* FOTO ABOUT */

  .media-wrap{
    padding:14px 14px 14px 0;
  }

  .media-wrap::before{
    right:42px;

    border-radius:10px;
  }

  .media-wrap img{
    border-radius:10px;
  }

  .floating-note{
    right:10px;
  }


  /* STATISTICHE */

  .facts{
    grid-template-columns:1fr 1fr;
  }

  .fact strong{
    font-size:31px;
  }


  /* VIDEO */

  .story{
    gap:38px;
  }

  .story-video{
    width:100%;

    max-width:330px;
  }


  /* FEATURE */

  .split-feature{
    gap:15px;

    padding:24px 0;
  }

  .split-feature + .split-feature{
    margin-top:18px;
  }

  .feature-media,
  .split-feature:not(.reverse) .feature-media,
  .split-feature.reverse .feature-media{
    min-height:auto;

    padding:14px 20px 14px 0;
  }

  .feature-media::before,
  .split-feature:not(.reverse) .feature-media::before,
  .split-feature.reverse .feature-media::before{
    top:0;
    bottom:0;
    left:0;
    right:38px;

    border-radius:10px;
  }

  .feature-media img{
    width:100%;
    height:auto;

    max-height:none;

    border-radius:10px;
  }

  .feature-copy,
  .split-feature.reverse .feature-copy{
    padding:38px 20px 50px;
  }


  /* GALLERIA PUZZLE */

  .gallery-masonry{
    column-count:2;

    column-gap:8px;
  }

  .gallery-masonry .gallery-item{
    min-height:0;

    margin-bottom:8px;

    border-radius:5px;
  }


  /* FOOTER SAVANA MOBILE */

  .footer{
    margin-top:78px;

    padding-top:48px;
  }

  .footer::before{
    top:-77px;

    height:80px;

    /*
       Su telefono usiamo cover così
       animali e alberi restano visibili.
    */
    background-size:cover;

    background-position:center bottom;
  }

  .footer-grid{
    grid-template-columns:1fr;
  }

  .footer-bottom{
    display:block;
  }

  .footer-bottom span{
    display:block;

    margin-top:6px;
  }

}
.home-agency-btn{
  margin-top:22px;
}

/* =========================================================
   FAQ + SELETTORE LINGUA + SOCIAL FOOTER
========================================================= */

.language-switcher{
  display:flex;
  align-items:center;
  gap:7px;

  margin-left:2px;

  padding:7px 10px;

  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;

  background:rgba(255,255,255,.08);

  color:#fff;

  transition:
    background .25s ease,
    border-color .25s ease,
    color .25s ease;
}

.language-icon{
  flex:0 0 auto;

  font-size:14px;
  line-height:1;
}

.language-select{
  max-width:116px;

  border:0;
  outline:0;

  background:transparent;

  color:inherit;

  font-family:'Open Sans',sans-serif;
  font-size:10px;
  font-weight:700;

  cursor:pointer;
}

.language-select option{
  background:#fff;
  color:var(--ink);
}

.header.scrolled .language-switcher{
  border-color:var(--line);
  background:#fff;
  color:var(--ink-2);
}

.footer-social{
  margin-top:20px;
}

.footer-social-title{
  display:block;

  margin-bottom:10px;

  color:rgba(255,255,255,.72);

  font-size:12px;
  font-weight:600;
}

.footer-social-links{
  display:flex;
  align-items:center;
  gap:9px;
}

.social-link{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;

  background:rgba(255,255,255,.07);

  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease;
}

.social-link img{
  width:16px;
  height:16px;

  object-fit:contain;
}

.social-link:hover{
  transform:translateY(-3px);

  border-color:var(--gold);
  background:var(--gold);
}

.faq-section .container{
  max-width:980px;
}

.faq-list{
  margin-top:0;
}

.faq-list .day-title{
  padding-right:18px;
}

.faq-list .day-content{
  max-width:850px;
}

.faq-actions{
  margin-top:34px;
}

@media(min-width:1051px){

  .nav{
    gap:17px;
  }

  .nav a{
    font-size:11px;
  }

}

@media(max-width:1050px){

  .language-switcher{
    padding:6px 9px;
  }

  .language-select{
    max-width:100px;
    font-size:9px;
  }

}

@media(max-width:820px){

  .language-switcher{
    width:100%;

    margin:8px 0 0;

    padding:11px 13px;

    justify-content:center;

    border-color:var(--line);
    border-radius:12px;

    background:var(--sand-2);

    color:var(--ink-2);
  }

  .language-select{
    width:auto;
    max-width:none;

    font-size:11px;
  }

  .footer-social{
    margin-top:18px;
  }

}
/* =========================================================
   LIGHTBOX GALLERIA
========================================================= */

.gallery-masonry .gallery-item{
  cursor:zoom-in;
}

.gallery-masonry .gallery-item img:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:-3px;
}

body.lightbox-open{
  overflow:hidden;
}


/* =========================================================
   CONTENITORE LIGHTBOX
========================================================= */

.gallery-lightbox{
  position:fixed;
  inset:0;

  z-index:5000;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:24px;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:
    opacity .28s ease,
    visibility .28s ease;
}

.gallery-lightbox.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}


/* =========================================================
   SFONDO
========================================================= */

.gallery-lightbox-backdrop{
  position:absolute;
  inset:0;

  background:rgba(13,16,14,.94);

  backdrop-filter:blur(7px);
}


/* =========================================================
   CONTENUTO
========================================================= */

.gallery-lightbox-dialog{
  position:relative;

  z-index:1;

  width:min(1500px,100%);
  height:min(92vh,980px);

  display:flex;
  align-items:center;
  justify-content:center;

  padding:62px 88px 54px;
}

.gallery-lightbox-figure{
  width:100%;
  height:100%;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  margin:0;
}

.gallery-lightbox-image{
  display:block;

  width:auto;
  max-width:100%;

  height:auto;
  max-height:calc(100% - 34px);

  object-fit:contain;

  border-radius:10px;

  box-shadow:
    0 24px 70px rgba(0,0,0,.42);

  transform:scale(.975);

  transition:
    transform .32s ease;
}

.gallery-lightbox.open .gallery-lightbox-image{
  transform:scale(1);
}


/* =========================================================
   CONTATORE FOTO
========================================================= */

.gallery-lightbox-counter{
  min-height:24px;

  margin-top:14px;

  color:rgba(255,255,255,.72);

  font-size:12px;
  font-weight:600;

  letter-spacing:.12em;
}


/* =========================================================
   PULSANTI
========================================================= */

.gallery-lightbox-close,
.gallery-lightbox-prev,
.gallery-lightbox-next{
  position:absolute;

  z-index:2;

  display:grid;
  place-items:center;

  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;

  background:rgba(255,255,255,.10);

  color:#fff;

  cursor:pointer;

  backdrop-filter:blur(7px);

  transition:
    transform .22s ease,
    background .22s ease,
    border-color .22s ease;
}

.gallery-lightbox-close:hover,
.gallery-lightbox-prev:hover,
.gallery-lightbox-next:hover{
  border-color:rgba(255,255,255,.42);

  background:rgba(255,255,255,.18);
}

.gallery-lightbox-close:focus-visible,
.gallery-lightbox-prev:focus-visible,
.gallery-lightbox-next:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}


/* =========================================================
   CHIUDI
========================================================= */

.gallery-lightbox-close{
  top:8px;
  right:8px;

  width:48px;
  height:48px;

  font-size:30px;
  line-height:1;
}

.gallery-lightbox-close:hover{
  transform:
    rotate(6deg)
    scale(1.04);
}


/* =========================================================
   FRECCE
========================================================= */

.gallery-lightbox-prev,
.gallery-lightbox-next{
  top:50%;

  width:54px;
  height:54px;

  transform:translateY(-50%);

  font-family:Arial,sans-serif;
  font-size:38px;
  line-height:1;
}

.gallery-lightbox-prev{
  left:12px;
}

.gallery-lightbox-next{
  right:12px;
}

.gallery-lightbox-prev:hover,
.gallery-lightbox-next:hover{
  transform:
    translateY(-50%)
    scale(1.05);
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:820px){

  .gallery-lightbox{
    padding:10px;
  }

  .gallery-lightbox-dialog{
    height:94vh;

    padding:
      58px
      54px
      48px;
  }

  .gallery-lightbox-close{
    top:7px;
    right:7px;

    width:44px;
    height:44px;

    font-size:27px;
  }

  .gallery-lightbox-prev,
  .gallery-lightbox-next{
    width:44px;
    height:44px;

    font-size:31px;
  }

  .gallery-lightbox-prev{
    left:2px;
  }

  .gallery-lightbox-next{
    right:2px;
  }

  .gallery-lightbox-image{
    border-radius:7px;
  }

}


/* =========================================================
   SMARTPHONE
========================================================= */

@media(max-width:520px){

  .gallery-lightbox-dialog{
    padding:
      54px
      6px
      58px;
  }

  .gallery-lightbox-prev,
  .gallery-lightbox-next{
    top:auto;
    bottom:5px;

    transform:none;
  }

  .gallery-lightbox-prev{
    left:calc(50% - 54px);
  }

  .gallery-lightbox-next{
    right:calc(50% - 54px);
  }

  .gallery-lightbox-prev:hover,
  .gallery-lightbox-next:hover{
    transform:scale(1.05);
  }

  .gallery-lightbox-counter{
    margin-top:10px;
  }

}
/* =========================================================
   FONT TITOLI - STILE AVVENTURA
========================================================= */

.hero h1,
.hero h1 span,
.page-hero h1,
.section-title,
.feature-copy h2,
.banner-copy h2{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:0;
}


/* Titolo principale home */

.hero h1{
  line-height:1.03;
}


/* Seconda riga titolo home */

.hero h1 span{
  line-height:1.15;
}


/* Titoli pagine interne */

.page-hero h1{
  line-height:1.08;
}


/* Titoli sezioni */

.section-title,
.feature-copy h2,
.banner-copy h2{
  line-height:1.12;
}


/* Menu, pulsanti e testi rimangono puliti */

.nav,
.btn,
.card-body h3,
.contact-card h3,
.footer h4{
  font-family:var(--font-heading);
}
/* =========================================================
   NASCONDI TOPBAR
========================================================= */

.topbar{
  display:none !important;
}
@media(max-width:600px){
  .card-grid.two-cards{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   LOGO UFFICIALE HEADER
========================================================= */

.brand-logo{
  display:flex;
  align-items:center;
  flex-shrink:0;
}

.site-logo{
  display:block;
  width:auto;
  height:72px;
  object-fit:contain;
  filter:drop-shadow(0 5px 14px rgba(0,0,0,.18));
}

@media(max-width:1050px){
  .site-logo{
    height:64px;
  }
}

@media(max-width:820px){
  .site-logo{
    height:58px;
  }
}

@media(max-width:600px){
  .site-logo{
    height:54px;
  }
}


/* =========================================================
   RECENSIONI PUBBLICHE - SUPABASE
========================================================= */

.reviews-live-section{
  position:relative;
}

.review-form-layout{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:34px;
  align-items:start;
}

.review-form-card{
  max-width:none;
}

.review-form{
  display:grid;
  gap:18px;
}

.review-field-label{
  color:var(--ink-2);
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
}

.star-rating-input{
  display:flex;
  align-items:center;
  gap:7px;
  min-height:50px;
}

.star-choice{
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  color:#d8d2c8;
  font-size:37px;
  line-height:1;
  cursor:pointer;
  transition:transform .2s ease,color .2s ease;
}

.star-choice:hover,
.star-choice:focus-visible,
.star-choice.selected{
  color:var(--gold);
}

.star-choice:hover,
.star-choice:focus-visible{
  transform:translateY(-2px) scale(1.06);
}

.star-choice:focus-visible{
  outline:2px solid var(--green);
  outline-offset:4px;
  border-radius:4px;
}

.review-rating-help,
.review-character-count,
.review-publish-note{
  color:var(--muted);
  font-size:11px;
}

.review-character-count{
  margin-top:-2px;
  text-align:right;
}

.review-honeypot{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.review-submit-button{
  width:100%;
  border:0;
  cursor:pointer;
}

.review-submit-button:disabled{
  opacity:.65;
  cursor:wait;
}

.review-submit-status{
  display:none;
  padding:14px 16px;
  border-radius:12px;
  font-size:13px;
  line-height:1.55;
}

.review-submit-status.success,
.review-submit-status.error,
.review-submit-status.sending{
  display:block;
}

.review-submit-status.success{
  border:1px solid rgba(79,109,78,.25);
  background:rgba(79,109,78,.10);
  color:var(--green-dark);
}

.review-submit-status.error{
  border:1px solid rgba(169,108,35,.28);
  background:rgba(200,141,59,.10);
  color:#7b511e;
}

.review-submit-status.sending{
  border:1px solid var(--line);
  background:var(--sand-2);
  color:var(--muted);
}

.review-form-info{
  padding:34px;
  border-radius:20px;
  background:var(--green-dark);
  color:#fff;
  box-shadow:var(--shadow);
}

.review-form-info h3{
  margin-top:9px;
  font-family:var(--font-heading,Poppins,sans-serif);
  font-size:28px;
  line-height:1.2;
}

.review-form-info p{
  margin-top:14px;
  color:rgba(255,255,255,.74);
  line-height:1.75;
}

.review-form-points{
  display:grid;
  gap:10px;
  margin-top:24px;
  color:#f1c982;
  font-size:13px;
  font-weight:600;
}

.reviews-live{
  min-height:0;
}

.reviews-unified .reviews-live{
  display:contents;
}

.review-historical p,
.review-live-card p{
  white-space:pre-wrap;
}

.review-live-card{
  animation:reviewCardIn .35s ease both;
}

@keyframes reviewCardIn{
  from{
    opacity:0;
    transform:translateY(8px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.reviews-load-state{
  margin-top:18px;
  padding:15px 17px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.72);
  color:var(--muted);
  font-size:13px;
}

.reviews-load-state:empty{
  display:none;
}

.reviews-load-state.error{
  border-color:rgba(169,108,35,.25);
  background:rgba(200,141,59,.10);
  color:#7b511e;
}

.reviews-load-state.empty{
  text-align:center;
}

@media(max-width:900px){
  .review-form-layout{
    grid-template-columns:1fr;
  }
}

@media(max-width:600px){
  .star-choice{
    font-size:34px;
  }

  .review-form-info{
    padding:26px;
  }
}

/* =========================================================
   LOGO NEL FOOTER
========================================================= */

.footer .brand{
  display:block;

  width:125px;
  height:125px;

  margin:0 0 20px;

  background-image:url('../images/logo.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

/* Nasconde il vecchio simbolo e la vecchia scritta */
.footer .brand > *{
  display:none !important;
}


/* =========================================================
   LOGO FOOTER - TABLET
========================================================= */

@media(max-width:820px){

  .footer .brand{
    width:115px;
    height:115px;
  }

}


/* =========================================================
   LOGO FOOTER - SMARTPHONE
========================================================= */

@media(max-width:600px){

  .footer .brand{
    width:105px;
    height:105px;

    margin-bottom:18px;
  }

}

/* =========================================================
   CORREZIONE ETICHETTE CARD
   Mantiene i tag dentro le card e impedisce che finiscano
   in alto a sinistra della pagina.
========================================================= */

.card{
  position:relative;
}

.card .tag{
  position:static;
  left:auto;
  top:auto;

  align-self:flex-start;
}


/* =========================================================
   ANTEPRIMA GALLERIA HOME
   Le 6 foto hanno una larghezza simile alle fotografie
   della galleria completa, senza il vecchio effetto gigante.
========================================================= */

.home-gallery-preview{
  width:75%;
  margin:0 auto;

  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;

  align-items:start;
}

.home-gallery-preview .gallery-item{
  min-height:0;

  grid-column:auto !important;
  grid-row:auto !important;

  overflow:hidden;

  border-radius:8px;

  background:#eee;
}

.home-gallery-preview .gallery-item img{
  display:block;

  width:100%;
  height:auto;

  object-fit:initial;

  transition:transform .7s ease;
}

.home-gallery-preview .gallery-item:hover img{
  transform:scale(1.04);
}


/* =========================================================
   ANTEPRIMA GALLERIA HOME - TABLET
========================================================= */

@media(max-width:820px){

  .home-gallery-preview{
    width:100%;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:12px;
  }

}


/* =========================================================
   ANTEPRIMA GALLERIA HOME - SMARTPHONE
========================================================= */

@media(max-width:600px){

  .home-gallery-preview{
    gap:8px;
  }

  .home-gallery-preview .gallery-item{
    border-radius:5px;
  }

}



/* =========================================================
   TESTI EDITORIALI - ESCURSIONI / CHI SIAMO
========================================================= */

.editorial-intro{
  max-width:920px;
  margin:0 auto 54px;
  padding:0 18px;
  text-align:center;
}

.editorial-intro p{
  margin:0;
  color:var(--ink-2);
  font-size:clamp(17px,1.45vw,20px);
  line-height:1.8;
}

.about-commitment{
  margin:28px 0 6px;
  padding:18px 20px;
  border-left:3px solid var(--gold);
  border-radius:0 12px 12px 0;
  background:rgba(200,141,59,.08);
}

.about-commitment p{
  margin:0;
  color:var(--ink-2);
  font-size:15px;
  line-height:1.75;
}

.card-route{
  display:block;
  color:var(--gold-dark);
  font-size:10px;
  font-weight:700;
  line-height:1.45;
  text-transform:uppercase;
  letter-spacing:.10em;
}

@media(max-width:600px){

  .editorial-intro{
    margin-bottom:38px;
    padding:0;
  }

  .editorial-intro p{
    font-size:16px;
    line-height:1.7;
  }

  .about-commitment{
    margin-top:22px;
    padding:16px;
  }

  .about-commitment p{
    font-size:14px;
  }

}