/* ============================================================
   HIDAYAH TOUR & TRAVEL: design tokens
   ============================================================ */
:root{
  --ink:      #14293B;   /* deep navy, dark sections */
  --navy:     #1F4A66;   /* logo wordmark */
  --teal:     #1C6E8C;   /* logo swoosh, dark end */
  --cyan:     #3FA9D6;   /* logo swoosh, light end */
  --sky:      #E6F3FA;
  --paper:    #FBFBFD;
  --mist:     #F1F4F7;
  --white:    #FFFFFF;
  --line:     rgba(20,41,59,0.12);
  --ink-70:   rgba(20,41,59,0.72);
  --ink-55:   rgba(20,41,59,0.58);
  --on-dark:  rgba(255,255,255,0.74);

  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --nav-h: 72px;
  --wrap: 1180px;
  --radius: 28px;
  --ease: cubic-bezier(.16,1,.3,1);
  --shadow-lift: 0 40px 80px -32px rgba(20,41,59,0.38);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  overflow-x:clip;
}
body.nav-open{ overflow:hidden; }

h1,h2,h3{ margin:0 0 .5em; font-weight:800; letter-spacing:-.028em; line-height:1.08; text-wrap:balance; }
h1{ font-size:clamp(2.1rem, min(5vw, 7.2vh), 4.2rem); }
h2{ font-size:clamp(2rem, 4.8vw, 3.6rem); }
h3{ font-size:1.2rem; letter-spacing:-.015em; line-height:1.25; }
p{ margin:0 0 1em; }
a{ color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
dl,dd{ margin:0; }
section[id]{ scroll-margin-top:var(--nav-h); }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; width:100%; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:12px; top:-60px;
  background:var(--ink); color:var(--white);
  padding:10px 16px; border-radius:8px; z-index:200;
  font-size:.9rem; transition:top .15s ease;
}
.skip-link:focus{ top:12px; }

a:focus-visible,
button:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; border-radius:6px; }

/* ---------- logo: one source, works on light and dark ---------- */
.logo{
  display:block; width:var(--logo-w, 180px); aspect-ratio:640/153;
  background:url(../assets/logo.png) center/contain no-repeat;
}
.logo--hero{ --logo-w:clamp(190px, min(26vw, 34vh), 340px); margin:0 auto clamp(14px, 2.6vh, 28px); }
.logo--pass{ --logo-w:clamp(116px, 18vw, 150px); }
.logo--footer{ --logo-w:clamp(190px, 24vw, 260px); filter:brightness(0) invert(1); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:600 .98rem/1.2 var(--font); padding:15px 28px; border-radius:999px;
  text-decoration:none; border:1.5px solid transparent; cursor:pointer;
  transition:transform .5s var(--ease), background .25s ease, border-color .25s ease, color .25s ease, box-shadow .5s var(--ease);
}
.btn:hover{ transform:translateY(-2px) scale(1.02); }
.btn:active{ transform:scale(.97); transition-duration:.12s; }
.btn-primary{ background:var(--teal); color:var(--white); box-shadow:0 14px 30px -14px rgba(28,110,140,.8); }
.btn-primary:hover{ background:var(--navy); }
.btn-ghost{ color:var(--navy); border-color:rgba(31,74,102,.28); background:rgba(255,255,255,.5); }
.btn-ghost:hover{ border-color:var(--navy); background:var(--white); }
.btn-small{ padding:10px 20px; font-size:.88rem; }
.btn-light{ background:var(--white); color:var(--ink); }
.btn-outline{ color:var(--white); border-color:rgba(255,255,255,.45); }
.btn-outline:hover{ border-color:var(--white); background:rgba(255,255,255,.12); }

/* ---------- language change ---------- */
/* the page text dissolves across while the header, and its ID/EN switch, stays put */
.site-header{ view-transition-name:site-header; }
::view-transition-old(root){ animation:langOut .3s ease both; }
::view-transition-new(root){ animation:langIn .6s var(--ease) both; }
::view-transition-old(site-header){ display:none; }
::view-transition-new(site-header){ animation:none; }
@keyframes langOut{ to{ opacity:0; filter:blur(6px); transform:translateY(-6px); } }
@keyframes langIn{ from{ opacity:0; filter:blur(6px); transform:translateY(10px); } }
/* for browsers without View Transitions */
#main{ transition:opacity .4s ease; }
#main.is-lang-fading{ opacity:0; transition-duration:.2s; }

/* ---------- scroll reveal ---------- */
.js .reveal{
  opacity:0; transform:translateY(36px);
  transition:opacity 1.1s var(--ease) var(--d,0s), transform 1.1s var(--ease) var(--d,0s);
}
.js .reveal.is-in{ opacity:1; transform:none; }

.js .rise{ opacity:0; transform:translateY(22px); }
.js.is-ready .rise{
  opacity:1; transform:none;
  transition:opacity 1.1s var(--ease) var(--d,0s), transform 1.1s var(--ease) var(--d,0s);
}

/* headline, word by word */
.w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.14em; margin-bottom:-.14em; }
.w > i{ display:inline-block; font-style:normal; }
.js [data-split] .w > i{ transform:translateY(112%); }
.js.is-ready [data-split] .w > i{
  transform:none;
  transition:transform 1.1s var(--ease) calc(.14s + var(--w) * .032s);
}

.eyebrow{
  font-size:.82rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--teal); margin:0 0 14px;
}
.eyebrow--light{ color:#7CCBEC; }
.section-head{ max-width:760px; margin:0 0 clamp(36px, 6vw, 64px); }
.section-lead{ color:var(--ink-70); font-size:clamp(1.05rem, 1.5vw, 1.24rem); }
.section-lead--light{ color:var(--on-dark); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .4s ease, box-shadow .4s ease;
}
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:rgba(251,251,253,.78);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  box-shadow:0 1px 0 var(--line);
  transition:opacity .4s ease;
}
.site-header.is-scrolled::before{ opacity:1; }
.header-inner{ display:flex; align-items:center; gap:22px; height:var(--nav-h); }

.brand{ display:block; margin-right:auto; transition:opacity .5s ease, transform .7s var(--ease); }
.brand .logo{ --logo-w:clamp(150px, 16vw, 188px); }
/* the large hero logo hands over to the header one once you scroll */
.js .site-header:not(.is-scrolled) .brand{ opacity:0; transform:translateY(8px); pointer-events:none; }

.main-nav ul{ display:flex; gap:clamp(16px, 2.2vw, 30px); }
.main-nav a{
  position:relative; display:block; text-decoration:none; font-weight:500; font-size:.94rem;
  color:var(--ink-70); padding:6px 0; transition:color .25s ease;
}
.main-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px;
  background:var(--cyan); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease);
}
.main-nav a:hover,.main-nav a.is-current{ color:var(--ink); }
.main-nav a:hover::after,.main-nav a.is-current::after{ transform:scaleX(1); }
.main-nav a,.header-cta{ white-space:nowrap; }

/* services dropdown */
.nav-dropdown{ position:relative; }
.nav-drop-btn{
  position:relative; display:flex; align-items:center; gap:6px; border:none; background:none; cursor:pointer; padding:6px 0;
  font:500 .94rem/1.6 var(--font); color:var(--ink-70); white-space:nowrap; transition:color .25s ease;
}
.nav-drop-btn::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px;
  background:var(--cyan); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease);
}
.nav-drop-btn svg{ transition:transform .5s var(--ease); }
.nav-dropdown:hover .nav-drop-btn,.nav-dropdown.is-open .nav-drop-btn,
.nav-dropdown:has(a.is-current) .nav-drop-btn{ color:var(--ink); }
.nav-dropdown:has(a.is-current) .nav-drop-btn::after{ transform:scaleX(1); }
.nav-dropdown.is-open .nav-drop-btn svg{ transform:rotate(180deg); }
.main-nav .nav-drop-menu{ display:block; }
.main-nav .nav-drop-menu a::after{ display:none; }
@keyframes navUnfold{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }

@media (min-width: 821px){
  .nav-drop-menu{
    position:absolute; top:calc(100% + 12px); left:-16px; min-width:210px; padding:8px; border-radius:18px;
    background:var(--white); box-shadow:0 26px 50px -20px rgba(20,41,59,.45), 0 0 0 1px rgba(20,41,59,.07);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .25s ease, transform .5s var(--ease), visibility 0s linear .25s;
  }
  /* keeps the menu open while the mouse crosses the gap below the button */
  .nav-drop-menu::before{ content:""; position:absolute; left:0; right:0; top:-14px; height:14px; }
  .nav-dropdown.is-open .nav-drop-menu{ opacity:1; visibility:visible; transform:none; transition:opacity .25s ease, transform .5s var(--ease); }
  .main-nav .nav-drop-menu a{ padding:9px 12px; border-radius:11px; transition:background .2s ease, color .2s ease; }
  .main-nav .nav-drop-menu a:hover,.main-nav .nav-drop-menu a:focus-visible{ background:var(--sky); }
  .main-nav .nav-drop-menu a.is-current{ background:var(--mist); }
}
@media (min-width: 821px) and (hover:hover){
  .nav-dropdown:not(.is-dismissed):hover .nav-drop-menu{ opacity:1; visibility:visible; transform:none; transition:opacity .25s ease, transform .5s var(--ease); }
  .nav-dropdown:not(.is-dismissed):hover .nav-drop-btn svg{ transform:rotate(180deg); }
}

.lang-toggle{
  position:relative; display:grid; grid-template-columns:1fr 1fr; flex-shrink:0;
  background:rgba(20,41,59,.07); border-radius:999px; padding:3px;
}
.lang-thumb{
  position:absolute; top:3px; bottom:3px; left:3px; width:calc(50% - 3px);
  background:var(--white); border-radius:999px; box-shadow:0 2px 8px rgba(20,41,59,.18);
  transition:transform .6s var(--ease);
}
.lang-toggle[data-active="en"] .lang-thumb{ transform:translateX(100%); }
.lang-btn{
  position:relative; border:none; background:none; cursor:pointer; min-width:38px;
  font:700 .76rem/1 var(--font); letter-spacing:.04em; padding:8px 10px;
  color:var(--ink-55); transition:color .3s ease;
}
.lang-btn.is-active{ color:var(--ink); }

.nav-toggle{
  display:none; width:42px; height:42px; border-radius:12px; border:none;
  background:rgba(20,41,59,.07); position:relative; cursor:pointer;
}
.nav-toggle-bar,.nav-toggle-bar::before,.nav-toggle-bar::after{
  content:""; position:absolute; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .5s var(--ease), background .2s ease;
}
.nav-toggle-bar{ top:20px; left:11px; right:11px; }
.nav-toggle-bar::before{ top:-6px; left:0; right:0; }
.nav-toggle-bar::after{ top:6px; left:0; right:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar{ background:transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before{ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after{ transform:translateY(-6px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ --hp:0; --pass-start:0px; position:relative; }
.hero-stage{
  position:relative; overflow:hidden; text-align:center;
  padding:calc(var(--nav-h) + 12px) 0 56px;
  background:linear-gradient(180deg, #FFFFFF 0%, #F2F9FD 44%, #D6ECF8 100%);
}
.hero-sky{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.route{ fill:none; stroke-linecap:round; }
.route--base{ stroke:rgba(31,74,102,.16); stroke-width:2; stroke-dasharray:2 11; }
.route--done{ stroke:var(--cyan); stroke-width:3; opacity:.85; }
.plane{ fill:var(--teal); }

.cloud{
  position:absolute; border-radius:50%; pointer-events:none; filter:blur(36px);
  background:rgba(255,255,255,.9); will-change:transform;
}
.cloud--a{ width:46vw; height:17vw; left:-10vw; bottom:18%; transform:translateX(calc(var(--hp) * 8vw)); }
.cloud--b{ width:38vw; height:13vw; right:-8vw; top:34%; transform:translateX(calc(var(--hp) * -10vw)); }

.hero-copy{ position:relative; z-index:2; width:min(980px, 100%); margin:0 auto; padding:0 24px; }
.hero-lead{ font-size:clamp(1rem, min(1.5vw, 2.3vh), 1.24rem); color:var(--ink-70); max-width:58ch; margin:0 auto; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:clamp(14px, 2.6vh, 26px); }

/* ---- boarding pass ---- */
.pass{ position:relative; z-index:3; width:min(860px, calc(100% - 32px)); margin:40px auto 0; text-align:left; }
.slider{
  background:var(--white); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-lift), 0 0 0 1px rgba(20,41,59,.05);
}
.pass-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:clamp(16px, 2.4vw, 24px) clamp(20px, 3.4vw, 36px);
  border-bottom:1.5px dashed var(--line);
}
.pass-route{
  display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.06em;
  font-size:.86rem; color:var(--navy); white-space:nowrap;
}
.pass-route b{ color:var(--teal); font-weight:800; }
.pass-route i{
  display:block; width:clamp(22px, 5vw, 56px); height:2px; position:relative;
  background:linear-gradient(90deg, var(--line), var(--cyan));
}
.pass-route i::after{
  content:""; position:absolute; right:-1px; top:-3px; width:8px; height:8px;
  border-radius:50%; background:var(--cyan);
}

.slider-track{ display:grid; }
.slide{
  grid-area:1 / 1; opacity:0; visibility:hidden;
  padding:clamp(22px, 3.6vw, 38px) clamp(20px, 3.4vw, 36px);
  transition:opacity .4s ease, visibility 0s linear .4s;
}
.slide > *{ transform:translateY(16px); opacity:0; transition:transform .9s var(--ease), opacity .7s ease; }
.slide.is-active{ opacity:1; visibility:visible; transition:opacity .4s ease; }
.slide.is-active > *{ transform:none; opacity:1; }
.slide.is-active > :nth-child(2){ transition-delay:.05s; }
.slide.is-active > :nth-child(3){ transition-delay:.1s; }
.slide-tag{ font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--teal); margin-bottom:10px; }
.slide h3{ font-size:clamp(1.5rem, 3.4vw, 2.5rem); font-weight:800; letter-spacing:-.025em; line-height:1.1; margin-bottom:12px; }
.slide p:last-child{ color:var(--ink-70); font-size:clamp(.96rem, 1.5vw, 1.1rem); margin:0; max-width:62ch; }

.slider-controls{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px clamp(14px, 2.6vw, 28px); background:var(--mist);
}
.slider-btn{
  width:40px; height:40px; border-radius:50%; border:none; background:var(--white); color:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 2px 8px rgba(20,41,59,.12);
  transition:background .25s ease, color .25s ease, transform .5s var(--ease);
}
.slider-btn:hover{ background:var(--ink); color:var(--white); transform:scale(1.08); }
.slider-dots{ display:flex; gap:8px; align-items:center; }
.slider-dot{
  position:relative; width:10px; height:10px; border-radius:999px; border:none; padding:0;
  background:rgba(20,41,59,.2); cursor:pointer; overflow:hidden;
  transition:width .7s var(--ease), background .3s ease;
}
.slider-dot::before{ content:""; position:absolute; inset:-12px 0; }
.slider-dot.is-active{ width:36px; }
.slider-dot.is-active::after{
  content:""; position:absolute; inset:0; background:var(--teal); border-radius:inherit;
  transform-origin:left; animation:dotFill var(--autoplay, 6s) linear both;
}
.slider.is-paused .slider-dot.is-active::after{ animation-play-state:paused; }
@keyframes dotFill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* pinned hero: copy recedes while the pass rises and fills the stage */
@media (min-width:900px) and (min-height:620px){
  .hero{ height:230vh; }
  .hero-stage{ position:sticky; top:0; height:100vh; padding-bottom:0; }
  .hero-copy{
    opacity:calc(1 - var(--hp) * 2.2);
    transform:translateY(calc(var(--hp) * -70px)) scale(calc(1 - var(--hp) * .07));
    will-change:transform, opacity;
  }
  .hero.is-past-copy .hero-copy{ pointer-events:none; }
  .pass{
    position:absolute; left:50%; top:calc(50% + var(--nav-h) / 3); margin:0;
    transform:translate(-50%, -50%) translateY(calc(var(--pass-start) * (1 - var(--hp)))) scale(calc(.9 + var(--hp) * .1));
    will-change:transform;
  }
}

/* ============================================================
   STATS
   ============================================================ */
.stats{ background:var(--ink); color:var(--white); padding:clamp(64px, 10vw, 120px) 0; }
.stat-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:32px; }
.stat dt{
  font-size:clamp(2.6rem, 5.6vw, 4.6rem); font-weight:800; letter-spacing:-.04em; line-height:1;
  margin-bottom:12px; font-variant-numeric:tabular-nums;
  background:linear-gradient(120deg, #FFFFFF 10%, #7CCBEC 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat dd{ color:var(--on-dark); font-size:.98rem; max-width:24ch; }
.fact-row{
  display:flex; flex-wrap:wrap; gap:18px 64px; margin-top:clamp(40px, 6vw, 64px);
  padding-top:28px; border-top:1px solid rgba(255,255,255,.14);
}
.fact-row dt{ font-size:.76rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#7CCBEC; margin-bottom:4px; }
.fact-row dd{ font-weight:600; }

/* ============================================================
   SERVICES: stacking cards
   ============================================================ */
.services{ padding:clamp(80px, 11vw, 150px) 0; }
.svc-stack{ display:grid; gap:18px; }
.svc-card{
  position:relative; display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:32px;
  min-height:clamp(360px, 62vh, 520px); padding:clamp(28px, 5vw, 64px);
  border-radius:var(--radius); overflow:hidden; transform-origin:50% 0;
  box-shadow:0 30px 60px -36px rgba(20,41,59,.5);
  will-change:transform;
}
.svc-num{ display:block; font-weight:800; font-size:.92rem; letter-spacing:.08em; margin-bottom:clamp(18px, 3vw, 34px); opacity:.65; }
.svc h3{ font-size:clamp(1.9rem, 4.4vw, 3.4rem); font-weight:800; letter-spacing:-.03em; line-height:1.05; margin-bottom:.45em; }
.svc p{ font-size:clamp(1rem, 1.5vw, 1.18rem); margin:0; max-width:46ch; opacity:.82; }
.svc-link{
  display:inline-block; margin-top:20px; font-weight:700; text-decoration:none;
  border-bottom:2px solid currentColor; padding-bottom:2px; transition:opacity .25s ease;
}
.svc-link:hover{ opacity:.7; }

.svc-art{ display:flex; justify-content:center; }
.svc-art svg{ width:min(100%, 320px); height:auto; overflow:visible; }
.svc-art .draw,.svc-art .accent{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.svc-art .draw{ stroke:currentColor; stroke-width:2.5; opacity:.42; }
.svc-art .accent{ stroke:var(--art-accent, var(--cyan)); stroke-width:5; }
/* every shape has pathLength="1". Selected by tag: browsers can miss updates through the camelCase [pathLength] selector */
.svc-art :is(circle, ellipse, path, rect){ stroke-dasharray:1; stroke-dashoffset:0; }
.js .svc-art :is(circle, ellipse, path, rect){ stroke-dashoffset:1; opacity:0; transition:stroke-dashoffset 1.9s var(--ease), opacity .2s ease; }
.js .svc.is-in .svc-art :is(circle, ellipse, path, rect){ stroke-dashoffset:0; opacity:1; }

.svc--ink .svc-card{ background:var(--ink); color:var(--white); }
.svc--teal .svc-card{ background:linear-gradient(135deg, var(--teal), #124D66); color:var(--white); --art-accent:#BDE6F7; }
.svc--sky .svc-card{ background:var(--sky); color:var(--ink); --art-accent:var(--teal); }
.svc--white .svc-card{ background:var(--white); color:var(--ink); --art-accent:var(--teal); box-shadow:0 30px 60px -36px rgba(20,41,59,.5), inset 0 0 0 1px var(--line); }
.svc--deep .svc-card{ background:linear-gradient(135deg, var(--navy), var(--cyan)); color:var(--white); --art-accent:#FFFFFF; }
.svc--road .svc-card{ background:linear-gradient(135deg, #0F3E55, var(--ink)); color:var(--white); --art-accent:#7CCBEC; }

@media (min-width:760px) and (min-height:620px){
  .svc-stack{ gap:16vh; padding-bottom:6vh; }
  .svc{ position:sticky; top:calc(var(--nav-h) + 10px + var(--i) * 12px); }
}

/* ============================================================
   DESTINATIONS
   ============================================================ */
.destinations{ padding:clamp(20px, 4vw, 40px) 0 clamp(80px, 11vw, 140px); overflow:hidden; }
.dest-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px 40px; margin-bottom:clamp(26px, 4vw, 44px); }
.dest-head > div{ max-width:680px; }
.dest-head .section-lead{ margin-bottom:0; }
.dest-head .btn{ flex:none; }

.dest-rail{
  --gutter:max(24px, calc((100vw - var(--wrap)) / 2 + 24px));
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px var(--gutter) 22px;
  scroll-padding-left:var(--gutter); scrollbar-width:none;
}
.dest-rail::-webkit-scrollbar{ display:none; }
.dest-card{ flex:none; width:clamp(248px, 25vw, 320px); scroll-snap-align:start; }
.dest-card a{
  position:relative; display:flex; align-items:flex-end; height:clamp(340px, 34vw, 430px); border-radius:24px; overflow:hidden;
  text-decoration:none; color:var(--white); background:var(--ink);
  box-shadow:0 26px 44px -30px rgba(20,41,59,.75);
  transition:transform .7s var(--ease), box-shadow .5s var(--ease);
}
.dest-card a:hover{ transform:translateY(-6px); box-shadow:0 36px 56px -30px rgba(20,41,59,.85); }
.dest-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.dest-card a:hover img{ transform:scale(1.07); }
.dest-card a::after{ content:""; position:absolute; inset:45% 0 0; background:linear-gradient(180deg, transparent, rgba(12,26,38,.88)); }
.dest-card--tile a{ background:linear-gradient(145deg, var(--teal), #0F3E55 75%); }
.dest-text{ position:relative; z-index:1; padding:20px; }
.dest-text strong{ display:block; font-size:1.5rem; font-weight:800; letter-spacing:-.025em; line-height:1.15; margin-bottom:4px; }
.dest-text small{ display:block; font-size:.88rem; line-height:1.42; color:rgba(255,255,255,.86); }
.dest-controls{ display:flex; justify-content:flex-end; gap:8px; }

/* ============================================================
   VISA
   ============================================================ */
.visa-section{ background:var(--ink); color:var(--white); position:relative; overflow:clip; }
.visa-section::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60vw 60vw at 82% 30%, rgba(63,169,214,.2), transparent 70%);
}
.visa-stage{ position:relative; padding:clamp(80px, 11vw, 140px) 0; }
.visa-grid{ display:grid; grid-template-columns:.86fr 1.14fr; gap:clamp(32px, 5vw, 72px); align-items:center; }
.visa-section h2{ font-size:clamp(2rem, 3.9vw, 3.1rem); }
.visa-cta{ margin-top:6px; }
.flag-face{ text-decoration:none; }
.main-nav a.nav-apply{ color:var(--teal); font-weight:700; }
.visa-note{ margin:22px 0 0; font-size:.96rem; color:var(--on-dark); }
.visa-note a{ color:#7CCBEC; font-weight:700; text-decoration:none; }
.visa-note a:hover{ text-decoration:underline; }

.flag-grid{ position:relative; display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.flag-tile{ perspective:800px; will-change:transform, opacity; }
.flag-face{
  --rx:0deg; --ry:0deg; --mx:50%; --my:50%;
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  height:100%; aspect-ratio:4/3; padding:12px; border-radius:18px; text-align:center;
  background:linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 18px 34px -22px rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .7s var(--ease), background .3s ease;
}
.flag-tile:hover .flag-face{ transition-duration:.15s, .3s; }
.flag-face::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
  background:radial-gradient(180px at var(--mx) var(--my), rgba(255,255,255,.26), transparent 70%);
  transition:opacity .3s ease;
}
.flag-tile:hover .flag-face::after{ opacity:1; }
.flag-img{
  display:block; height:clamp(38px, 5.4vw, 66px); width:auto; max-width:92%; border-radius:5px;
  box-shadow:0 8px 18px -8px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.1);
}
.flag-name{ font-size:clamp(.72rem, 1.1vw, .88rem); font-weight:600; line-height:1.2; color:var(--white); }

/* reveal fallback when the deal-out scrub is not running */
.js .flag-grid:not(.is-scrubbed) .flag-tile{ opacity:0; transform:translateY(26px) scale(.94); transition:opacity .9s var(--ease) calc(var(--i) * .05s), transform .9s var(--ease) calc(var(--i) * .05s); }
.js .flag-grid:not(.is-scrubbed).is-in .flag-tile{ opacity:1; transform:none; }

@media (min-width:900px) and (min-height:620px){
  .visa-section{ height:240vh; }
  .visa-stage{ position:sticky; top:0; height:100vh; padding:var(--nav-h) 0 0; display:flex; align-items:center; }
  .flag-img{ height:clamp(38px, 7.6vh, 66px); }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about{ padding:clamp(80px, 11vw, 150px) 0; }
.about-head{ max-width:820px; margin-bottom:clamp(28px, 4vw, 48px); }
.about-copy p{ font-size:clamp(1.3rem, 2.7vw, 2.15rem); font-weight:600; line-height:1.36; letter-spacing:-.018em; margin-bottom:1em; max-width:30em; }
.js .about-copy .tw{ opacity:.16; transition:opacity .35s linear; }
.js .about-copy .tw.is-lit{ opacity:1; }
.values-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-top:clamp(28px, 5vw, 56px); }
.value-card{
  background:var(--white); border-radius:22px; padding:30px 28px;
  box-shadow:inset 0 0 0 1px var(--line);
  transition:opacity 1.1s var(--ease) var(--d,0s), transform 1.1s var(--ease) var(--d,0s), box-shadow .5s var(--ease);
}
.value-card:hover{ box-shadow:inset 0 0 0 1px var(--line), 0 30px 50px -30px rgba(20,41,59,.4); }
.value-card h3{ color:var(--teal); font-size:1.4rem; margin-bottom:10px; }
.value-card p{ color:var(--ink-70); margin:0; }

/* ---------- office map ---------- */
.office{
  display:grid; grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr); margin-top:clamp(28px, 5vw, 56px);
  border-radius:var(--radius); overflow:hidden; background:var(--white); box-shadow:inset 0 0 0 1px var(--line), 0 30px 60px -40px rgba(20,41,59,.5);
}
.office-copy{ padding:clamp(26px, 4vw, 48px); align-self:center; }
.office-copy h3{ font-size:clamp(1.5rem, 2.8vw, 2.2rem); font-weight:800; line-height:1.12; margin-bottom:12px; }
.office-copy p:not(.eyebrow){ color:var(--ink-70); margin-bottom:22px; }
.office-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.office-actions .btn{ padding:12px 20px; font-size:.92rem; }
.office-map{ min-height:clamp(300px, 34vw, 430px); background:var(--mist); }
.office-map iframe{ display:block; width:100%; height:100%; min-height:inherit; border:0; }

/* ============================================================
   CLIENTS & PARTNERS
   ============================================================ */
.partners{ padding:clamp(80px, 11vw, 150px) 0; background:var(--mist); }
.logo-block{ margin-bottom:clamp(30px, 4vw, 44px); }
.logo-block:last-child{ margin-bottom:0; }
.partners > .wrap{ margin-bottom:clamp(30px, 4vw, 44px); }
.logo-heading{ font-size:.8rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-55); margin-bottom:16px; line-height:1.3; }

.logo-tile{
  display:flex; align-items:center; justify-content:center; flex:none;
  height:96px; width:184px; padding:14px 20px; background:var(--white); border-radius:18px;
  box-shadow:inset 0 0 0 1px var(--line);
  font-weight:700; font-size:1.02rem; letter-spacing:-.01em; color:var(--navy); text-align:center; line-height:1.2;
}
.logo-tile img{ display:block; max-height:66px; max-width:100%; width:auto; height:auto; object-fit:contain; }

.client-row{ display:flex; flex-wrap:wrap; gap:14px; }
.client-row .logo-tile{ flex:1 1 280px; width:auto; height:116px; font-size:1.14rem; }
.client-row .logo-tile{ gap:18px; text-align:left; }
.client-row .logo-tile img{ max-height:84px; max-width:84px; flex:none; }

.marquee{
  overflow:hidden; padding:2px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track{ display:flex; gap:14px; width:max-content; animation:slideLeft var(--dur, 50s) linear infinite; }
.marquee-set{ display:flex; gap:14px; }
.marquee--reverse .marquee-track{ animation-direction:reverse; }
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{ animation-play-state:paused; }
@keyframes slideLeft{ to{ transform:translateX(calc(-50% - 7px)); } }

/* ============================================================
   INSTAGRAM
   ============================================================ */
.ig-band{ padding:clamp(56px, 8vw, 96px) 0; background:var(--paper); }
.ig-inner{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(20px, 3vw, 40px); }
.ig-mark{
  display:grid; place-items:center; width:76px; height:76px; border-radius:22px; color:var(--white);
  background:linear-gradient(135deg, #F9CE34 0%, #EE2A7B 50%, #6228D7 100%);
}
.ig-copy .eyebrow{ margin-bottom:6px; }
.ig-copy h2{ font-size:clamp(1.6rem, 3.2vw, 2.5rem); margin-bottom:.3em; }
.ig-copy .section-lead{ margin:0; max-width:56ch; }
.ig-action{ display:flex; flex-direction:column; align-items:center; gap:9px; }
.ig-handle{ font-size:.88rem; font-weight:600; color:var(--ink-70); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{
  position:relative; overflow:hidden; color:var(--white); text-align:center;
  background:linear-gradient(160deg, var(--teal), #0F3E55 80%);
  padding:clamp(90px, 13vw, 170px) 0 clamp(64px, 8vw, 100px);
}
.contact-glow{
  position:absolute; left:50%; top:-30%; width:90vw; height:90vw; margin-left:-45vw; border-radius:50%;
  background:radial-gradient(closest-side, rgba(63,169,214,.5), transparent);
  animation:breathe 12s ease-in-out infinite alternate;
}
@keyframes breathe{ from{ transform:scale(.86); } to{ transform:scale(1.08) translateY(4%); } }
.contact-inner{ position:relative; }
.contact-head{ max-width:800px; margin:0 auto; }
.contact-head .section-lead{ max-width:56ch; margin:0 auto; }
.contact-methods{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:34px; }
.offices{ margin-top:clamp(56px, 8vw, 96px); padding-top:30px; border-top:1px solid rgba(255,255,255,.2); }
.offices h3{ font-size:.8rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#BDE6F7; margin-bottom:22px; }
.offices ul{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; }
.offices li{ font-size:.96rem; color:rgba(255,255,255,.84); }
.offices strong{ display:block; color:var(--white); font-size:1.3rem; font-weight:800; letter-spacing:-.02em; margin-bottom:4px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--ink); color:var(--on-dark); padding:52px 0; }
.footer-inner{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 36px; justify-content:space-between; }
.footer-note{ margin:0; font-size:.94rem; }
.footer-social{
  display:inline-flex; align-items:center; gap:8px; color:var(--white); text-decoration:none; font-size:.92rem; font-weight:600;
  transition:color .25s ease;
}
.footer-social:hover{ color:#7CCBEC; }
.footer-copy{ margin:0; font-size:.84rem; color:rgba(255,255,255,.55); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px){
  .header-cta{ display:none; }
}

@media (max-width: 980px){
  .office{ grid-template-columns:minmax(0, 1fr); }
  .ig-inner{ grid-template-columns:auto 1fr; }
  .ig-action{ grid-column:1 / -1; align-items:flex-start; }
  .stat-grid{ grid-template-columns:repeat(2, 1fr); }
  .values-grid{ grid-template-columns:1fr; }
  .visa-grid{ grid-template-columns:1fr; }
}

@media (max-width: 820px){
  .main-nav{ overflow-y:auto; }
  .nav-drop-btn{ width:100%; justify-content:space-between; font-size:1.7rem; font-weight:700; letter-spacing:-.02em; padding:12px 0; color:var(--ink); }
  .nav-drop-btn::after{ display:none; }
  .nav-drop-btn svg{ width:18px; height:18px; }
  /* tapping Layanan unfolds its links in place */
  .main-nav .nav-drop-menu{ display:none; }
  .main-nav .nav-dropdown.is-open .nav-drop-menu{ display:block; animation:navUnfold .5s var(--ease) both; }
  .main-nav .nav-drop-menu a{ font-size:1.2rem; font-weight:600; padding:8px 0 8px 14px; }
  .main-nav{
    position:fixed; inset:0; z-index:-1; padding:calc(var(--nav-h) + 24px) 24px 24px;
    background:var(--paper);
    opacity:0; visibility:hidden;
    transition:opacity .35s ease, visibility 0s linear .35s;
  }
  .main-nav.is-open{ opacity:1; visibility:visible; transition:opacity .35s ease; }
  .main-nav ul{ flex-direction:column; gap:0; }
  .main-nav li{ transform:translateY(14px); opacity:0; transition:transform .7s var(--ease), opacity .5s ease; }
  .main-nav.is-open li{ transform:none; opacity:1; }
  .main-nav.is-open li:nth-child(2){ transition-delay:.04s; }
  .main-nav.is-open li:nth-child(3){ transition-delay:.08s; }
  .main-nav.is-open li:nth-child(4){ transition-delay:.12s; }
  .main-nav.is-open li:nth-child(5){ transition-delay:.16s; }
  .main-nav.is-open li:nth-child(6){ transition-delay:.2s; }
  .main-nav.is-open li:nth-child(7){ transition-delay:.24s; }
  .main-nav a{ font-size:1.7rem; font-weight:700; letter-spacing:-.02em; padding:12px 0; color:var(--ink); }
  .main-nav a::after{ display:none; }
  .nav-toggle{ display:block; }
  .js .nav-open .site-header .brand{ opacity:1; transform:none; pointer-events:auto; }
}

@media (max-width: 820px){
  :root{ --nav-h:64px; }
  .svc-card{ grid-template-columns:1fr; min-height:0; gap:22px; }
  .svc-art{ justify-content:flex-start; }
  .svc-art svg{ width:128px; }
  .offices ul{ grid-template-columns:1fr; gap:20px; }
  .footer-inner{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 560px){
  .hero-actions .btn{ width:100%; }
  .flag-grid{ gap:9px; }
  .flag-face{ padding:8px; border-radius:14px; gap:7px; }
  .flag-img{ height:34px; }
  .stat-grid{ gap:28px 18px; }
  .logo-tile{ height:80px; width:150px; padding:10px 16px; font-size:.94rem; }
  .logo-tile img{ max-height:54px; }
  .client-row .logo-tile{ flex-basis:100%; height:96px; font-size:1.02rem; gap:14px; }
  .client-row .logo-tile img{ max-height:68px; max-width:68px; }
  .contact-methods .btn{ width:100%; }
  .dest-controls{ display:none; }
  .dest-card{ width:78vw; }
  .pass-route{ font-size:.74rem; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; transition-delay:0s !important; }
  .marquee{ -webkit-mask-image:none; mask-image:none; }
  .marquee-track,.marquee-set{ flex-wrap:wrap; width:auto; }
  .marquee-track{ padding:0 24px; }
  .marquee-set[aria-hidden]{ display:none; }
  .hero{ height:auto !important; }
  .visa-section{ height:auto !important; }
  .hero-stage,.visa-stage{ position:relative !important; height:auto !important; padding-bottom:56px !important; }
  .pass{ position:relative !important; left:auto !important; top:auto !important; transform:none !important; margin:40px auto 0 !important; }
  .hero-copy{ opacity:1 !important; transform:none !important; }
  .svc{ position:static !important; }
  .svc-stack{ gap:18px !important; }
}