/* Ozka Luxury Group: what every page shares. Tokens, base, header, buttons, footer. */
/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --canvas:#0A0E12;
  --panel:#121A23;
  --panel-2:#0E141B;
  --accent:#D9B779;
  --accent-hover:#EFD3A0;
  --accent-muted:#8A6F42;
  --teal:#4FB3C7;
  --text-primary:#F2EFE9;
  --text-secondary:#9AA7B4;
  --line:#22303D;
  --line-strong:#38495A;

  --display:'Archivo',system-ui,sans-serif;
  --body:'Newsreader',Georgia,serif;
  --mono:'Azeret Mono',ui-monospace,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);

  --gutter:clamp(16px,5vw,80px);
  --maxw:1280px;
}

*,*::before,*::after{box-sizing:border-box}

html,body{
  overflow-x:hidden;
  overflow-x:clip;
}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--body);
  font-weight:300;
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  opacity:0;
  transition:opacity .9s var(--ease);
}
body.lit{opacity:1}

h1,h2,h3,h4{
  font-family:var(--display);
  font-variation-settings:'wdth' 112;
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.015em;
  margin:0;
  text-wrap:balance;
}

a{color:inherit}
img{display:block;max-width:100%}

.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip{
  position:absolute;left:var(--gutter);top:-100px;z-index:200;
  background:var(--accent);color:#0A0E12;padding:12px 18px;border-radius:8px;
  font-family:var(--mono);font-size:13px;text-decoration:none;
  transition:top .3s var(--ease);
}
.skip:focus{top:14px}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

/* ============================================================
   THE ENVIRONMENT LAYER (one place, behind everything)
   ============================================================ */
.env{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 55% at 18% 12%,rgba(79,179,199,.075),transparent 62%),
    radial-gradient(ellipse 70% 60% at 86% 78%,rgba(217,183,121,.062),transparent 60%),
    radial-gradient(ellipse 120% 80% at 50% 50%,rgba(18,26,35,.5),transparent 70%);
  animation:envdrift 96s var(--ease-soft) -24s infinite alternate;
}
@keyframes envdrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-2.5%,1.8%,0) scale(1.09)}
}
.env::after{
  content:"";position:absolute;inset:0;opacity:.32;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.motes{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5}
.mote{
  position:absolute;width:2px;height:2px;border-radius:50%;
  background:var(--accent);opacity:.3;
  animation:motefloat linear infinite;
}
.mote.t{background:var(--teal);opacity:.22}
@keyframes motefloat{
  0%{transform:translate3d(0,0,0);opacity:0}
  12%{opacity:.34}
  88%{opacity:.28}
  100%{transform:translate3d(14px,-130px,0);opacity:0}
}

/* ============================================================
   NAV  (one header, one colour: it never changes with scroll)
   ============================================================ */
.nav{
  --nh:70px;
  --n-text:#ABA59C;
  --n-gold:#D8B166;
  --n-line:rgba(223,203,168,.10);
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nh);
  /* fully transparent, the page shows through; the text carries its own soft shadow instead */
  background:transparent;
  text-shadow:0 1px 2px rgba(0,0,0,.55),0 2px 14px rgba(0,0,0,.45);
}
.nav .sh-book,.nav .dd{text-shadow:none}
/* over the films the header is pure glass; once page content runs beneath it, a light frost keeps the words apart (never a black bar) */
.nav{transition:background-color .45s ease,height .45s ease,-webkit-backdrop-filter .45s ease,backdrop-filter .45s ease}
.nav.frost{--nh:60px;background:rgba(12,16,20,.34);-webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1)}
.sh-in{
  height:100%;display:flex;align-items:center;gap:22px;
  padding:0 clamp(18px,5.2vw,76px);
}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;flex-shrink:0}
.brand img{height:52px;width:auto;transition:transform .2s ease}
.brand:hover img{transform:scale(1.04)}
/* the wordmark as the logo sets it: the logo's own OZKA lettering (so its gold is the logo's gold),
   its two lines centred under it. The lettering keeps the size the set type had (the owner's call, 26 September):
   100px wide, 86 in the slim header, 79 on phones */
.brand .bw{display:flex;flex-direction:column;align-items:center;gap:3px;line-height:1}
.brand .bw picture{display:block;margin-bottom:2px}
.brand .bw img{display:block;width:100px;height:auto}
.brand:hover .bw img{transform:none}
.brand .bw em{
  font-family:var(--display);font-style:normal;font-weight:600;font-size:7px;white-space:nowrap;
  letter-spacing:.2em;margin-right:-.2em;text-transform:uppercase;color:rgba(244,239,230,.84);
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
/* in the slimmer frosted header the whole mark steps down together so it keeps its margins */
.nav.frost .brand img{height:46px}
.nav.frost .brand .bw{gap:2px}
.nav.frost .brand .bw img{width:86px;height:auto}
.nav.frost .brand .bw em{font-size:6.5px}
.brand .bw em:first-of-type{display:flex;align-items:center;gap:7px}
.brand .bw em:first-of-type::before,.brand .bw em:first-of-type::after{content:"";width:12px;height:1px;background:var(--n-gold);opacity:.75}

/* centre navigation */
.sh-nav{flex:1;display:flex;justify-content:center;min-width:0}
.sh-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:clamp(18px,2.2vw,34px)}
.sh-nav li{position:relative}
.sh-nav a,.dd-t{
  position:relative;display:inline-flex;align-items:center;gap:7px;padding:8px 0;
  background:none;border:0;cursor:pointer;text-decoration:none;white-space:nowrap;
  font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  color:var(--n-text);transition:color .18s ease;
}
.sh-nav a::after,.dd-t::after{
  content:"";position:absolute;left:20%;right:20%;bottom:2px;height:1px;background:var(--n-gold);
  opacity:0;transform:scaleX(.4);transition:opacity .18s ease,transform .18s ease;
}
.sh-nav a:hover,.dd-t:hover,.has-dd.open .dd-t{color:var(--n-gold)}
.sh-nav a.on{color:var(--n-gold)}
.sh-nav a.on::after{opacity:.75;transform:scaleX(1)}
.chev{width:9px;height:6px;fill:none;stroke:currentColor;stroke-width:1.4;transition:transform .22s ease}
.has-dd.open .chev{transform:rotate(180deg)}

/* the partners menu: a concierge card, not a dropdown list */
.dd{
  position:absolute;top:calc(100% + 18px);left:50%;width:400px;padding:10px;
  background:rgba(14,15,18,.95);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(223,203,168,.12);border-radius:12px;
  box-shadow:0 22px 50px -24px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transform:translate(-50%,6px);
  transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;
}
.dd::before{content:"";position:absolute;top:0;left:50%;width:44px;height:1px;margin-left:-22px;background:var(--n-gold);opacity:.8}
/* a bridge across the gap, so the pointer can travel from the word to the card */
.dd::after{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}
.has-dd.open .dd{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
.dd a{
  display:block;padding:13px 16px;border-radius:8px;text-transform:none;letter-spacing:0;white-space:normal;
  transition:background-color .2s ease,transform .2s ease;
}
.dd a::after{display:none}
.dd a b{display:block;margin-bottom:4px;font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-primary);transition:color .2s ease}
.dd a span{display:block;font-family:var(--body);font-size:14px;line-height:1.45;color:#9A958D}
.dd a:hover,.dd a:focus-visible{background:rgba(216,177,102,.06);transform:translateX(3px)}
.dd a:hover b,.dd a:focus-visible b{color:var(--n-gold)}

/* right: availability, then the one gold action */
.sh-right{display:flex;align-items:center;gap:20px;flex-shrink:0}
.sh-res{display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-decoration:none;line-height:1}
.sh-res span{font-family:var(--mono);font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:#8E887F}
.sh-res b{font-family:var(--mono);font-weight:400;font-size:11.5px;letter-spacing:.08em;color:#D6D0C6;transition:color .18s ease}
.sh-res:hover b{color:var(--n-gold)}
.sh-book{
  display:inline-flex;align-items:center;justify-content:center;height:44px;min-width:124px;padding:0 17px;
  background:var(--n-gold);color:#0B0C0E;border-radius:8px;text-decoration:none;white-space:nowrap;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  transition:background-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.sh-book:hover{background:#E4C07E;transform:translateY(-1px);box-shadow:0 8px 20px -12px rgba(216,177,102,.7)}
.sh-book:active{transform:translateY(0)}

/* menu button (small screens only) */
.sh-menu{
  display:none;width:44px;height:44px;padding:0;background:transparent;border:1px solid rgba(255,255,255,.14);border-radius:8px;
  cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.sh-menu i{display:block;width:18px;height:1px;background:var(--text-primary);transition:transform .22s ease}
.sh-menu[aria-expanded="true"] i:first-child{transform:translateY(3.5px) rotate(45deg)}
.sh-menu[aria-expanded="true"] i:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* the mobile panel */
.mnav{
  position:fixed;left:0;right:0;top:70px;bottom:0;z-index:99;overflow:auto;
  display:flex;flex-direction:column;justify-content:space-between;gap:32px;
  padding:26px clamp(18px,5vw,40px) calc(28px + env(safe-area-inset-bottom));
  background:#0C0D10;border-top:1px solid rgba(223,203,168,.08);
  opacity:0;transform:translateY(-8px);transition:opacity .22s ease,transform .22s ease;
}
.mnav.open{opacity:1;transform:none}
.mnav[hidden]{display:none}
.mn-list{list-style:none;margin:0;padding:0}
.mn-list > li{border-bottom:1px solid rgba(255,255,255,.07)}
.mn-list > li > a,.mn-exp{
  display:flex;align-items:center;justify-content:space-between;width:100%;padding:18px 2px;
  background:none;border:0;cursor:pointer;text-decoration:none;text-align:left;
  font-family:var(--display);font-variation-settings:'wdth' 110;font-weight:600;font-size:20px;letter-spacing:.02em;
  color:var(--text-primary);transition:color .18s ease;
}
.mn-list > li > a:hover,.mn-exp:hover{color:var(--n-gold)}
.mn-exp .chev{width:12px;height:8px}
.mn-exp[aria-expanded="true"] .chev{transform:rotate(180deg)}
.mn-sub{padding:0 0 14px}
.mn-sub[hidden]{display:none}
.mn-sub a{display:block;padding:11px 14px;margin:2px 0;border-left:1px solid rgba(216,177,102,.35);text-decoration:none}
.mn-sub a b{display:block;margin-bottom:3px;font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-primary)}
.mn-sub a span{display:block;font-size:14px;line-height:1.45;color:#9A958D}
.mn-foot{display:flex;flex-direction:column;gap:18px}
.mn-res{display:flex;flex-direction:column;gap:5px;text-decoration:none}
.mn-res span{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:#8E887F}
.mn-res b{font-family:var(--mono);font-weight:400;font-size:15px;letter-spacing:.08em;color:var(--text-primary)}
.mn-book{
  display:flex;align-items:center;justify-content:center;height:52px;border-radius:8px;text-decoration:none;
  background:var(--n-gold);color:#0B0C0E;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
}
body.menu-open{overflow:hidden}

/* responsive: shed the quietest things first, keep the hierarchy */
@media (max-width:1179px){.sh-res{display:none}.sh-nav a,.dd-t{letter-spacing:.14em}}
@media (max-width:919px){
  .sh-nav{display:none}
  .sh-right{margin-left:auto;gap:10px}
  .sh-menu{display:inline-flex}
  .sh-book{height:40px;min-width:0;padding:0 16px;font-size:10.5px}
}
@media (max-width:400px){
  .brand .bw img{width:79px}
  .brand .bw em{font-size:6.5px;letter-spacing:.16em;margin-right:-.16em}
  .brand img{height:46px}
  .sh-book{padding:0 12px;letter-spacing:.12em}
}
@media (min-width:920px){.mnav{display:none !important}}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-block;font-family:var(--mono);font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  padding:14px 26px;border-radius:2px;border:1px solid transparent;
  cursor:pointer;position:relative;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease);
}
.btn-gold{background:var(--accent);color:#0A0E12;font-weight:400}
.btn-gold:hover{background:var(--accent-hover);transform:translateY(-2px)}
.btn-ghost{border-color:var(--line-strong);color:var(--text-primary);background:transparent}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn-sm{padding:11px 20px;font-size:11.5px}
@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  position:relative;z-index:1;border-top:1px solid var(--line);
  padding:clamp(52px,6vw,84px) var(--gutter) 44px;
}
.fgrid{display:grid;gap:36px;grid-template-columns:1fr;max-width:var(--maxw);margin:0 auto}
@media (min-width:780px){.fgrid{grid-template-columns:1.2fr 1fr 1fr}}
footer img{height:clamp(128px,15.5vw,186px);width:auto;margin-left:-10px}
.ftag{font-family:var(--mono);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin:18px 0 0}
footer h4{font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--text-secondary);margin:0 0 14px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
footer a{color:var(--text-primary);text-decoration:none;font-size:16px;transition:color .4s var(--ease)}
footer a:hover{color:var(--accent)}
.fbase{
  max-width:var(--maxw);margin:44px auto 0;padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#7E8D9B;
}


/* ============================================================
   INNER PAGES (Services, Fleet): the site's chrome, a quieter body
   ============================================================ */
.pg main{position:relative;z-index:1}
.pgw{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.pg section{position:relative;padding:clamp(52px,6vw,94px) 0}
.pg .eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);margin:0 0 20px}
.pg h1{font-size:clamp(36px,5.6vw,72px);letter-spacing:-.022em}
.pg h2{font-size:clamp(27px,3.4vw,44px);letter-spacing:-.018em}
.pg h3{font-size:clamp(20px,1.7vw,25px);letter-spacing:-.012em}
.pg p{margin:0}
.pg-lede{max-width:56ch;margin-top:24px !important;color:var(--text-secondary);font-size:clamp(17px,1.35vw,20px)}
.pg-btns{display:flex;flex-wrap:wrap;gap:13px;margin-top:36px}

/* the opening band, below the fixed header */
.pg-top{padding-top:clamp(124px,14vw,188px) !important;padding-bottom:clamp(40px,4.4vw,64px) !important}
.pg-top::after{content:"";display:block;height:1px;margin-top:clamp(40px,4.4vw,64px);
  background:linear-gradient(90deg,rgba(217,183,121,.45),rgba(217,183,121,.06) 55%,transparent)}

/* the first band after the opening sits closer to it */
.pg-top + section{padding-top:clamp(28px,3.2vw,50px)}

/* entrances, once */
.pr{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.pr.in{opacity:1;transform:none}

/* a numbered block: copy on one side, a photograph or a specification panel on the other */
.pg-rows{display:grid;gap:clamp(40px,4.6vw,74px)}
.pg-row{display:grid;gap:clamp(22px,3.4vw,56px);align-items:center;grid-template-columns:1fr}
@media (min-width:900px){
  .pg-row{grid-template-columns:1.02fr 1fr}
  .pg-row:nth-child(even) .pg-row-media{order:-1}
}
.pg-num{font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--accent-muted);margin:0 0 14px !important}
.pg-row h3{margin-bottom:14px}
.pg-row p{color:var(--text-secondary);max-width:46ch}
.pg-row-media img{width:100%;height:100%;object-fit:cover;border-radius:3px;aspect-ratio:3/2}
.pg-row-media{overflow:hidden;border-radius:3px;border:1px solid var(--line)}

/* a plain list of what is included */
.pg-inc{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:9px}
.pg-inc li{position:relative;padding-left:20px;font-size:15.5px;color:var(--text-secondary)}
.pg-inc li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--accent)}

/* three quiet pillars */
.pg-grid3{display:grid;gap:clamp(24px,3vw,44px);grid-template-columns:1fr;margin-top:44px}
@media (min-width:780px){.pg-grid3{grid-template-columns:repeat(3,1fr)}}
.pg-pillar h3{font-size:19px;margin-bottom:10px}
.pg-pillar p{color:var(--text-secondary);font-size:16px}

/* comparison */
.pg-table{width:100%;border-collapse:collapse;margin-top:34px;font-size:15.5px}
.pg-table caption{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--text-secondary);padding-bottom:14px}
.pg-table th,.pg-table td{text-align:left;padding:14px 16px 14px 0;border-bottom:1px solid var(--line)}
.pg-table th{font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#7E8D9B}
.pg-table td{color:var(--text-secondary)}
.pg-table td:first-child{color:var(--text-primary)}
@media (max-width:640px){
  .pg-table,.pg-table tbody,.pg-table tr,.pg-table td{display:block;width:100%}
  .pg-table thead{display:none}
  .pg-table tr{border-bottom:1px solid var(--line);padding:14px 0}
  .pg-table td{border:0;padding:3px 0}
  .pg-table td::before{content:attr(data-l) " ";font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#7E8D9B}
  .pg-table td:first-child::before{content:""}
}

/* closing invitation */
.pg-cta{border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,rgba(18,26,35,.5))}
.pg-cta .pgw{text-align:center}
.pg-cta .pg-lede{margin-left:auto;margin-right:auto}
.pg-cta .pg-btns{justify-content:center}
.pg-note{margin-top:clamp(34px,4vw,54px) !important;font-size:14.5px;color:#7E8D9B;max-width:64ch}

@media (prefers-reduced-motion:reduce){.pr{opacity:1;transform:none;transition:none}}

/* ============================================================
   STRAIGHT ANSWERS: the FAQ accordion (used by /faq/)
   ============================================================ */
.qa{border-top:1px solid var(--line);margin-top:clamp(40px,5vw,72px)}
/* on its own page the accordion follows the opening band directly */
.pg .qa{margin-top:0}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{
  list-style:none;cursor:pointer;padding:26px 0;
  display:grid;gap:10px;grid-template-columns:1fr auto;align-items:baseline;
  font-family:var(--display);font-variation-settings:'wdth' 112;font-weight:600;
  font-size:clamp(18px,1.9vw,25px);letter-spacing:-.012em;
  transition:color .4s var(--ease);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--accent)}
.qa .mk{
  font-family:var(--mono);font-size:16px;color:var(--accent);
  transition:transform .45s var(--ease);line-height:1;
}
.qa details[open] .mk{transform:rotate(45deg)}
.qa .ans{padding:0 0 28px;color:var(--text-secondary);font-size:17px;max-width:62ch}
.qa details[open] summary{color:var(--accent)}
/* an answer opens with the same quiet fade the rest of the site uses */
.qa .ans{animation:qa-open .5s var(--ease) both}
@keyframes qa-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.qa details summary{scroll-margin-top:90px}
@media (pointer:coarse){.qa summary{padding:22px 0}}
@media (prefers-reduced-motion:reduce){.qa .ans{animation:none}}

/* ============================================================
   THE FLEET PAGE: vehicle photography, read like an automotive
   editorial. Used by /fleet/ only.
   ============================================================ */

/* the opening: the words and the photograph are one composition, so the band
   above is compact and the two meet in a fade rather than a rule */
.fl-top{padding-top:clamp(106px,10.4vw,150px) !important;padding-bottom:clamp(26px,3vw,44px) !important}
.fl-top::after{display:none}
.fl-top .pg-lede{margin-top:18px !important}
.fl-top .pg-btns{margin-top:clamp(24px,2.6vw,30px)}

.fl-hero{padding-top:0 !important;padding-bottom:0 !important}
.fl-hero figure{margin:0;position:relative;overflow:hidden}
/* the crop is the composition: the whole vehicle stays in frame at any desk
   width, and the height follows it instead of a fixed band */
.fl-hero img{display:block;width:100%;height:auto;aspect-ratio:1600/666;max-height:720px;
  object-fit:cover;object-position:50% 50%;
  /* the sky dissolves into the page itself, so the seam cannot be seen at any
     scroll position; the vehicle itself is never touched */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%);
  mask-image:linear-gradient(180deg,transparent 0,#000 12%)}
@media (max-width:720px){
  /* a phone gets the full frame, which reads better than a letterbox */
  .fl-hero img{aspect-ratio:16/9;max-height:none;object-position:50% 54%}
}
.fl-hero figure::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,14,18,0) 86%,rgba(10,14,18,.5))}

/* the statement under the opening image */
.fl-intro p{max-width:60ch;color:var(--text-secondary);font-size:clamp(18px,1.6vw,23px);line-height:1.5}

/* the vehicles */
.fl-list{display:grid;gap:clamp(64px,8vw,132px);margin-top:clamp(10px,1.6vw,22px)}
.fl-item{display:grid;gap:clamp(24px,3.4vw,58px);align-items:center;grid-template-columns:1fr}
@media (min-width:980px){
  .fl-item{grid-template-columns:1.32fr 1fr}
  /* the rhythm: 01 image left, 02 image right, and so on, the photograph always the wider half */
  .fl-item:nth-child(even){grid-template-columns:1fr 1.32fr}
  .fl-item:nth-child(even) .fl-media,
  .fl-item:nth-child(even) .fl-ph{order:1}
}
.fl-media,.fl-ph{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:3px;background:var(--panel-2)}
.fl-media img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 54%;
  transition:transform 1.1s var(--ease)}
@media (hover:hover){.fl-item:hover .fl-media img{transform:scale(1.022)}}

/* a vehicle we do not photograph yet is not filled with someone else's car */
.fl-ph{display:grid;place-items:center;aspect-ratio:16/9;text-align:center;padding:clamp(20px,3vw,38px);
  background:linear-gradient(160deg,rgba(217,183,121,.05),transparent 46%),var(--panel-2)}
.fl-ph span{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-muted);max-width:30ch;line-height:2}

.fl-head{display:flex;align-items:baseline;gap:14px;margin-bottom:16px}
.fl-idx{font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--accent-muted)}
.fl-cat{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.fl-copy h3{margin:0 0 14px;font-size:clamp(25px,2.5vw,35px);letter-spacing:-.018em}
.fl-say{margin:0 0 14px !important;color:var(--text-primary);font-size:clamp(17px,1.45vw,21px);letter-spacing:.005em}
.fl-desc{color:var(--text-secondary);max-width:46ch}
.fl-spec{display:flex;flex-wrap:wrap;gap:0;margin:24px 0 0;padding:18px 0 0;border-top:1px solid var(--line)}
.fl-spec>div{flex:1 1 45%;min-width:130px}
.fl-spec dt{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#7E8D9B;margin:0 0 5px}
.fl-spec dd{margin:0;font-size:18px;color:var(--text-primary)}
.fl-acts{display:flex;flex-wrap:wrap;gap:13px;margin-top:28px}

/* the decision guide: rows, not a price list */
.fl-guide{margin-top:clamp(30px,3.6vw,48px);border-top:1px solid var(--line)}
.fl-guide>div{display:grid;gap:6px 24px;grid-template-columns:1fr;padding:20px 0;border-bottom:1px solid var(--line)}
@media (min-width:720px){.fl-guide>div{grid-template-columns:minmax(210px,.5fr) 1fr;align-items:baseline}}
.fl-guide dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.fl-guide dd{margin:0;font-size:clamp(18px,1.7vw,23px);font-family:var(--display);font-variation-settings:'wdth' 112;
  font-weight:600;letter-spacing:-.012em;color:var(--text-primary)}

/* the four standards */
.fl-std{display:grid;gap:clamp(26px,3vw,40px);grid-template-columns:1fr;margin-top:clamp(34px,4vw,54px)}
@media (min-width:620px){.fl-std{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.fl-std{grid-template-columns:repeat(4,1fr)}}
.fl-std h3{font-size:17px;margin:12px 0 10px}
.fl-std p{color:var(--text-secondary);font-size:15.5px}
.fl-std .fl-idx{display:block}

/* the closing invitation, over the quietest frame of the fleet */
.fl-close{position:relative;overflow:hidden;border-top:1px solid var(--line)}
.fl-close .fl-bg{position:absolute;inset:0;z-index:0}
.fl-close .fl-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 56%;opacity:.3}
.fl-close .fl-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,14,18,.86),rgba(10,14,18,.58) 45%,rgba(10,14,18,.92))}
.fl-close .pgw{position:relative;z-index:1;text-align:center}
.fl-close .pg-lede{margin-left:auto;margin-right:auto}
.fl-close .pg-btns{justify-content:center}

@media (prefers-reduced-motion:reduce){
  .fl-media img{transition:none}
  .fl-item:hover .fl-media img{transform:none}
}

/* ============================================================
   THE FIVE-COLUMN FOOTER (brand, services, company, areas, reservations)
   ============================================================ */
.fgrid.f5{grid-template-columns:1fr;gap:38px 32px}
@media (min-width:700px){.fgrid.f5{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.fgrid.f5{grid-template-columns:1.5fr repeat(4,1fr)}}
.fbase .ftag{font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);margin:0}