/* ============================================================
   DANUM VALLEY — DESIGN TOKENS
   Palette per brand spec §4. Single accent: ember #C9642A.
   ============================================================ */
:root{
  --canopy:#1E3A2B;        /* primary dark green */
  --forest:#12211A;        /* near-black text / overlays */
  --bark:#5A4632;          /* warm earth */
  --stone:#EBE7DE;         /* misty light background */
  --paper:#FAF8F3;         /* page base */
  --ember:#C9642A;         /* CTA accent — use sparingly */
  --ember-deep:#A84F1E;
  --mist:#DCE4DC;
  --hairline:rgba(18,33,26,.14);
  --hairline-inv:rgba(250,248,243,.22);
  --ink-soft:rgba(18,33,26,.72);
  --ink-faint:rgba(18,33,26,.62);
  --display:"Libre Baskerville",Georgia,serif;
  --body:"Inter",-apple-system,"Segoe UI",sans-serif;
  --max:1280px;
  --gutter:clamp(20px,4vw,56px);
  --radius:6px;
  --shadow:0 18px 50px -24px rgba(18,33,26,.35);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);font-size:17px;line-height:1.65;
  color:var(--forest);background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:2px}
::selection{background:var(--canopy);color:var(--paper)}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--ember);color:#fff;padding:10px 18px;z-index:200;border-radius:0 0 var(--radius) 0;font-weight:600}
.skip-link:focus{left:0}

/* ---------- type ---------- */
h1,h2,h3,.serif{font-family:var(--display);font-weight:400;line-height:1.12;letter-spacing:-.01em}
.kicker{
  font-family:var(--body);font-size:11.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--bark);
  display:flex;align-items:center;gap:12px;
}
.kicker::before{content:"";width:26px;height:1px;background:var(--ember);flex:none}
.on-dark .kicker{color:rgba(250,248,243,.75)}
.section-head{max-width:720px;margin-bottom:clamp(28px,4vw,52px)}
.section-head h2{font-size:clamp(30px,4.2vw,48px);margin:14px 0 12px}
.section-head p{color:var(--ink-soft);max-width:56ch}
.lede{font-size:clamp(18px,1.6vw,20px)}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
section{padding-block:clamp(64px,9vw,120px)}
.grid{display:grid;gap:clamp(20px,2.6vw,36px)}
.hairline-top{border-top:1px solid var(--hairline)}
.on-dark{background:var(--forest);color:var(--paper)}
.on-stone{background:var(--stone)}
.on-canopy{background:var(--canopy);color:var(--paper)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:var(--radius);
  font-weight:600;font-size:15px;text-decoration:none;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.btn svg{width:15px;height:15px;flex:none}
.btn-primary{background:var(--ember);color:#fff}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--ember-deep);color:#fff}
.btn-secondary{background:transparent;color:var(--forest);border:1px solid var(--forest)}
.btn-secondary:hover{background:var(--forest);color:var(--paper)}
.on-dark .btn-secondary,.on-canopy .btn-secondary,.hero .btn-secondary{color:var(--paper);border-color:rgba(250,248,243,.7)}
.on-dark .btn-secondary:hover,.on-canopy .btn-secondary:hover,.hero .btn-secondary:hover{background:var(--paper);color:var(--forest)}
.btn-ghost svg{width:15px;height:15px;flex:none}
.btn-ghost{padding:6px 2px;border-radius:0;color:var(--forest);border-bottom:1px solid var(--ember);text-decoration:none;font-weight:600;font-size:15px;display:inline-flex;gap:8px;align-items:center}
.btn-ghost:hover{color:var(--ember)}
.on-dark .btn-ghost,.on-canopy .btn-ghost{color:var(--paper)}

/* image slots: every one resolves to a file or to the gradient panel */
.ph{
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:
    radial-gradient(120% 90% at 20% 0%,rgba(250,248,243,.16),transparent 55%),
    linear-gradient(165deg,#2C4A38 0%,#1E3A2B 45%,#12211A 100%);
  min-height:200px;
}
.ph::after{ /* mist band */
  content:"";position:absolute;inset:auto 0 0 0;height:55%;
  background:linear-gradient(to top,rgba(18,33,26,.55),transparent);
}
.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
 /* overlays hidden site-wide; alt/aria keep the replacement record */
.ph .canopy-lines{position:absolute;inset:0;width:100%;height:100%;opacity:.5}

.ph.warm{background:radial-gradient(120% 90% at 80% 0%,rgba(201,100,42,.35),transparent 55%),linear-gradient(165deg,#3A2E20 0%,#5A4632 40%,#1E241C 100%)}
.ph.river{background:radial-gradient(120% 100% at 50% 0%,rgba(46,110,99,.5),transparent 60%),linear-gradient(170deg,#254A3E 0%,#1B332A 55%,#12211A 100%)}
.ph.dawn{background:radial-gradient(140% 90% at 50% 100%,rgba(201,100,42,.45),transparent 55%),linear-gradient(180deg,#22402F 0%,#16281F 60%,#12211A 100%)}
.ph.night{background:radial-gradient(60% 40% at 70% 25%,rgba(235,231,222,.18),transparent 70%),linear-gradient(180deg,#0D1712 0%,#12211A 100%)}

/* ---------- header / nav ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:rgba(18,33,26,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .35s var(--ease),box-shadow .35s var(--ease);
  color:var(--paper);
}
.site-header.solid{background:rgba(18,33,26,.96);box-shadow:0 1px 0 rgba(250,248,243,.08)}
.nav-bar{display:flex;align-items:center;gap:28px;height:76px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;margin-right:auto}
.logo svg{width:30px;height:30px}
.logo .word{font-family:var(--display);font-size:21px;font-weight:400;letter-spacing:.01em;line-height:1}
.logo .word small{display:block;font-family:var(--body);font-size:9px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;opacity:.7;margin-top:3px}
.primary-nav{display:flex;align-items:center;gap:4px}
.primary-nav>li{list-style:none;position:relative}
.nav-link{
  display:flex;align-items:center;gap:6px;padding:10px 13px;
  font-size:14.5px;font-weight:500;text-decoration:none;border-radius:4px;
  color:inherit;opacity:.92;
}
.nav-link:hover{opacity:1}
.nav-link .chev{width:9px;height:9px;flex:none;transition:transform .2s var(--ease)}
.primary-nav>li.open>.nav-link .chev{transform:rotate(180deg)}
.mega{
  position:absolute;top:100%;margin-top:10px;left:0;min-width:270px;
  background:var(--paper);color:var(--forest);border-radius:var(--radius);
  box-shadow:var(--shadow);border:1px solid var(--hairline);
  padding:18px;display:none;
}
.primary-nav>li.open>.mega{display:block}
@media (hover:hover) and (pointer:fine){
  .primary-nav>li:hover>.mega,.primary-nav>li:focus-within>.mega{display:block}
  .primary-nav>li:hover>.mega.wide,.primary-nav>li:focus-within>.mega.wide{display:grid}
  .primary-nav>li:hover>.nav-link .chev,.primary-nav>li:focus-within>.nav-link .chev{transform:rotate(180deg)}
}
.primary-nav>li>.mega::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.mega .mega-title{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--bark);margin-bottom:10px}
.mega ul{list-style:none;display:grid;gap:2px}
.mega a{display:block;padding:8px 10px;border-radius:4px;text-decoration:none;font-size:14.5px}
.mega a:hover{background:var(--stone)}
.mega a .sub{display:block;font-size:12px;color:var(--ink-faint)}
.mega.wide{min-width:520px;display:none;grid-template-columns:1fr 1fr;gap:22px}
.primary-nav>li.open>.mega.wide{display:grid}
.nav-actions{display:flex;align-items:center;gap:16px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;transition:background .2s}
.icon-btn:hover{background:rgba(250,248,243,.12)}
.icon-btn svg{width:18px;height:18px}
.lang-toggle{display:flex;border:1px solid rgba(250,248,243,.4);border-radius:999px;overflow:hidden;font-size:12.5px;font-weight:600;margin-left:4px}
.lang-toggle button{padding:6px 12px;opacity:.75;transition:background .2s var(--ease),opacity .2s var(--ease)}
.lang-toggle button:not([aria-pressed="true"]):hover{background:rgba(250,248,243,.16);opacity:1}
.lang-toggle button[aria-pressed="true"]{background:var(--paper);color:var(--forest);opacity:1}
.nav-cta{padding:11px 20px;font-size:14px}
.burger{display:none}
@media (max-width:1080px){
  .primary-nav,.nav-cta{display:none}
  .burger{display:inline-flex}
}

/* ---------- mobile drawer ---------- */
.drawer{
  position:fixed;inset:0;z-index:150;background:var(--forest);color:var(--paper);
  padding:24px var(--gutter) 48px;overflow:auto;
  transform:translateX(100%);transition:transform .4s var(--ease);visibility:hidden;
}
.drawer.open{transform:none;visibility:visible}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}
.drawer nav>ul{list-style:none;display:grid;gap:2px}
.acc-btn{width:100%;display:flex;justify-content:space-between;align-items:center;padding:15px 4px;font-family:var(--display);font-size:22px;border-bottom:1px solid var(--hairline-inv)}
.acc-btn .chev{width:12px;height:12px;flex:none;transition:transform .25s var(--ease)}
.acc-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.acc-panel{display:none;padding:8px 4px 18px}
.acc-panel.open{display:grid;gap:4px}
.acc-panel a{text-decoration:none;padding:8px 6px;font-size:15.5px;opacity:.9;border-radius:4px}
.acc-panel a:hover{background:rgba(250,248,243,.08)}
.drawer-foot{margin-top:30px;display:grid;gap:12px}

/* ---------- search overlay ---------- */
.search-overlay{
  position:fixed;inset:0;z-index:160;background:rgba(18,33,26,.6);backdrop-filter:blur(4px);
  display:none;align-items:flex-start;justify-content:center;padding:9vh var(--gutter) 40px;
}
.search-overlay.open{display:flex}
.search-panel{background:var(--paper);color:var(--forest);width:min(720px,100%);border-radius:10px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;max-height:78vh}
.search-input-row{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--hairline)}
.search-input-row svg{width:19px;height:19px;color:var(--bark);flex:none}
#search-input{flex:1;border:0;background:none;font:inherit;font-size:18px;outline:none}
.search-chips{display:flex;flex-wrap:wrap;gap:8px;padding:14px 22px;border-bottom:1px solid var(--hairline)}
.chip{font-size:12.5px;font-weight:600;padding:6px 14px;border-radius:999px;border:1px solid var(--hairline);color:var(--ink-soft)}
.chip[aria-pressed="true"]{background:var(--canopy);border-color:var(--canopy);color:var(--paper)}
.search-results{overflow:auto;padding:10px 12px 18px}
.search-results a{display:flex;gap:14px;align-items:baseline;padding:12px 12px;text-decoration:none;border-radius:6px}
.search-results a:hover,.search-results a:focus-visible{background:var(--stone)}
.search-results .r-type{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--ember);flex:none;width:88px}
.search-results .r-title{font-weight:600;font-size:15px}
.search-results .r-sub{font-size:13px;color:var(--ink-faint)}
.search-empty{padding:26px 22px;color:var(--ink-faint);font-size:15px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:var(--paper);overflow:hidden;background:var(--forest);padding:0}
.hero-art{position:absolute;inset:0}
.hero-art .layer{position:absolute;inset:-6% -4%;width:108%;height:112%;will-change:transform}
.hero-art .sky{background:linear-gradient(180deg,#33523F 0%,#22402F 38%,#16281F 72%,#12211A 100%)}
.hero-art .sun{position:absolute;top:14%;left:58%;width:34vmin;height:34vmin;border-radius:50%;background:radial-gradient(circle,rgba(235,231,222,.32),rgba(201,100,42,.14) 45%,transparent 70%)}
.hero-veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(18,33,26,.82) 0%,rgba(18,33,26,.25) 45%,rgba(18,33,26,.15) 100%)}
.hero-inner{position:relative;z-index:2;width:100%;padding-block:150px clamp(56px,9vh,110px)}
.hero h1{font-size:clamp(42px,7vw,86px);max-width:12ch;margin:18px 0 18px;font-weight:400}
.hero .sub{font-size:clamp(17px,1.7vw,20px);max-width:52ch;color:rgba(250,248,243,.88);margin-bottom:34px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px}
.scroll-cue{position:absolute;right:var(--gutter);bottom:34px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;opacity:.7;writing-mode:vertical-rl}
.scroll-cue .line{width:1px;height:56px;background:linear-gradient(var(--paper),transparent);animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top}55%{transform:scaleY(1)}100%{opacity:0}}

/* ---------- stats strip ---------- */
.stats{padding-block:0}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);border-inline:1px solid var(--hairline)}
.stat{padding:clamp(26px,3.4vw,44px) clamp(16px,2.4vw,34px);border-right:1px solid var(--hairline)}
.stat:first-child{border-left:1px solid var(--hairline)}
.stat:last-child{border-right:0}
.stat .num{font-family:var(--display);font-size:clamp(30px,3.6vw,46px);line-height:1;font-weight:400}
.stat .num sup{font-size:.45em;vertical-align:super}
.stat .lbl{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--bark);margin-top:10px}
@media (max-width:820px){.stats .wrap{grid-template-columns:1fr 1fr}.stat:nth-child(2){border-right:0}.stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--hairline)}}

/* ---------- stays ---------- */
.stays-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,2.6vw,32px)}
.stay-card{position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit}
.stay-card .ph{aspect-ratio:4/3;transition:transform .5s var(--ease)}
.stay-card:hover .ph .zoom{transform:scale(1.04)}
.stay-card .ph .zoom{position:absolute;inset:0;transition:transform .8s var(--ease)}
.stay-flag{position:absolute;top:14px;left:14px;z-index:2;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;background:var(--paper);color:var(--forest);padding:6px 12px;border-radius:3px}
.stay-flag.ember{background:var(--ember);color:#fff}
.stay-body{padding:22px 2px 0}
.stay-body h3{font-size:clamp(24px,2.4vw,34px);margin-bottom:8px}
.stay-body .pos{color:var(--ink-soft);max-width:52ch;margin-bottom:14px}
.stay-facts{list-style:none;display:grid;gap:7px;margin-bottom:18px}
.stay-facts li{display:flex;gap:10px;font-size:14.5px;color:var(--ink-soft)}
.stay-facts li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ember);margin-top:9px;flex:none}
.stay-hero{grid-column:span 12}
.stay-hero .ph{aspect-ratio:16/8}
.stay-half{grid-column:span 6}
@media (max-width:820px){.stay-half{grid-column:span 12}}
.stay-hero .stay-body{display:grid;grid-template-columns:1.2fr .9fr;gap:clamp(18px,3vw,44px);align-items:start}
@media (max-width:820px){.stay-hero .stay-body{grid-template-columns:1fr}}

/* ---------- wildlife rail ---------- */
.rail-wrap{position:relative}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:min(300px,72vw);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail>a{scroll-snap-align:start;text-decoration:none;color:inherit}
.rail .ph{aspect-ratio:3/4}
.rail h3{font-size:21px;margin:14px 0 4px}
.rail .latin{font-size:13px;font-style:italic;color:rgba(250,248,243,.78)}
.rail-nav{position:absolute;top:-74px;right:0;display:flex;gap:8px}
.rail-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--hairline-inv);display:inline-flex;align-items:center;justify-content:center}
.rail-nav button:hover{background:rgba(250,248,243,.1)}
.rail-nav svg{width:15px;height:15px}

/* ---------- map preview ---------- */
.map-split{display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(24px,4vw,60px);align-items:center}
@media (max-width:920px){.map-split{grid-template-columns:1fr}}
.map-stage{position:relative;border-radius:10px;overflow:hidden;background:#DFE6DC;border:1px solid var(--hairline);min-height:380px}
.map-stage>svg{position:absolute;inset:0;width:100%;height:100%}
.map-pin{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--forest)}
.map-pin .dot{width:14px;height:14px;border-radius:50%;background:var(--ember);border:3px solid var(--paper);box-shadow:0 2px 8px rgba(18,33,26,.35);transition:transform .2s var(--ease)}
.map-pin.town .dot{background:var(--bark)}
.map-pin:hover .dot,.map-pin:focus-visible .dot{transform:scale(1.3)}
.map-pin .pin-lbl{background:rgba(250,248,243,.92);padding:2px 8px;border-radius:3px;white-space:nowrap}
.map-card{position:absolute;left:14px;bottom:14px;right:14px;max-width:330px;background:var(--paper);border-radius:8px;box-shadow:var(--shadow);padding:16px 18px;display:none}
.map-card.open{display:block}
.map-card h4{font-family:var(--display);font-size:19px;margin-bottom:4px}
.map-card p{font-size:13.5px;color:var(--ink-soft);margin-bottom:10px}
.map-list{list-style:none;display:grid;gap:6px;margin-top:20px;font-size:14px;color:var(--ink-soft)}
.map-list li{display:flex;gap:10px}
.map-list .dot{width:8px;height:8px;border-radius:50%;background:var(--ember);margin-top:7px;flex:none}
.map-list .dot.town{background:var(--bark)}

/* ---------- experiences ---------- */
.exp-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(18px,2.4vw,28px)}
.exp-grid{align-items:stretch}
.exp,.exp.feature{grid-column:span 4;text-decoration:none;color:inherit}
@media (max-width:980px){.exp,.exp.feature{grid-column:span 6}}
@media (max-width:620px){.exp,.exp.feature{grid-column:span 12}}
.exp .ph,.exp.feature .ph{aspect-ratio:4/3}
.exp h3{font-size:21px;margin:14px 0 4px}
.exp p{font-size:14.5px;color:var(--ink-soft);max-width:44ch}
.exp .tag{position:absolute;top:12px;left:12px;z-index:2;font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;background:var(--ember);color:#fff;padding:5px 10px;border-radius:3px}

/* ---------- packages ---------- */
.pkg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px);align-items:stretch}
@media (max-width:1020px){.pkg-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.pkg-grid{grid-template-columns:1fr}}
.pkg{background:var(--paper);border:1px solid var(--hairline);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.pkg:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.pkg .ph{border-radius:0;aspect-ratio:16/9}
.pkg-body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.pkg .meta{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--ember)}
.pkg h3{font-size:20px}
.pkg p{font-size:14px;color:var(--ink-soft);flex:1}
.pkg .price-line{font-size:13px;color:var(--ink-faint)}
.pkg-body .btn-ghost{margin-top:auto;align-self:flex-start}
.price[hidden]{display:none}
.price{font-weight:600;color:var(--forest)}

/* ---------- beyond ---------- */
.beyond-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:980px){.beyond-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.beyond-grid{grid-template-columns:1fr}}
.beyond{position:relative;border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--paper);display:block}
.beyond .ph{aspect-ratio:3/4;border-radius:0}
.beyond .b-body{position:absolute;inset:auto 0 0 0;z-index:2;padding:18px}
.beyond h3{font-size:22px;margin-bottom:2px}
.beyond span{font-size:12.5px;opacity:.8}

/* ---------- conservation ---------- */
.cons-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4.5vw,70px);align-items:center}
@media (max-width:900px){.cons-split{grid-template-columns:1fr}}
.cons-split .ph{aspect-ratio:4/5}
.cons-points{list-style:none;display:grid;gap:16px;margin-top:24px}
.cons-points li{display:grid;grid-template-columns:auto 1fr;gap:14px}
.cons-points .glyph{width:38px;height:38px;border:1px solid var(--hairline-inv);border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.cons-points .glyph svg{width:17px;height:17px}
.cons-points strong{display:block;font-weight:600;font-size:15.5px}
.cons-points span{font-size:14px;opacity:.78}

/* ---------- blog ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px);align-items:stretch}
@media (max-width:880px){.blog-grid{grid-template-columns:1fr}}
.post{text-decoration:none;color:inherit}
.post .ph{aspect-ratio:16/10}
.post .meta{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--ember);margin:14px 0 6px}
.post h3{font-size:21px;line-height:1.25;margin-bottom:6px}
.post p{font-size:14.5px;color:var(--ink-soft)}

/* ---------- testimonials ---------- */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px)}
@media (max-width:880px){.testi-grid{grid-template-columns:1fr}}
.testi{border:1px dashed rgba(250,248,243,.35);border-radius:8px;padding:26px}
.testi .q{font-family:var(--display);font-size:19px;line-height:1.45;margin-bottom:16px}
.testi .who{font-size:13px;opacity:.88}
.image slot-note{display:inline-block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ember);border:1px solid currentColor;border-radius:3px;padding:3px 8px;margin-bottom:14px}

/* ---------- newsletter ---------- */
.news-band{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);align-items:center}
@media (max-width:840px){.news-band{grid-template-columns:1fr}}
.news-form{display:flex;gap:10px;flex-wrap:wrap}
.news-form input{flex:1;min-width:220px;padding:14px 16px;border:1px solid var(--hairline);border-radius:var(--radius);font:inherit;background:var(--paper)}
.consent{font-size:12.5px;color:var(--ink-faint);margin-top:10px;max-width:52ch}

/* ---------- sitemap section ---------- */
.sitemap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
@media (max-width:960px){.sitemap-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.sitemap-grid{grid-template-columns:1fr}}
.sitemap-grid h3{font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-family:var(--body);font-weight:600;color:var(--bark);margin-bottom:12px}
.sitemap-grid ul{list-style:none;display:grid;gap:6px}
.sitemap-grid a{text-decoration:none;font-size:14.5px;color:var(--ink-soft)}
.sitemap-grid a:hover{color:var(--ember)}

/* ---------- enquiry ---------- */
.enquire-split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4.5vw,64px);align-items:start}
@media (max-width:900px){.enquire-split{grid-template-columns:1fr}}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .full{grid-column:1/-1}
@media (max-width:600px){.form-grid{grid-template-columns:1fr}}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;padding:13px 14px;border:1px solid var(--hairline);border-radius:var(--radius);
  font:inherit;font-size:15px;background:var(--paper);color:var(--forest)
}
.field textarea{min-height:110px;resize:vertical}
.field .err{display:none;font-size:12.5px;color:#A8331E;margin-top:5px}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#A8331E}
.field.invalid .err{display:block}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink-soft)}
.check input{width:17px;height:17px;margin-top:2px;flex:none}
.form-success{display:none;border:1px solid var(--canopy);background:#EDF2EC;border-radius:8px;padding:26px;margin-top:8px}
.form-success.show{display:block}
.form-success h3{font-size:22px;margin-bottom:8px}


.facts-panel{background:var(--stone);border:1px solid var(--hairline);border-radius:10px;padding:clamp(22px,2.6vw,32px)}
.facts-panel h3{font-family:var(--body);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--bark);margin:0 0 8px}
.facts-panel .fact + .fact{margin-top:18px;padding-top:18px;border-top:1px solid var(--hairline)}
.facts-panel p{font-size:14.5px;color:var(--ink-soft);line-height:1.6}
.facts-panel .note{font-size:12px;color:var(--ink-faint);margin-top:4px}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:170;
  background:var(--forest);color:var(--paper);padding:13px 20px;border-radius:8px;
  font-size:14px;box-shadow:var(--shadow);opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);max-width:min(480px,88vw)
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast code{font-size:12.5px;opacity:.8}

/* ---------- footer ---------- */
footer{background:var(--forest);color:var(--paper);padding-top:clamp(56px,7vw,90px)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.4fr;gap:clamp(24px,3vw,44px);padding-bottom:48px}
@media (max-width:1020px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h3{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-family:var(--body);font-weight:600;color:rgba(250,248,243,.78);margin-bottom:14px}
.foot-grid ul{list-style:none;display:grid;gap:8px}
.foot-grid a:not(.btn){text-decoration:none;font-size:14.5px;opacity:.85}
.foot-grid a:not(.btn):hover{opacity:1;color:var(--ember)}
.foot-grid a.btn:hover{color:#fff}
.disclosure{font-size:13px;line-height:1.7;color:rgba(250,248,243,.7);margin-top:16px;max-width:44ch}
.foot-quick{border-top:1px solid rgba(250,248,243,.12);padding-block:18px;font-size:13px;color:rgba(250,248,243,.82);display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.foot-quick a{text-decoration:none;opacity:.85}
.foot-quick a:hover{color:var(--ember)}
.social-row{display:flex;gap:10px;margin-top:18px}
.social-row a{width:38px;height:38px;border:1px solid rgba(250,248,243,.25);border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.social-row a:hover{border-color:var(--ember);color:var(--ember)}
.social-row svg{width:16px;height:16px}
.foot-bottom{border-top:1px solid rgba(250,248,243,.12);padding-block:20px 26px;display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;font-size:13px;color:rgba(250,248,243,.8)}
.foot-bottom nav{display:flex;gap:18px;margin-left:auto}
.foot-bottom a{text-decoration:none}
.foot-bottom a:hover{color:var(--ember)}

.lang-flags{display:flex;gap:8px;margin-top:14px}
.lang-flag{padding:0;border:0;background:none;border-radius:3px;overflow:hidden;line-height:0;opacity:.6;transition:opacity .2s var(--ease)}
.lang-flag svg{width:26px;height:17px;display:block}
.lang-flag[aria-pressed="true"]{opacity:1}
.lang-flag:hover{opacity:.9}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

@media (max-width:720px){ .map-pin .pin-lbl{font-size:13px;padding:2px 7px} }
@media (max-width:1080px){
  .drawer-foot .btn{padding:16px 22px;font-size:18px;font-weight:600;width:100%;justify-content:center}
  .acc-panel a{font-size:16px}
}
@media (max-width:640px){
  /* layout */
  .rail-nav{position:static;justify-content:flex-end;margin:0 0 14px}
  .acc-panel a{font-size:17px}
  .nav-bar{height:64px;gap:12px}
  .logo{gap:8px}
  .logo svg{width:23px;height:23px}
  .logo .word{font-size:16.5px;line-height:1.05}
  .logo .word small{font-size:7.5px;letter-spacing:.22em;margin-top:2px}
  .icon-btn{width:36px;height:36px}
  .hero-inner{padding-block-start:calc(118px + env(safe-area-inset-top));padding-block-end:76px}
  .hero .sub{margin-bottom:28px}
  .scroll-cue{display:none}

  /* ---- MOBILE-ONLY TYPE FLOOR: body & controls 17px, nothing below 15px ---- */
  body{font-size:17px}
  input,select,textarea{font-size:17px}
  .lang-toggle{font-size:10.5px}
  .lang-toggle button{padding:4px 8px;font-size:10.5px}
  .map-pin{font-size:15px}
  .lang-flags{gap:12px}
  .lang-flag svg{width:39px;height:25px}
  .kicker,.mega .mega-title,.mega a .sub,.stay-flag,.exp .tag,.pkg .meta,.post .meta,
  .chip,.rail .latin,.stat .lbl,.field label,.field .err,
  .search-results .r-type,.search-results .r-sub,.foot-grid h3,.sitemap-grid h3,
  .facts-panel h3,.facts-panel .note,.toast code,.foot-quick-label,.crumbs,.article-meta,
  .room-body .spec,.itin-day .when,.dv-pop p,.dv-pop a,.video-meta p{font-size:15px}
  .consent,.foot-quick,.foot-bottom,.toast,.foot-tagline,.foot-note,.inline-note,
  .map-card p,.testi .who,.beyond span,.cons-points span,.price-line{font-size:15px}
  .stay-facts li,.exp p,.pkg p,.post p,.map-list,.facts-panel p,.sitemap-grid a,.foot-grid a:not(.btn),
  .search-results .r-title,.acc-panel a,.room-body p,.room-body ul,.inc-grid ul,.who-note{font-size:16px}
  .stay-body .pos,.section-head p,.itin-day p,.article-body p{font-size:17px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .hero-art .layer{transform:none!important}
}

/* homepage fine-print classes (desktop base = pre-floor sizes) */
.foot-tagline{font-size:14.5px;opacity:.88;max-width:40ch}
.foot-note{font-size:14px;opacity:.88;margin-bottom:14px}
.foot-quick-label{letter-spacing:.14em;text-transform:uppercase;font-size:10.5px;font-weight:600;opacity:.7}
.inline-note{font-size:14px;color:var(--ink-faint)}

/* ============================================================
   BUNDLE ADDITIONS — interior-page components
   ============================================================ */

/* breadcrumbs */
.crumbs{font-size:15px;color:var(--ink-faint);display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:100px;margin-bottom:-40px;position:relative;z-index:3}
.crumbs a{text-decoration:none;color:var(--ink-soft)}
.crumbs a:hover{color:var(--ember)}
.crumbs .sep{opacity:.5}
.on-hero-crumbs{position:absolute;top:0;left:0;right:0;z-index:3;padding-top:96px;color:rgba(250,248,243,.85)}
.on-hero-crumbs a{color:rgba(250,248,243,.85)}

/* interior page hero */
.page-hero{position:relative;min-height:62vh;display:flex;align-items:flex-end;color:var(--paper);background:var(--forest);overflow:hidden;padding:0}
.page-hero.short{min-height:44vh}
.page-hero .ph{position:absolute;inset:0;border-radius:0;min-height:100%}
.page-hero .ph::after{height:75%;background:linear-gradient(to top,rgba(18,33,26,.85),transparent)}
.page-hero-inner{position:relative;z-index:2;width:100%;padding-block:140px clamp(40px,6vh,72px)}
.page-hero h1{font-size:clamp(38px,5.6vw,68px);max-width:16ch;margin:14px 0 12px;font-weight:400}
.page-hero .sub{font-size:clamp(17px,1.6vw,19px);max-width:56ch;color:rgba(250,248,243,.88)}
.page-hero .hero-ctas{margin-top:26px}

/* floating enquire pill (lodge/package pages) */
.float-cta{position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vh,28px);z-index:80;box-shadow:var(--shadow);border-radius:999px;padding:14px 24px}
@media (max-width:640px){.float-cta{right:14px;bottom:14px;padding:12px 20px}}

/* light filter chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(22px,3vw,34px)}
.chips .chip{background:var(--paper)}
.on-stone .chips .chip{background:var(--paper)}
.chip[aria-pressed="true"]{background:var(--canopy)!important;border-color:var(--canopy);color:var(--paper)}
.chip{transition:background .2s var(--ease),color .2s var(--ease)}

/* room carousels */
.room{border:1px solid var(--hairline);border-radius:10px;overflow:hidden;background:var(--paper);display:grid;grid-template-columns:1.15fr .85fr}
@media (max-width:880px){.room{grid-template-columns:1fr}}
.room + .room{margin-top:clamp(22px,3vw,34px)}
.carousel{position:relative}
.car-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;height:100%}
.car-track::-webkit-scrollbar{display:none}
.car-track .ph{border-radius:0;scroll-snap-align:start;min-height:280px;height:100%}
.car-btn{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;
  background:rgba(18,33,26,.40);color:var(--paper);border:1px solid rgba(250,248,243,.35);
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:3}
.car-btn:hover{background:rgba(18,33,26,.6)}
.car-btn svg{width:14px;height:14px}
.car-btn.prev{left:12px}.car-btn.next{right:12px}
.room-body{padding:clamp(20px,2.6vw,32px);display:flex;flex-direction:column;gap:10px}
.room-body h3{font-size:clamp(22px,2.2vw,28px)}
.room-body .spec{font-size:15px;color:var(--ink-faint)}
.room-body p{font-size:15.5px;color:var(--ink-soft)}
.room-body ul{list-style:none;display:grid;gap:6px;font-size:15px;color:var(--ink-soft)}
.room-body ul li{display:flex;gap:9px}
.room-body ul li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ember);margin-top:9px;flex:none}
.room-body .btn-ghost{margin-top:auto;align-self:flex-start}

/* FAQ accordion */
.faq{border-top:1px solid var(--hairline)}
.faq-item{border-bottom:1px solid var(--hairline)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:left;padding:20px 4px;font-weight:600;font-size:17px}
.faq-q .chev{width:12px;height:12px;flex:none;transition:transform .25s var(--ease)}
.faq-q[aria-expanded="true"] .chev{transform:rotate(180deg)}
.faq-a{display:none;padding:0 4px 22px;color:var(--ink-soft);max-width:66ch}
.faq-a.open{display:block}

/* photo gallery */
.masonry{columns:3 300px;column-gap:16px}
.masonry .g-item{break-inside:avoid;margin-bottom:16px;display:block;width:100%;text-align:left;border-radius:var(--radius);overflow:hidden;position:relative;padding:0}
.masonry .ph{min-height:0}
.masonry .g-item:nth-child(3n) .ph{aspect-ratio:3/4}
.masonry .g-item:nth-child(3n+1) .ph{aspect-ratio:4/3}
.masonry .g-item:nth-child(3n+2) .ph{aspect-ratio:1/1}
.g-item[hidden]{display:none}
.gallery-tools{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:22px}
.gallery-search{display:flex;align-items:center;gap:10px;border:1px solid var(--hairline);border-radius:999px;padding:10px 18px;background:var(--paper);min-width:min(320px,100%)}
.gallery-search input{border:0;background:none;font:inherit;font-size:17px;outline:none;flex:1}
.gallery-search svg{width:16px;height:16px;color:var(--bark);flex:none}

/* lightbox + modal */
.lightbox{position:fixed;inset:0;z-index:180;background:rgba(18,33,26,.92);display:none;align-items:center;justify-content:center;padding:4vh 4vw}
.lightbox.open{display:flex}
.lightbox figure{max-width:min(1100px,92vw);width:100%}
.lightbox .ph{aspect-ratio:16/10;box-shadow:var(--shadow)}
.lightbox figcaption{color:rgba(250,248,243,.85);font-size:15px;margin-top:14px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.lb-btn{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(250,248,243,.14);color:var(--paper);display:flex;align-items:center;justify-content:center}
.lb-btn:hover{background:rgba(250,248,243,.26)}
.lb-btn svg{width:16px;height:16px}
.lb-btn.prev{left:clamp(8px,2vw,28px)}.lb-btn.next{right:clamp(8px,2vw,28px)}
.lb-close{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:50%;background:rgba(250,248,243,.14);color:var(--paper);display:flex;align-items:center;justify-content:center}
.lb-close svg{width:16px;height:16px}

/* video cards */
.video-card{position:relative;display:block;width:100%;text-align:left;padding:0;border-radius:var(--radius);overflow:hidden}
.video-card .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2}
.video-card .play span{width:64px;height:64px;border-radius:50%;background:rgba(250,248,243,.92);display:flex;align-items:center;justify-content:center;color:var(--forest);transition:transform .25s var(--ease)}
.video-card:hover .play span{transform:scale(1.08)}
.video-card .play svg{width:20px;height:20px;margin-left:3px}
.video-meta{padding:14px 2px 0}
.video-meta h3{font-size:19px}
.video-meta p{font-size:15px;color:var(--ink-faint)}
.video-modal-panel{background:var(--forest);border-radius:10px;width:min(960px,94vw);padding:18px;color:var(--paper)}
.video-embed{aspect-ratio:16/9;border-radius:6px;background:#0D1712;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px}
.video-embed p{font-size:15px;color:rgba(250,248,243,.8);max-width:44ch}

/* article */
.article-body{max-width:720px;margin-inline:auto}
.article-body p{font-size:17px;line-height:1.75;margin-bottom:1.35em;color:var(--forest)}
.article-body h2{font-size:clamp(26px,3vw,34px);margin:1.6em 0 .6em}
.article-meta{display:flex;gap:14px;align-items:center;font-size:15px;color:var(--ink-faint);flex-wrap:wrap}
.pullquote{font-family:var(--display);font-size:clamp(22px,2.6vw,30px);line-height:1.4;border-left:3px solid var(--ember);padding:6px 0 6px 26px;margin:2em 0;color:var(--canopy)}
.article-gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:2.2em 0}
@media (max-width:620px){.article-gallery{grid-template-columns:1fr}}
.article-gallery .ph{aspect-ratio:4/3}

/* itinerary */
.itin{display:grid;gap:0;border-left:2px solid var(--hairline);margin-left:8px}
.itin-day{position:relative;padding:0 0 34px 32px}
.itin-day::before{content:"";position:absolute;left:-8px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--ember);border:3px solid var(--paper)}
.itin-day h3{font-size:21px;margin-bottom:6px}
.itin-day .when{font-size:15px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--bark);margin-bottom:6px;display:block}
.itin-day p{font-size:16px;color:var(--ink-soft);max-width:62ch}
.inc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,40px)}
@media (max-width:700px){.inc-grid{grid-template-columns:1fr}}
.inc-grid ul{list-style:none;display:grid;gap:9px;font-size:15.5px;color:var(--ink-soft)}
.inc-grid li{display:flex;gap:10px}
.inc-grid .yes svg,.inc-grid .no svg{width:16px;height:16px;flex:none;margin-top:4px}
.inc-grid .yes svg{color:var(--canopy)}
.inc-grid .no svg{color:var(--ink-faint)}

/* image slots: every one resolves to a file or to the gradient panel */
.reviews-stub{border:1px dashed var(--hairline);border-radius:10px;padding:clamp(22px,3vw,34px);background:var(--paper)}
.reviews-stub .big{font-family:var(--display);font-size:clamp(30px,4vw,44px)}

/* leaflet full map */
#leaflet-map{height:min(72vh,640px);border-radius:12px;border:1px solid var(--hairline);z-index:1}
.leaflet-tile{filter:saturate(.5) hue-rotate(-8deg) brightness(1.03) contrast(.96)}
.leaflet-popup-content-wrapper{border-radius:8px;font-family:var(--body)}
.dv-pop h4{font-family:var(--display);font-size:18px;margin:0 0 4px}
.dv-pop p{font-size:15px;color:var(--ink-soft);margin:0 0 8px}
.dv-pop a{font-weight:600;color:var(--ember);text-decoration:none;font-size:15px}
.map-fallback{margin-top:26px}

/* who runs what note */
.who-note{border:1px solid var(--hairline);border-left:3px solid var(--ember);border-radius:8px;padding:22px 26px;background:var(--paper);font-size:15.5px;color:var(--ink-soft);max-width:70ch}

/* whatsapp button */
.btn-wa{background:var(--canopy);color:#fff}
.btn-wa:hover{background:var(--forest);color:#fff}

/* utility */
.mt-0{margin-top:0}.section-tight{padding-block:clamp(48px,6vw,84px)}
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,60px);align-items:start}
@media (max-width:900px){.two-col{grid-template-columns:1fr}}
.mini-map{border-radius:10px;overflow:hidden;border:1px solid var(--hairline);position:relative}
.mini-map .ph{aspect-ratio:16/9;min-height:0}

/* label-wrapped controls (implicit labels) */
.field label input,.field label select,.field label textarea{margin-top:6px;font-weight:400}

/* PHP build additions */
.form-server-msg{color:#A8331E;font-weight:600;font-size:15px;margin-bottom:14px}
.nav-link[aria-current="page"]{opacity:1;position:relative}
.nav-link[aria-current="page"]::after{content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;background:var(--ember);border-radius:1px}

/* temporary sample reviews (lodge pages) */
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px)}
@media (max-width:880px){.review-grid{grid-template-columns:1fr}}
.review-card{background:var(--paper);border:1px solid var(--hairline);border-radius:10px;padding:clamp(22px,2.6vw,30px)}
.review-card .stars{color:var(--ember);letter-spacing:3px;font-size:15px;margin-bottom:10px}
.review-card blockquote{font-family:var(--display);font-size:19px;line-height:1.5;margin-bottom:14px}
.review-card .who{font-size:15px;color:var(--ink-faint)}

/* A1: universal inline-arrow sizing */
.arr{width:15px;height:15px;flex:none;vertical-align:middle}

/* A3 root-cause: the hidden attribute must always win over component display rules */
[hidden]{display:none!important}

/* A4: photo-gallery batch reveal */
#gallery-more{margin:26px auto 0;display:flex}
#gallery-sentinel{height:1px}

/* ============================================================
   MARINE SUB-THEME (Semporna · Sipadan · Mabul) — same components,
   ocean palette. Applied via body.theme-marine.
   ============================================================ */
body.theme-marine{
  --canopy:#0E3A4A;        /* deep ocean */
  --forest:#0B2430;        /* near-black */
  --bark:#1B7A8C;          /* reef teal (kickers/labels) */
  --ember:#E4674A;         /* coral accent */
  --ember-deep:#C24F35;
  --stone:#F4EFE4;         /* sand */
  --paper:#FBF9F2;
  --mist:#D9E4E4;
  --hairline:rgba(11,36,48,.14);
  --ink-soft:rgba(11,36,48,.72);
  --ink-faint:rgba(11,36,48,.62);
}
body.theme-marine .ph{
  background:
    radial-gradient(120% 90% at 30% 0%,rgba(244,239,228,.16),transparent 55%),
    linear-gradient(168deg,#1B7A8C 0%,#0E3A4A 48%,#0B2430 100%);
}
body.theme-marine .ph.warm{background:radial-gradient(120% 90% at 75% 0%,rgba(228,103,74,.35),transparent 55%),linear-gradient(165deg,#14556A 0%,#0E3A4A 55%,#0B2430 100%)}
body.theme-marine .ph.dawn{background:radial-gradient(140% 90% at 50% 100%,rgba(228,103,74,.4),transparent 55%),linear-gradient(180deg,#1B7A8C 0%,#0E3A4A 60%,#0B2430 100%)}
body.theme-marine .hero-art .sky{background:linear-gradient(180deg,#2A93A6 0%,#14556A 45%,#0B2430 100%)}
body.theme-marine ::selection{background:#0E3A4A;color:#F4EFE4}

/* comparison table (compare-the-stays) */
.cmp-wrap{overflow-x:auto;border:1px solid var(--hairline);border-radius:12px;background:var(--paper)}
.cmp{width:100%;border-collapse:collapse;min-width:760px}
.cmp th,.cmp td{padding:16px 18px;border-bottom:1px solid var(--hairline);vertical-align:top;text-align:left;font-size:15.5px}
.cmp thead th{font-family:var(--display);font-size:19px;font-weight:400;background:var(--stone)}
.cmp tbody th{font-family:var(--body);font-size:15px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--bark);white-space:nowrap}
.cmp td{color:var(--ink-soft)}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}

/* combination-trip route line */
.route{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 6px}
.route .stop{font-size:15px;font-weight:600;background:var(--stone);border:1px solid var(--hairline);border-radius:999px;padding:6px 14px}
.route .leg{flex:none;width:34px;height:2px;background:var(--ember);border-radius:1px;position:relative}
.route .leg::after{content:"";position:absolute;right:-1px;top:-3px;border:4px solid transparent;border-left-color:var(--ember)}

/* thank-you contact pills */
.pill-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--hairline);background:var(--paper);border-radius:999px;padding:10px 18px;font-size:15px;font-weight:600;text-decoration:none;color:var(--forest)}
.pill:hover{border-color:var(--ember);color:var(--ember)}

/* 17 September 2026 - a home tile that resolves to an image takes the IMAGE'S ratio (no cropping,
   ever); the 4:3 grid cell gives way to the picture, not the other way round. */
.ph.ph--card{aspect-ratio:2356/560!important}
.ph.ph--hero{aspect-ratio:1376/768!important}
.ph.ph--card,.ph.ph--hero{min-height:0}   /* the ratio wins over the grid's 200px floor */
/* 17 September 2026 - the "Our view" image, when one exists, shows at its own ratio, uncropped. */
.ph.ph--view{aspect-ratio:auto;min-height:0}
.ph.ph--view .ph-img{position:static;width:100%;height:auto;object-fit:unset;display:block}
/* 17 September 2026 - interest chips are toggles inside the form: no checkbox is visible, the
   pill itself presses on and off, and the checkboxes still post as a list with JavaScript off. */
.interests-field .label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.field .chips.interests{margin-bottom:0;gap:8px}
.field .chips.interests .chip{display:inline-flex;align-items:center;position:relative;cursor:pointer;user-select:none;margin:0;font-weight:600;font-size:13px}
.field .chips.interests .chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.field .chips.interests .chip:has(input:checked){background:var(--canopy);border-color:var(--canopy);color:var(--paper)}
.field .chips.interests .chip:has(input:focus-visible){outline:2px solid var(--canopy);outline-offset:2px}
.form-success{margin-bottom:18px}
/* ============================================================
   17 September 2026, evening - the hero goes BACK to the old banner (owner ruling, after comparing
   /old-version/ with the live site). This reverses the no-crop and no-veil rulings of the same
   morning for HEROES ONLY: the old vh height and shape, eyebrow and H1 over the image, the mist at
   about half its old strength so the illustration reads through it, no backplate, no text-shadow.
   The image is anchored center top so the crop takes the lower third and never the subject.
   Carousel cards keep the slot's own ratio (2356/560): a band, not a banner. */
.car-track{height:auto}
.car-track .ph{min-height:0;height:auto;aspect-ratio:2356/560}
.ph:has(.ph-img)::after{display:none}                    /* cards and tiles: no veil */
.page-hero .ph:has(.ph-img)::after{display:block;height:40%;background:linear-gradient(to top,rgba(18,33,26,.6),transparent)}
.page-hero .ph-img{object-position:center top}
/* 17 September 2026 - the enquiry intro is ONE line on desktop; the form-page hero is compact so the
   form is above the fold at 1920 and 1440 under the restored 62vh banner. */
.enquire-intro{color:var(--ink-soft);font-size:14px;line-height:1.5;margin:0 0 18px;max-width:none}
@media (min-width:1280px){.enquire-intro{white-space:nowrap;font-size:13.5px}}
.page-hero.compact{min-height:34vh}
/* 17 September 2026, late - the hero text sits over the upper left, the mist along the bottom: the darkening
   moves to where the text is. A scrim behind the text block: canopy green at 0.75 on the left edge fading to
   transparent by 55% of the width, the full banner height, plus the bottom mist above. No backplate, no shadow. */
.page-hero .ph::before{content:"";position:absolute;inset:0;pointer-events:none;
  /* measured 17 Sep 2026: a fade that reaches zero by 55% is already at 0.3-0.5 across the text block (19%-60% of
     the width) and the H1 sits over the brightest sky; full strength to 60% then a fade to 85% is the lightest
     scrim that gives every eyebrow, H1 and standfirst 4.5:1 on the three test pages at 1920 and 1440. */
  background:linear-gradient(to right,rgba(30,58,43,.85) 0%,rgba(30,58,43,.85) 60%,rgba(30,58,43,0) 85%)}
.page-hero .page-hero-inner{position:relative;z-index:1}


/* ==== PREVIEW DIFF (owner-approved exception, 18 September 2026) ==== */
/* 1. current header: the description line under each mega-menu item at phone width */
@media (max-width:640px){.mega a .sub{font-size:15px}}
/* 1b. the current nav bar is fuller than the old one and squeezed the language switcher onto two lines */
.lang-toggle{flex:none}
.lang-toggle button{white-space:nowrap}


/* ==== PREVIEW REVIEW FIXES (owner, 18 September 2026) ==== */
/* A1 · the line above the form is one line, never two, so the form stays reachable */
@media (min-width:1280px){
  #enquire .section-head h2, #enquire .section-head p,
  section[aria-labelledby="enq-title"] .section-head h2, section[aria-labelledby="enq-title"] .section-head p,
  section[aria-labelledby="c-title"] .section-head h2, section[aria-labelledby="c-title"] .section-head p{
    white-space:nowrap; max-width:none; overflow:visible}
}
/* A5 · the hero eyebrow was suppressed on 18 September "until the illustrations are final: white on pale
   mist cannot be read". That is the fault the scrim fixed on 20 September - the eyebrow now measures its
   contrast against a darkened band like every other hero line - so the suppression is retired and the
   eyebrow is shown again. */
.page-hero .kicker{display:flex}
/* A6 · the footer's column headings, 2px larger and bold */
.foot-grid h3{font-size:16px;font-weight:700}
/* C1 · the journal post's column, half as wide again */
.article-body{max-width:min(96ch, 100%)}
.article-body .ph{aspect-ratio:16/9;margin:22px 0}
/* C3 · the transfers view stands vertical beside its paragraph */
.two-col .ph.ph--tall{aspect-ratio:4/5}
/* C4 · air under the stay cards' lines, the compare link aligned as the old site had it, the second stay image smaller */
.stay-card .stay-body p{margin-bottom:14px}
#stays .wrap > p.reveal{text-align:left;margin-left:0}
.stay-card:not(.stay-hero) .ph{aspect-ratio:16/9}
/* C9 · vertical rules between the comparison table's columns */
table.cmp td + td, table.cmp th + th{border-left:1px solid var(--hairline)}
table.cmp{border-collapse:collapse}


/* ==== PREVIEW WALK FIXES (owner, 20 September 2026) ==== */
/* A3, A4 · no frame around a picture, ever. The masters carried a drawn band on 20 of them and it has
   been trimmed at placement; what remains is the panel's own pale gradient showing at the rounded
   corners behind an image that covers it. Where there is a picture, the panel shows nothing of itself,
   and the image is pulled a pixel past each edge so no sub-pixel seam can light up. The radius stays. */
.ph:has(.ph-img){background:#12211A}
.ph:has(.ph-img)::after{content:none}
.ph .ph-img{inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px)}
.ph, .ph .ph-img, .exp .ph, .stay-card .ph, .car-track .ph, figure, img{border:0;outline:0;box-shadow:none}
/* ---- 20 September 2026, the hero scrim, painted OVER the picture -------------------------------------
   The scrim was written on 17 September as .page-hero .ph::before. A ::before is the panel's FIRST child
   and .ph-img is a positioned sibling after it, so the image painted on top and the scrim darkened
   nothing: measured over a white image, ::before leaves the pixel at (255,255,255) and ::after brings it
   to (63,87,74). It moves to ::after, which is the last child and paints above.
   The strength is arithmetic, not taste: paper text (#FAF8F3, relative luminance .93) reaches 4.5:1 only
   where the background is at or below L .168. Over the worst case - pure white cloud - a forest scrim
   (18,33,26) needs alpha >= .60; .78 lands the white sky at L .083, which is 7.4:1, and leaves the dark
   half of an illustration barely touched. Full strength across the text block (which ends at 58% of the
   width at 1920), fading out by 88%, plus the old mist along the bottom. */
.page-hero .ph:has(.ph-img)::after{content:"";position:absolute;inset:0;height:auto;
  background:linear-gradient(to right,rgba(18,33,26,.78) 0%,rgba(18,33,26,.78) 62%,rgba(18,33,26,0) 88%),
             linear-gradient(to top,rgba(18,33,26,.55),transparent 55%)}
.page-hero .ph::before{background:none}      /* the 17 September scrim, which never painted, stands down */
/* 6 · on a phone the H1 and standfirst run to 94% of the width (368 of 390 px), past the fade that starts at
   62% and ends at 88%: 133 of 652 hero lines measured under 4.5:1 (3:1 at 38px) against the brightest 5% of
   the picture behind them (owner review, 23 September 2026). Narrow screens hold full strength to 95%. */
@media (max-width:700px){
  .page-hero .ph:has(.ph-img)::after{
    background:linear-gradient(to right,rgba(18,33,26,.78) 0%,rgba(18,33,26,.78) 95%,rgba(18,33,26,.6) 100%),
               linear-gradient(to top,rgba(18,33,26,.55),transparent 55%)}
}

/* ---- the solid ember button ---------------------------------------------------------------------------
   White on #C9642A measures 3.93:1 at 15-16px on all 89 heroes, and no illustration can change that: it is
   the button's own fill. The text is already pure white, so the fill darkens. #B05623 is the least
   darkening that passes - L .160, which is 4.66:1 with white - and it keeps the ember hue. --ember itself
   is untouched, so every rule, border and accent that uses it is unchanged. */
.btn-primary{background:#B05623;border-color:#B05623}
.btn-primary:hover{background:#96481D;border-color:#96481D}

/* ---- the room carousel is not a card band ------------------------------------------------------------
   .car-track .ph{aspect-ratio:2356/560} was written for the carousel CARD band on 17 September. A room
   block is also a .car-track, so the room picture rendered 670.4 x 159.3 (4.21:1) beside a 386px text
   column, and a 2:1 master lost 52.5% off the top and bottom. The old template's own room slot is
   670 x 335 - 2:1 - which is exactly what the 27 masters were drawn to. */
article.room .car-track .ph{aspect-ratio:2/1}

/* ---- ONE SHAPE PER FAMILY (owner ruling, 20 September 2026) -----------------------------------------
   Sixteen rendered boxes become six shapes. Four of the sixteen had no aspect ratio at all: they were
   .ph's 200px floor crossed with the grid's width, so the same species tile rendered 271x200 in a
   six-up grid and 387x200 in a two-column section, the gallery band 888x200 and the dining picture
   387x200. Each takes its family's shape instead, and every subject is drawn once.
     hero    1920/670  (2.866:1)   the banner, one ratio for every page
     card    4/3                   doorstep, experience and cross-link cards
     wide    16/9                  package cards, the mini-map, the wide cross-link card
     view    4/5                   intro views and the dining picture
     tile    1/1                   species tiles, wherever they appear
     room    2/1                   the room carousel panel
   The band (the two gallery cards) keeps a shape of its own at 3/1 - the old template's 568x200 was
   2.84:1, and 3/1 is that band, drawn rather than floored. */
/* 23 September 2026 - 21:9, the shape the pictures can fill: the model draws 16:9, and 21:9 keeps the top 77 %.
   width:100% and min-height:auto: a box whose text is taller than its ratio grows DOWN, never sideways -
   the 2.866 rule with min-height:0 measured 1281.7 px wide in a 390 px window. */
.page-hero,.page-hero.short,.page-hero.compact{width:100%;aspect-ratio:1920/823;min-height:auto}
/* a phone: a 3:4 box that grows with its text, filled by its own crop through <picture> */
@media (max-width:700px){.page-hero,.page-hero.short,.page-hero.compact{aspect-ratio:3/4}}
/* Owner ruling, 23 September 2026: a grid the old template fixed at three columns inline stays three across
   on a phone (measured at 390: the package cards 106 px wide, their pictures 104x200). Below 700 px any such
   grid is one column, so each card keeps its own picture shape at full width. !important because the
   columns are set in an inline style. */
@media (max-width:700px){
  .pkg-grid,
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"]{grid-template-columns:1fr!important}
}
.pkg .ph{min-height:0}
/* Owner ruling, 23 September 2026: the gallery band pair is one column on a phone too (it measured two
   166x55 bands at 390). The dining pair and the four-wide wildlife grid stay two across. */
@media (max-width:700px){section[aria-labelledby="gal-title"] .wrap{grid-template-columns:1fr!important}}      /* the 16:9 ratio governs; the 200px floor made a full-width phone card 1.74:1 */
.grid > a > .ph, .two-col .grid > .ph{aspect-ratio:1/1}   /* species tiles, linked or not */
#dining .grid > .ph{aspect-ratio:4/5}                     /* the dining picture, drawn as a view */
.section-tight .wrap > a > .ph{aspect-ratio:3/1;min-height:0}   /* the gallery band; min-height:0, or the 200px floor
   makes a phone's band 600 px wide in a 350 px column (measured 23 September 2026) */

/* C · the sticky bar sits above the hero, never over it. Its background is the old template's own dark bar,
   rgba(18,33,26,.92) under a blur: the "transparent until you scroll" version showed the white logo and menu
   as white on a pale page, and a blank bar on a phone (owner ruling, 23 September 2026). */
.site-header{position:sticky;top:0;background:rgba(18,33,26,.92)}
.page-hero{min-height:calc(62vh - 76px)}

/* D · nothing may push the page wider than the window */
html,body{overflow-x:clip;max-width:100%}   /* clip, not hidden: hidden makes body a scroll container and the sticky bar
   scrolled away with the page (measured 23 September 2026) */
.wrap,.exp-grid,.stays-grid{max-width:100%}

/* E1 · a transparent button is always lighter than what it sits on. The hero band is dark green and
   .btn-secondary kept its dark text there, because the old rule names .hero and the page uses
   .page-hero. */
.page-hero .btn-secondary{color:var(--paper);border-color:rgba(250,248,243,.7)}
.page-hero .btn-secondary:hover{background:var(--paper);color:var(--forest)}
.page-hero .btn-ghost{color:var(--paper);border-bottom-color:var(--paper)}

/* F2 · the enquiry form moves up: breathing space above it, not a void */
section[aria-labelledby="enq-title"] .section-head,
#enquire .section-head{margin-bottom:18px}
section[aria-labelledby="enq-title"]{padding-top:28px}
/* ==== BRL-PAGE-REVIEW-SITEWIDE, owner, 23 September 2026 ==== */
/* 4 · a highlight card carries its tick on the LEFT of the title, on the same line, like a list; the text
   sits under the title. Every card whose first child is the glyph, at every width. */
.grid > div:has(> .glyph:first-child){display:grid;grid-template-columns:38px 1fr;column-gap:14px;align-items:center}
.grid > div:has(> .glyph:first-child) > .glyph{grid-column:1;grid-row:1;margin:0!important}
.grid > div:has(> .glyph:first-child) > h3{grid-column:2;grid-row:1;margin:0!important}
.grid > div:has(> .glyph:first-child) > :not(.glyph):not(h3){grid-column:2;margin-top:6px}
/* 5b · every picture overfills its panel by a pixel on each side under overflow:hidden. The overfill rule
   (inset:-1px; width:calc(100% + 2px)) was capped by the reset's img{max-width:100%}, so every picture stopped
   one pixel short on the right and the panel showed through as a thin line (measured on all 914 pictures of
   the 28 lodge pages). No border, outline or shadow on a picture. */
.ph{overflow:hidden}
.ph > img, .ph-img{max-width:none!important;border:0!important;outline:0!important;box-shadow:none!important}
/* 5c · the dining picture is a landscape rectangle across the whole column, not a tall half-column panel */
#dining .grid{grid-template-columns:1fr!important}
#dining .grid > .ph{aspect-ratio:16/9!important;min-height:0}
/* 5e · a picture beside "Nearby and combinations", the getting-there view's shape (16:9) */
section[aria-labelledby="nb-title"] .two-col{align-items:center}
section[aria-labelledby="nb-title"] .nb-view{aspect-ratio:16/9;min-height:0;border-radius:var(--radius)}

/* ==== HOME AND BRL REVIEW, owner, 24 September 2026 ==== */
/* 1 · side margins. The content column keeps 200 px each side at 1920 (1520 px of content) and the margin
   scales down in a straight line to the old gutter at 1024 (about 123 px at 1440, 97 px at 1280). Phones and
   tablets keep the gutter. The sticky bar, the heroes and the footer keep their own wrap. */
@media (min-width:1024px){
  .wrap:not(.nav-bar):not(.page-hero-inner):not(.hero-inner){max-width:1920px;margin-inline:auto;
    padding-inline:clamp(56px, calc(16.07vw - 108.6px), 200px)}
  footer .wrap{max-width:var(--max);padding-inline:var(--gutter)}
}
/* 2 · no row wider than five, anywhere. A grid that lays itself out (auto-fit, auto-fill, or six columns and
   more) takes its count from how many children it has: 6 = 3+3, 7 and 8 = 4+4 (7 = 4+3), 9 and more = five
   across. Phones are left to the grid (one or two columns). */
@media (min-width:701px){
  [style*="auto-fit"]:has(> :nth-child(6):last-child), [style*="auto-fill"]:has(> :nth-child(6):last-child),
  [style*="repeat(6"]:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,1fr)!important}
  [style*="auto-fit"]:has(> :nth-child(7):last-child), [style*="auto-fill"]:has(> :nth-child(7):last-child),
  [style*="auto-fit"]:has(> :nth-child(8):last-child), [style*="auto-fill"]:has(> :nth-child(8):last-child),
  [style*="repeat(7"]:has(> :nth-child(7):last-child), [style*="repeat(8"]:has(> :nth-child(8):last-child){grid-template-columns:repeat(4,1fr)!important}
  [style*="auto-fit"]:has(> :nth-child(9)), [style*="auto-fill"]:has(> :nth-child(9)),
  [style*="repeat(6"]:has(> :nth-child(9)), [style*="repeat(7"]:has(> :nth-child(9)), [style*="repeat(8"]:has(> :nth-child(9)){grid-template-columns:repeat(5,1fr)!important}
}
/* 2a · the home "animals you came for": two rows of four, no arrows, no scrolling; two across on a phone */
.rail{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(4,1fr);overflow:visible;scroll-snap-type:none;padding-bottom:0;row-gap:28px}
.rail-nav{display:none}
@media (max-width:700px){.rail{grid-template-columns:1fr 1fr;gap:14px}.rail h3{font-size:17px}}
/* 4 · the home hero's picture (Q122) covers the window like the SVG it replaces; while it is there the veil
   darkens the left, where the heading sits, as the page heroes' scrim does (paper text needs L <= .168) */
.hero-art .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.hero-art:has(.hero-img) .hero-veil{background:linear-gradient(to right,rgba(18,33,26,.78) 0%,rgba(18,33,26,.78) 50%,rgba(18,33,26,0) 80%),
  linear-gradient(to top,rgba(18,33,26,.82) 0%,rgba(18,33,26,.25) 45%,rgba(18,33,26,0) 100%)}
@media (max-width:700px){.hero-art:has(.hero-img) .hero-veil{background:linear-gradient(to top,rgba(18,33,26,.85) 0%,rgba(18,33,26,.78) 55%,rgba(18,33,26,.2) 100%)}}
/* 24 September 2026 (ruling 2): the two featured panels on /experiences/ and /journal/ took their height from the
   200 px floor, so their shape changed with every width (572x200 before the margins, 512x200 after, at 1440). Both
   pictures are 3:1 masters (2400x800): the panel is fixed at 3/1 and holds at every width with nothing cropped. */
.two-col .ph:has(> img[src$="/cards/plan/photography-expedition.webp"]),
.two-col .ph:has(> img[src$="/cards/journal/a-day-at-danum.webp"]){aspect-ratio:3/1;min-height:0}
/* the launch, 25 September 2026: honeypot 2 is hidden by this rule, never by an inline style - a bot that skips
   inline-hidden fields still fills it, a person never sees it */
.dv-f2{position:absolute!important;left:-10000px!important;top:auto;width:1px;height:1px;overflow:hidden}

/* the switcher is three links now, not two buttons that swap words in place */
.lang-toggle a{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:12.5px;
  font-weight:600;text-decoration:none;color:inherit;opacity:.72}
.lang-toggle a[aria-current="page"]{background:rgba(250,248,243,.16);opacity:1}
.lang-toggle a:hover{opacity:1}