:root{
  --sage:#8DB497; --sage-light:#CFE0D4; --sage-deep:#6E9A7A;
  --sand:#EBCDA0; --sand-deep:#E0B878;
  --terra:#CC633E; --terra-dark:#A84E2E;
  --charcoal:#343232; --cream:#FAF8F5; --cream-2:#F4ECDD;
  --line:#E4DCCB; --dim:#8B857B;
  --head:'Poppins', system-ui, sans-serif;
  --body:'Lexend', system-ui, sans-serif;
  --mono:'Space Mono', ui-monospace, monospace;
  --safe-top: env(safe-area-inset-top, 0px);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{margin:0; background:var(--cream); color:var(--charcoal); font-family:var(--body); font-weight:300; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--head); font-weight:600; line-height:1.14; letter-spacing:-.015em; margin:0}
p{margin:0 0 1em}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px}
.wrap-narrow{max-width:760px; margin:0 auto; padding:0 24px}
.eyebrow{font-family:var(--mono); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--terra); display:flex; align-items:center; gap:9px}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--terra); opacity:.6}
.btn{font-family:var(--head); font-weight:500; font-size:14px; border-radius:999px; padding:11px 22px; cursor:pointer; border:1px solid transparent; transition:transform .15s, box-shadow .2s, background .2s; display:inline-flex; align-items:center; gap:8px}
.btn-primary{background:var(--terra); color:#fff; box-shadow:0 8px 22px rgba(204,99,62,.26)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(204,99,62,.34)}
.btn-ghost{background:transparent; color:var(--charcoal); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--charcoal); transform:translateY(-2px)}

/* nav */
header{position:fixed; top:0; left:0; right:0; z-index:50; transition:background .3s, box-shadow .3s, border-color .3s; border-bottom:1px solid transparent; padding-top:var(--safe-top)}
header.solid{background:rgba(250,248,245,.9); backdrop-filter:saturate(140%) blur(14px); border-bottom-color:var(--line); box-shadow:0 6px 24px rgba(52,50,50,.05)}
.nav{display:flex; align-items:center; justify-content:space-between; height:66px}
/* Two lockups, one rule: ink on light, cream on dark.
   Default is ink because most pages sit on cream. Pages whose hero is a dark
   photograph get header.hero-dark, and swap back to ink once the bar goes solid. */
.brand-logo{height:46px; width:auto; display:block}
@media(max-width:600px){.brand-logo{height:38px}}
.l-dark{display:none}
.l-light{display:block}
header.hero-dark:not(.solid) .l-dark{display:block}
header.hero-dark:not(.solid) .l-light{display:none}
.navlinks{display:flex; align-items:center; gap:28px}
.navlinks a{font-size:14px; color:var(--charcoal); opacity:.82; transition:opacity .2s, color .2s}
.navlinks a:hover, .navlinks a.active{opacity:1; color:var(--terra)}
.navtoggle{display:none; background:none; border:none; cursor:pointer; padding:8px; color:var(--charcoal)}

/* page hero */
.pagehero{padding:128px 0 50px; position:relative; overflow:hidden}
.pagehero h1{font-size:clamp(34px,5vw,54px); margin:16px 0 0}
.pagehero p{font-size:18px; color:#56514A; max-width:46ch; margin:18px 0 0}

/* footer */
footer{background:#2a2828; color:rgba(250,248,245,.7); padding:54px 0 30px; margin-top:40px}
.f-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; margin-bottom:36px}
footer h5{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--sand); margin:0 0 14px}
footer a{display:block; font-size:14px; color:rgba(250,248,245,.7); margin-bottom:9px; transition:color .2s}
footer a:hover{color:#fff}
.f-brand .brand-logo{height:42px; margin-bottom:12px}
.f-brand p{font-size:13.5px; color:rgba(250,248,245,.55); max-width:30ch}
.f-soc{display:flex; gap:12px; margin-top:14px}
.f-soc a{width:36px; height:36px; border:1px solid rgba(250,248,245,.18); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0}
.f-soc a:hover{border-color:var(--sand)}
.f-bot{border-top:1px solid rgba(250,248,245,.12); padding-top:22px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:rgba(250,248,245,.5)}

/* blog */
.bloggrid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.bcard{background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; transition:transform .25s, box-shadow .25s; display:flex; flex-direction:column}
.bcard:hover{transform:translateY(-4px); box-shadow:0 22px 44px -26px rgba(52,50,50,.4)}
.bcard .bimg{aspect-ratio:16/10; overflow:hidden}
.bcard .bimg img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.bcard:hover .bimg img{transform:scale(1.05)}
.bcard .bbody{padding:22px; display:flex; flex-direction:column; flex:1}
.bcard .btag{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--terra)}
.bcard h3{font-size:19px; margin:10px 0 8px; line-height:1.25}
.bcard p{font-size:14px; color:#56514A; margin:0 0 16px; flex:1}
.bcard .bmeta{font-family:var(--mono); font-size:11px; color:var(--dim); letter-spacing:.03em}

/* article */
.article{padding-top:120px}
.article-hero{aspect-ratio:21/9; border-radius:24px; overflow:hidden; margin:22px 0 0; box-shadow:0 28px 60px -36px rgba(52,50,50,.4)}
.article-hero img{width:100%; height:100%; object-fit:cover}
.article-body{font-size:17.5px; color:#3f3b36; line-height:1.78}
.article-body h3{font-family:var(--head); font-size:23px; margin:34px 0 12px; color:var(--charcoal)}
.article-body p{margin:0 0 1.1em}
.article-body ul{margin:0 0 1.2em; padding-left:0; list-style:none}
.article-body li{position:relative; padding-left:24px; margin-bottom:9px}
.article-body li::before{content:"›"; position:absolute; left:4px; color:var(--terra); font-weight:700}
.article-body strong{color:var(--charcoal); font-weight:500}
.article-meta{display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:12px; color:var(--dim); letter-spacing:.04em; margin-top:18px}
.article-cta{background:var(--cream-2); border:1px solid var(--line); border-radius:20px; padding:30px; text-align:center; margin:46px 0 0}
.article-cta h3{font-size:22px; margin-bottom:8px}
.article-cta p{color:#56514A; margin-bottom:18px}

/* simple sections reused */
.sec{padding:78px 0; position:relative}
.sec-head{max-width:620px; margin-bottom:40px}
.sec-head.center{margin-left:auto; margin-right:auto; text-align:center}
.sec-head h2{font-size:clamp(28px,4vw,42px); margin-top:14px}
.sec-head p{font-size:17px; color:#56514A; margin-top:14px}
.store{display:inline-flex; align-items:center; gap:10px; background:var(--charcoal); color:#fff; border-radius:13px; padding:10px 16px; transition:transform .15s, box-shadow .2s}
.store:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(52,50,50,.22)}
.store svg{width:22px; height:22px; flex:0 0 auto}
.store .s1{font-size:9.5px; opacity:.8; line-height:1}
.store .s2{font-family:var(--head); font-weight:500; font-size:15px; line-height:1.15}
.rev{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease}
.rev.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){*{animation:none!important; transition:none!important} .rev{opacity:1; transform:none} html{scroll-behavior:auto}}
@media (max-width:900px){
  .bloggrid{grid-template-columns:1fr 1fr}
  .f-grid{grid-template-columns:1fr 1fr}
  .navlinks{display:none}
  .navtoggle{display:inline-flex}
  header.open .navlinks{display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; background:var(--cream); border-bottom:1px solid var(--line); padding:8px 24px 18px; align-items:stretch}
  header.open .navlinks a{padding:13px 0; border-bottom:1px solid var(--line)}
}
@media (max-width:560px){
  .wrap{padding:0 18px}
  .bloggrid{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
  .article-hero{aspect-ratio:4/3}
}

/* dropdown nav */
.has-drop{position:relative;display:flex;align-items:center}
.has-drop .drop-t{font-size:14px;cursor:pointer}
.has-drop .drop-m{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:8px;min-width:210px;box-shadow:0 18px 40px -20px rgba(52,50,50,.4);opacity:0;visibility:hidden;transition:.2s;z-index:60}
.has-drop:hover .drop-m{opacity:1;visibility:visible;transform:translateX(-50%) translateY(2px)}
.has-drop .drop-m a{display:block;padding:9px 12px;border-radius:9px;font-size:14px;opacity:.85;margin:0}
.has-drop .drop-m a:hover{background:var(--cream-2);opacity:1;color:var(--terra)}
@media (max-width:900px){.has-drop{display:block}.has-drop .drop-m{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding:0 0 0 14px;min-width:0}.has-drop .drop-m a{padding:10px 0;border-bottom:1px solid var(--line)}}

/* film grain (ties photography together) */
body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:multiply;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px}
@media (prefers-reduced-motion: reduce){body::after{display:none}}

/* ---- country pages: locked pack previews (generated 26 Jul 2026) ---- */
.chero-plain{background:linear-gradient(150deg,#243830 0%,#3d5c47 42%,#8a5f3c 100%)}
.plockgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px}
.plock{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 16px;overflow:hidden}
.plock::after{content:"";position:absolute;top:14px;right:14px;width:15px;height:19px;border:2px solid var(--dim);border-radius:3px;opacity:.5}
.plock::before{content:"";position:absolute;top:9px;right:17px;width:9px;height:9px;border:2px solid var(--dim);border-bottom:none;border-radius:5px 5px 0 0;opacity:.5}
.pl-h{display:flex;flex-direction:column;gap:3px;padding-right:30px}
.pl-n{font-family:var(--head);font-weight:600;font-size:15.5px;color:var(--charcoal)}
.pl-c{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--terra)}
.pl-s{font-size:13px;color:var(--dim);line-height:1.5;margin:9px 0 13px;min-height:2.6em}
.pl-bars{display:flex;flex-direction:column;gap:6px}
.pl-bars i{display:block;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--cream-2),var(--line));opacity:.85}
.pl-bars i:nth-child(2){width:86%}.pl-bars i:nth-child(3){width:72%}
.pl-bars i:nth-child(4){width:91%}.pl-bars i:nth-child(5){width:64%}
.plock-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:30px}
/* ---- nearby destinations ---- */
.ngrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.ncard{display:flex;flex-direction:column;gap:3px;padding:15px 14px;background:#fff;border:1px solid var(--line);border-radius:14px;text-decoration:none;transition:.2s}
.ncard:hover{transform:translateY(-2px);border-color:var(--sage-deep)}
.ncard .nf{font-size:22px;line-height:1}
.ncard .nn{font-family:var(--head);font-weight:500;font-size:14.5px;color:var(--charcoal);margin-top:4px}
.ncard .nl{font-family:var(--mono);font-size:10.5px;color:var(--dim);letter-spacing:.04em}
@media(max-width:600px){.plockgrid{grid-template-columns:1fr 1fr}.pl-s{display:none}}

/* ---- country + hub page styles, lifted out of per-page inline blocks 26 Jul 2026 ---- */
.chero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chero.brand{background:radial-gradient(120% 120% at 30% 10%,#2c3a31,#46402f 60%,#6b4a36)}
.chero.brand .mapt{position:absolute;inset:0;opacity:.16;background:url(/img/world-map-dark.webp) center/cover}
.chero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(52,50,50,.12),rgba(52,50,50,.78))}
.chero .inner{position:relative;z-index:2;color:#fff;padding:0 0 46px}
.chero .bigflag{font-size:54px;line-height:1}
.chero .lang{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);margin-top:10px}
.chero h1{color:#fff;font-size:clamp(40px,7vw,72px);margin:6px 0 0}
.chero .sub{font-size:18px;color:rgba(255,255,255,.9);margin:14px 0 22px;max-width:42ch}
.chero .cta{display:flex;gap:12px;flex-wrap:wrap}
.cintro{display:grid;grid-template-columns:1.3fr .7fr;gap:46px;align-items:center}
.cintro .lead{font-size:19px;color:#3f3b36;line-height:1.7}
.cphone{justify-self:center;width:236px;aspect-ratio:9/19.3;border-radius:36px;background:#1b1a1a;padding:10px;box-shadow:0 40px 80px -34px rgba(52,50,50,.5)}
.cphone img{width:100%;height:100%;object-fit:cover;border-radius:27px}
.cbrandpanel{justify-self:center;width:236px;aspect-ratio:9/19.3;border-radius:30px;background:linear-gradient(165deg,#2c3a31,#6b4a36);position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;padding:24px;box-shadow:0 40px 80px -34px rgba(52,50,50,.5)}
.cbrandpanel .m{position:absolute;inset:0;opacity:.18;background:url(/img/world-map-dark.webp) center/cover}
.cbrandpanel .f{font-size:54px;position:relative}
.cbrandpanel .t{position:relative;font-family:var(--head);font-weight:500;margin-top:14px;font-size:16px}
.cbrandpanel .s{position:relative;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--sand);margin-top:8px}
.ptable{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff}
.pcat{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--terra);background:var(--cream-2);padding:11px 18px;border-top:1px solid var(--line)}
.pcat:first-child{border-top:none}
.prow{display:flex;align-items:center;gap:14px;padding:14px 18px;border-top:1px solid var(--line)}
.prow .nat{font-family:var(--head);font-weight:600;font-size:18px;min-width:34%;color:var(--charcoal)}
.prow .mid{flex:1}
.prow .ph{font-family:var(--mono);font-size:12px;color:var(--terra)}
.prow .gl{font-size:14px;color:#56514A}
.prow .sh{background:none;border:none;cursor:pointer;color:var(--dim);padding:6px;flex:0 0 auto}
.prow .sh:hover{color:var(--terra)}
.cfunnel{background:var(--charcoal);color:var(--cream);border-radius:24px;padding:44px;text-align:center}
.cfunnel h2{color:#fff;font-size:clamp(26px,4vw,40px)}
.cfunnel p{color:rgba(250,248,245,.76);max-width:46ch;margin:14px auto 24px}
.cfunnel .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.moregrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.morecard{position:relative;aspect-ratio:3/4;border-radius:16px;overflow:hidden;display:block}
.morecard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.morecard.noimg{background:linear-gradient(165deg,#2c3a31,#6b4a36)}
.morecard.noimg .fl{position:absolute;top:14px;left:14px;font-size:26px;z-index:2}
.morecard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(52,50,50,.82))}
.morecard span{position:absolute;left:0;right:0;bottom:0;z-index:2;color:#fff;padding:12px;font-family:var(--head);font-weight:500;font-size:15px}
.cintro{grid-template-columns:1fr;gap:28px}
.prow .nat{min-width:42%}
.moregrid{grid-template-columns:1fr 1fr}

/* the country hero must clear the fixed header, which the old pages did
   with per-page inline overrides */
.chero .inner{padding-top:120px;padding-bottom:72px}
@media(max-width:760px){.chero .inner{padding-top:104px;padding-bottom:56px}}


/* ============================================================
   PHRASE CARDS  -  the canonical 4-line template, on the page
   English (bold) / Romanized / Phonetics / Local script
   ============================================================ */
.pcat-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 18px}
.pcat-head .pcat{background:none;border:none;padding:0;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--terra)}
.pcat-dl{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--charcoal);
  border-bottom:1px solid var(--terra);padding-bottom:2px;transition:.2s;cursor:pointer}
.pcat-dl:hover{color:var(--terra)}

.pcgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:760px){.pcgrid{grid-template-columns:1fr}}

.pcard{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:18px 20px 16px;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .22s}
.pcard:hover{transform:translateY(-3px);border-color:var(--sage-deep);box-shadow:0 16px 34px -24px rgba(52,50,50,.5)}
.pc-top{display:flex;align-items:flex-start;gap:11px}
.pc-em{font-size:21px;line-height:1.1;flex:0 0 auto}
.pc-en{flex:1;font-family:var(--head);font-weight:600;font-size:19px;line-height:1.25;
  color:var(--charcoal);letter-spacing:-.01em;margin:0}
.pc-sh{flex:0 0 auto;background:none;border:none;cursor:pointer;color:var(--dim);padding:4px;
  border-radius:8px;opacity:.55;transition:.2s}
.pcard:hover .pc-sh{opacity:1}
.pc-sh:hover{color:var(--terra);background:rgba(204,99,62,.09)}
.pc-sh:focus-visible{outline:2px solid var(--terra);outline-offset:2px;opacity:1}

/* line 2 - how it is written */
.pc-rom{margin-top:11px;font-family:var(--head);font-weight:500;font-style:italic;font-size:17px;
  line-height:1.35;color:var(--terra)}
/* line 3 - how you say it */
.pc-pho{margin-top:3px;font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;
  color:var(--terra-dark);opacity:.78}
/* line 4 - the local script, quiet and right-aligned */
.pc-scr{margin-top:9px;text-align:right;font-size:19px;line-height:1.5;color:var(--dim);
  border-top:1px solid var(--line);padding-top:9px}
.pc-scr[dir="rtl"]{text-align:right}

/* locked packs, with a teaser rather than five grey bars */
.plock{padding:18px 16px 16px}
.plock .pl-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.plock .pl-n{font-family:var(--head);font-weight:600;font-size:15.5px;color:var(--charcoal);line-height:1.2}
.plock .pl-c{font-family:var(--mono);font-size:11px;color:var(--terra);flex:0 0 auto}
.plock .pl-s{font-size:13px;color:var(--dim);margin:7px 0 12px;line-height:1.5}
.pl-tease{display:flex;flex-direction:column;gap:7px;filter:blur(3.2px);opacity:.5;pointer-events:none}
.pl-tease span{height:9px;border-radius:5px;background:linear-gradient(90deg,var(--sage-light),var(--cream-2))}
.pl-tease span:nth-child(2){width:82%}
.pl-tease span:nth-child(3){width:64%}
.pl-lock{margin-top:13px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim)}