/* Tautona Safaris & Tours - site styles. Direction: Cinematic, warm daylight ground (very faint orange) with dark photo scrims.
   Tokens and rationale: DESIGN.md. One3 Technologies - https://one3.co.za */

:root{
  --bg:#fdf6ee; --bg-alt:#f8ecde; --surface:#ffffff; --surface-2:#fbf2e7;
  --border:rgb(60 40 15 / .12); --border-strong:rgb(60 40 15 / .26); --border-hover:rgb(60 40 15 / .5);
  --text:#1c1f1a; --text-muted:#5a574e; --text-inverse:#14120c;
  --accent:#f2c318; --accent-hover:#e0b10c; --accent-soft:rgb(242 195 24 / .2);
  --ink:#8a5a00; --ink-hover:#6e4700;          /* gold-family text/links: gold itself fails on a light ground */
  --paw:#d99a58; --paw-ink:#8c4f18; --paw-mark:#c47f3c;
  --danger:#b3261e; --placeholder:#6f6c63; --hover-wash:rgb(60 40 15 / .05);
  --night:#2a1d12;                              /* earth brown from the logo outline: footer + base under photo scrims */
  --sand:#efdcc0; --sand-ink:#6b3e12;           /* logo paw sand; brown ink for small text on sand */
  --f-display:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r:2px;
  --pad-x:clamp(1.25rem, 5vw, 3rem);
  --sec:clamp(4.5rem, 10vw, 9rem);
  --gap:clamp(1rem, 2.4vw, 2rem);
  --hdr:72px;
  --shadow-sm:0 1px 2px rgb(60 40 15 / .06), 0 2px 8px rgb(60 40 15 / .08);
  --e-std:cubic-bezier(.16,1,.3,1);
  --e-micro:cubic-bezier(.2,0,.2,1);
  --z-hdr:40; --z-float:45; --z-menu:50; --z-skip:60;
  color-scheme:light;
}

/* Dark scope: photo sections and footer keep light text on dark scrims */
.hero,.phero--img,.tile,.band,.ftr,.has-hero:not(.menu-open) .hdr:not(.is-solid){
  --text:#f4f1ea; --text-muted:#dcd8cf;
  --border:rgb(236 233 225 / .14); --border-strong:rgb(236 233 225 / .32); --border-hover:rgb(236 233 225 / .6);
  --ink:#f2c318; --ink-hover:#ffd84a; --paw-ink:#e8b27a; --paw-mark:#d99a58;
  --hover-wash:rgb(236 233 225 / .08);
  color:var(--text);
}
.hero,.phero--img,.band,.tile{background-color:var(--night)}
.has-hero:not(.menu-open) .hdr:not(.is-solid){background:linear-gradient(180deg,rgb(18 22 19 / .72) 0%,rgb(18 22 19 / .38) 70%,rgb(18 22 19 / 0) 100%)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 16px)}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.7 var(--f-body);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
img{height:auto;-webkit-touch-callout:none}
a{color:inherit}
p{margin:0 0 1rem;max-width:62ch}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance;color:var(--text)}
h1{font-size:clamp(2.25rem,5vw,3.75rem);font-weight:800;font-stretch:118%;line-height:1.05;letter-spacing:-.02em}
h2{font-size:clamp(1.75rem,3.5vw,2.75rem);font-weight:700;font-stretch:112%;line-height:1.12;letter-spacing:-.015em}
h3{font-size:clamp(1.125rem,2vw,1.4rem);font-weight:700;font-stretch:108%;line-height:1.25;letter-spacing:-.01em}
.i{width:1.25em;height:1.25em;flex:none}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
::selection{background:var(--accent);color:var(--text-inverse)}

.skip{position:fixed;left:16px;top:-80px;z-index:var(--z-skip);background:var(--accent);color:var(--text-inverse);padding:12px 20px;font-weight:700;text-decoration:none;border-radius:var(--r)}
.skip:focus{top:16px}
.wrap{max-width:1320px;margin:0 auto;padding:0 var(--pad-x)}
.sec{padding:var(--sec) 0}
.sec--alt{background:var(--bg-alt)}
.lead{font-size:clamp(1.0625rem,1.6vw,1.25rem);line-height:1.6;color:var(--text-muted);max-width:56ch}
.muted{color:var(--text-muted)}
.note{margin-top:1.5rem;font-size:.95rem}
.eyebrow{display:block;font:700 .75rem/1.2 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--paw-ink);margin-bottom:1rem}
.sec-head{margin-bottom:clamp(2rem,4vw,4rem);max-width:760px}
.sec-head p{margin-top:1rem}
h2 + .lead{margin-top:1rem}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:14px 26px;border-radius:var(--r);font:700 1rem/1 var(--f-body);text-decoration:none;white-space:nowrap;cursor:pointer;border:1px solid transparent;transition:background-color .16s var(--e-micro),color .16s var(--e-micro),border-color .16s var(--e-micro)}
.btn--primary{background:var(--accent);color:var(--text-inverse)}
.btn--primary:hover{background:var(--accent-hover)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn--ghost:hover{border-color:var(--text);background:var(--hover-wash)}
.btn:active{transform:scale(.98)}
.btn--lg{padding:18px 34px;font-size:1.0625rem}
.link{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:var(--ink);text-decoration:none;min-height:44px}
.link .i{transition:transform .18s var(--e-micro)}
.link:hover{color:var(--ink-hover);text-decoration:underline;text-underline-offset:4px}
.link:hover .i{transform:translateX(3px)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* Header */
.sentinel{position:absolute;top:0;left:0;height:80px;width:1px;pointer-events:none}
.hdr{position:sticky;top:0;z-index:var(--z-hdr);height:var(--hdr);transition:background-color .24s var(--e-std),box-shadow .24s var(--e-std)}
.hdr.is-solid,.no-hero .hdr{background:var(--bg);box-shadow:var(--shadow-sm)}
.has-hero .hdr{margin-bottom:calc(var(--hdr) * -1)}
.hdr__in{max-width:1320px;margin:0 auto;padding:0 var(--pad-x);height:100%;display:flex;align-items:center;gap:24px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);min-height:44px}
.brand__logo{width:44px;height:44px;border-radius:50%;flex:none}
.brand__logo--lg{width:56px;height:56px}
.brand__paw .i{width:30px;height:30px}
.brand__word{font:800 1.3rem/1 var(--f-display);font-stretch:125%;letter-spacing:.02em;text-transform:uppercase;display:flex;flex-direction:column}
.brand__word small{font:700 .6875rem/1 var(--f-body);letter-spacing:.22em;color:var(--ink);margin-top:5px}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{padding:10px 12px;font-weight:600;font-size:.95rem;text-decoration:none;color:var(--text);border-bottom:2px solid transparent;transition:color .16s var(--e-micro),border-color .16s var(--e-micro)}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{border-bottom-color:var(--ink)}
.hdr__cta{margin-left:8px}
.burger{display:none;margin-left:auto;width:48px;height:48px;background:none;border:1px solid var(--border-strong);border-radius:var(--r);cursor:pointer;position:relative}
.burger span{position:absolute;left:13px;right:13px;height:2px;background:var(--text);transition:transform .28s var(--e-std)}
.burger span:first-child{top:18px}
.burger span:last-child{top:27px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
.menu{position:fixed;inset:var(--hdr) 0 0 0;z-index:var(--z-menu);background:var(--bg);padding:24px var(--pad-x) 32px;display:flex;flex-direction:column;justify-content:space-between;overflow-y:auto}
.menu__nav{display:flex;flex-direction:column}
.menu__nav a{font:700 1.5rem/1.2 var(--f-display);font-stretch:112%;padding:12px 0;text-decoration:none;border-bottom:1px solid var(--border)}
.menu__nav a:hover{color:var(--ink)}
.menu__foot{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.menu__tel{text-align:center;padding:12px;font-weight:700;text-decoration:none}
body.menu-open{overflow:hidden}
body.menu-open .hdr{background:var(--bg)}

@media (max-width:1180px){.nav a{padding:10px 8px;font-size:.9rem}}
@media (max-width:1060px){.nav,.hdr__cta{display:none}.burger{display:block}}

/* Home hero */
.hero{position:relative;min-height:88vh;min-height:88dvh;display:flex;align-items:flex-end;isolation:isolate;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgb(42 29 18 / .92) 0%,rgb(42 29 18 / .72) 42%,rgb(42 29 18 / .18) 78%),linear-gradient(0deg,rgb(42 29 18 / .95) 0%,rgb(42 29 18 / 0) 46%),linear-gradient(180deg,rgb(42 29 18 / .7) 0%,rgb(42 29 18 / 0) 22%)}
.hero__in{width:100%;max-width:1320px;margin:0 auto;padding:calc(var(--hdr) + 4rem) var(--pad-x) clamp(3rem,7vw,6rem)}
.hero h1{font-size:clamp(2.6rem,6.4vw,5.6rem);font-stretch:125%;line-height:.98;letter-spacing:-.03em;max-width:12ch}
.hero__sub{font-size:clamp(1.0625rem,1.6vw,1.25rem);max-width:44ch;margin:1.5rem 0 2rem;color:var(--text-muted)}

/* Home hero: light sand split (Mr Mokone, 21 Oct: "first page is a bit dark ... infuse the colour of my logo") */
.page-home .hdr:not(.is-solid){background:var(--sand);box-shadow:none;--ink:var(--sand-ink)}
.hero-l{position:relative;overflow:hidden;background:var(--sand);padding:clamp(2.5rem,6vw,5rem) 0 clamp(4rem,8vw,7rem);isolation:isolate}
.hero-l::before{content:"";position:absolute;z-index:-1;right:-18%;top:-30%;width:min(70vw,980px);aspect-ratio:1;background:url("/assets/img/rings.svg") center/contain no-repeat;opacity:.85;pointer-events:none}
.hero-l__grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero-l h1{font-size:clamp(2.4rem,4vw,3.6rem);font-stretch:125%;line-height:1.02;letter-spacing:-.03em}
.hero-l__sub{font-size:clamp(1.0625rem,1.5vw,1.2rem);line-height:1.6;color:#4a3622;max-width:40ch;margin:1.25rem 0 2rem}
.hero-l .btn--primary{box-shadow:inset 0 0 0 1px rgb(60 40 15 / .28)}
.hero-l .btn--ghost{border-color:rgb(60 40 15 / .4)}
.hero-l__media{position:relative;padding-bottom:9%}
.hero-l__main img{width:100%;aspect-ratio:16/11;object-fit:cover}
.hero-l__inset{position:absolute;left:-7%;bottom:0;width:36%;border:6px solid var(--sand);background:var(--sand)}
.hero-l__inset img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 8%}
@media (max-width:900px){.hero-l__grid{grid-template-columns:1fr}.hero-l__inset{left:4%;width:38%}.hero-l::before{right:-40%;top:auto;bottom:-25%;width:120vw}}

/* Inner page hero */
.phero{position:relative;padding:calc(var(--hdr) + clamp(3rem,7vw,6rem)) 0 clamp(3rem,6vw,5rem);isolation:isolate;overflow:hidden}
.phero--img{min-height:62vh;min-height:62dvh;display:flex;align-items:flex-end}
.phero--img .phero__media{position:absolute;inset:0;z-index:-2}
.phero--img .phero__media img{width:100%;height:100%;object-fit:cover}
.phero--img::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgb(42 29 18 / .9) 0%,rgb(42 29 18 / .6) 50%,rgb(42 29 18 / .2) 100%),linear-gradient(0deg,rgb(42 29 18 / .95) 0%,rgb(42 29 18 / 0) 55%)}
.phero .wrap{width:100%}
.phero h1{max-width:16ch}
.phero .lead{margin-top:1.25rem}
.phero .cta-row{margin-top:2rem}
.crumbs{display:flex;gap:8px;font-size:.875rem;font-weight:600;color:var(--text-muted);margin-bottom:1.25rem}
.crumbs a{text-decoration:none;color:var(--text-muted)}
.crumbs a:hover{color:var(--ink)}

/* Proof band (M04) */
.proof{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-alt)}
.proof__row{display:grid;grid-template-columns:repeat(4,1fr)}
.proof__item{padding:clamp(1.5rem,3vw,2.5rem) clamp(1rem,2vw,2rem)}
.proof__item + .proof__item{border-left:1px solid var(--border)}
.proof__num{display:block;font:800 clamp(2.4rem,5vw,4rem)/1 var(--f-display);font-stretch:125%;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.proof__lbl{display:block;margin-top:.6rem;font-weight:600;color:var(--text-muted);font-size:.95rem;max-width:22ch}
@media (max-width:760px){.proof__row{grid-template-columns:1fr 1fr}.proof__item:nth-child(3){border-left:0}.proof__item:nth-child(n+3){border-top:1px solid var(--border)}}

/* Service mosaic (home, 5 cells) */
.mosaic{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(180px,auto);gap:var(--gap)}
.tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:280px;padding:clamp(1.25rem,2.4vw,2rem);text-decoration:none;isolation:isolate;overflow:hidden;background:var(--night)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .7s var(--e-std)}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgb(42 29 18 / .94) 0%,rgb(42 29 18 / .78) 34%,rgb(42 29 18 / .18) 64%,rgb(42 29 18 / 0) 100%)}
.tile:hover img{transform:scale(1.04)}
.tile img.pos-top{object-position:50% 8%}
.tile h3{font-size:clamp(1.25rem,1.8vw,1.6rem);font-stretch:118%}
.tile--a h3{font-size:clamp(1.5rem,2.6vw,2.2rem)}
.tile--a::after{background:linear-gradient(0deg,rgb(42 29 18 / .96) 0%,rgb(42 29 18 / .7) 30%,rgb(42 29 18 / .1) 62%)}
.tile p{margin:.5rem 0 0;color:var(--text-muted);font-size:.98rem;max-width:40ch}
.tile .link{margin-top:.75rem}
.tile--a{grid-column:span 7;grid-row:span 2;min-height:520px}
.tile--b{grid-column:span 5}
.tile--c{grid-column:span 5}
.tile--d{grid-column:span 6}
.tile--e{grid-column:span 6}
@media (max-width:900px){.mosaic{grid-template-columns:1fr 1fr}.tile--a{grid-column:span 2;grid-row:auto;min-height:420px}.tile--b,.tile--c,.tile--d,.tile--e{grid-column:span 1}}
@media (max-width:620px){.mosaic{grid-template-columns:1fr}.tile--a,.tile--b,.tile--c,.tile--d,.tile--e{grid-column:auto;min-height:300px}.tile--a{min-height:380px}}

/* Crater section (M07) */
.crater{display:grid;grid-template-columns:7fr 5fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.crater__map{position:relative;aspect-ratio:1/1;max-width:620px;width:100%}
.crater__map svg{width:100%;height:100%;overflow:visible}
.crater__ring{fill:none;stroke:rgb(60 40 15 / .16);stroke-width:1}
.crater__ring--outer{stroke:rgb(60 40 15 / .34);stroke-width:1.4}
.crater__route{fill:none;stroke:rgb(140 79 24 / .4);stroke-width:2;stroke-dasharray:3 7;stroke-linecap:round}
.crater__live{fill:none;stroke:var(--paw-ink);stroke-width:2.4;stroke-linecap:round}
.crater__pin{fill:var(--accent);stroke:var(--ink);stroke-width:2;transform-box:fill-box;transform-origin:center}
.crater__lbl{fill:var(--text);font:700 13px var(--f-body);letter-spacing:.04em}
.crater__lbl--muted{fill:var(--text-muted);font-weight:600;font-size:11.5px}
.crater__walker{color:var(--ink)}
.gates{display:grid;gap:0;margin-top:2rem;border-top:1px solid var(--border)}
.gates li{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;padding:16px 0;border-bottom:1px solid var(--border)}
.gates b{font-family:var(--f-display);font-stretch:112%;font-size:1.05rem}
.gates span{grid-column:2;color:var(--text-muted);font-size:.95rem}
.gates .i{grid-row:span 2;color:var(--paw-ink);margin-top:3px}
.map-note{font-size:.8rem;color:var(--text-muted);margin-top:1rem}
@media (max-width:900px){.crater{grid-template-columns:1fr}.crater__map{max-width:520px;margin:0 auto}}
@media (max-width:620px){.crater__lbl{font-size:21px}.crater__lbl--muted{font-size:18px}.crater__pin{stroke-width:3}}

/* Full-bleed band with offset panel */
.band{position:relative;min-height:640px;display:flex;align-items:center;isolation:isolate;overflow:hidden}
.band__media{position:absolute;inset:0;z-index:-2}
.band__media img{width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(270deg,rgb(42 29 18 / .94) 0%,rgb(42 29 18 / .75) 40%,rgb(42 29 18 / .1) 75%)}
.band .wrap{width:100%;display:flex;justify-content:flex-end}
.band__panel{max-width:520px;padding:clamp(2rem,4vw,3rem) 0}
.band__panel h2{margin-bottom:1rem}
.band__list{margin:1.5rem 0 2rem;display:grid;gap:10px}
.band__list li{display:flex;gap:12px;align-items:flex-start}
.band__list .i{color:var(--ink);margin-top:4px}
@media (max-width:900px){.band .wrap{justify-content:flex-start}.band__panel{max-width:600px}.band{min-height:auto;align-items:flex-end;padding-top:320px}.band::after{background:linear-gradient(0deg,rgb(42 29 18 / 1) 0%,rgb(42 29 18 / .9) 45%,rgb(42 29 18 / .1) 80%)}}

/* Horizontal strip */
.strip{--edge:max(var(--pad-x), calc((100vw - 1320px) / 2 + var(--pad-x)));display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,27%);gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--edge);padding:0 var(--edge) 1rem;scrollbar-color:var(--paw) transparent;overscroll-behavior-x:contain}
.strip figure{margin:0;scroll-snap-align:start}
.strip img{width:100%;aspect-ratio:3/2;object-fit:cover}
.strip figcaption{margin-top:.75rem;font-weight:600}
.strip figcaption span{display:block;color:var(--text-muted);font-weight:400;font-size:.95rem}
.strip-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(2rem,4vw,3rem)}
.strip-head .sec-head{margin-bottom:0}
@media (max-width:620px){.strip{grid-auto-columns:82%}}

/* Reviews */
.reviews{display:grid;grid-template-columns:7fr 5fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.quote-lg{margin:0}
.quote-lg p{font:700 clamp(1.5rem,3vw,2.4rem)/1.3 var(--f-display);font-stretch:108%;letter-spacing:-.01em;max-width:22ch;margin-bottom:1.5rem}
.quote-lg footer,.quote-sm footer{font-weight:600;color:var(--text-muted);font-size:.95rem}
.stars{display:flex;gap:2px;color:var(--ink);margin-bottom:1rem}
.stars .i{width:18px;height:18px}
.quote-stack{display:grid;gap:2rem}
.quote-sm{margin:0;padding-left:20px;border-left:2px solid var(--paw)}
.quote-sm p{font-size:1.1rem;line-height:1.55;margin-bottom:.6rem}
@media (max-width:900px){.reviews{grid-template-columns:1fr}}

/* Final CTA */
.final{text-align:center;padding:var(--sec) 0;border-top:1px solid var(--border);background:var(--bg-alt)}
.final h2{font-size:clamp(2rem,5vw,3.75rem);font-stretch:122%;max-width:18ch;margin:0 auto}
.final p{margin:1.25rem auto 2rem;color:var(--text-muted)}
.final .cta-row{justify-content:center}

/* Split (text + media) */
.split{display:grid;grid-template-columns:7fr 5fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.split--rev{grid-template-columns:5fr 7fr}
.split--rev .split__media{order:-1}
.split__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.split__media--tall img{aspect-ratio:4/5}
.split h2{margin-bottom:1.25rem}
@media (max-width:900px){.split,.split--rev{grid-template-columns:1fr}.split--rev .split__media{order:0}}

/* Facts list */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--border)}
.facts > div{padding:clamp(1.25rem,2.4vw,2rem) clamp(1rem,2vw,1.5rem) clamp(1.25rem,2.4vw,2rem) 0;border-bottom:1px solid var(--border)}
.facts > div + div{padding-left:clamp(1rem,2vw,1.5rem);border-left:1px solid var(--border)}
.facts dt{font:700 1.15rem/1.3 var(--f-display);font-stretch:110%;margin-bottom:.5rem}
.facts dd{margin:0;color:var(--text-muted);font-size:.98rem}
@media (max-width:900px){.facts{grid-template-columns:1fr}.facts > div + div{padding-left:0;border-left:0}}
.facts--inline{grid-template-columns:repeat(2,1fr);margin-top:1.5rem;max-width:420px}
.facts--inline dd{font:800 1.4rem/1.2 var(--f-display);font-stretch:118%;color:var(--ink)}
.facts--inline dt{font:700 .8rem/1.2 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
@media (max-width:900px){.facts--inline{grid-template-columns:repeat(2,1fr)}.facts--inline > div + div{padding-left:clamp(1rem,2vw,1.5rem);border-left:1px solid var(--border)}}

/* Image pair / trio */
.pair{display:grid;grid-template-columns:3fr 2fr;gap:var(--gap)}
.pair img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
.pair img:last-child{aspect-ratio:auto}
.trio{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--gap)}
.trio img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
@media (max-width:760px){.pair,.trio{grid-template-columns:1fr}.pair img:last-child{aspect-ratio:3/2}}

/* Numbered product list (tours, game drives) */
.offers{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
.offer{background:var(--surface);padding:clamp(1.5rem,3vw,2.25rem);display:flex;flex-direction:column}
.offer h3{margin-bottom:.6rem}
.offer p{color:var(--text-muted);font-size:.98rem}
.offer__meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin:.25rem 0 1rem;font-size:.9rem;font-weight:600;color:var(--paw-ink)}
.offer__meta span{display:inline-flex;align-items:center;gap:6px}
.offer .link{margin-top:auto}
.offers--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.offers--3{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.offers,.offers--3{grid-template-columns:1fr}}

/* Team-building catalogue (M12) */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:2rem}
.chip{min-height:44px;padding:10px 18px;border-radius:var(--r);border:1px solid var(--border-strong);background:transparent;color:var(--text);font:600 .95rem/1 var(--f-body);cursor:pointer;transition:background-color .16s var(--e-micro),color .16s var(--e-micro),border-color .16s var(--e-micro)}
.chip:hover{border-color:var(--text)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--text-inverse)}
.chip b{font-weight:800;margin-left:4px}
.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.act{background:var(--surface);display:flex;flex-direction:column}
.act img{width:100%;aspect-ratio:16/10;object-fit:cover}
.act__body{padding:clamp(1.25rem,2.4vw,1.75rem);display:flex;flex-direction:column;flex:1}
.act__tag{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--paw-ink);margin-bottom:.5rem}
.act h3{margin-bottom:.5rem}
.act p{color:var(--text-muted);font-size:.96rem;margin-bottom:1rem}
.act__add{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1px solid var(--border-strong);border-radius:var(--r);background:transparent;color:var(--text);font:600 .92rem/1 var(--f-body);cursor:pointer;transition:background-color .16s var(--e-micro),border-color .16s var(--e-micro),color .16s var(--e-micro)}
.act__add:hover{border-color:var(--ink);color:var(--ink)}
.act__add[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--ink);color:var(--ink)}
.act--text::before{content:"";display:block;aspect-ratio:16/10;background:url("/assets/img/rings.svg") right -30% bottom -60% / 120% auto no-repeat,linear-gradient(160deg,var(--surface-2),var(--bg-alt));border-bottom:2px solid var(--paw)}
@media (max-width:1000px){.acts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.acts{grid-template-columns:1fr}}
.shortlist{position:sticky;bottom:16px;z-index:5;margin-top:2rem;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--surface-2);border:1px solid var(--border-strong);padding:14px 18px;border-radius:var(--r);box-shadow:var(--shadow-sm)}
.shortlist p{margin:0;font-weight:600}
.shortlist p span{color:var(--ink)}

/* Steps (how a booking works) */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);counter-reset:s}
.steps li{padding-top:1.25rem;border-top:2px solid var(--border-strong)}
.steps li:first-child{border-top-color:var(--ink)}
.steps h3{font-size:1.1rem;margin-bottom:.4rem}
.steps p{color:var(--text-muted);font-size:.96rem;margin:0}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* Fleet specs */
.fleet{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
.vehicle{background:var(--surface)}
.vehicle img{width:100%;aspect-ratio:3/2;object-fit:cover}
.vehicle__body{padding:clamp(1.25rem,2.4vw,1.75rem)}
.vehicle__seats{font:800 2rem/1 var(--f-display);font-stretch:125%;color:var(--ink)}
.vehicle__seats small{font:600 .9rem var(--f-body);color:var(--text-muted);margin-left:6px}
.vehicle h3{margin:.75rem 0 .4rem}
.vehicle p{color:var(--text-muted);font-size:.96rem;margin:0}
@media (max-width:760px){.fleet{grid-template-columns:1fr}}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.5rem}
.tags li{padding:8px 14px;border:1px solid var(--border-strong);border-radius:999px;font-size:.9rem;font-weight:600}

/* Team pair (About) */
.team-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.team-pair figure{margin:0}
.team-pair img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%}
.team-pair figcaption{margin-top:.75rem;font-weight:600;color:var(--text-muted)}
@media (max-width:620px){.team-pair{grid-template-columns:1fr}}

/* Gallery */
.masonry{columns:3 280px;column-gap:var(--gap)}
.masonry figure{margin:0 0 var(--gap);break-inside:avoid}
.masonry img{width:100%}
.masonry figcaption{font-size:.9rem;color:var(--text-muted);margin-top:.5rem}

/* Forms (quote builder) */
.quote{display:grid;grid-template-columns:7fr 5fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.form{display:grid;gap:20px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:grid;gap:8px;align-content:start}
.field label,.field legend{font-weight:700;font-size:.95rem}
.field .hint{font-size:.875rem;color:var(--text-muted);margin:0}
.field input,.field select,.field textarea{width:100%;min-height:52px;padding:12px 14px;background:var(--surface);color:var(--text);border:1px solid var(--border-strong);border-radius:var(--r);font:400 1rem/1.4 var(--f-body)}
.field textarea{min-height:120px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--placeholder)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--border-hover)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-color:var(--ink)}
.field [aria-invalid="true"]{border-color:var(--danger)}
.field .err{color:var(--danger);font-size:.875rem;font-weight:600;margin:0}
fieldset.field{border:0;padding:0;margin:0}
fieldset.field legend{padding:0}
.checks{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:4px}
.check{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 14px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r);cursor:pointer;font-weight:600;font-size:.95rem}
.check:hover{border-color:var(--border-hover)}
.check input{width:18px;height:18px;accent-color:var(--accent);flex:none}
.check:has(input:checked){border-color:var(--ink);background:var(--accent-soft)}
.form__ok{background:var(--accent-soft);border:1px solid var(--ink);padding:16px 18px;border-radius:var(--r);font-weight:600}
.form__ok p{margin:0}
.contact-card{background:var(--surface);padding:clamp(1.5rem,3vw,2.25rem);position:sticky;top:calc(var(--hdr) + 24px)}
.contact-card h2{font-size:1.5rem;margin-bottom:1rem}
.contact-list{display:grid;gap:4px;margin:1rem 0 1.5rem}
.contact-list a,.contact-list span{display:flex;align-items:center;gap:12px;min-height:48px;text-decoration:none;font-weight:600}
.contact-list a:hover{color:var(--ink)}
.contact-list .i{color:var(--paw-ink)}
.contact-list small{display:block;font-weight:400;color:var(--text-muted);font-size:.85rem}
@media (max-width:900px){.quote{grid-template-columns:1fr}.contact-card{position:static}}
@media (max-width:560px){.form__row,.checks{grid-template-columns:1fr}}

/* FAQ: two-column list, no accordion */
.faq{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,3vw,3rem) clamp(2rem,5vw,5rem)}
.faq h3{font-size:1.1rem;margin-bottom:.5rem}
.faq p{color:var(--text-muted);font-size:.98rem;margin:0}
@media (max-width:760px){.faq{grid-template-columns:1fr}}

/* Footer */
.ftr{border-top:1px solid var(--border);background:var(--night);padding:clamp(3.5rem,7vw,6rem) 0 0}
.ftr__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.6fr;gap:clamp(2rem,4vw,3rem)}
.ftr__brand p{color:var(--text-muted);margin:1rem 0 1.25rem;max-width:34ch;font-size:.98rem}
.ftr__h{font:700 .8rem/1.2 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:1rem}
.ftr__list{display:grid;gap:2px}
.ftr__list a,.ftr__list span{display:inline-flex;align-items:center;gap:10px;min-height:40px;text-decoration:none;font-size:.98rem}
.ftr__list a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.ftr__list .i{color:var(--paw-ink)}
.ftr__areas{font-size:.9rem;color:var(--text-muted);margin-top:.75rem}
.ftr__social{display:flex;flex-wrap:wrap;gap:8px}
.ftr__social a{display:grid;place-items:center;min-width:44px;height:44px;border:1px solid var(--border-strong);border-radius:var(--r);text-decoration:none;transition:border-color .16s var(--e-micro),color .16s var(--e-micro)}
.ftr__social a:hover{border-color:var(--ink);color:var(--ink)}
.ftr__ta{padding:0 12px;font-weight:600;font-size:.9rem}
.ftr__legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.5rem;padding-bottom:calc(1.5rem + 64px);border-top:1px solid var(--border);font-size:.9rem;color:var(--text-muted)}
.ftr__legal p{margin:0}
.ftr__legal a{color:var(--text)}
.ftr__legal a:hover{color:var(--ink)}
@media (max-width:900px){.ftr__grid{grid-template-columns:1fr 1fr}.ftr__brand,.ftr__contact{grid-column:span 2}}
@media (max-width:520px){.ftr__grid{grid-template-columns:1fr}.ftr__brand,.ftr__contact{grid-column:auto}}

/* WhatsApp float */
.wa-float{position:fixed;right:16px;bottom:16px;z-index:var(--z-float);width:56px;height:56px;border-radius:999px;display:grid;place-items:center;background:var(--accent);color:var(--text-inverse);box-shadow:var(--shadow-sm);transition:background-color .16s var(--e-micro)}
.wa-float:hover{background:var(--accent-hover)}
.wa-float .i{width:28px;height:28px}
body.menu-open .wa-float{display:none}
.page-contact .wa-float{display:none}

/* 404 */
.lost{min-height:70vh;display:flex;align-items:center}
.lost__code{font:800 clamp(5rem,16vw,12rem)/1 var(--f-display);font-stretch:125%;color:var(--paw-ink);letter-spacing:-.04em}

@media (max-width:480px){.btn{white-space:normal;text-align:center}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .tile:hover img{transform:none}
}