/* ==================================================================
   Luong — Private Tour Guide, Da Nang
   Typefaces are self-hosted: no external requests, so the site is fast
   on hotel wifi and works in countries where Google Fonts is blocked.
   ================================================================== */

@font-face{
  font-family:'Fraunces';
  src:url('../fonts/fraunces-var.woff2') format('woff2-variations');
  font-weight:300 800; font-style:normal; font-display:swap;
}
@font-face{ font-family:'Manrope'; src:url('../fonts/manrope-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Manrope'; src:url('../fonts/manrope-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face{ font-family:'Manrope'; src:url('../fonts/manrope-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face{ font-family:'Manrope'; src:url('../fonts/manrope-700.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root{
  /* ink + neutrals, warmed very slightly towards the jade */
  --ink:#0f1a17;
  --ink-2:#374a45;
  --muted:#71827c;
  --faint:#9aa8a3;

  --sand:#f6f0e4;
  --sand-2:#ece0ca;
  --card:#ffffff;
  --line:rgba(15,26,23,.10);
  --line-2:rgba(15,26,23,.06);

  --jade:#0d5c52;
  --jade-deep:#093f38;
  --jade-tint:#e7f0ed;
  --gold:#b8873b;
  --gold-tint:#f8efdd;
  --lantern:#bf4a30;
  --lantern-tint:#fbeae4;
  --wa:#25d366;
  --star:#d9932c;

  --r-xs:6px; --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:34px;
  --sh-1:0 1px 2px rgba(15,26,23,.04);
  --sh-2:0 2px 6px rgba(15,26,23,.05), 0 12px 28px rgba(15,26,23,.06);
  --sh-3:0 4px 12px rgba(15,26,23,.06), 0 28px 64px rgba(15,26,23,.11);

  --display:'Fraunces',ui-serif,Georgia,'Times New Roman',serif;
  --ui:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* A woven lattice, like the weave of a conical hat — texture, not pattern. */
  --lattice:
    repeating-linear-gradient(45deg,  rgba(13,92,82,.045) 0 1px, transparent 1px 17px),
    repeating-linear-gradient(-45deg, rgba(13,92,82,.045) 0 1px, transparent 1px 17px);
  --lattice-faint:
    repeating-linear-gradient(45deg,  rgba(13,92,82,.026) 0 1px, transparent 1px 17px),
    repeating-linear-gradient(-45deg, rgba(13,92,82,.026) 0 1px, transparent 1px 17px);
  --lattice-light:
    repeating-linear-gradient(45deg,  rgba(255,255,255,.055) 0 1px, transparent 1px 19px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.055) 0 1px, transparent 1px 19px);
  --wash-gold:  radial-gradient(115% 75% at 100% 0%, rgba(184,135,59,.16), transparent 62%);
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%230d5c52' stroke-width='1.1'%3E%3Cpath d='M200 400 L200 40'/%3E%3Cpath d='M200 400 L60 120'/%3E%3Cpath d='M200 400 L340 120'/%3E%3Cpath d='M200 400 L20 240'/%3E%3Cpath d='M200 400 L380 240'/%3E%3Cpath d='M20 400a180 180 0 0 1 360 0'/%3E%3Cpath d='M60 400a140 140 0 0 1 280 0'/%3E%3Cpath d='M100 400a100 100 0 0 1 200 0'/%3E%3Cpath d='M140 400a60 60 0 0 1 120 0'/%3E%3C/g%3E%3C/svg%3E");
  --wash-jade:  radial-gradient(100% 70% at 0% 100%, rgba(13,92,82,.09), transparent 60%);

  --wrap:1200px;
  --gut:clamp(20px,4vw,40px);
  --sec:clamp(64px,8vw,116px);
  --header-h:76px;
}

*,*::before,*::after{box-sizing:border-box;}
[hidden]{display:none !important;}
/* Scroll lock for the open menu and pop-ups. scrollbar-gutter keeps the page
   from jumping sideways when the scrollbar disappears. */
html.is-locked{overflow:hidden;}
/* While the window is being resized the menu changes from a row of links into
   a drop-down panel. Without this it animates that change, which looks like
   the menu flashing open and shutting by itself. */
html.is-resizing .nav,
html.is-resizing .nav *{transition:none !important;}
html.is-locked body{overflow:hidden;}
@supports (scrollbar-gutter: stable){ html{scrollbar-gutter:stable;} }
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px;}
body{
  margin:0;color:var(--ink);
  background-color:var(--sand);
  background-image:var(--lattice);
  background-attachment:fixed;
  font:400 17px/1.7 var(--ui);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block;}
a{color:var(--jade);text-decoration:none;}
a:hover{color:var(--jade-deep);}
::selection{background:var(--jade);color:#fff;}
:focus-visible{outline:2.5px solid var(--jade);outline-offset:3px;border-radius:4px;}

/* ---------------------------------------------------------- Type */
h1,h2,h3,h4{
  font-family:var(--display);font-weight:600;color:var(--ink);
  line-height:1.08;letter-spacing:-.018em;margin:0 0 .55em;
  text-wrap:balance;font-variation-settings:'SOFT' 0,'WONK' 0;
}
h1{font-size:clamp(31px,5.2vw,62px);}
h2{font-size:clamp(27px,3.7vw,42px);}
h3{font-size:clamp(20px,2.1vw,25px);line-height:1.2;}
h4{font-size:18px;}
p{margin:0 0 1.15em;}
p:last-child{margin-bottom:0;}
strong,b{font-weight:600;}

.eyebrow{
  display:inline-block;font:600 11.5px/1 var(--ui);
  letter-spacing:.19em;text-transform:uppercase;color:var(--gold);
  margin-bottom:18px;
}
.eyebrow-jade{color:var(--jade);}
.lede{font-size:clamp(18px,1.6vw,20.5px);line-height:1.65;color:var(--ink-2);max-width:60ch;}
.muted{color:var(--muted);}
.small{font-size:14.5px;}
.tnum{font-variant-numeric:tabular-nums;}
.center{text-align:center;}
.center .lede{margin-left:auto;margin-right:auto;}

/* ---------------------------------------------------------- Layout */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 var(--gut);}
.wrap-wide{max-width:1400px;margin:0 auto;padding:0 var(--gut);}
.section{padding:var(--sec) 0;}
.section-tight{padding:clamp(44px,5vw,68px) 0;}
.section-white{background-color:var(--card);background-image:var(--lattice-faint),var(--wash-gold);}
.section-cream{background-color:var(--sand);background-image:var(--lattice),var(--wash-gold);}
.section-sand{background-color:var(--sand-2);background-image:var(--lattice),var(--wash-jade);}
.section-jade{background-color:var(--jade-deep);background-image:var(--lattice-light),var(--wash-gold);color:#e6efec;}
.section-white,.section-cream,.section-sand,.section-jade{position:relative;overflow:hidden;}

/* the hat-weave motif, big and barely there, anchored to a corner */
.section-cream::before,.section-sand::before,.section-jade::before{
  content:"";position:absolute;pointer-events:none;
  width:min(560px,52vw);aspect-ratio:1;right:-9%;bottom:-16%;
  background:var(--motif) center/contain no-repeat;
  opacity:.07;
}
.section-jade::before{filter:invert(1) brightness(2);opacity:.10;}
.motif-left::before{right:auto;left:-11%;bottom:auto;top:-18%;transform:rotate(180deg);}

/* soft edges so colour bands melt instead of stopping dead */
.section-jade::after{
  content:"";position:absolute;left:0;right:0;top:0;height:80px;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.07), transparent);
}
.section-jade h1,.section-jade h2,.section-jade h3{color:#fff;}
.section-jade .lede{color:rgba(255,255,255,.82);}
.rule{width:54px;height:3px;border:0;margin:0 0 26px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold) 0 60%,var(--lantern) 60% 100%);}
.center .rule{margin-left:auto;margin-right:auto;}

.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:28px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,52px);
}
.section-head > div{max-width:640px;}
.section-head h2{margin-bottom:12px;}
.section-head p{margin:0;}

/* ---------------------------------------------------------- Buttons */
.btn{
  --btn-bg:var(--jade); --btn-fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border:0;border-radius:999px;cursor:pointer;
  background:var(--btn-bg);color:var(--btn-fg);
  font:600 15.5px/1 var(--ui);letter-spacing:.005em;text-align:center;
  text-decoration:none;white-space:nowrap;position:relative;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn:hover{transform:translateY(-2px);color:var(--btn-fg);}
.btn:active{transform:translateY(0);}
.btn-primary{--btn-bg:var(--jade);box-shadow:0 4px 14px rgba(13,92,82,.24);}
.btn-primary:hover{--btn-bg:var(--jade-deep);box-shadow:0 10px 26px rgba(13,92,82,.3);}
.btn-gold{--btn-bg:var(--gold);box-shadow:0 4px 14px rgba(184,135,59,.26);}
.btn-gold:hover{--btn-bg:#9d7130;box-shadow:0 10px 26px rgba(184,135,59,.32);}
.btn-wa{--btn-bg:var(--wa);box-shadow:0 4px 14px rgba(37,211,102,.3);}
.btn-wa:hover{--btn-bg:#1fbb59;box-shadow:0 10px 26px rgba(37,211,102,.34);}
.btn-ink{--btn-bg:var(--ink);}
.btn-ink:hover{--btn-bg:#000;}
.btn-white{--btn-bg:#fff;--btn-fg:var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.12);}
.btn-white:hover{--btn-bg:#fff;box-shadow:0 12px 30px rgba(0,0,0,.18);}
.btn-ghost{
  background:transparent;color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--line);
}
.btn-ghost:hover{background:transparent;color:var(--jade);box-shadow:inset 0 0 0 1.5px var(--jade);}
.btn-ghost-light{
  background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);
}
.btn-ghost-light:hover{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1.5px #fff;}
.btn-lg{padding:18px 34px;font-size:16.5px;}
.btn-sm{padding:11px 19px;font-size:14px;}
.btn-block{width:100%;}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;}
.btn-row.center{justify-content:center;}
.link-arrow{
  display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:15px;color:var(--jade);
}
.link-arrow span{transition:transform .2s ease;}
a:hover .link-arrow span,.link-arrow:hover span{transform:translateX(4px);}

/* ---------------------------------------------------------- Header */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:80;
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
/* Over a photo the header has no background of its own, so give the nav a
   soft scrim — otherwise a bright sky makes the links unreadable. */
.hero-page .site-header::before{
  content:"";position:absolute;inset:0 0 auto;height:150%;pointer-events:none;
  background:linear-gradient(180deg, rgba(6,26,23,.6) 0%, rgba(6,26,23,.28) 55%, transparent 100%);
  opacity:1;transition:opacity .3s ease;
}
.hero-page .site-header.solid::before{opacity:0;}
.header-inner{position:relative;z-index:1;}
.site-header.solid{
  background:rgba(248,246,241,.88);backdrop-filter:blur(14px) saturate(1.5);
  border-bottom-color:var(--line-2);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--header-h);}

.brand{display:flex;align-items:center;gap:12px;color:var(--ink);}
.brand:hover{color:var(--ink);}
.brand-mark{
  width:44px;height:44px;border-radius:50%;flex:none;overflow:hidden;
  background:var(--jade);color:#fff;display:grid;place-items:center;
  font:600 19px/1 var(--display);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.7), 0 3px 10px rgba(15,26,23,.16);
}
img.brand-mark{object-fit:cover;object-position:57% 40%;}
.brand-text{display:flex;flex-direction:column;line-height:1.2;}
.brand-name{font:600 19px/1.1 var(--display);letter-spacing:-.01em;}
.brand-sub{font:600 9.5px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:4px;}

.hero-page .site-header:not(.solid) .brand,
.hero-page .site-header:not(.solid) .brand-name{color:#fff;}
.hero-page .site-header:not(.solid) .brand-sub{color:rgba(255,255,255,.72);}
.hero-page .site-header:not(.solid) .nav > a{color:rgba(255,255,255,.9);}
.hero-page .site-header:not(.solid) .nav > a:hover{background:rgba(255,255,255,.14);color:#fff;}
.hero-page .site-header:not(.solid) .nav > a.active{color:#fff;}
.hero-page .site-header:not(.solid) .nav > a.active::after{background:#fff;}
.hero-page .site-header:not(.solid) .nav-toggle{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.12);}
.hero-page .site-header:not(.solid) .nav-toggle span,
.hero-page .site-header:not(.solid) .nav-toggle span::before,
.hero-page .site-header:not(.solid) .nav-toggle span::after{background:#fff;}
/* open: the middle bar has to disappear here too, or the ✕ looks like an asterisk */
.hero-page .site-header:not(.solid) .nav-toggle[aria-expanded="true"] span{background:transparent;}

.nav{display:flex;align-items:center;gap:2px;}
.nav > a{
  position:relative;padding:10px 15px;border-radius:999px;
  color:var(--ink-2);font:500 15px/1 var(--ui);transition:background .18s ease,color .18s ease;
}
.nav > a:hover{background:var(--jade-tint);color:var(--jade);}
.nav > a.active{color:var(--jade);font-weight:600;}
.nav > a.active::after{
  content:"";position:absolute;left:15px;right:15px;bottom:2px;height:2px;
  background:var(--jade);border-radius:2px;
}
.nav .btn{margin-left:10px;}
.nav a.btn{color:#fff;padding:12px 22px;font-weight:600;}
.nav a.btn::after{display:none;}

.nav-toggle{
  display:none;width:46px;height:46px;border:1.5px solid var(--line);background:var(--card);
  border-radius:14px;cursor:pointer;padding:0;place-items:center;
}
.nav-toggle span{display:block;width:19px;height:1.8px;background:var(--ink);border-radius:2px;position:relative;transition:background .2s;}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:19px;height:1.8px;background:var(--ink);border-radius:2px;transition:transform .25s ease;
}
.nav-toggle span::before{top:-6px;} .nav-toggle span::after{top:6px;}
.nav-toggle[aria-expanded="true"] span{background:transparent;}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg);}

/* the menu sheet's own furniture is desktop-hidden */
.nav-head,.nav-foot,.nav-ico,.nav-scrim{display:none;}

@media (max-width:960px){
  /* backdrop-filter on the header makes it the containing block for anything
     fixed inside it, which would clip the menu sheet to the header's height.
     Below this width the header is opaque instead. */
  .site-header.solid{background:rgba(248,246,241,.97);backdrop-filter:none;-webkit-backdrop-filter:none;}

  .nav-toggle{display:grid;}

  /* the menu drops down from the header, full width, over a dimmed page */
  .nav-scrim{
    display:block;position:fixed;inset:var(--header-h) 0 0;z-index:48;border:0;
    background:rgba(8,22,19,.42);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
    opacity:0;transition:opacity .28s ease;
  }
  .nav-scrim.show{opacity:1;}

  .nav{
    position:fixed;top:var(--header-h);left:0;right:0;bottom:auto;z-index:49;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--card);border-radius:0 0 var(--r-lg) var(--r-lg);
    box-shadow:0 26px 50px rgba(8,22,19,.22);
    padding:6px 0 calc(18px + env(safe-area-inset-bottom));
    max-height:calc(100dvh - var(--header-h));
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    opacity:0;transform:translateY(-10px);
    transition:transform .26s cubic-bezier(.3,.85,.3,1), opacity .2s ease;
    visibility:hidden;
  }
  .nav.open{visibility:visible;opacity:1;transform:none;}
  .nav:not(.open) a,.nav:not(.open) .btn{pointer-events:none;}

  /* the sheet header belongs to the side panel; the dropdown does not need it */
  .nav-head{display:none;}

  .nav > a:not(.btn){
    display:flex;align-items:center;gap:14px;position:relative;
    padding:16px var(--gut);font-size:16.5px;border-radius:0;color:var(--ink)!important;
  }
  .nav > a:not(.btn) + a:not(.btn){box-shadow:inset 0 1px 0 var(--line-2);}
  .nav > a::after{display:none;}
  .nav > a:not(.btn).active{color:var(--jade)!important;font-weight:600;background:var(--jade-tint);}
  .nav > a.active::before{
    content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;
    border-radius:0 3px 3px 0;background:var(--jade);
  }
  .nav > a:not(.btn):active{background:var(--sand);}
  .nav-ico{
    display:grid;place-items:center;width:22px;height:22px;flex:none;color:var(--muted);
  }
  .nav-ico svg{width:100%;height:100%;}
  .nav > a.active .nav-ico{color:var(--jade);}
  .nav > a > span:not(.nav-ico){flex:1;}

  .nav .btn{margin:16px var(--gut) 0;}
  .nav a.btn{
    display:flex;color:#fff!important;padding:15px 22px;font-size:16px;justify-content:center;
    border-radius:999px;box-shadow:none;
  }
  .nav a.btn-primary{background:var(--jade);}
  .nav a.btn-primary:active{background:var(--jade-deep);}
  .nav a.btn-wa{background:var(--wa);}
  .nav a.btn::before{display:none;}

  .nav-foot{
    display:block;margin:18px var(--gut) 0;padding-top:18px;border-top:1px solid var(--line-2);
  }
  .nav-foot-label{
    display:block;font:600 10.5px/1 var(--ui);letter-spacing:.18em;text-transform:uppercase;
    color:var(--muted);margin-bottom:12px;
  }
  .nav-foot .btn-wa{
    display:flex;justify-content:center;width:100%;margin:0;
  }
  .nav-foot .btn-wa svg{width:18px;height:18px;fill:currentColor;}
  .nav-foot-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-size:14px;}
  .nav-foot-links a{color:var(--muted);}
  .nav-foot-links a:hover{color:var(--jade);}
}

/* ---------------------------------------------------------- Hero */
.hero{
  position:relative;isolation:isolate;color:#fff;
  min-height:min(92vh,860px);display:flex;align-items:flex-end;
  padding-top:calc(var(--header-h) + 40px);
}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--jade-deep);}
.hero-media img{width:100%;height:100%;object-fit:cover;animation:slowzoom 22s ease-out forwards;}
@keyframes slowzoom{from{transform:scale(1.06);}to{transform:scale(1);}}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg, rgba(6,26,23,.86) 0%, rgba(6,26,23,.62) 42%, rgba(6,26,23,.18) 78%, rgba(6,26,23,.28) 100%),
    linear-gradient(180deg, rgba(6,26,23,.5) 0%, rgba(6,26,23,.1) 26%, rgba(6,26,23,.6) 100%);
}
.hero::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:120px;z-index:-1;
  background:linear-gradient(180deg, transparent, var(--sand));
  pointer-events:none;
}
.hero-inner{padding-bottom:clamp(48px,7vw,90px);max-width:820px;position:relative;z-index:1;}
.hero h1{color:#fff;margin-bottom:22px;font-weight:600;text-shadow:0 2px 30px rgba(4,20,17,.5);}
.hero .eyebrow{color:#edd4a2;text-shadow:0 1px 14px rgba(4,20,17,.6);}
.hero p{font-size:clamp(16.5px,1.6vw,20px);color:rgba(255,255,255,.92);max-width:54ch;text-shadow:0 1px 18px rgba(4,20,17,.55);}
.hero .btn-row{margin-top:34px;}

.hero-trust{
  display:flex;flex-wrap:wrap;gap:14px 34px;margin-top:clamp(34px,4vw,52px);
  padding-top:26px;border-top:1px solid rgba(255,255,255,.2);
}
.hero-trust div{display:flex;flex-direction:column;gap:3px;}
.hero-trust b{font:600 21px/1 var(--display);color:#fff;font-variant-numeric:tabular-nums;}
.hero-trust span{font-size:13px;color:rgba(255,255,255,.72);letter-spacing:.02em;}
.hero-trust .stars{font-size:15px;}

/* page banner for inner pages */
.page-head{
  background:var(--jade-deep);color:#fff;
  padding:calc(var(--header-h) + clamp(46px,6vw,78px)) 0 clamp(52px,6vw,86px);
  position:relative;overflow:hidden;
}
.page-head::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(90% 120% at 100% 0%, rgba(184,135,59,.22), transparent 60%);
}
.page-head .wrap{position:relative;z-index:1;}
.page-head h1{color:#fff;margin-bottom:16px;}
.page-head p{color:rgba(255,255,255,.82);max-width:62ch;font-size:clamp(16.5px,1.4vw,19px);margin:0;}
.page-head .eyebrow{color:#e9c88a;}
.crumbs{font-size:13.5px;color:rgba(255,255,255,.6);margin-bottom:20px;}
.crumbs a{color:rgba(255,255,255,.82);}
.crumbs a:hover{color:#fff;}

/* ---------------------------------------------------------- Cards */
.grid{display:grid;gap:clamp(18px,2.2vw,28px);}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}
.grid-3{grid-template-columns:repeat(auto-fill,minmax(310px,1fr));}
.grid-4{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));}

.card{
  position:relative;background:var(--card);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh-1), inset 0 0 0 1px var(--line-2);
  display:flex;flex-direction:column;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
a.card{color:inherit;}
.card-link:hover{transform:translateY(-5px);box-shadow:var(--sh-3), inset 0 0 0 1px var(--line-2);}
.card::after{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:3;
  background:linear-gradient(90deg,var(--gold),var(--lantern));
  transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.card-link:hover::after{transform:scaleX(1);}
.card-media{aspect-ratio:4/3;background:var(--jade-tint);overflow:hidden;position:relative;}
.card-media img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .6s cubic-bezier(.2,.7,.3,1);}
.card-link:hover .card-media img{transform:scale(1.05);}
.card-media-tall{aspect-ratio:3/4;}
.card-body{padding:clamp(20px,2vw,26px);display:flex;flex-direction:column;gap:11px;flex:1;}
.card-body h3{margin:0;}
.card-body p{color:var(--ink-2);font-size:15.5px;line-height:1.6;margin:0;}
.card-foot{margin-top:auto;padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.card-badge{
  position:absolute;top:14px;left:14px;z-index:4;
  background:rgba(255,255,255,.94);backdrop-filter:blur(6px);
  padding:7px 13px;border-radius:999px;font:600 12px/1 var(--ui);color:var(--ink);
  box-shadow:0 2px 10px rgba(0,0,0,.12);
}

.tag{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
  background:var(--jade-tint);color:var(--jade);font:600 12.5px/1 var(--ui);width:fit-content;
}
.tag-gold{background:var(--gold-tint);color:#8a6320;}
.tag-plain{background:var(--sand-2);color:var(--ink-2);}
.tag-lantern{background:var(--lantern-tint);color:#96361f;}

/* ---------------------------------------------------------- Editorial split */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:center;}
.split-start{align-items:start;}
@media (max-width:900px){ .split{grid-template-columns:1fr;gap:36px;} }

.frame-photo{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-3);background:var(--jade-tint);}
.frame-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;}
.frame-photo::after{
  content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);border-radius:inherit;pointer-events:none;
}
.photo-note{
  position:absolute;left:18px;bottom:18px;right:18px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  border-radius:var(--r-sm);padding:14px 16px;box-shadow:var(--sh-2);
  font-size:14px;color:var(--ink-2);
}
.photo-note b{display:block;color:var(--ink);font-family:var(--display);font-size:16px;font-weight:600;margin-bottom:2px;}

.fact-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:2px;}
.fact-list li{display:flex;gap:14px;align-items:baseline;padding:13px 0;border-top:1px solid var(--line-2);font-size:15.5px;color:var(--ink-2);}
.fact-list li:last-child{border-bottom:1px solid var(--line-2);}
.fact-list dt,.fact-list .k{
  flex:none;width:112px;font:600 11.5px/1.5 var(--ui);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}
.profile-facts{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px;}
.profile-facts li{display:flex;gap:13px;align-items:flex-start;font-size:15.5px;color:var(--ink-2);}
.profile-facts .ico{
  flex:none;width:30px;height:30px;border-radius:10px;background:var(--jade-tint);
  color:var(--jade);display:grid;place-items:center;font-size:14px;
}

/* legacy names kept working */
.profile{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:center;}
@media (max-width:900px){ .profile{grid-template-columns:1fr;gap:36px;} }
.profile-photo{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-3);background:var(--jade-tint);}
.profile-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;}
.bio p{color:var(--ink-2);font-size:17.5px;}

/* ---------------------------------------------------------- Stats */
.stat-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--line-2);border-radius:var(--r);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line-2);
}
.stat{background:var(--card);padding:clamp(22px,2.4vw,32px) 22px;text-align:center;}
.stat b{
  display:block;font:600 clamp(30px,3.4vw,40px)/1 var(--display);color:var(--jade);
  margin-bottom:8px;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.stat span{font-size:13.5px;color:var(--muted);}

/* ---------------------------------------------------------- Steps */
.steps{display:grid;gap:clamp(18px,2.4vw,30px);grid-template-columns:repeat(auto-fit,minmax(250px,1fr));counter-reset:step;}
.step-item{padding-top:26px;border-top:2px solid var(--line);}
.step-item .n{
  counter-increment:step;font:600 13px/1 var(--ui);letter-spacing:.14em;
  color:var(--gold);margin-bottom:16px;display:block;
}
.step-item .n::before{content:"0" counter(step);}
.step-item h3{font-size:21px;margin-bottom:10px;}
.step-item p{font-size:15.5px;color:var(--ink-2);margin:0;}

/* ---------------------------------------------------------- Timeline (tour itinerary) */
.timeline{position:relative;margin:0;padding:0;list-style:none;}
.timeline::before{
  content:"";position:absolute;left:15px;top:12px;bottom:12px;width:2px;
  background:linear-gradient(var(--gold) 0 8px, var(--line) 8px);
  background-size:100% 100%;
}
.timeline li{position:relative;padding:0 0 30px 52px;}
.timeline li:last-child{padding-bottom:0;}
.timeline li::before{
  content:"";position:absolute;left:8px;top:7px;width:16px;height:16px;border-radius:50%;
  background:var(--card);box-shadow:0 0 0 2.5px var(--jade);
}
.timeline li:first-child::before{background:var(--lantern);box-shadow:0 0 0 2.5px var(--lantern),0 0 0 6px var(--lantern-tint);}
.tl-time{
  display:inline-block;font:600 12.5px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;
  color:var(--jade);background:var(--jade-tint);padding:6px 11px;border-radius:var(--r-xs);
  margin-bottom:9px;font-variant-numeric:tabular-nums;
}
.tl-title{font:600 19px/1.3 var(--display);color:var(--ink);margin:0 0 6px;letter-spacing:-.01em;}
.tl-desc{font-size:15.5px;color:var(--ink-2);margin:0;line-height:1.62;}

/* ---------------------------------------------------------- Feature lists */
.feature-list{list-style:none;margin:0;padding:0;display:grid;gap:13px;}
.feature-list li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--ink-2);line-height:1.55;}
.feature-list li::before{
  content:"";flex:none;width:20px;height:20px;margin-top:2px;border-radius:50%;
  background:var(--jade-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d5c52' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}
.feature-list.minus li::before{
  background:var(--sand-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371827c' stroke-width='3.2' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") center/12px no-repeat;
}
.feature-list.gold li::before{
  background:var(--gold-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b8873b'%3E%3Cpath d='M12 2l2.9 6.3 6.9.8-5 4.7 1.3 6.8L12 17.4 5.9 20.6 7.2 13.8l-5-4.7 6.9-.8z'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* ---------------------------------------------------------- Tour page */
.tour-hero{position:relative;isolation:isolate;color:#fff;padding:calc(var(--header-h) + clamp(56px,7vw,96px)) 0 clamp(40px,5vw,64px);min-height:min(78vh,700px);display:flex;align-items:flex-end;}
.tour-hero .hero-media img{animation:none;}
.tour-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg, rgba(6,26,23,.8) 0%, rgba(6,26,23,.5) 45%, rgba(6,26,23,.2) 85%),
    linear-gradient(180deg, rgba(6,26,23,.5) 0%, rgba(6,26,23,.18) 32%, rgba(6,26,23,.82) 100%);
}
.tour-hero h1{color:#fff;margin-bottom:18px;text-shadow:0 2px 30px rgba(4,20,17,.5);}
.tour-hero .lede{color:rgba(255,255,255,.92);text-shadow:0 1px 18px rgba(4,20,17,.5);}
.tour-meta{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;
}
.tour-meta span{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.14);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.22);
  padding:9px 15px;border-radius:999px;font-size:14px;color:#fff;
}
.tour-layout{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:clamp(32px,4vw,64px);align-items:start;}
@media (max-width:1020px){ .tour-layout{grid-template-columns:1fr;} }
.book-card{
  background:var(--card);border-radius:var(--r-lg);padding:clamp(24px,2.4vw,32px);
  box-shadow:var(--sh-3), inset 0 0 0 1px var(--line-2);position:sticky;top:calc(var(--header-h) + 22px);
}
.book-card h3{font-size:22px;margin-bottom:6px;}
.book-card .price{font:600 30px/1 var(--display);color:var(--jade);margin:0 0 6px;}
.prose-block + .prose-block{margin-top:clamp(44px,5vw,68px);}
.prose-block h2{font-size:clamp(24px,2.6vw,32px);margin-bottom:20px;}
.prose-block > p{color:var(--ink-2);font-size:17.5px;}
.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(24px,3vw,40px);}

/* ---------------------------------------------------------- Reviews */
.stars{display:inline-flex;gap:2.5px;font-size:15px;line-height:1;}
.stars .star{color:#d8d2c4;}
.stars .star.on{color:var(--star);}
.stars-lg{font-size:23px;}
.rating-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.rating-line b{font:600 30px/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums;}

.review{
  background:var(--card);border-radius:var(--r);padding:clamp(22px,2.2vw,28px);
  box-shadow:var(--sh-1), inset 0 0 0 1px var(--line-2);
  display:flex;flex-direction:column;gap:14px;break-inside:avoid;
}
.review-head{display:flex;align-items:center;gap:13px;}
.avatar{
  width:46px;height:46px;border-radius:50%;flex:none;object-fit:cover;
  background:linear-gradient(140deg,var(--jade),#12857a);color:#fff;
  display:grid;place-items:center;font:600 18px/1 var(--display);
}
.review-name{font-weight:600;font-size:15.5px;}
.review-meta{font-size:13px;color:var(--muted);}
.review-text{color:var(--ink-2);font-size:16px;line-height:1.66;}
.review-photo{border-radius:var(--r-sm);overflow:hidden;}
.review-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center;}
.masonry{columns:3 320px;column-gap:clamp(18px,2.2vw,28px);}
.masonry > *{margin-bottom:clamp(18px,2.2vw,28px);}

.quote-big{
  font:600 clamp(21px,2.4vw,30px)/1.38 var(--display);color:var(--ink);
  letter-spacing:-.015em;margin:0 0 22px;text-wrap:balance;
}
.quote-big::before{content:"“";color:var(--gold);}
.quote-big::after{content:"”";color:var(--gold);}

.bars{display:grid;gap:10px;}
.bar{display:flex;align-items:center;gap:13px;font-size:13.5px;color:var(--muted);}
.bar-k{width:34px;font-variant-numeric:tabular-nums;}
.bar-track{flex:1;height:8px;background:var(--sand-2);border-radius:99px;overflow:hidden;}
.bar-fill{display:block;height:100%;background:var(--star);border-radius:99px;}
.bar-n{width:30px;text-align:right;font-variant-numeric:tabular-nums;}

/* ---------------------------------------------------------- Gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:clamp(10px,1.2vw,16px);}
.gallery figure{margin:0;border-radius:var(--r-sm);overflow:hidden;background:var(--jade-tint);position:relative;}
.gallery img{width:100%;aspect-ratio:1;object-fit:cover;object-position:center;transition:transform .6s cubic-bezier(.2,.7,.3,1);}
.gallery figure:hover img{transform:scale(1.06);}
.gallery figcaption{
  position:absolute;inset:auto 0 0;padding:28px 14px 12px;color:#fff;font-size:13px;
  background:linear-gradient(transparent,rgba(6,26,23,.8));
}
.strip{display:flex;gap:14px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
.strip > *{flex:0 0 clamp(180px,22vw,240px);scroll-snap-align:start;}

/* ---------------------------------------------------------- Forms */
.form-card{
  background:var(--card);border-radius:var(--r-lg);padding:clamp(24px,3vw,38px);
  box-shadow:var(--sh-2), inset 0 0 0 1px var(--line-2);
}
.field{margin-bottom:20px;}
.field label{display:block;font-weight:600;font-size:14.5px;margin-bottom:8px;color:var(--ink);}
.field .req{color:#b4402c;}
.field .help{font-weight:400;color:var(--muted);font-size:13.5px;}
.input,.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  font:400 16px/1.5 var(--ui);color:var(--ink);background:var(--card);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.field textarea{min-height:128px;resize:vertical;}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(15,26,23,.2);}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--jade);box-shadow:0 0 0 4px rgba(13,92,82,.12);
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:560px){ .field-row{grid-template-columns:1fr;gap:0;} }

.chips{display:flex;flex-wrap:wrap;gap:9px;}
.chip{position:relative;}
.chip input{position:absolute;opacity:0;pointer-events:none;}
.chip span{
  display:block;padding:11px 17px;border:1.5px solid var(--line);border-radius:999px;
  font-size:14.5px;cursor:pointer;background:var(--card);transition:all .16s ease;
}
.chip span:hover{border-color:var(--jade);color:var(--jade);}
.chip input:checked + span{background:var(--jade);border-color:var(--jade);color:#fff;font-weight:600;}
.chip input:focus-visible + span{box-shadow:0 0 0 4px rgba(13,92,82,.18);}

.alert{padding:15px 18px;border-radius:var(--r-sm);margin-bottom:22px;font-size:15px;}
.alert-error{background:#fdecea;box-shadow:inset 0 0 0 1px #f2c4bd;color:#8a2e1f;}
.alert-ok{background:#e8f4ef;box-shadow:inset 0 0 0 1px #a8d9c4;color:#0e5b45;}
.alert-info{background:var(--gold-tint);box-shadow:inset 0 0 0 1px #eed9ae;color:#7a5713;}

/* ---------------------------------------------------------- Blog content */
.post-content{font-size:18.5px;line-height:1.78;color:var(--ink-2);}
.post-content > * + *{margin-top:1.15em;}
.post-content h2{font-size:clamp(24px,2.5vw,31px);color:var(--ink);margin-top:1.9em;margin-bottom:.5em;}
.post-content h3{font-size:22px;color:var(--ink);margin-top:1.7em;margin-bottom:.4em;}
.post-content img{border-radius:var(--r);margin:1.9em 0;box-shadow:var(--sh-2);}
.post-content ul,.post-content ol{padding-left:24px;}
.post-content li{margin-bottom:.55em;}
.post-content blockquote{
  margin:1.9em 0;padding:4px 0 4px 24px;border-left:2px solid var(--gold);
  font:600 clamp(20px,2vw,24px)/1.45 var(--display);color:var(--ink);letter-spacing:-.012em;
}
.post-content a{text-decoration:underline;text-underline-offset:3px;}
.post-cover{width:100%;max-height:min(64vh,620px);object-fit:cover;object-position:center 40%;border-radius:var(--r-lg);box-shadow:var(--sh-3);}
.video-frame{position:relative;padding-top:56.25%;border-radius:var(--r);overflow:hidden;margin:1.9em 0;background:#000;box-shadow:var(--sh-2);}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ---------------------------------------------------------- Share */
.share{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.share-btn{
  display:inline-flex;align-items:center;gap:8px;padding:11px 17px;border-radius:999px;
  background:var(--card);color:var(--ink-2);box-shadow:inset 0 0 0 1.5px var(--line);
  font:600 14px/1 var(--ui);cursor:pointer;transition:all .16s ease;
}
.share-btn:hover{color:var(--jade);box-shadow:inset 0 0 0 1.5px var(--jade);transform:translateY(-1px);}
.share-btn.wa:hover{color:#128c3f;box-shadow:inset 0 0 0 1.5px var(--wa);}

/* ---------------------------------------------------------- Modal */
.modal{
  position:fixed;inset:0;z-index:120;display:none;
  background:rgba(9,30,26,.6);backdrop-filter:blur(5px);padding:20px;overflow-y:auto;
}
.modal.open{display:flex;align-items:flex-start;justify-content:center;}
.modal-box{
  background:var(--card);border-radius:var(--r-lg);max-width:540px;width:100%;
  margin:auto;padding:clamp(24px,3vw,36px);box-shadow:0 40px 90px rgba(0,0,0,.35);position:relative;
  animation:pop .24s cubic-bezier(.2,.8,.3,1);
}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98);}to{opacity:1;transform:none;}}
.modal-close{
  position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;
  border:0;background:var(--sand-2);color:var(--ink-2);font-size:21px;cursor:pointer;line-height:1;
}
.modal-close:hover{background:var(--line);}
.modal h3{margin-bottom:6px;padding-right:40px;}

/* ---------------------------------------------------------- Floating + sticky CTA */
.wa-float{
  position:fixed;right:20px;bottom:20px;z-index:70;
  display:inline-flex;align-items:center;gap:10px;padding:15px 22px;border-radius:999px;
  background:var(--wa);color:#fff;font:700 15px/1 var(--ui);
  box-shadow:0 10px 30px rgba(18,140,63,.42);transition:transform .2s ease, box-shadow .2s ease;
}
.wa-float:hover{transform:translateY(-2px);color:#fff;box-shadow:0 16px 40px rgba(18,140,63,.5);}
.wa-float svg{width:21px;height:21px;fill:#fff;flex:none;}

.mobile-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:75;display:none;
  gap:10px;padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.95);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);box-shadow:0 -6px 26px rgba(15,26,23,.1);
}
.mobile-cta .btn{flex:1;padding:14px 12px;font-size:15px;}
@media (max-width:700px){
  .mobile-cta{display:flex;}
  .wa-float{display:none;}
  body{padding-bottom:78px;}
}

/* ---------------------------------------------------------- CTA band */
.cta-band{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  background:linear-gradient(135deg,var(--jade-deep) 0%,#0d5c52 55%,#116b5e 100%);
  color:#fff;padding:clamp(38px,5vw,72px) clamp(26px,4vw,64px);text-align:center;
  box-shadow:var(--sh-3);
}
.cta-band::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 120% at 85% 10%, rgba(184,135,59,.28), transparent 62%);
}
.cta-band > *{position:relative;z-index:1;}
.cta-band h2{color:#fff;margin-bottom:14px;}
.cta-band p{color:rgba(255,255,255,.86);max-width:54ch;margin:0 auto 30px;font-size:17px;}

/* ---------------------------------------------------------- Footer */
.site-footer{
  background-color:#08120f;color:#93a7a1;
  background-image:var(--lattice-light), radial-gradient(80% 100% at 100% 0%, rgba(184,135,59,.14), transparent 60%);
  padding:clamp(52px,6vw,86px) 0 28px;font-size:15px;
  border-top:3px solid transparent;
  border-image:linear-gradient(90deg,var(--gold),var(--lantern),var(--jade)) 1;
}
.site-footer h4{color:#fff;font:600 11.5px/1 var(--ui);letter-spacing:.17em;text-transform:uppercase;margin:0 0 18px;}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:clamp(28px,4vw,56px);}
@media (max-width:780px){ .footer-grid{grid-template-columns:1fr 1fr;} .footer-brand{grid-column:1/-1;} }
@media (max-width:520px){ .footer-grid{grid-template-columns:1fr;} }
.site-footer a{color:#c3d5d0;}
.site-footer a:hover{color:#fff;}
.footer-links{list-style:none;margin:0;padding:0;display:grid;gap:11px;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);margin-top:clamp(38px,4vw,58px);padding-top:24px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:13.5px;color:#6d817b;
}
.footer-logo{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.footer-logo .mark{width:44px;height:44px;border-radius:50%;overflow:hidden;flex:none;background:var(--jade);}
.footer-logo .mark img{width:100%;height:100%;object-fit:cover;object-position:57% 40%;}
.footer-logo b{font:600 20px/1.1 var(--display);color:#fff;}
.social{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;}
.social a{
  width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.09);
  display:grid;place-items:center;color:#dbe7e3;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.social a svg{width:19px;height:19px;fill:currentColor;}
.social a:hover{transform:translateY(-2px);color:#fff;}
.social-facebook:hover{background:#1877f2;}
.social-instagram:hover{background:linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888);}
.social-whatsapp:hover{background:#25d366;}
.social-tripadvisor:hover{background:#34e0a1;color:#0b1a17;}
.social-email:hover{background:var(--gold);}

/* light-background version, used in "Meet your guide" */
.reach{margin-top:26px;}
.reach-label{
  display:block;font:600 11px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px;
}
.social-light{margin-top:0;}
.social-light a{
  background:rgba(13,92,82,.055);color:var(--jade);
  box-shadow:inset 0 0 0 1px var(--line-2);
}
.social-light a:hover{color:#fff;}
.social-light .social-tripadvisor:hover{color:#0b1a17;}

/* ---------------------------------------------------------- Bits */
.empty{
  text-align:center;padding:clamp(44px,6vw,72px) 24px;border-radius:var(--r);
  background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--muted);
}
.divider{height:1px;background:var(--line-2);margin:clamp(30px,4vw,46px) 0;border:0;}
.pill-note{
  display:inline-flex;align-items:center;gap:9px;background:var(--gold-tint);color:#7a5713;
  padding:10px 18px;border-radius:999px;font-size:14px;font-weight:600;
}
.pagination{display:flex;gap:8px;justify-content:center;margin-top:clamp(36px,4vw,54px);flex-wrap:wrap;}
.pagination a,.pagination span{
  min-width:46px;padding:12px 16px;border-radius:var(--r-sm);background:var(--card);
  box-shadow:inset 0 0 0 1px var(--line);font-size:15px;text-align:center;
}
.pagination a:hover{box-shadow:inset 0 0 0 1.5px var(--jade);}
.pagination .on{background:var(--jade);color:#fff;box-shadow:none;font-weight:600;}
.skip-link{position:absolute;left:-9999px;}
.skip-link:focus{left:16px;top:12px;z-index:200;background:#fff;padding:12px 18px;border-radius:10px;}
.hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.ph{
  height:100%;width:100%;display:grid;place-items:center;text-align:center;padding:20px;
  background:linear-gradient(140deg,#0d5c52 0%,#12857a 55%,#b8873b 145%);
  color:rgba(255,255,255,.94);font:600 18px/1.3 var(--display);
}
.ph-sm{font-size:15px;}

/* ---------------------------------------------------------- Guest review page */
.review-hero{
  background:linear-gradient(160deg,var(--jade-deep) 0%,#0d5c52 100%);color:#fff;
  padding:calc(var(--header-h) + clamp(40px,5vw,64px)) 0 clamp(84px,10vw,120px);
  position:relative;overflow:hidden;
}
.review-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 110% at 90% 0%, rgba(184,135,59,.24), transparent 60%);}
.review-hero .wrap-narrow{position:relative;z-index:1;}
.review-hero h1{color:#fff;}
.review-hero p{color:rgba(255,255,255,.86);}
.pull-up{margin-top:clamp(-90px,-8vw,-64px);position:relative;z-index:2;}
.guide-strip{
  display:flex;align-items:center;gap:18px;background:var(--card);border-radius:var(--r-lg);
  padding:20px 24px;box-shadow:var(--sh-2), inset 0 0 0 1px var(--line-2);
}
.guide-strip img,.guide-strip .ph{width:66px;height:66px;border-radius:50%;object-fit:cover;object-position:57% 40%;flex:none;}
.guide-strip .ph{font-size:23px;}
.trip-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:1px;
  background:var(--line-2);border-radius:var(--r);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line-2);
}
.trip-facts div{background:var(--card);padding:18px 20px;}
.trip-facts b{display:block;font:600 11px/1.4 var(--ui);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.trip-facts span{font-size:16px;color:var(--ink);}
.plan-box{background:var(--gold-tint);border-radius:var(--r);padding:26px 28px;box-shadow:inset 0 0 0 1px #eedcb4;}
.plan-box h3{font-size:19px;margin-bottom:10px;}
.plan-box p{color:#6f5518;margin:0;white-space:pre-line;line-height:1.75;}
.rating-picker{display:flex;gap:8px;}
.rating-picker button{
  background:none;border:0;cursor:pointer;padding:2px;font-size:44px;line-height:1;color:#dcd6c8;
  transition:transform .14s cubic-bezier(.2,.8,.3,1), color .14s ease;
}
.rating-picker button:hover{transform:scale(1.14);}
.rating-picker button.on{color:var(--star);}
.rating-label{font:600 16px/1.4 var(--ui);color:var(--gold);min-height:24px;margin-top:8px;}
.file-drop{
  border:2px dashed var(--line);border-radius:var(--r-sm);padding:24px;text-align:center;
  color:var(--muted);font-size:15px;cursor:pointer;background:#fdfcfa;display:block;transition:all .18s ease;
}
.file-drop:hover{border-color:var(--jade);color:var(--jade);background:var(--jade-tint);}
.file-drop input{position:absolute;left:-9999px;}
.thanks-icon{
  width:82px;height:82px;border-radius:50%;background:var(--jade-tint);color:var(--jade);
  display:grid;place-items:center;font-size:38px;margin:0 auto 22px;
}

/* ---------------------------------------------------------- Book page */
.book-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start;}
@media (max-width:960px){ .book-layout{grid-template-columns:minmax(0,1fr);} }

/* ---------------------------------------------------------- Motion */
/* Content is only hidden when JavaScript is there to bring it back. Without
   JS — or if a script fails — everything simply shows, which is what a search
   engine and a slow connection should both get. */
.js .reveal{opacity:0;transform:translateY(22px);}
.js .reveal.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);}
.js .reveal-d1.in{transition-delay:.08s;} .js .reveal-d2.in{transition-delay:.16s;} .js .reveal-d3.in{transition-delay:.24s;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .js .reveal{opacity:1;transform:none;}
}
@supports (height: 100dvh){
  .hero{min-height:min(92dvh,860px);}
  .tour-hero{min-height:min(78dvh,700px);}
}

@media print{ .site-header,.site-footer,.wa-float,.mobile-cta,.btn{display:none!important;} }

@media (max-width:560px){
  .hero-trust{gap:14px 24px;}
  .hero-trust b{font-size:18px;}
  .hero-trust span{font-size:12.5px;}
  .hero{min-height:auto;padding-bottom:10px;}
  .hero-inner{padding-bottom:42px;}
  .tour-hero{min-height:auto;}
}

/* ---------------------------------------------------------- Dark band variants */
.stat-row-dark{
  background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.stat-row-dark .stat{background:transparent;}
.stat-row-dark .stat b{color:#f0cd8e;}
.stat-row-dark .stat span{color:rgba(255,255,255,.68);}
.steps-dark .step-item{border-top-color:rgba(255,255,255,.22);}
.steps-dark .step-item h3{color:#fff;}
.steps-dark .step-item p{color:rgba(255,255,255,.76);}
.steps-dark .step-item .n{color:#f0cd8e;}
.section-jade .eyebrow{color:#f0cd8e;}
.section-jade .rule{background:linear-gradient(90deg,#f0cd8e 0 60%,#e08b6f 60% 100%);}

/* ---------------------------------------------------------- Photo quote band */
.photo-band{
  position:relative;isolation:isolate;color:#fff;overflow:hidden;
  min-height:clamp(380px,44vw,560px);display:flex;align-items:center;
  padding:clamp(56px,7vw,96px) 0;
}
.photo-band-media{position:absolute;inset:0;z-index:-2;}
.photo-band-media img{width:100%;height:100%;object-fit:cover;object-position:center 38%;}
.photo-band::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg, rgba(6,26,23,.9) 0%, rgba(6,26,23,.66) 44%, rgba(6,26,23,.22) 82%),
    linear-gradient(180deg, rgba(6,26,23,.34), rgba(6,26,23,.5));
}
.photo-band .eyebrow{color:#edd4a2;}
.photo-band blockquote{
  margin:0;font:600 clamp(21px,2.5vw,33px)/1.34 var(--display);
  letter-spacing:-.018em;color:#fff;max-width:min(32ch,100%);text-wrap:balance;
  text-shadow:0 2px 26px rgba(4,20,17,.5);
}
.photo-band .who{
  display:flex;align-items:center;gap:14px;margin-top:28px;
  padding-top:22px;border-top:1px solid rgba(255,255,255,.24);max-width:420px;
}
.photo-band .who img{width:50px;height:50px;border-radius:50%;object-fit:cover;flex:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.35);}
.photo-band .who b{display:block;font-family:var(--ui);font-size:15.5px;font-weight:600;color:#fff;}
.photo-band .who span{font-size:13.5px;color:rgba(255,255,255,.74);}

/* ---------------------------------------------------------- Journal */
.feature-post{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  background:var(--card);border-radius:var(--r-lg);overflow:hidden;color:inherit;
  box-shadow:var(--sh-2), inset 0 0 0 1px var(--line-2);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.feature-post:hover{transform:translateY(-4px);box-shadow:var(--sh-3), inset 0 0 0 1px var(--line-2);color:inherit;}
.feature-media{position:relative;overflow:hidden;min-height:300px;background:var(--jade-tint);}
.feature-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .6s cubic-bezier(.2,.7,.3,1);}
.feature-post:hover .feature-media img{transform:scale(1.04);}
.feature-body{padding:clamp(26px,3.4vw,46px);display:flex;flex-direction:column;gap:14px;justify-content:center;}
.feature-body h2{font-size:clamp(24px,2.8vw,36px);margin:0;}
.feature-body p{color:var(--ink-2);margin:0;font-size:16.5px;}
.feature-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:8px;}
@media (max-width:820px){ .feature-post{grid-template-columns:1fr;} .feature-media{min-height:220px;aspect-ratio:16/10;} }

/* ---------------------------------------------------------- Post layout */
.post-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:clamp(30px,4vw,64px);align-items:start;}

.byline{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line-2);}
.byline img{width:50px;height:50px;border-radius:50%;object-fit:cover;object-position:57% 40%;flex:none;}
.byline b{display:block;font-size:15.5px;font-weight:600;}
.byline span{font-size:14px;color:var(--muted);}

.crumbs-dark{color:var(--muted);}
.crumbs-dark a{color:var(--ink-2);}
.crumbs-dark a:hover{color:var(--jade);}

.post-aside{
  position:sticky;top:calc(var(--header-h) + 20px);align-self:start;
  max-height:calc(100vh - var(--header-h) - 40px);
  overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(15,26,23,.18) transparent;
  padding-right:2px;
}
.post-aside::-webkit-scrollbar{width:6px;}
.post-aside::-webkit-scrollbar-thumb{background:rgba(15,26,23,.16);border-radius:99px;}
.post-aside::-webkit-scrollbar-track{background:transparent;}
.toc{
  background:var(--card);border-radius:var(--r);padding:22px 24px;
  box-shadow:inset 0 0 0 1px var(--line-2);
}
.toc b{display:block;font:600 11.5px/1 var(--ui);letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;display:grid;gap:11px;}
.toc li{counter-increment:toc;display:flex;gap:11px;font-size:14.5px;line-height:1.45;}
.toc li::before{content:counter(toc,decimal-leading-zero);color:var(--gold);font-weight:600;font-size:12px;padding-top:2px;}
.toc a{color:var(--ink-2);}
.toc a:hover{color:var(--jade);}

.author-card{
  background:var(--jade-tint);border-radius:var(--r);padding:24px;margin-top:22px;text-align:center;
  box-shadow:inset 0 0 0 1px rgba(13,92,82,.12);
}
.author-card img{width:74px;height:74px;border-radius:50%;object-fit:cover;object-position:57% 40%;margin:0 auto 14px;box-shadow:0 0 0 3px #fff;}

@media (max-width:1000px){
  /* One column: contents list first, article, then the author card at the end
     — reading it before the article made no sense. */
  .post-layout{grid-template-columns:1fr;}
  .post-aside{display:contents;position:static;max-height:none;overflow:visible;}
  .post-layout > div{order:1;}
  .toc{order:0;position:static;margin-bottom:26px;}
  .author-card{order:2;margin-top:30px;}
}
.author-card b{display:block;font-family:var(--display);font-size:19px;font-weight:600;margin-bottom:8px;}
.author-card p{font-size:14.5px;color:var(--ink-2);margin-bottom:18px;}

/* ---------------------------------------------------------- FAQ */
.faq{margin-top:clamp(38px,5vw,56px);}
.faq h2{font-size:clamp(23px,2.4vw,30px);margin-bottom:20px;}
.faq details{
  background:var(--card);border-radius:var(--r-sm);margin-bottom:12px;
  box-shadow:inset 0 0 0 1px var(--line-2);overflow:hidden;
}
.faq summary{
  padding:18px 22px;cursor:pointer;font-weight:600;font-size:16.5px;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font:400 24px/1 var(--ui);color:var(--gold);flex:none;transition:transform .25s ease;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq summary:hover{color:var(--jade);}
.faq details p{margin:0;padding:0 22px 20px;color:var(--ink-2);font-size:16px;line-height:1.68;}

.share-btn svg{width:16px;height:16px;fill:currentColor;}

/* ==================================================================
   Review slideshow over a photo
   ================================================================== */
.band-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.1s ease;}
.band-slide.is-active{opacity:1;}
.band-slide img{width:100%;height:100%;object-fit:cover;object-position:center 38%;
  transform:scale(1.06);transition:transform 7s linear;}
.band-slide.is-active img{transform:scale(1);}
.band-inner{position:relative;z-index:1;}

.band-quotes{display:grid;}
.band-quote{
  grid-area:1/1;opacity:0;transform:translateY(14px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);
  pointer-events:none;
}
.band-quote.is-active{opacity:1;transform:none;pointer-events:auto;}

.band-controls{display:flex;align-items:center;gap:16px;margin-top:26px;}
.band-arrow{
  width:44px;height:44px;border-radius:50%;flex:none;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;font:400 24px/1 var(--ui);
  border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px);
  transition:background .2s ease, transform .2s ease;
}
.band-arrow:hover{background:rgba(255,255,255,.24);transform:translateY(-1px);}
.band-dots{display:flex;gap:9px;align-items:center;}
.band-dot{
  width:26px;height:4px;padding:0;border:0;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.32);overflow:hidden;position:relative;transition:background .25s ease;
}
.band-dot span{position:absolute;inset:0;width:0;background:#fff;border-radius:99px;}
.band-dot.is-active{background:rgba(255,255,255,.35);}
.band-dot.is-active span{width:100%;transition:width var(--dot-duration,6.5s) linear;}
.band-dot:hover{background:rgba(255,255,255,.6);}

/* ==================================================================
   Guest voices — list scrolls past a glass highlight
   ================================================================== */
.voices{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(28px,4vw,64px);align-items:center;}
@media (max-width:900px){ .voices{grid-template-columns:1fr;gap:30px;} }

.voices-lead{display:grid;}
.voice-lead{
  grid-area:1/1;margin:0;opacity:0;transform:translateY(16px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);pointer-events:none;
}
.voice-lead.is-active{opacity:1;transform:none;pointer-events:auto;}
.voice-lead blockquote{
  margin:0 0 24px;font:600 clamp(21px,2.4vw,31px)/1.36 var(--display);
  letter-spacing:-.017em;color:var(--ink);text-wrap:balance;
}
.voice-lead blockquote::before{content:"“";color:var(--gold);}
.voice-lead blockquote::after{content:"”";color:var(--gold);}
.voice-lead figcaption{display:flex;align-items:center;gap:13px;}
.voice-lead figcaption b{display:block;font-size:15.5px;font-weight:600;}
.voice-lead figcaption em{font-style:normal;font-size:13.5px;color:var(--muted);}

.voices-list{
  position:relative;height:clamp(340px,38vw,430px);overflow:hidden;
  border-radius:var(--r-lg);padding:0 14px;
  background:
    linear-gradient(160deg, rgba(13,92,82,.055), rgba(184,135,59,.05) 70%),
    var(--sand);
  box-shadow:inset 0 0 0 1px var(--line-2);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.15),#000 22%,#000 78%,rgba(0,0,0,.15));
          mask-image:linear-gradient(180deg,rgba(0,0,0,.15),#000 22%,#000 78%,rgba(0,0,0,.15));
}
.voices-glass{
  position:absolute;left:14px;right:14px;top:50%;transform:translateY(-50%);
  height:clamp(138px,15.5vw,170px);border-radius:var(--r);z-index:0;pointer-events:none;
  transition:height .5s cubic-bezier(.2,.7,.3,1);
  background:linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,255,255,.72));
  backdrop-filter:blur(6px) saturate(1.4);
  -webkit-backdrop-filter:blur(6px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(184,135,59,.42),
    0 14px 40px rgba(15,26,23,.14);
  overflow:hidden;
}
/* a slow sheen so the highlight reads as glass rather than a plain card */
.voices-glass::before{
  content:"";position:absolute;top:0;bottom:0;width:45%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.85), transparent);
  animation:sheen 5.2s ease-in-out infinite;
}
@keyframes sheen{
  0%,72%{transform:translateX(-160%);}
  100%{transform:translateX(320%);}
}
.voices-glass::after{
  content:"";position:absolute;left:0;top:14%;bottom:14%;width:3px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--gold),var(--lantern));
}
.voices-track{
  position:absolute;left:14px;right:14px;top:0;z-index:1;display:grid;gap:10px;padding:2px;
  transition:transform .72s cubic-bezier(.22,.72,.24,1);will-change:transform;
}
.voice{
  display:block;width:100%;text-align:left;cursor:pointer;border:0;background:transparent;
  border-radius:var(--r);padding:18px 22px;font-family:var(--ui);color:var(--ink);
  opacity:.4;transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1);
  transform:scale(.96);
}
.voice.is-active{opacity:1;transform:scale(1);}
.voice:hover{opacity:.75;}
.voice.is-active:hover{opacity:1;}
.voice-head{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.voice-head .avatar{width:40px;height:40px;font-size:16px;}
.voice-head b{display:block;font-size:15px;font-weight:600;}
.voice-head em{font-style:normal;font-size:13px;color:var(--muted);}
.voice .stars{margin-bottom:9px;}
.voice-text{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  overflow:hidden;font-size:14.8px;line-height:1.6;color:var(--ink-2);
  min-height:calc(3 * 1.6em);
}

@media (prefers-reduced-motion:reduce){
  .voices-glass::before{animation:none;display:none;}
  .voices-track{transition:none;}
  .band-slide,.band-quote,.voice-lead{transition:none;}
  .band-slide img{transition:none;transform:none;}
}

/* ==================================================================
   Vietnam behind the page
   The country sits on the right, taller than the window, and pans from
   Hanoi to Phu Quoc as you scroll. The route draws itself on the way.
   ================================================================== */
.map-layer{
  position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  contain:strict;
}
.map-holder{
  opacity:.62;
  position:absolute;top:0;bottom:0;right:clamp(0px,1.5vw,36px);
  width:min(58vw,860px);
}
/* The country is deliberately taller than the window: scrolling walks down it
   from Hanoi to Phu Quoc instead of showing the whole map at once. */
.map-holder svg{
  position:absolute;top:0;right:0;height:clamp(1100px,195vh,2400px);width:auto;
  will-change:transform;
}
.map-shape{fill:none;stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke;}
.map-isle{stroke-width:1;}
/* No vector-effect here on purpose: with non-scaling-stroke, WebKit measures
   stroke-dasharray in device pixels while getTotalLength() reports user units,
   so the "draw as you scroll" dash pattern repeats and the line appears in
   broken pieces further down the country. Scaling the stroke keeps the dash
   maths in the same space in every browser. */
.map-route{
  fill:none;stroke-width:.95;stroke-linecap:round;stroke-linejoin:round;
}

/* the copy that reads on pale sections */
.map-ink{mix-blend-mode:multiply;}
.map-ink .map-shape{stroke:rgba(13,92,82,.32);fill:rgba(13,92,82,.03);}
.map-ink .map-route{stroke:rgba(191,74,48,.72);}

/* the copy that reads on the dark bands */
.map-glow{mix-blend-mode:screen;}
.map-glow .map-shape{stroke:rgba(180,220,210,.24);fill:rgba(160,210,200,.045);}
.map-glow .map-route{stroke:rgba(240,205,142,.8);}

.map-pins .map-pin{opacity:0;transition:opacity .5s ease;}
.map-pins .map-pin.is-on{opacity:1;}
.pin-dot{fill:var(--gold);}
.pin-halo{fill:none;stroke:var(--gold);stroke-width:1.2;opacity:.5;vector-effect:non-scaling-stroke;}
.map-pin.is-current .pin-dot{fill:var(--lantern);}
.map-pin.is-current .pin-halo{stroke:var(--lantern);animation:pinPulse 2.4s ease-out infinite;}
@keyframes pinPulse{
  0%{transform:scale(.5);opacity:.7;}
  70%{transform:scale(1.5);opacity:0;}
  100%{opacity:0;}
}

.map-caption{
  position:fixed;z-index:6;pointer-events:none;right:clamp(14px,2.4vw,40px);bottom:clamp(96px,14vh,160px);
  max-width:212px;text-align:right;opacity:0;transform:translateY(8px);
  transition:opacity .45s ease, transform .45s ease;
  padding:10px 13px;border-radius:14px;
  background:rgba(255,253,248,.9);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 6px 22px rgba(10,40,35,.12), inset 0 0 0 1px rgba(13,92,82,.12);
}
.map-caption.is-on{opacity:1;transform:none;}
.map-caption b{
  display:block;font:600 11px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;
  color:var(--lantern);margin-bottom:5px;
}
.map-caption span{font-size:12px;line-height:1.45;color:#4a5c57;}

@media (max-width:900px){
  .map-holder{width:min(120vw,560px);right:-26vw;}
  .map-holder svg{height:clamp(760px,145vh,1500px);}
  .map-route{stroke-width:1.25;}
  .map-holder{opacity:.5;}
  .map-caption{
    right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 84px);
    max-width:none;left:12px;text-align:left;
    display:flex;align-items:baseline;gap:10px;padding:9px 14px;
  }
  .map-caption b{margin-bottom:0;white-space:nowrap;font-size:10px;}
  .map-caption span{font-size:11.5px;}
}
@media (prefers-reduced-motion:reduce){
  .map-holder svg{transition:none;}
  .map-pin.is-current .pin-halo{animation:none;}
}

/* Keep page content painting above the map layer: the wrap is transparent, so
   the map still shows through the gaps, but text and cards never sit under a
   route line. */
main .wrap,
.site-footer .wrap{position:relative;z-index:3;}

/* ==================================================================
   Booking form — numbered steps, counters and a real calendar
   ================================================================== */
.form-head{margin-bottom:26px;}
.form-head h2{margin-bottom:6px;}

.book-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.book-steps .step{position:relative;padding:0 0 22px 0;}
.book-steps .step + .step{border-top:1px solid var(--line-2);padding-top:24px;}
.book-steps .step-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.book-steps .step-no{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:var(--jade);color:#fff;
  font:700 14px/1 var(--ui);
}
.book-steps .step-head h3{font-size:19px;margin:0;letter-spacing:-.01em;}
.book-steps .step-body .field:last-child{margin-bottom:0;}
.chips-sm span{padding:9px 15px;font-size:14px;}

/* --- people counters --- */
.counters{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
@media (max-width:560px){ .counters{grid-template-columns:1fr;} }
.counter{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--card);
}
.counter-label b{display:block;font-size:15px;font-weight:600;}
.counter-label span{display:block;font-size:12.5px;color:var(--muted);}
.counter-ctl{display:flex;align-items:center;gap:4px;}
.counter-ctl output{min-width:26px;text-align:center;font:600 16px/1 var(--ui);}
.cbtn{
  width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);
  background:var(--card);color:var(--jade);font:400 19px/1 var(--ui);cursor:pointer;
  display:grid;place-items:center;transition:all .15s ease;
}
.cbtn:hover:not(:disabled){border-color:var(--jade);background:var(--jade);color:#fff;}
.cbtn:disabled{opacity:.35;cursor:default;}
.cbtn:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(13,92,82,.18);}

/* --- date field --- */
.js [data-datefield],
.js [data-datefield-past]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}
.datewrap{position:relative;}
.datebtn{
  width:100%;display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;
  padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  font:400 16px/1.5 var(--ui);color:var(--muted);background:var(--card);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.datebtn:hover{border-color:rgba(15,26,23,.2);}
.datebtn.is-set{color:var(--ink);font-weight:600;}
.datebtn[aria-expanded="true"],.datebtn:focus-visible{
  outline:none;border-color:var(--jade);box-shadow:0 0 0 4px rgba(13,92,82,.12);
}
.datebtn svg{width:19px;height:19px;fill:none;stroke:var(--jade);stroke-width:1.7;flex:0 0 auto;}
.datebtn [data-datetext]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.datebtn .datebtn-hint{margin-left:auto;font-size:13px;font-weight:400;color:var(--muted);white-space:nowrap;}
.modal .datebtn-hint{display:none;}

.cal{
  position:absolute;z-index:40;scroll-margin-bottom:110px;top:calc(100% + 8px);left:0;width:min(360px,100%);
  background:var(--card);border-radius:var(--r);padding:16px;
  box-shadow:0 18px 50px rgba(15,26,23,.18), inset 0 0 0 1px var(--line-2);
  opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;
}
.cal.is-open{opacity:1;transform:none;pointer-events:auto;}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.cal-title{font:600 15.5px/1 var(--ui);}
.cal-nav{
  width:32px;height:32px;border-radius:50%;border:0;background:var(--sand);color:var(--ink);
  cursor:pointer;display:grid;place-items:center;font-size:15px;transition:background .15s ease;
}
.cal-nav:hover:not(:disabled){background:var(--jade);color:#fff;}
.cal-nav:disabled{opacity:.3;cursor:default;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.cal-dow{
  font:600 11px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);text-align:center;padding:6px 0 8px;
}
.cal-day{
  aspect-ratio:1;border:0;border-radius:50%;background:transparent;cursor:pointer;
  font:400 14.5px/1 var(--ui);color:var(--ink);transition:background .14s ease, color .14s ease;
}
.cal-day:hover:not(:disabled){background:var(--jade-soft);}
.cal-day:disabled{color:rgba(15,26,23,.24);cursor:default;}
.cal-day.is-today{box-shadow:inset 0 0 0 1.5px var(--gold);font-weight:600;}
.cal-day.is-sel{background:var(--jade);color:#fff;font-weight:700;}
.cal-day:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(13,92,82,.3);}
.cal-foot{display:flex;gap:8px;margin-top:12px;}
.cal-foot button{
  flex:1;padding:9px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);
  font:600 13.5px/1 var(--ui);color:var(--ink);cursor:pointer;transition:all .15s ease;
}
.cal-foot button:hover{border-color:var(--jade);color:var(--jade);}
@media (max-width:560px){
  .cal{width:100%;padding:14px;}
  .datebtn-hint{display:none;}
  .cal-day{font-size:15px;}
}

/* ==================================================================
   Guest reviews page
   ================================================================== */
.score-card{
  display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr) minmax(0,280px);
  gap:0;align-items:stretch;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(13,92,82,.05), transparent 55%),
    var(--card);
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 24px 60px rgba(15,26,23,.09), inset 0 0 0 1px var(--line-2);
}
.score-card > *{padding:clamp(26px,2.8vw,38px);}

/* the score itself */
.score-figure{
  text-align:center;display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(165deg, rgba(13,92,82,.06), rgba(184,135,59,.07));
  border-right:1px solid var(--line-2);
}
.score-num{
  font:600 clamp(58px,6.4vw,78px)/1 var(--display);color:var(--jade);
  letter-spacing:-.035em;font-variant-numeric:tabular-nums;
}
.score-figure .stars{justify-content:center;margin:10px 0 0;}
.score-word{
  font:600 12px/1 var(--ui);letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-deep,#8a6420);margin:14px 0 6px;
}
.score-count{font-size:13.5px;color:var(--muted);margin:0;}

/* the breakdown */
.score-bars{display:flex;flex-direction:column;justify-content:center;gap:11px;border-right:1px solid var(--line-2);}
.score-bars .bar-track{height:7px;background:rgba(15,26,23,.07);}
.score-bars .bar-fill{background:linear-gradient(90deg,var(--gold),#d8a44e);}
.score-verified{
  display:flex;align-items:flex-start;gap:9px;margin:8px 0 0;
  font-size:13px;line-height:1.5;color:var(--muted);
}
.score-verified svg{
  width:17px;height:17px;flex:none;margin-top:1px;
  fill:rgba(13,92,82,.12);stroke:var(--jade);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}

/* the invitation to write one */
.score-action{
  display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(170deg, var(--jade-deep), #0d5c52);color:#fff;
}
.score-action h3{color:#fff;font-size:20px;margin:0 0 8px;letter-spacing:-.01em;}
.score-action p{color:rgba(255,255,255,.78);font-size:14.5px;line-height:1.55;margin:0 0 18px;}
.score-action .btn-primary{background:#fff;color:var(--jade-deep);box-shadow:none;}
.score-action .btn-primary:hover{background:var(--sand);color:var(--jade-deep);transform:translateY(-1px);}
.score-google{
  display:block;text-align:center;margin-top:12px;font-size:13.5px;
  color:rgba(255,255,255,.72);text-decoration:underline;text-underline-offset:3px;
}
.score-google:hover{color:#fff;}

/* the numbers underneath */
.score-facts{
  grid-column:1/-1;list-style:none;margin:0;
  border-top:1px solid var(--line-2);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:22px;text-align:center;
}
.score-facts li + li{border-left:1px solid var(--line-2);}
.score-facts b{display:block;font:600 27px/1 var(--display);color:var(--ink);letter-spacing:-.02em;}
.score-facts span{display:block;font-size:13px;color:var(--muted);margin-top:6px;}

@media (max-width:1040px){
  .score-card{grid-template-columns:minmax(0,240px) minmax(0,1fr);}
  .score-action{grid-column:1/-1;border-top:1px solid var(--line-2);}
  .score-bars{border-right:0;}
  .score-action .btn{max-width:320px;margin:0 auto;}
  .score-action{text-align:center;}
}
@media (max-width:680px){
  .score-card{grid-template-columns:1fr;}
  .score-figure{border-right:0;border-bottom:1px solid var(--line-2);}
  .score-facts{grid-template-columns:repeat(2,1fr);gap:18px 0;}
  .score-facts li:nth-child(odd){border-left:0;}
  .score-facts li:nth-child(n+3){border-top:1px solid var(--line-2);padding-top:18px;}
}

/* the one big review at the top */
.lead-review{
  margin:0;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(20px,2.6vw,38px);align-items:center;
  background:var(--card);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-2), inset 0 0 0 1px var(--line-2);
}
.lead-review.no-photo{grid-template-columns:1fr;}
.lead-photo{align-self:stretch;}
.lead-photo img{width:100%;height:100%;min-height:280px;object-fit:cover;display:block;}
.lead-review blockquote{margin:0;padding:clamp(24px,3vw,44px) clamp(24px,3vw,44px) clamp(24px,3vw,44px) 0;}
.lead-review.no-photo blockquote{padding-left:clamp(24px,3vw,44px);}
.lead-review blockquote p{
  font:500 clamp(19px,2.1vw,26px)/1.5 var(--display);color:var(--ink);
  letter-spacing:-.015em;margin:16px 0 22px;text-wrap:pretty;
}
.lead-review blockquote p::before{content:"“";color:var(--gold);}
.lead-review blockquote p::after{content:"”";color:var(--gold);}
.lead-review figcaption{display:flex;align-items:center;gap:13px;}
.lead-review figcaption b{display:block;font-size:16px;}
.lead-review figcaption small{display:block;font-size:13.5px;color:var(--muted);margin-top:2px;}
@media (max-width:760px){
  .lead-review{grid-template-columns:1fr;}
  .lead-photo img{min-height:220px;}
  .lead-review blockquote{padding:24px;}
}

/* filter chips */
.rev-filter{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:clamp(22px,2.6vw,32px);}
.chip-btn{
  padding:10px 17px;border:1.5px solid var(--line);border-radius:999px;background:var(--card);
  font:400 14.5px/1 var(--ui);color:var(--ink);cursor:pointer;transition:all .16s ease;
}
.chip-btn:hover{border-color:var(--jade);color:var(--jade);}
.chip-btn.is-on{background:var(--jade);border-color:var(--jade);color:#fff;font-weight:600;}
.chip-btn:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(13,92,82,.18);}
@media (max-width:620px){
  /* one scrolling row rather than six stacked lines */
  .rev-filter{
    flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .rev-filter::-webkit-scrollbar{display:none;}
  .chip-btn{flex:0 0 auto;scroll-snap-align:start;}
}

/* review cards */
.review{position:relative;transition:transform .22s ease, box-shadow .22s ease;}
.review:hover{transform:translateY(-3px);box-shadow:var(--sh-2), inset 0 0 0 1px var(--line-2);}
.review::after{
  content:"”";position:absolute;bottom:-14px;right:20px;
  font:600 76px/1 var(--display);color:rgba(184,135,59,.14);pointer-events:none;
}
.review-head{align-items:flex-start;}
.review-head .stars{margin-left:auto;}
.avatar{background:linear-gradient(140deg, hsl(var(--hue,168) 62% 26%), hsl(var(--hue,168) 52% 40%));}
.review-tag{
  align-self:flex-start;font-size:12.5px;font-weight:600;letter-spacing:.02em;
  color:var(--jade);background:var(--jade-tint);padding:6px 12px;border-radius:999px;
}
.review[hidden]{display:none;}

/* photo mosaic */
.mosaic{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  grid-auto-rows:210px;gap:clamp(10px,1.2vw,16px);grid-auto-flow:dense;
}
.mosaic figure{
  margin:0;border-radius:var(--r-sm);overflow:hidden;background:var(--jade-tint);position:relative;
}
.mosaic figure.wide{grid-column:span 2;grid-row:span 2;}
.mosaic img{width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);display:block;}
.mosaic figure:hover img{transform:scale(1.06);}
.mosaic figcaption{
  position:absolute;inset:auto 0 0;padding:30px 14px 12px;color:#fff;font-size:13px;
  background:linear-gradient(transparent,rgba(6,26,23,.82));
  opacity:0;transition:opacity .3s ease;
}
.mosaic figure:hover figcaption{opacity:1;}
@media (max-width:620px){
  .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;}
  .mosaic figure.wide{grid-column:span 2;grid-row:span 2;}
  .mosaic figcaption{opacity:1;}
}

/* review photo picker */
.photo-previews{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.photo-previews img{
  width:74px;height:74px;object-fit:cover;border-radius:var(--r-sm);
  box-shadow:inset 0 0 0 1px var(--line-2);
}

/* more than one photo on a review */
.review-photo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;background:transparent;}
.review-photo-grid img{aspect-ratio:1;border-radius:var(--r-sm);}
.lead-photo{position:relative;}
.lead-more{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;background:var(--card);}
.lead-more img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;display:block;min-height:0;}

/* ==================================================================
   Journal — index and article
   ================================================================== */
.post-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.post-meta{
  display:inline-flex;align-items:center;gap:9px;
  font:500 12.5px/1 var(--ui);letter-spacing:.02em;color:var(--muted);
}
.post-meta i{width:3px;height:3px;border-radius:50%;background:var(--gold);display:inline-block;}

/* cards on the index */
.post-card .card-media{position:relative;overflow:hidden;}
.post-card .card-media img{transition:transform .7s cubic-bezier(.2,.7,.3,1);}
.post-card:hover .card-media img{transform:scale(1.05);}
.post-card .media-tag{
  position:absolute;left:12px;top:12px;z-index:1;
  background:rgba(255,253,248,.94);color:var(--jade);
  font:600 11.5px/1 var(--ui);letter-spacing:.03em;
  padding:8px 12px;border-radius:999px;box-shadow:0 4px 14px rgba(15,26,23,.12);
  max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.post-card .card-body{display:flex;flex-direction:column;gap:10px;}
.post-card h3{margin:0;}
.post-card p{
  margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.post-card .card-foot{margin-top:auto;padding-top:6px;}

/* the reading progress line under the header */
.read-bar{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;background:transparent;
}
.read-bar span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--gold),var(--lantern));
  transition:width .12s linear;
}

/* article header and cover */
.post-head{padding:calc(var(--header-h) + clamp(26px,3vw,44px)) 0 0;}
.post-head .tag{margin-bottom:4px;}
.post-cover-wrap{
  max-width:1040px;margin:clamp(26px,3vw,40px) auto 0;padding:0 var(--gut);
}
.post-cover{max-height:min(60vh,560px);}

/* on this page */
.toc li.is-here a{color:var(--jade);font-weight:600;}
.toc li.is-here::before{color:var(--lantern);}

/* body copy */
.post-content > p:first-of-type{font-size:19.5px;color:var(--ink);}
.post-content figure{margin:2em 0;}
.post-content figure img{width:100%;border-radius:var(--r);box-shadow:var(--sh-2);display:block;}
.post-content figcaption{
  margin-top:10px;font-size:14px;color:var(--muted);text-align:left;line-height:1.5;
}
@media (max-width:700px){
  .post-head{padding-top:calc(var(--header-h) + 20px);}
  .post-content > p:first-of-type{font-size:18px;}
}

/* month + year pickers in the calendar header */
.cal-pickers{display:flex;gap:6px;align-items:center;}
.cal .cal-select{
  width:auto;flex:0 0 auto;appearance:none;-webkit-appearance:none;
  padding:7px 26px 7px 10px;border:1.5px solid var(--line-2);border-radius:9px;
  font:600 14px/1 var(--ui);color:var(--ink);background-color:var(--card);cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a76' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 7px center;background-size:14px;
}
.cal .cal-select:hover{border-color:var(--jade);}
.cal .cal-select:focus-visible{outline:none;border-color:var(--jade);box-shadow:0 0 0 3px rgba(13,92,82,.16);}

/* ---- calendar: title button + month/year chooser ---- */
.cal-head{position:relative;}
.cal .cal-label{
  display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;cursor:pointer;
  padding:8px 12px;border-radius:10px;font:600 15.5px/1 var(--ui);color:var(--ink);
  transition:background .15s ease;
}
.cal .cal-label:hover{background:var(--jade-tint);}
.cal .cal-label svg{width:15px;height:15px;fill:none;stroke:var(--muted);stroke-width:2.4;stroke-linecap:round;transition:transform .2s ease;}
.cal .cal-label[aria-expanded="true"] svg{transform:rotate(180deg);}
.cal .cal-label[aria-expanded="true"]{background:var(--jade-tint);color:var(--jade);}

.cal-body{position:relative;}
.cal-jump{
  position:absolute;inset:0;background:var(--card);border-radius:12px;
  display:flex;flex-direction:column;gap:12px;padding:2px;
  opacity:0;visibility:hidden;transform:scale(.97);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.cal.is-jump .cal-jump{opacity:1;visibility:visible;transform:none;}
.cal.is-jump .cal-grid{opacity:.15;pointer-events:none;}
.cal.is-jump .cal-nav[data-prev],.cal.is-jump .cal-nav[data-next]{opacity:.25;pointer-events:none;}
.jump-years{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.jump-year{font:600 16px/1 var(--ui);color:var(--ink);font-variant-numeric:tabular-nums;}
.jump-months{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;flex:1;}
.jump-m{
  border:1.5px solid transparent;background:var(--sand);border-radius:10px;cursor:pointer;
  font:500 14px/1 var(--ui);color:var(--ink);padding:12px 4px;transition:all .14s ease;
}
.jump-m:hover:not(:disabled){background:var(--jade-tint);color:var(--jade);}
.jump-m:disabled{opacity:.32;cursor:default;}
.jump-m.is-now{border-color:var(--gold);}
.jump-m.is-sel{background:var(--jade);color:#fff;font-weight:600;border-color:var(--jade);}