/* ============ Lux Extreme SV ============ */
:root{
  --ink:#14151a;
  --ink-soft:#3a3d45;
  --muted:#71757e;
  --line:#e4e6ea;
  --bg:#ffffff;
  --bg-2:#eceef2;
  --bg-3:#dde1e8;
  --obsidian:linear-gradient(155deg,#2a2e36 0%,#191c21 40%,#101216 70%,#070809 100%);
  --obsidian-soft:linear-gradient(160deg,#2a2d34,#141519);
  --silver:linear-gradient(135deg,#f3f4f6 0%,#c5cad1 22%,#9aa0a8 50%,#d7dbe0 74%,#aeb3bb 100%);
  /* directional: dark on the text (left) side, fading to fully transparent so the image stays bright on the other side */
  --photo-scrim:linear-gradient(90deg,rgba(8,9,11,.72) 0%,rgba(8,9,11,.48) 24%,rgba(8,9,11,.2) 46%,rgba(8,9,11,0) 66%);
  --photo-scrim-right:linear-gradient(270deg,rgba(8,9,11,.72) 0%,rgba(8,9,11,.48) 24%,rgba(8,9,11,.2) 46%,rgba(8,9,11,0) 66%);
  --txt-shadow:0 1px 2px rgba(0,0,0,.55),0 2px 9px rgba(0,0,0,.38);
  --silver-line:linear-gradient(90deg,transparent,#c8ccd3,transparent);
  --radius:16px;
  --radius-sm:11px;
  --shadow:0 24px 60px -28px rgba(20,21,26,.32);
  --shadow-sm:0 10px 30px -16px rgba(20,21,26,.28);
  --ease:cubic-bezier(.22,.61,.36,1);
  --display:"Fraunces",Georgia,serif;
  --sans:"Hanken Grotesk",system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.container{max-width:1200px;margin:0 auto;padding:0 28px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
em{font-style:italic}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--sans);font-weight:600;font-size:.86rem;letter-spacing:.02em;
  padding:.78em 1.5em;border-radius:999px;cursor:pointer;border:none;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .3s;
  white-space:nowrap;
}
.btn.lg{padding:1em 1.9em;font-size:.95rem}
.btn.sm{padding:.6em 1.15em;font-size:.8rem}
.btn.full{width:100%}
.btn-book{
  background:var(--obsidian);color:#fff;position:relative;overflow:hidden;
  box-shadow:0 12px 26px -14px rgba(10,11,13,.8),inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-book::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--silver-line);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.5;
}
.btn-book:hover{transform:translateY(-2px);box-shadow:0 18px 34px -14px rgba(10,11,13,.85)}
.btn-phone{
  background:#fff;color:var(--ink);border:1px solid var(--line);
}
.btn-phone .ico{width:15px;height:15px}
.btn-phone:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid #d4d7dd}
.btn-ghost:hover{background:#fff;transform:translateY(-2px);box-shadow:var(--shadow-sm)}
/* shine sweep on solid buttons */
.btn-book::before,.btn-silver::before{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-20deg);transition:left .7s var(--ease);pointer-events:none;z-index:1}
.btn-book:hover::before,.btn-silver:hover::before{left:150%}
.btn-book span,.btn-book{position:relative}

/* ---- Header (full-width at top → pill on scroll) ---- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;padding:0;
  transition:padding .55s var(--ease)}
.site-header.scrolled{padding:14px max(20px, calc((100% - 1240px) / 2))}
.bar{
  width:100%;display:flex;align-items:center;gap:26px;
  background:linear-gradient(90deg,#070809 0%,#15181d 50%,#262a31 100%);border-radius:0;
  padding:20px 42px;
  box-shadow:0 14px 40px -26px rgba(10,11,13,.7),inset 0 -1px 0 rgba(255,255,255,.06);
  position:relative;
  transition:border-radius .55s var(--ease),padding .55s var(--ease),box-shadow .55s var(--ease);
}
.site-header.scrolled .bar{
  border-radius:999px;padding:11px 16px 11px 26px;
  box-shadow:0 18px 40px -22px rgba(10,11,13,.7),inset 0 1px 0 rgba(255,255,255,.08);
}
.bar::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,255,255,.02),rgba(255,255,255,.14));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:0;
  transition:opacity .55s var(--ease);
}
.site-header.scrolled .bar::after{opacity:1}
.brand{display:flex;align-items:center;flex:none}
.brand-logo{height:33px;width:auto;filter:invert(1) brightness(1.6);transition:height .55s var(--ease)}
.site-header.scrolled .brand-logo{height:26px}
.nav{display:flex;gap:4px;margin:0 auto}
.nav-link{
  position:relative;font-size:.86rem;font-weight:500;color:#b9bcc3;padding:.5em 1em;border-radius:999px;
  letter-spacing:.01em;transition:color .25s,background .25s;
}
.nav-link::after{content:"";position:absolute;left:1em;right:1em;bottom:.32em;height:1px;
  background:currentColor;opacity:.55;transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease)}
.nav-link:hover::after{transform:scaleX(1)}
.nav-link:hover{color:#fff}
.nav-link.is-active{color:#fff;background:rgba(255,255,255,.07)}
.nav-link.is-active::after{transform:scaleX(0)}
.header-actions{display:flex;align-items:center;gap:10px}
.menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.menu-toggle span{width:22px;height:2px;background:#fff;border-radius:2px;transition:.3s}

/* ---- Hero ---- */
@keyframes spin{to{transform:rotate(360deg)}}
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:150px 0 70px;overflow:hidden;background:#0a0b0d}
.hero-photo{position:absolute;inset:0;z-index:0;background:#0a0b0d}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:70% 52%;
  animation:kenburns 26s ease-in-out infinite alternate}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:1}
/* when video is present, the poster img sits beneath as fallback (no motion) */
.hero-photo.has-video img{animation:none}
@keyframes kenburns{0%{transform:scale(1)}100%{transform:scale(1.06) translate(-0.8%,-0.5%)}}
.hero-scrim{position:absolute;inset:0;background:var(--photo-scrim)}

.hero-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:0 28px;width:100%}
.hero-copy{max-width:620px}
.eyebrow{display:flex;align-items:center;gap:.7em;font-size:.78rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#d5d8de;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.dash{width:30px;height:1px;background:rgba(255,255,255,.6)}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(2.9rem,6vw,5rem);line-height:1.02;
  letter-spacing:-.015em;margin:.32em 0 .3em;color:#fff;text-shadow:var(--txt-shadow)}
.hero h1 em{color:#dfe2e7}
.lede{font-size:1.18rem;color:#e8eaee;max-width:34ch;line-height:1.55;text-shadow:0 1px 4px rgba(0,0,0,.55)}
.hero-cta{display:flex;gap:12px;margin:2rem 0 2.4rem;flex-wrap:wrap}
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.14);box-shadow:none}
.hero-marks{display:flex;gap:34px;list-style:none;border-top:1px solid rgba(255,255,255,.22);padding-top:1.4rem;max-width:520px}
.hero-marks li{display:flex;flex-direction:column}
.hero-marks strong{font-family:var(--display);font-size:1.5rem;font-weight:500;color:#fff}
.hero-marks span{font-size:.78rem;color:#b6bac1;letter-spacing:.02em}

.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;
  width:24px;height:38px;border:1.5px solid rgba(255,255,255,.55);border-radius:14px;display:flex;justify-content:center;padding-top:7px}
.scroll-cue span{width:3px;height:8px;background:#fff;border-radius:2px;animation:cue 1.6s infinite}
@keyframes cue{0%{opacity:0;transform:translateY(-4px)}40%{opacity:1}100%{opacity:0;transform:translateY(8px)}}

/* ---- Trust strip ---- */
.trust{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-row{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;padding:18px 28px}
.trust-item{font-size:.84rem;color:var(--ink-soft);font-weight:500;letter-spacing:.01em}
.dot{width:4px;height:4px;border-radius:50%;background:#c2c6cd}

/* ---- Sections ---- */
.section{padding:108px 0}
/* light-section depth gradients (white → cool gray) */
#services{background:radial-gradient(120% 100% at 50% -15%,#ffffff 0%,#eceff3 55%,#dee2e9 100%)}
.section-about{background:linear-gradient(180deg,#ffffff 0%,#eef1f5 55%,#e0e4ea 100%)}
.trust{background:linear-gradient(180deg,#eef0f4,#e2e5ec)}
.section-head{max-width:640px;margin-bottom:54px}
.section-head.center{margin-inline:auto;text-align:center}
.kicker{display:inline-flex;align-items:center;gap:.5em;font-size:.78rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:1em}
.kick-star{width:14px;color:var(--ink-soft)}
.kicker.light,.kicker.light .kick-star{color:#9aa0a8}
.section h2{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.08;
  letter-spacing:-.012em}
.section-sub{margin-top:1rem;color:var(--ink-soft);font-size:1.08rem;max-width:54ch}
.section-head.center .section-sub{margin-inline:auto}

/* ---- Service cards ---- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px;
  position:relative;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;overflow:hidden}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:#d6d9df}
.card-num{font-family:var(--display);font-size:.95rem;color:var(--muted);letter-spacing:.05em}
.card h3{font-family:var(--display);font-weight:500;font-size:1.5rem;margin:.5rem 0 .6rem}
.card p{color:var(--ink-soft);font-size:.98rem}
.card-list{list-style:none;margin-top:1.2rem;display:flex;flex-direction:column;gap:.5rem}
.card-list li{font-size:.9rem;color:var(--ink-soft);padding-left:1.3em;position:relative}
.card-list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--silver)}
.card-feature{background:var(--obsidian);color:#fff;border:none}
.card-feature::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(150deg,rgba(255,255,255,.2),transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.card-feature .card-num{color:#9aa0a8}
.card-feature p{color:#c2c6cd}
.card-cta{display:inline-block;margin-top:1.4rem;font-weight:600;font-size:.9rem;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px;transition:border-color .3s}
.card-cta:hover{border-color:#fff}

/* ---- Steps ---- */
.section-steps{background:linear-gradient(180deg,#eef1f5 0%,#d8dce4 100%)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:s}
.step{text-align:center;padding:20px}
.step-no{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;
  background:var(--bg);border:1px solid var(--line);font-family:var(--display);font-size:1.4rem;
  box-shadow:var(--shadow-sm);margin-bottom:1.1rem}
.step h3{font-family:var(--display);font-weight:500;font-size:1.35rem;margin-bottom:.5rem}
.step p{color:var(--ink-soft);font-size:.96rem;max-width:32ch;margin-inline:auto}

/* ---- Fleet (dark) ---- */
.section-dark{background:var(--obsidian);color:#fff;position:relative;overflow:hidden}
.section-dark::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 55% at 16% -5%,rgba(150,162,186,.16),transparent 58%),
             radial-gradient(60% 60% at 105% 110%,rgba(86,98,120,.18),transparent 60%)}
.section-dark>.container{position:relative;z-index:1}
.section-dark h2{color:#fff}
.section-dark .section-sub{color:#aeb2ba}
.fleet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.fleet-card{background:linear-gradient(160deg,#23262d,#16181d);border-radius:var(--radius);overflow:hidden;
  border:1px solid rgba(255,255,255,.07);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.fleet-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.fleet-img{background:radial-gradient(circle at 50% 70%,#ffffff,#e9ebef);aspect-ratio:4/3;overflow:hidden;display:flex;align-items:center}
.fleet-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.fleet-card:hover .fleet-img img{transform:scale(1.05)}
.fleet-body{padding:22px 26px 28px}
.fleet-seats{display:inline-block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:#9aa0a8;font-weight:600;margin-bottom:.5rem}
.fleet-body h3{font-family:var(--display);font-weight:500;font-size:1.4rem;margin-bottom:.4rem}
.fleet-body p{color:#aeb2ba;font-size:.92rem}
.fleet-foot{text-align:center;margin-top:40px}
.btn-silver{background:var(--silver);color:#14151a;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.btn-silver:hover{transform:translateY(-2px);box-shadow:0 16px 30px -16px rgba(20,21,26,.5)}

/* ---- Showcase band ---- */
.showcase{position:relative;min-height:85vh;min-height:85svh;display:flex;align-items:center;overflow:hidden}
.showcase-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  animation:kenburns 30s ease-in-out infinite alternate}
.showcase:nth-of-type(even) .showcase-img{animation-duration:34s;animation-direction:alternate-reverse}
.showcase::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--photo-scrim)}
.showcase.right::after{background:var(--photo-scrim-right)}
.showcase-overlay{position:relative;z-index:2;width:100%;padding:60px 0;color:#fff}
.showcase-overlay .container{max-width:1200px}
.showcase-overlay h2{font-family:var(--display);font-weight:400;color:#fff;font-size:clamp(2rem,4vw,3rem);line-height:1.05;margin:.3rem 0 .8rem;
  text-shadow:var(--txt-shadow)}
.showcase-overlay p{color:#eef0f3;max-width:42ch;font-size:1.06rem;margin-bottom:1.6rem;
  text-shadow:0 1px 4px rgba(0,0,0,.6)}
.showcase-overlay .kicker{text-shadow:0 1px 3px rgba(0,0,0,.55)}
.showcase-overlay .btn{margin-top:.2rem}
/* right-aligned variant */
.showcase.right .container{text-align:right}
.showcase.right .showcase-overlay h2,.showcase.right .showcase-overlay p{margin-left:auto}
.showcase.right .kicker{flex-direction:row-reverse}

/* ---- About ---- */
.section-about{background:var(--bg)}
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.about-frame{position:relative;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);display:flex;align-items:flex-end;padding:24px;box-shadow:var(--shadow)}
.about-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  animation:kenburns 32s ease-in-out infinite alternate}
.about-stat{position:relative;font-size:.95rem;color:var(--ink-soft);background:rgba(255,255,255,.7);
  backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 18px}
.about-stat strong{display:block;font-family:var(--display);font-size:1.5rem;color:var(--ink);font-weight:500;margin-bottom:.2rem}
.about-copy h2{margin:.6rem 0 1rem}
.about-copy p{color:var(--ink-soft);margin-bottom:1rem;font-size:1.04rem}
.about-copy .btn{margin-top:.8rem}

/* ---- Book band ---- */
.book-band{position:relative;background:var(--obsidian);color:#fff;padding:90px 0;overflow:hidden}
.book-bg{position:absolute;inset:0;z-index:0;
  background:radial-gradient(55% 80% at 82% 18%,rgba(150,162,186,.16),transparent 60%),
             radial-gradient(50% 70% at 0% 100%,rgba(86,98,120,.16),transparent 60%)}
.band-star{position:absolute;top:-90px;left:-120px;width:480px;color:#fff;opacity:.05;animation:spin 100s linear infinite}
.book-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.book-copy h2{font-family:var(--display);font-weight:400;font-size:clamp(2rem,4vw,3.2rem);color:#fff;line-height:1.05}
.book-copy p{color:#aeb2ba;font-size:1.1rem;margin-top:1rem;max-width:34ch}

/* ---- Footer ---- */
.site-footer{background:var(--bg-2);border-top:1px solid var(--line);padding:64px 0 30px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px}
.foot-logo{height:26px;margin-bottom:1rem}
.foot-brand p{color:var(--muted);font-size:.92rem;max-width:30ch}
.foot-col h4{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:1rem;font-weight:700}
.foot-col a,.foot-col span{display:block;color:var(--ink-soft);font-size:.92rem;margin-bottom:.6rem;transition:color .25s}
.foot-col a:hover{color:var(--ink)}
.foot-col .btn-book{color:#fff;margin-top:.2rem}
.foot-col .btn-book:hover{color:#fff}
.foot-base{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:24px;
  font-size:.8rem;color:var(--muted);flex-wrap:wrap;gap:8px}

/* ---- Reveal animations ---- */
.reveal,.reveal-up{opacity:0;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal{transform:translateY(18px)}
.reveal-up{transform:translateY(30px)}
.reveal.in,.reveal-up.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

/* ---- Responsive ---- */
@media(max-width:900px){
  .nav{display:none}
  .header-actions{margin-left:auto}
  .header-actions .btn-phone span{display:none}
  .menu-toggle{display:flex}
  .hero-inner{grid-template-columns:1fr;gap:10px}
  .hero-art{order:-1;max-width:420px;margin:0 auto}
  .lede{max-width:none}
  .cards,.fleet-grid,.steps{grid-template-columns:1fr}
  .about-grid,.book-inner{grid-template-columns:1fr;gap:34px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .section{padding:74px 0}
}
@media(max-width:520px){
  .bar{padding:9px 10px 9px 16px;gap:10px}
  .hero-marks{gap:20px}
  .footer-grid{grid-template-columns:1fr}
  .foot-base{justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  .reveal,.reveal-up{opacity:1;transform:none}
}

/* mobile menu open state */
body.menu-open .nav{display:flex;position:absolute;top:72px;left:20px;right:20px;flex-direction:column;
  background:var(--obsidian);border-radius:18px;padding:14px;gap:2px;box-shadow:var(--shadow)}
body.menu-open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .menu-toggle span:nth-child(2){opacity:0}
body.menu-open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============ Sub-pages ============ */
.page-hero{position:relative;display:flex;align-items:flex-end;min-height:clamp(380px,54vh,560px);
  padding:150px 0 56px;overflow:hidden;background:#0a0b0d}
.page-hero.short{min-height:clamp(320px,44vh,460px)}
.page-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  animation:kenburns 32s ease-in-out infinite alternate}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,9,11,.45),rgba(8,9,11,.62))}
.page-hero-inner{position:relative;z-index:2;color:#fff}
.page-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,5vw,4rem);line-height:1.03;
  color:#fff;margin:.32em 0 .3em;text-shadow:var(--txt-shadow)}
.page-hero-sub{max-width:62ch;color:#e8eaee;font-size:1.12rem;line-height:1.55;text-shadow:0 1px 4px rgba(0,0,0,.5)}

/* fleet detail rows */
.vehicle{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center;padding:24px 0 0;border-top:1px solid var(--line)}
.vehicle:first-of-type{border-top:none;padding-top:8px}
.vehicle.rev .vehicle-img{order:2}
.vehicle-img{border-radius:var(--radius);overflow:hidden;background:radial-gradient(circle at 50% 72%,#fff,#e7eaef);
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);padding:18px}
.vehicle-img img{width:100%;height:100%;object-fit:contain;object-position:center}
.vehicle-body h2{font-family:var(--display);font-weight:500;font-size:1.8rem;margin:.3rem 0 .6rem;letter-spacing:-.01em}
.vehicle-body p{color:var(--ink-soft);margin-bottom:1.3rem}
.spec{list-style:none;display:flex;gap:30px;flex-wrap:wrap;margin-bottom:1.5rem}
.spec li{display:flex;flex-direction:column;gap:.15rem}
.spec li span{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.spec li strong{font-family:var(--display);font-weight:500;font-size:1.05rem;color:var(--ink)}

/* feature grid */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feature{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:26px;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.feature:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.feature h3{font-family:var(--display);font-weight:500;font-size:1.25rem;margin-bottom:.5rem}
.feature p{color:var(--ink-soft);font-size:.95rem}

/* popular trips */
.trip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.trip-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.trip-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.trip-img{position:relative;aspect-ratio:3/2;overflow:hidden}
.trip-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.trip-card:hover .trip-img img{transform:scale(1.06)}
.trip-tag{position:absolute;top:12px;left:12px;background:rgba(8,9,11,.66);color:#fff;font-size:.7rem;
  letter-spacing:.04em;padding:.4em .85em;border-radius:999px;backdrop-filter:blur(4px)}
.trip-body{padding:20px 22px 24px}
.trip-body h3{font-family:var(--display);font-weight:500;font-size:1.3rem;margin-bottom:.4rem}
.trip-body p{color:var(--ink-soft);font-size:.92rem;margin-bottom:1rem}
.trip-link{font-weight:600;font-size:.9rem;color:var(--ink);border-bottom:1px solid #cfd3da;padding-bottom:2px;transition:border-color .25s}
.trip-link:hover{border-color:var(--ink)}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:34px;align-items:start}
.contact-card{position:relative;background:var(--obsidian);color:#fff;border-radius:var(--radius);padding:30px 30px 28px}
.contact-card h2{font-family:var(--display);font-weight:400;color:#fff;font-size:1.6rem}
.bfield textarea{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:10px;
  padding:.8em .9em;color:#fff;font-family:var(--sans);font-size:.95rem;width:100%;min-width:0;resize:vertical}
.bfield textarea::placeholder{color:#7e828a}
.bfield textarea:focus{outline:none;border-color:#c8ccd3;background:rgba(255,255,255,.1)}
.contact-info{display:flex;flex-direction:column;gap:22px;padding:6px 0}
.info-block{display:flex;flex-direction:column;gap:.18rem}
.info-label{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.info-value{font-family:var(--display);font-weight:500;font-size:1.3rem;color:var(--ink)}
a.info-value:hover{color:var(--ink-soft)}
.info-sub{font-size:.85rem;color:var(--muted)}

@media(max-width:860px){
  .vehicle{grid-template-columns:1fr;gap:22px}
  .vehicle.rev .vehicle-img{order:0}
  .feature-grid,.trip-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media(min-width:861px) and (max-width:1100px){
  .feature-grid,.trip-grid{grid-template-columns:1fr 1fr}
}

/* fleet — cinematic scene under each vehicle */
.vehicle-scene{margin:18px 0 24px;border-radius:var(--radius);overflow:hidden;aspect-ratio:2/1;max-height:460px;box-shadow:var(--shadow-sm)}
.vehicle-scene img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform 1s var(--ease)}
.vehicle-scene:hover img{transform:scale(1.05)}
@media(max-width:860px){.vehicle-scene{aspect-ratio:16/10}}

/* home book band — single CTA (replaces inline form) */
.book-cta{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px}
.book-cta .quote-foot{margin:0;text-align:left}

/* ============ Lux Extreme SV additions ============ */

/* contact form fields (shared with the old .bform markup) */
.bform{display:flex;flex-direction:column;gap:13px;margin-top:20px}
.bfield{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.bfield-row{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.bfield label{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#9aa0a8;font-weight:600}
.bfield input,.bfield select,.bfield textarea{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:10px;padding:.78em .9em;color:#fff;font-family:var(--sans);font-size:.95rem;width:100%;min-width:0}
.bfield textarea{resize:vertical}
.bfield input::placeholder,.bfield textarea::placeholder{color:#7e828a}
.bfield input:focus,.bfield select:focus,.bfield textarea:focus{outline:none;border-color:#c8ccd3;background-color:rgba(255,255,255,.1)}
.bfield select{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:2.5em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa0a8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.bfield select option{color:#14151a}
.bform-foot{font-size:.74rem;color:#7e828a;text-align:center;margin-top:-2px}
.bform-success{text-align:center;padding:30px 10px 14px}
.success-mark{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;
  background:var(--silver);color:#14151a;font-size:1.6rem;font-weight:700;margin-bottom:1rem}
.bform-success h3{font-family:var(--display);font-weight:500;color:#fff;font-size:1.6rem;margin-bottom:.5rem}
.bform-success p{color:#aeb2ba;margin-bottom:1.4rem}
@media(max-width:520px){
  .bfield-row{grid-template-columns:1fr}
  .bform .bfield input,.bform .bfield select,.bform .bfield textarea{font-size:16px}
}

/* capacity badge on fleet cards */
.cap{display:inline-flex;align-items:center;gap:.45em;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:#14151a;background:var(--silver);border-radius:999px;padding:.42em .9em;margin-bottom:.7rem}
.section-dark .cap{color:#14151a}

/* capacity strip — the "we can move any group size" proof band */
.caps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cap-tile{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;text-align:center;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.cap-tile:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm)}
.cap-tile strong{display:block;font-family:var(--display);font-weight:500;font-size:2.2rem;line-height:1;margin-bottom:.4rem}
.cap-tile span{display:block;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:.6rem}
.cap-tile p{font-size:.92rem;color:var(--ink-soft)}

/* port / airport list */
.hub-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.hub{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px}
.hub h3{font-family:var(--display);font-weight:500;font-size:1.45rem;margin-bottom:.3rem}
.hub .hub-sub{font-size:.84rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:1.1rem}
.hub ul{list-style:none;display:grid;gap:.55rem}
.hub li{font-size:.95rem;color:var(--ink-soft);padding-left:1.35em;position:relative}
.hub li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--silver)}
.hub li strong{color:var(--ink);font-weight:600}

/* FAQ */
.faq{display:grid;gap:0;max-width:860px;margin:0 auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-family:var(--display);font-size:1.18rem;font-weight:500;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:12px;top:50%;width:10px;height:10px;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .faq-a{padding:0 40px 24px 0;color:var(--ink-soft);font-size:1rem;max-width:70ch}
.faq .faq-a p+p{margin-top:.8rem}

/* blog / article cards */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.post:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.post-img{aspect-ratio:3/2;overflow:hidden}
.post-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.post:hover .post-img img{transform:scale(1.06)}
.post-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.post-cat{font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:.55rem}
.post-body h3{font-family:var(--display);font-weight:500;font-size:1.28rem;line-height:1.2;margin-bottom:.5rem}
.post-body p{color:var(--ink-soft);font-size:.94rem;flex:1}
.post-soon{margin-top:1.1rem;font-size:.8rem;color:var(--muted);font-weight:600;letter-spacing:.04em}

/* prose block (blog intro / service-areas copy) */
.prose{max-width:70ch}
.prose h2{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,3vw,2.2rem);margin:2.4rem 0 .8rem;line-height:1.12}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--display);font-weight:500;font-size:1.3rem;margin:1.8rem 0 .5rem}
.prose p{color:var(--ink-soft);margin-bottom:1rem;font-size:1.04rem}
.prose ul{margin:0 0 1.2rem 0;padding-left:1.2em;color:var(--ink-soft)}
.prose li{margin-bottom:.45rem;font-size:1.02rem}

/* service-area region cards */
.area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.area{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.area:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm)}
.area h3{font-family:var(--display);font-weight:500;font-size:1.35rem;margin-bottom:.5rem}
.area p{color:var(--ink-soft);font-size:.95rem;margin-bottom:.9rem}
.area-list{font-size:.88rem;color:var(--muted);line-height:1.7}

/* footer: wider brand column now that Service Areas is in there.
   Scoped to desktop — a bare rule here would override the mobile
   media queries defined earlier in the file and force 4 columns at 390px. */
@media(min-width:901px){
  .footer-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}
}

@media(max-width:900px){
  .caps{grid-template-columns:1fr 1fr}
  .hub-grid,.post-grid,.area-grid{grid-template-columns:1fr}
}
@media(min-width:901px) and (max-width:1100px){
  .post-grid,.area-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .caps{grid-template-columns:1fr}
}

/* skip link */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:#101216;color:#fff;
  padding:.8em 1.4em;border-radius:0 0 12px 0;font-size:.9rem;font-weight:600}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid #c8ccd3;outline-offset:3px;border-radius:4px}
.section-dark :focus-visible,.book-band :focus-visible,.contact-card :focus-visible{outline-color:#fff}

/* contact form: not wired to email yet — inline fallback notice */
.form-notice{margin-top:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:12px;padding:16px 18px;color:#e0e2e6;font-size:.92rem;line-height:1.55}
.form-notice a{color:#fff;border-bottom:1px solid rgba(255,255,255,.45)}
/* success state — the same panel, but clearly not an error */
.form-notice.is-ok{border-color:rgba(226,192,122,.5);background:rgba(226,192,122,.1)}
.form-notice.is-ok strong{color:#f0e2c4}

/* Florida imagery is brighter than the Alpine set this system was built on —
   these photos need a second, vertical scrim under the copy to stay legible. */
.hero-scrim::after,.showcase::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,9,11,.24) 0%,rgba(8,9,11,0) 30%,rgba(8,9,11,0) 62%,rgba(8,9,11,.22) 100%)}
.hero-scrim{position:absolute;inset:0}
.showcase::before{z-index:1}
.page-hero::after{background:linear-gradient(180deg,rgba(8,9,11,.32),rgba(8,9,11,.6))}

/* footer CTA shouldn't stretch the full column */
.foot-col .btn-book{display:inline-flex;width:fit-content}
/* the about card sits over a portrait here, not a landscape — needs more opacity */
.about-stat{background:rgba(255,255,255,.9)}
/* our fleet shots are photographs, not cut-outs — fill the frame instead of letterboxing */
.vehicle-img{background:#e7eaef;padding:0}
.vehicle-img img{object-fit:cover}
.fleet-img{background:#e7eaef}

/* ---- WhatsApp ---- */
.btn-wa{background:#25d366;color:#0b2e18;font-weight:700;
  box-shadow:0 12px 26px -16px rgba(37,211,102,.9),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-wa:hover{background:#20bd5a;transform:translateY(-2px)}
.btn-wa .ico{width:17px;height:17px}
.btn-wa.lg .ico{width:20px;height:20px}

/* floating WhatsApp action */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:90;display:inline-flex;align-items:center;gap:.6em;
  background:#25d366;color:#0b2e18;font-family:var(--sans);font-weight:700;font-size:.9rem;letter-spacing:.01em;
  padding:.85em 1.25em;border-radius:999px;
  box-shadow:0 14px 34px -12px rgba(11,46,24,.55),0 2px 6px rgba(11,46,24,.25);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s}
.wa-float svg{width:23px;height:23px;flex:none}
.wa-float:hover{background:#20bd5a;transform:translateY(-3px);
  box-shadow:0 20px 40px -12px rgba(11,46,24,.6),0 2px 6px rgba(11,46,24,.25)}
@media(max-width:640px){
  .wa-float{right:14px;bottom:14px;padding:0;width:56px;height:56px;justify-content:center;border-radius:50%}
  .wa-float span{display:none}
  .wa-float svg{width:29px;height:29px}
}
@media print{.wa-float{display:none}}

/* header at narrow widths: labels collapse to icons so the bar still fits */
@media(max-width:1080px){.btn-wa .wa-label{display:none}}
@media(max-width:900px){
  .header-actions .btn-phone span{display:none}
  .btn-wa,.btn-phone{padding:.7em .85em}
}
@media(max-width:420px){.header-actions .btn-book{padding:.7em 1em;font-size:.8rem}}

/* contact page: WhatsApp call-out */
.wa-block{display:flex;align-items:center;gap:14px;background:#e8faef;border:1px solid #b6ebca;
  border-radius:var(--radius);padding:18px 20px}
.wa-block .wa-ico{flex:none;width:44px;height:44px;border-radius:50%;background:#25d366;color:#0b2e18;
  display:flex;align-items:center;justify-content:center}
.wa-block .wa-ico svg{width:26px;height:26px}
.wa-block-body{min-width:0}
.wa-block-body strong{display:block;font-family:var(--display);font-weight:500;font-size:1.15rem;color:var(--ink)}
.wa-block-body span{display:block;font-size:.86rem;color:#4a6b57}

/* ---- Mobile header: the bar can't carry four actions at phone widths ----
   Phone + Book stay in the bar; WhatsApp is covered by the floating action. */
@media(max-width:760px){
  .header-actions .btn-wa{display:none}
  .brand-logo{height:26px}
  .site-header.scrolled .brand-logo{height:23px}
  .header-actions{gap:7px}
  .header-actions .btn-book{padding:.7em 1.05em;font-size:.8rem}
  .bar{gap:8px;padding:13px 14px 13px 18px}
}
@media(max-width:380px){
  .brand-logo{height:23px}
  .header-actions .btn-book{padding:.65em .9em;font-size:.76rem}
}
/* mobile menu panel sits under the bar; keep it clear of the taller top bar */
body.menu-open .nav{top:64px}
/* WhatsApp glyph reads as white-on-green — the official treatment and the
   only combination with enough contrast on #25d366. */
.wa-float{color:#fff}
.wa-block .wa-ico{color:#fff}

/* ---- Real brand mark (gold winged LE emblem) ----
   Supersedes the placeholder wordmark: it is already gold, so the invert
   filter that whitened the old black lockup has to come off. The emblem
   carries no wordmark, so it sits slightly larger than the lockup did. */
.brand-logo{filter:none;height:40px}
.site-header.scrolled .brand-logo{height:32px}
.foot-logo{height:46px;width:auto;margin-bottom:1.1rem}
@media(max-width:760px){
  .brand-logo{filter:none;height:32px}
  .site-header.scrolled .brand-logo{height:28px}
}
@media(max-width:380px){.brand-logo{height:27px}}

/* On phones the hero copy sits low, over sunlit pavement — the stat row needs
   a little more separation there than it does on desktop. */
@media(max-width:760px){
  .hero-scrim::after{background:linear-gradient(180deg,rgba(8,9,11,.3) 0%,rgba(8,9,11,.02) 26%,
    rgba(8,9,11,.28) 62%,rgba(8,9,11,.62) 100%)}
  .hero-marks span{color:#d3d6dc}
}

/* ---- Hero framing ----
   The hero art is composed subject-right / open-left, so bias the crop only
   slightly right — enough to keep the van and ship whole without eating the
   negative space the headline sits in. The Ken Burns push is dialled back too;
   at 1.06 it visibly tightened an already wide frame. */
.hero-photo img{object-position:58% 50%}
@keyframes kenburns{0%{transform:scale(1)}100%{transform:scale(1.03) translate(-0.4%,-0.3%)}}
@media(max-width:760px){
  /* A portrait viewport keeps only ~25% of a 16:9 frame's width, so bias hard
     right or the ship — the whole point of the shot — is cropped away. The
     headline still lands on open sky because that sits above the subject band. */
  .hero-photo img{object-position:84% 50%}
}

/* The hero's lower third is sunlit concrete, so the stat row needs its own
   footing. Hero only — the showcase bands don't have copy that low. */
.hero-scrim::after{background:linear-gradient(180deg,rgba(8,9,11,.26) 0%,rgba(8,9,11,0) 28%,
  rgba(8,9,11,.1) 55%,rgba(8,9,11,.5) 82%,rgba(8,9,11,.66) 100%)}
.hero-marks span{color:#d6d9df}
.hero-marks{border-top-color:rgba(255,255,255,.34)}

/* Nav: no highlighted current-page state. aria-current stays on the link for
   screen readers, it just carries no visual treatment. */
.nav-link.is-active{color:#b9bcc3;background:none}
.nav-link.is-active:hover{color:#fff}
.nav-link.is-active::after{transform:scaleX(0)}
.nav-link.is-active:hover::after{transform:scaleX(1)}

/* ============ Hero: glass card, no scrim ============
   The hero art is now a real cinematic frame (native 4K, downscaled) and a
   full-bleed black gradient was flattening it. Legibility moves onto a frosted
   panel instead, so the photograph stays at full strength everywhere else. */
.hero{padding:140px 0 90px;min-height:clamp(620px,92vh,940px)}
.hero-photo img{object-position:62% 52%}
.hero-scrim{display:none}
.hero-scrim::after{content:none}

.hero-copy.glass{
  max-width:560px;
  padding:40px 42px 36px;
  border-radius:26px;
  background:linear-gradient(155deg,rgba(14,17,22,.62),rgba(14,17,22,.46));
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 32px 80px -34px rgba(6,9,14,.72),inset 0 1px 0 rgba(255,255,255,.14);
}
/* soft specular edge so the panel reads as glass rather than a flat tint */
.hero-copy.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,0) 42%);
  mix-blend-mode:overlay;
}
.hero-copy.glass{position:relative}

/* copy no longer needs heavy shadows — the panel does that work */
.hero .eyebrow{text-shadow:none;color:#dfe2e8}
.hero h1{text-shadow:0 2px 18px rgba(6,9,14,.45);margin:.3em 0 .34em}
.hero .lede{text-shadow:none;color:#e9ebef;max-width:none}
.hero-marks{border-top-color:rgba(255,255,255,.2);max-width:none}
.hero-marks span{color:#c2c6ce}
.hero-cta{margin:1.9rem 0 2rem}

@media(max-width:900px){
  .hero{padding:120px 0 80px}
  .hero-copy.glass{padding:30px 26px 28px;border-radius:22px;max-width:none}
}
@media(max-width:520px){
  .hero-copy.glass{padding:26px 22px 24px;border-radius:20px}
  .hero-marks{gap:18px}
}
/* Safari/Firefox without backdrop-filter get a solid panel instead of unreadable glass */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hero-copy.glass{background:linear-gradient(155deg,rgba(12,15,20,.9),rgba(12,15,20,.82))}
}

/* The hero art is 2.39:1. A tall container crops a quarter of the width off,
   which was throwing away the open water and blowing the van up. Bring the
   band closer to the frame's own ratio and let the picture breathe. */
.hero{padding:126px 0 78px;min-height:clamp(590px,82vh,790px)}
.hero-photo img{object-position:55% 52%}
.hero-copy.glass{max-width:520px;padding:32px 34px 30px}
.hero-copy.glass h1{font-size:clamp(2.2rem,3.3vw,3.1rem);line-height:1.04;margin:.26em 0 .3em}
.hero-copy.glass .lede{font-size:1.04rem;line-height:1.5}
.hero-copy.glass .hero-cta{margin:1.5rem 0 1.6rem}
.hero-copy.glass .hero-marks{padding-top:1.1rem;gap:26px}
.hero-copy.glass .hero-marks strong{font-size:1.32rem}
.hero-copy.glass .hero-marks span{font-size:.74rem}
@media(max-width:900px){
  .hero{min-height:clamp(560px,88vh,860px)}
  .hero-copy.glass h1{font-size:clamp(2.1rem,7vw,2.9rem)}
}

/* Inside the card the two CTAs wrap to different widths on a phone, which
   reads as a mistake. Stack them full-width and equal instead. */
@media(max-width:640px){
  .hero-copy.glass .hero-cta{flex-direction:column;gap:10px;margin:1.3rem 0 1.4rem}
  .hero-copy.glass .hero-cta .btn{width:100%}
  .hero-copy.glass .hero-marks{gap:14px}
  .hero-copy.glass .hero-marks strong{font-size:1.2rem}
}

/* Hero band +150px. The art is native 16:9 now (not the 2.39:1 anamorphic
   frame), so the taller container only crops ~9% of the width instead of ~32%
   — the pulled-back framing survives the extra height. */
.hero{min-height:clamp(740px,calc(82vh + 150px),940px)}
.hero-photo img{object-position:50% 50%}
@media(max-width:900px){
  .hero{min-height:clamp(710px,calc(88vh + 150px),1010px)}
}

/* Keep the mobile crop declared AFTER the desktop one — an unscoped rule later
   in the file beats an earlier media query at equal specificity, which is how
   the phone framing got silently reset. */
@media(max-width:760px){
  /* A portrait viewport keeps ~30% of a 16:9 frame; centre holds the ship on
     the left edge and the van on the right, which frames the card nicely. */
  .hero-photo img{object-position:52% 50%}
  /* +150px suits the desktop band; on a phone that much extra just adds empty
     sky above the card, so take a smaller increase. */
  .hero{min-height:clamp(650px,calc(88vh + 60px),900px);padding:112px 0 72px}
}

/* The card now sits over pale gold sky rather than dark water, so the glass
   needs a little more body to hold the copy. */
.hero-copy.glass{background:linear-gradient(155deg,rgba(12,16,21,.72),rgba(12,16,21,.56))}
.hero .eyebrow{color:#e6e9ee}
.hero-copy.glass .hero-marks span{color:#ccd0d7}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hero-copy.glass{background:linear-gradient(155deg,rgba(11,14,19,.93),rgba(11,14,19,.86))}
}

/* ---- Breadcrumbs ----
   Rendered from the same trail that generates the BreadcrumbList schema, so the
   visible path and the structured data can never disagree. */
.crumbs{background:var(--bg-2);border-bottom:1px solid var(--line);font-size:.85rem}
.crumbs .container{display:flex;align-items:center;gap:.6em;flex-wrap:wrap;padding:13px 28px}
.crumbs a{color:var(--muted);transition:color .2s}
.crumbs a:hover{color:var(--ink)}
.crumbs span[aria-current]{color:var(--ink);font-weight:600}
.crumb-sep{color:#c2c6cd}
/* footer column labels are h3 now — keep the old h4 selector so nothing regresses */
.foot-col h3,.foot-col h4{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);margin-bottom:1rem;font-weight:700}

/* ---- Language toggle ----
   Sits between the CTA and the hamburger. Labelled with the language it
   switches TO ("Español" on English pages), which is the convention users
   actually expect — a flag or the current language both read ambiguously. */
.lang-toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;
  font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.02em;
  color:#c8ccd3;border:1px solid rgba(255,255,255,.26);border-radius:999px;
  padding:.6em 1em;transition:color .25s,border-color .25s,background .25s}
.lang-toggle:hover{color:#fff;border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.08)}
@media(max-width:1080px){.lang-toggle{padding:.55em .8em;font-size:.76rem}}
@media(max-width:760px){
  /* the bar already sheds the WhatsApp button here; the toggle shortens to a
     two-letter code so phone + book + language + menu all still fit */
  .lang-toggle{padding:.55em .7em;font-size:.72rem;letter-spacing:.06em}
  .lang-toggle::first-letter{text-transform:uppercase}
}
@media(max-width:420px){.lang-toggle{padding:.5em .55em;font-size:.68rem}}
.lang-abbr{display:none}
@media(max-width:760px){.lang-full{display:none}.lang-abbr{display:inline}}

/* ---- Rate tables ----
   The competitor publishes theirs as images, which no search engine or AI can
   read. Real tables with proper scope attributes are the entire point. */
.table-wrap{overflow-x:auto;margin:0 0 34px;-webkit-overflow-scrolling:touch}
.rate-table{width:100%;border-collapse:collapse;min-width:520px;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.rate-table caption{caption-side:top;text-align:left;font-family:var(--display);font-weight:500;
  font-size:1.35rem;color:var(--ink);padding:0 0 .85rem}
.rate-table th,.rate-table td{padding:14px 18px;text-align:left;font-size:.95rem;
  border-bottom:1px solid var(--line)}
.rate-table thead th{background:var(--obsidian);color:#fff;font-size:.74rem;letter-spacing:.09em;
  text-transform:uppercase;font-weight:700;border-bottom:none}
.rate-table tbody th{font-weight:600;color:var(--ink);background:var(--bg-2)}
.rate-table tbody td{color:var(--ink-soft);font-variant-numeric:tabular-nums}
.rate-table tbody tr:last-child th,.rate-table tbody tr:last-child td{border-bottom:none}
.rate-table tbody tr:hover td,.rate-table tbody tr:hover th{background:#f4f6f9}
.rate-foot{color:var(--muted);font-size:.92rem;max-width:70ch}

/* the plain-text-for-agents call-out */
.agent-note{max-width:70ch;margin-inline:auto;background:var(--bg);border:1px solid var(--line);
  border-left:3px solid var(--ink);border-radius:var(--radius);padding:26px 28px}
.agent-note h2{font-family:var(--display);font-weight:500;font-size:1.3rem;margin-bottom:.5rem}
.agent-note p{color:var(--ink-soft);font-size:.98rem}
.agent-note a{border-bottom:1px solid #cfd3da;font-weight:600;color:var(--ink)}
.agent-note a:hover{border-color:var(--ink)}
@media(max-width:520px){.rate-table th,.rate-table td{padding:12px 13px;font-size:.9rem}}

/* ============ Booking modal ============
   Chassis (backdrop, card, field styling) is PrimeRideGo's, which is the same
   design system this site was built from — obsidian card, silver-gradient
   figures, uppercase micro-labels. Extended here with the step rail, the
   segmented trip switch, the price panel and the PayPal slot. */
body.modal-open{overflow:hidden}
.modal{position:fixed;inset:0;z-index:200;display:none}
.modal.open{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(8,9,11,.66);backdrop-filter:blur(5px);animation:mfade .3s var(--ease)}
@keyframes mfade{from{opacity:0}to{opacity:1}}
.modal-card{position:relative;z-index:2;width:min(760px,94vw);margin:5vh auto;background:var(--obsidian);color:#fff;
  border-radius:22px;padding:34px 32px 30px;box-shadow:0 50px 110px -34px rgba(0,0,0,.85);
  max-height:90vh;overflow-x:hidden;overflow-y:auto;animation:mpop .45s var(--ease)}
@keyframes mpop{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}
.modal-card::after{content:"";position:absolute;inset:0;border-radius:22px;padding:1px;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.22),rgba(255,255,255,.02) 55%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.modal-x{position:absolute;top:15px;right:16px;z-index:3;width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.08);color:#fff;font-size:1.3rem;line-height:1;transition:background .2s}
.modal-x:hover{background:rgba(255,255,255,.18)}
.modal-x:focus-visible{outline:2px solid #c8ccd3;outline-offset:2px}
.modal-head .kicker{margin-bottom:.5em;color:#9aa0a8}
.modal-head h2{font-family:var(--display);font-weight:400;font-size:2rem;color:#fff;line-height:1.05}

/* step rail */
.bk-steps{display:flex;align-items:center;gap:8px;margin:20px 0 4px;list-style:none}
.bk-step{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.bk-step i{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  font-size:.72rem;font-weight:700;background:rgba(255,255,255,.09);color:#9aa0a8;transition:.25s var(--ease)}
.bk-step b{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:#7e828a;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-step::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.12)}
.bk-step:last-child::after{display:none}
.bk-step.on i{background:var(--silver);color:#14151a}
.bk-step.on b{color:#fff}
.bk-step.done i{background:rgba(255,255,255,.22);color:#fff}
@media(max-width:600px){.bk-step b{display:none}.bk-steps{gap:6px}}

.bk-pane{display:none;flex-direction:column;gap:13px}
.bk-pane.on{display:flex}
.bfield-row.three{grid-template-columns:1fr 1fr 1fr}
.bfield input[type=date],.bfield input[type=time]{-webkit-appearance:none;appearance:none;box-sizing:border-box}
/* additions only — .bform/.bfield/.bfield-row already exist above for the
   contact form; these extend them for the modal's needs. */
.bfield-row.three{grid-template-columns:1fr 1fr 1fr}
.bfield textarea{min-height:74px;line-height:1.5}
/* iOS gives native date/time inputs a wide intrinsic size; normalise so they
   respect the grid cell instead of overflowing it. */
.bfield input[type=date],.bfield input[type=time]{-webkit-appearance:none;appearance:none;box-sizing:border-box}
/* [hidden] is a UA rule at the same specificity as .bfield-row / .bk-price, so
   the author class wins and the element stays visible. Restate it. */
.bfield-row[hidden],.bk-price[hidden],.bk-pane[hidden],.bk-steps[hidden],#ppButtons[hidden]{display:none}
.bfield small{font-size:.68rem;color:#7e828a;line-height:1.35}
.bfield.bad input,.bfield.bad select,.bfield.bad textarea{border-color:#e08a7a}

/* segmented trip-direction switch */
.bk-seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:5px}
.bk-seg button{background:none;border:none;border-radius:9px;padding:.72em .4em;cursor:pointer;color:#aeb2ba;
  font-family:inherit;font-size:.83rem;font-weight:600;line-height:1.25;transition:.2s var(--ease)}
.bk-seg button:hover{color:#fff}
.bk-seg button[aria-pressed=true]{background:rgba(255,255,255,.13);color:#fff;box-shadow:0 2px 10px -4px rgba(0,0,0,.6)}

/* price panel */
.bk-price{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:13px;padding:16px 18px}
.bk-price .row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.bk-price .row span{color:#aeb2ba;font-size:.92rem;font-weight:500}
.bk-price .row strong{font-family:var(--display);font-weight:500;font-size:1.95rem;color:#fff;
  background:var(--silver);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.bk-price ul{list-style:none;margin:.7rem 0 0;padding:.65rem 0 0;border-top:1px solid rgba(255,255,255,.1)}
.bk-price li{display:flex;justify-content:space-between;gap:12px;font-size:.82rem;color:#9aa0a8;padding:.16rem 0}
.bk-price li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-price li b{font-weight:600;color:#c8ccd3;font-variant-numeric:tabular-nums}
.bk-price .note{display:block;margin-top:.6rem;color:#7e828a;font-size:.74rem;line-height:1.45}
/* deposit / balance split — the two figures that actually matter to a customer
   at checkout: what leaves their account now, and what they owe the driver. */
.bk-split{margin-top:.75rem;padding-top:.7rem;border-top:1px solid rgba(255,255,255,.1);display:grid;gap:.3rem}
.bk-split div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.bk-split span{color:#9aa0a8;font-size:.84rem}
.bk-split b{font-weight:700;color:#fff;font-variant-numeric:tabular-nums;font-size:.98rem}
.bk-split div:first-child b{color:#f0e2c4}
.bk-split[hidden]{display:none}
.bk-price.quote-only .row strong{font-size:1.15rem;font-family:var(--sans);font-weight:600;
  -webkit-text-fill-color:#fff;background:none}

/* review list */
.bk-review{list-style:none;display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.1rem;font-size:.88rem;margin:2px 0}
.bk-review dt{color:#7e828a;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;font-weight:600;padding-top:.18em}
.bk-review dd{color:#e8eaee;min-width:0;overflow-wrap:anywhere}

.bk-nav{display:flex;gap:10px;margin-top:4px}
.bk-nav .btn{flex:1;justify-content:center}
.bk-back{background:none;border:1px solid rgba(255,255,255,.22);color:#c8ccd3;border-radius:999px;
  padding:.85em 1.4em;font-family:inherit;font-size:.88rem;font-weight:600;cursor:pointer;transition:.2s}
.bk-back:hover{border-color:#c8ccd3;color:#fff}
.modal .btn-primary{background:var(--silver);color:#14151a;border:none}
.bk-err{color:#eda898;font-size:.82rem;margin-top:-2px}
.bk-foot{font-size:.72rem;color:#7e828a;text-align:center;line-height:1.5}

#ppButtons{margin-top:6px;min-height:52px;background:#fff;border-radius:12px;padding:6px 6px 2px}
#ppButtons:empty{background:none;padding:0}
.bk-paying{text-align:center;color:#aeb2ba;font-size:.85rem;padding:.5rem 0}

.bk-done{text-align:center;padding:26px 6px 10px}
.bk-done .mark{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;
  background:var(--silver);color:#14151a;font-size:1.6rem;font-weight:700;margin-bottom:1rem}
.bk-done h3{font-family:var(--display);font-weight:500;color:#fff;font-size:1.6rem;margin-bottom:.5rem}
.bk-done p{color:#aeb2ba;margin-bottom:1rem}
.bk-done .ref{display:inline-block;font-family:var(--sans);font-weight:700;letter-spacing:.08em;font-size:1.05rem;
  color:#fff;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:.55em 1em}

@media(max-width:520px){
  .modal-card{padding:26px 18px 22px;margin:0;width:100%;min-height:100%;border-radius:0}
  .bfield-row.three{grid-template-columns:1fr 1fr}
  .bfield-row.three .bfield:nth-child(3){grid-column:1 / -1}
  .bk-seg{grid-template-columns:1fr}
  .bk-review{grid-template-columns:1fr;gap:.15rem .8rem}
  .bk-review dd{margin-bottom:.5rem}
  /* 16px stops iOS Safari zooming the page when a field takes focus. The
     .bform prefix outranks the base input rules earlier in the file. */
  }