/* 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:#2A1B10;        /* primary: headlines & core text */
  --sage:#7A6648;       /* secondary: borders, meta, captions */
  --coral:#C77A2B;      /* tertiary: the single interaction accent */
  --coral-ink:#8E4D10;  /* readable orange (same hue) for link/body text */
  --coral-dk:#BF7326;   /* button hover */
  --neutral:#F4E9D1;    /* page foundation */
  --surface:#FBF2DE;    /* card / panel surface */
  --white:#FFFFFF;
  --line:#B9A272;
  --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:"Libre Caslon Text",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:"Libre Caslon Text",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:"Libre Caslon Text",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:"Libre Caslon Text",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:"Libre Caslon Text",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:"Libre Caslon Text",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:"Libre Caslon Text",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:"Libre Caslon Text",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:"Libre Caslon Text",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:"Libre Caslon Text",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:"Libre Caslon Text",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:"Libre Caslon Text",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:"Libre Caslon Text",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:"Libre Caslon Text",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:"Libre Caslon Text",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:"Libre Caslon Text",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:"Libre Caslon Text",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:"Libre Caslon Text",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:"Libre Caslon Text",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:"Libre Caslon Text",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:"Libre Caslon Text",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:"Libre Caslon Text",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:"Libre Caslon Text",sans-serif;font-weight:700}
table.cmp .rowlabel{font-family:"Libre Caslon Text",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:"Libre Caslon Text",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:"Libre Caslon Text",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:"Libre Caslon Text",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:"Libre Caslon Text",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:"Libre Caslon Text",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:"Libre Caslon Text",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:"Libre Caslon Text",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:"Libre Caslon Text",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:"Libre Caslon Text",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:"Libre Caslon Text",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:"Libre Caslon Text",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:"Libre Caslon Text",sans-serif;font-weight:700;font-size:.86rem;color:var(--ink)}
.t-tour{display:block;font-family:"Libre Caslon Text",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)}

/* ============================================================================
   RECORD SLEEVE — correction and enhancement layer
   ============================================================================
   Everything above this line is the generic "Running Kilometer" system with
   this site's colours substituted in. Substitution is not design, and it is not
   accessibility either: the recolour swapped six hex values and left behind
   three rules that were only ever correct for the ORIGINAL palette. Those are
   fixed first, then the design.md brief is actually applied, then the UX work.

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

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

/* .btn shipped `color:#fff` on the accent fill. White on #C77A2B is 3.36:1 -
   a fail for button text at this size. Dark ink on the same fill is 4.95:1,
   and on a 1970s ochre sleeve it is the more period-correct choice anyway.
   This is a deliberate departure from design.md, which specifies the cream
   on-primary token here; that combination measures 3.02:1. */
.btn,.nav a.btn,.nav a.btn:hover,.btn:hover{color:var(--ink)}
.btn{border-color:var(--ink)}          /* the boundary is the border, not the fill */
.btn:hover{background:var(--coral-dk);border-color:var(--ink)}

/* `--accent` is referenced by .pa-now .btn but was never defined in :root, so
   the declaration resolved to nothing and the button rendered ink-on-ink at
   1.00:1 - invisible. Same class of bug shipped on a previous site. Aliased
   rather than deleted, so any other stray reference also lands somewhere real. */
:root{--accent:#C77A2B;--accent-ink:#8E4D10}
.pa-now .btn{background:var(--coral);border-color:var(--ink);color:var(--ink)}

/* Inside the dark ladder band the accent inverts: #C77A2B on #2A1B10 is 4.95:1
   and reads well, whereas --coral-ink (the light-background text tone) drops to
   2.2:1 there. An accent has a fill tone AND a text tone, and which one is
   correct depends on the surface actually rendered, not on the class name. */
.ladder-col.feat{background:var(--surface);color:var(--ink)}
.ladder-col.feat .ladder-price,.ladder-col.feat h3{color:var(--coral-ink)}
.ladder-price{color:var(--coral)}
.ladder-col .btn.ghost{border-color:var(--coral);color:var(--coral)}
.ladder-col .btn.ghost:hover{background:var(--coral);color:var(--ink)}

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

/* new_site.py can only substitute ONE family, so every heading, label and
   button inherited the body serif. Record Sleeve is a three-face system and
   the faces do different jobs: a fat display serif for headlines, a warm text
   serif for reading, a tall condensed sans for labels. */
h1,h2,.display,.hero h1{font-family:"Abril Fatface",Georgia,serif;font-weight:400}
h1,.hero h1{letter-spacing:-.015em;line-height:1.06}
h2{letter-spacing:-.01em;font-weight:400}
h3{font-family:"Libre Caslon Text",Georgia,serif;font-weight:700;letter-spacing:0}
.logo{font-family:"Abril Fatface",Georgia,serif;font-weight:400;letter-spacing:0}
h4,.label,.btn,.book-chip,.badge,.eyebrow,.nav a.btn{
  font-family:"Bebas Neue",Impact,sans-serif;font-weight:400;letter-spacing:.16em;
}
.label,.eyebrow{color:var(--coral-ink)}   /* 5.41:1 on neutral, 5.86:1 on surface */
h4{color:var(--sage)}                     /* 4.56:1 on neutral - genuinely readable */

/* Flat, square-ish and hard-edged. The brief's radii are 2/4/8, not 8/14/24;
   soft corners read as 2015 SaaS and fight the whole reference. */
:root{--r-sm:2px;--r-md:4px;--r-lg:8px}

/* The page foundation is the warm neutral, not white. The brief says to let it
   carry the composition, and the body rule above still says white. */
body{background:var(--neutral)}
.site-head{background:var(--neutral);border-bottom:2px solid var(--ink)}

/* --- 3. THE LANGUAGE SWITCHER ------------------------------------------
   This block does not exist in the scaffold at all. On a previous site that
   meant the switcher was unstyled on every translated page and absent from
   every English one, while the structural check walked only the translated
   tree and reported green. It is styled here, in the shared stylesheet, so
   both trees get it from the same source.

   Contrast, measured:
     active chip   ink on ochre          4.95:1
     idle chip     --coral-ink on neutral 5.41:1
     idle border   --sage on neutral      4.56:1
   The border deliberately does NOT use --line (2.06:1): a control boundary
   needs 3:1, and reaching for the hairline token is how a previous site
   shipped 1.32:1 chip borders. */
.lang-bar{display:flex;align-items:center;gap:4px;margin-left:14px;flex:0 0 auto}
.lang-chip{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;min-height:30px;padding:6px 10px;
  font-family:"Bebas Neue",Impact,sans-serif;font-size:.8rem;letter-spacing:.1em;
  border:1.5px solid var(--sage);border-radius:var(--r-sm);
  color:var(--coral-ink);background:transparent;line-height:1;
}
a.lang-chip:hover{background:var(--surface);border-color:var(--ink);text-decoration:none}
.lang-chip.on{background:var(--coral);border-color:var(--ink);color:var(--ink);cursor:default}
/* The bar is a SIBLING of .nav, so it survives the hamburger collapse. Inside
   .nav it would vanish on every phone - which is exactly what shipped once. */
@media(max-width:860px){
  .lang-bar{margin-left:0;order:3}
  .site-head .wrap{gap:10px}
}

/* --- 4. 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 the old check
   stayed green while a button bled 4px over the hero. The rules below stop the
   wrap happening in the first place, and /tmp/hdrfit.py counts real line boxes
   to prove it.

   The hamburger breakpoint on this engine is 860px, NOT 1000px. A previous
   site tightened the 1001-1240px band and missed the actual crush zone, which
   is the ~200px just above the collapse. Both bands are covered here. */
.nav a.btn{white-space:nowrap;font-size:.78rem;letter-spacing:.1em;padding:9px 15px;line-height:1.15}
@media(min-width:861px){.nav a{white-space:nowrap}}
@media(min-width:861px) and (max-width:1100px){
  .nav{gap:13px}
  .nav a{font-size:.82rem;letter-spacing:0}
  .nav a.btn{padding:8px 10px;font-size:.72rem;letter-spacing:.06em}
  .lang-bar{margin-left:8px;gap:3px}
  .lang-chip{min-width:32px;padding:5px 7px;font-size:.72rem}
}
@media(min-width:1101px) and (max-width:1260px){
  .nav{gap:17px}
  .nav a{font-size:.86rem}
  .nav a.btn{padding:9px 12px;font-size:.74rem}
}

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

/* Keyboard focus. The scaffold has no visible focus style anywhere, which
   makes the whole site unusable by keyboard. Ink ring on the ochre and an
   ochre ring on the ink both clear 3:1 against every surface they land on. */
a:focus-visible,button:focus-visible,.btn:focus-visible,.lang-chip:focus-visible{
  outline:3px solid var(--ink);outline-offset:2px;border-radius:var(--r-sm);
}
.hero a:focus-visible,.ladder-col a:focus-visible{outline-color:var(--coral)}

/* Skip link - present, invisible until focused. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--neutral);
  padding:12px 18px;font-family:"Bebas Neue",Impact,sans-serif;letter-spacing:.14em}
.skip:focus{left:0}

/* Tap targets. 44px is the floor; several inline links in dense blocks were
   under 30px on a phone. */
@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}
  .lang-chip{min-height:38px;min-width:44px}
}

/* Price anchoring: the figure is the argument on this site, so it is set in
   the display face and given room rather than being another line of body text. */
.price-anchor{border:2px solid var(--ink);border-radius:var(--r-md);background:var(--surface);
  padding:22px 24px;margin:1.6em 0}
.price-anchor .pa-was{color:var(--sage);text-decoration:line-through;font-size:.95rem}
.price-anchor .pa-now{font-family:"Abril Fatface",Georgia,serif;font-size:2.2rem;line-height:1;
  color:var(--ink);margin:.15em 0 .3em}
.price-anchor .pa-note{color:var(--sage);font-size:.9rem;margin:0}

/* A hard-ruled fact strip - flat blocks and rules, no shadows, per the brief. */
.fact-strip{display:grid;grid-template-columns:repeat(3,1fr);border:2px solid var(--ink);
  border-radius:var(--r-md);overflow:hidden;margin:1.8em 0;background:var(--surface)}
.fact-strip > div{padding:16px 18px;border-right:1px solid var(--line)}
.fact-strip > div:last-child{border-right:0}
.fact-strip dt{font-family:"Bebas Neue",Impact,sans-serif;letter-spacing:.16em;font-size:.72rem;
  color:var(--sage);margin:0 0 4px}
.fact-strip dd{margin:0;font-family:"Abril Fatface",Georgia,serif;font-size:1.5rem;line-height:1.1}
@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}
}

/* A callout for the thing this site keeps having to say. Ochre rule on the
   leading edge, logical property so it mirrors correctly under RTL. */
.callout{border:2px solid var(--ink);border-inline-start:8px 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:"Bebas Neue",Impact,sans-serif;letter-spacing:.16em;
  font-size:.78rem;color:var(--coral-ink);margin:0 0 .5em}

/* Prose tables must not push the document sideways on a phone. The overflow
   sweep counts documentElement.scrollWidth - innerWidth across every route at
   three widths, and a wide price table is what trips it. */
@media(max-width:700px){
  .prose table,table.facts,table.prices{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* Hero: leave headroom so the fold shows content, not just the headline. */
.hero .wrap{padding-top:56px;padding-bottom:52px}
@media(min-width:861px){.hero .wrap{min-height:0}}

/* Honour reduced motion everywhere, not just for smooth scrolling. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* --- 6. RIGHT-TO-LEFT (the Arabic tree) --------------------------------
   Applied by attribute, so one stylesheet serves both trees and there is no
   second file to drift. patch_rtl.py sets dir="rtl" on <html> and swaps the
   font link; everything visual is here.

   The letter-spacing rule is the one that matters most and is the least
   obvious. Arabic is a cursive script: letters JOIN. The label face is tracked
   at 0.16em, and applying that tracking to Arabic prises the joins apart and
   renders the word as disconnected glyphs - legible to nobody, and it looks
   like a font-loading failure rather than a styling choice. It must be zeroed,
   not reduced. Latin small-caps tracking has no Arabic equivalent at all. */
[dir="rtl"]{text-align:right}
[dir="rtl"] body,
[dir="rtl"] p,[dir="rtl"] li,[dir="rtl"] td,[dir="rtl"] th,[dir="rtl"] h3{
  font-family:"Noto Sans Arabic","Libre Caslon Text",system-ui,sans-serif;
}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] .display,[dir="rtl"] .hero h1,[dir="rtl"] .logo,
[dir="rtl"] .price-anchor .pa-now,[dir="rtl"] .fact-strip dd{
  font-family:"Amiri","Noto Sans Arabic",serif;font-weight:700;letter-spacing:0;
}
[dir="rtl"] h4,[dir="rtl"] .label,[dir="rtl"] .btn,[dir="rtl"] .book-chip,
[dir="rtl"] .badge,[dir="rtl"] .eyebrow,[dir="rtl"] .lang-chip,
[dir="rtl"] .fact-strip dt,[dir="rtl"] .callout .callout-h,[dir="rtl"] .skip{
  font-family:"Noto Sans Arabic",system-ui,sans-serif;font-weight:700;
  letter-spacing:0;                      /* see the note above - this is not cosmetic */
  text-transform:none;                   /* Arabic is unicameral; uppercase is a no-op */
}
/* Amiri and Noto Sans Arabic both sit taller than the Latin faces at the same
   size. Left alone the Arabic header grows a few px and the cross-language
   header-height assertion in /tmp/hdrfit.py fails - which is the check doing
   its job, so the fix is here rather than in the tolerance. */
[dir="rtl"] .lang-chip,[dir="rtl"] .nav a.btn{line-height:1.05}
[dir="rtl"] h1,[dir="rtl"] .hero h1{line-height:1.25}
[dir="rtl"] h2{line-height:1.3}
/* Mirror the things that carry direction. Flexbox and logical properties do
   most of it; these are the leftovers that name a physical side. */
[dir="rtl"] .nav{margin-left:0;margin-right:auto}
[dir="rtl"] .lang-bar{margin-left:0;margin-right:14px}
[dir="rtl"] .nav-toggle{margin-left:0;margin-right:auto}
[dir="rtl"] .fact-strip > div{border-right:0;border-left:1px solid var(--line)}
[dir="rtl"] .fact-strip > div:last-child{border-left:0}
[dir="rtl"] .ladder-col .btn{align-self:flex-end}
[dir="rtl"] .price-anchor .pa-was{direction:ltr;display:inline-block}
@media(max-width:860px){[dir="rtl"] .lang-bar{margin-right:0}}
/* Prices, tomb numbers and hours stay left-to-right INSIDE right-to-left prose.
   "KV62" and "EGP 750" are Latin-script tokens; without isolation the bidi
   algorithm can reorder a currency label onto the wrong side of its number,
   which is a factual error dressed as a rendering quirk. */
[dir="rtl"] .ltr,[dir="rtl"] .price,[dir="rtl"] .kv,[dir="rtl"] code{
  direction:ltr;unicode-bidi:isolate;display:inline-block;
}

/* --- 7. FAULTS FOUND BY THE FIRST QA SWEEP ------------------------------
   Run against the built English tree before any of the tour content existed,
   which is the point: the stylesheet was the thing under test, so these are
   fixed once here rather than three times across three content modules and a
   translated tree. Measured figures, not estimates. */

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

/* Three chip/badge rules kept `color:#fff` on the accent fill from the original
   palette, where white-on-orange was legitimate. On this ochre it is 3.36:1.
   Ink on the same fill is 4.95:1. Same fault, same fix, as .btn above. */
.badge,.book-chip,.cmp-badge{color:var(--ink)}

/* The comparison table breaks out of the text column with -110px margins from
   1080px up. The column is 1120px wide plus 22px padding a side, so the
   breakout needs 1120 + 220 = 1340px of viewport to land inside the window. At
   1080-1339px it pushed the DOCUMENT sideways instead - 40px of horizontal
   scroll on /tour-cost/ at 1100px, on a page whose main content is a table.
   The breakout is a nice effect and is kept; it just waits for the room. */
@media(min-width:1080px) and (max-width:1339px){
  .cmp-wrap{margin-left:0;margin-right:0}
}

/* .price-anchor: OWN THE PAIR, NOT ONE HALF OF IT.
   The scaffold styles .pa-now as a DARK CHIP - background:var(--ink) with
   white text - and the block above restyled it as a big display-serif figure
   on the light panel, setting only `color`. The colour override won on
   specificity and the background did not change, so the number rendered ink on
   ink: 1.00:1, invisible, on the single most important figure on the site.
   Nothing errored and the page looked fine unless you went looking for the
   total.
   This is the same failure a sister site shipped on .pa-now .btn, and the same
   lesson: a foreground and its background are one decision. Overriding one
   inherits the other from whatever came before. Both are set here, explicitly,
   for every part of the block. */
.price-anchor .pa-was{background:transparent;border:0;color:var(--sage)}   /* 4.93:1 */
.price-anchor .pa-now{background:transparent;border:0;color:var(--ink)}    /* 14.93:1 */
.price-anchor .pa-now .pa-price{color:var(--ink)}
.price-anchor .pa-was .pa-price{color:var(--sage)}
/* opacity:.85 on --sage silently drops it under the 4.5 floor, and an opacity
   fade is invisible to a checker that reads computed COLOUR. Sage is already
   the muted tone; it does not need help being quiet. */
.price-anchor .pa-note{opacity:1}

/* --- 8. FAULTS FOUND BY THE PRE-SHIP BATTERY ---------------------------- */

/* .pa-label carried opacity:.75 with no colour of its own, so it inherited the
   body ink and then faded it to 3.05:1. This is the SECOND element in this
   stylesheet to fail purely through opacity - .pa-note was the first - and both
   were invisible to any checker reading `color` alone. An opacity fade is a
   contrast change; it just does not look like one in the source.
   Sage at full opacity says "secondary" without lying about it: 4.93:1. */
.price-anchor .pa-label,.pa-label{opacity:1;color:var(--sage);letter-spacing:.06em}

/* --- 9. TWO ARABIC-ONLY FAULTS FOUND ON THE SHIPPED BILINGUAL TREE ------ */

/* (a) THE GALLERY BREAKOUT WAS NOT DIRECTION-SAFE.
   `.photo-wide` escaped its 1120px column with
   `position:relative; left:50%; transform:translateX(-50%)`. That centres
   correctly in the English tree and lands 420px too far left in the Arabic
   one, dragging the whole photo strip off the page - 370px of horizontal
   scroll at 1280px, growing with the viewport, on the Arabic homepage only.

   Replaced with a breakout that has no direction in it at all: equal negative
   margins computed from the parent's own width. Because the two margins are
   always the SAME value, there is nothing left for `dir` to mirror. It also
   drops a positioned element and a transform from the page.

   The general lesson: any centring built from `left` plus a transform is a
   physical-axis construction wearing a logical-axis disguise. */
/* ALL THREE of them. The first pass fixed only .photo-wide, and the very same
   construction turned out to be on .testimonials and .real-strip.breakout as
   well - so the Arabic homepage still scrolled 370px sideways, with the fault
   simply moving down the page to the next section using the pattern. When a
   construction is wrong, grep for the construction, not for the symptom. */
.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}

/* (b) THE HEADER CTA KEPT ITS LATIN TRACKING IN ARABIC.
   `[dir="rtl"] .btn{letter-spacing:0}` (0,0,2,0) loses to `.nav a.btn`
   (0,0,2,1), so the one button in the Arabic header kept 0.16em -> 1.248px of
   tracking. Arabic is cursive: tracking prises the joins apart and the word
   renders as loose disconnected glyphs, which reads as a broken font rather
   than a styling choice.

   Every rule that sets tracking on that button is answered here at equal or
   higher specificity, including the two responsive bands that re-tighten it.
   Zeroed, not reduced - Latin small-caps tracking has no Arabic equivalent. */
[dir="rtl"] .nav a.btn,
[dir="rtl"] .nav a,
[dir="rtl"] .lang-chip,
[dir="rtl"] .book-chip,
[dir="rtl"] .badge,
[dir="rtl"] .cmp-badge,
[dir="rtl"] .fact-strip dt,
[dir="rtl"] .callout .callout-h{letter-spacing:0}
@media(min-width:861px) and (max-width:1100px){
  [dir="rtl"] .nav a.btn,[dir="rtl"] .lang-chip{letter-spacing:0}
}
@media(min-width:1101px) and (max-width:1260px){
  [dir="rtl"] .nav a.btn{letter-spacing:0}
}

/* 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 */
html[lang="ar"] .hero h1{--h1-scale:0.88} /* h1_retrofit v2 */