/* The header proportions, menu order, colours and layout follow the user's exact reference. */
:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;color:#fff;background:#062f45}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;min-height:100%;width:100%}
body{overflow-x:hidden} a{text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}
.hero{height:100svh;min-height:600px;position:relative;isolation:isolate;overflow:hidden;background:#003e50}
.hero-image{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hero-image img{display:block;position:absolute;top:-5.94vw;left:0;width:100%;height:auto;min-height:calc(100% + 5.94vw);object-fit:cover;object-position:center top;max-width:none;user-select:none}
/* Native glass matches the ocean because backdrop samples the ACTUAL image underneath it. */
.header{position:absolute;z-index:10;left:2.17%;right:2.17%;top:1.26vw;max-width:1600px;margin:auto;transform:translateY(var(--header-shift,0px));opacity:var(--header-opacity,1);will-change:transform,opacity}
.nav-shell{position:relative;display:flex;align-items:center;width:100%;height:clamp(76px,7.30vw,112px);padding:0 7.6% 0 7.8%;border-radius:clamp(17px,1.7vw,26px);isolation:isolate;border:1px solid rgba(224,247,243,.25);box-shadow:0 16px 42px rgba(2,22,30,.25),inset 0 1px 0 rgba(255,255,255,.16);background:linear-gradient(108deg,rgba(3,39,53,.88),rgba(5,52,70,.82) 52%,rgba(3,43,59,.88));-webkit-backdrop-filter:blur(22px) saturate(122%);backdrop-filter:blur(22px) saturate(122%)}
.logo{flex:0 0 auto;display:flex;align-items:center;width:16.25%;height:100%;min-width:135px}
.logo img{width:100%;height:auto;display:block;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.12));image-rendering:auto}
.navigation{display:flex;align-items:center;justify-content:center;gap:clamp(15px,1.88vw,30px);margin:auto;white-space:nowrap}
.nav-link{position:relative;font-size:clamp(12px,1.02vw,16px);font-weight:550;line-height:1.35;letter-spacing:.012em;color:rgba(252,250,248,.96);text-shadow:0 1px 5px rgba(2,21,28,.25);transition:color .2s ease}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:1px;transform:scaleX(0);transform-origin:left;background:#ff8a52;transition:transform .2s ease}
.nav-link:hover{color:#fff}.nav-link:hover::after{transform:scaleX(1)}
.book-now{flex:0 0 auto;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:9px;min-width:clamp(110px,9.0vw,142px);min-height:clamp(42px,3.7vw,56px);margin-left:auto;padding:0 19px;border:1px solid rgba(255,255,255,.85);background:linear-gradient(135deg,#fffdf8,#f4f4ee);color:#102b35;border-radius:999px;box-shadow:0 7px 20px rgba(2,22,30,.17),inset 0 1px 0 #fff;font-size:clamp(12px,1.02vw,16px);font-weight:750;letter-spacing:.01em;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.book-now::after{content:none;font-size:14px;line-height:1;color:#ed6836}
.book-now:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(2,22,30,.23),inset 0 1px 0 #fff;background:#fff}
.menu-toggle{display:none} .logo:focus-visible,.nav-link:focus-visible,.book-now:focus-visible,.menu-toggle:focus-visible{outline:2px solid #fff;outline-offset:5px}
@media(min-width:768px) and (max-width:1130px){.nav-shell{padding:0 6.7%;gap:2.2vw}.logo{min-width:125px;width:16.25%}.navigation{gap:clamp(12px,1.4vw,21px)}.book-now{margin-left:auto}}
@media(max-width:767px){
 .hero{height:100svh;min-height:610px}.hero-image img{inset:auto 0 auto 0;top:-140px;width:100%;height:calc(100% + 140px);min-height:0;object-fit:cover;object-position:center top;max-width:none}
 .header{left:4%;right:4%;top:14px}.nav-shell{height:72px;padding:0 18px 0 18px;border-radius:19px;border-color:rgba(233,106,53,.23);background:linear-gradient(108deg,rgba(3,39,53,.92),rgba(5,52,70,.88) 52%,rgba(3,43,59,.93));box-shadow:0 12px 30px rgba(2,22,30,.24),inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(19px) saturate(120%);-webkit-backdrop-filter:blur(19px) saturate(120%)}
 .logo{width:166px;min-width:0}.book-now{margin-left:auto;margin-right:12px;min-width:87px;min-height:37px;padding:0 13px;font-size:12px}.book-now::after{display:none}
 .menu-toggle{position:relative;flex:0 0 35px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:0;background:transparent;height:40px;padding:0;cursor:pointer}.menu-toggle span{width:23px;height:2px;background:#fff;border-radius:5px;display:block}
 .navigation{display:none;position:absolute;top:calc(100% + 9px);left:0;right:0;z-index:8;flex-direction:column;gap:0;margin:0;padding:13px 18px 17px;align-items:stretch;border-radius:18px;background:rgba(3,36,49,.97);border:1px solid rgba(224,247,243,.2);box-shadow:0 20px 48px rgba(2,22,29,.42);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
 .navigation.is-open{display:flex}.navigation a{padding:12px 7px;font-size:15px;font-weight:550}.navigation .nav-link::after{display:none}
}
@media(max-width:420px){.nav-shell{padding:0 12px;height:66px}.logo{width:139px}.book-now{min-width:79px;min-height:34px;padding:0 11px;font-size:11px;margin-right:8px}}
@media(min-width:1800px){.hero-image img{top:-107px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Scroll-driven flight animation */
.hero{height:585svh;min-height:0;overflow:visible}
.scene-stage{position:sticky;top:0;height:100svh;min-height:600px;overflow:hidden;isolation:isolate;background:#062f45;--flight-progress:0;--scene-scale:1.22;--scene-shift:0px;--plane-shift:0px;--plane-scale:1;--plane-opacity:1;--header-shift:0px;--header-opacity:1;--cloud-progress:0;--cloud-shift:0px;--destination-progress:0;--destination-shift:32px;--about-progress:0;--about-shift:30px;--about-backdrop-progress:0;--features-progress:0;--features-shift:30px}
.hero-image{z-index:0}
.hero-image img{inset:0;width:100%;height:100%;min-height:0;object-fit:cover;object-position:center;filter:saturate(1.02) contrast(1.015) brightness(.985);transform:scale(var(--scene-scale,1.22)) translate3d(0,var(--scene-shift),0);transform-origin:center 52%;will-change:transform}
.scene-stage::after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(4,28,38,.24),transparent 42%,rgba(4,32,44,.16)),radial-gradient(ellipse at 52% 44%,rgba(255,208,151,.08),transparent 55%),linear-gradient(180deg,rgba(3,26,35,.09),rgba(2,27,37,.2))}
.airplane-layer{position:absolute;z-index:2;inset:0;width:100%;height:100%;pointer-events:none;opacity:calc(1 - var(--about-progress));transform:translate3d(0,var(--scene-shift),0);transform-origin:center 52%;will-change:transform,opacity;transition:opacity .08s linear}
.airplane{position:absolute;left:32%;top:42%;width:36%;height:auto;object-fit:contain;opacity:var(--plane-opacity);transform:translate3d(0,var(--plane-shift),0) scale(var(--plane-scale));transform-origin:50% 54%;will-change:transform,opacity}
.home-copy{position:absolute;z-index:4;inset:0;opacity:var(--copy-progress,1);transition:opacity .08s linear;pointer-events:none}
.home-copy h1{position:absolute;left:7.5%;top:49%;width:48%;margin:0;font-family:"Segoe UI",Arial,sans-serif;font-size:clamp(54px,7.8vh,86px);font-weight:750;line-height:.96;letter-spacing:-.045em;text-shadow:0 4px 28px rgba(0,0,0,.48)}
.hero-description{position:absolute;left:69%;top:61%;width:min(27%,500px);margin:0;padding:20px 22px 20px 25px;border:1px solid rgba(218,248,243,.24);border-radius:18px;background:linear-gradient(135deg,rgba(3,35,48,.7),rgba(7,50,67,.52));box-shadow:0 14px 38px rgba(2,24,32,.18),inset 0 1px 0 rgba(255,255,255,.09);backdrop-filter:blur(12px) saturate(112%);-webkit-backdrop-filter:blur(12px) saturate(112%);font-family:"Segoe UI",Arial,sans-serif;font-size:clamp(16px,1.25vw,19px);font-weight:550;line-height:1.7;letter-spacing:.005em;color:#faf7f5;text-shadow:0 1px 5px rgba(1,19,27,.24)}
.hero-description::before{content:"";position:absolute;left:0;top:22px;width:3px;height:34px;border-radius:0 4px 4px 0;background:#ff7138;box-shadow:0 0 16px rgba(255,113,56,.3)}
.flight-clouds{position:absolute;z-index:1;inset:-24%;pointer-events:none;opacity:var(--cloud-progress);transform:translate3d(var(--cloud-shift),0,0);filter:blur(10px);will-change:opacity,transform;background:radial-gradient(ellipse 35% 23% at 12% 42%,rgba(255,255,255,.95) 0 40%,transparent 75%),radial-gradient(ellipse 40% 28% at 38% 48%,rgba(255,255,255,.96) 0 42%,transparent 76%),radial-gradient(ellipse 38% 27% at 68% 37%,rgba(255,255,255,.93) 0 43%,transparent 76%),radial-gradient(ellipse 34% 25% at 91% 54%,rgba(255,255,255,.96) 0 42%,transparent 78%),linear-gradient(180deg,transparent 10%,rgba(255,255,255,.78) 37% 61%,transparent 89%)}
.destination-reveal{position:absolute;z-index:5;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px;background:linear-gradient(180deg,rgba(3,27,37,.08),rgba(3,28,38,.6)),radial-gradient(ellipse at 50% 48%,rgba(2,25,34,.2),rgba(2,25,34,.6));opacity:var(--destination-progress);transform:translateY(var(--destination-shift));pointer-events:none}
.destination-kicker{margin:0 0 18px;font-size:12px;font-weight:700;letter-spacing:.24em;color:#c8f4ed}
.destination-reveal h2{margin:0;font-size:clamp(36px,6vw,84px);line-height:1.04;letter-spacing:-.045em;text-shadow:0 4px 30px rgba(0,0,0,.35)}
.destination-note{margin:22px 0 0;font-size:clamp(14px,1.4vw,18px);color:rgba(255,255,255,.82)}
.about-backdrop{position:absolute;z-index:5;inset:0;background:#f2efe6;opacity:var(--about-backdrop-progress);pointer-events:none}
.about-reveal{position:absolute;z-index:6;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(24px,4.5vh,44px);padding:clamp(28px,5vh,50px) 4.8% 2.8vh;background:transparent;color:#173638;opacity:var(--about-progress);transform:translateY(var(--about-shift));pointer-events:none}
.about-heading{display:grid;grid-template-columns:1.12fr .88fr;align-items:center;gap:7%;padding:0 0 0 0}
.about-copy{max-width:740px;text-shadow:none}
.about-kicker{display:flex;align-items:center;gap:11px;margin:0 0 22px;font-size:11px;font-weight:800;letter-spacing:.2em;color:#ed6836}.about-kicker span{height:2px;width:24px;background:#ed6836}
.about-copy h2{margin:0;font-size:clamp(48px,5.4vw,76px);line-height:1.02;letter-spacing:-.06em;font-weight:750;color:#182d36}.about-copy h2 em{font-family:Georgia,serif;color:inherit;font-weight:400;letter-spacing:-.045em}
.about-lead{max-width:550px;margin:0 0 0 auto;color:inherit;font-size:clamp(15px,1.2vw,17px);font-weight:450;line-height:1.9}.about-lead strong{color:#3d3128;font-weight:700}
.about-visuals{display:grid;grid-template-columns:1.22fr .86fr;gap:22px;min-height:0}
.about-beach-card,.about-island-card{position:relative;min-width:0;min-height:0;overflow:hidden;border-radius:22px;background:#e5ded9}
.about-beach-card img,.about-island-card img{display:block;width:100%;height:100%;object-fit:cover}
.about-beach-card img{object-position:center 46%}
.about-quote{position:absolute;left:3.5%;right:3.5%;bottom:4%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 19px;border:1px solid rgba(255,255,255,.38);border-radius:17px;background:rgba(38,49,53,.68);backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);color:#fff}
.about-quote p{margin:0;font-family:Georgia,serif;font-size:clamp(14px,1.35vw,18px);font-style:italic;line-height:1.4}
.about-quote span{flex:0 0 42px;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#f46b28;color:white;font-size:20px;font-weight:700}
.about-island-card img{filter:brightness(.72) saturate(.9)}
.about-island-card:after{content:"";position:absolute;inset:30% 0 0;background:linear-gradient(180deg,transparent,rgba(3,25,34,.74))}
.island-caption{position:absolute;z-index:1;left:7%;right:7%;bottom:7%;color:#fff}
.island-caption p{margin:0 0 11px;font-size:9px;font-weight:800;letter-spacing:.2em;color:#b9e9e1}
.island-caption h3{margin:0;font-size:clamp(25px,2.5vw,36px);line-height:1.12;letter-spacing:-.04em}
.features-reveal{position:absolute;z-index:7;inset:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(34px,6vh,58px);padding:clamp(110px,15vh,170px) 4.6% 5%;opacity:var(--features-progress);transform:translateY(var(--features-shift));pointer-events:none;color:#fff}
.features-heading{display:grid;grid-template-columns:1.3fr .7fr;align-items:end;gap:6%}.features-kicker{display:flex;align-items:center;gap:11px;margin:0 0 19px;color:#ff7138;font-size:10px;font-weight:800;letter-spacing:.22em}.features-kicker span{width:24px;height:2px;background:#ff5b16}.features-heading h2{margin:0;font-size:clamp(40px,5.2vw,68px);line-height:1.03;letter-spacing:-.055em}.features-heading h2 em{font-style:normal;color:#ff6827}.features-intro{max-width:330px;margin:0 0 4px auto;color:#e1d9d3;font-size:14px;line-height:1.8}
.features-heading{transform:translateY(var(--features-heading-shift,0px));will-change:transform}
.feature-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.feature-card{position:relative;min-height:238px;padding:30px 26px;border:1px solid rgba(207,242,236,.24);border-radius:23px;background:linear-gradient(140deg,rgba(101,146,153,.3),rgba(13,85,113,.56) 55%,rgba(5,59,81,.66));box-shadow:0 14px 38px rgba(2,24,33,.2),inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(17px) saturate(130%);-webkit-backdrop-filter:blur(17px) saturate(130%);opacity:var(--card-progress,0);transform:translateY(var(--card-shift,26px)) scale(var(--card-scale,.97));will-change:opacity,transform}.feature-number{position:absolute;top:24px;right:23px;color:#ff7138;font-size:10px;font-weight:800}.feature-icon{width:54px;height:54px;display:grid;place-items:center;border:1px solid rgba(207,242,236,.27);border-radius:16px;background:rgba(205,241,235,.1);color:#faf6f3;font-size:23px}.feature-card h3{margin:31px 0 8px;font-size:15px;font-weight:750;line-height:1.3;color:#fff}.feature-card p{margin:0;color:inherit;font-size:12px;font-weight:600;line-height:1.65}
@media(min-width:768px) and (max-width:1050px){
 .about-reveal{grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);gap:4%;padding:135px 5% 5%}.about-copy h2{font-size:clamp(44px,5.2vw,58px)}.about-lead{font-size:15px;line-height:1.65}.experience-card{padding:25px;min-height:350px}
 .features-reveal{padding:140px 5% 5%;gap:32px}.features-heading{grid-template-columns:1.15fr .85fr;gap:4%}.features-heading h2{font-size:clamp(38px,4.6vw,50px)}.features-intro{font-size:12px}.feature-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.feature-card{min-height:155px;padding:20px}.feature-card h3{margin:16px 0 6px}
}
@media(max-width:767px){
 .hero{height:565svh;min-height:0}
 .scene-stage{min-height:100svh}
 .airplane-layer{inset:0;width:100%;height:100%;transform:scale(var(--scene-scale)) translate3d(0,var(--scene-shift),0);transform-origin:center 52%}
 .airplane{left:50%;top:20%;width:88vw;transform:translate3d(-50%,var(--plane-shift),0) scale(var(--plane-scale));transform-origin:50% 54%}
 .home-copy{inset:47% 5% auto;}
 .home-copy h1{position:relative;left:auto;top:auto;width:auto;font-size:clamp(40px,10.5vw,56px);font-weight:750;line-height:.97;letter-spacing:-.04em}
 .hero-description{position:relative;left:auto;top:auto;width:auto;max-width:550px;margin:16px 0 0;padding:14px 16px 14px 19px;border-radius:15px;font-size:clamp(14px,3.8vw,16px);font-weight:550;line-height:1.55}
 .hero-description::before{top:17px;height:28px}
 .flight-clouds{inset:-40%;filter:blur(18px)}
 .about-reveal{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;gap:20px;padding:110px 6% 34px}
 .about-kicker{margin-bottom:15px;font-size:10px}.about-copy h2{font-size:clamp(42px,11vw,62px)}.about-lead{font-size:14px;line-height:1.55;margin-top:16px}.about-signoff{margin-top:19px;font-size:9px}
 .experience-card{min-height:0;padding:20px 21px;border-radius:21px}.about-card-kicker{font-size:10px;margin-bottom:12px}.experience-card h3{font-size:23px}.experience-card>p:not(.about-card-kicker){font-size:13px;line-height:1.55;margin-top:11px}.experience-points{margin-top:15px;padding-top:14px;gap:8px}.experience-points div{gap:7px}.experience-points span{font-size:17px}.experience-points b{font-size:11px}
 .features-reveal{gap:27px;padding:105px 5% 30px}
 .features-heading{grid-template-columns:1fr;gap:12px}.features-kicker{font-size:9px;margin-bottom:12px}.features-heading h2{font-size:clamp(34px,8.7vw,50px)}.features-intro{margin:0;max-width:450px;font-size:12px;line-height:1.55}
 .feature-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.feature-card{min-height:145px;padding:16px;border-radius:17px}.feature-number{top:15px;right:15px;font-size:9px}.feature-icon{width:38px;height:38px;border-radius:12px;font-size:17px}.feature-card h3{font-size:12px;margin:15px 0 5px}.feature-card p{font-size:10px;line-height:1.45}
}
@media(max-width:767px) and (max-height:760px){
 .about-reveal{gap:13px;padding:88px 6% 20px}
 .about-kicker{margin-bottom:10px;font-size:9px}
 .about-copy h2{font-size:clamp(38px,9.5vw,54px)}
 .about-lead{font-size:12.5px;line-height:1.48;margin-top:12px}
 .about-signoff{margin-top:13px;font-size:8px}
 .experience-card{padding:15px 18px}
 .about-card-kicker{margin-bottom:9px;font-size:9px}
 .experience-card h3{font-size:20px}
 .experience-card>p:not(.about-card-kicker){font-size:12px;line-height:1.42;margin-top:8px}
 .experience-points{margin-top:10px;padding-top:10px}
 .experience-points div{gap:5px}.experience-points span{font-size:15px}.experience-points b{font-size:10px}
 .features-reveal{gap:17px;padding:85px 5% 18px}
 .features-heading{gap:8px}.features-kicker{font-size:8px;margin-bottom:9px}.features-heading h2{font-size:clamp(30px,8vw,42px)}.features-intro{font-size:10px;line-height:1.4}
 .feature-cards{gap:8px}.feature-card{min-height:128px;padding:13px;border-radius:14px}.feature-number{top:12px;right:12px;font-size:8px}.feature-icon{width:32px;height:32px;font-size:14px}.feature-card h3{font-size:11px;margin:12px 0 4px}.feature-card p{font-size:9px;line-height:1.35}
}
@media(max-width:767px) and (max-height:500px){
 .about-reveal{grid-template-columns:.95fr 1.05fr;grid-template-rows:auto;align-content:center;gap:4%;padding:78px 5% 12px}
 .about-copy h2{font-size:clamp(30px,7vw,48px)}
 .about-kicker{font-size:8px;letter-spacing:.16em;margin-bottom:8px}
 .about-lead{font-size:11px;line-height:1.4;margin-top:9px}
 .about-signoff{font-size:7px;letter-spacing:.16em;margin-top:9px}
 .experience-card{padding:12px 14px;border-radius:17px}
 .about-card-kicker{font-size:8px;margin-bottom:7px}
 .experience-card h3{font-size:17px}
 .experience-card>p:not(.about-card-kicker){font-size:10px;line-height:1.35;margin-top:6px}
 .experience-points{margin-top:7px;padding-top:7px;gap:5px}
 .experience-points div{gap:3px}.experience-points span{font-size:13px}.experience-points b{font-size:8px}
 .features-reveal{gap:12px;padding:72px 4% 10px}
 .features-heading{grid-template-columns:1fr .65fr;gap:4%;align-items:end}.features-kicker{font-size:6px;letter-spacing:.15em;margin-bottom:7px}.features-heading h2{font-size:clamp(24px,5vw,34px)}.features-intro{font-size:8px;line-height:1.35}
 .feature-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.feature-card{min-height:125px;padding:10px 8px;border-radius:12px}.feature-number{top:8px;right:8px;font-size:7px}.feature-icon{width:27px;height:27px;border-radius:9px;font-size:12px}.feature-card h3{font-size:9px;margin:12px 0 4px}.feature-card p{font-size:7px;line-height:1.3}
}
@media(prefers-reduced-motion:reduce){
 .hero{height:auto;min-height:0}
 .scene-stage{position:relative;top:auto;height:auto;min-height:0;overflow:hidden}
 .hero-image img,.airplane-layer,.flight-clouds,.destination-reveal{transform:none!important;will-change:auto}
 .flight-clouds,.destination-reveal,.home-copy,.airplane-layer{display:none}
 .about-reveal{position:relative;min-height:100svh;opacity:1;transform:none;padding:110px 7% 40px}
 .features-reveal{position:relative;min-height:100svh;opacity:1;transform:none;padding:110px 5% 40px}
}

/* About screen follows the clean editorial layout in the supplied reference. */
.about-heading{grid-template-columns:1.12fr .88fr;gap:7%}
.about-visuals{grid-template-columns:1.22fr .86fr;gap:22px}
@media(min-width:768px) and (max-width:1050px){
 .about-reveal{grid-template-rows:auto minmax(0,1fr);gap:3.5vh;padding:4.5vh 5% 2.5vh}
 .about-heading{grid-template-columns:1fr .9fr;gap:4%}
 .about-copy h2{font-size:clamp(44px,5.3vw,58px)}
 .about-lead{font-size:14px;line-height:1.7}
 .about-visuals{grid-template-columns:1.15fr .85fr;gap:14px}
 .about-quote{padding:12px 14px}.about-quote span{flex-basis:36px;width:36px;height:36px}
}
@media(max-width:767px){
 .about-reveal{position:absolute;grid-template-rows:auto auto;align-content:center;gap:16px;padding:22px 6% 20px;background:#f5f4ee;color:#172f38}
 .about-heading{grid-template-columns:1fr;gap:10px;align-items:start}
 .about-kicker{font-size:9px;letter-spacing:.18em;margin-bottom:10px}
 .about-copy h2{font-size:clamp(32px,8.5vw,42px);line-height:.98}
 .about-lead{max-width:560px;margin:0;font-size:12px;line-height:1.55}
 .about-visuals{height:clamp(250px,48svh,410px);grid-template-columns:1.12fr .88fr;gap:10px}
 .about-beach-card,.about-island-card{border-radius:15px}
 .about-quote{left:4%;right:4%;bottom:4%;gap:8px;padding:9px 10px;border-radius:12px}
 .about-quote p{font-size:clamp(9px,2.8vw,12px)}
 .about-quote span{flex-basis:28px;width:28px;height:28px;font-size:15px}
 .island-caption{left:8%;right:6%;bottom:8%}
 .island-caption p{font-size:7px;letter-spacing:.13em;margin-bottom:7px}
 .island-caption h3{font-size:clamp(18px,5vw,25px)}
}
@media(max-width:767px) and (max-height:500px){
 .about-reveal{grid-template-rows:auto auto;gap:10px;padding:18px 4% 12px}
 .about-heading{grid-template-columns:.95fr .9fr;gap:4%;align-items:center}
 .about-kicker{font-size:7px;margin-bottom:7px}
 .about-copy h2{font-size:clamp(24px,5.5vw,34px)}
 .about-lead{font-size:10px;line-height:1.42}
 .about-visuals{height:min(48svh,220px);grid-template-columns:1.12fr .88fr;gap:8px}
 .about-quote{padding:7px 8px}.about-quote p{font-size:8px}.about-quote span{width:24px;height:24px;flex-basis:24px;font-size:12px}
 .island-caption p{font-size:6px}.island-caption h3{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
 .about-reveal{position:relative;grid-template-rows:auto auto;min-height:100svh;align-content:center;gap:clamp(16px,3vh,30px);padding:28px 5% 24px}
 .about-backdrop{opacity:1}
 .about-visuals{height:clamp(300px,48svh,520px)}
}

/* Second screen: editorial story layout with a full-bleed travel photo. */
.about-reveal{grid-template-rows:minmax(0,1fr) auto;gap:clamp(20px,3.5vh,34px);padding:clamp(28px,5.5vh,58px) 4.9% 0;background:transparent;color:#142c35}
.story-layout{display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:8%;min-height:0}
.story-photo{position:relative;height:min(65vh,610px);min-height:0}
.story-photo>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 45%;border-radius:24px;filter:saturate(.91) contrast(.97) brightness(1.02)}
.memory-badge{position:absolute;z-index:2;top:-84px;right:-76px;width:146px;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border-radius:50%;background:#ff641a;color:#fff;box-shadow:0 15px 35px rgba(108,55,22,.17);transform:rotate(8deg)}
.memory-badge span{font-size:30px;line-height:1}.memory-badge b{font-size:9px;line-height:1.3;letter-spacing:.13em;text-align:center}
.photo-caption{position:absolute;left:3.5%;right:3.5%;bottom:3.5%;min-height:72px;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid rgba(255,255,255,.3);border-radius:17px;background:rgba(43,54,58,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff}
.photo-caption span{font-size:10px;font-weight:800;letter-spacing:.18em}.photo-caption b{font-size:25px;line-height:1}
.story-copy{max-width:620px;padding:12px 0;color:#142c35}
.story-copy .about-kicker{margin:0 0 26px;color:inherit;font-size:10px;letter-spacing:.2em}.story-copy .about-kicker span{background:#ff641a}
.story-copy h2{margin:0;font-size:clamp(43px,4.3vw,62px);line-height:1.02;letter-spacing:-.06em;font-weight:760;color:#102b35}.story-copy h2 em{font-family:Georgia,serif;font-weight:400;color:inherit;letter-spacing:-.04em}
.story-copy h3{max-width:520px;margin:27px 0 0;font-size:clamp(17px,1.55vw,22px);font-weight:700;line-height:1.45;color:#18333d}
.story-copy .about-lead{max-width:560px;margin:24px 0 0;color:inherit;font-size:15px;line-height:1.85;font-weight:450}
.story-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}.story-tags span{padding:9px 13px;border:1px solid #ddd9d6;border-radius:999px;color:inherit;font-size:10px;font-weight:650;white-space:nowrap}
.story-link{display:flex;align-items:center;justify-content:space-between;gap:18px;width:fit-content;min-width:205px;margin:28px 0 0;padding:0 0 12px;border-bottom:1px solid #ff641a;color:inherit;font-size:10px;font-weight:800;letter-spacing:.14em}.story-link span{color:#ff641a;font-size:19px}
.story-stats{min-height:clamp(90px,15vh,135px);display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #d9d5d2}
.story-stats>div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.story-stats>div+div{border-left:1px solid #d9d5d2}
.story-stats strong{font-family:Georgia,serif;font-size:clamp(38px,4.3vw,62px);font-weight:400;line-height:1;color:#f35d1b}.story-stats span{color:#364d56;font-size:8px;font-weight:800;letter-spacing:.17em;text-align:center}
@media(min-width:768px) and (max-width:1050px){
 .about-reveal{padding:5vh 5% 0;gap:24px}.story-layout{grid-template-columns:1fr .95fr;gap:5%}.story-photo{height:min(63vh,560px)}.memory-badge{width:118px;top:-24px;right:-24px}.story-copy h2{font-size:clamp(40px,5vw,54px)}.story-copy h3{font-size:18px;margin-top:20px}.story-copy .about-lead{font-size:13px;margin-top:16px;line-height:1.7}.story-tags{gap:6px;margin-top:17px}.story-tags span{font-size:9px;padding:8px 10px}.story-link{margin-top:20px}
}
@media(max-width:767px){
 .about-reveal{grid-template-rows:minmax(0,1fr) auto;align-content:stretch;gap:12px;padding:24px 5.5% 0;background:transparent}
 .story-layout{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);align-content:center;gap:10px}
 .story-copy{order:1;padding:0}.story-photo{order:2;height:min(40svh,330px);min-height:0;margin:0 10px 0 0}
 .story-copy .about-kicker{font-size:8px;margin-bottom:9px;letter-spacing:.16em}.story-copy h2{font-size:clamp(29px,8vw,39px);line-height:1}.story-copy h3{font-size:13px;line-height:1.3;margin-top:10px}.story-copy .about-lead{font-size:11px;line-height:1.45;margin-top:9px}
 .story-tags{gap:5px;margin-top:10px}.story-tags span{font-size:8px;padding:6px 8px}.story-link{min-width:160px;margin-top:12px;padding-bottom:6px;font-size:8px}.story-link span{font-size:16px}
 .memory-badge{width:72px;top:-20px;right:-15px;gap:2px}.memory-badge span{font-size:19px}.memory-badge b{font-size:6px}.photo-caption{left:3%;right:3%;bottom:3%;min-height:36px;padding:8px 10px;border-radius:11px}.photo-caption span{font-size:7px;letter-spacing:.12em}.photo-caption b{font-size:17px}
 .story-stats{min-height:clamp(58px,10svh,76px)}.story-stats strong{font-size:clamp(26px,7vw,35px)}.story-stats span{font-size:6px;letter-spacing:.08em}
}
@media(max-width:767px) and (max-height:500px){
 .about-reveal{grid-template-rows:minmax(0,1fr) auto;gap:8px;padding:25px 5% 0}
 .story-layout{grid-template-columns:.9fr 1.1fr;grid-template-rows:1fr;gap:5%;align-items:center}
 .story-copy{order:2}.story-photo{order:1;height:min(58svh,225px);margin:0 12px 0 0}
 .story-copy .about-kicker{margin-bottom:7px;font-size:7px}.story-copy h2{font-size:clamp(25px,5vw,34px)}.story-copy h3{font-size:11px;margin-top:8px}.story-copy .about-lead{font-size:9px;line-height:1.35;margin-top:6px}.story-tags{margin-top:7px;gap:4px}.story-tags span{font-size:6px;padding:5px 6px}.story-link{margin-top:8px;min-width:135px;font-size:7px}
 .memory-badge{width:56px;top:-32px;right:-25px}.memory-badge span{font-size:15px}.memory-badge b{font-size:5px}.photo-caption{min-height:26px;padding:5px 7px}.photo-caption span{font-size:6px}.photo-caption b{font-size:13px}
 .story-stats{min-height:53px}.story-stats strong{font-size:24px}.story-stats span{font-size:5px}
}
@media(prefers-reduced-motion:reduce){
 .about-reveal{position:relative;min-height:100svh;grid-template-rows:minmax(0,1fr) auto;gap:18px;padding:28px 5% 0}
 .about-backdrop{position:absolute;opacity:1}
 .story-layout{grid-template-columns:1fr 1fr;grid-template-rows:1fr;gap:5%}.story-photo{height:min(58svh,500px)}.story-copy{order:2}
}
@media(max-width:767px) and (max-height:680px){
 .about-reveal{gap:9px;padding:18px 5% 0}
 .story-photo{height:min(31svh,210px)}
 .story-copy .about-kicker{margin-bottom:7px}
 .story-copy h2{font-size:clamp(27px,7.4vw,35px)}
 .story-copy h3{font-size:12px;margin-top:8px}
 .story-copy .about-lead{font-size:10px;line-height:1.38;margin-top:7px}
 .story-tags{margin-top:8px;gap:4px}.story-tags span{font-size:7px;padding:5px 7px}
 .story-link{margin-top:9px}
 .story-stats{min-height:52px}
}

/* Fourth screen: destination showcase on a warm, quiet editorial canvas. */
.places-backdrop{position:absolute;z-index:8;inset:0;opacity:var(--places-backdrop-progress,0);pointer-events:none;background:radial-gradient(ellipse at 6% 12%,rgba(255,255,255,.76),transparent 38%),linear-gradient(112deg,#f7f3e9 0%,#f4f0e6 54%,#eaf0eb 100%)}
.places-backdrop::after{content:"";position:absolute;inset:0 0 0 auto;width:37%;opacity:.22;background:repeating-radial-gradient(ellipse at 100% 43%,transparent 0 20px,rgba(89,121,126,.3) 21px 22px,transparent 23px 36px);mask-image:linear-gradient(90deg,transparent,#000 35%)}
.places-reveal{position:absolute;z-index:9;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(24px,4vh,42px);padding:clamp(32px,8.6vh,82px) 5% 5.2vh;color:#173638;opacity:var(--places-progress,0);pointer-events:none}
.places-heading{display:grid;grid-template-columns:1.2fr .55fr;align-items:end;gap:7%;width:min(100%,1480px);margin-inline:auto}
.places-kicker{display:flex;align-items:center;gap:13px;margin:0 0 25px;color:inherit;font-size:11px;font-weight:800;letter-spacing:.2em}.places-kicker span{width:34px;height:2px;background:#ff641a}
.places-title-group h2{margin:0;font-size:clamp(48px,5.1vw,76px);line-height:.99;letter-spacing:-.065em;font-weight:760;color:#122d37}.places-title-group h2 em{font-family:Georgia,serif;font-weight:400;color:inherit;letter-spacing:-.045em}
.places-intro{max-width:390px;margin:0 0 4px auto}.places-intro>p{margin:0;color:inherit;font-size:clamp(14px,1.12vw,17px);line-height:1.8}
.places-controls{display:flex;gap:13px;margin-top:23px}.places-control{display:grid;place-items:center;width:49px;height:49px;border:1px solid rgba(37,70,83,.56);border-radius:50%;background:rgba(255,255,255,.22);color:inherit;font:400 20px/1 Arial,sans-serif;cursor:pointer;pointer-events:auto;transition:background .2s,color .2s,transform .2s}.places-control:hover{background:#173743;color:#fff;transform:translateY(-2px)}
.destination-card{position:relative;isolation:isolate;min-height:0;width:min(100%,1480px);margin:0 auto;overflow:hidden;border-radius:clamp(20px,2vw,30px);background:#316269;box-shadow:0 24px 70px rgba(24,49,59,.16)}
.destination-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 58%;transition:opacity .32s ease,transform 1.2s cubic-bezier(.2,.7,.2,1);transform:scale(1.015)}.destination-card:hover .destination-image{transform:scale(1.04)}
.destination-index{position:absolute;z-index:2;top:clamp(22px,3.7vh,38px);left:clamp(22px,2.7vw,42px);margin:0;color:rgba(255,255,255,.94);font-size:clamp(9px,.78vw,12px);font-weight:750;letter-spacing:.2em}.destination-index span{padding:0 10px;color:#b4fbef}.destination-index b{font-weight:750}
.destination-shade{position:absolute;z-index:1;inset:30% 0 0;background:linear-gradient(180deg,transparent 0%,rgba(4,29,39,.1) 30%,rgba(4,27,36,.76) 100%)}
.destination-caption{position:absolute;z-index:2;left:clamp(28px,3vw,46px);bottom:clamp(28px,4.5vh,48px);color:#fff}.destination-region{margin:0 0 12px;font-size:clamp(9px,.8vw,12px);font-weight:800;letter-spacing:.2em}.destination-caption h3{margin:0;font-size:clamp(70px,9vw,142px);line-height:.9;letter-spacing:-.075em;font-weight:760}.destination-description{margin:16px 0 0;font-size:clamp(14px,1.25vw,19px);line-height:1.5;color:rgba(255,255,255,.94)}
.destination-open{position:absolute;z-index:3;right:clamp(26px,3vw,46px);bottom:clamp(26px,4.5vh,48px);display:grid;place-items:center;width:clamp(52px,5vw,76px);aspect-ratio:1;border:1px solid rgba(255,255,255,.58);border-radius:50%;background:rgba(255,255,255,.06);color:#fff;font:400 clamp(22px,2vw,30px)/1 Arial,sans-serif;cursor:pointer;pointer-events:auto;transition:background .2s,transform .2s}.destination-open:hover{background:#f76829;transform:rotate(45deg)}
@media(max-width:767px){
 .places-reveal{grid-template-rows:auto minmax(0,1fr);gap:19px;padding:24px 5.5% 5svh}
 .places-heading{grid-template-columns:1fr;gap:14px;align-items:start}.places-kicker{font-size:8px;gap:9px;margin-bottom:12px}.places-kicker span{width:24px}
 .places-title-group h2{font-size:clamp(34px,9vw,47px);line-height:1.02}.places-intro{max-width:100%;margin:0;display:flex;align-items:center;justify-content:space-between;gap:10px}.places-intro>p{max-width:330px;font-size:11px;line-height:1.5}.places-controls{flex:0 0 auto;gap:7px;margin:0}.places-control{width:35px;height:35px;font-size:15px}
 .destination-card{border-radius:18px}.destination-image{object-position:58% center}.destination-index{top:17px;left:17px;font-size:7px;letter-spacing:.14em}.destination-index span{padding:0 5px}.destination-caption{left:19px;bottom:22px}.destination-region{font-size:8px;margin-bottom:8px}.destination-caption h3{font-size:clamp(50px,14vw,76px)}.destination-description{font-size:11px;margin-top:9px}.destination-shade{inset:22% 0 0}.destination-open{right:16px;bottom:17px;width:43px;font-size:19px}
}
@media(max-width:767px) and (max-height:680px){.places-reveal{gap:13px;padding-top:17px}.places-kicker{margin-bottom:8px}.places-title-group h2{font-size:clamp(30px,7.5vw,39px)}.places-intro>p{font-size:9px}.destination-card{min-height:0}.destination-caption h3{font-size:clamp(44px,11vw,63px)}.destination-description{font-size:10px}}
@media(max-width:767px) and (max-height:500px){.places-reveal{grid-template-rows:auto minmax(0,1fr);padding:14px 4% 3vh}.places-heading{grid-template-columns:1fr .78fr;gap:4%;align-items:end}.places-title-group h2{font-size:clamp(25px,5vw,34px)}.places-kicker{font-size:6px;margin-bottom:6px}.places-intro>p{font-size:8px}.places-control{width:30px;height:30px}}
@media(prefers-reduced-motion:reduce){.places-backdrop{display:none}.places-reveal{position:relative;inset:auto;min-height:100svh;opacity:1;transform:none;pointer-events:auto;padding:44px 5% 5vh;background:linear-gradient(112deg,#f7f3e9 0%,#f4f0e6 54%,#eaf0eb 100%)}.destination-card{min-height:58svh}}

/* Third screen: tropical map atmosphere with editorial serif styling. */
.features-reveal{isolation:isolate;background:linear-gradient(90deg,rgba(2,28,39,.97) 0%,rgba(2,29,40,.94) 43%,rgba(2,30,42,.62) 72%,rgba(2,30,42,.28) 100%),linear-gradient(0deg,rgba(2,25,34,.88),transparent 62%),url("assets/island-clean-4k-1.png") center 44%/cover no-repeat;color:#f7f5ee}
.features-reveal::before{content:"A2A";position:absolute;z-index:-1;right:2%;left:auto;bottom:-.06em;top:auto;color:rgba(77,166,255,.045);font-size:clamp(140px,17vw,290px);font-family:Arial,sans-serif;font-weight:800;letter-spacing:-.06em;line-height:1;pointer-events:none}
.features-reveal::after{content:"";position:absolute;z-index:-1;left:-80px;bottom:-190px;width:310px;height:310px;border:1px solid rgba(89,178,191,.2);border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(89,178,191,.2) 0deg 1deg,transparent 1deg 15deg);mask-image:radial-gradient(circle,transparent 0 13%,#000 14% 15%,transparent 16% 47%,#000 48% 49%,transparent 50% 67%,#000 68% 69%,transparent 70%);pointer-events:none}
.features-heading,.feature-cards{position:relative;z-index:1}
.features-heading h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(44px,5.2vw,74px);font-weight:500;letter-spacing:-.045em;line-height:1.05}
.features-heading h2 em{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:500;color:#ff681f}
.features-intro{border-left:1px solid rgba(221,241,238,.6);padding-left:24px;color:inherit;font-size:15px;line-height:1.9}
.feature-card{background:linear-gradient(145deg,rgba(18,58,74,.61),rgba(4,36,48,.73) 70%);border-color:rgba(233,106,53,.38);box-shadow:0 16px 45px rgba(1,15,21,.22),inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(12px) saturate(110%);-webkit-backdrop-filter:blur(12px) saturate(110%)}
.feature-icon{width:78px;height:78px;border-radius:50%;background:radial-gradient(circle at 35% 25%,rgba(220,238,227,.28),rgba(8,51,68,.72) 70%);border-color:rgba(233,106,53,.42);box-shadow:0 7px 24px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.14)}
.feature-icon svg{stroke:#ffe3c5}.feature-card h3{max-width:220px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(21px,2vw,29px);font-weight:600;line-height:1.12;letter-spacing:-.025em}
.feature-card h3::after{content:"";display:block;width:35px;height:2px;margin-top:17px;background:#ff6b22}
.feature-card p{max-width:210px;color:#dfdad5;font-size:14px;font-weight:450;line-height:1.6}
.feature-arrow{background:rgba(2,31,43,.22);border-color:rgba(233,244,242,.7)}
@media(max-width:1050px){
 .features-reveal{background-position:center,center,58% center}
 .features-heading h2{font-size:clamp(40px,5.6vw,60px)}.features-intro{padding-left:17px;font-size:13px}
 .feature-icon{width:59px;height:59px}.feature-card h3{font-size:clamp(18px,2.3vw,23px)}.feature-card h3::after{margin-top:11px}
}
@media(max-width:767px){
 .features-reveal{background:linear-gradient(90deg,rgba(2,28,39,.91),rgba(2,29,40,.78)),linear-gradient(0deg,rgba(2,25,34,.84),rgba(2,25,34,.16)),url("assets/island-clean-4k-1.png") 58% center/cover no-repeat}
 .features-reveal::before{top:0;font-size:38vw}.features-reveal::after{left:-150px;bottom:-205px;opacity:.7}
 .features-heading h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(33px,8.5vw,48px);line-height:1.03}
 .features-intro{border-left:1px solid rgba(221,241,238,.52);padding-left:12px;font-size:11px;line-height:1.6}
 .feature-card{background:linear-gradient(145deg,rgba(18,58,74,.72),rgba(4,36,48,.81) 70%);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
 .feature-icon{width:42px;height:42px}.feature-icon svg{width:22px;height:22px}
 .feature-card h3{font-family:Georgia,"Times New Roman",serif;font-size:clamp(12px,3.3vw,16px);line-height:1.08;max-width:115px;margin-top:13px}
 .feature-card h3::after{width:24px;margin-top:8px}.feature-card p{font-size:9px;line-height:1.42;max-width:100%}
}
@media(prefers-reduced-motion:reduce){.features-reveal{background:linear-gradient(90deg,rgba(2,28,39,.97),rgba(2,29,40,.8)),url("assets/island-clean-4k-1.png") center/cover no-repeat}}

/* A calm, map-like reveal carries the dark tropical screen into the warm destination page. */
.places-backdrop{opacity:1;clip-path:circle(var(--places-wipe-radius,0px) at 86% 72%);will-change:clip-path}
.places-reveal{opacity:1}
.places-reveal{clip-path:circle(var(--places-wipe-radius,0px) at 86% 72%);will-change:clip-path}
.places-heading{opacity:var(--places-progress,0);transform:translate3d(0,var(--places-heading-shift,26px),0);will-change:opacity,transform}
.destination-card{opacity:var(--places-progress,0);transform:translate3d(0,var(--places-card-shift,38px),0) scale(var(--places-card-scale,.965));transform-origin:center 72%;will-change:opacity,transform}
@media(max-width:767px){.places-backdrop,.places-reveal{clip-path:circle(var(--places-wipe-radius,0px) at 82% 64%)}.places-heading{transform:translate3d(0,var(--places-heading-shift,26px),0)}.destination-card{transform:translate3d(0,var(--places-card-shift,38px),0) scale(var(--places-card-scale,.965));transform-origin:center 60%}}
@media(prefers-reduced-motion:reduce){.places-backdrop,.places-reveal{clip-path:none;opacity:1}.places-reveal,.places-heading,.destination-card{opacity:1;transform:none;will-change:auto}}

/* Premium 3D handoff from the tropical feature scene into destinations. */
.features-reveal{background:linear-gradient(90deg,rgba(2,28,39,.97) 0%,rgba(2,29,40,.94) 43%,rgba(2,30,42,.62) 72%,rgba(2,30,42,.28) 100%),linear-gradient(0deg,rgba(2,25,34,.88),transparent 62%),url("assets/island-clean-4k-1.png") center 44%/cover no-repeat;color:#f7f5ee;transform:perspective(1500px) translate3d(0,0,var(--features-depth,0px)) rotateX(var(--features-tilt,0deg)) scale(var(--features-scene-scale,1));transform-origin:center 72%;backface-visibility:hidden;will-change:transform,opacity}
.features-heading h2,.features-heading h2 em,.feature-card h3{font-family:Georgia,"Times New Roman",serif}
.features-heading h2{font-weight:500;letter-spacing:-.045em;line-height:1.05}.features-heading h2 em{font-style:italic;font-weight:500;color:#ff681f}
.features-intro{border-left:1px solid rgba(221,241,238,.6);padding-left:24px;color:inherit;font-size:15px;line-height:1.9}
.feature-card{background:linear-gradient(145deg,rgba(18,58,74,.68),rgba(4,36,48,.82) 70%);border-color:rgba(233,106,53,.38);backdrop-filter:blur(12px) saturate(110%);-webkit-backdrop-filter:blur(12px) saturate(110%)}
.feature-icon{border-radius:50%;background:radial-gradient(circle at 35% 25%,rgba(220,238,227,.28),rgba(8,51,68,.72) 70%);border-color:rgba(205,234,229,.42)}.feature-icon svg{stroke:#ffe3c5}
.feature-card h3{max-width:220px;font-size:clamp(21px,2vw,29px);font-weight:600;line-height:1.12;letter-spacing:-.025em}.feature-card h3::after{content:"";display:block;width:35px;height:2px;margin-top:15px;background:#ff6b22}
.feature-card p{max-width:210px;color:#dfdad5;font-weight:450}.feature-arrow{background:rgba(2,31,43,.22)}
.places-backdrop{clip-path:none;opacity:var(--places-backdrop-progress,0);will-change:opacity}
.places-reveal{clip-path:none;opacity:var(--places-progress,0);transform:perspective(1500px) translate3d(0,0,var(--places-depth, -115px)) rotateX(var(--places-tilt,1.5deg));transform-origin:center 65%;backface-visibility:hidden;will-change:opacity,transform}
.places-heading{opacity:1;transform:translate3d(0,var(--places-heading-shift,26px),0)}
.destination-card{opacity:1;transform:translate3d(0,var(--places-card-shift,38px),var(--places-card-depth,-95px)) rotateX(var(--places-card-tilt,2.5deg)) scale(var(--places-card-scale,.965));transform-origin:center 72%;backface-visibility:hidden}
@media(max-width:767px){
 .features-reveal{background:linear-gradient(90deg,rgba(2,28,39,.93),rgba(2,29,40,.8)),linear-gradient(0deg,rgba(2,25,34,.86),rgba(2,25,34,.16)),url("assets/island-clean-4k-1.png") 58% center/cover no-repeat}
 .features-heading h2{font-size:clamp(33px,8.5vw,48px)}.features-intro{padding-left:12px;font-size:11px;line-height:1.6}
 .feature-card{background:linear-gradient(145deg,rgba(18,58,74,.76),rgba(4,36,48,.86) 70%);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
 .feature-card h3{font-size:clamp(12px,3.3vw,16px);line-height:1.08;max-width:115px}.feature-card h3::after{width:24px;margin-top:8px}
 .feature-card p{font-size:9px;line-height:1.42;max-width:100%}.feature-icon{width:42px;height:42px}.feature-icon svg{width:22px;height:22px}
 .features-reveal{transform:perspective(1000px) translate3d(0,0,var(--features-depth,0px)) rotateX(var(--features-tilt,0deg)) scale(var(--features-scene-scale,1));transform-origin:center 75%}
 .places-reveal{transform:perspective(1000px) translate3d(0,0,var(--places-depth,-115px)) rotateX(var(--places-tilt,1.5deg));transform-origin:center 65%}
 .destination-card{transform:translate3d(0,var(--places-card-shift,38px),var(--places-card-depth,-95px)) rotateX(var(--places-card-tilt,2.5deg)) scale(var(--places-card-scale,.965));transform-origin:center 65%}
}
@media(prefers-reduced-motion:reduce){.features-reveal,.places-reveal,.destination-card{transform:none;will-change:auto}.places-backdrop{opacity:1}}

/* Mobile fit for the third screen: keep all four benefits readable in a 2x2 grid. */
@media(max-width:767px){
 .features-reveal{justify-content:center;gap:clamp(12px,2.2svh,19px);padding:calc(78px + env(safe-area-inset-top)) 5vw calc(16px + env(safe-area-inset-bottom));}
 .features-heading{grid-template-columns:minmax(0,1fr);gap:8px;width:100%;transform:translateY(calc(var(--features-heading-shift,0px) + 2px));}
 .features-kicker{font-size:8px;margin-bottom:8px;letter-spacing:.18em}
 .features-heading h2{font-size:clamp(29px,8.2vw,42px);line-height:1.02}
 .features-intro{max-width:440px;margin:0;padding-left:11px;font-size:11px;line-height:1.45}
 .feature-cards{width:100%;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;transform:none}
 .feature-card{min-height:0;padding:14px 14px 42px;border-radius:16px}
 .feature-number{top:12px;right:13px;font-size:9px}
 .feature-icon{width:42px;height:42px;border-radius:13px}
 .feature-icon svg{width:23px;height:23px}
 .feature-card h3{max-width:calc(100% - 4px);margin:12px 0 5px;font-size:clamp(13px,3.7vw,16px);line-height:1.12}
 .feature-card h3::after{width:22px;margin-top:7px}
 .feature-card p{max-width:calc(100% - 20px);font-size:10px;line-height:1.4}
 .feature-arrow{right:11px;bottom:10px;width:28px;height:28px;font-size:16px}
}
@media(max-width:767px) and (max-height:620px){
 .features-reveal{gap:10px;padding-top:calc(68px + env(safe-area-inset-top));padding-bottom:calc(10px + env(safe-area-inset-bottom))}
 .features-kicker{margin-bottom:6px;font-size:7px}
 .features-heading h2{font-size:clamp(26px,7vw,35px)}
 .features-intro{font-size:10px;line-height:1.35}
 .feature-cards{gap:8px}
 .feature-card{padding:11px 12px 36px}
 .feature-icon{width:36px;height:36px}
 .feature-icon svg{width:20px;height:20px}
 .feature-card h3{margin:8px 0 4px;font-size:12px}
 .feature-card p{font-size:9px}
 .feature-arrow{width:25px;height:25px;right:9px;bottom:8px;font-size:14px}
}
@media(max-width:767px) and (max-width:360px){
 .features-reveal{padding-inline:4vw}
 .feature-card{padding-inline:10px}
 .feature-card h3{font-size:12px}
 .feature-card p{font-size:8px}
}

/* Third screen: the full dark canvas stays fixed while the content enters. */
.features-reveal{justify-content:center;gap:clamp(34px,5vh,48px);padding:8vh 5%;background:#082835;transform:none;}
.features-heading,.feature-cards{width:min(100%,1320px);margin-inline:auto}
.features-heading{transform:translateY(var(--features-heading-shift,0px))}
@media(min-width:768px) and (max-width:1050px){
 .features-reveal{gap:32px;padding:5vh 5%}
 .feature-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .feature-card{min-height:155px;padding:20px}.feature-card h3{margin:16px 0 6px}
}
@media(max-width:767px){
 .features-reveal{justify-content:center;gap:27px;padding:105px 5% 30px;background:#082835}
 .features-heading{transform:translateY(var(--features-heading-shift,0px))}
}
@media(max-width:767px) and (max-height:760px){
 .features-reveal{gap:17px;padding:85px 5% 18px}
}
@media(max-width:767px) and (max-height:500px){
 .features-reveal{gap:12px;padding:72px 4% 10px}
}
@media(min-width:768px) and (max-height:700px){
 .features-reveal{gap:20px;padding:5vh 5%}
 .features-heading h2{font-size:clamp(34px,4.2vw,48px)}
 .feature-card{min-height:128px;padding:16px 20px}.feature-card h3{margin:15px 0 6px}
}

/* Refined feature-card alignment and premium details. */
.features-reveal{gap:clamp(60px,12vh,109px)}
.features-heading,.feature-cards{width:min(100%,1440px)}
.features-heading{transform:translateY(calc(var(--features-heading-shift,0px) + clamp(24px,4.8vh,44px)))}
.feature-cards{gap:18px;transform:translateY(clamp(24px,4.8vh,44px))}
.feature-card{min-height:clamp(240px,35vh,318px);padding:32px 30px 78px;border-color:rgba(233,106,53,.28);border-radius:24px;background:linear-gradient(145deg,rgba(10,57,75,.77),rgba(5,42,57,.9) 58%,rgba(4,36,48,.92));box-shadow:0 18px 42px rgba(1,17,23,.2),inset 0 1px 0 rgba(220,253,248,.1);backdrop-filter:blur(18px) saturate(125%);-webkit-backdrop-filter:blur(18px) saturate(125%);overflow:hidden}
.feature-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse 70% 48% at 12% 100%,rgba(25,169,191,.2),transparent 74%),linear-gradient(145deg,rgba(255,255,255,.045),transparent 40%)}
.feature-card>*{position:relative;z-index:1}
.feature-number{top:27px;right:27px;font-size:12px;letter-spacing:.04em;color:#ff7138}
.feature-icon{width:76px;height:76px;border-radius:20px;border-color:rgba(233,106,53,.3);background:linear-gradient(145deg,rgba(26,124,139,.45),rgba(12,66,88,.7));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 22px rgba(1,19,27,.18);font-size:0}
.feature-icon svg{display:block;width:34px;height:34px;fill:none;stroke:#faf6f3;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feature-card h3{margin:31px 0 9px;font-size:20px;font-weight:750;line-height:1.25;letter-spacing:-.02em}
.feature-card p{max-width:calc(100% - 28px);font-size:14px;font-weight:500;line-height:1.6;color:#c8dcd9}
.feature-arrow{position:absolute!important;z-index:2!important;right:28px;bottom:27px;width:50px;height:50px;display:grid;place-items:center;border:1px solid rgba(225,246,242,.68);border-radius:50%;color:#faf6f3;font-size:25px;font-weight:400;line-height:1;transition:background .2s,border-color .2s,transform .2s}
@media(min-width:768px) and (max-width:1050px){
 .features-reveal{gap:clamp(32px,5vh,48px)}.features-heading{transform:translateY(calc(var(--features-heading-shift,0px) + 20px))}.feature-cards{gap:12px;transform:translateY(20px)}
 .feature-card{min-height:180px;padding:22px 22px 62px;border-radius:20px}.feature-number{top:19px;right:20px;font-size:10px}.feature-icon{width:56px;height:56px;border-radius:16px}.feature-icon svg{width:27px;height:27px}.feature-card h3{font-size:16px;margin:19px 0 7px}.feature-card p{font-size:12px}.feature-arrow{width:40px;height:40px;right:20px;bottom:17px;font-size:21px}
}
@media(max-width:767px){
 .features-reveal{gap:24px;padding:105px 5% 30px}
 .features-heading{transform:translateY(calc(var(--features-heading-shift,0px) + 8px))}.feature-cards{gap:10px;transform:translateY(8px)}
 .feature-card{min-height:166px;padding:17px 15px 52px;border-radius:18px}.feature-number{top:14px;right:14px;font-size:9px}.feature-icon{width:44px;height:44px;border-radius:13px}.feature-icon svg{width:24px;height:24px}.feature-card h3{font-size:13px;margin:15px 0 5px}.feature-card p{max-width:calc(100% - 20px);font-size:10px;line-height:1.45}.feature-arrow{width:32px;height:32px;right:12px;bottom:12px;font-size:18px}
}
@media(max-width:767px) and (max-height:760px){
 .features-reveal{gap:17px;padding:85px 5% 18px}
 .feature-card{min-height:146px;padding:13px 13px 46px}.feature-number{top:11px;right:11px;font-size:8px}.feature-icon{width:36px;height:36px;border-radius:11px}.feature-icon svg{width:20px;height:20px}.feature-card h3{font-size:11px;margin:11px 0 4px}.feature-card p{font-size:9px}.feature-arrow{width:27px;height:27px;right:10px;bottom:10px;font-size:15px}
}
@media(max-width:767px) and (max-height:500px){
 .features-reveal{gap:12px;padding:72px 4% 10px}
 .feature-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
 .feature-card{min-height:132px;padding:11px 9px 39px;border-radius:13px}.feature-number{top:8px;right:8px;font-size:7px}.feature-icon{width:29px;height:29px;border-radius:9px}.feature-icon svg{width:17px;height:17px}.feature-card h3{font-size:9px;margin:9px 0 3px}.feature-card p{font-size:7px;line-height:1.3;max-width:100%}.feature-arrow{width:23px;height:23px;right:7px;bottom:7px;font-size:13px}
}

/* Keep the page handoff restrained: layered fade with a short upward glide. */
.features-reveal{background:linear-gradient(90deg,rgba(2,28,39,.97) 0%,rgba(2,29,40,.94) 43%,rgba(2,30,42,.62) 72%,rgba(2,30,42,.28) 100%),linear-gradient(0deg,rgba(2,25,34,.88),transparent 62%),url("assets/island-clean-4k-1.png") center 44%/cover no-repeat;color:#f7f5ee;transform:translate3d(0,var(--features-exit-shift,0px),0) scale(var(--features-exit-scale,1));transform-origin:center 70%;will-change:opacity,transform}
.features-heading h2,.features-heading h2 em,.feature-card h3{font-family:Georgia,"Times New Roman",serif}
.features-heading h2{font-weight:500;letter-spacing:-.045em;line-height:1.05}.features-heading h2 em{font-style:italic;font-weight:500;color:#ff681f}
.features-intro{border-left:1px solid rgba(221,241,238,.6);padding-left:24px;color:inherit;font-size:15px;line-height:1.9}
.feature-card{background:linear-gradient(145deg,rgba(18,58,74,.68),rgba(4,36,48,.82) 70%);border-color:rgba(233,106,53,.38);backdrop-filter:blur(12px) saturate(110%);-webkit-backdrop-filter:blur(12px) saturate(110%)}
.feature-icon{border-radius:50%;background:radial-gradient(circle at 35% 25%,rgba(220,238,227,.28),rgba(8,51,68,.72) 70%);border-color:rgba(205,234,229,.42)}.feature-icon svg{stroke:#ffe3c5}
.feature-card h3{max-width:220px;font-size:clamp(21px,2vw,29px);font-weight:600;line-height:1.12;letter-spacing:-.025em}.feature-card h3::after{content:"";display:block;width:35px;height:2px;margin-top:15px;background:#ff6b22}
.feature-card p{max-width:210px;color:#dfdad5;font-weight:450}.feature-arrow{background:rgba(2,31,43,.22)}
.places-backdrop{clip-path:none;opacity:var(--places-backdrop-progress,0);will-change:opacity}
.places-reveal{clip-path:none;opacity:var(--places-progress,0);transform:translate3d(0,var(--places-entry-shift,24px),0);will-change:opacity,transform}
.places-heading{opacity:1;transform:translate3d(0,calc(var(--places-entry-shift,24px) * .55),0)}
.destination-card{opacity:1;transform:translate3d(0,var(--places-card-entry-shift,24px),0) scale(var(--places-card-scale,.985));will-change:transform}
@media(max-width:767px){
 .features-reveal{background:linear-gradient(90deg,rgba(2,28,39,.93),rgba(2,29,40,.8)),linear-gradient(0deg,rgba(2,25,34,.86),rgba(2,25,34,.16)),url("assets/island-clean-4k-1.png") 58% center/cover no-repeat}
 .features-heading h2{font-size:clamp(33px,8.5vw,48px)}.features-intro{padding-left:12px;font-size:11px;line-height:1.6}
 .feature-card{background:linear-gradient(145deg,rgba(18,58,74,.76),rgba(4,36,48,.86) 70%);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
 .feature-card h3{font-size:clamp(12px,3.3vw,16px);line-height:1.08;max-width:115px}.feature-card h3::after{width:24px;margin-top:8px}.feature-card p{font-size:9px;line-height:1.42;max-width:100%}
 .feature-icon{width:42px;height:42px}.feature-icon svg{width:22px;height:22px}
}
@media(prefers-reduced-motion:reduce){.features-reveal,.places-reveal,.destination-card{transform:none;will-change:auto}.places-backdrop{opacity:1}}

/* Final mobile sizing for the feature screen: two compact rows stay inside one viewport. */
@media (max-width: 767px) {
  .features-reveal {
    justify-content: center;
    gap: clamp(10px, 1.8svh, 15px);
    padding: calc(72px + env(safe-area-inset-top)) 5vw calc(12px + env(safe-area-inset-bottom));
  }
  .features-heading {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    transform: translateY(var(--features-heading-shift, 0px));
  }
  .features-kicker { margin-bottom: 6px; font-size: 7px; letter-spacing: .17em; }
  .features-heading h2 { font-size: clamp(26px, 7.4vw, 33px); line-height: 1.01; letter-spacing: -.05em; }
  .features-intro { max-width: 100%; margin: 0; padding-left: 10px; font-size: 10px; line-height: 1.4; }
  .feature-cards {
    width: 100%;
    flex: 0 0 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, clamp(136px, 17.5svh, 154px));
    gap: 9px;
    transform: none;
  }
  .feature-card { min-height: 0; padding: 12px 12px 38px; border-radius: 16px; }
  .feature-number { top: 10px; right: 11px; font-size: 8px; }
  .feature-icon { width: 36px; height: 36px; border-radius: 12px; }
  .feature-icon svg { width: 20px; height: 20px; }
  .feature-card h3 { max-width: calc(100% - 4px); margin: 9px 0 4px; font-size: clamp(12px, 3.4vw, 14px); line-height: 1.1; }
  .feature-card h3::after { width: 20px; margin-top: 6px; }
  .feature-card p { max-width: calc(100% - 13px); font-size: 9px; line-height: 1.35; }
  .feature-arrow { right: 9px; bottom: 8px; width: 25px; height: 25px; font-size: 14px; }
}
@media (max-width: 767px) and (max-height: 620px) {
  .features-reveal { gap: 8px; padding-top: calc(64px + env(safe-area-inset-top)); padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .features-heading h2 { font-size: clamp(24px, 6.8vw, 30px); }
  .features-intro { font-size: 9px; line-height: 1.3; }
  .feature-cards { grid-template-rows: repeat(2, 128px); gap: 7px; }
  .feature-card { padding: 10px 10px 34px; }
  .feature-icon { width: 32px; height: 32px; }
  .feature-card h3 { margin-top: 7px; font-size: 11px; }
  .feature-card p { font-size: 8px; }
}

/* The card arrow opens an in-site destination detail view. */
.destination-detail {
  position: fixed;
  inset: 0;
  width: min(1320px, 92vw);
  height: min(780px, 86svh);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 28px;
  background: #092c3a;
  color: #fff;
  box-shadow: 0 30px 100px rgba(1,14,19,.48);
  pointer-events: auto;
}
.destination-detail::backdrop { background: rgba(23,11,2,.76); backdrop-filter: blur(9px); }
.destination-detail[open] { display: block; animation: destination-detail-enter .42s cubic-bezier(.2,.72,.25,1) both; }
.destination-detail-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.destination-detail-shade { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(2,22,29,.28),transparent 34%,rgba(2,21,28,.08) 52%,rgba(25,13,4,.82)); }
.destination-detail-close { position: absolute; z-index: 1; top: clamp(18px,3vw,34px); left: clamp(18px,3vw,34px); display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px; border: 1px solid rgba(255,255,255,.54); border-radius: 999px; background: rgba(3,31,43,.42); color: #fff; font: 650 13px/1 Arial,sans-serif; cursor: pointer; backdrop-filter: blur(12px); transition: background .2s, transform .2s; }
.destination-detail-close:hover { background: rgba(3,31,43,.78); transform: translateX(-2px); }
.destination-detail-close span { font-size: 21px; font-weight: 400; }
.destination-detail-copy { position: absolute; z-index: 1; left: clamp(28px,5vw,72px); right: clamp(28px,5vw,72px); bottom: clamp(34px,6vh,66px); }
.destination-detail-region { margin: 0 0 12px; color: rgba(255,255,255,.9); font-size: 11px; font-weight: 800; letter-spacing: .24em; }
.destination-detail-copy h2 { margin: 0; font-size: clamp(68px,11vw,148px); line-height: .88; letter-spacing: -.075em; }
.destination-detail-description { max-width: 560px; margin: 18px 0 19px; color: rgba(255,255,255,.94); font-size: clamp(15px,1.5vw,20px); line-height: 1.55; }
.destination-detail-category { display: inline-flex; align-items: center; min-height: 34px; padding: 0 13px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .16em; background: rgba(3,31,43,.28); backdrop-filter: blur(8px); }
@keyframes destination-detail-enter { from { opacity: 0; transform: translateY(18px) scale(.975); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media(max-width:767px) {
  .destination-detail { inset: 0; width: 100vw; height: 100svh; border: 0; border-radius: 0; }
  .destination-detail-close { top: calc(18px + env(safe-area-inset-top)); left: 5vw; }
  .destination-detail-shade { background: linear-gradient(180deg,rgba(2,22,29,.25),transparent 28%,rgba(2,21,28,.12) 48%,rgba(25,13,4,.86)); }
  .destination-detail-copy { left: 6vw; right: 6vw; bottom: calc(34px + env(safe-area-inset-bottom)); }
  .destination-detail-region { margin-bottom: 9px; font-size: 9px; }
  .destination-detail-copy h2 { font-size: clamp(60px,16vw,94px); }
  .destination-detail-description { max-width: 34ch; margin: 13px 0 15px; font-size: 15px; }
}
@media(prefers-reduced-motion:reduce) { .destination-detail[open] { animation: none; } }

/* Directional slide motion for the destination arrows. */
.places-heading,.places-intro,.places-controls,.places-control { pointer-events: auto; }
.places-controls { position: relative; z-index: 5; }
.places-control { touch-action: manipulation; }
.destination-card.is-swiping-next .destination-image { animation: destination-image-from-right .72s cubic-bezier(.2,.72,.22,1) both; }
.destination-card.is-swiping-previous .destination-image { animation: destination-image-from-left .72s cubic-bezier(.2,.72,.22,1) both; }
.destination-card.is-swiping-next .destination-index,
.destination-card.is-swiping-next .destination-caption,
.destination-card.is-swiping-next .destination-open { animation: destination-copy-from-right .48s .08s cubic-bezier(.2,.72,.22,1) both; }
.destination-card.is-swiping-previous .destination-index,
.destination-card.is-swiping-previous .destination-caption,
.destination-card.is-swiping-previous .destination-open { animation: destination-copy-from-left .48s .08s cubic-bezier(.2,.72,.22,1) both; }
@keyframes destination-image-from-right { from { opacity: .45; transform: scale(1.065) translateX(4%); } to { opacity: 1; transform: scale(1.015) translateX(0); } }
@keyframes destination-image-from-left { from { opacity: .45; transform: scale(1.065) translateX(-4%); } to { opacity: 1; transform: scale(1.015) translateX(0); } }
@keyframes destination-copy-from-right { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: translateX(0); } }
@keyframes destination-copy-from-left { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: translateX(0); } }
@media(prefers-reduced-motion:reduce) {
  .destination-card.is-swiping-next .destination-image,
  .destination-card.is-swiping-previous .destination-image,
  .destination-card.is-swiping-next .destination-index,
  .destination-card.is-swiping-next .destination-caption,
  .destination-card.is-swiping-next .destination-open,
  .destination-card.is-swiping-previous .destination-index,
  .destination-card.is-swiping-previous .destination-caption,
  .destination-card.is-swiping-previous .destination-open { animation: none; }
}

/* Keep the destination navigation on top and reliably tappable over the reveal layers. */
.places-reveal .places-heading { position: relative; z-index: 6; pointer-events: auto; }
.places-reveal .places-intro,
.places-reveal .places-controls,
.places-reveal .places-control { pointer-events: auto !important; }
.places-reveal .places-controls { position: relative; z-index: 8; }
.places-reveal .places-control { position: relative; z-index: 9; cursor: pointer; touch-action: manipulation; }

/* Fifth and sixth full-screen experiences with different, scroll-synced handoffs. */
.hero { height: 785svh; }
@media(max-width:767px) { .hero { height: 765svh; } }
.experiences-reveal {
  position:absolute; z-index:10; inset:0; display:grid;
  grid-template-rows:auto minmax(0,1fr) auto; gap:clamp(18px,3vh,30px);
  padding:clamp(38px,6.8vh,68px) 4.9% 3.2vh; overflow:hidden;
  color:#f6f7f1; background:#062936;
  opacity:var(--experiences-progress,0);
  clip-path:inset(0 0 var(--experiences-clip,100%) 0);
  transform:translate3d(0,var(--experiences-shift,28px),0);
  pointer-events:none; will-change:opacity,clip-path,transform;
}
.experiences-heading { display:grid; grid-template-columns:1.35fr .65fr; align-items:end; gap:7%; width:min(100%,1440px); margin:0 auto; transform:translateY(var(--experiences-heading-shift,18px)); }
.experiences-kicker,.transport-kicker { display:flex; align-items:center; gap:12px; margin:0 0 20px; color:inherit; font-size:10px; font-weight:800; letter-spacing:.2em; }
.experiences-kicker span,.transport-kicker span { width:30px; height:2px; background:#ff641a; }
.experiences-title-group h2 { margin:0; color:#f8faf5; font-size:clamp(44px,5.3vw,76px); line-height:.99; letter-spacing:-.065em; }
.experiences-title-group h2 em { color:inherit; font-family:Georgia,serif; font-weight:400; }
.experiences-intro { max-width:355px; margin:0 0 3px auto; color:#c8c0ba; font-size:14px; line-height:1.8; }
.experiences-intro span { display:flex; align-items:center; gap:15px; margin-top:18px; color:#f4f7f2; font-size:9px; font-weight:800; letter-spacing:.18em; }
.experiences-intro b { color:#ff641a; font-size:16px; }
.experiences-panel { display:grid; grid-template-columns:1.3fr .7fr; width:min(100%,1440px); min-height:0; margin:0 auto; overflow:hidden; border:1px solid rgba(167,220,211,.2); border-radius:26px; background:#0a3140; box-shadow:0 26px 75px rgba(1,15,21,.3); }
.experience-feature { position:relative; min-width:0; min-height:0; overflow:hidden; background:#07384b; }
.experience-image { position:absolute; inset:-2%; width:104%; height:104%; object-fit:cover; object-position:center 54%; transform:translate3d(var(--experience-image-shift,0px),0,0) scale(1.035); transition:opacity .4s ease,transform 1s cubic-bezier(.2,.72,.22,1); }
.experience-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(2,24,33,.16),transparent 36%,rgba(2,21,28,.82)),linear-gradient(90deg,rgba(2,23,31,.12),transparent 70%); }
.experience-count { position:absolute; top:clamp(20px,3.5vh,34px); left:clamp(20px,3vw,40px); display:flex; align-items:center; gap:12px; margin:0; color:rgba(255,255,255,.92); font-size:10px; font-weight:800; letter-spacing:.18em; }
.experience-count b { color:#ff7b35; font-size:13px; }.experience-count>span { width:27px; height:1px; background:rgba(255,255,255,.65); }.experience-count small { margin-left:18px; font-size:8px; letter-spacing:.16em; }
.experience-feature-copy { position:absolute; left:clamp(24px,3.8vw,54px); bottom:clamp(30px,5vh,56px); max-width:78%; color:#fff; }
.experience-feature-kicker { margin:0 0 14px; color:inherit; font-size:10px; font-weight:800; letter-spacing:.2em; }
.experience-feature-copy h3 { margin:0; font-size:clamp(56px,7vw,100px); line-height:.9; letter-spacing:-.065em; }
.experience-feature-copy h3 em { color:inherit; font-family:Georgia,serif; font-weight:400; }
.experience-feature-description { margin:20px 0 0; color:rgba(255,255,255,.9); font-size:14px; }
.experience-feature-link { display:flex; align-items:center; justify-content:space-between; width:max-content; min-width:215px; gap:24px; margin:22px 0 0; padding:0 0 9px; border-bottom:1px solid #ff641a; color:#fff; font-size:9px; font-weight:800; letter-spacing:.1em; }
.experience-feature-link b { color:#ff641a; font-size:18px; }
.experience-vertical-label { position:absolute; top:50%; right:14px; color:rgba(255,255,255,.82); font-size:7px; font-weight:800; letter-spacing:.18em; writing-mode:vertical-rl; transform:translateY(-50%); }
.experience-menu { display:flex; flex-direction:column; min-width:0; min-height:0; padding:clamp(20px,2.8vw,36px) clamp(17px,2.1vw,30px) clamp(16px,2vw,27px); background:linear-gradient(145deg,#0b3647,#082b38); }
.experience-menu-heading,.experience-menu-footer { display:flex; align-items:center; justify-content:space-between; color:inherit; font-size:8px; font-weight:800; letter-spacing:.19em; }
.experience-menu-heading { padding:0 4px 20px; border-bottom:1px solid rgba(198,229,224,.18); }.experience-menu-heading b { color:#ff641a; font-size:23px; }
.experience-options { display:flex; flex:1; flex-direction:column; min-height:0; }
.experience-option { position:relative; display:grid; grid-template-columns:26px minmax(0,1fr) 20px; align-items:center; gap:10px; min-height:0; flex:1; padding:11px 7px; border:0; border-bottom:1px solid rgba(198,229,224,.17); background:transparent; color:#fff; text-align:left; cursor:pointer; transition:background .25s,padding .25s; }
.experience-option:hover,.experience-option.is-active { padding-inline:14px; background:rgba(110,184,171,.13); }
.experience-option.is-active::before { content:""; position:absolute; left:-24px; top:0; bottom:0; width:2px; background:#ff641a; }
.experience-option-number { align-self:start; padding-top:7px; color:inherit; font-size:9px; letter-spacing:.1em; }.experience-option.is-active .experience-option-number { color:#ff8a4a; }
.experience-option-copy { display:flex; flex-direction:column; gap:7px; }.experience-option-copy strong { font-size:clamp(16px,1.7vw,23px); font-weight:650; letter-spacing:-.035em; }.experience-option-copy small { color:inherit; font-size:10px; line-height:1.35; }
.experience-option-arrow { justify-self:end; color:inherit; font-size:19px; }.experience-option.is-active .experience-option-arrow { color:#ff641a; }
.experience-menu-footer { padding:18px 4px 0; font-size:7px; }.experience-menu-footer b { color:#ff641a; font-size:15px; }
.experiences-footer,.transport-footer { display:flex; align-items:center; justify-content:space-between; width:min(100%,1440px); margin:0 auto; color:inherit; font-size:8px; font-weight:800; letter-spacing:.18em; }
.experiences-progress { width:min(30vw,420px); height:2px; background:rgba(170,218,210,.27); }.experiences-progress i { display:block; width:26%; height:100%; background:#ff641a; }

.transport-reveal {
  position:absolute; z-index:11; inset:0; display:grid;
  grid-template-rows:auto minmax(0,1fr) auto; gap:clamp(20px,3vh,30px);
  padding:clamp(40px,7.2vh,72px) 4.9% 3.2vh; overflow:hidden;
  color:inherit; background:#f4f2e9;
  opacity:var(--transport-progress,0);
  clip-path:inset(0 0 0 var(--transport-clip,100%));
  transform:translate3d(var(--transport-shift,22px),0,0) scale(var(--transport-scale,.99));
  pointer-events:none; will-change:opacity,clip-path,transform;
}
.transport-heading { display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:6%; width:min(100%,1440px); margin:0 auto; }
.transport-kicker { margin-bottom:20px; color:inherit; }.transport-heading h2 { margin:0; color:inherit; font-size:clamp(44px,5.3vw,76px); line-height:.99; letter-spacing:-.065em; }
.transport-heading h2 em { color:inherit; font-family:Georgia,serif; font-weight:400; }
.transport-intro { display:flex; align-items:center; gap:16px; justify-self:end; margin:0; padding-left:18px; border-left:1px solid #cac3be; color:#7f7771; font-size:12px; line-height:1.65; }
.transport-intro>span:first-child { color:#ff641a; font-size:25px; }.transport-intro strong { color:inherit; font-weight:700; }
.transport-panel { display:grid; grid-template-columns:1.15fr .9fr; gap:22px; width:min(100%,1440px); min-height:0; margin:0 auto; }
.transport-visual { position:relative; min-width:0; min-height:0; overflow:hidden; border-radius:24px; background:#314c56; }
.transport-visual>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 54%; transform:scale(1.025); }
.transport-visual-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(9,33,43,.18),transparent 44%,rgba(3,27,37,.76)),linear-gradient(90deg,rgba(3,31,43,.16),transparent 82%); }
.route-line { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }.route-line path { fill:none; stroke:#ff641a; stroke-width:5; stroke-linecap:round; stroke-dasharray:1300; stroke-dashoffset:var(--route-dashoffset,1300); transition:stroke-dashoffset .2s linear; }.route-line circle { fill:#ff641a; stroke:rgba(255,255,255,.85); stroke-width:3; }
.transport-visual-top { position:absolute; top:clamp(18px,2.6vw,32px); left:clamp(20px,2.5vw,34px); right:clamp(20px,2.5vw,34px); display:flex; justify-content:space-between; gap:12px; margin:0; color:#fff; font-size:8px; font-weight:800; letter-spacing:.16em; }
.transport-memory-tag { position:absolute; top:24%; right:8%; padding:10px 14px; border:1px solid rgba(255,255,255,.28); border-radius:999px; background:rgba(33,50,56,.66); color:#fff; font-size:8px; font-weight:800; letter-spacing:.14em; backdrop-filter:blur(8px); }
.transport-visual-copy { position:absolute; left:clamp(22px,3.5vw,48px); bottom:clamp(28px,4.2vh,46px); color:#fff; }.transport-visual-copy>p { margin:0 0 12px; color:#e7dfd9; font-size:9px; font-weight:800; letter-spacing:.18em; }.transport-visual-copy h3 { margin:0; font-size:clamp(48px,6vw,82px); line-height:.93; letter-spacing:-.06em; }
.transport-options-panel { display:flex; flex-direction:column; min-width:0; min-height:0; padding:clamp(20px,2.2vw,32px); border:1px solid #e0e3da; border-radius:24px; background:#fff; box-shadow:0 18px 55px rgba(32,48,54,.06); }
.transport-options-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:16px; border-bottom:1px solid #e5e7df; color:inherit; font-size:9px; font-weight:800; letter-spacing:.15em; }.transport-options-heading b { color:#ec5d22; font-weight:700; }
.transport-options-intro { max-width:470px; margin:16px 0 14px; color:inherit; font-size:12px; line-height:1.55; }
.transport-modes { display:flex; flex:1; flex-direction:column; min-height:0; }
.transport-mode { display:grid; grid-template-columns:22px 48px minmax(0,1fr) 18px; align-items:center; gap:11px; flex:1; min-height:0; padding:8px 6px; border:0; border-bottom:1px solid #e5e8e1; border-radius:5px; background:transparent; color:inherit; text-align:left; cursor:pointer; transition:background .2s,padding .2s; }
.transport-mode:hover,.transport-mode.is-active { padding-inline:11px; background:#f6f3f1; }.transport-mode-number { color:inherit; font-size:9px; }.transport-mode.is-active .transport-mode-number { color:#ef641d; }
.transport-mode-icon { display:grid; place-items:center; width:46px; height:44px; border-radius:13px; background:#eef4ef; color:inherit; }.transport-mode-icon svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.transport-mode-copy { display:flex; flex-direction:column; gap:4px; }.transport-mode-copy strong { color:inherit; font-size:16px; line-height:1.1; }.transport-mode-copy small { color:inherit; font-size:9px; line-height:1.25; }.transport-mode-arrow { justify-self:end; color:inherit; font-size:18px; }.transport-mode.is-active .transport-mode-arrow { color:#ff641a; }
.transport-selection { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:13px; padding:14px 16px; border-radius:16px; background:#0b3140; color:#fff; }.transport-selection>div { display:flex; flex-direction:column; gap:4px; }.transport-selection>div>span { color:inherit; font-size:7px; font-weight:800; letter-spacing:.18em; }.transport-selected-name { font-size:15px; }.transport-selected-detail { color:#d4ccc6; font-size:9px; }
.transport-enquire { display:flex; align-items:center; gap:13px; min-height:42px; padding:0 16px; border:0; border-radius:999px; background:#ff641a; color:#fff; font-size:10px; font-weight:750; white-space:nowrap; cursor:pointer; transition:transform .2s,background .2s; }.transport-enquire:hover { transform:translateY(-2px); background:#ea5511; }.transport-enquire span { font-size:16px; }
.transport-feedback { margin:10px 0 0; color:#a49f9a; font-size:8px; line-height:1.35; }.transport-footer { color:inherit; }

@media(max-width:1050px) and (min-width:768px) {
 .experiences-reveal,.transport-reveal { padding-inline:4%; }
 .experiences-panel { grid-template-columns:1.1fr .9fr; }.experience-menu { padding-inline:19px; }
 .experience-feature-copy h3 { font-size:clamp(52px,7vw,76px); }
 .transport-panel { grid-template-columns:1fr 1fr; gap:15px; }.transport-options-panel { padding:20px; }
}
@media(max-width:767px) {
 .experiences-reveal { grid-template-rows:auto minmax(0,1fr) auto; gap:13px; padding:calc(76px + env(safe-area-inset-top)) 4.5vw calc(14px + env(safe-area-inset-bottom)); }
 .experiences-heading { grid-template-columns:1fr; gap:8px; }.experiences-kicker { margin-bottom:8px; font-size:7px; }.experiences-title-group h2 { font-size:clamp(29px,7.5vw,39px); }
 .experiences-intro { max-width:100%; margin:0; font-size:10px; line-height:1.4; }.experiences-intro span { display:none; }
 .experiences-panel { grid-template-columns:1fr; grid-template-rows:minmax(0,.88fr) minmax(0,1fr); border-radius:18px; }
 .experience-count { top:13px; left:15px; gap:7px; font-size:8px; }.experience-count small { margin-left:8px; font-size:6px; }
 .experience-feature-copy { left:17px; bottom:16px; max-width:88%; }.experience-feature-kicker { margin-bottom:7px; font-size:7px; }.experience-feature-copy h3 { font-size:clamp(36px,10vw,53px); }.experience-feature-description { margin-top:8px; font-size:10px; }.experience-feature-link { min-width:0; gap:14px; margin-top:9px; padding-bottom:4px; font-size:7px; }
 .experience-vertical-label { right:7px; font-size:5px; }.experience-menu { padding:11px 14px 10px; }.experience-menu-heading { padding:0 2px 7px; font-size:6px; }.experience-menu-heading b { font-size:17px; }
 .experience-option { grid-template-columns:19px minmax(0,1fr) 14px; gap:6px; padding:5px 4px; }.experience-option.is-active { padding-inline:8px; }.experience-option.is-active::before { left:-15px; }.experience-option-number { font-size:7px; }.experience-option-copy { gap:3px; }.experience-option-copy strong { font-size:clamp(12px,3.6vw,15px); }.experience-option-copy small { font-size:8px; }.experience-option-arrow { font-size:15px; }.experience-menu-footer { padding:7px 2px 0; font-size:6px; }
 .experiences-footer,.transport-footer { font-size:6px; letter-spacing:.12em; }.experiences-progress { width:17vw; }
 .transport-reveal { grid-template-rows:auto minmax(0,1fr) auto; gap:12px; padding:calc(76px + env(safe-area-inset-top)) 4.5vw calc(13px + env(safe-area-inset-bottom)); }
 .transport-heading { grid-template-columns:1fr; gap:8px; }.transport-kicker { margin-bottom:8px; font-size:7px; }.transport-heading h2 { font-size:clamp(29px,7.5vw,39px); }.transport-intro { justify-self:start; gap:8px; padding-left:10px; font-size:9px; line-height:1.35; }.transport-intro>span:first-child { font-size:18px; }
 .transport-panel { grid-template-columns:1fr; grid-template-rows:minmax(0,.72fr) minmax(0,1.28fr); gap:9px; }
 .transport-visual { border-radius:16px; }.transport-visual>img { object-position:center 48%; }.transport-visual-top { top:11px; left:12px; right:12px; font-size:6px; }.transport-memory-tag { top:20%; right:6%; padding:6px 9px; font-size:6px; }.transport-visual-copy { left:15px; bottom:12px; }.transport-visual-copy>p { margin-bottom:5px; font-size:6px; }.transport-visual-copy h3 { font-size:clamp(32px,8vw,45px); }
 .transport-options-panel { padding:10px 12px 9px; border-radius:16px; overflow:auto; }.transport-options-heading { padding-bottom:8px; font-size:7px; }.transport-options-intro { margin:7px 0 6px; font-size:9px; line-height:1.32; }.transport-modes { flex:0 0 auto; }
 .transport-mode { grid-template-columns:16px 34px minmax(0,1fr) 14px; gap:7px; min-height:34px; padding:3px 3px; }.transport-mode:hover,.transport-mode.is-active { padding-inline:6px; }.transport-mode-number { font-size:7px; }.transport-mode-icon { width:32px; height:30px; border-radius:9px; }.transport-mode-icon svg { width:22px; height:22px; }.transport-mode-copy { gap:2px; }.transport-mode-copy strong { font-size:12px; }.transport-mode-copy small { font-size:7px; }.transport-mode-arrow { font-size:14px; }
 .transport-selection { gap:7px; margin-top:7px; padding:7px 9px; border-radius:11px; }.transport-selection>div { gap:2px; }.transport-selection>div>span { font-size:6px; }.transport-selected-name { font-size:11px; }.transport-selected-detail { font-size:7px; }.transport-enquire { gap:6px; min-height:30px; padding:0 10px; font-size:8px; }.transport-enquire span { font-size:12px; }.transport-feedback { margin-top:5px; font-size:6px; }
}
@media(max-width:380px) {
 .experience-option-copy strong { font-size:11px; }.experience-option-copy small { font-size:7px; }
 .transport-heading h2,.experiences-title-group h2 { font-size:28px; }
 .transport-mode-copy strong { font-size:11px; }.transport-enquire { font-size:7px; }
}
@media(prefers-reduced-motion:reduce) {
 .hero { height:auto; }
 .experiences-reveal,.transport-reveal { position:relative; inset:auto; min-height:100svh; opacity:1; clip-path:none; transform:none; pointer-events:auto; }
 .experiences-reveal { grid-template-rows:auto minmax(0,1fr) auto; }
 .transport-reveal { grid-template-rows:auto minmax(0,1fr) auto; }
}

/* Warm orange accent for the About page story headline. */
.about-reveal .story-copy h2 em { color: inherit; }

/* Give the About page island-card headline the same warm accent. */
.about-reveal .island-caption h3 { color: inherit; }

/* Restore cool text defaults; keep orange on the two requested story highlights. */
.about-reveal { color:#173638; }
.places-reveal { color:#173638; }
.experiences-reveal { color:#f6f7f1; }
.transport-reveal { color:#173638; }
.story-copy h2 em,.about-reveal .island-caption h3 { color:#e96a35; }

/* Use orange only where the design uses teal text; navy/blue text stays unchanged. */
.destination-kicker,.island-caption p,.destination-index span,.feature-card p,.about-copy h2 em,.places-title-group h2 em,.story-copy h2 em,.experiences-title-group h2 em,.experience-feature-copy h3 em,.transport-heading h2 em { color:#e96a35; }

/* Story highlights use the requested orange accent. */
.about-reveal .story-copy h2 em,.photo-caption span { color:#e96a35; }

.destination-reveal .destination-kicker { color:#fff; }

/* Full-bleed site footer, attached to the bottom edge without side borders. */
.site-footer{position:relative;isolation:isolate;width:100%;overflow:hidden;background:#062b39;color:#eaf3f2}
.site-footer::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(105deg,rgba(2,27,37,.96),rgba(3,40,52,.94)),url("assets/island-hero-4k.webp") center 62%/cover no-repeat;pointer-events:none}
.footer-shell{width:100%;max-width:1500px;margin:0 auto;padding:clamp(28px,4.2vw,56px) clamp(22px,5vw,76px) 16px}
.footer-grid{display:grid;grid-template-columns:minmax(240px,1.5fr) repeat(2,minmax(130px,.78fr)) minmax(190px,1.1fr);gap:clamp(24px,5vw,76px);padding-bottom:35px}
.footer-brand{min-width:0}.footer-logo{display:inline-flex;align-items:center;width:clamp(125px,12vw,178px);margin:0 0 10px}.footer-logo img{display:block;width:100%;height:auto;object-fit:contain}
.footer-brand>p,.footer-contact>p{margin:0;color:rgba(226,239,238,.7);font-size:12px;line-height:1.7}
.footer-socials{display:flex;gap:9px;margin-top:18px}.footer-socials a{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(207,235,231,.28);border-radius:50%;color:#f1f7f5;transition:background .2s,border-color .2s,color .2s,transform .2s}.footer-socials a:hover{transform:translateY(-2px);border-color:#ff7138;background:rgba(255,113,56,.14);color:#ff9569}.footer-socials svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.footer-socials a:nth-child(2) svg,.footer-socials a:nth-child(3) svg{fill:currentColor;stroke:none}
.footer-column{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding-top:8px}.footer-column h2{margin:0 0 6px;color:#ff9569;font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.footer-column>a,.footer-column>p{margin:0;color:rgba(235,244,242,.84);font-size:12px;line-height:1.45;transition:color .2s}.footer-column>a:hover{color:#ff9569}.footer-contact{white-space:nowrap}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:13px;border-top:1px solid rgba(210,234,230,.35);color:rgba(219,234,232,.62);font-size:8px;letter-spacing:.025em}.footer-bottom span:last-child{color:#f0f5f2;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
@media(max-width:760px){.footer-shell{padding:30px 6vw 15px}.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 22px;padding-bottom:25px}.footer-brand{grid-column:1/-1}.footer-logo{width:142px}.footer-brand>p{font-size:11px}.footer-socials{margin-top:13px}.footer-column{gap:8px;padding-top:0}.footer-column h2{margin-bottom:3px}.footer-contact{white-space:normal}.footer-column>a,.footer-column>p{font-size:11px}.footer-bottom{font-size:7px;line-height:1.5}.footer-bottom span:last-child{text-align:right}}
@media(max-width:380px){.footer-grid{gap:22px 15px}.footer-bottom{flex-direction:column;gap:6px}.footer-bottom span:last-child{text-align:left}}

/* Keep the original floating header fixed above every section and footer. */
:root{--global-header-clearance:calc(clamp(76px,7.3vw,112px) + clamp(14px,1.26vw,22px) + 14px)}
.header{position:fixed;z-index:1000;transform:none;opacity:1;will-change:auto}
.about-reveal,.places-reveal,.experiences-reveal,.transport-reveal{padding-top:var(--global-header-clearance)}
.features-reveal{padding-top:max(var(--global-header-clearance),12vh)}
.footer-shell{padding-top:calc(var(--global-header-clearance) + 20px)}
@media(max-width:767px){.footer-shell{padding-top:calc(var(--global-header-clearance) + 12px)}}

/* Final alignment pass for the five scroll chapters under the fixed header. */
.about-reveal,.features-reveal,.places-reveal,.experiences-reveal,.transport-reveal{box-sizing:border-box;min-width:0}
.story-layout,.story-copy,.story-photo,.features-heading,.feature-cards,.feature-card,.places-heading,.places-intro,.destination-card,.experiences-heading,.experiences-panel,.experience-feature,.experience-menu,.transport-heading,.transport-panel,.transport-visual,.transport-options-panel{min-width:0}
@media(max-width:767px){
  :root{--global-header-clearance:calc(72px + 14px + env(safe-area-inset-top) + 10px)}
  .header{top:calc(12px + env(safe-area-inset-top))}
  .about-reveal,.features-reveal,.places-reveal,.experiences-reveal,.transport-reveal{padding-left:5vw;padding-right:5vw}
  .about-reveal{gap:clamp(10px,1.8svh,15px);padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .story-copy .about-lead{font-size:12px;line-height:1.48}
  .story-tags span{font-size:8px}
  .story-link{font-size:9px}
  .story-stats span{font-size:7px}
  .features-intro{font-size:11px;line-height:1.48}
  .feature-card p{font-size:9px;line-height:1.4}
  .places-intro>p{font-size:12px;line-height:1.5}
  .places-control{flex:0 0 auto}
  .experiences-intro{font-size:11px;line-height:1.48}
  .experience-option-copy small{font-size:8px;line-height:1.3}
  .experiences-footer,.transport-footer{font-size:7px;letter-spacing:.08em}
  .transport-intro{font-size:10px}
  .transport-options-panel{overflow:hidden}
  .transport-options-intro{font-size:10px;line-height:1.38}
  .transport-mode-copy strong{font-size:13px}
  .transport-mode-copy small{font-size:8px}
  .transport-feedback{font-size:7px}
}
@media(max-width:767px) and (max-height:620px){
  .transport-options-panel{overflow:auto}
  .transport-options-intro{margin:5px 0;font-size:9px}
  .transport-mode{min-height:32px}
  .transport-feedback{font-size:7px}
}

/* Page two package showcase, aligned below the fixed navigation. */
.packages-reveal{grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(14px,2.3vh,24px);padding:var(--global-header-clearance) clamp(24px,4vw,68px) clamp(12px,2vh,20px);background:#f5f3ec;color:#142d35}
.packages-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px;min-width:0}
.packages-heading-copy{min-width:0;max-width:900px}.packages-kicker{display:flex;align-items:center;gap:10px;margin:0 0 10px;color:#17343b;font-size:10px;font-weight:800;letter-spacing:.17em}.packages-kicker span{width:30px;height:2px;background:#ff641a}
.packages-heading h2{margin:0;color:#102c35;font:800 clamp(34px,4vw,58px)/1.04 var(--font-display,"Outfit","Plus Jakarta Sans",sans-serif);letter-spacing:-.035em}.packages-heading h2 em{color:#0e6eb8;font-style:normal;font-weight:800}
.packages-intro{max-width:670px;margin:9px 0 0;color:#58676a;font-size:clamp(12px,1.12vw,16px);line-height:1.55}.packages-view-all{display:flex;align-items:center;gap:10px;margin:0 1px 4px 0;padding:10px 0;border:0;background:none;color:#132e36;font:700 15px Arial,sans-serif;cursor:pointer;white-space:nowrap}.packages-view-all span{color:#ed6836;font-size:21px;transition:transform .2s}.packages-view-all:hover span{transform:translateX(4px)}
.package-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.55vw,24px);min-width:0;min-height:0}
.package-card{display:grid;grid-template-rows:minmax(150px,.88fr) minmax(0,1.12fr);min-width:0;min-height:0;overflow:hidden;border:1px solid rgba(27,49,53,.08);border-radius:19px;background:#fffdfa;box-shadow:0 12px 34px rgba(36,47,43,.09)}
.package-visual{position:relative;min-width:0;min-height:0;overflow:hidden;background:#d7e1de;isolation:isolate}.package-visual:after{content:"";position:absolute;z-index:0;inset:38% 0 0;background:linear-gradient(180deg,transparent,rgba(3,24,31,.72));pointer-events:none}.package-visual>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 50%;transition:transform .65s cubic-bezier(.2,.7,.2,1)}.package-card:hover .package-visual>img{transform:scale(1.035)}
.package-badge,.package-booking{position:absolute;z-index:1;top:14px;display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:99px;color:white;font-size:10px;font-weight:750;box-shadow:0 4px 14px #04181f33}.package-badge{left:14px;background:#f05c38}.package-badge--blue{background:#155b77}.package-badge--quiet{background:#193f49}.package-booking{right:13px;gap:7px;background:#0c2228dd;backdrop-filter:blur(8px)}.package-booking i{width:8px;height:8px;border-radius:50%;background:#35c78c;box-shadow:0 0 8px #35c78c99}.package-location{position:absolute;z-index:1;left:16px;bottom:13px;color:white;font-size:9px;font-weight:800;letter-spacing:.14em}.package-location span{color:#ff7041}.package-dots{position:absolute;z-index:1;right:15px;bottom:14px;display:flex;align-items:center;gap:7px}.package-dots i{width:7px;height:7px;border-radius:50%;background:#ffffff88}.package-dots .is-active{width:20px;border-radius:99px;background:white}
.package-content{display:flex;flex-direction:column;min-width:0;min-height:0;padding:clamp(11px,1.3vw,19px) clamp(12px,1.45vw,21px)}.package-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#647275;font-size:clamp(10px,.95vw,13px);white-space:nowrap}.package-duration b{margin-right:5px;color:#f05e35;font-size:16px}.package-rating{color:#20383d;font-weight:750}.package-rating b{margin-right:3px;color:#e7a11c;font-size:16px}.package-rating small{color:#778184;font-size:.9em;font-weight:500}
.package-content h3{margin:10px 0 3px;color:#142f38;font-size:clamp(15px,1.42vw,21px);font-weight:750;letter-spacing:-.025em;line-height:1.2}.package-content h3 span{font-size:.76em}.package-description{min-height:2.7em;margin:0;color:#647174;font-size:clamp(10px,.95vw,13px);line-height:1.45}
.package-stops{display:flex;align-items:center;gap:7px;min-width:0;overflow:hidden;margin:8px 0;padding:8px 9px;border-radius:11px;background:#f4f2ec;color:#273a3e;font-size:clamp(9px,.82vw,11px);white-space:nowrap}.package-stops span{display:flex;align-items:center;gap:4px;min-width:0}.package-stops span b{padding:3px 5px;border:1px solid #e3e3da;border-radius:5px;background:#fff;font-size:9px}.package-stops>i{flex:0 0 1px;height:14px;background:#d2d8d3}
.package-perks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:5px;min-height:42px;margin:1px 0 7px}.package-perks>span{display:flex;align-items:center;gap:4px;min-width:0;color:#283c41;font-size:clamp(8px,.73vw,10px);line-height:1.2}.package-perks svg{flex:0 0 19px;width:19px;height:19px;fill:none;stroke:#1c3940;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.package-price-row{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:auto;padding-top:9px;border-top:1px solid #e8e9e2}.package-price{min-width:0}.package-savings{display:flex;align-items:center;gap:6px;margin-bottom:3px;white-space:nowrap}.package-savings s{color:#818789;font-size:clamp(9px,.83vw,11px)}.package-savings b{padding:4px 6px;border:1px solid #ffc4b2;border-radius:6px;background:#fff0eb;color:#d8422c;font-size:clamp(8px,.72vw,10px)}.package-price strong{color:#ec5424;font-size:clamp(21px,2vw,29px);font-weight:800;letter-spacing:-.045em;white-space:nowrap}.package-price small{margin-left:4px;color:#737c7d;font-size:10px;white-space:nowrap}.package-cta{display:flex;flex:0 0 auto;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 clamp(10px,1.1vw,17px);border:0;border-radius:99px;background:#f45d2b;color:white;font-size:clamp(9px,.8vw,11px);font-weight:750;cursor:pointer;transition:background .2s,transform .2s;white-space:nowrap}.package-cta:hover{transform:translateY(-2px);background:#d94a1d}.package-cta span{font-size:18px}.packages-mobile-progress{display:none}
@media(min-width:768px) and (max-height:760px){.packages-reveal{gap:13px;padding-bottom:10px}.package-card{grid-template-rows:minmax(130px,.8fr) minmax(0,1.2fr)}.package-content{padding-top:9px;padding-bottom:9px}.package-content h3{margin-top:6px}.package-stops{margin:5px 0;padding:6px}.package-perks{min-height:34px;margin-bottom:4px}.package-cta{min-height:35px}}
@media(max-width:1100px) and (min-width:768px){.packages-reveal{padding-inline:3.4vw}.package-grid{gap:11px}.package-card{grid-template-rows:minmax(130px,.7fr) minmax(0,1.3fr)}.package-content{padding:10px}.package-stops{gap:4px;padding:7px}.package-perks{gap:2px}.package-perks>span{gap:2px;font-size:8px}.package-perks svg{flex-basis:16px;width:16px;height:16px}.package-cta{min-height:34px;padding-inline:9px}}
@media(max-width:767px){
 .packages-reveal{grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(9px,1.6svh,14px);padding:var(--global-header-clearance) 5vw calc(12px + env(safe-area-inset-bottom))}
 .packages-heading{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:7px}.packages-kicker{gap:7px;margin-bottom:6px;font-size:8px;letter-spacing:.13em}.packages-kicker span{width:20px}.packages-heading h2{font-size:clamp(26px,7vw,36px);line-height:1.02}.packages-intro{max-width:490px;margin-top:6px;font-size:10px;line-height:1.35}.packages-view-all{gap:5px;margin-bottom:0;font-size:11px}.packages-view-all span{font-size:16px}
 .package-grid{grid-auto-flow:column;grid-auto-columns:minmax(0,88%);grid-template-columns:none;gap:11px;overflow-x:auto;overflow-y:hidden;padding:1px 2px 5px;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}.package-grid::-webkit-scrollbar{display:none}.package-card{grid-template-rows:minmax(130px,34%) minmax(0,1fr);height:100%;scroll-snap-align:center;border-radius:16px}
 .package-badge,.package-booking{top:9px;min-height:25px;padding-inline:9px;font-size:8px}.package-badge{left:9px}.package-booking{right:8px}.package-location{left:11px;bottom:9px;font-size:7px}.package-dots{right:10px;bottom:10px;gap:5px}.package-dots i{width:6px;height:6px}.package-dots .is-active{width:16px}
 .package-content{padding:9px 10px}.package-meta{font-size:9px}.package-duration b,.package-rating b{font-size:14px}.package-content h3{margin:6px 0 2px;font-size:clamp(14px,4vw,17px)}.package-description{min-height:0;font-size:9px;line-height:1.3}.package-stops{gap:5px;margin:6px 0;padding:6px;font-size:8px}.package-stops span{gap:3px}.package-stops span b{padding:2px 4px;font-size:7px}.package-stops>i{height:11px}
 .package-perks{gap:2px;min-height:33px;margin:0 0 4px}.package-perks>span{gap:2px;font-size:7px;line-height:1.12}.package-perks svg{flex-basis:15px;width:15px;height:15px}.package-price-row{gap:4px;padding-top:6px}.package-savings{gap:3px;margin-bottom:2px}.package-savings s{font-size:7px}.package-savings b{padding:3px 4px;font-size:7px}.package-price strong{font-size:clamp(17px,5vw,22px)}.package-price small{margin-left:2px;font-size:8px}.package-cta{gap:4px;min-height:31px;padding-inline:8px;font-size:8px}.package-cta span{font-size:15px}
 .packages-mobile-progress{display:flex;align-items:center;justify-content:center;gap:8px;color:#68797b;font-size:7px;font-weight:800;letter-spacing:.15em}.packages-mobile-progress i{width:20px;height:2px;border-radius:3px;background:#ed6836}
}
@media(max-width:390px){.package-grid{grid-auto-columns:minmax(0,90%)}.packages-heading h2{font-size:25px}.packages-intro{font-size:9px}.package-content{padding-inline:8px}.package-perks>span{font-size:6px}.package-perks svg{flex-basis:13px;width:13px;height:13px}.package-cta{padding-inline:6px}}
@media(prefers-reduced-motion:reduce){.package-visual>img,.packages-view-all span,.package-cta{transition:none}}


/* ==========================================================================
   A2A HOLIDAYS — ROYAL BLUE, DEEP NAVY & OBSIDIAN BLACK PREMIUM THEME
   + IPHONE GLASSWATER HEADER + BLUE AIRPLANE + MOBILE & PACKAGE CARD ALIGNMENT
   ========================================================================== */
:root {
  --a2a-blue: #0e6eb8;
  --a2a-blue-mid: #1a82d2;
  --a2a-blue-bright: #3b9eff;
  --a2a-blue-soft: #7cc0ff;
  --a2a-navy: #042b4c;
  --a2a-navy-deep: #061829;
  --a2a-black: #0d131a;
  --a2a-charcoal: #151c24;
  --a2a-slate: #566370;
  --a2a-ice: #f3f7fc;
  --a2a-ice-alt: #e8f0f8;
  --global-header-clearance: calc(clamp(68px, 5.8vw, 88px) + clamp(10px, 1.1vw, 16px) + clamp(18px, 2.2vh, 30px));
  background: var(--a2a-navy-deep);
}

/* --- Airplane Orange -> A2A Royal Blue Filter --- */
.airplane {
  filter: url("#a2a-airplane-blue") drop-shadow(0 18px 34px rgba(3, 18, 36, 0.28));
}

/* --- Fixed Capsule Pill Header (Filled Options + iPhone Glasswater + A2A Theme) --- */
.header {
  position: fixed;
  z-index: 1000;
  left: 2.2%;
  right: 2.2%;
  top: clamp(10px, 1.1vw, 16px);
  max-width: 1560px;
  margin: auto;
  transform: none;
  opacity: 1;
}

.nav-shell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 1.4vw, 24px);
  height: clamp(66px, 5.4vw, 82px);
  padding: 0 clamp(14px, 1.8vw, 26px);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background:
    linear-gradient(135deg, rgba(244, 250, 255, 0.78) 0%, rgba(224, 241, 255, 0.62) 48%, rgba(239, 248, 255, 0.74) 100%);
  box-shadow:
    0 16px 38px rgba(4, 20, 40, 0.18),
    0 2px 10px rgba(14, 110, 184, 0.12),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.96),
    inset 0 -1.5px 2px rgba(14, 110, 184, 0.16);
  -webkit-backdrop-filter: blur(28px) saturate(195%) brightness(1.06);
  backdrop-filter: blur(28px) saturate(195%) brightness(1.06);
}

.nav-shell::before {
  content: "";
  position: absolute;
  inset: 1px 1px 46% 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.04));
  pointer-events: none;
  z-index: 0;
}

.nav-shell > * {
  position: relative;
  z-index: 1;
}

/* Standalone A2A Transparent PNG Logo in Header */
.logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  min-width: 0;
  height: 100%;
  padding: 0 6px;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.logo img {
  width: auto;
  height: clamp(56px, 5vw, 76px);
  max-height: 94%;
  object-fit: contain;
  transform: scale(1.26);
  transform-origin: left center;
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.8)) contrast(1.08);
}

/* Center Navigation with Filled Pill Options */
.navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.55vw, 9px);
  margin: 0 auto;
  white-space: nowrap;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: clamp(36px, 3.1vw, 44px);
  padding: 0 clamp(12px, 1.15vw, 18px);
  border-radius: 999px;
  font-size: clamp(12px, 0.96vw, 15px);
  font-weight: 650;
  color: #091a2c;
  text-shadow: none;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

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

.nav-link small {
  font-size: 0.78em;
  line-height: 1;
  opacity: 0.75;
}

.nav-link.is-active {
  background: linear-gradient(135deg, var(--a2a-blue), #084c82);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(14, 110, 184, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.nav-link.is-pill {
  background: rgba(14, 110, 184, 0.13);
  border: 1px solid rgba(14, 110, 184, 0.24);
  color: var(--a2a-blue);
}

.nav-link:hover {
  background: rgba(14, 110, 184, 0.16);
  color: var(--a2a-blue);
}

.nav-link.is-active:hover {
  background: linear-gradient(135deg, var(--a2a-blue-mid), var(--a2a-navy));
  color: #ffffff;
}

/* Right Action Pill Buttons (Call, WhatsApp, Book Now) */
.header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.65vw, 10px);
  margin-left: 0;
}

.header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: clamp(38px, 3.3vw, 46px);
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 0 clamp(14px, 1.3vw, 22px);
  border-radius: 999px;
  font-size: clamp(12px, 0.94vw, 14.5px);
  font-weight: 750;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.header-btn--light {
  background: #ffffff;
  color: #091a2c;
  border: 1px solid rgba(255, 255, 255, 0.96);
  box-shadow: 0 5px 15px rgba(4, 20, 40, 0.1), inset 0 1px 0 #ffffff;
}

.header-btn--light:hover {
  transform: translateY(-1px);
  background: #f5faff;
  color: var(--a2a-blue);
  box-shadow: 0 8px 20px rgba(14, 110, 184, 0.18);
}

.header-btn--accent {
  background: linear-gradient(135deg, #1683d8 0%, #0b5a99 100%);
  color: #ffffff;
  border: 1px solid rgba(145, 204, 255, 0.65);
  box-shadow: 0 6px 18px rgba(14, 110, 184, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.header-btn--accent:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #2191e8 0%, #0e6eb8 100%);
  box-shadow: 0 10px 22px rgba(14, 110, 184, 0.44);
}

.menu-toggle span {
  background: #091a2c;
}

/* --- Page 1: Hero & Destination Reveal in A2A Blue/Black --- */
.hero,
.scene-stage {
  background: var(--a2a-navy-deep);
}

.scene-stage::after {
  background:
    linear-gradient(115deg, rgba(6, 15, 26, 0.34), transparent 44%, rgba(4, 32, 56, 0.24)),
    radial-gradient(ellipse at 52% 44%, rgba(59, 158, 255, 0.1), transparent 58%),
    linear-gradient(180deg, rgba(5, 16, 28, 0.14), rgba(4, 20, 36, 0.28));
}

.hero-description {
  border: 1px solid rgba(124, 192, 255, 0.28);
  background: linear-gradient(135deg, rgba(10, 18, 29, 0.78), rgba(6, 43, 76, 0.62));
  box-shadow: 0 16px 42px rgba(3, 12, 24, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: #f4f8fc;
}

.hero-description::before {
  background: linear-gradient(180deg, var(--a2a-blue-bright), var(--a2a-blue));
  box-shadow: 0 0 16px rgba(59, 158, 255, 0.55);
}

.destination-reveal {
  background:
    linear-gradient(180deg, rgba(6, 18, 32, 0.12), rgba(5, 20, 36, 0.68)),
    radial-gradient(ellipse at 50% 48%, rgba(4, 28, 50, 0.22), rgba(6, 15, 26, 0.66));
}

.destination-reveal .destination-kicker {
  color: var(--a2a-blue-soft);
}

/* --- Strict Header Clearance & Layout Balance for Pages 2 to 6 --- */
.about-reveal,
.packages-reveal,
.features-reveal,
.places-reveal,
.experiences-reveal,
.transport-reveal {
  padding-top: var(--global-header-clearance) !important;
  box-sizing: border-box;
}

/* --- Page 2: Popular Packages — Spacious, Airy & Neatly Aligned --- */
.about-backdrop {
  background: linear-gradient(135deg, #f4f8fc 0%, #ebf2f9 55%, #e2ecf7 100%);
}

.packages-reveal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  justify-items: center !important;
  gap: clamp(14px, 2.2vh, 24px);
  padding-left: clamp(24px, 4.8vw, 88px);
  padding-right: clamp(24px, 4.8vw, 88px);
  padding-bottom: clamp(16px, 2.8vh, 34px);
  background: linear-gradient(135deg, #f4f8fc 0%, #ebf2f9 55%, #e2ecf7 100%);
  color: var(--a2a-black);
}

.packages-heading {
  width: min(100%, 1240px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 20px;
}

.packages-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  color: var(--a2a-navy);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.packages-kicker span,
.about-kicker span,
.story-copy .about-kicker span {
  background: var(--a2a-blue);
}

.packages-heading h2 {
  margin: 0;
  color: var(--a2a-black);
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.packages-heading h2 em,
.about-copy h2 em,
.story-copy h2 em {
  color: var(--a2a-blue);
}

.packages-intro {
  max-width: 640px;
  margin: 6px 0 0;
  color: var(--a2a-slate);
  font-size: clamp(12.5px, 0.98vw, 14.5px);
  line-height: 1.5;
}

.packages-view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 2px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(14, 110, 184, 0.2);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 14px rgba(8, 24, 44, 0.05);
  color: var(--a2a-black);
  font-size: 13.5px;
  font-weight: 750;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.packages-view-all:hover {
  transform: translateY(-1px);
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(14, 110, 184, 0.12);
}

.packages-view-all span {
  color: var(--a2a-blue);
  font-size: 18px;
  line-height: 1;
}

.package-carousel-shell {
  position: relative;
  width: min(100%, 1240px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 0;
}

.package-nav-arrow {
  position: absolute;
  top: 50%;
  z-index: 8;
  transform: translateY(-50%);
  width: clamp(40px, 3.2vw, 48px);
  height: clamp(40px, 3.2vw, 48px);
  border-radius: 50%;
  border: 1.5px solid rgba(14, 110, 184, 0.3);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(232, 244, 255, 0.92) 100%);
  color: var(--a2a-navy);
  box-shadow:
    0 12px 28px rgba(4, 22, 44, 0.18),
    0 2px 8px rgba(14, 110, 184, 0.14),
    inset 0 1px 1px rgba(255, 255, 255, 0.98);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), background 0.22s ease, color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.package-nav-arrow svg {
  width: clamp(18px, 1.4vw, 22px);
  height: clamp(18px, 1.4vw, 22px);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.package-nav-arrow:hover,
.package-nav-arrow:focus-visible {
  transform: translateY(-50%) scale(1.08);
  background: linear-gradient(135deg, var(--a2a-blue), var(--a2a-navy));
  border-color: rgba(255, 255, 255, 0.9);
  color: #ffffff;
  box-shadow:
    0 14px 32px rgba(14, 110, 184, 0.34),
    0 4px 12px rgba(4, 22, 44, 0.22);
}

.package-nav-arrow:active {
  transform: translateY(-50%) scale(0.96);
}

.package-nav-arrow--prev {
  left: clamp(-22px, -1.8vw, -12px);
}

.package-nav-arrow--next {
  right: clamp(-22px, -1.8vw, -12px);
}

.package-grid {
  --pkg-gap: clamp(16px, 1.9vw, 26px);
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: none !important;
  grid-auto-columns: calc((100% - (2 * var(--pkg-gap))) / 3) !important;
  gap: var(--pkg-gap);
  width: 100%;
  margin-inline: auto;
  height: auto !important;
  max-height: none !important;
  min-height: 0;
  align-self: center;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 8px;
}

.package-grid::-webkit-scrollbar {
  display: none;
}

.package-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: auto;
  min-height: 0;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(14, 110, 184, 0.15);
  background: #ffffff;
  box-shadow:
    0 20px 44px rgba(8, 24, 44, 0.08),
    0 2px 8px rgba(14, 110, 184, 0.05);
  scroll-snap-align: start;
}

.package-visual {
  position: relative;
  flex: 0 0 clamp(154px, 22.5vh, 210px);
  height: clamp(154px, 22.5vh, 210px);
  min-height: 0;
  max-height: none;
  width: 100%;
  background: #dce8f4;
  overflow: hidden;
}

.package-visual::after {
  background: linear-gradient(180deg, transparent, rgba(7, 19, 34, 0.78));
}

.package-badge {
  top: 12px;
  left: 12px;
  min-height: 27px;
  padding: 0 11px;
  font-size: 9px;
  letter-spacing: 0.06em;
  background: linear-gradient(135deg, var(--a2a-blue), var(--a2a-navy));
}

.package-badge--blue {
  background: linear-gradient(135deg, var(--a2a-black), #222d3a);
}

.package-badge--quiet {
  background: linear-gradient(135deg, #063963, #032038);
}

.package-booking {
  top: 12px;
  right: 12px;
  min-height: 27px;
  padding: 0 11px;
  font-size: 9px;
  letter-spacing: 0.05em;
  background: rgba(11, 18, 28, 0.86);
}

.package-booking i {
  background: var(--a2a-blue-bright);
  box-shadow: 0 0 8px rgba(59, 158, 255, 0.8);
}

.package-location {
  left: 14px;
  bottom: 12px;
  font-size: 8.5px;
  letter-spacing: 0.14em;
}

.package-location span {
  color: var(--a2a-blue-bright);
}

.package-dots {
  right: 14px;
  bottom: 13px;
}

.package-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(7px, 1vh, 11px);
  min-height: 0;
  padding: clamp(14px, 1.8vh, 19px) clamp(16px, 1.5vw, 22px) clamp(14px, 1.8vh, 19px);
}

.package-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  font-size: clamp(11px, 0.88vw, 12.5px);
  font-weight: 600;
  line-height: 1.2;
}

.package-duration,
.package-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.package-duration b {
  margin-right: 1px;
  color: var(--a2a-blue);
  font-size: 14px;
}

.package-rating b {
  margin-right: 1px;
  font-size: 14px;
}

.package-content h3 {
  margin: 0;
  color: var(--a2a-black);
  font-size: clamp(16.5px, 1.38vw, 20.5px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.package-description {
  min-height: 0;
  margin: 0;
  color: var(--a2a-slate);
  font-size: clamp(11px, 0.88vw, 12.5px);
  line-height: 1.44;
  display: block;
  overflow: visible;
}

.package-stops {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin: 2px 0;
  padding: 7px 10px;
  border-radius: 11px;
  border: 1px solid rgba(14, 110, 184, 0.1);
  background: #eff5fb;
  color: var(--a2a-charcoal);
  font-size: clamp(9.5px, 0.78vw, 11px);
  font-weight: 600;
}

.package-stops span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.package-stops span b {
  border-color: #cde0f2;
  color: var(--a2a-navy);
  padding: 2px 5px;
  font-size: 8.5px;
  font-weight: 800;
}

.package-stops > i {
  background: #cbd9e8;
  height: 12px;
}

.package-perks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 6px;
  min-height: 0;
  margin: 0;
  padding: 3px 0;
}

.package-perks > span {
  display: inline-flex;
  align-items: center;
  color: var(--a2a-charcoal);
  font-size: clamp(9px, 0.75vw, 10.5px);
  font-weight: 600;
  gap: 5px;
}

.package-perks svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  stroke: var(--a2a-blue);
}

.package-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid #e3ecf5;
}

.package-price {
  display: block;
  min-width: 0;
  line-height: 1.1;
}

.package-savings {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.package-savings s {
  font-size: clamp(9px, 0.78vw, 10.5px);
}

.package-savings b {
  padding: 2px 6px;
  border-color: #b8d8f8;
  background: #eaf4fe;
  color: var(--a2a-blue);
  font-size: clamp(8px, 0.7vw, 9.5px);
  font-weight: 800;
}

.package-price strong {
  display: inline-block;
  color: var(--a2a-black);
  font-size: clamp(18px, 1.6vw, 23px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  vertical-align: baseline;
}

.package-price small {
  display: inline-block;
  margin-left: 4px;
  color: var(--a2a-slate);
  font-size: 10px;
  font-weight: 600;
  vertical-align: baseline;
}

.package-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: clamp(36px, 4vh, 42px);
  padding: 0 clamp(14px, 1.2vw, 19px);
  border-radius: 99px;
  background: linear-gradient(135deg, var(--a2a-blue), var(--a2a-navy));
  color: #ffffff;
  font-size: clamp(10px, 0.84vw, 11.5px);
  font-weight: 750;
  box-shadow: 0 6px 16px rgba(14, 110, 184, 0.24);
  align-self: center;
}

.package-cta:hover {
  background: linear-gradient(135deg, var(--a2a-black), var(--a2a-navy));
}

.packages-mobile-progress i {
  background: var(--a2a-blue);
}

/* --- Page 3: What Makes Us Different (Deep Obsidian & A2A Royal Blue) --- */
.features-reveal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(18px, 2.8vh, 32px);
  padding-bottom: clamp(18px, 3vh, 32px);
  background:
    linear-gradient(90deg, rgba(8, 14, 22, 0.97) 0%, rgba(5, 25, 45, 0.94) 45%, rgba(4, 38, 68, 0.68) 74%, rgba(6, 20, 36, 0.34) 100%),
    linear-gradient(0deg, rgba(6, 16, 28, 0.9), transparent 62%),
    url("assets/island-clean-4k-1.png") center 44% / cover no-repeat;
  color: #f4f8fc;
}

.features-heading {
  transform: translateY(var(--features-heading-shift, 0px)) !important;
  margin-top: 0;
}

.features-kicker {
  margin: 0 0 10px;
  color: var(--a2a-blue-bright);
}

.features-kicker span {
  background: var(--a2a-blue-bright);
}

.features-heading h2 {
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.04;
}

.features-heading h2 em {
  color: var(--a2a-blue-bright);
}

.features-intro {
  max-width: 390px;
  border-left-color: rgba(124, 192, 255, 0.55);
  color: #d7e5f2;
  font-size: clamp(13px, 1.02vw, 15px);
  line-height: 1.65;
}

.feature-cards {
  align-self: center;
  align-items: stretch;
  transform: none !important;
  gap: clamp(14px, 1.4vw, 20px);
}

.feature-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: clamp(235px, 33vh, 295px);
  padding: clamp(20px, 2.6vh, 28px) clamp(20px, 1.8vw, 26px) clamp(54px, 6.8vh, 66px);
  border-color: rgba(77, 166, 255, 0.3);
  background: linear-gradient(145deg, rgba(10, 38, 66, 0.78), rgba(9, 16, 26, 0.92) 70%);
  box-shadow: 0 18px 42px rgba(2, 10, 20, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.feature-card::before {
  background:
    radial-gradient(ellipse 70% 48% at 12% 100%, rgba(14, 110, 184, 0.28), transparent 74%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.05), transparent 40%);
}

.feature-icon {
  width: clamp(52px, 6.2vh, 62px);
  height: clamp(52px, 6.2vh, 62px);
  border-color: rgba(124, 192, 255, 0.4);
  background: radial-gradient(circle at 35% 25%, rgba(77, 166, 255, 0.32), rgba(4, 36, 64, 0.82) 70%);
}

.feature-icon svg {
  stroke: #e4f2ff;
}

.feature-stat {
  display: block;
  margin: clamp(14px, 2vh, 20px) 0 2px;
  font-family: var(--font-display, "Outfit", "Plus Jakarta Sans", sans-serif);
  font-size: clamp(24px, 2.3vw, 32px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--a2a-blue-bright);
}

.feature-card h3 {
  max-width: 100%;
  margin: clamp(16px, 2.2vh, 22px) 0 10px;
  font-size: clamp(18px, 1.55vw, 23px);
  line-height: 1.18;
}

.feature-stat + h3 {
  margin-top: 4px;
}

.feature-card h3::after {
  width: 32px;
  margin-top: 10px;
  background: var(--a2a-blue-bright);
}

.feature-card p {
  max-width: 100%;
  color: #c8daeb;
  font-size: clamp(12px, 0.92vw, 13.5px);
  line-height: 1.55;
}

.feature-arrow {
  width: 40px;
  height: 40px;
  right: 20px;
  bottom: 18px;
  font-size: 20px;
  background: rgba(6, 26, 46, 0.45);
  border-color: rgba(145, 204, 255, 0.65);
}

.features-trust-pill {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  align-self: center;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(124, 192, 255, 0.28);
  background: linear-gradient(135deg, rgba(10, 34, 58, 0.78), rgba(7, 18, 30, 0.88));
  box-shadow: 0 10px 28px rgba(2, 10, 20, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #dce9f5;
  font-size: clamp(11.5px, 0.9vw, 13.5px);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.features-trust-pill .trust-star {
  color: #f5b841;
  font-size: 14px;
}

.features-trust-pill strong {
  color: var(--a2a-blue-soft);
  font-weight: 750;
}

.features-trust-pill .trust-dot {
  color: rgba(124, 192, 255, 0.55);
  padding: 0 2px;
}

/* --- Page 4: Handpicked Places (Cool Alabaster, Obsidian & A2A Blue) --- */
.places-backdrop {
  background:
    radial-gradient(ellipse at 6% 12%, rgba(255, 255, 255, 0.88), transparent 40%),
    linear-gradient(112deg, #f4f8fc 0%, #ecf3fa 54%, #e2edf8 100%);
}

.places-reveal {
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(10px, 1.8vh, 20px);
  padding-bottom: clamp(14px, 2.6vh, 26px);
  color: var(--a2a-black);
}

.places-kicker {
  margin: 0 0 8px;
  color: var(--a2a-navy);
}

.places-kicker span {
  background: var(--a2a-blue);
}

.places-title-group h2 {
  color: var(--a2a-black);
  font-size: clamp(30px, 3.8vw, 52px);
  line-height: 1.02;
}

.places-title-group h2 em {
  color: var(--a2a-blue);
}

.places-intro > p {
  color: var(--a2a-slate);
  font-size: clamp(12.5px, 1vw, 15px);
  line-height: 1.55;
}

.places-controls {
  margin-top: 10px;
}

.places-control {
  border-color: rgba(14, 110, 184, 0.45);
  background: rgba(255, 255, 255, 0.7);
  color: var(--a2a-black);
}

.places-control:hover {
  background: var(--a2a-blue);
  border-color: var(--a2a-blue);
  color: #ffffff;
}

.destination-card {
  background: var(--a2a-navy);
  box-shadow: 0 24px 68px rgba(8, 24, 44, 0.18);
}

.destination-index span {
  color: var(--a2a-blue-soft);
}

.destination-shade {
  background: linear-gradient(180deg, transparent 0%, rgba(6, 18, 32, 0.14) 30%, rgba(6, 16, 28, 0.84) 100%);
}

.destination-open:hover {
  background: var(--a2a-blue);
  border-color: var(--a2a-blue-soft);
}

.destination-detail {
  background: var(--a2a-black);
}

/* --- Page 5: Feel The Journey / Experiences (Obsidian Black & Royal Blue) --- */
.experiences-reveal {
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(10px, 1.6vh, 18px);
  padding-bottom: clamp(12px, 2.2vh, 22px);
  background: linear-gradient(135deg, #09111b 0%, #061d33 58%, #081320 100%);
  color: #f4f8fc;
}

.experiences-heading {
  transform: none !important;
}

.experiences-kicker {
  margin: 0 0 6px;
  color: var(--a2a-blue-soft);
}

.experiences-kicker span {
  background: var(--a2a-blue-bright);
}

.experiences-title-group h2 {
  color: #ffffff;
  font-size: clamp(30px, 3.8vw, 52px);
  line-height: 1.02;
}

.experiences-title-group h2 em,
.experience-feature-copy h3 em {
  color: var(--a2a-blue-bright);
}

.experiences-intro {
  color: #bfd0e0;
  font-size: 13px;
  line-height: 1.55;
}

.experiences-intro span {
  margin-top: 8px;
}

.experiences-intro b,
.experience-count b,
.experience-feature-link b,
.experience-menu-heading b,
.experience-menu-footer b,
.experience-option.is-active .experience-option-arrow {
  color: var(--a2a-blue-bright);
}

.experience-feature-link {
  border-bottom-color: var(--a2a-blue-bright);
}

.experiences-panel {
  border-color: rgba(77, 166, 255, 0.24);
  background: #0a1e32;
  box-shadow: 0 26px 75px rgba(2, 8, 16, 0.45);
}

.experience-feature {
  background: #06233b;
}

.experience-menu {
  background: linear-gradient(145deg, #0b243c, #09131e);
}

.experience-option:hover,
.experience-option.is-active {
  background: rgba(14, 110, 184, 0.2);
}

.experience-option.is-active::before,
.experiences-progress i {
  background: var(--a2a-blue-bright);
}

.experience-option.is-active .experience-option-number {
  color: var(--a2a-blue-soft);
}

/* --- Page 6: Transport / Road Journeys (Ice White, Obsidian & A2A Blue) --- */
.transport-reveal {
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(10px, 1.6vh, 18px);
  padding-bottom: clamp(12px, 2.2vh, 22px);
  background: linear-gradient(135deg, #f3f7fc 0%, #e9f1f9 100%);
  color: var(--a2a-black);
}

.transport-kicker {
  margin: 0 0 6px;
  color: var(--a2a-navy);
}

.transport-kicker span {
  background: var(--a2a-blue);
}

.transport-heading h2 {
  color: var(--a2a-black);
  font-size: clamp(30px, 3.8vw, 52px);
  line-height: 1.02;
}

.transport-heading h2 em {
  color: var(--a2a-blue);
}

.transport-intro {
  border-left-color: #c2d4e6;
  color: var(--a2a-slate);
}

.transport-intro > span:first-child,
.transport-options-heading b,
.transport-mode.is-active .transport-mode-number,
.transport-mode.is-active .transport-mode-arrow {
  color: var(--a2a-blue);
}

.route-line path {
  stroke: var(--a2a-blue-bright);
}

.route-line circle {
  fill: var(--a2a-blue-bright);
}

.transport-options-panel {
  border-color: rgba(14, 110, 184, 0.14);
  background: #ffffff;
  box-shadow: 0 18px 55px rgba(8, 24, 44, 0.07);
}

.transport-mode:hover,
.transport-mode.is-active {
  background: #edf4fb;
}

.transport-mode-icon {
  background: #e8f1fa;
  color: var(--a2a-navy);
}

.transport-selection {
  background: linear-gradient(135deg, var(--a2a-black), var(--a2a-navy));
}

.transport-selected-detail {
  color: #bfd2e6;
}

.transport-enquire {
  background: linear-gradient(135deg, var(--a2a-blue), #07477a);
  box-shadow: 0 6px 18px rgba(14, 110, 184, 0.3);
}

.transport-enquire:hover {
  background: linear-gradient(135deg, var(--a2a-blue-mid), var(--a2a-navy));
}

/* --- Footer in A2A Deep Obsidian & Royal Blue --- */
.site-footer {
  background: var(--a2a-black);
  color: #eaf2fa;
}

.site-footer::before {
  background:
    linear-gradient(105deg, rgba(9, 15, 24, 0.97), rgba(4, 35, 62, 0.94)),
    url("assets/island-hero-4k.webp") center 62% / cover no-repeat;
}

.footer-logo {
  width: auto;
  padding: 6px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(244, 250, 255, 0.86), rgba(224, 241, 255, 0.72));
  border: 1px solid rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 24px rgba(2, 10, 20, 0.28), inset 0 1px 0 #ffffff;
  backdrop-filter: blur(18px) saturate(160%);
}

.footer-logo img {
  width: auto;
  height: clamp(52px, 4.8vw, 70px);
  object-fit: contain;
  transform: scale(1.14);
}

.footer-socials a:hover {
  border-color: var(--a2a-blue-bright);
  background: rgba(59, 158, 255, 0.16);
  color: var(--a2a-blue-soft);
}

.footer-column h2 {
  color: var(--a2a-blue-bright);
}

.footer-column > a:hover {
  color: var(--a2a-blue-soft);
}

/* ==========================================================================
   COMPREHENSIVE MOBILE & TABLET VIEW ALIGNMENT (MAX-WIDTH: 767PX)
   ========================================================================== */
@media (max-width: 767px) {
  :root {
    --global-header-clearance: calc(64px + 10px + env(safe-area-inset-top) + 14px);
  }

  /* 1. Mobile Header — iPhone Glasswater + Transparent PNG Logo */
  .header {
    left: 4vw;
    right: 4vw;
    top: calc(10px + env(safe-area-inset-top));
  }

  .nav-shell {
    height: 62px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    background: linear-gradient(135deg, rgba(244, 250, 255, 0.78) 0%, rgba(225, 241, 255, 0.62) 50%, rgba(240, 248, 255, 0.74) 100%);
    box-shadow:
      0 12px 30px rgba(4, 20, 40, 0.2),
      inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
      inset 0 -1px 2px rgba(14, 110, 184, 0.15);
    -webkit-backdrop-filter: blur(26px) saturate(190%) brightness(1.06);
    backdrop-filter: blur(26px) saturate(190%) brightness(1.06);
  }

  .logo {
    width: auto;
    height: 100%;
    padding: 0 4px;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .logo img {
    width: auto;
    height: 48px;
    transform: scale(1.22);
    transform-origin: left center;
  }

  .header-actions {
    margin-left: auto;
    margin-right: 6px;
    gap: 5px;
  }

  .header-actions .header-btn:first-child {
    display: none;
  }

  .header-btn {
    height: 34px;
    padding: 0 11px;
    font-size: 11px;
  }

  .menu-toggle {
    position: relative;
    z-index: 1005;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(14, 110, 184, 0.1);
    border: 1px solid rgba(14, 110, 184, 0.2);
  }

  .menu-toggle span {
    width: 18px;
    height: 2px;
    background: #091a2c;
  }

  /* Slide-out Right Sidebar Drawer on Mobile */
  .navigation {
    display: flex !important;
    position: fixed;
    top: calc(-10px - env(safe-area-inset-top));
    right: -4vw;
    bottom: auto;
    left: auto;
    z-index: 1002;
    width: min(78vw, 285px);
    height: 100dvh;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 8px;
    margin: 0;
    padding: calc(78px + env(safe-area-inset-top)) 18px 28px;
    border-radius: 26px 0 0 26px;
    background: linear-gradient(165deg, rgba(246, 251, 255, 0.98) 0%, rgba(228, 241, 255, 0.96) 100%);
    border-left: 1px solid rgba(255, 255, 255, 0.92);
    box-shadow: -18px 0 48px rgba(4, 20, 40, 0.32);
    -webkit-backdrop-filter: blur(28px) saturate(190%);
    backdrop-filter: blur(28px) saturate(190%);
    transform: translate3d(108%, 0, 0);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease, visibility 0.32s;
  }

  .navigation::before {
    content: "A2A MENU";
    position: absolute;
    top: calc(28px + env(safe-area-inset-top));
    left: 22px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.2em;
    color: var(--a2a-blue);
  }

  .navigation.is-open {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  .navigation .nav-link {
    justify-content: flex-start;
    width: 100%;
    height: 44px;
    padding: 0 16px;
    border-radius: 14px;
    color: #091a2c;
    font-size: 14.5px;
    font-weight: 650;
  }

  .navigation .nav-link.is-active {
    color: #ffffff;
  }

  /* 2. Mobile Page 1 — Hero & Airplane Alignment */
  .airplane {
    left: 50%;
    top: 32%;
    width: 84vw;
  }

  .home-copy {
    inset: auto 5vw calc(22px + env(safe-area-inset-bottom)) 5vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .home-copy h1 {
    font-size: clamp(36px, 9.6vw, 50px);
    line-height: 0.98;
  }

  .hero-description {
    margin-top: 12px;
    padding: 13px 15px 13px 18px;
    font-size: clamp(13px, 3.5vw, 15px);
    line-height: 1.5;
  }

  /* 3. Mobile Page 2 — Popular Packages Alignment & Card Fit */
  .packages-reveal {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    align-content: center !important;
    justify-items: stretch !important;
    gap: clamp(8px, 1.5svh, 14px);
    padding: var(--global-header-clearance) 4.5vw calc(12px + env(safe-area-inset-bottom)) !important;
  }

  .packages-heading {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
  }

  .packages-kicker {
    margin-bottom: 3px;
    font-size: 7.5px;
  }

  .packages-heading h2 {
    font-size: clamp(22px, 6.2vw, 30px);
    line-height: 1.02;
  }

  .packages-intro {
    margin-top: 3px;
    font-size: 10.5px;
    line-height: 1.35;
  }

  .packages-view-all {
    font-size: 11px;
    padding: 6px 12px;
  }

  .package-carousel-shell {
    width: 100%;
  }

  .package-nav-arrow {
    width: 34px;
    height: 34px;
  }

  .package-nav-arrow svg {
    width: 16px;
    height: 16px;
  }

  .package-nav-arrow--prev {
    left: -6px;
  }

  .package-nav-arrow--next {
    right: -6px;
  }

  .package-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 88% !important;
    grid-template-columns: none !important;
    gap: 12px;
    width: 100%;
    height: auto !important;
    max-height: none !important;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 6px;
    scroll-snap-type: x mandatory;
  }

  .package-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: auto;
    min-height: 0;
    border-radius: 18px;
    scroll-snap-align: center;
  }

  .package-visual {
    flex: 0 0 clamp(118px, 21svh, 172px);
    height: clamp(118px, 21svh, 172px);
    min-height: 0;
    max-height: none;
  }

  .package-badge,
  .package-booking {
    top: 10px;
    min-height: 24px;
    padding: 0 9px;
    font-size: 8px;
  }

  .package-badge {
    left: 10px;
  }

  .package-booking {
    right: 10px;
  }

  .package-location {
    left: 12px;
    bottom: 10px;
    font-size: 7.5px;
  }

  .package-dots {
    right: 12px;
    bottom: 11px;
    gap: 5px;
  }

  .package-content {
    flex: 1 1 auto !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(5px, 0.9svh, 8px);
    padding: 12px 14px 13px;
    min-height: 0;
  }

  .package-meta {
    font-size: 10px;
  }

  .package-content h3 {
    margin: 0;
    font-size: clamp(14.5px, 4.2vw, 17px);
  }

  .package-description {
    font-size: 10px;
    line-height: 1.3;
    display: block;
    overflow: visible;
  }

  .package-stops {
    margin: 1px 0;
    padding: 5px 7px;
    font-size: 8.5px;
    gap: 4px;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
  }

  .package-stops span b {
    padding: 1px 4px;
    font-size: 7.5px;
  }

  /* 2x2 Perks Grid on Mobile so options never squish or overflow */
  .package-perks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 8px;
    margin: 1px 0;
    padding: 1px 0;
  }

  .package-perks > span {
    font-size: 9px;
    gap: 5px;
  }

  .package-perks svg {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
  }

  .package-price-row {
    margin-top: 2px;
    padding-top: 6px;
    gap: 8px;
    align-items: center;
  }

  .package-savings {
    margin-bottom: 2px;
    gap: 4px;
  }

  .package-savings s {
    font-size: 8px;
  }

  .package-savings b {
    padding: 2px 4px;
    font-size: 7px;
  }

  .package-price strong {
    font-size: clamp(16px, 4.6vw, 19px);
  }

  .package-price small {
    font-size: 8.5px;
  }

  .package-cta {
    min-height: 31px;
    padding: 0 11px;
    font-size: 9px;
    gap: 5px;
  }

  /* 4. Mobile Page 3 — Features 2x2 Grid + Trust Pill (Filled in Order, Zero Extra Gap) */
  .features-reveal {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-content: stretch;
    gap: clamp(8px, 1.4svh, 13px);
    padding: var(--global-header-clearance) 4.5vw calc(12px + env(safe-area-inset-bottom)) !important;
  }

  .features-heading {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .features-kicker {
    margin-bottom: 3px;
    font-size: 7.5px;
  }

  .features-heading h2 {
    font-size: clamp(23px, 6.6vw, 31px);
    line-height: 1.02;
  }

  .features-intro {
    max-width: 100%;
    font-size: 10.5px;
    line-height: 1.38;
    padding-left: 10px;
  }

  .feature-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 9px;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
  }

  .feature-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
    height: 100%;
    padding: clamp(10px, 1.6svh, 14px) 12px;
    border-radius: 16px;
  }

  .feature-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    flex: 0 0 auto;
  }

  .feature-icon svg {
    width: 17px;
    height: 17px;
  }

  .feature-stat {
    margin: 6px 0 1px;
    font-size: clamp(15px, 4.3vw, 19px);
    line-height: 1;
  }

  .feature-card h3 {
    max-width: 100%;
    margin: 7px 0 4px;
    font-size: clamp(12px, 3.5vw, 14.5px);
    line-height: 1.14;
  }

  .feature-stat + h3 {
    margin-top: 2px;
  }

  .feature-card h3::after {
    width: 20px;
    margin-top: 5px;
  }

  .feature-card p {
    max-width: 100%;
    font-size: clamp(9.2px, 2.6vw, 10.8px);
    line-height: 1.36;
  }

  .feature-arrow {
    top: 10px;
    right: 10px;
    bottom: auto;
    width: 24px;
    height: 24px;
    font-size: 12px;
  }

  .features-trust-pill {
    width: 100%;
    padding: 7px 12px;
    font-size: clamp(9px, 2.6vw, 11px);
    gap: 4px;
    text-align: center;
  }

  .features-trust-pill .trust-star {
    font-size: 11px;
  }

  /* 5. Mobile Page 4 — Handpicked Places Alignment */
  .places-reveal {
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
    padding: var(--global-header-clearance) 4.5vw calc(14px + env(safe-area-inset-bottom)) !important;
  }

  .places-heading {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .places-kicker {
    margin-bottom: 4px;
    font-size: 7.5px;
  }

  .places-title-group h2 {
    font-size: clamp(23px, 6.6vw, 32px);
  }

  .places-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
  }

  .places-intro > p {
    font-size: 10px;
    line-height: 1.38;
  }

  .places-controls {
    margin-top: 0;
    gap: 7px;
  }

  .places-control {
    width: 34px;
    height: 34px;
    font-size: 15px;
  }

  .destination-card {
    height: 100%;
    min-height: 0;
    border-radius: 18px;
  }

  .destination-caption {
    left: 16px;
    right: 64px;
    bottom: 16px;
  }

  .destination-caption h3 {
    font-size: clamp(38px, 11vw, 56px);
  }

  .destination-description {
    margin-top: 6px;
    font-size: 10.5px;
  }

  /* 6. Mobile Page 5 — Experiences Alignment */
  .experiences-reveal {
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 8px;
    padding: var(--global-header-clearance) 4.5vw calc(10px + env(safe-area-inset-bottom)) !important;
  }

  .experiences-heading {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .experiences-kicker {
    margin-bottom: 3px;
    font-size: 7.5px;
  }

  .experiences-title-group h2 {
    font-size: clamp(22px, 6.2vw, 30px);
  }

  .experiences-intro {
    font-size: 9.5px;
    line-height: 1.34;
  }

  .experiences-panel {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 0.82fr) minmax(0, 1.18fr);
    height: 100%;
  }

  /* 7. Mobile Page 6 — Transport Alignment */
  .transport-reveal {
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 8px;
    padding: var(--global-header-clearance) 4.5vw calc(10px + env(safe-area-inset-bottom)) !important;
  }

  .transport-heading {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .transport-kicker {
    margin-bottom: 3px;
    font-size: 7.5px;
  }

  .transport-heading h2 {
    font-size: clamp(22px, 6.2vw, 30px);
  }

  .transport-panel {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 0.65fr) minmax(0, 1.35fr);
    gap: 8px;
    height: 100%;
  }
}


/* ==========================================================================
   CINEMATIC CLOUDY & FOGGY MIST HANDOFFS (PAGE 4 -> 5 AND PAGE 5 -> 6)
   ========================================================================== */
.places-reveal {
  filter: blur(var(--places-exit-blur, 0px));
}

.experiences-reveal {
  clip-path: none !important;
  filter: blur(var(--experiences-blur, 0px));
  transform: translate3d(0, var(--experiences-shift, 22px), 0) scale(calc(0.985 + var(--experiences-progress, 0) * 0.015));
  will-change: opacity, transform, filter;
}

.transport-reveal {
  clip-path: none !important;
  filter: blur(var(--transport-blur, 0px));
  transform: translate3d(0, var(--transport-shift, 20px), 0) scale(var(--transport-scale, 0.985));
  will-change: opacity, transform, filter;
}

/* Volumetric Cloud & Fog Transition Layer */
.transition-fog {
  position: absolute;
  z-index: 12;
  inset: -22%;
  pointer-events: none;
  overflow: hidden;
}

/* 4th -> 5th Page Cloud & Sea-Mist Bank */
.transition-fog::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--fog-45-opacity, 0);
  transform: translate3d(var(--fog-45-shift, 0%), 0, 0) scale(1.06);
  filter: blur(22px);
  will-change: opacity, transform;
  background:
    radial-gradient(ellipse 38% 26% at 18% 42%, rgba(236, 246, 255, 0.95) 0%, rgba(190, 224, 255, 0.65) 45%, transparent 76%),
    radial-gradient(ellipse 44% 30% at 48% 54%, rgba(244, 250, 255, 0.96) 0%, rgba(145, 204, 255, 0.58) 48%, transparent 78%),
    radial-gradient(ellipse 40% 28% at 78% 40%, rgba(232, 244, 255, 0.94) 0%, rgba(110, 180, 242, 0.52) 46%, transparent 76%),
    radial-gradient(ellipse 52% 34% at 34% 68%, rgba(12, 46, 82, 0.72) 0%, rgba(6, 24, 44, 0.45) 54%, transparent 82%),
    linear-gradient(180deg, transparent 12%, rgba(225, 240, 255, 0.78) 38%, rgba(18, 64, 110, 0.62) 62%, transparent 88%);
}

/* 5th -> 6th Page Highland Mountain Fog & Cloud Bank */
.transition-fog::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--fog-56-opacity, 0);
  transform: translate3d(var(--fog-56-shift, 0%), 0, 0) scale(1.06);
  filter: blur(22px);
  will-change: opacity, transform;
  background:
    radial-gradient(ellipse 42% 28% at 22% 48%, rgba(248, 252, 255, 0.96) 0%, rgba(220, 238, 255, 0.72) 46%, transparent 78%),
    radial-gradient(ellipse 46% 32% at 54% 42%, rgba(255, 255, 255, 0.98) 0%, rgba(212, 234, 252, 0.74) 48%, transparent 80%),
    radial-gradient(ellipse 38% 27% at 84% 56%, rgba(242, 249, 255, 0.95) 0%, rgba(185, 218, 248, 0.66) 45%, transparent 77%),
    radial-gradient(ellipse 48% 30% at 62% 68%, rgba(235, 244, 252, 0.9) 0%, rgba(155, 198, 238, 0.5) 52%, transparent 82%),
    linear-gradient(180deg, transparent 10%, rgba(240, 248, 255, 0.85) 36% 64%, transparent 90%);
}

/* Subtle Ambient Mist Inside Page 5 & Page 6 Visual Cards */
.experience-shade::after,
.transport-visual-shade::after {
  content: "";
  position: absolute;
  inset: auto -10% -8% -10%;
  height: 44%;
  pointer-events: none;
  filter: blur(16px);
  background:
    radial-gradient(ellipse 45% 60% at 24% 80%, rgba(210, 234, 255, 0.24), transparent 72%),
    radial-gradient(ellipse 50% 65% at 76% 85%, rgba(145, 204, 255, 0.2), transparent 74%);
}

@media (prefers-reduced-motion: reduce) {
  .transition-fog {
    display: none;
  }
  .places-reveal,
  .experiences-reveal,
  .transport-reveal {
    filter: none !important;
  }
}



/* ==========================================================================
   PIXEL-PERFECT CROSS-DEVICE RESPONSIVE OPTIMIZATION
   (320px, 360px, 375px, 390px, 414px–430px, 600px, 768px, 820px, 1024px,
    1280px, 1366px, 1440px, 1920px, 2560px 2K, 3840px 4K & Landscape)
   Preserves 100% of existing Desktop visual composition & A2A branding.
   ========================================================================== */

/* --- 0. Global Overflow & Long-Word Safety Across All Viewports --- */
.destination-caption {
  right: clamp(84px, 8vw, 128px);
}

.destination-caption h3 {
  font-size: clamp(48px, 6.8vw, 112px);
  overflow-wrap: break-word;
}

.destination-detail-copy h2 {
  font-size: clamp(36px, 8vw, 110px);
  overflow-wrap: break-word;
}

.menu-toggle span {
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- 1. 2K (2560px) & 4K (3840px) Ultra-Wide Desktop Scaling --- */
@media (min-width: 1921px) {
  .header {
    max-width: min(92vw, 1840px);
  }
  .packages-heading,
  .package-carousel-shell,
  .package-grid {
    width: min(100%, 1520px);
  }
  .features-heading,
  .feature-cards,
  .places-heading,
  .destination-card,
  .experiences-heading,
  .experiences-panel,
  .experiences-footer,
  .transport-heading,
  .transport-panel,
  .transport-footer,
  .footer-shell {
    width: min(100%, 1680px);
    max-width: 1680px;
  }
  .package-visual {
    flex: 0 0 clamp(170px, 21vh, 240px);
    height: clamp(170px, 21vh, 240px);
  }
  .features-reveal {
    align-content: center;
    gap: clamp(36px, 5.5vh, 72px);
  }
}

@media (min-width: 2560px) {
  .header {
    max-width: min(90vw, 2160px);
  }
  .nav-shell {
    height: clamp(82px, 4.2vw, 104px);
    padding: 0 clamp(28px, 2vw, 44px);
  }
  .logo img {
    height: clamp(68px, 3.6vw, 90px);
  }
  .nav-link {
    height: clamp(44px, 2.2vw, 54px);
    padding: 0 clamp(18px, 1vw, 26px);
    font-size: clamp(15px, 0.75vw, 19px);
  }
  .header-btn {
    height: clamp(46px, 2.3vw, 56px);
    padding: 0 clamp(20px, 1.1vw, 28px);
    font-size: clamp(14.5px, 0.72vw, 18px);
  }
  .packages-heading,
  .package-carousel-shell,
  .package-grid {
    width: min(100%, 1820px);
  }
  .features-heading,
  .feature-cards,
  .places-heading,
  .destination-card,
  .experiences-heading,
  .experiences-panel,
  .experiences-footer,
  .transport-heading,
  .transport-panel,
  .transport-footer,
  .footer-shell {
    width: min(100%, 1960px);
    max-width: 1960px;
  }
  .hero-description {
    width: min(28%, 640px);
    font-size: clamp(18px, 0.95vw, 23px);
  }
}

/* --- 2. Compact Laptops (1024px – 1220px): Zero Header or Card Crowding --- */
@media (min-width: 1024px) and (max-width: 1220px) {
  .nav-shell {
    padding: 0 16px;
    gap: 8px;
  }
  .logo img {
    height: 50px;
    transform: scale(1.18);
  }
  .navigation {
    gap: 3px;
  }
  .nav-link {
    height: 36px;
    padding: 0 10px;
    font-size: 12px;
  }
  .header-actions {
    gap: 5px;
  }
  .header-btn {
    height: 36px;
    padding: 0 12px;
    font-size: 11.5px;
  }
  .packages-reveal {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-content: center !important;
    justify-items: center !important;
    padding-left: 3.5vw;
    padding-right: 3.5vw;
  }
  .packages-heading,
  .package-carousel-shell {
    width: 100%;
  }
  .package-nav-arrow {
    width: 38px;
    height: 38px;
  }
  .package-nav-arrow--prev {
    left: -12px;
  }
  .package-nav-arrow--next {
    right: -12px;
  }
  .package-grid {
    --pkg-gap: 14px;
    grid-template-columns: none !important;
    grid-auto-columns: calc((100% - 28px) / 3) !important;
    gap: 14px;
    width: 100%;
    height: auto !important;
    max-height: none !important;
  }
  .package-visual {
    flex: 0 0 clamp(136px, 20vh, 180px);
    height: clamp(136px, 20vh, 180px);
  }
  .package-badge,
  .package-booking {
    top: 10px;
    min-height: 24px;
    padding: 0 9px;
    font-size: 8px;
  }
  .package-badge {
    left: 10px;
  }
  .package-booking {
    right: 10px;
  }
  .package-location {
    left: 11px;
    bottom: 10px;
    font-size: 7.5px;
  }
  .package-dots {
    right: 11px;
    bottom: 11px;
    gap: 5px;
  }
  .package-content {
    flex: 1 1 auto !important;
    padding: 13px 15px 14px;
    gap: 6px;
  }
  .package-content h3 {
    font-size: clamp(15px, 1.38vw, 18px);
  }
  .package-description {
    font-size: 11px;
    line-height: 1.38;
  }
  .package-stops {
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    gap: 5px;
    padding: 6px 8px;
    font-size: 8.5px;
  }
  .package-stops span b {
    padding: 2px 4px;
    font-size: 7.5px;
  }
  .package-perks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 10px;
  }
  .package-perks > span {
    font-size: 9px;
    gap: 5px;
  }
  .package-price-row {
    gap: 8px;
    padding-top: 9px;
  }
  .package-savings {
    gap: 4px;
    margin-bottom: 3px;
  }
  .package-savings s {
    font-size: 8.5px;
  }
  .package-savings b {
    padding: 2px 5px;
    font-size: 7.5px;
  }
  .package-price strong {
    font-size: clamp(16px, 1.5vw, 19.5px);
  }
  .package-price small {
    font-size: 8.5px;
    margin-left: 2px;
  }
  .package-cta {
    min-height: 34px;
    padding: 0 12px;
    font-size: 9px;
    gap: 5px;
  }
  .package-cta span {
    font-size: 14px;
  }
}

/* --- 3. Short-Height Laptops & Scaled Displays (min-width: 768px, max-height: 750px) --- */
@media (min-width: 768px) and (max-height: 750px) {
  :root {
    --global-header-clearance: calc(62px + 10px + 12px);
  }
  .header {
    top: 10px;
  }
  .nav-shell {
    height: 62px;
  }
  .logo img {
    height: 48px;
  }
  /* Page 2 */
  .packages-reveal {
    gap: 10px;
    padding-bottom: 14px;
  }
  .packages-heading h2 {
    font-size: clamp(22px, 2.5vw, 32px);
  }
  .packages-intro {
    margin-top: 2px;
    font-size: 12px;
  }
  .package-visual {
    flex: 0 0 clamp(108px, 18.5vh, 148px);
    height: clamp(108px, 18.5vh, 148px);
    min-height: 0;
    max-height: none;
  }
  .package-content {
    flex: 1 1 auto !important;
    padding: 11px 14px 12px;
    gap: 5px;
  }
  .package-content h3 {
    font-size: 15px;
  }
  .package-description {
    font-size: 10.5px;
    line-height: 1.32;
  }
  .package-stops {
    padding: 5px 8px;
    margin: 1px 0;
  }
  .package-perks {
    padding: 1px 0;
  }
  .package-price-row {
    padding-top: 8px;
  }
  .package-price strong {
    font-size: clamp(16px, 1.5vw, 19px);
  }
  .package-cta {
    min-height: 32px;
    padding: 0 12px;
    font-size: 9px;
  }
  /* Page 3 */
  .features-reveal {
    gap: 12px;
    padding-bottom: 14px;
  }
  .features-heading h2 {
    font-size: clamp(26px, 3.2vw, 38px);
  }
  .feature-card {
    min-height: clamp(165px, 25vh, 215px);
    padding: 15px 16px 44px;
  }
  .feature-icon {
    width: 42px;
    height: 42px;
  }
  .feature-icon svg {
    width: 22px;
    height: 22px;
  }
  .feature-stat {
    margin: 8px 0 1px;
    font-size: 20px;
  }
  .feature-card h3 {
    margin: 9px 0 5px;
    font-size: 16px;
  }
  .feature-stat + h3 {
    margin-top: 2px;
  }
  .feature-card p {
    font-size: 11.5px;
    line-height: 1.42;
  }
  .feature-arrow {
    width: 34px;
    height: 34px;
    right: 14px;
    bottom: 12px;
    font-size: 16px;
  }
  .features-trust-pill {
    padding: 7px 18px;
    font-size: 11.5px;
  }
  /* Page 4, 5, 6 */
  .places-title-group h2,
  .experiences-title-group h2,
  .transport-heading h2 {
    font-size: clamp(26px, 3.2vw, 38px);
  }
  .destination-caption h3 {
    font-size: clamp(44px, 5.8vw, 76px);
  }
  .experience-feature-copy h3 {
    font-size: clamp(38px, 5vw, 64px);
  }
  .experience-menu {
    padding: 12px 18px;
  }
  .experience-menu-heading {
    padding-bottom: 8px;
  }
  .experience-option {
    padding: 5px 6px;
  }
  .experience-option-copy strong {
    font-size: 15px;
  }
  .experience-menu-footer {
    padding-top: 8px;
  }
  .transport-visual-copy h3 {
    font-size: clamp(34px, 4.5vw, 56px);
  }
  .transport-options-panel {
    padding: 12px 18px;
  }
  .transport-options-heading {
    padding-bottom: 7px;
  }
  .transport-options-intro {
    margin: 6px 0;
    font-size: 11px;
  }
  .transport-mode {
    padding: 4px 5px;
  }
  .transport-mode-icon {
    width: 34px;
    height: 32px;
  }
  .transport-mode-copy strong {
    font-size: 13.5px;
  }
  .transport-selection {
    margin-top: 6px;
    padding: 8px 12px;
  }
  .transport-enquire {
    min-height: 32px;
  }
}

/* --- 4. Tablet Portrait & Tablet Landscape (768px – 1023px: 768px, 820px, etc.) --- */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --global-header-clearance: calc(68px + 12px + 16px);
  }
  .header {
    left: 3vw;
    right: 3vw;
    top: 12px;
  }
  .nav-shell {
    height: 68px;
    padding: 0 18px;
  }
  .logo img {
    height: 52px;
    transform: scale(1.22);
  }
  .header-actions {
    margin-left: auto;
    margin-right: 10px;
    gap: 7px;
  }
  .header-btn {
    height: 38px;
    padding: 0 14px;
    font-size: 12.5px;
  }
  .menu-toggle {
    position: relative;
    z-index: 1005;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 50%;
    background: rgba(14, 110, 184, 0.1);
    border: 1px solid rgba(14, 110, 184, 0.2);
    padding: 0;
    cursor: pointer;
  }
  .menu-toggle span {
    width: 20px;
    height: 2px;
    background: #091a2c;
    border-radius: 5px;
    display: block;
  }
  .navigation {
    display: flex !important;
    position: fixed;
    top: -12px;
    right: -3vw;
    bottom: auto;
    left: auto;
    z-index: 1002;
    width: min(72vw, 310px);
    height: 100dvh;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 8px;
    margin: 0;
    padding: 84px 20px 28px;
    border-radius: 26px 0 0 26px;
    background: linear-gradient(165deg, rgba(246, 251, 255, 0.98) 0%, rgba(228, 241, 255, 0.96) 100%);
    border-left: 1px solid rgba(255, 255, 255, 0.92);
    box-shadow: -18px 0 48px rgba(4, 20, 40, 0.32);
    -webkit-backdrop-filter: blur(28px) saturate(190%);
    backdrop-filter: blur(28px) saturate(190%);
    transform: translate3d(108%, 0, 0);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease, visibility 0.32s;
  }
  .navigation::before {
    content: "A2A MENU";
    position: absolute;
    top: 32px;
    left: 24px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.2em;
    color: var(--a2a-blue);
  }
  .navigation.is-open {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
  .navigation .nav-link {
    justify-content: flex-start;
    width: 100%;
    height: 44px;
    padding: 0 16px;
    border-radius: 14px;
    font-size: 14.5px;
  }

  /* Tablet Page 1: Hero */
  .airplane {
    left: 50%;
    top: 20%;
    width: clamp(360px, 56vw, 520px);
    transform: translate3d(-50%, var(--plane-shift), 0) scale(var(--plane-scale));
  }
  .home-copy {
    inset: auto 5vw 5.5vh 5vw;
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    align-items: end;
    gap: 24px;
  }
  .home-copy h1 {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    font-size: clamp(40px, 5.8vw, 56px);
    line-height: 0.98;
  }
  .hero-description {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: none;
    padding: 16px 18px 16px 21px;
    font-size: clamp(13.5px, 1.65vw, 15.5px);
    line-height: 1.55;
  }

  /* Tablet Page 2: Tour Packages (2-card snap carousel on 768px–1023px so cards are spacious) */
  .packages-reveal {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    align-content: center !important;
    justify-items: stretch !important;
    padding-left: 4vw;
    padding-right: 4vw;
    padding-bottom: 14px;
    gap: clamp(10px, 1.6vh, 16px);
  }
  .packages-heading {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
  .package-carousel-shell {
    width: 100%;
  }
  .package-nav-arrow {
    width: 40px;
    height: 40px;
  }
  .package-nav-arrow--prev {
    left: -10px;
  }
  .package-nav-arrow--next {
    right: -10px;
  }
  .package-grid {
    grid-auto-flow: column;
    grid-auto-columns: calc(50% - 8px) !important;
    grid-template-columns: none !important;
    gap: 16px;
    width: 100%;
    height: auto !important;
    max-height: none !important;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 6px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    align-self: center;
    align-items: stretch;
  }
  .package-grid::-webkit-scrollbar {
    display: none;
  }
  .package-card {
    scroll-snap-align: start;
    height: auto;
    min-height: 0;
    justify-content: space-between;
  }
  .package-visual {
    flex: 0 0 clamp(128px, 21vh, 176px);
    height: clamp(128px, 21vh, 176px);
    min-height: 0;
    max-height: none;
  }
  .package-badge,
  .package-booking {
    top: 10px;
    min-height: 24px;
    padding: 0 9px;
    font-size: 8px;
  }
  .package-content {
    flex: 1 1 auto !important;
    padding: 12px 15px 13px;
    gap: 6px;
  }
  .package-stops {
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    gap: 5px;
    padding: 5px 8px;
    font-size: 8.5px;
  }
  .package-perks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 10px;
  }
  .packages-mobile-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--a2a-slate);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.15em;
  }
  .packages-mobile-progress i {
    width: 24px;
    height: 2px;
    border-radius: 3px;
    background: var(--a2a-blue);
  }

  /* Tablet Page 3: Features 2x2 Grid */
  .features-reveal {
    justify-content: center;
    gap: 16px;
    padding-left: 4vw;
    padding-right: 4vw;
  }
  .feature-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .feature-card {
    min-height: 0;
    padding: 16px 18px 46px;
  }
  .feature-icon {
    width: 44px;
    height: 44px;
  }
  .feature-icon svg {
    width: 22px;
    height: 22px;
  }
  .feature-stat {
    margin: 10px 0 2px;
    font-size: 22px;
  }
  .feature-card h3 {
    margin: 10px 0 5px;
    font-size: 17px;
  }
  .feature-stat + h3 {
    margin-top: 2px;
  }

  /* Tablet Page 4: Handpicked Places */
  .places-reveal {
    padding-left: 4vw;
    padding-right: 4vw;
  }
  .places-heading {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 4%;
  }
  .destination-caption h3 {
    font-size: clamp(44px, 6.5vw, 72px);
  }

  /* Tablet Page 5 & Page 6: Experiences & Transport */
  .experiences-reveal,
  .transport-reveal {
    padding-left: 4vw;
    padding-right: 4vw;
  }
  .experiences-panel {
    grid-template-columns: 1.04fr 0.96fr;
  }
  .experience-feature-copy h3 {
    font-size: clamp(34px, 4.8vw, 52px);
  }
  .experience-option-copy strong {
    font-size: clamp(14.5px, 1.8vw, 18px);
  }
  .transport-panel {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .transport-visual-copy h3 {
    font-size: clamp(32px, 4.5vw, 48px);
  }
}

/* --- 5. Small Tablet / Phablet (600px – 767px) --- */
@media (min-width: 600px) and (max-width: 767px) {
  .package-grid {
    grid-auto-columns: 68% !important;
  }
  .home-copy h1 {
    font-size: clamp(38px, 7.2vw, 48px);
  }
  .destination-caption h3 {
    font-size: clamp(36px, 7.8vw, 52px);
  }
}

/* --- 6. Mobile All Sizes (320px – 767px: 320px, 360px, 375px, 390px, 414px–430px) --- */
@media (max-width: 767px) {
  .nav-shell:has(.navigation.is-open)::after {
    content: "";
    position: fixed;
    top: calc(-10px - env(safe-area-inset-top));
    left: -4vw;
    width: 100vw;
    height: 100dvh;
    background: rgba(2, 16, 28, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1001;
    pointer-events: none;
  }

  /* Let Page 2 & Page 3 grids fill their rows cleanly without artificial gaps */
  .package-grid {
    height: auto !important;
    max-height: none;
    align-self: center;
    align-items: stretch;
  }
  .feature-cards {
    height: 100%;
    max-height: none;
    margin: 0;
  }

  /* Page 4: Ensure long destination names like Rameswaram & Kanyakumari never clip */
  .destination-caption {
    left: 16px;
    right: 68px;
    bottom: 18px;
  }
  .destination-caption h3 {
    font-size: clamp(28px, 8.2vw, 46px);
    line-height: 0.94;
    letter-spacing: -0.055em;
    overflow-wrap: break-word;
  }
  .destination-detail-copy h2 {
    font-size: clamp(32px, 9.2vw, 56px);
    line-height: 0.94;
  }

  /* Page 5: Ensure Experience title never overlaps top counter */
  .experiences-panel {
    grid-template-rows: minmax(0, 0.78fr) minmax(0, 1.22fr);
  }
  .experience-feature-copy {
    left: 16px;
    right: 28px;
    bottom: 14px;
    max-width: none;
  }
  .experience-feature-kicker {
    margin-bottom: 4px;
    font-size: 7px;
  }
  .experience-feature-copy h3 {
    font-size: clamp(25px, 7vw, 36px);
    line-height: 0.94;
  }
  .experience-feature-description {
    margin-top: 6px;
    font-size: 10px;
  }
  .experience-feature-link {
    margin-top: 7px;
    padding-bottom: 3px;
  }

  /* Page 6: Ensure Transport visual & 4 vehicle modes fit without internal scrollbars */
  .transport-panel {
    grid-template-rows: minmax(0, 0.58fr) minmax(0, 1.42fr);
    gap: 8px;
  }
  .transport-memory-tag {
    top: 32px;
    right: 12px;
    padding: 5px 8px;
    font-size: 6px;
  }
  .transport-visual-copy {
    left: 14px;
    right: 14px;
    bottom: 11px;
  }
  .transport-visual-copy h3 {
    font-size: clamp(24px, 6.8vw, 34px);
    line-height: 0.95;
  }
  .transport-options-panel {
    justify-content: space-between;
    overflow: hidden;
  }
}

/* --- 7. Small Mobile (320px – 380px: iPhone SE, Galaxy S, 320px, 360px, 375px) --- */
@media (max-width: 380px) {
  :root {
    --global-header-clearance: calc(58px + 8px + env(safe-area-inset-top) + 12px);
  }
  .nav-shell {
    height: 58px;
    padding: 0 10px;
  }
  .logo img {
    height: 42px;
    transform: scale(1.16);
  }
  .header-actions .header-btn--accent {
    display: none;
  }
  .header-btn {
    height: 32px;
    padding: 0 11px;
    font-size: 10.5px;
  }
  .home-copy h1 {
    font-size: clamp(29px, 8.8vw, 36px);
  }
  .hero-description {
    padding: 10px 12px 10px 15px;
    font-size: 12px;
    line-height: 1.42;
  }
  .package-nav-arrow {
    width: 30px;
    height: 30px;
  }
  .package-nav-arrow svg {
    width: 14px;
    height: 14px;
  }
  .package-nav-arrow--prev {
    left: -2px;
  }
  .package-nav-arrow--next {
    right: -2px;
  }
  .package-grid {
    grid-auto-columns: 92% !important;
  }
  .package-visual {
    min-height: 88px;
  }
  .package-content {
    padding: 9px 11px 10px;
    gap: 4px;
  }
  .package-stops {
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    padding: 4px 6px;
    font-size: 8px;
    gap: 4px;
  }
  .package-perks > span {
    font-size: 8.5px;
  }
  .package-price strong {
    font-size: 16px;
  }
  .package-cta {
    min-height: 30px;
    padding: 0 10px;
    font-size: 8.5px;
  }
  .feature-card {
    padding: 9px 10px;
  }
  .feature-stat {
    font-size: 14px;
    margin: 4px 0 1px;
  }
  .feature-card h3 {
    font-size: 11.5px;
    margin: 5px 0 3px;
  }
  .feature-stat + h3 {
    margin-top: 1px;
  }
  .feature-card p {
    font-size: 8.5px;
    line-height: 1.3;
  }
  .features-trust-pill {
    font-size: 8.5px;
    padding: 6px 10px;
  }
  .destination-caption h3 {
    font-size: clamp(25px, 8vw, 34px);
  }
  .experience-feature-copy h3 {
    font-size: clamp(22px, 6.8vw, 28px);
  }
  .transport-visual-copy h3 {
    font-size: clamp(21px, 6.5vw, 27px);
  }
}

/* --- 8. Short-Height Mobile Screens (max-width: 767px and max-height: 670px) --- */
@media (max-width: 767px) and (max-height: 670px) {
  :root {
    --global-header-clearance: calc(56px + 8px + env(safe-area-inset-top) + 10px);
  }
  .nav-shell {
    height: 56px;
  }
  .logo img {
    height: 40px;
  }
  .packages-intro,
  .experiences-intro,
  .transport-options-intro,
  .transport-memory-tag {
    display: none;
  }
  .package-visual {
    flex: 0 0 clamp(104px, 19svh, 138px);
    height: clamp(104px, 19svh, 138px);
    min-height: 0;
  }
  .package-content {
    flex: 1 1 auto !important;
    padding: 10px 12px 11px;
    gap: 4px;
  }
  .feature-card {
    padding: 8px 10px;
  }
  .feature-icon {
    width: 26px;
    height: 26px;
  }
  .feature-stat {
    font-size: 13px;
    margin: 4px 0 1px;
  }
  .feature-card h3 {
    margin: 4px 0 2px;
    font-size: 11px;
  }
  .feature-card p {
    font-size: 8px;
    line-height: 1.28;
  }
  .features-trust-pill {
    padding: 5px 10px;
    font-size: 8px;
  }
}

/* --- 9. Mobile & Phablet Landscape Orientation (max-width: 920px, max-height: 520px) --- */
@media (max-width: 920px) and (max-height: 520px) and (orientation: landscape) {
  :root {
    --global-header-clearance: calc(50px + 6px + env(safe-area-inset-top) + 8px);
  }
  .header {
    top: 6px;
  }
  .nav-shell {
    height: 50px;
    padding: 0 14px;
  }
  .logo img {
    height: 36px;
    transform: scale(1.12);
  }
  .header-btn {
    height: 30px;
    padding: 0 10px;
    font-size: 10.5px;
  }
  .airplane {
    top: 24%;
    width: 44vw;
  }
  .home-copy {
    inset: auto 4vw 10px 4vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 16px;
  }
  .home-copy h1 {
    font-size: clamp(24px, 4.5vw, 34px);
  }
  .hero-description {
    margin-top: 0;
    padding: 9px 12px;
    font-size: 11px;
    line-height: 1.35;
  }
  .packages-intro,
  .features-intro,
  .experiences-intro,
  .transport-options-intro,
  .experiences-footer,
  .transport-footer,
  .features-trust-pill {
    display: none;
  }
  .experiences-panel,
  .transport-panel {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 10px;
  }
}

/* ==========================================================================
   GLOBAL PREMIUM TYPOGRAPHY SYSTEM (OUTFIT + PLUS JAKARTA SANS)
   Replaces all legacy Georgia / Times New Roman / italic serif styles across
   the entire website with a unified, modern luxury display hierarchy.
   ========================================================================== */
:root {
  --font-sans: "Plus Jakarta Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-display: "Outfit", "Plus Jakarta Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 1. Unified Premium Display Headings Across All Pages */
.home-copy h1,
.packages-heading h2,
.features-heading h2,
.places-title-group h2,
.experiences-title-group h2,
.transport-heading h2,
.about-copy h2,
.story-copy h2,
#destination-detail-title {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  letter-spacing: -0.035em !important;
}

/* 2. Subheadings, Card Titles, Stats & Quotes (Previously Georgia/Serif) */
.package-content h3,
.package-price strong,
.feature-card h3,
.feature-stat,
.destination-caption h3,
.experience-feature-copy h3,
.transport-visual-copy h3,
.about-reveal .island-caption h3,
.story-stats strong {
  font-family: var(--font-display) !important;
  font-style: normal !important;
  letter-spacing: -0.028em !important;
}

.feature-card h3 {
  font-weight: 700 !important;
}

.feature-stat,
.story-stats strong {
  font-weight: 800 !important;
  background: linear-gradient(135deg, #8fd0ff 0%, #4da6ff 55%, #cce8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--a2a-blue-bright) !important;
}

.about-quote p {
  font-family: var(--font-sans) !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

/* 3. Matching Premium Accent Words (<em>) Across Light & Dark Sections */
.packages-heading h2 em,
.features-heading h2 em,
.places-title-group h2 em,
.experiences-title-group h2 em,
.experience-feature-copy h3 em,
.transport-heading h2 em,
.transport-visual-copy h3 em,
.about-copy h2 em,
.story-copy h2 em {
  font-family: var(--font-display) !important;
  font-style: normal !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  display: inline-block;
}

/* Light-background sections: Royal Sapphire Luxury Gradient */
.packages-heading h2 em,
.places-title-group h2 em,
.transport-heading h2 em,
.about-copy h2 em,
.story-copy h2 em {
  background: linear-gradient(135deg, #0e6eb8 0%, #2589d8 52%, #07477a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--a2a-blue) !important;
}

/* Dark-background sections: Luminous Ice-Blue Luxury Gradient */
.features-heading h2 em,
.experiences-title-group h2 em,
.experience-feature-copy h3 em,
.transport-visual-copy h3 em {
  background: linear-gradient(135deg, #8fd0ff 0%, #4da6ff 55%, #cce8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--a2a-blue-bright) !important;
}

/* ==========================================================================
   PAGE 4 (HANDPICKED PLACES) & PACKAGE CARDS — PERFECT IMAGE & CARD FIT
   ========================================================================== */
.places-reveal {
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-items: center;
}

.places-heading {
  width: min(100%, 1380px);
  margin-inline: auto;
}

.destination-card {
  position: relative;
  width: min(100%, 1380px);
  height: 100%;
  min-height: clamp(260px, 44vh, 420px);
  max-height: clamp(320px, 56vh, 540px);
  margin-inline: auto;
  border-radius: clamp(20px, 2vw, 28px);
  overflow: hidden;
  border: 1px solid rgba(14, 110, 184, 0.18);
  box-shadow:
    0 24px 64px rgba(6, 20, 38, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.destination-image,
.destination-detail-image,
.package-visual > img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center;
}

.destination-shade {
  inset: 0 !important;
  background:
    linear-gradient(180deg, rgba(4, 16, 28, 0.34) 0%, transparent 32%, rgba(4, 16, 28, 0.18) 56%, rgba(4, 14, 26, 0.86) 100%) !important;
}

.destination-caption {
  left: clamp(22px, 2.8vw, 44px);
  right: clamp(84px, 8vw, 120px);
  bottom: clamp(22px, 3.8vh, 40px);
}

.destination-caption h3 {
  font-size: clamp(36px, 4.8vw, 68px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.03em !important;
  text-shadow: 0 4px 24px rgba(2, 10, 20, 0.45);
}

.destination-description {
  margin-top: clamp(8px, 1.2vh, 14px);
  font-size: clamp(13px, 1.05vw, 17px);
  line-height: 1.45;
  max-width: 540px;
}

@media (max-width: 767px) {
  .destination-card {
    width: 100%;
    height: 100%;
    min-height: 240px;
    max-height: clamp(300px, 55svh, 450px);
    border-radius: 20px;
  }

  .destination-caption {
    left: 18px;
    right: 68px;
    bottom: 18px;
  }

  .destination-caption h3 {
    font-size: clamp(28px, 8.2vw, 42px) !important;
    line-height: 1.02 !important;
  }

  .destination-description {
    margin-top: 6px;
    font-size: clamp(11px, 3.1vw, 13px);
    line-height: 1.38;
  }
}

/* ==========================================================================
   PAGE 5: TRAVELLER REVIEWS CAROUSEL & LUXURY A2A BACKGROUND TEMPLATE
   ========================================================================== */
.reviews-reveal > .experiences-heading,
.reviews-reveal > .experiences-panel,
.reviews-reveal > .experiences-footer {
  display: none !important;
}

.experiences-reveal.reviews-reveal {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: var(--global-header-clearance) !important;
  padding-bottom: clamp(16px, 2.8vh, 28px) !important;
  padding-left: clamp(24px, 4.8vw, 84px) !important;
  padding-right: clamp(24px, 4.8vw, 84px) !important;
  background:
    radial-gradient(ellipse 78% 54% at 50% 16%, rgba(28, 126, 214, 0.3), transparent 68%),
    linear-gradient(180deg, rgba(6, 18, 34, 0.94) 0%, rgba(5, 32, 58, 0.88) 52%, rgba(6, 16, 30, 0.96) 100%),
    url("assets/island-hero-4k.webp") center 56% / cover no-repeat !important;
  color: #f4f8fc;
  isolation: isolate;
}

.experiences-reveal.reviews-reveal::before {
  content: "REVIEWS";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -0.08em;
  transform: translateX(-50%);
  color: rgba(124, 192, 255, 0.04);
  font-family: var(--font-display);
  font-size: clamp(110px, 16vw, 260px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}

.reviews-shell {
  width: min(100%, 1240px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.4vh, 28px);
  min-width: 0;
  min-height: 0;
}

.reviews-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(10px, 1.6vh, 18px);
}

.reviews-google-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow:
    0 12px 28px rgba(3, 12, 24, 0.24),
    inset 0 1px 0 #ffffff;
  font-family: var(--font-sans);
  font-size: clamp(12px, 0.95vw, 13.5px);
  line-height: 1;
  color: #1e293b;
}

.google-wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 1vw, 14.5px);
  letter-spacing: -0.02em;
}

.google-wordmark b {
  font-weight: 700;
}

.google-wordmark .g-b { color: #4285f4; }
.google-wordmark .g-r { color: #ea4335; }
.google-wordmark .g-y { color: #fbbc05; }
.google-wordmark .g-g { color: #34a853; }

.reviews-pill-stars {
  color: #d99b26;
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: 2px;
}

.reviews-pill-score {
  color: #0f172a;
  font-weight: 800;
}

.reviews-pill-count {
  color: #475569;
  font-weight: 500;
}

.reviews-title {
  margin: 0;
  color: #ffffff;
  font-family: var(--font-display) !important;
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 800 !important;
  line-height: 1.06;
  letter-spacing: -0.035em !important;
  text-shadow: 0 6px 24px rgba(2, 10, 22, 0.36);
}

.reviews-title em {
  font-family: var(--font-display) !important;
  font-style: normal !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #8fd0ff 0%, #4da6ff 55%, #cce8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--a2a-blue-bright);
}

.reviews-carousel-shell {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  min-width: 0;
}

.review-nav-arrow {
  position: absolute;
  top: 50%;
  z-index: 8;
  transform: translateY(-50%);
  width: clamp(38px, 3vw, 44px);
  height: clamp(38px, 3vw, 44px);
  border-radius: 50%;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: #ffffff;
  color: #334155;
  box-shadow:
    0 10px 26px rgba(3, 12, 24, 0.25),
    0 2px 6px rgba(14, 110, 184, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}

.review-nav-arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.review-nav-arrow:hover,
.review-nav-arrow:focus-visible {
  transform: translateY(-50%) scale(1.08);
  background: linear-gradient(135deg, var(--a2a-blue), var(--a2a-navy));
  border-color: rgba(255, 255, 255, 0.9);
  color: #ffffff;
  box-shadow: 0 14px 30px rgba(14, 110, 184, 0.38);
}

.review-nav-arrow--prev {
  left: clamp(-22px, -1.8vw, -14px);
}

.review-nav-arrow--next {
  right: clamp(-22px, -1.8vw, -14px);
}

.reviews-track {
  --rev-gap: clamp(16px, 1.8vw, 24px);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (2 * var(--rev-gap))) / 3) !important;
  gap: var(--rev-gap);
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 6px 2px 10px;
}

.reviews-track::-webkit-scrollbar {
  display: none;
}

.review-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  min-height: clamp(230px, 31vh, 285px);
  padding: clamp(20px, 2.4vh, 28px) clamp(20px, 2vw, 26px);
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow:
    0 20px 44px rgba(3, 12, 24, 0.24),
    0 2px 8px rgba(14, 110, 184, 0.08);
  color: #1e293b;
  scroll-snap-align: start;
  text-align: left;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  margin-bottom: clamp(10px, 1.4vh, 14px);
}

.review-avatar {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 2px solid #e2e8f0;
  background: #cbd5e1;
}

.review-author-info {
  min-width: 0;
}

.review-author-info h3 {
  margin: 0 0 3px;
  color: #0f172a;
  font-family: var(--font-display) !important;
  font-size: clamp(14.5px, 1.08vw, 16px);
  font-weight: 700 !important;
  line-height: 1.2;
  letter-spacing: -0.015em !important;
}

.review-author-info p {
  margin: 0;
  color: #64748b;
  font-size: clamp(11.5px, 0.85vw, 12.5px);
  font-weight: 500;
  line-height: 1.25;
}

.review-stars {
  color: #d99b26;
  font-size: clamp(14px, 1.05vw, 16px);
  letter-spacing: 3px;
  line-height: 1;
  margin-bottom: clamp(10px, 1.4vh, 14px);
}

.review-quote {
  margin: 0 0 clamp(14px, 2vh, 20px);
  color: #1e293b;
  font-family: var(--font-sans);
  font-size: clamp(12.5px, 0.94vw, 14px);
  font-weight: 450;
  line-height: 1.62;
}

.review-meta {
  margin: auto 0 0;
  color: #64748b;
  font-size: clamp(11px, 0.82vw, 12px);
  font-weight: 500;
  line-height: 1.2;
}

.reviews-footer-cta {
  display: flex;
  justify-content: center;
  width: 100%;
}

.reviews-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: clamp(42px, 5vh, 48px);
  padding: 0 clamp(22px, 2.2vw, 30px);
  border-radius: 999px;
  background: linear-gradient(135deg, #1683d8 0%, #0b5a99 100%);
  border: 1px solid rgba(145, 204, 255, 0.55);
  box-shadow:
    0 12px 28px rgba(14, 110, 184, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: clamp(12.5px, 0.95vw, 14px);
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.reviews-cta-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #2191e8 0%, #0e6eb8 100%);
  box-shadow: 0 16px 34px rgba(14, 110, 184, 0.48);
}

/* Tablet View (768px - 1023px): 2 Review Cards */
@media (min-width: 768px) and (max-width: 1023px) {
  .reviews-track {
    --rev-gap: 18px;
    grid-auto-columns: calc((100% - var(--rev-gap)) / 2) !important;
  }

  .review-nav-arrow--prev {
    left: -14px;
  }

  .review-nav-arrow--next {
    right: -14px;
  }
}

/* Mobile View (<= 767px): 1 Full Centered Review Card */
@media (max-width: 767px) {
  .experiences-reveal.reviews-reveal {
    padding-left: 5vw !important;
    padding-right: 5vw !important;
    padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }

  .reviews-shell {
    gap: clamp(12px, 2svh, 18px);
  }

  .reviews-google-pill {
    padding: 6px 14px;
    font-size: 11.5px;
    gap: 6px;
  }

  .reviews-title {
    font-size: clamp(24px, 7vw, 34px);
  }

  .reviews-track {
    --rev-gap: 14px;
    grid-auto-columns: 100% !important;
    padding: 4px 1px 8px;
  }

  .review-card {
    min-height: clamp(210px, 34svh, 255px);
    padding: 18px 18px;
    border-radius: 18px;
    scroll-snap-align: center;
  }

  .review-nav-arrow {
    width: 34px;
    height: 34px;
  }

  .review-nav-arrow svg {
    width: 15px;
    height: 15px;
  }

  .review-nav-arrow--prev {
    left: -10px;
  }

  .review-nav-arrow--next {
    right: -10px;
  }

  .reviews-cta-btn {
    min-height: 40px;
    padding: 0 20px;
    font-size: 12px;
  }
}

/* ==========================================================================
   PAGE 3: IPHONE LIQUID-GLASS & SPRING-PHYSICS ENHANCEMENT ON FEATURE CARDS
   ========================================================================== */
.features-reveal .feature-cards {
  pointer-events: auto;
}

.features-reveal .feature-card {
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform 0.44s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.44s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.36s cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  backdrop-filter: blur(22px) saturate(165%);
}

/* Dynamic iPhone liquid-glass spotlight + sweeping specular reflection */
.features-reveal .feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(
      260px circle at var(--glow-x, 50%) var(--glow-y, 28%),
      rgba(135, 206, 255, 0.32) 0%,
      rgba(59, 158, 255, 0.12) 42%,
      transparent 74%
    ),
    linear-gradient(
      125deg,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.05) 36%,
      transparent 62%
    );
  transition: opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.features-reveal .feature-icon,
.features-reveal .feature-icon svg,
.features-reveal .feature-stat,
.features-reveal .feature-card h3,
.features-reveal .feature-card h3::after,
.features-reveal .feature-card p,
.features-reveal .feature-arrow {
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.34s ease,
    border-color 0.34s ease,
    box-shadow 0.38s ease,
    color 0.32s ease,
    width 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Subtle iOS depth focus: non-hovered sibling cards gently soften when one card is active */
@media (hover: hover) {
  .features-reveal .feature-cards:hover .feature-card:not(:hover) {
    filter: brightness(0.88) saturate(0.92);
    transform: translateY(calc(var(--card-shift, 0px) + 2px)) scale(calc(var(--card-scale, 1) * 0.985)) !important;
  }
}

/* Active / Hovered / Touched Card — iPhone Liquid Glass Pop */
.features-reveal .feature-card:hover,
.features-reveal .feature-card:focus-visible,
.features-reveal .feature-card:active,
.features-reveal .feature-card.is-touched {
  z-index: 4;
  transform: translateY(calc(var(--card-shift, 0px) - 10px)) scale(calc(var(--card-scale, 1) * 1.038)) !important;
  border-color: rgba(168, 222, 255, 0.88) !important;
  background: linear-gradient(
    145deg,
    rgba(22, 78, 134, 0.88) 0%,
    rgba(11, 44, 78, 0.92) 52%,
    rgba(8, 24, 44, 0.96) 100%
  ) !important;
  box-shadow:
    0 28px 60px rgba(2, 10, 24, 0.58),
    0 0 38px rgba(59, 158, 255, 0.34),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.72),
    inset 0 -1px 2px rgba(77, 166, 255, 0.32) !important;
  -webkit-backdrop-filter: blur(30px) saturate(200%) brightness(1.08);
  backdrop-filter: blur(30px) saturate(200%) brightness(1.08);
}

.features-reveal .feature-card:hover::after,
.features-reveal .feature-card:focus-visible::after,
.features-reveal .feature-card:active::after,
.features-reveal .feature-card.is-touched::after {
  opacity: 1;
}

.features-reveal .feature-card:hover .feature-icon,
.features-reveal .feature-card:focus-visible .feature-icon,
.features-reveal .feature-card:active .feature-icon,
.features-reveal .feature-card.is-touched .feature-icon {
  transform: translateY(-3px) scale(1.1);
  border-color: rgba(210, 238, 255, 0.92);
  background: radial-gradient(circle at 32% 24%, rgba(145, 212, 255, 0.65), rgba(14, 110, 184, 0.92) 72%);
  box-shadow:
    0 12px 26px rgba(30, 136, 229, 0.46),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.85);
}

.features-reveal .feature-card:hover .feature-icon svg,
.features-reveal .feature-card:focus-visible .feature-icon svg,
.features-reveal .feature-card:active .feature-icon svg,
.features-reveal .feature-card.is-touched .feature-icon svg {
  stroke: #ffffff;
  transform: scale(1.06);
}

.features-reveal .feature-card:hover .feature-stat,
.features-reveal .feature-card:focus-visible .feature-stat,
.features-reveal .feature-card:active .feature-stat,
.features-reveal .feature-card.is-touched .feature-stat {
  transform: translateY(-2px) scale(1.04);
  transform-origin: left center;
}

.features-reveal .feature-card:hover h3,
.features-reveal .feature-card:focus-visible h3,
.features-reveal .feature-card:active h3,
.features-reveal .feature-card.is-touched h3 {
  color: #ffffff;
  transform: translateY(-1px);
}

.features-reveal .feature-card:hover h3::after,
.features-reveal .feature-card:focus-visible h3::after,
.features-reveal .feature-card:active h3::after,
.features-reveal .feature-card.is-touched h3::after {
  width: 58px;
  background: linear-gradient(90deg, #8fd0ff, #3b9eff);
  box-shadow: 0 0 14px rgba(124, 192, 255, 0.75);
}

.features-reveal .feature-card:hover p,
.features-reveal .feature-card:focus-visible p,
.features-reveal .feature-card:active p,
.features-reveal .feature-card.is-touched p {
  color: #eef6ff;
}

.features-reveal .feature-card:hover .feature-arrow,
.features-reveal .feature-card:focus-visible .feature-arrow,
.features-reveal .feature-card:active .feature-arrow,
.features-reveal .feature-card.is-touched .feature-arrow {
  transform: scale(1.14) rotate(45deg);
  background: linear-gradient(135deg, #3b9eff 0%, #0e6eb8 100%);
  border-color: rgba(255, 255, 255, 0.95);
  color: #ffffff;
  box-shadow:
    0 10px 24px rgba(30, 136, 229, 0.52),
    inset 0 1px 1px rgba(255, 255, 255, 0.75);
}

@media (max-width: 767px) {
  .features-reveal .feature-card:hover,
  .features-reveal .feature-card:active,
  .features-reveal .feature-card.is-touched {
    transform: translateY(calc(var(--card-shift, 0px) - 5px)) scale(calc(var(--card-scale, 1) * 1.028)) !important;
  }
}

/* ==========================================================================
   PAGE 6: TRAVELLER VIDEO REELS SLOT (STAGGERED 9:16 REELS CAROUSEL)
   ========================================================================== */
.reels-reveal > .transport-heading,
.reels-reveal > .transport-panel,
.reels-reveal > .transport-footer {
  display: none !important;
}

.transport-reveal.reels-reveal {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: var(--global-header-clearance) !important;
  padding-bottom: clamp(12px, 2.2vh, 24px) !important;
  padding-left: clamp(24px, 4.8vw, 84px) !important;
  padding-right: clamp(24px, 4.8vw, 84px) !important;
  background:
    radial-gradient(ellipse 75% 55% at 50% 24%, rgba(22, 131, 216, 0.26), transparent 70%),
    linear-gradient(155deg, #051120 0%, #06213c 52%, #040d18 100%) !important;
  color: #f4f8fc;
  isolation: isolate;
}

.reels-arc-svg {
  position: absolute;
  top: clamp(92px, 14vh, 145px);
  left: 3%;
  width: 94%;
  height: clamp(140px, 24vh, 240px);
  z-index: 0;
  pointer-events: none;
}

.reels-shell {
  position: relative;
  z-index: 2;
  width: min(100%, 1180px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vh, 22px);
  min-width: 0;
  min-height: 0;
}

.reels-top-bar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 6px 10px 6px 12px;
  border-radius: 999px;
  background: rgba(10, 32, 56, 0.72);
  border: 1px solid rgba(124, 192, 255, 0.28);
  box-shadow:
    0 12px 28px rgba(2, 10, 22, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.reels-avatar-stack {
  display: inline-flex;
  align-items: center;
}

.reels-avatar-stack img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #07203a;
  margin-left: -8px;
}

.reels-avatar-stack img:first-child {
  margin-left: 0;
}

.reels-handle-text {
  margin: 0;
  color: #dce9f6;
  font-size: clamp(11.5px, 0.9vw, 13px);
  font-weight: 500;
}

.reels-handle-text strong {
  color: #ffffff;
  font-weight: 700;
}

.reels-follow-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(22, 131, 216, 0.38), rgba(11, 90, 153, 0.58));
  border: 1px solid rgba(145, 204, 255, 0.45);
  color: #ffffff;
  font-size: clamp(10.5px, 0.82vw, 12px);
  font-weight: 700;
  transition: transform 0.2s ease, background 0.2s ease;
}

.reels-follow-pill:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, var(--a2a-blue), var(--a2a-navy));
}

.reels-carousel-shell {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  min-width: 0;
}

.reel-nav-arrow {
  position: absolute;
  top: 50%;
  z-index: 8;
  transform: translateY(-50%);
  width: clamp(38px, 3vw, 44px);
  height: clamp(38px, 3vw, 44px);
  border-radius: 50%;
  border: 1px solid rgba(145, 204, 255, 0.38);
  background: rgba(10, 32, 58, 0.82);
  color: #e2f0ff;
  box-shadow:
    0 12px 28px rgba(2, 10, 22, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), background 0.22s ease, border-color 0.22s ease;
}

.reel-nav-arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.reel-nav-arrow:hover,
.reel-nav-arrow:focus-visible {
  transform: translateY(-50%) scale(1.08);
  background: linear-gradient(135deg, var(--a2a-blue), var(--a2a-navy));
  border-color: #ffffff;
  color: #ffffff;
}

.reel-nav-arrow--prev {
  left: clamp(-26px, -2.2vw, -14px);
}

.reel-nav-arrow--next {
  right: clamp(-26px, -2.2vw, -14px);
}

.reels-track {
  --reel-gap: clamp(14px, 1.6vw, 22px);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (3 * var(--reel-gap))) / 4) !important;
  gap: var(--reel-gap);
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 18px 4px 22px;
}

.reels-track::-webkit-scrollbar {
  display: none;
}

.reel-card {
  position: relative;
  isolation: isolate;
  height: clamp(290px, 48vh, 415px);
  border-radius: 22px;
  overflow: hidden;
  background: #081e36;
  border: 1.5px solid rgba(145, 204, 255, 0.32);
  box-shadow:
    0 22px 48px rgba(2, 8, 18, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.32s ease, box-shadow 0.38s ease;
}

/* Staggered wave arrangement matching the reference screenshot */
@media (min-width: 1024px) {
  .reel-card:nth-child(odd) {
    transform: translateY(-10px);
  }
  .reel-card:nth-child(even) {
    transform: translateY(12px);
  }
  .reel-card:nth-child(odd):hover {
    transform: translateY(-18px) scale(1.03);
    border-color: rgba(168, 222, 255, 0.9);
    box-shadow: 0 28px 58px rgba(2, 10, 24, 0.65), 0 0 28px rgba(59, 158, 255, 0.35);
  }
  .reel-card:nth-child(even):hover {
    transform: translateY(4px) scale(1.03);
    border-color: rgba(168, 222, 255, 0.9);
    box-shadow: 0 28px 58px rgba(2, 10, 24, 0.65), 0 0 28px rgba(59, 158, 255, 0.35);
  }
}

.reel-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  animation: reel-ken-burns 14s ease-in-out infinite alternate;
}

@keyframes reel-ken-burns {
  0% { transform: scale(1.01); }
  100% { transform: scale(1.09); }
}

.reel-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(4, 14, 26, 0.32) 0%, transparent 30%, rgba(4, 14, 26, 0.16) 58%, rgba(3, 12, 24, 0.88) 100%);
  pointer-events: none;
}

.reel-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(6, 20, 38, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.reel-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3b9eff;
  box-shadow: 0 0 8px #3b9eff;
}

.reel-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  border: 1.5px solid rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 14px;
  padding-left: 2px;
  pointer-events: none;
  transition: transform 0.25s ease, background 0.25s ease;
}

.reel-card:hover .reel-play-icon {
  transform: translate(-50%, -50%) scale(1.12);
  background: rgba(14, 110, 184, 0.75);
}

.reel-side-actions {
  position: absolute;
  right: 10px;
  bottom: 62px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #ffffff;
}

.reel-side-actions span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.reel-side-actions svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}

.reel-side-actions small {
  font-size: 9.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.reel-caption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 9px;
}

.reel-user-avatar {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #ffffff;
}

.reel-caption-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.reel-caption-copy strong {
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reel-caption-copy span {
  color: rgba(220, 236, 252, 0.88);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reels-bottom-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 16px;
  border-radius: 999px;
  background: rgba(10, 32, 58, 0.78);
  border: 1px solid rgba(124, 192, 255, 0.3);
  color: #dce9f6;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* Tablet View (768px - 1023px): 2 Reels */
@media (min-width: 768px) and (max-width: 1023px) {
  .reels-track {
    --reel-gap: 16px;
    grid-auto-columns: calc((100% - var(--reel-gap)) / 2) !important;
    padding: 8px 2px 12px;
  }

  .reel-card {
    height: clamp(290px, 46vh, 380px);
  }
}

/* Mobile View (<= 767px): Centered Vertical Reel Showcase */
@media (max-width: 767px) {
  .transport-reveal.reels-reveal {
    padding-left: 5vw !important;
    padding-right: 5vw !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }

  .reels-top-bar {
    padding: 5px 10px;
    gap: 8px;
  }

  .reels-avatar-stack img {
    width: 22px;
    height: 22px;
  }

  .reels-handle-text {
    font-size: 10.5px;
  }

  .reels-follow-pill {
    padding: 4px 10px;
    font-size: 10px;
  }

  .reels-track {
    --reel-gap: 12px;
    grid-auto-columns: 76% !important;
    padding: 6px 4px 10px;
  }

  .reel-card {
    height: clamp(265px, 48svh, 360px);
    border-radius: 18px;
    scroll-snap-align: center;
  }

  .reel-nav-arrow {
    width: 34px;
    height: 34px;
  }

  .reel-nav-arrow--prev {
    left: -8px;
  }

  .reel-nav-arrow--next {
    right: -8px;
  }
}

/* ==========================================================================
   PAGE 7 (LAST PAGE): "YOUR NEXT HOLIDAY IS ONE MESSAGE AWAY." + ATTACHED FOOTER
   ========================================================================== */
.site-footer.final-seventh-page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--a2a-black);
  overflow: hidden;
}

.final-cta-section {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: calc(var(--global-header-clearance) + clamp(16px, 2.5vh, 32px)) 5vw clamp(24px, 4vh, 46px);
  background:
    radial-gradient(ellipse 75% 65% at 50% 38%, #ffffff 0%, #eef5fc 60%, #e1edf8 100%);
  color: #091a2c;
  border-bottom: 1px solid rgba(14, 110, 184, 0.16);
}

.final-cta-inner {
  width: min(100%, 780px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.final-cta-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 clamp(12px, 1.8vh, 18px);
  color: #3b5978;
  font-family: var(--font-sans);
  font-size: clamp(9.5px, 0.8vw, 11px);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.final-cta-kicker span {
  width: clamp(26px, 3vw, 42px);
  height: 1px;
  background: rgba(14, 110, 184, 0.42);
}

.final-cta-title {
  margin: 0;
  color: #091a2c;
  font-family: var(--font-display) !important;
  font-size: clamp(32px, 4.6vw, 62px);
  font-weight: 800 !important;
  line-height: 1.04;
  letter-spacing: -0.035em !important;
}

.final-cta-title em {
  font-family: var(--font-display) !important;
  font-style: normal !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #0e6eb8 0%, #2589d8 52%, #07477a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--a2a-blue);
}

.final-cta-divider {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: clamp(14px, 2.2vh, 22px) 0;
}

.final-cta-divider span {
  width: 34px;
  height: 1px;
  background: rgba(14, 110, 184, 0.35);
}

.final-cta-divider i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--a2a-blue);
}

.final-cta-subtitle {
  margin: 0 0 clamp(18px, 2.8vh, 28px);
  max-width: 540px;
  color: #475b70;
  font-family: var(--font-sans);
  font-size: clamp(13px, 1.02vw, 15.5px);
  font-weight: 500;
  line-height: 1.65;
}

.final-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: clamp(44px, 5.2vh, 52px);
  padding: 0 clamp(26px, 2.5vw, 36px);
  border-radius: 999px;
  background: linear-gradient(135deg, #091a2c 0%, #0b4a80 55%, #0e6eb8 100%);
  border: 1px solid rgba(145, 204, 255, 0.45);
  box-shadow:
    0 14px 32px rgba(8, 24, 44, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: clamp(13px, 0.98vw, 15px);
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.final-cta-button:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--a2a-blue) 0%, var(--a2a-navy) 100%);
  box-shadow: 0 18px 38px rgba(14, 110, 184, 0.36);
}

.site-footer.final-seventh-page > .footer-shell {
  padding-top: clamp(24px, 3.4vh, 38px) !important;
  padding-bottom: clamp(14px, 2vh, 20px) !important;
}

@media (max-width: 767px) {
  .final-cta-section {
    padding: calc(var(--global-header-clearance) + 12px) 6vw 24px;
  }

  .final-cta-subtitle br {
    display: none;
  }

  .site-footer.final-seventh-page > .footer-shell {
    padding-top: 22px !important;
    padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }
}

/* ==========================================================================
   PAGE 1: A2A LOGO COLOR PATTERN HERO TITLE, APPLE VISIONOS 3-ZONE SPATIAL
   BENTO CARD & LIQUID-GLASS STORY CARD + SMOOTH PAGE 3 -> 4 SCROLL TRACK
   ========================================================================== */

/* Extended scroll track so Page 3 -> Page 4 has generous dwell & smooth transition */
.hero {
  height: 920svh !important;
}

@media (max-width: 1023px) {
  .hero {
    height: 900svh !important;
  }
}

@media (max-width: 767px) {
  .hero {
    height: 890svh !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero {
    height: auto !important;
  }
}

/* ==========================================================================
   ORIGINAL TEMPLATE POSITION + PERFECT MULTI-DEVICE FIT (PAGE 1):
   Left: .hero-left-copy ("Unforgettable / Travel Moments / Crafted for You")
   Right: .hero-glass-card (Unified iPhone Liquid-Glass Story + 2x2 Options + CTA)
   Zero header touch on airplane, zero card clipping, zero text truncation!
   ========================================================================== */
.home-copy {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none;
}

.hero-left-copy {
  position: absolute !important;
  left: 7.5% !important;
  top: clamp(240px, 48%, calc(100svh - 245px)) !important;
  bottom: auto !important;
  width: 46% !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 5;
}

.home-copy h1 {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-family: var(--font-display) !important;
  font-size: clamp(44px, 4.7vw, 80px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 0.99 !important;
  text-shadow: none !important;
  filter: drop-shadow(0 14px 30px rgba(3, 14, 28, 0.52)) drop-shadow(0 3px 10px rgba(4, 18, 36, 0.42));
}

.home-copy h1 br {
  display: none;
}

/* Line 1: Crisp Ice-White "Unforgettable" */
.home-copy h1 .hero-title-light {
  display: inline-block;
  background: linear-gradient(180deg, #ffffff 0%, #f2f9ff 70%, #dceeff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ffffff;
}

/* Line 2: Luminous A2A Sky-Cyan & Sapphire "Travel Moments" (100% Bright Over Trees & Ocean) */
.home-copy h1 .hero-title-blue {
  display: inline-block;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #bfe6ff 26%,
    #68c5ff 68%,
    #369eff 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #68c5ff;
  filter: drop-shadow(0 3px 14px rgba(4, 18, 36, 0.62));
}

/* Line 3: Crisp Luminous Pearl-White "Crafted for You" */
.home-copy h1 .hero-title-brand {
  display: inline-block;
  background: linear-gradient(180deg, #ffffff 0%, #eaf6ff 65%, #cde8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ffffff;
}

/* Desktop Airplane Clearance from Top Header */
@media (min-width: 1024px) {
  .airplane {
    left: 50% !important;
    top: 35% !important;
    width: clamp(270px, 34vw, 570px) !important;
    transform: translate3d(-50%, var(--plane-shift), 0) scale(var(--plane-scale)) !important;
  }
}

/* Unified Right-Side iPhone Liquid-Glass Card (.hero-glass-card) — Anchored Above Bottom so It Never Clips */
.hero-glass-card {
  position: absolute !important;
  left: 67.5% !important;
  right: 4.2% !important;
  top: auto !important;
  bottom: clamp(28px, 6vh, 64px) !important;
  width: auto !important;
  max-width: 440px !important;
  display: flex;
  flex-direction: column;
  gap: clamp(9px, 1.3vh, 13px);
  padding: clamp(14px, 1.8vh, 20px) clamp(16px, 1.35vw, 22px);
  border-radius: 26px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(14, 41, 72, 0.52) 40%,
    rgba(7, 22, 40, 0.66) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 28px 60px rgba(2, 12, 26, 0.44),
    0 8px 24px rgba(14, 110, 184, 0.25),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.78),
    inset 0 -1px 2px rgba(124, 192, 255, 0.3);
  backdrop-filter: blur(32px) saturate(200%) brightness(1.06);
  -webkit-backdrop-filter: blur(32px) saturate(200%) brightness(1.06);
  z-index: 5;
  pointer-events: auto;
  overflow: hidden;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.45s ease;
}

.hero-glass-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    120% 90% at 15% 0%,
    rgba(255, 255, 255, 0.26) 0%,
    rgba(124, 192, 255, 0.08) 42%,
    transparent 70%
  );
  pointer-events: none;
}

.hero-glass-card:hover {
  transform: translateY(-3px) scale(1.008);
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 34px 68px rgba(2, 12, 26, 0.52),
    0 10px 28px rgba(29, 143, 232, 0.34),
    inset 0 1.5px 1.5px rgba(255, 255, 255, 0.88),
    inset 0 -1px 3px rgba(124, 192, 255, 0.38);
}

.hero-card-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hero-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: #e6f4ff;
  text-transform: uppercase;
}

.hero-card-badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38ef7d;
  box-shadow: 0 0 10px #38ef7d, 0 0 4px #ffffff;
}

.hero-card-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3.5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
}

.hero-card-rating b {
  color: #ffd166;
  font-weight: 800;
}

/* Description Text inside Unified Card */
.hero-description {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 0 0 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: rgba(255, 255, 255, 0.96) !important;
  font-family: var(--font-sans) !important;
  font-size: clamp(12.5px, 0.9vw, 14.5px) !important;
  line-height: 1.48 !important;
  font-weight: 500 !important;
  letter-spacing: -0.006em !important;
  text-shadow: 0 1px 6px rgba(3, 12, 24, 0.28) !important;
  z-index: 1;
}

.hero-description::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 2px !important;
  bottom: 2px !important;
  height: auto !important;
  width: 3.5px !important;
  border-radius: 999px !important;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #7cc4ff 32%,
    #1d8fe8 75%,
    #0e6eb8 100%
  ) !important;
  box-shadow: 0 0 12px rgba(94, 181, 255, 0.85) !important;
}

.hero-description::after {
  display: none !important;
}

/* 2x2 Interactive iPhone Glass Option Pills Grid */
.hero-card-options {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.hero-option-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.17) 0%, rgba(8, 28, 52, 0.38) 100%);
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow:
    0 6px 16px rgba(2, 10, 22, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease, border-color 0.25s ease;
}

.hero-option-pill:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(14, 110, 184, 0.46) 100%);
  border-color: rgba(255, 255, 255, 0.65);
}

.hero-option-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
  background: linear-gradient(135deg, #ffffff 0%, #5eb5ff 60%, #0e6eb8 100%);
  box-shadow: 0 0 10px rgba(94, 181, 255, 0.85);
}

.hero-option-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.hero-option-text strong {
  font-family: var(--font-display);
  font-size: clamp(11px, 0.84vw, 12.5px);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.hero-option-text small {
  font-family: var(--font-sans);
  font-size: clamp(9px, 0.7vw, 10px);
  font-weight: 500;
  color: rgba(220, 240, 255, 0.88);
  white-space: nowrap;
}

/* Card Bottom Action Bar */
.hero-card-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.hero-card-trust {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(235, 246, 255, 0.92);
  white-space: nowrap;
}

.hero-card-trust b {
  font-family: var(--font-display);
  font-weight: 800;
  color: #8fd0ff;
}

.hero-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6.5px 13px;
  border-radius: 999px;
  background: #ffffff;
  color: #091a2c;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  box-shadow: 0 6px 18px rgba(4, 18, 36, 0.26);
  white-space: nowrap;
  transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease;
}

.hero-card-cta:hover {
  transform: translateY(-1px);
  background: #e8f4ff;
  color: var(--a2a-blue);
}

/* Short-Height Desktop / Laptop screens (min-width: 1024px and max-height: 760px) */
@media (min-width: 1024px) and (max-height: 760px) {
  .airplane {
    top: clamp(118px, 35%, 210px) !important;
    width: clamp(250px, 30vw, 500px) !important;
  }

  .hero-left-copy {
    top: clamp(210px, 45%, calc(100svh - 220px)) !important;
  }

  .home-copy h1 {
    font-size: clamp(40px, 6.2vh, 58px) !important;
  }

  .hero-glass-card {
    bottom: 22px !important;
    padding: 13px 16px;
    gap: 8px;
    border-radius: 22px;
  }

  .hero-description {
    font-size: 12px !important;
    line-height: 1.42 !important;
  }

  .hero-option-pill {
    padding: 6.5px 9px;
    border-radius: 13px;
  }
}

/* Tablet Viewports (768px – 1023px): Zero Header Touch & Zero Bottom Clipping */
@media (min-width: 768px) and (max-width: 1023px) {
  .airplane {
    left: 50% !important;
    top: clamp(98px, 16svh, 132px) !important;
    width: clamp(220px, 34vw, 310px) !important;
    transform: translate3d(-50%, var(--plane-shift), 0) scale(var(--plane-scale)) !important;
  }

  .hero-left-copy {
    left: 4.5% !important;
    top: auto !important;
    bottom: clamp(48px, 8vh, 88px) !important;
    width: 44% !important;
  }

  .home-copy h1 {
    font-size: clamp(34px, 4.6vw, 46px) !important;
  }

  .hero-glass-card {
    left: 51.5% !important;
    right: 4.2% !important;
    top: auto !important;
    bottom: clamp(24px, 4.5vh, 48px) !important;
    width: auto !important;
    max-width: 410px !important;
    padding: 14px 16px;
    gap: 9px;
    border-radius: 22px;
  }

  .hero-description {
    font-size: 12.5px !important;
    line-height: 1.44 !important;
  }
}

/* Mobile Viewports (max-width: 767px) — Airplane Cleanly Below Header, Heading + Card 100% Fit */
@media (max-width: 767px) {
  /* Prevent mobile .airplane-layer scale(1.22) from pulling the airplane up into the header */
  .airplane-layer {
    transform: translate3d(0, var(--scene-shift), 0) !important;
  }

  .airplane {
    left: 50% !important;
    top: clamp(74px, 12svh, 96px) !important;
    width: clamp(136px, 36vw, 168px) !important;
    transform: translate3d(-50%, var(--plane-shift), 0) scale(var(--plane-scale)) !important;
  }

  .home-copy {
    inset: auto 3.8vw calc(12px + env(safe-area-inset-bottom)) 3.8vw !important;
    top: clamp(205px, 34svh, 265px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
    gap: clamp(8px, 1.5svh, 14px) !important;
  }

  .hero-left-copy,
  .hero-glass-card {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
  }

  .home-copy h1 {
    gap: 1px;
    font-size: clamp(27px, 8.2vw, 38px) !important;
    line-height: 0.99 !important;
  }

  .hero-glass-card {
    padding: 12px 12px;
    gap: 7.5px;
    border-radius: 20px;
  }

  .hero-card-badge {
    font-size: clamp(7.5px, 2.3vw, 8.5px);
    letter-spacing: 0.1em;
    gap: 5px;
  }

  .hero-card-rating {
    padding: 2.5px 7.5px;
    font-size: clamp(8.5px, 2.5vw, 9.5px);
  }

  .hero-description {
    font-size: clamp(11px, 3.25vw, 13px) !important;
    line-height: 1.4 !important;
    padding-left: 10px !important;
  }

  .hero-card-options {
    gap: 6px;
  }

  .hero-option-pill {
    padding: 6.5px 8px;
    border-radius: 12px;
    gap: 6px;
  }

  .hero-option-dot {
    width: 6.5px;
    height: 6.5px;
    flex: 0 0 6.5px;
  }

  .hero-option-text strong {
    font-size: clamp(10px, 3vw, 11.5px);
  }

  .hero-option-text small {
    font-size: clamp(8px, 2.5vw, 9.5px);
  }

  .hero-card-footer {
    padding-top: 6px;
    gap: 6px;
  }

  .hero-card-trust {
    font-size: clamp(8.5px, 2.6vw, 10px);
  }

  .hero-card-cta {
    padding: 5.5px 10px;
    font-size: clamp(9px, 2.7vw, 10.5px);
    gap: 4px;
  }
}

/* Extra-Compact Mobile Height (max-width: 767px and max-height: 670px) */
@media (max-width: 767px) and (max-height: 670px) {
  .airplane {
    top: 76px !important;
    width: clamp(118px, 36vw, 152px) !important;
  }

  .home-copy {
    inset: auto 3.8vw 10px 3.8vw !important;
    top: 185px !important;
    gap: 6px !important;
  }

  .home-copy h1 {
    font-size: clamp(24px, 7.2vw, 32px) !important;
  }

  .hero-glass-card {
    padding: 10px 11px;
    gap: 6px;
  }

  .hero-description {
    font-size: 11px !important;
    line-height: 1.34 !important;
  }

  .hero-option-pill {
    padding: 5px 7px;
  }
}

/* Mobile Landscape (max-width: 920px and max-height: 520px) */
@media (max-width: 920px) and (max-height: 520px) and (orientation: landscape) {
  .airplane-layer {
    transform: translate3d(0, var(--scene-shift), 0) !important;
  }

  .airplane {
    left: 50% !important;
    top: 74px !important;
    width: clamp(110px, 18vw, 155px) !important;
  }

  .home-copy {
    inset: auto 4vw 10px 4vw !important;
    top: auto !important;
    display: grid !important;
    grid-template-columns: 0.95fr 1.05fr !important;
    align-items: end !important;
    gap: 14px !important;
  }

  .hero-left-copy,
  .hero-glass-card {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
  }

  .hero-card-options {
    display: none !important;
  }
}

/* Keep the airplane, heading, and story card in a clear vertical order on touch layouts. */
@media (max-width: 1023px) {
  .airplane {
    left: 50% !important;
    transform: translate3d(-50%, var(--plane-shift), 0) scale(var(--plane-scale)) !important;
  }

  .home-copy {
    inset: auto 5vw calc(16px + env(safe-area-inset-bottom)) 5vw !important;
    top: clamp(270px, 45svh, 420px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
    gap: clamp(8px, 1.4svh, 14px) !important;
  }

  .hero-left-copy,
  .hero-glass-card {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 680px !important;
    margin: 0 auto !important;
  }

  .hero-description {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .home-copy h1 {
    font-size: clamp(32px, 5vw, 48px) !important;
  }
}

@media (max-width: 767px) {
  .airplane {
    top: calc(78px + env(safe-area-inset-top)) !important;
    width: clamp(220px, 84vw, 360px) !important;
  }

  .home-copy {
    left: 3.8vw !important;
    right: 3.8vw !important;
    top: clamp(250px, 44svh, 370px) !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    justify-content: flex-end !important;
    gap: clamp(6px, 1.2svh, 10px) !important;
  }

  .home-copy h1 {
    font-size: clamp(27px, 8.2vw, 38px) !important;
  }

  .hero-glass-card {
    flex: 0 0 auto;
    min-height: 0;
    justify-content: flex-start;
    padding: clamp(9px, 2.8vw, 12px) !important;
    gap: clamp(5px, 1.5vw, 8px) !important;
  }

  .hero-card-options {
    gap: clamp(4px, 1.5vw, 6px) !important;
  }

  .hero-option-pill {
    min-width: 0;
    padding: 6px clamp(5px, 1.8vw, 8px) !important;
    gap: 5px !important;
  }

  .hero-option-text strong,
  .hero-option-text small {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 767px) and (max-height: 670px) {
  .airplane {
    top: calc(76px + env(safe-area-inset-top)) !important;
    width: clamp(220px, 84vw, 270px) !important;
  }

  .home-copy {
    top: clamp(210px, 37svh, 255px) !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    justify-content: flex-end !important;
    gap: 5px !important;
  }

  .home-copy h1 {
    font-size: clamp(24px, 7.2vw, 32px) !important;
  }

  .hero-glass-card {
    padding: 9px 10px !important;
    gap: 5px !important;
  }

  .hero-description {
    line-height: 1.32 !important;
  }

  .hero-card-footer {
    padding-top: 5px !important;
  }
}

@media (max-width: 359px) {
  .home-copy {
    left: 3.5vw !important;
    right: 3.5vw !important;
  }

  .home-copy h1 {
    font-size: clamp(25px, 8vw, 29px) !important;
  }

  .hero-card-header {
    gap: 4px !important;
  }

  .hero-card-badge {
    letter-spacing: 0.06em !important;
  }

  .hero-card-rating {
    padding: 2px 6px !important;
    font-size: 8px !important;
  }

  .hero-card-trust {
    font-size: 8px !important;
  }

  .hero-card-cta {
    padding: 5px 8px !important;
    font-size: 9px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) and (max-height: 700px) {
  .airplane {
    top: 82px !important;
    width: clamp(180px, 26vw, 240px) !important;
  }

  .home-copy {
    top: clamp(230px, 40svh, 275px) !important;
    bottom: 10px !important;
    gap: 6px !important;
  }

  .home-copy h1 {
    font-size: clamp(28px, 4vw, 38px) !important;
  }

  .hero-glass-card {
    padding: 10px 12px !important;
    gap: 6px !important;
  }
}

@media (max-width: 920px) and (max-height: 520px) and (orientation: landscape) {
  .airplane {
    top: 74px !important;
    width: clamp(110px, 18vw, 180px) !important;
  }

  .home-copy {
    top: 196px !important;
  }

  .hero-card-options {
    display: none !important;
  }
}

/* ==========================================================================
   MERGED SINGLE-PAGE ABOUT US EXPERIENCE (about.html)
   Part 1: "We, A2A Holidays" + Vision + Mission + "FOLLOW THAT DREAM" Visual
   Part 2: 03 Core Pillars (Safety · Quality · Reliable)
   Part 3: Attached 7th-Page CTA + A2A Holidays Footer
   100% Matched to A2A Royal Sapphire & iPhone Liquid-Glass Theme
   ========================================================================== */
body.about-page-body {
  background: #06182c;
  color: var(--a2a-black, #091a2c);
  overflow-x: hidden;
}

.about-page-header {
  position: fixed !important;
  top: clamp(10px, 1.26vw, 18px) !important;
  left: 2.17% !important;
  right: 2.17% !important;
  z-index: 120 !important;
  transform: none !important;
  opacity: 1 !important;
}

.a2a-about-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: calc(var(--global-header-clearance, 118px) + clamp(14px, 2.2vh, 28px));
  padding-bottom: clamp(56px, 8vh, 96px);
  padding-inline: clamp(18px, 4.5vw, 76px);
  background:
    radial-gradient(circle at 12% 14%, rgba(59, 158, 255, 0.22) 0%, transparent 42%),
    radial-gradient(circle at 88% 24%, rgba(14, 110, 184, 0.18) 0%, transparent 46%),
    radial-gradient(circle at 50% 82%, rgba(77, 172, 255, 0.2) 0%, transparent 52%),
    linear-gradient(160deg, #f3f8fe 0%, #e6f0fb 46%, #d9e8f8 100%);
  color: #091a2c;
}

.a2a-about-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(65px);
  opacity: 0.55;
}

.ambient-orb--one {
  width: 440px;
  height: 440px;
  top: -110px;
  left: -90px;
  background: radial-gradient(circle, rgba(66, 176, 255, 0.42), transparent 70%);
}

.ambient-orb--two {
  width: 520px;
  height: 520px;
  top: 28%;
  right: -140px;
  background: radial-gradient(circle, rgba(14, 110, 184, 0.34), transparent 70%);
}

.ambient-orb--three {
  width: 480px;
  height: 480px;
  bottom: -120px;
  left: 26%;
  background: radial-gradient(circle, rgba(94, 192, 255, 0.36), transparent 70%);
}

.a2a-about-container {
  width: min(100%, 1280px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5vh, 56px);
}

/* Top Editorial Kicker + Rating Bar */
.a2a-about-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.a2a-about-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: clamp(10px, 0.82vw, 11.5px);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0e6eb8;
}

.a2a-about-kicker span {
  width: 26px;
  height: 2.5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0e6eb8, #42b0ff);
}

.a2a-about-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(14, 110, 184, 0.22);
  box-shadow:
    0 10px 26px rgba(6, 28, 54, 0.08),
    inset 0 1px 0 #ffffff;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: clamp(11px, 0.86vw, 12.5px);
  font-weight: 600;
  color: #1c3550;
}

.a2a-about-trust-pill .trust-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #18c964;
  box-shadow: 0 0 10px rgba(24, 201, 100, 0.75);
}

.a2a-about-trust-pill b {
  font-weight: 800;
  color: #091a2c;
}

/* Shared iPhone Liquid-Glass Light Surface Card */
.a2a-glass-surface {
  position: relative;
  border-radius: 26px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(245, 250, 255, 0.84) 55%,
    rgba(235, 245, 255, 0.9) 100%
  );
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    0 22px 50px rgba(6, 28, 56, 0.09),
    0 4px 16px rgba(14, 110, 184, 0.07),
    inset 0 1.5px 0 #ffffff;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  overflow: hidden;
  transition:
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.38s ease;
}

.a2a-glass-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    420px circle at var(--glow-x, 20%) var(--glow-y, 15%),
    rgba(59, 158, 255, 0.13),
    transparent 65%
  );
  pointer-events: none;
}

.a2a-glass-surface:hover {
  transform: translateY(-4px);
  border-color: rgba(59, 158, 255, 0.55);
  box-shadow:
    0 28px 60px rgba(6, 28, 56, 0.14),
    0 8px 24px rgba(14, 110, 184, 0.14),
    inset 0 1.5px 0 #ffffff;
}

/* PART 1 GRID: Left Story/Vision/Mission + Right Dream Image */
.a2a-about-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) minmax(320px, 0.76fr);
  gap: clamp(20px, 2.4vw, 32px);
  align-items: stretch;
}

.a2a-about-copy-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(18px, 2.2vh, 24px);
  min-width: 0;
}

/* Main Story Card ("We, A2A Holidays") */
.a2a-story-card {
  padding: clamp(22px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.8vh, 18px);
}

.a2a-card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.eyebrow-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0e6eb8, #08487c);
  color: #ffffff;
  font-family: var(--font-display, "Outfit", sans-serif);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.eyebrow-label {
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #0e6eb8;
  text-transform: uppercase;
}

.a2a-story-card h1 {
  margin: 0;
  font-family: var(--font-display, "Outfit", sans-serif);
  font-size: clamp(32px, 3.8vw, 52px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: #091a2c;
}

.a2a-story-card h1 em {
  font-style: normal;
  background: linear-gradient(135deg, #0e6eb8 0%, #1d8fe8 55%, #094a80 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #0e6eb8;
}

.a2a-story-lead {
  margin: 0;
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.72;
  font-weight: 500;
  color: #243b53;
}

/* Interactive Option Chips inside "We, A2A Holidays" Card */
.a2a-story-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 6px;
}

.a2a-story-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(14, 110, 184, 0.08);
  border: 1px solid rgba(14, 110, 184, 0.22);
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: clamp(11.5px, 0.88vw, 13px);
  font-weight: 700;
  color: #0b2540;
  transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.a2a-story-chip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, #38b6ff, #0e6eb8);
  box-shadow: 0 0 8px rgba(14, 110, 184, 0.55);
}

.a2a-story-chip:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #0e6eb8, #084a80);
  border-color: #0e6eb8;
  color: #ffffff;
}

.a2a-story-chip:hover i {
  background: #ffffff;
  box-shadow: 0 0 8px #ffffff;
}

/* Vision & Mission Dual Grid */
.a2a-vm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
}

.a2a-vm-card {
  padding: clamp(20px, 2.3vw, 28px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}

.a2a-vm-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.a2a-vm-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #1b88df 0%, #0b5694 100%);
  color: #ffffff;
  box-shadow:
    0 10px 22px rgba(14, 110, 184, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.a2a-vm-icon svg {
  width: 23px;
  height: 23px;
}

.a2a-vm-tag {
  display: block;
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #0e6eb8;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.a2a-vm-card h2 {
  margin: 0;
  font-family: var(--font-display, "Outfit", sans-serif);
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #091a2c;
  line-height: 1.08;
}

.a2a-vm-card p {
  margin: 0;
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: clamp(13.2px, 0.96vw, 14.8px);
  line-height: 1.66;
  font-weight: 500;
  color: #29435c;
}

.a2a-vm-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(14, 110, 184, 0.14);
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: 11px;
  font-weight: 700;
  color: #0e6eb8;
}

/* Right Column: "FOLLOW THAT DREAM" Portrait Visual Card */
.a2a-about-visual-col {
  min-width: 0;
  display: flex;
}

.a2a-dream-card {
  position: relative;
  width: 100%;
  min-height: 520px;
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(18px, 2vw, 24px);
  background: #071b30;
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    0 28px 64px rgba(5, 24, 48, 0.22),
    0 8px 24px rgba(14, 110, 184, 0.16);
}

.a2a-dream-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  transform: scale(1.03);
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.a2a-dream-card:hover .a2a-dream-image {
  transform: scale(1.08);
}

.a2a-dream-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 22, 42, 0.48) 0%, rgba(6, 26, 48, 0.18) 38%, rgba(4, 18, 36, 0.86) 100%),
    radial-gradient(circle at 50% 38%, rgba(14, 110, 184, 0.2), transparent 65%);
  pointer-events: none;
}

.a2a-dream-top-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dream-pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(8, 28, 52, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #ffffff;
}

.dream-pill-tag i {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: #42b0ff;
  box-shadow: 0 0 8px #42b0ff;
}

.dream-pill-year {
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.38);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #ffffff;
}

/* Unique Blue Plain Text Motto */
.a2a-dream-sign-wrap {
  position: relative;
  z-index: 2;
  margin-block: auto;
  display: flex;
  justify-content: center;
  padding-block: 18px;
}

.a2a-dream-sign {
  display: inline-block;
  margin: 0;
  padding: 0;
  background: linear-gradient(180deg, #9ad6ff 0%, #4da8ff 52%, #1b7ce0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #4da8ff;
  border: none;
  box-shadow: none;
  font-family: var(--font-display, "Outfit", sans-serif);
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.15;
  filter:
    drop-shadow(0 2px 6px rgba(3, 16, 34, 0.75))
    drop-shadow(0 8px 22px rgba(6, 28, 58, 0.55));
}

/* Bottom Glass Overlay inside Visual Card */
.a2a-dream-bottom-glass {
  position: relative;
  z-index: 2;
  padding: clamp(15px, 1.8vw, 20px);
  border-radius: 22px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(9, 32, 58, 0.68) 48%,
    rgba(5, 18, 34, 0.82) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    0 18px 40px rgba(2, 10, 22, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(24px) saturate(185%);
  -webkit-backdrop-filter: blur(24px) saturate(185%);
  display: flex;
  flex-direction: column;
  gap: 13px;
  color: #ffffff;
}

.dream-glass-kicker {
  margin: 0 0 4px;
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #8fd0ff;
}

.dream-glass-copy h3 {
  margin: 0;
  font-family: var(--font-display, "Outfit", sans-serif);
  font-size: clamp(17px, 1.45vw, 21px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.dream-glass-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding-block: 10px;
  border-block: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
}

.dream-glass-stats strong {
  display: block;
  font-family: var(--font-display, "Outfit", sans-serif);
  font-size: clamp(16px, 1.35vw, 20px);
  font-weight: 800;
  color: #ffffff;
}

.dream-glass-stats small {
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: 10px;
  font-weight: 600;
  color: rgba(215, 238, 255, 0.85);
}

.dream-glass-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dream-action-primary {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  background: #ffffff;
  color: #091a2c;
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.dream-action-primary:hover {
  transform: translateY(-1px);
  background: #e6f4ff;
  color: #0e6eb8;
}

.dream-action-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.36);
  color: #ffffff;
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.2s ease;
}

.dream-action-secondary:hover {
  background: rgba(255, 255, 255, 0.26);
}

/* PART 2: Merged Core Pillars Section (Safety · Quality · Reliable) */
.a2a-pillars-section {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vh, 32px);
  padding-top: clamp(8px, 1.5vh, 18px);
}

.a2a-pillars-header {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: end;
  gap: clamp(16px, 3vw, 36px);
}

.a2a-pillars-header h2 {
  margin: 6px 0 0;
  font-family: var(--font-display, "Outfit", sans-serif);
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: #091a2c;
}

.a2a-pillars-header h2 em {
  font-style: normal;
  background: linear-gradient(135deg, #0e6eb8 0%, #1d8fe8 60%, #094a80 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #0e6eb8;
}

.a2a-pillars-intro {
  margin: 0;
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: clamp(13.5px, 1vw, 15px);
  line-height: 1.62;
  font-weight: 500;
  color: #2b455f;
}

/* 3-Card Row: Safety · Quality · Reliable (Matches Reference Image 1) */
.a2a-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
}

.a2a-pillar-card {
  padding: clamp(26px, 3vw, 38px) clamp(22px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

.pillar-card-num {
  position: absolute;
  top: 18px;
  right: 20px;
  font-family: var(--font-display, "Outfit", sans-serif);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: rgba(14, 110, 184, 0.45);
}

.pillar-icon-orb {
  width: clamp(78px, 6.2vw, 92px);
  height: clamp(78px, 6.2vw, 92px);
  border-radius: 26px;
  display: grid;
  place-items: center;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(225, 241, 255, 0.88) 100%
  );
  border: 1.5px solid rgba(14, 110, 184, 0.18);
  box-shadow:
    0 16px 34px rgba(14, 110, 184, 0.16),
    inset 0 1.5px 0 #ffffff;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.a2a-pillar-card:hover .pillar-icon-orb {
  transform: translateY(-4px) scale(1.05);
  box-shadow:
    0 20px 40px rgba(14, 110, 184, 0.25),
    inset 0 1.5px 0 #ffffff;
}

.pillar-icon-orb svg {
  width: clamp(46px, 3.8vw, 56px);
  height: clamp(46px, 3.8vw, 56px);
  filter: drop-shadow(0 6px 14px rgba(14, 110, 184, 0.28));
}

.a2a-pillar-card h3 {
  margin: 2px 0 0;
  font-family: var(--font-display, "Outfit", sans-serif);
  font-size: clamp(22px, 2vw, 27px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #091a2c;
}

.a2a-pillar-card p {
  margin: 0;
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: clamp(13px, 0.95vw, 14.5px);
  line-height: 1.62;
  font-weight: 500;
  color: #2c4660;
  max-width: 34ch;
}

.pillar-card-tags {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.pillar-card-tags span {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(14, 110, 184, 0.09);
  border: 1px solid rgba(14, 110, 184, 0.2);
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: 11px;
  font-weight: 700;
  color: #0e6eb8;
}

/* Responsive Breakpoints for About Page Across All Viewports */
@media (max-width: 1080px) {
  .a2a-about-hero-grid {
    grid-template-columns: 1fr;
  }

  .a2a-dream-card {
    min-height: 430px;
  }

  .a2a-pillars-header {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@media (max-width: 767px) {
  .about-page-header {
    top: 12px !important;
    left: 3.5% !important;
    right: 3.5% !important;
  }

  .a2a-about-page {
    padding-top: calc(var(--global-header-clearance, 92px) + 12px);
    padding-bottom: 44px;
    padding-inline: 4.2vw;
  }

  .a2a-about-container {
    gap: 26px;
  }

  .a2a-about-topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .a2a-story-card {
    padding: 20px 18px;
    border-radius: 22px;
  }

  .a2a-story-card h1 {
    font-size: clamp(27px, 7.8vw, 36px);
  }

  .a2a-story-lead {
    font-size: 13.5px;
    line-height: 1.62;
  }

  .a2a-story-options {
    gap: 7px;
  }

  .a2a-story-chip {
    padding: 6.5px 11px;
    font-size: 11px;
  }

  .a2a-vm-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .a2a-vm-card {
    padding: 18px;
    border-radius: 22px;
  }

  .a2a-dream-card {
    min-height: 390px;
    padding: 16px;
    border-radius: 24px;
  }

  .dream-glass-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .a2a-pillars-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .a2a-pillar-card {
    padding: 22px 18px;
    border-radius: 22px;
  }
}

@media (max-width: 375px) {
  .a2a-story-card {
    padding: 16px 14px;
  }

  .a2a-vm-card {
    padding: 16px 14px;
  }

  .a2a-dream-sign {
    padding: 9px 14px;
  }

  .a2a-dream-sign strong {
    font-size: 14px;
    letter-spacing: 0.08em;
  }
}

/* ==========================================================================
   CONTACT US & OUR OFFICES PAGE (contact.html)
   Part 1: "Our Offices" 2x2 Liquid-Glass Regional Cards (Chennai, Erode, Hosur, Kanyakumari)
   Part 2: Quick Holiday Enquiry Form + Direct Concierge Support Card
   Part 3: Attached 7th-Page Final CTA + A2A Holidays Footer
   ========================================================================== */
.a2a-offices-section {
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 3.2vh, 34px);
}

.a2a-offices-header {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: end;
  gap: clamp(16px, 3vw, 36px);
}

.a2a-offices-header h1 {
  margin: 8px 0 0;
  font-family: var(--font-display, "Outfit", sans-serif);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: #091a2c;
}

.a2a-offices-header h1 em {
  font-style: normal;
  background: linear-gradient(135deg, #0e6eb8 0%, #1d8fe8 55%, #08487c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #0e6eb8;
}

.a2a-offices-intro {
  margin: 0;
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: clamp(13.5px, 1vw, 15.5px);
  line-height: 1.65;
  font-weight: 500;
  color: #28425c;
}

/* 2x2 Regional Office Cards Grid */
.a2a-offices-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
}

.a2a-office-card {
  padding: clamp(22px, 2.6vw, 32px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(16px, 2vh, 22px);
}

.office-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(14, 110, 184, 0.14);
}

.office-title-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.office-icon-orb {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #1b88df 0%, #0b5694 100%);
  color: #ffffff;
  box-shadow:
    0 12px 24px rgba(14, 110, 184, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.office-icon-orb svg {
  width: 24px;
  height: 24px;
}

.office-branch-tag {
  display: block;
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #0e6eb8;
  text-transform: uppercase;
  margin-bottom: 3px;
}

.a2a-office-card h2 {
  margin: 0;
  font-family: var(--font-display, "Outfit", sans-serif);
  font-size: clamp(23px, 2.1vw, 30px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #091a2c;
  line-height: 1.06;
}

.office-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(24, 201, 100, 0.12);
  border: 1px solid rgba(24, 201, 100, 0.3);
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: 10.5px;
  font-weight: 800;
  color: #0d7a3e;
  white-space: nowrap;
}

.office-status-pill i {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: #18c964;
  box-shadow: 0 0 8px rgba(24, 201, 100, 0.8);
}

.office-details-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.office-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.office-detail-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(14, 110, 184, 0.1);
  border: 1px solid rgba(14, 110, 184, 0.18);
  color: #0e6eb8;
  margin-top: 1px;
}

.office-detail-icon svg {
  width: 17px;
  height: 17px;
}

.office-address {
  font-style: normal;
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: clamp(13.5px, 0.98vw, 15px);
  line-height: 1.62;
  font-weight: 500;
  color: #243d56;
}

.office-address strong {
  font-weight: 800;
  color: #091a2c;
}

.office-contact-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.office-meta-label {
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: 11.5px;
  font-weight: 700;
  color: #496580;
}

.office-phones {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.office-link-pill {
  display: inline-flex;
  align-items: center;
  padding: 5.5px 12px;
  border-radius: 999px;
  background: rgba(14, 110, 184, 0.09);
  border: 1px solid rgba(14, 110, 184, 0.24);
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: clamp(12px, 0.9vw, 13.5px);
  font-weight: 700;
  color: #0e6eb8;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.office-link-pill:hover {
  transform: translateY(-1px);
  background: #0e6eb8;
  border-color: #0e6eb8;
  color: #ffffff;
}

.office-email-link {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: clamp(13px, 0.96vw, 14.5px);
  font-weight: 700;
  color: #0e6eb8;
  word-break: break-word;
  transition: color 0.2s ease;
}

.office-email-link:hover {
  color: #08487c;
  text-decoration: underline;
}

.office-card-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(14, 110, 184, 0.14);
}

.office-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9.5px 16px;
  border-radius: 999px;
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
}

.office-action-btn--primary {
  flex: 1 1 auto;
  background: linear-gradient(135deg, #1683d8 0%, #0b5a99 100%);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(14, 110, 184, 0.26);
}

.office-action-btn--primary:hover {
  transform: translateY(-1.5px);
  background: linear-gradient(135deg, #2191e8 0%, #0e6eb8 100%);
  box-shadow: 0 12px 24px rgba(14, 110, 184, 0.36);
}

.office-action-btn--ghost {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(14, 110, 184, 0.25);
  color: #091a2c;
}

.office-action-btn--ghost:hover {
  transform: translateY(-1.5px);
  background: #ffffff;
  border-color: #0e6eb8;
  color: #0e6eb8;
}

/* PART 2: Interactive Enquiry Card + Direct Concierge Card */
.a2a-contact-concierge-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(310px, 0.8fr);
  gap: clamp(20px, 2.4vw, 30px);
  align-items: stretch;
}

.a2a-enquiry-card {
  padding: clamp(22px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.a2a-enquiry-card h2 {
  margin: 2px 0 0;
  font-family: var(--font-display, "Outfit", sans-serif);
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #091a2c;
}

.a2a-enquiry-card h2 em {
  font-style: normal;
  background: linear-gradient(135deg, #0e6eb8 0%, #1d8fe8 60%, #08487c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #0e6eb8;
}

.a2a-enquiry-sub {
  margin: 0;
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: clamp(13px, 0.96vw, 14.5px);
  line-height: 1.6;
  color: #2b455f;
}

.a2a-contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}

.contact-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-field span {
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #0c2640;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid rgba(14, 110, 184, 0.22);
  box-shadow: inset 0 1px 2px rgba(6, 24, 48, 0.04);
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: 13.5px;
  font-weight: 600;
  color: #091a2c;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: #7b93ab;
  font-weight: 500;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  background: #ffffff;
  border-color: #0e6eb8;
  box-shadow: 0 0 0 3.5px rgba(14, 110, 184, 0.15);
}

.contact-field textarea {
  resize: vertical;
  min-height: 78px;
}

.contact-form-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

.contact-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid rgba(145, 204, 255, 0.65);
  background: linear-gradient(135deg, #1683d8 0%, #0b5a99 100%);
  box-shadow:
    0 12px 28px rgba(14, 110, 184, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: #ffffff;
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.contact-submit-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #2191e8 0%, #0e6eb8 100%);
  box-shadow: 0 16px 34px rgba(14, 110, 184, 0.42);
}

.contact-form-feedback {
  margin: 0;
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: 11.5px;
  font-weight: 600;
  color: #3a5672;
  text-align: center;
}

.a2a-concierge-side-card {
  display: flex;
  min-width: 0;
}

.a2a-concierge-card-inner {
  min-height: 100%;
}

.concierge-quick-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-block: 8px;
  border-block: 1px solid rgba(255, 255, 255, 0.2);
}

.concierge-quick-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.24);
  transition: background 0.2s ease, transform 0.2s ease;
}

a.concierge-quick-item:hover {
  background: rgba(255, 255, 255, 0.24);
  transform: translateY(-1px);
}

.concierge-quick-item span {
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: 11px;
  font-weight: 600;
  color: rgba(220, 240, 255, 0.88);
}

.concierge-quick-item strong {
  font-family: var(--font-display, "Outfit", sans-serif);
  font-size: 12.5px;
  font-weight: 700;
  color: #ffffff;
}

@media (max-width: 1080px) {
  .a2a-offices-header {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .a2a-contact-concierge-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .a2a-offices-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .a2a-office-card {
    padding: 20px 18px;
    border-radius: 22px;
  }

  .office-card-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .contact-form-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .a2a-enquiry-card {
    padding: 20px 18px;
    border-radius: 22px;
  }

  .concierge-quick-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
}

/* ==========================================================================
   BALANCED 5-OPTION HEADER NAVIGATION & A2A THEMED PACKAGES DROPDOWN TAB
   Options: Home · Destinations · Packages ▾ · About Us · Contact
   ========================================================================== */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-dropdown-trigger small {
  display: inline-block;
  margin-left: 3px;
  font-size: 0.78em;
  line-height: 1;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-dropdown.is-open .nav-dropdown-trigger small,
.nav-dropdown:hover .nav-dropdown-trigger small {
  transform: rotate(180deg);
}

.nav-dropdown.is-open .nav-dropdown-trigger {
  background: linear-gradient(135deg, var(--a2a-blue, #0e6eb8), #084c82);
  color: #ffffff;
  border-color: rgba(145, 204, 255, 0.55);
  box-shadow: 0 8px 20px rgba(14, 110, 184, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Themed Vertical Dropdown Tab Under "Packages" */
.packages-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  z-index: 1200;
  width: 224px;
  padding: 10px;
  border-radius: 20px;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(239, 248, 255, 0.96) 54%,
    rgba(226, 241, 255, 0.95) 100%
  );
  border: 1.5px solid rgba(255, 255, 255, 0.96);
  box-shadow:
    0 24px 56px rgba(4, 20, 42, 0.28),
    0 6px 20px rgba(14, 110, 184, 0.18),
    0 0 0 1px rgba(14, 110, 184, 0.2),
    inset 0 1.5px 0 #ffffff;
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  backdrop-filter: blur(26px) saturate(190%);
  transform: translate3d(-50%, 10px, 0) scale(0.97);
  transform-origin: top center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.22s ease;
}

/* Invisible hover bridge so cursor moves smoothly from button to menu */
.packages-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}

/* Top diamond pointer notch */
.packages-dropdown-menu::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-top: 1px solid rgba(14, 110, 184, 0.22);
  border-left: 1px solid rgba(14, 110, 184, 0.22);
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
}

.nav-dropdown.is-open .packages-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(-50%, 0, 0) scale(1);
}

@media (min-width: 1024px) {
  .nav-dropdown:hover .packages-dropdown-menu,
  .nav-dropdown:focus-within .packages-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(-50%, 0, 0) scale(1);
  }
}

.packages-dropdown-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(14, 110, 184, 0.14);
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0e6eb8;
}

.packages-dropdown-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #27b1ff, #0e6eb8);
  box-shadow: 0 0 8px rgba(39, 177, 255, 0.75);
}

.packages-dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: min(62vh, 485px);
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(14, 110, 184, 0.3) transparent;
}

.packages-dropdown-list::-webkit-scrollbar {
  width: 4px;
}

.packages-dropdown-list::-webkit-scrollbar-thumb {
  background: rgba(14, 110, 184, 0.28);
  border-radius: 999px;
}

.packages-dropdown-item {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 12px !important;
  border-radius: 11px;
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: 13.5px !important;
  font-weight: 650 !important;
  line-height: 1.25;
  color: #091a2c !important;
  background: transparent;
  text-shadow: none !important;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    padding-left 0.18s ease;
}

.packages-dropdown-item::after {
  display: none !important;
}

.packages-dropdown-item span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.packages-dropdown-item span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(14, 110, 184, 0.32);
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.packages-dropdown-item i {
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  color: #0e6eb8;
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.packages-dropdown-item:hover,
.packages-dropdown-item:focus-visible,
.packages-dropdown-item.is-active {
  background: linear-gradient(
    90deg,
    rgba(14, 110, 184, 0.13) 0%,
    rgba(28, 148, 232, 0.06) 100%
  );
  color: #0e6eb8 !important;
  padding-left: 15px !important;
}

.packages-dropdown-item:hover span::before,
.packages-dropdown-item.is-active span::before {
  background: #0e6eb8;
  transform: scale(1.25);
  box-shadow: 0 0 8px rgba(14, 110, 184, 0.55);
}

.packages-dropdown-item:hover i,
.packages-dropdown-item.is-active i {
  opacity: 1;
  transform: translateX(0);
}

.packages-dropdown-all {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
  padding: 8.5px 12px !important;
  border-radius: 12px;
  background: linear-gradient(135deg, #0e6eb8 0%, #084c82 100%);
  color: #ffffff !important;
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 18px rgba(14, 110, 184, 0.25);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.packages-dropdown-all::after {
  display: none !important;
}

.packages-dropdown-all:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 10px 22px rgba(14, 110, 184, 0.35);
}

/* Highlight pulse when a specific package card is selected from the dropdown */
.package-card.is-selected-package {
  outline: 2.5px solid #0e6eb8;
  box-shadow:
    0 22px 48px rgba(14, 110, 184, 0.28),
    0 0 0 4px rgba(14, 110, 184, 0.16) !important;
}

@media (min-width: 1024px) {
  .nav-shell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(16px, 1.8vw, 28px);
  }

  .navigation {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1.15vw, 18px);
    margin: 0 auto;
  }

  .nav-link {
    padding: 0 clamp(14px, 1.35vw, 20px);
    font-size: clamp(13.5px, 0.95vw, 15px);
    letter-spacing: -0.005em;
    white-space: nowrap;
  }
}

/* Tablet & Mobile Slide-Out Drawer Support for Packages Dropdown */
@media (max-width: 1023px) {
  .navigation {
    overflow-y: auto;
  }

  .nav-dropdown {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .nav-dropdown .nav-dropdown-trigger {
    justify-content: space-between !important;
    width: 100%;
  }

  .packages-dropdown-menu {
    position: static;
    width: 100%;
    max-height: 0;
    margin-top: 0;
    padding: 0 10px;
    border-width: 0;
    border-radius: 16px;
    background: rgba(14, 110, 184, 0.06);
    box-shadow: none;
    transform: none !important;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.3s ease, opacity 0.22s ease, margin-top 0.22s ease, padding 0.22s ease;
  }

  .packages-dropdown-menu::before,
  .packages-dropdown-menu::after {
    display: none;
  }

  .nav-dropdown.is-open .packages-dropdown-menu {
    max-height: 340px;
    margin-top: 6px;
    padding: 10px;
    border: 1px solid rgba(14, 110, 184, 0.18);
    opacity: 1;
    visibility: visible;
  }

  .packages-dropdown-list {
    max-height: 220px;
  }
}

/* ==========================================================================
   PAGE 2 PACKAGE CAROUSEL LEFT/RIGHT ARROW CLICK ISOLATION & FLEX TRACK
   Prevents inactive higher z-index chapters (.features-reveal, .places-reveal)
   from intercepting clicks on Page 2 package arrows & cards, and ensures
   deterministic horizontal scrolling on every click.
   ========================================================================== */
.features-reveal:not(.is-section-active),
.features-reveal:not(.is-section-active) *,
.places-reveal:not(.is-section-active),
.places-reveal:not(.is-section-active) *,
.experiences-reveal:not(.is-section-active),
.experiences-reveal:not(.is-section-active) *,
.transport-reveal:not(.is-section-active),
.transport-reveal:not(.is-section-active) * {
  pointer-events: none !important;
}

.about-reveal.is-section-active {
  z-index: 25 !important;
  pointer-events: auto !important;
}

.about-reveal.is-section-active .package-carousel-shell,
.about-reveal.is-section-active .package-grid,
.about-reveal.is-section-active .package-card,
.about-reveal.is-section-active .package-cta,
.about-reveal.is-section-active .packages-view-all,
.package-nav-arrow {
  pointer-events: auto !important;
}

.package-nav-arrow {
  z-index: 40 !important;
  touch-action: manipulation;
  user-select: none;
}

.package-nav-arrow svg,
.package-nav-arrow path {
  pointer-events: none !important;
}

.package-nav-arrow--prev {
  left: clamp(-28px, -2.2vw, -16px) !important;
}

.package-nav-arrow--next {
  right: clamp(-28px, -2.2vw, -16px) !important;
}

.package-grid {
  --pkg-gap: clamp(16px, 1.9vw, 26px);
  position: relative !important;
  display: flex !important;
  flex-flow: row nowrap !important;
  gap: var(--pkg-gap) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
}

.package-grid > .package-card {
  flex: 0 0 calc((100% - (2 * var(--pkg-gap))) / 3) !important;
  width: calc((100% - (2 * var(--pkg-gap))) / 3) !important;
  max-width: calc((100% - (2 * var(--pkg-gap))) / 3) !important;
  min-width: 0 !important;
}

@media (min-width: 1024px) and (max-width: 1220px) {
  .package-grid {
    --pkg-gap: 14px;
  }
  .package-grid > .package-card {
    flex: 0 0 calc((100% - 28px) / 3) !important;
    width: calc((100% - 28px) / 3) !important;
    max-width: calc((100% - 28px) / 3) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .package-grid {
    --pkg-gap: 16px;
  }
  .package-grid > .package-card {
    flex: 0 0 calc(50% - 8px) !important;
    width: calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
  }
  .package-nav-arrow--prev {
    left: -14px !important;
  }
  .package-nav-arrow--next {
    right: -14px !important;
  }
}

@media (max-width: 767px) {
  .package-grid {
    --pkg-gap: 12px;
  }
  .package-grid > .package-card {
    flex: 0 0 88% !important;
    width: 88% !important;
    max-width: 88% !important;
  }
  .package-nav-arrow--prev {
    left: -8px !important;
  }
  .package-nav-arrow--next {
    right: -8px !important;
  }
}

/* ==========================================================================
   PREMIUM "(you.)" SKY-AZURE GRADIENT BACKGROUND SYSTEM & SCROLL CONTINUITY
   Replaces dark backgrounds with the luminous sky-azure colour pattern from
   "you." (#8fd0ff -> #4da6ff -> #cce8ff & royal azure) while keeping all
   cards, text, and elements 100% untouched.
   ========================================================================== */
.about-backdrop {
  background:
    radial-gradient(ellipse 70% 55% at 84% 20%, rgba(204, 232, 255, 0.85) 0%, rgba(143, 208, 255, 0.45) 45%, transparent 74%),
    radial-gradient(ellipse 65% 55% at 18% 82%, rgba(143, 208, 255, 0.55) 0%, rgba(77, 166, 255, 0.3) 48%, transparent 76%),
    linear-gradient(135deg, #2b86df 0%, #4da6ff 48%, #8fd0ff 82%, #cce8ff 100%) !important;
}

/* Page 3 ("Service built around you.") — Luminous "(you.)" Colour Pattern Background */
.features-reveal {
  background:
    radial-gradient(ellipse 64% 56% at 86% 18%, rgba(204, 232, 255, 0.78) 0%, rgba(143, 208, 255, 0.44) 38%, transparent 70%),
    radial-gradient(ellipse 58% 50% at 54% 88%, rgba(143, 208, 255, 0.56) 0%, rgba(77, 166, 255, 0.34) 45%, transparent 74%),
    radial-gradient(ellipse 52% 48% at 15% 28%, rgba(18, 78, 142, 0.72) 0%, transparent 66%),
    linear-gradient(128deg, #15589d 0%, #2172c6 26%, #3993ec 52%, #4da6ff 72%, #8fd0ff 90%, #cce8ff 100%) !important;
}

.features-reveal::before {
  color: rgba(255, 255, 255, 0.09) !important;
}

.features-reveal::after {
  border-color: rgba(255, 255, 255, 0.24) !important;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.22) 0deg 1deg, transparent 1deg 15deg) !important;
}

/* Page 5 (Traveller Reviews) & Page 6 (Traveller Reels) — Matching "(you.)" Background */
.experiences-reveal,
.experiences-reveal.reviews-reveal {
  background:
    radial-gradient(ellipse 74% 48% at 50% 20%, rgba(16, 74, 138, 0.86) 0%, rgba(25, 98, 176, 0.58) 46%, transparent 74%),
    radial-gradient(ellipse 65% 52% at 12% 24%, rgba(204, 232, 255, 0.62) 0%, rgba(143, 208, 255, 0.34) 40%, transparent 70%),
    radial-gradient(ellipse 62% 54% at 88% 82%, rgba(143, 208, 255, 0.66) 0%, rgba(77, 166, 255, 0.36) 44%, transparent 74%),
    linear-gradient(135deg, #15569a 0%, #2171c4 30%, #3891ea 56%, #4da6ff 76%, #8fd0ff 92%, #cce8ff 100%) !important;
}

/* Crystal-Clear Luminous "(you.)" Gradient for "travellers" & "you." (Zero Text-Shadow Bleed) */
.reviews-title,
.features-heading h2 {
  text-shadow: none !important;
  filter: drop-shadow(0 8px 22px rgba(7, 36, 74, 0.38)) drop-shadow(0 2px 6px rgba(5, 24, 52, 0.34));
}

.reviews-title em,
.features-heading h2 em {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #dcf0ff 24%,
    #96d4ff 62%,
    #52aeff 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #8fd0ff !important;
  text-shadow: none !important;
  filter:
    drop-shadow(0 3px 12px rgba(6, 34, 72, 0.68))
    drop-shadow(0 1px 2px rgba(4, 22, 48, 0.78));
}

.reviews-title em::after {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: -2px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.88) 0%, #8fd0ff 55%, rgba(204, 232, 255, 0.25) 100%);
  box-shadow: 0 2px 10px rgba(143, 208, 255, 0.65);
}

.experiences-reveal.reviews-reveal::before {
  color: rgba(255, 255, 255, 0.08) !important;
}

.transport-reveal.reels-reveal {
  background:
    radial-gradient(ellipse 64% 54% at 82% 22%, rgba(204, 232, 255, 0.72) 0%, rgba(143, 208, 255, 0.4) 40%, transparent 72%),
    radial-gradient(ellipse 60% 50% at 20% 82%, rgba(143, 208, 255, 0.58) 0%, rgba(77, 166, 255, 0.34) 44%, transparent 74%),
    linear-gradient(135deg, #15589d 0%, #2273c7 28%, #3993ec 54%, #4da6ff 74%, #8fd0ff 91%, #cce8ff 100%) !important;
}

/* Scroll Transition Fog Harmonized to "(you.)" Sky-Azure Palette (Zero Dark Bleed) */
.transition-fog::before {
  background:
    radial-gradient(ellipse 38% 26% at 18% 42%, rgba(204, 232, 255, 0.94) 0%, rgba(143, 208, 255, 0.68) 45%, transparent 76%),
    radial-gradient(ellipse 44% 30% at 48% 54%, rgba(226, 242, 255, 0.95) 0%, rgba(77, 166, 255, 0.62) 48%, transparent 78%),
    radial-gradient(ellipse 40% 28% at 78% 40%, rgba(204, 232, 255, 0.92) 0%, rgba(77, 166, 255, 0.56) 46%, transparent 76%),
    radial-gradient(ellipse 52% 34% at 34% 68%, rgba(77, 166, 255, 0.68) 0%, rgba(143, 208, 255, 0.48) 54%, transparent 82%),
    linear-gradient(180deg, transparent 12%, rgba(204, 232, 255, 0.82) 38%, rgba(77, 166, 255, 0.66) 62%, transparent 88%) !important;
}

.transition-fog::after {
  background:
    radial-gradient(ellipse 42% 28% at 22% 48%, rgba(226, 242, 255, 0.95) 0%, rgba(143, 208, 255, 0.72) 46%, transparent 78%),
    radial-gradient(ellipse 46% 32% at 54% 42%, rgba(204, 232, 255, 0.96) 0%, rgba(77, 166, 255, 0.68) 48%, transparent 80%),
    radial-gradient(ellipse 38% 27% at 84% 56%, rgba(226, 242, 255, 0.94) 0%, rgba(143, 208, 255, 0.66) 45%, transparent 77%),
    radial-gradient(ellipse 48% 30% at 62% 68%, rgba(204, 232, 255, 0.9) 0%, rgba(77, 166, 255, 0.54) 52%, transparent 82%),
    linear-gradient(180deg, transparent 10%, rgba(204, 232, 255, 0.85) 36% 64%, transparent 90%) !important;
}

/* ==========================================================================
   AMBIENT "(you.)" SKY-AZURE BACKGROUND ELEMENTS (.sky-pattern-decor)
   3D Liquid-Glass Orbs, Nautical Compass Rings, Flight Route Arcs, Gliding
   Mini-Plane, Cloud Wisps & Starlight Sparkles — Strictly in the Background
   ========================================================================== */
.sky-pattern-decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none !important;
  overflow: hidden;
  user-select: none;
}

.features-heading,
.feature-cards,
.features-trust-pill,
.reviews-shell,
.reels-shell {
  position: relative;
  z-index: 2;
}

/* 3D Liquid-Glass Floating Sky Spheres matching "you." palette */
.sky-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 30% 26%,
      rgba(255, 255, 255, 0.78) 0%,
      rgba(204, 232, 255, 0.52) 26%,
      rgba(143, 208, 255, 0.28) 58%,
      rgba(77, 166, 255, 0.08) 100%
    );
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow:
    inset 0 12px 28px rgba(255, 255, 255, 0.55),
    inset 0 -14px 28px rgba(21, 88, 157, 0.22),
    0 24px 60px rgba(15, 72, 134, 0.16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  will-change: transform;
}

.sky-orb--one {
  width: clamp(150px, 16vw, 250px);
  height: clamp(150px, 16vw, 250px);
  top: 9%;
  right: 7%;
  opacity: 0.62;
  animation: sky-orb-float-a 11s ease-in-out infinite alternate;
}

.sky-orb--two {
  width: clamp(110px, 11.5vw, 180px);
  height: clamp(110px, 11.5vw, 180px);
  bottom: 7%;
  left: 6%;
  opacity: 0.52;
  animation: sky-orb-float-b 13s ease-in-out infinite alternate;
}

.sky-orb--three {
  width: clamp(72px, 7.5vw, 120px);
  height: clamp(72px, 7.5vw, 120px);
  bottom: 12%;
  right: 12%;
  opacity: 0.44;
  animation: sky-orb-float-a 9.5s ease-in-out infinite alternate-reverse;
}

/* Soft Aerial Cloud-Mist Wisps */
.sky-cloud-wisp {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(36px);
  opacity: 0.58;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(204, 232, 255, 0.52) 45%,
    transparent 76%
  );
}

.sky-cloud-wisp--left {
  width: clamp(280px, 34vw, 520px);
  height: clamp(110px, 14vh, 190px);
  bottom: -4%;
  left: -6%;
  animation: sky-wisp-drift 16s ease-in-out infinite alternate;
}

.sky-cloud-wisp--right {
  width: clamp(320px, 38vw, 580px);
  height: clamp(120px, 16vh, 220px);
  top: 4%;
  right: -8%;
  animation: sky-wisp-drift 18s ease-in-out infinite alternate-reverse;
}

/* Vector Flight Route, Compass Rings & Waypoints */
.sky-route-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.88;
}

.sky-compass-group {
  opacity: 0.92;
}

.sky-waypoint {
  animation: sky-waypoint-pulse 3.6s ease-in-out infinite alternate;
}

.sky-mini-plane {
  filter: drop-shadow(0 6px 14px rgba(14, 72, 136, 0.35));
}

.sky-sparkle {
  animation: sky-sparkle-twinkle 4.2s ease-in-out infinite alternate;
}

.sky-sparkle--alt {
  animation-delay: 1.8s;
}

@keyframes sky-orb-float-a {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(-16px, 18px, 0) scale(1.05);
  }
}

@keyframes sky-orb-float-b {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(18px, -14px, 0) scale(1.06);
  }
}

@keyframes sky-wisp-drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(28px, -10px, 0) scale(1.08);
  }
}

@keyframes sky-compass-spin {
  from {
    transform: translate(1220px, 210px) rotate(0deg);
  }
  to {
    transform: translate(1220px, 210px) rotate(360deg);
  }
}

@keyframes sky-waypoint-pulse {
  0% {
    opacity: 0.65;
  }
  100% {
    opacity: 1;
  }
}

@keyframes sky-sparkle-twinkle {
  0% {
    opacity: 0.35;
  }
  100% {
    opacity: 0.92;
  }
}

@media (max-width: 767px) {
  .sky-orb--one {
    width: 120px;
    height: 120px;
    top: 8%;
    right: -18px;
    opacity: 0.46;
  }
  .sky-orb--two {
    width: 96px;
    height: 96px;
    bottom: 5%;
    left: -16px;
    opacity: 0.42;
  }
  .sky-orb--three {
    display: none;
  }
  .sky-route-svg {
    opacity: 0.62;
  }
}

/* ==========================================================================
   Page 4: Popular Packages 5-Card Bento Showcase Only (Spacious A2A Theme)
   Row 1: 2 Asymmetric Hero Cards (India 98 Tours + International 362 Tours)
   Row 2: 3 Category Cards (Honeymoon 17 + Luxury Abroad 144 + Family 15)
   ========================================================================== */
.places-reveal {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(18px, 2.4vh, 26px) !important;
  padding-top: var(--global-header-clearance) !important;
  padding-bottom: clamp(22px, 3.4vh, 38px) !important;
  padding-inline: clamp(24px, 5vw, 84px) !important;
}

.places-reveal .places-heading {
  width: min(100%, 1200px) !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: clamp(16px, 2.4vw, 32px) !important;
}

.places-reveal .places-kicker {
  margin: 0 0 6px !important;
  font-size: clamp(9.5px, 0.76vw, 11px) !important;
}

.places-reveal .places-title-group h2 {
  margin: 0 !important;
  font-size: clamp(28px, 3.1vw, 46px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.03em !important;
}

.places-reveal .places-intro {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 !important;
}

.places-reveal .places-intro > p {
  max-width: 390px !important;
  margin: 0 !important;
  font-size: clamp(11.5px, 0.88vw, 13.5px) !important;
  line-height: 1.48 !important;
  color: #3b556e !important;
}

.places-enquire-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1683d8 0%, #0b5694 100%);
  border: 1px solid rgba(143, 208, 255, 0.65);
  box-shadow:
    0 10px 24px rgba(14, 110, 184, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: clamp(11px, 0.84vw, 12.5px);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
  transition: transform 0.24s ease, box-shadow 0.24s ease, background 0.24s ease;
}

.places-enquire-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #2496ef 0%, #0e6eb8 100%);
  box-shadow: 0 14px 30px rgba(14, 110, 184, 0.38);
}

/* 2-Row 5-Card Bento Showcase Container */
.a2a-collections-showcase {
  width: min(100%, 1200px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.2vh, 24px);
  opacity: var(--places-progress, 1);
  transform: translate3d(0, var(--places-card-entry-shift, 0px), 0) scale(var(--places-card-scale, 1));
  will-change: transform, opacity;
}

.a2a-collections-row {
  display: grid;
  gap: clamp(18px, 1.9vw, 26px);
  min-width: 0;
}

.a2a-collections-row--top {
  grid-template-columns: minmax(0, 1.92fr) minmax(0, 1.08fr);
}

.a2a-collections-row--bottom {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Spacious Premium Package Cards */
.a2a-collection-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 22px;
  background: #071e36;
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    0 20px 46px rgba(7, 28, 56, 0.16),
    0 6px 18px rgba(14, 110, 184, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: clamp(20px, 2.6vh, 32px);
  text-decoration: none;
  transition:
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.32s ease;
}

.a2a-collections-row--top .a2a-collection-card {
  min-height: clamp(210px, 31vh, 290px);
}

.a2a-collections-row--bottom .a2a-collection-card {
  min-height: clamp(175px, 25vh, 235px);
}

.a2a-collection-card:hover {
  transform: translateY(-5px);
  border-color: #4da6ff;
  box-shadow:
    0 26px 56px rgba(7, 28, 56, 0.24),
    0 10px 26px rgba(14, 110, 184, 0.22);
}

.a2a-collection-card > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  filter: saturate(1.14) contrast(1.05);
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease;
}

.a2a-collection-card:hover > img {
  transform: scale(1.06);
  filter: saturate(1.2) contrast(1.06) brightness(1.03);
}

.a2a-collection-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 50%, rgba(5, 22, 44, 0.2) 0%, rgba(4, 18, 36, 0.62) 100%),
    linear-gradient(180deg, rgba(4, 18, 36, 0.14) 0%, rgba(4, 18, 36, 0.36) 52%, rgba(4, 16, 34, 0.74) 100%);
  pointer-events: none;
}

.a2a-collection-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.a2a-collection-content h3 {
  margin: 0;
  font-family: var(--font-display, "Outfit", sans-serif);
  font-size: clamp(20px, 1.75vw, 28px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-shadow: 0 3px 16px rgba(2, 10, 24, 0.68);
}

.a2a-collection-card--wide .a2a-collection-content h3 {
  font-size: clamp(24px, 2.2vw, 34px);
}

/* Signature A2A Blue Tour Count Pill */
.a2a-tour-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2188e5 0%, #0e6eb8 55%, #094d87 100%);
  border: 1px solid rgba(190, 228, 255, 0.88);
  box-shadow:
    0 8px 20px rgba(4, 18, 38, 0.45),
    0 0 16px rgba(59, 158, 255, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: clamp(10px, 0.8vw, 11.5px);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffffff;
  transition: transform 0.24s ease, background 0.24s ease, box-shadow 0.24s ease;
}

.a2a-collection-card:hover .a2a-tour-count-pill {
  transform: scale(1.06);
  background: linear-gradient(135deg, #3ba4ff 0%, #1679cb 60%, #0b5694 100%);
  box-shadow:
    0 10px 24px rgba(4, 18, 38, 0.55),
    0 0 22px rgba(77, 174, 255, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

@media (max-width: 1024px) {
  .places-reveal .places-intro > p {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .places-reveal {
    padding-inline: 4.5vw !important;
    gap: 12px !important;
  }

  .places-reveal .places-heading {
    flex-direction: row !important;
    align-items: flex-end !important;
  }

  .places-reveal .places-title-group h2 {
    font-size: clamp(22px, 6.2vw, 28px) !important;
  }

  .places-enquire-btn {
    padding: 7px 14px;
    font-size: 10px;
  }

  .a2a-collections-showcase {
    gap: 12px;
  }

  .a2a-collections-row {
    gap: 10px;
  }

  .a2a-collections-row--top {
    grid-template-columns: 1.35fr 1fr;
  }

  .a2a-collections-row--top .a2a-collection-card {
    min-height: clamp(150px, 24vh, 195px);
  }

  .a2a-collections-row--bottom .a2a-collection-card {
    min-height: clamp(135px, 21vh, 175px);
  }

  .a2a-collection-card {
    border-radius: 16px;
    padding: 12px 8px;
  }

  .a2a-collection-content {
    gap: 7px;
  }

  .a2a-collection-content h3,
  .a2a-collection-card--wide .a2a-collection-content h3 {
    font-size: clamp(12.5px, 3.5vw, 16px);
  }

  .a2a-tour-count-pill {
    padding: 4px 10px;
    font-size: 8px;
  }
}

/* ==========================================================================
   PAGE 1 HERO — ORIGINAL HEADING POSITION + HEADER (.nav-shell) COLOR PATTERN
   FOR THE 3-CARD MILESTONE SHOWCASE (.hero-glass-card)
   ========================================================================== */

@media (min-width: 1280px) {
  .airplane {
    left: 50% !important;
    top: clamp(165px, 36svh, 270px) !important;
    width: min(clamp(300px, 34vw, 570px), calc((100svh - 300px) * 1.42)) !important;
    transform: translate3d(-50%, var(--plane-shift), 0) scale(var(--plane-scale)) !important;
  }

  .hero-left-copy {
    left: 5% !important;
    top: auto !important;
    bottom: clamp(54px, 8vh, 82px) !important;
    width: 27% !important;
  }

  .home-copy h1 {
    font-size: clamp(42px, 4.3vw, 72px) !important;
    line-height: 0.99 !important;
  }

  .hero-glass-card {
    position: absolute !important;
    left: 69% !important;
    right: 4% !important;
    top: auto !important;
    bottom: clamp(24px, 5vh, 54px) !important;
    width: auto !important;
    max-width: 790px !important;
    margin-left: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(8px, 1vh, 11px) !important;
    padding: clamp(11px, 1.2vh, 15px) clamp(13px, 1.15vw, 17px) !important;
    border-radius: 26px !important;
    overflow: hidden !important;
  }
}

/* Exact .nav-shell Header Glass & Color Pattern on .hero-glass-card across all viewports */
.hero-glass-card {
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  background: linear-gradient(
    135deg,
    rgba(244, 250, 255, 0.78) 0%,
    rgba(224, 241, 255, 0.62) 48%,
    rgba(239, 248, 255, 0.74) 100%
  ) !important;
  box-shadow:
    0 16px 38px rgba(4, 20, 40, 0.18),
    0 2px 10px rgba(14, 110, 184, 0.12),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.96),
    inset 0 -1.5px 2px rgba(14, 110, 184, 0.16) !important;
  -webkit-backdrop-filter: blur(28px) saturate(195%) brightness(1.06) !important;
  backdrop-filter: blur(28px) saturate(195%) brightness(1.06) !important;
}

.hero-glass-card::before {
  content: "";
  position: absolute;
  inset: 1px 1px 46% 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.04));
  pointer-events: none;
  z-index: 0;
}

.hero-glass-card::after {
  display: none !important;
}

/* Header-Matched Top Bar inside .hero-glass-card */
.hero-glass-card .hero-card-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Matches .nav-link.is-pill ("Packages" pill in Header) */
.hero-glass-card .hero-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(14, 110, 184, 0.13);
  border: 1px solid rgba(14, 110, 184, 0.24);
  color: #0e6eb8;
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-glass-card .hero-card-badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0e6eb8;
  box-shadow: 0 0 8px rgba(14, 110, 184, 0.65);
}

.hero-card-header-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Matches .header-btn--light ("Call" / "Book Now" white pill in Header) */
.hero-glass-card .hero-card-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.96);
  box-shadow: 0 5px 15px rgba(4, 20, 40, 0.1), inset 0 1px 0 #ffffff;
  color: #091a2c;
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: 10.5px;
  font-weight: 700;
}

.hero-glass-card .hero-card-rating b {
  color: #f59e0b;
  font-weight: 800;
}

/* Matches .nav-link.is-active / .header-btn--accent ("Home" / "WhatsApp" blue pill in Header) */
.hero-glass-card .hero-card-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(14, 110, 184, 0.18);
}

.hero-glass-card .hero-card-trust {
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: 11px;
  font-weight: 700;
  color: #091a2c;
  white-space: nowrap;
}

.hero-glass-card .hero-card-trust b {
  font-family: var(--font-display, "Outfit", sans-serif);
  font-weight: 800;
  color: #0e6eb8;
}

.hero-glass-card .hero-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6.5px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1683d8 0%, #0b5a99 100%);
  border: 1px solid rgba(145, 204, 255, 0.65);
  box-shadow:
    0 6px 18px rgba(14, 110, 184, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
  color: #ffffff;
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.hero-glass-card .hero-card-cta:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #2191e8 0%, #0e6eb8 100%);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(14, 110, 184, 0.44);
}

.hero-milestone-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(9px, 0.95vw, 13px);
  width: 100%;
}

/* 3 Inner Milestone Cards using the Header's Frosted Ice-Sky & Royal Blue Palette */
.hero-milestone-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: clamp(14px, 1.65vh, 19px) clamp(10px, 0.95vw, 15px);
  border-radius: 20px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.76) 0%,
    rgba(232, 245, 255, 0.58) 52%,
    rgba(244, 250, 255, 0.72) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 10px 24px rgba(4, 20, 40, 0.1),
    0 2px 6px rgba(14, 110, 184, 0.08),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.96),
    inset 0 -1px 2px rgba(14, 110, 184, 0.12);
  text-decoration: none;
  overflow: hidden;
  transition:
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.28s ease,
    background 0.28s ease;
}

.hero-milestone-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2.5px;
  background: linear-gradient(
    90deg,
    transparent 8%,
    rgba(22, 131, 216, 0.65) 50%,
    transparent 92%
  );
  opacity: 0.75;
  transition: opacity 0.3s ease, height 0.3s ease;
}

.hero-milestone-card:hover {
  transform: translateY(-4px);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(238, 248, 255, 0.78) 52%,
    rgba(248, 252, 255, 0.88) 100%
  );
  border-color: #ffffff;
  box-shadow:
    0 16px 34px rgba(4, 20, 40, 0.16),
    0 4px 14px rgba(14, 110, 184, 0.18),
    inset 0 1.5px 1px #ffffff;
}

.hero-milestone-card:hover::before {
  opacity: 1;
  height: 3px;
}

/* Icon Badge Styled Like the Header's Active "Home" / "WhatsApp" Royal Blue Pill */
.hero-milestone-icon {
  position: relative;
  z-index: 1;
  width: clamp(40px, 2.85vw, 46px);
  height: clamp(40px, 2.85vw, 46px);
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(8px, 0.95vh, 11px);
  background: linear-gradient(135deg, #1683d8 0%, #084c82 100%);
  border: 1px solid rgba(145, 204, 255, 0.65);
  box-shadow:
    0 6px 16px rgba(14, 110, 184, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
  color: #ffffff;
  flex-shrink: 0;
  transition:
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.3s ease,
    box-shadow 0.3s ease;
}

.hero-milestone-card:hover .hero-milestone-icon {
  transform: scale(1.08) translateY(-1px);
  background: linear-gradient(135deg, #2191e8 0%, #0e6eb8 100%);
  box-shadow:
    0 10px 22px rgba(14, 110, 184, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.hero-milestone-icon svg {
  width: clamp(22px, 1.65vw, 26px);
  height: clamp(22px, 1.65vw, 26px);
}

/* Title & Description Using the Header's Deep Navy (#091a2c) & A2A Blue (#0e6eb8) */
.hero-milestone-card h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 5px;
  font-family: var(--font-display, "Outfit", sans-serif);
  font-size: clamp(13px, 0.98vw, 15.5px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: #091a2c;
}

.hero-milestone-card h3 .milestone-accent {
  display: inline;
  background: linear-gradient(135deg, #0e6eb8 0%, #084c82 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #0e6eb8;
}

.hero-milestone-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
  font-size: clamp(10.2px, 0.72vw, 11.5px);
  font-weight: 600;
  line-height: 1.44;
  color: #1e3650;
  max-width: 26ch;
}

/* Short-Height Desktop / Laptop screens (min-width: 1024px and max-height: 760px) */
@media (min-width: 1280px) and (max-height: 760px) {
  .airplane {
    top: clamp(165px, 36svh, 270px) !important;
    width: min(clamp(280px, 34vw, 570px), calc((100svh - 300px) * 1.42)) !important;
  }

  .hero-left-copy {
    top: auto !important;
    bottom: clamp(48px, 7vh, 58px) !important;
  }

  .home-copy h1 {
    font-size: clamp(36px, 5.6vh, 52px) !important;
  }

  .hero-glass-card {
    top: auto !important;
    bottom: 14px !important;
    padding: 10px 12px !important;
    gap: 7px !important;
    border-radius: 22px !important;
  }

  .hero-milestone-card {
    padding: 10px 8px;
    border-radius: 15px;
  }

  .hero-milestone-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    margin-bottom: 5px;
  }

  .hero-milestone-icon svg {
    width: 18px;
    height: 18px;
  }

  .hero-milestone-card h3 {
    font-size: clamp(11.5px, 0.88vw, 13.5px);
    margin-bottom: 3px;
  }

  .hero-milestone-card p {
    font-size: 9.8px;
    line-height: 1.34;
  }
}

/* Tablet Viewports (768px – 1279px): Full-Width 3-Card Dock Below Copy, Airplane Clear Above */
@media (min-width: 768px) and (max-width: 1279px) {
  .airplane {
    left: 50% !important;
    top: clamp(108px, 15svh, 145px) !important;
    width: min(clamp(195px, 28vw, 265px), max(150px, calc((100svh - 460px) * 1.4))) !important;
  }

  .hero-left-copy {
    left: 5.5% !important;
    top: auto !important;
    bottom: clamp(232px, 27.5vh, 268px) !important;
    width: 89% !important;
  }

  .home-copy h1 {
    font-size: clamp(32px, 4.4vw, 44px) !important;
  }

  .hero-glass-card {
    left: 4.2% !important;
    right: 4.2% !important;
    top: auto !important;
    bottom: clamp(16px, 2.6vh, 28px) !important;
    width: auto !important;
    max-width: none !important;
    padding: 11px 13px !important;
    gap: 8px !important;
    border-radius: 22px !important;
  }

  .hero-milestone-grid {
    gap: 10px;
  }

  .hero-milestone-card {
    padding: 12px 10px;
    border-radius: 16px;
  }

  .hero-milestone-icon {
    width: 36px;
    height: 36px;
    margin-bottom: 6px;
  }

  .hero-milestone-card h3 {
    font-size: 12.5px;
  }

  .hero-milestone-card p {
    font-size: 10px;
    line-height: 1.36;
  }
}

/* Mobile Viewports (max-width: 767px):
   1st Image Reference: Bottom-Anchored Heading + Card (Zero Bottom Gap)
   2nd Image Reference: Full Airplane Centered Cleanly Between Header & Heading (Zero Touch) */
@media (max-width: 767px) {
  .airplane-layer {
    transform: translate3d(0, var(--scene-shift), 0) !important;
  }

  .airplane {
    left: 50% !important;
    top: calc(86px + env(safe-area-inset-top)) !important;
    width: min(clamp(200px, 72vw, 288px), max(170px, calc((100svh - 455px) * 1.45))) !important;
    transform: translate3d(-50%, var(--plane-shift), 0) scale(var(--plane-scale)) !important;
  }

  .home-copy {
    position: absolute !important;
    left: 3.6vw !important;
    right: 3.6vw !important;
    top: auto !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
    gap: clamp(7px, 1.3svh, 11px) !important;
  }

  .hero-left-copy,
  .hero-glass-card {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .home-copy h1 {
    font-size: clamp(26px, 7.8vw, 35px) !important;
    line-height: 1.0 !important;
    gap: 1.5px !important;
  }

  .hero-glass-card {
    padding: clamp(10px, 2.9vw, 13px) !important;
    gap: clamp(7px, 1.8vw, 9px) !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }

  .hero-glass-card .hero-card-header {
    gap: 6px !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
  }

  .hero-glass-card .hero-card-badge {
    padding: 4px 10px !important;
    font-size: clamp(7.5px, 2.25vw, 9px) !important;
    letter-spacing: 0.09em !important;
    gap: 5px !important;
    white-space: nowrap !important;
  }

  .hero-glass-card .hero-card-badge i {
    width: 6px !important;
    height: 6px !important;
  }

  .hero-glass-card .hero-card-rating {
    padding: 4px 10px !important;
    font-size: clamp(8.2px, 2.45vw, 9.8px) !important;
    white-space: nowrap !important;
  }

  .hero-milestone-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: clamp(6px, 1.8vw, 8px) !important;
    margin: 0 !important;
  }

  .hero-milestone-card {
    height: 100% !important;
    padding: clamp(10px, 2.6vw, 13px) clamp(5px, 1.5vw, 8px) !important;
    border-radius: 16px !important;
    justify-content: flex-start !important;
  }

  .hero-milestone-icon {
    width: clamp(28px, 8vw, 34px) !important;
    height: clamp(28px, 8vw, 34px) !important;
    border-radius: 10px !important;
    margin-bottom: 5px !important;
  }

  .hero-milestone-icon svg {
    width: clamp(15px, 4.3vw, 18px) !important;
    height: clamp(15px, 4.3vw, 18px) !important;
  }

  .hero-milestone-card h3 {
    font-size: clamp(9.2px, 2.75vw, 11.5px) !important;
    line-height: 1.15 !important;
    margin: 0 0 4px !important;
    letter-spacing: -0.02em !important;
  }

  .hero-milestone-card h3 .milestone-accent {
    display: block !important;
  }

  .hero-milestone-card p {
    font-size: clamp(7.8px, 2.22vw, 9.2px) !important;
    line-height: 1.32 !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    max-width: none !important;
  }

  .hero-glass-card .hero-card-footer {
    margin: 0 !important;
    padding-top: 6px !important;
    gap: 8px !important;
  }

  .hero-glass-card .hero-card-trust {
    font-size: clamp(8.5px, 2.6vw, 10.5px) !important;
  }

  .hero-glass-card .hero-card-cta {
    padding: 6px 12px !important;
    font-size: clamp(8.8px, 2.65vw, 10.5px) !important;
    gap: 4px !important;
  }
}

/* Compact Height Mobile Phones (e.g. 320x568 / 375x667) */
@media (max-width: 767px) and (max-height: 670px) {
  .home-copy {
    top: auto !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    gap: 5px !important;
  }

  .home-copy h1 {
    font-size: clamp(23px, 6.9vw, 29px) !important;
  }

  .hero-glass-card {
    padding: 8px 9px !important;
    gap: 5px !important;
    border-radius: 18px !important;
  }

  .hero-milestone-card {
    padding: 7px 5px !important;
    border-radius: 13px !important;
  }

  .hero-milestone-icon {
    width: 24px !important;
    height: 24px !important;
    border-radius: 8px !important;
    margin-bottom: 4px !important;
  }

  .hero-milestone-icon svg {
    width: 13px !important;
    height: 13px !important;
  }

  .hero-milestone-card h3 {
    font-size: clamp(8.4px, 2.5vw, 10px) !important;
    margin-bottom: 2px !important;
  }

  .hero-milestone-card p {
    font-size: clamp(7.2px, 2.05vw, 8.2px) !important;
    line-height: 1.24 !important;
  }

  .hero-glass-card .hero-card-footer {
    padding-top: 5px !important;
  }
}

@media (max-width: 920px) and (max-height: 520px) and (orientation: landscape) {
  .airplane {
    top: calc(62px + env(safe-area-inset-top)) !important;
    width: min(clamp(110px, 22vw, 180px), max(95px, calc((100svh - 250px) * 1.3))) !important;
  }
}

/* Supporting copy and action complement the desktop hero without crowding touch layouts. */
.hero-intro,
.hero-copy-cta {
  display: none;
}

@media (min-width: 1280px) {
  .hero-left-copy {
    gap: clamp(12px, 1.8vh, 20px);
  }

  .hero-intro {
    display: block;
    max-width: min(42ch, 100%);
    margin: 0;
    color: rgba(245, 250, 255, 0.94);
    font-family: var(--font-sans);
    font-size: clamp(14px, 1.15vw, 17px);
    font-weight: 550;
    line-height: 1.65;
    text-shadow: 0 2px 12px rgba(3, 14, 28, 0.55);
  }

  .hero-copy-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    gap: 10px;
    min-height: 44px;
    padding: 0 19px;
    border: 1px solid rgba(145, 204, 255, 0.65);
    border-radius: 999px;
    background: linear-gradient(135deg, #1683d8, #0b5a99);
    box-shadow: 0 8px 22px rgba(14, 110, 184, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 750;
    pointer-events: auto;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .hero-copy-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(14, 110, 184, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  }
}

@media (max-width: 1279px) {
  .hero-intro,
  .hero-copy-cta {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy-cta {
    transition: none;
  }
}

/* Keep the mobile copy container bounded so its flex content anchors above the card. */
@media (max-width: 767px) {
  .home-copy {
    top: min(330px, max(250px, calc(98px + 48vw))) !important;
  }
}

@media (max-width: 767px) and (orientation: portrait) {
  .airplane {
    top: calc(100px + env(safe-area-inset-top)) !important;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .home-copy {
    inset: 0 !important;
  }

  .airplane {
    left: 64% !important;
    top: clamp(150px, 20svh, 190px) !important;
    width: min(clamp(185px, 24vw, 310px), max(150px, calc((100svh - 440px) * 1.35))) !important;
    transform: translate3d(-50%, var(--plane-shift), 0) scale(var(--plane-scale)) !important;
  }

  .hero-left-copy {
    bottom: clamp(290px, 37vh, 340px) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) and (max-height: 700px) {
  .airplane {
    top: clamp(160px, 25svh, 180px) !important;
    width: clamp(135px, 19vw, 165px) !important;
  }

  .hero-left-copy {
    left: 5% !important;
    top: clamp(165px, 27svh, 190px) !important;
    bottom: auto !important;
    width: 42% !important;
  }

  .home-copy h1 {
    font-size: clamp(26px, 3.8vw, 32px) !important;
  }
}

@media (min-width: 768px) and (max-width: 1279px) and (max-height: 520px) {
  .airplane {
    top: 150px !important;
    width: clamp(105px, 16vw, 145px) !important;
  }

  .hero-left-copy {
    left: 5% !important;
    top: 150px !important;
    bottom: auto !important;
    width: 42% !important;
  }

  .home-copy h1 {
    font-size: clamp(22px, 3.2vw, 28px) !important;
  }
}

/* Match the desktop hero composition on laptop and tablet screens without clipping. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .airplane {
    left: 50% !important;
    top: clamp(155px, 26svh, 210px) !important;
    width: min(clamp(250px, 28vw, 360px), max(180px, calc((100svh - 350px) * 1.3))) !important;
    transform: translate3d(-50%, var(--plane-shift), 0) scale(var(--plane-scale)) !important;
  }

  .hero-left-copy {
    left: 5% !important;
    top: auto !important;
    bottom: clamp(38px, 6vh, 56px) !important;
    width: 29% !important;
    gap: clamp(8px, 1.2vh, 13px) !important;
  }

  .home-copy h1 {
    font-size: clamp(32px, 3.8vw, 44px) !important;
  }

  .hero-intro {
    display: block !important;
    max-width: 34ch;
    margin: 0;
    font-size: clamp(12px, 1.25vw, 15px);
    line-height: 1.5;
    text-shadow: 0 2px 12px rgba(3, 14, 28, 0.55);
  }

  .hero-copy-cta {
    display: inline-flex !important;
    align-items: center;
    align-self: flex-start;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid rgba(145, 204, 255, 0.65);
    border-radius: 999px;
    background: linear-gradient(135deg, #1683d8, #0b5a99);
    box-shadow: 0 8px 22px rgba(14, 110, 184, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 750;
  }

  .hero-glass-card {
    left: 66% !important;
    right: 3.5% !important;
    top: auto !important;
    bottom: clamp(22px, 4vh, 38px) !important;
    width: auto !important;
    max-width: none !important;
    padding: 10px 11px !important;
    gap: 7px !important;
    border-radius: 22px !important;
  }

  .hero-milestone-grid {
    gap: 7px !important;
  }

  .hero-milestone-card {
    padding: 9px 6px !important;
    border-radius: 14px !important;
  }

  .hero-milestone-icon {
    width: 30px !important;
    height: 30px !important;
    margin-bottom: 4px !important;
  }

  .hero-milestone-icon svg {
    width: 17px !important;
    height: 17px !important;
  }

  .hero-milestone-card h3 {
    font-size: clamp(10px, 1vw, 12px) !important;
    line-height: 1.15 !important;
  }

  .hero-milestone-card p {
    font-size: clamp(8px, 0.82vw, 10px) !important;
    line-height: 1.3 !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .airplane {
    left: 62% !important;
    top: clamp(150px, 24svh, 220px) !important;
    width: min(clamp(150px, 22vw, 225px), max(135px, calc((100svh - 440px) * 1.3))) !important;
    transform: translate3d(-50%, var(--plane-shift), 0) scale(var(--plane-scale)) !important;
  }

  .hero-left-copy {
    left: 5% !important;
    top: clamp(175px, 29svh, 285px) !important;
    bottom: auto !important;
    width: 42% !important;
  }

  .home-copy h1 {
    font-size: clamp(28px, 4vw, 38px) !important;
  }

  .hero-glass-card {
    left: 4.2% !important;
    right: 4.2% !important;
    top: auto !important;
    bottom: clamp(16px, 2.6vh, 28px) !important;
    width: auto !important;
    max-width: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  .airplane {
    left: 66% !important;
    top: clamp(150px, 19svh, 205px) !important;
    width: min(clamp(175px, 25vw, 245px), max(160px, calc((100svh - 510px) * 1.3))) !important;
  }

  .hero-left-copy {
    top: clamp(220px, 29svh, 310px) !important;
    width: 46% !important;
  }
}

@media (min-width: 1280px) {
  .airplane {
    width: min(clamp(300px, 34vw, 570px), calc((100svh - 300px) * 1.42), 33vw) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .home-copy {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
  }

  .hero-left-copy {
    position: absolute !important;
    left: 5% !important;
    right: auto !important;
    top: auto !important;
    bottom: clamp(42px, 7vh, 64px) !important;
    width: 40% !important;
    gap: clamp(7px, 1.1vh, 12px) !important;
    z-index: 10 !important;
  }

  .home-copy h1 {
    display: flex !important;
    width: 100% !important;
    font-size: clamp(29px, 3.9vw, 40px) !important;
    line-height: 1 !important;
  }

  .hero-intro {
    display: block !important;
    max-width: 34ch;
    margin: 0;
    font-size: clamp(11px, 1.2vw, 14px);
    line-height: 1.45;
    text-shadow: 0 2px 12px rgba(3, 14, 28, 0.55);
  }

  .hero-copy-cta {
    display: inline-flex !important;
    align-items: center;
    align-self: flex-start;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(145, 204, 255, 0.65);
    border-radius: 999px;
    background: linear-gradient(135deg, #1683d8, #0b5a99);
    box-shadow: 0 8px 22px rgba(14, 110, 184, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 750;
  }

  .airplane {
    left: 50% !important;
    top: clamp(112px, 18svh, 210px) !important;
    width: min(clamp(220px, 32vw, 330px), max(180px, calc((100svh - 390px) * 1.5))) !important;
    transform: translate3d(-50%, var(--plane-shift), 0) scale(var(--plane-scale)) !important;
  }

  .hero-glass-card {
    position: absolute !important;
    left: auto !important;
    right: 3.5% !important;
    top: auto !important;
    bottom: clamp(20px, 3.5vh, 36px) !important;
    width: min(44%, 420px) !important;
    max-width: 420px !important;
    padding: clamp(10px, 1.5vh, 15px) clamp(10px, 1.3vw, 16px) !important;
    gap: clamp(6px, 1vh, 10px) !important;
    border-radius: 22px !important;
  }

  .hero-milestone-grid {
    gap: clamp(5px, 0.8vw, 8px) !important;
  }

  .hero-milestone-card {
    padding: clamp(8px, 1.2vh, 12px) clamp(4px, 0.7vw, 7px) !important;
    border-radius: 14px !important;
  }

  .hero-milestone-icon {
    width: clamp(26px, 3.2vw, 34px) !important;
    height: clamp(26px, 3.2vw, 34px) !important;
    margin-bottom: 4px !important;
  }

  .hero-milestone-icon svg {
    width: 17px !important;
    height: 17px !important;
  }

  .hero-milestone-card h3 {
    font-size: clamp(9px, 1.1vw, 11px) !important;
    line-height: 1.15 !important;
  }

  .hero-milestone-card p {
    font-size: clamp(7.5px, 0.92vw, 9px) !important;
    line-height: 1.28 !important;
  }

  .hero-glass-card .hero-card-badge,
  .hero-glass-card .hero-card-rating {
    padding: 4px 8px !important;
    font-size: clamp(7px, 0.9vw, 9px) !important;
  }

  .hero-glass-card .hero-card-footer {
    gap: 5px !important;
    padding-top: 6px !important;
  }

  .hero-glass-card .hero-card-trust {
    font-size: clamp(7px, 0.9vw, 9px) !important;
  }

  .hero-glass-card .hero-card-cta {
    padding: 5px 8px !important;
    font-size: clamp(7px, 0.9vw, 9px) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) and (max-height: 700px) {
  .hero-left-copy {
    bottom: clamp(42px, 7vh, 50px) !important;
  }

  .hero-intro {
    font-size: clamp(10px, 1.1vw, 12px) !important;
    line-height: 1.35 !important;
  }

  .hero-copy-cta {
    min-height: 34px !important;
    font-size: 10px !important;
  }
}

@media (max-width: 767px) and (orientation: portrait) {
  .airplane {
    left: 50% !important;
    top: calc(
      100px + env(safe-area-inset-top) +
      clamp(0px, calc(48px + (100svh - 568px) * 0.35 - env(safe-area-inset-top)), 90px)
    ) !important;
    width: min(
      clamp(200px, 72vw, 288px),
      max(170px, calc((100svh - 455px) * 1.45)),
      max(120px, calc((min(330px, max(250px, calc(98px + 48vw))) - 112px - env(safe-area-inset-top)) * 1.5))
    ) !important;
    transform: translate3d(-50%, var(--plane-shift), 0) scale(var(--plane-scale)) !important;
  }
}

@media (max-width: 767px) {
  .places-reveal {
    justify-content: space-evenly !important;
  }

  .a2a-collections-showcase {
    display: grid;
    flex: 0 1 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1fr 0.92fr 1.04fr;
    grid-template-areas:
      "india international"
      "india honeymoon"
      "luxury family";
    gap: 8px;
    height: clamp(290px, calc(100svh - 260px), 590px);
    width: 100%;
  }

  .a2a-collections-row {
    display: contents;
  }

  .a2a-collections-showcase .a2a-collection-card {
    height: 100%;
    min-height: 0 !important;
  }

  .a2a-collections-row--top > .a2a-collection-card:first-child {
    grid-area: india;
  }

  .a2a-collections-row--top > .a2a-collection-card:last-child {
    grid-area: international;
  }

  .a2a-collections-row--bottom > .a2a-collection-card:first-child {
    grid-area: honeymoon;
    height: 90%;
    align-self: center;
  }

  .a2a-collections-row--bottom > .a2a-collection-card:nth-child(2) {
    grid-area: luxury;
    height: 94%;
    align-self: center;
  }

  .a2a-collections-row--bottom > .a2a-collection-card:last-child {
    grid-area: family;
  }
}