/* ==========================================================
   BASE STYLES (layout, header, hero, experience, why/highlights, travel, footer, motion)
   ========================================================== */
:root{
  --navy:#2B1D4B;
  --pink:#D13F6A;
  --orange:#FF8C42;
  --yellow:#F2C94C;
  --teal:#17B3A3;
  --ivory:#F5F1EE;
  --white:#FFFFFF;
  --text:#2B1D4B;
  --muted:#746C80;
  --line:#E8E2E1;
  --shadow:0 18px 45px rgba(43,29,75,.09);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:#fff;line-height:1.5}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.container{width:min(1160px,calc(100% - 40px));margin:0 auto}

/* 0. HEADER */
.page-top{background:linear-gradient(180deg,#eef4fb 0,#fff 100%);padding:14px 18px 0}
.header-shell{
  width:min(1680px,100%);
  margin:0 auto;
  height:118px;
  background:#fff;
  border-radius:30px 30px 0 0;
  padding:0 52px;
  display:flex;align-items:center;justify-content:space-between;
  box-shadow:0 8px 28px rgba(43,29,75,.04)
}
.brand{width:130px;display:flex;align-items:center}
.brand svg{width:110px;height:88px}
.navlinks{display:flex;align-items:center;gap:48px;font-size:13px;font-weight:900;color:var(--navy)}
.navlinks a{padding:44px 0;position:relative}
.navlinks a.active{color:var(--pink)}
.navlinks a.active::after{content:"";position:absolute;left:0;right:0;bottom:27px;height:2px;background:var(--pink)}
.header-cta{background:var(--navy);color:#fff;border-radius:12px;padding:15px 21px;font-size:12px;font-weight:900}
.menu-btn{display:none;border:0;background:none;font-size:27px;color:var(--navy)}

/* 1. INTRO */
.hero{min-height:570px;position:relative;overflow:hidden;background:
  linear-gradient(90deg,rgba(245,241,238,.98) 0%,rgba(245,241,238,.90) 26%,rgba(245,241,238,.52) 45%,rgba(245,241,238,.10) 66%,rgba(43,29,75,.02) 100%),
  url('../images/hero-bg.jpg') center 50%/cover no-repeat;
}
.hero .container{min-height:570px;display:flex;align-items:center}
.hero-copy{width:55%;padding-left:8px}
.eyebrow{color:var(--pink);font-size:13px;letter-spacing:.14em;font-weight:900;margin-bottom:14px}
.hero h1{margin:0;font-size:92px;line-height:.90;letter-spacing:-.045em;color:var(--navy);font-weight:900}
.hero h1 .napoli{color:var(--pink)}
.hero h1 .year{color:var(--teal)}
.payoff{font-size:20px;font-weight:900;letter-spacing:.14em;margin:22px 0 48px}
.hero-meta{display:flex;flex-wrap:wrap;gap:22px;font-size:14px;font-weight:900;margin-bottom:30px}
.hero-meta div{display:flex;align-items:center;gap:8px}
.hero-actions{display:flex;gap:12px}
.btn{height:50px;padding:0 22px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900}
.btn.primary{background:var(--navy);color:#fff}
.btn.secondary{border:1px solid var(--navy);background:#fff;color:var(--navy)}

/* 2. EXPERIENCE */
.experience{padding:32px 0 46px;background:#fff}
.experience-head{text-align:center;margin-bottom:14px}
.kicker{font-size:12px;letter-spacing:.18em;font-weight:900;color:var(--pink);text-transform:uppercase}
.experience-head h2{margin:6px 0 0;font-size:28px;letter-spacing:.03em;color:var(--navy)}
.timeline{
  position:relative;
  max-width:1100px;
  margin:22px auto 32px;
  display:grid;grid-template-columns:repeat(3,1fr);
}
.timeline::before{
  content:"";position:absolute;left:7%;right:7%;top:22px;height:2px;background:linear-gradient(90deg,var(--pink),var(--teal),var(--orange))
}
.stop{position:relative;text-align:center;z-index:1}
.dot{width:44px;height:44px;border-radius:50%;margin:0 auto 8px;display:grid;place-items:center;color:#fff;font-size:13px;font-weight:900;border:3px solid #fff;box-shadow:0 6px 18px rgba(43,29,75,.13)}
.stop:nth-child(1) .dot{background:var(--pink)} .stop:nth-child(2) .dot{background:var(--teal)} .stop:nth-child(3) .dot{background:var(--orange)}
.stop-date{font-size:10px;font-weight:900;color:var(--muted)} .stop-city{font-size:15px;font-weight:900;margin-top:3px} .stop-type{font-size:10px;font-weight:900;margin-top:2px}
.stop:nth-child(1) .stop-type{color:var(--pink)} .stop:nth-child(2) .stop-type{color:var(--teal)} .stop:nth-child(3) .stop-type{color:var(--orange)}

.experience-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.exp-card{
  min-height:176px;background:#fff;border:1px solid var(--line);border-radius:20px;
  display:grid;grid-template-columns:82px minmax(0,1fr) 135px;gap:16px;align-items:center;padding:22px;
  position:relative;box-shadow:0 10px 25px rgba(43,29,75,.05);overflow:hidden
}
.exp-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px}
.exp-card.caserta::before{background:var(--pink)} .exp-card.napoli::before{background:var(--teal)} .exp-card.amalfi::before{background:var(--orange)}
.exp-icon{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font-size:30px}
.caserta .exp-icon{background:rgba(209,63,106,.12)} .napoli .exp-icon{background:rgba(23,179,163,.12)} .amalfi .exp-icon{background:rgba(255,140,66,.14)}
.exp-main h3{font-size:20px;margin:0 0 7px}
.exp-pill{display:inline-block;font-size:8px;font-weight:900;padding:4px 8px;border-radius:999px;margin-left:8px;vertical-align:middle}
.caserta .exp-pill{background:rgba(209,63,106,.11);color:var(--pink)} .napoli .exp-pill{background:rgba(23,179,163,.11);color:var(--teal)} .amalfi .exp-pill{background:rgba(255,140,66,.12);color:var(--orange)}
.exp-main p{margin:0;font-size:11px;color:var(--muted);line-height:1.55}
.facts{display:grid;gap:10px}
.fact{display:grid;grid-template-columns:24px 1fr;gap:7px;align-items:start}
.fact span:first-child{font-size:17px} .fact b{display:block;font-size:10px} .fact small{display:block;font-size:9px;color:var(--muted)}

/* 3. WHY + HIGHLIGHTS + SIDEBAR */
.story-section{padding:54px 0;background:var(--ivory)}
.story-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.story-top{display:grid;grid-template-columns:190px 1fr;gap:42px;align-items:end;margin-bottom:26px}
.story-top h2{font-size:34px;line-height:.98;margin:5px 0 0;color:var(--navy)}
.story-top p{font-size:13px;color:var(--muted);margin:0 0 8px}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.why-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;min-height:172px;position:relative;overflow:hidden}
.why-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px}
.why-card:nth-child(1)::before{background:var(--pink)} .why-card:nth-child(2)::before{background:var(--teal)} .why-card:nth-child(3)::before{background:var(--yellow)} .why-card:nth-child(4)::before{background:var(--orange)}
.why-icon{width:36px;height:36px;border-radius:11px;background:var(--ivory);display:grid;place-items:center;margin-bottom:13px}
.why-card h3{font-size:14px;margin:0 0 7px} .why-card p{font-size:10px;color:var(--muted);margin:0;line-height:1.55}
.highlights-title{margin:28px 0 18px}
.highlights-title h2{font-size:28px;margin:5px 0 0}
.highlights-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.destination-card{height:270px;border-radius:18px;overflow:hidden;position:relative;background-size:cover;background-position:center;box-shadow:0 14px 32px rgba(43,29,75,.09)}
.destination-card.caserta{background-image:linear-gradient(180deg,transparent 25%,rgba(43,29,75,.88)),url('../images/caserta.webp')}
.destination-card.napoli{background-image:linear-gradient(180deg,transparent 25%,rgba(43,29,75,.88)),url('../images/napoli.jpg')}
.destination-card.amalfi{background-image:linear-gradient(180deg,transparent 25%,rgba(43,29,75,.88)),url('../images/amalfi.webp')}
.dest-copy{position:absolute;left:18px;right:18px;bottom:18px;color:#fff}
.dest-copy .date{display:inline-block;background:#fff;color:var(--pink);padding:5px 9px;border-radius:999px;font-size:8px;font-weight:900;margin-bottom:8px}
.destination-card.napoli .date{color:var(--teal)} .destination-card.amalfi .date{color:var(--orange)}
.dest-copy h3{font-size:22px;margin:0 0 4px} .dest-copy p{font-size:10px;margin:0;color:rgba(255,255,255,.92)}
.sidebar{display:grid;gap:14px;position:sticky;top:20px}
.side-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 12px 30px rgba(43,29,75,.06);position:relative}
.side-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:18px 18px 0 0;background:var(--pink)}
.side-card.eric::before{background:var(--yellow)} .side-card.news::before{background:var(--pink)} .side-card.social::before{background:var(--teal)}
.side-logo{height:58px;display:flex;align-items:center;margin-bottom:10px} .side-logo img{max-height:54px;max-width:100%;object-fit:contain;object-position:left}
.side-card h3{font-size:17px;margin:0 0 8px} .side-card p{font-size:10px;color:var(--muted);margin:0 0 13px}
.side-link{font-size:9px;font-weight:900;color:var(--pink)}
.news{background:linear-gradient(135deg,#4a2d65,#71385e);color:#fff} .news h3,.news p{color:#fff}
.news-form{display:flex;gap:7px} .news-form input{flex:1;min-width:0;height:38px;border:0;border-radius:9px;padding:0 10px} .news-form button{width:38px;border:0;border-radius:9px;background:var(--pink);color:#fff;font-weight:900}
.social-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.social-box{border:1px solid var(--line);border-radius:11px;padding:8px 4px;text-align:center;font-size:7px;font-weight:900}
.social-icon{width:32px;height:32px;border-radius:50%;margin:0 auto 6px;display:grid;place-items:center;color:#fff;font-weight:900}
.ig{background:linear-gradient(135deg,var(--yellow),var(--pink),var(--navy))} .wa{background:var(--teal)} .fb{background:var(--navy)}

/* 4. HOW TO REACH US */
.travel-section{padding:68px 0 72px;background:#fff}
.travel-head{display:grid;grid-template-columns:1fr 300px;gap:30px;align-items:center;margin-bottom:30px}
.travel-head h2{font-size:44px;line-height:1.05;margin:6px 0 10px;letter-spacing:-.03em} .travel-head h2 span{font-weight:400}
.travel-head p{font-size:13px;color:var(--muted);max-width:730px}
.travel-art{width:100%;max-width:300px;justify-self:end}
.travel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.travel-card{border:1px solid var(--line);border-radius:22px;padding:22px;background:#fff;position:relative;box-shadow:var(--shadow);overflow:hidden}
.travel-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px}
.travel-card.caserta::before{background:var(--pink)} .travel-card.napoli::before{background:var(--teal)} .travel-card.amalfi::before{background:var(--orange)}
.travel-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.travel-label{display:inline-block;padding:6px 10px;border-radius:999px;font-size:9px;font-weight:900;margin-bottom:7px}
.travel-card.caserta .travel-label{background:rgba(209,63,106,.12);color:var(--pink)} .travel-card.napoli .travel-label{background:rgba(23,179,163,.12);color:var(--teal)} .travel-card.amalfi .travel-label{background:rgba(255,140,66,.12);color:var(--orange)}
.travel-card h3{font-size:27px;margin:0} .travel-card .sub{font-size:10px;color:var(--muted);font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-top:4px}
.travel-icon{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:28px}
.travel-card.caserta .travel-icon{background:rgba(209,63,106,.10)} .travel-card.napoli .travel-icon{background:rgba(23,179,163,.10)} .travel-card.amalfi .travel-icon{background:rgba(255,140,66,.12)}
.best{margin:18px 0 16px;padding:10px 12px;border-radius:10px;font-size:11px;display:flex;gap:8px;align-items:center}
.travel-card.caserta .best{background:rgba(209,63,106,.09)} .travel-card.napoli .best{background:rgba(23,179,163,.09)} .travel-card.amalfi .best{background:rgba(255,140,66,.10)}
.smallcap{font-size:9px;font-weight:900;letter-spacing:.08em;color:var(--muted)} .airport-main{font-size:12px;margin:6px 0 17px}
.steps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:7px;align-items:start;margin-bottom:18px}
.step{text-align:center} .bubble{width:42px;height:42px;border-radius:50%;margin:0 auto 6px;display:grid;place-items:center;color:#fff}
.caserta .bubble{background:var(--pink)} .napoli .bubble{background:var(--teal)} .amalfi .bubble{background:var(--orange)}
.step span{font-size:9px} .arrow{padding-top:8px;font-size:20px;font-weight:900}
.caserta .arrow{color:var(--pink)} .napoli .arrow{color:var(--teal)} .amalfi .arrow{color:var(--orange)}
.alt{border-top:1px solid var(--line);padding-top:12px} .alt ul{list-style:none;margin:7px 0 0;padding:0;display:grid;gap:4px} .alt li{font-size:9px;color:var(--muted)} .alt li::before{content:"✈";margin-right:7px;color:var(--navy)}
details{margin-top:15px} summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;border:1px solid currentColor;border-radius:9px;padding:7px 10px;font-size:9px;font-weight:900}
summary::-webkit-details-marker{display:none} summary::before{content:"⌄"}
.caserta summary{color:var(--pink)} .napoli summary{color:var(--teal)} .amalfi summary{color:var(--orange)}
.detail-box{background:var(--ivory);border-radius:10px;padding:10px;margin-top:9px} .detail-box p{font-size:9px;color:var(--muted);margin:0 0 6px} .detail-box p:last-child{margin:0}

footer{background:var(--navy);color:#fff;padding:24px 0;text-align:center;font-size:11px}

.reveal{opacity:0;transform:translateY(16px);transition:.65s ease} .reveal.visible{opacity:1;transform:none}

@media(max-width:1050px){
  .navlinks{display:none} .menu-btn{display:block} .header-cta{display:none}
  .hero-copy{width:70%} .hero h1{font-size:72px}
  .experience-cards,.travel-grid{grid-template-columns:1fr}
  .story-layout{grid-template-columns:1fr} .sidebar{position:static;grid-template-columns:repeat(2,1fr)}
  .travel-head{grid-template-columns:1fr} .travel-art{justify-self:start}
}
@media(max-width:700px){
  .page-top{padding:8px 8px 0} .header-shell{height:76px;padding:0 18px;border-radius:18px 18px 0 0} .brand svg{width:78px}
  .hero{min-height:520px;background-position:62% center} .hero .container{min-height:520px}
  .hero-copy{width:100%} .hero h1{font-size:54px} .payoff{font-size:14px}
  .timeline{grid-template-columns:1fr;gap:16px} .timeline::before{display:none}
  .story-top{grid-template-columns:1fr;gap:12px} .why-grid,.highlights-grid,.sidebar{grid-template-columns:1fr}
  .travel-head h2{font-size:34px}
}

/* ---------------- MOTION / DETAILS ---------------- */
.hero-copy{
  animation:heroCopyIn .9s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes heroCopyIn{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:none}
}
.hero{
  animation:heroFade 1.1s ease both;
}
@keyframes heroFade{
  from{filter:saturate(.75) brightness(.96)}
  to{filter:none}
}

.exp-card,.why-card,.destination-card,.side-card,.travel-card{
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.exp-card:hover,.why-card:hover,.side-card:hover,.travel-card:hover{
  transform:translateY(-5px);
  box-shadow:0 20px 44px rgba(43,29,75,.12);
}
.destination-card:hover{
  transform:translateY(-5px) scale(1.012);
  box-shadow:0 24px 50px rgba(43,29,75,.16);
}
.destination-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.14) 44%,transparent 66%);
  transform:translateX(-120%);
  transition:transform .85s ease;
}
.destination-card:hover::after{
  transform:translateX(120%);
}

.stop .dot{
  animation:pulseDot 2.8s ease-in-out infinite;
}
.stop:nth-child(2) .dot{animation-delay:.4s}
.stop:nth-child(3) .dot{animation-delay:.8s}
@keyframes pulseDot{
  0%,100%{transform:scale(1);box-shadow:0 6px 18px rgba(43,29,75,.13)}
  50%{transform:scale(1.08);box-shadow:0 8px 26px rgba(43,29,75,.22)}
}

.travel-card .bubble{
  transition:transform .22s ease;
}
.travel-card:hover .bubble{
  transform:scale(1.08);
}

/* route animation: incoming plane, then 7 branches */
.route-animation .fan-line{
  stroke-width:3.4;
  stroke-dasharray:240;
  stroke-dashoffset:240;
  animation:fanDraw 3.3s ease-in-out infinite;
}
.route-animation .l1{animation-delay:1.15s}
.route-animation .l2{animation-delay:1.28s}
.route-animation .l3{animation-delay:1.41s}
.route-animation .l4{animation-delay:1.54s}
.route-animation .l5{animation-delay:1.67s}
.route-animation .l6{animation-delay:1.80s}
.route-animation .l7{animation-delay:1.93s}
@keyframes fanDraw{
  0%,34%{stroke-dashoffset:240;opacity:0}
  52%,78%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:-240;opacity:0}
}

.route-animation .fan-dot{
  opacity:0;
  animation:dotPop 3.3s ease-in-out infinite;
}
.route-animation .d1{animation-delay:1.42s}
.route-animation .d2{animation-delay:1.55s}
.route-animation .d3{animation-delay:1.68s}
.route-animation .d4{animation-delay:1.81s}
.route-animation .d5{animation-delay:1.94s}
.route-animation .d6{animation-delay:2.07s}
.route-animation .d7{animation-delay:2.20s}
@keyframes dotPop{
  0%,48%{opacity:0;transform:scale(.3)}
  58%,78%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(.6)}
}
.route-animation .hub-dot{
  animation:hubPulse 1.2s ease-in-out infinite;
}
@keyframes hubPulse{
  0%,100%{r:5}
  50%{r:7}
}

/* subtle reveal stagger */
.reveal.visible .why-card:nth-child(1),
.reveal.visible .destination-card:nth-child(1),
.reveal.visible .travel-card:nth-child(1){animation:staggerUp .55s ease both}
.reveal.visible .why-card:nth-child(2),
.reveal.visible .destination-card:nth-child(2),
.reveal.visible .travel-card:nth-child(2){animation:staggerUp .55s ease .10s both}
.reveal.visible .why-card:nth-child(3),
.reveal.visible .destination-card:nth-child(3),
.reveal.visible .travel-card:nth-child(3){animation:staggerUp .55s ease .20s both}
.reveal.visible .why-card:nth-child(4){animation:staggerUp .55s ease .30s both}
@keyframes staggerUp{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}

/* ---------------- FOOTER ---------------- */
.site-footer{
  background:
    radial-gradient(circle at 88% 15%,rgba(23,179,163,.12),transparent 22%),
    radial-gradient(circle at 10% 90%,rgba(209,63,106,.13),transparent 24%),
    var(--navy);
  color:#fff;
  padding:46px 0 22px;
}
.footer-main{
  display:grid;
  grid-template-columns:1.55fr repeat(3,1fr) .8fr;
  gap:30px;
  align-items:start;
}
.footer-logo-lockup{
  display:flex;
  align-items:center;
  gap:13px;
}
.footer-logo-lockup svg{
  width:72px;
  height:60px;
  flex:0 0 auto;
}
.footer-logo-lockup strong{
  display:block;
  font-size:17px;
  letter-spacing:.05em;
}
.footer-logo-lockup span{
  display:block;
  margin-top:3px;
  font-size:9px;
  letter-spacing:.08em;
  color:rgba(255,255,255,.72);
}
.footer-brand p{
  margin:15px 0 0;
  font-size:11px;
  color:rgba(255,255,255,.68);
}
.footer-col{
  display:grid;
  gap:8px;
}
.footer-col h4,.footer-social h4{
  margin:0 0 5px;
  font-size:10px;
  letter-spacing:.11em;
}
.footer-col a{
  font-size:10px;
  color:rgba(255,255,255,.72);
  transition:.2s ease;
}
.footer-col a:hover{
  color:#fff;
  transform:translateX(3px);
}
.footer-social-row{
  display:flex;
  gap:8px;
}
.footer-social-row a{
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  display:grid;
  place-items:center;
  color:#fff;
  transition:.2s ease;
}
.footer-social-row a:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.09);
}
.footer-bottom{
  margin-top:28px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:9px;
  color:rgba(255,255,255,.52);
}

@media(max-width:1050px){
  .footer-main{grid-template-columns:1fr 1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
@media(max-width:700px){
  .footer-main{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .footer-bottom{flex-direction:column}
}
@media(max-width:480px){
  .footer-main{grid-template-columns:1fr}
  .footer-brand{grid-column:auto}
}


/* ==========================================================
   v15 - adjustments
   ========================================================== */
/* Keep the header visible while scrolling */
.page-top{
  position:sticky;
  top:0;
  z-index:1000;
  padding-top:8px;
  background:linear-gradient(180deg,rgba(238,244,251,.98) 0%,rgba(255,255,255,.96) 100%);
  backdrop-filter:blur(12px);
}
.header-shell{
  box-shadow:0 10px 28px rgba(43,29,75,.08);
}

/* Typography: Nunito for headings/UI, Roboto for body copy */
body{
  font-family:Roboto,Arial,sans-serif !important;
}
h1,h2,h3,h4,
.kicker,.eyebrow,.payoff,
.navlinks,.header-cta,.btn,
.stop-city,.stop-type,.stop-date,
.exp-pill,.travel-label,.smallcap,
.side-link,.social-box,
summary,.footer-col h4,.footer-social h4,
.footer-logo-lockup strong{
  font-family:Nunito,Arial,sans-serif !important;
}
p,li,input,button,small,span,a{
  font-family:Roboto,Arial,sans-serif;
}

/* Keep Amalfi best-option line on one row */
.travel-card.amalfi .best{
  white-space:nowrap;
  font-size:10px;
  letter-spacing:-.01em;
  gap:6px;
}
.travel-card.amalfi .best strong{
  white-space:nowrap;
}
@media(max-width:1050px){
  .travel-card.amalfi .best{
    white-space:normal;
    font-size:11px;
  }
  .travel-card.amalfi .best strong{
    white-space:normal;
  }
}

/* ==========================================================
   v16 - visual refinement
   ========================================================== */
/* Typography pairing:
   Montserrat = display / headings / navigation
   Manrope = body / descriptions / UI copy */
body{
  font-family:"Manrope",Arial,sans-serif !important;
}
h1,h2,h3,h4,
.kicker,.eyebrow,.payoff,
.navlinks,.header-cta,.btn,
.stop-city,.stop-type,.stop-date,
.exp-pill,.travel-label,.smallcap,
.side-link,.social-box,
summary,.footer-col h4,.footer-social h4,
.footer-logo-lockup strong{
  font-family:"Montserrat",Arial,sans-serif !important;
}
p,li,input,button,small,span,a{
  font-family:"Manrope",Arial,sans-serif !important;
}

/* Keep hero/header proportions as they are.
   Widen the content below the hero by roughly 10%. */
/* NOTA TEMA: nell'HTML originale non esisteva un elemento <main>, quindi i
   selettori "main > ..." di questa regola non si attivavano mai (codice morto).
   Il tema WordPress introduce <main> per accessibilità e struttura corretta:
   se li lasciassimo attivi, il contenuto risulterebbe più largo dell'originale.
   Sono stati quindi rimossi da qui, lasciando attiva solo la parte che nel
   design originale era realmente in uso (.site-footer > .container). */
.site-footer > .container{
  width:min(92%, 1375px) !important;
  max-width:1375px !important;
}

/* Slightly open up the central layouts so the page feels less compressed. */
.experience-grid,
.why-layout,
.travel-grid{
  column-gap:22px !important;
}
.destination-card,
.travel-card,
.side-card,
.why-card{
  border-radius:20px;
}

/* Preserve Amalfi recommendation on one line on normal desktop widths. */
@media(min-width:1051px){
  .travel-card.amalfi .best{
    white-space:nowrap !important;
    font-size:10px !important;
  }
}

/* Do not force the wider desktop geometry onto mobile/tablet. */
/* NOTA TEMA: vedi sopra — selettori "main > ..." rimossi perché nell'originale
   non erano attivi (non esisteva <main>). */
@media(max-width:1050px){
  .site-footer > .container{
    width:min(92%, 100%) !important;
  }
}

/* ==========================================================
   v17 - official brand colors & logo
   ========================================================== */
:root{
  --navy:#231D41;
  --pink:#CE376E;
  --orange:#F6AD41;
  --yellow:#F2C94C;
  --teal:#1494B9;
  --blue:#1896BB;
  --sky:#70B2E0;
  --ivory:#F7F4F1;
  --white:#FFFFFF;
  --text:#231D41;
  --muted:#6E6A7B;
  --line:#E8E2E1;
}

/* Typography aligned to the official logo */
body,
p,li,input,button,small,span,a{
  font-family:"DM Sans",Arial,sans-serif !important;
}
h1,h2,h3,h4,
.kicker,.eyebrow,.payoff,
.navlinks,.header-cta,.btn,
.stop-city,.stop-type,.stop-date,
.exp-pill,.travel-label,.smallcap,
.side-link,.social-box,summary,
.footer-col h4,.footer-social h4{
  font-family:"Montserrat",Arial,sans-serif !important;
}

/* Official logo in header */
.official-brand{
  width:205px !important;
  min-width:205px !important;
  display:flex !important;
  align-items:center !important;
}
.official-brand img{
  width:190px !important;
  max-height:78px !important;
  object-fit:contain !important;
  object-position:left center !important;
}
.header-shell{
  padding-left:38px !important;
}

/* Hero colors mirror the official mark */
.hero h1{
  color:var(--navy) !important;
}
.hero h1 .napoli{
  color:var(--pink) !important;
}
.hero h1 .year{
  color:var(--sky) !important;
}
.eyebrow,.kicker{
  color:var(--pink) !important;
}
.header-cta,.btn.primary{
  background:var(--navy) !important;
}
.btn.secondary{
  border-color:var(--navy) !important;
  color:var(--navy) !important;
}

/* Re-map accent colors across the page */
.stop:nth-child(1) .dot,
.caserta .bubble,
.caserta .step-circle{
  background:var(--pink) !important;
}
.stop:nth-child(2) .dot,
.napoli .bubble,
.napoli .step-circle{
  background:var(--teal) !important;
}
.stop:nth-child(3) .dot,
.amalfi .bubble,
.amalfi .step-circle{
  background:var(--orange) !important;
}
.timeline::before{
  background:linear-gradient(90deg,var(--pink),var(--teal),var(--orange)) !important;
}
.exp-card.caserta::before,.travel-card.caserta::before{background:var(--pink)!important}
.exp-card.napoli::before,.travel-card.napoli::before{background:var(--teal)!important}
.exp-card.amalfi::before,.travel-card.amalfi::before{background:var(--orange)!important}

/* Socials/side cards */
.ig{background:linear-gradient(135deg,var(--orange),var(--pink),var(--navy)) !important}
.wa{background:var(--teal)!important}
.fb{background:var(--navy)!important}

/* Official footer logo */
.official-footer-logo{
  display:block !important;
  margin-bottom:14px;
}
.official-footer-logo img{
  width:145px;
  max-height:180px;
  object-fit:contain;
  object-position:left top;
}
.footer-brand{
  align-self:start;
}

/* A little more breathing room around the larger official logo */
@media(min-width:1051px){
  .navlinks{
    gap:38px !important;
  }
}
@media(max-width:700px){
  .official-brand{
    width:145px !important;
    min-width:145px !important;
  }
  .official-brand img{
    width:138px !important;
  }
}

/* ==========================================================
   v18 - readable type
   ========================================================== */
/* Readability pass: larger typography throughout without changing layout */
body{
  font-size:17px !important;
  line-height:1.58 !important;
}

/* Navigation */
.navlinks a{font-size:13px !important;}
.header-cta{font-size:12px !important;}

/* Hero */
.hero .eyebrow{font-size:14px !important;}
.hero h1{font-size:clamp(64px,6vw,94px) !important; line-height:.94 !important;}
.hero .payoff{font-size:20px !important; letter-spacing:.13em !important;}
.hero-meta{font-size:15px !important;}
.btn{font-size:13px !important;}

/* Section typography */
.kicker,.eyebrow,.smallcap{font-size:13px !important;}
section h2{font-size:clamp(36px,3.1vw,50px) !important; line-height:1.05 !important;}
section h3{font-size:24px !important; line-height:1.15 !important;}
section p{font-size:16px !important; line-height:1.55 !important;}

/* Timeline */
.stop-date{font-size:12px !important;}
.stop-city{font-size:17px !important;}
.stop-type{font-size:12px !important;}

/* Experience / destination cards */
.exp-card h3,.destination-card h3{font-size:23px !important;}
.exp-card p,.destination-card p{font-size:15px !important;}
.exp-pill{font-size:11px !important;}
.mini-feature strong{font-size:14px !important;}
.mini-feature span{font-size:12px !important;}

/* Why EUCO */
.why-card h3{font-size:17px !important;}
.why-card p{font-size:14px !important; line-height:1.5 !important;}

/* Side cards */
.side-card h3{font-size:19px !important;}
.side-card p{font-size:14px !important;}
.side-link{font-size:12px !important;}
.newsletter input{font-size:14px !important;}

/* Travel */
.travel-card h3{font-size:27px !important;}
.travel-card .subtitle{font-size:13px !important;}
.travel-card .best{font-size:13px !important;}
.travel-label{font-size:12px !important;}
.travel-card strong{font-size:15px !important;}
.travel-card p,.travel-card li,.travel-card span{font-size:14px !important;}
.travel-card summary{font-size:13px !important;}

/* Footer */
.footer-col h4,.footer-social h4{font-size:12px !important;}
.footer-col a{font-size:12px !important;}
.footer-brand p{font-size:12px !important;}
.footer-bottom{font-size:11px !important;}

/* Preserve desktop Amalfi best-option single line */
@media(min-width:1051px){
  .travel-card.amalfi .best{
    font-size:12px !important;
    white-space:nowrap !important;
  }
}

/* Mobile remains readable without oversized headings */
@media(max-width:700px){
  body{font-size:16px !important;}
  .hero h1{font-size:clamp(46px,14vw,66px) !important;}
  .hero .payoff{font-size:15px !important;}
  section h2{font-size:34px !important;}
  section p{font-size:15px !important;}
}

/* ==========================================================
   v19 - wide experience
   ========================================================== */
/* Expand the content area below the hero toward the screen edges,
   matching the red limits indicated in the reference screenshot. */
/* NOTA TEMA: selettori "main > ..." rimossi anche qui — nell'HTML originale
   non esisteva <main>, quindi questa larghezza non veniva mai applicata al
   contenuto. Le altre regole del blocco erano attive e restano invariate. */
@media (min-width:1051px){
  /* Give the 3 EUCO destination cards the extra width instead of
     leaving unused white space around the section. */
  .experience-cards{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:26px !important;
  }

  .experience{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* Keep the footer slightly contained for visual balance. */
  .site-footer > .container{
    width:calc(100% - 90px) !important;
    max-width:1760px !important;
  }
}

@media (min-width:1600px){
  .experience-cards{gap:30px !important;}
}

/* ==========================================================
   v20 - container width fix
   ========================================================== */
/* Real container widening: use almost the full viewport width */
.container{
  width:calc(100% - 70px) !important;
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Keep header slightly inset, as in the approved reference */
.header-shell{
  width:calc(100% - 36px) !important;
  max-width:none !important;
}

/* Hero remains full-width visually, but its text stays aligned to the global wider container */
.hero .container{
  width:calc(100% - 70px) !important;
  max-width:none !important;
}

/* Experience cards now expand with the container */
.experience-cards{
  width:100% !important;
  max-width:none !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:28px !important;
}

/* Timeline follows the widened content too */
.timeline{
  width:100% !important;
  max-width:none !important;
  padding:0 7% !important;
}

/* Story and travel sections use the same full-width container */
.story-layout,
.travel-grid,
.travel-head{
  width:100% !important;
  max-width:none !important;
}

/* Footer aligned with the same container */
.site-footer .container{
  width:calc(100% - 70px) !important;
  max-width:none !important;
}

@media(max-width:1050px){
  .container,
  .hero .container,
  .site-footer .container{
    width:calc(100% - 36px) !important;
  }
}
@media(max-width:700px){
  .container,
  .hero .container,
  .site-footer .container{
    width:calc(100% - 22px) !important;
  }
}

/* ==========================================================
   v21 - balanced width & type
   ========================================================== */
/* Slightly reduce the very wide desktop container */
@media (min-width:1051px){
  .container,
  .hero .container,
  .site-footer .container{
    width:calc(100% - 150px) !important; /* 75px per side */
    max-width:1780px !important;
  }

  .header-shell{
    width:calc(100% - 70px) !important;
    max-width:1840px !important;
  }
}

/* Stronger readability across the whole page */
body{
  font-size:18px !important;
  line-height:1.62 !important;
}

.navlinks a{font-size:14px !important;}
.header-cta{font-size:13px !important;}

.hero .eyebrow{font-size:15px !important;}
.hero .payoff{font-size:22px !important;}
.hero-meta{font-size:17px !important;}
.btn{font-size:14px !important;}

.kicker,.eyebrow,.smallcap{font-size:14px !important;}
section h2{
  font-size:clamp(40px,3.35vw,56px) !important;
  line-height:1.04 !important;
}
section h3{
  font-size:26px !important;
  line-height:1.14 !important;
}
section p{
  font-size:17px !important;
  line-height:1.6 !important;
}

/* Journey timeline */
.stop-date{font-size:13px !important;}
.stop-city{font-size:19px !important;}
.stop-type{font-size:13px !important;}

/* Main destination cards */
.exp-card h3,.destination-card h3{font-size:26px !important;}
.exp-card p,.destination-card p{font-size:17px !important; line-height:1.55 !important;}
.exp-pill{font-size:12px !important;}
.mini-feature strong{font-size:15px !important;}
.mini-feature span{font-size:13px !important;}

/* Story / highlights */
.why-card h3{font-size:19px !important;}
.why-card p{font-size:16px !important;}

/* District / ERIC / side content */
.side-card h3{font-size:21px !important;}
.side-card p{font-size:16px !important;}
.side-link{font-size:13px !important;}
.newsletter input{font-size:16px !important;}

/* Travel section */
.travel-card h3{font-size:30px !important;}
.travel-card .subtitle{font-size:14px !important;}
.travel-card .best{font-size:14px !important;}
.travel-label{font-size:13px !important;}
.travel-card strong{font-size:16px !important;}
.travel-card p,
.travel-card li,
.travel-card span{font-size:15px !important;}
.travel-card summary{font-size:14px !important;}

/* Footer */
.footer-col h4,.footer-social h4{font-size:14px !important;}
.footer-col a{font-size:14px !important;}
.footer-brand p{font-size:14px !important;}
.footer-bottom{font-size:13px !important;}

/* Keep Amalfi recommendation on one line on normal desktop widths */
@media(min-width:1250px){
  .travel-card.amalfi .best{
    white-space:nowrap !important;
    font-size:13px !important;
  }
}

@media(max-width:1050px){
  body{font-size:17px !important;}
}

/* ==========================================================
   v22 - container/font/social fix
   ========================================================== */
/* Reduce the desktop container again for a more controlled composition */
@media(min-width:1051px){
  .container,
  .hero .container,
  .site-footer .container{
    width:calc(100% - 220px) !important; /* 110px per side */
    max-width:1680px !important;
  }
  .header-shell{
    width:calc(100% - 100px) !important;
    max-width:1820px !important;
  }
}

/* Fix the genuinely small typography inside the info/fact columns */
.fact b,
.facts b,
.mini-feature strong{
  font-size:15px !important;
  line-height:1.25 !important;
}
.fact small,
.facts small,
.mini-feature span{
  font-size:13px !important;
  line-height:1.35 !important;
}
.fact span:first-child{
  font-size:19px !important;
}

/* Side cards / lower text were still too small */
.side-card p{
  font-size:15px !important;
  line-height:1.52 !important;
}
.side-link{
  font-size:13px !important;
}
.social-box{
  font-size:11px !important;
  letter-spacing:.02em;
}

/* Travel alternatives/details */
.alt li,
.detail-box p{
  font-size:13px !important;
  line-height:1.45 !important;
}
.smallcap{
  font-size:12px !important;
}
.airport-main{
  font-size:15px !important;
}
.step span{
  font-size:13px !important;
}

/* Social icons: correct proportions and consistent presentation */
.social-icon{
  width:40px !important;
  height:40px !important;
  border-radius:12px !important;
  color:#fff !important;
}
.social-icon svg{
  display:block;
}
.social-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:76px;
}

/* Footer social icons */
.footer-social-row a svg{
  display:block;
}

/* Keep Amalfi information column readable */
.exp-card.amalfi .facts{
  min-width:145px;
}

/* ==========================================================
   v23 - lower container layout fix
   ========================================================== */
/* Reduce ONLY the content below the hero by about 10%.
   Header + hero keep their current width. */
@media(min-width:1051px){
  .experience > .container,
  .story-section > .container,
  .travel-section > .container,
  .site-footer > .container{
    width:90% !important;
    max-width:1510px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

/* Fix the WHY EUCO composition: no text collisions, cleaner hierarchy */
.story-top{
  display:grid !important;
  grid-template-columns:260px minmax(0,1fr) !important;
  column-gap:48px !important;
  align-items:center !important;
  margin-bottom:30px !important;
}
.story-top > div:first-child{
  min-width:0;
}
.story-top h2{
  margin:6px 0 0 !important;
  font-size:clamp(38px,3.2vw,54px) !important;
  line-height:.98 !important;
  letter-spacing:-.03em !important;
  max-width:240px !important;
}
.story-top > p{
  margin:0 !important;
  padding:0 !important;
  align-self:center !important;
  max-width:900px !important;
  font-size:16px !important;
  line-height:1.6 !important;
}

/* Keep the four benefit cards aligned and readable */
.why-grid{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:14px !important;
}
.why-card{
  min-height:190px !important;
  padding:18px !important;
}
.why-card h3{
  font-size:18px !important;
  line-height:1.25 !important;
}
.why-card p{
  font-size:15px !important;
  line-height:1.52 !important;
}

/* Sidebar proportions remain balanced after the container reduction */
.story-layout{
  grid-template-columns:minmax(0,1fr) 320px !important;
  gap:28px !important;
}
.side-card{
  padding:20px !important;
}
.side-card h3{
  font-size:20px !important;
}
.side-card p{
  font-size:15px !important;
  line-height:1.5 !important;
}

/* Tablet: stack the intro copy before it can become cramped */
@media(max-width:1250px){
  .story-top{
    grid-template-columns:1fr !important;
    row-gap:16px !important;
    align-items:start !important;
  }
  .story-top h2{
    max-width:none !important;
  }
  .story-top > p{
    max-width:900px !important;
  }
}

@media(max-width:1050px){
  .experience > .container,
  .story-section > .container,
  .travel-section > .container,
  .site-footer > .container{
    width:calc(100% - 36px) !important;
    max-width:none !important;
  }
}

/* ==========================================================
   v24 - fonts & compact why section
   ========================================================== */
/* Requested typography */
body,
p, li, input, textarea, select,
.travel-card p, .travel-card li,
.side-card p, .why-card p{
  font-family:"Inter", Arial, sans-serif !important;
}

h1,h2,h3,h4,h5,h6,
.navlinks,.header-cta,.btn,
.kicker,.eyebrow,.payoff,.smallcap,
.stop-date,.stop-city,.stop-type,
.exp-pill,.travel-label,.side-link,
.footer-col h4,.footer-social h4{
  font-family:"Arial Nova", Arial, sans-serif !important;
}

/* Compact WHY EUCO section: reduce empty space and make it more editorial */
.story-top{
  display:grid !important;
  grid-template-columns:300px minmax(0,1fr) !important;
  gap:34px !important;
  align-items:end !important;
  margin-bottom:20px !important;
}

.story-top h2{
  max-width:290px !important;
  margin:5px 0 0 !important;
  font-size:48px !important;
  line-height:.96 !important;
}

.story-top > p{
  max-width:none !important;
  margin:0 0 4px !important;
  font-size:16px !important;
  line-height:1.55 !important;
}

/* Bring the benefit cards closer to the intro */
.why-grid{
  gap:12px !important;
  margin-top:0 !important;
}

.why-card{
  min-height:155px !important;
  padding:16px 17px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
}

.why-card .icon,
.why-card .why-icon{
  margin-bottom:10px !important;
}

.why-card h3{
  margin:0 0 7px !important;
  font-size:18px !important;
  line-height:1.15 !important;
}

.why-card p{
  margin:0 !important;
  font-size:14px !important;
  line-height:1.45 !important;
}

/* Tighten the whole left content block and highlights transition */
.story-main,
.story-content{
  min-width:0 !important;
}

.highlights,
.event-highlights{
  margin-top:24px !important;
}

/* Side cards: reduce vertical dead space */
.side-stack{
  gap:14px !important;
}

.side-card{
  padding:18px !important;
}

.side-card p{
  margin-bottom:12px !important;
}

/* Keep responsive behavior clean */
@media(max-width:1250px){
  .story-top{
    grid-template-columns:1fr !important;
    gap:12px !important;
    align-items:start !important;
  }
  .story-top h2{
    max-width:none !important;
  }
}

@media(max-width:700px){
  .story-top h2{
    font-size:40px !important;
  }
}

/* ==========================================================
   v25 - unify typography on Inter
   ========================================================== */
/* Use Inter everywhere */
html, body,
h1,h2,h3,h4,h5,h6,
p,span,a,li,small,strong,b,
button,input,textarea,select,
.navlinks,.header-cta,.btn,
.kicker,.eyebrow,.payoff,.smallcap,
.stop-date,.stop-city,.stop-type,
.exp-pill,.travel-label,.side-link,
.footer-col h4,.footer-social h4,
.travel-card,.side-card,.why-card,
.destination-card,.exp-card{
  font-family:"Inter", Arial, sans-serif !important;
}

/* ==========================================================
   v26 - footer fix
   ========================================================== */
/* Footer: turn the official logo artwork white without altering the header logo */
.official-footer-logo img{
  filter: brightness(0) invert(1) !important;
  opacity:1 !important;
}

/* Footer columns: everything aligned consistently to the left */
.site-footer,
.site-footer .container,
.footer-grid,
.footer-brand,
.footer-col,
.footer-social{
  text-align:left !important;
}

.footer-grid{
  align-items:start !important;
}

.footer-col,
.footer-social{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
}

.footer-col h4,
.footer-social h4{
  width:100% !important;
  text-align:left !important;
  margin-left:0 !important;
}

.footer-col a{
  display:block !important;
  width:auto !important;
  text-align:left !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

.footer-social-row{
  justify-content:flex-start !important;
  margin-left:0 !important;
}

.footer-bottom{
  text-align:left !important;
  justify-content:flex-start !important;
}

/* ==========================================================
   v27 - why icons
   ========================================================== */
/* Clean line icons replacing emoji in WHY EUCO cards */
.why-card .icon,
.why-card .why-icon{
  width:42px !important;
  height:42px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:12px !important;
  background:#F7F4F1 !important;
}
.why-card .icon svg,
.why-card .why-icon svg{
  width:24px !important;
  height:24px !important;
  display:block !important;
}
.why-card:nth-child(1) .icon,
.why-card:nth-child(1) .why-icon{color:#CE376E !important;}
.why-card:nth-child(2) .icon,
.why-card:nth-child(2) .why-icon{color:#1494B9 !important;}
.why-card:nth-child(3) .icon,
.why-card:nth-child(3) .why-icon{color:#F2B83F !important;}
.why-card:nth-child(4) .icon,
.why-card:nth-child(4) .why-icon{color:#F58A43 !important;}

/* ==========================================================
   v28 - sunset countdown
   ========================================================== */
/* Warm, Mediterranean sunset atmosphere across the page */
body{
  background:
    radial-gradient(circle at 8% 12%,rgba(206,55,110,.055),transparent 25%),
    radial-gradient(circle at 88% 20%,rgba(112,178,224,.08),transparent 26%),
    linear-gradient(180deg,#FFFDFB 0%,#FBF6F2 28%,#FFF9F4 62%,#F8F4F2 100%) !important;
}

.experience{
  background:
    radial-gradient(circle at 16% 16%,rgba(209,55,110,.06),transparent 23%),
    linear-gradient(180deg,#FFFDFC 0%,#FFF8F4 100%) !important;
}

.story-section{
  background:
    radial-gradient(circle at 80% 8%,rgba(246,173,65,.11),transparent 22%),
    radial-gradient(circle at 12% 80%,rgba(112,178,224,.09),transparent 25%),
    linear-gradient(145deg,#F8F3F1 0%,#FFF8F2 48%,#F7F4F1 100%) !important;
}

.travel-section{
  background:
    radial-gradient(circle at 90% 8%,rgba(206,55,110,.06),transparent 24%),
    radial-gradient(circle at 8% 88%,rgba(20,148,185,.07),transparent 26%),
    linear-gradient(180deg,#FFFDFC,#FBF5F1) !important;
}

/* Add subtle warm tint to cards without losing readability */
.exp-card,.why-card,.side-card,.travel-card{
  background:rgba(255,255,255,.91) !important;
  backdrop-filter:blur(5px);
}

/* Countdown / Welcome */
.countdown-section{
  position:relative;
  min-height:420px;
  overflow:hidden;
  isolation:isolate;
}
.countdown-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center 55%;
  z-index:-3;
  transform:scale(1.04);
  animation:slowZoom 14s ease-in-out infinite alternate;
}
.countdown-section::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(35,29,65,.12),rgba(35,29,65,.34));
  z-index:-2;
}
@keyframes slowZoom{
  from{transform:scale(1.03)}
  to{transform:scale(1.09)}
}

.countdown-inner{
  min-height:420px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:54px;
  align-items:center;
  color:#fff;
}

.countdown-copy{
  max-width:690px;
}
.countdown-kicker{
  font-size:13px;
  font-weight:800;
  letter-spacing:.18em;
  color:#F7C6D5;
  margin-bottom:14px;
}
.countdown-copy h2{
  margin:0 0 14px !important;
  font-size:clamp(44px,4vw,68px) !important;
  line-height:.98 !important;
  color:#fff !important;
  letter-spacing:-.045em;
  text-shadow:0 5px 22px rgba(0,0,0,.16);
}
.countdown-copy p{
  margin:0 !important;
  max-width:610px;
  font-size:18px !important;
  line-height:1.5 !important;
  color:rgba(255,255,255,.84) !important;
}

.countdown-box{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(35,29,65,.30);
  backdrop-filter:blur(15px);
  border-radius:24px;
  padding:26px 28px;
  box-shadow:0 20px 55px rgba(10,8,25,.22);
}
.countdown-label{
  text-align:center;
  font-size:12px;
  font-weight:800;
  letter-spacing:.21em;
  color:#F8D6DF;
  margin-bottom:14px;
}
.countdown-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  align-items:start;
  gap:10px;
}
.count-unit{
  text-align:center;
}
.count-unit strong{
  display:block;
  font-size:clamp(38px,3.3vw,58px);
  line-height:1;
  font-weight:600;
  letter-spacing:-.04em;
  color:#fff;
  font-variant-numeric:tabular-nums;
}
.count-unit span{
  display:block;
  margin-top:9px;
  font-size:10px !important;
  letter-spacing:.14em;
  font-weight:800;
  color:rgba(255,255,255,.60);
}
.count-sep{
  color:var(--teal);
  font-size:28px;
  line-height:1.2;
  padding-top:4px;
  opacity:.9;
}
.countdown-date{
  margin-top:18px;
  text-align:center;
  font-size:10px;
  letter-spacing:.12em;
  color:rgba(255,255,255,.58);
}
.countdown-routes{
  position:absolute;
  left:0;right:0;bottom:-6px;
  width:100%;
  height:170px;
  pointer-events:none;
  z-index:-1;
}

/* Give section transitions a more premium, fluid feeling */
.experience,.story-section,.travel-section{
  position:relative;
}
.experience::before,
.story-section::before,
.travel-section::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:min(84%,1400px);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(35,29,65,.09),transparent);
}

/* Micro animations */
.countdown-box{
  animation:countBoxIn .9s cubic-bezier(.2,.7,.2,1) both .18s;
}
.countdown-copy{
  animation:countCopyIn .9s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes countCopyIn{
  from{opacity:0;transform:translateX(-28px)}
  to{opacity:1;transform:none}
}
@keyframes countBoxIn{
  from{opacity:0;transform:translateX(28px)}
  to{opacity:1;transform:none}
}

@media(max-width:1000px){
  .countdown-inner{
    grid-template-columns:1fr;
    gap:28px;
    padding-top:52px;
    padding-bottom:52px;
  }
}
@media(max-width:650px){
  .countdown-section{min-height:auto}
  .countdown-box{padding:20px 14px}
  .countdown-grid{gap:4px}
  .count-unit strong{font-size:34px}
  .count-unit span{font-size:8px !important}
  .count-sep{font-size:20px}
}

/* ==========================================================
   v29 - global sunset language
   ========================================================== */
/* Make countdown the true opening hero */
.hero-intro{
  min-height:610px !important;
}
.hero-intro .countdown-inner{
  min-height:610px !important;
}
.hero-intro .countdown-bg{
  background-position:center 50% !important;
}
.hero-intro .countdown-copy{
  max-width:760px;
}
.hero-intro .countdown-copy h2{
  font-size:clamp(54px,5.2vw,82px) !important;
  line-height:.95 !important;
  max-width:760px;
}
.hero-intro .countdown-copy p{
  max-width:680px;
  font-size:19px !important;
}

.countdown-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:26px;
}
.light-on-dark{
  background:#fff !important;
  color:var(--navy) !important;
  border:1px solid rgba(255,255,255,.65) !important;
  box-shadow:0 12px 30px rgba(0,0,0,.16);
}
.glass-btn{
  color:#fff !important;
  border:1px solid rgba(255,255,255,.35) !important;
  background:rgba(255,255,255,.10) !important;
  backdrop-filter:blur(10px);
}
.light-on-dark:hover,
.glass-btn:hover{
  transform:translateY(-2px);
}

/* Sunset atmosphere across all page sections */
.experience,
.story-section,
.travel-section{
  overflow:hidden;
  isolation:isolate;
}

/* Layered animated glow backgrounds */
.experience::after,
.story-section::after,
.travel-section::after{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  border-radius:50%;
  filter:blur(2px);
  opacity:.42;
  z-index:-1;
  animation:floatGlow 11s ease-in-out infinite alternate;
}
.experience::after{
  right:-190px;
  top:-180px;
  background:radial-gradient(circle,rgba(112,178,224,.28),rgba(206,55,110,.09) 48%,transparent 70%);
}
.story-section::after{
  left:-190px;
  bottom:-210px;
  background:radial-gradient(circle,rgba(246,173,65,.22),rgba(206,55,110,.10) 45%,transparent 70%);
}
.travel-section::after{
  right:-180px;
  bottom:-220px;
  background:radial-gradient(circle,rgba(20,148,185,.22),rgba(246,173,65,.10) 48%,transparent 70%);
}
@keyframes floatGlow{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(40px,-24px,0) scale(1.08)}
}

/* Glass cards everywhere */
.exp-card,
.why-card,
.side-card,
.travel-card{
  background:
    linear-gradient(145deg,rgba(255,255,255,.94),rgba(255,255,255,.78)) !important;
  border:1px solid rgba(255,255,255,.70) !important;
  box-shadow:
    0 18px 42px rgba(43,29,75,.08),
    inset 0 1px 0 rgba(255,255,255,.76) !important;
  backdrop-filter:blur(12px);
}

/* More premium destination overlays */
.destination-card{
  box-shadow:0 20px 45px rgba(43,29,75,.12) !important;
}
.destination-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(35,29,65,.04) 10%,rgba(35,29,65,.20) 48%,rgba(35,29,65,.82) 100%),
    linear-gradient(110deg,rgba(206,55,110,.10),transparent 42%,rgba(246,173,65,.10));
  z-index:0;
}
.dest-copy{
  z-index:1;
}

/* Thin sunset dividers between major sections */
.experience::before,
.story-section::before,
.travel-section::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:min(92%,1600px);
  height:2px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,
    transparent,
    rgba(206,55,110,.30),
    rgba(246,173,65,.28),
    rgba(20,148,185,.28),
    transparent);
}

/* Headers become more atmospheric without hurting readability */
.experience-head h2,
.story-top h2,
.highlights-title h2,
.travel-head h2{
  text-shadow:0 2px 14px rgba(43,29,75,.04);
}

/* Soft animated highlight on cards */
.exp-card::after,
.why-card::after,
.side-card::after,
.travel-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,transparent 18%,rgba(255,255,255,.24) 45%,transparent 72%);
  transform:translateX(-125%);
  transition:transform .9s ease;
  pointer-events:none;
}
.exp-card:hover::after,
.why-card:hover::after,
.side-card:hover::after,
.travel-card:hover::after{
  transform:translateX(125%);
}

/* Header treatment to blend with the opening visual */
.page-top{
  background:
    linear-gradient(180deg,rgba(238,244,251,.95),rgba(255,250,247,.92)) !important;
}
.header-shell{
  background:rgba(255,255,255,.92) !important;
  backdrop-filter:blur(14px);
}

/* Give icons a softer sunset glass tile */
.why-icon,
.exp-icon,
.travel-icon,
.social-icon{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 7px 18px rgba(43,29,75,.06);
}

/* Footer also follows the sunset theme */
.site-footer{
  background:
    radial-gradient(circle at 85% 20%,rgba(20,148,185,.16),transparent 25%),
    radial-gradient(circle at 12% 85%,rgba(206,55,110,.17),transparent 26%),
    linear-gradient(120deg,#211A3B,#35264E 55%,#252041) !important;
}

/* Countdown digits glow subtly */
.count-unit strong{
  text-shadow:0 0 24px rgba(255,255,255,.11);
}
.countdown-box{
  position:relative;
  overflow:hidden;
}
.countdown-box::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:24px;
  padding:1px;
  background:linear-gradient(120deg,
    rgba(255,255,255,.30),
    rgba(206,55,110,.22),
    rgba(20,148,185,.22),
    rgba(255,255,255,.18));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}

/* Make scroll reveals a little more fluid */
.reveal{
  opacity:0;
  transform:translateY(26px) scale(.99);
  transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.visible{
  opacity:1;
  transform:none;
}

@media(max-width:1000px){
  .hero-intro,
  .hero-intro .countdown-inner{
    min-height:auto !important;
  }
  .countdown-inner{
    padding-top:64px;
    padding-bottom:64px;
  }
}

/* ==========================================================
   v30 - strong sunset theme
   ========================================================== */
/* =========================
   STRONGER SUNSET VIBES
   ========================= */

/* Global page atmosphere */
body{
  background:
    radial-gradient(circle at 8% 8%,rgba(206,55,110,.14),transparent 28%),
    radial-gradient(circle at 88% 12%,rgba(112,178,224,.16),transparent 30%),
    radial-gradient(circle at 72% 48%,rgba(246,173,65,.12),transparent 34%),
    linear-gradient(180deg,#FFF8F3 0%,#FCEFE9 20%,#FFF7F0 46%,#F6EEF4 72%,#EFF6F7 100%) !important;
  background-attachment:fixed;
}

/* Intro becomes more cinematic */
.hero-intro::after{
  background:
    linear-gradient(90deg,rgba(35,29,65,.74) 0%,rgba(86,52,87,.54) 34%,rgba(206,55,110,.24) 58%,rgba(246,173,65,.10) 78%,rgba(20,148,185,.10) 100%) !important;
}
.hero-intro .countdown-bg{
  filter:saturate(1.15) contrast(1.03);
}
.hero-intro .countdown-copy h2{
  font-size:clamp(64px,6vw,98px) !important;
  max-width:760px !important;
  letter-spacing:-.055em !important;
  text-transform:uppercase;
  text-shadow:0 10px 38px rgba(0,0,0,.22);
}
.hero-intro .countdown-copy p{
  font-size:20px !important;
  color:rgba(255,255,255,.90) !important;
}
.countdown-kicker{
  color:#FFD7E3 !important;
}
.countdown-box{
  background:
    linear-gradient(145deg,rgba(44,31,66,.58),rgba(92,55,86,.42) 58%,rgba(20,148,185,.18)) !important;
  border:1px solid rgba(255,255,255,.25) !important;
  box-shadow:
    0 28px 65px rgba(20,14,38,.30),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}

/* Strong animated aurora overlays for the whole page */
.experience,
.story-section,
.travel-section{
  background:transparent !important;
}

.experience{
  background:
    radial-gradient(circle at 14% 12%,rgba(206,55,110,.16),transparent 28%),
    radial-gradient(circle at 84% 18%,rgba(112,178,224,.16),transparent 30%),
    linear-gradient(135deg,#FFF9F5 0%,#FCEFEA 46%,#F4F3F8 100%) !important;
}

.story-section{
  background:
    radial-gradient(circle at 12% 16%,rgba(246,173,65,.18),transparent 30%),
    radial-gradient(circle at 88% 24%,rgba(206,55,110,.15),transparent 28%),
    radial-gradient(circle at 68% 82%,rgba(20,148,185,.12),transparent 31%),
    linear-gradient(135deg,#F9F0EC 0%,#FFF5EE 48%,#F5EEF6 100%) !important;
}

.travel-section{
  background:
    radial-gradient(circle at 11% 15%,rgba(112,178,224,.17),transparent 30%),
    radial-gradient(circle at 84% 22%,rgba(246,173,65,.16),transparent 27%),
    radial-gradient(circle at 72% 86%,rgba(206,55,110,.12),transparent 30%),
    linear-gradient(145deg,#F2F7F8 0%,#FFF4ED 48%,#F7EEF4 100%) !important;
}

/* Sunset ribbons between sections */
.experience::before,
.story-section::before,
.travel-section::before{
  width:100% !important;
  height:4px !important;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(206,55,110,.75) 16%,
      rgba(246,173,65,.72) 37%,
      rgba(242,201,76,.68) 51%,
      rgba(20,148,185,.62) 69%,
      rgba(112,178,224,.50) 84%,
      transparent 100%) !important;
  opacity:.75;
}

/* More visible floating color clouds */
.experience::after,
.story-section::after,
.travel-section::after{
  width:680px !important;
  height:680px !important;
  opacity:.72 !important;
  filter:blur(14px) !important;
  mix-blend-mode:multiply;
}
.experience::after{
  background:
    radial-gradient(circle,rgba(112,178,224,.30),rgba(206,55,110,.14) 48%,transparent 72%) !important;
}
.story-section::after{
  background:
    radial-gradient(circle,rgba(246,173,65,.28),rgba(206,55,110,.16) 47%,transparent 72%) !important;
}
.travel-section::after{
  background:
    radial-gradient(circle,rgba(20,148,185,.27),rgba(246,173,65,.14) 48%,transparent 72%) !important;
}

/* Glassmorphism is stronger and less white */
.exp-card,
.why-card,
.side-card,
.travel-card{
  background:
    linear-gradient(145deg,rgba(255,255,255,.86),rgba(255,248,244,.72)) !important;
  border:1px solid rgba(255,255,255,.72) !important;
  box-shadow:
    0 22px 48px rgba(86,52,87,.10),
    inset 0 1px 0 rgba(255,255,255,.80) !important;
  backdrop-filter:blur(16px) saturate(1.08);
}

/* Card color washes */
.exp-card.caserta,
.travel-card.caserta{
  background:
    linear-gradient(145deg,rgba(255,255,255,.88),rgba(252,233,241,.70)) !important;
}
.exp-card.napoli,
.travel-card.napoli{
  background:
    linear-gradient(145deg,rgba(255,255,255,.88),rgba(232,247,249,.72)) !important;
}
.exp-card.amalfi,
.travel-card.amalfi{
  background:
    linear-gradient(145deg,rgba(255,255,255,.88),rgba(255,238,225,.72)) !important;
}

/* Highlights cards receive cinematic overlays */
.destination-card{
  box-shadow:0 26px 58px rgba(60,34,70,.18) !important;
}
.destination-card::before{
  background:
    linear-gradient(180deg,rgba(35,29,65,.03) 12%,rgba(35,29,65,.20) 45%,rgba(35,29,65,.86) 100%),
    linear-gradient(120deg,rgba(206,55,110,.18),transparent 38%,rgba(246,173,65,.16)) !important;
}
.destination-card:hover{
  transform:translateY(-7px) scale(1.018) !important;
  box-shadow:0 32px 70px rgba(60,34,70,.22) !important;
}

/* Section titles get sunset emphasis */
.kicker,.eyebrow{
  color:var(--pink) !important;
}
.experience-head h2,
.story-top h2,
.highlights-title h2,
.travel-head h2{
  background:linear-gradient(90deg,var(--navy) 0%,#5B355E 52%,#B44A6B 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
}

/* Timeline becomes more colorful */
.timeline::before{
  height:3px !important;
  background:
    linear-gradient(90deg,
      var(--pink) 0%,
      #A65E89 24%,
      var(--teal) 49%,
      var(--yellow) 72%,
      var(--orange) 100%) !important;
  box-shadow:0 0 18px rgba(206,55,110,.14);
}

/* More colorful icon tiles */
.why-icon,
.exp-icon,
.travel-icon{
  background:
    linear-gradient(145deg,rgba(255,255,255,.92),rgba(255,239,232,.78)) !important;
  border:1px solid rgba(255,255,255,.75);
}

/* Sidebar gets more depth */
.side-card{
  box-shadow:0 22px 48px rgba(69,38,73,.12) !important;
}
.side-card.news{
  background:
    linear-gradient(135deg,#372248 0%,#67355F 54%,#A44467 100%) !important;
}
.side-card.social{
  background:
    linear-gradient(145deg,rgba(255,255,255,.88),rgba(237,247,248,.75)) !important;
}

/* Header becomes glass over sunset */
.page-top{
  background:
    linear-gradient(180deg,rgba(239,244,250,.88),rgba(255,247,242,.78)) !important;
}
.header-shell{
  background:rgba(255,255,255,.82) !important;
  border:1px solid rgba(255,255,255,.62);
  box-shadow:0 14px 36px rgba(60,34,70,.08) !important;
}

/* Buttons inherit stronger theme */
.btn.primary,.header-cta{
  background:
    linear-gradient(135deg,var(--navy),#4A2C60) !important;
}
.btn.primary:hover,.header-cta:hover{
  box-shadow:0 14px 30px rgba(59,36,79,.22);
}
.light-on-dark{
  background:linear-gradient(135deg,#fff,#FFF0E8) !important;
}
.glass-btn{
  background:rgba(255,255,255,.13) !important;
}

/* Footer: full sunset night gradient */
.site-footer{
  background:
    radial-gradient(circle at 82% 15%,rgba(20,148,185,.20),transparent 27%),
    radial-gradient(circle at 18% 82%,rgba(206,55,110,.22),transparent 28%),
    linear-gradient(115deg,#1D1735 0%,#332149 47%,#472A50 72%,#223A47 100%) !important;
}

/* Continuous subtle motion in gradient clouds */
@keyframes sunsetDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(22px,-16px,0) scale(1.035)}
  100%{transform:translate3d(-14px,14px,0) scale(1.02)}
}
.experience::after,
.story-section::after,
.travel-section::after{
  animation:sunsetDrift 13s ease-in-out infinite alternate !important;
}

@media(max-width:800px){
  .hero-intro .countdown-copy h2{
    font-size:clamp(46px,13vw,70px) !important;
  }
}

/* ==========================================================
   v31 - header & city celebration cards
   ========================================================== */
/* HEADER — stronger sunset/glass identity */
.page-top{
  padding:10px 18px 0 !important;
  background:
    linear-gradient(90deg,rgba(206,55,110,.08),rgba(246,173,65,.08) 45%,rgba(20,148,185,.09)) !important;
}
.header-shell{
  height:96px !important;
  border-radius:28px !important;
  background:
    linear-gradient(120deg,rgba(255,255,255,.90),rgba(255,248,244,.82) 55%,rgba(239,247,249,.82)) !important;
  border:1px solid rgba(255,255,255,.72) !important;
  box-shadow:
    0 16px 40px rgba(61,35,73,.10),
    inset 0 1px 0 rgba(255,255,255,.90) !important;
  backdrop-filter:blur(18px) saturate(1.1);
  overflow:hidden;
  position:relative;
}
.header-shell::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:3px;
  background:linear-gradient(90deg,var(--pink),var(--orange),var(--yellow),var(--teal),var(--sky));
  opacity:.72;
}
.navlinks a{
  padding:35px 0 !important;
}
.navlinks a.active::after{
  bottom:22px !important;
}
.header-cta{
  background:linear-gradient(135deg,var(--navy),#4B2E5B) !important;
  box-shadow:0 10px 24px rgba(43,29,65,.14);
}

/* CITY CELEBRATION CARDS — remove the transport facts completely */
.city-celebration-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:24px !important;
  margin-top:28px !important;
}
.city-celebration{
  position:relative;
  min-height:430px;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.76);
  box-shadow:
    0 24px 56px rgba(65,37,76,.13),
    inset 0 1px 0 rgba(255,255,255,.86);
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(12px);
  transition:transform .35s ease, box-shadow .35s ease;
}
.city-celebration:hover{
  transform:translateY(-8px);
  box-shadow:0 34px 72px rgba(65,37,76,.18);
}
.city-celebration::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:4px;
  z-index:5;
}
.caserta-city::before{background:var(--pink)}
.napoli-city::before{background:var(--teal)}
.amalfi-city::before{background:var(--orange)}

.city-photo{
  height:205px;
  background-size:cover;
  background-position:center;
  position:relative;
  overflow:hidden;
}
.city-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.22) 46%,transparent 72%);
  transform:translateX(-120%);
  transition:transform 1s ease;
}
.city-celebration:hover .city-photo::after{
  transform:translateX(120%);
}
.city-photo-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(35,29,65,.02),rgba(35,29,65,.12) 52%,rgba(35,29,65,.66) 100%),
    linear-gradient(110deg,rgba(206,55,110,.08),transparent 42%,rgba(246,173,65,.08));
}
.city-photo-badge{
  position:absolute;
  left:18px;
  bottom:16px;
  z-index:2;
  display:inline-flex;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.90);
  backdrop-filter:blur(10px);
  font-size:10px;
  font-weight:800;
  letter-spacing:.07em;
  color:var(--navy);
}
.city-symbol{
  position:absolute;
  right:18px;
  top:18px;
  z-index:2;
  width:48px;height:48px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(8px);
  font-size:24px;
  font-weight:800;
  color:var(--navy);
  box-shadow:0 8px 20px rgba(35,29,65,.10);
}

.city-celebration-body{
  padding:22px 22px 24px;
}
.caserta-city .city-celebration-body{
  background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(252,235,242,.76));
}
.napoli-city .city-celebration-body{
  background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(232,247,249,.76));
}
.amalfi-city .city-celebration-body{
  background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(255,239,226,.76));
}
.city-kicker{
  font-size:10px;
  letter-spacing:.14em;
  font-weight:800;
  margin-bottom:5px;
}
.caserta-city .city-kicker{color:var(--pink)}
.napoli-city .city-kicker{color:var(--teal)}
.amalfi-city .city-kicker{color:var(--orange)}

.city-celebration h3{
  margin:0 0 9px !important;
  font-size:30px !important;
  line-height:1 !important;
}
.city-celebration p{
  margin:0 0 17px !important;
  font-size:15px !important;
  line-height:1.55 !important;
  color:var(--muted) !important;
}
.city-highlights{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:16px;
}
.city-highlights span{
  display:inline-flex;
  padding:6px 9px;
  border-radius:999px;
  font-size:10px !important;
  font-weight:700;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(35,29,65,.06);
  color:var(--navy);
}
.city-feeling{
  padding-top:13px;
  border-top:1px solid rgba(35,29,65,.08);
  font-size:12px;
  font-weight:700;
  color:var(--navy);
}

/* Gentle photo drift for more life */
.city-photo{
  animation:cityPhotoDrift 10s ease-in-out infinite alternate;
}
.city-celebration:nth-child(2) .city-photo{animation-delay:1.2s}
.city-celebration:nth-child(3) .city-photo{animation-delay:2.4s}
@keyframes cityPhotoDrift{
  from{background-size:100% auto}
  to{background-size:108% auto}
}

@media(max-width:1050px){
  .city-celebration-grid{
    grid-template-columns:1fr !important;
  }
  .city-celebration{
    min-height:auto;
  }
}


/* ==========================================================
   THEME ADDITIONS (non presenti nel file HTML originale fornito)
   ========================================================== */

/* Nuove piattaforme social richieste dal progetto (Instagram, Facebook e
   WhatsApp esistevano già nel design originale con le classi .ig/.fb/.wa) */
.li{background:#0A66C2}
.yt{background:#FF0000}
.tt{background:#010101}
.x{background:#000000}
/* Email di contatto: non è un social, quindi non ha un colore di marca.
   Usa il rosa EUCO, così resta della famiglia senza fingersi una piattaforma. */
.em{background:var(--pink)}

/* Fix: nel file fornito il pulsante ☰ (.menu-btn) non apriva alcun menu su
   tablet/smartphone (< 1050px) perché mancava lo script di apertura: il
   menu risultava irraggiungibile da mobile. Aggiunta la sola apertura/
   chiusura del menu già esistente, senza modificarne l'aspetto. */
@media(max-width:1050px){
  .header-shell.nav-open{overflow:visible}
  .header-shell.nav-open .navlinks{
    display:flex !important;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#fff;
    padding:8px 28px 18px;
    border-radius:0 0 22px 22px;
    box-shadow:0 20px 44px rgba(43,29,75,.16);
    z-index:998;
  }
  .header-shell.nav-open .navlinks a{padding:12px 0;width:100%}
  .header-shell.nav-open .navlinks a.active::after{display:none}
}

/* ==========================================================
   CORREZIONE RESPONSIVE DELLE GRIGLIE (difetto del file originale)
   ----------------------------------------------------------
   Il blocco v23 qui sopra imposta .story-layout e .why-grid con
   !important MA SENZA media query. Le regole responsive del blocco
   BASE non hanno !important, quindi perdevano il confronto.

   Effetto sul file HTML originale, misurato a 390px:
     .story-layout  ->  "6px 320px"     (colonna testo larga 6 pixel)
     .why-grid      ->  4 colonne da 0px
     .highlights-grid -> 6px
   e a 768px la sidebar aveva 2 colonne da 280px dentro 320px.

   Difetto già presente nel design fornito, non introdotto dalla
   conversione a tema: il confronto pixel iniziale combaciava
   proprio perché entrambe le versioni erano rotte allo stesso modo.

   Qui le regole responsive vengono riaffermate con la specificità
   necessaria. Nessuna modifica al desktop, dove il layout era
   ed è corretto.
   ========================================================== */
@media(max-width:1050px){
  .story-layout{
    grid-template-columns:1fr !important;
    gap:24px !important;
  }
  .sidebar{
    position:static !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .why-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .highlights-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:700px){
  .story-layout{gap:20px !important}
  .sidebar{grid-template-columns:1fr !important}
  .why-grid{grid-template-columns:1fr !important}
  .highlights-grid{grid-template-columns:1fr !important}
}

/* ==========================================================
   THEME ADDITION - bersaglio del pulsante "STAY UPDATED"
   ==========================================================
   scroll-margin-top serve da riserva se il JavaScript non gira:
   senza, l'ancora finirebbe sotto l'header sticky alto ~116px.
   .is-targeted dà un lampo breve per far capire dove si è
   arrivati; rispetta prefers-reduced-motion.
   ========================================================== */
#stay-updated{
  scroll-margin-top:136px;
}
#stay-updated.is-targeted{
  animation:eucoTargetGlow 1.6s ease-out;
}
@keyframes eucoTargetGlow{
  0%   { box-shadow:0 0 0 0 rgba(206,55,110,.55); }
  100% { box-shadow:0 0 0 14px rgba(206,55,110,0); }
}
@media (prefers-reduced-motion: reduce){
  #stay-updated.is-targeted{ animation:none; }
}

/* ==========================================================
   THEME ADDITION - trappola anti-spam del modulo Brevo
   ==========================================================
   Il campo email_address_check deve essere PRESENTE e INVIATO
   VUOTO: i bot lo compilano e Brevo scarta l'iscrizione.
   Va quindi nascosto alle persone senza usare display:none
   (che in alcuni browser lo escluderebbe dall'invio) e senza
   che possa ricevere il focus da tastiera.
   ========================================================== */
.news-form .news-hp{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  border:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Esito dell'iscrizione, mostrato sotto il modulo dentro la card news. */
.side-card.news .news-msg{
  margin:10px 0 0;
  font-size:12px;
  line-height:1.45;
  color:rgba(255,255,255,.9);
}
.side-card.news .news-msg.is-ok{ color:#fff; font-weight:600; }
.side-card.news .news-msg.is-ko{ color:#FFE1E9; font-weight:600; }
.side-card.news .news-msg.is-pending{ opacity:.75; }
.news-form button[disabled]{ opacity:.55; cursor:default; }

/* ==========================================================
   THEME ADDITION - riga "Best option" della card Amalfi
   ==========================================================
   L'HTML originale forza white-space:nowrap su questa riga in
   tre punti diversi (blocchi v18, v21 e v25), per tenerla su
   una riga sola. La misura era tarata sulla frase inglese;
   con la traduzione italiana, piu' lunga, il testo esce dal
   riquadro. Lasciarla andare a capo e' l'unico comportamento
   che regge qualunque lingua: in inglese resta comunque su una
   riga perche' ci sta, in italiano va a capo invece di sfondare.
   ========================================================== */
.travel-card.amalfi .best,
.travel-card.amalfi .best strong{
  white-space:normal !important;
}

/* ==========================================================
   THEME ADDITION - discendenti tagliati nei titoli a gradiente
   ==========================================================
   Questi quattro titoli usano background-clip:text: il gradiente
   viene ritagliato sulla forma delle lettere. Ma lo sfondo copre
   solo il box della riga e il blocco v18 impone
   `section h2{line-height:1.05 !important}`, piu' basso di quanto
   servirebbe: le code di "y", "g", "p" cadono fuori dal box e non
   vengono dipinte, quindi si vedono tagliate.

   Si aggiunge padding in basso invece di alzare line-height:
   l'interlinea resta identica al design (importante per
   .story-top h2, che va a capo quattro volte) e il box dello
   sfondo si estende quel tanto che basta a coprire i discendenti.
   ========================================================== */
.experience-head h2,
.story-top h2,
.highlights-title h2,
.travel-head h2{
  padding-bottom:.14em;
}