/* ============================================================
   DESIGN TOKENS
   Light values live on :root. Dark values live once as --dk-*
   and are mapped onto the real tokens in the two blocks below,
   so a colour is only ever edited in one place.
   ============================================================ */
:root{
  /* ---- light ---- */
  --paper:#F5F3EC; --surface:#FFFFFF; --surface-2:#FBFAF5;
  --ink:#1B211C; --ink-soft:#535B52; --ink-faint:#7C837A;
  --line:#E4E0D4; --line-strong:#D5D0C0;
  --pine:#1C4634; --pine-deep:#123024;
  --pine-solid:#1C4634; --pine-solid-h:#123024; --on-pine:#FFFFFF;
  --ochre:#C4661F; --ochre-soft:#E8A86A; --ochre-tint:#F6E7D6; --on-ochre:#FFFFFF;
  --good:#2F7D5B; --on-good:#FFFFFF; --warn:#B4791B; --danger:#C0392B;
  --footer-bg:#123024; --footer-line:transparent;
  --hero-veil-1:rgba(18,48,36,.55); --hero-veil-2:rgba(18,48,36,.8);
  --thero-veil-1:rgba(18,48,36,.45); --thero-veil-2:rgba(18,48,36,.82);
  --edge:transparent;
  --shadow:0 1px 2px rgba(27,33,28,.04), 0 8px 24px rgba(27,33,28,.06);
  --shadow-lg:0 2px 6px rgba(27,33,28,.06), 0 20px 44px rgba(27,33,28,.12);
  --shadow-up:0 -6px 20px rgba(27,33,28,.08);
  --r:14px; --maxw:1180px; --measure:66ch;

  /* ---- dark values (inert until mapped below) ---- */
  --dk-paper:#0D1210; --dk-surface:#18201B; --dk-surface-2:#141A17;
  --dk-ink:#E8ECE6; --dk-ink-soft:#A9B3AC; --dk-ink-faint:#7B857E;
  --dk-line:#28312C; --dk-line-strong:#3B463F;
  --dk-pine:#7FC7A3; --dk-pine-deep:#A6DCC0;
  --dk-pine-solid:#2C6B4E; --dk-pine-solid-h:#38815F; --dk-on-pine:#FFFFFF;
  --dk-ochre:#E9995B; --dk-ochre-soft:#EFAE74; --dk-ochre-tint:#2E2318; --dk-on-ochre:#1F1407;
  --dk-good:#74C9A0; --dk-on-good:#0D1210; --dk-warn:#DFAF5E; --dk-danger:#F08579;
  --dk-footer-bg:#070B09; --dk-footer-line:#28312C;
  --dk-hero-veil-1:rgba(8,16,12,.55); --dk-hero-veil-2:rgba(8,16,12,.88);
  --dk-thero-veil-1:rgba(8,16,12,.45); --dk-thero-veil-2:rgba(8,16,12,.9);
  --dk-edge:rgba(255,255,255,.045);
  --dk-shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 26px rgba(0,0,0,.4);
  --dk-shadow-lg:0 2px 8px rgba(0,0,0,.5), 0 24px 50px rgba(0,0,0,.55);
  --dk-shadow-up:0 -6px 20px rgba(0,0,0,.5);
}

/* dark mapping - keep these two rule bodies identical */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:var(--dk-paper); --surface:var(--dk-surface); --surface-2:var(--dk-surface-2);
  --ink:var(--dk-ink); --ink-soft:var(--dk-ink-soft); --ink-faint:var(--dk-ink-faint);
  --line:var(--dk-line); --line-strong:var(--dk-line-strong);
  --pine:var(--dk-pine); --pine-deep:var(--dk-pine-deep);
  --pine-solid:var(--dk-pine-solid); --pine-solid-h:var(--dk-pine-solid-h); --on-pine:var(--dk-on-pine);
  --ochre:var(--dk-ochre); --ochre-soft:var(--dk-ochre-soft); --ochre-tint:var(--dk-ochre-tint); --on-ochre:var(--dk-on-ochre);
  --good:var(--dk-good); --on-good:var(--dk-on-good); --warn:var(--dk-warn); --danger:var(--dk-danger);
  --footer-bg:var(--dk-footer-bg); --footer-line:var(--dk-footer-line);
  --hero-veil-1:var(--dk-hero-veil-1); --hero-veil-2:var(--dk-hero-veil-2);
  --thero-veil-1:var(--dk-thero-veil-1); --thero-veil-2:var(--dk-thero-veil-2);
  --edge:var(--dk-edge);
  --shadow:var(--dk-shadow); --shadow-lg:var(--dk-shadow-lg); --shadow-up:var(--dk-shadow-up);
}}
:root[data-theme="dark"]{
  --paper:var(--dk-paper); --surface:var(--dk-surface); --surface-2:var(--dk-surface-2);
  --ink:var(--dk-ink); --ink-soft:var(--dk-ink-soft); --ink-faint:var(--dk-ink-faint);
  --line:var(--dk-line); --line-strong:var(--dk-line-strong);
  --pine:var(--dk-pine); --pine-deep:var(--dk-pine-deep);
  --pine-solid:var(--dk-pine-solid); --pine-solid-h:var(--dk-pine-solid-h); --on-pine:var(--dk-on-pine);
  --ochre:var(--dk-ochre); --ochre-soft:var(--dk-ochre-soft); --ochre-tint:var(--dk-ochre-tint); --on-ochre:var(--dk-on-ochre);
  --good:var(--dk-good); --on-good:var(--dk-on-good); --warn:var(--dk-warn); --danger:var(--dk-danger);
  --footer-bg:var(--dk-footer-bg); --footer-line:var(--dk-footer-line);
  --hero-veil-1:var(--dk-hero-veil-1); --hero-veil-2:var(--dk-hero-veil-2);
  --thero-veil-1:var(--dk-thero-veil-1); --thero-veil-2:var(--dk-thero-veil-2);
  --edge:var(--dk-edge);
  --shadow:var(--dk-shadow); --shadow-lg:var(--dk-shadow-lg); --shadow-up:var(--dk-shadow-up);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:"Bricolage Grotesque","Instrument Sans",sans-serif; text-wrap:balance; margin:0; letter-spacing:-.01em; color:var(--ink)}
p{margin:0}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.narrow{max-width:760px; margin:0 auto; padding:0 24px}
.eyebrow{font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ochre); margin:0 0 .6rem}
.center{text-align:center}

/* header */
.site-head{position:sticky; top:0; z-index:60; background:color-mix(in srgb,var(--paper) 86%,transparent); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line)}
.head-in{display:flex; align-items:center; justify-content:space-between; gap:20px; height:68px}
.brand{display:flex; align-items:center; gap:11px; font-family:"Bricolage Grotesque"; font-weight:700; font-size:1.02rem; line-height:1.05; letter-spacing:-.02em; text-decoration:none; color:var(--ink)}
.brand .mark{width:34px; height:34px; flex:none; border-radius:9px; background:var(--pine-solid); display:grid; place-items:center; color:var(--on-pine)}
.brand .mark svg{width:20px; height:20px}
.brand small{display:block; font-family:"Instrument Sans"; font-weight:500; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint)}
.nav{display:flex; align-items:center; gap:4px}
.nav a{text-decoration:none; color:var(--ink-soft); font-weight:500; font-size:.95rem; padding:9px 12px; border-radius:9px}
.nav a:hover{color:var(--ink); background:var(--surface-2)}
.nav a[aria-current]{color:var(--ink)}
.nav a.book{background:var(--ochre); color:var(--on-ochre); font-weight:600; padding:9px 18px; margin-left:8px}
.nav a.book:hover{background:var(--ink); color:var(--paper)}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:.5em; text-decoration:none; font-weight:600; border-radius:11px; padding:13px 22px; font-size:1rem; border:0; cursor:pointer; font-family:inherit}
.btn-primary{background:var(--ochre); color:var(--on-ochre)}
.btn-primary:hover{background:var(--pine-solid-h); color:var(--on-pine)}
.btn-pine{background:var(--pine-solid); color:var(--on-pine)}
.btn-pine:hover{background:var(--pine-solid-h)}
.btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--line-strong)}
.btn-ghost:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.btn-full{width:100%; justify-content:center}
.btn-lg{padding:15px 26px; font-size:1.05rem}
.btn[disabled]{opacity:.6; cursor:default}

/* hero */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.hero-bg{position:absolute; inset:0}
.hero-bg img{width:100%; height:100%; object-fit:cover}
.hero-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,var(--hero-veil-1),var(--hero-veil-2))}
.hero-in{position:relative; padding:78px 24px 66px; max-width:var(--maxw); margin:0 auto; color:#fff}
.hero .eyebrow{color:var(--ochre-soft)}
.hero h1{color:#fff; font-size:clamp(2.1rem,5.2vw,3.5rem); font-weight:800; line-height:1.02; max-width:18ch}
.hero p.lead{max-width:60ch; margin:1.1rem 0 0; color:rgba(255,255,255,.92); font-size:1.1rem}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:1.8rem}
.hero-cta .btn-ghost{background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.4)}
.hero-cta .btn-ghost:hover{background:#fff; color:#123024}
.hero--slim .hero-in{padding:60px 24px 52px}
.hero--slim h1{font-size:clamp(1.9rem,4.4vw,2.9rem)}

/* sections */
section.band{padding:66px 0}
.sec-head{margin-bottom:30px; max-width:64ch}
.sec-head.center{margin-left:auto; margin-right:auto}
.sec-head h2{font-size:clamp(1.5rem,3vw,2.05rem); font-weight:700}
.sec-head p{color:var(--ink-soft); margin:.5rem 0 0}
.section-tint{background:var(--surface-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.morelink{display:inline-flex; align-items:center; gap:.5em; margin-top:30px; text-decoration:none; font-weight:600; color:var(--ink); border:1px solid var(--line-strong); border-radius:10px; padding:11px 20px}
.morelink:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}

/* cards grid */
.grid{display:grid; gap:26px; grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--line-strong)}
.card-media{display:block; aspect-ratio:3/2; overflow:hidden; background:var(--surface-2)}
.card-media img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.card:hover .card-media img{transform:scale(1.04)}
.card-body{padding:20px 20px 22px; display:flex; flex-direction:column; gap:9px; flex:1}
.card-name{font-size:1.24rem; font-weight:700; line-height:1.12}
.card-name a{text-decoration:none}
.card-name a:hover{color:var(--pine)}
.card-route{color:var(--ink-soft); font-size:.95rem}
.both-dir{color:var(--ochre); font-weight:600; white-space:nowrap; font-size:.86em}
.card-meta{font-variant-numeric:tabular-nums; font-size:.84rem; letter-spacing:.02em; color:var(--ink-faint); text-transform:uppercase; font-weight:600}
.card-riding{font-size:.83rem; color:var(--pine); font-weight:600; background:var(--ochre-tint); display:inline-block; padding:3px 9px; border-radius:7px; align-self:flex-start}
.card-price{font-variant-numeric:tabular-nums}
.card-price .vnd{font-family:"Bricolage Grotesque"; font-weight:700; font-size:1.18rem}
.card-price .per{color:var(--ink-faint); font-size:.85rem}
.card-price .eur{color:var(--ink-soft); font-size:.9rem; margin-left:.3rem}
.card-blurb{color:var(--ink-soft); font-size:.96rem; flex:1}
.card-cta{align-self:flex-start; margin-top:.4rem; text-decoration:none; color:var(--pine); font-weight:600; border-bottom:2px solid transparent; padding-bottom:1px}
.card-cta:hover{border-bottom-color:var(--ochre); color:var(--ochre)}
.card--feature .card-media{aspect-ratio:4/3}

/* why ride: guide photo beside the reasons */
.why{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:34px; align-items:start}
.why-photo{margin:0; position:relative; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); background:var(--surface-2)}
.why-photo img{display:block; width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 38%}
.why-photo figcaption{position:absolute; inset:auto 0 0 0; padding:34px 18px 14px; color:#fff; font-size:.9rem; font-weight:600; background:linear-gradient(to top,rgba(20,24,20,.72),rgba(20,24,20,0))}
.why .reasons--stack{grid-template-columns:1fr; gap:14px}
.reasons--stack .reason{display:flex; align-items:flex-start; gap:16px; padding:20px 22px}
.reasons--stack .reason .ic{flex:none; margin-bottom:0}
.reasons--stack .reason h3{font-size:1.04rem}
.reasons--stack .reason p{margin-top:.3rem}

/* reasons */
.reasons{display:grid; gap:22px; grid-template-columns:repeat(4,1fr)}
.reason{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px}
.reason .ic{width:40px; height:40px; border-radius:10px; background:var(--ochre-tint); color:var(--ochre); display:grid; place-items:center; margin-bottom:14px}
.reason h3{font-size:1.08rem; font-weight:700}
.reason p{color:var(--ink-soft); font-size:.94rem; margin-top:.4rem}

/* steps */
.steps{list-style:none; margin:0; padding:0; display:grid; gap:16px; grid-template-columns:repeat(4,1fr)}
.steps li{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px; display:flex; flex-direction:column; gap:12px}
.step-n{width:34px; height:34px; border-radius:50%; background:var(--pine-solid); color:var(--on-pine); font-family:"Bricolage Grotesque"; font-weight:700; display:grid; place-items:center}
.steps h4{font-size:1.02rem}
.steps p{color:var(--ink-soft); font-size:.93rem; margin-top:.3rem}
.steps-note{margin:22px auto 0; max-width:70ch; color:var(--ink-soft); font-size:.95rem; background:var(--ochre-tint); border-radius:10px; padding:14px 18px}

/* tour detail */
.tourhero{position:relative; overflow:hidden}
.tourhero-bg{position:absolute; inset:0}
.tourhero-bg img{width:100%;height:100%;object-fit:cover}
.tourhero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--thero-veil-1),var(--thero-veil-2))}
.tourhero-in{position:relative; color:#fff; max-width:var(--maxw); margin:0 auto; padding:70px 24px 44px}
.crumbs{font-size:.85rem; color:rgba(255,255,255,.75); margin-bottom:16px}
.crumbs a{color:rgba(255,255,255,.85); text-decoration:none}
.tourhero h1{color:#fff; font-size:clamp(1.9rem,4.4vw,3rem); font-weight:800; max-width:20ch}
.tourhero .route{color:var(--ochre-soft); font-weight:600; margin-top:.6rem; font-size:1.05rem}
.tourhero .tmeta{color:rgba(255,255,255,.9); margin-top:.3rem; font-variant-numeric:tabular-nums}
.tourhero .price{font-family:"Bricolage Grotesque"; font-weight:700; font-size:1.5rem; margin-top:1rem; color:#fff}
.tourhero .price small{font-weight:500; font-size:.62em; color:rgba(255,255,255,.75)}
.tourhero .btn{margin-top:1.1rem}
.dir-select{display:flex; gap:8px; flex-wrap:wrap; margin-top:1.1rem}
.dir-select .lab{align-self:center; font-size:.85rem; color:rgba(255,255,255,.8); margin-right:4px}
.dir-select a{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.35); color:#fff; text-decoration:none; padding:7px 14px; border-radius:20px; font-size:.9rem; font-weight:600}

.tsec{padding:52px 0; border-bottom:1px solid var(--line)}
.tsec h2{font-size:1.5rem; margin-bottom:18px}
.glance{display:grid; gap:1px; grid-template-columns:repeat(4,1fr); background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.glance div{background:var(--surface); padding:16px 18px}
.glance dt{font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); font-weight:600}
.glance dd{margin:.25rem 0 0; font-weight:600; font-variant-numeric:tabular-nums}
.prose{max-width:var(--measure); color:var(--ink-soft)}
.prose p{margin:0 0 1rem}
.prose h3{color:var(--ink); margin:1.6rem 0 .5rem}
.itin{display:flex; flex-direction:column; gap:26px}
.day{display:grid; grid-template-columns:auto 1fr; gap:20px}
.day-n{font-family:"Bricolage Grotesque"; font-weight:700; color:var(--ochre); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; padding-top:3px; white-space:nowrap}
.day h3{font-size:1.15rem}
.day p{color:var(--ink-soft); margin-top:.35rem; max-width:60ch}
.day-stops{margin-top:1rem; max-width:60ch}
.day-stops-h{font-family:"Bricolage Grotesque"; font-weight:700; font-size:.78rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink-faint); margin:0 0 .5rem}
.day-stops ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
.day-stops li{position:relative; padding-left:18px; color:var(--ink-soft); font-size:.95rem; line-height:1.55}
.day-stops li::before{content:""; position:absolute; left:3px; top:.62em; width:6px; height:6px;
  border-radius:50%; background:var(--ochre); opacity:.75}
.incexc{display:grid; grid-template-columns:1fr 1fr; gap:26px}
.inclist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.inclist li{display:flex; gap:10px; align-items:flex-start; color:var(--ink-soft); font-size:.97rem}
.inclist .yes{color:var(--good); font-weight:700}
.inclist .no{color:var(--ink-faint); font-weight:700}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:26px}
.opt-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px}
.opt-card h3{font-size:1.1rem}
.opt-card p{color:var(--ink-soft); margin-top:.4rem; font-size:.96rem}
.op-card{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); padding:24px; max-width:var(--measure)}
.op-card .op-name{font-family:"Bricolage Grotesque"; font-weight:700; font-size:1.15rem}
.op-card p{color:var(--ink-soft); margin-top:.5rem}
.op-card .op-sub{font-size:.88rem; color:var(--ink-faint); margin-top:.8rem}

/* gallery */
.gallery{columns:3; column-gap:14px}
.gallery img{width:100%; border-radius:10px; margin-bottom:14px; break-inside:avoid; background:var(--surface-2)}

/* faq */
.faq{max-width:var(--measure)}
.faq details{border-bottom:1px solid var(--line); padding:4px 0}
.faq summary{cursor:pointer; font-weight:600; padding:14px 0; list-style:none; display:flex; justify-content:space-between; gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--ochre); font-size:1.3rem; line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--ink-soft); padding:0 0 16px; max-width:62ch}

/* notice */
.notice{background:var(--ochre-tint); border:1px solid color-mix(in srgb,var(--ochre) 30%,transparent); border-radius:10px; padding:14px 18px; color:var(--ink); font-size:.95rem; display:flex; gap:10px; margin:0 0 4px}
.notice.pine{background:color-mix(in srgb,var(--pine) 10%,var(--surface)); border-color:color-mix(in srgb,var(--pine) 25%,transparent)}

/* guides */
/* guides page */
.story{max-width:72ch}
.story>p{color:var(--ink-soft)}
.story>p+p{margin-top:1rem}
.guide-founders{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.guide-team{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:22px}
.guide{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow)}
.g-photo{position:relative; background:var(--ochre-tint); overflow:hidden}
.g-photo::after{content:attr(data-initial); position:absolute; inset:0; display:grid; place-items:center; font-family:"Bricolage Grotesque","Instrument Sans",sans-serif; font-size:2.6rem; font-weight:700; color:var(--ochre); opacity:.5}
.g-photo img{position:relative; z-index:1; width:100%; height:100%; object-fit:cover}
.guide--feature .g-photo{aspect-ratio:4/5}
.guide--row{display:grid; grid-template-columns:154px minmax(0,1fr)}
.guide--row .g-photo{height:100%}
.guide .g-body{padding:18px 20px 22px}
.guide h3{font-size:1.15rem; display:flex; align-items:baseline; gap:.55em; flex-wrap:wrap}
.g-role{font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ochre); background:var(--ochre-tint); border-radius:999px; padding:3px 9px}
.g-years{position:absolute; z-index:2; left:10px; bottom:10px; max-width:calc(100% - 20px); background:rgba(18,22,18,.74); color:#fff; font-size:.68rem; font-weight:600; line-height:1.3; padding:4px 9px; border-radius:8px}
.guide .g-body p{color:var(--ink-soft); font-size:.95rem; margin-top:.7rem}

/* reviews */
.rev-grid{columns:3; column-gap:18px}
.rev-grid figure{margin:0 0 18px; break-inside:avoid; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow)}
.rev-grid img{width:100%}

/* booking form */
.book-layout{display:grid; grid-template-columns:1.3fr .9fr; gap:34px; align-items:start}
.book-form{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:28px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:20px}
.fg{display:flex; flex-direction:column; gap:7px}
.fg label{font-weight:600; font-size:.95rem}
.fg .note{font-weight:400; color:var(--ink-faint); font-size:.85em}
.fg input,.fg select{font-family:inherit; font-size:1rem; padding:12px 14px; border:1px solid var(--line-strong); border-radius:10px; background:var(--surface-2); color:var(--ink)}
.fg input:focus,.fg select:focus{outline:2px solid var(--ochre); outline-offset:1px; border-color:var(--ochre)}
.fg .err{color:var(--danger); font-size:.85rem; min-height:1em}

/* booking-terms acceptance: a real checkbox, never pre-ticked */
.fg-accept{gap:4px}
.fg-accept .accept{display:flex; align-items:flex-start; gap:10px; font-weight:400; font-size:.92rem; line-height:1.5; cursor:pointer}
.fg-accept .accept input{flex:none; width:18px; height:18px; margin-top:2px; padding:0; accent-color:var(--pine); cursor:pointer}
.fg-accept .accept span{color:var(--ink-soft)}
.fg-accept .accept a{color:inherit; text-underline-offset:2px}
.input-error{border-color:var(--danger) !important}
.stepper{display:inline-flex; align-items:center; gap:0; border:1px solid var(--line-strong); border-radius:10px; overflow:hidden; align-self:flex-start; background:var(--surface-2)}
.stepper-btn{border:0; background:transparent; font-size:1.3rem; width:46px; height:46px; cursor:pointer; color:var(--ink)}
.stepper-btn:hover{background:var(--ochre-tint)}
.stepper-value{min-width:46px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums}
.toggle-group{display:flex; gap:10px}
.toggle-option{flex:1; position:relative; cursor:pointer}
.toggle-option input{position:absolute; opacity:0}
.toggle-label{display:block; text-align:center; padding:12px; border:1px solid var(--line-strong); border-radius:10px; background:var(--surface-2); font-weight:600; font-size:.95rem}
.toggle-option input:checked + .toggle-label{border-color:var(--ochre); background:var(--ochre-tint); color:var(--ink)}
.toggle-note{color:var(--ink-faint); font-size:.85rem}
.pricebox{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px; box-shadow:var(--shadow); position:sticky; top:88px}
.pricebox h3{font-size:1.1rem; margin-bottom:14px}
.price-summary{flex-direction:column}
.prow{display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-variant-numeric:tabular-nums}
.prow.total{border-top:1px solid var(--line); margin-top:6px; padding-top:12px; font-size:1.05rem; font-weight:700}
.prow.dep{color:var(--ochre); font-weight:700}
.prow .muted{color:var(--ink-faint)}
.price-note{color:var(--ink-faint); font-size:.85rem; margin-top:12px}
.submit-note{color:var(--ink-faint); font-size:.85rem; margin-top:2px}
.book-warn{background:var(--pine-solid); color:var(--on-pine); border-radius:10px; padding:12px 16px; font-size:.92rem; font-weight:500}

/* modals */
.modal-overlay{position:fixed; inset:0; background:rgba(18,33,28,.6); backdrop-filter:blur(3px); z-index:100; display:none; align-items:center; justify-content:center; padding:20px}
.modal-overlay.active{display:flex}
.modal-box{background:var(--surface); border-radius:16px; max-width:440px; width:100%; padding:30px; box-shadow:var(--shadow-lg); text-align:center; max-height:90vh; overflow:auto}
.modal-box h2{font-size:1.4rem}
.modal-box p{color:var(--ink-soft); margin-top:.6rem}
.modal-amount{font-family:"Bricolage Grotesque"; font-weight:700; font-size:2rem; margin:16px 0; color:var(--ink)}
.confirm-row{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); text-align:left; font-size:.95rem}
.confirm-deposit-row{border-bottom:0; font-size:1.05rem; padding-top:14px}
.confirm-deposit-amt{color:var(--ochre)}
.btn-modal-cancel{background:transparent; border:0; color:var(--ink-faint); font-family:inherit; cursor:pointer; margin-top:10px; font-size:.92rem; text-decoration:underline}
.modal-success-icon{width:56px; height:56px; border-radius:50%; background:var(--good); color:var(--on-good); display:grid; place-items:center; margin:0 auto 8px; font-size:1.6rem}
.btn-whatsapp-reveal{display:inline-flex; align-items:center; gap:8px; background:#25D366; color:#fff; text-decoration:none; font-weight:600; padding:12px 20px; border-radius:11px; margin-top:14px}

/* prose pages */
.page-prose{max-width:var(--measure); margin:0 auto; padding:56px 24px 70px}
.page-prose h1{font-size:clamp(1.8rem,4vw,2.5rem); margin-bottom:.6rem}
.page-prose .updated{color:var(--ink-faint); font-size:.9rem; margin-bottom:24px}
.page-prose h2{font-size:1.35rem; margin:2rem 0 .6rem}
.page-prose p,.page-prose li{color:var(--ink-soft)}
.page-prose ul{padding-left:1.2rem}
.page-prose a{color:var(--pine); text-decoration:underline}

/* article cards */
.art-grid{display:grid; gap:24px; grid-template-columns:repeat(3,1fr)}
.art{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column}
.art .art-media{aspect-ratio:16/10; background:var(--surface-2); overflow:hidden}
.art .art-media img{width:100%;height:100%;object-fit:cover}
.art .art-body{padding:20px; display:flex; flex-direction:column; gap:8px; flex:1}
.art h3{font-size:1.15rem}
.art p{color:var(--ink-soft); font-size:.94rem; flex:1}
.art a.card-cta{color:var(--pine); font-weight:600; text-decoration:none}

/* footer */
footer{background:var(--footer-bg); color:rgba(255,255,255,.82); margin-top:0; border-top:1px solid var(--footer-line)}
.foot-in{max-width:var(--maxw); margin:0 auto; padding:56px 24px 30px; display:grid; gap:34px; grid-template-columns:1.4fr 1fr 1fr 1fr}
footer h4{font-family:"Instrument Sans"; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ochre-soft); margin:0 0 14px}
footer a,.foot-op,.foot-op-sub{color:rgba(255,255,255,.82); text-decoration:none; display:block; padding:4px 0; font-size:.95rem}
footer a:hover{color:#fff}
.foot-op{font-weight:600; color:#fff}
.foot-op-sub{color:rgba(255,255,255,.6); font-size:.9rem; padding-top:0}
.foot-brand .brand{color:#fff}
.foot-brand p{font-size:.92rem; margin:14px 0 0; max-width:34ch; color:rgba(255,255,255,.72)}
.foot-note{max-width:var(--maxw); margin:0 auto; padding:22px 24px 44px; border-top:1px solid rgba(255,255,255,.14); font-size:.84rem; color:rgba(255,255,255,.6)}

/* sticky mobile cta */
.mcta{display:none; position:fixed; left:0; right:0; bottom:0; z-index:70; background:var(--surface); border-top:1px solid var(--line); padding:10px 16px calc(10px + env(safe-area-inset-bottom)); box-shadow:var(--shadow-up); align-items:center; justify-content:space-between; gap:12px}
.mcta .m-price{font-family:"Bricolage Grotesque"; font-weight:700; font-variant-numeric:tabular-nums}
.mcta .m-price small{display:block; font-weight:500; font-size:.7rem; color:var(--ink-faint)}
.mcta .btn{padding:11px 18px}

body.no-scroll{overflow:hidden}
a:focus-visible, summary:focus-visible, button:focus-visible{outline:3px solid var(--ochre); outline-offset:3px; border-radius:6px}
@media (prefers-reduced-motion:reduce){*{transition:none !important; scroll-behavior:auto}}

@media (max-width:980px){
  .why{grid-template-columns:1fr}
  .why-photo img{aspect-ratio:4/3}
  .reasons{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .glance{grid-template-columns:1fr 1fr}
  .book-layout{grid-template-columns:1fr}
  .guide-grid,.art-grid,.grid-3{grid-template-columns:1fr 1fr}
  .foot-in{grid-template-columns:1fr 1fr}
  .pricebox{position:static}
}
@media (max-width:680px){
  body{font-size:16px}
  .nav{display:none}
  .grid,.grid-3{grid-template-columns:1fr}
  .reasons,.steps,.incexc,.two-col{grid-template-columns:1fr}
  .glance{grid-template-columns:1fr 1fr}
  .guide-grid,.art-grid{grid-template-columns:1fr}
  .gallery,.rev-grid{columns:2}
  .day{grid-template-columns:1fr; gap:6px}
  .hero-in{padding:56px 22px 46px}
  .mcta{display:flex}
  body.has-mcta{padding-bottom:76px}
}

/* ---- carousel: swipe / click through cards when they no longer fit side by side ---- */
.carousel-nav{display:none}
@media (max-width:980px){
  .carousel-track{display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:4px}
  .carousel-track::-webkit-scrollbar{display:none}
  .carousel-track>*{flex:0 0 46%; scroll-snap-align:start}
  .carousel-nav{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:20px}
  .carousel-btn{width:40px; height:40px; padding:0; border:1px solid var(--line-strong); border-radius:50%; background:var(--surface); color:var(--ink); font-size:1.05rem; line-height:1; display:grid; place-items:center; cursor:pointer}
  .carousel-btn:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}
  .carousel-btn[disabled]{opacity:.35; cursor:default}
  .carousel-btn[disabled]:hover{background:var(--surface); color:var(--ink); border-color:var(--line-strong)}
  .carousel-dots{display:flex; align-items:center; gap:8px}
  .carousel-dot{width:8px; height:8px; padding:0; border:0; border-radius:50%; background:var(--line-strong); cursor:pointer; transition:width .18s ease, background .18s ease}
  .carousel-dot[aria-current="true"]{width:22px; border-radius:4px; background:var(--ochre)}
}
@media (max-width:680px){
  .carousel-track>*{flex:0 0 82%}
}

/* ---- guest-book marquee + typed quotes ---- */
.quotes{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); margin-top:4px}
.quote{margin:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px 24px; box-shadow:var(--shadow)}
.quote blockquote{margin:0; font-size:1.02rem; line-height:1.62; color:var(--ink)}
.quote blockquote::before{content:"\201C"; color:var(--ochre); font-size:1.4em; line-height:0; vertical-align:-.15em; margin-right:.08em}
.quote figcaption{margin-top:14px; color:var(--ochre); font-weight:600; font-size:.9rem}
.quote .q-year{color:var(--ink-faint); font-weight:500}
.marquee{overflow:hidden; margin-top:34px; -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
.marquee-track{display:flex; gap:18px; width:max-content; animation:drift 80s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
.marquee img{display:block; height:240px; width:320px; object-fit:cover; border-radius:12px; border:1px solid var(--line); box-shadow:var(--shadow); background:var(--surface-2)}
@keyframes drift{from{transform:translateX(0)} to{transform:translateX(calc(-50% - 9px))}}
@media (max-width:680px){.marquee img{height:180px; width:240px}}
@media (prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto; scrollbar-width:none}
  .marquee::-webkit-scrollbar{display:none}
  .marquee-track{animation:none}
}

/* ---- mobile menu ---- */
.head-mobile{display:none; align-items:center; gap:10px}
.menu-toggle{width:44px; height:44px; margin-right:-10px; padding:0; border:0; background:none; color:var(--ink); cursor:pointer; align-items:center; justify-content:center; flex:none}
.menu-toggle .bars{position:relative; display:block; width:20px; height:14px}
.menu-toggle .bars span{position:absolute; left:0; width:100%; height:2px; border-radius:2px; background:currentColor; transition:transform .2s ease, opacity .2s ease}
.menu-toggle .bars span:nth-child(1){top:0}
.menu-toggle .bars span:nth-child(2){top:6px}
.menu-toggle .bars span:nth-child(3){top:12px}
.menu-toggle[aria-expanded="true"] .bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .bars span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] .bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile-nav{display:none; background:var(--paper); border-top:1px solid var(--line); max-height:calc(100vh - 68px); overflow-y:auto}
.mobile-nav .wrap{display:flex; flex-direction:column; padding-top:6px; padding-bottom:20px}
.mobile-nav a{display:block; padding:15px 2px; text-decoration:none; color:var(--ink); font-weight:600; font-size:1.05rem; border-bottom:1px solid var(--line)}
.mobile-nav a[aria-current]{color:var(--ochre)}
.mobile-nav a.book{display:none}
.mobile-nav a.mn-book{margin-top:16px; padding:14px 18px; background:var(--ochre); color:var(--on-ochre); text-align:center; border-radius:11px; border-bottom:0}
@media (max-width:680px){
  .head-mobile{display:flex}
  .menu-toggle{display:inline-flex}
  .mobile-nav:not([hidden]){display:block}
}

/* ---- "most popular" flag on tour cards (tours overview only) ---- */
.card{position:relative}
.card-badge{position:absolute; top:12px; left:12px; z-index:2; background:var(--ochre); color:var(--on-ochre); font-family:"Instrument Sans"; font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; padding:6px 11px; border-radius:999px; box-shadow:0 2px 8px rgba(27,33,28,.25)}

/* helper line under a form field */
.note-inline{display:block; margin-top:6px; color:var(--ink-faint); font-size:.85rem}


/* guides page responsive */
@media (max-width:900px){
  .guide-founders,.guide-team{grid-template-columns:1fr}
}
@media (max-width:560px){
  .guide--row{grid-template-columns:1fr}
  .guide--row .g-photo{aspect-ratio:4/3; height:auto}
}

/* ---- route maps on tour pages ---------------------------------------- */
:root{
  --map-sea:#CFE0E6; --map-land:#ECE8DA; --map-vn:#E0E7D7; --map-line:#B6C0A9;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --map-sea:#111F24; --map-land:#1B1F17; --map-vn:#232C1F; --map-line:#3C4433;
}}
:root[data-theme="dark"]{
  --map-sea:#111F24; --map-land:#1B1F17; --map-vn:#232C1F; --map-line:#3C4433;
}
.routemap{margin:34px 0 0; width:100%}
.routemap svg{display:block; width:100%; height:auto; background:var(--map-land);
  border:1px solid var(--line); border-radius:var(--r)}
.rm-land{fill:var(--map-land)}
.rm-sea{fill:var(--map-sea)}
.rm-vn{fill:var(--map-vn); stroke:var(--map-line); vector-effect:non-scaling-stroke}
.rm-ride{stroke:var(--ochre)}
.rm-bus{stroke:var(--ink-faint)}
.rm-end{fill:var(--pine); stroke:var(--paper)}
.rm-via{fill:var(--paper); stroke:var(--ochre)}
.rm-lab,.rm-sub,.rm-scale text{stroke:var(--map-land); paint-order:stroke;
  stroke-linejoin:round; font-family:"Instrument Sans",ui-sans-serif,system-ui,sans-serif}
.rm-lab{fill:var(--ink-soft); font-weight:600}
.rm-lab-end{fill:var(--ink); font-weight:700}
.rm-sub{fill:var(--ink-faint); font-weight:500}
.rm-scale{stroke:var(--ink-faint); fill:var(--ink-faint); opacity:.72}
/* --u / --um are set per map: user units per rendered pixel at the design
   width and at phone width. Picking one per breakpoint keeps the labels the
   same physical size instead of shrinking with the drawing. */
.rm-lab{font-size:calc(var(--u) * 11.4px)}
.rm-lab-end{font-size:calc(var(--u) * 13.2px)}
.rm-sub{font-size:calc(var(--u) * 9.4px)}
.rm-scale text{font-size:calc(var(--u) * 9.5px); stroke:none}
.rm-cap{margin-top:10px; font-size:.85rem; color:var(--ink-faint); max-width:60ch}
@media (max-width:680px){
  .routemap{max-width:none !important}
  /* .85 rather than full parity: at phone width the places sit closer
     together, so matching desktop type exactly makes labels collide. */
  .rm-lab{font-size:calc(var(--um) * 9.7px)}
  .rm-lab-end{font-size:calc(var(--um) * 11.2px)}
  .rm-sub{font-size:calc(var(--um) * 8px)}
  .rm-scale text{font-size:calc(var(--um) * 8.1px)}
}


/* ---- raised surfaces: a hairline top edge gives dark-mode cards their lift
        (--edge is transparent in light mode, so nothing changes there) ---- */
.card,.reason,.steps li,.opt-card,.op-card,.guide,.art,.quote,
.book-form,.pricebox,.modal-box,.rev-grid figure,.notice,.steps-note{
  box-shadow:var(--shadow), inset 0 1px 0 var(--edge);
}
.card:hover{box-shadow:var(--shadow-lg), inset 0 1px 0 var(--edge)}
.modal-box{box-shadow:var(--shadow-lg), inset 0 1px 0 var(--edge)}

/* ---- personalised / custom tour call-out (tours overview) ---- */
.custom-cta{background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r);
  padding:36px 32px; text-align:center; max-width:760px; margin:0 auto;
  box-shadow:var(--shadow), inset 0 1px 0 var(--edge)}
.custom-cta .eyebrow{margin-bottom:6px}
.custom-cta h2{font-size:clamp(1.4rem,2.7vw,1.95rem); font-weight:700; margin:0}
.custom-cta p{color:var(--ink-soft); margin:.8rem auto 0; max-width:56ch}
.custom-actions{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:24px}
.custom-actions .btn-whatsapp-reveal{margin-top:0}
.custom-note{font-size:.9rem; color:var(--ink-faint)}
@media (max-width:560px){
  .custom-cta{padding:28px 20px}
  .custom-actions{flex-direction:column}
  .custom-actions>*{width:100%; justify-content:center}
}

/* reviews page: the note above the guest book */
.revintro{max-width:72ch}
.revintro>p{color:var(--ink-soft)}
.revintro>p+p{margin-top:1rem}
.rev-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}

/* written reviews: stars and the source line */
.q-stars{margin:0 0 10px; color:var(--ochre); font-size:1rem; letter-spacing:.12em; line-height:1}
.q-src{display:inline-block; margin-top:10px; font-size:.83rem; color:var(--ink-faint); text-decoration:none}
a.q-src:hover{color:var(--ochre); text-decoration:underline}

/* about page: the bikes, and the photo band that closes the page */
.bikes{max-width:72ch}
.bikes p{color:var(--ink-soft)}
.bikes p+p{margin-top:1rem}
.bikes-photo{margin:26px 0 0; border-radius:var(--r); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow), inset 0 1px 0 var(--edge); background:var(--surface-2)}
.bikes-photo img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block}
.pagefoot-photo{border-top:1px solid var(--line)}
.pagefoot-photo img{width:100%; height:clamp(220px,34vw,420px); object-fit:cover;
  /* the bikes sit low in this frame; centring the crop shows the monument
     above them instead, so pull the visible window down a quarter */
  object-position:50% 75%; display:block}

/* tour page: the deposit rule under the price */
.tdep{margin-top:.5rem; color:rgba(255,255,255,.9); font-size:.92rem; max-width:58ch}