@font-face{font-family:"EB Garamond";src:url(fonts/eb-garamond-var.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(fonts/source-sans-3-var.woff2) format("woff2");font-weight:200 900;font-display:swap}
:root{/* palette, rebalanced 2026-10-20 (client: "use earth colours, green is too much, I only liked it on the logo"):
     a light warm base, near-black text and ONE accent, the logo's darkest green (#1D6434), used only for
     Book now, links and small marks. Sand is for tags and hairlines only. The footer is the only dark surface. */
  --forest:#1D6434;--lime:#ECE4D3;--mist:#F7F4EF;--ink:#1E1915;--white:#fff;--muted:#5E5650;--line:#E6E0D8;
  --clay:#1D6434;--clay-dk:#154B27;--olive:#1D6434;--sand:#F7F4EF;--stone:#ECE4D3;--field-line:#7A7068;--wrap:1240px;
  /* corners: the window-seat --r on photos and panels; quieter corners on text boxes and fields */
  --r:4px;--r-box:3px;--r-sm:2px;
  /* spacing scale (4px base). Everything below snaps to these steps. */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;
  /* rhythm. A change of colour separates on its own, so a band needs less room than a same-colour continuation. */
  --s-band:clamp(48px,6.7vw,96px);   /* top and bottom of every section (Topdeck: 96 desktop, 48 phone) */
  --s-same:32px;                      /* added on top when white follows white: 96+32 = 128 desktop, 48+32 = 80 phone */
  --s-head:clamp(32px,3.4vw,48px);    /* section heading to its content */
  --gap:clamp(16px,1.7vw,24px);       /* between cards and tiles */
  --gut:32px;
  /* motion: only things that change state move; no bounce */
  --d1:120ms;--d2:200ms;--d3:320ms;
  --ease:cubic-bezier(.2,.7,.2,1);--ease-in:cubic-bezier(.4,0,1,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;interpolate-size:allow-keywords}
body{margin:0;font:16px/1.55 "Source Sans 3",system-ui,sans-serif;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.d{font-family:"EB Garamond",Georgia,serif;font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:.95;margin:0}
.k{font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:13px}
.btn{display:inline-flex;align-items:center;gap:var(--s2);font-weight:700;font-size:15px;border-radius:var(--r-sm);padding:var(--s3) 20px;white-space:nowrap;border:0;cursor:pointer;font-family:inherit;transition:background-color var(--d1) var(--ease),color var(--d1) var(--ease),transform var(--d1) var(--ease)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--forest);outline-offset:3px}
.btn-lime{background:var(--lime);color:var(--ink)}
.btn-lime:hover{background:var(--clay-dk)}
.btn-ink{background:var(--ink);color:var(--white)}
.btn-ink:hover{background:var(--forest)}
.btn-white{background:var(--white);color:var(--ink)}
.btn-white:hover{background:var(--mist)}
.btn svg{width:18px;height:18px}
.btn[aria-busy=true]{opacity:.7;cursor:progress}

/* header */
header{position:sticky;top:0;z-index:20;background:var(--white);border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;gap:28px;height:76px}
.hd .logo{flex-shrink:0;display:flex;align-items:center;gap:10px}.hd .logo img{width:auto}.hd .logo .ic{height:50px}.hd .logo .wm{height:28px}
/* six links need the row: the phone lives in the WhatsApp button, the menu, the enquiry panel and the footer */
.hd nav{display:flex;gap:var(--s6);margin-left:28px;font-weight:600;font-size:15px}
.hd .call{display:none}
.hd nav a{transition:color var(--d1) var(--ease),box-shadow var(--d1) var(--ease)}
.hd nav a:hover{color:var(--forest)}
.hd .right{margin-left:auto;display:flex;align-items:center;gap:var(--s4)}
.hd .call{text-align:right;line-height:1.2}
.hd .call small{display:block;font-size:12px;color:var(--muted);font-weight:600}
.hd .call b{font-size:16px}
.menu{display:none;margin-left:auto;background:none;border:0;padding:var(--s2);min-width:44px;min-height:44px;cursor:pointer}
.menu:focus-visible{outline:2px solid var(--forest);outline-offset:2px;border-radius:var(--r-sm)}

/* hero (approved geometry: offsets, sizes and corners are fixed, do not snap) */
.hero{position:relative;padding:28px 0 0}
.hero-photo{position:relative;height:620px;margin-left:300px;border-radius:var(--r);overflow:hidden}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:60% 45%}
/* home hero loop: same 3:2 frame and focus as the still, so the fade-in does not shift the picture */
.hero-photo .hero-loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 45%;opacity:0;transition:opacity 900ms var(--ease)}
.hero-photo .hero-loop.on{opacity:1}
.hero-card{position:absolute;left:32px;top:72px;width:480px;background:var(--lime);border-radius:var(--r);padding:38px 40px 44px}
.hero-card .k{color:var(--ink)}
.hero-card h1{font-size:50px;margin:14px 0 18px}
.hero-card p{margin:0 0 24px;font-size:17px;font-weight:500}
.ask{position:relative;margin:-46px 64px 0 220px;background:var(--white);border-radius:var(--r);box-shadow:0 10px 30px rgba(43,33,27,.14);display:grid;grid-template-columns:1.4fr 1fr 1fr auto;padding:8px}
.ask label{display:block;padding:10px 18px;border-right:1px solid var(--line)}
.ask label span{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.ask select{width:100%;border:0;font:600 16px "Source Sans 3",sans-serif;color:var(--ink);background:transparent;padding:4px 0;appearance:none}
.ask .btn{margin:6px;border-radius:var(--r-sm);padding:0 28px}

/* section rhythm */
section{padding:var(--s-band) 0}
section:not([class*="band-"])+section:not([class*="band-"]){padding-top:calc(var(--s-band) + var(--s-same))}
.band-mist{background:var(--mist)}
.band-lime{background:var(--lime)}
.band-forest{background:var(--forest);color:var(--white)}
.sh{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s6);margin-bottom:var(--s-head)}
.sh h2{font-size:36px;max-width:720px}
.sh p{margin:0;max-width:400px;color:var(--muted);font-weight:500}
.band-forest .sh p{color:#E6DACB}
.sh .k{display:block;margin-bottom:var(--s3);color:var(--forest)}
.band-forest .sh .k{color:var(--mist)}

/* this is us */
.us{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:center}
.us .ph{border-radius:var(--r);overflow:hidden;aspect-ratio:5/4}
.us .ph img{width:100%;height:100%;object-fit:cover}
.us .k{color:var(--forest)}
.us h2{font-size:40px;margin:var(--s4) 0 var(--s5)}
.us p{margin:0 0 var(--s4);font-size:17px;color:var(--muted)}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s5)}
.fact{background:var(--mist);border-radius:var(--r-box);padding:var(--s4)}
.fact small{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--forest)}
.fact b{font-size:15.5px}

/* services */
.services{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.svc{background:var(--white);border-radius:var(--r-box);padding:var(--s5);min-height:200px;display:flex;flex-direction:column;position:relative}
.svc .n{position:absolute;right:20px;top:22px;font-family:"EB Garamond",Georgia,serif;font-size:13px;color:var(--muted)}
.svc .ic{width:52px;height:52px;border-radius:50%;background:var(--mist);display:grid;place-items:center;margin-bottom:var(--s4)}
.svc .ic svg{width:26px;height:26px;stroke:var(--forest);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.svc h3{margin:0 0 var(--s2);font-size:18px;line-height:1.25}
.svc p{margin:0;font-size:14.5px;color:var(--muted)}
.svc.lead{background:var(--forest);color:var(--white)}
.svc.lead .ic{background:var(--lime)}.svc.lead .ic svg{stroke:var(--ink)}
.svc.lead p{color:#E6DACB}.svc.lead .n{color:var(--mist)}

/* trip cards (no prices: enquiry-led) */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.card{background:var(--white);color:var(--ink);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.card .ph{position:relative;aspect-ratio:4/3;overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform var(--d3) var(--ease)}
.card:hover .ph img{transform:scale(1.03)}
.card .tag{position:absolute;left:var(--s3);top:var(--s3);background:var(--white);color:var(--ink);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;border-radius:var(--r-sm);padding:6px 11px}
.card .tag.open{background:var(--lime)}
.card .sample{position:absolute;right:var(--s3);bottom:var(--s3);background:rgba(43,33,27,.75);color:#fff;font-size:11px;border-radius:6px;padding:3px 7px}
.card .bd{padding:var(--s5);display:flex;flex-direction:column;flex:1}
.card h3{margin:0;font-size:19px;line-height:1.25}
.card .meta{display:flex;gap:6px;flex-wrap:wrap;margin:var(--s3) 0}
.card .meta span{font-size:12.5px;font-weight:700;background:var(--mist);border-radius:6px;padding:4px 8px}
.card ul{list-style:none;margin:0 0 var(--s5);padding:0;font-size:14px;color:var(--muted)}
.card li{position:relative;padding-left:22px;margin:var(--s1) 0}
.card li:before{content:"";position:absolute;left:0;top:4px;width:14px;height:14px;border-radius:50%;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.2 2.2 4.8-4.8' fill='none' stroke='%232B211B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.card .btn{margin-top:auto;justify-content:center}
.row-more{text-align:center;margin-top:var(--s6)}
.band-forest .row-more .btn{background:var(--lime);color:var(--ink)}

/* destinations */
.dest{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s4)}
.dt{position:relative;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden}
.dt:nth-child(1){border-radius:var(--r)}
.dt:nth-child(6){border-radius:var(--r)}
.dt img{width:100%;height:100%;object-fit:cover;transition:transform var(--d3) var(--ease)}
.dt:hover img{transform:scale(1.03)}
.dt .lb{position:absolute;left:var(--s3);right:var(--s3);bottom:var(--s3);background:var(--white);border-radius:var(--r-box);padding:var(--s3) var(--s4)}
.dt .lb b{display:block;font-size:15.5px;line-height:1.25}
.dt .lb small{font-size:12.5px;color:var(--muted);font-weight:600}
.dt .flag{position:absolute;left:var(--s3);top:var(--s3);background:var(--lime);font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;border-radius:var(--r-sm);padding:5px 10px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.step{background:var(--white);border-radius:var(--r-box);padding:var(--s6)}
.step .n{font-family:"EB Garamond",Georgia,serif;font-size:15px;color:var(--white);background:var(--forest);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;margin-bottom:var(--s5)}
.step h3{margin:0 0 var(--s2);font-size:19px}
.step p{margin:0;color:var(--muted);font-size:15px}

/* enquiry */
.enq{border-radius:var(--r);background:var(--forest);color:var(--white);display:grid;grid-template-columns:1fr 1.05fr;gap:var(--s8);padding:var(--s8)}
.enq h2{font-size:40px;margin:0 0 var(--s4)}
.enq p{margin:0 0 var(--s5);font-size:17px;color:#E6DACB}
.enq .direct{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start}
.enq .icon{width:150px;height:auto;aspect-ratio:942/762;margin-top:var(--s6)}
.enq .form{align-self:start}
.form{background:var(--white);color:var(--ink);border-radius:var(--r);padding:var(--s6);display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.form label{display:block;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.form input,.form select,.form textarea{display:block;width:100%;margin-top:var(--s2);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:var(--s3) 14px;font:500 15.5px "Source Sans 3",sans-serif;color:var(--ink);background:var(--white);transition:border-color var(--d1) var(--ease),box-shadow var(--d1) var(--ease)}
.form input:hover,.form select:hover,.form textarea:hover{border-color:#CDB99C}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:var(--forest);box-shadow:0 0 0 3px var(--mist)}
.form input:user-invalid,.form textarea:user-invalid{border-color:#b3412c;box-shadow:0 0 0 3px #ffe1dc}
.form textarea{min-height:110px;resize:vertical}
.form .full{grid-column:1/-1}
.form .btn{justify-content:center;padding:var(--s4)}

/* footer */
footer{background:var(--ink);color:#E0D4C3;padding:var(--s8) 0 var(--s6);margin-top:var(--s9);font-size:14.5px}
.fg{display:grid;grid-template-columns:1.4fr 1fr 1.1fr 1.3fr;gap:var(--s6)}
footer .flogo{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}footer .flogo .ic{height:58px;width:auto}footer .flogo .wm{height:30px;width:auto}
footer .foot-label{color:var(--white);margin:0 0 var(--s4);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin:var(--s2) 0}
footer a{transition:color var(--d1) var(--ease)}
footer a:hover{color:var(--lime)}
.legal{border-top:1px solid #4A3B30;margin-top:var(--s7);padding-top:var(--s5);display:flex;justify-content:space-between;gap:var(--s4);font-size:13px;color:#B3A492}
.wa{position:fixed;right:22px;bottom:22px;z-index:30;width:58px;height:58px;border-radius:50%;background:var(--lime);display:grid;place-items:center;box-shadow:0 8px 22px rgba(43,33,27,.3);transition:background-color var(--d1) var(--ease)}
.wa:hover{background:var(--clay-dk)}
.wa svg{width:28px;height:28px}

@media (max-width:1100px){
  .hd nav{display:none}.menu{display:block}.hd .right{margin-left:0}
  .hero-photo{margin-left:200px}.ask{margin-left:120px}
  .services{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .dest{grid-template-columns:repeat(3,1fr)}
  .us{gap:var(--s7)}
  .enq{grid-template-columns:1fr;gap:var(--s7)}
  .fg{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  :root{--gut:16px}
  .hd{height:64px;gap:10px}.hd .logo{gap:7px}.hd .logo .ic{height:36px}.hd .logo .wm{height:19px}.hd .call{display:none}.hd .right .btn{padding:9px 14px;font-size:14px}
  .hero{padding-top:12px}
  .hero-photo{margin-left:0;height:320px;border-radius:var(--r)}
  .hero-card{position:relative;left:auto;top:auto;width:auto;margin:-60px 12px 0;padding:28px 24px 30px;border-radius:var(--r)}
  .hero-card h1{font-size:clamp(24px,7.4vw,34px)}
  .ask{margin:16px 0 0;grid-template-columns:1fr;padding:6px}
  .ask label{border-right:0;border-bottom:1px solid var(--line)}
  .ask .btn{padding:14px;justify-content:center}
  .sh{display:block}.sh h2{font-size:clamp(21px,6.4vw,27px);margin-bottom:var(--s3)}
  .us{grid-template-columns:1fr;gap:var(--s6)}.us h2{font-size:clamp(22px,6.8vw,30px)}.us .ph{border-radius:var(--r)}
  .facts{grid-template-columns:1fr}
  .services{grid-template-columns:1fr 1fr;gap:var(--s3)}.svc{padding:var(--s4);min-height:0}.svc p{display:none}.svc h3{font-size:15.5px}
  .cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--s4);margin:0 calc(var(--gut)*-1);padding:0 var(--gut) var(--s2);scroll-padding-inline:var(--gut)}
  .card{flex:0 0 82%;scroll-snap-align:start}
  .dest{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--s3);margin:0 calc(var(--gut)*-1);padding:0 var(--gut) var(--s2);scroll-padding-inline:var(--gut)}.dt{flex:0 0 46%;scroll-snap-align:start}
  .steps{grid-template-columns:1fr}.step{padding:var(--s5)}
  .enq{padding:var(--s7) 20px 80px;border-radius:var(--r);gap:var(--s6)}.enq h2{font-size:clamp(22px,6.6vw,29px)}.enq .icon{display:none}
  .form{grid-template-columns:1fr;padding:20px}
  .fg{grid-template-columns:1fr}
  footer{margin-top:var(--s8)}
  .legal{flex-direction:column}
}

/* WordPress additions */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:12px;z-index:50;background:var(--white);padding:8px 14px;border-radius:8px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* mobile menu: opens by height, closes a little faster */
.mnav{display:grid;grid-template-rows:0fr;visibility:hidden;border-top:1px solid transparent;background:var(--white);transition:grid-template-rows calc(var(--d2)*.75) var(--ease-in),visibility 0s calc(var(--d2)*.75),border-color var(--d2)}
.mnav>.wrap{overflow:hidden;min-height:0}
.mnav a{display:block;padding:14px 0;font-weight:700;border-bottom:1px solid var(--line)}
.mnav .call{padding:var(--s4) 0;font-weight:700}
header.open .mnav{grid-template-rows:1fr;visibility:visible;border-top-color:var(--line);transition:grid-template-rows var(--d3) var(--ease),visibility 0s,border-color var(--d2)}
.notice{border-radius:var(--r-box);padding:14px var(--s4);font-weight:600;font-size:15px;margin-bottom:var(--s2)}
.notice.ok{background:var(--lime);color:var(--ink)}
.notice.err{background:#ffe1dc;color:#7a1d0e}
.page-hd{padding-top:var(--s8);padding-bottom:var(--s5)}
.page-hd .k{color:var(--forest);display:block;margin-bottom:var(--s3)}
.page-hd h1{font-size:clamp(28px,5vw,52px)}
.page-hd p{max-width:640px;color:var(--muted);font-size:17px}
.prose{max-width:760px;font-size:17px}
.prose h2{font-family:"EB Garamond",Georgia,serif;text-transform:uppercase;font-size:24px;letter-spacing:-.01em;margin:var(--s7) 0 var(--s3)}
.prose a{color:var(--forest);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:text-decoration-thickness var(--d1) var(--ease)}
.prose a:hover{text-decoration-thickness:2px}
.tabs{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s6)}
.tabs a{border-radius:var(--r-sm);padding:var(--s2) var(--s4);font-weight:700;font-size:14px;background:var(--mist);transition:background-color var(--d1) var(--ease),color var(--d1) var(--ease)}
.tabs a:hover{background:#E7DCCB}
.tabs a.on{background:var(--ink);color:var(--white)}
.archive .cards{grid-template-columns:repeat(3,1fr)}
.archive .card{box-shadow:0 0 0 1px var(--line)}
@media (max-width:1100px){.archive .cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.archive .cards{display:grid;grid-template-columns:1fr;margin:0;padding:0}.archive .card{flex:none}}

/* Hero quick links: icon tabs with labels */
.cats{display:grid;grid-template-columns:repeat(6,1fr);margin:var(--s6) auto 0;max-width:980px}
.cats a{display:flex;flex-direction:column;align-items:center;gap:var(--s2);padding:var(--s4) var(--s2) var(--s3);border-bottom:3px solid transparent;font-weight:700;font-size:14.5px;text-align:center;transition:border-color var(--d1) var(--ease),color var(--d1) var(--ease)}
.cats svg{width:30px;height:30px;stroke:var(--forest);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cats a:hover,.cats a:focus-visible{border-bottom-color:var(--lime);color:var(--forest)}
@media (max-width:720px){
  .cats{display:flex;overflow-x:auto;gap:var(--s1);margin:var(--s5) 0 0;padding:0 var(--gut);scrollbar-width:none;scroll-padding-inline:var(--gut)}
  .cats::-webkit-scrollbar{display:none}
  .cats a{flex:0 0 auto;min-width:96px;font-size:13.5px}
}

/* real horizons: the footer rises out of the page's own skyline (inc/horizon.php) */
.horizon{margin-top:var(--s5);line-height:0;pointer-events:none;overflow:hidden}
.horizon-line{margin-top:var(--s7)}
.horizon svg{display:block;width:100%;height:auto}
.horizon .hz-l{font-family:"Source Sans 3",sans-serif}
.horizon .hz-m{display:none}
.horizon+footer{margin-top:0;padding-top:var(--s6)}
.horizon-line+footer{padding-top:var(--s7)}
.hz-cap{margin:0 0 var(--s7);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:var(--lime);opacity:.85}
.horizon-line+footer .hz-cap{display:none}
@media (max-width:760px){.horizon .hz-d{display:none}.horizon .hz-m{display:block}.horizon{margin-top:var(--s7)}.hz-cap{margin-bottom:var(--s6)}}

/* the one brand moment: the first time the horizon comes into view, its distance layers
   rise out of the ground back to front, 80ms apart, then the peak names appear. Once per page.
   site.js adds .hz-wait (hidden) only when JS runs and motion is allowed, then .hz-in. */
.horizon.hz-wait svg>path{transform:translateY(56px);opacity:0}
.horizon.hz-wait .hz-l{opacity:0}
.horizon.hz-wait.hz-in svg>path{transform:none;opacity:1;transition:transform 1000ms var(--ease),opacity 600ms var(--ease)}
.horizon.hz-wait.hz-in svg>path:nth-of-type(2){transition-delay:80ms}
.horizon.hz-wait.hz-in svg>path:nth-of-type(3){transition-delay:160ms}
.horizon.hz-wait.hz-in svg>path:nth-of-type(4){transition-delay:240ms}
.horizon.hz-wait.hz-in svg>path:nth-of-type(5){transition-delay:320ms}
.horizon.hz-wait.hz-in .hz-l{opacity:1;transition:opacity var(--d3) var(--ease) 900ms}
/* line variant (trips abroad): the single ridge line draws left to right */
.horizon-line.hz-wait svg>path{transform:none;opacity:1;stroke-dasharray:1;stroke-dashoffset:1}
.horizon-line.hz-wait.hz-in svg>path{stroke-dashoffset:0;transition:stroke-dashoffset 1200ms var(--ease)}

/* in-section horizons: tone-on-tone, never behind copy */
#uganda{position:relative;overflow:hidden;padding-bottom:200px}
#uganda .wrap{position:relative;z-index:1}
.sec-hz{position:absolute;left:0;right:0;bottom:0;line-height:0;pointer-events:none}
.sec-hz img{display:block;width:100%;height:auto}
.sec-hz .hz-m{display:none}
.card .hz-card{display:block;width:100%;height:auto;margin:-4px 0 var(--s3);opacity:.95}
.card .hz-none{aspect-ratio:300/36}
.enq{position:relative;overflow:hidden}
.enq>*{position:relative;z-index:1}
.enq .hz-enq{position:absolute;z-index:0;left:0;bottom:0;width:100%;height:auto;pointer-events:none}
@media (max-width:760px){#uganda{padding-bottom:128px}.sec-hz .hz-d{display:none}.sec-hz .hz-m{display:block}.enq .hz-enq{display:none}}

/* ---------- interior pages (page-hero, faq, gorilla trekking kit) ---------- */
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--s4);padding:0;font-size:13.5px;font-weight:600;color:var(--muted)}
.crumbs li+li:before{content:"/";margin-right:6px;color:#B3A492}
.crumbs a{transition:color var(--d1) var(--ease)}
.crumbs a:hover{color:var(--forest)}
.crumbs [aria-current]{color:var(--ink)}
/* page hero and its figure bar keep the approved hero geometry */
/* the hero container has no side padding (approved geometry), so the crumbs take the gutter themselves */
.phero .crumbs{padding-left:var(--gut)}
.phero .hero-photo{height:540px}
.phero .hero-card{top:104px}
.phero .hero-card h1{font-size:46px}
.figs{position:relative;margin:-46px 64px 0 220px;background:var(--white);border-radius:var(--r);box-shadow:0 10px 30px rgba(43,33,27,.14);display:grid;grid-template-columns:repeat(4,1fr);padding:8px}
.figs div{padding:14px 20px;border-right:1px solid var(--line)}
.figs div:last-child{border-right:0}
.figs dt{font-family:"EB Garamond",Georgia,serif;font-weight:800;font-size:26px;color:var(--forest);line-height:1.1}
.figs dd{margin:4px 0 0;font-size:13.5px;font-weight:600;color:var(--muted);line-height:1.35}
a.btn[aria-current],.hd nav a[aria-current]{color:var(--forest)}
.hd nav a[aria-current]{box-shadow:inset 0 -3px 0 var(--lime)}

/* trek day timeline */
.tl{list-style:none;margin:var(--s5) 0 0;padding:0}
.tl li{display:grid;grid-template-columns:64px 1fr;gap:var(--s4);position:relative;padding-bottom:var(--s5)}
.tl li:before{content:"";position:absolute;left:31px;top:44px;bottom:0;width:2px;background:var(--line)}
.tl li:last-child:before{display:none}
.tl .t{width:64px;height:40px;border-radius:var(--r-sm);background:var(--forest);color:var(--white);font-family:"EB Garamond",Georgia,serif;font-size:12.5px;display:grid;place-items:center}
.tl li:nth-child(4) .t{background:var(--lime);color:var(--ink)}
.tl h3{margin:var(--s2) 0 var(--s1);font-size:18px;line-height:1.25}
.tl p{margin:0;font-size:15.5px;color:var(--muted)}
.day .us{align-items:start}
.day .ph{position:sticky;top:100px}

/* sectors */
.wide{margin:0 0 var(--s5);position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:3/1}
.wide img{width:100%;height:100%;object-fit:cover}
.wide figcaption{position:absolute;left:var(--s4);bottom:var(--s4);background:rgba(43,33,27,.78);color:#fff;font-size:12.5px;font-weight:600;border-radius:var(--r-sm);padding:5px 10px}
.sec5{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s4)}
.sec{background:#46352A;border-radius:var(--r-box);padding:var(--s5)}
.sec .where{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--mist)}
.sec h3{font-family:"EB Garamond",Georgia,serif;font-weight:800;text-transform:uppercase;font-size:19px;margin:var(--s2) 0;letter-spacing:-.01em}
.sec p{margin:0;font-size:14.5px;color:#E6DACB}
.sec:last-child{background:var(--lime);color:var(--ink)}.sec:last-child .where{color:var(--ink)}.sec:last-child p{color:var(--ink)}

/* months */
.months{list-style:none;margin:0 0 var(--s5);padding:0;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s2)}
.months li{border-radius:var(--r-box);padding:var(--s4) var(--s1);text-align:center;background:var(--white)}
.months b{display:block;font-family:"EB Garamond",Georgia,serif;font-size:14px;text-transform:uppercase}
.months small{font-size:12px;font-weight:700;color:var(--muted)}
.months .dry{background:var(--lime)}.months .dry small{color:var(--ink)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.note{background:var(--white);border-radius:var(--r-box);padding:var(--s5)}
.note h3{margin:0 0 var(--s2);font-size:18px}
.note p{margin:0;color:var(--muted);font-size:15.5px}

/* routes */
.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.route{border-radius:var(--r-box);padding:var(--s6) var(--s5);box-shadow:0 0 0 1px var(--line)}
.route .ic{width:52px;height:52px;border-radius:50%;background:var(--mist);display:grid;place-items:center;margin-bottom:var(--s4)}
.route .ic svg{width:26px;height:26px;stroke:var(--forest);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.route h3{margin:0 0 var(--s2);font-size:18px}
.route p{margin:0;color:var(--muted);font-size:15.5px}

/* packing + rules */
.pack .us{align-items:start}
.pack .ph{border-radius:var(--r);aspect-ratio:4/5}
.ticks{list-style:none;margin:var(--s5) 0 0;padding:0;columns:2;column-gap:var(--s6)}
.ticks li{position:relative;padding-left:26px;margin:0 0 var(--s3);font-size:15.5px;break-inside:avoid}
.ticks li:before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.2 2.2 4.8-4.8' fill='none' stroke='%232B211B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.rules{margin-top:var(--s5);background:var(--ink);color:#E6DACB;border-radius:var(--r-box);padding:var(--s5)}
.rules h3{margin:0 0 var(--s3);color:var(--white);font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.rules ul{margin:0;padding-left:18px;font-size:15px}
.rules li{margin:var(--s2) 0}

/* more time: a short strip, so half a band */
.more-time{padding:var(--s8) 0}
.mt{display:grid;grid-template-columns:1fr 1.2fr auto;gap:var(--s7);align-items:center}
.mt .k{display:block;margin-bottom:var(--s3);color:var(--ink)}
.mt h2{font-size:34px}
.mt p{margin:0;font-weight:500}

/* faq */
.faq-g{display:grid;grid-template-columns:1fr 1.5fr;gap:var(--s8);align-items:start}
.faq .k{display:block;margin-bottom:var(--s3);color:var(--forest)}
.faq h2{font-size:36px}
.qs details{border-bottom:1px solid var(--line)}
.qs details:first-child{border-top:1px solid var(--line)}
/* answers open by height where the browser can animate details; elsewhere they open instantly */
.qs details::details-content{block-size:0;overflow:hidden;transition:block-size calc(var(--d2)*.75) var(--ease-in),content-visibility calc(var(--d2)*.75) allow-discrete}
.qs details[open]::details-content{block-size:auto;transition:block-size var(--d2) var(--ease),content-visibility var(--d2) allow-discrete}
.qs summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--s5);padding:var(--s5) 0;font-weight:700;font-size:17px}
.qs summary::-webkit-details-marker{display:none}
.qs summary:after{content:"+";flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--mist);display:grid;place-items:center;font-size:20px;line-height:1;color:var(--forest);transition:background-color var(--d1) var(--ease)}
.qs details[open] summary:after{content:"–";background:var(--lime);color:var(--ink)}
.qs summary:focus-visible{outline:2px solid var(--forest);outline-offset:4px}
.qs p{margin:0 0 var(--s5);color:var(--muted);max-width:640px}

@media (max-width:1100px){
  .phero .hero-photo{margin-left:200px}.figs{margin-left:120px;margin-right:32px}
  .sec5{grid-template-columns:repeat(2,1fr)}.sec:last-child{grid-column:1/-1}
  .months{grid-template-columns:repeat(6,1fr)}
  .routes{grid-template-columns:1fr}
  .mt{grid-template-columns:1fr;gap:var(--s4);justify-items:start}
  .faq-g{grid-template-columns:1fr;gap:var(--s5)}
  .day .ph{position:static}
}
@media (max-width:720px){
  .crumbs ol{font-size:12.5px;margin-bottom:var(--s3)}
  .phero .hero-photo{margin-left:0;height:300px}
  .phero .hero-card{top:auto}
  .phero .hero-card h1{font-size:clamp(24px,7.4vw,34px)}
  .figs{margin:16px 0 0;grid-template-columns:1fr 1fr;padding:4px}
  .figs div{padding:12px 14px;border-right:0;border-bottom:1px solid var(--line)}
  .figs div:nth-child(odd){border-right:1px solid var(--line)}
  .figs div:nth-last-child(-n+2){border-bottom:0}
  .figs dt{font-size:21px}
  .wide{aspect-ratio:4/3;border-radius:var(--r)}
  .sec5{grid-template-columns:1fr}
  .months{grid-template-columns:repeat(4,1fr)}
  .two{grid-template-columns:1fr}
  .ticks{columns:1}
  .pack .ph{order:-1;aspect-ratio:4/3;border-radius:var(--r)}
  .mt h2,.faq h2{font-size:clamp(22px,6.6vw,29px)}
  .more-time{padding:var(--s7) 0}
  .tl li{grid-template-columns:56px 1fr;gap:var(--s3)}.tl .t{width:56px}.tl li:before{left:27px}
}

/* header with six links: keep every label on one line; drop the phone label before anything wraps */
.hd nav a{white-space:nowrap}
.hd .call b,.hd .call small{white-space:nowrap}
@media (max-width:1400px){.hd nav{gap:var(--s5);margin-left:var(--s4)}}

/* ---------- page kit (inc/blocks.php) ---------- */
.us.flip>.ph{order:2}
.split .us h2{font-size:36px;margin:var(--s4) 0 var(--s5)}
.split .us .k{color:var(--forest)}
.split .cta{margin-top:var(--s5)}
.split .ticks{columns:1}
.split.band-mist .fact{background:var(--white)}
.grid{display:grid;gap:var(--gap)}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.grid.g4{grid-template-columns:repeat(4,1fr)}
.tile{display:flex;flex-direction:column;background:var(--white);border-radius:var(--r-box);overflow:hidden;box-shadow:0 0 0 1px var(--line);color:var(--ink)}
.grid.photos .tile{border-radius:var(--r)}
.band-mist .tile{box-shadow:none}
.grid.icons .tile{padding:var(--s5)}
.tile .ic{width:52px;height:52px;border-radius:50%;background:var(--mist);display:grid;place-items:center;margin-bottom:var(--s4)}
.band-mist .tile .ic{background:var(--mist)}
.tile .ic svg{width:26px;height:26px;stroke:var(--forest);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tile .tph{aspect-ratio:4/3;overflow:hidden}
.tile .tph img{width:100%;height:100%;object-fit:cover;transition:transform var(--d3) var(--ease)}
.grid.photos .tbd{padding:var(--s5);display:flex;flex-direction:column;flex:1}
.tbd{display:flex;flex-direction:column;flex:1}
.tile h3{margin:0 0 var(--s2);font-size:18px;line-height:1.25}
.tile p{margin:0 0 var(--s4);color:var(--muted);font-size:15px}
.tile .more{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14.5px;color:var(--forest)}
.tile .more svg{width:16px;height:16px;transition:transform var(--d1) var(--ease)}
a.tile:hover .more svg,a.tile:focus-visible .more svg{transform:translateX(3px)}
a.tile:hover .tph img{transform:scale(1.03)}
a.tile:focus-visible{outline:2px solid var(--forest);outline-offset:3px}
.steps.n4{grid-template-columns:repeat(4,1fr)}
.steps.n5{grid-template-columns:repeat(5,1fr)}
.steps.n5 .step{padding:var(--s5)}
section:not(.band-mist):not(.band-forest):not(.band-lime) .steps .step{box-shadow:0 0 0 1px var(--line)}
.page-hd .crumbs{margin-bottom:var(--s4)}
.page-hd h1{max-width:900px}
/* page header and the section after it read as one unit */
.page-hd+section .grid,.page-hd+section{padding-top:var(--s5)}
@media (max-width:1100px){
  .grid.g3,.grid.g4{grid-template-columns:repeat(2,1fr)}
  .steps.n4,.steps.n5{grid-template-columns:repeat(2,1fr)}
  .us.flip>.ph{order:0}
}
@media (max-width:720px){
  .grid.g3,.grid.g4{grid-template-columns:1fr}
  .grid.icons .tile{padding:20px}
  .steps.n4,.steps.n5{grid-template-columns:1fr}
  .split .us h2{font-size:clamp(22px,6.8vw,30px)}
  .page-hd{padding-top:var(--s7)}
}
/* long text: left edge lines up with the page heading, measure kept at 760px */
.wrap.prose{max-width:var(--wrap)}
.wrap.prose>*{max-width:760px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* page to page: a short cross-fade where the browser supports it; a normal load elsewhere */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:150ms}

/* ---------- scroll: the page breathes, the words stay still ----------
   Text never moves. Photos open like a window blind as they come up the screen, the hero photo
   drifts slower than the page, the in-section horizon rises into its band, and the header settles
   once the page moves. All scroll-linked (no JS); browsers without scroll timelines show the page still.
   Uses the individual scale/translate properties so hover transforms still work on top. */
@media (prefers-reduced-motion:no-preference){
  .hero-photo img,.hero-photo .hero-loop{animation:hero-settle 1400ms var(--ease) both}
  @keyframes hero-settle{from{scale:1.05}to{scale:1}}
  @supports (animation-timeline:view()){
    /* hero photo: slower than the page as it leaves */
    .hero-photo img,.hero-photo .hero-loop{animation:hero-settle 1400ms var(--ease) both,hero-drift linear both;animation-timeline:auto,view();animation-range:normal,exit 0% exit 100%}
    @keyframes hero-drift{to{translate:0 12%}}
    /* window blind: photo frames open downward and settle as they enter */
    .us .ph img,.wide img,.card .ph img,.dt img,.tile .tph img,.pack .ph img{animation:blind linear both;animation-timeline:view();animation-range:entry 5% entry 75%}
    @keyframes blind{from{clip-path:inset(0 0 14% 0);scale:1.06}to{clip-path:inset(0);scale:1}}
    /* in-section horizon rises into the band as the band scrolls through */
    .sec-hz{animation:hz-rise linear both;animation-timeline:view();animation-range:entry 20% cover 60%}
    @keyframes hz-rise{from{translate:0 36px}to{translate:0 0}}
    /* header: a soft edge once the page has moved */
    header{animation:hd-settle linear both;animation-timeline:scroll(root);animation-range:0 120px}
    @keyframes hd-settle{to{box-shadow:0 6px 20px rgba(43,33,27,.08);border-bottom-color:transparent}}
  }
}

/* reduced motion: nothing travels; colour changes stay */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{transition-property:color,background-color,border-color,box-shadow,text-decoration-thickness!important;animation:none!important}
  .card:hover .ph img,.dt:hover img,a.tile:hover .tph img,a.tile:hover .more svg,.btn:active{transform:none}
  @view-transition{navigation:none}
}
/* accessibility pass 2026-10-14 (OS 09_a11y-audit): footer legal links at least 24px tall; header fits a 320px screen */
.legal a{display:inline-block;padding:var(--s2) 0}
@media (max-width:374px){
  .hd{gap:8px}.hd .logo{gap:6px}.hd .logo .ic{height:30px}.hd .logo .wm{height:16px}.hd .right .btn{padding:8px 12px;font-size:13.5px}
}
main:focus{outline:0}

/* ---------- client review 2026-10-20: older, paying travellers ----------
   Classic serif headings (EB Garamond) over a quiet sans (Source Sans 3); the heavy grotesk now lives
   only inside the logo. Earth palette; square corners; clay marks the one action on each unit. */
body{font-size:17px;line-height:1.6;color:var(--ink)}
.d,h1,h2,h3,.prose h2,.sec h3{font-family:"EB Garamond",Georgia,serif;font-weight:500;text-transform:none;letter-spacing:-.005em;line-height:1.12}
.sh h2{font-size:44px}
.card h3,.tile h3,.svc h3,.step h3,.note h3,.route h3,.tl h3{font-size:23px;font-weight:500;line-height:1.2}
.prose h2{font-size:30px}
.k{font-weight:600;font-size:12.5px;letter-spacing:.14em;color:var(--clay)}
.sh .k,.us .k,.page-hd .k,.faq .k,.split .us .k{color:var(--clay)}
.btn{border-radius:var(--r-sm);font-weight:600;letter-spacing:.01em;padding:13px 22px}
.btn-lime{background:var(--clay);color:var(--white)}
.btn-lime:hover{background:var(--clay-dk)}
.btn-ink:hover{background:var(--clay)}
.btn:focus-visible,.menu:focus-visible,a.tile:focus-visible{outline-color:var(--clay)}
.hd nav a:hover,a.btn[aria-current],.hd nav a[aria-current]{color:var(--clay)}
.hd nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--clay)}
.band-forest .row-more .btn{background:var(--white);color:var(--ink)}
.band-lime{background:var(--sand)}
.hero-card{background:var(--sand)}
.hero-card h1{font-size:46px}
/* icons: line only, no circle behind them */
.svc .ic,.route .ic,.tile .ic,.band-mist .tile .ic{width:auto;height:auto;border-radius:0;background:none;place-items:start;margin-bottom:var(--s3)}
.svc .ic svg,.route .ic svg,.tile .ic svg{width:30px;height:30px;stroke:var(--clay)}
.svc.lead .ic{background:none}.svc.lead .ic svg{stroke:var(--stone)}
.svc .n{font-size:15px}
.card .tag,.dt .flag{border-radius:var(--r-sm);font-weight:600;letter-spacing:.08em}
.card .tag.open,.dt .flag{background:var(--sand);color:var(--ink)}
.card .meta span{border-radius:var(--r-sm);font-weight:600;background:var(--sand)}
.card li:before,.ticks li:before{background:none url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.4l2.8 2.8 6.2-6.2' fill='none' stroke='%2366653F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;border-radius:0}
.step .n{border-radius:0;background:none;color:var(--clay);width:auto;height:auto;font-size:34px;display:block;margin-bottom:var(--s3)}
.tl .t{border-radius:var(--r-sm)}
.tl li:nth-child(4) .t,.months .dry,.sec:last-child,.notice.ok{background:var(--stone);color:var(--ink)}
.qs summary:after{border-radius:var(--r-sm);background:var(--sand);color:var(--clay)}
.qs details[open] summary:after{background:var(--stone);color:var(--ink)}
.prose a,.tile .more{color:var(--clay)}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--clay);box-shadow:0 0 0 3px var(--sand)}
footer a:hover{color:var(--stone)}
.wa{background:#25D366;border-radius:50%}.wa:hover{background:#1fb457}
.wa svg{fill:#fff}
.hz-cap{color:var(--stone)}
.figs{border-radius:var(--r)}
.figs dt{color:var(--clay);font-weight:500}

/* home entrance: the whole first screen is the forest */
.entrance{position:relative;height:100vh;height:100svh;min-height:560px;max-height:1100px;overflow:hidden;background:#1d1a14;color:var(--white);display:flex;align-items:flex-end}
.ent-media,.ent-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:64% 40%}
.entrance video.ent-media{opacity:0;transition:opacity 900ms var(--ease)}
.entrance video.ent-media.on{opacity:1}
/* one flat tint over the whole frame, so the words read on any frame of the loop (no gradient scrim) */
.entrance:after{content:"";position:absolute;inset:0;background:rgba(26,20,15,.38);pointer-events:none}
.ent-in{position:relative;z-index:1;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut) clamp(40px,8vh,88px)}
.ent-desc{max-width:640px;margin:0 0 var(--s7);font-family:"EB Garamond",Georgia,serif;font-size:27px;line-height:1.35;font-weight:400}
.ent-credit{position:absolute;z-index:1;right:var(--gut);bottom:var(--s3);margin:0;font-size:11.5px;color:rgba(255,255,255,.8)}
.ent-credit a{text-decoration:underline;text-underline-offset:2px}
.home header{border-top:0}
@media (prefers-reduced-motion:no-preference){.ent-media img,.entrance video.ent-media{animation:hero-settle 1400ms var(--ease) both}}
@media (max-width:720px){
  .entrance{min-height:600px}
  .ent-media,.ent-media img{object-position:62% 50%}
  .ent-desc{font-size:20px;margin-bottom:var(--s5)}
  .ent-in{padding-bottom:56px}
  .ent-credit{left:var(--gut);right:auto;bottom:var(--s3);font-size:10.5px}
  .sh h2{font-size:clamp(26px,7.4vw,32px)}
  .card h3,.tile h3{font-size:21px}
}

/* partners strip: their official marks, set in a row on white, no boxes */
.partners{padding:var(--s8) 0 var(--s6);border-top:1px solid var(--line)}
.partners-h{font-size:28px;margin:0 0 var(--s6);text-align:center}
.plogos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--s6) clamp(32px,5vw,72px)}
.plogos li{display:flex;align-items:center;gap:var(--s3)}
.plogos img{height:84px;width:auto}
.plogos li:nth-child(3) img{height:50px}
.plogos span{max-width:150px;font-size:13px;line-height:1.3;font-weight:600;color:var(--muted)}
@media (max-width:720px){.plogos{gap:var(--s5) var(--s6)}.plogos img{height:60px}.plogos li:nth-child(3) img{height:36px}.partners-h{font-size:24px}}
.card{position:relative} /* keeps the button's screen-reader trip name inside the card */
/* phones: the gorilla's face sits low in the frame, so the words go to the top and the buttons to the foot */
@media (max-width:720px){
  .entrance{align-items:stretch}
  .ent-in{display:flex;flex-direction:column;justify-content:space-between;padding-top:calc(var(--s6) + env(safe-area-inset-top));padding-bottom:44px}
  .ent-media,.ent-media img{object-position:60% 72%}
  .ent-desc{font-size:19px}
}

/* home hero, operator 2026-10-20: basic, as the client expects. The normal header stays on top; the video
   fills the rest of the first screen; words on the left, a quiet row of buttons under them. */
.entrance{height:calc(100vh - 76px);height:calc(100svh - 76px);min-height:540px;max-height:960px;align-items:center}
.entrance:after{background:rgba(43,33,27,.5)}
.ent-in{padding-top:var(--s7);padding-bottom:var(--s7)}
.ent-k{color:var(--stone);margin:0 0 var(--s4)}
.ent-desc{max-width:760px;margin:0 0 var(--s6);font-size:clamp(30px,3.1vw,44px);line-height:1.18;font-weight:500;letter-spacing:-.005em}
@media (max-width:720px){
  .entrance{height:calc(100svh - 64px);min-height:520px;align-items:stretch}
  .ent-in{display:flex;flex-direction:column;justify-content:flex-start;padding-top:var(--s6);padding-bottom:52px}
  .ent-desc{font-size:clamp(22px,6.4vw,27px);margin-bottom:auto}
  .ent-in{padding-bottom:100px} /* clear of the WhatsApp button */
}

/* hero, operator 2026-10-20 (second pass): eyebrow, welcome heading, her paragraph, one button */
.ent-h{font-size:clamp(40px,4.6vw,66px);line-height:1.06;font-weight:500;margin:0 0 var(--s5);max-width:760px}
.ent-desc{font-family:"Source Sans 3",system-ui,sans-serif;font-size:19px;line-height:1.6;font-weight:400;max-width:560px;margin:0 0 var(--s6);color:#F3ECE2}
.ent-cta{padding:15px 26px;font-size:16px}
@media (max-width:720px){
  .entrance{align-items:flex-start}
  .ent-in{display:block;padding-top:var(--s7);padding-bottom:100px}
  .ent-h{font-size:clamp(34px,10vw,42px)}
  .ent-desc{font-size:17px;margin-bottom:var(--s5)}
  .ent-cta{width:100%;justify-content:center}
}

/* ---------- header, client review 2026-10-20: the menu is her "buttons to click and move on" ----------
   One deep-brown band on every page, white logo, six plain items with 48px tap targets for an older
   audience, "Book now" the only filled button. On the home page it lies over the video as a flat band
   (no gradient), dense enough that cream text keeps well over 4.5:1 on any frame; it goes solid once
   the page moves. Phones get a "Menu" button that opens a full-screen list in sand. */
header{background:var(--ink);border-bottom:0;color:#F3ECE2}
.hd{height:88px;gap:var(--s5)}
.hd .logo .ic{height:52px}.hd .logo .wm{height:30px}
.hd nav{gap:var(--s1);margin-left:auto;font-weight:600;font-size:17px}
.hd nav a{display:inline-flex;align-items:center;min-height:48px;padding:0 14px;border-radius:var(--r-sm);color:#F3ECE2;transition:background-color var(--d1) var(--ease),color var(--d1) var(--ease)}
.hd nav a:hover{background:rgba(255,255,255,.1);color:var(--white)}
.hd nav a:focus-visible{outline:2px solid var(--stone);outline-offset:2px}
.hd nav a[aria-current]{color:var(--white);box-shadow:inset 0 -3px 0 var(--stone)}
.hd .right{margin-left:var(--s3)}
.hd .right .btn{min-height:48px;padding:0 24px;font-size:16.5px}
header.over{position:fixed;left:0;right:0;top:0}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){header{animation:none}}}
/* the home hero now runs under the header band, so it takes the whole first screen */
.home .entrance{height:100vh;height:100svh;max-height:none}
.home .ent-in{padding-top:calc(88px + var(--s6))}
.home main{scroll-margin-top:88px}
:target{scroll-margin-top:100px}

.menu{display:none;align-items:center;gap:var(--s2);min-height:48px;padding:0 16px;margin-left:auto;border:1.5px solid rgba(243,236,226,.7);border-radius:var(--r-sm);background:none;color:#F3ECE2;font:600 16.5px "Source Sans 3",system-ui,sans-serif}
.menu svg{width:22px;height:22px}
.menu:focus-visible{outline:2px solid var(--stone);outline-offset:2px}
header.open .menu{background:#F3ECE2;color:var(--ink)}
@media (max-width:1100px){.hd nav{display:none}.menu{display:inline-flex}.hd .right{margin-left:auto}}
/* full-screen list */
.mnav{position:fixed;left:0;right:0;top:88px;bottom:0;display:block;visibility:hidden;opacity:0;overflow-y:auto;background:var(--sand);color:var(--ink);border:0;transition:opacity var(--d2) var(--ease),visibility 0s var(--d2)}
.mnav>.wrap{overflow:visible;padding-top:var(--s5);padding-bottom:var(--s7)}
.mnav>.wrap>a{display:flex;align-items:center;min-height:64px;padding:0;border-bottom:1px solid var(--line);font-family:"EB Garamond",Georgia,serif;font-size:30px;font-weight:500}
.mnav a[aria-current]{color:var(--clay)}
.mnav-foot{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s6)}
.mnav-foot .btn{justify-content:center;min-height:56px;font-size:18px}
.mnav-foot .call{display:flex;align-items:center;justify-content:center;min-height:56px;font-size:18px;font-weight:600}
header.open .mnav{visibility:visible;opacity:1;transition:opacity var(--d2) var(--ease),visibility 0s}
body.menu-open{overflow:hidden}
@media (max-width:720px){
  .hd{height:72px}.hd .logo .ic{height:40px}.hd .logo .wm{height:22px}
  .hd .right{display:none}
  .mnav{top:72px}
  .home .ent-in{padding-top:calc(72px + var(--s5))}
}
@media (max-width:374px){.hd .logo .wm{height:18px}.menu{padding:0 12px}}
.mnav-foot a{border:0}
.mnav-foot .btn{display:flex;padding:0 24px}
body.menu-open .wa{display:none}

/* ---------- palette rebalance 2026-10-20: light and quiet, the colour sits in the photographs ----------
   Former dark bands (Uganda safaris, enquiry panel, lead service, gorilla sectors) become the warm
   off-white; the footer is the only dark surface. */
body{color:var(--ink)}
.band-forest{background:var(--mist);color:var(--ink)}
.band-forest .sh p,.svc.lead p{color:var(--muted)}
.band-forest .sh .k{color:var(--forest)}
.band-forest .row-more .btn{background:var(--white);color:var(--forest);box-shadow:inset 0 0 0 1.5px var(--forest)}
.band-mist{background:var(--mist)}
.band-lime{background:var(--white)}
.svc.lead{background:var(--white);color:var(--ink);box-shadow:inset 0 3px 0 var(--forest)}
.svc.lead .ic svg{stroke:var(--forest)}.svc.lead .n{color:var(--muted)}
.enq{background:var(--mist);color:var(--ink)}
.enq p{color:var(--muted)}
.enq .btn-white{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.sec{background:var(--white);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.sec .where{color:var(--forest)}.sec p{color:var(--muted)}
.sec:last-child{background:var(--mist)}
.rules{background:var(--mist);color:var(--ink)}.rules h3{color:var(--ink)}
.hero-card{background:var(--white);box-shadow:0 0 0 1px var(--line)}
.tl .t{background:var(--ink)}
.tl li:nth-child(4) .t,.months .dry,.notice.ok{background:var(--stone);color:var(--ink)}
.card .tag,.dt .flag,.card .tag.open{background:var(--white);color:var(--ink)}
.card .meta span{background:var(--mist)}
.k,.sh .k,.us .k,.page-hd .k,.faq .k,.split .us .k{color:var(--forest)}
footer{background:var(--ink);color:#D9D3CB}
.legal{border-top-color:#3A332D;color:#B3ABA2}
.hz-cap{color:#B3ABA2}
footer a:hover{color:var(--white)}
/* cards: "View tour" is a quiet outlined button, not a solid bar */
.card .btn{align-self:flex-start;background:transparent;color:var(--forest);box-shadow:inset 0 0 0 1.5px var(--forest);padding:11px 18px}
.card .btn:hover{background:var(--forest);color:var(--white)}
/* audit 2026-10-20: F4 field borders 3:1+, F5 WhatsApp icon ink, F9 explicit focus rings, F8 a floor on small type */
.form input,.form select,.form textarea{border-color:var(--field-line);font-size:16px}
.form input:hover,.form select:hover,.form textarea:hover{border-color:var(--muted)}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--forest);box-shadow:0 0 0 3px #D7E6DB}
.form label{font-size:14px}
.wa svg{fill:var(--ink)}
.wa:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
a:focus-visible{outline:2px solid var(--forest);outline-offset:3px}
footer a:focus-visible,.entrance a:focus-visible,.entrance button:focus-visible,header.over:not(.solid) a:focus-visible,header.over:not(.solid) .menu:focus-visible{outline:3px solid #fff;outline-offset:3px}
.card .tag,.card .sample{font-size:12.5px}

/* header: white with a hairline inside; on the home page, transparent over the video with white type */
header{background:var(--white);color:var(--ink);border-bottom:1px solid var(--line)}
.hd nav a{color:var(--ink)}
.hd nav a:hover{background:var(--mist);color:var(--ink)}
.hd nav a[aria-current]{color:var(--ink);box-shadow:inset 0 -3px 0 var(--forest)}
.menu{color:var(--ink);border-color:var(--ink)}
header.open .menu{background:var(--ink);color:var(--white)}
.hd .logo .on-dark{display:none}
header.over{background:transparent;border-bottom-color:transparent;transition:background-color var(--d2) var(--ease),border-color var(--d2) var(--ease)}
header.over:not(.solid):not(.open) .hd nav a,header.over:not(.solid):not(.open) .menu{color:var(--white);border-color:rgba(255,255,255,.8)}
header.over:not(.solid):not(.open) .hd nav a:hover{background:rgba(255,255,255,.14)}
header.over:not(.solid):not(.open) .hd nav a[aria-current]{box-shadow:inset 0 -3px 0 var(--white)}
header.over:not(.solid):not(.open) .logo .on-dark{display:block}
header.over:not(.solid):not(.open) .logo .on-light{display:none}
header.over.solid,header.over.open{background:var(--white);border-bottom-color:var(--line)}
.mnav{background:var(--white)}
.mnav a[aria-current]{color:var(--forest)}
/* hero: one flat near-black tint, dense enough for the header and the paragraph over the brightest frames (F2, F3) */
.entrance{background:#2a2e22}
.entrance:after{background:rgba(30,25,21,.6)}
.ent-k{color:#F7F4EF;font-size:14px}
.ent-desc{color:#FFFFFF}
.ent-cta{background:var(--white);color:var(--ink)}
.ent-cta:hover{background:var(--mist)}
/* hero pause control (F1, WCAG 2.2.2) */
.ent-pause{position:absolute;z-index:2;left:var(--gut);bottom:var(--s4);display:none;align-items:center;gap:var(--s2);min-height:44px;padding:0 16px;border:1.5px solid rgba(255,255,255,.85);border-radius:var(--r-sm);background:rgba(30,25,21,.55);color:#fff;font:600 15px "Source Sans 3",system-ui,sans-serif;cursor:pointer}
.ent-pause svg{width:16px;height:16px;fill:currentColor}
.ent-pause.ready{display:inline-flex}
.ent-pause:hover{background:rgba(30,25,21,.8)}
.ent-credit{left:auto;right:var(--gut);bottom:calc(var(--s4) + 12px)}
.ent-credit a{display:inline-block;padding:10px 4px}
@media (max-width:720px){.ent-credit{left:var(--gut);right:auto;bottom:var(--s2)}}
.ent-k{color:#fff} /* white: worst frame 4.62:1 under the .6 tint */
/* form errors: words first, colour second (F6) */
.form .ferr{display:block;margin-top:6px;font-size:14.5px;font-weight:600;text-transform:none;letter-spacing:0;color:#9E2A17}
.form .ferr[hidden]{display:none}
.form [aria-invalid="true"]{border-color:#9E2A17;border-width:2px}
.form label{text-transform:none;letter-spacing:.01em}

/* Client media, 2026-10-22: clips in tiles, films with sound, a lodge gallery, and a photo above the footer */
.vloop{position:relative;width:100%;height:100%;background:var(--stone)}
.vloop video{display:block;width:100%;height:100%;object-fit:cover}
.vl-pause{position:absolute;right:10px;bottom:10px;display:grid;place-items:center;width:44px;height:44px;border:1.5px solid rgba(255,255,255,.85);border-radius:50%;background:rgba(30,25,21,.55);color:#fff;cursor:pointer}
.vl-pause[hidden]{display:none}
.vl-pause svg{width:14px;height:14px;fill:currentColor}
.vl-pause:hover{background:rgba(30,25,21,.8)}
.film{display:grid;gap:var(--gap);align-items:stretch}
.film.with-clips{grid-template-columns:minmax(0,16fr) minmax(0,5fr) minmax(0,5fr)}
.film-main{margin:0;border-radius:var(--r);overflow:hidden;background:#000}
.film-main video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.film-clip{border-radius:var(--r);overflow:hidden}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,16vw,220px);gap:var(--gap)}
.gallery figure{margin:0;border-radius:var(--r);overflow:hidden}
.gallery figure:first-child{grid-column:span 2;grid-row:span 2}
.gallery img{width:100%;height:100%;object-fit:cover}
/* 26 Oct 2026 feedback: keep the low-resolution lodge clips portrait and below their native width. */
.gallery .gallery-clip{grid-row:span 2;align-self:center;justify-self:center;width:min(100%,356px,calc((clamp(150px,16vw,220px) * 2 + var(--gap)) * .55625));aspect-ratio:356/640}
.horizon-photo{margin-top:var(--s8);line-height:0}
.horizon-photo img{display:block;width:100%;height:clamp(200px,30vw,440px);object-fit:cover}
.horizon-photo+footer{margin-top:0}
@media (max-width:900px){
  .film.with-clips{grid-template-columns:1fr 1fr}
  .film.with-clips .film-main{grid-column:1/-1}
  .film-clip{aspect-ratio:9/14}
  .gallery{grid-template-columns:repeat(2,1fr)}
}
/* Nine services since chartered flights and corporate travel were added (2026-10-23): three rows of three. On phones (two columns) Tours, the lead, takes a full row so the rows fill */
@media (min-width:721px){.services{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.services{grid-auto-flow:row dense}.svc.lead{grid-column:span 2}}

/* ---------- 2026-10-23: a traditional header and a conventional home (client: "normal", "traditional") ----------
   Header in two tiers after her reference ura.go.ug: a white row (logo, quick links, Book now), then a green bar
   with the menu. The header is sticky at minus the white row, so only the bar stays on screen. */
header.tiers{position:sticky;top:-88px;z-index:20;background:var(--white);color:var(--ink);border-bottom:0;animation:none}
.t1{display:flex;align-items:center;gap:var(--s5);height:88px}
.t1 .logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.t1 .logo .ic{height:56px;width:auto}.t1 .logo .wm{height:30px;width:auto}
.util{margin-left:auto;display:flex;align-items:center;gap:var(--s5)}
.quick{display:flex;align-items:center;font-size:15px;color:var(--muted)}
.quick a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-left:1px solid var(--line);white-space:nowrap}
.quick a:first-child{border-left:0}
.quick a:hover,.quick a[aria-current]{color:var(--forest)}
.util .btn{min-height:46px;padding:0 22px;font-size:16px}
.t1-call{display:none}
.bar{background:var(--forest);color:#fff}
.bar .wrap{display:flex;align-items:center;min-height:54px}
.bar nav{display:flex;align-items:center;font-weight:600;font-size:16px}
.bar nav a{position:relative;display:inline-flex;align-items:center;min-height:54px;padding:0 15px;white-space:nowrap;color:#fff}
.bar nav a:first-child{margin-left:-15px}
.bar nav a+a:before{content:"";position:absolute;left:0;top:19px;bottom:19px;width:1px;background:rgba(255,255,255,.35)}
.bar nav a:hover{background:rgba(255,255,255,.12)}
.bar nav a[aria-current]{box-shadow:inset 0 -3px 0 #fff}
.bar nav a:focus-visible,.bar .menu:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.bar .menu{display:none}
@media (max-width:1100px){
  header.tiers{top:-72px}
  .t1{height:72px}
  .t1 .logo .ic{height:44px}.t1 .logo .wm{height:24px}
  .util{display:none}
  .t1-call{display:grid;place-items:center;margin-left:auto;width:44px;height:44px;border-radius:50%;background:var(--mist);color:var(--forest)}
  .t1-call svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .bar nav{display:none}
  .bar .wrap{min-height:52px}
  .bar .menu,header.tiers.open .menu{display:inline-flex;align-items:center;gap:8px;margin-left:auto;min-height:52px;padding:0 4px;border:0;background:none;color:#fff;font:600 16px "Source Sans 3",system-ui,sans-serif}
}
@media (max-width:374px){.t1 .logo .wm{height:20px}}

/* Home hero: under the header, centred, two buttons */
.home .entrance{height:calc(100vh - 142px);height:calc(100svh - 142px);min-height:520px;max-height:820px;align-items:center}
.home .ent-in{display:block;padding-top:var(--s7);padding-bottom:var(--s8);text-align:center}
.home .ent-h,.home .ent-desc{margin-left:auto;margin-right:auto}
.home .ent-desc{max-width:620px;font-size:20px}
.ent-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3)}
.ent-cta2{padding:15px 26px;font-size:16px;border:1.5px solid #fff;background:transparent;color:#fff}
.ent-cta2:hover{background:rgba(255,255,255,.14)}
@media (max-width:720px){
  .home .entrance{height:calc(100svh - 124px);min-height:500px;max-height:720px}
  .home .ent-in{padding-top:var(--s6);padding-bottom:96px} /* clear of the WhatsApp button */
  .home .ent-h{font-size:clamp(30px,8.6vw,36px);margin-bottom:var(--s4)}
  .home .ent-desc{font-size:16.5px;line-height:1.55;margin-bottom:var(--s5)}
  .ent-btns .btn{flex:1 1 100%;justify-content:center}
  .ent-pause{bottom:var(--s3)}
}

/* Home sections: centred headings, plain cards */
.home main .sh{display:block;text-align:center;max-width:760px;margin-left:auto;margin-right:auto}
.home main .sh h2{max-width:none}
.home main .sh p{max-width:640px;margin:var(--s3) auto 0}
.home main .row-more{text-align:center}
.home .svc .n{display:none}