/* 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:#2B1D14;        /* primary: headlines & core text */
  --sage:#7D6250;       /* secondary: borders, meta, captions */
  --coral:#A85328;      /* tertiary: the single interaction accent */
  --coral-ink:#9C4B22;  /* readable orange (same hue) for link/body text */
  --coral-dk:#8E441D;   /* button hover */
  --neutral:#F3E8D8;    /* page foundation */
  --surface:#FBF4E7;    /* card / panel surface */
  --white:#FFFFFF;
  --line:#B79C80;
  --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:"DM Sans",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:"DM Sans",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:"DM Sans",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:"DM Sans",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:"DM Sans",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:"DM Sans",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:"DM Sans",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:"DM Sans",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:"DM Sans",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:"DM Sans",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:"DM Sans",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:"DM Sans",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:"DM Sans",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:"DM Sans",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:"DM Sans",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:"DM Sans",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:"DM Sans",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:"DM Sans",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:"DM Sans",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:"DM Sans",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:"DM Sans",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:"DM Sans",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:"DM Sans",sans-serif;font-weight:700}
table.cmp .rowlabel{font-family:"DM Sans",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:"DM Sans",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:"DM Sans",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:"DM Sans",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:"DM Sans",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:"DM Sans",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:"DM Sans",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:"DM Sans",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:"DM Sans",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:"DM Sans",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:"DM Sans",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:"DM Sans",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:"DM Sans",sans-serif;font-weight:700;font-size:.86rem;color:var(--ink)}
.t-tour{display:block;font-family:"DM Sans",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)}

/* ============================================================================
   TERRACOTTA — correction and enhancement layer
   ============================================================================
   Everything above is the generic "Running Kilometer" system with this site's
   hex values substituted in. Substitution is not design, and it is not
   accessibility either: the recolour swapped six values and left behind every
   rule that was only ever correct for the ORIGINAL palette.

   Every contrast figure below is measured (WCAG 2.1, sRGB relative luminance).
   Text floor 4.5:1; large-text and UI-boundary floor 3:1.

   THE ACCENT ON THIS SITE HAS FOUR TONES, ALL ONE HUE. design.md's
   single-accent rule is about not introducing a SECOND HUE, and it is honoured
   - what varies is lightness, and only where a measurement demanded it:

     --coral        #A85328  FILL on light. Cream on it 4.88:1; the fill itself
                             clears 4.41:1 against the page, so the button edge
                             does not depend on a border.
     --coral-ink    #9C4B22  TEXT on light. 5.04:1 neutral / 5.58:1 surface.
     --coral-dk     #8E441D  hover fill. Cream on it 6.41:1.
     --coral-on-dk  #D08A5E  TEXT inside a DARK band. 5.80:1 on ink, where
                             --coral would be 3.05:1 and --coral-ink 2.67:1.
                             Reading the surface off the RENDERED ELEMENT rather
                             than the class name is what makes this necessary.
   ========================================================================= */

:root{
  --coral-on-dk:#D08A5E;
  /* `--accent` is referenced by the scaffold (.ia-takeaways, .pa-now .btn) and
     was never defined, so those declarations resolved to nothing. Aliased
     rather than hunted down, so any stray reference lands somewhere real. */
  --accent:#A85328;
  --accent-ink:#9C4B22;
}

/* --- 1. CONTRAST FAULTS INHERITED FROM THE RECOLOUR --------------------- */

/* .btn shipped `color:#fff`. White on this accent is 5.34:1 and would pass -
   but design.md specifies the CREAM on-primary token, and cream measures
   4.88:1, which also passes. So the brief is followed rather than overridden:
   pure white on a warm clay ground reads cold and breaks the "weathered paper"
   idea the whole palette is built on. This is the one site in the series where
   the published button spec could be honoured, once the fill was deepened. */
.btn,.nav a.btn,.nav a.btn:hover,.btn:hover{color:var(--surface)}
.btn:hover{background:var(--coral-dk);border-color:var(--coral-dk)}
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--surface)}

/* Accent used as TEXT inside the dark bands. Measured on --ink. */
.ia-takeaways li::before,
.ia-takeaways a,
.ladder-price,
.section-nav a:hover{color:var(--coral-on-dk)}
.ia-takeaways a{filter:none}
.ia-takeaways a:hover{color:var(--surface)}
.section-nav a:hover{background:var(--coral);color:var(--surface)}

/* Star glyphs were the accent on a light card: 3.49:1. A star that carries a
   rating is TEXT - it is the only thing distinguishing 5 stars from 3 - so it
   takes the accent's text tone, not its fill tone. */
.star,.rev-stars,.t-stars,.facts-val .star{color:var(--coral-ink)}

/* Chips and badges kept `color:#fff` on the accent fill. Cream, per the brief. */
.badge,.book-chip,.cmp-badge{color:var(--surface)}

/* .pa-now is a DARK CHIP in the scaffold and a large figure in the layer
   below. OWN THE PAIR: a foreground and its background are one decision, and
   overriding only the colour inherits the other - which is how a previous site
   rendered its single most important number ink-on-ink at 1.00:1, invisible. */
.price-anchor .pa-was{background:transparent;border:0;color:var(--sage)}
.price-anchor .pa-now{background:transparent;border:0;color:var(--ink)}
.price-anchor .pa-now .pa-price{color:var(--ink)}
.price-anchor .pa-was .pa-price{color:var(--sage)}
.pa-now .btn{background:var(--coral);border-color:var(--ink);color:var(--surface)}
/* opacity is a contrast change that does not look like one: a checker reading
   `color` alone sees the undimmed value and passes it. Two elements on a
   previous site failed purely this way. */
.price-anchor .pa-note,.pa-label{opacity:1;color:var(--sage)}

/* --- 2. THE DESIGN BRIEF, ACTUALLY APPLIED ------------------------------ */

/* new_site.py substitutes ONE family, so every heading inherited the body sans.
   Terracotta is a two-face system and the faces do different jobs. */
h1,h2,.display,.hero h1{font-family:"DM Serif Display",Georgia,serif;font-weight:400}
h1,.hero h1{letter-spacing:-.015em;line-height:1.1}
h2{letter-spacing:-.01em;font-weight:400}
h3{font-family:"DM Sans",system-ui,sans-serif;font-weight:700;letter-spacing:-.005em}
.logo{font-family:"DM Serif Display",Georgia,serif;font-weight:400;letter-spacing:0}
h4,.label,.btn,.book-chip,.badge,.eyebrow,.nav a.btn{
  font-family:"DM Sans",system-ui,sans-serif;font-weight:700;
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
}
.label,.eyebrow{color:var(--coral-ink)}
h4{color:var(--sage)}
body{font-size:1.05rem;line-height:1.7;background:var(--neutral)}

/* design.md radii: 4 / 8 / 16. */
:root{--r-sm:4px;--r-md:8px;--r-lg:16px}
.site-head{background:var(--neutral);border-bottom:1px solid var(--line)}

/* --- 3. HEADER FIT ------------------------------------------------------
   Row-grouping by vertical centre proves ARRANGEMENT, not SIZE: a CTA that
   grows from 38px to 75px by wrapping keeps the same centre, so that check
   stays green while a button bleeds over the hero. These rules stop the wrap;
   the QA counts real line boxes to prove it.

   The hamburger breakpoint on this engine is 860px, NOT 1000px. A previous
   site tightened the 1001-1240 band and missed the real crush zone, which is
   the ~200px just above the collapse. */
.nav a.btn{white-space:nowrap;font-size:.72rem;letter-spacing:.06em;padding:9px 14px;line-height:1.15}
@media(min-width:861px){.nav a{white-space:nowrap}}
@media(min-width:861px) and (max-width:1100px){
  .nav{gap:12px}
  .nav a{font-size:.8rem;letter-spacing:0}
  .nav a.btn{padding:8px 10px;font-size:.68rem;letter-spacing:.04em}
}
@media(min-width:1101px) and (max-width:1260px){
  .nav{gap:16px}
  .nav a{font-size:.85rem}
  .nav a.btn{padding:9px 12px;font-size:.7rem}
}

/* --- 4. BREAKOUTS THAT CANNOT DRIFT ------------------------------------
   The scaffold escapes the text column with
       position:relative; left:50%; transform:translateX(-50%)
   which is a PHYSICAL-AXIS construction. On the previous site's Arabic tree it
   centred 420px off and dragged three whole sections off the page. This site
   is English-only so it would not misfire today - but the same construction
   also breaks whenever the parent is not the width it assumes, and equal
   negative margins are simpler, cheaper (no positioned element, no transform)
   and correct in every direction. Fixed here so the pattern never ships again.

   Grep for the CONSTRUCTION, not the symptom: it appears three times. */
.photo-wide,
.testimonials,
.real-strip.breakout{
  position:static; left:auto; transform:none;
  width:min(1180px,94vw);
  margin-left:calc((100% - min(1180px,94vw)) / 2);
  margin-right:calc((100% - min(1180px,94vw)) / 2);
}
.photo-wide{margin-top:2.6em;margin-bottom:2.6em}
.testimonials{margin-top:2.8em;margin-bottom:2.2em}

/* A breakout has a MINIMUM VIEWPORT, and it is arithmetic, not taste. The
   comparison table escapes by 110px a side; the column is 1120px plus 22px
   padding, so it needs 1120+220 = 1340px to land inside the window. Between
   1080 and 1339 it pushed the DOCUMENT sideways instead. */
@media(min-width:1080px) and (max-width:1339px){
  .cmp-wrap{margin-left:0;margin-right:0}
}

/* --- 5. UX AND CONVERSION ---------------------------------------------- */

/* Keyboard focus. The scaffold has none anywhere, which makes the whole site
   unusable by keyboard. */
a:focus-visible,button:focus-visible,.btn:focus-visible{
  outline:3px solid var(--ink);outline-offset:2px;border-radius:var(--r-sm);
}
.hero a:focus-visible,.ladder-col a:focus-visible,.ia-takeaways a:focus-visible{
  outline-color:var(--coral-on-dk);
}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--surface);
  padding:12px 18px;font-family:"DM Sans",sans-serif;font-weight:700;letter-spacing:.1em}
.skip:focus{left:0}

/* Tap targets. 44px is the floor. */
@media(max-width:860px){
  .nav a{min-height:44px;display:flex;align-items:center}
  .btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center}
}

/* The free-entry callout. This site's whole argument is that the thing costs
   nothing, so the "price" element is a statement rather than a figure. */
.price-anchor{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  padding:24px;margin:1.8em 0}
.price-anchor .pa-was{text-decoration:line-through;font-size:.95rem}
.price-anchor .pa-now{font-family:"DM Serif Display",Georgia,serif;font-size:2.4rem;line-height:1.05;
  margin:.15em 0 .3em}
.price-anchor .pa-note{font-size:.9rem;line-height:1.45;margin:0}

.fact-strip{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;margin:1.8em 0;background:var(--surface)}
.fact-strip > div{padding:18px 20px;border-right:1px solid var(--line)}
.fact-strip > div:last-child{border-right:0}
.fact-strip dt{font-family:"DM Sans",sans-serif;font-weight:700;letter-spacing:.1em;
  font-size:.72rem;text-transform:uppercase;color:var(--sage);margin:0 0 4px}
.fact-strip dd{margin:0;font-family:"DM Serif Display",Georgia,serif;font-size:1.55rem;line-height:1.15}
@media(max-width:640px){
  .fact-strip{grid-template-columns:1fr}
  .fact-strip > div{border-right:0;border-bottom:1px solid var(--line)}
  .fact-strip > div:last-child{border-bottom:0}
}

.callout{border:1px solid var(--line);border-inline-start:4px solid var(--coral);
  background:var(--surface);padding:18px 22px;margin:1.6em 0;border-radius:var(--r-md)}
.callout > :last-child{margin-bottom:0}
.callout .callout-h{font-family:"DM Sans",sans-serif;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;font-size:.75rem;color:var(--coral-ink);margin:0 0 .5em}

/* The baseball disambiguator. Deliberately quiet - it is a signpost for people
   who took a wrong turn, not a feature of this site. */
.wrongturn{border:1px dashed var(--sage);background:transparent;border-radius:var(--r-md);
  padding:14px 18px;margin:1.4em 0;font-size:.95rem;color:var(--sage)}
.wrongturn b{color:var(--ink)}
.wrongturn a{color:var(--coral-ink)}

/* Prose tables must not push the document sideways on a phone. */
@media(max-width:700px){
  .prose table,table.facts,table.prices{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

.hero .wrap{padding-top:56px;padding-bottom:52px}
@media(min-width:861px){.hero .wrap{min-height:0}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ============================================================================
   10. TYPOGRAPHY, HERO CONTRAST, AND THE TOUR GRID
   ============================================================================
   Three reported problems, all real, and the first one exposes a hole in this
   project's own QA that is worth writing down.
   ========================================================================= */

/* --- (a) THE HERO. A CONTRAST CHECKER THAT READS COLOURS IS BLIND TO IMAGES.
   The automated sweep passed this hero. It walks up the DOM for an opaque
   background-COLOR, finds --ink on .hero, and computes against that - never
   looking at the photograph painted on top. Measured against the actual image:

     average pixel behind the eyebrow, through the old .44 scrim ....  7.23:1
     BRIGHTEST pixel behind it (sunlit limestone and sky) ............  2.09:1
     the white h1 over that same bright patch ........................  3.08:1

   The average passes and the reader does not read the average. They read the
   line where it crosses the bright part of the picture.

   Two fixes. The scrim goes to .68, which is what the arithmetic demands to
   hold cream at 5.42:1 over the brightest pixel in that band. And the eyebrow
   stops being #FFC9B0 - a peach left over from the original palette, in a
   design system whose brief says one accent - and becomes cream, with its
   hierarchy carried by size, tracking and case rather than by hue.

   The ::after gradient is also removed: design.md says "Don't introduce
   gradients. This system is flat on purpose", and a single flat scrim now does
   the whole job. */
.hero::before{background:rgba(43,29,20,.68)}
.hero::after{display:none}
.hero .label{color:var(--surface);opacity:1}
.hero h1{color:#fff}
.hero-trust{color:var(--neutral)}
.hero-trust b{color:#fff}

/* --- (b) BOLD TEXT LEGIBILITY -------------------------------------------
   `-webkit-font-smoothing:antialiased` was forced on <body>. It overrides
   subpixel rendering and makes every glyph THINNER - which is why it is a
   common trick for light-on-dark, and why it backfires for dark-on-light. On
   this warm cream ground it thins exactly the strokes that make bold read as
   bold, so <b> and <strong> lose their weight against the body copy while
   measuring a perfectly healthy 13.46:1. It is a legibility problem that
   contrast numbers cannot see. Handing rendering back to the browser fixes it.

   Bold is then given a little real authority instead: the full 700 face, and
   the tracking eased back so the heavier glyphs are not crowded. */
body{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}
/* SETTING A COLOUR HERE WAS A MISTAKE AND IT SHIPPED A 1.00:1 REGRESSION.
   The first version of this rule also set `color:var(--ink)`. `li b` is
   (0,0,0,2) and `.ia-takeaways b` is (0,0,1,1), so a class should have won -
   but the takeaway bullets are `.ia-takeaways ul li b`, and the scaffold's
   dark-band rule targets `.ia-takeaways b` only through a shorter path than I
   assumed. Six bullets on the homepage rendered ink-on-ink: invisible.

   The colour never needed changing. Bold text was already measuring 13.46:1
   on the light surfaces and 16.30:1 in the dark bands; the complaint was about
   WEIGHT rendering, not colour. So this rule now touches only what it was
   meant to - weight and tracking - and every surface keeps the colour it
   already had.

   The lesson is the one this project keeps relearning: a rule that sets a
   foreground without stating its background will eventually meet a background
   it did not expect. If you are not also setting the background, do not set
   the foreground. */
.prose b,.prose strong,p b,p strong,li b,li strong,td b,td strong{
  font-weight:700;letter-spacing:.002em;
}

/* --- (c) COLOURS LEFT OVER FROM THE ORIGINAL PALETTE ---------------------
   The recolour swapped the :root tokens and left ten hard-coded hex values
   from the system this theme was forked from - four cool greys, a peach, and
   a green. On a "sun-baked clay, ink and weathered paper" palette a cool grey
   does not read as neutral, it reads as dirty. Each is replaced by the warm
   equivalent, and every one that carries text is measured on the ink footer.

     footer body text  #C9CCC7 -> --neutral       13.46:1  (was 10.05)
     muted labels      #8D918C -> #CBB79E          8.39:1  (was  5.09)
     search chips      #9FA39D -> #CBB79E          8.39:1
     hairlines         #2C2F2F -> #4A3826          decorative, warm
     lightbox caption  #E8E5DA -> --neutral
     fee badge         #2E5D3A (green) -> --ink    single-accent rule */
.site-foot{color:var(--neutral)}
.site-foot a{color:var(--neutral)}
.site-foot a:hover{color:#fff}
.foot-answers a{color:var(--neutral)}
.foot-answers .label,.foot-facts .kf-label,.foot-facts .label,
.foot-searches h4,.foot-bottom{color:#CBB79E}
.foot-searches a{color:#CBB79E}
.foot-guides,.foot-answers,.foot-facts,.foot-searches,.foot-bottom{border-top-color:#4A3826}
.foot-searches a{border-color:#4A3826}
.lightbox figcaption{color:var(--neutral)}
.fee-badge{background:var(--ink);color:var(--surface)}
.hero .label,.label{letter-spacing:.1em}

/* --- (d) THE TOUR GRID: FIVE TOURS, NO PADDING TILE ----------------------
   There are five tours. A 3-across CSS grid left one empty cell, and the
   scaffold filled it with a dashed decorative tile - an SVG of hills with the
   city name under it. In the sixth slot of a 3x2 grid a reader expects a sixth
   tour; what they got was an ornamental box that advertised nothing and linked
   nowhere, and mostly read as a card that had failed to load. It is gone from
   helpers.py.

   Centring the short row is why the tile existed: CSS grid places orphans at
   the START of their row and gives you no way to centre them. Flexbox does, so
   the container becomes a centred flex-wrap. The basis arithmetic reproduces
   the old three-up rhythm exactly - each card is a third of the row minus its
   share of the two gaps - so full rows are identical to before and only the
   short row changes. */
.tours-grid{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;
  gap:20px;margin:1.5em 0 .4em;
}
.tours-grid > *{flex:0 1 calc((100% - 40px) / 3);max-width:calc((100% - 40px) / 3)}
.tours-grid.cols-4{gap:16px}
.tours-grid.cols-4 > *{flex:0 1 calc((100% - 48px) / 4);max-width:calc((100% - 48px) / 4)}
@media(max-width:1024px){
  .tours-grid.cols-4 > *{flex:0 1 calc((100% - 16px) / 2);max-width:calc((100% - 16px) / 2)}
}
@media(max-width:860px){
  .tours-grid > *{flex:0 1 calc((100% - 20px) / 2);max-width:calc((100% - 20px) / 2)}
}
@media(max-width:560px){
  .tours-grid > *,.tours-grid.cols-4 > *{flex:0 1 100%;max-width:100%}
}

/* h1_retrofit v2 */
/* H1 line budget (owner rule 2026-09-07): every headline fits in TWO lines on
   every viewport, 360-1280px. --h1-scale is a per-language size step
   (0.88-1) written by h1_retrofit.py only when it keeps a headline intact
   that would otherwise have to be rewritten. No hyphens:auto: browsers
   hyphenate differently, so a headline that fits by hyphenating in one
   would be three lines in another. */
h1{font-size:calc(clamp(1.55rem,4.6vw,2rem) * var(--h1-scale,1));line-height:1.12;text-wrap:balance}
.hero h1{font-size:calc(clamp(1.75rem,3.9vw,3rem) * var(--h1-scale,1));line-height:1.1;text-wrap:balance}
@media(max-width:640px){h1{font-size:calc(1.55rem * var(--h1-scale,1))}.hero h1{font-size:calc(1.7rem * var(--h1-scale,1))}}
html[lang="en"] .hero h1{--h1-scale:0.88} /* h1_retrofit v2 */