/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root{
  /* colour */
  --c-black-deep:#090A09;
  --c-black-soft:#151613;
  --c-white-warm:#F4F2EB;
  --c-white-pure:#FFFFFF;
  --c-sand:#C6B99B;
  --c-sand-light:#DDD4C1;
  --c-khaki:#6D7355;
  --c-khaki-deep:#454A37;
  --c-grey-muted:#9B9C94;

  /* type — one family throughout; hierarchy comes from weight, size and
     tracking rather than a second display face */
  --f-display:'Plus Jakarta Sans', system-ui, sans-serif;
  --f-body:'Plus Jakarta Sans', system-ui, sans-serif;

  /* scale */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
  --step-3:  clamp(2.1rem, 1.7rem + 2vw, 3rem);
  --step-4:  clamp(2.6rem, 2rem + 3vw, 4.2rem);
  --step-5:  clamp(3.2rem, 2.2rem + 5vw, 6rem);

  /* layout */
  --maxw: 1360px;
  --gutter: clamp(20px, 4vw, 64px);
  --radius: 2px;
  --radius-img: 14px;
  --dur-1: 0.4s;
  --dur-2: 0.7s;
  --ease: cubic-bezier(.16,.8,.24,1);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0;
  background:var(--c-black-deep);
  color:var(--c-white-warm);
  font-family:var(--f-body);
  font-size:var(--step-0);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--f-body); letter-spacing:-0.01em; line-height:1.12; }
h1{ font-weight:700; }
h2{ font-weight:500; }
h3,h4{ font-weight:600; }
/* Major headings get a heavier weight and tighter tracking for hierarchy —
   no second typeface, so the emphasis comes from weight, size and spacing. */
.hero h1,
.hero h2,
.section-head h2,
.intro h2,
.facility-copy h2,
.closing h2,
.service-panel h3{
  font-weight:700;
  letter-spacing:-0.015em;
}
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }

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

.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }

.eyebrow{
  font-family:var(--f-body); font-weight:600;
  font-size:var(--step--1);
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--c-khaki);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:'';
  width:16px; height:1px;
  background:var(--c-khaki);
  display:inline-block;
}

/* the "call sheet" signature strip — recurs across sections as small
   production-style metadata, tying structure to real production paperwork */
.callsheet{
  font-family:var(--f-body); font-weight:600;
  font-size:var(--step--1);
  letter-spacing:0.06em;
  color:var(--c-grey-muted);
  display:flex;
  flex-wrap:wrap;
  gap:2px 28px;
  border-top:1px solid rgba(155,156,148,0.25);
  border-bottom:1px solid rgba(155,156,148,0.25);
  padding:10px 0;
}
.callsheet span b{
  color:var(--c-sand);
  font-weight:500;
  margin-right:6px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--f-body); font-weight:600;
  font-size:var(--step--1);
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:15px 26px;
  border:1px solid transparent;
  border-radius:var(--radius);
  transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn-khaki{ background:var(--c-khaki); color:var(--c-white-warm); }
.btn-khaki:hover{ background:var(--c-khaki-deep); }
.btn-sand{ background:var(--c-sand); color:var(--c-black-deep); }
.btn-sand:hover{ background:var(--c-sand-light); }
.btn-outline-light{ border-color:rgba(244,242,235,0.5); color:var(--c-white-warm); }
.btn-outline-light:hover{ border-color:var(--c-white-warm); background:rgba(244,242,235,0.08); }
.btn-outline-dark{ border-color:rgba(9,10,9,0.4); color:var(--c-black-deep); }
.btn-outline-dark:hover{ border-color:var(--c-black-deep); background:rgba(9,10,9,0.06); }
.btn-arrow{ transition:transform var(--dur-1) var(--ease); }
.btn:hover .btn-arrow{ transform:translateX(3px); }

.link-anim{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--f-body); font-weight:600;
  font-size:var(--step--1);
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding-bottom:4px;
}
.link-anim::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:100%; height:1px;
  background:currentColor;
  transform:scaleX(0.3);
  transform-origin:left;
  transition:transform var(--dur-1) var(--ease);
  opacity:0.5;
}
.link-anim:hover::after{ transform:scaleX(1); opacity:1; }

/* ============================================================
   HEADER
   ============================================================ */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:20px 0;
  transition:background var(--dur-2) var(--ease), padding var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  border-bottom:1px solid transparent;
}
header.is-scrolled{
  background:rgba(9,10,9,0.92);
  backdrop-filter:blur(10px);
  padding:14px 0;
  border-color:rgba(198,185,155,0.15);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
@font-face{
  font-family:'Marcelo';
  src:url('../fonts/Marcelo-Regular.woff2') format('woff2'),
      url('../fonts/Marcelo-Regular.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}
.logo{
  font-family:'Marcelo', Georgia, 'Times New Roman', serif;
  font-weight:400;
  font-size:calc(var(--step-2) * 0.72);
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:var(--c-white-pure);
  display:flex; flex-direction:column;
}
.logo-line{ line-height:0.9; }
.logo-line + .logo-line{ margin-top:2px; }
nav.primary-nav{ display:flex; align-items:center; gap:36px; }
nav.primary-nav ul{ display:flex; gap:32px; }
nav.primary-nav a{
  font-size:var(--step--1);
  letter-spacing:0.02em;
  color:var(--c-white-warm);
  opacity:0.85;
  transition:opacity var(--dur-1) var(--ease);
}
nav.primary-nav a:hover{ opacity:1; }
.header-cta{ display:flex; align-items:center; gap:18px; }
.mobile-toggle{
  display:none;
  background:none; border:none; color:var(--c-white-pure);
  width:36px; height:24px; position:relative;
}
.mobile-toggle span, .mobile-toggle span::before, .mobile-toggle span::after{
  content:''; position:absolute; left:0; width:100%; height:1px; background:currentColor; transition:transform var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}
.mobile-toggle span{ top:50%; }
.mobile-toggle span::before{ top:-8px; }
.mobile-toggle span::after{ top:8px; }
.mobile-toggle.is-open span{ background:transparent; }
.mobile-toggle.is-open span::before{ transform:translateY(8px) rotate(45deg); }
.mobile-toggle.is-open span::after{ transform:translateY(-8px) rotate(-45deg); }

/* mobile drawer */
.mobile-drawer{
  position:fixed; inset:0; z-index:99;
  background:var(--c-black-deep);
  display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--gutter);
  transform:translateY(-100%);
  visibility:hidden;
  overflow-y:auto;
  transition:transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
}
.mobile-drawer.is-open{ transform:translateY(0); visibility:visible; transition:transform var(--dur-2) var(--ease); }
@media (min-width:921px){ .mobile-drawer{ display:none; } }
.mobile-drawer ul{ display:flex; flex-direction:column; gap:22px; }
.mobile-drawer a{ font-family:var(--f-display); font-size:var(--step-3); font-weight:600; }
.mobile-drawer .btn{ margin-top:32px; align-self:flex-start; }

@media (max-width:920px){
  nav.primary-nav ul, .header-cta .btn{ display:none; }
  .mobile-toggle{ display:block; }
}

/* ============================================================
   SECTION / IMAGE PLACEHOLDER SYSTEM
   ============================================================ */
section{ position:relative; }
.section-pad{ padding:clamp(64px,10vw,140px) 0; }
.bg-black{ background:var(--c-black-deep); color:var(--c-white-warm); }
.bg-soft{ background:var(--c-black-soft); color:var(--c-white-warm); }
.bg-warm{ background:var(--c-white-warm); color:var(--c-black-deep); }
.bg-pure-white{ background:var(--c-white-pure); color:var(--c-black-deep); }
.bg-sand{ background:var(--c-sand); color:var(--c-black-deep); }
.bg-khaki{ background:var(--c-khaki); color:var(--c-white-warm); }

.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:40px;
  margin-bottom:clamp(36px,5vw,64px);
  flex-wrap:wrap;
}
.section-head h2{ font-size:var(--step-3); max-width:14ch; }
.section-head .lede{ max-width:34ch; opacity:0.75; font-size:var(--step-0); }

.ph{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:var(--radius-img);
  background:
    repeating-linear-gradient(45deg, rgba(198,185,155,0.05) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, var(--c-black-soft), var(--c-black-deep));
  border:1px solid rgba(198,185,155,0.18);
  display:flex; align-items:flex-end;
}
.ph::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(9,10,9,0.75) 0%, transparent 55%);
}
.ph-label{
  position:relative; z-index:1;
  padding:16px 18px;
  font-family:var(--f-body); font-weight:600;
  font-size:11px;
  line-height:1.5;
  letter-spacing:0.04em;
  color:var(--c-sand-light);
  max-width:88%;
}
.ph-label .ph-tag{
  display:block;
  color:var(--c-khaki);
  text-transform:uppercase;
  letter-spacing:0.14em;
  margin-bottom:6px;
  font-size:10px;
}
.ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.ph-16-9{ aspect-ratio:16/9; }
.ph-4-3{ aspect-ratio:4/3; }
.ph-3-4{ aspect-ratio:3/4; }
.ph-2-3{ aspect-ratio:2/3; }
.ph-21-9{ aspect-ratio:21/9; }
.ph-1-1{ aspect-ratio:1/1; }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ============================================================
   HERO SLIDER
   ============================================================ */
.hero{
  position:relative;
  min-height:100vh;
  color:var(--c-white-pure);
  overflow:hidden;
}
.hero-slide{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  opacity:0;
  visibility:hidden;
  transition:opacity 1.1s var(--ease);
  z-index:0;
}
.hero-slide.is-active{ opacity:1; visibility:visible; z-index:1; }
.hero-slide .ph{ position:absolute; inset:0; height:100%; border:none; border-radius:0; transform:scale(1.06); transition:transform 8s linear; }
.hero-slide.is-active .ph{ transform:scale(1); }
@media (prefers-reduced-motion: reduce){
  .hero-slide{ transition:opacity 0.2s linear; }
  .hero-slide .ph, .hero-slide.is-active .ph{ transform:none; transition:none; }
}
.hero-slide::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(9,10,9,0.78) 0%, rgba(9,10,9,0.45) 16%, rgba(9,10,9,0.08) 30%, rgba(9,10,9,0) 40%, rgba(9,10,9,0.55) 68%, rgba(9,10,9,0.95) 100%);
}
.hero-content{ position:relative; z-index:2; padding-bottom:clamp(48px,7vw,96px); padding-top:180px; min-height:100vh; display:flex; flex-direction:column; justify-content:flex-end; }
.hero-text{ position:relative; }
.hero-text > div{
  position:absolute; inset:0 auto auto 0; width:100%;
  opacity:0; transform:translateY(14px);
  visibility:hidden;
  transition:opacity 0.7s var(--ease) 0.15s, transform 0.7s var(--ease) 0.15s, visibility 0s linear 0.7s;
  pointer-events:none;
}
.hero-text > div.is-active{
  position:relative;
  opacity:1; transform:translateY(0);
  visibility:visible;
  pointer-events:auto;
  transition:opacity 0.7s var(--ease) 0.15s, transform 0.7s var(--ease) 0.15s;
}
@media (prefers-reduced-motion: reduce){
  .hero-text > div{ transition:opacity 0.2s linear; transform:none; }
  .hero-text > div.is-active{ transition:opacity 0.2s linear; }
}
.hero h1, .hero h2{
  font-size:var(--step-5);
  line-height:1.02;
  max-width:16ch;
  color:var(--c-white-pure);
  font-weight:700;
}
.hero p.lede{
  margin-top:26px;
  max-width:46ch;
  font-size:var(--step-1);
  font-weight:300;
  color:var(--c-white-warm);
  opacity:0.88;
}
.hero-actions{ display:flex; gap:16px; margin-top:40px; flex-wrap:wrap; }

.hero-chrome{ position:absolute; z-index:3; left:0; right:0; bottom:28px; display:flex; align-items:center; justify-content:space-between; padding:0 var(--gutter); gap:24px; }
.scroll-indicator{
  display:flex; align-items:center; gap:10px;
  font-family:var(--f-body); font-weight:600; font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color:rgba(244,242,235,0.6);
}
.scroll-indicator .line{ width:1px; height:34px; background:linear-gradient(180deg, rgba(244,242,235,0.8), transparent); animation:scrollmove 2.2s var(--ease) infinite; }
@keyframes scrollmove{ 0%{ transform:scaleY(0); transform-origin:top;} 50%{ transform:scaleY(1); transform-origin:top;} 51%{ transform-origin:bottom;} 100%{ transform:scaleY(0); transform-origin:bottom; } }
@media (prefers-reduced-motion: reduce){ .scroll-indicator .line{ animation:none; } }

.hero-slider-controls{ display:flex; align-items:center; gap:18px; }
.hero-dots{ display:flex; gap:8px; }
.hero-dots button{
  width:22px; height:2px; padding:0; border:none; background:rgba(244,242,235,0.35);
  position:relative; overflow:hidden;
}
.hero-dots button::after{
  content:''; position:absolute; inset:0; background:var(--c-sand);
  transform:scaleX(0); transform-origin:left;
}
.hero-dots button.is-active::after{ transform:scaleX(1); transition:transform linear; }
.hero-dots button.is-active.is-playing::after{ transition-duration:6s; }
.hero-arrow{
  background:rgba(9,10,9,0.5); border:1px solid rgba(244,242,235,0.35);
  color:var(--c-white-warm); width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:14px;
  transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.hero-arrow:hover{ background:rgba(198,185,155,0.25); border-color:var(--c-sand); }
.hero-video-toggle{
  display:flex; align-items:center; gap:8px;
  background:rgba(9,10,9,0.5); border:1px solid rgba(244,242,235,0.35);
  color:var(--c-white-warm); font-family:var(--f-body); font-weight:600; font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
  padding:8px 14px; border-radius:20px;
}

@media (max-width:640px){
  .hero-content{ padding-top:130px; }
  .hero h1, .hero h2{ max-width:none; }
  .hero-chrome{ flex-wrap:wrap; }
  .scroll-indicator{ display:none; }
}

/* ============================================================
   INTRO
   ============================================================ */
.intro{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(32px,6vw,90px); align-items:start; }
.intro h2{ font-size:var(--step-3); max-width:12ch; }
.intro .body-copy p{ font-size:var(--step-0); font-weight:300; line-height:1.6; max-width:52ch; }
.intro .body-copy p + p{ margin-top:20px; }
@media (max-width:820px){ .intro{ grid-template-columns:1fr; } }

/* ============================================================
   WHY GRID
   ============================================================ */
.explore-grid-wrap{ margin-top:clamp(48px,7vw,90px); }
.explore-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
.explore-card{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--radius-img);
}
.explore-card .ph{ height:100%; border:none; transition:transform var(--dur-2) var(--ease); }
.explore-card .ph::before{ content:none; }
.explore-card:hover .ph,
.explore-card:focus-visible .ph{ transform:scale(1.06); }
.explore-card::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(9,10,9,0.92) 0%, rgba(9,10,9,0.15) 42%, rgba(9,10,9,0) 65%);
  transition:background var(--dur-2) var(--ease);
}
.explore-card:hover::after,
.explore-card:focus-visible::after{ background:linear-gradient(0deg, rgba(9,10,9,0.96) 0%, rgba(9,10,9,0.25) 45%, rgba(9,10,9,0) 68%); }
.explore-card-content{ position:absolute; left:0; bottom:0; z-index:1; padding:22px; width:100%; }
.explore-card-title{
  display:block;
  font-weight:700; font-size:var(--step-0); letter-spacing:-0.01em;
  color:var(--c-white-pure);
}
.explore-card-sub{
  display:flex; align-items:center; gap:8px;
  font-family:var(--f-body); font-weight:600; font-size:11px; letter-spacing:0.04em;
  color:var(--c-sand-light);
  max-height:0; opacity:0; margin-top:0; overflow:hidden;
  transition:max-height var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease), margin-top var(--dur-2) var(--ease);
}
.explore-card:hover .explore-card-sub,
.explore-card:focus-visible .explore-card-sub{ max-height:60px; opacity:1; margin-top:10px; }
.explore-card-arrow{ transition:transform var(--dur-1) var(--ease); }
.explore-card:hover .explore-card-arrow,
.explore-card:focus-visible .explore-card-arrow{ transform:translateX(3px); }
@media (max-width:920px){ .explore-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .explore-grid{ grid-template-columns:1fr; } }
/* touch devices have no hover — keep the subtitle reachable via focus (tab)
   and always show the title; the tap itself follows the link */

/* ============================================================
   MILITARY FLEET — same proportions as the explore-cards up top;
   image stays fully visible, caption sits in its own solid black
   panel attached to the bottom rather than overlaid on the photo
   ============================================================ */
.services-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.service-panel{
  display:flex; flex-direction:column;
  background:var(--c-black-deep);
  border-radius:var(--radius-img);
  overflow:hidden;
  transition:transform var(--dur-1) var(--ease);
}
.service-panel:hover,
.service-panel:focus-visible{ transform:translateY(-3px); }
.service-panel .ph{ border-radius:0; margin:0; }
.service-panel .ph::before{ content:none; }
.service-panel:hover .ph,
.service-panel:focus-visible .ph{ transform:scale(1.04); }
.service-panel .ph{ transition:transform var(--dur-2) var(--ease); }
.service-panel-inner{
  padding:22px 22px 26px;
  flex:1;
  display:flex; flex-direction:column;
}
.service-panel .tag{ font-family:var(--f-body); font-weight:600; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--c-sand); margin-bottom:12px; display:block; }
.service-panel h3{ color:var(--c-white-pure); font-size:var(--step-1); text-transform:none; letter-spacing:-0.01em; }
.service-panel p{ color:rgba(244,242,235,0.75); margin-top:12px; font-size:var(--step--1); }
.service-panel .link-anim{ margin-top:18px; color:var(--c-sand-light); }
@media (max-width:920px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .services-grid{ grid-template-columns:1fr; } }

/* ============================================================
   SELECTED CARS — full-bleed revolving showcase
   ============================================================ */
.car-reel{
  position:relative;
  width:100%;
  height:70vh;
  min-height:420px;
  max-height:640px;
  overflow:hidden;
}
.car-reel-slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity 1s var(--ease);
}
.car-reel-slide.is-active{ opacity:1; visibility:visible; z-index:1; }
.car-reel-slide .ph{ position:absolute; inset:0; border:none; border-radius:0; transform:scale(1.05); transition:transform 7s linear; }
.car-reel-slide.is-active .ph{ transform:scale(1); }
@media (prefers-reduced-motion: reduce){
  .car-reel-slide{ transition:opacity 0.2s linear; }
  .car-reel-slide .ph, .car-reel-slide.is-active .ph{ transform:none; transition:none; }
}
.car-reel-slide::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(9,10,9,0.85) 0%, transparent 45%);
}
.car-reel-caption{ position:absolute; left:var(--gutter); bottom:26px; z-index:2; color:var(--c-white-pure); }
.car-reel-title{ display:block; font-weight:700; font-size:var(--step-1); letter-spacing:-0.01em; }
.car-reel-meta{ display:block; font-weight:600; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--c-sand-light); margin-top:6px; }
.car-reel-chrome{ position:absolute; z-index:3; right:var(--gutter); bottom:26px; display:flex; align-items:center; gap:14px; }
@media (max-width:640px){ .car-reel{ height:56vh; min-height:340px; } }

/* ============================================================
   FLEET CAROUSEL
   ============================================================ */
.fleet-filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; }
.filter-pill{
  font-family:var(--f-body); font-weight:600; font-size:13px; letter-spacing:0.01em;
  padding:10px 20px; border-radius:999px;
  border:1px solid rgba(244,242,235,0.35);
  background:transparent; color:var(--c-white-warm); opacity:0.8;
  transition:border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}
.filter-pill:hover{ opacity:1; border-color:var(--c-sand); }
.filter-pill.is-active{ opacity:1; border-color:var(--c-sand); color:var(--c-sand); }
.fleet-scroll{
  display:flex; gap:18px; overflow-x:auto; padding-bottom:12px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.fleet-scroll::-webkit-scrollbar{ height:4px; }
.fleet-scroll::-webkit-scrollbar-thumb{ background:var(--c-khaki); }
.fleet-card{
  flex:0 0 auto; width:280px; scroll-snap-align:start;
}
.fleet-card .ph{ margin-bottom:14px; }
.fleet-card h4{ font-size:var(--step-0); color:var(--c-white-pure); }
.fleet-card p{ font-family:var(--f-body); font-weight:600; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--c-grey-muted); margin-top:6px; }

/* ============================================================
   FEATURED VEHICLES
   ============================================================ */
.vehicle-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.vehicle-card h4{ font-size:var(--step-0); margin-top:14px; }
.vehicle-card .meta{ font-family:var(--f-body); font-weight:600; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--c-khaki-deep); margin-top:6px; }
.vehicle-card p.desc{ margin-top:10px; font-size:var(--step--1); opacity:0.75; }
@media (max-width:920px){ .vehicle-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .vehicle-grid{ grid-template-columns:1fr; } }

/* ============================================================
   PROJECTS
   ============================================================ */
.project-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.project-card{ background:var(--c-black-deep); padding-bottom:26px; }
.project-card .ph{ margin-bottom:18px; }
.project-card .ph::before{ content:none; }
.project-card-inner{ padding:0 26px; }
.project-card .tag{ font-family:var(--f-body); font-weight:600; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--c-khaki); }
.project-card h4{ font-size:var(--step-0); margin-top:10px; color:var(--c-white-pure); max-width:26ch; }
@media (max-width:920px){ .project-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .project-grid{ grid-template-columns:1fr; } }

/* ============================================================
   FACILITY
   ============================================================ */
.facility{ display:grid; grid-template-columns:1fr 1fr; gap:2px; align-items:stretch; height:70vh; min-height:420px; max-height:640px; }
.facility-copy{ background:var(--c-white-pure); color:var(--c-black-deep); padding:clamp(22px,3vw,42px); display:flex; flex-direction:column; justify-content:center; overflow:auto; }
.facility-copy h2{ font-size:var(--step-2); max-width:14ch; color:var(--c-black-deep); }
.facility-copy p.lede{ margin-top:12px; font-size:var(--step-0); max-width:38ch; opacity:0.75; }
.facility-list{ margin-top:16px; display:grid; grid-template-columns:1fr 1fr; gap:8px 20px; }
.facility-list li{ font-size:var(--step--1); display:flex; gap:10px; align-items:baseline; opacity:0.85; }
.facility-list li::before{ content:'—'; opacity:0.5; color:var(--c-khaki); }
.facility-copy .btn{ margin-top:20px; align-self:flex-start; }
.facility .ph{ height:100%; border:none; border-radius:0; min-height:250px; }
@media (max-width:820px){ .facility{ grid-template-columns:1fr; height:auto; min-height:0; max-height:none; } .facility .ph{ min-height:190px; } .facility-list{ grid-template-columns:1fr; } }

/* ============================================================
   CLOSING CTA
   ============================================================ */
.closing{ text-align:center; padding:clamp(90px,12vw,160px) 0; position:relative; }
.closing h2{ font-size:var(--step-4); max-width:16ch; margin:0 auto; }
.closing p.lede{ max-width:44ch; margin:22px auto 0; opacity:0.78; font-size:var(--step-1); font-weight:300; }
.closing-actions{ display:flex; justify-content:center; gap:16px; margin-top:38px; flex-wrap:wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
/* ============================================================
   CLIENT LOGO MARQUEE — small, subtle, greyscale wordmarks
   ============================================================ */
.logo-marquee{
  overflow:hidden;
  width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  mask-image:linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.logo-track{
  display:flex;
  align-items:center;
  gap:56px;
  width:max-content;
  animation:logo-scroll 32s linear infinite;
}
.logo-item{
  font-size:var(--step--1);
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--c-grey-muted);
  opacity:0.55;
  white-space:nowrap;
  filter:grayscale(1);
}
@keyframes logo-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .logo-track{ animation:none; flex-wrap:wrap; justify-content:center; }
  .logo-track [aria-hidden="true"]{ display:none; }
}

footer{ background:var(--c-black-soft); padding:80px 0 32px; border-top:1px solid rgba(198,185,155,0.15); }

.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:40px; padding-bottom:56px; }
.footer-brand .logo{ margin-bottom:16px; }
.footer-brand p{ font-size:var(--step--1); opacity:0.65; max-width:32ch; line-height:1.7; }
.footer-social{ display:flex; gap:16px; margin-top:22px; }
.footer-social a{ font-family:var(--f-body); font-weight:600; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; opacity:0.7; border-bottom:1px solid transparent; }
.footer-social a:hover{ opacity:1; border-color:currentColor; }
.footer-col h5{ font-family:var(--f-body); font-weight:600; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--c-khaki); margin-bottom:18px; }
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col a{ font-size:var(--step--1); opacity:0.75; }
.footer-col a:hover{ opacity:1; }
.footer-col p{ font-size:var(--step--1); opacity:0.75; line-height:1.7; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:28px; border-top:1px solid rgba(244,242,235,0.08); flex-wrap:wrap; gap:16px; }
.footer-bottom ul{ display:flex; gap:24px; flex-wrap:wrap; }
.footer-bottom a{ font-size:12px; opacity:0.55; }
.footer-bottom a:hover{ opacity:0.9; }
.footer-bottom .copyright{ font-size:12px; opacity:0.5; font-family:var(--f-body); font-weight:600; }
@media (max-width:920px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }


/* ============================================================
   QUOTE LIST — header toggle + slide-out drawer.
   Shared across fleet.html and every /fleet/[vehicle] page.
   ============================================================ */
/* Header quote-list button */
.quote-toggle{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-body); font-weight:600; font-size:13px;
  color:inherit; background:none; border:1px solid rgba(9,10,9,0.25);
  border-radius:999px; padding:9px 16px 9px 14px; cursor:pointer;
  transition:border-color var(--dur-1) var(--ease);
}
#site-header.header-over-light .quote-toggle{ color:var(--c-black-deep); border-color:rgba(9,10,9,0.25); }
#site-header.header-over-light.is-scrolled .quote-toggle{ color:var(--c-white-warm); border-color:rgba(244,242,235,0.35); }

/* Over a light page top (before scroll), make logo + nav legible; revert once
   the dark scrolled bar kicks in. Keeps these pages readable at the top. */
#site-header.header-over-light .logo{ color:var(--c-black-deep); }
#site-header.header-over-light nav.primary-nav a{ color:var(--c-black-deep); opacity:0.82; }
#site-header.header-over-light .mobile-toggle{ color:var(--c-black-deep); }
#site-header.header-over-light .nav-caret{ color:var(--c-black-deep); }
#site-header.header-over-light.is-scrolled .logo{ color:var(--c-white-pure); }
#site-header.header-over-light.is-scrolled nav.primary-nav a{ color:var(--c-white-warm); }
#site-header.header-over-light.is-scrolled .mobile-toggle{ color:var(--c-white-pure); }
#site-header.header-over-light.is-scrolled .nav-caret{ color:var(--c-white-warm); }
.quote-toggle:hover{ border-color:var(--c-khaki); }
.quote-toggle .quote-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 4px;
  background:var(--c-khaki); color:var(--c-white-pure);
  border-radius:999px; font-size:10px; font-weight:700;
}

/* Quote-list drawer */
.quote-drawer-overlay{
  position:fixed; inset:0; background:rgba(9,10,9,0.5);
  opacity:0; visibility:hidden; transition:opacity var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
  z-index:150;
}
.quote-drawer-overlay.is-open{ opacity:1; visibility:visible; transition:opacity var(--dur-2) var(--ease); }
.quote-drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(420px,92vw);
  background:var(--c-white-pure); color:var(--c-black-deep);
  z-index:151; transform:translateX(100%); transition:transform var(--dur-2) var(--ease);
  display:flex; flex-direction:column;
  overflow-y:auto;
}
.quote-drawer.is-open{ transform:translateX(0); }
.quote-drawer-head{ padding:24px 24px 18px; border-bottom:1px solid rgba(9,10,9,0.1); display:flex; align-items:center; justify-content:space-between; }
.quote-drawer-head h3{ font-size:18px; font-weight:700; }
.quote-drawer-close{ background:none; border:none; font-size:22px; cursor:pointer; color:inherit; line-height:1; padding:4px; }
.quote-drawer-list{ flex:1; overflow-y:auto; padding:12px 24px; }
.quote-drawer-empty{ font-size:13px; opacity:0.55; padding:24px 0; }
.quote-drawer-item{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid rgba(9,10,9,0.08); }
.quote-drawer-item img{ width:56px; height:56px; object-fit:cover; border-radius:6px; flex:0 0 auto; }
.quote-drawer-item .qi-name{ font-size:13px; font-weight:600; flex:1; }
.quote-drawer-item .qi-remove{ background:none; border:none; font-size:12px; color:rgba(9,10,9,0.45); cursor:pointer; text-decoration:underline; }
.quote-drawer-foot{ padding:20px 24px 26px; border-top:1px solid rgba(9,10,9,0.1); }
.quote-drawer-foot p{ font-size:11px; opacity:0.55; margin:2px 0 14px; }
.quote-drawer-foot .btn{ width:100%; justify-content:center; }
.quote-form-row{ margin-bottom:12px; }
.quote-form-row label{ display:block; font-size:11px; font-weight:600; letter-spacing:0.03em; margin-bottom:5px; color:rgba(9,10,9,0.65); }
.quote-form-row input,
.quote-form-row textarea{
  width:100%; font-family:inherit; font-size:13px; padding:9px 11px;
  border:1px solid rgba(9,10,9,0.2); border-radius:6px; background:var(--c-white-pure); color:var(--c-black-deep);
}
.quote-form-row input:focus,
.quote-form-row textarea:focus{ outline:2px solid var(--c-khaki); outline-offset:1px; }
.quote-form-row textarea{ resize:vertical; }
.quote-form-split{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* ============================================================
   SERVICES DROPDOWN (desktop hover) + mobile drawer sub-list
   ============================================================ */
.primary-nav .has-dropdown{ position:relative; }
.nav-caret{ font-size:0.68em; opacity:0.7; display:inline-block; transition:transform var(--dur-1) var(--ease); }
.primary-nav .has-dropdown:hover .nav-caret,
.primary-nav .has-dropdown:focus-within .nav-caret{ transform:rotate(180deg); }
/* invisible hover bridge so the menu doesn't drop while crossing the gap */
.primary-nav .has-dropdown::after{ content:''; position:absolute; top:100%; left:0; right:0; height:18px; }
.dropdown-menu{
  position:absolute; top:calc(100% + 14px); left:50%;
  transform:translateX(-50%) translateY(8px);
  min-width:252px; padding:10px;
  background:rgba(9,10,9,0.97); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(244,242,235,0.12); border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,0.42);
  display:flex; flex-direction:column; gap:1px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
  z-index:200;
}
.primary-nav .has-dropdown:hover .dropdown-menu,
.primary-nav .has-dropdown:focus-within .dropdown-menu{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.dropdown-menu a{
  display:block; padding:11px 14px; border-radius:9px;
  font-size:13px; font-weight:500; letter-spacing:0.01em; white-space:nowrap;
  color:var(--c-white-warm); opacity:0.82;
  transition:background var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.dropdown-menu a:hover{ background:rgba(198,185,155,0.14); opacity:1; color:var(--c-white-pure); }
.dropdown-divider{ height:1px; background:rgba(244,242,235,0.12); margin:8px 6px; }
.dropdown-all{ color:var(--c-sand) !important; font-weight:600 !important; opacity:1 !important; }

.mobile-drawer .drawer-sub{
  margin:16px 0 4px; padding-left:18px;
  border-left:1px solid rgba(244,242,235,0.2);
  display:flex; flex-direction:column; gap:14px;
}
.mobile-drawer .drawer-sub a{ font-size:var(--step-0); font-weight:500; opacity:0.8; }