/* ===== Legend Costa Rica — design system (Option A: Playfair Display + Montserrat) ===== */
:root{
  --ink:#1C1814; --ink-soft:#4A4036; --muted:#6E6253;
  --gold:#AE8230; --gold-deep:#8C6722; --gold-script:#C29A48;
  --cream:#F6EFE3; --white:#FFFFFF; --offwhite:#FBF9F5; --line:#E7E0D2; --dark:#16120D;
  --maxw:1200px; --gut:24px;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.serif{font-family:var(--serif)}
section{position:relative}
.bg-cream{background:var(--cream)}
.bg-off{background:var(--offwhite)}
.bg-dark{background:var(--dark);color:#F3ECDF}
/* type */
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.08;color:var(--ink)}
.kicker{font-family:var(--sans);font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--gold)}
.bg-dark .kicker{color:var(--gold-script)}
.s-head{text-align:center;max-width:680px;margin:0 auto 44px}
.s-head .kicker{display:block;margin-bottom:14px}
.s-head h2{font-size:clamp(28px,4vw,42px)}
.s-head p{color:var(--muted);margin-top:14px;font-size:17px}
.bg-dark .s-head p{color:#cfc6b6}
.section{padding:84px 0}
.section-sm{padding:60px 0}
/* buttons */
.btn{display:inline-block;font-family:var(--sans);font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;padding:15px 30px;border:1px solid transparent;cursor:pointer;transition:.2s;text-align:center}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:var(--gold-deep)}
.btn-out{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-out:hover{background:var(--ink);color:#fff}
.btn-light{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.btn-light:hover{background:#fff;color:var(--ink)}
.link-gold{color:var(--gold-deep);font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.04em;border-bottom:1px solid var(--gold);padding-bottom:2px}
.rule{height:1px;background:var(--line);position:relative}
.rule:after{content:"";position:absolute;left:50%;transform:translateX(-50%);top:-1px;width:60px;height:3px;background:var(--gold)}
/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .row{display:flex;align-items:center;justify-content:space-between;height:74px;gap:24px}
.nav .brand{display:flex;align-items:center}
.nav .brand small{font-family:'Snell Roundhand','Savoye LET',cursive;font-size:17px;color:var(--gold-script);letter-spacing:0}
.nav .links{display:flex;gap:26px;align-items:center}
.nav .links a{font-family:var(--sans);font-size:13px;letter-spacing:.06em;color:var(--ink-soft);font-weight:500;transition:.2s}
.nav .links a:hover{color:var(--gold-deep)}
.nav .tools{display:flex;gap:14px;align-items:center}
.nav .lang{font-size:12px;letter-spacing:.08em;color:var(--muted);white-space:nowrap}
.nav .lang b{color:var(--ink)}
.nav .btn{padding:11px 22px}
.nav .burger{display:none;font-size:24px;background:none;border:none;color:var(--ink)}
/* hero */
.hero{min-height:88vh;display:flex;align-items:center;color:#fff;position:relative;overflow:hidden}
/* visually-hidden utility: keeps an h1 in the document for SEO/screen readers
   without showing it. !important because .hero h1 (0,1,1) outranks .sr-only. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center 62%;z-index:0}
.hero .ov{position:absolute;inset:0;background:linear-gradient(rgba(20,16,12,.5),rgba(20,16,12,.42) 45%,rgba(20,16,12,.7));z-index:1}
.hero .inner{position:relative;z-index:2;text-align:center;width:100%;padding:90px 0}
.hero .script{font-family:'Snell Roundhand','Savoye LET',cursive;font-size:clamp(34px,5vw,54px);color:var(--gold-script);line-height:.8}
.hero h1{font-size:clamp(60px,12vw,150px);letter-spacing:.04em;color:#fff;line-height:.9;margin:2px 0}
.hero .tag{font-family:var(--sans);letter-spacing:.4em;font-size:clamp(12px,1.5vw,17px);color:#f3ecdf;padding-left:.4em}
.hero .sub{max-width:600px;margin:26px auto 0;font-size:17px;color:#ece4d6}
.hero .cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.hero .trust{display:flex;gap:30px;justify-content:center;flex-wrap:wrap;margin-top:40px;font-family:var(--sans);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#d9cfbd}
.hero .trust b{color:var(--gold-script)}

/* fare finder */
.fare{background:var(--white);border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(28,24,20,.4);max-width:980px;margin:0 auto;padding:30px}
.fare .ttl{font-family:var(--serif);font-size:22px;margin-bottom:18px}
.fare .grid{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:14px;align-items:end}
.fare label{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:600}
.fare select{width:100%;font-family:var(--sans);font-size:15px;color:var(--ink);padding:13px 12px;border:1px solid var(--line);background:var(--offwhite);appearance:none;cursor:pointer}
.fare select:focus{outline:none;border-color:var(--gold)}
.fare .go{padding:14px 26px;white-space:nowrap}
.fare .result{margin-top:22px;border-top:1px solid var(--line);padding-top:22px;display:none;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.fare .result.show{display:flex}
.fare .price{font-family:var(--serif);font-size:38px;color:var(--ink)}
.fare .price small{font-family:var(--sans);font-size:13px;color:var(--muted);letter-spacing:.04em}
.fare .rmeta{font-family:var(--sans);font-size:13px;color:var(--muted)}
.fare .rmeta b{color:var(--ink)}
/* cards grid */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.card{background:var(--white);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;transition:.25s}
.card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -34px rgba(28,24,20,.5)}
.card .ph{aspect-ratio:3/2;background-size:cover;background-position:center}
.card .body{padding:22px 22px 24px;flex:1;display:flex;flex-direction:column}
.card .rt{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700}
.card h3{font-size:23px;margin:8px 0 0}
.card p{color:var(--muted);font-size:14.5px;margin-top:10px;flex:1}
.card .cfoot{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.card .from{font-family:var(--sans);font-size:13px;color:var(--muted)}
.card .from b{font-family:var(--serif);font-size:22px;color:var(--ink);font-weight:500}
/* pillar card (image w/ overlay) */
.pillar{position:relative;aspect-ratio:4/5;overflow:hidden;display:flex;align-items:flex-end;color:#fff}
.pillar .ph{position:absolute;inset:0;background-size:cover;background-position:center;transition:.5s}
.pillar:hover .ph{transform:scale(1.05)}
.pillar .ov{position:absolute;inset:0;background:linear-gradient(transparent 14%,rgba(20,16,12,.5) 52%,rgba(20,16,12,.92));z-index:1}
.pillar .t{position:relative;z-index:2;padding:26px}
.pillar h3{color:#fff;font-size:26px}
.pillar p{color:#e7ddcb;font-size:13.5px;margin-top:6px}
.pillar .more{display:inline-block;margin-top:14px;font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-script);font-weight:700}
/* why grid */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 40px}
.why .it h4{font-size:19px;display:flex;gap:10px;align-items:baseline}
.why .it h4 .n{font-family:var(--sans);font-size:12px;color:var(--gold);letter-spacing:.1em}
.why .it p{color:var(--muted);font-size:14.5px;margin-top:8px}
/* popular routes */
.routes-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 50px}
.routes-list a{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);transition:.2s}
.routes-list a:hover{padding-left:8px}
.routes-list .r{font-family:var(--serif);font-size:18px}
.routes-list .p{font-family:var(--sans);font-size:14px;color:var(--gold-deep);font-weight:600}
/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.steps .st{text-align:center}
.steps .num{font-family:var(--serif);font-size:40px;color:var(--gold);line-height:1}
.steps h4{font-size:18px;margin:12px 0 6px}
.steps p{color:var(--muted);font-size:13.5px}
.bg-dark .steps p{color:#cfc6b6}
/* fleet / split band */
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:0;align-items:stretch}
.split .ph{min-height:440px;background-size:cover;background-position:center}
.split .tx{padding:64px 56px;display:flex;flex-direction:column;justify-content:center}
.split .tx h2{font-size:clamp(26px,3.4vw,38px)}
.split .tx p{color:var(--muted);margin-top:16px}
.split .tx.bg-dark p{color:#EDE6D7}
.split .specs{display:flex;gap:30px;margin-top:24px;flex-wrap:wrap}
.split .specs .s b{display:block;font-family:var(--serif);font-size:26px;color:var(--gold-script)}
.split .specs .s span{font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bg-dark .split .specs .s span{color:#b7ac99}
/* reviews */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.rev{border:1px solid var(--line);padding:28px;background:var(--white)}
.rev .stars{color:var(--gold);letter-spacing:3px;font-size:14px}
.rev p{font-family:var(--serif);font-size:18px;font-style:italic;color:var(--ink-soft);margin:14px 0 16px;line-height:1.5}
.rev .who{font-family:var(--sans);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rev.empty{border-style:dashed;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);font-size:13px}
/* calendar placeholder */
.cal{max-width:420px;margin:0 auto;border:1px solid var(--line);background:var(--white);padding:22px}
.cal .h{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.cal .h .m{font-family:var(--serif);font-size:18px}
.cal .h button{border:none;background:none;color:var(--gold-deep);font-size:18px;cursor:pointer;padding:4px 8px}
.cal .dow,.cal .days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal .dow span{text-align:center;font-family:var(--sans);font-size:10px;letter-spacing:.06em;color:var(--muted);padding:6px 0}
.cal .days button{aspect-ratio:1;border:1px solid transparent;background:var(--offwhite);font-family:var(--sans);font-size:13px;color:var(--ink);cursor:pointer;transition:.15s}
.cal .days button:hover:not(:disabled){border-color:var(--gold);color:var(--gold-deep)}
.cal .days button:disabled{color:#cabfae;background:#fff;cursor:default}
.cal .days button.sel{background:var(--gold);color:#fff}
.cal .soon{text-align:center;font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:14px}
/* cta band */
.ctaband{text-align:center;padding:96px 0}
.ctaband h2{font-size:clamp(30px,4.5vw,50px);color:#fff}
.ctaband p{color:#d9cfbd;margin:16px auto 28px;max-width:520px}
.ctaband .cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
/* footer */
.foot{background:var(--dark);color:#cfc6b6;padding:64px 0 28px;font-family:var(--sans);font-size:14px}
.foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.foot h5{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.foot a{color:#cfc6b6;display:block;padding:5px 0;transition:.2s}
.foot a:hover{color:var(--gold-script)}
.foot .brand{font-family:var(--serif);font-size:26px;color:#fff;letter-spacing:.06em}
.foot .brand small{font-family:'Allura',cursive;color:var(--gold-script);font-size:22px}
.foot .bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12px;color:#9c9281}
.foot .bottom a{display:inline;color:#9c9281}
.fr-band{background:var(--cream);text-align:center;padding:34px 0}
.fr-band .fl{font-family:var(--serif);font-size:clamp(20px,2.6vw,28px);font-style:italic;color:var(--ink-soft)}
.fr-band .fl b{font-style:normal;color:var(--gold-deep)}
/* responsive */
@media(max-width:920px){
  .grid-3,.grid-4,.why,.steps,.revs,.routes-list{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}.split .ph{min-height:300px}
  .fare .grid{grid-template-columns:1fr 1fr}
  .foot .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  /* nav does not physically fit between 641-820px, so the burger takes over
     at 900px rather than 640px - below that the tools overflowed the viewport */
  .nav .links{display:none}.nav .burger{display:block}
}
@media(max-width:640px){
  .grid-3,.grid-4,.why,.steps,.revs,.routes-list,.grid-2{grid-template-columns:1fr}
  .fare .grid{grid-template-columns:1fr}
  .section{padding:60px 0}.split .tx{padding:40px 26px}
  .foot .cols{grid-template-columns:1fr}
}

/* ----- v2 fixes: logo, script accent, spacing ----- */
.nav .brand img{height:52px;width:auto;display:block}
.hero .logo{display:block;margin:0 auto;width:min(560px,84vw);height:auto}
.saccent{font-family:'Allura',cursive;color:var(--gold-script);font-size:clamp(28px,3.4vw,42px);line-height:.7;display:block;margin-bottom:4px}
.s-head .saccent{margin-bottom:6px}
.split .tx.bg-dark h2{color:#fff}
.bg-dark .steps p{color:#d8cfbe}
.pt-sm{padding-top:46px}
.pb-sm{padding-bottom:50px}

.hero .sub,.hero .trust{text-shadow:0 1px 14px rgba(20,16,12,.6)}

/* Our Fleet full-bleed band */
.fleetband{min-height:74vh;background-size:cover;background-position:center 60%;display:flex;align-items:flex-end;color:#fff;padding:0 0 64px}
.fleetcap{max-width:560px}
.fleetband .kicker{color:var(--gold-script)}
.fleetband h2{color:#fff;font-size:clamp(28px,4vw,44px);margin-top:6px}
.fleetband p{color:#ECE4D6;margin-top:14px;text-shadow:0 1px 14px rgba(20,16,12,.6)}
.fleetband .specs{display:flex;gap:34px;margin-top:24px;flex-wrap:wrap}
.fleetband .specs .s b{display:block;font-family:var(--serif);font-size:28px;color:var(--gold-script)}
.fleetband .specs .s span{font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#d8cfbe}

/* hero logo pop + Our Fleet photo (text above image) */
.hero .logo{filter:drop-shadow(0 3px 22px rgba(20,16,12,.55))}
.fleetphoto{margin:4px 0 0;border:1px solid var(--line)}
.fleetphoto img{width:100%;display:block;max-height:600px;object-fit:cover;object-position:center 58%}
.specs-row{display:flex;gap:46px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.specs-row .s{text-align:center}
.specs-row .s b{display:block;font-family:var(--serif);font-size:30px;color:var(--gold)}
.specs-row .s span{font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ===== inner pages (tours/transfers/trips) ===== */
.phero{position:relative;min-height:54vh;display:flex;align-items:center;background-size:cover;background-position:center;color:#fff;padding:120px 0 70px}
.phero .container{position:relative;z-index:2}
.phero .kicker{color:var(--gold-script);display:block;margin-bottom:6px}
.phero h1{color:#fff;font-size:clamp(34px,5vw,58px);max-width:18ch;margin-top:4px}
.phero .lead{color:#ece4d6;font-size:18px;max-width:60ch;margin-top:16px;text-shadow:0 1px 12px rgba(20,16,12,.5)}
.phero .pherometa{display:flex;gap:12px;align-items:baseline;margin-top:18px;font-family:var(--sans);letter-spacing:.04em;color:#f3ecdf}
.phero .pherometa b{font-family:var(--serif);font-size:24px;color:var(--gold-script)}
.phero .cta{margin-top:26px;display:flex;gap:14px;flex-wrap:wrap}
.crumb{font-family:var(--sans);font-size:12px;letter-spacing:.05em;margin-bottom:14px}
.crumb a{color:#d9cfbd}.crumb a:hover{color:#fff}
.crumb a:after{content:"›";margin:0 8px;color:var(--gold-script)}
.crumb span{color:#fff}
.qfacts-wrap{background:var(--ink)}
.qfacts{display:flex;flex-wrap:wrap}
.qfacts .qf{flex:1;min-width:140px;padding:22px 18px;border-right:1px solid rgba(255,255,255,.12)}
.qfacts .qf:last-child{border-right:none}
.qfacts .qf span{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-script);margin-bottom:6px}
.qfacts .qf b{font-family:var(--serif);font-size:17px;color:#fff;font-weight:400}
.narrow{max-width:840px}
.prose p{margin-bottom:16px;color:var(--ink-soft);font-size:17px;line-height:1.7}
.center-prose{text-align:center}
.sub-h{font-size:24px;margin:34px 0 14px}
.ticks,.dots{list-style:none;display:grid;gap:10px}
.ticks li,.dots li{position:relative;padding-left:28px;color:var(--ink-soft)}
.ticks li:before{content:"✓";position:absolute;left:0;top:0;color:var(--gold);font-weight:700}
.dots li:before{content:"";position:absolute;left:3px;top:9px;width:7px;height:7px;background:var(--gold);border-radius:50%}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:10px}
.pricetable{width:100%;border-collapse:collapse;margin-top:10px;max-width:460px}
.pricetable th,.pricetable td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line)}
.pricetable th{font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pricetable td{font-family:var(--serif);font-size:18px;color:var(--ink)}
.pricetable td:last-child{color:var(--gold-deep)}
.pricenote{font-size:12px;color:var(--muted);margin-top:8px}
.faqq{border-bottom:1px solid var(--line);padding:20px 0}
.faqq h4{font-family:var(--serif);font-size:19px;color:var(--ink)}
.faqq p{color:var(--muted);margin-top:8px}
@media(max-width:720px){.twocol{grid-template-columns:1fr}.qfacts .qf{min-width:50%;flex:none}}

/* ---- tour detail: two-column layout + sticky booking card ---- */
.tour-layout{display:grid;grid-template-columns:1fr 360px;gap:56px;align-items:start}
.tour-main{min-width:0}
.tour-main .sub-h{margin-top:40px}
.tour-main .prose{margin-top:4px}
.tour-main .pricetable{margin-top:14px}
.tour-main .faq{margin-top:10px}
.book-col{position:sticky;top:96px}
.book-card{padding:26px 24px;border:1px solid var(--line);background:var(--offwhite);box-shadow:0 18px 50px rgba(28,24,20,.09)}
.book-card .ttl{margin-bottom:8px}
.book-price{font-family:var(--serif);font-size:34px;color:var(--ink);margin-bottom:18px;line-height:1}
.book-price small{font-family:var(--sans);font-size:13px;color:var(--muted);letter-spacing:.03em}
.book-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.book-grid label{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:600}
.book-card input,.book-card select{width:100%;font-family:var(--sans);font-size:15px;color:var(--ink);padding:12px 11px;border:1px solid var(--line);background:#fff;appearance:none;cursor:pointer}
.book-total{font-family:var(--sans);font-size:14px;color:var(--ink-soft);margin-bottom:16px}
.book-total b{font-family:var(--serif);font-size:19px;color:var(--ink)}
.bk-block{display:block;width:100%;margin-top:10px}
.book-note{font-family:var(--sans);font-size:11.5px;line-height:1.5;color:var(--muted);margin-top:14px;margin-bottom:0}
/* ---- checkout additions ---- */
.bk-pickup{margin-bottom:14px}
.bk-pickup label{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:600}
.bk-pickup input,.bk-pickup select{width:100%;font-family:var(--sans);font-size:15px;color:var(--ink);padding:12px 11px;border:1px solid var(--line);background:#fff;appearance:none;cursor:pointer}
.bk-pickup-hint{font-family:var(--sans);font-size:10px;color:var(--muted);margin:5px 0 0}
.bk-details{margin:4px 0 6px}
.bk-details-ttl{font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:8px}
.bk-details input{width:100%;font-family:var(--sans);font-size:15px;color:var(--ink);padding:12px 11px;border:1px solid var(--line);background:#fff;margin-bottom:10px}
.bk-details .book-grid{margin-bottom:0}
.bk-details .book-grid input{margin-bottom:0}
.bk-onvo:not(:empty){margin-top:14px;padding-top:4px}
.bk-msg{font-family:var(--sans);font-size:13.5px;line-height:1.55;padding:12px 14px;margin-top:12px;border-radius:2px}
.bk-msg-ok{background:#e7f6ec;border:1px solid #b7e2c4;color:#1c6b38}
.bk-msg-err{background:#fdeceb;border:1px solid #f5b5b1;color:#a32820}
.bk-enquiry{background:#fff7e6;border:1px solid #ffe1a8;border-radius:2px;padding:13px 15px;margin:6px 0 4px}
.bk-enquiry-ttl{font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:5px}
.bk-enquiry-note{font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--ink-soft);margin:0}
.bk-fallback{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.bk-fallback summary{font-family:var(--sans);font-size:12.5px;color:var(--muted);cursor:pointer;list-style:none;font-weight:600}
.bk-fallback summary::-webkit-details-marker{display:none}
.bk-fallback summary:before{content:"+ ";color:var(--gold)}
.bk-fallback[open] summary:before{content:"\2212 "}
@media(max-width:900px){
  .tour-layout{grid-template-columns:1fr;gap:0}
  .book-col{position:static;margin-top:46px}
}

/* ---- tour detail: gallery, highlight cards, image band ---- */
.tgallery{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:145px 145px;gap:10px;margin:24px 0 6px}
.tgallery>div{background-size:cover;background-position:center}
.tg-big{grid-row:1/3}
@media(max-width:560px){.tgallery{grid-template-columns:1fr 1fr;grid-template-rows:120px 120px}.tg-big{grid-row:auto;grid-column:1/3;height:190px}}
.hl-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.hl{display:flex;gap:12px;align-items:flex-start;background:var(--offwhite);border:1px solid var(--line);padding:14px 16px}
.hl-ic{color:var(--gold);font-weight:800;flex:none;line-height:1.5}
.hl p{margin:0;font-size:14.5px;color:var(--ink-soft);line-height:1.45}
@media(max-width:560px){.hl-grid{grid-template-columns:1fr}}
.timg-band{height:220px;background-size:cover;background-position:center;margin:36px 0 4px}
.price-note{font-size:13px;color:var(--muted);margin-top:12px}

/* transfer listing: "from $X per vehicle" line on route cards */
.card .pfrom{font-family:var(--sans);font-size:14px;color:var(--ink-soft);margin:6px 0 12px}
.card .pfrom b{color:var(--gold-deep);font-size:17px}

/* enquiry card: free-text field */
.book-card .book-field{margin-top:12px}
.book-card .book-field label{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:6px}
.book-card .book-field textarea{width:100%;font-family:var(--sans);font-size:14px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:6px;padding:10px 11px;resize:vertical;outline:none}
.book-card .book-field textarea:focus{border-color:var(--gold)}

/* numbered steps (charters / trips) - distinct from homepage .steps */
.psteps{display:grid;gap:16px;margin:20px 0 8px}
.pstep{display:flex;gap:16px;align-items:flex-start}
.pstep .n{flex:none;width:34px;height:34px;border-radius:50%;background:var(--gold);color:#fff;
  font-family:var(--sans);font-weight:700;font-size:14px;display:grid;place-items:center}
.pstep b{display:block;font-family:var(--sans);font-size:15px;color:var(--ink);margin-bottom:3px}
.pstep p{margin:0;color:var(--ink-soft);font-size:14.5px;line-height:1.6}

/* in-article guide photos */
.gfig{margin:30px 0 26px}
.gfig-img{aspect-ratio:16/9;background-size:cover;background-position:center;border-radius:4px}
.gfig figcaption{font-family:var(--sans);font-size:12.5px;color:var(--muted);margin-top:9px;text-align:center;font-style:italic}

/* section rhythm inside tour-main for pages that emit bare h2/p
   (transfers, charters, trips) - matches the tour pages' spacing */
.tour-main > h2{margin-top:44px;margin-bottom:14px}
.tour-main > h2:first-child{margin-top:0}
.tour-main > p{margin-bottom:16px;color:var(--ink-soft);font-size:17px;line-height:1.7}
.tour-main > .hl-grid,
.tour-main > .tgallery,
.tour-main > .psteps,
.tour-main > .pricetable,
.tour-main > .price-note{margin-bottom:30px}
.tour-main > .faqq:first-of-type{margin-top:4px}

/* guide article headings need breathing room from the paragraph above */
.prose h2{margin-top:38px;margin-bottom:12px}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:26px;margin-bottom:8px}
.prose .gfig{margin:30px 0 26px}

/* ---- hero ken-burns: slow zoom so the image "comes to life" ---- */
@keyframes heroZoom{0%{transform:scale(1.02)}50%{transform:scale(1.12)}100%{transform:scale(1.02)}}
.hero .bg{animation:heroZoom 28s ease-in-out infinite;transform-origin:center 55%;will-change:transform}

/* .phero carries the image inline on the section itself; move it to a zooming
   ::before layer so only the image scales, not the text. The inline
   background-image still applies to the section, so we inherit it. */
.phero{overflow:hidden;isolation:isolate}
.phero::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:inherit;background-size:cover;background-position:center;
  animation:heroZoom 30s ease-in-out infinite;transform-origin:center 55%;will-change:transform}
.phero>*{position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){.hero .bg,.phero::before{animation:none}}

/* fare finder: space the WhatsApp + Email buttons */
.fare .result .btn{margin-top:10px}
.fare .result .btn+.btn{margin-left:8px}

/* ES/FR not live yet - greyed out, "coming soon" on click */
.nav .lang .soon-lang{color:var(--muted);opacity:.5;cursor:default;text-decoration:none;position:relative}
.nav .lang .soon-lang:hover::after{content:"Coming soon";position:absolute;left:50%;top:calc(100% + 8px);
  transform:translateX(-50%);white-space:nowrap;background:var(--ink);color:#fff;font-size:11px;
  letter-spacing:.04em;padding:5px 9px;border-radius:5px;z-index:60}

/* ---------- mobile nav drawer (v3) ---------- */
.nav .burger{min-width:44px;min-height:44px;line-height:1;cursor:pointer}
.navdrawer{position:fixed;inset:0;z-index:200;background:rgba(20,16,12,.55);
  opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease}
.navdrawer.is-open{opacity:1;visibility:visible}
.navdrawer-panel{position:absolute;top:0;right:0;height:100%;width:min(320px,86vw);
  background:var(--cream);box-shadow:-8px 0 30px rgba(20,16,12,.28);
  transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;padding:18px 24px 28px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.navdrawer.is-open .navdrawer-panel{transform:none}
.navdrawer-close{align-self:flex-end;background:none;border:none;font-size:32px;line-height:1;
  color:var(--ink);min-width:44px;min-height:44px;cursor:pointer;padding:0}
.navdrawer-links{display:flex;flex-direction:column;margin-top:6px}
.navdrawer-links a{font-family:var(--sans);font-size:16px;letter-spacing:.05em;color:var(--ink);
  padding:14px 2px;border-bottom:1px solid rgba(20,16,12,.10);min-height:44px;display:flex;align-items:center}
.navdrawer-links a:hover{color:var(--gold-deep)}
.navdrawer-foot{margin-top:auto;padding-top:26px;display:flex;flex-direction:column;gap:16px;align-items:stretch}
.navdrawer-foot .btn{width:100%;text-align:center;padding:14px 22px}
.navdrawer-foot .lang{font-size:13px;text-align:center}
html.nav-locked,html.nav-locked body{overflow:hidden}
@media(min-width:901px){.navdrawer{display:none}}

/* tours: fixed 6-8am departure window replaced the pickup-time selector */
.bk-pickup-window{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink);margin:0 0 4px}

/* Fare finder result: one primary action (Book this transfer). WhatsApp and
   email are fallbacks, so they read as quiet text links rather than a third
   and fourth button - three buttons wrapped onto two rows and looked broken. */
.fare .result .fare-alts{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.fare .result .fare-alts a{font-family:var(--sans);font-size:13px;letter-spacing:.04em;
  color:var(--muted);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.fare .result .fare-alts a:hover{color:var(--gold-deep)}
@media(max-width:640px){
  .fare .result{align-items:flex-start}
  .fare .result .btn-gold{width:100%;text-align:center}
  .fare .result .fare-alts{width:100%;gap:22px}
}

/* ---------- transfer checkout (/transfers/book) ---------- */
.ckt{padding:38px 0 80px;background:var(--cream)}
.ckt-top{margin:6px 0 30px}
.ckt-top h1{font-size:clamp(28px,4vw,40px);margin:0 0 6px}
.ckt-sub{font-family:var(--sans);font-size:14px;color:var(--muted);margin:0}
.ckt-grid{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:34px;align-items:start}
.ckt-main{display:flex;flex-direction:column;gap:18px;min-width:0}
.ckt-step{background:var(--white);border:1px solid var(--line);padding:26px 26px 28px}
.ckt-step-h{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.ckt-step-h h2{font-size:19px;margin:0}
.ckt-n{width:27px;height:27px;flex:none;border-radius:50%;background:var(--gold);color:#fff;
  font-family:var(--sans);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center}
.ckt-fields{display:grid;gap:14px;margin-bottom:14px}
.ckt-fields:last-child{margin-bottom:0}
.ckt-1{grid-template-columns:1fr}
.ckt-2{grid-template-columns:1fr 1fr}
.ckt-3{grid-template-columns:1fr 1fr 1fr}
.fld{display:flex;flex-direction:column;min-width:0}
.fld label{font-family:var(--sans);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px}
.fld select,.fld input{font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--off);
  border:1px solid var(--line);padding:13px 14px;width:100%;min-height:48px;border-radius:2px}
.fld select:focus,.fld input:focus{outline:none;border-color:var(--gold)}
.ckt-pay{width:100%;text-align:center;padding:15px 22px;margin-top:4px}
.ckt-onvo:not(:empty){margin:18px 0 4px;padding:18px;background:var(--off);border:1px solid var(--line)}
.ckt-note{font-family:var(--sans);font-size:12.5px;color:var(--muted);margin:12px 0 0;line-height:1.55}
/* summary */
.ckt-side{position:sticky;top:96px}
.ckt-sum{background:var(--white);border:1px solid var(--line);padding:24px}
.ckt-sum-h{font-size:18px;margin:0 0 14px}
.ckt-route{font-family:var(--sans);font-size:14px;color:var(--ink);padding-bottom:16px;
  border-bottom:1px solid var(--line);line-height:1.6}
.ckt-route span{display:block;color:var(--muted);font-size:12.5px;margin-top:3px}
.ckt-lines{padding:14px 0;display:flex;flex-direction:column;gap:9px}
.ckt-lines .ln{display:flex;justify-content:space-between;gap:14px;font-family:var(--sans);font-size:14px;color:var(--muted)}
.ckt-lines .ln b{color:var(--ink);font-weight:500;white-space:nowrap}
.ckt-total{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:14px 0;border-top:1px solid var(--line);font-family:var(--sans);font-size:15px;color:var(--ink)}
.ckt-total b{font-family:var(--serif);font-size:26px}
.ckt-due{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  background:var(--off);margin:0 -24px;padding:14px 24px;font-family:var(--sans);font-size:14px;color:var(--ink)}
.ckt-due b{font-size:17px;font-weight:600}
.ckt-trust{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.ckt-trust li{position:relative;padding-left:22px;font-family:var(--sans);font-size:12.5px;
  color:var(--muted);line-height:1.5}
.ckt-trust li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--gold);font-weight:700}
@media(max-width:980px){
  .ckt-grid{grid-template-columns:1fr;gap:18px}
  /* summary first on small screens - people want the price before the form */
  .ckt-side{position:static;order:-1}
  .ckt-3{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .ckt{padding:24px 0 60px}
  .ckt-step{padding:20px 18px 22px}
  .ckt-2,.ckt-3{grid-template-columns:1fr}
  .ckt-due{margin:0 -18px;padding:14px 18px}
  .ckt-sum{padding:20px 18px}
}

/* tour checkout extras */
.ckt-sum-thumb{aspect-ratio:16/9;background-size:cover;background-position:center;
  margin:-24px -24px 16px;border-bottom:1px solid var(--line)}
.ckt-window{background:var(--off);border:1px solid var(--line);padding:14px 16px;margin-top:4px}
.ckt-window-t{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink);margin:0 0 3px}
.ckt-window-n{font-family:var(--sans);font-size:12.5px;color:var(--muted);margin:0;line-height:1.5}
@media(max-width:560px){.ckt-sum-thumb{margin:-20px -18px 14px}}

/* checkout: "rather book by message" fallback - the links were inheriting
   nothing outside .fare .result, so they rendered as bare browser anchors */
.bk-fallback{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.bk-fallback summary{font-family:var(--sans);font-size:13.5px;color:var(--muted);
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:7px}
.bk-fallback summary::-webkit-details-marker{display:none}
.bk-fallback summary::after{content:"+";font-size:15px;color:var(--gold);line-height:1}
.bk-fallback[open] summary::after{content:"\2212"}
.bk-fallback summary:hover{color:var(--ink)}
.bk-fallback .fare-alts{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.bk-fallback .fare-alts a{flex:1 1 0;min-width:140px;text-align:center;
  font-family:var(--sans);font-size:13.5px;letter-spacing:.03em;color:var(--ink);
  border:1px solid var(--line);padding:12px 16px;text-decoration:none;
  min-height:46px;display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s}
.bk-fallback .fare-alts a:hover{border-color:var(--gold);color:var(--gold-deep)}
.ckt-note{display:flex;align-items:center;gap:7px;justify-content:center}
.ckt-note::before{content:"\1F512";font-size:13px;opacity:.75}
@media(max-width:560px){.bk-fallback .fare-alts a{flex:1 1 100%}}

/* tour price now leads with the 4+ rate, so it needs a "from" qualifier */
.book-price .bk-from{font-family:var(--sans);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-right:2px}

/* small-group pairing offer - shown when fewer than 4 guests are selected */
.bk-pair{font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted);
  background:var(--off);border-left:2px solid var(--gold);padding:11px 13px;margin:12px 0 0}

/* ---------- scroll motion ---------- */
/* .reveal is only ever added by motion.js, so with JS off or blocked the page
   renders fully visible - nothing is hidden behind a script. */
.reveal{opacity:0;transform:translateY(16px);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
.reveal.is-in{opacity:1;transform:none}
.phero,.timg-band{will-change:background-position}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal.is-in{opacity:1;transform:none;transition:none}
  .phero,.timg-band{will-change:auto}
}


/* ATV landing page cards - link out to legendatv.com */
.atv-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:34px}
.atv-card{display:block;text-decoration:none;color:inherit;background:#fff;border-radius:12px;
  overflow:hidden;box-shadow:0 6px 22px rgba(20,16,12,.08);transition:transform .25s,box-shadow .25s}
.atv-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(20,16,12,.14)}
.atv-card .body{padding:22px 24px}
.atv-card .rt{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#9a8f7d}
.atv-card h3{margin:.35rem 0 .5rem}
.atv-card p{color:#5c5346;font-size:15px;line-height:1.5;margin:0 0 1rem}
.atv-card .cfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.atv-card .from{font-size:14px;color:#3a332a}
.atv-card .link-gold{color:#b5872f;font-weight:600;font-size:14px}
.atv-note{margin-top:26px;color:#8a8072;font-size:14px}
@media(max-width:720px){.atv-cards{grid-template-columns:1fr}}

/* /atv video hero - full-bleed muted loop with a dark overlay for text contrast */
.phero-video{position:relative;overflow:hidden}
.phero-video .phero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.phero-video .phero-ov{position:absolute;inset:0;z-index:1;
  background:linear-gradient(rgba(20,16,12,.5),rgba(20,16,12,.62))}
.phero-video .container{position:relative;z-index:2}

/* /atv closing band - quad image, dark overlay baked into the inline gradient,
   light text so the CTA is readable (the old .closing class didn't exist, so
   this section rendered unstyled and unreadable) */
.atv-closing{background-size:cover;background-position:center;color:#f3ecdf;text-align:center}
.atv-closing h2{color:#f3ecdf}
.atv-closing .lead{color:#e7ddcb;max-width:560px;margin:0 auto 1.4rem}

/* Permanent cross-brand link to Legend ATV. Mirrors the band on legendatv.com
   so the two sites point at each other from a place that cannot be dismissed. */
.foot .xsite-band{display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin:34px 0 0;padding:20px 22px;border-radius:14px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.045);
  text-decoration:none;color:inherit;transition:background .18s ease,border-color .18s ease}
.foot .xsite-band:hover{background:rgba(255,255,255,.085);border-color:rgba(255,255,255,.3)}
.foot .xsite-band-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.foot .xsite-band-txt strong{font-size:1.02rem;font-weight:600;color:#f4ede2}
.foot .xsite-band-txt span{font-size:.9rem;color:#b7ac99;line-height:1.45}
.foot .xsite-band-cta{flex:none;font-size:.92rem;font-weight:600;white-space:nowrap;
  padding:10px 18px;border-radius:999px;background:#c8102e;color:#fff}
@media (max-width:560px){.foot .xsite-band{flex-direction:column;align-items:flex-start;gap:14px}
  .foot .xsite-band-cta{width:100%;text-align:center}}


/* Guest reviews: clamped to a consistent height with a Read more toggle, so
   three reviews of very different lengths still line up as equal cards. */
.rev{display:flex;flex-direction:column}
.rev-q{position:relative;max-height:11.5em;overflow:hidden;transition:max-height .3s ease}
.rev-q p{margin:0 0 .8em}
.rev-q p:last-child{margin-bottom:0}
.rev-q::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3.2em;
  background:linear-gradient(to bottom,rgba(255,255,255,0),var(--white));
  pointer-events:none;transition:opacity .2s ease}
.rev-open .rev-q{max-height:200em}
.rev-open .rev-q::after,.rev-short .rev-q::after{opacity:0}
.rev-more{align-self:flex-start;margin-top:12px;padding:0;border:0;background:none;
  font:inherit;font-size:.9rem;font-weight:600;color:#c8102e;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.rev-more:hover{opacity:.75}
.rev-by{display:block;margin-top:16px;font-size:.85rem;letter-spacing:.04em;
  text-transform:uppercase;color:#8a8071}
.rev-when{display:block;margin-top:3px;font-size:.78rem;letter-spacing:.02em;
  text-transform:none;color:#a79c8c}

/* ---- checkout loading states -------------------------------------------
   The gap between clicking "Continue to payment" and the ONVO card form
   appearing is a network round trip plus an iframe mount - long enough to
   read as broken. The button spins immediately and a skeleton holds the
   space so the layout does not jump when the form arrives. */
.ckt-spin{display:inline-block;width:15px;height:15px;margin-right:9px;
  vertical-align:-2px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:ckt-rot .6s linear infinite}
.ckt-spin-sm{width:12px;height:12px;margin-right:7px;border-width:2px}
@keyframes ckt-rot{to{transform:rotate(360deg)}}
.btn.is-busy{cursor:progress;opacity:.85}
.btn.is-busy>span{vertical-align:middle}

.ckt-load{margin:18px 0 4px;animation:ckt-fade .25s ease}
@keyframes ckt-fade{from{opacity:0}to{opacity:1}}
.ckt-skel{height:42px;border-radius:8px;margin-bottom:10px;
  background:linear-gradient(90deg,#efe9e0 25%,#f7f3ec 37%,#efe9e0 63%);
  background-size:400% 100%;animation:ckt-sheen 1.3s ease infinite}
.ckt-skel-lg{height:48px}
.ckt-skel-row{display:flex;gap:10px}
.ckt-skel-row .ckt-skel{flex:1}
@keyframes ckt-sheen{0%{background-position:100% 50%}100%{background-position:0 50%}}
.ckt-load-txt{display:flex;align-items:center;margin:12px 0 0;
  font-size:.88rem;color:var(--muted,#8a8071)}

/* Respect users who ask for reduced motion: keep the state, drop the movement. */
@media (prefers-reduced-motion:reduce){
  .ckt-spin,.ckt-spin-sm{animation-duration:1.6s}
  .ckt-skel{animation:none;background:#efe9e0}
}

/* ---- mobile header ------------------------------------------------------
   Below 900px the burger appears and the full nav collapses. The gold Book
   button was duplicating what is already in the drawer (nav.js clones it into
   .navdrawer-foot), and it was squeezing the logo. Hiding it here frees the
   width to render the logo at a legible size. */
@media(max-width:900px){
  .nav .tools > .btn{display:none}
  .nav .brand img{height:70px}
  .nav .container.row{padding-top:6px;padding-bottom:6px}
}
@media(max-width:400px){
  .nav .brand img{height:60px}
}

/* ---- mobile tour-page fixes (Sept 2026) --------------------------------- */

/* Gallery: .tg-big was given height:190px inside a 120px grid row, so it
   overflowed row 2 and sat BEHIND the two small images - the 10px gap between
   them showed the big image through, which looked like a duplicated photo.
   Let the row define the height instead of fighting it. */
@media(max-width:560px){
  .tgallery{grid-template-columns:1fr 1fr;grid-template-rows:190px 130px}
  .tg-big{grid-row:1;grid-column:1/3;height:auto}
}

/* Quick-facts band: 5 items in a 2-up flex wrap left dividers hanging off the
   right edge on full rows and none at all on the orphan. Grid with explicit
   edge rules, and the odd one out spans the full width. */
@media(max-width:720px){
  .qfacts{display:grid;grid-template-columns:1fr 1fr}
  .qfacts .qf{padding:16px 18px;border-right:none;
    border-bottom:1px solid rgba(255,255,255,.12)}
  .qfacts .qf:nth-child(odd){border-right:1px solid rgba(255,255,255,.12)}
  .qfacts .qf:last-child{border-bottom:none}
  .qfacts .qf:nth-last-child(2):nth-child(odd){border-bottom:none}
  /* an orphaned final item fills the row rather than leaving a gap */
  .qfacts .qf:last-child:nth-child(odd){grid-column:1 / -1;border-right:none}
  .qfacts .qf b{font-size:16px}
}

/* Hero: at 390x700 the landscape banner is cropped so hard that a 3x phone
   needs ~4000px from an 1800px file - a 2.2x upscale, which is the blur.
   Shortening the hero cuts the crop and therefore the upscale. */
@media(max-width:640px){
  .phero{min-height:0;padding:96px 0 46px}
  .phero h1{font-size:clamp(28px,7.4vw,36px);max-width:none}
  .phero .lead{font-size:16px;margin-top:12px}
  .phero .pherometa{margin-top:14px}
  .phero .cta{margin-top:20px}
}

/* ---- floating WhatsApp button -------------------------------------------
   Existed on the original legend_build.py site and was lost when the build
   moved to the current generator chain. Emitted from _shared.footer() so it
   reaches every page from one place rather than three copies of the nav. */
a.wa-float,.foot a.wa-float{position:fixed;right:18px;bottom:18px;z-index:60;
  width:56px;height:56px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:#25D366;color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.28);transition:transform .18s ease,box-shadow .18s ease}
a.wa-float svg{width:30px;height:30px;display:block;fill:#fff}
a.wa-float svg path{fill:#fff}
.wa-float:hover{transform:scale(1.07);box-shadow:0 8px 26px rgba(0,0,0,.34)}
.wa-float:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(max-width:640px){
  .wa-float{right:14px;bottom:14px;width:52px;height:52px}
  .wa-float svg{width:27px;height:27px}
}
/* Never sit on top of the mobile menu (.navdrawer is z-index 100+). */
.nav-locked .wa-float{display:none}
@media(prefers-reduced-motion:reduce){.wa-float{transition:none}}

/* ---- /atv hero spacing ---------------------------------------------------
   The ATV hero puts the CTA directly after <p class="lead"> with no .cta
   wrapper, so it inherited no spacing at all and sat tight against the copy. */
.phero .lead + .btn{margin-top:30px}
.phero .lead + .btn + *{margin-top:30px}
@media(max-width:640px){.phero .lead + .btn{margin-top:24px}}