/* ─────────────────────────────────────────────────────────────────────────────
   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}
.hcar-s img{width:100%;height:auto;background:#000}  /* natural ratio — the artwork is finished, never crop it */
.hcar-dots{display:flex;justify-content:center;gap:7px;padding:12px 0 2px}
.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}
.vcard-art{margin:10px 0 8px;min-height:74px;display:grid;place-items:center}
.vcard-art svg,.vcard-art img{width:100%;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. */
.vcard-tag{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;margin-bottom:8px}
.vcard-tag-ghost{background:none;padding:4px 0;min-height:0}
.vcard-tag-ghost::after{content:"";display:block;height:11px}
.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}
.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}}
/* 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{border:1.4px solid var(--line2);border-radius:16px;overflow:hidden;background:var(--card)}
  .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:210px;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)}