/* ─────────────────────────────────────────────────────────────────────────────
   RK TOURS AND TRAVELS — design system
   Matched to the client's mockups: near-black grounds, ONE gold accent used as a
   gradient, a hairline gold border on every card, gold-rule section titles.
   Authored dark-first — there is no light mode, so no component should ever
   hardcode a white ground.
   ───────────────────────────────────────────────────────────────────────────── */
:root{
  --bg:#070707;              /* page */
  --bg2:#0c0c0c;            /* alternating band */
  --card:#111112;           /* card ground */
  --card2:#171718;          /* input / inner ground */
  --line:rgba(232,201,122,.20);   /* the hairline gold border, everywhere */
  --line2:rgba(232,201,122,.34);  /* hover / active border */
  --gold:#C9962F;
  --gold2:#E8C97A;          /* light stop of the gradient + icon gold */
  --goldD:#8E6A1C;
  --grad:linear-gradient(135deg,#B9822A 0%,#E8C97A 48%,#C9962F 100%);
  --ink:#ffffff;
  --mut:#b6b6b8;
  --mut2:#8b8b8e;
  --r:14px;                 /* card radius */
  --r-sm:10px;
  --wrap:1180px;
  --mbh:0px;                /* bottom-bar height, set to a real value on phones */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 16px/1.65 "Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding-bottom:var(--mbh);
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,h5{margin:0;line-height:1.18;font-weight:800;letter-spacing:-.01em}
p{margin:0}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 18px}
.g{color:var(--gold2)}
.gt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ic{width:1em;height:1em;flex:0 0 auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--gold);color:#111;padding:10px 14px;border-radius:8px}
:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}

/* ── buttons ───────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:var(--r-sm);font-weight:800;font-size:14.5px;
  letter-spacing:.02em;white-space:nowrap;transition:transform .18s,box-shadow .18s,background .18s;
}
.btn .ic{font-size:17px}
.btn-g{background:var(--grad);color:#151004;box-shadow:0 8px 24px -10px rgba(232,201,122,.6)}
.btn-g:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(232,201,122,.75)}
.btn-o{border:1.4px solid var(--line2);color:var(--gold2);background:rgba(232,201,122,.05)}
.btn-o:hover{background:rgba(232,201,122,.12);transform:translateY(-2px)}
.btn-w{border:1.4px solid rgba(255,255,255,.18);color:#fff}
.btn-w:hover{border-color:var(--line2);color:var(--gold2)}
.btn-lg{padding:16px 30px;font-size:15.5px}
.btn-full{width:100%}

/* ── header ────────────────────────────────────────────────────────────────── */
.hd{
  position:sticky;top:0;z-index:60;
  background:rgba(7,7,7,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.hd-in{display:flex;align-items:center;gap:16px;min-height:76px}
.hd-logo img{height:46px;width:auto}
.hd-burger,.hd-call-sm{display:none;font-size:24px;color:var(--gold2);padding:6px}
.hd-nav{display:flex;align-items:center;gap:26px;margin-left:auto;font-size:14.5px;font-weight:600}
.hd-nav a{color:var(--mut);position:relative;padding:6px 0;transition:color .18s}
.hd-nav a:hover{color:#fff}
.hd-nav a.on{color:var(--gold2)}
.hd-nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--grad);border-radius:2px}
.hd-call{
  display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:999px;
  border:1.4px solid var(--line2);color:var(--gold2);font-weight:800;font-size:14px;white-space:nowrap;
}
.hd-call .ic{font-size:16px}
.hd-call:hover{background:rgba(232,201,122,.1)}

/* ── canvas drawer (phones) ────────────────────────────────────────────────── */
.dw-scrim{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.68);backdrop-filter:blur(3px);animation:fade .22s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.dw{
  /* Anchored LEFT and sliding in from the left: the burger that opens it sits top-left, and a panel
     that flies in from the opposite side of its own button reads as a mistake. */
  position:fixed;top:0;left:0;bottom:0;z-index:100;width:min(340px,88vw);
  background:#0a0a0b;border-right:1px solid var(--line);
  transform:translateX(-103%);transition:transform .3s cubic-bezier(.22,.8,.24,1),visibility .3s;
  overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;
  /* visibility:hidden while closed does two things a transform alone cannot: it keeps the panel out of
     the document's scroll width (a translated element still counts, which gave the page a phantom
     horizontal scroll), and it takes the links out of the tab order. */
  visibility:hidden;
}
.dw.open{transform:none;visibility:visible}
.dw-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 16px 14px;border-bottom:1px solid var(--line)}
.dw-top img{height:40px;width:auto}
.dw-x{font-size:24px;color:var(--gold2);padding:4px}
.dw-nav{display:grid;padding:10px 8px}
.dw-nav a{display:flex;align-items:center;gap:12px;padding:13px 12px;border-radius:var(--r-sm);font-weight:700;font-size:15px;color:#e9e9ea}
.dw-nav a .ic{font-size:15px;color:var(--gold2);opacity:.75}
.dw-nav a:hover,.dw-nav a.on{background:rgba(232,201,122,.09);color:var(--gold2)}
.dw-veh{padding:6px 8px 12px;border-top:1px solid var(--line);margin-top:4px}
.dw-h{padding:12px 12px 6px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mut2)}
.dw-veh a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-sm);font-size:14px;color:#dcdcde}
.dw-veh a .ic{font-size:16px;color:var(--gold2)}
.dw-veh a em{font-style:normal;color:var(--mut2);font-size:12.5px}
.dw-veh a:hover{background:rgba(232,201,122,.08)}
.dw-cta{display:grid;gap:10px;padding:14px 16px;border-top:1px solid var(--line)}
.dw-foot{display:grid;gap:12px;padding:14px 16px 26px;border-top:1px solid var(--line);margin-top:auto}
.dw-foot a{display:flex;align-items:flex-start;gap:10px;font-size:12.8px;color:var(--mut);line-height:1.5}
.dw-foot a .ic{font-size:15px;color:var(--gold2);margin-top:2px}

/* ── sections + gold-rule titles ───────────────────────────────────────────── */
.sec{padding:52px 0}
.sec-tight{padding:30px 0}
.band{background:var(--bg2);border-block:1px solid var(--line)}
.st{display:flex;align-items:center;gap:16px;margin:0 0 8px}
.st h2{font-size:clamp(19px,3.4vw,26px);text-transform:uppercase;letter-spacing:.06em;color:var(--gold2);white-space:nowrap}
.st-r{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line2))}
.st-r:last-child{background:linear-gradient(90deg,var(--line2),transparent)}
.st-sub{text-align:center;color:var(--mut);font-size:14.5px;margin:0 auto 26px;max-width:640px}
.st+*{margin-top:26px}

/* ── hero ──────────────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center right}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(4,4,4,.97) 0%,rgba(5,5,5,.9) 32%,rgba(6,6,6,.42) 62%,rgba(6,6,6,.55) 100%);
}
.hero-in{position:relative;z-index:1;padding:70px 0 62px;max-width:none}
/* The hero copy hugs the left edge — .wrap's centred 1180px inset pushed it far into the frame,
   which is not where the mockup (or the owner's mark) puts it. */
.hero .wrap{max-width:none;padding-left:clamp(18px,4.5vw,74px);padding-right:18px}
.hero h1,.hero p,.hero-tr{max-width:520px}
.hero h1{font-size:clamp(30px,6vw,54px);line-height:1.06;text-transform:uppercase;letter-spacing:.01em}
.hero h1 span{display:block;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{margin-top:14px;color:#d4d4d6;font-size:clamp(14.5px,2vw,16.5px);max-width:400px}
.hero-tr{display:flex;flex-wrap:wrap;gap:22px;margin-top:26px;max-width:420px}
.hero-tr div{display:flex;flex-direction:column;align-items:center;gap:6px;width:78px;text-align:center}
.hero-tr .ic{font-size:24px;color:var(--gold2)}
.hero-tr b{font-weight:600;font-size:11.5px;color:#cfcfd1;line-height:1.35}

/* mobile hero = a swipeable card carousel, as drawn in the mockup */
.hcar{display:none}
.hcar-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.hcar-track::-webkit-scrollbar{display:none}
.hcar-s{flex:0 0 100%;scroll-snap-align:center}
/* All three banners are rendered to the SAME 16:9 box (see the asset step in build notes), so the
   wrapper can size to that ratio exactly. Before this, the new 16:9 artwork sat in a box sized by the
   older 2.15:1 slides and left a visible strip of dead space under it. */
.hcar-s img{width:100%;aspect-ratio:1600/832;height:auto;object-fit:cover;display:block;background:#070707}
/* Dots OVERLAY the banner. As a block below it they added a strip of card background under the artwork —
   the "space under the banner" the client pointed at. Absolute + a soft scrim keeps them readable on any
   slide without taking layout height. */
.hcar-dots{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:7px;padding:10px 0 9px;background:linear-gradient(to top,rgba(7,7,7,.62),rgba(7,7,7,0))}
.hcar-dots b{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.28);transition:.2s}
.hcar-dots b.on{width:20px;border-radius:4px;background:var(--grad)}

/* ── booking card ──────────────────────────────────────────────────────────── */
.bk{
  background:var(--card);border:1.4px solid var(--line2);border-radius:18px;
  padding:16px;box-shadow:0 26px 60px -30px rgba(0,0,0,.9);
}
.bk-tabs{display:flex;gap:8px;background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:6px;margin-bottom:14px}
.bk-tab{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 10px;border-radius:9px;font-weight:700;font-size:13.5px;color:var(--mut);transition:.18s;
}
.bk-tab .ic{font-size:17px}
.bk-tab[aria-selected="true"]{background:var(--grad);color:#151004;font-weight:800}
.bk-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:12px}
.fld{
  position:relative;display:flex;align-items:center;gap:11px;
  background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:11px 14px;transition:border-color .18s;
}
.fld:focus-within{border-color:var(--line2)}
.fld>.ic{font-size:20px;color:var(--gold2);flex:0 0 auto}
.fld-b{flex:1;min-width:0}
.fld-b label{display:block;font-size:11px;color:var(--mut2);font-weight:600;letter-spacing:.02em}
.fld-b input,.fld-b select{
  width:100%;background:none;border:0;outline:none;color:#fff;font-size:14.5px;font-weight:600;padding:2px 0 0;
}
/* Our own chevron sits at the end of the field, so the native one has to go or you get two arrows. */
.fld-b select{appearance:none;-webkit-appearance:none;-moz-appearance:none}
.fld-b input::placeholder{color:#6f6f73;font-weight:500}
.fld-b select option{background:#111;color:#fff}
.fld-b input[type=datetime-local]{color-scheme:dark}
.bk-swap{
  align-self:center;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  border:1.4px solid var(--line2);color:var(--gold2);font-size:19px;background:var(--card2);transition:.2s;
}
.bk-swap:hover{transform:rotate(180deg);background:rgba(232,201,122,.12)}
.bk-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.bk-go{margin-top:14px}
.bk-note{margin-top:10px;font-size:12px;color:var(--mut2);text-align:center}
.bk-err{margin-top:10px;font-size:13px;color:#ff8f8f;text-align:center;display:none}
.bk-err.on{display:block}
/* autocomplete list */
.ac{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:#101011;border:1px solid var(--line2);border-radius:12px;max-height:240px;overflow-y:auto;box-shadow:0 20px 40px -18px #000;display:none}
.ac.on{display:block}
.ac button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:10px 13px;font-size:14px;color:#e6e6e7;border-bottom:1px solid rgba(255,255,255,.05)}
.ac button .ic{font-size:15px;color:var(--gold2);opacity:.8}
.ac button:last-child{border-bottom:0}
.ac button:hover,.ac button[aria-selected="true"]{background:rgba(232,201,122,.1);color:var(--gold2)}
.ac em{font-style:normal;margin-left:auto;font-size:12px;color:var(--mut2)}

/* ── feature tiles / why-us ────────────────────────────────────────────────── */
.tiles{display:grid;gap:12px;grid-template-columns:repeat(4,1fr)}
.tile{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 14px;text-align:center;transition:.22s;
}
.tile:hover{border-color:var(--line2);transform:translateY(-3px)}
.tile .ic{font-size:30px;color:var(--gold2);margin:0 auto 10px}
.tile b{display:block;font-size:13.5px;font-weight:700;line-height:1.35}
.tile p{margin-top:5px;font-size:12.5px;color:var(--mut2);line-height:1.45}
/* Column-count variants as CLASSES, never inline styles — an inline style wins over the phone
   breakpoint, which is exactly how the five Why-Travel cards stayed five-wide on a 464px screen and
   broke the page's horizontal layout. */
.tiles-5{grid-template-columns:repeat(5,1fr)}
.tiles-4{grid-template-columns:repeat(4,1fr)}
.icards-1{grid-template-columns:1fr}

/* ── vehicle cards ─────────────────────────────────────────────────────────── */
.vgrid{display:grid;gap:14px;grid-template-columns:repeat(5,1fr)}
.vcard{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 14px 15px;text-align:center;transition:.22s;overflow:hidden;
}
.vcard:hover{border-color:var(--line2);transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(232,201,122,.35)}
.vcard h3{font-size:15.5px;font-weight:700}
/* 16:9 photo frame. `aspect-ratio` + `object-fit:cover` means every card is the same height whatever the
   artwork is, and the client's transparent PNGs sit on the card's own dark ground. The vector fallback
   still centres inside the same box, so a vehicle without a photo does not change the grid. */
.vcard-art{position:relative;margin:10px 0 10px;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:none;display:grid;place-items:center}
.vcard-art img{width:100%;height:100%;object-fit:cover;display:block}
.vcard-art svg{width:86%;height:auto}
.vcard-m{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--mut);margin-bottom:12px}
.vcard-m .ic{font-size:15px;color:var(--gold2)}
/* A chip in the flow, not floating over the title. It used to be absolutely positioned in the
   top-right and on a 218px card it sat straight on top of the vehicle name. The ghost variant keeps
   every card in a row the same height when only some have a tag. */
/* The badge the client asked to move to the corner — top-RIGHT of the photo, animated. `overflow:hidden`
   on the shine keeps the sweep inside the pill; the float is 6px so it reads as a lift, not a jump.
   Both animations stop under prefers-reduced-motion (see the block at the end of this file). */
.vcard-tag{position:absolute;top:8px;right:8px;z-index:2;display:inline-block;background:var(--grad);color:#151004;font-size:9.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:999px;box-shadow:0 6px 16px -6px rgba(232,201,122,.65);overflow:hidden;animation:tagFloat 2.8s ease-in-out infinite}
.vcard-tag::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);transform:translateX(-120%);animation:tagShine 3.2s ease-in-out infinite}
@keyframes tagFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes tagShine{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.vcard .btn{width:100%;padding:10px 12px;font-size:13px}
/* The horizontal swipe rail that used to sit under the grid is REMOVED — the owner found the
   single-file scroller redundant next to a grid that already shows everything. The grid simply drops
   to two per row on phones. */

/* ── how it works ──────────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;position:relative}
.step{text-align:center;position:relative;padding:0 6px}
.step-n{
  width:64px;height:64px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;
  border:1.4px solid var(--line2);background:var(--card);color:var(--gold2);font-size:26px;position:relative;z-index:2;
}
.step-n b{position:absolute;bottom:-7px;right:-4px;width:22px;height:22px;border-radius:50%;background:var(--grad);color:#151004;font-size:11px;font-weight:900;display:grid;place-items:center}
.step h3{font-size:14.5px;font-weight:700}
.step p{margin-top:5px;font-size:12.5px;color:var(--mut2);line-height:1.5}
.steps::before{
  content:"";position:absolute;top:32px;left:12.5%;right:12.5%;height:1px;
  background:repeating-linear-gradient(90deg,var(--line2) 0 6px,transparent 6px 13px);z-index:1;
}

/* ── two-up promo (fare estimate / app) ────────────────────────────────────── */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;
  display:flex;align-items:center;gap:18px;transition:.22s;
}
.pcard:hover{border-color:var(--line2)}
.pcard-tx{flex:1;min-width:0}
.pcard h3{font-size:17px;color:var(--gold2);text-transform:uppercase;letter-spacing:.04em}
.pcard p{margin-top:6px;font-size:13.5px;color:var(--mut)}
.pcard .btn{margin-top:14px}
.pcard-art{width:120px;flex:0 0 auto;display:grid;place-items:center;color:var(--gold2);font-size:56px}
.stores{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.store{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px;padding:8px 13px;font-size:12px;color:#dcdcde;background:var(--card2)}
.store b{font-weight:800;font-size:13px;color:#fff}
.store .ic{font-size:18px;color:var(--gold2)}

/* ── testimonials ──────────────────────────────────────────────────────────── */
.tsts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tst{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.tst-st{display:flex;gap:3px;color:var(--gold2);font-size:14px;margin-bottom:10px}
.tst p{font-size:14px;color:#dcdcde;line-height:1.6;font-style:italic}
.tst-w{display:flex;align-items:center;gap:11px;margin-top:14px}
.tst-av{width:38px;height:38px;border-radius:50%;background:var(--grad);color:#151004;display:grid;place-items:center;font-weight:900;font-size:15px;flex:0 0 auto}
.tst-w b{display:block;font-size:13.5px}
.tst-w span{font-size:12px;color:var(--mut2)}

/* ── CTA band ──────────────────────────────────────────────────────────────── */
.cta{
  background:linear-gradient(100deg,#101011,#0b0b0c);border:1.4px solid var(--line2);border-radius:18px;
  padding:26px;display:flex;align-items:center;gap:24px;position:relative;overflow:hidden;
}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 200px at 85% 50%,rgba(232,201,122,.13),transparent 70%);pointer-events:none}
.cta-art{width:190px;flex:0 0 auto;opacity:.95}
.cta-tx{flex:1;min-width:0;position:relative}
.cta-tx h2{font-size:clamp(19px,3vw,25px);text-transform:uppercase;letter-spacing:.03em}
.cta-tx p{margin-top:8px;color:var(--mut);font-size:14px}
.cta-bt{display:flex;flex-direction:column;gap:10px;flex:0 0 auto;position:relative}

/* ── prose / inner pages ───────────────────────────────────────────────────── */
.ph{padding:44px 0 8px;border-bottom:1px solid var(--line);background:var(--bg2)}
.ph h1{font-size:clamp(25px,5vw,40px);text-transform:uppercase;letter-spacing:.02em}
.ph h1 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ph p{margin-top:12px;color:var(--mut);max-width:660px;font-size:15px}
.crumb{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--mut2);padding-bottom:14px}
.crumb a:hover{color:var(--gold2)}
.prose{max-width:800px}
.prose h2{font-size:clamp(18px,2.6vw,23px);margin:30px 0 10px;color:var(--gold2)}
.prose h3{font-size:16.5px;margin:22px 0 8px}
.prose p,.prose li{color:var(--mut);font-size:15px;line-height:1.72}
.prose p+p{margin-top:12px}
.prose ul{margin:12px 0;padding-left:0;list-style:none}
.prose li{position:relative;padding-left:26px;margin:8px 0}
.prose li::before{content:"";position:absolute;left:6px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--grad)}
.prose a{color:var(--gold2);text-decoration:underline;text-underline-offset:3px}
.prose b{color:#fff}

/* ── FAQ ───────────────────────────────────────────────────────────────────── */
.faqs{display:grid;gap:10px}
.faq{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;font-weight:700;font-size:14.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{font-size:18px;color:var(--gold2);transition:transform .22s}
.faq[open] summary .ic{transform:rotate(180deg)}
.faq[open]{border-color:var(--line2)}
.faq-b{padding:0 18px 16px;color:var(--mut);font-size:14px;line-height:1.7}

/* ── info cards / contact ──────────────────────────────────────────────────── */
.icards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.icard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;transition:.22s}
.icard:hover{border-color:var(--line2)}
.icard .ic{font-size:28px;color:var(--gold2);margin-bottom:12px}
.icard h3{font-size:15.5px}
.icard p,.icard a{margin-top:7px;display:block;font-size:14px;color:var(--mut);line-height:1.6;word-break:break-word}
.icard a:hover{color:var(--gold2)}
.cmap{margin-top:18px;border:1.4px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card)}
.cmap iframe{width:100%;height:340px;border:0;display:block;filter:invert(.92) hue-rotate(180deg) saturate(.7)}

/* ── search results (booking) ──────────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--card2);border-radius:999px;padding:7px 13px;font-size:12.5px;color:#dcdcde}
.chip .ic{font-size:15px;color:var(--gold2)}
.chip b{color:#fff;font-weight:800}
.rgrid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr);margin-top:16px}
/* A result card is now self-contained: vehicle, the whole trip, the price, the booking button. The
   owner asked for exactly this — one card a customer can read (or screenshot) and understand. */
.rcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;transition:.22s}
.rcard:hover{border-color:var(--line2);transform:translateY(-3px)}
.rcard-top{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.rcard-art{width:150px;flex:0 0 auto;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:none;display:grid;place-items:center}
.rcard-art img{width:100%;height:100%;object-fit:cover;display:block}
.rcard-art svg{width:92%;height:auto}
.rcard-hd{flex:1;min-width:0}
.rcard h3{font-size:17px}
.rcard-m{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.tripgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px 14px;padding:14px 0;border-block:1px solid var(--line)}
.trip-i{display:flex;align-items:flex-start;gap:9px;min-width:0}
.trip-i .ic{font-size:17px;color:var(--gold2);margin-top:2px;flex:0 0 auto}
.trip-i span{display:block;font-size:10.5px;color:var(--mut2);font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.trip-i b{font-weight:700;font-size:13.5px;line-height:1.35;overflow-wrap:anywhere}
.rcard-p{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin:14px 0 12px}
.rcard-p b{font-size:26px;font-weight:900;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.rcard-p span{font-size:12px;color:var(--mut2)}
.kmbtn{font:inherit;font-size:12px;color:var(--gold2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.kmbtn-b{display:block;width:100%;text-align:center;margin-top:10px;font-size:12px;color:var(--mut2);text-decoration:none}
.kmbtn-b:hover{color:var(--gold2)}
.empty{background:var(--card);border:1px dashed var(--line2);border-radius:var(--r);padding:30px;text-align:center;color:var(--mut)}

/* ── reveal on scroll ──────────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.8,.24,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.vcard-tag,.vcard-tag::after{animation:none}}
/* Belt and braces: without JS there is no observer, so opacity:0 would hide the whole page. */
.no-js .rv{opacity:1!important;transform:none!important}

/* ── bottom bar (phones only) ──────────────────────────────────────────────── */
.mb{display:none}

/* ═══════════════════════ RESPONSIVE ═══════════════════════ */
@media (max-width:1080px){
  .vgrid{grid-template-columns:repeat(3,1fr)}
  .tiles{grid-template-columns:repeat(4,1fr)}
  .hd-nav{gap:18px;font-size:13.5px}
  .hd-call span{display:none}
  .hd-call{padding:11px}
}
@media (max-width:900px){
  :root{--mbh:66px}
  .hd-in{min-height:62px;gap:10px}
  .hd-nav,.hd-call{display:none}
  .hd-burger{display:grid;place-items:center}
  .hd-call-sm{
    display:grid;place-items:center;margin-left:auto;width:40px;height:40px;border-radius:50%;
    border:1.4px solid var(--line2);font-size:19px;background:rgba(232,201,122,.06);
  }
  /* Logo starts 3px after the burger — the owner wants them reading as one unit on the left,
     not a centred logo with the burger floating away from it. */
  .hd-in{gap:3px}
  .hd-logo{margin:0}
  .hd-logo img{height:38px}
  /* Phones: the banner carousel carries the photography, so the hero collapses to a compact
     heading strip beneath it — the page keeps its one visible <h1> either way. */
  .hero{border-bottom:0}
  .hero-bg{display:none}
  /* Visually hidden, NOT removed: the banner above shows this headline as artwork, so the page keeps
     its real <h1> for search engines and screen readers without printing it twice. */
  .hero-in{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .hero-tr{display:none} /* the banner artwork above already shows these */
  .hcar{display:block;padding:8px 16px 0}
  .hcar-wrap{position:relative;border:1.4px solid var(--line2);border-radius:16px;overflow:hidden;background:#070707;line-height:0}
  .sec{padding:26px 0}
  .st h2{font-size:17px}
  .steps{grid-template-columns:1fr 1fr;gap:22px 10px}
  .steps::before{display:none}
  .duo,.tsts,.icards,.icards-1,.rgrid{grid-template-columns:1fr}
  .tiles,.tiles-5,.tiles-4{grid-template-columns:1fr 1fr}
  .vgrid{grid-template-columns:1fr 1fr}   /* two vehicles per row, per the owner */
  .cta{flex-direction:column;text-align:center;padding:22px 18px}
  .cta-art{width:170px}
  .cta-bt{width:100%}
  .cta-bt .btn{width:100%}
  .rcard-top{flex-direction:column;text-align:center;gap:10px}
  .rcard-art{width:100%;max-width:100%;margin:0 auto}
  .rcard-m{justify-content:center}
  .trip-i b{font-size:13px}
  .mb{
    display:grid;grid-template-columns:repeat(5,1fr);align-items:end;gap:2px;
    position:fixed;left:0;right:0;bottom:0;z-index:70;height:66px;padding:0 4px 4px;
    background:rgba(9,9,10,.96);backdrop-filter:blur(14px);border-top:1px solid var(--line);
  }
  .mb>*{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;padding:8px 0 7px;font-size:10px;font-weight:600;color:var(--mut2)}
  .mb>* .ic{font-size:21px}
  .mb>*.on{color:var(--gold2)}
  .mb-fab{position:relative;color:#151004!important;font-weight:800!important}
  .mb-fab .ic{
    width:48px;height:48px;padding:12px;border-radius:50%;background:var(--grad);
    box-shadow:0 8px 22px -8px rgba(232,201,122,.75);margin-top:-22px;font-size:24px;
  }
  .mb-fab span{color:var(--gold2)}
  .bk-grid,.bk-row2{grid-template-columns:1fr}
  .bk-swap{justify-self:center;transform:rotate(90deg)}
  .bk-swap:hover{transform:rotate(270deg)}
  .bk-tabs{gap:5px;padding:5px}
  /* icon + label in a row (the stacked version was the owner's mark) */
  .bk-tab{padding:11px 8px;font-size:12.5px;gap:6px}
  .bk-tab .ic{font-size:16px}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .tiles{grid-template-columns:1fr 1fr;gap:10px}
  .tile{padding:16px 10px}
  .tile .ic{font-size:26px}
  .hero-tr{gap:16px}
  .pcard{flex-direction:column;text-align:center;gap:12px}
  .pcard-art{width:96px;font-size:46px}
  .pcard .btn{width:100%}
  .stores{justify-content:center}
  .ft-in{grid-template-columns:1fr!important;gap:24px}
  .btn{padding:12px 18px}
  .tripgrid{gap:10px 12px}
}

/* ── footer ────────────────────────────────────────────────────────────────── */
.ft{border-top:1px solid var(--line);background:#050505;padding:38px 0 0;margin-top:10px}
.ft-in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:30px}
.ft-brand img{height:44px;width:auto}
.ft-brand p{margin-top:12px;font-size:13px;color:var(--mut2);line-height:1.65;max-width:290px}
.ft-soc{display:flex;gap:9px;margin-top:14px}
.ft-soc a{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--gold2);font-size:17px;transition:.2s}
.ft-soc a:hover{background:rgba(232,201,122,.12);border-color:var(--line2)}
.ft-col{display:grid;gap:9px;align-content:start}
.ft-col h5{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2);margin-bottom:4px}
.ft-col a{font-size:13.5px;color:var(--mut2);transition:color .18s}
.ft-col a:hover{color:var(--gold2)}
.ft-contact a{display:flex;align-items:flex-start;gap:9px;line-height:1.55}
.ft-contact .ic{font-size:16px;color:var(--gold2);margin-top:2px;flex:0 0 auto}
.ft-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:30px;padding:16px 18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--mut2)}
.ft-legal{display:flex;gap:18px}
.ft-legal a:hover{color:var(--gold2)}

/* ══ CITY CABS + JUNGLE SAFARI tiles ═══════════════════════════════════════════════════════════════
   The client's reference used bright pastel chips; here they are the site's own gold-on-black cards so
   the two new sections do not read as a different website bolted on.
   COLUMN COUNTS ARE CLASSES, NEVER INLINE STYLES — an inline grid-template-columns once beat the phone
   media query on this site and pushed the whole page sideways. */
.chips{display:grid;gap:10px;margin-top:16px}
.chips-4{grid-template-columns:repeat(4,1fr)}
.chips-3{grid-template-columns:repeat(3,1fr)}
.chip{display:flex;flex-direction:column;gap:3px;padding:12px 13px;border:1.2px solid var(--line);border-radius:14px;background:var(--card);transition:.18s}
.chip:hover{border-color:var(--line2);transform:translateY(-3px);box-shadow:0 16px 32px -22px rgba(232,201,122,.4)}
.chip-t{font-size:13px;font-weight:700;color:#fff;display:flex;align-items:center;gap:7px}
.chip-t .ic{color:var(--gold2);flex:0 0 auto}
.chip-m{font-size:11.5px;color:var(--mut)}
.chip-lg{padding:14px}
.cityhero{width:100%;justify-content:center;gap:9px;font-size:14px;padding:14px 18px}
.cityhero b{background:rgba(21,16,4,.22);color:#151004;font-size:10px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:999px}
.chips-note{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;margin-top:14px;font-size:12px;color:var(--mut)}
.chips-note span{display:inline-flex;align-items:center;gap:5px}
.chips-note .ic{color:var(--gold2)}
@media (max-width:900px){.chips-4,.chips-3{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.chips-4,.chips-3{grid-template-columns:1fr 1fr}.chip-t{font-size:12px}.chip-m{font-size:10.5px}.cityhero{font-size:13px}}

/* Visually hidden but present for screen readers and crawlers. The fleet cards print no vehicle name by
   the client's instruction; the name lives here and in the photo's alt so the card is still identifiable
   to anyone not looking at it. */
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Badge in the CARD's top-right corner (where the client marked it), above the photo frame. */
.vcard{position:relative}
.vcard .vcard-tag{top:10px;right:10px}
.vcard-art{margin-top:0}

/* ══ PER-KM PRICE LIST ═════════════════════════════════════════════════════════════════════════════ */
.plist{display:grid;gap:10px;margin-top:16px}
.prow{display:grid;grid-template-columns:96px 1fr auto auto;align-items:center;gap:14px;padding:10px 14px;border:1.2px solid var(--line);border-radius:14px;background:var(--card)}
.prow:hover{border-color:var(--line2)}
.prow-i{width:96px;aspect-ratio:16/9;border-radius:9px;overflow:hidden;background:none}
.prow-i img{width:100%;height:100%;object-fit:cover;display:block}
.prow-n b{display:block;font-size:14px;font-weight:700;color:#fff}
.prow-n i{font-style:normal;font-size:11.5px;color:var(--mut)}
.prow-p{text-align:right;line-height:1.1}
.prow-p b{font-size:19px;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.prow-p i{display:block;font-style:normal;font-size:10.5px;color:var(--mut)}
.prow-b{padding:8px 14px;font-size:12.5px;white-space:nowrap}
@media (max-width:640px){
  /* Two rows on a phone: art + name, then price + button. Column counts stay in CLASSES, never inline. */
  .prow{grid-template-columns:64px 1fr auto;gap:10px;padding:10px}
  .prow-i{width:64px}
  .prow-n b{font-size:13px}
  .prow-p b{font-size:17px}
  .prow-b{grid-column:1/-1;width:100%;text-align:center;justify-content:center}
}

/* ══ LOCATION: the GPS / Map buttons on a field, and the pin sheet ═════════════════════════════════ */
.fld{position:relative}
.fld-act{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;gap:6px}
.lbtn{display:inline-flex;align-items:center;gap:4px;padding:5px 8px;border:1px solid var(--line2);border-radius:9px;background:rgba(255,255,255,.04);color:var(--gold2);font-size:10px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;transition:.16s}
.lbtn:hover{background:rgba(232,201,122,.12)}
.lbtn .ic{font-size:13px}
.lbtn.is-busy{opacity:.5;pointer-events:none}
.lbtn.is-busy b::after{content:"…"}
/* MY OWN BUG: this padding was written as `.fld input`, which hit EVERY field — including Date & Time and
   Passengers, whose native controls then pushed past the card edge on a 375px screen. Scope it to the two
   fields that actually carry the buttons, and only when they do. */
.fld:has(.fld-act) input{padding-right:114px}
.fld:has(.fld-act .lbtn:only-child) input{padding-right:62px}
/* `:has()` is unsupported on older browsers — this fallback keys off the buttons' own field instead. */
.fld-has2 input{padding-right:114px}
.fld-has1 input{padding-right:62px}

.mapsheet{position:fixed;inset:0;z-index:80;display:grid;place-items:end center}
.mapsheet[hidden]{display:none}
.ms-scrim{position:absolute;inset:0;background:rgba(0,0,0,.66);backdrop-filter:blur(2px)}
.ms-card{position:relative;width:min(560px,100%);background:#0d0d0d;border:1.4px solid var(--line2);border-radius:20px 20px 0 0;padding:14px;display:grid;gap:10px}
@media (min-width:640px){.mapsheet{place-items:center}.ms-card{border-radius:20px}}
.ms-hd{display:flex;align-items:center;justify-content:space-between}
.ms-hd b{font-size:14.5px;color:#fff}
.ms-x{background:none;border:0;color:var(--mut);font-size:26px;line-height:1;cursor:pointer;padding:0 4px}
.ms-map{position:relative;height:min(46vh,320px);border-radius:14px;overflow:hidden;background:#111;cursor:grab;touch-action:none;overscroll-behavior:contain;user-select:none;-webkit-user-select:none}
.ms-map.is-drag{cursor:grabbing}
.ms-layer{position:absolute;inset:0;will-change:transform}
.ms-layer img{position:absolute;width:256px;height:256px;user-select:none;-webkit-user-drag:none}
/* The pin is fixed at the centre and the map moves under it — same model as the ride apps, and it means
   there is no hit-testing to get wrong. */
.ms-pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);pointer-events:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55))}
.ms-pin span{display:block;width:22px;height:22px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--grad);border:2px solid #151004}
.ms-pin::after{content:"";position:absolute;left:50%;top:2px;width:5px;height:5px;border-radius:50%;background:#151004;transform:translateX(-50%)}
.ms-gps{position:absolute;right:10px;bottom:10px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);background:rgba(13,13,13,.9);color:var(--gold2);font-size:17px;cursor:pointer}
.ms-zoom{position:absolute;right:10px;top:10px;display:grid;gap:6px}
.ms-zoom button{width:30px;height:30px;border-radius:8px;border:1px solid var(--line2);background:rgba(13,13,13,.9);color:#fff;font-size:16px;line-height:1;cursor:pointer}
.ms-adr{font-size:12.5px;color:var(--mut);min-height:18px;text-align:center}

/* ══ map sheet: type-to-search ═════════════════════════════════════════════════════════════════════ */
.ms-find{display:flex;gap:8px}
.ms-find input{flex:1;min-width:0;padding:10px 12px;border:1.2px solid var(--line2);border-radius:11px;background:rgba(255,255,255,.05);color:#fff;font-size:13px}
.ms-find input::placeholder{color:var(--mut)}
.ms-find input:focus{outline:0;border-color:var(--gold2);background:rgba(255,255,255,.08)}
.ms-find button{padding:10px 14px;border:0;border-radius:11px;background:var(--grad);color:#151004;font-size:12.5px;font-weight:800;cursor:pointer;white-space:nowrap}
/* Results sit between the search row and the map, so the list never covers the pin the customer is judging. */
.ms-res{list-style:none;margin:0;padding:0;max-height:180px;overflow-y:auto;border:1.2px solid var(--line);border-radius:12px;background:#111}
.ms-res[hidden]{display:none}
.ms-res-i{padding:9px 12px;border-bottom:1px solid var(--line);cursor:pointer}
.ms-res-i:last-child{border-bottom:0}
.ms-res-i:hover,.ms-res-i:focus{background:rgba(232,201,122,.10);outline:0}
.ms-res-i b{display:block;font-size:12.5px;font-weight:700;color:#fff}
.ms-res-i span{display:block;font-size:11px;color:var(--mut)}
.ms-res-i.is-msg{cursor:default;font-size:12px;color:var(--mut)}
.ms-res-i.is-msg:hover{background:none}

/* A one-line hint: people do not always try to drag a map that looks like a picture. */
.ms-hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);padding:5px 10px;border-radius:999px;background:rgba(7,7,7,.72);color:#e8e8e8;font-size:10.5px;white-space:nowrap;pointer-events:none}
.ms-map.is-drag .ms-hint{opacity:0}

/* ══ fleet card: badge no longer sits ON the car ═══════════════════════════════════════════════════
   The badge is absolutely placed in the card's top-right, so the photo needs to start BELOW it. The gap
   is given to EVERY card, tagged or not, so all five stay the same height and their photos line up. */
.vcard-art{margin-top:26px}
.vcard .vcard-tag{top:8px;right:10px}
.vcard h3{margin-top:9px;text-align:center}
.vcard-m{justify-content:center;width:100%}

/* The CTA art is the client's TRANSPARENT PNG, so it gets NO frame and NO background — it sits directly on
   the band the way a cut-out should. `contain` (not `cover`) because cropping a cut-out clips the car
   itself, and the box carries the artwork's own 819:481 ratio so there is nothing to letterbox. */
.cta-art{aspect-ratio:819/481;background:none;border-radius:0;overflow:visible}
.cta-art img{width:100%;height:100%;object-fit:contain;display:block}

/* THE CAR IMAGES ARE TRANSPARENT CUT-OUTS. Every frame that held them used to paint a dark plate behind —
   which on a card that is already dark just read as a black box around the car. The frames are transparent
   now, so each car sits on the card's own surface. `contain` too: a cover crop on a cut-out clips wheels. */
.vcard-art img,.prow-i img,.rcard-art img{object-fit:contain!important;background:none}

/* ── MONTHLY CAR RENTAL ────────────────────────────────────────────────────────────────────────
   A row of calls to action under the corporate section. Centred, wraps on a phone, and the buttons
   keep their own widths — column counts stay OUT of inline styles here (see the layout bug that
   pushed the whole page sideways when a repeat(5,1fr) was set inline). */
.brow{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}
@media (max-width:560px){
  .brow{gap:8px}
  .brow .btn{width:100%;justify-content:center}
}

/* ⚠️ SECTION TITLES MUST BE ALLOWED TO WRAP ON A PHONE.
   `.st h2` carries white-space:nowrap, so the instant a heading is longer than the screen it pushes the
   WHOLE DOCUMENT sideways — 390px viewport, 476px scrollWidth, the same class of bug the owner reported
   when a repeat(5,1fr) was set inline. The gold rules either side are decoration; the heading is not. */
@media (max-width:700px){
  .st h2{white-space:normal;min-width:0;text-align:center;text-wrap:balance}
}