/* domus-aurea-tickets.com — "Terracotta" design system.
   Sun-baked clay, ink and weathered paper. DM Serif Display for headings,
   DM Sans for everything else, one terracotta for action.
   Flat on purpose: no gradients. The single-accent rule is load-bearing. */

:root{
  --ink:#2B1D14;        /* primary: headlines & core text */
  --sage:#7E6452;       /* secondary: borders, meta, captions */
  --coral:#AA5B34;      /* tertiary: the single interaction accent */
  --coral-ink:#9F5631;  /* readable orange (same hue) for link/body text */
  --coral-dk:#743F23;   /* button hover */
  --neutral:#F3E8D8;    /* page foundation */
  --surface:#FBF4E7;    /* card / panel surface */
  --white:#FFFFFF;
  --line:#E2D2BC;
  /* Terracotta radii — near-square. The system reads as printed matter, not
     as an app; softness would fight the serif. */
  --r-sm:4px;
  --r-md:8px;
  --r-lg:16px;
  --serif:"DM Serif Display",Georgia,"Times New Roman",serif;
  --maxw:1120px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:"DM Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:18px;line-height:1.6;color:var(--ink);background:var(--white);
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
img{max-width:100%;height:auto;display:block}
a{color:var(--coral-ink);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,.logo,.display{font-family:"DM Sans",sans-serif;font-weight:700;letter-spacing:-.025em;line-height:1.08}
h1{font-size:2.3rem;margin:.1em 0 .5em;font-weight:800;letter-spacing:-.04em}
h2{font-size:1.7rem;margin:2.2em 0 .6em}
h3{font-size:1.2rem;margin:1.6em 0 .4em}
h4{font-family:"DM Sans",sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sage);margin:0 0 .6em}
p{margin:0 0 1.05em}
@media(max-width:640px){h1{font-size:1.85rem}h2{font-size:1.4rem}}

.label{font-family:"DM Sans",sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--coral-ink);margin:0 0 .5em}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;background:var(--coral);color:#fff;font-family:"DM Sans",sans-serif;font-weight:600;
  font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;
  padding:12px 20px;border-radius:var(--r-md);border:2px solid var(--coral);
  transition:background .15s,border-color .15s;text-align:center;
}
.btn:hover{background:var(--coral-dk);border-color:var(--coral-dk);text-decoration:none;color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:40;background:var(--white);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:18px;height:66px}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:1.1rem;font-weight:700;letter-spacing:-.02em}
.logo:hover{text-decoration:none}
.logo .mark{width:30px;height:30px;flex:0 0 auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:24px}
.nav a{color:var(--ink);font-family:"DM Sans",sans-serif;font-weight:600;font-size:.92rem;letter-spacing:.01em}
.nav a:hover{color:var(--coral-ink);text-decoration:none}
.nav a.btn{color:#fff}
.nav a.btn:hover{color:#fff}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;font-size:1.5rem;color:var(--ink);cursor:pointer}
@media(max-width:860px){
  .nav-toggle{display:block}
  .nav{display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column;gap:0;
        background:var(--white);border-bottom:1px solid var(--line);padding:8px 22px 16px}
  .nav.open{display:flex}
  .nav a{padding:11px 0;border-bottom:1px solid var(--line);width:100%}
  .nav a.btn{margin-top:10px;text-align:center}
}

/* ---------- breadcrumb ---------- */
.crumb{font-family:"DM Sans",sans-serif;font-weight:600;font-size:.74rem;color:var(--sage);padding:14px 22px 0;text-transform:uppercase;letter-spacing:.05em}
.crumb a{color:var(--sage)}

/* ---------- hero (flat solid overlay, not a gradient) ---------- */
.hero{position:relative;background:var(--ink) center/cover no-repeat;background-image:url('/images/hero.jpg');color:#fff;border-bottom:4px solid var(--coral)}
.hero{background-image:-webkit-image-set(url('/images/hero.webp') type('image/webp'),url('/images/hero.jpg') type('image/jpeg'));background-image:image-set(url('/images/hero.webp') type('image/webp'),url('/images/hero.jpg') type('image/jpeg'))}
.hero::before{content:"";position:absolute;inset:0;background:rgba(21,24,24,.44)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(180deg,rgba(21,24,24,0),rgba(21,24,24,.72))}
.hero .wrap{position:relative;z-index:1;padding:163px 22px 145px;min-height:550px;display:flex;flex-direction:column;justify-content:center}
.hero-copy{max-width:52%}
.hero .label{color:#FFC9B0;opacity:.98}
.hero h1{font-size:3.2rem;margin:0 0 .35em;color:#fff;font-weight:800;letter-spacing:-.045em}
.hero .lede{font-size:1.18rem;color:#ECEDEA;margin-bottom:1.5em;line-height:1.5}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:1.6em}
.hero .btn-ghost{color:#fff;border-color:#fff}
.hero .btn-ghost:hover{background:#fff;color:var(--ink)}
.hero-trust{font-size:.95rem;color:#D9DBD7;margin:0}
.hero-trust b{color:#fff}
@media(max-width:900px){.hero-copy{max-width:100%}}
@media(max-width:640px){.hero h1{font-size:2.1rem}.hero .wrap{padding:64px 22px 56px;min-height:0}}

/* ---------- tour-data facts strip (under hero) ---------- */
.facts-strip{background:var(--surface);border-bottom:1px solid var(--line)}
.facts-strip .wrap{display:flex;flex-wrap:wrap;padding:0}
.facts-item{flex:1 1 0;min-width:150px;padding:16px 22px;border-right:1px solid var(--line)}
.facts-item:last-child{border-right:0}
.facts-val{font-family:"DM Sans",sans-serif;font-weight:800;font-size:1.18rem;line-height:1.05;color:var(--ink);letter-spacing:-.02em}
.facts-val .star{color:var(--coral)}
.facts-label{font-family:"DM Sans",sans-serif;font-size:.7rem;font-weight:600;color:var(--sage);text-transform:uppercase;letter-spacing:.06em;margin-top:.45em}
@media(max-width:780px){.facts-item{flex:1 1 50%;min-width:0;border-bottom:1px solid var(--line)}.facts-item:nth-child(2n){border-right:0}}
@media(max-width:420px){.facts-item{flex:1 1 100%;border-right:0}}

/* ---------- on-page jump bar (sticky anchor menu, homepage) ---------- */
.section-nav{position:sticky;top:66px;z-index:30;background:var(--ink);border-bottom:1px solid var(--ink)}
.section-nav .wrap{display:flex;gap:0;padding:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.section-nav .wrap::-webkit-scrollbar{display:none}
.section-nav a{flex:0 0 auto;display:inline-block;padding:13px 18px;color:#fff;
  font-family:"DM Sans",sans-serif;font-weight:600;font-size:.82rem;letter-spacing:.02em;white-space:nowrap;border-right:1px solid rgba(255,255,255,.12)}
.section-nav a:hover{background:var(--coral);color:#fff;text-decoration:none}
@media(max-width:780px){.section-nav{top:0}.section-nav a{padding:12px 15px;font-size:.8rem}}

/* ---------- explore link cluster (keyword interlinks, above footer) ---------- */
.explore{margin:2.4em 0 0;padding:26px 0 0;border-top:2px solid var(--ink)}
.explore h2{margin:0 0 .7em}
.explore-links{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 26px}
.explore-links a{display:block;font-family:"DM Sans",sans-serif;font-size:.92rem;font-weight:500;
  color:var(--ink);padding:6px 0 6px 16px;border-left:3px solid var(--coral);line-height:1.35}
.explore-links a:hover{color:var(--coral-ink);border-left-color:var(--coral-ink)}
@media(max-width:780px){.explore-links{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.explore-links{grid-template-columns:1fr}}

/* ---------- main / prose ---------- */
.section-pad{padding-top:40px;padding-bottom:64px}
.prose{max-width:760px;margin:0 auto}
.prose.wide{max-width:960px}
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.2em}
.prose li{margin:.32em 0}
ul.check{list-style:none;padding-left:0}
ul.check li{position:relative;padding-left:1.7em;margin:.5em 0}
ul.check li::before{content:"\2192";position:absolute;left:0;top:0;color:var(--coral-ink);font-weight:700}

/* page-hero banner inside articles */
.page-hero{margin:0 0 1.6em;border-radius:var(--r-lg);overflow:hidden}
.page-hero img{width:100%;max-height:380px;object-fit:cover}

/* ---------- answer box ---------- */
.answer-box{background:var(--neutral);border-left:5px solid var(--coral);padding:20px 24px;margin:0 0 1.8em;border-radius:0 var(--r-md) var(--r-md) 0}
.answer-box p{margin:0}
.answer-box strong{color:var(--ink)}
.answer-box a{text-decoration:underline;text-underline-offset:2px}

/* ---------- key takeaways (homecontent.TAKEAWAYS) ---------- */
.ia-takeaways{background:var(--ink);border-radius:16px;padding:26px 30px;margin:34px 0;color:rgba(255,255,255,.92)}
.ia-takeaways h2{color:#fff;margin:0 0 14px;font-size:1.25rem}
.ia-takeaways ul{list-style:none;margin:0;padding:0}
.ia-takeaways li{position:relative;padding:7px 0 7px 30px;line-height:1.55;border-bottom:1px solid rgba(255,255,255,.14)}
.ia-takeaways li:last-child{border-bottom:0}
.ia-takeaways li::before{content:"\2713";position:absolute;left:2px;top:7px;color:var(--accent,var(--coral));font-weight:700}
.ia-takeaways b,.ia-takeaways strong{color:#fff}
.ia-takeaways a{color:var(--accent,var(--coral));filter:brightness(1.35);text-decoration-color:rgba(255,255,255,.35)}
.ia-takeaways a:hover{color:#fff;filter:none}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:.96rem}
th,td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--ink);color:#fff;font-family:"DM Sans",sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}

/* ---------- tip / keyfacts / proscons ---------- */
.tip{background:var(--neutral);border:2px solid var(--coral);border-radius:var(--r-md);padding:16px 20px;margin:1.5em 0}
.tip-label{display:inline-block;font-family:"DM Sans",sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--coral-ink);margin-bottom:.3em}
.tip p{margin:0}

.keyfacts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin:1.6em 0}
.keyfacts div{background:var(--surface);padding:14px 16px}
.kf-label{display:block;font-family:"DM Sans",sans-serif;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);font-weight:600;margin-bottom:3px}
.keyfacts b{font-size:1.02rem}
@media(max-width:640px){.keyfacts{grid-template-columns:repeat(2,1fr)}}

.proscons{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:1.6em 0}
.pc{border:2px solid var(--line);border-radius:var(--r-md);padding:18px 20px;background:var(--surface)}
.pc ul{list-style:none;margin:0;padding:0}
.pc li{position:relative;padding-left:1.6em;margin:.5em 0}
.pros{border-color:var(--coral)}
.pros li::before{content:"\2713";position:absolute;left:0;color:var(--coral-ink);font-weight:700}
.cons li::before{content:"!";position:absolute;left:.25em;color:var(--sage);font-weight:700}
@media(max-width:640px){.proscons{grid-template-columns:1fr}}

.inclist{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:1.6em 0}
.inclist>div{border:2px solid var(--line);border-radius:var(--r-md);padding:18px 20px;background:var(--surface)}
.inclist h4{margin:0 0 .5em;font-family:"DM Sans",sans-serif;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.inclist ul{list-style:none;margin:0;padding:0}
.inclist li{position:relative;padding-left:1.6em;margin:.5em 0}
.inclist .inc{border-color:var(--coral)}
.inclist .inc h4{color:var(--coral-ink)}
.inclist .inc li::before{content:"\2713";position:absolute;left:0;color:var(--coral-ink);font-weight:700}
.inclist .exc h4{color:var(--sage)}
.inclist .exc li::before{content:"\00d7";position:absolute;left:.15em;color:var(--sage);font-weight:700}
@media(max-width:640px){.inclist{grid-template-columns:1fr}}

/* ---------- scorecard (review pages) ---------- */
.scorecard{display:grid;grid-template-columns:200px 1fr;gap:0;border:2px solid var(--ink);border-radius:var(--r-md);overflow:hidden;margin:0 0 1.8em}
.sc-score{background:var(--ink);color:#fff;padding:22px;display:flex;flex-direction:column;justify-content:center;text-align:center}
.sc-big{font-family:"DM Sans",sans-serif;font-weight:800;font-size:3rem;line-height:1;letter-spacing:-.03em}
.sc-stars{color:var(--coral);letter-spacing:2px;margin:.2em 0}
.sc-rev{font-size:.8rem;color:#D9DBD7}
.sc-price{margin-top:.5em;font-weight:700;color:#fff}
.sc-specs{padding:8px 22px;background:var(--surface)}
.sc-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.sc-row:last-child{border-bottom:0}
.sc-row span{color:var(--sage)}
.sc-row b{text-align:right}
@media(max-width:560px){.scorecard{grid-template-columns:1fr}}

/* ---------- review hub cards ---------- */
.rev-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:1.5em 0 .4em}
@media(max-width:600px){.rev-grid{grid-template-columns:1fr}}
.rev-card{display:flex;flex-direction:column;border:2px solid var(--line);border-radius:var(--r-lg);padding:0;overflow:hidden;background:var(--surface);color:var(--ink);transition:border-color .15s}
.rev-card:hover{border-color:var(--coral);text-decoration:none}
.rev-thumb{margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--ink)}
.rev-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.rev-card:hover .rev-thumb img{transform:scale(1.04)}
.rev-body{display:flex;flex-direction:column;flex:1;padding:16px 20px 18px}
.rev-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:.6em}
.rev-score{font-family:"DM Sans",sans-serif;font-weight:800;font-size:1.3rem;line-height:1;color:var(--ink)}
.rev-stars{color:var(--coral);letter-spacing:1px;font-size:.9rem}
.rev-count{font-family:"DM Sans",sans-serif;font-weight:500;font-size:.72rem;color:var(--sage)}
.rev-card h3{font-weight:700;font-size:1.05rem;line-height:1.3;margin:0 0 .4em}
.rev-card p{font-size:.92rem;color:var(--sage);margin:0 0 1em}
.rev-price{font-weight:700;font-size:.9rem;margin-top:auto}
.rev-more{display:block;color:var(--coral-ink);font-family:"DM Sans",sans-serif;font-weight:600;font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;margin-top:.5em}

/* ---------- tour cards ---------- */
.tours-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:20px;margin:1.5em 0 .4em}
.tours-grid.cols-4{grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:860px){.tours-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1024px){.tours-grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tours-grid,.tours-grid.cols-4{grid-template-columns:1fr}}
.tour{border:2px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);display:flex;flex-direction:column;transition:border-color .15s}
.tour:hover{border-color:var(--coral)}
/* whole card is an <a> (see helpers._card) — kill link styling, keep hover feedback */
a.tour{color:inherit;text-decoration:none}
a.tour:hover .btn{filter:brightness(1.08)}
.thumb{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--neutral)}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.badge{position:absolute;top:10px;left:10px;background:var(--coral);color:#fff;font-family:"DM Sans",sans-serif;font-weight:600;font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;border-radius:var(--r-sm)}
.tour-body{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1}
.tour-body h3{font-size:1.02rem;margin:0 0 .45em;line-height:1.25;font-weight:700}
.rate{font-size:.85rem;color:var(--sage);margin-bottom:.5em}
.star{color:var(--coral)}
.price{font-weight:700;margin-bottom:.8em}
.price span{font-weight:400;color:var(--sage);font-size:.85rem}
.tour-body .btn{margin-top:auto}
/* decorative desert filler tile (rounds out incomplete card rows on desktop) */
.tour-filler{position:relative;border:2px dashed #e0c4ad;background:var(--neutral);align-items:center;justify-content:center;min-height:180px}
.tour-filler:hover{border-color:#e0c4ad}
.tour-filler .filler-art{position:absolute;inset:0;width:100%;height:100%;opacity:.6}
.tour-filler .filler-label{position:relative;font-family:"DM Sans",sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.64rem;color:var(--sage);background:rgba(244,245,242,.78);padding:5px 11px;border-radius:var(--r-sm)}
@media(max-width:860px){.tour-filler{display:none}}

/* ---------- book-card (docked chip availability) ---------- */
.book-card{position:relative;border:2px solid var(--ink);border-radius:var(--r-md);padding:26px 18px 14px;margin:1.6em 0;background:var(--surface)}
.book-chip{position:absolute;top:-13px;left:18px;background:var(--coral);color:#fff;font-family:"DM Sans",sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:var(--r-sm)}
.gyg-frame{min-height:220px}

/* ---------- comparison table ---------- */
.cmp-wrap{overflow-x:auto;margin:1.8em 0}
/* Break the comparison table out of the 760px prose column so it has more room
   to breathe. Prose has ~158px of slack each side inside .wrap, so -110px is safe. */
@media(min-width:1080px){.cmp-wrap{margin-left:-110px;margin-right:-110px}}
table.cmp{border-collapse:separate;border-spacing:0;min-width:640px;width:100%;font-size:1.02rem}
table.cmp th,table.cmp td{border:0;border-bottom:1px solid var(--line);padding:16px 20px;background:var(--surface)}
table.cmp thead th{background:var(--neutral);color:var(--ink);vertical-align:bottom;text-transform:none;letter-spacing:-.01em;font-family:"DM Sans",sans-serif;font-weight:700}
table.cmp .rowlabel{font-family:"DM Sans",sans-serif;font-weight:600;color:var(--sage);font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}
table.cmp .feat{background:var(--neutral);border-left:2px solid var(--coral);border-right:2px solid var(--coral)}
table.cmp thead .feat{border-top:2px solid var(--coral)}
table.cmp tr.cmp-book .feat{border-bottom:2px solid var(--coral)}
.cmp-badge{display:inline-block;background:var(--coral);color:#fff;font-family:"DM Sans",sans-serif;font-weight:600;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:var(--r-sm);margin-bottom:6px}
.feat-title{display:block;font-family:"DM Sans",sans-serif;font-weight:800;font-size:1.12rem;letter-spacing:-.02em}
.col-alt{color:var(--ink)}
table.cmp .btn{width:100%;padding:11px 10px;font-size:.76rem}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:1.8em 0}
.gallery figure{margin:0;position:relative;border-radius:var(--r-md);overflow:hidden}
.gallery img{width:100%;aspect-ratio:3/4;object-fit:cover}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;background:rgba(21,24,24,.82);color:#fff;font-family:"DM Sans",sans-serif;font-weight:600;font-size:.72rem;padding:14px 12px 9px;text-transform:uppercase;letter-spacing:.04em}
@media(max-width:760px){.gallery{grid-template-columns:repeat(2,1fr)}}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:1.5em 0;counter-reset:s}
.step{border-top:3px solid var(--coral);padding:14px 4px 0;counter-increment:s}
.step::before{content:counter(s);font-family:"DM Sans",sans-serif;font-weight:800;font-size:1.5rem;color:var(--coral-ink);display:block;margin-bottom:.1em}
.step h3{margin:0 0 .25em;font-size:1.05rem}
.step p{font-size:.9rem;color:var(--sage);margin:0}
@media(max-width:760px){.steps{grid-template-columns:repeat(2,1fr)}}

/* ---------- reviews band ---------- */
.reviews-band{background:var(--neutral);border-radius:var(--r-lg);padding:24px;margin:1.8em 0}
.reviews-head{display:flex;align-items:center;gap:18px}
.reviews-head .big{font-family:"DM Sans",sans-serif;font-weight:800;font-size:3rem;color:var(--ink);line-height:1;letter-spacing:-.03em}
.reviews-head .stars{color:var(--coral);font-size:1.1rem;letter-spacing:2px}

/* ---------- honest guide ---------- */
.honest-guide{background:var(--neutral);border-radius:var(--r-lg);padding:32px 30px;margin:2.4em 0}
.honest-guide h2{margin-top:0}
.honest-guide .lead{font-size:1.1rem;color:var(--ink)}
.honest-guide h3{margin-top:1.5em}
.guide-fig{margin:1.5em 0}
.guide-fig img{width:100%;max-height:340px;object-fit:cover;border-radius:var(--r-md)}
.guide-fig figcaption{font-size:.84rem;color:var(--sage);margin-top:.5em;font-style:italic}

/* ---------- FAQ ---------- */
.faq{margin:1em 0}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;font-weight:600;padding:14px 30px 14px 0;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;color:var(--coral-ink);font-weight:700;font-size:1.3rem}
.faq details[open] summary::after{content:"\2212"}
.faq-body{padding:0 0 12px}
.faq-body p{margin:0}
.faq-contact{margin:1.1em 0 .2em;font-weight:600;color:var(--ink)}
.faq-contact a{color:var(--coral-ink)}

/* ---------- disclosure ---------- */
.disclosure{font-size:.84rem;color:var(--sage);background:var(--neutral);border-radius:var(--r-md);padding:13px 16px;margin:1em 0 1.6em}
.disclosure a{color:var(--coral-ink)}

/* related strip */
.related{border-top:2px solid var(--ink);margin-top:2.4em;padding-top:1.2em}

/* sitemap */
.sitemap-list{list-style:none;padding-left:0}
.sitemap-list li{margin:.4em 0;padding-left:1.2em;position:relative}
.sitemap-list li::before{content:"\2192";position:absolute;left:0;color:var(--coral-ink)}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:#C9CCC7;margin-top:40px;border-top:4px solid var(--coral)}
.site-foot .wrap{padding:48px 22px 30px}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.4fr;gap:32px}
.site-foot .brand .logo{color:#fff;margin-bottom:.6em}
.site-foot .brand p{font-size:.9rem;max-width:34em}
.site-foot h4{color:#fff;margin-bottom:.8em}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin:.4em 0}
.site-foot a{color:#C9CCC7;font-size:.92rem}
.site-foot a:hover{color:#fff}
.foot-guides{margin-top:30px;border-top:1px solid #2c2f2f;padding-top:20px}
.foot-guides ul{display:flex;flex-wrap:wrap;gap:8px 26px}
.foot-answers{margin-top:26px;border-top:1px solid #2c2f2f;padding-top:20px;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px}
.foot-answers .label{font-family:"DM Sans",sans-serif;font-weight:600;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#8d918c}
.foot-answers nav{display:flex;flex-wrap:wrap;gap:8px 18px}
.foot-answers a{color:#C9CCC7;font-size:.86rem}
.foot-answers a:hover{color:#fff}
.foot-facts{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:22px;border-top:1px solid #2c2f2f;padding-top:22px}
.foot-facts .kf-label,.foot-facts .label{display:block;font-family:"DM Sans",sans-serif;font-weight:600;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#8d918c;margin-bottom:3px}
.foot-facts b{color:#fff;font-size:.92rem}
.foot-searches{margin-top:22px;border-top:1px solid #2c2f2f;padding-top:20px}
.foot-searches h4{font-family:"DM Sans",sans-serif;font-weight:600;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#8d918c;margin:0 0 12px}
.foot-searches ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.foot-searches li{margin:0}
.foot-searches a{display:inline-block;padding:5px 11px;border:1px solid #2c2f2f;border-radius:999px;font-size:.78rem;color:#9fa39d;line-height:1.3;transition:color .15s,border-color .15s,background .15s}
.foot-searches a:hover{color:#fff;border-color:var(--coral);background:rgba(255,255,255,.05)}
.foot-bottom{margin-top:28px;border-top:1px solid #2c2f2f;padding-top:18px;font-family:"DM Sans",sans-serif;font-size:.74rem;color:#8d918c}
.foot-bottom a{color:#C9CCC7}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr}.foot-facts{grid-template-columns:repeat(2,1fr)}}

/* ---------- homepage: "what's included" two-column ---------- */
.includes{margin:2.2em 0;background:var(--surface);border:2px solid var(--line);border-radius:var(--r-lg);padding:26px 26px 22px}
.includes h2{margin:0 0 .25em}
.includes-lead{color:var(--sage);margin:0 0 1.2em;font-size:1rem}
.includes-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.includes-col h3{font-family:"DM Sans",sans-serif;font-weight:700;font-size:1.12rem;color:var(--ink);margin:0 0 .55em;padding-bottom:.4em;border-bottom:2px solid var(--coral);display:inline-block}
.includes-col ul.check{margin:0}
.includes-col .muted{color:var(--sage);font-style:italic}
@media(max-width:680px){.includes{padding:20px}.includes-grid{grid-template-columns:1fr;gap:18px}}

/* ---------- homepage: route / "what you see, in order" (AEO) ---------- */
.route{margin:2.4em 0}
.route h2{margin:0 0 .25em}
.route-lead{color:var(--sage);margin:0 0 1.1em;font-size:1rem}
.route-stops{list-style:none;margin:1.4em 0;padding:0;counter-reset:stop}
.route-stops li{counter-increment:stop;position:relative;padding:0 0 1.1em 3.2em;margin:0}
.route-stops li:before{content:counter(stop);position:absolute;left:0;top:0;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;background:var(--coral);color:#fff;font-family:"DM Sans",sans-serif;font-size:.85rem;font-weight:600;border-radius:var(--r-sm)}
.route-stops li:not(:last-child):after{content:"";position:absolute;left:.95rem;top:2rem;bottom:.2em;width:2px;background:var(--line)}
.route-stops li strong{color:var(--ink)}

/* ---------- homepage: wide photo gallery (breaks out of prose) ---------- */
.photo-wide{position:relative;left:50%;transform:translateX(-50%);width:min(1180px,94vw);margin:2.6em 0}
.photo-wide-head{text-align:center;max-width:44em;margin:0 auto 1.2em}
.photo-wide-head h2{margin:.15em 0 .3em}
.photo-wide-sub{color:var(--sage);margin:0}
.photo-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.photo-strip .shot{margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--neutral)}
.photo-strip .shot img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .4s ease}
.photo-strip .shot:hover img{transform:scale(1.06)}
@media(max-width:760px){.photo-strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.photo-strip{grid-template-columns:1fr}}

/* ---------- homepage: guest testimonials (breaks out of prose) ---------- */
.testimonials{position:relative;left:50%;transform:translateX(-50%);width:min(1180px,94vw);margin:2.8em 0 2.2em}
.testimonials h2{text-align:center;margin:0 0 .25em}
.t-lead{text-align:center;color:var(--sage);margin:0 0 1.4em}
.t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.t-card{margin:0;background:var(--white);border:2px solid var(--line);border-radius:var(--r-lg);padding:20px 20px 16px;display:flex;flex-direction:column}
.t-stars{color:var(--coral);letter-spacing:2px;font-size:.92rem;margin-bottom:.5em}
.t-card blockquote{margin:0 0 1em;font-size:.96rem;line-height:1.55;color:var(--ink)}
.t-card figcaption{margin-top:auto;border-top:1px solid var(--line);padding-top:.7em}
.t-name{display:block;font-family:"DM Sans",sans-serif;font-weight:700;font-size:.86rem;color:var(--ink)}
.t-tour{display:block;font-family:"DM Sans",sans-serif;font-size:.74rem;color:var(--sage);margin-top:2px}
.t-foot{text-align:center;color:var(--sage);font-size:.9rem;margin:1.4em 0 0}
@media(max-width:860px){.t-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.t-grid{grid-template-columns:1fr}}
/* ===== CTR features (opt-in; render only when the site defines them) =====
   _ladder / _town_chips / _book_bar in build_home.py + fee/perday in helpers.
   First shipped on yellowstonetourpackages.com. Recolor per site theme. */
/* entry-fee badge on card thumbs (tour dict: "fee_inc" / "fee_badge") */
.fee-badge{position:absolute;left:10px;bottom:10px;background:#2E5D3A;color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:.02em;padding:4px 9px;border-radius:4px}
/* price-per-day subtext (tour dict: "perday") */
.perday{font-size:.8rem;color:var(--sage);margin:-4px 0 10px}
/* duration/decision ladder band (homecontent: LADDER) */
.ladder-band{background:var(--ink);color:var(--neutral);padding:34px 0 40px}
.ladder-band h2{color:var(--neutral);font-size:1.45rem;margin:0 0 18px}
.ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ladder-col{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);
  border-radius:10px;padding:20px 18px;display:flex;flex-direction:column}
.ladder-col.feat{background:var(--surface);color:var(--ink);border-color:var(--surface)}
.ladder-col.feat p{color:var(--ink)}
.ladder-days{font-weight:700;font-size:1.05rem;letter-spacing:.03em;text-transform:uppercase}
.ladder-price{color:var(--coral);font-weight:700;font-size:1.3rem;margin:4px 0 8px}
.ladder-col.feat .ladder-price{color:var(--coral-ink)}
.ladder-col p{font-size:.9rem;line-height:1.5;margin:0 0 16px;color:rgba(255,255,255,.85);flex:1}
.ladder-col .btn{align-self:flex-start}
.ladder-col .btn.ghost{background:transparent;border:1.5px solid rgba(255,255,255,.5);color:var(--neutral)}
.ladder-col .btn.ghost:hover{border-color:var(--coral);color:var(--coral)}
@media(max-width:760px){.ladder{grid-template-columns:1fr}}
/* departure-town chips (auto when 2+ tours carry "town") */
.town-chips{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:6px 0 18px}
.chips-label{font-size:.85rem;color:var(--sage);font-weight:600}
.town-chips .chip{background:var(--neutral);border:1px solid var(--line);border-radius:999px;
  padding:6px 14px;font:inherit;font-size:.85rem;cursor:pointer;color:var(--ink)}
.town-chips .chip.on{background:var(--ink);color:var(--neutral);border-color:var(--ink)}
.town-chips .chip:hover{border-color:var(--coral)}
/* sticky mobile book-bar (homecontent: BOOK_BAR) */
.book-bar{display:none}
@media(max-width:760px){
  .book-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--ink);color:var(--neutral);align-items:center;justify-content:space-between;
    gap:10px;padding:10px 14px;box-shadow:0 -3px 12px rgba(0,0,0,.25)}
  .book-bar span{font-size:.85rem;font-weight:600}
  .book-bar .btn{padding:9px 16px;font-size:.85rem}
  body{padding-bottom:58px}
}

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

/* cancel-note under availability widgets (conversion layer) */
.cancel-note{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:.82rem;color:var(--sage)}

/* anchored-price band (opt-in via homecontent PRICE_ANCHOR) */
.price-anchor{margin:34px 0;padding:26px 26px 28px;background:var(--surface);
  border:1px solid var(--line);border-radius:14px}
.price-anchor h2{margin:0 0 18px;font-size:1.25rem}
.pa-row{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch}
.pa-col{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:10px}
.pa-was{background:var(--neutral);border:1px dashed var(--line)}
.pa-now{background:var(--ink);color:#fff;border:1px solid var(--ink)}
.pa-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;opacity:.75;font-weight:700}
.pa-price{font-size:2rem;font-weight:800;line-height:1.1}
.pa-was .pa-price{color:var(--sage)}
.pa-now .pa-price{color:#fff}
.pa-note{font-size:.85rem;line-height:1.45;opacity:.85}
.pa-vs{align-self:center;font-weight:800;color:var(--sage);font-size:.9rem;
  text-transform:uppercase;letter-spacing:.08em}
.pa-now .btn{margin-top:12px;align-self:flex-start;background:var(--accent);border-color:var(--accent)}
@media(max-width:720px){.pa-row{grid-template-columns:1fr}.pa-vs{justify-self:center;padding:2px 0}}

/* real-photo trust strip (opt-in via homecontent REAL_STRIP; Wikimedia Commons, credited) */
.real-strip{margin:38px 0}
.real-strip>h2{text-align:center}
.real-strip>p{color:var(--sage);margin-top:4px;text-align:center;max-width:820px;margin-left:auto;margin-right:auto}
.real-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.real-grid figure{margin:0}
.real-grid img{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;border-radius:10px;display:block}
.real-grid figcaption{font-size:.76rem;color:var(--sage);margin-top:6px;line-height:1.4}
.real-grid figcaption a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media(max-width:720px){.real-grid{grid-template-columns:1fr}}
/* breakout: same width as the testimonials band */
.real-strip.breakout{position:relative;left:50%;transform:translateX(-50%);width:min(1180px,94vw)}
.real-zoom{display:block;cursor:zoom-in}
.real-zoom img{transition:transform .18s ease}
.real-zoom:hover img{transform:scale(1.015)}
/* lightbox overlay for full-size photos */
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(20,26,18,.92);
  display:flex;align-items:center;justify-content:center;cursor:zoom-out;padding:24px}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;max-width:min(1500px,96vw);text-align:center}
.lightbox img{max-width:100%;max-height:84vh;border-radius:8px;display:block;margin:0 auto}
.lightbox figcaption{color:#e8e5da;font-size:.82rem;margin-top:10px;line-height:1.4}
.lightbox figcaption a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* author card (EEAT, about page — driven by cfg.AUTHOR) */
.author-card{display:flex;gap:18px;align-items:center;margin:18px 0 24px;padding:16px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px}
.author-card img{width:96px;height:96px;border-radius:50%;object-fit:cover;flex-shrink:0}
.author-card div{display:flex;flex-direction:column;gap:3px}
.author-card b{font-size:1.05rem}
.author-card span{font-size:.85rem;color:var(--sage)}

/* ==========================================================================
   TERRACOTTA LAYER + CONVERSION/UX SET
   Two jobs. First, finish the design.md system the scaffold cannot express:
   DM Serif Display headings, near-square corners, cream-on-clay buttons, flat
   surfaces, one accent. Second, apply the conversion and accessibility set
   that carried the earlier builds in this family.

   COLOUR NOTE — read before changing any value. design.md's palette fails
   WCAG AA in three places as supplied, so the tokens above are corrected, not
   copied. #C56A3C reaches only 3.49:1 on the cream surface, which fails the
   4.5 needed for link text AND fails it again as a button fill under a cream
   label. #8B6F5B reaches 4.24 / 3.84, too low for captions. The replacements
   were derived by darkening at CONSTANT HUE: 20.15deg for the clay, 25.00deg
   for the stone — identical to the source, to two decimal places. The palette
   looks like the brief because it is the brief, one step deeper.
   ========================================================================== */

/* 1. Headings are the serif. DM Serif Display ships ONE weight (400), so every
      700/800 the scaffold set must go — otherwise the browser synthesises a
      fake bold and the letterforms smear at display sizes. */
h1,h2,h3,.logo,.display,.sc-big,.facts-val,.feat-title,.rev-score,.t-name{
  font-family:var(--serif);font-weight:400}
h1{font-weight:400;letter-spacing:-.015em}
h2,h3{letter-spacing:-.01em}
.logo{font-weight:400;letter-spacing:0}
/* Labels stay DM Sans — design.md is explicit, and a serif at .72rem uppercase
   with .12em tracking would be unreadable. */
.label,h4,.facts-label,.kf-label,.tip-label,.crumb{
  font-family:"DM Sans",sans-serif;letter-spacing:.1em}

/* 2. Buttons carry the cream label design.md specifies, not white.
      On the corrected clay that is 4.51:1 — AA for the small uppercase label.

      :not(.btn-ghost) is load-bearing, not tidiness. An unqualified `.btn`
      here has the same specificity as the `.btn-ghost` rule further up the
      file and simply wins on source order, so it repainted the ghost buttons'
      label cream as well — cream text on the cream page, contrast ratio 1.0,
      invisible until you hovered and the hover background arrived underneath
      it. The comparison table's "View" buttons read as empty outlined boxes.
      Scope the fill-button colour to fill buttons and the class stops leaking. */
.btn:not(.btn-ghost){color:var(--surface);letter-spacing:.08em}
.btn:not(.btn-ghost):hover{color:var(--surface)}
.nav a.btn:not(.btn-ghost),.nav a.btn:not(.btn-ghost):hover{color:var(--surface)}
.btn-ghost{letter-spacing:.08em}

/* 2b. Ghost buttons, stated explicitly so the cascade is deliberate rather
       than a source-order accident. Ink label on the page (14.9:1), and on
       hover the fill inverts to ink with the cream label (14.9:1). The hero
       variant sits on a dark photo overlay and keeps its own light treatment,
       declared after this so it wins on its own terms and not by luck. */
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.hero .btn-ghost{color:var(--surface);border-color:var(--surface);background:transparent}
.hero .btn-ghost:hover{background:var(--surface);color:var(--ink);border-color:var(--surface)}

/* 3. Flat by mandate. The scaffold's hero used a scrim gradient; Terracotta
      forbids gradients, so legibility comes from one flat overlay. 0.60 over
      the ink keeps small cream text above 4.5:1 even across a bright photo. */
.hero{border-bottom:4px solid var(--coral)}
.hero::before{background:rgba(43,29,20,.60)}
.hero::after{content:none}
.hero .lede{color:#F1E7D8}
.hero-trust{color:#E4D8C6}

/* 4. The hero eyebrow is a solid clay chip. A tinted text label cannot
      guarantee contrast over an unknown photo region; a chip always can. */
.hero .label{display:inline-block;background:var(--coral);color:var(--surface);
  padding:5px 11px;border-radius:var(--r-sm);letter-spacing:.1em;opacity:1;
  font-family:"DM Sans",sans-serif}

/* 5. Fluid H1. A fixed size on a long descriptive headline pushed the CTA
      below the fold in an earlier build in this family. Serif at display size
      needs a slightly tighter line than the sans did. */
.hero h1{font-family:var(--serif);font-weight:400;
  font-size:clamp(2.2rem,3.6vw,3.9rem);line-height:1.06;letter-spacing:-.015em}

/* 6. Skip link. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);
  color:var(--surface);padding:12px 18px;border-radius:0 0 var(--r-sm) 0;font-weight:600}
.skip-link:focus{left:0}

/* 7. Visible focus. The scaffold ships none, which makes every control
      reachable by keyboard and invisible to one. */
a:focus-visible,button:focus-visible,summary:focus-visible,.btn:focus-visible{
  outline:3px solid var(--coral-dk);outline-offset:2px;border-radius:var(--r-sm)}
.hero a:focus-visible{outline-color:var(--surface)}

/* 8. Assurance row under the CTA. Hesitation at the click is about commitment,
      not price. inline-block, NOT inline-flex — as flex items the bullet and
      the text became separate children and lost their word spacing. */
.cta-assure{margin:-.4em 0 1.6em;font-size:.92rem;color:#E4D8C6;
  display:inline-block;line-height:1.5}
.cta-assure b{color:var(--surface);font-weight:700}
.cta-assure::before{content:"";display:inline-block;width:7px;height:7px;
  border-radius:50%;background:var(--coral);margin-right:9px;vertical-align:middle}
.prose .cta-assure{color:var(--sage)}
.prose .cta-assure b{color:var(--ink)}

/* 9. Hero alert strip. One timely caveat between the promise and the
      commitment. On this site it carries the three-days-a-week rule, which is
      the single fact most likely to wreck someone's plan. */
.hero-alert{display:block;background:rgba(251,244,231,.12);
  border:1px solid rgba(251,244,231,.30);border-left:3px solid var(--coral);
  border-radius:var(--r-sm);padding:11px 15px;margin:0 0 1.4em;
  font-size:.95rem;color:var(--surface);max-width:44em}
.hero-alert b{font-weight:700}
.hero-alert a{color:var(--surface);text-decoration:underline;text-underline-offset:3px}

/* 10. Sticky mobile booking bar. Evergreen copy only — it renders on every
       page and never rebuilds when a price moves. */
.sticky-cta{display:none}
@media(max-width:760px){
  .sticky-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    align-items:center;justify-content:space-between;gap:12px;
    background:var(--surface);border-top:1px solid var(--line);
    box-shadow:0 -6px 24px rgba(43,29,20,.14);padding:10px 16px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .sticky-cta-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
  .sticky-cta-txt b{font-family:var(--serif);font-weight:400;font-size:1rem;color:var(--ink)}
  .sticky-cta-txt small{font-size:.7rem;color:var(--sage);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sticky-cta .btn{padding:11px 18px;font-size:.86rem;white-space:nowrap}
  body{padding-bottom:68px}
}

/* 11. Card lift. A small affordance on a flat system where nothing else moves. */
.tour,.t-card,.ans-card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.tour:hover,.ans-card:hover{transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(43,29,20,.13);border-color:var(--coral)}

/* 12. Price anchoring. The crossed figure is the official gate price, never an
       invented "was" price — on this site that comparison is the whole story. */
.price-anchor{font-size:.8rem;color:var(--sage);text-decoration:line-through;margin-right:.45em}
.price-now{font-weight:700;color:var(--ink)}

/* 13. Featured comparison column. One recommendation, stated. */
table.cmp .col-alt{background:rgba(170,91,52,.07)}
table.cmp thead th.col-alt{background:rgba(170,91,52,.14);
  box-shadow:inset 0 -3px 0 var(--coral)}

/* 14. Header fit. German compounds set much longer than English; the nav has
       to survive "Öffnungszeiten" without wrapping into the logo. */
@media(max-width:1140px) and (min-width:861px){
  .nav{gap:15px}
  .nav a{font-size:.85rem}
  .logo{font-size:1rem}
}

/* 15. Respect reduced motion — every transform above is decorative. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .tour:hover,.ans-card:hover{transform:none}
  .photo-strip .shot:hover img,.gallery .shot:hover img{transform:none}
}

/* 16. Above-the-fold CTA. Measured, not guessed. Before this block the buttons
       sat at y=938 on a 1366x768 laptop and the assurance line at y=1027 —
       both below the fold, on the one screen that decides whether anyone
       books. The measurements that mattered: 163px of top padding from the
       scaffold, a 560px copy column forcing the H1 to four lines and the lede
       to EIGHT, and a five-line alert strip under it.

       The H1 and the lede keep their length. They are the descriptive headline
       and the citable sentence, which is what answer engines quote and what
       this site is for. The space comes from padding, column width and leading
       instead. Re-measure with /tmp/measure.py if any of the three change. */
@media(min-width:901px){
  .hero .wrap{padding:56px 22px 68px;min-height:0}
  .hero-copy{max-width:62%}
  .hero h1{margin-bottom:.2em}
  .hero .lede{font-size:1.06rem;line-height:1.45;margin-bottom:.95em}
  .hero-alert{margin-bottom:.85em;padding:9px 13px;font-size:.92rem}
  .hero-cta{margin-bottom:1em}
  .cta-assure{margin-bottom:1.1em}
}

/* 17. Language chips. Four of them plus five nav links and a booking button is
       a crowded header, so they are deliberately quiet: no accent, no fill on
       the inactive ones. The terracotta belongs to the Book button and the
       single-accent rule means nothing in that row competes with it. The
       active language is a <span>, not a link — a chip that navigates to the
       page you are already reading is a dead control. */
.lang-switch{
  font-size:.72rem;font-weight:700;letter-spacing:.08em;color:var(--sage);
  padding:4px 6px;border-radius:var(--r-sm);border:1px solid transparent;line-height:1}
a.lang-switch:hover{color:var(--ink);border-color:var(--line);text-decoration:none}
.lang-switch.is-on{color:var(--ink);border-color:var(--line);background:var(--neutral)}
.nav .lang-switch:first-of-type{margin-left:6px}
.nav .lang-switch + .lang-switch{margin-left:1px}

/* Four languages push the header wider than the two-language sister sites, and
   German sets longer than English on every label. Tighten earlier. */
@media(max-width:1240px) and (min-width:861px){
  .nav{gap:13px}
  .nav a:not(.lang-switch):not(.btn){font-size:.82rem}
  .logo{font-size:.98rem}
  .nav .btn{padding:10px 14px;font-size:.76rem}
}
@media(max-width:860px){
  /* In the collapsed mobile nav every child is a full-width stacked row, which
     would give each language its own line. Keep the four on one. */
  .nav .lang-switch{display:inline-block;width:auto;border-bottom:0;padding:7px 11px}
  .nav .lang-switch:first-of-type{margin-top:10px;margin-left: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="de"] .hero h1{--h1-scale:0.88} /* h1_retrofit v2 */
html[lang="es"] .hero h1{--h1-scale:0.88} /* h1_retrofit v2 */
html[lang="it"] .hero h1{--h1-scale:0.88} /* h1_retrofit v2 */