/* ============================================================
   AL MUSAFIR TOURS — Design System v75
   ============================================================ */

:root{
  /* LIGHT + WARM palette — ivory · terracotta · antique gold (Arab × Sri Lankan, NO green) */
  --cream:#FAF4E8; --cream-2:#F1E6CF; --cream-3:#F6EEDC; --paper:#FFFFFF;
  --line:#E6D6B8; --ink:#3A2B1B; --ink-70:rgba(58,43,27,.74); --ink-55:rgba(58,43,27,.56); --ink-35:rgba(58,43,27,.36);
  --jade:#B0562F; --jade-d:#7C3A1E; --jade-l:#C77A50;
  --gold:#B8863B; --gold-l:#E3C486; --gold-d:#8A6524;
  --ruby:#7A1220; --ruby-l:#9E2233; --ruby-d:#5A0C18; --night:#322414;
  --terra:#B0562F; --blue:#BADFE7; --mint:#C2EDCE;
  --f-display:'Fraunces','Amiri',Georgia,serif;
  --f-serif:'Cormorant Garamond',Georgia,serif;
  --f-sans:'Outfit',system-ui,-apple-system,sans-serif;
  --f-ar:'Amiri',serif;
  --nav-h:78px; --pad:clamp(20px,5vw,100px); --maxw:1440px;
  --e-out:cubic-bezier(.19,1,.22,1);
  --e-io:cubic-bezier(.65,.02,.28,1);
  --sh-2:0 30px 80px -34px rgba(40,110,116,.34);
  --sh-3:0 46px 110px -40px rgba(40,110,116,.42);
  --arch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130' preserveAspectRatio='none'%3E%3Cpath d='M0 130 L0 50 Q0 0 50 0 Q100 0 100 50 L100 130 Z' fill='%23000'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--f-sans);
  font-size:17px;line-height:1.72;font-weight:340;letter-spacing:.004em;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
::selection{background:var(--jade);color:#fff}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--cream)}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:20px;border:3px solid var(--cream)}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}

.grain{position:fixed;inset:-60px;z-index:6;pointer-events:none;opacity:.04;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------------- shared type ---------------- */
.eyebrow{font-family:var(--f-sans);font-size:11.5px;font-weight:600;letter-spacing:.36em;
  text-transform:uppercase;color:var(--gold-d);display:inline-flex;align-items:center;gap:12px;margin:0 0 16px}
.eyebrow::before{content:"";width:30px;height:1px;background:var(--gold)}
.eyebrow.c{justify-content:center}.eyebrow.c::after{content:"";width:30px;height:1px;background:var(--gold)}
.sec-title{font-family:var(--f-display);font-weight:360;font-size:clamp(2.1rem,4.8vw,4.1rem);
  line-height:1.03;letter-spacing:-.018em;margin:0 0 22px}
.sec-title em,h2 em{font-style:italic;color:var(--jade);font-weight:400}
.lead{font-family:var(--f-serif);font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.58;color:var(--ink-70);font-weight:400;max-width:60ch}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);position:relative}
.section{padding:clamp(88px,12vw,180px) 0;position:relative}
.section.tint{background:linear-gradient(180deg,var(--cream),var(--cream-3) 45%,var(--cream))}

.lines .line{overflow:hidden;display:block}
.lines .line>span{display:block;transform:translateY(110%);will-change:transform}
.reveal{opacity:0;transform:translateY(30px);will-change:transform,opacity}
.clip-img{clip-path:inset(0 0 100% 0);will-change:clip-path}
.no-gsap .lines .line>span{transform:none!important}
.no-gsap .reveal{opacity:1!important;transform:none!important}
.no-gsap .clip-img{clip-path:none!important}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;gap:11px;font-family:var(--f-sans);font-weight:500;
  font-size:14px;letter-spacing:.02em;padding:15px 30px;border-radius:100px;position:relative;overflow:hidden;
  transition:transform .5s var(--e-out),box-shadow .5s var(--e-out),background .4s,color .4s,border-color .4s;will-change:transform}
.btn svg{width:17px;height:17px;transition:transform .45s var(--e-out)}
.btn:hover svg{transform:translateX(5px)}
.btn-gold{background:linear-gradient(120deg,var(--gold),var(--gold-d));color:#fff;box-shadow:0 20px 50px -20px rgba(138,100,39,.55)}
.btn-gold:hover{box-shadow:0 30px 66px -20px rgba(138,100,39,.72)}
.btn-fill{background:var(--jade);color:#fff}.btn-fill:hover{background:var(--jade-d)}
.btn-ghost{border:1.4px solid rgba(255,255,255,.55);color:#fff;backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.14);border-color:#fff}
.btn-line{border:1.4px solid var(--gold);color:var(--gold-d);padding:14px 28px}
.btn-line:hover{background:var(--gold);color:#fff}
.mag-inner{display:inline-flex;align-items:center;gap:11px;pointer-events:none;position:relative;z-index:2}

/* ---------------- NAV ---------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;height:var(--nav-h);display:flex;align-items:center;transition:.5s var(--e-out);border-bottom:1px solid transparent}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%}
.nav.solid{background:rgba(11,22,19,.92);backdrop-filter:blur(18px) saturate(1.4);border-bottom-color:rgba(228,196,128,.18)}
.nav.on-dark:not(.solid) .brand-txt b{color:#fff}
.nav.on-dark:not(.solid) .brand-txt span{color:rgba(255,255,255,.6)}
.nav.on-dark:not(.solid) .nav-links a{color:rgba(255,255,255,.85)}
.brand{display:flex;align-items:center;gap:13px}
.brand img{height:44px}
.brand-txt{display:flex;flex-direction:column;line-height:1.05}
.brand-txt b{font-family:var(--f-display);font-weight:500;font-size:20px;letter-spacing:-.01em;transition:color .4s}
.brand-txt span{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-55);transition:color .4s}
.nav-links{display:flex;gap:34px}
.nav-links a{font-size:14.5px;font-weight:450;position:relative;padding:6px 0;color:var(--ink-70);transition:color .4s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--gold);transition:width .4s var(--e-out)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{padding:12px 24px;font-size:13.5px}
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:210;background:linear-gradient(90deg,var(--gold),var(--jade))}
.burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;gap:6px;align-items:center}
.burger span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.35s var(--e-out)}
.nav.on-dark:not(.solid) .burger span{background:#fff}
.burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:190;background:var(--jade-d);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;transform:translateY(-100%);transition:transform .6s var(--e-out);padding:0 24px}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu a{font-family:var(--f-display);font-size:30px;color:var(--cream);font-weight:340;padding:8px 0}
.mobile-menu a:hover{color:var(--gold-l)}

/* ---------------- PRELOADER (KANDY ESALA PERAHERA THEME) ---------------- */
#preloader{position:fixed;inset:0;z-index:9000;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 20%, #FFFDF7 0%, var(--cream) 55%, var(--cream-3) 100%)}

.pl-center{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding-bottom:60px}
.pl-mark{position:relative;width:170px;height:170px;display:grid;place-items:center;margin-bottom:24px}
.pl-mark img{width:52px;z-index:2;animation:plPulse 2.6s ease-in-out infinite}

/* Arab / Islamic geometric arabesque behind the logo */
.pl-arabesque{position:absolute;inset:0;width:100%;height:100%;color:var(--gold);opacity:.5;z-index:1}
.pl-arabesque .pl-draw{
  stroke-dasharray:432;stroke-dashoffset:432;
  animation:plGeoDraw 2.4s var(--e-out) forwards, plGeoGlow 3.2s ease-in-out 2.4s infinite}
.pl-arabesque .pl-draw-2{animation-delay:.35s,2.4s}
.pl-arabesque .pl-draw-3{stroke-dasharray:540;stroke-dashoffset:540;animation:plGeoDraw 2.6s var(--e-out) .2s forwards}
.pl-arabesque .pl-spin-ring{transform-origin:100px 100px;opacity:.6;animation:plSpinRing 14s linear infinite}
@keyframes plGeoDraw{to{stroke-dashoffset:0}}
@keyframes plGeoGlow{0%,100%{opacity:.5}50%{opacity:.95}}
@keyframes plSpinRing{to{transform:rotate(360deg)}}

.pl-mark-ring{position:absolute;inset:36px;border-radius:50%;border:1.5px solid var(--gold-l);
  animation:plRing 2.4s ease-out infinite}
@keyframes plPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes plRing{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.4);opacity:0}}

.pl-words{text-align:center;overflow:hidden}
.pl-w{display:block;overflow:hidden}
.pl-w b{display:inline-block;font-family:var(--f-display);font-weight:400;font-size:clamp(1.8rem,5vw,3.2rem);
  color:var(--ink);letter-spacing:-.01em;transform:translateY(110%);animation:plRise .9s var(--e-out) .25s forwards}
.pl-w i{display:inline-block;font-family:var(--f-sans);font-style:normal;font-size:11px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold-d);transform:translateY(110%);animation:plRise .9s var(--e-out) .42s forwards;margin-top:10px}
@keyframes plRise{to{transform:translateY(0)}}
.pl-count{font-family:var(--f-display);font-weight:340;font-size:14px;color:var(--ink-55);margin-top:22px;letter-spacing:.1em}
.pl-count sup{color:var(--gold-d)}

/* procession silhouette line along the bottom */
.pl-procession{position:absolute;left:0;right:0;bottom:34px;z-index:2;
  width:100%;height:90px;pointer-events:none;opacity:.9;
  background-image:url('../assets/perahera-line-cropped.jpg');
  background-size:contain;background-position:bottom center;
  background-repeat:repeat-x;mix-blend-mode:multiply}

.pl-bar{position:absolute;bottom:0;left:0;height:3px;width:100%;background:rgba(184,134,59,.14);z-index:4}
.pl-bar i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--gold),var(--gold-l))}
body.loading{overflow:hidden}
body.loaded #preloader{display:none}

@media(max-width:600px){
  .pl-procession{bottom:26px}
}
@media(prefers-reduced-motion:reduce){
  .pl-mark img,.pl-mark-ring,.pl-spin-ring{animation:none!important}
  .pl-arabesque .pl-draw,.pl-arabesque .pl-draw-3{stroke-dashoffset:0;animation:none!important}
}

/* ===============================================================
   HERO
   =============================================================== */
.hero2{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  background:var(--night);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.h2-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.h2-bg img{
  width:100%;height:120%;object-fit:cover;
  transform-origin:center center;transform:scale(1.08);
  will-change:transform;
}

.h2-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(11,22,19,0.75) 0%, rgba(8,44,34,0.65) 45%, rgba(11,22,19,0.92) 100%),
    radial-gradient(ellipse at 20% 30%, rgba(14,75,61,0.4), transparent 60%);
}

.h2-inner{
  position:relative;z-index:4;
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding-top:calc(var(--nav-h) + clamp(30px, 5vh, 60px));
  padding-bottom:clamp(20px, 4vh, 40px);
  padding-left:var(--pad);
  padding-right:var(--pad);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}

.h2-ar{
  font-family:var(--f-ar);
  font-size:clamp(1.1rem, 1.6vw, 1.5rem);
  color:var(--gold-l);
  margin:0 0 12px;
  line-height:1;
}

.h2-title{
  font-family:var(--f-display);
  font-weight:300;
  font-size:clamp(2.4rem, 4.8vw, 4.4rem);
  line-height:1.08;
  letter-spacing:-.025em;
  color:#fff;
  margin:0 0 18px;
  max-width:22ch;
}
.h2-line{display:block}
.h2-line--em{font-style:italic;color:var(--gold-l)}
.h2-title em{font-style:italic;color:var(--gold-l)}

.h2-slogan{
  font-family:var(--f-serif);
  font-size:clamp(1.1rem, 1.6vw, 1.35rem);
  color:rgba(248,241,226,.88);
  margin:0 0 24px;
}
.h2-slogan em{color:#fff;font-style:italic}

.h2-badges{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:28px;
}
.h2-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(228,196,128,.3);
  backdrop-filter:blur(12px);
  border-radius:100px;
  padding:8px 16px;
  color:rgba(248,241,226,.92);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.03em;
  transition:all .3s ease;
}
.h2-badge:hover{
  background:rgba(228,196,128,.2);
  border-color:rgba(228,196,128,.6);
  transform:translateY(-2px);
}
.h2-badge svg{width:16px;height:16px;stroke:var(--gold-l);flex:0 0 auto}

.h2-actions{display:flex;gap:14px;flex-wrap:wrap}
.h2-ghost-btn{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--f-sans);font-weight:500;font-size:14px;letter-spacing:.02em;
  padding:15px 30px;border-radius:100px;
  border:1.4px solid rgba(255,255,255,.35);
  color:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);
  transition:all .3s var(--e-out);
}
.h2-ghost-btn:hover{
  background:rgba(255,255,255,.14);
  border-color:#fff;
  transform:translateY(-2px);
}

.h2-foot{
  position:relative;z-index:4;
  width:100%;max-width:var(--maxw);
  margin:0 auto;padding:18px var(--pad) 24px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  border-top:1px solid rgba(228,196,128,.14);
  background:rgba(11,22,19,.4);backdrop-filter:blur(6px);
}
.h2-foot-text{
  font-family:var(--f-serif);font-size:14px;
  color:rgba(248,241,226,.75);margin:0;max-width:55ch;line-height:1.45;
}
.h2-foot-since{display:flex;align-items:center;gap:10px}
.h2-foot-since b{font-family:var(--f-display);font-size:22px;color:var(--gold-l)}
.h2-foot-since span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(248,241,226,.5)}

@media(max-width:860px){
  .hero2{min-height:auto}
  .h2-title{font-size:clamp(2.2rem, 8vw, 3.4rem)}
  .h2-foot{flex-direction:column;align-items:flex-start}
}

/* ================= MARQUEE ================= */
.marquee{background:var(--jade-d);color:var(--cream);padding:20px 0;overflow:hidden;border-top:1px solid rgba(228,196,128,.2);border-bottom:1px solid rgba(228,196,128,.2)}
.marquee-in{display:flex;width:max-content;will-change:transform}
.marquee-in span{font-family:var(--f-display);font-style:italic;font-size:20px;padding:0 36px;position:relative;opacity:.92}
.marquee-in span::after{content:"✦";position:absolute;right:-8px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--gold-l);font-style:normal}

/* ================= STORY ================= */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.split.rev .split-media{order:-1}
.split-media{position:relative}
.split-media .m-img{position:relative;overflow:hidden;box-shadow:var(--sh-3);
  -webkit-mask:var(--arch) center/100% 100% no-repeat;mask:var(--arch) center/100% 100% no-repeat}
.split-media .m-img img{width:100%;height:100%;min-height:520px;object-fit:cover;will-change:transform}
.split-media .m-key{position:absolute;inset:-14px -14px auto -14px;height:calc(100% + 28px);pointer-events:none;z-index:-1;
  -webkit-mask:var(--arch) center/100% 100% no-repeat;mask:var(--arch) center/100% 100% no-repeat;
  background:linear-gradient(160deg,var(--gold-l),transparent 60%);opacity:.5}
.media-badge{position:absolute;left:22px;bottom:22px;background:rgba(248,241,226,.94);backdrop-filter:blur(6px);padding:14px 20px;border-radius:14px;z-index:2}
.media-badge b{display:block;font-family:var(--f-display);font-size:26px;color:var(--jade);line-height:1}
.media-badge span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-55)}
.quote{font-family:var(--f-display);font-style:italic;font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.4;color:var(--jade);border-left:2px solid var(--gold);padding-left:26px;margin:30px 0}
.quote cite{display:block;font-family:var(--f-sans);font-style:normal;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-35);margin-top:12px}

/* ================= WHY ARAB FAMILIES — PINNED HORIZONTAL TRACK ================= */
.why-horiz-section{
  position:relative;
  background:linear-gradient(180deg, var(--night) 0%, var(--jade-d) 100%);
  color:var(--cream);
  overflow:hidden;
}
.why-horiz-pin{
  position:relative;
  width:100%;
  height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  padding:clamp(60px, 8vh, 90px) 0 clamp(40px, 6vh, 70px);
}
.why-header{
  text-align:center;
  margin-bottom:clamp(20px, 4vh, 40px);
  padding:0 var(--pad);
  position:relative;z-index:10;
}
.why-header .eyebrow{color:var(--gold-l);justify-content:center}
.why-header .eyebrow::before,.why-header .eyebrow::after{background:var(--gold-l)}
.why-h2{
  font-family:var(--f-display);font-weight:300;
  font-size:clamp(1.8rem, 3.8vw, 3.2rem);
  line-height:1.1;color:#fff;margin:0;
}
.why-h2 em{color:var(--gold-l);font-style:italic}
.why-progress-wrap{
  width:200px;height:2px;background:rgba(228,196,128,.18);
  margin:16px auto 0;border-radius:2px;overflow:hidden;
}
.why-progress-bar{
  height:100%;width:100%;background:var(--gold-l);
  transform-origin:left;transform:scaleX(0);
}
.why-track-container{width:100%;overflow:hidden;position:relative;z-index:5}
.why-track{
  display:flex;gap:24px;padding:0 var(--pad);
  width:max-content;will-change:transform;
}
.wcard{
  width:clamp(300px, 26vw, 380px);
  height:clamp(360px, 46vh, 440px);
  flex:0 0 auto;position:relative;
  border-radius:22px;overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
  isolation:isolate;
  transition:transform .5s var(--e-out), box-shadow .5s ease;
  background:var(--jade-d);border:1px solid rgba(228,196,128,.2);
}
.wcard:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 40px 100px -20px rgba(0,0,0,.8);
  border-color:rgba(228,196,128,.5);
}
.wcard-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.wcard-img{
  width:100%;height:115%;object-fit:cover;
  transition:transform 1s var(--e-out);
}
.wcard:hover .wcard-img{transform:scale(1.08)}
.wcard-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg, rgba(8,44,34,.95) 0%, rgba(8,44,34,.5) 50%, rgba(0,0,0,.2) 100%);
}
.wcard-num{
  position:absolute;top:20px;left:22px;z-index:2;
  font-family:var(--f-display);font-size:18px;color:var(--gold-l);opacity:.8;
}
.wcard-body{
  position:absolute;bottom:0;left:0;right:0;z-index:3;
  padding:26px;display:flex;flex-direction:column;gap:8px;
}
.wcard-icon{
  width:42px;height:42px;border-radius:12px;
  background:rgba(248,241,226,.1);border:1px solid rgba(228,196,128,.3);
  backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;margin-bottom:4px;
}
.wcard-icon svg{width:20px;height:20px;stroke:var(--gold-l);fill:none;stroke-width:1.6}
.wcard-body h3{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.2rem, 1.6vw, 1.45rem);color:#fff;margin:0;line-height:1.15;
}
.wcard-body p{font-size:13.5px;color:rgba(248,241,226,.8);margin:0;line-height:1.45}
.wcard-ar{font-family:var(--f-ar);font-size:15px;color:var(--gold-l);margin-top:4px}

/* --- Why: mobile vertical stack (JS horizontal pin is skipped ≤820px) --- */
@media(max-width:820px){
  .why-horiz-section{overflow:visible}
  .why-horiz-pin{height:auto;display:block;overflow:visible;padding:56px 0}
  .why-track-container{overflow:visible}
  .why-track{
    display:flex;flex-direction:column;align-items:center;gap:18px;
    width:100%;padding:0 20px;transform:none !important;
  }
  .wcard{
    width:100%;max-width:420px;height:auto;min-height:300px;flex:0 0 auto;
  }
  .why-progress-wrap{display:none}
}

/* ================================================================
   THE ISLAND — PINNED STACKING SHOWCASE
   ================================================================ */
.island-section{
  position:relative;
  background:var(--cream);
}
.island-pin{
  position:relative;
  width:100%;
  height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  padding:clamp(40px, 6vh, 80px) 0;
}
.island-header{
  width:100%;max-width:var(--maxw);
  margin:0 auto clamp(20px, 4vh, 40px);
  padding:0 var(--pad);
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
}
.island-header .sec-title{margin:0;font-size:clamp(1.8rem, 3.5vw, 3rem)}

.island-cards-container{
  position:relative;
  width:100%;max-width:1200px;
  height:clamp(380px, 54vh, 480px);
  margin:0 auto;
  padding:0 var(--pad);
}
.island-card{
  position:absolute;
  inset:0 var(--pad);
  border-radius:26px;
  overflow:hidden;
  box-shadow:var(--sh-3);
  display:grid;
  grid-template-columns:1.2fr 1fr;
  background:var(--jade-d);
  color:var(--cream);
  will-change:transform, opacity;
  border:1px solid rgba(228,196,128,.2);
}
.island-card-img-wrap{position:relative;overflow:hidden}
.island-card-img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--e-out);
}
.island-card:hover .island-card-img{transform:scale(1.06)}
.island-card-overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg, transparent 60%, rgba(8,44,34,0.8) 100%);
}
.island-card-content{
  padding:clamp(30px, 4vw, 50px);
  display:flex;flex-direction:column;justify-content:center;
  position:relative;
}
.island-card-num{
  font-family:var(--f-display);font-size:24px;color:var(--gold-l);
  margin-bottom:12px;
}
.island-card-tag{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(228,196,128,.7);
  margin-bottom:8px;
}
.island-card-content h3{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.6rem, 2.8vw, 2.4rem);color:#fff;
  margin:0 0 14px;line-height:1.1;
}
.island-card-content p{
  font-family:var(--f-serif);font-size:clamp(1rem, 1.4vw, 1.25rem);
  color:rgba(248,241,226,.85);margin:0;line-height:1.55;
}

@media(max-width:860px){
  .island-cards-container{height:480px}
  .island-card{grid-template-columns:1fr;height:auto}
  .island-card-img-wrap{height:200px}
}

/* --- Island: mobile vertical stack (JS pinned animation is skipped ≤820px) --- */
@media(max-width:820px){
  .island-pin{height:auto;display:block;padding:56px 0}
  .island-header{flex-direction:column;align-items:flex-start;gap:10px}
  .island-cards-container{
    position:static;height:auto;max-width:100%;
    display:flex;flex-direction:column;gap:20px;
  }
  .island-card{
    position:static !important;inset:auto !important;
    transform:none !important;opacity:1 !important;
    grid-template-columns:1fr;height:auto;
  }
  .island-card-img-wrap{height:200px}
  .island-card-overlay{background:linear-gradient(0deg, rgba(8,44,34,.55) 0%, rgba(8,44,34,0) 60%)}
}

/* ================================================================
   SERENDIB — TYPOGRAPHY SCROLL-FILL REVEAL
   ================================================================ */
.serendib-section{
  position:relative;
  min-height:85vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;color:#fff;text-align:center;
  padding:clamp(80px, 12vh, 140px) var(--pad);
}
.serendib-bg{position:absolute;inset:-15% 0;z-index:0}
.serendib-bg img{width:100%;height:130%;object-fit:cover;will-change:transform}
.serendib-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg, rgba(8,44,34,.92) 0%, rgba(8,44,34,.7) 50%, rgba(8,44,34,.92) 100%);
}
.serendib-container{
  position:relative;z-index:2;
  max-width:920px;margin:0 auto;
}
.serendib-ar{
  font-family:var(--f-ar);
  font-size:clamp(1.4rem, 2.8vw, 2.2rem);
  color:var(--gold-l);
  margin:0 0 16px;
}
.serendib-quote-icon{
  font-family:var(--f-display);
  font-size:clamp(3.5rem, 6vw, 5rem);
  line-height:.4;
  color:var(--gold-l);
  opacity:.6;
  margin-bottom:12px;
}
.serendib-headline{
  font-family:var(--f-display);font-style:italic;font-weight:340;
  font-size:clamp(2rem, 4.2vw, 3.8rem);
  line-height:1.18;color:rgba(248,241,226,.25);
  margin:0 0 24px;
  transition:color .3s ease;
}
.serendib-headline.active{
  color:var(--cream);
  text-shadow:0 0 30px rgba(228,196,128,0.25);
}
.serendib-body{
  font-family:var(--f-serif);
  font-size:clamp(1.1rem, 1.6vw, 1.35rem);
  color:rgba(248,241,226,.85);
  max-width:62ch;margin:0 auto 30px;
  line-height:1.6;
}
.serendib-body em{color:var(--gold-l);font-style:normal;font-weight:500}

.serendib-badge{
  display:inline-flex;align-items:center;gap:16px;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-l);
}
.serendib-line{width:36px;height:1px;background:var(--gold-l);opacity:.6}

/* ================================================================
   WHAT WE ARRANGE — DUAL-ROW OPPOSITE MARQUEE GALLERY (INSPIRED BY YATHAMA-PI "LIFE, HAPPENING.")
   ================================================================ */
.svc-marquee-section{
  position:relative;
  background:var(--night);
  color:#fff;
  padding:clamp(80px, 10vh, 130px) 0;
  overflow:hidden;
}

.svc-marquee-header{
  width:100%;max-width:var(--maxw);
  margin:0 auto 40px;
  padding:0 var(--pad);
  text-align:center;
}
.svc-marquee-header .sec-title{color:#fff}

.svc-marquee-container{
  display:flex;
  flex-direction:column;
  gap:24px;
  width:100%;
  overflow:hidden;
}

.svc-marquee-row{
  width:100%;
  overflow:hidden;
  display:flex;
}

.svc-marquee-track{
  display:flex;
  gap:24px;
  width:max-content;
  will-change:transform;
}

.svc-mcard{
  width:clamp(280px, 24vw, 360px);
  height:clamp(180px, 26vh, 230px);
  border-radius:18px;
  overflow:hidden;
  position:relative;
  box-shadow:0 14px 40px -10px rgba(0,0,0,0.6);
  flex:0 0 auto;
  transition:transform 0.5s var(--e-out), box-shadow 0.5s ease;
  border:1px solid rgba(228,196,128,.18);
}
.svc-mcard:hover{
  transform:scale(1.05);
  box-shadow:0 24px 60px -15px rgba(0,0,0,0.8);
  border-color:rgba(228,196,128,.5);
}

.svc-mcard img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 0.8s var(--e-out);
}
.svc-mcard:hover img{transform:scale(1.1)}

.svc-mcard-overlay{
  position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(8,44,34,0.92) 0%, rgba(0,0,0,0.15) 60%);
}

.svc-mcard-title{
  position:absolute;bottom:18px;left:20px;right:20px;
  font-family:var(--f-sans);font-weight:600;
  font-size:12.5px;letter-spacing:0.12em;
  text-transform:uppercase;color:#fff;line-height:1.2;
  text-shadow:0 2px 6px rgba(0,0,0,0.6);
}

/* ================================================================
   STATS — MINIMALIST SEAMLESS BACKGROUND STRIP (NO CARDS, 100% LANDING PAGE BACKGROUND)
   ================================================================ */
.stats-minimal-section{
  position:relative;
  background:var(--cream);
  color:var(--ink);
  padding:70px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.stats-minimal-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
  text-align:center;
}

.stat-item{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:0 12px;
}

.stat-item-dot{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--gold);
  margin-bottom:14px;
  opacity:0.8;
  transition:transform .4s ease;
}
.stat-item:hover .stat-item-dot{
  transform:scale(1.6);
  background:var(--gold-d);
}

.stat-item b{
  font-family:var(--f-display);
  font-weight:340;
  font-size:clamp(2.6rem, 5vw, 4.2rem);
  color:var(--jade);
  line-height:1;
  margin-bottom:8px;
}

.stat-item span{
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-55);
}

@media(max-width:800px){
  .stats-minimal-grid{grid-template-columns:repeat(2, 1fr);gap:32px 16px}
}
@media(max-width:480px){
  .stats-minimal-grid{grid-template-columns:1fr;gap:28px}
}

/* ================= PACKAGES ================= */
.pkg-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center;padding:clamp(40px,6vw,80px) 0;border-bottom:1px solid var(--line)}
.pkg-row:last-child{border-bottom:0}
.pkg-row.rev .pkg-media{order:-1}
.pkg-media{position:relative;border-radius:24px;overflow:hidden;box-shadow:var(--sh-2)}
.pkg-media img{width:100%;height:clamp(320px,42vw,480px);object-fit:cover;will-change:transform}
.pkg-media .nights{position:absolute;top:18px;left:18px;background:rgba(248,241,226,.94);padding:8px 16px;border-radius:100px;font-size:12px;font-weight:600;color:var(--jade);letter-spacing:.05em;z-index:2}
.pkg-info .idx{font-family:var(--f-display);font-size:15px;color:var(--gold-d);letter-spacing:.1em}
.pkg-info h3{font-family:var(--f-display);font-weight:400;font-size:clamp(1.8rem,3.4vw,2.8rem);margin:10px 0 16px;letter-spacing:-.015em}
.pkg-info p{color:var(--ink-55);font-size:16px;margin:0 0 26px;max-width:48ch}
.pkg-info .meta{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.pkg-info .price b{display:block;font-family:var(--f-display);font-size:20px;color:var(--jade)}
.pkg-info .price span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-35)}
@media(max-width:800px){.pkg-row,.pkg-row.rev .pkg-media{grid-template-columns:1fr;order:0}.pkg-row.rev .pkg-media{order:-1}}

/* ================= GCC INK BAND ================= */
.section.ink{background:linear-gradient(160deg,var(--jade-d),var(--night));color:var(--cream)}
.section.ink .sec-title,.section.ink .lead{color:var(--cream)}
.section.ink .sec-title em{color:var(--gold-l)}
.section.ink .lead{color:rgba(248,241,226,.8)}
.section.ink .eyebrow{color:var(--gold-l)}.section.ink .eyebrow::before{background:var(--gold-l)}
.section.ink .split-media .m-key{background:linear-gradient(160deg,var(--gold-l),transparent 60%);opacity:.4}
.gcc{list-style:none;padding:0;margin:26px 0;display:grid;grid-template-columns:1fr 1fr;gap:12px 26px}
.gcc li{font-family:var(--f-serif);font-size:17px;color:rgba(248,241,226,.9);padding-left:24px;position:relative}
.gcc li::before{content:"✦";position:absolute;left:0;color:var(--gold-l);font-size:11px;top:5px}
.flight-map{margin:30px 0}.flight-map svg{width:100%;height:auto;overflow:visible}
.flight-path{fill:none;stroke:var(--gold-l);stroke-width:1.4;stroke-dasharray:4 5;opacity:.6}
.flight-city circle{fill:var(--gold-l)}.flight-city.dest circle{fill:#fff}
.flight-city text{font-family:var(--f-sans);font-size:9px;fill:rgba(248,241,226,.8);letter-spacing:.08em}

/* ================= GUEST EXPERIENCES ================= */
.tst{position:relative;background:linear-gradient(160deg,var(--jade),var(--jade-d));color:var(--cream);
  padding:clamp(80px,11vw,150px) 0;overflow:hidden}
.tst-kandy{position:absolute;inset:0;z-index:0;opacity:.13;pointer-events:none;
  background:center/200px repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23E4C480' stroke-width='1.3'%3E%3Ccircle cx='100' cy='100' r='11'/%3E%3Cg%3E%3Cpath d='M100 89 C88 74 88 52 100 40 C112 52 112 74 100 89'/%3E%3Cpath d='M100 111 C88 126 88 148 100 160 C112 148 112 126 100 111'/%3E%3Cpath d='M89 100 C74 88 52 88 40 100 C52 112 74 112 89 100'/%3E%3Cpath d='M111 100 C126 88 148 88 160 100 C148 112 126 112 111 100'/%3E%3Cpath d='M92 92 C80 80 62 70 52 66 C56 76 66 94 78 106 C86 100 90 96 92 92'/%3E%3Cpath d='M108 92 C120 80 138 70 148 66 C144 76 134 94 122 106 C114 100 110 96 108 92'/%3E%3Cpath d='M92 108 C80 120 70 138 66 148 C76 144 94 134 106 122 C100 114 96 110 92 108'/%3E%3Cpath d='M108 108 C120 120 130 138 134 148 C124 144 106 134 94 122 C100 114 104 110 108 108'/%3E%3C/g%3E%3Ccircle cx='100' cy='100' r='4' fill='%23E4C480' stroke='none'/%3E%3Ccircle cx='0' cy='0' r='4'/%3E%3Ccircle cx='200' cy='0' r='4'/%3E%3Ccircle cx='200' cy='200' r='4'/%3E%3C/g%3E%3C/svg%3E")}
.tst .tst-head{position:relative;z-index:2;text-align:center;max-width:640px;margin:0 auto 56px;padding:0 var(--pad)}
.tst-head .eyebrow{justify-content:center;color:var(--gold-l)}.tst-head .eyebrow::before,.tst-head .eyebrow::after{background:var(--gold-l)}
.tst-head .sec-title{color:#fff}.tst-head .sec-title em{color:var(--gold-l)}
.tst-marquee{position:relative;z-index:2;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.tst-track{display:flex;gap:24px;width:max-content;padding:6px 0}
.tcard{width:clamp(320px,40vw,440px);flex:0 0 auto;background:rgba(248,241,226,.055);border:1px solid rgba(228,196,128,.22);
  border-radius:22px;padding:36px 34px;backdrop-filter:blur(4px);display:flex;flex-direction:column}
.tcard .mark{font-family:var(--f-display);font-size:64px;color:var(--gold-l);line-height:.4;opacity:.5;margin-bottom:16px}
.tcard p{font-family:var(--f-serif);font-size:clamp(1.15rem,1.5vw,1.4rem);line-height:1.5;color:rgba(248,241,226,.94);margin:0 0 26px;font-style:italic}
.tcard .who{display:flex;align-items:center;gap:14px;margin-top:auto}
.tcard .av{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-d));display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:20px;color:#fff;flex:0 0 auto}
.tcard .who b{display:block;font-family:var(--f-sans);font-weight:600;font-size:14.5px;color:#fff}
.tcard .who span{font-size:12.5px;color:rgba(248,241,226,.62)}

/* ================= CTA ================= */
.cta{position:relative;background:linear-gradient(160deg,var(--gold-d),var(--ruby-d) 130%);color:var(--cream);text-align:center;padding:clamp(90px,11vw,150px) 0;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;opacity:.16;background:center/150px repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cg fill='none' stroke='%23F8F1E2' stroke-width='1'%3E%3Cpath d='M50 8 L61 39 L92 50 L61 61 L50 92 L39 61 L8 50 L39 39 Z'/%3E%3Crect x='29' y='29' width='42' height='42' transform='rotate(45 50 50)'/%3E%3Crect x='29' y='29' width='42' height='42'/%3E%3C/g%3E%3C/svg%3E")}
.cta .wrap{position:relative;z-index:2}
.cta h2{font-family:var(--f-display);font-weight:340;font-size:clamp(2.3rem,5vw,4.2rem);line-height:1.04;margin:0 0 12px}
.cta h2 em{font-style:italic;color:var(--gold-l)}
.cta-slogan{font-family:var(--f-display);font-style:italic;font-weight:340;font-size:clamp(1.3rem,2.6vw,2rem);color:var(--gold-l);margin:0 0 18px}
.cta-slogan em{color:#fff;font-style:italic}
.cta p{font-family:var(--f-serif);font-size:clamp(1.15rem,1.7vw,1.4rem);color:rgba(248,241,226,.85);max-width:56ch;margin:0 auto 34px}
.cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.hero-ar{font-family:var(--f-ar);font-size:clamp(1.2rem,1.9vw,1.7rem);color:var(--gold-l);margin:0 0 18px}

/* ================= FOOTER ================= */
.foot{background:var(--night);color:rgba(248,241,226,.75);position:relative;overflow:hidden;padding-top:clamp(60px,8vw,90px)}
.foot-top{position:relative;z-index:2;display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:40px;padding-bottom:50px;border-bottom:1px solid rgba(228,196,128,.15)}
.foot .brand-txt b{color:var(--cream)}.foot .brand-txt span{color:rgba(248,241,226,.5)}
.foot-top>div>p{font-size:14.5px;line-height:1.7;margin:20px 0 0;max-width:40ch}
.foot h4{font-family:var(--f-sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-l);margin:0 0 18px}
.foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.foot ul a,.foot ul li{font-size:14.5px;color:rgba(248,241,226,.7);transition:color .3s}
.foot ul a{position:relative;display:inline-block}
.foot ul a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--gold-l);transition:width .35s var(--e-out)}
.foot ul a:hover{color:var(--gold-l)}.foot ul a:hover::after{width:100%}
.foot-contact li{display:flex;gap:10px;align-items:flex-start}
.foot-contact svg{width:16px;height:16px;fill:none;stroke:var(--gold-l);stroke-width:1.6;flex:0 0 auto;margin-top:4px}
.socials{display:flex;gap:12px;margin-top:22px}
.socials a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(228,196,128,.25);display:flex;align-items:center;justify-content:center;transition:.4s var(--e-out)}
.socials svg{width:18px;height:18px;fill:rgba(248,241,226,.7)}
.socials a:hover{background:var(--gold);border-color:var(--gold);transform:translateY(-3px)}.socials a:hover svg{fill:#fff}
.foot-bot{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:26px 0 30px;font-size:13px;color:rgba(248,241,226,.5)}
.foot-bot .foot-credit{color:var(--gold-l);font-size:12.5px;letter-spacing:.03em;text-decoration:none;transition:color .3s}
.foot-bot .foot-credit:hover{color:#fff;text-decoration:underline}
.foot-bot .to-top{display:inline-flex;align-items:center;gap:9px;color:rgba(248,241,226,.7);font-size:12px;letter-spacing:.14em;text-transform:uppercase;transition:color .3s}
.foot-bot .to-top:hover{color:var(--gold-l)}
.foot-bot .to-top span{width:34px;height:34px;border-radius:50%;border:1px solid rgba(228,196,128,.3);display:flex;align-items:center;justify-content:center;transition:.4s var(--e-out)}
.foot-bot .to-top:hover span{background:var(--gold);border-color:var(--gold)}
.foot-bot .to-top svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.foot-word{position:absolute;bottom:-3%;left:50%;transform:translateX(-50%);font-family:var(--f-display);font-style:italic;font-size:clamp(80px,18vw,220px);color:rgba(228,196,128,.05);pointer-events:none;white-space:nowrap;z-index:0}
@media(max-width:900px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-top{grid-template-columns:1fr;gap:34px}.foot-bot{justify-content:center;text-align:center}}

.wa{position:fixed;right:24px;bottom:24px;z-index:150;width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 34px -10px rgba(37,211,102,.6);transition:transform .4s var(--e-out)}
.wa svg{width:30px;height:30px;fill:#fff}.wa:hover{transform:scale(1.1) rotate(6deg)}

/* ---------- global fallbacks ---------- */
.no-gsap .lines .line>span{transform:none}
.no-gsap .reveal{opacity:1;transform:none}
.no-gsap .clip-img{clip-path:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  .lines .line>span{transform:none}.reveal{opacity:1;transform:none}.clip-img{clip-path:none}
}
@media(max-width:860px){.nav-links,.nav-cta{display:none}.burger{display:flex}
  .split,.split.rev .split-media{grid-template-columns:1fr;order:0}.split.rev .split-media{order:-1}.gcc{grid-template-columns:1fr}
  .split-media .m-img img{min-height:420px}}

/* ============================================================
   LIGHT + WARM THEME — ivory · emerald · antique gold
   Arab × Sri Lankan heritage. High-contrast, all text legible.
   ============================================================ */

/* accent helpers: emerald rgba = 31,110,82 · gold rgba = 180,135,60 */

/* --- NAV (over the now-light hero, text must be dark) --- */
.nav.solid{background:rgba(250,245,234,.9);backdrop-filter:blur(18px) saturate(1.3);border-bottom-color:var(--line)}
.nav.on-dark:not(.solid) .brand-txt b{color:var(--ink)}
.nav.on-dark:not(.solid) .brand-txt span{color:var(--ink-55)}
.nav.on-dark:not(.solid) .nav-links a{color:var(--ink-70)}
.nav.on-dark:not(.solid) .burger span{background:var(--ink)}

/* --- MENUS --- */
.mobile-menu{background:var(--jade-d)}

/* --- MARQUEE (bright antique-gold band, dark text) --- */
.marquee{background:linear-gradient(90deg,var(--gold),var(--gold-l));color:var(--ink);border-top-color:rgba(58,43,27,.18);border-bottom-color:rgba(58,43,27,.18)}
.marquee-in span{opacity:1}
.marquee-in span::after{color:var(--jade)}

/* --- HERO — bright ivory wash, dark text --- */
.hero2{background:var(--cream)}
.h2-veil{
  background:
    linear-gradient(100deg, rgba(250,245,234,.95) 0%, rgba(250,245,234,.66) 40%, rgba(240,231,211,.3) 74%, rgba(250,245,234,.14) 100%),
    linear-gradient(0deg, rgba(250,245,234,.6), transparent 32%);
}
.h2-ar{color:var(--gold-d)}
.h2-title{color:var(--ink);text-shadow:0 1px 24px rgba(250,245,234,.65)}
.h2-title em,.h2-line--em{color:var(--jade)}
.h2-slogan{color:var(--ink-70)}
.h2-slogan em{color:var(--ink)}
.h2-badge{background:rgba(255,255,255,.66);border-color:rgba(176,86,47,.28);color:var(--ink-70)}
.h2-badge svg{stroke:var(--jade)}
.h2-badge:hover{background:rgba(176,86,47,.12);border-color:var(--jade)}
.h2-ghost-btn{border-color:rgba(176,86,47,.4);color:var(--jade)}
.h2-ghost-btn:hover{background:rgba(176,86,47,.1);border-color:var(--jade);color:var(--jade)}
.h2-foot{background:rgba(250,245,234,.58);border-top-color:var(--line)}
.h2-foot-text{color:var(--ink-70)}
.h2-foot-since b{color:var(--jade)}
.h2-foot-since span{color:var(--ink-55)}

/* --- WHY ARAB FAMILIES (warm sand section; photo cards keep scrim) --- */
.why-horiz-section{background:linear-gradient(180deg,#F5EDDA 0%,#ECE1C7 100%);color:var(--ink)}
.why-header .eyebrow{color:var(--gold-d)}
.why-header .eyebrow::before,.why-header .eyebrow::after{background:var(--gold)}
.why-h2{color:var(--ink)}
.why-h2 em{color:var(--jade)}
.why-progress-wrap{background:rgba(176,86,47,.18)}
.why-progress-bar{background:var(--jade)}
.wcard{background:var(--jade-d);border-color:rgba(176,86,47,.2)}

/* --- THE ISLAND — light card with dark text --- */
.island-section{background:var(--cream)}
.island-card{background:var(--paper);border-color:var(--line);color:var(--ink)}
.island-card-overlay{background:linear-gradient(90deg, transparent 58%, rgba(255,255,255,.55) 100%)}
.island-card-num{color:var(--jade)}
.island-card-tag{color:var(--gold-d)}
.island-card-content h3{color:var(--ink)}
.island-card-content p{color:var(--ink-70)}

/* --- SERENDIB — warm overlay, dark scroll-fill text --- */
.serendib-overlay{background:linear-gradient(0deg, rgba(250,245,234,.95) 0%, rgba(244,236,218,.82) 50%, rgba(250,245,234,.95) 100%)}
.serendib-ar{color:var(--gold-d)}
.serendib-quote-icon{color:var(--gold)}
.serendib-headline{color:rgba(28,51,43,.24)}
.serendib-headline.active{color:var(--ink);text-shadow:0 0 30px rgba(180,135,60,.22)}
.serendib-body{color:var(--ink-70)}
.serendib-body em{color:var(--jade)}
.serendib-badge{color:var(--gold-d)}
.serendib-line{background:var(--gold)}

/* --- WHAT WE ARRANGE (warm ivory section; photo cards keep scrim) --- */
.svc-marquee-section{background:linear-gradient(180deg,#FAF5EA 0%,#F0E7D3 100%);color:var(--ink)}
.svc-marquee-header .sec-title{color:var(--ink)}
.svc-marquee-header .sec-title em{color:var(--jade)}

/* --- GCC / .ink band — soft sand → soft green --- */
.section.ink{background:linear-gradient(160deg,#F3E9D3,#EBDCBF);color:var(--ink)}
.section.ink .sec-title,.section.ink .lead{color:var(--ink)}
.section.ink .sec-title em{color:var(--jade)}
.section.ink .lead{color:var(--ink-70)}
.section.ink .eyebrow{color:var(--gold-d)}.section.ink .eyebrow::before{background:var(--gold)}
.gcc li{color:var(--ink-70)}
.gcc li::before{color:var(--gold)}
.flight-path{stroke:var(--jade)}
.flight-city circle{fill:var(--jade)}.flight-city.dest circle{fill:var(--gold-d)}
.flight-city text{fill:var(--ink-55)}
.section.ink .quote{color:var(--jade)!important;border-left-color:var(--gold)!important}
.section.ink .quote cite{color:var(--ink-35)!important}

/* --- GUEST EXPERIENCES — soft ivory → sand --- */
.tst{background:linear-gradient(160deg,#F7EFDB 0%,#F1E3C6 100%);color:var(--ink)}
.tst-kandy{opacity:.28;background:center/180px repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23B0562F' stroke-width='1.7'%3E%3Ccircle cx='100' cy='100' r='11'/%3E%3Cpath d='M100 89 C88 74 88 52 100 40 C112 52 112 74 100 89'/%3E%3Cpath d='M100 111 C88 126 88 148 100 160 C112 148 112 126 100 111'/%3E%3Cpath d='M89 100 C74 88 52 88 40 100 C52 112 74 112 89 100'/%3E%3Cpath d='M111 100 C126 88 148 88 160 100 C148 112 126 112 111 100'/%3E%3Cpath d='M92 92 C80 80 62 70 52 66 C56 76 66 94 78 106 C86 100 90 96 92 92'/%3E%3Cpath d='M108 92 C120 80 138 70 148 66 C144 76 134 94 122 106 C114 100 110 96 108 92'/%3E%3Cpath d='M92 108 C80 120 70 138 66 148 C76 144 94 134 106 122 C100 114 96 110 92 108'/%3E%3Cpath d='M108 108 C120 120 130 138 134 148 C124 144 106 134 94 122 C100 114 104 110 108 108'/%3E%3Ccircle cx='100' cy='100' r='4' fill='%23B0562F' stroke='none'/%3E%3C/g%3E%3C/svg%3E")}
.tst-head .sec-title{color:var(--ink)}.tst-head .sec-title em{color:var(--jade)}
.tst-head .eyebrow{color:var(--gold-d)}.tst-head .eyebrow::before,.tst-head .eyebrow::after{background:var(--gold)}
.tcard{background:rgba(255,255,255,.7);border-color:rgba(176,86,47,.2)}
.tcard .mark{color:var(--gold)}
.tcard p{color:var(--ink-70)}
.tcard .who b{color:var(--ink)}
.tcard .who span{color:var(--ink-55)}
.tcard .av{background:linear-gradient(135deg,var(--jade),var(--jade-l))}

/* --- CTA (screenshot 2) — warm antique-gold band, dark text --- */
.cta{background:linear-gradient(150deg,#EAD9A8 0%,#E6CE91 100%);color:var(--ink)}
.cta::before{opacity:.16;background:center/150px repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cg fill='none' stroke='%23123D2E' stroke-width='1'%3E%3Cpath d='M50 8 L61 39 L92 50 L61 61 L50 92 L39 61 L8 50 L39 39 Z'/%3E%3Crect x='29' y='29' width='42' height='42' transform='rotate(45 50 50)'/%3E%3Crect x='29' y='29' width='42' height='42'/%3E%3C/g%3E%3C/svg%3E")}
.cta h2{color:var(--ink)}
.cta h2 em{color:var(--jade)}
.cta-slogan{color:var(--jade)}
.cta-slogan em{color:var(--ink)}
.cta p{color:var(--ink-70)}
.cta .hero-ar{color:var(--gold-d)}
.cta .btn-ghost{border-color:rgba(28,51,43,.4);color:var(--ink);backdrop-filter:none}
.cta .btn-ghost:hover{background:rgba(28,51,43,.08);border-color:var(--ink);color:var(--ink)}

/* --- FOOTER — light warm sand, dark text --- */
.foot{background:linear-gradient(180deg,#F1E6CF,#EADCBE);color:var(--ink-70)}
.foot-top{border-bottom-color:var(--line)}
.foot .brand-txt b{color:var(--ink)}.foot .brand-txt span{color:var(--ink-55)}
.foot-top>div>p{color:var(--ink-70)}
.foot h4{color:var(--gold-d)}
.foot ul a,.foot ul li{color:var(--ink-70)}
.foot ul a:hover{color:var(--jade)}
.foot ul a::after{background:var(--jade)}
.foot-contact svg{stroke:var(--gold-d)}
.socials a{border-color:var(--line)}
.socials svg{fill:var(--ink-55)}
.socials a:hover{background:var(--gold);border-color:var(--gold)}.socials a:hover svg{fill:#fff}
.foot-bot{color:var(--ink-55)}
.foot-bot .foot-credit{color:var(--gold-d)}
.foot-bot .foot-credit:hover{color:var(--ink)}
.foot-bot .to-top{color:var(--ink-70)}
.foot-bot .to-top span{border-color:var(--line)}
.foot-bot .to-top:hover span{background:var(--gold);border-color:var(--gold)}
.foot-word{color:rgba(58,43,27,.05)}

/* --- misc --- */
::selection{background:var(--jade);color:#fff}
.scroll-progress{background:linear-gradient(90deg,var(--gold),var(--jade))}

/* ============================================================
   SUB-PAGES — about · destinations · packages · contact
   ============================================================ */
.subhero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--cream-3),var(--cream));
  padding:calc(var(--nav-h) + clamp(46px,8vw,96px)) 0 clamp(44px,6vw,88px)}
.subhero::before{content:"";position:absolute;top:-16%;right:-6%;width:440px;height:440px;border-radius:50%;
  background:radial-gradient(circle,rgba(180,135,60,.16),transparent 62%);pointer-events:none}
.subhero .wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(34px,5vw,72px);align-items:center;position:relative;z-index:2}
.subhero-copy h1{font-family:var(--f-display);font-weight:330;font-size:clamp(2.6rem,5.2vw,4.5rem);line-height:1.02;letter-spacing:-.02em;margin:0 0 18px;color:var(--ink)}
.subhero-copy h1 em{font-style:italic;color:var(--jade)}
.subhero-copy .lead{margin-bottom:0}
.crumb{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55);margin-top:26px}
.crumb a{color:var(--gold-d)}.crumb a:hover{color:var(--jade)}
.subhero-media{position:relative}
.subhero-media .m-img{position:relative;overflow:hidden;box-shadow:var(--sh-3);
  -webkit-mask:var(--arch) center/100% 100% no-repeat;mask:var(--arch) center/100% 100% no-repeat}
.subhero-media .m-img img{width:100%;height:clamp(360px,44vw,520px);object-fit:cover}
.subhero-media .m-key{position:absolute;inset:-14px -14px auto -14px;height:calc(100% + 28px);z-index:-1;
  -webkit-mask:var(--arch) center/100% 100% no-repeat;mask:var(--arch) center/100% 100% no-repeat;
  background:linear-gradient(160deg,var(--gold-l),transparent 60%);opacity:.5}
@media(max-width:860px){.subhero .wrap{grid-template-columns:1fr}.subhero-media{order:-1}}

/* value / feature cards (about) */
.value-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.vcard{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:34px;transition:transform .5s var(--e-out),box-shadow .5s,border-color .5s;position:relative;overflow:hidden}
.vcard::before{content:"";position:absolute;top:-30px;right:-30px;width:100px;height:100px;opacity:.5;transition:transform .8s var(--e-out);
  background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23E6D6B8' stroke-width='1'%3E%3Cpath d='M50 8 L61 39 L92 50 L61 61 L50 92 L39 61 L8 50 L39 39 Z'/%3E%3C/g%3E%3C/svg%3E")}
.vcard:hover{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:var(--gold-l)}
.vcard:hover::before{transform:rotate(45deg)}
.vcard .ico{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--jade),var(--jade-l));display:flex;align-items:center;justify-content:center;margin-bottom:20px;position:relative;z-index:1}
.vcard .ico svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.6}
.vcard h3{font-family:var(--f-display);font-weight:500;font-size:1.35rem;margin:0 0 10px;color:var(--ink);position:relative;z-index:1}
.vcard p{font-size:15px;color:var(--ink-70);margin:0;line-height:1.6;position:relative;z-index:1}
@media(max-width:640px){.value-grid{grid-template-columns:1fr}}

/* destination cards grid */
.dest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dcard{position:relative;border-radius:20px;overflow:hidden;height:clamp(300px,32vw,400px);box-shadow:var(--sh-2);isolation:isolate;cursor:pointer;grid-column:span 1}
.dcard.wide{grid-column:span 2}
.dcard img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e-out)}
.dcard:hover img{transform:scale(1.07)}
.dcard::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(30,22,12,.92),rgba(30,22,12,.2) 55%,transparent)}
.dcard .dbody{position:absolute;inset:auto 0 0 0;z-index:2;padding:26px;color:#fff}
.dcard .tag{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-l)}
.dcard h3{font-family:var(--f-display);font-weight:400;font-size:clamp(1.4rem,2vw,1.9rem);margin:8px 0 0;color:#fff}
.dcard p{font-size:14px;color:rgba(255,255,255,.86);margin:0;max-height:0;opacity:0;overflow:hidden;transition:max-height .55s var(--e-out),opacity .45s,margin .45s}
.dcard:hover p{max-height:130px;opacity:1;margin-top:8px}
@media(max-width:900px){.dest-grid{grid-template-columns:repeat(2,1fr)}.dcard.wide{grid-column:span 2}.dcard p{max-height:130px;opacity:1;margin-top:8px}}
@media(max-width:560px){.dest-grid{grid-template-columns:1fr}.dcard.wide{grid-column:span 1}}

/* packages extras */
.pkg-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.pkg-tags span{font-size:12px;padding:6px 14px;border-radius:100px;background:var(--cream-2);color:var(--gold-d);border:1px solid var(--line)}
.pkg-includes{list-style:none;padding:0;margin:0 0 26px;display:grid;grid-template-columns:1fr 1fr;gap:9px 20px}
.pkg-includes li{font-size:14.5px;color:var(--ink-70);padding-left:26px;position:relative}
.pkg-includes li::before{content:"";position:absolute;left:2px;top:6px;width:11px;height:7px;border-left:2px solid var(--jade);border-bottom:2px solid var(--jade);transform:rotate(-45deg)}
@media(max-width:560px){.pkg-includes{grid-template-columns:1fr}}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,64px);align-items:start}
.form{display:grid;gap:18px}
.form .frow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-55);font-weight:500}
.field input,.field select,.field textarea{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-family:var(--f-sans);font-size:15px;color:var(--ink);outline:none;transition:border-color .3s,box-shadow .3s;width:100%}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-35)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--jade);box-shadow:0 0 0 3px rgba(176,86,47,.12)}
.field textarea{min-height:140px;resize:vertical}
.form>button{justify-self:start;margin-top:4px}
.info-card{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:clamp(28px,3vw,40px);box-shadow:var(--sh-2)}
.info-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:22px}
.info-list li{display:flex;gap:16px;align-items:flex-start}
.info-list .ico{width:46px;height:46px;border-radius:12px;background:var(--cream-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.info-list .ico svg{width:20px;height:20px;stroke:var(--jade);fill:none;stroke-width:1.7}
.info-list b{display:block;font-family:var(--f-sans);font-weight:600;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-55);margin-bottom:4px}
.info-list a,.info-list span{font-family:var(--f-display);font-size:1.18rem;color:var(--ink);line-height:1.3}
.info-list a:hover{color:var(--jade)}
.map-wrap{margin-top:20px;border-radius:22px;overflow:hidden;height:280px;border:1px solid var(--line);box-shadow:var(--sh-2)}
.map-wrap iframe{width:100%;height:100%;border:0;display:block}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}.form .frow{grid-template-columns:1fr}}

/* section intro helper */
.sec-intro{max-width:660px;margin:0 0 clamp(40px,5vw,60px)}
.sec-intro.c{margin-left:auto;margin-right:auto;text-align:center}
.sec-intro.c .eyebrow{justify-content:center}.sec-intro.c .eyebrow::after{content:"";width:30px;height:1px;background:var(--gold)}

/* subhero CSS-only entrance (safe: reduce-motion just shows content) */
.subhero-copy>*{animation:subrise .9s var(--e-out) both}
.subhero-copy>*:nth-child(2){animation-delay:.08s}
.subhero-copy>*:nth-child(3){animation-delay:.16s}
.subhero-copy>*:nth-child(4){animation-delay:.24s}
.subhero-media{animation:subfade 1.1s var(--e-out) .12s both}
@keyframes subrise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes subfade{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:none}}

/* ============================================================
   SRI LANKA TOURS — duration packages (priced cards)
   ============================================================ */
.tours{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tourcard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--sh-2);transition:transform .5s var(--e-out),box-shadow .5s,border-color .5s}
.tourcard:hover{transform:translateY(-8px);box-shadow:var(--sh-3);border-color:var(--gold-l)}
.tourcard-pic{position:relative;height:190px;overflow:hidden}
.tourcard-pic img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e-out)}
.tourcard:hover .tourcard-pic img{transform:scale(1.06)}
.tourcard-body{display:flex;flex-direction:column;flex:1;padding:22px}
.tourcard-body h3{font-family:var(--f-display);font-weight:500;font-size:1.32rem;color:var(--ink);margin:0 0 9px;letter-spacing:-.01em}
.tourcard-desc{font-size:13.5px;color:var(--ink-55);margin:0 0 16px;line-height:1.5}
.tourcard-price{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tourcard-price .pp{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-70)}
.tourcard-price .pp svg{width:16px;height:16px;stroke:var(--gold-d);fill:none;stroke-width:1.7;flex:0 0 auto}
.tourcard-price .amt{display:flex;align-items:baseline;gap:7px;text-align:right}
.tourcard-price .amt small{font-size:10px;line-height:1.1;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-35);max-width:38px;text-align:right}
.tourcard-price .amt b{font-family:var(--f-display);font-weight:500;font-size:1.18rem;color:var(--jade);white-space:nowrap}
.tourcard ul{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:10px}
.tourcard ul li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--ink-70)}
.tourcard ul li svg{width:16px;height:16px;stroke:var(--gold);fill:none;stroke-width:1.7;flex:0 0 auto;margin-top:2px}
.tourcard-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:20px}
.tourcard-month{display:flex;gap:10px;align-items:center}
.tourcard-month>svg{width:26px;height:26px;stroke:var(--gold-d);fill:none;stroke-width:1.5;flex:0 0 auto}
.tourcard-month span{display:block;font-size:11px;color:var(--ink-55)}
.tourcard-month b{display:block;font-size:13px;color:var(--ink);font-weight:600}
.tourcard-go{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,var(--jade),var(--jade-l));display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:transform .4s var(--e-out),box-shadow .4s}
.tourcard-go:hover{transform:translateY(-3px);box-shadow:0 12px 24px -8px rgba(176,86,47,.5)}
.tourcard-go svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2}
@media(max-width:1100px){.tours{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tours{grid-template-columns:1fr}}

/* ================================================================
   EXPERT SYSTEM TRIP PLANNER STYLING
   ================================================================ */
.privacy-note{display:inline-flex;gap:10px;align-items:center;margin-top:14px;padding:10px 18px;border:1px solid var(--line);border-radius:100px;color:var(--jade-d);font-size:12.5px;background:rgba(255,255,255,.6)}
.privacy-note span{color:var(--gold-d)}
.planner-card,.quote-result{background:var(--paper);border:1px solid var(--line);border-radius:26px;box-shadow:var(--sh-3);padding:clamp(25px,5vw,54px);max-width:800px;margin:0 auto}
.planner-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;border-bottom:1px solid var(--line);padding-bottom:24px;margin-bottom:34px}
.planner-card h2,.quote-result h2{font:400 clamp(1.8rem,3vw,2.6rem)/1.1 var(--f-display);margin:0;color:var(--ink)}
.step-track{display:flex;gap:8px;padding-top:9px}
.step-track i{display:block;width:34px;height:4px;border-radius:10px;background:var(--line)}
.step-track i.active{background:var(--gold)}
.planner-step legend{font:400 clamp(1.3rem,2.3vw,1.9rem) var(--f-display);margin-bottom:24px;color:var(--ink)}
.field-grid{display:grid;gap:18px}
.field-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.field-grid label{display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:600;color:var(--gold-d);letter-spacing:.08em;text-transform:uppercase}
.field-grid input,.field-grid select{width:100%;border:1px solid var(--line);border-radius:10px;padding:13px 14px;background:var(--cream);color:var(--ink);font:400 16px var(--f-sans);letter-spacing:0;text-transform:none;outline:none;transition:border-color .2s,box-shadow .2s}
.field-grid input:focus,.field-grid select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(192,147,69,.15)}
.field-grid select{-webkit-appearance:none;appearance:none;background:var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23C09345' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 14px center/14px}
.field-help{font-size:13px;color:var(--ink-55);margin:22px 0 0}
.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.choice{position:relative;display:flex;flex-direction:column;gap:4px;padding:18px;border:1px solid var(--line);border-radius:14px;cursor:pointer;transition:.2s;background:var(--paper)}
.choice:hover,.choice:has(input:checked){border-color:var(--gold);background:var(--cream-2)}
.choice input{position:absolute;opacity:0}
.choice span{font-weight:500;color:var(--ink)}
.choice small{color:var(--ink-55);font-size:12px;line-height:1.35}
.choice:has(input:checked)::after{content:"✓";position:absolute;right:12px;top:9px;color:var(--gold-d);font-weight:600}
.planner-actions{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;margin-top:38px}
.planner-actions>span{min-width:1px}
.form-error{margin:22px 0 0;padding:12px 15px;border-radius:10px;color:#7a1220;background:#fbe9e8;font-size:13px}
.review-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.review-item{padding:16px;border-radius:12px;background:var(--cream-2);border:1px solid var(--line)}
.review-item small{display:block;text-transform:uppercase;letter-spacing:.08em;color:var(--gold-d);font-size:10px;margin-bottom:5px}
.review-item strong{font-size:15px;font-weight:500;color:var(--ink)}
.quote-result{margin-top:36px}
.result-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.estimate-badge{border-radius:100px;padding:8px 13px;background:var(--cream-2);color:var(--gold-d);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--line)}
.quote-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin:28px 0}
.quote-summary>div{padding:19px;background:var(--cream-2)}
.quote-summary small{display:block;color:var(--ink-55);font-size:11px;text-transform:uppercase;letter-spacing:.07em}
.quote-summary strong{display:block;margin-top:4px;font:500 clamp(1.2rem,2.4vw,2rem) var(--f-display);color:var(--gold-d)}
.result-warning{padding:13px 16px;border-radius:10px;background:#fff5dc;border:1px solid #e3c486;color:#73541f;font-size:13px}
.result-columns{display:grid;grid-template-columns:.85fr 1.15fr;gap:42px;margin-top:32px}
.result-columns h3{font:400 1.5rem var(--f-display);margin:0 0 15px;color:var(--ink)}
.route-stops{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:9px}
.route-stops li{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px;background:var(--paper)}
.route-stops li b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--gold-d);color:#fff;font-size:11px}
.itinerary-list{display:flex;flex-direction:column;gap:10px}
.day-card{display:grid;grid-template-columns:55px 1fr;gap:12px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.day-card strong{display:block;font-weight:500;color:var(--ink)}
.day-card small{color:var(--ink-55)}
.day-number{color:var(--gold-d);font:400 1.45rem var(--f-display)}
.budget-result{margin:30px 0;padding:15px 18px;border-radius:12px;background:var(--cream-2);font-size:14px}
.budget-result.good{border-left:4px solid var(--jade)}
.budget-result.over{border-left:4px solid var(--gold)}
.route-map-shell{overflow:hidden;margin:0 0 23px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,var(--paper) 0%,var(--sand-warm) 100%);box-shadow:var(--sh-2)}
.route-map-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;border-bottom:1px solid var(--line);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-d)}
.route-map-meta{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}
.map-geometry-status{color:var(--jade-d);font-size:9px;letter-spacing:.06em;white-space:nowrap}
.map-geometry-status.loading{color:var(--gold-d)}
.map-geometry-status.unavailable{color:#9a4c32}
.map-live-dot{display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--gold-d);box-shadow:0 0 0 4px rgba(192,147,69,.15);vertical-align:1px}
.route-map{position:relative;min-height:320px;aspect-ratio:1.48;background-image:linear-gradient(rgba(192,147,69,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(192,147,69,.09) 1px,transparent 1px);background-size:42px 42px}

.route-map .island-shape{fill:rgba(192,147,69,.08);stroke:rgba(192,147,69,.16);stroke-width:2}
.route-map .route-line{fill:none;stroke:var(--gold-d);stroke-width:4;stroke-linecap:round;stroke-dasharray:1 0;filter:drop-shadow(0 3px 3px rgba(143,104,36,.18));animation:route-draw 1.2s var(--e-out) both}
.route-map .route-stop-halo{fill:rgba(255,255,255,.85);stroke:rgba(192,147,69,.33);stroke-width:2}
.route-map .route-stop-dot{fill:var(--gold-d);stroke:#fff;stroke-width:3}
.route-map .route-stop-number{fill:#fff;font:600 13px var(--f-sans);text-anchor:middle;dominant-baseline:central}
.route-map .stop-label{fill:var(--ink);font:500 14px var(--f-sans);paint-order:stroke;stroke:var(--cream);stroke-width:5px;stroke-linejoin:round}
.route-map .map-kicker{fill:rgba(38,32,25,.3);font:600 11px var(--f-sans);letter-spacing:3px}
.route-map .compass{fill:var(--gold-d);font:600 11px var(--f-sans);letter-spacing:1px}
.route-map .compass-line{stroke:var(--gold-d);stroke-width:1.5}
.route-map-help{margin:0;padding:10px 15px 13px;color:var(--ink-55);font-size:11px;line-height:1.4;background:rgba(255,255,255,.34)}
@keyframes route-draw{from{stroke-dasharray:0 1000}to{stroke-dasharray:1000 0}}
.route-map.google-live{background:#e5e1d9;background-image:none}
.route-map.google-live .gm-style{font-family:var(--f-sans)}
.route-map.map-message{display:grid;place-items:center;padding:28px;background:radial-gradient(circle at 50% 20%,rgba(255,255,255,.9),rgba(243,235,221,.95)),linear-gradient(145deg,var(--paper),var(--sand-warm))}
.map-message-inner{max-width:310px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.map-message-kicker{color:var(--gold-d);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.map-message-inner strong{font:400 1.45rem/1.05 var(--f-display);color:var(--ink)}
.map-message-inner small{color:var(--ink-55);font-size:12px;line-height:1.5}
.route-map-title{display:flex;align-items:center;gap:2px;min-width:0}
.route-map-title span{white-space:nowrap}
.map-control{appearance:none;border:1px solid var(--line);border-radius:999px;padding:6px 10px;background:var(--paper);color:var(--ink);font:600 10px var(--f-sans);letter-spacing:.04em;cursor:pointer;transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease}
.map-control:hover:not(:disabled),.map-control:focus-visible:not(:disabled){background:var(--cream-2);border-color:var(--gold);box-shadow:var(--sh-2);transform:translateY(-1px);outline:none}
.map-control:disabled{cursor:not-allowed;opacity:.42}
.route-map-frame{position:relative;min-height:320px;aspect-ratio:1.48;background:linear-gradient(145deg,var(--sand-warm),var(--cream-2));overflow:hidden;contain:paint}
.route-map-frame>.route-map{position:absolute;inset:0;width:100%;height:100%;min-height:0;aspect-ratio:auto;overflow:hidden}
.route-map-float{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:8px 11px;background:rgba(38,32,25,.82);backdrop-filter:blur(12px);color:#fff;font-size:10px;font-weight:600;letter-spacing:.05em;box-shadow:0 10px 24px -16px rgba(0,0,0,.8);pointer-events:none}
.route-map-live-chip{top:14px;left:14px;text-transform:uppercase}
.route-map-legend{right:14px;bottom:14px;color:rgba(255,255,255,.9);font-weight:500;text-transform:none}
.route-pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--gold-l);box-shadow:0 0 0 0 rgba(232,211,167,.65);animation:map-live-pulse 1.8s ease-out infinite}
.day-route-card{cursor:pointer;border-radius:10px;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.day-route-card:hover,.day-route-card:focus-visible{background:var(--cream-2);box-shadow:var(--sh-2);transform:translateY(-1px);outline:none}
.day-route-card.active{background:var(--cream-2);border-color:var(--gold)}
.route-stops li{cursor:pointer;transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease}
.route-stops li:hover,.route-stops li:focus-visible{transform:translateX(3px);border-color:var(--gold);background:var(--cream-2);box-shadow:var(--sh-2);outline:none}
.route-stops li.active{border-color:var(--gold-d);background:var(--cream-2)}

/* ================= CONTACT SECTION & FORM ================= */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,6vw,70px);align-items:flex-start}
.cinfo-card{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:28px 30px;box-shadow:var(--sh-2)}
.cinfo-card h3{font:400 1.6rem var(--f-display);color:var(--ink);margin:0 0 20px}
.cinfo-item{display:flex;gap:16px;margin-bottom:18px}
.cinfo-item:last-child{margin-bottom:0}
.cinfo-item-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:rgba(192,147,69,.12);flex:0 0 auto}
.cinfo-item-icon svg{width:20px;height:20px;stroke:var(--gold-d);fill:none;stroke-width:1.8}
.cinfo-item-text b{display:block;font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--gold-d);margin-bottom:4px}
.cinfo-item-text a,.cinfo-item-text span{font-size:16px;color:var(--ink-70);text-decoration:none;transition:color .2s}
.cinfo-item-text a:hover{color:var(--jade)}
.gcc-flags{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gcc-flag-item{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink-70)}
.gcc-flag-item span{font-size:20px}

.cform{background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:clamp(30px,5vw,46px);box-shadow:var(--sh-3)}
.cform h2{font:400 2.2rem var(--f-display);color:var(--ink);margin:0 0 10px}
.cform-sub{font-size:14px;color:var(--ink-70);margin:0 0 28px;line-height:1.5}
.cfield-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cfield{margin-bottom:18px}
.cfield label{display:block;font-size:12px;font-weight:600;color:var(--gold-d);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.cfield input,.cfield select,.cfield textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:var(--cream);color:var(--ink);font:400 15px var(--f-sans);outline:none;transition:border-color .2s,box-shadow .2s}
.cfield input:focus,.cfield select:focus,.cfield textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(192,147,69,.15)}
.cfield select{-webkit-appearance:none;appearance:none;background:var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23C09345' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 16px center/14px}
.cfield textarea{min-height:100px;resize:vertical}
.cform-submit{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:none;border-radius:10px;background:linear-gradient(135deg,var(--gold),var(--gold-d));color:#fff;font:500 16px var(--f-sans);padding:16px;margin-top:10px;cursor:pointer;transition:transform .2s,box-shadow .2s}
.cform-submit:hover{transform:translateY(-2px);box-shadow:0 8px 20px -6px rgba(192,147,69,.6)}
.cform-submit svg{width:20px;height:20px;stroke:#fff;stroke-width:2;fill:none}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
@media(max-width:560px){.cfield-row{grid-template-columns:1fr}}

@media(max-width:760px){
  .planner-card,.quote-result{padding:24px 18px;border-radius:18px}
  .planner-card-head{display:block}
  .step-track{padding-top:20px}
  .field-grid.two,.choice-grid,.result-columns,.review-summary{grid-template-columns:1fr}
  .quote-summary{grid-template-columns:repeat(2,1fr)}
  .planner-actions{grid-template-columns:auto 1fr auto}
  .planner-actions .btn{padding:12px 16px;font-size:13px}
  .planner-actions>span{display:block}
  .planner-actions #submitButton,.planner-actions #nextButton{grid-column:3}
  .result-heading{display:block}
  .estimate-badge{display:inline-block;margin-top:15px}
  .route-map{min-height:275px}
  .route-map-toolbar{align-items:flex-start;gap:8px}
  .route-map-title{padding-top:5px}
  .route-map-meta{gap:5px}
  .map-control{padding:5px 8px;font-size:9px}
  .route-map-float{font-size:9px;padding:7px 9px}
  .route-map-legend{right:10px;bottom:10px}
  .route-map-live-chip{top:10px;left:10px}
}

/* ============================================================
   BENTO DESIGN SYSTEM FOR SUBPAGES
   ============================================================ */

/* Bento Nav (Global) */
.bento-nav {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  z-index: 200;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  background: transparent !important;
  pointer-events: none;
}
.bento-nav-pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 30px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  padding: 10px 14px 10px 24px;
  border-radius: 100px;
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.15);
  border: 1px solid rgba(255,255,255,1);
}
.bento-nav .brand img { height: 28px; }
.bento-nav .nav-links { display: flex; gap: 28px; align-items: center; }
.bento-nav .nav-links a {
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  transition: color 0.3s;
  text-decoration: none;
}
.bento-nav .nav-links a:hover,
.bento-nav .nav-links a.active { color: var(--gold-d); }
.bento-nav-cta {
  padding: 10px 24px;
  font-size: 13px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--gold);
  color: #fff;
  text-decoration: none;
}
.bento-nav .burger { display: none; }

@media (max-width: 1024px) {
  .bento-nav-pill {
    width: calc(100% - 20px);
    justify-content: space-between;
    padding: 10px 20px;
  }
  .bento-nav .nav-links, .bento-nav-cta { display: none; }
  .bento-nav .burger { display: flex; }
  .bento-nav .burger span { background: var(--ink); }
}

/* Subpage Hero Bento Container */
.subhero-bento {
  position: relative;
  width: calc(100% - 40px);
  margin: 120px auto 40px auto;
  background: var(--cream);
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 20px 60px -10px rgba(58, 43, 27, 0.05);
  border: 1px solid rgba(0,0,0,0.05);
  padding: clamp(60px, 10vw, 100px) 40px;
  text-align: center;
  z-index: 5;
}

.subhero-bento::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../assets/pattern.jpg') center/cover;
  opacity: 1;
  z-index: 0;
  pointer-events: none;
}

.subhero-bento-content {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

.subhero-bento .eyebrow {
  justify-content: center;
  margin-bottom: 24px;
}
.subhero-bento .eyebrow::after {
  content: "";
  width: 30px;
  height: 1px;
  background: var(--gold);
}

.subhero-bento h1 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(3.2rem, 5.5vw, 5rem);
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 24px;
}
.subhero-bento h1 em {
  font-style: italic;
  color: var(--jade);
}

.subhero-bento .lead {
  margin: 0 auto 32px;
}

.subhero-bento .crumb {
  font-family: var(--f-sans);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.subhero-bento .crumb a { color: var(--gold-d); transition: color 0.3s; text-decoration: none; }
.subhero-bento .crumb a:hover { color: var(--ink); }

@media (max-width: 1024px) {
  .subhero-bento {
    width: calc(100% - 20px);
    margin: 100px auto 20px auto;
    border-radius: 24px;
    padding: 60px 24px;
  }
}

/* ============================================================
   DARK PATTERN BACKGROUND UTILITY
   ============================================================ */
.pattern-bg-dark {
  position: relative;
  background-color: var(--ink);
  overflow: hidden;
}
.pattern-bg-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../assets/pattern2.jpg') center/cover;
  opacity: 0.8;
  pointer-events: none;
  z-index: 0;
}
.pattern-bg-dark > * {
  position: relative;
  z-index: 1;
}

/* ============================================================
   LIGHT PATTERN BACKGROUND UTILITY
   ============================================================ */
.pattern-bg-light {
  position: relative;
  background-color: var(--cream);
  color: var(--ink);
  overflow: hidden;
}
.pattern-bg-light::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../assets/pattern3.jpg') center/cover;
  opacity: 0.8;
  pointer-events: none;
  z-index: 0;
}
.pattern-bg-light > * {
  position: relative;
  z-index: 1;
}

/* ============================================================
   SPACING REFINEMENT v2 (client: sections STILL too much space)
   Serious, decisive reduction — kept clean/professional, not crowded.
   Overrides only; no layout/content/logic changes.
   ============================================================ */
/* Core section rhythm — cut hard from the original 180px */
.section { padding: clamp(40px, 5vw, 68px) 0 !important; }

/* Sub-hero banners on inner pages */
.subhero-bento { padding: clamp(40px, 5vw, 62px) 40px !important; }

/* Intros hug their content AND center on the page (client: middle-align
   'The Island' + 'Our Packages'). auto side-margins must be in the same rule
   so they aren't overridden. */
.sec-intro { margin: 0 auto clamp(18px, 2.2vw, 26px) !important; text-align: center; }

/* Split feature rows (Our Story / founder / CTA media) */
.pkg-row { padding: clamp(24px, 3.5vw, 40px) 0 !important; }

/* Keep the big feature images (restored) but TOP-align the split so the shorter
   text column starts at the top next to the tall image — this removes the empty
   gap above the eyebrow WITHOUT shrinking the image. */
.wrap.split, .split { align-items: start !important; }
.split-media .m-img img,
.split .split-media .m-img img { min-height: 520px !important; }

/* Pinned / showcase bands (Why / The Island) */
.why-horiz-pin { padding: clamp(36px, 4.5vh, 56px) 0 clamp(26px, 3vh, 40px) !important; }
.island-pin { padding: clamp(30px, 4vh, 48px) 0 !important; }
.why-header { margin-bottom: clamp(14px, 2.2vh, 22px) !important; }
.island-header { margin-bottom: clamp(14px, 2.2vh, 22px) !important; }

/* Grids inside sections a touch tighter */
.dest-grid, .value-grid { gap: clamp(16px, 2vw, 26px) !important; }

/* Serendib typographic band */
.serendib-section { padding: clamp(44px, 6vh, 76px) var(--pad) !important; min-height: auto !important; }

/* Feature / packages showcase + CTA */
.svc-marquee-section, .featured-section { padding: clamp(40px, 5vw, 68px) 0 !important; }
.cta { padding: clamp(44px, 5.5vw, 76px) 0 !important; }

/* Guest Experiences (testimonials) band */
.tst { padding: clamp(40px, 5vw, 68px) 0 !important; }
.tst .tst-head { margin: 0 auto clamp(22px, 3vw, 34px) !important; }

/* Eyebrow → heading → intro gaps tighter (Signature Journeys, Founded 1999…) */
.eyebrow { margin: 0 0 11px !important; }
/* Big display headings were leaving tall empty gaps (the animated split-lines
   heading occupies its full height). Tighter line-height + margin closes it. */
.sec-title { margin: 0 0 14px !important; line-height: 1.02 !important; }

/* The centered mini-intro wrappers (Signature Journeys) had a fixed 40px bottom
   margin inline — pull the lead closer. */
.wrap > div[style*="auto 40px"] { margin-bottom: 20px !important; }

/* KEY FIX: the big display heading between the eyebrow and the lead is what
   creates the tall empty gap (it's a 2-line title, temporarily hidden by the
   split-lines animation but still reserving its full height). Cap its size &
   line-height in these intro contexts so the gap shrinks — text still shows. */
.sec-intro .sec-title,
.wrap > div[style*="auto 40px"] .sec-title {
  font-size: clamp(1.7rem, 3vw, 2.6rem) !important;
  line-height: 1.06 !important;
  margin: 0 0 10px !important;
}

/* Center the destinations "The Island" and packages intros (middle-aligned). */
.sec-intro .eyebrow { justify-content: center; }
.sec-intro .eyebrow::after { content: ""; width: 30px; height: 1px; background: var(--gold); }
.sec-intro .lead { margin-left: auto; margin-right: auto; }

/* GCC split sections: the animated split-lines HEADING was staying invisible
   (its text translated off-screen inside overflow:hidden) while still reserving
   its full multi-line height — THAT empty reserved block is the "gap" between
   the eyebrow and the paragraph. Force the heading text back into view and let
   it take only its real height, then tighten margins. (CSS-only; no logic.) */
.split .sec-title.lines .line { overflow: visible !important; }
.split .sec-title.lines .line > span { transform: none !important; }
.split .sec-title { margin: 0 0 8px !important; line-height: 1.06 !important; }
.split .eyebrow { margin: 0 0 7px !important; }
.split .lead { margin-top: 0 !important; padding-top: 0 !important; }

@media (max-width: 760px) {
  .section { padding: clamp(32px, 8vw, 46px) 0 !important; }
  .subhero-bento { padding: 36px 22px !important; }
  .split-media .m-img img { min-height: 320px; }
}

/* ============================================================
   PREMIUM LANGUAGE TOGGLE (EN / ARB) + RTL SUPPORT
   ============================================================ */
/* Soft neumorphic pill: the track is gently recessed and the active side is a
   raised, highlighted knob that slides — tactile and clearly "pressed out". */
/* Soft neumorphic track (original size) with a highlighted GOLD sliding knob
   so the active language clearly stands out. */
.lang-toggle {
  --lt-w: 88px; --lt-h: 40px;
  position: relative;
  width: var(--lt-w); height: var(--lt-h);
  border: 0;
  border-radius: 100px;
  background: #ECE3D5;
  box-shadow: inset 2px 2px 5px rgba(150,128,96,.5),
              inset -2px -2px 5px rgba(255,255,255,.9);
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
  transition: box-shadow .3s ease;
}
/* the sliding knob — filled with brand gold so the active side is highlighted */
.lang-toggle::before {
  content: "";
  position: absolute;
  top: 4px; left: 4px;
  width: calc(50% - 4px); height: calc(var(--lt-h) - 8px);
  border-radius: 100px;
  background: linear-gradient(135deg, var(--gold), var(--gold-d));
  box-shadow: 0 5px 12px -3px rgba(184,134,59,.75),
              inset 0 1px 0 rgba(255,255,255,.45);
  transition: transform .34s cubic-bezier(.16,1,.3,1);
}
.lang-toggle[data-lang="ar"]::before { transform: translateX(100%); }
/* the two labels */
.lang-toggle .lt-en, .lang-toggle .lt-ar {
  position: absolute; top: 0; height: 100%;
  width: 50%;
  display: grid; place-items: center;
  font: 700 12px var(--f-sans); letter-spacing: .06em;
  z-index: 1; transition: color .3s ease;
  pointer-events: none;
  color: #9A8B72;
}
.lang-toggle .lt-en { left: 0; }
.lang-toggle .lt-ar { right: 0; }
/* Arabic label uses the Arabic face, a touch larger, no letter-spacing */
.lang-toggle .lt-ar { font-family: 'Amiri', var(--f-sans); font-size: 15px; letter-spacing: 0; }
/* active label sits on the gold knob — white for strong contrast */
.lang-toggle[data-lang="en"] .lt-en { color: #fff; }
.lang-toggle[data-lang="ar"] .lt-ar { color: #fff; }
.lang-toggle:hover::before {
  box-shadow: 0 7px 16px -3px rgba(184,134,59,.85),
              inset 0 1px 0 rgba(255,255,255,.5);
}
/* on the dark home nav give the recessed track a hair more contrast */
.bento-nav.on-dark .lang-toggle { background: #E7DDCC; }

/* ============================================================
   ARABIC MODE — FULL RIGHT-TO-LEFT MIRROR
   In Arabic the whole document flips (html[dir=rtl]) so the layout mirrors
   the English site: nav, grids, flex rows, cards, forms and the expert system
   all read right-to-left. Flex/grid mirror automatically under dir=rtl; the
   rules below handle fonts, directional icons, and the few things that must
   stay left-to-right (numbers, prices, the map, coded values).
   ============================================================ */

/* Arabic script font on textual elements */
html.lang-ar,
html.lang-ar .lead,
html.lang-ar .sec-title,
html.lang-ar .eyebrow,
html.lang-ar h1, html.lang-ar h2, html.lang-ar h3, html.lang-ar h4,
html.lang-ar p, html.lang-ar li, html.lang-ar span,
html.lang-ar a, html.lang-ar b, html.lang-ar small,
html.lang-ar button, html.lang-ar label, html.lang-ar cite,
html.lang-ar legend, html.lang-ar strong, html.lang-ar div {
  font-family: 'Amiri', var(--f-serif);
}
/* keep the display headings on their elegant serif for hero/section titles */
html.lang-ar h1, html.lang-ar h2 { font-family: 'Amiri', var(--f-display); }

/* Text alignment: Arabic reads right-aligned by default */
html[dir="rtl"] body { text-align: right; }
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .sec-title,
html[dir="rtl"] .lead { text-align: right; }
/* keep already-centered sections centered */
html[dir="rtl"] .sec-intro.c,
html[dir="rtl"] [style*="text-align:center"],
html[dir="rtl"] [style*="justify-content:center"] { text-align: center; }

/* Keep these left-to-right even in Arabic: numbers, prices, phone/email,
   coded values, the interactive map, and stat counters. This prevents digits
   and Latin strings from reordering oddly. */
html[dir="rtl"] .amt,
html[dir="rtl"] .b-lkr, html[dir="rtl"] .b-usd,
html[dir="rtl"] .pstat-value,
html[dir="rtl"] .stat-item b, html[dir="rtl"] .stats-minimal-grid b,
html[dir="rtl"] .route-map, html[dir="rtl"] #routeMap,
html[dir="rtl"] a[href^="tel:"], html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] .tourcard-price .amt,
html[dir="rtl"] input[type="tel"], html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="number"] {
  direction: ltr;
  unicode-bidi: isolate;
}
/* price/number blocks that sit on the right edge should stay visually right */
html[dir="rtl"] .amt { text-align: left; }

/* Flip directional inline SVG arrows (chevrons/→) so they point the RTL way */
html[dir="rtl"] .btn svg,
html[dir="rtl"] .to-top svg,
html[dir="rtl"] .tourcard-go svg,
html[dir="rtl"] .cities-help-btn svg,
html[dir="rtl"] .ef-submit svg,
html[dir="rtl"] .fb-submit svg,
html[dir="rtl"] .xps-btn-next svg,
html[dir="rtl"] .xps-btn-back svg,
html[dir="rtl"] .mag-inner svg { transform: scaleX(-1); }

/* Nav brand mark stays LTR internally (logo left of the wordmark). */
html[dir="rtl"] .bento-nav .brand,
html[dir="rtl"] .nav .brand,
html[dir="rtl"] .pdfr-header { direction: ltr; }
html[dir="rtl"] .bento-nav .brand-txt,
html[dir="rtl"] .nav .brand-txt { text-align: left; }

/* Footer brand: sit on the RIGHT with the logo first (right), text after —
   aligned with the rest of the right-aligned Arabic footer column. */
html[dir="rtl"] .foot .brand {
  direction: rtl;
  justify-content: flex-start;
}
html[dir="rtl"] .foot .brand-txt { text-align: right; }

/* Crumb separators and small inline meta read naturally */
html[dir="rtl"] .crumb { direction: rtl; }

/* Nav pill: mirror so links start from the right, toggle/burger on the left */
html[dir="rtl"] .bento-nav-pill,
html[dir="rtl"] .nav-links { direction: rtl; }

/* Forms: labels and floating labels align right */
html[dir="rtl"] .ef-field label,
html[dir="rtl"] .fb-field label,
html[dir="rtl"] .field label { right: 16px; left: auto; transform-origin: right top; }
/* inputs/textareas type from the right */
html[dir="rtl"] .ef-field input, html[dir="rtl"] .ef-field textarea, html[dir="rtl"] .ef-field select,
html[dir="rtl"] .fb-field input, html[dir="rtl"] .fb-field textarea,
html[dir="rtl"] .field input, html[dir="rtl"] .field textarea,
html[dir="rtl"] #extraNotes { text-align: right; }
/* but keep email/phone/number fields left-to-right for correct digit order */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="number"] { text-align: right; direction: ltr; }

/* The number counters in the planner keep digits LTR but layout mirrors */
html[dir="rtl"] .counter-massive { direction: rtl; }
html[dir="rtl"] .counter-display { direction: ltr; }

/* ---- RTL: flip directional list bullets, borders and check marks ---- */
/* bullet lists that use left padding + ::before on the left → move to right */
html[dir="rtl"] .gcc li,
html[dir="rtl"] .pkg-includes li { padding-left: 0; padding-right: 24px; }
html[dir="rtl"] .gcc li::before { left: auto; right: 0; }
html[dir="rtl"] .pkg-includes li::before { left: auto; right: 2px; }

/* left-border accent quotes → right border */
html[dir="rtl"] .quote {
  border-left: 0; border-right: 2px solid var(--gold);
  padding-left: 0; padding-right: 26px;
}
html[dir="rtl"] .budget-result.good { border-left: 0; border-right: 4px solid var(--jade); }
html[dir="rtl"] .budget-result.over { border-left: 0; border-right: 4px solid var(--gold); }

/* checkmark / tick indicators move to the left corner */
html[dir="rtl"] .choice:has(input:checked)::after { right: auto; left: 12px; }

/* decorative corner blobs mirror to the opposite corner */
html[dir="rtl"] .subhero::before { right: auto; left: -6%; }
html[dir="rtl"] .vcard::before { right: auto; left: -30px; }
html[dir="rtl"] .marquee-in span::after { right: auto; left: -8px; }

/* absolute overlays that span the row keep both edges (no change needed),
   but single-corner labels flip */
html[dir="rtl"] .pl-procession { direction: rtl; }

/* footer giant word: keep it centered (undo the earlier left/right swap) */
html[dir="rtl"] .foot-word { left: 50%; right: auto; transform: translateX(-50%); }

/* map chips: swap corners so they don't collide with mirrored content */
html[dir="rtl"] .route-map-live-chip { left: auto; right: 14px; }
html[dir="rtl"] .route-map-legend { right: auto; left: 14px; }

/* planner side-rail step numbers + progress read right-to-left naturally */
html[dir="rtl"] .xps-steps, html[dir="rtl"] .step-track { direction: rtl; }

/* the star rating should read left-to-right (visual 1→5) even in Arabic */
html[dir="rtl"] .fb-stars { direction: ltr; }

/* WhatsApp floating button: on the RIGHT side in Arabic. */
html[dir="rtl"] .wa { left: auto !important; right: 24px !important; }

/* hover nudges: arrows point/move the RTL way (combine flip + nudge) */
html[dir="rtl"] .btn:hover svg { transform: scaleX(-1) translateX(5px); }
html[dir="rtl"] .route-stops li:hover,
html[dir="rtl"] .route-stops li:focus-visible { transform: translateX(-3px); }
html[dir="rtl"] .map-live-dot { margin-right: 0; margin-left: 7px; }

/* mobile menu items align right in Arabic */
html[dir="rtl"] .mobile-menu { text-align: right; }

/* ============================================================
   ARABIC TYPE SCALE
   The Amiri Arabic face renders smaller and lighter than the Latin
   display/serif fonts at the same point size, so section titles looked
   tiny while lead paragraphs looked oversized. These rules ONLY apply in
   Arabic (html[dir="rtl"]) — the English sizes are never touched.
   Goal: titles clearly visible, subtitles/leads a little smaller.
   ============================================================ */

/* Eyebrows (the small kicker above each title) — much larger and readable.
   Arabic has no uppercase, and the wide English tracking made it look like
   scattered dots, so we drop the letter-spacing and raise the size a lot. */
html[dir="rtl"] .eyebrow {
  font-size: clamp(1.05rem, 1.5vw, 1.4rem) !important;
  letter-spacing: .04em !important;
  font-weight: 700 !important;
  text-transform: none !important;
}
html[dir="rtl"] .eyebrow.c,
html[dir="rtl"] .why-header .eyebrow { letter-spacing: .04em !important; }
/* the small gold line before the eyebrow can grow a touch too */
html[dir="rtl"] .eyebrow::before,
html[dir="rtl"] .eyebrow.c::after { width: 26px; }

/* Section titles — Arabic runs ~40% smaller than before (client: the big
   Arabic headings looked oversized). English is untouched — this is RTL-only. */
html[dir="rtl"] .sec-title {
  font-size: clamp(1.55rem, 3.35vw, 2.85rem) !important;
  font-weight: 700;
  line-height: 1.35;
}
html[dir="rtl"] .island-header .sec-title { font-size: clamp(1.3rem, 2.5vw, 2.1rem) !important; }
/* this section title has its own higher-specificity rule, so match it in RTL */
html[dir="rtl"] .wrap > div[style*="auto 40px"] .sec-title {
  font-size: clamp(1.25rem, 2.4vw, 1.9rem) !important;
  line-height: 1.4 !important;
}
html[dir="rtl"] .why-h2 {
  font-size: clamp(1.3rem, 2.75vw, 2.15rem) !important;
  font-weight: 700;
  line-height: 1.4;
}

/* Hero headline + Arabic kicker — keep them large and legible */
html[dir="rtl"] .hb-title { font-size: clamp(2.4rem, 5.4vw, 4.8rem); line-height: 1.7 !important; font-weight: 700; }
html[dir="rtl"] .hb-ar { font-size: clamp(1.3rem, 2vw, 2rem); }

/* Big closing-CTA headings use an inline font-size, so override needs
   !important. ~40% smaller in Arabic only; English inline size unchanged. */
html[dir="rtl"] .cta h2[data-i18n-html],
html[dir="rtl"] section.cta h2[data-i18n-html] {
  font-size: clamp(1.6rem, 3.35vw, 2.85rem) !important;
  line-height: 1.32 !important;
  font-weight: 700 !important;
}

/* Lead / subtitle paragraphs — a bit bigger than before (client: subtitles
   too small) and clearly smaller than the title. RTL only. */
html[dir="rtl"] .lead {
  font-size: clamp(1.12rem, 1.5vw, 1.35rem) !important;
  line-height: 2 !important;
  font-weight: 400;
}
/* the Arabic accent line above some sections (e.g. our promise) */
html[dir="rtl"] .hero-ar { font-size: clamp(1.1rem, 1.7vw, 1.5rem); }

/* Arabic subtitles (the .cta-slogan lines): a touch bigger, ONE colour (the
   em no longer switches colour). English keeps two tones because dir=rtl only. */
html[dir="rtl"] .cta-slogan {
  font-size: clamp(1.2rem, 2.2vw, 1.6rem) !important;
}
html[dir="rtl"] .cta-slogan em {
  color: inherit !important;   /* same colour as the rest of the subtitle */
}

/* GCC band quote "«آمنٌ · خاصّ · مريح · لا يُنسى»": bigger + highlighted (gold).
   Arabic only. */
html[dir="rtl"] [data-i18n-html="home.gcc.quote"] {
  font-size: clamp(1.12rem, 1.5vw, 1.35rem) !important;
  font-weight: 800 !important;
  color: #E0A72A !important;   /* dark yellow / rich gold */
  line-height: 1.9 !important;
  letter-spacing: .02em;
  display: inline-block;
}

/* NO ITALIC anywhere in the Arabic version — Amiri's italic looks wrong.
   Sitewide, Arabic only. English keeps every italic exactly as it was. */
html[dir="rtl"],
html[dir="rtl"] * { font-style: normal !important; }

/* ONE COLOUR for every Arabic heading/subtitle: the highlighted <em> word
   (jade / gold / white in English) now inherits the same colour as the rest
   of its heading. Sitewide, Arabic only — English keeps its two-tone accents. */
html[dir="rtl"] h1 em,
html[dir="rtl"] h2 em,
html[dir="rtl"] h3 em,
html[dir="rtl"] h4 em,
html[dir="rtl"] .sec-title em,
html[dir="rtl"] .why-h2 em,
html[dir="rtl"] .hb-title em,
html[dir="rtl"] .cta h2 em,
html[dir="rtl"] .cta-slogan em,
html[dir="rtl"] .lead em,
html[dir="rtl"] .serendib-body em,
html[dir="rtl"] [data-i18n-html] em {
  color: inherit !important;
}
/* EXCEPTION — subpage hero titles keep their two-colour accent in Arabic
   (client wants the subhero <em> to stay a different colour). Higher
   specificity than the one-colour rule above, so it wins. */
html[dir="rtl"] .subhero-bento h1 em {
  color: var(--jade) !important;
}

/* ---- Arabic sub-page HERO: give it room so it's not crowded ---- */
html[dir="rtl"] .subhero-bento h1 {
  line-height: 1.6 !important;          /* Amiri needs more; was 1.05 */
  margin-bottom: 28px !important;
}
html[dir="rtl"] .subhero-bento .eyebrow { margin-bottom: 26px !important; }
html[dir="rtl"] .subhero-bento .lead {
  margin-top: 6px !important;
  margin-bottom: 30px !important;
  line-height: 2 !important;
}
html[dir="rtl"] .subhero-bento .crumb {
  margin-top: 22px !important;
  letter-spacing: .02em;               /* wide Latin tracking looks odd in Arabic */
  line-height: 2;
}

/* Preloader brand + tagline: larger in Arabic. */
html[dir="rtl"] .pl-w b { font-size: clamp(2.4rem, 6.5vw, 4.2rem) !important; }
html[dir="rtl"] .pl-w i { font-size: 15px !important; letter-spacing: .12em !important; }

/* Plan-hero subtitle: one line in Arabic (client request). */
html[dir="rtl"] [data-i18n="plan.hero.lead"] {
  white-space: nowrap !important;
  max-width: none !important;
  font-size: clamp(0.9rem, 1.15vw, 1.15rem) !important;
}
/* About-hero subtitle: one line in Arabic (client request). */
html[dir="rtl"] [data-i18n="about.hero.lead"] {
  white-space: nowrap !important;
  max-width: none !important;
  font-size: clamp(0.85rem, 1.1vw, 1.1rem) !important;
}
@media (max-width: 820px) {
  html[dir="rtl"] [data-i18n="plan.hero.lead"],
  html[dir="rtl"] [data-i18n="about.hero.lead"] { white-space: normal !important; }
}

/* Remove the "starting point" service lead in Arabic only (client request). */
html[dir="rtl"] .home-svc-lead { display: none !important; }

/* Universal RTL subhero centering — every sub-page hero, class or not. */
html[dir="rtl"] .subhero-bento-content {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
html[dir="rtl"] .subhero-bento-content h1,
html[dir="rtl"] .subhero-bento-content .lead,
html[dir="rtl"] .subhero-bento-content .eyebrow,
html[dir="rtl"] .subhero-bento-content .crumb {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
html[dir="rtl"] .subhero-bento-content .eyebrow { justify-content: center !important; }

/* higher-specificity overrides so section-specific em colours can't win in
   Arabic (these mirror the exact English selectors, + html[dir=rtl]). */
html[dir="rtl"] .tst-head .sec-title em,
html[dir="rtl"] .section.ink .sec-title em,
html[dir="rtl"] .svc-marquee-header .sec-title em {
  color: inherit !important;
}

/* card/vcard body copy: keep comfortable but not oversized */
html[dir="rtl"] .vcard p,
html[dir="rtl"] .wcard-content p,
html[dir="rtl"] .svc-card p,
html[dir="rtl"] .tcard p { line-height: 1.95; }

/* ============================================================
   RTL — GLOBAL SPACING & OVERLAP FIX (Arabic only, all sections).
   Amiri has tall marks/descenders, so tight line-heights caused the
   stacked heading lines to overlap and everything felt crowded. These
   raise the line-heights and add consistent vertical rhythm between
   eyebrow → title → subtitle → paragraph. English is untouched.
   ============================================================ */

/* generous line-height on every Arabic heading so multi-line titles never
   overlap (fixes the crowding in SS1, SS5, SS7, etc.) */
html[dir="rtl"] .sec-title,
html[dir="rtl"] .why-h2,
html[dir="rtl"] .cta h2[data-i18n-html],
html[dir="rtl"] section.cta h2[data-i18n-html] { line-height: 1.6 !important; }

/* consistent, visible spacing between the three text levels */
html[dir="rtl"] .eyebrow { margin-bottom: 26px !important; }
html[dir="rtl"] .sec-title,
html[dir="rtl"] .why-h2 { margin-bottom: 26px !important; }
html[dir="rtl"] .lead { margin-top: 10px !important; }
html[dir="rtl"] .sec-intro .lead { margin-top: 16px !important; }
/* the hero-ar accent line + the CTA heading need room under them too */
html[dir="rtl"] .hero-ar { margin-bottom: 22px !important; }
html[dir="rtl"] .cta h2[data-i18n-html] { margin-bottom: 20px !important; }
html[dir="rtl"] .cta .cta-slogan { margin-bottom: 14px !important; }
/* the stacked paragraphs in the founder / promise story blocks (SS5, SS7) */
html[dir="rtl"] .split p + p,
html[dir="rtl"] .wrap p + p { margin-top: 18px !important; }

/* ============================================================
   RTL — INDIVIDUAL SECTION TWEAKS (client requests, Arabic only).
   Each targets one specific heading by its i18n key, so no other
   section and no English text is affected.
   ============================================================ */

/* SS1 — Home "مُصمَّم من أجلكم" (What We Arrange): smaller + not crowded.
   It sits over a busy area, so extra top/bottom room. */
html[dir="rtl"] [data-i18n-html="home.arr.title"] {
  font-size: clamp(1.35rem, 2.9vw, 2.4rem) !important;
  line-height: 1.7 !important;
  margin-bottom: 24px !important;
}

/* SS2 — Packages hero "كل رحلة، مُخطَّطة بإتقان": center properly + space.
   (h1 in the packages subhero) */
html[dir="rtl"] [data-i18n-html="pkg.hero.title"] {
  text-align: center !important;
  line-height: 1.6 !important;
  margin: 0 auto 20px !important;
}

/* SS3 — Home testimonials "حيث يصبح كل ضيفٍ من العائلة": one line */
html[dir="rtl"] [data-i18n-html="home.tst.title"] {
  font-size: clamp(1.2rem, 2.5vw, 2.15rem) !important;
  white-space: nowrap !important;
  line-height: 1.5 !important;
}

/* SS4 (this batch) — Home GCC "موضع ثقة العائلات الخليجية…": one line */
html[dir="rtl"] [data-i18n-html="home.gcc.title"] {
  font-size: clamp(1.15rem, 2.4vw, 2.05rem) !important;
  white-space: nowrap !important;
  line-height: 1.5 !important;
}

/* SS9 — Destinations quote "«حيث تشعرون في كل رحلة…»": one line-ish + center */
html[dir="rtl"] [data-i18n-html="dest.quote.title"] {
  font-size: clamp(1.2rem, 2.5vw, 2.05rem) !important;
  text-align: center !important;
  line-height: 1.6 !important;
}

/* SS10 — Packages intro "اختاروا رحلتكم السريلانكية": center + space */
html[dir="rtl"] [data-i18n-html="pkg.intro.title"] {
  font-size: clamp(1.3rem, 2.7vw, 2.15rem) !important;
  text-align: center !important;
  margin: 0 auto 18px !important;
}

/* Center the story/promise headings that should be centered (SS6, SS8) and
   give them room. These are already centered in English via inline style;
   in RTL we just ensure the alignment + spacing hold. */
html[dir="rtl"] [data-i18n-html="about.promise.title"],
html[dir="rtl"] [data-i18n-html="dest.intro.title"] {
  text-align: center !important;
  line-height: 1.6 !important;
  margin-bottom: 22px !important;
}

/* On small screens let the two forced-one-line titles wrap so they don't clip */
@media (max-width: 700px) {
  html[dir="rtl"] [data-i18n-html="home.gcc.title"],
  html[dir="rtl"] [data-i18n-html="home.tst.title"] {
    white-space: normal !important;
    line-height: 1.6 !important;
  }
}

/* ============================================================
   RTL — CENTERING FIX for three sections that were still left-aligned.
   The alignment comes from the parent block, so we center the whole
   block (eyebrow + title + lead), not just the title. Arabic only.
   ============================================================ */

/* SS1 — Packages hero "كل رحلة، مُخطَّطة بإتقان": center ONLY the packages
   subhero (the one containing pkg.hero.title), not other pages' heroes. */
html[dir="rtl"] .subhero-bento-content:has([data-i18n-html="pkg.hero.title"]) {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
html[dir="rtl"] .subhero-bento-content:has([data-i18n-html="pkg.hero.title"]) .eyebrow {
  justify-content: center !important;
}
html[dir="rtl"] .subhero-bento-content:has([data-i18n-html="pkg.hero.title"]) .lead {
  margin-left: auto !important;
  margin-right: auto !important;
}
/* the h1 itself + any split-line spans inside must center too */
html[dir="rtl"] [data-i18n-html="pkg.hero.title"],
html[dir="rtl"] [data-i18n-html="pkg.hero.title"] * {
  text-align: center !important;
}
html[dir="rtl"] [data-i18n-html="pkg.hero.title"] .line,
html[dir="rtl"] [data-i18n-html="pkg.hero.title"] .line > span {
  display: block !important;
  text-align: center !important;
}

/* SS2 — Home testimonials "حيث يصبح كل ضيفٍ من العائلة" (.tst-head) */
html[dir="rtl"] .tst-head { text-align: center !important; }
html[dir="rtl"] .tst-head .sec-title,
html[dir="rtl"] .tst-head .eyebrow { justify-content: center !important; text-align: center !important; }

/* SS3 — Feedback "كلماتٌ طيّبة بخط أصحابها": its .sec-intro is the non-.c
   variant (defaults left). Center ONLY the sec-intro that contains the two
   feedback titles, via :has() — nothing else is touched. */
html[dir="rtl"] .sec-intro:has([data-i18n-html="fb.letters.title"]),
html[dir="rtl"] .sec-intro:has([data-i18n-html="fb.reviews.title"]) {
  text-align: center !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
html[dir="rtl"] .sec-intro:has([data-i18n-html="fb.letters.title"]) .eyebrow,
html[dir="rtl"] .sec-intro:has([data-i18n-html="fb.reviews.title"]) .eyebrow {
  justify-content: center !important;
}
html[dir="rtl"] .sec-intro:has([data-i18n-html="fb.letters.title"]) .lead,
html[dir="rtl"] .sec-intro:has([data-i18n-html="fb.reviews.title"]) .lead {
  margin-left: auto !important;
  margin-right: auto !important;
}
/* the h2 titles + their split-line spans must center too */
html[dir="rtl"] [data-i18n-html="fb.letters.title"],
html[dir="rtl"] [data-i18n-html="fb.letters.title"] *,
html[dir="rtl"] [data-i18n-html="fb.reviews.title"],
html[dir="rtl"] [data-i18n-html="fb.reviews.title"] * {
  text-align: center !important;
}
html[dir="rtl"] [data-i18n-html="fb.letters.title"] .line,
html[dir="rtl"] [data-i18n-html="fb.letters.title"] .line > span,
html[dir="rtl"] [data-i18n-html="fb.reviews.title"] .line,
html[dir="rtl"] [data-i18n-html="fb.reviews.title"] .line > span {
  display: block !important;
  text-align: center !important;
}

/* ============================================================
   RTL EXCEPTIONS — keep the HERO and the scroll/marquee carousels
   in the SAME visual layout as English (they are image-driven, not
   text, so mirroring them looks wrong and breaks the JS math).
   Only the text inside stays Arabic.
   ============================================================ */

/* HERO (Arabic): mirror the layout — the big title moves to the RIGHT and the
   cream card moves to the LEFT (opposite of English). The flex row reverses
   under direction:rtl; the title aligns right, the card text aligns right. */
html[dir="rtl"] .hero-bento,
html[dir="rtl"] .hb-frame,
html[dir="rtl"] .hb-content { direction: rtl; }
/* title block sits on the right, its Arabic text aligned to the right edge */
html[dir="rtl"] .hb-ar,
html[dir="rtl"] .hb-title { direction: rtl; text-align: right; }
/* the cream card (now on the left) keeps its Arabic text right-aligned inside */
html[dir="rtl"] .hb-card p { direction: rtl; text-align: right; }

/* Horizontal scroll + marquee carousels: keep an LTR coordinate space so the
   GSAP/translateX animations behave identically in Arabic (no jank / freeze).
   Card text inside is still Arabic and reads RTL. */
html[dir="rtl"] .why-track-container,
html[dir="rtl"] .why-track,
html[dir="rtl"] .svc-marquee-container,
html[dir="rtl"] .svc-marquee-row,
html[dir="rtl"] .svc-marquee-track,
html[dir="rtl"] .tst-marquee,
html[dir="rtl"] .tst-track { direction: ltr; }
/* the text content within the cards flips back to Arabic reading order */
html[dir="rtl"] .wcard-content,
html[dir="rtl"] .svc-card,
html[dir="rtl"] .tcard { direction: rtl; text-align: right; }
html[dir="rtl"] .tcard .who { flex-direction: row; text-align: right; }

/* ============================================================
   RTL — GUARANTEED CENTERING for the two flagged titles.
   Uses dedicated classes (no :has), placed at the very end of the
   file so it wins the cascade. Arabic only — English keeps its
   original left/right alignment because these rules are dir=rtl.
   ============================================================ */
html[dir="rtl"] .ar-center-block {
  text-align: center !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
html[dir="rtl"] .ar-center-block .eyebrow { justify-content: center !important; }
html[dir="rtl"] .ar-center-block .lead {
  text-align: center !important;
  max-width: 60ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Packages hero subtitle — target it directly by key so nothing overrides the
   centering (the .subhero-bento .lead base rule was winning). */
html[dir="rtl"] .subhero-bento [data-i18n="pkg.hero.lead"],
html[dir="rtl"] [data-i18n="pkg.hero.lead"] {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  max-width: 62ch !important;
}
/* Force the title to be a full-width block whose text centers. The real cause
   was the parent block (.sec-intro) being max-width:660px pinned left — the
   .ar-center-block rule above fixes that by making it full-width + auto margin.
   Here we just ensure the title itself is a full-width centered block. */
html[dir="rtl"] .ar-center {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}
html[dir="rtl"] .ar-center .line {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}
html[dir="rtl"] .ar-center .line > span,
html[dir="rtl"] .ar-center > span,
html[dir="rtl"] .ar-center em {
  text-align: center !important;
}

/* ============================================================
   [CLIENT round] Arabic centering + one-line fixes.
   Targeted by data-i18n key so English is untouched.
   Test in Arabic (عربي): feedback.html, packages.html,
   destinations.html, about.html, index.html (Serendib section).
   ============================================================ */

/* S1 — feedback "Leave your feedback" lead: center it. */
html[dir="rtl"] [data-i18n="fb.form.lead"] {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* S2 — packages intro lead: force one line. */
html[dir="rtl"] [data-i18n="pkg.intro.lead"] {
  text-align: center !important;
  white-space: nowrap !important;
  max-width: none !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: clamp(0.85rem, 1.15vw, 1.2rem) !important;
}

/* S3 — packages custom paragraph: button on its own centered line. */
html[dir="rtl"] [data-i18n="pkg.custom.p"],
html[dir="rtl"] [data-i18n="pkg.custom.p"] + a.btn {
  text-align: center !important;
}
html[dir="rtl"] [data-i18n="pkg.custom.p"] + a.btn {
  display: inline-flex !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* make the <p> a flex column so its inline button drops to a new centered row */
html[dir="rtl"] .lead:has(> [data-i18n="pkg.custom.p"]) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* S4 — destinations intro lead: center every line. */
html[dir="rtl"] [data-i18n="dest.intro.lead"] {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* S5 — Serendib section body: centered paragraph (wraps normally). */
html[dir="rtl"] .serendib-body,
html[dir="rtl"] [data-i18n-html="home.ser.body"] {
  text-align: center !important;
  white-space: normal !important;
  max-width: 70ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 900px) {
  html[dir="rtl"] [data-i18n="pkg.intro.lead"] { white-space: normal !important; }
}

/* Quote-band leads (destinations + packages): center every line. */
html[dir="rtl"] [data-i18n="dest.quote.lead"],
html[dir="rtl"] [data-i18n="pkg.quote.lead"] {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* S6 — about promise lead: center every line. */
html[dir="rtl"] [data-i18n="about.promise.lead"] {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}