/*
Theme Name: Tried Trails
Theme URI: https://triedtrails.com
Description: Standalone block theme for Tried Trails. Design locked; pages use Gutenberg and shared data uses structured fields.
Author: Tried Trails
Version: 2.0.0
Requires at least: 6.5
Tested up to: 7.0.4
Requires PHP: 7.4
Text Domain: tried-trails
*/

/* ===== Self-hosted brand fonts ===== */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/plus-jakarta-sans-600.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/plus-jakarta-sans-700.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/plus-jakarta-sans-800.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Eczar';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/eczar-600.woff2') format('woff2')}

/* ===== Site design (ported from approved concept) ===== */



:root{
  --bg:#f5e9da; --surface:#fcf6ec; --surface-2:#efe1cd;
  --text:#333333; --muted:#6e685d; --line:#e2d5bf;
  --brand:#2e5339; --brand-2:#24422d; --brand-ink:#17301e;
  --accent:#d4a017; --accent-2:#b98910; --accent-ink:#2a2100;
  --terra:#c96f4a; --gold:#e0b43c;
  --field:#2e5339; --field-2:#1d3626; --on-field:#f3ead9; --on-field-muted:#b6c7b7;
  --shadow:0 18px 40px -24px rgba(30,54,38,.5); --shadow-sm:0 6px 18px -12px rgba(30,54,38,.45);
  --r:18px; --r-sm:12px; --r-lg:26px;
  --font-display:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --font-serif:'Eczar',Georgia,serif;
  --maxw:1180px;
  --tt-header-offset:82px;
  --contour:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%232e5339' stroke-width='1'%3E%3Cpath d='M-10 40 Q40 6 80 34 T170 30'/%3E%3Cpath d='M-10 70 Q40 36 80 64 T170 60'/%3E%3Cpath d='M-10 100 Q40 66 80 94 T170 90'/%3E%3Cpath d='M-10 130 Q40 96 80 124 T170 120'/%3E%3C/g%3E%3C/svg%3E");
}
/* Default palette (above) is light; dark applies only when the visitor toggles it. */
:root[data-theme="light"]{
  --bg:#f5e9da; --surface:#fcf6ec; --surface-2:#efe1cd; --text:#333333; --muted:#6e685d; --line:#e2d5bf;
  --brand:#2e5339; --brand-2:#24422d; --brand-ink:#17301e; --accent:#d4a017; --accent-2:#b98910; --accent-ink:#2a2100;
  --terra:#c96f4a; --gold:#e0b43c; --field:#2e5339; --field-2:#1d3626; --on-field:#f3ead9; --on-field-muted:#b6c7b7;
  --shadow:0 18px 40px -24px rgba(30,54,38,.5); --shadow-sm:0 6px 18px -12px rgba(30,54,38,.45);
}
:root[data-theme="dark"]{
  --bg:#15241b; --surface:#1c2f24; --surface-2:#12211a; --text:#eee7d8; --muted:#a7b2a4; --line:#2e4a3b;
  --brand:#6fae87; --brand-2:#5a9772; --brand-ink:#cfe6d6; --accent:#e4b534; --accent-2:#d4a017; --accent-ink:#241c00;
  --terra:#dd8a63; --gold:#e9c15a; --field:#0f1e16; --field-2:#0a1610; --on-field:#f3ead9; --on-field-muted:#a7b8a6;
  --shadow:0 18px 40px -24px rgba(0,0,0,.7); --shadow-sm:0 6px 18px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1.12;text-wrap:balance;margin:0;letter-spacing:-.02em}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wp-site-blocks>*{margin-block-start:0}
.wp-block-post-content>.tt-editable-section,.tt-protected-section{margin-block-start:0;max-width:none}
.tt-editable-section--story>.pad{padding-bottom:28px}
.tt-editable-section--values>.pad{padding-top:28px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--terra);display:inline-flex;align-items:center;gap:.5em}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6}
.lead{font-size:1.12rem;color:var(--muted);max-width:62ch}
.serif{font-family:var(--font-serif);font-weight:600}

.btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-display);font-weight:700;font-size:.98rem;padding:.85em 1.5em;border-radius:100px;cursor:pointer;border:1.5px solid transparent;transition:transform .18s,background .18s,box-shadow .18s;white-space:nowrap}
.btn svg{width:1.05em;height:1.05em}
.btn--accent{background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow-sm)}
.btn--accent:hover{transform:translateY(-2px);background:var(--gold)}
.btn--ghost{background:transparent;border-color:var(--line);color:var(--text)}
.btn--ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn--onfield{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.btn--onfield:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.btn:focus-visible,a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--gold);outline-offset:2px}




/* Notched phones (viewport-fit=cover): pad the header down so the logo clears the
   status bar / Dynamic Island; the blurred bar fills the inset behind it. */
.hdr{position:relative;background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding-top:env(safe-area-inset-top,0px)}
/* The block theme wraps the header part in <header class="wp-block-template-part">,
   a box only as tall as the header. Sticky lives on that wrapper (its containing
   block spans the page); .hdr itself stays non-sticky so the sticky element never
   also carries backdrop-filter, which Chrome half-paints on nested sticky layers. */
header.wp-block-template-part{position:sticky;top:0;z-index:60}
/* Logged-in users get the WordPress admin bar: a fixed 32px toolbar that sets
   html{margin-top:32px}. Tuck the sticky header just below it so it never
   slides behind the bar on scroll. Visitors have no .admin-bar class. The bar
   is fixed at >=783px and scrolls away below, so only offset on desktop. */
body.admin-bar header.wp-block-template-part{top:32px}
@media screen and (max-width:782px){body.admin-bar header.wp-block-template-part{top:0}}
.brand-logo{display:block}
:root[data-theme="dark"] .brand-logo{filter:brightness(0) invert(1)}
:root[data-theme="dark"] .brand .wm{color:#fff}
.hdr-in{max-width:var(--maxw);margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:10px;cursor:pointer;margin-right:auto}
.brand img{height:38px;width:auto}
.brand .wm{font-family:var(--font-display);font-weight:800;font-size:1.16rem;letter-spacing:.01em;line-height:1;color:var(--brand);text-transform:uppercase}
.nav{display:flex;align-items:center;gap:4px}
.nav a{font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--muted);padding:.5em .8em;border-radius:100px;cursor:pointer;transition:color .15s,background .15s;display:inline-flex;align-items:center;gap:.35em}
.nav a:hover{color:var(--text)}
.nav a.active{color:var(--brand);background:var(--surface-2)}
.nav a svg.chev{width:14px;height:14px;transition:transform .2s}
.nav a.nav-cta{display:none}
.has-drop{position:relative}
.drop{position:absolute;top:100%;left:0;min-width:250px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:8px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s;z-index:70}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateY(4px)}
.has-drop:hover .chev,.has-drop:focus-within .chev{transform:rotate(180deg)}
.drop a{padding:.7em .8em;border-radius:10px;color:var(--text);font-weight:600;font-size:.92rem;display:flex;flex-direction:column;gap:1px}
.drop a small{font-weight:500;font-size:.76rem;color:var(--muted);font-family:var(--font-body)}
.drop a:hover{background:var(--surface-2);color:var(--brand)}
.hdr-actions{display:flex;align-items:center;gap:10px}
.icon-btn{width:40px;height:40px;border-radius:100px;border:1.5px solid var(--line);background:transparent;color:var(--text);cursor:pointer;display:grid;place-items:center}
.icon-btn:hover{border-color:var(--brand);color:var(--brand)}
.icon-btn svg{width:18px;height:18px}
.hamb{display:none}
.theme-sun{display:none}
:root[data-theme="dark"] .theme-moon{display:none}
:root[data-theme="dark"] .theme-sun{display:block}
:root[data-theme="light"] .theme-sun{display:none}
:root[data-theme="light"] .theme-moon{display:block}



.pad{padding:clamp(54px,8vw,100px) 0}
.pad-sm{padding:clamp(38px,6vw,68px) 0}
.head-block{max-width:64ch}
.head-block h2{font-size:clamp(1.9rem,3.6vw,2.8rem);margin:.35em 0 .4em}

.ph{position:relative;overflow:hidden;border-radius:var(--r);background:var(--contour) 0 0/180px 180px,linear-gradient(150deg,var(--surface-2),color-mix(in srgb,var(--brand) 12%,var(--surface)));display:grid;place-items:center;border:1px solid var(--line);background-size:cover;background-position:center}
.ph .tag{font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);background:color-mix(in srgb,var(--surface) 82%,transparent);padding:.5em .9em;border-radius:100px}
.ph.shot{background-size:cover;background-position:center}
.ph.shot .tag{display:none}
.r16{aspect-ratio:16/10}.r11{aspect-ratio:1/1}.r43{aspect-ratio:4/3}

.hero{position:relative;color:#fff;overflow:hidden;min-height:min(90dvh,760px);display:flex}
.hero-slides{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;background-size:cover;background-position:center}
.hero-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,30,20,.86),rgba(15,30,20,.52) 55%,rgba(15,30,20,.28))}
.hero-slide.on{opacity:1}
/* The vertical padding scaled with viewport WIDTH only, so a wide-but-short
   laptop got the maximum 120px top and bottom on the shortest screen and pushed
   the facts row below the fold. Cap it against the height as well: tall screens
   keep the approved 120px, short ones tighten instead of overflowing. */
.hero-in{max-width:var(--maxw);margin:auto;padding:min(clamp(60px,10vw,120px),10dvh) 24px;position:relative;z-index:4;width:100%}
.hero .eyebrow{color:var(--gold)}
.hero h1{color:#fff;font-size:clamp(2.5rem,6vw,4.3rem);max-width:16ch;margin:.3em 0 .5em}
.hero .lead{color:rgba(255,255,255,.88);font-size:clamp(1.05rem,1.6vw,1.28rem);max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero-facts{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:38px;padding-top:24px;border-top:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.82);font-size:.92rem}
.hero-facts b{color:#fff;font-weight:700}
.hero-facts span{display:inline-flex;align-items:center;gap:.5em}
/* Short viewports (13in laptop, landscape phone): trim the rhythm, never the type. */
@media (max-height:820px){
	.hero-cta{margin-top:24px}
	.hero-facts{margin-top:22px;padding-top:16px}
}
#home-trips{scroll-margin-top:calc(var(--tt-header-offset) + 24px)}
.car-dots{position:absolute;bottom:22px;left:0;right:0;z-index:5;display:flex;gap:2px;justify-content:center}
.car-dots button{box-sizing:content-box;width:9px;height:9px;padding:7.5px;border-radius:100px;border:0;background:rgba(255,255,255,.45);background-clip:content-box;cursor:pointer;transition:width .25s,background .25s}
.car-dots button.on{width:26px;background-color:var(--gold)}
.car-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:100px;border:1.5px solid rgba(255,255,255,.35);background:rgba(15,30,20,.3);color:#fff;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(4px)}
.car-arrow:hover{background:rgba(15,30,20,.55)}.car-arrow svg{width:20px;height:20px}
.car-prev{left:18px}.car-next{right:18px}
@media (max-width:1200px){.hero-in{padding-left:64px;padding-right:64px}.car-arrow{width:36px;height:36px}.car-prev{left:12px}.car-next{right:12px}}

.grid{display:grid;gap:24px}
.g3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:transform .22s,box-shadow .22s;cursor:pointer}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.card .ph{border-radius:0;border:0;border-bottom:1px solid var(--line)}
.card-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.card h3{font-size:1.3rem}
.chip{display:inline-flex;align-items:center;gap:.45em;font-family:var(--font-display);font-weight:600;font-size:.78rem;padding:.4em .75em;border-radius:100px;background:var(--surface-2);color:var(--brand);border:1px solid var(--line)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.route{font-size:.86rem;color:var(--muted);line-height:1.5}
.route b{color:var(--text);font-weight:600}
.price{font-family:var(--font-serif);font-weight:600;font-size:1.7rem;color:var(--text);line-height:1}
.price small{font-family:var(--font-body);font-weight:500;font-size:.8rem;color:var(--muted);display:block;letter-spacing:0}
.card .foot{margin-top:auto;padding-top:6px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.tlink{font-family:var(--font-display);font-weight:700;font-size:.92rem;color:var(--terra);cursor:pointer;display:inline-flex;align-items:center;gap:.4em}
.tlink svg{width:16px;height:16px;transition:transform .18s}
.card:hover .tlink svg{transform:translateX(4px)}

.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,60px);align-items:start}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
.feat{display:flex;gap:14px;align-items:flex-start}
.feat .ic{width:42px;height:42px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--brand) 12%,var(--surface));color:var(--brand)}
.feat .ic svg{width:20px;height:20px}
.feat h4{font-size:1.02rem;margin-bottom:2px}
.feat p{font-size:.9rem;color:var(--muted);line-height:1.5}

.usp{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.usp-item .ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--terra) 16%,var(--surface));color:var(--terra);margin-bottom:14px}
.usp-item .ic svg{width:26px;height:26px}
.usp-item h3{font-size:1.2rem;margin-bottom:8px}
.usp-item p{color:var(--muted);font-size:.96rem}

.band{background:linear-gradient(150deg,var(--field),var(--field-2));color:var(--on-field);position:relative;overflow:hidden}
.band .wrap{position:relative;z-index:2}
.quote{font-family:var(--font-serif);font-weight:600;font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.35;color:#fff;max-width:26ch;margin:0 auto;text-align:center}
.quote-by{text-align:center;margin-top:22px;color:var(--on-field-muted);font-size:.92rem}

.qa{border-bottom:1px solid var(--line)}
.qa button{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:20px 4px;display:flex;align-items:center;justify-content:space-between;gap:18px;color:var(--text);font-family:var(--font-display);font-weight:700;font-size:1.04rem}
.qa .plus{flex:0 0 auto;width:26px;height:26px;position:relative;transition:transform .2s}
.qa .plus::before,.qa .plus::after{content:"";position:absolute;background:var(--terra);border-radius:2px}
.qa .plus::before{top:12px;left:4px;right:4px;height:2px}
.qa .plus::after{left:12px;top:4px;bottom:4px;width:2px;transition:opacity .2s}
.qa.open .plus:not(.is-ready){transform:rotate(45deg)}
.faq-animation,.carousel-animation{display:block;width:22px;height:22px;color:inherit}
.faq-animation svg,.carousel-animation svg{width:100%;height:100%}
.faq-animation.is-ready::before,.faq-animation.is-ready::after{display:none}
/* Hide the static chevron once Lottie mounts, or both SVGs stack in the button. */
.carousel-animation.is-ready .icon-fallback{display:none}
.faq-animation.is-ready path,.carousel-animation.is-ready path{stroke:currentColor!important}
.menu-animation{display:block;width:22px;height:22px;color:inherit}
.menu-animation svg{width:100%;height:100%}
.menu-animation.is-ready .menu-fallback{display:none}
.menu-animation.is-ready path{stroke:currentColor!important}
.qa .ans{max-height:0;overflow:hidden;transition:max-height .35s ease}
.qa .ans .inner{padding:0 4px 20px;color:var(--muted)}
.qa .ans p{margin-bottom:10px}
.qa .ans ul{margin:6px 0 12px;padding-left:20px}
.qa .ans li{margin-bottom:6px}
.callout{border-radius:12px;padding:12px 15px;margin:10px 0;font-size:.92rem;display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.callout svg{width:18px;height:18px;flex:0 0 auto;margin-top:2px}
.callout.tip{background:color-mix(in srgb,var(--terra) 12%,var(--surface));color:var(--text)}
.callout.tip svg{color:var(--terra)}
.callout.warn{background:color-mix(in srgb,var(--accent) 16%,var(--surface));color:var(--text)}
.callout.warn svg{color:var(--accent-2)}

.cta-band{text-align:center}
.cta-band h2{font-size:clamp(1.8rem,3.4vw,2.6rem);max-width:18ch;margin:0 auto .5em}
.cta-band .lead{margin:0 auto 30px;text-align:center}

.foot-main{background:linear-gradient(160deg,var(--field),var(--field-2));color:var(--on-field);position:relative;overflow:hidden;border-top:1px solid rgba(255,255,255,.14);padding-bottom:env(safe-area-inset-bottom,0px)}
.foot-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:36px;padding:clamp(48px,7vw,80px) 0 40px}
.foot-grid h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.14em;color:var(--gold);margin-bottom:16px;font-weight:700}
.foot-grid a,.foot-grid p{color:var(--on-field-muted);font-size:.94rem;padding:5px 0;display:block}
.foot-grid a{cursor:pointer}.foot-grid a:hover{color:#fff}
/* The site logo is a dark-green monochrome icon; the footer is dark green, so render it
   white here (it sits on the dark footer next to the white "Tried Trails" wordmark). */
.foot-brand img{height:64px;width:auto;max-width:100%;object-fit:contain;margin-bottom:14px;filter:brightness(0) invert(1)}
.ggto{display:inline-flex;align-items:center;gap:10px;margin-top:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:10px 14px;font-size:.82rem;color:var(--on-field)}
.ggto b{color:#fff}
/* GGTO shield icon is stroked in --brand (dark green); on the dark footer that's invisible
   in light mode, so light it up there. (The trip-page 'field' variant keeps the dark icon.) */
.foot-main .ggto svg{stroke:var(--on-field)}
/* Footer GGTO badge = official multicolour logo on a white plaque (the logo has black +
   colour elements that vanish on the dark footer). The .foot-brand rule cancels the
   .foot-brand img brightness/invert filter above, which would flatten it to a white blob. */
.ggto--logo{text-decoration:none;display:inline-block;margin-top:14px;line-height:0;background:none;border:0;padding:0}
.ggto--logo:hover{opacity:.85}
.ggto--logo:focus,.ggto--logo:focus-visible{outline:none}
.foot-brand .ggto--logo img{display:block;width:auto;height:40px;margin:0;filter:none}
.foot-bottom{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.14);padding:20px 0;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;color:var(--on-field-muted);font-size:.85rem}
.socials{display:flex;gap:10px}
.socials a{width:34px;height:34px;border-radius:100px;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;color:var(--on-field)}
.socials a:hover{background:rgba(255,255,255,.12);color:#fff}
.socials svg{width:16px;height:16px}
.social-animation{display:block;width:20px;height:20px;color:inherit}
.social-animation svg{width:100%;height:100%}
.social-animation.is-ready .social-fallback{display:none}
.social-animation.is-ready path{stroke:currentColor!important}

.phero{background:var(--surface);border-bottom:1px solid var(--line)}
.phero .wrap{padding:clamp(44px,7vw,74px) 24px clamp(30px,5vw,46px)}
.phero h1{font-size:clamp(2.1rem,4.6vw,3.3rem);margin:.3em 0 .4em}
.crumb{font-size:.85rem;color:var(--muted);display:flex;gap:.5em;align-items:center;flex-wrap:wrap}
.crumb a{cursor:pointer;color:var(--terra)}

.facts-bar{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;box-shadow:var(--shadow-sm)}
.facts-bar div{padding:18px 22px;border-right:1px solid var(--line)}
.facts-bar div:last-child{border-right:0}
.facts-bar .k{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:600}
.facts-bar .v{font-family:var(--font-display);font-weight:700;font-size:1.05rem;margin-top:4px}
.detail-grid{display:grid;grid-template-columns:1fr 340px;gap:44px;align-items:start}
.aside{position:sticky;top:calc(var(--tt-header-offset) + 16px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:16px}
.aside .price{font-size:2.1rem}
.prose h3{font-size:1.4rem;margin:40px 0 14px}
.prose>p{color:var(--muted);margin-bottom:14px}
.route-line{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 4px}
.route-line .stop{background:var(--surface-2);border:1px solid var(--line);border-radius:100px;padding:.4em .85em;font-weight:600;font-size:.85rem;font-family:var(--font-display)}
.route-line .arr{color:var(--terra);opacity:.7}
.incl{display:grid;grid-template-columns:1fr 1fr;gap:14px 34px;margin-top:6px}
.incl ul{margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.incl li{list-style:none;display:flex;gap:10px;align-items:flex-start;font-size:.95rem;color:var(--text)}
.incl .ok{color:var(--brand)}.incl .no{color:var(--terra)}
.incl svg{width:18px;height:18px;flex:0 0 auto;margin-top:3px}
.note{background:color-mix(in srgb,var(--accent) 14%,var(--surface));border:1px dashed color-mix(in srgb,var(--accent) 50%,var(--line));border-radius:var(--r);padding:16px 20px;font-size:.92rem;color:var(--text);display:flex;gap:12px;align-items:flex-start}
.note svg{width:20px;height:20px;color:var(--accent-2);flex:0 0 auto;margin-top:2px}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gallery .ph:first-child{grid-column:span 2;grid-row:span 2}
/* Clickable impression gallery: hover cue + lightbox */
.gallery .glink{cursor:zoom-in;display:grid}
.gallery .glink img{transition:transform .5s var(--tt-ease)}
.gallery .glink:hover img{transform:scale(1.05)}
.gallery .glink::after{content:"";position:absolute;inset:0;z-index:2;background:rgba(23,48,30,.34) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4-4'/%3E%3C/svg%3E") center/32px no-repeat;opacity:0;transition:opacity .3s}
.gallery .glink:hover::after,.gallery .glink:focus-visible::after{opacity:1}
.tt-lightbox{position:fixed;inset:0;z-index:200;background:rgba(14,23,18,.92);display:none;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.tt-lightbox.on{display:flex}
.tt-lightbox img{max-width:min(1100px,94vw);max-height:90vh;border-radius:var(--r);box-shadow:0 30px 80px -20px rgba(0,0,0,.7);cursor:default}
.tt-lb-close{position:absolute;top:16px;right:20px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.35);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.tt-lb-close:hover{background:rgba(0,0,0,.6)}
.tt-lb-close:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.tt-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.35);color:#fff;font-size:2rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.tt-lb-nav:hover{background:rgba(0,0,0,.6)}
.tt-lb-nav:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.tt-lb-prev{left:clamp(8px,3vw,28px)}
.tt-lb-next{right:clamp(8px,3vw,28px)}
.tt-lb-nav[hidden]{display:none}

/* itinerary (compact) */
.itin{margin-top:10px;border-top:1px solid var(--line)}
.itd{display:grid;grid-template-columns:38px 1fr;gap:14px;padding:11px 2px;border-bottom:1px solid var(--line);align-items:start}
.itd .dnum{width:32px;height:32px;border-radius:100px;background:var(--surface-2);color:var(--brand);font-family:var(--font-display);font-weight:700;font-size:.82rem;display:grid;place-items:center}
.itc .ith{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.itc b{font-family:var(--font-display);font-size:1rem;font-weight:700}
.itc .drive{font-size:.78rem;color:var(--muted);font-weight:500}
.itc p{color:var(--muted);font-size:.9rem;margin-top:2px}

/* interactive map */
.trip-map{display:grid;grid-template-columns:1.35fr 1fr;gap:22px;align-items:stretch;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow-sm)}
.map-stage{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:radial-gradient(120% 120% at 30% 8%,color-mix(in srgb,var(--brand) 9%,var(--surface)),var(--surface-2));align-self:start}
.map-stage>svg{width:100%;height:auto;display:block}
/* Scope the generic SVG sizing to a direct-child stand-in only; Leaflet's own nested SVGs
   (route overlay pane + the tiny attribution flag) must keep their native sizing. */
.leaflet-attribution-flag{width:auto!important;height:.6667em!important;display:inline-block!important;vertical-align:middle}
.geo{fill:color-mix(in srgb,var(--brand) 14%,var(--surface));stroke:color-mix(in srgb,var(--brand) 50%,var(--line));stroke-width:1.4;stroke-linejoin:round}
.route-path{fill:none;stroke:var(--terra);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;transition:stroke-dashoffset 1.5s ease}
.mk{cursor:pointer}
.mk circle{fill:var(--surface);stroke:var(--terra);stroke-width:2.4;r:12;transition:r .2s,fill .2s,stroke .2s}
.mk:hover circle{r:14}
.mk .mnum{fill:var(--brand);font-weight:700;font-family:var(--font-display);font-size:14px;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.mk .mlab{fill:var(--text);font-family:var(--font-display);font-weight:600;font-size:15px;text-anchor:middle;paint-order:stroke;stroke:var(--surface);stroke-width:3.5px;stroke-linejoin:round;pointer-events:none}
.mk.sel circle{fill:var(--accent);stroke:var(--brand);r:16}
.mk.sel .mnum{fill:var(--accent-ink)}
.map-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.map-pills button{width:28px;height:28px;border-radius:100px;border:1.5px solid var(--line);background:var(--surface);color:var(--muted);font-family:var(--font-display);font-weight:700;font-size:.82rem;cursor:pointer;transition:all .15s}
.map-pills button:hover{border-color:var(--terra);color:var(--brand)}
.map-pills button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
/* The pills carry place names, not numbers, so they size to their text. */
.map-pills button{width:auto;height:auto;padding:7px 13px;font-size:.84rem;line-height:1.2}
/* Route explorer: the map sits on top (stretched to the column width) with the single
   stop panel below it; the day-by-day list, when on, follows underneath. */
.route-explorer{display:grid;grid-template-columns:1fr;gap:clamp(22px,3vw,40px);align-items:start;margin-top:8px}
.route-map-help{font-size:.8rem;color:var(--muted);margin-top:10px}
.route-days .itd{transition:background .25s ease}
.route-days .itd.active{background:color-mix(in srgb,var(--terra) 8%,transparent)}
.route-days .itd.active .dnum{background:var(--accent);color:var(--accent-ink)}
/* One row per stop: number, name, days and region, then its highlights. The row
   is a button so it is keyboard reachable; map.js binds it to its marker. */
.route-stops{min-width:0;list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.route-map{min-width:0}
.rs{border-bottom:1px solid var(--line)}
.rs:last-child{border-bottom:0}
.rs-btn{width:100%;display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center;background:none;border:0;padding:12px 6px;text-align:left;cursor:pointer;font-family:inherit;color:var(--text)}
.rs-n{width:30px;height:30px;border-radius:100px;background:var(--surface-2);color:var(--brand);display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:.84rem}
.rs-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.rs-t b{font-family:var(--font-display);font-size:1.02rem}
.rs-m{font-size:.78rem;color:var(--muted)}
.rs-hi{list-style:none;margin:0 0 12px 46px;padding:0;display:flex;flex-direction:column;gap:7px}
.rs-hi li{font-size:.9rem;line-height:1.45;display:flex;gap:8px;align-items:flex-start;color:var(--muted)}
.rs-hi svg{width:15px;height:15px;color:var(--terra);flex:0 0 auto;margin-top:3px}
.rs.on{background:color-mix(in srgb,var(--terra) 8%,transparent)}
.rs.on .rs-n{background:var(--accent);color:var(--accent-ink)}
.rs-btn:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
/* With JS the stop panel reveals one stop at a time under the map, as a card; without
   JS every stop stays visible so the route is still readable and crawlable. */
.route-stops.tt-single{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow-sm)}
.route-stops.tt-single .rs{display:none;border-bottom:0}
.route-stops.tt-single .rs.on{display:block;background:transparent}
.route-stops.tt-single .rs-btn{padding:16px 18px;cursor:default}
.route-stops.tt-single .rs-hi{margin:2px 18px 16px 60px}
/* Day-by-day view (opt-in): pin the map on desktop so it stays in sight while the day
   list scrolls beneath it — that scroll is what drives the map from one stop to the next. */
@media (min-width:961px){
	.route-explorer--days .route-map{position:sticky;top:calc(var(--tt-header-offset) + 16px);align-self:start}
}
/* Contact button inside the FAQ photo header. */
.faq-hero-cta{margin-top:18px}
/* Over ons story collage: two to four photos beside the text, square crops. */
.story-collage{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.story-collage img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r)}
.story-collage img:first-child:last-child{aspect-ratio:4/3}
/* Travel period: two month inputs side by side inside one form field. */
.period-range{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.period-range>div{min-width:0}
/* Breathing room under the destination heading (was flush against the lead). */
#why h2{margin-bottom:14px}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:10px}
.value{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.value .ic{width:44px;height:44px;border-radius:12px;background:color-mix(in srgb,var(--brand) 12%,var(--surface));color:var(--brand);display:grid;place-items:center;margin-bottom:14px}
.value .ic svg{width:22px;height:22px}
.value h3{font-size:1.12rem;margin-bottom:6px}
.value p{color:var(--muted);font-size:.95rem}

/* FAQ page */
.faqnav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;position:sticky;top:calc(var(--tt-header-offset) + 8px);z-index:20;padding:14px 0;background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.faqnav a{font-family:var(--font-display);font-weight:600;font-size:.84rem;padding:.5em .9em;border-radius:100px;border:1px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer;transition:all .15s}
.faqnav a:hover,.faqnav a.active{border-color:var(--terra);color:var(--brand)}
.faqcat{margin-top:44px;scroll-margin-top:calc(var(--tt-header-offset) + 96px)}
.faqcat>h3{font-size:1.5rem;display:flex;align-items:center;gap:12px;padding-bottom:10px;border-bottom:2px solid var(--line);margin-bottom:6px}
.faqcat>h3 .em{font-size:1.5rem}
.faqcat>h3 small{font-family:var(--font-body);font-weight:500;font-size:.8rem;color:var(--muted);margin-left:auto}
.faq-search{position:relative;margin:0 0 4px}
.faq-search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--muted);pointer-events:none}
.faq-search input{width:100%;box-sizing:border-box;padding:15px 18px 15px 48px;border:1.5px solid var(--line);border-radius:100px;background:var(--surface);color:var(--text);font-family:var(--font-body);font-size:1rem}
.faq-search input::placeholder{color:var(--muted)}
.faq-search input:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-color:var(--terra)}
.faq-noresults{text-align:center;color:var(--muted);padding:32px 0 8px}
.faq-noresults a{color:var(--brand);font-weight:600}
.qa[hidden],.faqcat[hidden],.faqnav[hidden]{display:none}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}
.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;box-shadow:var(--shadow-sm)}
.field{margin-bottom:18px;position:relative}
.field--sm{max-width:180px}
.field label{display:block;font-family:var(--font-display);font-weight:600;font-size:.88rem;margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;font-family:var(--font-body);font-size:1rem;padding:.8em 2.7em .8em 1em;border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--bg);color:var(--text)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 16%,transparent)}
.field textarea{min-height:120px;resize:vertical}
/* Date field — theme the native control; the popup calendar itself stays browser-native. */
.field input[type=date]{font-family:var(--font-display);font-weight:600;color:var(--text);cursor:pointer}
.field input[type=date]::-webkit-calendar-picker-indicator{width:18px;height:18px;cursor:pointer;opacity:.85;transition:opacity .15s;background:var(--terra);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center/contain no-repeat}
.field input[type=date]:hover::-webkit-calendar-picker-indicator{opacity:1}
/* JS-enhanced themed date picker (Motion-animated). Native input stays hidden but submits. */
.dp{position:relative}
.dp-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0;pointer-events:none;left:0;bottom:0;margin:0;padding:0;border:0}
.dp-trigger{width:100%;display:flex;align-items:center;gap:10px;font-family:var(--font-body);font-size:1rem;padding:.8em 1em;border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--bg);color:var(--text);cursor:pointer;text-align:left;transition:border-color .15s,box-shadow .15s}
.dp-trigger:hover{border-color:var(--terra)}
.dp-trigger:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 16%,transparent)}
.dp-trigger.dp-invalid{border-color:var(--terra);box-shadow:0 0 0 4px color-mix(in srgb,var(--terra) 18%,transparent)}
.dp-ico{width:18px;height:18px;flex:0 0 auto;background:var(--terra);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center/contain no-repeat}
.dp-val{flex:1}
.dp-ph{color:var(--muted)}
.dp-pop{position:absolute;z-index:50;top:calc(100% + 8px);left:0;width:min(320px,92vw);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:14px;transform-origin:top left}
.dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.dp-title{font-family:var(--font-display);font-weight:700;font-size:1rem;text-transform:capitalize}
.dp-nav{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);background:var(--surface);border-radius:100px;color:var(--brand);cursor:pointer;transition:border-color .15s,background .15s}
.dp-nav:hover{border-color:var(--terra);background:var(--surface-2)}
.dp-nav svg{width:16px;height:16px}
.dp-wd{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.dp-wd span{text-align:center;font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:4px 0}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-empty{aspect-ratio:1}
.dp-day{aspect-ratio:1;display:grid;place-items:center;border:0;background:none;border-radius:var(--r-sm);font-family:var(--font-body);font-size:.9rem;color:var(--text);cursor:pointer;transition:background .12s,color .12s}
.dp-day:hover:not([disabled]){background:var(--surface-2)}
.dp-day:focus-visible{outline:none;box-shadow:0 0 0 2px var(--brand)}
.dp-day.is-today{font-weight:700;color:var(--terra)}
.dp-day.is-sel{background:var(--accent);color:var(--accent-ink);font-weight:700}
.dp-day[disabled]{color:color-mix(in srgb,var(--muted) 55%,transparent);cursor:default}
/* Themed month picker (reis-aanvragen): reuses the .dp trigger/popup chrome above,
   with a 12-month grid instead of a day grid. */
.mp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mp-month{padding:11px 0;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);font-family:var(--font-display);font-weight:600;font-size:.9rem;color:var(--text);cursor:pointer;text-transform:capitalize;transition:border-color .12s,background .12s,color .12s}
.mp-month:hover:not([disabled]){border-color:var(--terra);color:var(--brand)}
.mp-month:focus-visible{outline:none;box-shadow:0 0 0 2px var(--brand)}
.mp-month.is-sel{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}
.mp-month[disabled]{color:color-mix(in srgb,var(--muted) 55%,transparent);cursor:default;background:transparent}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.phone-control{display:grid;grid-template-columns:minmax(116px,.8fr) minmax(0,1.2fr);gap:8px}
.phone-control select,.phone-control input{min-width:0;padding-right:1em}
.vh{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.contact-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow-sm)}
.cinfo{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line)}
.cinfo:last-of-type{border-bottom:0}
.cinfo .ic{width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--terra) 16%,var(--surface));color:var(--terra);display:grid;place-items:center;flex:0 0 auto}
.cinfo .v a{color:inherit;text-decoration:none;transition:color .15s}
.cinfo .v a:hover{color:var(--brand);text-decoration:underline}
.cinfo .ic svg{width:18px;height:18px}
.cinfo .k{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.cinfo .v{font-family:var(--font-display);font-weight:700}
.field-check{position:absolute;right:12px;top:49px;width:14px;height:14px;background:transparent;color:var(--brand);display:grid;place-items:center;font-size:.72rem;font-weight:700;opacity:0;pointer-events:none}
.field-check--edge{right:34px}
.field textarea+.field-check{top:49px}
.form-status{min-height:1.5em;margin:10px 0 0;text-align:center;color:var(--terra);font-size:.86rem}
.success{text-align:center;padding:56px 24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.success .big{width:74px;height:74px;border-radius:100px;background:var(--brand);color:#fff;display:grid;place-items:center;margin:0 auto 22px}
.success .big svg{width:36px;height:36px}
.success h1,.success h2{font-size:1.8rem;margin-bottom:12px}
.success p{color:var(--muted);max-width:44ch;margin:0 auto 26px}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* Mobile & tablet layout overrides live in assets/css/mobile.css (loaded only <=960px). */
/* Reduced motion: keep gentle opacity fades, drop movement (zoom/slide/rise/draw). */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{transform:none}.reveal.in{transform:none;transition:opacity .6s ease}.route-path{stroke-dashoffset:0!important;transition:none}.value:hover{transform:none;transition:none}.gallery .glink img,.gallery .glink:hover img{transform:none;transition:none}}

/* ===== WordPress additions ===== */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:12px;top:12px;z-index:200;background:var(--brand);color:#fff;padding:10px 16px;border-radius:10px;width:auto;height:auto;clip:auto}
.brand img{height:40px;width:auto}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph .tag{position:relative;z-index:2}
/* Leaflet map */
#tt-map{width:100%;aspect-ratio:16/11;border-radius:var(--r);z-index:1}
.map-stage{padding:0;background:none;border:0}
.leaflet-container{background:var(--surface-2);font-family:var(--font-body);border-radius:var(--r)}
.leaflet-container a{color:var(--brand)}
.tt-marker{display:grid;place-items:center;width:30px;height:30px;border-radius:100px;background:var(--surface);border:2.5px solid var(--terra);color:var(--brand);font-family:var(--font-display);font-weight:700;font-size:.85rem;box-shadow:0 2px 8px rgba(20,40,30,.3);cursor:pointer;transition:transform .15s}
.tt-marker.sel{background:var(--accent);border-color:var(--brand);color:var(--accent-ink);transform:scale(1.15)}
.leaflet-popup-content-wrapper{border-radius:12px}

/* ===== Micro-interactions ===== */
.hdr{transition:box-shadow .25s ease}
.hdr.scrolled{box-shadow:0 8px 26px -20px rgba(30,54,38,.55)}
.brand{transition:transform .2s ease}
.brand:hover{transform:translateY(-1px)}
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:.8em;right:.8em;bottom:.26em;height:2px;background:var(--terra);border-radius:2px;transform:scaleX(0);transition:transform .25s ease}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}
.drop a::after{display:none}
.drop a{transition:background .15s ease,color .15s ease,transform .15s ease}
.drop a:hover{transform:translateX(3px)}
.icon-btn{transition:transform .2s ease,border-color .2s ease,color .2s ease}
.icon-btn:hover{transform:translateY(-2px)}
#themeBtn svg{transition:transform .3s ease}
#themeBtn:hover svg{transform:rotate(25deg) scale(1.05)}
.btn:active{transform:translateY(0) scale(.97)}
.chip{transition:border-color .2s ease,color .2s ease,background .2s ease}
.card .ph img{transition:transform .6s ease}
.card:hover .ph img{transform:scale(1.06)}
.value{transition:transform .25s ease,box-shadow .25s ease}
.value:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.faqnav a{font-family:var(--font-display);font-weight:600;font-size:.84rem;padding:.5em .9em;border-radius:100px;border:1px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease}
.faqnav a:hover{transform:translateY(-1px);border-color:var(--terra);color:var(--brand)}
.faqnav a.active{background:var(--brand);border-color:var(--brand);color:#fff}
.qa button{transition:color .2s ease}
.qa button:hover{color:var(--brand)}
.cinfo .ic,.feat .ic{transition:transform .25s ease}
.feat:hover .ic,.cinfo:hover .ic{transform:scale(1.08)}
.tlink{transition:gap .2s ease}
.card:hover .tlink{gap:.72em}
@media (prefers-reduced-motion:reduce){.card:hover .ph img{transform:none}}

/* ===== Footer link underline + legal pages ===== */
.foot-grid>div{display:flex;flex-direction:column;align-items:flex-start}
.foot-grid>div>a{display:inline-block;position:relative}
.foot-grid>div>a::after,.foot-bottom a::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:2px;background:var(--terra);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.foot-bottom a{position:relative;display:inline-block}
.foot-grid>div>a:hover::after,.foot-bottom a:hover::after{transform:scaleX(1)}
.foot-grid>div>a:hover,.foot-bottom a:hover{color:#fff}
/* The credit logo sits inline with the name. The global `img{display:block}` turned the
   swapped-in PNG into a block box (the old inline <svg> was fine), which dropped it out of
   line and left it butting against the "M"; restore inline flow, centre it, and space it. */
.powered .mk-bolt{display:inline-block;vertical-align:middle;width:1.15em;height:1.15em;margin-right:6px;color:var(--gold);border-radius:100px;object-fit:contain}
.prose.legal h3{font-size:1.15rem;margin:28px 0 8px}
.prose.legal p{margin-bottom:12px;color:var(--muted)}
.prose.legal ul{margin:6px 0 14px;padding-left:20px;color:var(--muted)}
.prose.legal li{margin-bottom:6px}
.legal-meta{font-size:.85rem;color:var(--muted);font-style:italic}

/* ===== Back-to-top, hero motion, page-in fade, scroll reveal ===== */
.totop{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:80;width:46px;height:46px;border-radius:100px;border:0;background:var(--brand);color:#fff;box-shadow:var(--shadow);cursor:pointer;display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .25s ease,transform .25s ease,background .2s ease}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--brand-2);transform:translateY(-3px)}
.totop svg{width:20px;height:20px}
.hero-slide{transition:opacity 1.4s ease}
.hero-slide.on{animation:tt-kb 6.5s ease-out both}
@keyframes tt-kb{from{transform:scale(1.05)}to{transform:scale(1.17)}}
#main{animation:tt-pagein .5s ease}
@keyframes tt-pagein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes tt-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.hero-slide.on{animation:none}#main{animation:tt-fade .45s ease}}

/* ===== v2: home accordion / onze-reizen region rows / photo page headers ===== */
:root{--tt-ease:cubic-bezier(.7,0,.2,1)}
/* Home — expanding-panels accordion (site palette: forest-green gradient, gold accents, cream/white text) */
.trips{display:flex;gap:0;height:min(80vh,720px);min-height:460px;width:100%;margin-top:40px;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.trip{position:relative;flex:1 1 0%;min-width:0;overflow:hidden;cursor:pointer;transition:flex-grow .85s var(--tt-ease)}
.trip+.trip{box-shadow:-1px 0 0 rgba(23,48,30,.5)}
.trip.open{flex-grow:6}
.trip .bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.trip .bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.06) translateZ(0);transition:transform 1s var(--tt-ease);-webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:transform}
.trip.open .bg img{transform:scale(1) translateZ(0)}
.trip::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(23,48,30,.15),rgba(23,48,30,.05) 42%,rgba(23,48,30,.92))}
/* Title handoff. The vertical label is centred, so it drifts sideways while the card
   grows; to hide that, fade it out fast on open (gone before the drift shows) and only
   fade it back in on close after the card has finished resizing. The horizontal caption
   is left-anchored, so it stays put and just rises in once the label has cleared. */
.trip .rot{position:absolute;z-index:3;left:50%;bottom:30px;transform:translateX(-50%);writing-mode:vertical-rl;rotate:180deg;font-family:var(--font-display);font-weight:700;font-size:clamp(1.05rem,1.4vw,1.5rem);color:#fff;white-space:nowrap;text-shadow:0 2px 22px rgba(0,0,0,.5);transition:opacity .28s var(--tt-ease) .5s}
.trip.open .rot{opacity:0;pointer-events:none;transition:opacity .16s var(--tt-ease)}
.trip .cap{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:clamp(24px,3vw,44px);display:flex;justify-content:space-between;align-items:flex-end;gap:22px;opacity:0;transform:translateY(12px);transition:opacity .24s var(--tt-ease),transform .24s var(--tt-ease);pointer-events:none}
.trip.open .cap{opacity:1;transform:none;transition:opacity .45s var(--tt-ease) .18s,transform .55s var(--tt-ease) .18s}
.trip .cap .no{font-family:var(--font-display);font-weight:700;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.trip .cap h3{color:#fff;font-family:var(--font-display);font-size:clamp(1.6rem,3.2vw,3rem);font-weight:700;line-height:1.02;margin:12px 0 14px}
.trip .cap .meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-family:var(--font-body);font-size:.86rem;color:rgba(243,234,217,.85)}
.trip .cap .meta b{color:#fff;font-weight:600}
.trip .cap .side{text-align:right;flex:none}
.trip .cap .price{font-family:var(--font-display);font-weight:700;font-size:clamp(1.4rem,2.2vw,2.1rem);color:#fff;white-space:nowrap}
.trip .cap .price small{display:block;font-family:var(--font-body);font-weight:400;font-size:.7rem;color:rgba(243,234,217,.65);letter-spacing:.02em;margin-top:2px}
.trip .cap .go{margin:12px 0 0 auto;width:50px;height:50px;flex:none;border:1px solid rgba(255,255,255,.5);border-radius:50%;display:inline-grid;place-items:center;color:#fff;transition:background .35s,border-color .35s}
.trip.open:hover .go{background:var(--accent);border-color:var(--accent)}
.trip .cap .go svg{width:19px;height:19px}
.trip .lnk{position:absolute;inset:0;z-index:4}
/* Onze reizen — big alternating image/text region rows, subtle hover lift */
.region{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:stretch;padding:clamp(40px,7vh,96px) 0;border-bottom:1px solid var(--line)}
.region:first-child{padding-top:clamp(18px,3vh,36px)}
.region:last-child{border-bottom:0}
.region:nth-child(even) .region-media{order:2}
.region-media{display:block;position:relative;min-height:340px;overflow:hidden;border-radius:var(--r-sm);box-shadow:var(--shadow-sm);transition:transform .5s var(--tt-ease),box-shadow .5s var(--tt-ease)}
.region-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.region:hover .region-media{transform:translateY(-8px);box-shadow:var(--shadow)}
.region .eyebrow{color:var(--brand)}
.region .kn{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,5vw,3.6rem);line-height:1.02;margin:.12em 0 .3em}
.region .facts{display:flex;flex-wrap:wrap;gap:16px 36px;margin:22px 0;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.region .facts .k{font-family:var(--font-display);font-weight:600;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.region .facts .v{font-family:var(--font-display);font-weight:700;font-size:1.12rem;margin-top:5px}
.region .incl-note{font-size:.82rem;color:var(--muted);margin-top:2px}
.region .lead{margin-top:14px}
.region .btn{margin-top:24px}
/* Destination grouping (multi-country archive). The wrapper uses display:contents
   so cards keep the exact single-column flow while :nth-child zebra resets per group. */
.region-group{display:contents}
.region-land{font-family:var(--font-display);font-weight:800;font-size:clamp(1.5rem,3vw,2.2rem);color:var(--text);margin-top:clamp(32px,5vh,64px)}
.region-land:first-child{margin-top:0}
.region-land-link{color:inherit;text-decoration:none}
.region-land-link:hover{text-decoration:underline}
/* Photo page headers (FAQ / Over ons / Contact / Onze reizen) */
.phero--photo{position:relative;min-height:min(52vh,440px);display:flex;align-items:flex-end;overflow:hidden;border-bottom:0;color:#fff;background:var(--brand-ink)}
.phero--photo .bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center}
.phero--photo::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(23,48,30,.22),rgba(23,48,30,.42) 45%,rgba(23,48,30,.9))}
.phero--photo .wrap{position:relative;z-index:2;width:100%}
.phero--photo .crumb{color:#f3ead9;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.phero--photo .crumb a{color:var(--gold)}
.phero--photo h1,.phero--photo .lead{text-shadow:0 1px 6px rgba(0,0,0,.4)}
.phero--photo h1{color:#fff}
.phero--photo .lead{color:rgba(255,255,255,.92)}
/* Under reduced-motion keep the functional accordion expand + caption fade; drop only the
   decorative photo parallax and the region hover-lift. */
@media (prefers-reduced-motion:reduce){.trip .bg img{transition:none;transform:none}.region-media{transition:none}}