/* Measured empirically in-browser, NOT taken from measure_font_fallback.py.
   That script returned 98.00/93.93/95.39/97.00, which is backwards for the bold
   weights: the local fallback (Arial / Liberation Sans) has ONE width for every
   weight, while Outfit gets wider as weight rises. Probing a size-adjust:100%
   face against real Outfit at each weight gives the numbers below, and they are
   what zero the wrap-count shift on a 390px viewport. */
@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.67%}
@font-face{font-family:"Outfit fb";src:local("Arial"),local("Helvetica"),local("Liberation Sans"),local("Arimo"),local("Albany AMT");font-weight:600;size-adjust:100.64%}
@font-face{font-family:"Outfit fb";src:local("Arial"),local("Helvetica"),local("Liberation Sans"),local("Arimo"),local("Albany AMT");font-weight:700;size-adjust:102.30%}
@font-face{font-family:"Outfit fb";src:local("Arial"),local("Helvetica"),local("Liberation Sans"),local("Arimo"),local("Albany AMT");font-weight:800;size-adjust:103.62%}
/* "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:#101C22;        /* primary: headlines & core text */
  --sage:#66787E;       /* secondary: borders, meta, captions */
  --coral:#1C7A8C;      /* tertiary: the single interaction accent */
  --coral-ink:#125A69;  /* readable orange (same hue) for link/body text */
  --coral-dk:#166878;   /* button hover */
  --neutral:#F1F4F4;    /* page foundation */
  --surface:#FFFFFF;    /* card / panel surface */
  --white:#FFFFFF;
  --line:#DCE4E5;
  /* down chevron, masked so it inherits currentColor in every state */
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --r-sm:8px;
  --r-md:14px;
  --r-lg:24px;
  --maxw:1120px;
}

*{box-sizing:border-box}
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 right.
   build_site/build_home wrap the text links in <span class="nav-links"> so the
   header can centre them independently of the brand's width. Without a rule
   for that wrapper the five links collapse to whitespace-width spacing (4px)
   while the 24px flex gap lands only between the wrapper and the pill.
   Below 861px .nav becomes the dropdown panel, so the wrapper must stop being
   a box or the links stay inline inside it instead of stacking. */
@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}
/* 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}
  .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.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.jpg') type('image/jpeg'));background-image:image-set(url('/images/hero.webp') type('image/webp'),url('/images/hero.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 capillarealdegranada.com, 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;align-items:stretch;gap:18px;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 secondary action ("Read the guide").
   build_home._hero() renders this as .btn-link deliberately: a second OUTLINED
   button the same size as the primary splits the click between two
   equally-weighted choices and neither reads as THE action. So this is a text
   link -- but a designed one, because with no rule at all it inherits body link
   styling and lands on a dark photo with no affordance whatsoever.
   The target is an anchor further DOWN this same page, so the glyph is a down
   chevron rather than the usual right arrow: it promises a scroll, not a
   navigation. Drawn with mask-image + currentColor so one asset serves every
   state, at stroke-width 3 in a 24 viewBox (~2px at this size) to match the
   600 text weight beside it. */
.hero-cta .btn-link{
  display:inline-flex;align-items:center;justify-content:center;
  /* Left padding matches the primary pill's TEXT inset (20px padding + 2px
     border), so when .hero-cta wraps on a phone the two labels line up in a
     column instead of sitting 2px apart. Right padding is then 2px less,
     because the trailing glyph needs less optical room than a letter does. */
  padding:12px 20px 12px 22px;
  min-height:44px;                 /* touch target, and matches the primary pill */
  color:#fff;font-family:"Outfit","Outfit fb",sans-serif;font-weight:600;font-size:.95rem;
  background:none;border:0;border-radius:var(--r-md);box-shadow:none;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;
  text-decoration-color:rgba(255,255,255,.45);
  transition:text-decoration-color .15s ease-out,color .15s ease-out,scale .15s ease-out;
}
.hero-cta .btn-link::after{
  content:"";width:1.05em;height:1.05em;margin-left:8px;flex:0 0 auto;
  background-color:currentColor;text-decoration:none;
  -webkit-mask:var(--chev) center/contain no-repeat;
  mask:var(--chev) center/contain no-repeat;
  transition:translate .15s ease-out;
}
.hero-cta .btn-link:hover{color:#fff;text-decoration-color:#fff}
.hero-cta .btn-link:hover::after{translate:0 2px}
.hero-cta .btn-link:active{scale:.96}
.hero-cta .btn-link:focus-visible{
  outline:2px solid #fff;outline-offset:3px;text-decoration-color:#fff}
@media(prefers-reduced-motion:reduce){
  .hero-cta .btn-link,.hero-cta .btn-link::after{transition:none}
  .hero-cta .btn-link:hover::after{translate:none}
  .hero-cta .btn-link:active{scale:1}
}
.hero-trust{font-size:.95rem;color:#D9DBD7;margin:0}
.hero-trust b{color:#fff}
@media(max-width:900px){.hero-copy{max-width:100%}}
/* Font-swap CLS on phones. Above 640px .hero .wrap has min-height:550px, which
   absorbs the h1 changing line count when the webfont lands. Below it the floor
   is 0, so an extra fallback line pushes the whole page down -- measured at 36px
   on a 390px viewport. text-wrap:balance makes both renderings settle on the
   same line count by optimising for even line lengths instead of greedy fill,
   and the small floor catches what balance does not. */
.hero h1{text-wrap:balance}
/* The second half of the font-swap CLS fix. size-adjust matches the fallback's
   TOTAL advance width to Outfit's, but it cannot control where individual words
   break, so a long h1 can still wrap to a different LINE COUNT in the two fonts
   -- measured here at 4 lines fallback against 5 lines webfont on a 390px
   viewport. Above 640px .hero .wrap already carries min-height:550px and
   swallows it. Below that the floor was 0, so the difference moved the whole
   page. These two floors are measured from the taller of the two renderings in
   each sub-band; content taller than the floor still grows normally. */
@media(max-width:640px){.hero h1{font-size:2.1rem}.hero .wrap{padding:64px 22px 56px;min-height:556px}}
@media(max-width:440px){.hero .wrap{min-height:712px}}
@media(max-width:340px){.hero .wrap{min-height:840px}}

/* ---------- 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}
.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}
@media(max-width:680px){.includes{padding:20px}.includes-grid{grid-template-columns:1fr;gap:18px}}

/* ---------- 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}
/* The band's lead paragraph. build_home emits it; without a rule it inherits
   the body colour and lands at full-strength neutral on the dark band,
   competing with the h2 above it instead of sitting under it. */
.ladder-lead{color:rgba(255,255,255,.78);font-size:.95rem;margin:0 0 18px;max-width:60ch;text-wrap:pretty}
.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}
  /* Clearance for the fixed book-bar goes on the FOOTER, not on <body>.
     body{padding-bottom} paints 58px of page background *below* the dark
     footer, which on a dark-footer theme reads as a white strip at the very
     bottom of every mobile page. Putting the same space inside .site-foot
     keeps the footer colour running to the edge of the document. Gated on
     the bar actually existing so pages that opt out (no_cta) don't get a
     58px hole. */
  .book-bar ~ .site-foot{padding-bottom:76px}
}
.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, from colomares)                        */

/* 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))}
.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}}

/* ---- Language dropdown ----
   The switcher is inserted BEFORE .nav-toggle, i.e. between the logo and the
   nav.

   THIS SITE'S HEADER IS A GRID, WHICH THE PORTFOLIO'S OTHER SWITCHERS NEVER MET.
   style.css sets .site-head .wrap{display:grid;grid-template-columns:1fr auto 1fr}
   above 861px and .site-head .nav{display:contents}, so the nav's children are
   promoted into the middle and right cells and the links sit centred on the PAGE
   rather than in the space left beside the brand. A language switcher is a
   FOURTH item in a three-column grid: it wraps to a second row and doubles the
   header height. Two items cannot share a grid cell without a wrapper element,
   and the translator has no wrapper to insert one into.

   So switcher pages revert to the portfolio's flex header — logo left, then
   links, switcher and Book pill travelling together on the right. The centred
   nav was a refinement; a working switcher is the requirement. .nav-links keeps
   an explicit flex gap because without the grid it is a plain inline span and
   the 24px spacing would collapse to whitespace width (4px), which is the exact
   defect the grid was added to fix in the first place.

   The English pages carry the switcher too, so this applies to them as well.

   BREAKPOINT. style.css hamburgers at 860px. The switcher adds ~70px to the row
   and this header already carries five nav items, a Book pill and the brand
   "Fjord Cruises Bergen", so the band just above 860 stops fitting — the
   palazzo failure, broken but not obviously broken. The hamburger therefore
   moves up to 940px for every page, and the compact-switcher query moves with
   it so the two can never disagree. The number was set by a real-DOM header
   sweep after the run, not by screenshot. */
@media(min-width:941px){
  .site-head .wrap{display:flex;align-items:center;gap:18px;grid-template-columns:none}
  .site-head .nav{display:flex;align-items:center;gap:24px;margin-left:0}
  .site-head .nav-links{display:flex;align-items:center;gap:24px;justify-self:auto}
  .site-head .nav a.btn{justify-self:auto}
}
.lang-dd{position:relative;margin-left:auto;margin-right:10px;flex-shrink:0}
.lang-dd summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:5px;font-family:"Outfit","Outfit fb",sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.04em;color:var(--ink);padding:5px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.lang-dd summary::-webkit-details-marker{display:none}
.lang-dd summary::after{content:"\25BE";font-size:.6rem;color:var(--sage)}
.lang-dd[open] summary{background:var(--neutral)}
.lang-dd .lang-menu{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.10);padding:6px;display:flex;flex-direction:column;min-width:130px;z-index:60}
.lang-menu a{padding:7px 10px;border-radius:6px;font-size:.78rem;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap}
.lang-menu a:hover{background:var(--neutral)}
.lang-menu a.active{color:var(--coral-ink);background:var(--neutral)}
@media(max-width:940px){
  .lang-dd{margin-right:6px}
  .lang-dd summary{padding:4px 8px;font-size:.68rem}
  .site-head .wrap{display:flex;align-items:center;grid-template-columns:none}
  .site-head .nav-toggle{display:block;margin-left:0}
  .site-head .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}
  .site-head .nav.open{display:flex}
  .site-head .nav-links{display:contents}
  .site-head .nav a{padding:11px 0;border-bottom:1px solid var(--line);width:100%}
  .site-head .nav a.btn{margin-top:10px;text-align:center}
}

/* ---- Norwegian text expansion ----
   Bokmal runs a little longer than English and, unlike the Romance languages,
   builds long closed compounds ("tidevannsstrom", "sightseeingbat",
   "verdensarvfjordene") that cannot break on their own. These are the site's
   fixed-width flex cells, where one such compound pushes the cell wide instead
   of wrapping. */
html:not([lang="en"]) .kf-label,html:not([lang="en"]) .facts-val,
html:not([lang="en"]) .badge,html:not([lang="en"]) .tour h3,
html:not([lang="en"]) .bb-txt,html:not([lang="en"]) .glance b,
html:not([lang="en"]) .ladder-days,html:not([lang="en"]) .trust-row li{overflow-wrap:anywhere}
html:not([lang="en"]) .cmp-area{white-space:normal}

/* ---- Hero floor, translated pages ----
   style.css floors the mobile hero per sub-band so a font-swap line-count
   change cannot move the page (see the comment there). Those numbers were
   measured against the ENGLISH hero. Bokmal runs longer, so at 500px the
   Norwegian hero is 560-579px against a 556px floor and the shift comes back
   — 19px, one line of the lede. Translated pages get their own, taller floor
   rather than raising it for English too, which would add 60px of empty hero
   on an English tablet for nothing.
   ALL THREE BANDS HAVE TO BE MIRRORED. html:not([lang="en"]) .hero .wrap beats
   the plain .hero .wrap of the narrower queries on specificity, so declaring
   only the 640 band silently CANCELS the 440 and 340 floors on translated
   pages — which is how the first attempt turned one 19px shift into two, at
   320 and 390. Re-measure all three when a language is added. */
@media(max-width:640px){html:not([lang="en"]) .hero .wrap{min-height:584px}}
@media(max-width:440px){html:not([lang="en"]) .hero .wrap{min-height:712px}}
@media(max-width:340px){html:not([lang="en"]) .hero .wrap{min-height:840px}}