/* Layout: a calm, product-page rhythm. Centred statements, then wide 28px image cards; white and #f5f5f7 bands alternate. One blue for every action. */
:root{
  --ink:#1d1d1f;
  --grey:#6e6e73;
  --white:#ffffff;
  --mist:#f5f5f7;
  --blue:#0071e3;
  --umiam:#2A364E;    /* camp accents from the agreed identity */
  --jongksha:#9C4823;
  --sakal:#4A4A30;
  --line:rgba(29,29,31,.12);
  --shade:rgba(29,29,31,.55);
  --font:system-ui,Inter,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(0.4,0,0.6,1);
  --t-small:240ms;
  --t-panel:500ms;
  --r-btn:980px;
  --r-card:28px;
  --wrap:1120px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{background:var(--white);color:var(--ink);font-family:var(--font);font-weight:400;font-size:17px;line-height:25px;-webkit-font-smoothing:antialiased;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--white)}
img{display:block;max-width:100%;height:auto}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
h1,h2,h3,p{margin:0}
h1,h2{font-weight:600;letter-spacing:-0.015em;line-height:1.05;text-wrap:balance;font-size:clamp(56px,7vw,80px)}
h3{font-weight:600;font-size:24px;line-height:30px;letter-spacing:-0.01em;text-wrap:balance}
.lede{font-size:21px;line-height:29px;color:var(--grey);max-width:40ch;text-wrap:pretty}
.eyebrow{font-weight:600;color:var(--grey);font-size:17px}
.small{font-size:14px;line-height:20px;color:var(--grey)}
.muted{color:var(--grey)}

/* full-bleed bands keep the body gutter by pulling out then padding back */
.band{margin-left:calc(-1 * max(16px,env(safe-area-inset-left,0px)));margin-right:calc(-1 * max(16px,env(safe-area-inset-right,0px)));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:96px}
.band.alt{background:var(--mist)}
.wrap{max-width:var(--wrap);margin:0 auto}
.center{text-align:center}
.center .lede{margin-inline:auto}
.stack{display:grid;gap:20px}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;margin-left:calc(-1 * max(16px,env(safe-area-inset-left,0px)));margin-right:calc(-1 * max(16px,env(safe-area-inset-right,0px)));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:24px;height:56px}
.brand{font-weight:600;color:var(--ink);font-size:17px;letter-spacing:-0.01em;white-space:nowrap}
.brand:hover{text-decoration:none}
.navlinks{display:flex;gap:22px;margin-left:auto}
.navlinks a{color:var(--ink);font-size:14px;opacity:.8;transition:opacity var(--t-small) var(--ease)}
.navlinks a:hover{opacity:1;text-decoration:none}
@media (max-width:760px){.navlinks{display:none}.nav .btn{margin-left:auto}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-btn);background:var(--blue);color:var(--white);font:600 17px/1 var(--font);padding:12px 22px;border:0;cursor:pointer;transition:opacity var(--t-small) var(--ease),transform var(--t-small) var(--ease)}
.btn:hover{opacity:.88;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.sm{font-size:14px;padding:8px 16px}
.btn.ghost{background:transparent;color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.link{font-weight:400;font-size:17px}
.link::after{content:" ›"}
.actions{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center}
.center .actions{justify-content:center}

/* hero */
.hero{padding-block:72px 0}
.hero .wrap{display:grid;gap:24px}
.hero h1{max-width:12ch;margin-inline:auto}
.heroimg{margin-top:40px;border-radius:var(--r-card);overflow:hidden;aspect-ratio:21/9;max-width:100%}
.heroimg img{width:100%;height:100%;object-fit:cover}
.loadin{animation:rise var(--t-panel) var(--ease) both}
.loadin.d1{animation-delay:80ms}.loadin.d2{animation-delay:160ms}.loadin.d3{animation-delay:240ms}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:56px}
.fact{display:grid;gap:4px}
.fact b{font-weight:600;font-size:32px;line-height:36px;letter-spacing:-0.015em;font-variant-numeric:tabular-nums}
@media (max-width:760px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* cards */
.card{background:var(--white);border-radius:var(--r-card);overflow:hidden}
.alt .card{background:var(--white)}
.band:not(.alt) .card.fill{background:var(--mist)}
.card .pad{padding:32px;display:grid;gap:12px;align-content:start}
.media{border-radius:var(--r-card);overflow:hidden}
.media img{width:100%;height:100%;object-fit:cover}

/* tabs */
.tabs{display:inline-flex;gap:4px;padding:4px;border-radius:var(--r-btn);background:var(--mist);margin:32px auto 0;flex-wrap:wrap;justify-content:center;max-width:100%}
.alt .tabs{background:var(--white)}
.tab{border:0;background:transparent;color:var(--ink);font:400 14px/1 var(--font);padding:10px 18px;border-radius:var(--r-btn);cursor:pointer;transition:background var(--t-small) var(--ease),color var(--t-small) var(--ease)}
.tab[aria-selected="true"]{background:var(--ink);color:var(--white);font-weight:600}
.tab[data-site="umiam"][aria-selected="true"]{background:var(--umiam)}
.tab[data-site="jongksha"][aria-selected="true"]{background:var(--jongksha)}
.tab[data-site="sakal"][aria-selected="true"]{background:var(--sakal)}
.sitepill{justify-self:start;display:inline-block;color:var(--white);font-size:14px;line-height:18px;font-weight:600;padding:6px 14px;border-radius:var(--r-btn)}
.wm{display:block;height:auto}
.brand img{height:30px;width:auto}
.herowm{width:min(300px,64vw);margin:0 auto 8px}
.band.dark{background:var(--mist);color:var(--ink)}
.darkwm{width:min(260px,60vw);margin:0 auto 12px}
/* Experiences page */
.jump{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:8px}
.tablewrap{overflow-x:auto;margin-top:24px;border-radius:var(--r-card);background:var(--white);box-shadow:inset 0 0 0 1px var(--line)}
.band:not(.alt) .tablewrap{background:var(--mist);box-shadow:none}
.xtable{width:100%;border-collapse:collapse;min-width:640px;font-size:15px;line-height:22px}
.xtable th{text-align:left;font-weight:600;font-size:14px;color:var(--grey);padding:18px 20px;border-bottom:1px solid var(--line)}
.xtable td{padding:14px 20px;border-bottom:1px solid var(--line);vertical-align:top}
.xtable tr:last-child td{border-bottom:0}
.xtable td:first-child{font-weight:600}
.kv dd{font-size:15px;line-height:22px}
.three .kv div{grid-template-columns:56px minmax(0,1fr)}
/* Evoke page */
.evhero{display:grid;gap:22px;justify-items:center;text-align:center;padding-block:64px 24px}
.evlogo{width:min(360px,78vw)}
.evstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:48px;text-align:left}
@media (max-width:760px){.evstats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
@media (max-width:860px){.three{grid-template-columns:minmax(0,1fr)}}
.values{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:40px}
@media (max-width:1000px){.values{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.values{grid-template-columns:minmax(0,1fr)}}
.values .pad{padding:24px}
.values h3{font-size:19px;line-height:26px;overflow-wrap:anywhere}
.dest{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:40px}
@media (max-width:760px){.dest{grid-template-columns:minmax(0,1fr)}}
.dest .where{font-size:14px;color:var(--grey)}
.camping{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.camping span{background:var(--white);border-radius:var(--r-btn);padding:8px 16px;font-size:14px;box-shadow:inset 0 0 0 1px var(--line)}
.next{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);border-radius:var(--r-card);overflow:hidden;background:var(--white);color:var(--ink);margin-top:20px}
.next > img,.next > picture > img{width:100%;height:100%;object-fit:cover;min-height:280px}
.next .pad{padding:36px;display:grid;gap:14px;align-content:center}

@media (max-width:860px){.next{grid-template-columns:minmax(0,1fr)}}
.panel{animation:panel var(--t-panel) var(--ease) both}
@keyframes panel{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* site panel */
.site{display:grid;gap:24px;margin-top:40px}
.site .media{aspect-ratio:16/9}
.sitebody{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px}
.kv{display:grid;gap:0}
.kv div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.kv div:first-child{border-top:0}
.kv dt{color:var(--grey);font-size:14px}
.kv dd{margin:0}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.ticks li{padding-left:22px;position:relative}
.ticks li::before{content:"";position:absolute;left:2px;top:10px;width:7px;height:7px;border-radius:50%;background:var(--ink)}
@media (max-width:860px){.sitebody{grid-template-columns:minmax(0,1fr)}}

/* stays */
.stay{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:20px;margin-top:40px}
.stay .main{aspect-ratio:16/10}
.stay .side{display:grid;gap:20px;align-content:start}
.gal{display:grid;gap:16px;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:0;border-radius:var(--r-btn);background:var(--mist);color:var(--ink);font:400 14px/1 var(--font);padding:9px 16px;cursor:pointer;transition:background var(--t-small) var(--ease),color var(--t-small) var(--ease)}
.chip:hover{background:var(--line)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--white);font-weight:600}
.stay .bath{aspect-ratio:4/5}
.spec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:20px}
.spec .card .pad{padding:28px}
.spec b{font-weight:600;font-size:28px;line-height:32px;letter-spacing:-0.015em}
@media (max-width:860px){.stay{grid-template-columns:minmax(0,1fr)}.stay .bath{aspect-ratio:16/10}.spec{grid-template-columns:minmax(0,1fr)}}
.types{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:20px}
.types .pad{padding:24px}
@media (max-width:960px){.types{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.types{grid-template-columns:minmax(0,1fr)}}
.dim{font-variant-numeric:tabular-nums;color:var(--grey);font-size:14px}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:stretch}
.split .media{min-height:100%}
@media (max-width:860px){.split{grid-template-columns:minmax(0,1fr)}}

/* materials */
.mat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
@media (max-width:860px){.mat{grid-template-columns:minmax(0,1fr)}}

/* experiences */
.xgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:40px}
.xcard{position:relative;border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/3;background:var(--ink)}
.xcard img{width:100%;height:100%;object-fit:cover}
.xcard .cap{position:absolute;inset:auto 0 0 0;padding:28px;color:var(--white);background:linear-gradient(to top,var(--shade),rgba(29,29,31,0));display:grid;gap:6px}
.xcard .cap .small{color:var(--white);opacity:.85}
@media (max-width:760px){.xgrid{grid-template-columns:minmax(0,1fr)}}
.adv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:20px}
@media (max-width:960px){.adv{grid-template-columns:minmax(0,1fr)}}
.alist{list-style:none;padding:0;margin:0;display:grid}
.alist li{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line);align-items:baseline}
.alist li:first-child{border-top:0}
.alist span{min-width:0}
.tag{flex:none;font-size:12px;line-height:16px;font-weight:600;padding:3px 10px;border-radius:var(--r-btn);background:var(--mist);color:var(--grey)}
.tag.on{background:var(--ink);color:var(--white)}

/* radio */
.player{display:flex;align-items:center;gap:16px;margin-top:8px}
.play{width:56px;height:56px;flex:none;border-radius:50%;border:0;background:var(--blue);color:var(--white);cursor:pointer;display:grid;place-items:center;transition:opacity var(--t-small) var(--ease)}
.play:hover{opacity:.88}
.play svg{width:20px;height:20px;fill:var(--white)}
.bar{flex:1;height:4px;border-radius:4px;background:var(--line);overflow:hidden;min-width:0}
.bar i{display:block;height:100%;width:0;background:var(--ink)}
.time{font-variant-numeric:tabular-nums;font-size:14px;color:var(--grey);flex:none}
details.script summary{cursor:pointer;color:var(--blue);list-style:none}
details.script summary::-webkit-details-marker{display:none}
details.script[open] .scriptbody{animation:rise var(--t-small) var(--ease) both}
.scriptbody{display:grid;gap:10px;margin-top:14px;font-size:15px;line-height:22px}
.scriptbody p span{color:var(--grey);font-variant-numeric:tabular-nums;margin-right:8px}

/* journeys */
.jgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
@media (max-width:960px){.jgrid{grid-template-columns:minmax(0,1fr)}}
.days{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:0;counter-reset:d}
.days li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px;padding:10px 0;border-top:1px solid var(--line)}
.days li b{font-weight:600;font-size:14px;color:var(--grey);font-variant-numeric:tabular-nums}

/* faq */
.faq{max-width:780px;margin:40px auto 0;display:grid}
.faq details{border-top:1px solid var(--line);padding:20px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;color:var(--grey);transition:transform var(--t-small) var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:12px;color:var(--grey);max-width:65ch}
.faq details[open] p{animation:rise var(--t-small) var(--ease) both}

footer{padding-block:48px 64px}
.lockup{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:28px}
.lockup .logo-mt,.footlogos .logo-mt{height:40px;width:auto}
.lockup .logo-ev,.footlogos .logo-ev{height:34px;width:auto}
.footlogos .logo-lm{height:40px;width:auto}
.rule{width:1px;height:32px;background:var(--line)}
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:40px}
@media (max-width:760px){.pgrid{grid-template-columns:minmax(0,1fr)}}
.plogo{height:64px;display:flex;align-items:center;margin-bottom:8px}
.plogo img{height:52px;width:auto}
.footlogos{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.footlogos p{flex-basis:100%}
.foot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;border-top:1px solid var(--line);padding-top:32px}
.foot h4{margin:0 0 8px;font-weight:600;font-size:14px}
.foot p,.foot a{font-size:14px;line-height:22px}
.foot p{color:var(--grey)}
@media (max-width:760px){.foot{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* booking */
#book{padding-block:56px 96px}
.bookgrid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;margin-top:40px;align-items:start}
@media (max-width:900px){.bookgrid{grid-template-columns:minmax(0,1fr)}}
.step{background:var(--mist);border-radius:var(--r-card);padding:32px;display:grid;gap:20px}
form{display:grid;gap:20px}
.step h3 span{color:var(--grey);font-weight:400}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:560px){.choices{grid-template-columns:minmax(0,1fr)}}
.choice{position:relative}
.choice input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.choice label{display:grid;gap:4px;padding:16px 18px;border-radius:20px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;transition:box-shadow var(--t-small) var(--ease);height:100%}
.choice label b{font-weight:600}
.choice label small{color:var(--grey);font-size:14px;line-height:20px}
.choice input:checked+label{box-shadow:inset 0 0 0 2px var(--blue)}
.choice input:focus-visible+label{outline:2px solid var(--blue);outline-offset:3px}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.row.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:560px){.row,.row.three{grid-template-columns:minmax(0,1fr)}}
.field{display:grid;gap:6px;min-width:0}
.field label{font-size:14px;color:var(--grey)}
.field input,.field select,.field textarea{width:100%;font:400 17px/25px var(--font);color:var(--ink);background:var(--white);border:0;box-shadow:inset 0 0 0 1px var(--line);border-radius:14px;padding:12px 14px;transition:box-shadow var(--t-small) var(--ease);min-width:0}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;box-shadow:inset 0 0 0 2px var(--blue)}
.field textarea{min-height:96px;resize:vertical}
.err{color:var(--ink);font-size:14px;font-weight:600}
.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:560px){.checks{grid-template-columns:minmax(0,1fr)}}
.chk{display:flex;gap:10px;align-items:flex-start;background:var(--white);border-radius:16px;padding:12px 14px;box-shadow:inset 0 0 0 1px var(--line)}
.chk input{margin-top:5px;accent-color:var(--blue);flex:none}
.chk label{display:grid;gap:2px;cursor:pointer}
.chk small{color:var(--grey);font-size:13px;line-height:18px}
.summary{position:sticky;top:calc(env(safe-area-inset-top,0px) + 80px);background:var(--white);border-radius:var(--r-card);box-shadow:inset 0 0 0 1px var(--line);padding:28px;display:grid;gap:16px}
.summary dl{margin:0;display:grid}
.summary dl div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--line)}
.summary dl div:first-child{border-top:0}
.summary dt{color:var(--grey);font-size:14px}
.summary dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;min-width:0}
.confirm{background:var(--mist);border-radius:var(--r-card);padding:40px;display:grid;gap:16px}
.confirm pre{white-space:pre-wrap;font:400 14px/21px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--white);border-radius:16px;padding:16px;margin:0;overflow-x:auto}
.ref{font-weight:600;font-size:32px;letter-spacing:-0.015em;font-variant-numeric:tabular-nums}

@media (max-width:600px){.band{padding-block:72px}.card .pad,.step{padding:24px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* --- added in the action-plan rebuild --- */
picture{display:contents}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600}
.prose{max-width:70ch;margin:0 auto;display:grid;gap:16px}
.prose h1{font-size:clamp(40px,6vw,56px);text-align:left;max-width:none}
.prose h2{font-size:24px;line-height:1.25;letter-spacing:-0.01em;margin-top:20px}
.prose p,.prose li{font-size:17px;line-height:1.6}
.prose ul{margin:0;padding-left:20px;display:grid;gap:6px}
.crumbs{font-size:14px;color:var(--grey)}
.crumbs a{color:var(--grey)}
.camp-other .card .pad{gap:8px}
.consent{font-size:13px;color:var(--grey);margin-top:12px}
.foot p a{display:inline-block;min-height:24px;line-height:24px}