/* "Running Kilometer" design system.
   Outfit for everything, near-black ink + single track-orange accent.
   Flat by design: no decorative gradients, one accent action per screen. */

:root{
  --ink:#12212E;        /* primary: headlines & core text */
  --sage:#6B7A85;       /* secondary: borders, meta, captions */
  --coral:#1E77B0;      /* tertiary: the single interaction accent */
  --coral-ink:#14567F;  /* readable orange (same hue) for link/body text */
  --coral-dk:#1A699C;   /* button hover */
  --neutral:#F3F1EC;    /* page foundation */
  --surface:#FFFFFF;    /* card / panel surface */
  --white:#FFFFFF;
  --line:#E1DED6;
  --r-sm:8px;
  --r-md:14px;
  --r-lg:24px;
  --maxw:1120px;
}

*{box-sizing:border-box}
/* ---------------------------------------------------------------- font fallback
   Outfit loads with display=swap, so the first paint uses the system sans and
   the page reflows when the webfont lands. Untuned that costs ~0.2 CLS in a
   ~940-1100px band, where the h1 wraps to a different line count. These
   size-adjust fallbacks make the fallback occupy the same width per weight, so
   the wrap count does not change and the swap is invisible. Measured against
   Liberation Sans; regenerate with scripts/measure_font_fallback.py if the
   display family ever changes. */
@font-face{font-family:"Outfit fb";src:local("Arial"),local("Helvetica"),local("Liberation Sans"),local("Arimo"),local("Albany AMT");font-weight:400;size-adjust:98.00%}
@font-face{font-family:"Outfit fb";src:local("Arial"),local("Helvetica"),local("Liberation Sans"),local("Arimo"),local("Albany AMT");font-weight:600;size-adjust:93.93%}
@font-face{font-family:"Outfit fb";src:local("Arial"),local("Helvetica"),local("Liberation Sans"),local("Arimo"),local("Albany AMT");font-weight:700;size-adjust:95.39%}
@font-face{font-family:"Outfit fb";src:local("Arial"),local("Helvetica"),local("Liberation Sans"),local("Arimo"),local("Albany AMT");font-weight:800;size-adjust:97.00%}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:"Outfit","Outfit fb",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:18px;line-height:1.6;color:var(--ink);background:var(--white);
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
img{max-width:100%;height:auto;display:block}
a{color:var(--coral-ink);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,.logo,.display{font-family:"Outfit","Outfit fb",sans-serif;font-weight:700;letter-spacing:-.025em;line-height:1.08}
h1{font-size:2.3rem;margin:.1em 0 .5em;font-weight:800;letter-spacing:-.04em}
h2{font-size:1.7rem;margin:2.2em 0 .6em}
h3{font-size:1.2rem;margin:1.6em 0 .4em}
h4{font-family:"Outfit","Outfit fb",sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sage);margin:0 0 .6em}
p{margin:0 0 1.05em}
@media(max-width:640px){h1{font-size:1.85rem}h2{font-size:1.4rem}}

.label{font-family:"Outfit","Outfit fb",sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--coral-ink);margin:0 0 .5em}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;background:var(--coral);color:#fff;font-family:"Outfit","Outfit fb",sans-serif;font-weight:600;
  font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;
  padding:12px 20px;border-radius:var(--r-md);border:2px solid var(--coral);
  transition:background .15s,border-color .15s;text-align:center;
}
.btn:hover{background:var(--coral-dk);border-color:var(--coral-dk);text-decoration:none;color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:40;background:var(--white);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:18px;height:66px}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:1.1rem;font-weight:700;letter-spacing:-.02em}
.logo:hover{text-decoration:none}
.logo .mark{width:30px;height:30px;flex:0 0 auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:24px}
/* Desktop header: brand left, links centred on the PAGE, BOOK NOW right.
   Centring the links in the space left over beside the logo would put them
   off-centre by half the brand's width, so the wrap becomes a 1fr/auto/1fr grid
   and .nav goes display:contents to promote .nav-links and the pill into the
   middle and right cells. The side columns are then equal by construction and
   the middle one stays centred whatever the brand or the pill label does.
   Scoped to the desktop query: below 861px .nav is the dropdown panel and needs
   to keep its own box. */
@media(min-width:861px){
  .site-head .wrap{display:grid;grid-template-columns:1fr auto 1fr;gap:18px}
  .site-head .nav{display:contents}
  .nav-links{display:flex;align-items:center;gap:24px;justify-self:center}
  .site-head .nav a.btn{justify-self:end}
}
.nav a{color:var(--ink);font-family:"Outfit","Outfit fb",sans-serif;font-weight:600;font-size:.92rem;letter-spacing:.01em}
.nav a:hover{color:var(--coral-ink);text-decoration:none}
.nav a.btn{color:#fff}
.nav a.btn:hover{color:#fff}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;font-size:1.5rem;color:var(--ink);cursor:pointer}
/* Independence ribbon, directly under the header on every page. Deliberately
   not sticky: it should be read on arrival, then get out of the way. */
.head-note{background:var(--ink);color:rgba(255,255,255,.82);border-bottom:3px solid var(--coral)}
.head-note .wrap{padding-top:9px;padding-bottom:9px}
.head-note span{display:block;font-family:"Outfit","Outfit fb",sans-serif;font-size:.78rem;line-height:1.45;letter-spacing:.01em}
.head-note a{color:#fff;text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--coral)}
.head-note a:hover{color:var(--coral)}
/* Price ladder: one row per tier, cheapest first. Bulletless, with an accent
   rule down the left so the tiers read as steps rather than an unordered list. */
.tiers{list-style:none;margin:0 0 1.15em;padding:0}
.tiers li{position:relative;margin:0;padding:13px 0 13px 18px;border-left:3px solid var(--coral)}
.tiers li+li{border-top:1px solid var(--line)}
.tiers strong{display:block;margin-bottom:3px;font-family:"Outfit","Outfit fb",sans-serif;letter-spacing:-.01em}
/* helpers.notice() -- a flagged callout for the things a reader needs before
   they book: reserve rules, age minimums, the days surf shuts the caves. */
.age-note{display:flex;gap:14px;align-items:flex-start;margin:34px 0 0;padding:16px 18px;
  border-top:2px solid var(--line);color:var(--sage);font-size:.83rem;line-height:1.5}
.age-note b{display:inline-block;flex:0 0 auto;background:var(--ink);color:#fff;border-radius:999px;
  padding:3px 11px;font-size:.78rem;letter-spacing:.02em}
.age-note span{display:block}
.age-note a{color:var(--coral-ink)}
@media(max-width:860px){
  .nav-toggle{display:block}
  .nav{display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column;gap:0;
        background:var(--white);border-bottom:1px solid var(--line);padding:8px 22px 16px}
  .nav.open{display:flex}
  /* The links are wrapped in .nav-links so the desktop header can centre them.
     In the dropdown that wrapper must not exist as a box, or the six links stay
     inline inside it instead of stacking as rows of the column flex panel. */
  .nav-links{display:contents}
  .nav a{padding:11px 0;border-bottom:1px solid var(--line);width:100%}
  .nav a.btn{margin-top:10px;text-align:center}
}

/* ---------- breadcrumb ---------- */
.crumb{font-family:"Outfit","Outfit fb",sans-serif;font-weight:600;font-size:.74rem;color:var(--sage);padding:14px 22px 0;text-transform:uppercase;letter-spacing:.05em}
.crumb a{color:var(--sage)}

/* ---------- hero (flat solid overlay, not a gradient) ---------- */
.hero{position:relative;background:var(--ink) center/cover no-repeat;background-image:url('/images/hero-fb.jpg');color:#fff;border-bottom:4px solid var(--coral)}
.hero{background-image:-webkit-image-set(url('/images/hero.webp') type('image/webp'),url('/images/hero-fb.jpg') type('image/jpeg'));background-image:image-set(url('/images/hero.webp') type('image/webp'),url('/images/hero-fb.jpg') type('image/jpeg'))}
.hero::before{content:"";position:absolute;inset:0;background:rgba(21,24,24,.44)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(180deg,rgba(21,24,24,0),rgba(21,24,24,.72))}
.hero .wrap{position:relative;z-index:1;padding:163px 22px 145px;min-height:550px;display:flex;flex-direction:column;justify-content:center}
/* Above the --maxw cap this is exactly the old 52%, so the desktop hero is
   unchanged. Below the cap the column used to shrink with the viewport, and
   around 1000-1100px it got narrow enough that the h1 and the two CTA buttons
   sat on a wrap boundary: they took one more line in the visitor's fallback
   font than in the webfont, so everything below them jumped when the swap
   landed. Measured at 0.19-0.25 CLS on a sibling site, in a band
   nobody screenshots. Holding a 620px floor takes them off that boundary.
   clamp keeps it continuous -- a media query would have snapped the column
   200px wider the moment the window crossed the breakpoint. */
.hero-copy{max-width:clamp(52%,620px,100%)}
.hero .label{color:#FFC9B0;opacity:.98}
.hero h1{font-size:3.2rem;margin:0 0 .35em;color:#fff;font-weight:800;letter-spacing:-.045em}
.hero .lede{font-size:1.18rem;color:#ECEDEA;margin-bottom:1.5em;line-height:1.5}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:1.6em}
.hero .btn-ghost{color:#fff;border-color:#fff}
.hero .btn-ghost:hover{background:#fff;color:var(--ink)}
.hero-trust{font-size:.95rem;color:#D9DBD7;margin:0}
.hero-trust b{color:#fff}
@media(max-width:900px){.hero-copy{max-width:100%}}
@media(max-width:640px){.hero h1{font-size:2.1rem}.hero .wrap{padding:64px 22px 56px;min-height:0}}

/* ---------- tour-data facts strip (under hero) ---------- */
.facts-strip{background:var(--surface);border-bottom:1px solid var(--line)}
.facts-strip .wrap{display:flex;flex-wrap:wrap;padding:0}
.facts-item{flex:1 1 0;min-width:150px;padding:16px 22px;border-right:1px solid var(--line)}
.facts-item:last-child{border-right:0}
.facts-val{font-family:"Outfit","Outfit fb",sans-serif;font-weight:800;font-size:1.18rem;line-height:1.05;color:var(--ink);letter-spacing:-.02em}
.facts-val .star{color:var(--coral)}
.facts-label{font-family:"Outfit","Outfit fb",sans-serif;font-size:.7rem;font-weight:600;color:var(--sage);text-transform:uppercase;letter-spacing:.06em;margin-top:.45em}
@media(max-width:780px){.facts-item{flex:1 1 50%;min-width:0;border-bottom:1px solid var(--line)}.facts-item:nth-child(2n){border-right:0}}
@media(max-width:420px){.facts-item{flex:1 1 100%;border-right:0}}

/* ---------- on-page jump bar (sticky anchor menu, homepage) ---------- */
.section-nav{position:sticky;top:66px;z-index:30;background:var(--ink);border-bottom:1px solid var(--ink)}
.section-nav .wrap{display:flex;gap:0;padding:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.section-nav .wrap::-webkit-scrollbar{display:none}
.section-nav a{flex:0 0 auto;display:inline-block;padding:13px 18px;color:#fff;
  font-family:"Outfit","Outfit fb",sans-serif;font-weight:600;font-size:.82rem;letter-spacing:.02em;white-space:nowrap;border-right:1px solid rgba(255,255,255,.12)}
.section-nav a:hover{background:var(--coral);color:#fff;text-decoration:none}
@media(max-width:780px){.section-nav{top:0}.section-nav a{padding:12px 15px;font-size:.8rem}}

/* ---------- explore link cluster (keyword interlinks, above footer) ---------- */
.explore{margin:2.4em 0 0;padding:26px 0 0;border-top:2px solid var(--ink)}
.explore h2{margin:0 0 .7em}
.explore-links{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 26px}
.explore-links a{display:block;font-family:"Outfit","Outfit fb",sans-serif;font-size:.92rem;font-weight:500;
  color:var(--ink);padding:6px 0 6px 16px;border-left:3px solid var(--coral);line-height:1.35}
.explore-links a:hover{color:var(--coral-ink);border-left-color:var(--coral-ink)}
@media(max-width:780px){.explore-links{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.explore-links{grid-template-columns:1fr}}

/* ---------- main / prose ---------- */
.section-pad{padding-top:40px;padding-bottom:64px}
.prose{max-width:760px;margin:0 auto}
.prose.wide{max-width:960px}
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.2em}
.prose li{margin:.32em 0}
ul.check{list-style:none;padding-left:0}
ul.check li{position:relative;padding-left:1.7em;margin:.5em 0}
ul.check li::before{content:"\2192";position:absolute;left:0;top:0;color:var(--coral-ink);font-weight:700}

/* page-hero banner inside articles */
.page-hero{margin:0 0 1.6em;border-radius:var(--r-lg);overflow:hidden}
.page-hero img{width:100%;max-height:380px;object-fit:cover}

/* ---------- answer box ---------- */
.answer-box{background:var(--neutral);border-left:5px solid var(--coral);padding:20px 24px;margin:0 0 1.8em;border-radius:0 var(--r-md) var(--r-md) 0}
.answer-box p{margin:0}
.answer-box strong{color:var(--ink)}
.answer-box a{text-decoration:underline;text-underline-offset:2px}

/* ---------- key takeaways (homecontent.TAKEAWAYS) ---------- */
.ia-takeaways{background:var(--ink);border-radius:16px;padding:26px 30px;margin:34px 0;color:rgba(255,255,255,.92)}
.ia-takeaways h2{color:#fff;margin:0 0 14px;font-size:1.25rem}
.ia-takeaways ul{list-style:none;margin:0;padding:0}
.ia-takeaways li{position:relative;padding:7px 0 7px 30px;line-height:1.55;border-bottom:1px solid rgba(255,255,255,.14)}
.ia-takeaways li:last-child{border-bottom:0}
.ia-takeaways li::before{content:"\2713";position:absolute;left:2px;top:7px;color:var(--accent,var(--coral));font-weight:700}
.ia-takeaways b,.ia-takeaways strong{color:#fff}
.ia-takeaways a{color:var(--accent,var(--coral));filter:brightness(1.35);text-decoration-color:rgba(255,255,255,.35)}
.ia-takeaways a:hover{color:#fff;filter:none}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:.96rem}
th,td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--ink);color:#fff;font-family:"Outfit","Outfit fb",sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}

/* ---------- tip / keyfacts / proscons ---------- */
.tip{background:var(--neutral);border:2px solid var(--coral);border-radius:var(--r-md);padding:16px 20px;margin:1.5em 0}
.tip-label{display:inline-block;font-family:"Outfit","Outfit fb",sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--coral-ink);margin-bottom:.3em}
.tip p{margin:0}

.keyfacts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin:1.6em 0}
.keyfacts div{background:var(--surface);padding:14px 16px}
.kf-label{display:block;font-family:"Outfit","Outfit fb",sans-serif;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);font-weight:600;margin-bottom:3px}
.keyfacts b{font-size:1.02rem}
@media(max-width:640px){.keyfacts{grid-template-columns:repeat(2,1fr)}}

.proscons{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:1.6em 0}
.pc{border:2px solid var(--line);border-radius:var(--r-md);padding:18px 20px;background:var(--surface)}
.pc ul{list-style:none;margin:0;padding:0}
.pc li{position:relative;padding-left:1.6em;margin:.5em 0}
.pros{border-color:var(--coral)}
.pros li::before{content:"\2713";position:absolute;left:0;color:var(--coral-ink);font-weight:700}
.cons li::before{content:"!";position:absolute;left:.25em;color:var(--sage);font-weight:700}
@media(max-width:640px){.proscons{grid-template-columns:1fr}}

.inclist{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:1.6em 0}
.inclist>div{border:2px solid var(--line);border-radius:var(--r-md);padding:18px 20px;background:var(--surface)}
.inclist h4{margin:0 0 .5em;font-family:"Outfit","Outfit fb",sans-serif;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.inclist ul{list-style:none;margin:0;padding:0}
.inclist li{position:relative;padding-left:1.6em;margin:.5em 0}
.inclist .inc{border-color:var(--coral)}
.inclist .inc h4{color:var(--coral-ink)}
.inclist .inc li::before{content:"\2713";position:absolute;left:0;color:var(--coral-ink);font-weight:700}
.inclist .exc h4{color:var(--sage)}
.inclist .exc li::before{content:"\00d7";position:absolute;left:.15em;color:var(--sage);font-weight:700}
@media(max-width:640px){.inclist{grid-template-columns:1fr}}

/* ---------- scorecard (review pages) ---------- */
.scorecard{display:grid;grid-template-columns:200px 1fr;gap:0;border:2px solid var(--ink);border-radius:var(--r-md);overflow:hidden;margin:0 0 1.8em}
.sc-score{background:var(--ink);color:#fff;padding:22px;display:flex;flex-direction:column;justify-content:center;text-align:center}
.sc-big{font-family:"Outfit","Outfit fb",sans-serif;font-weight:800;font-size:3rem;line-height:1;letter-spacing:-.03em}
.sc-stars{color:var(--coral);letter-spacing:2px;margin:.2em 0}
.sc-rev{font-size:.8rem;color:#D9DBD7}
.sc-price{margin-top:.5em;font-weight:700;color:#fff}
.sc-specs{padding:8px 22px;background:var(--surface)}
.sc-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.sc-row:last-child{border-bottom:0}
.sc-row span{color:var(--sage)}
.sc-row b{text-align:right}
@media(max-width:560px){.scorecard{grid-template-columns:1fr}}

/* ---------- review hub cards ---------- */
.rev-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:1.5em 0 .4em}
@media(max-width:600px){.rev-grid{grid-template-columns:1fr}}
.rev-card{display:flex;flex-direction:column;border:2px solid var(--line);border-radius:var(--r-lg);padding:0;overflow:hidden;background:var(--surface);color:var(--ink);transition:border-color .15s}
.rev-card:hover{border-color:var(--coral);text-decoration:none}
.rev-thumb{margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--ink)}
.rev-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.rev-card:hover .rev-thumb img{transform:scale(1.04)}
.rev-body{display:flex;flex-direction:column;flex:1;padding:16px 20px 18px}
.rev-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:.6em}
.rev-score{font-family:"Outfit","Outfit fb",sans-serif;font-weight:800;font-size:1.3rem;line-height:1;color:var(--ink)}
.rev-stars{color:var(--coral);letter-spacing:1px;font-size:.9rem}
.rev-count{font-family:"Outfit","Outfit fb",sans-serif;font-weight:500;font-size:.72rem;color:var(--sage)}
.rev-card h3{font-weight:700;font-size:1.05rem;line-height:1.3;margin:0 0 .4em}
.rev-card p{font-size:.92rem;color:var(--sage);margin:0 0 1em}
.rev-price{font-weight:700;font-size:.9rem;margin-top:auto}
.rev-more{display:block;color:var(--coral-ink);font-family:"Outfit","Outfit fb",sans-serif;font-weight:600;font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;margin-top:.5em}

/* ---------- tour cards ---------- */
.tours-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:20px;margin:1.5em 0 .4em}
.tours-grid.cols-4{grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:860px){.tours-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1024px){.tours-grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tours-grid,.tours-grid.cols-4{grid-template-columns:1fr}}
.tour{border:2px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);display:flex;flex-direction:column;transition:border-color .15s}
.tour:hover{border-color:var(--coral)}
/* whole card is an <a> (see helpers._card) — kill link styling, keep hover feedback */
a.tour{color:inherit;text-decoration:none}
a.tour:hover .btn{filter:brightness(1.08)}
.thumb{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--neutral)}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.badge{position:absolute;top:10px;left:10px;background:var(--coral);color:#fff;font-family:"Outfit","Outfit fb",sans-serif;font-weight:600;font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;border-radius:var(--r-sm)}
.tour-body{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1}
.tour-body h3{font-size:1.02rem;margin:0 0 .45em;line-height:1.25;font-weight:700}
.rate{font-size:.85rem;color:var(--sage);margin-bottom:.5em}
.star{color:var(--coral)}
.price{font-weight:700;margin-bottom:.8em}
.price span{font-weight:400;color:var(--sage);font-size:.85rem}
.tour-body .btn{margin-top:auto}
/* decorative desert filler tile (rounds out incomplete card rows on desktop) */
.tour-filler{position:relative;border:2px dashed #e0c4ad;background:var(--neutral);align-items:center;justify-content:center;min-height:180px}
.tour-filler:hover{border-color:#e0c4ad}
.tour-filler .filler-art{position:absolute;inset:0;width:100%;height:100%;opacity:.6}
.tour-filler .filler-label{position:relative;font-family:"Outfit","Outfit fb",sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.64rem;color:var(--sage);background:rgba(244,245,242,.78);padding:5px 11px;border-radius:var(--r-sm)}
@media(max-width:860px){.tour-filler{display:none}}

/* ---------- book-card (docked chip availability) ---------- */
.book-card{position:relative;border:2px solid var(--ink);border-radius:var(--r-md);padding:26px 18px 14px;margin:1.6em 0;background:var(--surface)}
.book-chip{position:absolute;top:-13px;left:18px;background:var(--coral);color:#fff;font-family:"Outfit","Outfit fb",sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:var(--r-sm)}
.gyg-frame{min-height:220px}

/* ---------- comparison table ---------- */
.cmp-wrap{overflow-x:auto;margin:1.8em 0}
/* Break the comparison table out of the 760px prose column so it has more room
   to breathe. Prose has ~158px of slack each side inside .wrap, so -110px is safe. */
@media(min-width:1080px){.cmp-wrap{margin-left:-110px;margin-right:-110px}}
table.cmp{border-collapse:separate;border-spacing:0;min-width:640px;width:100%;font-size:1.02rem}
table.cmp th,table.cmp td{border:0;border-bottom:1px solid var(--line);padding:16px 20px;background:var(--surface)}
table.cmp thead th{background:var(--neutral);color:var(--ink);vertical-align:bottom;text-transform:none;letter-spacing:-.01em;font-family:"Outfit","Outfit fb",sans-serif;font-weight:700}
table.cmp .rowlabel{font-family:"Outfit","Outfit fb",sans-serif;font-weight:600;color:var(--sage);font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}
table.cmp .feat{background:var(--neutral);border-left:2px solid var(--coral);border-right:2px solid var(--coral)}
table.cmp thead .feat{border-top:2px solid var(--coral)}
table.cmp tr.cmp-book .feat{border-bottom:2px solid var(--coral)}
.cmp-badge{display:inline-block;background:var(--coral);color:#fff;font-family:"Outfit","Outfit fb",sans-serif;font-weight:600;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:var(--r-sm);margin-bottom:6px}
.feat-title{display:block;font-family:"Outfit","Outfit fb",sans-serif;font-weight:800;font-size:1.12rem;letter-spacing:-.02em}
.col-alt{color:var(--ink)}
table.cmp .btn{width:100%;padding:11px 10px;font-size:.76rem}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:1.8em 0}
.gallery figure{margin:0;position:relative;border-radius:var(--r-md);overflow:hidden}
.gallery img{width:100%;aspect-ratio:3/4;object-fit:cover}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;background:rgba(21,24,24,.82);color:#fff;font-family:"Outfit","Outfit fb",sans-serif;font-weight:600;font-size:.72rem;padding:14px 12px 9px;text-transform:uppercase;letter-spacing:.04em}
@media(max-width:760px){.gallery{grid-template-columns:repeat(2,1fr)}}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:1.5em 0;counter-reset:s}
.step{border-top:3px solid var(--coral);padding:14px 4px 0;counter-increment:s}
.step::before{content:counter(s);font-family:"Outfit","Outfit fb",sans-serif;font-weight:800;font-size:1.5rem;color:var(--coral-ink);display:block;margin-bottom:.1em}
.step h3{margin:0 0 .25em;font-size:1.05rem}
.step p{font-size:.9rem;color:var(--sage);margin:0}
@media(max-width:760px){.steps{grid-template-columns:repeat(2,1fr)}}

/* ---------- reviews band ---------- */
.reviews-band{background:var(--neutral);border-radius:var(--r-lg);padding:24px;margin:1.8em 0}
.reviews-head{display:flex;align-items:center;gap:18px}
.reviews-head .big{font-family:"Outfit","Outfit fb",sans-serif;font-weight:800;font-size:3rem;color:var(--ink);line-height:1;letter-spacing:-.03em}
.reviews-head .stars{color:var(--coral);font-size:1.1rem;letter-spacing:2px}

/* ---------- honest guide ---------- */
.honest-guide{background:var(--neutral);border-radius:var(--r-lg);padding:32px 30px;margin:2.4em 0}
/* Guide panel carrying a sticky booking column (build_home adds --wide when
   homecontent.GUIDE_BOOK is set). A 70/30 split of the 760px prose column
   leaves the card at 196px, which wraps the CTA onto three lines, so the panel
   steps out to 1060px. Uses the self-limiting left:50%/94vw breakout rather
   than negative margins so it can never overflow at an in-between width.
   1128px is where 94vw finally reaches the full 1060px and the card its full
   280px; below that the breakout would hand back a card too narrow to hold a
   one-line CTA, so the panel stays at prose width and the grid stays stacked. */
@media(min-width:1128px){
  .honest-guide--wide{position:relative;left:50%;transform:translateX(-50%);
    width:min(1060px,94vw);padding:36px 40px}
}
/* The two breakpoints must match, and both have had to move once. First from
   900 to 1000: .iguide-grid collapses at 900 on its own, so a sweep found a
   901-999 band where the panel was still 760px wide but already two columns,
   card at 196px, CTA on three lines. Then from 1000 to 1128, for the same
   reason a step further out: between 1000 and 1127 the panel is capped by 94vw
   rather than by 1060px, which squeezes the card to 244-250px. English survives
   that; "Verifica la disponibilita", "Verfuegbarkeit pruefen" and "Verifier les
   disponibilites" do not, and wrapped onto two lines in the IT/DE/FR sweep.
   The rule is not "collapse when the viewport is small" but "hold the single
   column until the panel is actually wide enough for the card in it". */
@media(max-width:1127px){
  .honest-guide--wide .iguide-grid{grid-template-columns:1fr;gap:30px}
  .honest-guide--wide .iguide-side{position:static}
}
.honest-guide h2{margin-top:0}
.honest-guide .lead{font-size:1.1rem;color:var(--ink)}
.honest-guide h3{margin-top:1.5em}
.guide-fig{margin:1.5em 0}
.guide-fig img{width:100%;max-height:340px;object-fit:cover;border-radius:var(--r-md)}
.guide-fig figcaption{font-size:.84rem;color:var(--sage);margin-top:.5em;font-style:italic}

/* ---------- FAQ ---------- */
.faq{margin:1em 0}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;font-weight:600;padding:14px 30px 14px 0;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;color:var(--coral-ink);font-weight:700;font-size:1.3rem}
.faq details[open] summary::after{content:"\2212"}
.faq-body{padding:0 0 12px}
.faq-body p{margin:0}
.faq-contact{margin:1.1em 0 .2em;font-weight:600;color:var(--ink)}
.faq-contact a{color:var(--coral-ink)}

/* ---------- disclosure ---------- */
.disclosure{font-size:.84rem;color:var(--sage);background:var(--neutral);border-radius:var(--r-md);padding:13px 16px;margin:1em 0 1.6em}
.disclosure a{color:var(--coral-ink)}

/* related strip */
.related{border-top:2px solid var(--ink);margin-top:2.4em;padding-top:1.2em}

/* sitemap */
.sitemap-list{list-style:none;padding-left:0}
.sitemap-list li{margin:.4em 0;padding-left:1.2em;position:relative}
.sitemap-list li::before{content:"\2192";position:absolute;left:0;color:var(--coral-ink)}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:#C9CCC7;margin-top:40px;border-top:4px solid var(--coral)}
.site-foot .wrap{padding:48px 22px 30px}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.4fr;gap:32px}
.site-foot .brand .logo{color:#fff;margin-bottom:.6em}
.site-foot .brand p{font-size:.9rem;max-width:34em}
.site-foot h4{color:#fff;margin-bottom:.8em}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin:.4em 0}
.site-foot a{color:#C9CCC7;font-size:.92rem}
.site-foot a:hover{color:#fff}
.foot-guides{margin-top:30px;border-top:1px solid #2c2f2f;padding-top:20px}
.foot-guides ul{display:flex;flex-wrap:wrap;gap:8px 26px}
.foot-answers{margin-top:26px;border-top:1px solid #2c2f2f;padding-top:20px;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px}
.foot-answers .label{font-family:"Outfit","Outfit fb",sans-serif;font-weight:600;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#8d918c}
.foot-answers nav{display:flex;flex-wrap:wrap;gap:8px 18px}
.foot-answers a{color:#C9CCC7;font-size:.86rem}
.foot-answers a:hover{color:#fff}
.foot-facts{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:22px;border-top:1px solid #2c2f2f;padding-top:22px}
.foot-facts .kf-label,.foot-facts .label{display:block;font-family:"Outfit","Outfit fb",sans-serif;font-weight:600;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#8d918c;margin-bottom:3px}
.foot-facts b{color:#fff;font-size:.92rem}
/* address + transport, grouped with the key-facts strip above it — no top
   border, so the two read as one "where is it" block rather than two bands. */
.foot-find{margin-top:16px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px}
.foot-find .label{font-family:"Outfit","Outfit fb",sans-serif;font-weight:600;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#8d918c}
.foot-find nav{display:flex;flex-wrap:wrap;gap:8px 18px}
.foot-find a{color:#C9CCC7;font-size:.86rem}
.foot-find a:hover{color:#fff}
.foot-searches{margin-top:22px;border-top:1px solid #2c2f2f;padding-top:20px}
.foot-searches h4{font-family:"Outfit","Outfit fb",sans-serif;font-weight:600;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#8d918c;margin:0 0 12px}
.foot-searches ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.foot-searches li{margin:0}
.foot-searches a{display:inline-block;padding:5px 11px;border:1px solid #2c2f2f;border-radius:999px;font-size:.78rem;color:#9fa39d;line-height:1.3;transition:color .15s,border-color .15s,background .15s}
.foot-searches a:hover{color:#fff;border-color:var(--coral);background:rgba(255,255,255,.05)}
.foot-bottom{margin-top:28px;border-top:1px solid #2c2f2f;padding-top:18px;font-family:"Outfit","Outfit fb",sans-serif;font-size:.74rem;color:#8d918c}
.foot-bottom a{color:#C9CCC7}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr}.foot-facts{grid-template-columns:repeat(2,1fr)}}

/* ---------- homepage: "what's included" two-column ---------- */
.includes{margin:2.2em 0;background:var(--surface);border:2px solid var(--line);border-radius:var(--r-lg);padding:26px 26px 22px}
.includes h2{margin:0 0 .25em}
.includes-lead{color:var(--sage);margin:0 0 1.2em;font-size:1rem}
.includes-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.includes-col h3{font-family:"Outfit","Outfit fb",sans-serif;font-weight:700;font-size:1.12rem;color:var(--ink);margin:0 0 .55em;padding-bottom:.4em;border-bottom:2px solid var(--coral);display:inline-block}
.includes-col ul.check{margin:0}
.includes-col .muted{color:var(--sage);font-style:italic}
/* Fills the hole left by an odd number of text columns in the 2-up grid.
   align-self:stretch + a min-height keeps the photo the same height as the
   list beside it instead of collapsing to its intrinsic ratio. */
.includes-fig{margin:0;align-self:stretch;min-height:200px;border-radius:var(--r-md);overflow:hidden}
.includes-fig img{width:100%;height:100%;min-height:200px;object-fit:cover;display:block}
@media(max-width:680px){.includes{padding:20px}.includes-grid{grid-template-columns:1fr;gap:18px}
  .includes-fig{min-height:0}.includes-fig img{min-height:0;aspect-ratio:16/10;height:auto}}

/* ---------- homepage: route / "what you see, in order" (AEO) ---------- */
.route{margin:2.4em 0}
.route h2{margin:0 0 .25em}
.route-lead{color:var(--sage);margin:0 0 1.1em;font-size:1rem}
.route-stops{list-style:none;margin:1.4em 0;padding:0;counter-reset:stop}
.route-stops li{counter-increment:stop;position:relative;padding:0 0 1.1em 3.2em;margin:0}
.route-stops li:before{content:counter(stop);position:absolute;left:0;top:0;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;background:var(--coral);color:#fff;font-family:"Outfit","Outfit fb",sans-serif;font-size:.85rem;font-weight:600;border-radius:var(--r-sm)}
.route-stops li:not(:last-child):after{content:"";position:absolute;left:.95rem;top:2rem;bottom:.2em;width:2px;background:var(--line)}
.route-stops li strong{color:var(--ink)}

/* ---------- homepage: wide photo gallery (breaks out of prose) ---------- */
.photo-wide{position:relative;left:50%;transform:translateX(-50%);width:min(1180px,94vw);margin:2.6em 0}
.photo-wide-head{text-align:center;max-width:44em;margin:0 auto 1.2em}
.photo-wide-head h2{margin:.15em 0 .3em}
.photo-wide-sub{color:var(--sage);margin:0}
.photo-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.photo-strip .shot{margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--neutral)}
.photo-strip .shot img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .4s ease}
.photo-strip .shot:hover img{transform:scale(1.06)}
@media(max-width:760px){.photo-strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.photo-strip{grid-template-columns:1fr}}

/* ---------- homepage: guest testimonials (breaks out of prose) ---------- */
.testimonials{position:relative;left:50%;transform:translateX(-50%);width:min(1180px,94vw);margin:2.8em 0 2.2em}
.testimonials h2{text-align:center;margin:0 0 .25em}
.t-lead{text-align:center;color:var(--sage);margin:0 0 1.4em}
.t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.t-card{margin:0;background:var(--white);border:2px solid var(--line);border-radius:var(--r-lg);padding:20px 20px 16px;display:flex;flex-direction:column}
.t-stars{color:var(--coral);letter-spacing:2px;font-size:.92rem;margin-bottom:.5em}
.t-card blockquote{margin:0 0 1em;font-size:.96rem;line-height:1.55;color:var(--ink)}
.t-card figcaption{margin-top:auto;border-top:1px solid var(--line);padding-top:.7em}
.t-name{display:block;font-family:"Outfit","Outfit fb",sans-serif;font-weight:700;font-size:.86rem;color:var(--ink)}
.t-tour{display:block;font-family:"Outfit","Outfit fb",sans-serif;font-size:.74rem;color:var(--sage);margin-top:2px}
.t-foot{text-align:center;color:var(--sage);font-size:.9rem;margin:1.4em 0 0}
@media(max-width:860px){.t-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.t-grid{grid-template-columns:1fr}}
/* ===== CTR features (opt-in; render only when the site defines them) =====
   _ladder / _town_chips / _book_bar in build_home.py + fee/perday in helpers.
   Recolor per site theme. */
/* entry-fee badge on card thumbs (tour dict: "fee_inc" / "fee_badge") */
.fee-badge{position:absolute;left:10px;bottom:10px;background:#2E5D3A;color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:.02em;padding:4px 9px;border-radius:4px}
/* price-per-day subtext (tour dict: "perday") */
.perday{font-size:.8rem;color:var(--sage);margin:-4px 0 10px}
/* duration/decision ladder band (homecontent: LADDER) */
.ladder-band{background:var(--ink);color:var(--neutral);padding:34px 0 40px}
.ladder-band h2{color:var(--neutral);font-size:1.45rem;margin:0 0 18px}
.ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ladder-col{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);
  border-radius:10px;padding:20px 18px;display:flex;flex-direction:column}
.ladder-col.feat{background:var(--surface);color:var(--ink);border-color:var(--surface)}
.ladder-col.feat p{color:var(--ink)}
.ladder-days{font-weight:700;font-size:1.05rem;letter-spacing:.03em;text-transform:uppercase}
.ladder-price{color:var(--coral);font-weight:700;font-size:1.3rem;margin:4px 0 8px}
.ladder-col.feat .ladder-price{color:var(--coral-ink)}
.ladder-col p{font-size:.9rem;line-height:1.5;margin:0 0 16px;color:rgba(255,255,255,.85);flex:1}
.ladder-col .btn{align-self:flex-start}
.ladder-col .btn.ghost{background:transparent;border:1.5px solid rgba(255,255,255,.5);color:var(--neutral)}
.ladder-col .btn.ghost:hover{border-color:var(--coral);color:var(--coral)}
@media(max-width:760px){.ladder{grid-template-columns:1fr}}
/* departure-town chips (auto when 2+ tours carry "town") */
.town-chips{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:6px 0 18px}
.chips-label{font-size:.85rem;color:var(--sage);font-weight:600}
.town-chips .chip{background:var(--neutral);border:1px solid var(--line);border-radius:999px;
  padding:6px 14px;font:inherit;font-size:.85rem;cursor:pointer;color:var(--ink)}
.town-chips .chip.on{background:var(--ink);color:var(--neutral);border-color:var(--ink)}
.town-chips .chip:hover{border-color:var(--coral)}
/* sticky mobile book-bar (homecontent: BOOK_BAR / siteconfig: PAGE_BOOK_BAR).
   Price-anchored (.bb-copy/.bb-price/.bb-txt) and revealed by BAR_JS only
   after 420px of scroll (.bb-wait hides it until then). */
.book-bar{display:none}
@media(max-width:760px){
  .book-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--ink);color:var(--neutral);align-items:center;justify-content:space-between;
    gap:10px;padding:10px 14px;box-shadow:0 -3px 12px rgba(0,0,0,.25);
    transition:transform .25s ease,opacity .25s ease}
  .book-bar.bb-wait{transform:translateY(110%);opacity:0}
  .book-bar span{font-size:.85rem;font-weight:600}
  .book-bar .btn{padding:9px 16px;font-size:.85rem}
  body{padding-bottom:58px}
}
.book-bar .bb-price{font-size:1.05rem;font-weight:800;letter-spacing:.01em}
.book-bar .bb-txt{font-size:.72rem;font-weight:500;opacity:.85;display:block}
.book-bar .bb-copy{display:flex;flex-direction:column;line-height:1.25;min-width:0}
/* info-page conversion layer (build_site._cta_layer + helpers.availability) */
.cta-early{background:var(--neutral);border:2px solid var(--coral);border-radius:var(--r-md);
  padding:16px 20px;margin:1.6em 0;display:flex;flex-wrap:wrap;align-items:center;
  gap:12px 18px;justify-content:space-between}
.cta-early p{margin:0;flex:1 1 300px}
.cta-early .cta-label{display:block;font-weight:600;font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--coral);margin-bottom:.25em}
.cta-early .btn{white-space:nowrap;flex:0 0 auto}
.book-card{scroll-margin-top:84px}

/* ==================================================================== */
/* Engagement layer (2026-08-23)                                        */

/* live opening-status strip (homecontent: LIVE_STRIP) — hidden until its
   inline script computes today's status and sets display:block */
.live-strip{display:none;background:var(--neutral);border-bottom:1px solid rgba(0,0,0,.08)}
.live-strip .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;padding:9px 20px;font-size:.85rem}
.ls-dot{width:9px;height:9px;border-radius:50%;flex:none;background:#8a8a8a}
.live-strip.is-open .ls-dot{background:#2e9e44;box-shadow:0 0 0 3px rgba(46,158,68,.18);animation:lspulse 2s infinite}
.live-strip.is-closed .ls-dot{background:#c0392b}
@keyframes lspulse{50%{box-shadow:0 0 0 6px rgba(46,158,68,.06)}}
.ls-status{font-weight:700}
.ls-hours,.ls-crowd{color:rgba(0,0,0,.6)}
.ls-left,.ls-right{display:flex;align-items:center;gap:8px}
.ls-right{margin-left:auto}
@media(max-width:600px){.ls-right{margin-left:17px}}

/* itinerary time badges (ROUTE stops as 3-tuples) */
.stop-time{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;
  background:rgba(0,0,0,.07);font-size:.72rem;font-weight:700;letter-spacing:.02em;
  vertical-align:2px;white-space:nowrap}

/* pull-quote (helpers.pullquote) */
.pullquote{margin:38px auto;padding:0 8px;max-width:560px;text-align:center;border:0}
.pullquote p{font-family:inherit;font-size:1.45rem;line-height:1.35;font-weight:700;
  font-style:italic;color:var(--ink);margin:0}
.pullquote::before{content:"\201D";display:block;font-size:3rem;line-height:.6;color:var(--coral);margin-bottom:10px}

/* "good to know" glance grid (homecontent: GLANCE — replaces ia-takeaways) */
.glance{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:34px 0}
.prose>.glance:first-child{margin-top:0}
@media(max-width:640px){.glance{grid-template-columns:1fr}}
.glance-item{display:flex;gap:13px;align-items:flex-start;background:var(--neutral);
  border:1px solid rgba(0,0,0,.06);border-radius:14px;padding:15px 17px;
  text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease}
.glance-item:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.09)}
.g-ico{flex:none;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--coral);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.g-txt{font-size:.86rem;line-height:1.45;color:rgba(0,0,0,.65)}
.g-txt b{display:block;color:var(--ink);font-size:.95rem;margin-bottom:2px}

/* ==================================================================== */
/* Conversion + EEAT layer                                              */

/* cancel-note under availability widgets (conversion layer) */
.cancel-note{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:.82rem;color:var(--sage)}

/* anchored-price band (opt-in via homecontent PRICE_ANCHOR) */
.price-anchor{margin:34px 0;padding:26px 26px 28px;background:var(--surface);
  border:1px solid var(--line);border-radius:14px}
.price-anchor h2{margin:0 0 18px;font-size:1.25rem}
.pa-row{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch}
.pa-col{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:10px}
.pa-was{background:var(--neutral);border:1px dashed var(--line)}
.pa-now{background:var(--ink);color:#fff;border:1px solid var(--ink)}
.pa-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;opacity:.75;font-weight:700}
.pa-price{font-size:2rem;font-weight:800;line-height:1.1}
.pa-was .pa-price{color:var(--sage)}
.pa-now .pa-price{color:#fff}
.pa-note{font-size:.85rem;line-height:1.45;opacity:.85}
.pa-vs{align-self:center;font-weight:800;color:var(--sage);font-size:.9rem;
  text-transform:uppercase;letter-spacing:.08em}
.pa-now .btn{margin-top:12px;align-self:flex-start;background:var(--accent);border-color:var(--accent)}
@media(max-width:720px){.pa-row{grid-template-columns:1fr}.pa-vs{justify-self:center;padding:2px 0}}

/* real-photo trust strip (opt-in via homecontent REAL_STRIP; Wikimedia Commons, credited) */
.real-strip{margin:38px 0}
.real-strip>h2{text-align:center}
.real-strip>p{color:var(--sage);margin-top:4px;text-align:center;max-width:820px;margin-left:auto;margin-right:auto}
.real-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.real-grid figure{margin:0}
.real-grid img{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;border-radius:10px;display:block}
.real-grid figcaption{font-size:.76rem;color:var(--sage);margin-top:6px;line-height:1.4}
.real-grid figcaption a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media(max-width:720px){.real-grid{grid-template-columns:1fr}}
/* breakout: same width as the testimonials band */
.real-strip.breakout{position:relative;left:50%;transform:translateX(-50%);width:min(1180px,94vw)}
.real-zoom{display:block;cursor:zoom-in}
.real-zoom img{transition:transform .18s ease}
.real-zoom:hover img{transform:scale(1.015)}
/* lightbox overlay for full-size photos */
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(20,26,18,.92);
  display:flex;align-items:center;justify-content:center;cursor:zoom-out;padding:24px}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;max-width:min(1500px,96vw);text-align:center}
.lightbox img{max-width:100%;max-height:84vh;border-radius:8px;display:block;margin:0 auto}
.lightbox figcaption{color:#e8e5da;font-size:.82rem;margin-top:10px;line-height:1.4}
.lightbox figcaption a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* author card (EEAT, about page — driven by cfg.AUTHOR) */
.author-card{display:flex;gap:18px;align-items:center;margin:18px 0 24px;padding:16px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px}
.author-card img{width:96px;height:96px;border-radius:50%;object-fit:cover;flex-shrink:0}
.author-card div{display:flex;flex-direction:column;gap:3px}
.author-card b{font-size:1.05rem}
.author-card span{font-size:.85rem;color:var(--sage)}

/* ------------------------------------------------------------------ */
/* Attractions map (2026-08-23, build_map.py)                          */
/* ------------------------------------------------------------------ */
#amap-map{height:520px;border-radius:14px;border:1px solid var(--line);
  margin:18px 0 26px;z-index:0}
@media(max-width:760px){#amap-map{height:420px}}
.amap-chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.amap-chip{--chip:var(--ink);display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:999px;border:1.5px solid var(--line);
  background:var(--surface);font:inherit;font-size:.86rem;font-weight:600;
  color:var(--ink);cursor:pointer}
.amap-chip::before{content:"";width:10px;height:10px;border-radius:50%;
  background:var(--chip)}
.amap-chip[data-g="all"]::before{display:none}
.amap-chip.is-on{border-color:var(--chip);background:color-mix(in srgb,var(--chip) 8%,var(--surface))}
.amap-n{font-size:.74rem;font-weight:700;opacity:.55}
.amap-pin{display:block;width:24px;height:24px;border-radius:50%;
  background:var(--chip,#A63A1B);border:3px solid #fff;
  box-shadow:0 1px 5px rgba(0,0,0,.45)}
.leaflet-popup-content{font-family:inherit;margin:12px 14px}
.leaflet-popup-content b{display:block;font-size:.95rem;margin-bottom:3px}
.amap-pdesc{display:block;font-size:.82rem;color:var(--sage,#6E6459);margin:2px 0}
.amap-pprice{display:block;font-size:.86rem;font-weight:700;margin:4px 0 2px}
.amap-pbtn{display:inline-block;margin-top:6px;padding:7px 13px;
  border-radius:8px;background:var(--accent,var(--coral,#A63A1B));color:#fff!important;
  font-weight:600;font-size:.84rem;text-decoration:none}
.amap-group{margin-top:8px}
ul.amap-list{list-style:none;padding:0;margin:10px 0 0}
ul.amap-list li{display:flex;align-items:flex-start;gap:12px;
  padding:13px 2px;border-bottom:1px solid var(--line)}
ul.amap-list li>div{flex:1;min-width:0}
.amap-dotmark{width:11px;height:11px;border-radius:50%;background:var(--chip);
  flex-shrink:0;margin-top:6px}
ul.amap-list b{font-weight:650}
.amap-meta{display:block;font-size:.83rem;font-weight:600;margin-top:1px}
.amap-desc{display:block;font-size:.87rem;color:var(--sage);margin-top:2px}
.amap-locate{flex-shrink:0;font:inherit;font-size:.78rem;font-weight:600;
  padding:6px 11px;border-radius:8px;border:1.5px solid var(--line);
  background:none;color:var(--ink);cursor:pointer;white-space:nowrap}
.amap-locate:hover{border-color:var(--accent);color:var(--accent)}

/* --- Start-here chooser (2026-08-24, replaces homepage answer-box) --- */
.starter{border:1px solid var(--line,#E3DCCF);border-radius:var(--r-md,14px);
  padding:18px 18px 14px;margin:0 0 1.7em;background:var(--surface,#fff)}
.starter-kick{margin:0 0 12px;font-size:.95rem}
.starter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.starter-opt{display:flex;flex-direction:column;gap:3px;padding:12px 14px;
  border:1.5px solid var(--line,#E3DCCF);border-radius:10px;text-decoration:none;
  color:var(--ink,#222);background:var(--surface,#fff);transition:border-color .15s}
.starter-opt:hover{border-color:var(--accent,var(--coral,#A63A1B))}
.starter-opt.is-top{border-color:var(--accent,var(--coral,#A63A1B));
  background:color-mix(in srgb,var(--accent,var(--coral,#A63A1B)) 5%,var(--surface,#fff))}
.starter-opt b{font-size:.98rem;line-height:1.25}
.s-tag{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--accent,var(--coral,#A63A1B))}
.s-note{font-size:.82rem;color:var(--sage,#6E6459)}
.starter-foot{margin:10px 0 0;font-size:.85rem;color:var(--sage,#6E6459)}
.starter-foot a{text-decoration:underline;color:inherit}
@media(max-width:760px){.starter-grid{grid-template-columns:1fr}}

/* Lightbox prev/next controls (2026-08-24) */
.lightbox-close{position:absolute;top:14px;right:20px;background:none;border:0;color:#fff;font-size:2.4rem;line-height:1;cursor:pointer;padding:4px 10px;z-index:2}
.lightbox-close:hover{color:var(--accent,var(--coral,#A63A1B))}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;color:#fff;font-size:3.2rem;line-height:1;cursor:pointer;padding:8px 18px;opacity:.8;z-index:2}
.lightbox-nav:hover{opacity:1;color:var(--accent,var(--coral,#A63A1B))}
.lightbox-nav[hidden]{display:none}
.lightbox-prev{left:8px}
.lightbox-next{right:8px}
@media(max-width:760px){.lightbox-nav{font-size:2.4rem;padding:6px 10px}}

/* Insider's Guide (70/30 + sticky) v20260824d */
.iguide{background:var(--neutral);border-radius:var(--r-lg);padding:40px 34px;margin:2.4em 0}
@media(min-width:1080px){.iguide{margin-left:-110px;margin-right:-110px}}
@media(min-width:1200px){.iguide{margin-left:-150px;margin-right:-150px}}
.iguide-label{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent,var(--coral,#A63A1B));margin:0 0 6px}
.iguide-title{margin:0 0 26px}
.iguide-grid{display:grid;grid-template-columns:7fr 3fr;gap:48px;align-items:start}
.iguide-lead{font-size:1.12rem;font-style:italic;color:var(--ink);margin-top:0}
.iguide-art h3{margin:1.6em 0 .5em;scroll-margin-top:84px}
.iguide-art h3:first-of-type{margin-top:1.2em}
.iguide-fig{margin:1.6em 0;border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/7}
.iguide-fig img{width:100%;height:100%;object-fit:cover}
.iguide-fig--tall{aspect-ratio:auto;min-height:340px;margin:1.6em 0 0}
.iguide-duo{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch}
.iguide-duo .iguide-art h3,.iguide-duo h3{margin-top:1.6em}
.iguide-side{position:sticky;top:84px;display:grid;gap:14px}
.iguide-book{background:#fff;border-radius:var(--r-md);border-top:4px solid var(--accent,var(--coral,#A63A1B));padding:16px 18px}
.iguide-book-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sage,#777);margin:0 0 4px}
.iguide-book-title{font-family:var(--serif,inherit);font-size:1.1rem;font-weight:700;margin:0 0 3px}
.iguide-book-rating{font-size:.82rem;margin:0 0 8px}
.iguide-book-rating span{color:var(--accent,var(--coral,#A63A1B))}
/* Price pair. Same type scale as the inner-page .ticket-card on purpose: the
   two cards book the same tour, so a reader who meets both must see the same
   number and the same per-person read, set the same way. */
.iguide-book-price{font-size:1.5rem;font-weight:800;line-height:1;margin:0 0 2px;letter-spacing:-.02em}
.iguide-book-unit{font-size:.8rem;color:var(--sage,#777);margin:0 0 12px}
.iguide-book-note{font-size:.72rem;color:var(--sage,#777);margin:9px 0 0;text-align:center}
.iguide-book-list{list-style:none;margin:0 0 12px;padding:0}
.iguide-book-list li{font-size:.8rem;line-height:1.4;margin:0 0 5px;padding-left:16px;position:relative}
.iguide-book-list li::before{content:"\2713";position:absolute;left:0;color:var(--accent,var(--coral,#A63A1B))}
.iguide-book .btn{display:block;text-align:center}
@media(max-width:900px){.iguide{padding:30px 22px}.iguide-grid{grid-template-columns:1fr;gap:30px}.iguide-side{position:static}.iguide-duo{grid-template-columns:1fr;gap:0}.iguide-fig--tall{aspect-ratio:3/4;min-height:0}}

/* ---------- sticky ticket card beside a long inner-page read ----------
   build_site.page() wraps the article in .book-split-grid when a page dict
   carries "sticky_book". Deliberately NOT reusing .iguide-grid: that collapses
   at 900px, and a 7fr/3fr split of the 760px prose column leaves the card at
   196px, which wraps the CTA onto three lines. This one stays single-column
   until the viewport can actually afford both, then widens the prose shell.
   Below that the card is hidden outright rather than dumped at the foot of the
   page — mobile already gets the early CTA, the sticky .book-bar and the
   booking widget, so a fourth copy of the same call would just be noise. */
.book-split-side{display:none}
@media(min-width:1080px){
  .prose.book-split{max-width:1120px}
  .book-split-grid{display:grid;grid-template-columns:7fr 3fr;gap:48px;align-items:start}
  .book-split-side{display:block;position:sticky;top:84px}
}
.ticket-card{background:var(--neutral);border-radius:var(--r-md);
  border-top:4px solid var(--accent);padding:18px 20px}
.ticket-card .tk-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sage);margin:0 0 4px}
.ticket-card .tk-title{font-size:1.06rem;font-weight:700;line-height:1.3;margin:0 0 4px}
.ticket-card .tk-rating{font-size:.82rem;margin:0 0 10px;color:var(--sage)}
.ticket-card .tk-rating span{color:var(--accent)}
.ticket-card .tk-price{font-size:1.5rem;font-weight:800;line-height:1;margin:0 0 2px;
  letter-spacing:-.02em}
.ticket-card .tk-unit{font-size:.8rem;color:var(--sage);margin:0 0 12px}
.ticket-card .tk-list{list-style:none;margin:0 0 14px;padding:0}
.ticket-card .tk-list li{font-size:.8rem;line-height:1.45;margin:0 0 6px;
  padding-left:17px;position:relative}
.ticket-card .tk-list li::before{content:"\2713";position:absolute;left:0;color:var(--accent)}
.ticket-card .btn{display:block;text-align:center}
.ticket-card .tk-note{font-size:.72rem;color:var(--sage);margin:9px 0 0;text-align:center}

