/* =====================================================================
   Epic Horizon Safaris - core stylesheet
   Palette taken from the brand flyers: clay red, ember amber, sand.
   ===================================================================== */

:root{
  --clay:#9E2B1E;
  --clay-deep:#5C1710;
  --clay-dark:#3A0E09;
  --ember:#F2A03D;
  --ember-bright:#FFC163;
  --ember-deep:#D9791B;
  --sand:#FFFFFF;
  --sand-2:#F4F5F6;
  --sand-3:#FAFAFA;
  --ink:#17181A;
  --ink-soft:#5C6166;
  --line:rgba(0,0,0,.11);
  --white:#fff;
  --night:#17181A;
  --topbar:0px;   /* the top services ticker was removed; set back to 34px if it returns */

  --shell:min(1240px, 92vw);
  --r-sm:2px;
  --r-md:2px;
  --r-lg:2px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --shadow-sm:0 6px 20px rgba(0,0,0,.07);
  --shadow-md:0 18px 46px rgba(0,0,0,.10);
  --shadow-lg:0 30px 70px rgba(0,0,0,.16);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Outfit',"Segoe UI",system-ui,sans-serif;
  font-weight:400;
  font-size:clamp(15.5px,.55vw + 14px,17px);
  line-height:1.65;
  color:var(--ink);
  background:var(--sand);
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
ul{margin:0;padding:0;list-style:none}

h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.05;letter-spacing:-.025em}
h1{font-size:clamp(2.9rem,7.4vw,5.6rem);font-weight:800;line-height:1.07}
h2{font-size:clamp(2.1rem,4.4vw,3.55rem)}
h3{font-size:clamp(1.25rem,1.9vw,1.6rem)}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}

.shell{width:var(--shell);margin-inline:auto}
.section{padding:clamp(72px,9vw,132px) 0;position:relative}
.section--tight{padding:clamp(52px,6vw,86px) 0}

/* ---------- shared bits ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.72rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase;
  color:var(--clay);margin-bottom:1.1rem;
}
.eyebrow::before{content:"";width:34px;height:2px;background:linear-gradient(90deg,var(--clay),var(--ember));border-radius:2px}
.eyebrow--light{color:var(--ember-bright)}
.eyebrow--light::before{background:linear-gradient(90deg,var(--ember),transparent)}

.lead{font-size:clamp(1.02rem,1.25vw,1.22rem);color:var(--ink-soft);font-weight:300;max-width:62ch}
.lead--light{color:rgba(255,255,255,.78)}

.accent{color:var(--ember-deep)}
.accent-light{color:var(--ember-bright)}

.section-head{max-width:760px;margin-bottom:clamp(38px,4.4vw,64px)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--center .eyebrow{justify-content:center}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--clay); --fg:#fff;
  position:relative;display:inline-flex;align-items:center;gap:.7rem;
  padding:1rem 1.75rem;border:0;border-radius:2px;cursor:pointer;
  background:var(--bg);color:var(--fg);
  font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  overflow:hidden;isolation:isolate;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), color .35s;
  box-shadow:0 10px 26px rgba(158,43,30,.22);
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,var(--ember-deep),var(--ember-bright));
  transform:translateY(102%);transition:transform .5s var(--ease-out);
}
.btn:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(158,43,30,.3);color:var(--clay-dark)}
.btn:hover::after{transform:translateY(0)}
.btn svg{width:16px;height:16px;flex:none}
.btn--ember{--bg:linear-gradient(120deg,var(--ember-deep),var(--ember));--fg:var(--clay-dark);box-shadow:0 12px 30px rgba(217,121,27,.3)}
.btn--ember::after{background:var(--clay)}
.btn--ember:hover{color:#fff}
.btn--ghost{--bg:transparent;--fg:var(--clay);box-shadow:none;border:1.5px solid var(--line)}
.btn--ghost::after{background:var(--clay)}
.btn--ghost:hover{color:#fff;box-shadow:0 14px 30px rgba(158,43,30,.2)}
.btn--ghost-light{--bg:transparent;--fg:#fff;box-shadow:none;border:1.5px solid rgba(255,255,255,.3)}
.btn--ghost-light::after{background:var(--sand)}
.btn--ghost-light:hover{color:var(--clay-dark)}
.btn--sm{padding:.78rem 1.3rem;font-size:.72rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.hero .btn-row{margin-top:1.15rem}

.link-arrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);
}
.link-arrow svg{width:15px;height:15px;transition:transform .4s var(--ease-out)}
.link-arrow:hover svg{transform:translateX(6px)}

/* ---------- preloader ---------- */
#loader{
  position:fixed;inset:0;z-index:999;display:grid;place-items:center;
  background:var(--night);
  transition:opacity .6s var(--ease), visibility .6s;
}
#loader.done{opacity:0;visibility:hidden}
.loader-mark{text-align:center}
.loader-mark span{
  display:block;font-size:.7rem;letter-spacing:.5em;text-transform:uppercase;
  color:var(--ember);margin-bottom:1rem;
}
.loader-bar{width:180px;height:2px;background:rgba(255,255,255,.16);overflow:hidden;border-radius:2px}
.loader-bar i{display:block;height:100%;width:40%;background:linear-gradient(90deg,var(--ember),var(--ember-bright));animation:load 1s var(--ease) infinite}
@keyframes load{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}

/* ---------- header ---------- */
.site-header{
  position:fixed;top:var(--topbar);left:0;right:0;z-index:120;
  padding:1.15rem 0;
  transition:background .45s var(--ease), padding .45s var(--ease),
             box-shadow .45s var(--ease), top .45s var(--ease);
}
.site-header.is-stuck{top:0}
.site-header.is-stuck{
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  padding:.6rem 0;box-shadow:0 8px 30px rgba(0,0,0,.07);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.brand{display:flex;align-items:center;gap:.7rem}
.brand img{height:58px;width:auto;transition:height .45s var(--ease),filter .45s var(--ease)}
.site-header.is-stuck .brand img{height:48px}
.brand-chip{
  display:none;padding-left:.9rem;border-left:1px solid var(--line);line-height:1.15;
}
.brand-chip b{display:block;font-size:.66rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--clay)}
.brand-chip i{font-style:normal;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}

.nav{display:flex;align-items:center;gap:.25rem}
.nav a{
  position:relative;padding:.5rem .7rem;border-radius:2px;
  font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--clay-deep);
  transition:color .3s;
}
.nav a::after{
  content:"";position:absolute;left:.7rem;right:.7rem;bottom:.24rem;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--clay),var(--ember));
  transform:scaleX(0);transform-origin:left;transition:transform .42s var(--ease-out);
}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}
.nav a.active{color:var(--clay)}
.header-cta{display:flex;align-items:center;gap:.6rem}
.header-phone{display:none;align-items:center;gap:.5rem;font-weight:600;font-size:.86rem;color:var(--clay-deep)}
.header-phone svg{width:15px;height:15px;color:var(--ember-deep)}

.burger{
  display:none;align-items:center;justify-content:flex-end;
  height:46px;padding:0 13px 0 42px;border-radius:2px;border:1.5px solid var(--line);
  background:rgba(255,255,255,.75);cursor:pointer;position:relative;z-index:130;
}
.burger-label{
  font-style:normal;font-size:.68rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--clay-deep);transition:color .3s;
}
body.nav-open .burger-label{color:var(--sand)}
.burger span{
  position:absolute;left:12px;width:20px;height:2px;border-radius:2px;background:var(--clay-deep);
  transition:transform .4s var(--ease-out), opacity .3s, background .3s;
}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:22px}
.burger span:nth-child(3){top:28px}
body.nav-open .burger{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.08)}
body.nav-open .burger span{background:var(--sand)}
body.nav-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:110;background:var(--night);
  display:flex;flex-direction:column;justify-content:center;padding:6rem 8vw 3rem;
  clip-path:circle(0% at calc(100% - 46px) 46px);
  transition:clip-path .7s var(--ease-out), visibility .7s;
  visibility:hidden;overflow-y:auto;
}
body.nav-open .drawer{clip-path:circle(150% at calc(100% - 46px) 46px);visibility:visible}
.drawer a{
  display:block;padding:.4rem 0;font-size:clamp(1.5rem,6.5vw,2.2rem);font-weight:600;letter-spacing:-.02em;
  color:var(--sand);opacity:0;transform:translateY(22px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}
body.nav-open .drawer a{opacity:1;transform:none}
.drawer a:hover,.drawer a.active{color:var(--ember)}
.drawer-foot{margin-top:2rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.7);font-size:.9rem}
.drawer-foot a{font-size:.98rem;font-weight:500;color:var(--ember-bright);display:inline;opacity:1;transform:none;padding:0}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:9rem 0 6rem;overflow:hidden;
  background:#fff;color:var(--ink);
}
.hero-art{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-art > svg{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:150%;min-width:1100px;height:auto}
.sun{transform-origin:center;animation:sunrise 2.4s var(--ease-out) .3s backwards}
@keyframes sunrise{from{transform:translateY(120px) scale(.7);opacity:0}to{transform:none;opacity:1}}
.sun-glow{animation:glow 7s ease-in-out 2s infinite}
@keyframes glow{0%,100%{opacity:.55}50%{opacity:.85}}
.ridge{animation:rise 1.5s var(--ease-out) backwards}
.ridge-1{animation-delay:.5s}.ridge-2{animation-delay:.68s}.ridge-3{animation-delay:.86s}
@keyframes rise{from{opacity:0;transform:translateY(52px)}to{opacity:1;transform:none}}
.birds{animation:fly 26s linear infinite;opacity:.5}
@keyframes fly{from{transform:translateX(-18%)}to{transform:translateX(118%)}}

.hero-grain{
  position:absolute;inset:0;pointer-events:none;opacity:.22;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px);
  background-size:4px 4px;
}
.hero-inner{position:relative;z-index:3;width:var(--shell);margin-inline:auto}
.hero-copy{max-width:830px}
.hero h1{margin-bottom:.7rem;font-size:clamp(2.45rem,4.7vw,4rem)}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.06em}
.hero h1 .line > span{display:block;animation:slideUp 1s var(--ease-out) backwards}
.hero h1 .line:nth-child(1) > span{animation-delay:.35s}
.hero h1 .line:nth-child(2) > span{animation-delay:.48s}
.hero h1 .line:nth-child(3) > span{animation-delay:.61s}
@keyframes slideUp{from{transform:translateY(105%)}to{transform:none}}
.hero .lead{max-width:56ch}
.hero-fade{animation:fadeUp .9s var(--ease-out) 1s backwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

.hero-stats{
  display:flex;flex-wrap:wrap;gap:clamp(1.4rem,4vw,3.4rem);margin-top:3rem;
  padding-top:1.8rem;border-top:1px solid rgba(255,255,255,.2);
}
.hero-stats div b{display:block;font-size:clamp(1.7rem,3vw,2.3rem);font-weight:700;color:var(--ember-bright);line-height:1}
.hero-stats div span{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.68)}

.scroll-hint{
  position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.6);
}
.scroll-hint i{display:block;width:1px;height:42px;background:linear-gradient(var(--ember),transparent);animation:drop 2.2s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* page hero (inner pages) */
.page-hero{
  position:relative;padding:8.6rem 0 clamp(34px,4.4vw,60px);overflow:hidden;
  display:flex;flex-direction:column;
  color:var(--ink);
  background-image:radial-gradient(58% 72% at 88% 4%, rgba(158,43,30,.14), transparent 70%),
                   linear-gradient(180deg,#FBF6F3 0%,#FFFFFF 50%);
  background-repeat:no-repeat;background-position:center;background-size:cover;
  border-bottom:5px solid transparent;
  border-image:linear-gradient(90deg,var(--clay),var(--ember)) 1;
}
.page-hero::after{
  content:"";position:absolute;right:-10%;top:-34%;width:56vw;height:56vw;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,rgba(242,160,61,.16),transparent 64%);
  animation:float 14s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(-3%,4%)}}
.page-hero .shell{position:relative;z-index:2}
.page-hero h1{font-size:clamp(2.5rem,6vw,4.5rem);margin-bottom:1rem}
.crumbs{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:1.4rem}
.crumbs a:hover{color:var(--ember-bright)}

/* ---------- marquee ---------- */

.marquee{
  background:var(--night);color:var(--sand);padding:.95rem 0;overflow:hidden;
  border-block:1px solid rgba(242,160,61,.22);
}
/* the top bar: sits above the header and scrolls away with the page */
.marquee--top{
  position:relative;z-index:124;height:var(--topbar);padding:0;
  display:flex;align-items:center;border-top:0;
}
.marquee--top .marquee-track span{font-size:.68rem;letter-spacing:.24em}
.marquee-track{display:flex;width:max-content;animation:scroll-x 34s linear infinite}
.marquee-track span{
  display:inline-flex;align-items:center;gap:1.6rem;padding-right:1.6rem;
  font-size:.8rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;white-space:nowrap;
}
.marquee-track span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--ember);flex:none}
@keyframes scroll-x{to{transform:translateX(-50%)}}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .85s var(--ease-out), transform .85s var(--ease-out)}
[data-reveal].in{opacity:1;transform:none}
[data-d="1"]{transition-delay:.09s}
[data-d="2"]{transition-delay:.18s}
[data-d="3"]{transition-delay:.27s}
[data-d="4"]{transition-delay:.36s}
[data-d="5"]{transition-delay:.45s}

/* ---------- cards / grids ---------- */
.grid{display:grid;gap:clamp(18px,2vw,26px)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{
  position:relative;background:var(--white);border:1px solid var(--line);border-radius:2px;box-shadow:0 2px 10px rgba(0,0,0,.04);
  padding:clamp(1.5rem,2.4vw,2.1rem);overflow:hidden;
  transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .4s;
}
.card::before{
  content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--clay),var(--ember));
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease-out);
}
.card:hover{transform:translateY(-7px);box-shadow:var(--shadow-md);border-color:transparent}
.card:hover::before{transform:scaleX(1)}
.card h3{margin-bottom:.6rem}
.card p{color:var(--ink-soft);font-weight:300;font-size:.96rem}
.card-no{font-size:.7rem;font-weight:600;letter-spacing:.24em;color:var(--ember-deep);display:block;margin-bottom:1.1rem}
.card-icon{
  width:52px;height:52px;border-radius:2px;display:grid;place-items:center;margin-bottom:1.2rem;
  background:linear-gradient(140deg,rgba(242,160,61,.14),rgba(242,160,61,.26));color:var(--clay);
  transition:transform .5s var(--ease-out), background .4s, color .4s;
}
.card-icon svg{width:24px;height:24px}
.card:hover .card-icon{transform:rotate(-6deg) scale(1.06);background:linear-gradient(140deg,var(--clay),var(--ember-deep));color:#fff}
.card-list{margin-top:1rem;display:grid;gap:.45rem}
.card-list li{position:relative;padding-left:1.1rem;font-size:.9rem;color:var(--ink-soft);font-weight:300}
.card-list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:2px;background:var(--ember)}

/* split feature */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
.split--reverse .split-media{order:2}

.frame{
  position:relative;border-radius:2px;overflow:hidden;
  background:linear-gradient(165deg,#6E1B11,#9E2B1E 55%,#D9791B);
  aspect-ratio:4/3.1;box-shadow:var(--shadow-lg);
}
.frame svg{position:absolute;inset:0;width:100%;height:100%}
.frame-badge{
  position:absolute;left:1.3rem;bottom:1.3rem;z-index:2;
  background:rgba(255,255,255,.94);border-radius:2px;padding:.8rem 1.15rem;box-shadow:var(--shadow-sm);
}
.frame-badge b{display:block;font-size:1.3rem;color:var(--clay);line-height:1.1}
.frame-badge span{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- fleet ---------- */
.fleet-card{
  position:relative;background:var(--white);border:1px solid var(--line);border-radius:2px;box-shadow:0 2px 10px rgba(0,0,0,.04);
  padding:2rem 1.7rem 1.7rem;overflow:hidden;
  transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out);
}
.fleet-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md)}
.fleet-card .seat{
  position:absolute;top:calc(2rem + 10px);right:calc(1.7rem + 10px);z-index:2;
  font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:var(--clay);padding:.35rem .7rem;border-radius:2px;
}
.fleet-photo{
  position:relative;margin:0 0 1.3rem;overflow:hidden;background:#fff;
  border:1px solid var(--line);aspect-ratio:16/10;
}
.fleet-photo img{width:100%;height:100%;object-fit:contain;object-position:center;transition:transform .8s var(--ease-out)}
.fleet-card:hover .fleet-photo img{transform:scale(1.05)}
.fleet-art{height:108px;margin:.6rem 0 1.2rem;position:relative}
.fleet-art svg{width:100%;height:100%;overflow:visible;transition:transform .6s var(--ease-out)}
.fleet-card:hover .fleet-art svg{transform:translateX(8px)}
.fleet-specs{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.1rem}
.fleet-specs li{
  font-size:.72rem;letter-spacing:.06em;padding:.35rem .7rem;border-radius:2px;
  background:var(--sand-2);color:var(--ink);
}

/* ---------- rate table ---------- */
.rate-wrap{overflow-x:auto;border-radius:2px;border:1px solid var(--line);background:var(--white);box-shadow:var(--shadow-sm);color:var(--ink)}
table.rates{width:100%;border-collapse:collapse;min-width:620px;color:var(--ink);background:var(--white)}
table.rates th,table.rates td{padding:1rem 1.25rem;text-align:left;font-size:.95rem}
table.rates thead th{background:var(--clay);color:var(--sand);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
table.rates thead th:not(:first-child){text-align:right}
table.rates td:not(:first-child){text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
table.rates tbody tr{border-top:1px solid var(--line);transition:background .3s}
table.rates tbody tr:nth-child(odd){background:var(--sand-3)}
table.rates tbody tr:hover{background:rgba(242,160,61,.18)}
table.rates td:first-child{font-weight:500}
/* two-row header: vehicle size spans its KSh + USD columns */
table.rates thead th[colspan]{text-align:center;border-left:1px solid rgba(255,255,255,.18)}
table.rates thead tr + tr th{text-align:right;padding-top:0}
table.rates thead tr + tr th:nth-child(odd){border-left:1px solid rgba(255,255,255,.18)}
table.rates td:nth-child(3),table.rates td:nth-child(5){color:var(--ink-soft);font-weight:500}
table.rates td:nth-child(4){border-left:1px solid var(--line)}
.rate-note{font-size:.85rem;color:var(--ink-soft);margin-top:1rem;font-weight:300}
.band .rate-note{color:rgba(255,255,255,.72)}

/* quote calculator */
.calc{
  background:linear-gradient(165deg,#5C1710,#7C2115 70%,#96291A);
  color:var(--sand);border-radius:2px;padding:clamp(1.8rem,3.4vw,2.8rem);box-shadow:var(--shadow-lg);
}
.calc h3{color:var(--sand);margin-bottom:.5rem}
.calc > p{color:rgba(255,255,255,.7);font-weight:300;font-size:.94rem;margin-bottom:1.6rem}
.calc label{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ember-bright);margin-bottom:.5rem}
.calc select,.calc input{
  width:100%;padding:.9rem 1rem;border-radius:2px;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.07);color:var(--sand);font-family:inherit;font-size:.96rem;
  appearance:none;margin-bottom:1.1rem;transition:border-color .3s,background .3s;
}
.calc select:focus,.calc input:focus{outline:none;border-color:var(--ember);background-color:rgba(255,255,255,.12)}
.calc select option{color:#241009}
.calc-out{
  margin-top:.4rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.18);
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.calc-out span{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.calc-out b{display:block;font-size:clamp(1.6rem,3.4vw,2.3rem);color:var(--ember-bright);line-height:1.15;font-weight:700}

/* ---------- tours list ---------- */
.tour-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(24px,4vw,64px)}
.tour-item{
  display:flex;align-items:baseline;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line);
  transition:padding-left .4s var(--ease-out),color .3s;
}
.tour-item:hover{padding-left:.7rem;color:var(--clay)}
.tour-item b{font-size:.76rem;font-weight:600;color:var(--ember-deep);min-width:2.2ch;font-variant-numeric:tabular-nums}
.tour-item span{font-size:1.01rem;font-weight:400}

/* ---------- steps ---------- */
.steps{counter-reset:step;display:grid;gap:clamp(16px,2vw,22px)}
.step{
  position:relative;display:flex;gap:1.3rem;padding:1.5rem 1.6rem;border-radius:2px;
  background:var(--white);border:1px solid var(--line);transition:transform .5s var(--ease-out),box-shadow .5s;
}
.step:hover{transform:translateX(6px);box-shadow:var(--shadow-sm)}
.step b{
  counter-increment:step;flex:none;width:46px;height:46px;border-radius:2px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--clay),var(--ember-deep));color:#fff;font-size:.95rem;font-weight:600;
}
.step b::before{content:"0" counter(step)}
.step h3{font-size:1.1rem;margin-bottom:.3rem}
.step p{font-size:.93rem;color:var(--ink-soft);font-weight:300}

/* ---------- dark band ---------- */
.band{background:var(--night);color:var(--sand);position:relative;overflow:hidden}
.band::before{
  content:"";position:absolute;left:-10%;bottom:-40%;width:50vw;height:50vw;border-radius:50%;
  background:radial-gradient(circle,rgba(242,160,61,.18),transparent 65%);
}
.band .shell{position:relative;z-index:2}
.band h2,.band h3,.band h4{color:var(--sand)}
.band .lead{color:rgba(255,255,255,.78)}
.band-card{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);border-radius:2px;
  padding:clamp(1.5rem,2.4vw,2rem);transition:background .4s,transform .5s var(--ease-out);
}
.band-card:hover{background:rgba(255,255,255,.1);transform:translateY(-6px)}
.band-card p{color:rgba(255,255,255,.72);font-weight:300;font-size:.95rem}
.band-card h3 small{font-size:.62em;font-weight:500;color:var(--ember-bright);white-space:nowrap}
.band-card .card-icon{background:rgba(242,160,61,.18);color:var(--ember-bright)}
.band-card:hover .card-icon{background:linear-gradient(140deg,var(--ember-deep),var(--ember));color:var(--clay-dark)}

/* ---------- testimonials ---------- */
.quote{
  background:var(--white);border:1px solid var(--line);border-radius:2px;padding:2rem 1.8rem;
  position:relative;transition:transform .5s var(--ease-out),box-shadow .5s;
}
.quote:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.quote::before{
  content:"\201C";position:absolute;top:.1rem;right:1.2rem;font-size:5rem;line-height:1;
  color:rgba(242,160,61,.3);font-weight:700;
}
.quote p{font-size:1rem;font-weight:300;color:var(--ink-soft);position:relative;z-index:1}
.quote footer{margin-top:1.3rem;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--clay)}
.stars{display:flex;gap:.2rem;margin-bottom:1rem;color:var(--ember-deep)}
.stars svg{width:15px;height:15px}

/* ---------- accordion ---------- */
.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-q{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.35rem 0;font-size:1.03rem;font-weight:500;color:var(--ink);transition:color .3s;
}
.acc-q:hover{color:var(--clay)}
.acc-q i{
  flex:none;width:28px;height:28px;border-radius:2px;border:1.5px solid var(--line);
  display:grid;place-items:center;position:relative;transition:background .35s,border-color .35s,transform .45s var(--ease-out);
}
.acc-q i::before,.acc-q i::after{content:"";position:absolute;background:var(--clay);border-radius:2px;transition:transform .4s var(--ease-out),background .3s}
.acc-q i::before{width:11px;height:1.7px}
.acc-q i::after{width:1.7px;height:11px}
.acc-item.open .acc-q i{background:var(--clay);border-color:var(--clay);transform:rotate(90deg)}
.acc-item.open .acc-q i::before,.acc-item.open .acc-q i::after{background:#fff}
.acc-item.open .acc-q i::after{transform:scaleY(0)}
.acc-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease-out)}
.acc-a p{padding-bottom:1.4rem;color:var(--ink-soft);font-weight:300;max-width:72ch}

/* ---------- forms ---------- */
.form-card{
  background:var(--white);border:1px solid var(--line);border-radius:2px;
  padding:clamp(1.7rem,3vw,2.6rem);box-shadow:var(--shadow-sm);
}
.field{margin-bottom:1.15rem}
.field label{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--clay);margin-bottom:.45rem;font-weight:600}
.field input,.field select,.field textarea{
  width:100%;padding:.92rem 1rem;border-radius:2px;border:1px solid var(--line);
  background:var(--sand-3);font-family:inherit;font-size:.98rem;color:var(--ink);
  transition:border-color .3s,box-shadow .3s,background .3s;appearance:none;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--ember);background-color:#fff;box-shadow:0 0 0 4px rgba(242,160,61,.16);
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.form-note{font-size:.82rem;color:var(--ink-soft);font-weight:300;margin-top:1rem}
.form-msg{
  display:none;margin-top:1.2rem;padding:1rem 1.2rem;border-radius:2px;
  background:rgba(242,160,61,.16);border:1px solid rgba(242,160,61,.4);color:var(--clay-deep);font-size:.92rem;
}
.form-msg.show{display:block;animation:fadeUp .5s var(--ease-out)}

/* contact tiles */
.contact-tile{
  display:flex;gap:1.1rem;align-items:flex-start;padding:1.4rem 1.5rem;border-radius:2px;
  background:var(--white);border:1px solid var(--line);transition:transform .5s var(--ease-out),box-shadow .5s;
}
.contact-tile:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm)}
.contact-tile .card-icon{width:44px;height:44px;margin:0;border-radius:2px;flex:none}
.contact-tile .card-icon svg{width:20px;height:20px}
.contact-tile h4{margin:0 0 .3rem;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--clay)}
.contact-tile p,.contact-tile a{font-size:.99rem;color:var(--ink);font-weight:400;display:block;margin:0}
.contact-tile a:hover{color:var(--clay)}

/* map */
.map-frame{
  border-radius:2px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);
  background:var(--sand-2);
}
.map-frame iframe{display:block;width:100%;height:380px;border:0;filter:saturate(.85) contrast(1.05)}

/* ---------- CTA band ---------- */
.cta{
  position:relative;overflow:hidden;color:var(--sand);text-align:center;
  background:linear-gradient(140deg,#7A1F12,#9E2B1E 48%,#D9791B);
  padding:clamp(66px,8vw,112px) 0;
}
.cta::before,.cta::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.14)}
.cta::before{width:520px;height:520px;top:-240px;left:-120px;animation:float 16s ease-in-out infinite}
.cta::after{width:400px;height:400px;bottom:-200px;right:-80px;animation:float 13s ease-in-out infinite reverse}
.cta .shell{position:relative;z-index:2}
.cta h2{margin-bottom:1rem;color:var(--sand)}
.cta .lead{margin-inline:auto;color:rgba(255,255,255,.8)}
.cta .btn-row{justify-content:center}

/* ---------- footer ---------- */
.site-footer{background:#131416;color:rgba(255,255,255,.72);padding:clamp(56px,6vw,84px) 0 0}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:clamp(26px,3vw,48px)}
.site-footer h4{color:var(--sand);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;margin:0 0 1.2rem;font-weight:600}
.site-footer a{font-size:.94rem;font-weight:300;transition:color .3s}
.site-footer a:hover{color:var(--ember-bright)}
.site-footer li{margin-bottom:.55rem}
.footer-brand img{height:104px;width:auto;filter:brightness(0) invert(1);opacity:.95;margin-bottom:1.3rem}
.footer-brand p{font-size:.94rem;font-weight:300;max-width:36ch}
.pay-box{
  margin-top:1.2rem;padding:1rem 1.2rem;border-radius:2px;border:1px solid rgba(242,160,61,.3);
  background:rgba(242,160,61,.08);font-size:.88rem;line-height:1.8;
}
.pay-box b{color:var(--ember-bright);letter-spacing:.04em}
.footer-bottom{
  margin-top:clamp(40px,5vw,64px);padding:1.4rem 0;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;font-size:.82rem;
}
.footer-tag{letter-spacing:.3em;text-transform:uppercase;font-size:.66rem;color:var(--ember)}

/* ---------- floating actions ---------- */
.float-actions{position:fixed;right:18px;bottom:18px;z-index:90;display:flex;flex-direction:column;gap:.6rem}
.fab{
  position:relative;width:54px;height:54px;border-radius:2px;display:grid;place-items:center;cursor:pointer;border:0;
  background:var(--clay);color:#fff;box-shadow:var(--shadow-md);
  transition:transform .45s var(--ease-out),background .35s,opacity .4s;
}
.fab:hover{transform:translateY(-4px) scale(1.05)}
.fab svg{width:25px;height:25px;position:relative;z-index:2}
.fab--wa{background:#1FAF54}
.fab--top{background:var(--night);opacity:0;pointer-events:none}
.fab--top.show{opacity:1;pointer-events:auto}
.fab--wa::after{
  content:"";position:absolute;inset:0;border-radius:2px;border:2px solid #1FAF54;
  animation:pulse 2.6s ease-out infinite;
}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.75);opacity:0}}

/* ---------- misc ---------- */
.badge-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.badge{
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;padding:.45rem .9rem;border-radius:2px;
  border:1px solid var(--line);color:var(--clay-deep);background:var(--white);
}
.band .badge{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:var(--sand)}
.divider{height:1px;background:var(--line);margin:clamp(40px,5vw,64px) 0}
.wifi-card{
  border-radius:2px;padding:1.4rem 1.5rem;background:linear-gradient(140deg,rgba(242,160,61,.14),rgba(242,160,61,.24));
  border:1px dashed rgba(158,43,30,.3);
}
.wifi-card b{color:var(--clay)}

/* ---------- responsive ---------- */
@media (min-width:560px){ .brand-chip{display:block} }
@media (min-width:1360px){ .header-phone{display:flex} }
@media (max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1100px){
  .nav{display:none}
  .burger{display:inline-flex}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .split--reverse .split-media{order:0}
}
@media (max-width:680px){
  /* the drawer and the floating call/WhatsApp buttons cover this on mobile */
  .header-cta .btn{display:none}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .tour-list{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero{padding-top:7.5rem}
  .page-hero{padding-top:8rem}
  .btn{padding:.9rem 1.35rem;font-size:.74rem}
  .btn-row{gap:.65rem}
  .hero-stats{gap:1.3rem 2rem}
  .float-actions{right:12px;bottom:12px}
  .brand img{height:56px}
  .step{padding:1.25rem 1.2rem;gap:1rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;transition-delay:0s !important}
  [data-reveal]{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- illustration motion ---------- */
.road-dash{animation:dash 1.8s linear infinite}
@keyframes dash{to{stroke-dashoffset:-52}}
.drive{animation:drive 11s linear infinite}
@keyframes drive{from{transform:translateX(-170px)}to{transform:translateX(560px)}}
.pin-drop{animation:pindrop 3.4s var(--ease-out) infinite}
@keyframes pindrop{0%,70%,100%{transform:translateY(0)}35%{transform:translateY(-14px)}}
.spin-slow{transform-origin:center;animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}


/* anchor targets clear the fixed header */
[id]{scroll-margin-top:110px}

/* safety net: never trap the page behind the preloader */
#loader{animation:loader-bail .6s var(--ease) 3.6s forwards}
@keyframes loader-bail{to{opacity:0;visibility:hidden}}

/* =====================================================================
   Hero with the real fleet photo + inline estimate card
   ===================================================================== */
.hero{
  padding:6.6rem 0 clamp(18px,2.6vw,38px);
  min-height:clamp(480px,90svh,960px);
  display:flex;flex-direction:column;align-items:stretch;justify-content:center;
  color:var(--ink);
  background-image:radial-gradient(60% 70% at 88% 6%, rgba(158,43,30,.14), transparent 70%),
                   radial-gradient(46% 58% at 4% 96%, rgba(217,121,27,.10), transparent 72%),
                   linear-gradient(180deg,#FBF6F3 0%,#FFFFFF 52%);
  background-repeat:no-repeat;background-position:center;background-size:cover;
  border-bottom:5px solid transparent;
  border-image:linear-gradient(90deg,var(--clay),var(--ember)) 1;
}
.hero-inner{padding-bottom:0}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(30px,4vw,64px);align-items:center}

.trust-row{
  display:inline-flex;align-items:center;flex-wrap:wrap;gap:.45rem .85rem;
  padding:.42rem .85rem;border-radius:2px;margin-bottom:1.1rem;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:.8rem;color:rgba(255,255,255,.88);
}
.trust-row .stars{margin:0;color:var(--ember-bright)}
.trust-row b{color:#fff;font-weight:600}
.trust-row .dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.45);font-style:normal}

.hero-points{display:flex;flex-wrap:wrap;gap:.45rem 1.4rem;margin-top:.85rem}
.hero-points li{display:flex;align-items:center;gap:.5rem;font-size:.86rem;color:rgba(255,255,255,.85)}
.hero-points svg{width:17px;height:17px;flex:none;color:var(--ember-bright)}


/* stat strip under the hero */
.stat-strip{background:var(--white);border-bottom:1px solid var(--line)}
.stat-strip .shell{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px);padding:clamp(28px,3.4vw,44px) 0}
.stat-strip div{text-align:center}
.stat-strip b{display:block;font-size:clamp(1.8rem,3vw,2.5rem);font-weight:700;color:var(--clay);line-height:1.1}
.stat-strip span{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}

/* repeated conversion strip */
.cta-strip{padding:0 0 clamp(60px,7vw,90px)}
.cta-strip-in{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  padding:clamp(1.5rem,2.6vw,2.2rem) clamp(1.5rem,3vw,2.6rem);border-radius:2px;
  background:linear-gradient(120deg,#fff,rgba(242,160,61,.16));
  border:1px solid rgba(217,121,27,.3);
}
.cta-strip-in b{display:block;font-size:clamp(1.15rem,2vw,1.55rem);font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.cta-strip-in p{margin:.3rem 0 0;font-size:.93rem;color:var(--ink-soft);font-weight:300}
.cta-strip-in .btn-row{margin:0}

@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr;gap:2.2rem}
}
@media (max-width:680px){
  .stat-strip .shell{grid-template-columns:repeat(2,1fr);gap:1.6rem 1rem}
  .cta-strip-in{flex-direction:column;align-items:flex-start;text-align:left}
  .cta-strip-in .btn-row{width:100%}
  .cta-strip-in .btn{flex:1;justify-content:center}
  .hero{padding-top:7rem;min-height:auto}
}



/* =====================================================================
   Heroes are white with brand accents, so the "light" helpers used in
   hero markup flip to their dark-on-white equivalents here.
   ===================================================================== */
.hero .lead--light,.page-hero .lead--light{color:var(--ink-soft)}
.hero .eyebrow--light,.page-hero .eyebrow--light{color:var(--clay)}
.hero .eyebrow--light::before,.page-hero .eyebrow--light::before{
  background:linear-gradient(90deg,var(--clay),var(--ember))}
.hero .btn--ghost-light,.page-hero .btn--ghost-light{--fg:var(--clay);border-color:rgba(158,43,30,.28)}
.hero .btn--ghost-light::after,.page-hero .btn--ghost-light::after{background:var(--clay)}
.hero .btn--ghost-light:hover,.page-hero .btn--ghost-light:hover{color:#fff}
.page-hero .crumbs{color:var(--ink-soft)}
.page-hero .crumbs a:hover{color:var(--clay)}
.page-hero h1{color:var(--ink)}

.trust-row{
  background:#fff;border:1px solid var(--line);color:var(--ink-soft);
  box-shadow:0 4px 16px rgba(0,0,0,.05);
}
.trust-row b{color:var(--ink)}
.trust-row .stars{color:var(--ember-deep)}
.trust-row .dot{background:rgba(0,0,0,.25)}

.hero-points li{color:var(--ink-soft)}
.hero-points svg{color:var(--clay)}



/* =====================================================================
   Hero: copy on the left, a collage of the fleet on the right,
   and the estimate tool as a single bar underneath.
   ===================================================================== */
.hero-grid{align-items:center}
.page-hero .hero-grid{gap:clamp(26px,4vw,64px)}
.page-hero .hero-copy .btn-row{margin-top:1.6rem}

.hero-collage{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2px,.7vw,10px) clamp(10px,1.8vw,26px);
  align-items:end;
}
.hero-collage figure{margin:0;min-width:0}
.hero-collage img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 16px 16px rgba(0,0,0,.16));
}
/* stagger the right-hand column so it reads as a collage, not a grid */
.hero-collage figure:nth-child(2n){transform:translateY(12%)}

.quote-bar{
  position:relative;z-index:3;background:#fff;
  border:1px solid var(--line);border-top:3px solid transparent;
  border-image:linear-gradient(90deg,var(--clay),var(--ember)) 1;
  box-shadow:0 18px 44px rgba(0,0,0,.12);
  margin-top:clamp(14px,2vw,26px);
}
.qb-inner{display:grid;grid-template-columns:1.5fr 1fr .62fr auto auto;align-items:stretch}
.qb-field{
  display:flex;flex-direction:column;justify-content:center;
  padding:.7rem clamp(.8rem,1.2vw,1.15rem);border-right:1px solid var(--line);min-width:0;
}
.qb-field label{
  font-size:.56rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:.1rem;
}
.qb-field select,.qb-field input{
  width:100%;border:0;background:none;padding:0;outline:none;appearance:none;
  font-family:inherit;font-size:.95rem;font-weight:500;color:var(--ink);cursor:pointer;
}
.qb-out{
  display:flex;flex-direction:column;justify-content:center;
  padding:.7rem clamp(1rem,1.4vw,1.3rem);border-right:1px solid var(--line);
  background:linear-gradient(120deg,rgba(242,160,61,.14),rgba(242,160,61,.24));
}
.qb-out span{font-size:.56rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.qb-out b{font-size:clamp(1.1rem,1.5vw,1.3rem);color:var(--clay);line-height:1.25;white-space:nowrap}
.quote-bar .btn{height:100%;padding:1rem clamp(1.1rem,1.8vw,1.8rem);box-shadow:none}

@media (max-width:1100px){
  .hero-collage{max-width:560px}
  .qb-inner{grid-template-columns:1fr 1fr}
  .qb-field:nth-child(1){grid-column:1 / -1;border-right:0;border-bottom:1px solid var(--line)}
  .qb-field:nth-child(3){border-right:0}
  .qb-out{grid-column:1 / -1;border-right:0;border-top:1px solid var(--line)}
  .quote-bar .btn{grid-column:1 / -1;justify-content:center}
}
@media (max-width:680px){
  /* tighten the copy so the whole 2x2 collage clears the fold on a phone */
  .hero{padding-top:5.6rem}
  .hero h1{font-size:clamp(2rem,8.4vw,2.8rem);margin-bottom:.8rem}
  .hero .lead{font-size:.96rem;line-height:1.55}
  .hero .btn-row{margin-top:1.1rem;gap:.55rem}
  .hero .btn-row .btn{flex:1 1 100%;justify-content:center;padding:.78rem 1rem;font-size:.7rem}
  .hero-points{gap:.3rem 1.1rem;margin-top:.9rem}
  .hero-points li{font-size:.8rem}
  .hero-collage{gap:2px 10px}
  .hero-collage figure:nth-child(2n){transform:translateY(8%)}
  .qb-inner{grid-template-columns:1fr 1fr}
}

/* ---------- quote bar: field icons + dropdown carets ---------- */
.qb-field,.qb-out{gap:.6rem}
.qb-field{align-items:center;flex-direction:row}
.qb-out{flex-direction:row;align-items:center}
.qb-body{display:flex;flex-direction:column;min-width:0;flex:1}
.qb-icon{
  width:20px;height:20px;flex:none;color:var(--clay);opacity:.85;
  transition:color .3s,transform .4s var(--ease-out);
}
.qb-field:focus-within .qb-icon{color:var(--ember-deep);transform:scale(1.08)}
.qb-caret{
  width:15px;height:15px;flex:none;color:var(--ink-soft);
  transition:transform .35s var(--ease-out),color .3s;
}
.qb-field:focus-within .qb-caret{color:var(--clay);transform:rotate(180deg)}
.qb-out .qb-icon{color:var(--ember-deep);opacity:1}
.quote-bar .btn svg{width:17px;height:17px}

/* every other select on the site also had appearance:none and no indicator */
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6166' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;background-size:15px;
  padding-right:2.4rem;
}
.calc select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC163' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;background-size:15px;
  padding-right:2.4rem;
}

@media (max-width:680px){
  .qb-icon{width:18px;height:18px}
}

/* ---------- collage: angled brand panels behind each vehicle ---------- */
.hero-collage figure{position:relative}
.hero-collage figure::before{
  content:"";position:absolute;z-index:0;
  inset:-16% 12% 32% 4%;
  transform:skewX(-9deg) rotate(-2deg);
  box-shadow:0 16px 34px rgba(0,0,0,.16);
}
.hero-collage img{position:relative;z-index:1}
/* panel colours are picked per car so no vehicle sits on its own colour */
.hero-collage figure:nth-child(1)::before{background:linear-gradient(150deg,#B8341C,#9E2B1E)}
.hero-collage figure:nth-child(2)::before{background:linear-gradient(150deg,var(--ember),var(--ember-deep))}
.hero-collage figure:nth-child(3)::before{background:linear-gradient(150deg,#B8341C,#9E2B1E)}
.hero-collage figure:nth-child(4)::before{background:linear-gradient(150deg,#2E3033,var(--night))}

/* =====================================================================
   Homepage hero: the supplied HERO banner artwork.
   The artwork carries the headline, so on desktop our own h1 is kept for
   semantics but hidden visually. On phones the artwork's text crops away,
   so the h1 becomes visible and does the talking instead.
   ===================================================================== */
.hero--banner{
  position:relative;color:#fff;
  min-height:clamp(420px,35vw,580px);
  padding:6.4rem 0 clamp(16px,2.2vw,30px);
  display:flex;flex-direction:column;justify-content:flex-end;
  background-image:url(../assets/hero.webp?v=20261007);
  background-repeat:no-repeat;background-position:center 28%;background-size:cover;
  border-bottom:5px solid transparent;
  border-image:linear-gradient(90deg,var(--clay),var(--ember)) 1;
}
.hero--banner .hero-inner{display:flex;flex-direction:column;justify-content:flex-end;flex:1}
.hero-banner-copy{max-width:min(560px,52%);margin-bottom:clamp(12px,1.6vw,20px)}
.hero-banner-lead{color:rgba(255,255,255,.88);text-shadow:0 1px 14px rgba(0,0,0,.45)}
.hero--banner .btn-row{margin-top:1.1rem}
.hero--banner .btn--ghost-light{--fg:#fff;border-color:rgba(255,255,255,.55)}
.hero--banner .btn--ghost-light::after{background:#fff}
.hero--banner .btn--ghost-light:hover{color:var(--clay-dark)}

/* desktop: the artwork carries the headline, so our h1, tagline and lead are
   hidden (the h1 stays for semantics). The buttons sit in the dark band under
   the artwork's "FOR HIRE" line. */
@media (min-width:901px){
  .hero--banner .hero-h1{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
  }
  .hero-banner-lead,
  .hero-banner-tag{display:none}
  .hero-banner-copy{margin-bottom:0;padding-left:clamp(0px,5vw,90px)}
}
/* phones: the artwork crops to the cars, our own headline carries the message */
@media (max-width:900px){
  /* Cover-cropping a 2.63:1 banner into a tall phone hero shows a sliver of one
     car. Instead the artwork gets its own band across the top, at a height it
     can actually be read at, and the copy sits on solid brand colour below it. */
  .hero--banner{
    --band:60vw;                    /* hero-mobile.webp is 1.55:1 (64vw tall), trimmed a little */
    min-height:auto;
    background-image:url(../assets/hero-mobile.webp?v=20261007);
    background-color:#4A1109;
    background-size:100% auto;
    background-position:center top;
    padding-top:calc(var(--band) + 1.1rem);
  }
  .hero--banner::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,
      rgba(20,6,3,.24) 0,
      rgba(20,6,3,.04) calc(var(--band) * .52),
      #4A1109 var(--band));
  }
  .hero--banner .hero-inner{position:relative;z-index:2}
  .hero-banner-copy{max-width:none;margin-bottom:1.2rem}
  .hero--banner .hero-h1{
    font-size:clamp(2rem,8.2vw,2.7rem);line-height:1.08;color:#fff;
    margin-bottom:.7rem;text-shadow:0 2px 18px rgba(0,0,0,.5);
  }
  .hero-banner-lead{font-size:.95rem}
  .hero--banner .btn-row .btn{flex:1 1 100%;justify-content:center}
}


/* header sits on the dark banner artwork on the homepage until it sticks */
.home-banner .site-header:not(.is-stuck) .brand img{filter:brightness(0) invert(1)}
.home-banner .site-header:not(.is-stuck) .brand-chip{border-left-color:rgba(255,255,255,.3)}
.home-banner .site-header:not(.is-stuck) .brand-chip b{color:#fff}
.home-banner .site-header:not(.is-stuck) .brand-chip i{color:rgba(255,255,255,.72)}
.home-banner .site-header:not(.is-stuck) .nav a{color:rgba(255,255,255,.92)}
.home-banner .site-header:not(.is-stuck) .nav a:hover,
.home-banner .site-header:not(.is-stuck) .nav a.active{color:var(--ember-bright)}
.home-banner .site-header:not(.is-stuck) .header-phone{color:#fff}
.home-banner .site-header:not(.is-stuck) .header-phone svg{color:var(--ember-bright)}
.home-banner .site-header:not(.is-stuck) .burger{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.12)}
.home-banner .site-header:not(.is-stuck) .burger span{background:#fff}
.home-banner .site-header:not(.is-stuck) .burger-label{color:#fff}


/* ---------- mobile hero polish ---------- */
@media (max-width:680px){
  /* the hero already has CALL and GET MY PRICE buttons, so the floating phone
     button is redundant here and was landing on top of them */
  .float-actions .fab:not(.fab--wa):not(.fab--top){display:none}
  .float-actions{right:10px;bottom:10px;gap:.5rem}
  .fab{width:48px;height:48px}
  .fab svg{width:22px;height:22px}

  /* give the hero copy room to breathe and keep the quote bar closer up */
  .hero--banner .hero-h1{font-size:clamp(1.75rem,7.2vw,2.3rem);margin-bottom:.55rem}
  .hero-banner-lead{font-size:.9rem;line-height:1.5}
  .hero--banner .btn-row{margin-top:.9rem;gap:.5rem}
  .hero--banner .btn-row .btn{padding:.72rem .9rem;font-size:.66rem;letter-spacing:.1em}
  .hero-banner-copy{margin-bottom:.9rem}
}

/* =====================================================================
   October 2026 additions: testimonials, rates strip, vehicle classes,
   Kenya destinations, compact tours teaser.
   ===================================================================== */
/* hero tagline from the "Coming to Kenya?" flyer - a sentence, so less tracking */
.hero-copy > .eyebrow{letter-spacing:.14em;font-size:.74rem}

/* hero collage now holds three cars (white Noah, two beige Land Cruisers):
   panels re-picked so no beige car sits on ember */
.hero-collage figure:nth-child(1)::before{background:linear-gradient(150deg,var(--ember),var(--ember-deep))}
.hero-collage figure:nth-child(2)::before{background:linear-gradient(150deg,#2E3033,var(--night))}
.hero-collage figure:nth-child(3)::before{background:linear-gradient(150deg,#B8341C,#9E2B1E)}

/* ---------- testimonials ----------
   Desktop: three compact cards in one row, all built the same way.
   Phones: the same cards become a swipeable strip that auto-advances
   (js/main.js, [data-carousel]), with dots underneath. */
.testi-section{background:linear-gradient(180deg,#fff 0,var(--sand-2) 100%)}
.testi-track{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px);align-items:stretch;max-width:1080px;margin-inline:auto}
.testi{
  position:relative;margin:0;display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:2px;box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);
}
.testi::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--clay),var(--ember));
}
.testi:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.testi-media{
  height:150px;display:flex;align-items:center;justify-content:center;
  padding:1.4rem;background:#fff;border-bottom:1px solid var(--line);overflow:hidden;
}
.testi-media img{display:block;max-width:190px;max-height:100%;width:auto;height:auto;object-fit:contain}
.testi-media--photo{padding:0}
.testi-media--photo img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 45%}
.testi-body{display:flex;flex-direction:column;flex:1;padding:1.4rem 1.5rem 1.5rem}
.testi-q{width:26px;height:20px;color:var(--ember);margin-bottom:.8rem;flex:none}
.testi blockquote{margin:0 0 1.2rem;flex:1;font-size:.9rem;line-height:1.65;color:var(--ink);font-weight:400}
.testi figcaption{padding-top:.9rem;border-top:1px solid var(--line)}
.testi figcaption b{display:block;font-size:.95rem;font-weight:700;color:var(--ink)}
.testi figcaption span{
  display:block;margin-top:.15rem;font-size:.64rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--clay);
}
.testi-dots{display:none}

@media (max-width:900px){
  .testi-track{
    display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding:6px 0 14px;   /* room for the card shadow; cards are 84% wide so the next one peeks in */
  }
  .testi-track::-webkit-scrollbar{display:none}
  .testi{flex:0 0 84%;scroll-snap-align:start}
  /* cards off to the side never "enter" the viewport, so skip the reveal fade */
  .testi-track [data-reveal]{opacity:1;transform:none}
  .testi:hover{transform:none}
  .testi-media{height:140px}
  .testi-dots{display:flex;justify-content:center;gap:.5rem;margin-top:.9rem}
  .testi-dots button{
    width:8px;height:8px;padding:0;border:0;border-radius:2px;cursor:pointer;
    background:rgba(158,43,30,.25);transition:width .35s var(--ease-out),background .35s;
  }
  .testi-dots button[aria-current="true"]{width:26px;background:var(--clay)}
}

/* ---------- rates strip: the only place prices are pointed to outside rates.html ---------- */
.rates-strip{padding-top:clamp(10px,2vw,24px)}
.section + .rates-strip{margin-top:calc(-1 * clamp(40px,5vw,80px))}
.rates-strip-copy{display:flex;align-items:center;gap:1.1rem}
.rates-icon{
  flex:none;width:56px;height:56px;border-radius:2px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--clay),#B8341C);color:#fff;
}
.rates-icon svg{width:28px;height:28px}
.rates-link{font-weight:600;color:var(--clay);text-decoration:none;border-bottom:2px solid var(--ember)}
.rates-link::after{content:" \2192"}

/* ---------- vehicle classes ---------- */
.fleet-eg{margin:-.2rem 0 .7rem;font-size:.82rem;color:var(--ink-soft);font-weight:400}
.fleet-photo--icon{display:grid;place-items:center;background:var(--sand-2);color:var(--clay)}
.fleet-photo--icon svg{width:62%;height:auto}
.fleet-card--more .seat{background:var(--ink)}

/* ---------- Kenya destinations ---------- */
.dest .dest-time{
  display:inline-block;margin-top:.9rem;font-size:.66rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ember-bright);
}

/* ---------- compact tours teaser ---------- */
.tour-list--compact{grid-template-columns:1fr}
.tour-list--compact .tour-item{padding-block:.8rem}
/* phone hero starts tight under the header (keeps the collage above the fold),
   so the tagline needs its own clearance */
@media (max-width:900px){
  .hero-copy > .eyebrow{margin-top:2.4rem;font-size:.64rem;letter-spacing:.1em;margin-bottom:.7rem}
  .hero-copy > .eyebrow::before{width:20px}
}

/* banner hero is dark artwork, so the tagline goes back to the light eyebrow */
.hero--banner .eyebrow--light{color:var(--ember-bright)}
.hero--banner .eyebrow--light::before{background:linear-gradient(90deg,var(--ember),transparent)}
@media (max-width:900px){
  .hero--banner .hero-banner-tag{margin-top:0;font-size:.64rem;letter-spacing:.1em;margin-bottom:.7rem}
}

/* ---------- inner pages without a hero ----------
   Services, Fleet, Tours, Partners and Contact open straight on their first
   section. The header is fixed, so that section gets extra top room, and its
   heading is the page's h1 sized like a normal section heading. */
.section--first{padding-top:clamp(124px,12vw,170px)}
.page-title{font-size:clamp(2.1rem,4.4vw,3.55rem);font-weight:700;line-height:1.05;letter-spacing:-.025em}

/* ---------- short title band (About, Rates) ---------- */
.page-hero--compact{padding:clamp(108px,10vw,132px) 0 clamp(26px,3vw,40px)}
.page-hero--compact::after{display:none}
.page-hero--compact h1{font-size:clamp(2.1rem,4.4vw,3.3rem);margin-bottom:.6rem}
.page-hero--compact .lead{max-width:62ch}
.page-hero--compact .crumbs{margin-bottom:.9rem}
@media (max-width:900px){
  .page-hero.page-hero--compact{padding-top:104px}
}

/* ---------- social links (footer, contact tile, social section) ---------- */
.socials{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.3rem}
.socials a{
  width:40px;height:40px;display:grid;place-items:center;border-radius:2px;
  border:1px solid rgba(255,255,255,.2);color:#fff;transition:background .3s,border-color .3s,color .3s;
}
.socials a:hover{background:var(--ember);border-color:var(--ember);color:var(--night)}
.socials svg{width:18px;height:18px}
.socials--dark{margin-top:.45rem}
.socials--dark a,.contact-tile .socials--dark a{display:grid;width:36px;height:36px;border-color:var(--line);color:var(--clay)}
.socials--dark a:hover{background:var(--clay);border-color:var(--clay);color:#fff}

/* ---------- social carousel ----------
   Small square cards. On wide screens all four fit in a row (arrows hide);
   when they overflow it becomes a swipe strip with arrows / dots. */
.social-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem}
.social-head .section-head{margin-bottom:clamp(20px,2.4vw,32px)}
.carousel-arrows{display:flex;gap:.5rem;margin-bottom:clamp(20px,2.4vw,32px)}
.carousel-arrows button{
  width:40px;height:40px;display:grid;place-items:center;cursor:pointer;border-radius:2px;
  background:#fff;border:1px solid var(--line);color:var(--clay);transition:background .3s,color .3s,opacity .3s;
}
.carousel-arrows button:hover{background:var(--clay);color:#fff}
.carousel-arrows button:disabled{opacity:.35;pointer-events:none}
.carousel-arrows svg{width:18px;height:18px}
[data-carousel-root].no-scroll .carousel-arrows,
[data-carousel-root].no-scroll .carousel-dots{display:none}
.social-track{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 0 10px;
}
.social-track::-webkit-scrollbar{display:none}
.social-post{flex:0 0 200px;scroll-snap-align:start;display:block;color:var(--ink)}
.social-thumb{
  position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:2px;
  background:var(--sand-2);border:1px solid var(--line);
}
.social-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease-out)}
a.social-post:hover .social-thumb img{transform:scale(1.05)}
.social-badge{
  position:absolute;top:8px;right:8px;width:28px;height:28px;display:grid;place-items:center;
  border-radius:2px;background:rgba(0,0,0,.55);color:#fff;
}
.social-badge svg{width:16px;height:16px}
.social-play{
  position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;
  display:grid;place-items:center;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;
}
.social-play svg{width:20px;height:20px;margin-left:2px}
.social-meta{display:block;margin-top:.5rem;font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.social-thumb--tiktok,.social-thumb--follow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;padding:1rem;text-align:center}
.social-thumb--tiktok{background:var(--night);border-color:var(--night);color:#fff}
.social-thumb--tiktok > svg{width:34px;height:34px}
.social-thumb--tiktok b{font-size:.85rem}
.social-thumb--tiktok em{font-style:normal;font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ember-bright)}
.social-thumb--follow b{font-size:1rem;color:var(--ink)}
.social-follow-icons{display:grid;grid-template-columns:repeat(2,36px);gap:.4rem}
.social-follow-icons a{width:36px;height:36px;display:grid;place-items:center;border-radius:2px;background:#fff;border:1px solid var(--line);color:var(--clay);transition:background .3s,color .3s}
.social-follow-icons a:hover{background:var(--clay);color:#fff}
.social-follow-icons svg{width:16px;height:16px}
.carousel-dots{display:flex;justify-content:center;gap:.5rem;margin-top:.6rem}
.carousel-dots button{
  width:8px;height:8px;padding:0;border:0;border-radius:2px;cursor:pointer;
  background:rgba(158,43,30,.25);transition:width .35s var(--ease-out),background .35s;
}
.carousel-dots button[aria-current="true"]{width:26px;background:var(--clay)}
@media (max-width:900px){
  .carousel-arrows{display:none}
  .social-post{flex-basis:150px}
}
/* keep the text-only squares exactly square at small sizes */
.social-thumb{min-height:0}
@media (max-width:900px){
  .social-thumb--tiktok,.social-thumb--follow{gap:.3rem;padding:.6rem}
  .social-thumb--tiktok > svg{width:26px;height:26px}
  .social-thumb--tiktok b{font-size:.72rem}
  .social-thumb--tiktok em{font-size:.6rem}
  .social-thumb--follow b{font-size:.85rem}
  .social-follow-icons{grid-template-columns:repeat(2,30px)}
  .social-follow-icons a{width:30px;height:30px}
}