/* ==========================================================================
   ROTURO TRANSFERS
   Toyota Voxy · private hire · Nairobi
   Vanilla CSS. No framework, no dependencies.

   1.  Tokens
   2.  Reset & base
   3.  Typography
   4.  Layout primitives
   5.  Buttons & links
   6.  Decorative shapes
   7.  Header
   8.  Hero + driver card
   9.  Trust band
   10. About split
   11. Service cards (trip types)
   12. Steps
   13. Gallery strip + video feature
   14. Banner
   15. FAQ
   16. Booking wizard + calendar
   17. Footer
   18. Sticky mobile bar
   19. Full-screen viewer
   20. Draft helper
   21. Motion & print
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{
  /* Ground + text */
  --ink:#10232B;
  --ink-soft:#4A5C61;

  /* Brand */
  --amber:#AD5F1B;        /* primary action */
  --amber-dark:#8C4A12;   /* primary action, hover */
  --amber-lit:#E7AE5A;    /* accents on dark ground */
  --teal:#1B6E63;         /* secondary accent, ticks */

  /* Neutrals */
  --sand:#F6F2EA;
  --sand-2:#EDE6D9;
  --cream:#FFFDF9;
  --line:#DCD3C4;
  --line-dark:rgba(255,255,255,.16);

  /* Utility */
  --whatsapp:#25D366;
  --danger:#9E2B25;

  /* Type */
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  /* Space */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* Radius */
  --r-sm:6px; --r-md:14px; --r-lg:24px; --r-xl:32px; --r-pill:999px;

  /* Shadow */
  --sh-1:0 1px 2px rgba(16,35,43,.05), 0 4px 12px -6px rgba(16,35,43,.10);
  --sh-2:0 2px 6px rgba(16,35,43,.06), 0 24px 48px -24px rgba(16,35,43,.28);
  --sh-3:0 40px 80px -40px rgba(6,14,18,.55);

  /* Metrics */
  --wrap:1180px;
  --gut:20px;
  --hdr-h:64px;
}

@media (min-width:760px){
  :root{ --gut:32px; --hdr-h:76px; }
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }

/* Elements carrying the hidden attribute must never be shown, even when a
   component rule gives them a display value. Without this, .lb, .done and
   #bookdone would render as empty boxes before JS runs. */
[hidden]{ display:none !important; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:auto;
  scroll-padding-top:calc(var(--hdr-h) + 16px);
}

body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

@media (min-width:760px){
  body{ font-size:17px; }
}

img,svg,video,iframe{ display:block; max-width:100%; }
img{ height:auto; }

a{ color:inherit; text-decoration:none; }

button{
  font:inherit;
  color:inherit;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
}

input,select,textarea{
  font:inherit;
  color:inherit;
}

ul,ol{ margin:0; padding:0; list-style:none; }

:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
}

[hidden]{ display:none !important; }

/* Visually hidden but reachable by screen readers. */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1,h2,h3{
  margin:0;
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:-.015em;
}

h1{ font-size:clamp(34px,7.4vw,58px); line-height:1.05; }
h2{ font-size:clamp(27px,4.6vw,42px); line-height:1.1; }
h3{ font-size:clamp(19px,2.2vw,23px); line-height:1.28; }

p{ margin:0; max-width:68ch; }

.eyebrow{
  margin:0;
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--amber);
  max-width:none;
}

.eyebrow--light{ color:var(--amber-lit); }

.lede{
  font-size:clamp(16px,1.9vw,18px);
  color:var(--ink-soft);
  line-height:1.7;
}

/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}

.wrap--narrow{ max-width:820px; }

.sec{ padding:var(--s8) 0; }
@media (min-width:760px){ .sec{ padding:var(--s9) 0; } }

.sec--alt{ background:var(--sand-2); }

.sec__head{
  display:flex;
  flex-direction:column;
  gap:var(--s3);
  margin-bottom:var(--s6);
}

.sec__head h2{ max-width:22ch; }

.sec__note{
  color:var(--ink-soft);
  font-size:15px;
  max-width:44ch;
}

@media (min-width:900px){
  .sec__head{
    flex-direction:row;
    align-items:flex-end;
    justify-content:space-between;
    gap:var(--s7);
    margin-bottom:var(--s7);
  }
  .sec__head--stack{
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:var(--s3);
  }
  .sec__head--stack h2{ max-width:26ch; }
}

.sec__head--light h2{ color:#fff; }
.sec__head--light .sec__note{ color:rgba(255,255,255,.72); }

.split{
  display:grid;
  gap:var(--s7);
}

@media (min-width:900px){
  .split{
    grid-template-columns:1.05fr .95fr;
    gap:var(--s9);
    align-items:center;
  }
}

.split__text > * + *{ margin-top:var(--s4); }

.split__fig{ margin:0; }

.split__fig img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
}

.split__actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s3);
  margin-top:var(--s5);
}

/* ==========================================================================
   5. BUTTONS & LINKS
   ========================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s2);
  min-height:48px;
  padding:13px 24px;
  border-radius:var(--r-pill);
  border:1px solid transparent;
  font-size:15px;
  font-weight:600;
  line-height:1;
  text-align:center;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease, transform .2s ease,
             box-shadow .2s ease, border-color .2s ease;
}

.btn svg{ flex:0 0 auto; }

.btn--primary{
  background:var(--amber);
  color:#fff;
}
.btn--primary:hover{
  background:var(--amber-dark);
  transform:translateY(-2px);
  box-shadow:0 12px 24px -12px rgba(173,95,27,.7);
}

.btn--outline{
  background:transparent;
  border-color:var(--line);
  color:var(--ink);
}
.btn--outline:hover{
  border-color:var(--ink);
  transform:translateY(-2px);
}

.btn--ghost{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.45);
  color:#fff;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.btn--ghost:hover{
  background:rgba(255,255,255,.22);
  transform:translateY(-2px);
}

.btn--lg{ min-height:54px; padding:16px 30px; font-size:16px; }

/* Quiet action for use on the light result panel, where .btn--ghost would
   be white-on-cream and vanish. */
.done__quiet{
  appearance:none;
  -webkit-appearance:none;
  background:none;
  border:0;
  padding:8px 2px;
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  color:var(--amber);
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.done__quiet:hover{ color:var(--amber-dark); }

.btn--block{ width:100%; }

.btn[disabled],
.btn[aria-disabled="true"]{
  opacity:.5;
  pointer-events:none;
}

.arrow-link{
  display:inline-flex;
  align-items:center;
  gap:var(--s2);
  font-size:13px;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--amber);
  border-bottom:1.5px solid currentColor;
  padding-bottom:2px;
  transition:gap .2s ease, color .2s ease;
}
.arrow-link:hover{ gap:14px; color:var(--amber-dark); }

.arrow-link--light{ color:var(--amber-lit); }
.arrow-link--light:hover{ color:#fff; }

/* ==========================================================================
   6. DECORATIVE SHAPES
   ========================================================================== */
.shapes{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

.shapes i{
  position:absolute;
  display:block;
  border-radius:24px;
}

.shapes__a,
.shapes__b,
.shapes__c,
.shapes__d{
  width:clamp(180px,26vw,340px);
  aspect-ratio:1;
}

.shapes__a{
  top:-14%;
  right:-8%;
  transform:rotate(24deg);
  background:linear-gradient(140deg, rgba(231,174,90,.20), rgba(231,174,90,0));
}

.shapes__b{
  bottom:-22%;
  left:-10%;
  transform:rotate(-16deg);
  background:linear-gradient(140deg, rgba(173,95,27,.30), rgba(173,95,27,0));
}

.shapes__c{
  top:-18%;
  left:-6%;
  transform:rotate(12deg);
  background:linear-gradient(140deg, rgba(231,174,90,.22), rgba(231,174,90,0));
}

.shapes__d{
  bottom:-26%;
  right:-8%;
  transform:rotate(-22deg);
  background:linear-gradient(140deg, rgba(27,110,99,.34), rgba(27,110,99,0));
}

/* ==========================================================================
   7. HEADER
   ========================================================================== */
.hdr{
  position:sticky;
  top:0;
  z-index:60;
  height:var(--hdr-h);
  background:rgba(246,242,234,.80);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  transition:background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
  border-bottom:1px solid transparent;
}

.hdr.is-stuck{
  background:rgba(246,242,234,.96);
  border-bottom-color:var(--line);
  box-shadow:0 1px 0 rgba(16,35,43,.04), 0 12px 28px -24px rgba(16,35,43,.35);
}

.hdr__in{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s5);
}

.brand{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
}

.brand__logo{
  height:34px;
  width:auto;
}
@media (min-width:760px){ .brand__logo{ height:38px; } }

.nav{
  display:none;
  align-items:center;
  gap:var(--s5);
}

.nav a{
  position:relative;
  font-size:14px;
  font-weight:500;
  color:var(--ink-soft);
  padding-block:6px;
  transition:color .2s ease;
}
.nav a:hover{ color:var(--ink); }

.nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:var(--amber);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}
.nav a:hover::after{ transform:scaleX(1); }

.hdr__cta{
  display:none;
  min-height:42px;
  padding:10px 20px;
  font-size:14px;
}

@media (min-width:900px){
  .nav{ display:flex; }
  .hdr__cta{ display:inline-flex; }
}

/* Compact CTA that shows on phones. */
.hdr__cta--sm{
  display:inline-flex;
  min-height:40px;
  padding:9px 16px;
  font-size:13px;
}

@media (min-width:900px){
  .hdr__cta--sm{ display:none; }
}

/* ==========================================================================
   8. HERO + DRIVER CARD
   ========================================================================== */
.hero{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:min(88vh,740px);
  margin-top:calc(var(--hdr-h) * -1);
  padding-top:var(--hdr-h);
  background:var(--ink);
  isolation:isolate;
  overflow:hidden;
}

.hero__media{
  position:absolute;
  inset:0;
  z-index:-2;
}

.hero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(to bottom, rgba(9,20,25,.92) 0%, rgba(9,20,25,.52) 46%, rgba(9,20,25,.62) 100%),
    linear-gradient(to right, rgba(9,20,25,.72) 0%, rgba(9,20,25,.10) 62%, rgba(9,20,25,0) 100%);
}

.hero__in{
  width:100%;
  display:grid;
  gap:var(--s7);
  padding-block:var(--s8) var(--s9);
}

@media (min-width:900px){
  .hero__in{
    grid-template-columns:minmax(0,1fr) clamp(330px,30vw,380px);
    align-items:end;
    gap:var(--s7);
    padding-block:var(--s9) var(--s9);
  }
}

.hero__text > * + *{ margin-top:var(--s4); }

.hero__h1{
  color:#fff;
  max-width:17ch;
  text-shadow:0 1px 28px rgba(0,0,0,.42);
}

.hero__h1 em{
  font-style:normal;
  color:var(--amber-lit);
}

.hero__sub{
  color:rgba(255,255,255,.84);
  font-size:clamp(16px,2vw,18px);
  line-height:1.65;
  max-width:52ch;
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s3);
  margin-top:var(--s6);
}

.assure{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s2) var(--s4);
  margin-top:var(--s6);
  max-width:640px;
}

@media (min-width:620px){
  .assure{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

.assure li{
  position:relative;
  padding-left:18px;
  font-size:13px;
  line-height:1.45;
  color:rgba(255,255,255,.78);
}

.assure li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--amber-lit);
}

/* --- Floating driver / vehicle card ------------------------------------- */
.dcard{
  --dcard-opacity:0;
  position:relative;
  align-self:end;
  justify-self:start;
  width:100%;
  max-width:380px;
  padding:var(--s5);
  border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.22);
  background:
    radial-gradient(120% 120% at 15% 0%, rgba(231,174,90,.22), rgba(231,174,90,0) 58%),
    linear-gradient(160deg, rgba(28,52,61,.86), rgba(12,26,32,.88));
  -webkit-backdrop-filter:blur(18px) saturate(1.28);
  backdrop-filter:blur(18px) saturate(1.28);
  box-shadow:var(--sh-3);
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s ease, transform .5s ease;
}

.dcard.is-ready{ opacity:var(--dcard-opacity); transform:none; }
.dcard.is-live{ transition:opacity .16s linear; }

.dcard__top{
  display:flex;
  align-items:center;
  gap:var(--s4);
}

.dcard__face{
  flex:0 0 auto;
  width:60px;
  height:60px;
  border-radius:50%;
  overflow:hidden;
  background:linear-gradient(150deg, var(--amber), var(--amber-dark));
  border:2px solid rgba(255,255,255,.28);
  display:grid;
  place-items:center;
}

.dcard__face img{ width:100%; height:100%; object-fit:cover; }

.dcard__mono{
  font-family:var(--serif);
  font-size:21px;
  font-weight:600;
  color:#fff;
  letter-spacing:.02em;
}

.dcard__name{
  font-family:var(--serif);
  font-size:20px;
  font-weight:600;
  color:#fff;
  line-height:1.2;
}

.dcard__name,
.dcard__role{ display:block; }

.dcard__who{ min-width:0; }

.dcard__role{
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--amber-lit);
  margin-top:2px;
}

.dcard__quote{
  margin-top:var(--s4);
  padding-top:var(--s4);
  border-top:1px solid rgba(255,255,255,.16);
  font-size:14.5px;
  line-height:1.6;
  color:rgba(255,255,255,.86);
  max-width:none;
}

.dcard__meta{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s2) var(--s4);
  margin-top:var(--s4);
  padding-top:var(--s4);
  border-top:1px solid rgba(255,255,255,.16);
}

.dcard__meta span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  color:rgba(255,255,255,.74);
}

.dcard__meta svg{ flex:0 0 auto; opacity:.8; }

.dcard__plate{
  font-variant-numeric:tabular-nums;
  letter-spacing:.10em;
}

/* On very small screens the card would crowd the hero. */
@media (max-width:899px){
  .dcard{ max-width:none; }
}

/* ==========================================================================
   9. TRUST BAND
   ========================================================================== */
.band{
  position:relative;
  overflow:hidden;
  background:var(--ink);
  color:#fff;
  padding:var(--s8) 0;
}

.band__h{
  color:#fff;
  max-width:24ch;
  margin-bottom:var(--s6);
}

.band__grid{
  display:grid;
  gap:var(--s5);
}

@media (min-width:620px){
  .band__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s6); }
}
@media (min-width:1000px){
  .band__grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

.band__item{
  padding-top:var(--s4);
  border-top:1px solid var(--line-dark);
}

.band__num{
  display:block;
  font-family:var(--serif);
  font-size:14px;
  letter-spacing:.1em;
  color:var(--amber-lit);
  margin-bottom:var(--s3);
}

.band__item h3{
  color:#fff;
  font-size:19px;
  margin-bottom:var(--s2);
}

.band__item p{
  font-size:14.5px;
  line-height:1.6;
  color:rgba(255,255,255,.72);
  max-width:34ch;
}

/* ==========================================================================
   10. ABOUT SPLIT
   ========================================================================== */
.verify{
  display:grid;
  gap:var(--s3);
  margin-top:var(--s5);
  padding-top:var(--s5);
  border-top:1px solid var(--line);
}

@media (min-width:520px){
  .verify{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.verify li{
  position:relative;
  padding-left:28px;
  font-size:14.5px;
  line-height:1.5;
  color:var(--ink-soft);
}

.verify li::before{
  content:"";
  position:absolute;
  left:0;
  top:3px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:rgba(27,110,99,.12);
}

.verify li::after{
  content:"";
  position:absolute;
  left:6px;
  top:8px;
  width:6px;
  height:3px;
  border-left:2px solid var(--teal);
  border-bottom:2px solid var(--teal);
  transform:rotate(-45deg);
}

/* ==========================================================================
   11. SERVICE CARDS (TRIP TYPES)
   ========================================================================== */
.land{
  position:relative;
  overflow:hidden;
  background:var(--ink);
  color:#fff;
  padding:var(--s8) 0;
}
@media (min-width:760px){ .land{ padding:var(--s9) 0; } }

.trips{
  display:grid;
  gap:var(--s4);
}

@media (min-width:640px){
  .trips{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5); }
}
@media (min-width:1040px){
  .trips{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

.trip{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--s3);
  padding:var(--s5);
  border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  transition:transform .25s ease, border-color .25s ease, background-color .25s ease;
}

.trip:hover{
  transform:translateY(-3px);
  border-color:rgba(231,174,90,.42);
  background:linear-gradient(165deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
}

/* The flagship card gets a full-width slot on wide screens. */
@media (min-width:1040px){
  .trip--wide{ grid-column:span 2; }
}

.trip__num{
  font-family:var(--serif);
  font-size:13px;
  letter-spacing:.12em;
  color:var(--amber-lit);
}

.trip__ico{
  width:40px;
  height:40px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:rgba(231,174,90,.14);
  color:var(--amber-lit);
}

/* Lucide glyphs sit on a 24px grid with tighter internal padding than the
   previous set, so they fill their box more. The stroke is set to 1.8 inside
   the sprite rather than Lucide's default 2, because 2 goes blunt once the
   glyph drops below about 24px, and most icons here render at 13 to 22px. */
.trip__ico svg{ width:22px; height:22px; }

.trip__title{
  color:#fff;
  font-size:20px;
}

.trip__p{
  font-size:14.5px;
  line-height:1.6;
  color:rgba(255,255,255,.72);
  max-width:none;
}

.trip__list{
  display:grid;
  gap:6px;
  margin-top:auto;
  padding-top:var(--s3);
  border-top:1px solid rgba(255,255,255,.12);
}

.trip__list li{
  position:relative;
  padding-left:16px;
  font-size:13px;
  line-height:1.5;
  color:rgba(255,255,255,.66);
}

.trip__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.6em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--amber-lit);
  opacity:.75;
}

.trip__foot{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--s3);
  padding-top:var(--s3);
  border-top:1px solid rgba(255,255,255,.12);
}

.trip__rate{
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.52);
}

.trip__price{
  font-family:var(--serif);
  font-size:17px;
  color:var(--amber-lit);
  white-space:nowrap;
}

.trip__go{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--amber-lit);
  transition:gap .2s ease, color .2s ease;
}
.trip__go:hover{ gap:11px; color:#fff; }

.land__foot{
  margin-top:var(--s6);
  font-size:14px;
  color:rgba(255,255,255,.6);
  max-width:56ch;
}

/* ==========================================================================
   12. STEPS
   ========================================================================== */
.steps{
  display:grid;
  gap:var(--s4);
}

@media (min-width:620px){ .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5); } }
@media (min-width:1000px){ .steps{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

.steps__item{
  padding:var(--s5);
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  transition:transform .25s ease, box-shadow .25s ease;
}

.steps__item:hover{
  transform:translateY(-3px);
  box-shadow:var(--sh-2);
}

.steps__num{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--amber);
  color:#fff;
  font-family:var(--serif);
  font-size:15px;
  font-weight:600;
  margin-bottom:var(--s4);
}

.steps__item h3{ font-size:19px; margin-bottom:var(--s2); }

.steps__item p{
  font-size:14.5px;
  line-height:1.6;
  color:var(--ink-soft);
  max-width:none;
}

/* ==========================================================================
   13. GALLERY STRIP + VIDEO FEATURE
   ========================================================================== */
.shots{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s2);
  max-width:900px;
}

@media (min-width:620px){
  .shots{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--s3); }
}

.shot{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  overflow:hidden;
  border-radius:var(--r-md);
  border:2px solid transparent;
  background:var(--sand-2);
  transition:border-color .2s ease, transform .2s ease;
}

.shot img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  transition:transform .5s ease;
}

.shot:hover{ border-color:var(--amber-lit); }
.shot:hover img{ transform:scale(1.04); }

.shot__play{
  position:absolute;
  inset:0;
  margin:auto;
  width:46px;
  height:46px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff;
  color:var(--ink);
  box-shadow:0 8px 20px -8px rgba(0,0,0,.5);
  pointer-events:none;
}

.shot__tag{
  position:absolute;
  left:10px;
  bottom:10px;
  padding:4px 10px;
  border-radius:var(--r-pill);
  background:rgba(9,20,25,.78);
  color:#fff;
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  pointer-events:none;
}

/* The film tile runs a silent loop in place of the still once it is on
   screen. The still stays underneath so a refused autoplay, or a browser
   with no video support, falls back to the poster instead of a black hole.
   The loop itself is decorative: the tile opens the full player on tap. */
.shot__film{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .6s ease, transform .5s ease;
  pointer-events:none;
}

.shot--live .shot__film{ opacity:1; }
.shot:hover .shot__film{ transform:scale(1.04); }

/* Once the loop is moving, shrink the play badge. It still says "tap for
   the full film", but it stops covering the car. */
.shot--live .shot__play{
  width:34px;
  height:34px;
  background:rgba(255,255,255,.78);
  box-shadow:0 6px 14px -6px rgba(0,0,0,.45);
}

.vfeature{
  display:grid;
  gap:var(--s5);
  margin:var(--s7) 0 0;
}

@media (min-width:900px){
  .vfeature{
    grid-template-columns:1.15fr .85fr;
    align-items:center;
    gap:var(--s8);
  }
}

.vid{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--ink);
  box-shadow:var(--sh-2);
}

.vid__face{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  cursor:pointer;
}

.vid__face img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  transition:transform .6s ease, opacity .3s ease;
}

.vid__face:hover img{ transform:scale(1.03); opacity:.86; }

.vid__play{
  position:absolute;
  inset:0;
  margin:auto;
  width:78px;
  height:78px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.94);
  color:var(--ink);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.7);
  transition:transform .25s ease;
}

.vid__face:hover .vid__play{ transform:scale(1.06); }

.vid__note{
  position:absolute;
  inset:auto 16px 16px;
  padding:10px 14px;
  border-radius:var(--r-sm);
  background:rgba(9,20,25,.82);
  color:#fff;
  font-size:13px;
  text-align:left;
}

.vid iframe{
  width:100%;
  aspect-ratio:16/9;
  border:0;
}

/* The walkaround film replaces the poster in place, so it must fill the
   same 16:9 frame the poster occupied. */
.vid video{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  background:var(--ink);
}

.vid--empty .vid__face{ cursor:default; }

.vfeature__cap{ margin:0; }
.vfeature__cap > * + *{ margin-top:var(--s3); }

.vfeature__tag{
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--amber);
}

.vfeature__h{ font-size:clamp(22px,3vw,30px); }

.vfeature__p{
  font-size:15px;
  line-height:1.65;
  color:var(--ink-soft);
}

.vids__foot{
  margin-top:var(--s5);
  font-size:14px;
  color:var(--ink-soft);
}

/* ==========================================================================
   14. BANNER
   ========================================================================== */
.banner{
  position:relative;
  display:flex;
  align-items:center;
  min-height:52vh;
  min-height:min(52vh,520px);
  isolation:isolate;
  overflow:hidden;
  background:var(--ink);
}

.banner__media{
  position:absolute;
  inset:0;
  z-index:-2;
}

.banner__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  /* This asset is pre-cut to a ~3.1:1 band that ends just above the dent on
     the tailgate, so it matches the banner box almost exactly and needs no
     nudging. Centring is also the safe choice at other widths: a wider box
     only ever trims the top, never the bottom, so the dent stays out of shot. */
  object-position:50% 50%;
}

.banner::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(to right, rgba(9,20,25,.86), rgba(9,20,25,.46));
}

.banner__in{
  padding-block:var(--s8);
}

.banner__quote{
  margin-top:var(--s3);
  font-family:var(--serif);
  font-size:clamp(22px,4.2vw,38px);
  line-height:1.25;
  color:#fff;
  max-width:24ch;
}

.banner__quote em{
  font-style:normal;
  color:var(--amber-lit);
}

/* ==========================================================================
   15. FAQ
   ========================================================================== */
.faq{ border-top:1px solid var(--line); }

.faq__item{ border-bottom:1px solid var(--line); }

.faq__item summary{
  position:relative;
  padding:var(--s5) 44px var(--s5) 0;
  font-family:var(--serif);
  font-size:18px;
  font-weight:600;
  line-height:1.4;
  cursor:pointer;
  list-style:none;
}

.faq__item summary::-webkit-details-marker{ display:none; }

.faq__item summary::after{
  content:"";
  position:absolute;
  right:8px;
  top:calc(var(--s5) + 6px);
  width:12px;
  height:12px;
  border-right:2px solid var(--ink-soft);
  border-bottom:2px solid var(--ink-soft);
  transform:rotate(45deg);
  transition:transform .25s ease;
}

.faq__item[open] summary::after{ transform:rotate(-135deg); }

.faq__a{ padding-bottom:var(--s5); }
.faq__a p{
  font-size:15px;
  line-height:1.7;
  color:var(--ink-soft);
  max-width:64ch;
}
.faq__a p + p{ margin-top:var(--s3); }

/* ==========================================================================
   16. BOOKING WIZARD + CALENDAR
   ========================================================================== */
.book{
  position:relative;
  overflow:hidden;
  background:var(--sand-2);
  padding:var(--s8) 0;
}
@media (min-width:760px){ .book{ padding:var(--s9) 0; } }

.book__layout{
  display:grid;
  gap:var(--s7);
}

@media (min-width:1000px){
  .book__layout{
    grid-template-columns:minmax(0,320px) minmax(0,1fr);
    gap:var(--s8);
    align-items:start;
  }
}

.book__aside > * + *{ margin-top:var(--s4); }

.book__list{
  display:grid;
  gap:var(--s3);
  margin-top:var(--s5);
  padding-top:var(--s5);
  border-top:1px solid var(--line);
}

.book__list li{
  display:flex;
  gap:var(--s3);
  font-size:14.5px;
  line-height:1.5;
  color:var(--ink-soft);
}

.book__list svg{ flex:0 0 auto; color:var(--teal); margin-top:2px; }

.book__reach{
  margin-top:var(--s5);
  padding-top:var(--s5);
  border-top:1px solid var(--line);
  display:grid;
  gap:var(--s2);
  font-size:14.5px;
}

.book__reach a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--ink);
  font-weight:600;
  transition:color .2s ease;
}
.book__reach a:hover{ color:var(--amber); }

/* --- Wizard shell ------------------------------------------------------- */
.wiz{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-2);
  overflow:hidden;
}

.wiz__bar{
  display:flex;
  align-items:center;
  gap:var(--s2);
  padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--line);
  background:var(--sand);
}

.wiz__step{
  flex:1 1 0;
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--ink-soft);
  opacity:.55;
  transition:opacity .25s ease, color .25s ease;
}

.wiz__step.is-active{ opacity:1; color:var(--ink); }
.wiz__step.is-done{ opacity:1; color:var(--teal); }

.wiz__dot{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:50%;
  border:1.5px solid currentColor;
  font-size:11px;
  font-weight:700;
  line-height:1;
}

.wiz__step.is-active .wiz__dot{
  background:var(--amber);
  border-color:var(--amber);
  color:#fff;
}

.wiz__step.is-done .wiz__dot{
  background:var(--teal);
  border-color:var(--teal);
  color:#fff;
}

.wiz__step span:last-child{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media (max-width:599px){
  .wiz__step span:last-child{ display:none; }
  .wiz__step{ flex:0 0 auto; }
  .wiz__bar{ justify-content:center; gap:var(--s4); }
}

.wiz__body{
  padding:var(--s5);
}
@media (min-width:760px){ .wiz__body{ padding:var(--s6); } }

.wiz__panel > * + *{ margin-top:var(--s5); }

.wiz__panel[hidden]{ display:none !important; }

.wiz__head h3{ font-size:22px; }

/* The step heading takes programmatic focus on every panel change so screen
   readers announce the new step. It is not a control, so the focus ring just
   reads as a stray outline drawn around a title. */
.wiz__head h3:focus,
.wiz__head h3:focus-visible{ outline:none; }

.wiz__head p{
  margin-top:6px;
  font-size:14px;
  color:var(--ink-soft);
  max-width:52ch;
}

.wiz__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s3);
  margin-top:var(--s6);
  padding-top:var(--s5);
  border-top:1px solid var(--line);
}

.wiz__back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  font-weight:600;
  color:var(--ink-soft);
  transition:color .2s ease;
}
.wiz__back:hover{ color:var(--ink); }
.wiz__back[hidden]{ display:none !important; }

/* --- Trip type chooser -------------------------------------------------- */
.typecards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s2);
}

@media (min-width:700px){
  .typecards{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s3); }
}

.typecard{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  padding:12px 13px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--sand);
  text-align:left;
  transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.typecard:hover{ border-color:#C3B7A4; }

.typecard input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.typecard__ico{
  color:var(--amber);
  display:grid;
  place-items:center;
}

.typecard__ico svg{ width:21px; height:21px; }

.typecard__label{
  font-size:13px;
  font-weight:600;
  line-height:1.3;
  color:var(--ink);
}

.typecard:has(input:checked){
  border-color:var(--amber);
  background:#fff;
  box-shadow:0 0 0 3px rgba(173,95,27,.14);
}

.typecard:has(input:focus-visible){
  outline:2px solid var(--amber);
  outline-offset:2px;
}

/* Fallback for browsers without :has() */
.typecard.is-checked{
  border-color:var(--amber);
  background:#fff;
  box-shadow:0 0 0 3px rgba(173,95,27,.14);
}

/* --- Conditional trip detail panel -------------------------------------- */
.tripfields{
  display:grid;
  gap:var(--s4);
  margin-top:var(--s5);
  padding-top:var(--s5);
  border-top:1px solid var(--line);
}

.tripfields[hidden]{ display:none !important; }

/* --- Generic fields ----------------------------------------------------- */
.grid2{
  display:grid;
  gap:var(--s4);
}
@media (min-width:560px){
  .grid2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Inside the booking panel the available width is much narrower than the
   viewport, so the generic .grid2 two-up split squeezes selects until their
   labels clip. auto-fit lets these pairs fall back to one per row whenever
   there is not enough room. */
.wiz__panel[data-step="2"] .grid2 .grid2{
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
}

.grid3{
  display:grid;
  gap:var(--s4);
}
@media (min-width:700px){
  .grid3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.field label{
  font-size:13px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--ink);
}

.field label .req{ color:var(--amber); }

.field input,
.field select,
.field textarea{
  width:100%;
  min-height:50px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--sand);
  font-size:16px; /* stops iOS zooming on focus */
  line-height:1.4;
  transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.field textarea{
  min-height:96px;
  resize:vertical;
}

.field select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%234A5C61' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:38px;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--amber);
  background:#fff;
  box-shadow:0 0 0 3px rgba(173,95,27,.14);
}

.field input::placeholder,
.field textarea::placeholder{ color:#9C958A; }

.field__hint{
  font-size:12.5px;
  line-height:1.45;
  color:var(--ink-soft);
  max-width:none;
}

.field__err{
  display:none;
  font-size:12.5px;
  font-weight:500;
  line-height:1.4;
  color:var(--danger);
  max-width:none;
}

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea{
  border-color:var(--danger);
  background:#fff;
  box-shadow:0 0 0 3px rgba(158,43,37,.12);
}

.field.is-invalid .field__err{ display:block; }

.field.is-invalid .cal,
.field.is-invalid .seg{
  border-color:var(--danger);
  box-shadow:0 0 0 3px rgba(158,43,37,.10);
}

.field--full{ grid-column:1 / -1; }

/* Free-text fallback revealed when "Other" is chosen. */
.field--other{ display:none; }
.field--other.is-open{ display:flex; }

/* --- Segmented control -------------------------------------------------- */
.seg{
  display:flex;
  padding:4px;
  gap:4px;
  background:var(--sand);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
}

.seg label{
  flex:1 1 0;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:40px;
  padding:6px 12px;
  border-radius:var(--r-pill);
  font-size:13.5px;
  font-weight:600;
  color:var(--ink-soft);
  text-align:center;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.seg input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.seg label:has(input:checked){
  background:#fff;
  color:var(--ink);
  box-shadow:var(--sh-1);
}

.seg label.is-checked{
  background:#fff;
  color:var(--ink);
  box-shadow:var(--sh-1);
}

.seg label:has(input:focus-visible){
  outline:2px solid var(--amber);
  outline-offset:2px;
}

/* --- Calendar ----------------------------------------------------------- */
.cal{
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--sand);
  padding:var(--s4);
}

.cal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s3);
  margin-bottom:var(--s3);
}

.cal__label{
  font-family:var(--serif);
  font-size:17px;
  font-weight:600;
  max-width:none;
}

.cal__nav{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  transition:border-color .2s ease, color .2s ease, opacity .2s ease;
}

.cal__nav:hover{ border-color:var(--amber); color:var(--amber); }
.cal__nav[disabled]{ opacity:.35; pointer-events:none; }

.cal__dow,
.cal__grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:2px;
}

.cal__dow{
  margin-bottom:4px;
}

.cal__dow span{
  text-align:center;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding-block:4px;
}

.cal__day{
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:1;
  min-height:36px;
  border-radius:var(--r-sm);
  border:1px solid transparent;
  background:#fff;
  font-size:13.5px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  transition:background-color .16s ease, color .16s ease,
             border-color .16s ease, box-shadow .16s ease;
}

.cal__day:hover:not([disabled]){
  border-color:var(--amber);
  color:var(--amber);
}

.cal__day--empty{ background:transparent; pointer-events:none; }

.cal__day--today{ box-shadow:inset 0 0 0 1.5px var(--line); }

.cal__day--blocked,
.cal__day[disabled]{
  color:#6E675E;
  background:var(--sand-2);
  text-decoration:none;
  cursor:not-allowed;
}

.cal__day--blocked::after{
  content:"";
  position:absolute;
  bottom:4px;
  left:50%;
  transform:translateX(-50%);
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--danger);
  opacity:.55;
}

.cal__day[aria-pressed="true"],
.cal__day.is-selected{
  background:var(--amber);
  border-color:var(--amber);
  color:#fff;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 8px 18px -10px rgba(173,95,27,.9);
}

.cal__legend{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s2) var(--s4);
  margin-top:var(--s4);
  padding-top:var(--s3);
  border-top:1px solid var(--line);
  font-size:12px;
  color:var(--ink-soft);
}

.cal__legend span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.cal__swatch{
  width:11px;
  height:11px;
  border-radius:3px;
  border:1px solid var(--line);
  background:#fff;
}
.cal__swatch--sel{ background:var(--amber); border-color:var(--amber); }
.cal__swatch--out{ background:transparent; border-style:dashed; }

.cal__status{
  margin-top:var(--s3);
  font-size:13px;
  color:var(--ink-soft);
  min-height:1.4em;
  max-width:none;
}

.cal__status--warn{ color:var(--danger); }

/* Selected summary chip */
.picked{
  display:flex;
  align-items:center;
  gap:var(--s3);
  padding:12px 14px;
  border-radius:var(--r-md);
  border:1px dashed var(--line);
  background:var(--sand);
  font-size:14px;
  color:var(--ink-soft);
}

.picked.is-set{
  border-style:solid;
  border-color:rgba(27,110,99,.42);
  background:rgba(27,110,99,.06);
  color:var(--ink);
}

.picked strong{ font-weight:700; }

/* --- Review list -------------------------------------------------------- */
.review{
  display:grid;
  gap:1px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--line);
}

.review__row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--s4);
  padding:11px 14px;
  background:var(--cream);
  font-size:14px;
}

.review__row dt{
  flex:0 0 auto;
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

.review__row dd{
  margin:0;
  text-align:right;
  font-weight:600;
  color:var(--ink);
  word-break:break-word;
}

/* --- Result states ------------------------------------------------------ */
.done{
  display:grid;
  justify-items:start;
  gap:var(--s4);
  text-align:left;
}

.done__ico{
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  border-radius:50%;
  background:rgba(27,110,99,.12);
  color:var(--teal);
}

.done__ico--warn{
  background:rgba(173,95,27,.14);
  color:var(--amber);
}

.done h3{ font-size:24px; }

.done p{
  font-size:15px;
  line-height:1.65;
  color:var(--ink-soft);
}

.done__ref{
  display:inline-block;
  padding:8px 16px;
  border-radius:var(--r-sm);
  border:1px dashed var(--line);
  background:var(--sand);
  font-family:var(--serif);
  font-size:19px;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--ink);
}

.done__actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s3);
  margin-top:var(--s2);
}

.done__note{
  font-size:13px;
  color:var(--ink-soft);
  max-width:52ch;
}

.spin{
  display:inline-block;
  width:15px;
  height:15px;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:spin .7s linear infinite;
}

@keyframes spin{ to{ transform:rotate(360deg); } }

/* ==========================================================================
   17. FOOTER
   ========================================================================== */
.ftr{
  background:var(--ink);
  color:rgba(255,255,255,.72);
  padding-top:var(--s8);
}

.ftr__in{
  display:grid;
  gap:var(--s6);
  padding-bottom:var(--s7);
}

@media (min-width:760px){
  .ftr__in{
    grid-template-columns:1.5fr .8fr .8fr 1fr;
    gap:var(--s6);
  }
}

.ftr__brand img{ height:36px; width:auto; margin-bottom:var(--s4); }

.ftr__brand p{
  font-size:14px;
  line-height:1.65;
  max-width:34ch;
  color:rgba(255,255,255,.64);
}

.ftr h3{
  font-family:var(--sans);
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
  margin-bottom:var(--s4);
}

.ftr__nav,
.ftr__contact{
  display:grid;
  gap:var(--s2);
  align-content:start;
}

.ftr a{
  font-size:14px;
  color:rgba(255,255,255,.7);
  transition:color .2s ease;
}
.ftr a:hover{ color:var(--amber-lit); }

.ftr__social{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s2);
  align-content:start;
}

.ftr__social a{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid var(--line-dark);
  color:#fff;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}

.ftr__social a:hover{
  background:var(--amber);
  border-color:var(--amber);
  color:#fff;
}

.ftr__base{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--s3);
  padding-block:var(--s5) calc(var(--s7) + 64px);
  border-top:1px solid var(--line-dark);
  font-size:13px;
  color:rgba(255,255,255,.5);
}

.ftr__base p{ max-width:none; }

@media (min-width:760px){
  .ftr__base{ padding-bottom:var(--s5); }
}

/* ==========================================================================
   18. STICKY MOBILE BAR
   ========================================================================== */
.bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:70;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s2);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background:rgba(246,242,234,.96);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  transform:translateY(110%);
  transition:transform .3s ease;
}

.bar.is-visible{ transform:translateY(0); }

.bar a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  border-radius:var(--r-pill);
  font-size:14.5px;
  font-weight:600;
}

.bar__wa{ background:var(--whatsapp); color:#0B2E1A; }
.bar__book{ background:var(--amber); color:#fff; }

@media (min-width:760px){
  .bar{ display:none; }
}

/* ==========================================================================
   19. FULL-SCREEN VIEWER
   ========================================================================== */
body.lb-open{ overflow:hidden; }

.lb{
  position:fixed;
  inset:0;
  z-index:120;
  display:grid;
  place-items:center;
  padding:var(--s5);
  background:rgba(6,14,18,.94);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}

.lb__fig{
  margin:0;
  display:grid;
  gap:var(--s3);
  justify-items:center;
  max-width:min(1100px, 100%);
  max-height:100%;
}

.lb__fig img,
.lb__fig video{
  max-width:100%;
  max-height:74vh;
  width:auto;
  height:auto;
  border-radius:var(--r-md);
  box-shadow:var(--sh-3);
}

.lb__cap{
  font-size:14px;
  color:rgba(255,255,255,.78);
  text-align:center;
  max-width:none;
}

.lb__close{
  position:absolute;
  top:14px;
  right:14px;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  color:#fff;
  border:1px solid rgba(255,255,255,.24);
  transition:background-color .2s ease;
}
.lb__close:hover{ background:rgba(255,255,255,.26); }

.lb__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  color:#fff;
  border:1px solid rgba(255,255,255,.24);
  transition:background-color .2s ease;
}
.lb__nav:hover{ background:rgba(255,255,255,.26); }
.lb__nav--prev{ left:12px; }
.lb__nav--next{ right:12px; }

@media (max-width:620px){
  .lb__nav{ width:38px; height:38px; }
  .lb__nav--prev{ left:6px; }
  .lb__nav--next{ right:6px; }
}

/* ==========================================================================
   20. DRAFT HELPER (?draft=1)
   ========================================================================== */
.draft{
  position:fixed;
  left:12px;
  bottom:12px;
  z-index:130;
  max-width:360px;
  max-height:50vh;
  overflow:auto;
  padding:14px 16px;
  border-radius:var(--r-md);
  background:rgba(9,20,25,.96);
  color:#fff;
  font-size:12.5px;
  line-height:1.55;
  box-shadow:var(--sh-3);
}

.draft strong{
  display:block;
  margin-bottom:8px;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--amber-lit);
}

.draft ul{ display:grid; gap:4px; }
.draft li{ padding-left:14px; position:relative; word-break:break-word; }
.draft li::before{
  content:"·";
  position:absolute;
  left:2px;
}
.draft p{ max-width:none; }

/* ==========================================================================
   21. MOTION & PRINT
   ========================================================================== */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s ease, transform .6s ease;
}

.reveal.is-in{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .dcard{ opacity:1; transform:none; }
}

@media print{
  .hdr,
  .bar,
  .lb,
  .draft,
  .hero__actions,
  .split__actions,
  .vid__face,
  .shots,
  .wiz__foot,
  .cal__nav{
    display:none !important;
  }

  body{ background:#fff; color:#000; font-size:12pt; }
  .hero,
  .band,
  .land,
  .banner,
  .ftr{ background:#fff !important; color:#000 !important; }
  .hero::after,
  .banner::after{ display:none; }
  .sec{ padding:18pt 0; }
}