
:root{
  --primary:#3B1F2B;
  --accent:#C9A227;
  --bg:#FBF7F0;
  --white:#ffffff;
  --ink:#2a1c22;
  --muted:#6b5b62;
  --line:rgba(59,31,43,.14);
  --shadow:0 10px 30px rgba(59,31,43,.10);
  --shadow-lg:0 18px 48px rgba(59,31,43,.20);
  --radius:14px;
  --grid-gap:2rem;
  --font-head:'Playfair Display',Georgia,'Times New Roman',serif;
  --font-body:'Source Sans 3',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --header-h:72px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);
  font-size:1.02rem;line-height:1.72;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:400;line-height:1.16;margin:0 0 .5em}
h1{font-size:clamp(2.3rem,5.2vw,3.9rem)}
h2{font-size:clamp(1.85rem,3.6vw,2.7rem)}
h3{font-size:clamp(1.2rem,2vw,1.45rem)}
p{margin:0 0 1.15em}
.wrap{width:min(1140px,92vw);margin-inline:auto}
.narrow{width:min(820px,92vw);margin-inline:auto}
section{padding:clamp(3.4rem,7vw,5.6rem) 0}
.eyebrow{font-family:var(--font-body);font-size:.76rem;font-weight:800;letter-spacing:.19em;
  text-transform:uppercase;color:var(--accent);margin:0 0 .85rem;display:block}
.section-head{max-width:760px;margin-bottom:2.6rem}
.section-head.center{margin-inline:auto;text-align:center}
.section-head p{color:var(--muted);margin-bottom:0}
.band-alt{background:rgba(59,31,43,.045)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--accent);
  color:var(--primary);padding:12px 20px;font-weight:800;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.prose{max-width:74ch}
.prose a{color:#8a6a12;text-decoration:underline;text-underline-offset:3px;font-weight:700}
.prose a:hover{color:var(--primary)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.92rem 1.9rem;border-radius:999px;font-family:var(--font-body);font-weight:700;
  font-size:.95rem;text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:all .2s ease;text-align:center}
.btn-primary{background:var(--accent);color:var(--primary);border-color:var(--accent)}
.btn-primary:hover{background:#b28d1f;border-color:#b28d1f;transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-secondary{background:transparent;border-color:var(--accent);color:#ffffff}
.btn-secondary:hover{background:var(--accent);color:var(--primary)}
.btn-outline{background:transparent;border-color:var(--primary);color:var(--primary)}
.btn-outline:hover{background:var(--primary);color:var(--white)}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem}
.btn-row.center{justify-content:center}

/* Header */
.site-header{position:sticky;top:0;z-index:100;background:var(--primary);
  border-bottom:1px solid rgba(255,255,255,.08)}
.header-inner{display:flex;align-items:center;gap:1.5rem;min-height:var(--header-h);padding:14px 0}
.brand{display:flex;flex-direction:column;text-decoration:none;color:var(--white);flex-shrink:0}
.brand-name{font-family:var(--font-head);font-size:1.42rem;line-height:1.1;white-space:nowrap;color:var(--white)}
.brand-tagline{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);
  white-space:nowrap;margin-top:2px}
.main-nav{margin-left:auto}
.main-nav ul{display:flex;align-items:center;gap:1.5rem;list-style:none;margin:0;padding:0}
.main-nav a{color:rgba(255,255,255,.86);text-decoration:none;font-size:.9rem;font-weight:600;
  padding:6px 0;border-bottom:2px solid transparent;transition:all .18s ease;white-space:nowrap}
.main-nav a:hover{color:var(--white);border-bottom-color:var(--accent)}
.main-nav .nav-cta a{background:var(--accent);color:var(--primary);font-weight:700;
  padding:.55rem 1.25rem;border-radius:999px;border-bottom:none}
.main-nav .nav-cta a:hover{background:#b28d1f;border-bottom:none}
.nav-close{display:none}
.hamburger{display:none;margin-left:auto;background:none;border:none;color:var(--white);
  font-size:1.6rem;cursor:pointer;padding:6px 10px;line-height:1}

/* Language switcher. Compact by design: with two languages a segmented EN|ES
   control costs less header width than any dropdown, and the header is a single
   flex row that Spanish labels already lengthen. flex-shrink:0 and nowrap keep
   it from being the thing that wraps when a label grows. */
.lang-switch{display:inline-flex;align-items:center;gap:2px;flex-shrink:0;
  margin-left:14px;border:1px solid rgba(255,255,255,.28);border-radius:999px;
  padding:2px;white-space:nowrap}
.lang-switch .lang-opt{display:inline-block;padding:3px 10px;border-radius:999px;
  font-size:.78rem;font-weight:700;letter-spacing:.04em;line-height:1.4;
  color:rgba(255,255,255,.72);text-decoration:none;border-bottom:none}
.lang-switch .lang-opt:hover{color:var(--white);background:rgba(255,255,255,.12)}
.lang-switch .lang-opt.is-active{background:var(--accent);color:var(--primary);
  cursor:default}
/* The mobile copy lives inside the collapsed menu list, so it is hidden while
   the desktop control is visible and vice versa — never both at once. */
.nav-lang{display:none}
.lang-switch-mobile{margin-left:0;width:100%;justify-content:center}
.lang-switch-mobile .lang-opt{flex:1;text-align:center;padding:10px 12px;
  font-size:.95rem;min-height:44px;display:flex;align-items:center;
  justify-content:center}

/* Hero — vertically centred on every page type. Never set width:100% on a hero
   child: same specificity, later rule, and it silently destroys .wrap. */
.hero,.hero-page{position:relative;min-height:60vh;display:flex;align-items:center;
  background-size:cover;background-position:center;color:var(--white);
  padding:clamp(3.5rem,8vw,6rem) 0}
.hero.no-image,.hero-page.no-image{background-image:linear-gradient(140deg,#241119 0%,var(--primary) 45%,#5a3040 100%)}
.hero::after,.hero-page::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(28,12,18,.52) 0%,rgba(28,12,18,.68) 60%,rgba(28,12,18,.86) 100%)}
.hero>.wrap,.hero-page>.wrap{position:relative;z-index:1;align-self:center}
.hero h1,.hero-page h1{color:var(--white);max-width:19ch;text-shadow:0 2px 24px rgba(0,0,0,.42)}
.hero-page h1{max-width:21ch}
.hero-intro{max-width:60ch;color:rgba(255,255,255,.93);font-size:1.08rem;margin-bottom:1.9rem;
  text-shadow:0 1px 12px rgba(0,0,0,.5)}
.hero .eyebrow,.hero-page .eyebrow{color:var(--accent)}

/* Advantages */
.adv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--grid-gap);margin-bottom:2.6rem}
.adv-card{background:var(--white);border-radius:var(--radius);padding:2.2rem 1.9rem;
  box-shadow:var(--shadow);border-top:3px solid var(--accent)}
.adv-icon{font-size:2.1rem;line-height:1;margin-bottom:1rem;display:block}
/* Category label above the card heading. Reuses the site's existing eyebrow
   treatment so the card gains a second heading level without introducing a new
   visual idiom. Card padding, radius, border, shadow and grid are untouched. */
.adv-label{font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:.4rem;line-height:1.35}
.adv-card h3{margin-bottom:.55rem}
.adv-card p{color:var(--muted);font-size:.96rem;margin-bottom:0}

/* Experience picks — compact "choose your experience" navigation cards.
   Deliberately lighter than .tour-card and .adv-card: hairline border instead of
   a shadow at rest, no media, tighter padding and type. Not a product grid. */
.pick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:2.6rem}
.pick-card{position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.35rem 1.2rem 1.25rem;display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.pick-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(201,162,39,.55)}
.pick-icon{font-size:1.45rem;line-height:1;display:block;margin-bottom:.6rem}
.pick-card h3{font-size:1.06rem;line-height:1.22;margin:0 0 .2rem}
.pick-sub{font-style:italic;font-size:.86rem;color:var(--muted);margin:0 0 .6rem}
.pick-card>p:not(.pick-sub){font-size:.88rem;line-height:1.55;color:var(--muted);margin:0 0 1.05rem}
.pick-cta{margin-top:auto;font-size:.86rem;font-weight:700;color:#8a6a12;text-decoration:none;
  display:inline-flex;align-items:center;gap:.35rem}
.pick-cta:hover{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
/* Stretched link: the whole card is clickable, but there is still exactly ONE
   semantic link per card and its accessible name is the CTA text. */
.pick-cta::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}
.pick-card:focus-within{outline:3px solid var(--accent);outline-offset:3px}
.pick-card:focus-within .pick-cta{color:var(--primary)}
@media (max-width:900px){.pick-grid{grid-template-columns:1fr 1fr;gap:1rem}}
@media (max-width:560px){.pick-grid{grid-template-columns:1fr}}

/* Tour cards */
.tours-grid,.reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--grid-gap)}
.tours-grid[data-count="1"],.tours-grid[data-count="2"],
.reviews-grid[data-count="1"],.reviews-grid[data-count="2"]{justify-content:center}
.tours-grid[data-count="1"]>.tour-card,.tours-grid[data-count="2"]>.tour-card,
.reviews-grid[data-count="1"]>.review-card,.reviews-grid[data-count="2"]>.review-card{
  max-width:420px;justify-self:center;width:100%}
.tour-card{background:var(--white);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease}
.tour-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
/* Tour-card media box — FIXED height, not an aspect ratio.
   aspect-ratio sized the box from the column width, so the media height drifted
   whenever the column width changed (breakpoint, card count, container width) and
   cards no longer matched. The height below is the reference card's rendered height
   at desktop: .wrap is min(1140px,92vw), the grid gap is 2rem, three columns give
   (1140 - 2*32) / 3 = 358.67px of card width, and 358.67 * 10/16 = 224px.
   Held constant at every breakpoint so every card matches everywhere.
   object-fit:cover + overflow:hidden fill and crop the box without distorting the
   image, whatever its intrinsic ratio. Scoped to .tour-card-media only — hero
   backgrounds, split-CTA slideshows and editorial images are untouched. */
.tour-card-media{position:relative;height:224px;overflow:hidden;background:var(--primary)}
.tour-card-media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.img-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,#241119,var(--primary));color:var(--accent);font-size:2.6rem}
.card-badge{position:absolute;top:12px;left:12px;background:var(--accent);color:var(--primary);
  font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:.35rem .8rem;border-radius:999px}
.tour-card-body{padding:1.6rem 1.5rem 1.7rem;display:flex;flex-direction:column;flex:1}
.tour-card-body h3{margin-bottom:.55rem;font-size:1.24rem}
.card-provider{font-size:.8rem;color:var(--muted);margin:0 0 .8rem;letter-spacing:.02em}
.card-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.95rem}
.chip{font-size:.76rem;font-weight:700;padding:.28rem .7rem;border-radius:999px;
  background:rgba(201,162,39,.18);color:#7d6110;white-space:nowrap}
.chip-rating{background:rgba(59,31,43,.09);color:var(--primary)}
.tour-card-body ul{list-style:none;margin:0 0 1rem;padding:0;flex:1}
.tour-card-body ul li{position:relative;padding:.3rem 0 .3rem 1.3rem;font-size:.93rem;color:var(--muted)}
.tour-card-body ul li::before{content:"\2726";position:absolute;left:0;color:var(--accent);font-size:.8rem}
.card-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:auto}
.card-actions .btn{flex:1 1 auto;padding:.78rem 1.2rem;font-size:.88rem}

/* Accordion */
.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  background:none;border:none;padding:1.35rem .25rem;text-align:left;cursor:pointer;
  font-family:var(--font-head);font-size:1.16rem;color:var(--primary);line-height:1.35}
.acc-btn:hover{color:#5a3040}
.acc-icon{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--accent);
  color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:1.1rem;
  font-family:var(--font-body);transition:transform .22s ease;line-height:1}
.acc-btn[aria-expanded="true"] .acc-icon{transform:rotate(45deg)}
.acc-panel{display:none;padding:0 .25rem 1.5rem;color:var(--muted);max-width:78ch}
.acc-panel.open{display:block}
.acc-panel p:last-child{margin-bottom:0}
.acc-panel a{color:#8a6a12;text-decoration:underline;text-underline-offset:3px;font-weight:700}
.acc-panel a:hover{color:var(--primary)}

/* Dark CTA bands */
.cta-band{background:var(--primary);color:var(--white);text-align:center}
.cta-band h2{color:var(--white);margin-bottom:.7rem}
.cta-band p{color:rgba(255,255,255,.8);max-width:60ch;margin-inline:auto;margin-bottom:1.9rem}
.cta-band.alt{background:linear-gradient(140deg,#241119,var(--primary) 60%,#5a3040)}

/* Reviews */
.review-card{background:var(--white);border-radius:var(--radius);padding:1.9rem 1.7rem;
  box-shadow:var(--shadow);display:flex;flex-direction:column}
.stars{color:var(--accent);letter-spacing:.14em;font-size:.95rem;margin-bottom:.9rem}
.review-card blockquote{margin:0 0 1.3rem;font-size:.97rem;color:var(--ink);flex:1}
.review-meta{border-top:1px solid var(--line);padding-top:.95rem}
.review-name{font-weight:700;font-size:.93rem;display:block}
.review-sub{font-size:.82rem;color:var(--muted)}
.review-note{font-size:.8rem;color:var(--muted);font-style:italic;margin:1.6rem 0 0;text-align:center}

/* Homepage reviews — editorial vertical list. Dividers and spacing carry the
   separation instead of card containers, so the section reads as curated
   feedback rather than a testimonial grid. The landing pages keep .review-card. */
.rev-list{max-width:74ch;margin-inline:auto}
.rev{padding:2.2rem 0;border-top:1px solid var(--line)}
.rev:first-child{border-top:none;padding-top:.5rem}
.rev:last-child{padding-bottom:.5rem}
.rev-stars{color:var(--accent);letter-spacing:.18em;font-size:.92rem;line-height:1;margin-bottom:.95rem}
.rev blockquote{margin:0 0 1rem;font-family:var(--font-head);font-size:1.2rem;line-height:1.56;
  color:var(--ink);font-weight:400}
.rev-meta{margin:0;font-size:.88rem;color:var(--muted)}
.rev-name{font-weight:700;color:var(--primary)}
.rev-sep{margin:0 .55rem;color:var(--accent)}
@media (max-width:700px){
  .rev{padding:1.8rem 0}
  .rev blockquote{font-size:1.06rem}
}

/* Lead-tour deep dive */
.about-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:3rem;align-items:start}
.about-body h3{margin-top:1.9rem}
.about-body h3:first-of-type{margin-top:0}
/* Editorial recommendation badge on a featured-tour section. Reads as a seal —
   deliberately NOT a second uppercase eyebrow, so the hierarchy stays
   eyebrow → title → badge. Signals selection by this site; carries no claim of
   operating the tour or of official/partner status. */
.rec-badge{display:inline-flex;align-items:center;gap:.5rem;margin:.2rem 0 0;
  padding:.45rem 1rem;border-radius:999px;background:rgba(201,162,39,.16);
  border:1px solid rgba(201,162,39,.55);color:#7d6110;font-size:.85rem;
  font-weight:700;letter-spacing:.02em;line-height:1.2}
.rec-badge-mark{color:var(--accent);font-size:.9rem;line-height:1}
.booking-card{background:var(--primary);color:var(--white);border-radius:var(--radius);
  padding:2rem 1.8rem;box-shadow:var(--shadow-lg);position:sticky;top:96px}
.booking-card h3{color:var(--white);margin-bottom:1.1rem;font-size:1.32rem}
.booking-price{font-family:var(--font-head);font-size:2.3rem;color:var(--accent);line-height:1;
  display:block;margin-bottom:.2rem}
.booking-price small{font-family:var(--font-body);font-size:.8rem;color:rgba(255,255,255,.64);font-weight:600}
.booking-list{list-style:none;margin:1.4rem 0 1.6rem;padding:0}
.booking-list li{font-size:.9rem;color:rgba(255,255,255,.86);padding:.5rem 0 .5rem 1.6rem;
  position:relative;border-bottom:1px solid rgba(255,255,255,.1)}
.booking-list li:last-child{border-bottom:none}
.booking-list li::before{content:"\2726";position:absolute;left:0;color:var(--accent)}
.booking-card .btn{width:100%}
.booking-note{font-size:.78rem;color:rgba(255,255,255,.55);text-align:center;margin:.9rem 0 0}

.glance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem}
.glance-card{background:var(--white);border-radius:var(--radius);padding:1.7rem 1.5rem;
  box-shadow:var(--shadow);text-align:center}
.glance-icon{font-size:1.9rem;display:block;margin-bottom:.7rem;line-height:1}
.glance-label{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);
  font-weight:800;display:block;margin-bottom:.3rem}
.glance-value{font-family:var(--font-head);font-size:1.3rem;color:var(--primary)}

.timeline{list-style:none;margin:0;padding:0 0 0 1.9rem;position:relative;max-width:78ch}
.timeline::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--accent),rgba(201,162,39,.2))}
.timeline li{position:relative;padding:0 0 1.9rem}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-1.9rem;top:.55rem;width:14px;height:14px;
  border-radius:50%;background:var(--bg);border:3px solid var(--accent)}
.timeline h3{font-size:1.14rem;margin-bottom:.25rem}
.timeline p{color:var(--muted);font-size:.93rem;margin-bottom:0}
.timeline .route-walk{font-size:.84rem;color:var(--muted);opacity:.8;font-style:italic;margin-top:.35rem}

.split-cta{background:var(--primary);color:var(--white);padding:0;overflow:hidden}
.split-inner{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:340px}
.split-text{padding:clamp(2.6rem,5vw,4rem) clamp(1.6rem,4vw,3.2rem);align-self:center}
.split-text h2{color:var(--white)}
.split-text p{color:rgba(255,255,255,.8);max-width:44ch}
/* Desktop-only heading break. Suppressed by default so narrow screens wrap on
   their own; restored once the split section is actually two columns (961px),
   which is the same breakpoint at which .split-inner stops stacking. */
.h2-break{display:none}
@media (min-width:961px){.h2-break{display:inline}}
.split-media{position:relative;min-height:280px;background:#241119;overflow:hidden}
.split-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split-media .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.split-media .slide.active{opacity:1}
.slide-dots{position:absolute;left:0;right:0;bottom:14px;z-index:2;display:flex;justify-content:center;gap:9px}
.slide-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.42);transition:background .2s ease,transform .2s ease}
.slide-dot:hover{background:rgba(255,255,255,.75)}
.slide-dot.active{background:var(--accent);transform:scale(1.25)}
@media (prefers-reduced-motion:reduce){.split-media .slide{transition:none}}

.inc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--grid-gap)}
.inc-col{background:var(--white);border-radius:var(--radius);padding:2rem 1.8rem;box-shadow:var(--shadow)}
.inc-col h3{display:flex;align-items:center;gap:.6rem;margin-bottom:1.1rem}
.inc-col ul{list-style:none;margin:0;padding:0}
.inc-col li{position:relative;padding:.55rem 0 .55rem 1.8rem;font-size:.94rem;color:var(--muted);
  border-bottom:1px solid var(--line)}
.inc-col li:last-child{border-bottom:none}
.inc-col.included li::before{content:"\2713";position:absolute;left:0;color:#2f7a55;font-weight:800}
.inc-col.excluded li::before{content:"\2715";position:absolute;left:0;color:#a2564c;font-weight:800}

.meet-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:2.6rem;align-items:start}
.map-frame{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--primary)}
.map-frame iframe{display:block;width:100%;height:380px;border:0}
.meet-card{background:var(--white);border-radius:var(--radius);padding:2rem 1.8rem;box-shadow:var(--shadow)}
.meet-card dl{margin:1.3rem 0 0}
.meet-card dt{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  font-weight:800;margin-top:1.1rem}
.meet-card dt:first-child{margin-top:0}
.meet-card dd{margin:.3rem 0 0;font-size:.94rem;color:var(--muted)}
/* Meeting-point map link. Inherits the surrounding dd typography — only an
   accent underline and a small outbound mark signal that it is interactive. */
.map-link{color:inherit;text-decoration:underline;text-decoration-color:rgba(201,162,39,.65);
  text-underline-offset:3px;text-decoration-thickness:1px}
.map-link:hover,.map-link:focus-visible{color:var(--primary);text-decoration-color:var(--accent)}
.map-link-mark{margin-left:.3rem;color:var(--accent);font-size:.86em;text-decoration:none;
  display:inline-block}

.know-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.know-card{background:var(--white);border-radius:var(--radius);padding:1.7rem 1.6rem;box-shadow:var(--shadow)}
.know-card h3{font-size:1.1rem;display:flex;align-items:center;gap:.55rem;margin-bottom:.7rem}
.know-card ul{list-style:none;margin:0;padding:0}
.know-card li{font-size:.92rem;color:var(--muted);padding:.4rem 0 .4rem 1.2rem;position:relative}
.know-card li::before{content:"\00b7";position:absolute;left:.3rem;color:var(--accent);
  font-weight:900;font-size:1.2rem;line-height:1.2}

/* Guide page */
.guide-section{margin-bottom:3.2rem}
.guide-section img{border-radius:var(--radius);box-shadow:var(--shadow);margin:1.6rem 0}
.guide-toc{background:var(--white);border-radius:var(--radius);padding:1.8rem 1.7rem;
  box-shadow:var(--shadow);border-top:3px solid var(--accent);margin-bottom:3rem}
.guide-toc h2{font-size:1.25rem;margin-bottom:.9rem}
.guide-toc ol{margin:0;padding-left:1.2rem;color:var(--muted)}
.guide-toc li{margin-bottom:.4rem}
.guide-toc a{color:#8a6a12;text-decoration:none;font-weight:700}
.guide-toc a:hover{text-decoration:underline}

/* Sticky mobile booking bar — landing pages only */
.sticky-book{display:none;position:fixed;left:0;right:0;bottom:0;z-index:150;
  background:var(--primary);border-top:1px solid rgba(201,162,39,.4);
  padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom,0px));
  box-shadow:0 -6px 24px rgba(0,0,0,.28);flex-direction:column;align-items:stretch;gap:.6rem}
.sticky-book.visible{display:flex}
.sticky-book-info{min-width:0;text-align:center}
.sticky-book-title{font-family:var(--font-head);font-size:1.04rem;color:var(--white);
  line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.sticky-book-meta{display:block;margin-top:1px;font-size:.78rem;color:var(--accent);font-weight:700}
.sticky-book .btn{width:100%;padding:.8rem 1.3rem;font-size:.9rem}
/* Homepage variant: a sentence rather than a title + meta pair, so it wraps
   instead of truncating. Same palette, same safe-area padding, same breakpoint. */
.sticky-book-home,.sticky-book-offer{padding-top:.65rem;gap:.5rem}
.sticky-book-copy{display:block;font-size:.82rem;line-height:1.4;color:rgba(255,255,255,.9);
  text-wrap:balance}
.sticky-book-home .btn,.sticky-book-offer .btn{padding:.72rem 1.3rem}

/* Breadcrumbs */
.crumbs{padding:1.1rem 0 0;font-size:.82rem;color:var(--muted)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0}
.crumbs li::after{content:"\203a";margin-left:.5rem;color:var(--accent)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--primary);text-decoration:underline}

/* Footer */
.site-footer{background:var(--primary);color:rgba(255,255,255,.68);padding:4rem 0 2rem;font-size:.92rem}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:3rem;margin-bottom:3rem}
.site-footer h3{color:var(--white);font-family:var(--font-body);font-size:.76rem;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:1.2rem;font-weight:800}
.footer-brand .brand-name{font-size:1.4rem;margin-bottom:.4rem;display:block}
.footer-brand p{max-width:42ch;font-size:.9rem}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.7rem}
.site-footer a{color:rgba(255,255,255,.74);text-decoration:none}
.site-footer a:hover{color:var(--accent)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:1.6rem;text-align:center}
.footer-bottom p{margin:0 0 .4rem;font-size:.85rem}
.affiliate-disclosure{font-size:.78rem;color:rgba(255,255,255,.46);margin-top:6px;
  text-align:center;max-width:88ch;margin-inline:auto}
/* SPECIFICITY TRAP — `.footer-bottom p` (0-1-1) outranks `.affiliate-disclosure`
   (0-1-0) and its margin shorthand resets margin-inline:auto, dumping the block
   flush left while its text stays centred inside. This 0-2-0 rule restores it. */
.footer-bottom .affiliate-disclosure{margin-inline:auto}

/* Responsive */
@media (max-width:960px){
  .about-grid,.meet-grid{grid-template-columns:1fr}
  .booking-card{position:static}
  .split-inner{grid-template-columns:1fr}
  .split-media{min-height:240px;order:-1}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2.4rem}
}
@media (max-width:900px){
  .hamburger{display:block}
  .site-header .header-inner>.lang-switch{display:none}
  .main-nav .nav-lang{display:block;padding:8px 1.4rem 4px;
    border-top:1px solid rgba(255,255,255,.12)}
  .main-nav{display:none;position:fixed;top:var(--header-h);left:0;right:0;
    background:var(--primary);padding:0;box-shadow:0 8px 24px rgba(0,0,0,.25);
    z-index:200;max-height:calc(100vh - var(--header-h));overflow-y:auto;margin-left:0}
  .main-nav.open{display:block}
  body.menu-open{overflow:hidden}
  .main-nav ul{flex-direction:column;align-items:stretch;gap:0;padding:0 0 1rem}
  .main-nav li{border-top:1px solid rgba(255,255,255,.09)}
  .main-nav a{display:block;padding:1rem 1.4rem;border-bottom:none;font-size:1rem}
  .main-nav .nav-cta{border-top:1px solid rgba(255,255,255,.12);margin-top:4px;padding:8px 1.4rem 4px}
  .main-nav .nav-cta a{background:transparent;color:var(--accent);font-weight:700;padding:.8rem 0;border-radius:0}
  .nav-close{display:flex;align-items:center;justify-content:flex-end;padding:10px 18px 6px;
    background:none;border:none;color:rgba(255,255,255,.7);font-size:1.6rem;cursor:pointer;
    width:100%;line-height:1}
  .nav-close:hover{color:var(--white)}
  .footer-grid{grid-template-columns:1fr;gap:2.2rem}
  .btn{width:100%}
  .btn-row{flex-direction:column}
  .card-actions{flex-direction:column}
  .card-actions .btn{width:100%}
  .brand-name{font-size:1.2rem}
  body.has-sticky-book{padding-bottom:132px}
}
@media (min-width:901px){.sticky-book{display:none !important}}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;scroll-behavior:auto !important}}
