/* 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:#14130F;        /* primary: headlines & core text */
  --sage:#72706A;       /* secondary: borders, meta, captions */
  --coral:#3F3A33;      /* tertiary: the single interaction accent */
  --coral-ink:#3F3A33;  /* readable orange (same hue) for link/body text */
  --coral-dk:#26221D;   /* button hover */
  --neutral:#F4F0E6;    /* page foundation */
  --surface:#FBF8EF;    /* card / panel surface */
  --white:#FFFFFF;
  --line:#DBD5C4;
  --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:"Source Serif 4",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:"Source Serif 4",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:"Source Serif 4",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:"Source Serif 4",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:"Source Serif 4",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:"Source Serif 4",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:"Source Serif 4",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:"Source Serif 4",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:"Source Serif 4",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:"Source Serif 4",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:"Source Serif 4",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:"Source Serif 4",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:"Source Serif 4",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:"Source Serif 4",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:"Source Serif 4",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:"Source Serif 4",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:"Source Serif 4",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:"Source Serif 4",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:"Source Serif 4",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:"Source Serif 4",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:"Source Serif 4",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:"Source Serif 4",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:"Source Serif 4",sans-serif;font-weight:700}
table.cmp .rowlabel{font-family:"Source Serif 4",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:"Source Serif 4",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:"Source Serif 4",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:"Source Serif 4",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:"Source Serif 4",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:"Source Serif 4",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:"Source Serif 4",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:"Source Serif 4",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:"Source Serif 4",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:"Source Serif 4",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:"Source Serif 4",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:"Source Serif 4",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:"Source Serif 4",sans-serif;font-weight:700;font-size:.86rem;color:var(--ink)}
.t-tour{display:block;font-family:"Source Serif 4",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)}

/* ==========================================================================
   MUSEUM PLAQUE — the design.md implementation
   ==========================================================================
   The scaffold ships the "Running Kilometer" system: white ground, rounded
   corners, one sans face, a saturated accent. design.md asks for the opposite
   of three of those four. Rather than edit the scaffold in place — which makes
   it impossible to see later what was the house style and what was this brief —
   everything the brief changes is stated here, in order, with the reason.

   (a) TOKENS · (b) TYPE · (c) GROUND · (d) RULES · (e) CONTROLS
   (f) HEADER · (g) LONG GERMAN WORDS · (h) THE CTR LAYER, RECOLOURED
   ========================================================================== */

/* --- (a) TOKENS ----------------------------------------------------------
   THE SECONDARY HAS TWO VALUES, and this is the single most repeated defect
   in this kit. design.md gives one #72706A for "borders, captions, and
   metadata" — but a caption is TEXT and a border is a CONTROL EDGE, and they
   are held to different standards. Measured on this palette:

       #72706A caption on --surface #FBF8EF   4.66:1   passes 4.5
       #72706A caption on --neutral #F4F0E6   4.35:1   FAILS  4.5

   The page foundation is the neutral, so the designer's value fails on the
   ground it will mostly sit on. Darkening it by three points per channel to
   #6F6D67 clears both (4.87:1 and 4.55:1) and is indistinguishable by eye.
   So: --sage is the TEXT value, --sage-edge is the designer's original, kept
   for control borders where the bar is 3:1 and it passes comfortably.

   And --line stays a true hairline at 1.38:1 — that is correct for the
   "hairline rules" the brief asks for and WRONG for anything a person can
   click. A previous site in this family shipped a 1.29:1 token as a control
   edge and the control had no visible edge at all. Rules use --line;
   controls use --sage-edge. There is no third option. */
:root{
  --sage:#6F6D67;        /* secondary AS TEXT — passes 4.5:1 on both grounds */
  --sage-edge:#72706A;   /* secondary AS CONTROL EDGE — design.md's original */
  --line:#DBD5C4;        /* decorative hairline ONLY — 1.38:1, never a control */
  --r-sm:0px; --r-md:0px; --r-lg:0px;   /* "This system is flat on purpose." */
  --display:"Bodoni Moda",Georgia,"Times New Roman",serif;
  --body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --label:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --maxw:1120px;
}

/* --- (b) TYPE -------------------------------------------------------------
   Three faces, each with one job. The didone is for display sizes only: at
   18px a Bodoni's hairline strokes disappear on a cream ground, so body copy
   is Source Serif and never Bodoni. Letter-spacing goes POSITIVE on the caps
   and slightly negative on the didone, which is how both were drawn to be set.

   Rag-right, per the brief: no justification, no hyphenation in body copy —
   justified text on a 1120px measure opens rivers, and the brief's whole
   argument is that negative space is doing the work. */
body{font-family:var(--body);font-size:18px;line-height:1.7;letter-spacing:0}
h1,h2,.display,.hero h1{font-family:var(--display);font-weight:400;letter-spacing:-.02em;line-height:1.12}
h1{font-size:2.8rem;font-weight:400;letter-spacing:-.02em;margin:.1em 0 .5em}
h2{font-size:2rem;font-weight:400;margin:2.4em 0 .7em}
h3{font-family:var(--body);font-size:1.18rem;font-weight:600;letter-spacing:0;line-height:1.35}
.display{font-size:clamp(2.6rem,6vw,6rem)}
p,li,dd,dt,td,th{font-family:var(--body)}
p{margin:0 0 1.15em;max-width:74ch}          /* measure, not container width */

/* Placard caps. 0.3em is a lot of tracking and it is the brief's signature —
   it only works UPPERCASE and only at small sizes, so it is scoped to exactly
   the elements that are placards: labels, eyebrows, table heads, nav, buttons. */
.label,h4,.eyebrow,th,.badge,.book-chip,.kf-label,.facts-label,.nav a,.btn,
.lang-chip,.crumbs,figcaption{
  font-family:var(--label);
  font-weight:500;
  font-size:.68rem;
  letter-spacing:.3em;
  text-transform:uppercase;
}
.label,h4,.eyebrow{color:var(--sage);margin:0 0 .7em}
figcaption{letter-spacing:.12em;text-transform:none;font-size:.72rem;color:var(--sage)}
.crumbs{letter-spacing:.18em}
/* 0.3em of tracking on a long German nav label would blow the header apart —
   the nav and the buttons take a tighter cut of the same face. */
.nav a,.btn{letter-spacing:.14em;font-size:.7rem}

/* --- (c) GROUND -----------------------------------------------------------
   The scaffold paints the page white and the cards a near-white. The brief
   inverts that: the cream IS the page ("let Neutral carry the composition"),
   and --surface is the slightly lighter card that sits on it. Every white in
   the scaffold has to go, or the cards vanish into the background. */
body{background:var(--neutral);color:var(--ink)}
.site-head,.card,.tour,.panel,.answer-box,.faq,.prices,.keyfacts,
.testimonial,.t-card,.facts-strip{background:var(--surface)}

/* --- (d) RULES ------------------------------------------------------------
   Hairlines, not boxes. A museum placard is separated from the wall by a line,
   not by a shadow — so borders collapse to a single 1px --line, and the box
   shadows the scaffold uses for depth are removed rather than softened.
   "Don't introduce gradients. This system is flat on purpose." */
*,*::before,*::after{box-shadow:none !important}
.card,.tour,.panel,.answer-box,.faq,.testimonial,.t-card,.prices,.keyfacts{
  border:1px solid var(--line);
  border-radius:0;
}
hr,.rule{border:0;border-top:1px solid var(--line);margin:2.6em 0}
img,.thumb,.tour img,.card img{border-radius:0}

/* --- (e) CONTROLS ---------------------------------------------------------
   "Do use Tertiary for exactly one action per screen." The primary button is
   solid tertiary; every secondary action is a hairline ghost so there is never
   a second filled thing competing with it. Square corners, placard caps.

   Contrast, measured: --surface text on --accent fill is 10.61:1, and on the
   hover value 14.88:1. The ghost's edge is --sage-edge at 4.66:1, comfortably
   past the 3:1 a control edge needs — this is the rule from (a) in use. */
.btn{
  background:var(--coral);color:var(--surface);
  border:1px solid var(--coral);border-radius:0;
  padding:14px 24px;line-height:1.1;
}
.btn:hover{background:var(--coral-dk);border-color:var(--coral-dk);color:var(--surface)}
.btn-ghost,.btn.ghost{
  background:transparent;color:var(--ink);border:1px solid var(--sage-edge);
}
.btn-ghost:hover,.btn.ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--surface)}
a{color:var(--coral-ink);text-decoration-thickness:1px;text-underline-offset:.22em}
a:focus-visible,button:focus-visible,.btn:focus-visible{
  outline:2px solid var(--coral);outline-offset:3px;
}

/* --- (f) HEADER: ONE ROW, IN EVERY LANGUAGE -------------------------------
   Carried forward from the previous site in this family, where a header sized
   in English wrapped to two rows in Spanish and French and cost a delivery
   round. German is longer again, so the rule is applied BEFORE anything is
   translated rather than after a bug report:

     * the nav label budget is the ENGLISH character count, enforced in the
       translation script rather than trusted to a translator;
     * the row may wrap as a last-resort net for a language nobody measured,
       but source order must not decide the arrangement when it does — so
       logo, chips, toggle and nav all carry an explicit `order`;
     * the language chips sit beside the logo and own the `margin-right:auto`,
       which is what keeps them part of the brand block instead of stranding
       them mid-row when the header does wrap.

   Verified by counting real line boxes, grouped by VERTICAL OVERLAP rather
   than by top edge — a two-line logo beside a one-line nav starts 12px higher
   and a top-edge check reports a second row that no reader can see. */
.site-head{border-bottom:1px solid var(--line);background:var(--surface)}
.site-head .wrap{
  display:flex;align-items:center;flex-wrap:wrap;
  height:auto;min-height:66px;padding-top:8px;padding-bottom:8px;
  gap:14px;row-gap:4px;
}
.site-head .logo{order:0;flex:0 1 auto;font-family:var(--display);font-weight:400;
  font-size:1.06rem;letter-spacing:0}
.lang-bar{order:1;flex:0 0 auto;margin-left:14px;margin-right:auto;gap:4px}
.nav-toggle{order:2;margin-left:0}
@media(min-width:861px){
  .nav{order:3;flex:0 1 auto;min-width:0;justify-content:flex-end;margin-left:0;gap:14px}
  .nav a{white-space:nowrap}
}
@media(max-width:860px){.nav{order:4}.lang-bar{margin-left:10px}}
/* The band just above the collapse point is where the row is tightest in any
   language; gaps give up their pixels there before type size does. */
@media(min-width:861px) and (max-width:1120px){
  .site-head .wrap{gap:12px}
  .nav{gap:10px}
  .nav a{letter-spacing:.08em}
  .lang-bar{margin-left:10px;gap:3px}
}
.lang-chip{
  font-family:var(--label);font-weight:500;font-size:.62rem;letter-spacing:.14em;
  padding:6px 8px;border:1px solid var(--sage-edge);border-radius:0;
  color:var(--sage);background:transparent;white-space:nowrap;line-height:1;
}
a.lang-chip:hover{background:var(--sage-edge);color:var(--surface);text-decoration:none}
.lang-chip.is-current{background:var(--coral);border-color:var(--coral);color:var(--surface)}

/* --- (g) THE LONGEST WORDS THIS KIT HAS MET -------------------------------
   German compounds are a layout problem the English tree cannot surface:
   "Sehenswürdigkeiten" is 18 characters, "Öffnungszeiten" 14, and set as a
   2.8rem didone in a 316px phone column neither fits on a line by itself.
   `overflow-wrap:break-word` only breaks a word that cannot fit alone, so
   ordinary text is untouched; `hyphens:auto` makes that break a proper
   hyphenated one, correctly per language because every page carries a real
   `lang` attribute. */
h1,h2,h3,h4,.display,.hero h1,.logo,.prose p,.prose li,
figcaption,.kf-label,.facts-label,.t-quote{
  overflow-wrap:break-word;hyphens:auto;
}
td,th,.badge,.book-chip,.foot-searches a{overflow-wrap:break-word}

/* --- (h) THE CTR LAYER, IN A FLAT NEUTRAL SYSTEM --------------------------
   The conversion features (decision ladder, sticky book-bar, card badges,
   price anchor) ship styled for a coloured-accent theme. Here there is only
   one accent and the brief reserves it for actions, so the ladder band takes
   the INK as its ground rather than the accent — the contrast that makes a
   band read as separate comes from value, not hue. Text on it is the cream at
   16.33:1. The one filled accent button inside the band is still the only
   filled thing on that screen, which keeps the single-accent rule intact. */
.ladder,.book-bar,.pa-now{background:var(--ink);color:var(--neutral);border-radius:0}
.ladder h2,.ladder h3,.book-bar strong{color:var(--neutral)}
.ladder .btn.ghost,.book-bar .btn.ghost{border-color:rgba(251,248,239,.55);color:var(--neutral)}
.ladder .btn.ghost:hover,.book-bar .btn.ghost:hover{background:var(--neutral);color:var(--ink);border-color:var(--neutral)}
.badge,.book-chip{border:1px solid var(--sage-edge);border-radius:0;background:transparent;color:var(--sage)}
.fee-badge{background:var(--ink);color:var(--neutral);border-radius:0}
/* Tap targets stay 44px even though the placard caps are small type. */
@media(pointer:coarse){
  .nav a,.lang-chip{min-height:44px;display:flex;align-items:center}
  .btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center}
}

/* --- (i) THE AUTHOR CARD, WITHOUT A FACE ---------------------------------
   The scaffold's card is a 512px headshot beside a byline. This site does not
   ship one: the author is a composed persona, and inventing a photograph of a
   person who does not exist is the single thing that would undercut every
   honest sentence on a site whose whole argument is that it tells you the
   truth. The byline, the job and the location stay; a monogram set in the
   display face stands where the photograph would, which reads as a printed
   credit rather than as a person. */
.author-card--nophoto{display:flex;align-items:center;gap:18px;
  border:1px solid var(--line);padding:18px 20px;margin:0 0 1.6em}
.author-mark{
  font-family:var(--display);font-weight:400;font-size:1.5rem;letter-spacing:.02em;
  width:56px;height:56px;flex:0 0 56px;display:flex;align-items:center;
  justify-content:center;border:1px solid var(--sage-edge);color:var(--ink);
}
.author-card--nophoto b{display:block;font-family:var(--body);font-weight:600}
.author-card--nophoto span:not(.author-mark){display:block;font-family:var(--label);
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);
  margin-top:.4em}

/* --- (j) THE FACTS STRIP, WITH SIX ITEMS AND A 0.3em TRACK ----------------
   The brief's placard tracking is its signature and it is why the labels were
   clipping: 0.3em on "Recreation.gov service charge" inside a one-sixth column
   is wider than the column, and the row was cutting words mid-syllable
   ("RECREATION.GO / V SERVICE"). The tracking is right for a two-word placard
   and wrong for a sentence.

   So the label keeps the placard face and case, at a track it can actually
   wear at this width, and is allowed the room to run to a second line rather
   than being clipped. The VALUE above it keeps the full treatment - it is
   always short, which is what the tracking was designed for. */
.facts-item{padding:16px 18px;min-width:0}
.facts-label{
  letter-spacing:.12em;
  font-size:.62rem;
  line-height:1.5;
  overflow-wrap:break-word;
  hyphens:none;              /* a hyphenated placard reads as a typo */
  white-space:normal;
}
.facts-val{
  font-family:var(--display);font-weight:400;letter-spacing:-.01em;
  font-size:1.24rem;line-height:1.15;overflow-wrap:break-word;
}
@media(max-width:1100px){.facts-label{letter-spacing:.08em}}

/* ==========================================================================
   (k) VISUAL-INSPECTION FIXES
   ==========================================================================
   Seven defects from a real look at the built site. Two of them I caused
   directly in section (h), and the honest summary of that section is: it
   flattened components that were doing a job. A chip with no fill cannot hide
   the border it straddles, and a chip with no fill cannot be read over a
   photograph.

   THE ONE THAT EXPLAINS THREE OF THE SEVEN: an accent has more than one value.
   design.md reserves a single accent for interaction and that accent is a dark
   warm grey. Measured on this palette:

       --coral #3F3A33 on --surface (the page)   10.61:1   excellent
       --coral #3F3A33 on --ink     (dark band)   1.65:1   invisible

   So every dark band that used the accent as a FOREGROUND was unreadable: the
   ladder's "Free" and "$89", and the inline links in Key takeaways (2.27:1
   even with the brightness filter the scaffold applies). The single-accent
   rule governs FILLS, not text on a dark ground. On ink the readable value is
   the cream, and that is not a second accent - it is the same one-action rule
   with the figure and ground swapped.
   ========================================================================== */

/* --- 1. THE HEADER HAS ROOM TO BREATHE --------------------------------------
   14px between six uppercase items tracked at .14em reads as one continuous
   band of letters. The label budget bought the room; this spends it. Re-checked
   at every width from 861 to 1920 in all three languages after the change. */
@media(min-width:861px){
  .site-head .wrap{gap:20px}
  .nav{gap:24px}
  .nav a{letter-spacing:.1em}
}
@media(min-width:861px) and (max-width:1120px){
  .site-head .wrap{gap:14px}
  .nav{gap:16px}
  .nav a{letter-spacing:.07em}
}

/* --- 2. THE HERO SCRIM COVERS THE WHOLE PICTURE -----------------------------
   The scaffold darkens only the bottom 55%, which suits a hero whose photo is
   dark at the top. This one is an aerial in bright daylight: white marble and
   pale sky sit directly behind the headline, and white type on white marble is
   not a contrast problem to be tuned, it is unreadable.

   Two layers, because one flat wash would either fail at the top or muddy the
   photograph: a full-height veil that lifts the whole image away from white,
   and a left-weighted gradient over the third the copy actually occupies. The
   photo stays legible on the right, where the building is. */
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,19,15,.86) 0%,rgba(20,19,15,.74) 38%,
                             rgba(20,19,15,.28) 68%,rgba(20,19,15,.16) 100%);
}
.hero::after{
  height:100%;
  background:linear-gradient(180deg,rgba(20,19,15,.34) 0%,rgba(20,19,15,.18) 45%,
                             rgba(20,19,15,.62) 100%);
}
.hero .wrap,.hero-inner,.hero h1,.hero .lede,.hero-trust,.hero .eyebrow{position:relative;z-index:2}
.hero h1,.hero .lede,.hero-trust{text-shadow:0 1px 2px rgba(0,0,0,.45)}

/* --- 3. TYPE THAT IS NOT HAIRLINE ------------------------------------------
   A didone at 400 is drawn with hairline strokes; that is the face working as
   intended, and at heading sizes on a warm ground it reads as faint rather than
   as elegant. 500 keeps the didone character and puts ink back in the thin
   strokes. The placard caps go to 600 for the same reason at a much smaller
   size, where 0.3em of tracking already thins a line visually. */
h1,h2,.display,.hero h1,.facts-val{font-weight:500}
h3{font-weight:600}
body,p,li,dd,td{font-weight:420}
.label,h4,.eyebrow,th,.badge,.book-chip,.kf-label,.facts-label,.nav a,.btn,
.lang-chip,.crumbs{font-weight:600}
/* Metadata was the faintest thing on the page: small, tracked, and in the
   secondary tone. It keeps the tone and gains the weight. */
.facts-label,figcaption,.kf-label{font-weight:600}

/* --- 4. FOREGROUNDS ON THE DARK BANDS --------------------------------------
   See the note at the top of this section. Text on ink is the cream; links are
   underlined so they are still identifiable as links without a hue to spend. */
.ladder-price,.ladder-col .ladder-price{color:var(--neutral);font-weight:600}
.ladder-col.feat .ladder-price{color:var(--ink)}
.ladder-days,.ladder-col p{color:rgba(244,240,230,.92)}
.ladder-col.feat .ladder-days,.ladder-col.feat p{color:var(--ink)}
.ia-takeaways{color:rgba(244,240,230,.94)}
.ia-takeaways a{
  color:var(--neutral);filter:none;
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.2em;text-decoration-color:rgba(244,240,230,.6);
}
.ia-takeaways a:hover{text-decoration-color:var(--neutral)}
.ia-takeaways li::before{color:var(--neutral)}
.book-bar,.book-bar strong,.pa-now,.pa-now .pa-price{color:var(--neutral)}

/* --- 5. CARD BADGES SIT ON PHOTOGRAPHS -------------------------------------
   Section (h) made these a hairline chip with secondary-tone text, which is
   right for a chip on the page and wrong for one on top of an image: measured
   1.50:1 over a mid-grey photograph and 3.56:1 over a light one. A label over
   an image needs to carry its own background. Solid ink at 0.88 with cream
   text is 16.33:1 against its own fill and legible over anything underneath -
   and it reads as a museum placard, which is the brief. */
.badge,.cmp-badge{
  background:rgba(20,19,15,.88);color:var(--neutral);
  border:0;border-radius:0;padding:6px 10px;letter-spacing:.14em;
  -webkit-backdrop-filter:saturate(.7);backdrop-filter:saturate(.7);
}
.fee-badge{background:rgba(20,19,15,.88);color:var(--neutral);border-radius:0}

/* --- 6. A CHIP THAT STRADDLES A BORDER MUST MASK IT -------------------------
   "CHECK DATES & BOOK" and "BROWSE MORE AVAILABLE OPTIONS" sit at top:-13px,
   half in and half out of the box they label. That only works if the chip is
   opaque: with the transparent fill from section (h) the box's own border ran
   straight through the words. Restoring a solid ground fixes the collision,
   and a little more left offset stops it crowding the corner. */
.book-chip{
  background:var(--ink);color:var(--neutral);border:0;border-radius:0;
  padding:6px 14px;left:24px;letter-spacing:.16em;
}

/* --- 7. THE FAQ NEEDS A MARGIN ---------------------------------------------
   Question and answer both sat flush against the panel edge, so the text
   touched the rule that separates it from the next question. The disclosure
   arrow keeps its room on the right. */
.faq details{padding:2px 0}
.faq summary{padding:16px 40px 16px 20px}
.faq summary::after{right:18px;top:14px}
.faq-body{padding:0 20px 16px}
.faq-body p+p{margin-top:.8em}

/* --- (l) THE COLLAPSE POINT MOVES TO 1000px --------------------------------
   Adding the language switcher put 107px of chips into a row that was already
   full, and the honest gate immediately failed 28 widths. Measured shortfall in
   the band just above the old 860px collapse:

       EN @861  needs 892 against 817 of content   short  75px
       DE @861  needs 932                          short 115px
       FR @861  needs 944                          short 127px   <- worst case

   There were two ways to find 127 pixels. Shrink the nav again - smaller type,
   tighter tracking, tighter gaps - which is precisely the cramping that was
   reported in the first place. Or stop trying to show six uppercase items,
   three chips and a two-line brand inside 817 pixels.

   So the desktop nav now appears at 1001px instead of 861px, and below that the
   header is brand, chips, and a menu button - which is what almost every site
   does at tablet width, and leaves the chips visible at EVERY size. Above the
   collapse the nav gets the spacing the complaint asked for.

   The previous site in this family learned that moving a breakpoint to hide an
   overfull row just relocates the overflow. The difference here is that the row
   is not overfull above the new point: at 1001px the widest tree needs 944px of
   958, and the generous-spacing band starts only where it measurably fits. */
@media(max-width:1000px){
  .nav-toggle{display:block}
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;background:var(--surface);
    border-bottom:1px solid var(--line);padding:10px 22px 18px;order:4;
  }
  .nav.open{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid var(--line);width:100%;
         letter-spacing:.12em;text-align:left}
  .nav a.btn{margin-top:12px;text-align:center;border-bottom:0}
  .lang-bar{order:1;margin-left:12px;margin-right:auto}
  .nav-toggle{order:2;margin-left:0}
  .logo{white-space:normal;line-height:1.15;max-width:20ch}
}
/* Between the collapse point and 1140 the row fits but has nothing spare. */
@media(min-width:1001px) and (max-width:1140px){
  .nav-toggle{display:none}
  .nav{display:flex;position:static;flex-direction:row;order:3;
       background:none;border:0;padding:0;gap:15px;justify-content:flex-end}
  .nav a{padding:0;border:0;width:auto;letter-spacing:.06em}
  .nav a.btn{margin-top:0}
  .site-head .wrap{gap:13px}
  .logo{white-space:nowrap;font-size:1rem;max-width:none}
  .lang-bar{margin-left:11px}
}
/* Wide enough to be generous, which is what the complaint was about. */
@media(min-width:1141px){
  .nav-toggle{display:none}
  .nav{display:flex;position:static;flex-direction:row;order:3;
       background:none;border:0;padding:0;gap:26px;justify-content:flex-end}
  .nav a{padding:0;border:0;width:auto;letter-spacing:.1em}
  .nav a.btn{margin-top:0}
  .site-head .wrap{gap:22px}
  .logo{white-space:nowrap;font-size:1.04rem;max-width:none}
  .lang-bar{margin-left:16px;gap:5px}
}

/* --- (m) THE PRIMARY ACTION MUST BE THE BRIGHTEST THING ON A DARK HERO -----
   Same root cause as the ladder prices and the takeaway links, in the one
   place it costs a booking: the hero's primary button is the accent, and the
   accent on the darkened photograph is a dark grey rectangle on a dark grey
   scrim. It reads as a disabled control rather than the main call to action.

   On the cream page the filled accent button is correct and stays. Over the
   hero the figure and ground swap: the button takes the cream fill and the ink
   label, which is 16.33:1 and unmistakably the brightest element in the frame.
   The secondary stays a hairline ghost, so there is still exactly one filled
   action per screen - the single-accent rule intact, with the values chosen
   for the ground they land on. */
.hero .btn{
  background:var(--neutral);border-color:var(--neutral);color:var(--ink);
  font-weight:600;
}
.hero .btn:hover{background:#fff;border-color:#fff;color:var(--ink)}
.hero .btn-ghost,.hero .btn.ghost{
  background:transparent;color:var(--neutral);border:1px solid rgba(244,240,230,.75);
}
.hero .btn-ghost:hover,.hero .btn.ghost:hover{
  background:var(--neutral);color:var(--ink);border-color:var(--neutral);
}
/* The trust line's unemphasised half was the dimmest text in the hero. */
.hero-trust{color:rgba(244,240,230,.94)}
.hero-trust b,.hero-trust strong{color:#fff}
.hero .eyebrow{color:rgba(244,240,230,.9)}

/* --- (n) THE BOOK BUTTON IS STILL A BUTTON ---------------------------------
   Section (l) reset `.nav a` to padding:0 / border:0 so the collapsed menu's
   full-width rows would not inherit button geometry. That reset also hit the
   CTA, which IS an `a` inside the nav - so "Book Now" / "Réserver" / "Buchen"
   rendered as a hairline box crimped around the word instead of a filled
   button. A blanket reset on a container always catches the one child that
   was meant to look different. */
@media(min-width:1001px){
  .nav a.btn{
    padding:12px 20px;
    border:1px solid var(--coral);
    background:var(--coral);color:var(--surface);
    letter-spacing:.12em;line-height:1.1;
  }
  .nav a.btn:hover{background:var(--coral-dk);border-color:var(--coral-dk);color:var(--surface)}
}
@media(max-width:1000px){
  /* In the drop-down the CTA is a full-width bar, which is the one place the
     padding reset is right - it just needs its fill back. */
  .nav a.btn{
    background:var(--coral);color:var(--surface);border:1px solid var(--coral);
    padding:14px 18px;
  }
}

/* --- (o) A LINK NEEDS A SECOND SIGNAL --------------------------------------
   The inline links measure 10.61:1 and pass comfortably, so the contrast sweep
   is right to stay quiet about them - and they still read as faint, because
   contrast against the BACKGROUND is not the quantity that matters here. What
   matters is the difference from the surrounding TEXT, and this palette has
   almost none to spend: body ink is 17.50:1 and the accent is 10.61:1 against
   the same cream, which is a small step in a single warm hue.

   design.md reserves the one accent for interaction and that stands. Colour
   simply cannot be the only carrier of "this is a link" in a system with one
   accent, so the links take an underline as well - which is also the thing
   that works for a reader who cannot separate those two browns at all. */
.prose a,.faq-body a,.answer-box a,.honest-guide a,.keyfacts a,
.route a,.check a,.tip a,.callout a,li a{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
  text-decoration-color:rgba(63,58,51,.45);
}
.prose a:hover,.faq-body a:hover,.answer-box a:hover,.honest-guide a:hover{
  text-decoration-color:var(--coral);
}
/* Everything that is already a button, a card, a chip or a nav item is not
   prose and must not sprout an underline. */
.btn,.nav a,.lang-chip,.tour,.tour a,.foot-grid a,.foot-searches a,
.explore-links a,.crumb a,.badge,.book-chip,a.tour{text-decoration:none}
.foot-grid a:hover,.foot-searches a:hover,.explore-links a:hover{text-decoration:underline}

/* --- (p) FLAT MEANS FLAT ---------------------------------------------------
   design.md sets every radius token to 0 and says so twice ("This system is
   flat on purpose"). Setting the TOKENS was not enough: eleven components in
   the scaffold carry a hardcoded radius that never reads a token - the
   takeaways box at 16px, the ladder tiles at 10, the price anchor at 14, the
   real-photo grid at 10, the author card at 12. Next to square cards, square
   badges and hairline rules they read as a different system bolted on.

   Two exceptions kept deliberately: the footer's search pills and the town
   chips, where the full-round shape is the component's whole identity rather
   than decoration. */
.ia-takeaways,.ladder-col,.price-anchor,.pa-col,.real-grid img,.lightbox img,
.author-card,.fee-badge,.t-card,.testimonial,.panel,.callout,.tip,
.answer-box,.keyfacts,.prices,.shot img,.tour img,.tour,.card{
  border-radius:0;
}

/* --- (q) THE HAIRLINE WAS NOT THE WEIGHT AXIS -------------------------------
   Section (k) answered "the headings are too thin" by moving the didone from
   400 to 500, and the headings are still too thin. That fix was aimed at the
   wrong axis.

   Bodoni Moda is requested as a variable font with TWO axes - wght AND opsz -
   and `font-optical-sizing` defaults to `auto`, so the browser sets opsz from
   the rendered font-size in points without being asked. A 2rem h2 is 24pt, a
   2.8rem h1 is 34pt, and the .display clamp tops out near 72pt. In a didone
   the optical-size axis works in the OPPOSITE direction to intuition: the
   large-optical cuts are the display cuts, drawn with the thinnest hairlines
   and the highest stroke contrast, because at poster size that is elegant. The
   small-optical cuts are the text cuts, with sturdy hairlines that survive.

   So every section heading on this site was being auto-assigned the thinnest
   drawing the family contains, and one step of weight could not undo it. The
   fix is to stop the browser choosing: pin opsz to a text-cut value and let
   wght do the rest. 14 is well inside the sturdy end of the 6..96 range and
   still unmistakably Bodoni - the didone character lives in the ball terminals
   and the vertical axis, not in how thin the hairline gets.

   Two supporting changes:

   1. The webfont request was capped at 600 for both serifs. A variable font is
      CLAMPED to its requested range, not synthesised past it, so every
      `font-weight:800` in the scaffold - the facts numerals, the score, the
      price anchor - was silently rendering at 600. The range now runs to 700.
      Same request, same bytes, one axis with room in it.

   2. `-webkit-font-smoothing:antialiased` was set globally. On dark-on-light
      text that swaps subpixel rendering for grayscale and takes visible mass
      off every stem - which is the entire complaint, applied to the whole
      page. It goes back to `auto` for the cream-ground body, and is kept only
      where the figure is light on a dark ground and grayscale genuinely reads
      better: the hero, the dark bands, the footer, the placards. */

body{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}
.hero,.hero h1,.hero .lede,.ladder-col,.ia-takeaways,.book-bar,.price-anchor,
.site-foot,thead th,.badge,.book-chip,.cmp-badge,.sc-score,.lightbox{
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}

/* The didone stops picking its own drawing. Every element that actually uses
   var(--display) is listed - the logo, the author monogram and the facts
   numerals were all still sitting at the scaffold's 400 and were as faint as
   the headings, they were just smaller and easier to miss. */
h1,h2,.display,.hero h1,.site-head .logo,.author-mark,.facts-val{
  font-optical-sizing:none;
  font-variation-settings:"opsz" 14;
}
h1,h2,.display,.hero h1{font-weight:600}
.site-head .logo{font-weight:600}
.author-mark{font-weight:600}
/* The .display clamp reaches 6rem; at that size the text cut is still the
   right call for legibility, but it can afford a fraction more contrast. */
.display{font-variation-settings:"opsz" 20}
/* h3 is Source Serif, not the didone - it only needed the ceiling raised. */
h3,.tour-body h3,.rev-card h3,.includes-col h3{font-weight:700}

/* The numerals that were asking for 800 and getting 600. */
.facts-val,.sc-big,.rev-score,.feat-title,.pa-price,.reviews-head .big,
.step::before,.ladder-price,.ladder-col .ladder-price{font-weight:700}
.ladder-days{font-weight:700}
/* Placard caps at 0.3em of tracking lose mass to the tracking itself. */
.label,h4,.eyebrow,th,.badge,.book-chip,.kf-label,.facts-label,.nav a,.btn,
.lang-chip,.crumbs,figcaption,.tip-label,.chips-label,.rev-more{font-weight:600}

/* --- (r) EVERY SECTION HEAD STARTS ON THE SAME LINE -------------------------
   Measured on the built homepage at 1440px, the introductory text of the page
   started at FOUR different x positions:

       340px   the prose measure column (760px, centred) - most section heads
       230px   the comparison table, which pulls -110px either side
       130px   the photo gallery, the testimonials and the real-photo strip,
               which break out to a 1180px band - and centred their heads in it

   The complaint is the visible half of that: three sections centre their head
   while every other section left-aligns it. Centring is the odd one out, so it
   goes. But `text-align:left` alone only moves those heads from 130+centred to
   130+flush, and the heads they are meant to match start at 340 - so the page
   would still read as misaligned, just in a new way.

   The rule this section establishes: ALL INTRODUCTORY TEXT STARTS ON THE PROSE
   COLUMN'S LEFT EDGE, whatever width the block underneath it happens to be.
   That is the ordinary text-column-with-wider-media pattern, and it is the only
   arrangement here in which a reader scanning down the page sees one line that
   every heading, eyebrow and standfirst begins from.

   Each breakout head therefore takes an inset equal to half the difference
   between its band and the prose measure, which lands it exactly on the prose
   edge; the dark ladder band, whose head sits in the full .wrap rather than in
   the measure, takes the same treatment against the wrap. The grids, tables and
   photo strips underneath keep their full width - they are the thing the extra
   width was bought for. Where the viewport is narrow enough that a band is no
   wider than the measure, the difference goes negative and the inset clamps to
   zero, so nothing moves on a phone.

   The one deliberate exception is a head inside a PANEL - the takeaways box,
   the includes card, the price anchor, the honest-guide block. Those are boxed
   components with their own padding, and their heading belongs to the box, not
   to the page. Aligning them to the page edge would break the box. */
:root{
  --prose-w:760px;                       /* the measure, single source of truth */
  --band-w:min(1180px,94vw);             /* what .photo-wide/.testimonials use */
  --wrap-w:min(calc(var(--maxw) - 44px),calc(100vw - 44px));
  --col-w:min(var(--prose-w),calc(100vw - 44px));
  --head-inset:max(0px,calc((var(--band-w) - var(--col-w)) / 2));
  --wrap-inset:max(0px,calc((var(--wrap-w) - var(--col-w)) / 2));
}
.prose{max-width:var(--prose-w)}

.photo-wide-head,.testimonials>h2,.testimonials>.t-lead,.t-foot,
.real-strip>h2,.real-strip>p{
  text-align:left;
  margin-left:var(--head-inset);
  margin-right:var(--head-inset);
}
.photo-wide-head{margin-bottom:1.2em}
.testimonials>h2{margin-top:0;margin-bottom:.25em}
.testimonials>.t-lead{margin-bottom:1.4em}
.t-foot{margin-top:1.4em;margin-bottom:0}
.real-strip>h2{margin-top:0}
.real-strip>p{margin-top:4px;max-width:none}
/* The ladder band is full-bleed dark with its own .wrap, so its head is inset
   against the wrap rather than against the breakout band. */
.ladder-band .wrap>h2,.ladder-band .wrap>p{
  text-align:left;
  margin-left:var(--wrap-inset);
  margin-right:var(--wrap-inset);
}

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