/* Web Design Studio: base.css
   Tokens + reset + vipengele vya msingi. Badilisha TOKENS tu kwa project mpya (rangi, font, radius).
   Kanuni: responsive, kitufe kimoja (.btn), hakuna glass/blur, white mode tu. */

/* ===== TOKENS (badilisha hapa) ===== */
/* Arusha Wild Life Safaris.
   Brand = kijani cha nembo (--brand). Neutrals zina kijani kidogo ndani yake (si kijivu cha kawaida).
   --soil = udongo mwekundu wa Arusha: hutumika kwa kiashiria kidogo cha menyu tu. */
:root{
  color-scheme:light;
  --bg:#FFFFFF; --bg-2:#F3F2EB; --bg-3:#E6E5D9;
  --ink:#141E10; --ink-2:#4A5446; --ink-3:#6F796A;
  --brand:#1E4812; --brand-h:#143409; --brand-ink:#1E4812; --on-brand:#FFFFFF;
  --soil:#B4532A; --accent-ink:#8F3E1C;
  --line:rgba(20,30,16,.12); --line-strong:rgba(20,30,16,.28);
  --head-bg:#FFFFFF;
  --deep:#0F1A0B;                                        /* giza la CTA band, haibadiliki kwa mode */
  --font:"Figtree","Segoe UI",system-ui,sans-serif;
  --font-d:"Bricolage Grotesque","Figtree","Segoe UI",system-ui,sans-serif;
  --r:22px; --r-card:4px; --r-in:16px; --r-s:12px; --max:1240px;
  --ease-out:cubic-bezier(.2,.8,.2,1); --ease-io:cubic-bezier(.65,0,.35,1);
}

/* ===== RESET ===== */
*{box-sizing:border-box}
html,body{margin:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:90px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3{font-family:var(--font-d);font-weight:700;letter-spacing:-.025em;line-height:1.06;text-wrap:balance}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:999px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}

/* ===== LAYOUT ===== */
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.sec{padding-block:96px}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px 40px;margin-bottom:40px}
.sec-head h2{font-size:clamp(2rem,4.4vw,3.4rem)}
.sec-head p{color:var(--ink-2);font-size:1.06rem;max-width:56ch}
.alt{background:var(--bg-2)}
.link{font-weight:600;text-decoration:none;display:inline-flex;gap:8px;align-items:center;border-bottom:1.5px solid currentColor;padding-bottom:2px}

/* ===== KITUFE KIMOJA: njia (track) + kidonge (.bl) + mshale (.ar) ===== */
.btn{--trk:var(--bg-3);--pill:var(--brand);--pill-h:var(--brand-h);--pill-t:var(--on-brand);--h:48px;
  position:relative;display:inline-flex;align-items:center;gap:5px;padding:5px;border-radius:999px;background:var(--trk);color:var(--pill-t);
  font-size:1rem;font-weight:600;line-height:1;text-decoration:none;border:0;cursor:pointer;vertical-align:middle;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);transition:transform .25s var(--ease-out)}
/* kidonge cha maandishi */
.btn .bl{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;height:var(--h);padding:0 30px;border-radius:999px;
  background:var(--pill);color:var(--pill-t);white-space:nowrap;overflow:hidden;transition:background-color .35s}
/* maandishi yanapanda na kubadilishana: nakala ya pili inaingia kutoka chini */
.btn .tx{position:relative;display:block;height:1.25em;line-height:1.25em;overflow:hidden}
.btn .tx>span{display:block;transition:transform .55s var(--ease-out)}
.btn .tx>span+span{position:absolute;left:0;right:0;top:100%;text-align:center}
.btn:hover .tx>span{transform:translateY(-100%)}
/* duara la mshale: mshale unatoka juu-kulia, mwingine unaingia kutoka chini-kushoto */
.btn .ar{position:relative;flex:none;width:var(--h);height:var(--h);border-radius:50%;background:var(--pill);color:var(--pill-t);overflow:hidden;display:block;transition:background-color .35s,transform .55s var(--ease-out)}
.btn .ar svg{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;transition:transform .55s var(--ease-out)}
.btn .ar svg+svg{transform:translate(-170%,170%)}
.btn:hover .ar svg:first-child{transform:translate(170%,-170%)}
.btn:hover .ar svg+svg{transform:none}
.btn:hover .bl,.btn:hover .ar{background:var(--pill-h)}
.btn:hover .ar{transform:scale(1.05)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.btn--light{--pill:#fff;--pill-h:#ECEBE3;--pill-t:#141E10}
.btn--wa{--pill:#25D366;--pill-h:#1FB858;--pill-t:#0B2E17}
.btn.block{display:flex;width:100%}
.btn.noarrow .bl{padding:0 34px}
/* kwenye picha/giza: njia nusu-uwazi */
.on-dark .btn,.hero .btn,.cta-band .btn{--trk:rgba(255,255,255,.22)}

/* ===== CHIPS / TABS (duara kamili) ===== */
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:transparent;cursor:pointer;font-weight:600;font-size:.92rem;transition:background .2s,color .2s}
.chip:hover{background:var(--bg-2)}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* ===== HEADER ===== */
.head{position:fixed;top:0;left:0;right:0;z-index:50;color:#fff;padding-top:env(safe-area-inset-top,0px);transition:background .35s,color .35s,box-shadow .35s}
.head .navrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;height:84px;transition:height .35s}
.head.solid{background:var(--head-bg);color:var(--ink);box-shadow:0 1px 0 var(--line),0 12px 30px -22px rgba(0,0,0,.45)}
.head.solid .navrow{height:70px}
.nav{justify-self:center;display:flex;gap:28px}
.nav a{text-decoration:none;font-weight:600;position:relative;padding:6px 0}
.nav a.on::after{content:"";position:absolute;left:50%;bottom:-3px;width:6px;height:6px;border-radius:50%;transform:translateX(-50%);background:var(--soil)}
body.has-hero{padding-top:0}
body:not(.has-hero) main{padding-top:84px}

/* ===== HERO NDOGO ===== */
.hero{position:relative;display:grid;place-items:center;text-align:center;color:#fff;min-height:clamp(300px,46svh,520px);padding:120px 20px 64px;isolation:isolate;overflow:hidden;background:#12220C}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.5))}
.hero h1{font-size:clamp(2.2rem,5.6vw,4.2rem);max-width:18ch;margin-inline:auto}
.hero p{margin:16px auto 28px;max-width:52ch;opacity:.92;font-size:1.1rem}

/* ===== KADI (3 / 2 / 1): pembe za mraba, kadi nzima ni kiungo ===== */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.card{position:relative;display:grid;align-content:start;gap:14px;padding:20px;background:var(--bg);border-radius:var(--r-card);box-shadow:0 0 0 1px var(--line),0 36px 60px -46px rgba(0,0,0,.4);transition:box-shadow .3s}
.card:hover{box-shadow:0 0 0 2px var(--line-strong),0 36px 60px -46px rgba(0,0,0,.4)}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.card h3{font-size:1.6rem;margin-top:6px}
.card p{color:var(--ink-3);line-height:1.45;font-size:1.02rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .ph-photo,.card .im{aspect-ratio:4/3.1;border-radius:2px;margin-top:4px;overflow:hidden}
.card .im img{width:100%;height:100%;object-fit:cover}
.cover::after{content:"";position:absolute;inset:0;z-index:2}
.tag{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:.82rem;font-weight:600;white-space:nowrap}
.seg{display:inline-flex;align-items:center;height:34px;border-radius:999px;background:var(--ink);padding:3px;font-size:.76rem;font-weight:600;letter-spacing:.02em;color:var(--bg)}
.seg span{padding:0 10px}
.seg b{display:grid;place-items:center;height:100%;padding:0 13px;border-radius:999px;background:var(--bg);color:var(--ink);font-weight:700}
/* kishikilia-picha (hadi picha halisi zifike) */
.ph-photo{position:relative;background:#1E3A14;color:#fff}
.ph-photo::before{content:"Photo to come";position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);font-size:.85rem;opacity:.55}
.ph-photo::after,.card .im::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,0) 45%,rgba(0,0,0,.5))}
.card .im{position:relative}
.loc{position:absolute;z-index:1;left:18px;bottom:16px;display:flex;gap:8px;align-items:flex-start;color:#fff;line-height:1.25}
.loc svg{margin-top:3px;flex:none}
.loc b{display:block;font-weight:600;font-size:1.05rem}
.loc small{display:block;font-size:1rem;opacity:.92}

/* ===== FOMU ===== */
.field{display:grid;gap:6px}
.field label{font-weight:600;font-size:.92rem}
.field input,.field select,.field textarea{height:52px;padding:0 16px;border-radius:var(--r-in);border:1px solid var(--line);background:var(--bg);width:100%;transition:border-color .2s,box-shadow .2s}
.field textarea{height:auto;min-height:130px;padding:14px 16px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.field .bad,input.bad{border-color:#C0392B}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}

/* custom select popover (JS: csOpen) */
select.cs{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A7C6E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:18px;padding-right:44px}
.cs-pop{position:fixed;z-index:200;max-height:300px;overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-in);box-shadow:0 24px 50px -20px rgba(0,0,0,.4);padding:6px}
.cs-pop [role=option]{padding:10px 14px;border-radius:10px;cursor:pointer}
.cs-pop [role=option].act,.cs-pop [role=option]:hover{background:var(--bg-2)}
.cs-pop [aria-selected=true]{font-weight:700;color:var(--brand-ink)}

/* typed date */
.dtin{display:inline-flex;align-items:center;gap:6px}
.dtin-box{width:58px;height:52px;text-align:center;border-radius:var(--r-in);border:1px solid var(--line);background:var(--bg)}
.dtin-box.y{width:84px}
.dtin-box:focus{outline:0;border-color:var(--brand)}

/* ===== CTA BAND (pekee inaweza kubaki giza) ===== */
.cta-band{background:var(--deep);color:#fff;text-align:center;padding-block:80px}
.cta-band .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px}

/* ===== FAB WHATSAPP ===== */
.fab{position:fixed;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:40;width:58px;height:58px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(0,0,0,.4);transition:opacity .25s,transform .25s}
.fab svg{width:28px;height:28px}
.fab.off{opacity:0;transform:scale(.85);pointer-events:none}

/* ===== DOCK YA SIMU ===== */
.mbar{display:none}

/* ===== SKELETON ===== */
.sk{position:fixed;inset:0;z-index:100;background:var(--bg);transition:opacity .35s}
.sk.done{opacity:0;pointer-events:none}
.sk-hero{height:clamp(300px,52svh,560px);background:var(--bg-2);border-radius:0 0 var(--r) var(--r)}
.sk-l{display:block;height:20px;border-radius:999px;background:var(--bg-2);margin:18px 20px}
.sk-hero,.sk-l{background-image:linear-gradient(90deg,transparent,rgba(127,127,127,.12),transparent);background-size:200% 100%;animation:skm 1.4s linear infinite}
@keyframes skm{to{background-position:-200% 0}}

/* ===== REVEAL (maudhui yanaonekana; yanapanda mara moja) ===== */
.rv-up{transition:transform .9s var(--ease-out)}
.rv-up.pre{transform:translateY(28px)}

/* ===== MARQUEE ===== */
.mq{overflow:hidden}
.mq-track{display:flex;gap:16px;width:max-content;animation:gmL 70s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
@keyframes gmL{to{transform:translateX(-50%)}}
@keyframes gmR{from{transform:translateX(-50%)}to{transform:none}}

/* ===== RESPONSIVE ===== */
@media (max-width:1020px){
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav{display:none}
  .sec{padding-block:72px}
}
@media (max-width:640px){
  .grid3{grid-template-columns:1fr}
  .sec{padding-block:56px}
  .head .navrow{height:64px}
  .mbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:45;background:var(--bg);border-radius:999px;box-shadow:0 0 0 1px var(--line),0 18px 40px -16px rgba(0,0,0,.4);padding:6px}
  .mbar a{display:grid;place-items:center;gap:2px;padding:8px 0;border-radius:999px;text-decoration:none;font-size:.7rem;font-weight:600;color:var(--ink-2)}
  .mbar a.on{background:var(--bg-2);color:var(--brand-ink)}
  .mbar svg{width:22px;height:22px}
  .fab{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  .btn{--h:46px}
  .btn .bl{padding:0 24px}
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .rv-up.pre{transform:none}
}