/* las-vegas-helicopter-tours.com — "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:#1F3529;        /* primary: headlines & core text */
  --sage:#5A685C;       /* secondary: borders, meta, captions */
  --coral:#A35C2D;      /* tertiary: the single interaction accent */
  --coral-ink:#965429;  /* readable orange (same hue) for link/body text */
  --coral-dk:#7F4722;   /* button hover */
  --neutral:#E8E2D0;    /* page foundation */
  --surface:#F5F1E4;    /* card / panel surface */
  --white:#FFFFFF;
  --line:#D5CEB8;
  --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:"Cormorant Garamond",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:"Cormorant Garamond",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:"Cormorant Garamond",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:"Cormorant Garamond",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:"Cormorant Garamond",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}
.nav a{color:var(--ink);font-family:"Cormorant Garamond",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}
@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 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:"Cormorant Garamond",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}
.hero-copy{max-width:52%}
.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:"Cormorant Garamond",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:"Cormorant Garamond",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:"Cormorant Garamond",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:"Cormorant Garamond",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:"Cormorant Garamond",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:"Cormorant Garamond",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:"Cormorant Garamond",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:"Cormorant Garamond",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:"Cormorant Garamond",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:"Cormorant Garamond",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:"Cormorant Garamond",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:"Cormorant Garamond",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:"Cormorant Garamond",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:"Cormorant Garamond",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:"Cormorant Garamond",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:"Cormorant Garamond",sans-serif;font-weight:700}
table.cmp .rowlabel{font-family:"Cormorant Garamond",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:"Cormorant Garamond",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:"Cormorant Garamond",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:"Cormorant Garamond",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:"Cormorant Garamond",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:"Cormorant Garamond",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:"Cormorant Garamond",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:"Cormorant Garamond",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}
.foot-searches{margin-top:22px;border-top:1px solid #2c2f2f;padding-top:20px}
.foot-searches h4{font-family:"Cormorant Garamond",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:"Cormorant Garamond",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:"Cormorant Garamond",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:"Cormorant Garamond",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:"Cormorant Garamond",sans-serif;font-weight:700;font-size:.86rem;color:var(--ink)}
.t-tour{display:block;font-family:"Cormorant Garamond",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.
   First shipped on yellowstonetourpackages.com. 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) */
.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)}
  .book-bar span{font-size:.85rem;font-weight:600}
  .book-bar .btn{padding:9px 16px;font-size:.85rem}
  body{padding-bottom:58px}
}

/* ==================================================================== */
/* Conversion + EEAT layer (piloted on okavangodeltasafaritours.com)    */

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

/* ==========================================================================
   "FOREST FLOOR" — the design.md system, applied
   ==========================================================================
   Moss, bark, and a ribbon of copper. Deep forest primary, warm bark neutrals,
   one copper accent, Cormorant Garamond over Inter. Everything below overrides
   the scaffold, which was recoloured mechanically by new_site.py and got three
   things wrong that only a human reading design.md would catch:

     1. It set Cormorant Garamond as the font for EVERYTHING - body copy, the
        nav, 0.7rem uppercase labels, table heads. design.md scopes Cormorant to
        display and h1 and gives Inter the body and the labels, and it is right
        to: a light old-style serif at 11px with 0.08em of tracking is not a
        label, it is a smudge.
     2. It requested wght 400;500;600;700;800 from Google. Cormorant Garamond
        tops out at 700, and the request came back carrying ONLY 400 - so every
        heading on the site would have rendered at the single thinnest weight
        the family has. Fixed in build_site.py; verified against the live
        stylesheet, not assumed.
     3. It left the accent as one value. It is never one value. Measured:

            #C9733A (design.md's copper) on #E8E2D0 .... 2.70:1   unreadable
            #C9733A behind cream text ................. 3.10:1   fails a button
            #A35C2D behind cream text ................. 4.50:1   the fill
            #965429 as text on #E8E2D0 ................ 4.51:1   the link colour
            #E0904F on #1F3529 (dark bands) ........... 5.17:1   the inverse

        design.md's "single accent" rule governs which HUE may signal
        interaction. It does not, and cannot, mean one hex: a copper that reads
        on cream is not the copper that reads on forest green. Same ribbon,
        four places it has to survive.
   ========================================================================== */

/* --- (a) TOKENS -----------------------------------------------------------
   Two names for the secondary and two for the accent, because each has a
   contrast floor its other use does not. --line is DECORATIVE ONLY at 1.22:1;
   the moment a hairline becomes the edge of a control it must be --sage-edge
   instead. This is the single most repeated mistake in this system. */
:root{
  --ink:#1F3529;          /* primary: headlines and core text */
  --sage:#5A685C;         /* secondary AS TEXT — 4.54:1 on the page ground */
  --sage-edge:#5C6B5E;    /* secondary AS CONTROL EDGE — design.md's original */
  --coral:#A35C2D;        /* the accent AS A FILL — cream on it is 4.50:1 */
  --coral-ink:#965429;    /* the accent AS TEXT on cream — 4.51:1 */
  --coral-lt:#E0904F;     /* the accent ON THE DARK BANDS — 5.17:1 on ink */
  --coral-dk:#7F4722;     /* hover */
  --copper:#C9733A;       /* design.md's literal copper — LARGE FILLS ONLY */
  --neutral:#E8E2D0;      /* the page foundation */
  --surface:#F5F1E4;      /* card / panel surface */
  --line:#D5CEB8;         /* decorative hairline ONLY — 1.22:1, never a control */
  --r-sm:4px; --r-md:8px; --r-lg:16px;      /* design.md's radii, exactly */
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --body:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --maxw:1120px;
  --prose-w:760px;        /* the measure — single source of truth for alignment */
}

/* --- (b) TYPE -------------------------------------------------------------
   Two faces, two jobs. Cormorant is a light, high-contrast old-style face: at
   400 its hairlines vanish on a warm ground, which is why every display size
   here is 600 and nothing below 1.1rem is Cormorant at all. Inter carries the
   body, the labels, the nav, the buttons and the tables.

   Rag-right per the brief: no justification. */
body{font-family:var(--body);font-size:1rem;line-height:1.65;letter-spacing:0;
     -webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}
h1,h2,.display,.hero h1,.logo{font-family:var(--display);font-weight:600;
     letter-spacing:-.015em;line-height:1.14}
h1,.hero h1{font-size:2.75rem;margin:.1em 0 .45em}
h2{font-size:2rem;margin:2.2em 0 .6em}
.display{font-size:clamp(2.6rem,6vw,4.5rem)}
/* h3 down is Inter: below about 1.2rem Cormorant stops being elegant and
   starts being faint, and h3 does structural work rather than display work. */
h3{font-family:var(--body);font-size:1.12rem;font-weight:650;letter-spacing:-.005em;
   line-height:1.4}
h4{font-family:var(--body)}
p,li,dd,dt,td,th{font-family:var(--body)}
p{margin:0 0 1.1em;max-width:74ch}        /* measure, not container width */
body,p,li,dd,td{font-weight:400}
strong,b{font-weight:650}

/* design.md's label: Inter 0.75rem at 0.08em. Scoped to the things that are
   actually labels, and given the weight back that the tracking takes away. */
.label,h4,.eyebrow,th,.badge,.book-chip,.kf-label,.facts-label,.nav a,.btn,
.lang-chip,.crumbs,.tip-label,.chips-label,.rev-more,.cmp-badge,.filler-label{
  font-family:var(--body);
  font-weight:600;
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.label,h4,.eyebrow{color:var(--sage);margin:0 0 .6em}
figcaption{font-family:var(--body);font-size:.78rem;letter-spacing:0;
  text-transform:none;color:var(--sage);font-weight:500}
/* The nav and the buttons take a tighter cut: 0.08em across six uppercase
   items in German is what pushes a header into a second row. */
.nav a,.btn{letter-spacing:.05em;font-size:.72rem}

/* --- (c) GROUND -----------------------------------------------------------
   The scaffold paints the page white and the cards near-white. design.md
   inverts that: the warm neutral IS the page ("let Neutral carry the
   composition"), and --surface is the slightly lighter card on top of it. */
body{background:var(--neutral);color:var(--ink)}
.site-head,.card,.tour,.panel,.answer-box,.faq,.prices,.keyfacts,
.testimonial,.t-card,.facts-strip,.includes,.price-anchor{background:var(--surface)}

/* --- (d) RULES AND EDGES --------------------------------------------------
   Hairlines, not boxes; but a hairline at 1.22:1 cannot be the edge of
   anything a person has to find and click. Rules use --line, controls use
   --sage-edge. There is no third option. */
hr,.faq details,thead th,.t-card figcaption{border-color:var(--line)}
.btn,select,input,.lang-chip,.chip{border-color:var(--sage-edge)}

/* --- (e) THE ONE ACTION ---------------------------------------------------
   design.md: "use Tertiary for exactly one action per screen." The primary CTA
   is a copper fill with cream on it at 4.50:1; every secondary action is the
   same hue as an outline, which keeps the single-accent rule while leaving
   exactly one filled button per screen. */
.btn{
  background:var(--coral);color:var(--surface);border:1px solid var(--coral);
  border-radius:var(--r-md);padding:12px 20px;
  transition:background .15s,border-color .15s;
}
.btn:hover{background:var(--coral-dk);border-color:var(--coral-dk);color:var(--surface)}
.btn.ghost,.btn-secondary{
  background:transparent;color:var(--coral-ink);border:1px solid var(--sage-edge);
}
.btn.ghost:hover,.btn-secondary:hover{background:rgba(163,92,45,.08);color:var(--coral-ink)}
a{color:var(--coral-ink)}

/* --- (f) FOREGROUNDS ON THE DARK BANDS ------------------------------------
   Forest green is a dark ground, and on it the page's own accent is 2.3:1.
   Everything that sits on --ink switches to the cream or to the light copper,
   which is the same ribbon with figure and ground swapped, not a second
   accent. */
.ladder-col,.ia-takeaways,.book-bar,.pa-now,.site-foot,.sc-score{
  color:var(--neutral);
}
.ladder-price,.ia-takeaways b,.pa-now .pa-price,.sc-big{color:var(--coral-lt)}
.ia-takeaways a,.book-bar a,.site-foot a{
  color:var(--neutral);
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.2em;text-decoration-color:rgba(232,226,208,.6);
}
.ia-takeaways a:hover,.site-foot a:hover{text-decoration-color:var(--neutral);color:#fff}
.ia-takeaways li::before{color:var(--coral-lt)}
thead th{background:var(--ink);color:var(--neutral)}

/* --- (g) LABELS THAT SIT ON PHOTOGRAPHS -----------------------------------
   A chip over an image cannot borrow the page's contrast — it has to carry its
   own ground. Solid ink at 0.9 with cream on it is 10.9:1 against its own fill
   and legible over any photograph underneath. The copper stays for the chips
   that sit on the PAGE, where it has a known ground to be measured against. */
.badge,.cmp-badge,.fee-badge{
  background:rgba(31,53,41,.9);color:var(--neutral);
  border:0;border-radius:var(--r-sm);padding:5px 10px;letter-spacing:.06em;
}
.book-chip{
  background:var(--coral);color:var(--surface);border:0;border-radius:var(--r-sm);
  padding:6px 14px;left:24px;letter-spacing:.08em;
}
.tour-filler .filler-label{background:rgba(245,241,228,.9);color:var(--sage)}

/* --- (h) THE HERO IS A PHOTOGRAPH OF A WHITE STAIRCASE --------------------
   Which is the hardest possible background for white type: the subject of
   every good Bom Jesus photograph is bright granite and whitewash in daylight.
   One flat wash either fails at the top or muddies the picture, so there are
   two layers — a full-height veil that lifts the whole image off white, and a
   left-weighted gradient over the third the copy actually occupies. The
   stairway stays readable on the right, where it belongs. */
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(31,53,41,.88) 0%,rgba(31,53,41,.76) 38%,
                             rgba(31,53,41,.3) 68%,rgba(31,53,41,.16) 100%);
}
.hero::after{
  height:100%;
  background:linear-gradient(180deg,rgba(31,53,41,.36) 0%,rgba(31,53,41,.18) 45%,
                             rgba(31,53,41,.64) 100%);
}
.hero .wrap,.hero-inner,.hero h1,.hero .lede,.hero-trust,.hero .eyebrow{
  position:relative;z-index:2}
.hero h1,.hero .lede,.hero-trust{text-shadow:0 1px 2px rgba(0,0,0,.45)}
.hero,.hero h1,.hero .lede,.ladder-col,.ia-takeaways,.book-bar,.price-anchor,
.site-foot,thead th,.badge,.book-chip,.cmp-badge,.sc-score{
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
/* On a dark hero the primary action must be the brightest thing on screen.
   Copper on forest green is 2.3:1 — a button nobody sees. Cream fill, ink
   text, 10.1:1. */
.hero .btn{background:var(--neutral);color:var(--ink);border-color:var(--neutral)}
.hero .btn:hover{background:#fff;border-color:#fff;color:var(--ink)}
.hero .btn.ghost{background:transparent;color:var(--neutral);border-color:var(--neutral)}
.hero .btn.ghost:hover{background:rgba(232,226,208,.16);color:#fff}

/* --- (i) A LINK NEEDS A SECOND SIGNAL -------------------------------------
   Body ink is 10.1:1 and the accent is 4.5:1 against the same ground: a real
   step, but a step within one warm hue, and useless to a reader who cannot
   separate brown from green. design.md reserves the one accent for
   interaction and that stands — colour just cannot be the ONLY carrier of
   "this is a link". */
.prose a,.faq-body a,.answer-box a,.honest-guide a,.keyfacts a,
.route a,.check a,.tip a,.callout a,li a{
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.16em;text-decoration-color:rgba(150,84,41,.45);
}
.prose a:hover,.faq-body a:hover,.answer-box a:hover,.honest-guide a:hover{
  text-decoration-color:var(--coral-ink);
}
.btn,.nav a,.lang-chip,.tour,.tour a,.foot-grid a,.foot-searches a,
.explore-links a,.crumb a,.badge,.book-chip,a.tour{text-decoration:none}
.foot-grid a:hover,.foot-searches a:hover,.explore-links a:hover{text-decoration:underline}

/* --- (j) EVERY SECTION HEAD STARTS ON THE SAME LINE ------------------------
   Three homepage sections break out of the measure to a wider band so their
   grids can run three-up, and the scaffold centres each of their heads inside
   that band. The result is introductory text starting at three different x
   positions down one page. The rule here: ALL INTRODUCTORY TEXT STARTS ON THE
   PROSE COLUMN'S LEFT EDGE, whatever width the block underneath happens to be.
   Each breakout head takes an inset of half the difference between its band
   and the measure, which lands it exactly on that edge; the grids keep their
   full width, which is what the width was bought for. Where a band is no wider
   than the measure the difference goes negative and the inset clamps to zero,
   so nothing moves on a phone.

   Heads inside a PANEL are exempt — the takeaways box and the includes card
   are components with their own padding, and their heading belongs to the box. */
:root{
  --band-w:min(1180px,94vw);
  --col-w:min(var(--prose-w),calc(100vw - 44px));
  --head-inset:max(0px,calc((var(--band-w) - var(--col-w)) / 2));
  --wrap-w:min(calc(var(--maxw) - 44px),calc(100vw - 44px));
  --wrap-inset:max(0px,calc((var(--wrap-w) - var(--col-w)) / 2));
}
.prose{max-width:var(--prose-w)}
.photo-wide-head,.testimonials>h2,.testimonials>.t-lead,.t-foot,
.real-strip>h2,.real-strip>p{
  text-align:left;
  margin-left:var(--head-inset);
  margin-right:var(--head-inset);
}
.photo-wide-head{max-width:none;margin-bottom:1.2em}
.testimonials>h2{margin-top:0;margin-bottom:.25em}
.testimonials>.t-lead{margin-bottom:1.4em}
.t-foot{margin-top:1.4em;margin-bottom:0}
.real-strip>h2{margin-top:0}
.real-strip>p{margin-top:4px;max-width:none}
.ladder-band .wrap>h2,.ladder-band .wrap>p{
  text-align:left;margin-left:var(--wrap-inset);margin-right:var(--wrap-inset);
}

/* --- (k) THE FAQ NEEDS A MARGIN -------------------------------------------
   The scaffold's disclosure rows sit flush against the panel edge, so the text
   touches the rule that separates it from the next question. */
.faq details{padding:2px 0}
.faq summary{padding:16px 40px 16px 20px}
.faq summary::after{right:18px;top:14px;color:var(--coral-ink)}
.faq-body{padding:0 20px 16px}
.faq-body p+p{margin-top:.8em}

/* --- (l) THE LANGUAGE SWITCHER --------------------------------------------
   Five languages, which is two more than the header was designed for, and the
   German nav is the longest of the five. Measured contrasts, on --surface:

       --sage  #5A685C  ....  5.21:1   the resting chip
       --ink   #1F3529  ...  11.62:1   the current chip
       --sage-edge as the border, never --line: a chip is a control, and
       --line is a 1.22:1 decorative hairline.

   The current chip is filled rather than merely coloured, because five chips
   in a row need the selected one to be findable without comparing shades. */
.lang-bar{
  display:flex;align-items:center;gap:2px;flex:0 0 auto;
  margin-left:14px;margin-right:auto;
}
.lang-chip{
  display:inline-block;padding:5px 8px;border-radius:var(--r-sm);
  color:var(--sage);border:1px solid transparent;
  font-family:var(--body);font-weight:600;font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase;line-height:1;text-decoration:none;
}
.lang-chip:hover{color:var(--ink);border-color:var(--sage-edge);text-decoration:none}
.lang-chip.is-current{
  background:var(--ink);color:var(--neutral);border-color:var(--ink);
}
.lang-chip.is-current:hover{color:#fff}
.site-foot .lang-bar{margin:14px 0 0}
.site-foot .lang-chip{color:#C9CCC7}
.site-foot .lang-chip.is-current{background:var(--neutral);color:var(--ink);border-color:var(--neutral)}

/* --- (m) A HEADER THAT SURVIVES FIVE LANGUAGES ----------------------------
   The switcher adds five chips to a row that already carries a logo, six nav
   items and a button, and German sets the width: "Standseilbahn" is 13
   characters where English has "Funicular" at 9. Rather than guess a
   breakpoint, qa_battery measures the header at thirteen widths in all five
   languages and fails the build if any of them wraps to a second row.

   The collapse point sits high on purpose. Below it the nav becomes a
   disclosure and the chips stay visible, because a reader who cannot find
   their own language leaves. */
@media(min-width:1101px){
  .site-head .wrap{gap:20px;row-gap:4px}
  .nav{gap:16px}
}
@media(min-width:1400px){
  .site-head .wrap{gap:26px}
  .nav{gap:22px}
}
@media(max-width:1100px){
  .lang-bar{order:1;margin-left:10px;margin-right:auto}
  .lang-chip{padding:5px 6px;font-size:.66rem;letter-spacing:.04em}
}
@media(max-width:520px){
  .lang-chip{padding:4px 5px;font-size:.62rem;letter-spacing:.02em}
}

/* --- (n) THE FOUR GREYS THE RECOLOUR NEVER TOUCHED ------------------------
   The contrast gate found forty text nodes at exactly 4.10:1, which is a
   suspiciously round repeat, and a repeated number means one colour rather
   than forty mistakes. Computing the candidates found it: #8d918c on the
   forest-green footer is 4.10:1 exactly. It is hardcoded in four scaffold
   rules - the footer answer labels, the footer fact labels, the footer search
   heading and the footer bottom line - so new_site.py's recolour pass, which
   only rewrites the token values, never saw it.

   #9AA09A is 4.92:1 on the same ground, still reads as a muted grey, and
   clears the 4.5:1 floor with margin at the 10-12px these labels use.

   The same rules also set Cormorant Garamond on 10px uppercase text with
   0.1em of tracking, and beat section (b)'s Inter rule on specificity. A light
   old-style serif at that size is not a label. */
.foot-answers .label,
.foot-facts .kf-label,.foot-facts .label,
.foot-searches h4,
.foot-bottom{
  color:#9AA09A;
  font-family:var(--body);
}
.foot-bottom a{color:#C9CCC7}
.foot-bottom a:hover{color:#fff}