/* ==========================================================================
   Johnson Executive Transportation — Stylesheet (2026 redesign)
   Palette taken from the client logo: deep navy ground, silver, royal blue.
   Display: Cormorant Garamond · UI/body: Instrument Sans
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* ground — darkest to lightest panel */
  --ink-0:#04070e;
  --ink-1:#080d18;
  --ink-2:#0d1424;
  --ink-3:#131c30;
  --ink-4:#1a2740;

  /* brand */
  --blue-deep:#1d4f80;
  --blue:#4a90d9;
  --blue-bright:#7fc0ff;
  --silver:#c9d2de;
  --silver-dim:#8fa3bc;   /* body copy on dark — 7.6:1 */
  --muted:#6f8298;        /* labels/meta on dark — 5.4:1 */
  --white:#f4f7fb;

  /* structure */
  --line:rgba(143,163,188,.16);
  --line-strong:rgba(143,163,188,.30);
  --glow:rgba(74,144,217,.35);

  --display:'Cormorant Garamond', 'Times New Roman', serif;
  --body:'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --maxw:1280px;
  --gutter:clamp(20px, 5vw, 48px);
  --radius:2px;

  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --rv-dur:1.05s;
  --rv-stagger:90ms;

  /* header height, kept in sync so anchors land clear of it */
  --header-h:88px;
}

/* --------------------------------------------------------------------------
   2. Reset + base
   -------------------------------------------------------------------------- */
*{margin:0; padding:0; box-sizing:border-box;}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 24px);
  -webkit-text-size-adjust:100%;
}

body{
  font-family:var(--body);
  background:var(--ink-0);
  color:var(--silver-dim);
  font-size:1rem;
  line-height:1.65;
  font-weight:400;
  letter-spacing:-.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font:inherit; cursor:pointer; border:none; background:none; color:inherit;}
input,textarea,select{font:inherit;}
svg{display:block;}

:focus-visible{
  outline:2px solid var(--blue-bright);
  outline-offset:3px;
  border-radius:1px;
}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:2000;
  background:var(--blue); color:var(--white); padding:12px 20px; font-size:.85rem;
}
.skip-link:focus{left:12px; top:12px;}

/* --------------------------------------------------------------------------
   3. Type
   -------------------------------------------------------------------------- */
h1,h2,h3{
  font-family:var(--display);
  font-weight:500;
  color:var(--white);
  letter-spacing:-.012em;
  text-wrap:balance;
}
h4{font-family:var(--body); font-weight:600; color:var(--white); letter-spacing:-.01em;}

h1{font-size:clamp(2.9rem, 6.2vw, 5.1rem); line-height:1.02;}
h2{font-size:clamp(2.1rem, 4vw, 3.35rem); line-height:1.08;}
h3{font-size:clamp(1.35rem, 1.9vw, 1.62rem); line-height:1.25;}

p{color:var(--silver-dim); text-wrap:pretty;}
strong,b{font-weight:600; color:var(--silver);}

.italic{font-style:italic; color:var(--blue-bright); font-weight:400;}

.eyebrow{
  font-family:var(--body);
  text-transform:uppercase;
  letter-spacing:.26em;
  font-size:.7rem;
  color:var(--blue-bright);
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:14px;
}
.eyebrow::before{
  content:''; width:26px; height:1px; flex-shrink:0;
  background:linear-gradient(90deg, transparent, var(--blue-bright));
}

.lead{font-size:clamp(1.02rem, 1.25vw, 1.16rem); line-height:1.62; color:var(--silver);}

/* --------------------------------------------------------------------------
   4. Motion system
   Elements only start hidden once JS has confirmed it can reveal them,
   so a JS failure leaves the page fully readable instead of blank.
   -------------------------------------------------------------------------- */

/* fade-up: paragraphs, cards, media */
.js [data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .95s var(--ease-out), transform .95s var(--ease-out);
  transition-delay:var(--rv-delay, 0ms);
  will-change:opacity, transform;
}
.js [data-reveal].is-in{opacity:1; transform:none;}
.js [data-reveal].is-done{will-change:auto;}

/* masked line/word reveal: headings.
   The element itself stays visible — the split children carry the motion. */
.js [data-reveal="lines"],
.js [data-reveal="words"]{opacity:1; transform:none; transition:none;}

.rv-line,
.rv-word{
  display:block;
  overflow:hidden;
  /* keep descenders out of the mask edge */
  padding-bottom:.14em;
  margin-bottom:-.14em;
}
.rv-word{display:inline-block; vertical-align:top;}

.rv-line > i,
.rv-word > i{
  display:block;
  font-style:inherit;
  transform:translateY(115%);
  transition:transform var(--rv-dur) var(--ease-out);
  transition-delay:var(--rv-delay, 0ms);
  will-change:transform;
}
.is-in .rv-line > i,
.is-in .rv-word > i{transform:translateY(0);}

/* release the compositing layers once the reveal has played — holding
   will-change on every line for the life of the page wastes GPU memory */
.is-done .rv-line > i,
.is-done .rv-word > i{will-change:auto;}

/* stagger helper for hand-placed delays */
.js [data-reveal-delay="1"]{--rv-delay:110ms;}
.js [data-reveal-delay="2"]{--rv-delay:220ms;}
.js [data-reveal-delay="3"]{--rv-delay:330ms;}
.js [data-reveal-delay="4"]{--rv-delay:440ms;}

/* a hairline that draws itself in */
.js [data-reveal-rule]{
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform 1.4s var(--ease-out);
  transition-delay:var(--rv-delay, 0ms);
}
.js [data-reveal-rule].is-in{transform:scaleX(1);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .js [data-reveal]{opacity:1 !important; transform:none !important;}
  .rv-line > i,.rv-word > i{transform:none !important;}
  .js [data-reveal-rule]{transform:scaleX(1) !important;}
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 30px;
  font-size:.78rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:600;
  border:1px solid transparent;
  position:relative;
  overflow:hidden;
  transition:color .4s var(--ease), border-color .4s var(--ease),
             transform .4s var(--ease), box-shadow .4s var(--ease);
  white-space:nowrap;
  isolation:isolate;
}
.btn-primary{
  background:var(--blue);
  color:#fff;
  box-shadow:0 10px 30px -12px var(--glow);
}
.btn-primary::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(135deg, var(--blue-bright), var(--blue));
  opacity:0; transition:opacity .4s var(--ease);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 36px -14px var(--glow);}
.btn-primary:hover::before{opacity:1;}

.btn-outline{border-color:var(--line-strong); color:var(--silver);}
.btn-outline:hover{border-color:var(--blue-bright); color:var(--blue-bright); background:rgba(74,144,217,.07);}

.btn-block{width:100%;}

/* small arrow that nudges on hover */
.btn .arw{transition:transform .4s var(--ease);}
.btn:hover .arw{transform:translateX(4px);}

/* text link with an underline that wipes in */
.link-under{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; font-weight:600;
  color:var(--blue-bright); padding-bottom:5px; position:relative;
}
.link-under::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right center;
  transition:transform .5s var(--ease);
}
.link-under:hover::after{transform:scaleX(1); transform-origin:left center;}

/* --------------------------------------------------------------------------
   6. Header + nav
   -------------------------------------------------------------------------- */
.site-header{
  /* above .mobile-nav — the header creates its own stacking context, so the
     hamburger cannot rise above the overlay on its own and the menu would
     have no visible close button */
  position:fixed; inset:0 0 auto 0; z-index:1100;
  height:var(--header-h);
  display:flex; align-items:center;
  background:linear-gradient(to bottom, rgba(4,7,14,.85), rgba(4,7,14,0));
  border-bottom:1px solid transparent;
  transition:height .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
}
.site-header.scrolled{
  height:70px;
  background:rgba(4,7,14,.9);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom-color:var(--line);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%;}

.brand{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.brand-mark{
  width:46px; height:46px; flex-shrink:0;
  transition:width .4s var(--ease), height .4s var(--ease);
  /* the logo file carries a square studio glow — clip it back to the disc
     so the mark never reads as a dark tile over the hero video */
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 56%, transparent 70%);
  mask-image:radial-gradient(circle at 50% 50%, #000 56%, transparent 70%);
}
.scrolled .brand-mark{width:40px; height:40px;}
.brand-text{display:flex; flex-direction:column; line-height:1.04;}
.brand-text .b1{
  font-family:var(--display); font-size:1.24rem; font-weight:600;
  letter-spacing:.055em; color:var(--white); text-transform:uppercase;
}
.brand-text .b2{
  font-size:.53rem; letter-spacing:.3em; color:var(--blue-bright);
  text-transform:uppercase; margin-top:3px; font-weight:600;
}

.primary-nav ul{display:flex; gap:clamp(18px, 2.4vw, 34px);}
.primary-nav a{
  font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; font-weight:500;
  color:var(--silver-dim); position:relative; padding-bottom:5px;
  transition:color .3s var(--ease); white-space:nowrap;
}
.primary-nav a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--blue-bright); transform:scaleX(0); transform-origin:right center;
  transition:transform .4s var(--ease);
}
.primary-nav a:hover{color:var(--white);}
.primary-nav a:hover::after{transform:scaleX(1); transform-origin:left center;}
.primary-nav a.active{color:var(--white);}
.primary-nav a.active::after{transform:scaleX(1);}

.nav-cta{display:flex; align-items:center; gap:20px; flex-shrink:0;}
.nav-phone{
  display:flex; flex-direction:column; line-height:1.2; text-align:right; white-space:nowrap;
}
.nav-phone small{font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:600;}
.nav-phone span{font-size:.86rem; color:var(--white); font-weight:500; letter-spacing:.01em;}
.nav-phone:hover span{color:var(--blue-bright);}
.nav-cta .btn{padding:13px 24px;}

.hamburger{
  display:none; flex-direction:column; justify-content:center; gap:6px;
  width:30px; height:30px; position:relative; z-index:2;
}
.hamburger span{height:1.5px; width:100%; background:var(--silver); transition:all .35s var(--ease);}
.hamburger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

.mobile-nav{
  position:fixed; inset:0; z-index:1050;
  background:var(--ink-0);
  padding:var(--header-h) 24px 24px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .6s var(--ease-out);
  visibility:hidden;
}
.mobile-nav.open{clip-path:inset(0 0 0 0); visibility:visible;}
.mobile-nav a{
  font-family:var(--display); font-size:2rem; color:var(--silver); padding:8px 0;
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out), color .3s var(--ease);
}
.mobile-nav.open a{opacity:1; transform:none;}
.mobile-nav.open a:nth-child(1){transition-delay:.14s;}
.mobile-nav.open a:nth-child(2){transition-delay:.19s;}
.mobile-nav.open a:nth-child(3){transition-delay:.24s;}
.mobile-nav.open a:nth-child(4){transition-delay:.29s;}
.mobile-nav.open a:nth-child(5){transition-delay:.34s;}
.mobile-nav.open a:nth-child(6){transition-delay:.39s;}
.mobile-nav.open a:nth-child(7){transition-delay:.44s;}
.mobile-nav a.active{color:var(--blue-bright);}
.mobile-nav .btn{font-family:var(--body); font-size:.78rem; margin-top:22px; padding:16px 40px;}
.mobile-nav .mn-phone{
  margin-top:26px; font-size:1rem; color:var(--blue-bright); letter-spacing:.06em;
  opacity:0; transition:opacity .5s var(--ease-out) .5s;
}
.mobile-nav.open .mn-phone{opacity:1;}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding:calc(var(--header-h) + 40px) 0 130px;
  background:var(--ink-0);
  overflow:hidden;
}
.hero-media{position:absolute; inset:0; z-index:0; overflow:hidden;}
.hero-media video,
.hero-media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.06);
}
.hero-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(4,7,14,.96) 0%, rgba(4,7,14,.88) 34%, rgba(4,7,14,.55) 66%, rgba(4,7,14,.42) 100%),
    linear-gradient(to top, rgba(4,7,14,.92) 0%, rgba(4,7,14,.1) 42%),
    radial-gradient(ellipse 70% 50% at 15% 40%, rgba(29,79,128,.28), transparent 70%);
}
/* fine grid, keeps the flat video from feeling empty */
.hero-grid{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.06;
  background-image:
    linear-gradient(to right, var(--silver) 1px, transparent 1px),
    linear-gradient(to bottom, var(--silver) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%, #000, transparent);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 50%, #000, transparent);
}
.hero .wrap{position:relative; z-index:3; width:100%;}
.hero-content{max-width:780px;}
.hero-content h1{margin:24px 0 26px;}
.hero-content .lead{max-width:540px; margin-bottom:40px;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:58px;}

.hero-stats{display:flex; gap:clamp(28px, 5vw, 64px); flex-wrap:wrap;}
.hero-stats .stat{position:relative; padding-left:18px;}
.hero-stats .stat::before{
  content:''; position:absolute; left:0; top:6px; bottom:6px; width:1px;
  background:linear-gradient(to bottom, var(--blue), transparent);
}
.hero-stats b{
  display:block; font-family:var(--display); font-size:clamp(1.7rem, 2.4vw, 2.15rem);
  color:var(--white); font-weight:600; line-height:1.1;
}
.hero-stats span{
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}

.scroll-cue{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  color:var(--muted); font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; font-weight:600;
}
.scroll-cue .rail{width:1px; height:44px; background:var(--line-strong); position:relative; overflow:hidden;}
.scroll-cue .rail::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, transparent, var(--blue-bright));
  animation:cuedrop 2.1s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes cuedrop{
  0%{transform:translateY(-100%);}
  60%,100%{transform:translateY(100%);}
}

/* Scroll-driven polish where supported; ignored elsewhere. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .hero-media video, .hero-media img{
      animation:heroDrift linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    @keyframes heroDrift{
      from{transform:scale(1.06) translateY(0);}
      to{transform:scale(1.14) translateY(4%);}
    }
  }
}

/* --------------------------------------------------------------------------
   8. Sections
   -------------------------------------------------------------------------- */
section{padding:clamp(80px, 10vw, 140px) 0; position:relative;}

.bg-1{background:var(--ink-1);}
.bg-2{background:var(--ink-2);}
.bg-grad{background:linear-gradient(180deg, var(--ink-1) 0%, var(--ink-2) 100%);}

.section-head{max-width:660px; margin-bottom:clamp(46px, 6vw, 72px);}
.section-head h2{margin-top:18px;}
.section-head p{margin-top:20px; font-size:1.02rem;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head.center .eyebrow::before{display:none;}

/* section index number in the corner */
.sec-index{
  position:absolute; top:clamp(34px, 5vw, 60px); right:var(--gutter);
  font-family:var(--display); font-size:.9rem; letter-spacing:.24em;
  color:var(--muted);
}
.sec-index b{color:var(--blue-bright); font-weight:500;}

.rule{height:1px; background:var(--line); width:100%;}

/* --------------------------------------------------------------------------
   9. Statement band — the big line-by-line reveal after the hero
   -------------------------------------------------------------------------- */
.statement{
  background:var(--ink-1);
  padding:clamp(90px, 12vw, 170px) 0;
  border-bottom:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.statement::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--blue), transparent);
  opacity:.5;
}
.statement-inner{max-width:1080px;}
.statement-mark{
  display:flex; align-items:center; gap:18px; margin-bottom:clamp(30px, 4vw, 48px);
}
.statement-mark .eyebrow::before{display:none;}
.statement-mark .bar{height:1px; flex:1; background:var(--line-strong);}

/* ch is unreliable against the display serif — size these in px */
.statement h2{
  font-size:clamp(2rem, 4.6vw, 4rem);
  line-height:1.14;
  letter-spacing:-.018em;
  color:var(--white);
  max-width:min(100%, 900px);
}
.statement h2 .dim{color:var(--muted);}
.statement-foot{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(24px, 4vw, 56px);
  margin-top:clamp(50px, 7vw, 90px);
  padding-top:38px;
  border-top:1px solid var(--line);
}
.statement-foot .sf{display:flex; flex-direction:column; gap:10px;}
.statement-foot .sf b{
  font-family:var(--display); font-size:1.05rem; color:var(--white); font-weight:600;
  letter-spacing:.02em;
}
.statement-foot .sf p{font-size:.92rem; line-height:1.6;}
.statement-foot .sf .n{
  font-size:.64rem; letter-spacing:.2em; color:var(--blue-bright); font-weight:700;
}

/* --------------------------------------------------------------------------
   10. Services
   -------------------------------------------------------------------------- */
.services-grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1px; background:var(--line); border:1px solid var(--line);
}
.service-card{
  background:var(--ink-1);
  padding:clamp(32px, 3.6vw, 52px) clamp(26px, 3vw, 46px);
  position:relative;
  transition:background .5s var(--ease);
  overflow:hidden;
}
.bg-1 .service-card{background:var(--ink-0);}
.service-card::after{
  content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, var(--blue), transparent);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .6s var(--ease);
}
.service-card:hover{background:var(--ink-3);}
.service-card:hover::after{transform:scaleX(1);}
.service-icon{
  width:38px; height:38px; color:var(--blue-bright); margin-bottom:26px;
  transition:transform .5s var(--ease);
}
.service-card:hover .service-icon{transform:translateY(-3px);}
.service-num{
  position:absolute; top:clamp(30px,3.4vw,48px); right:clamp(26px,3vw,46px);
  font-family:var(--display); font-size:1.05rem; color:var(--muted); letter-spacing:.1em;
}
.service-card h3{margin-bottom:12px;}
.service-card p{font-size:.95rem;}

/* --------------------------------------------------------------------------
   11. Fleet cards
   -------------------------------------------------------------------------- */
.fleet-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.fleet-card{
  background:var(--ink-2);
  border:1px solid var(--line);
  display:flex; flex-direction:column;
  overflow:hidden;
  transition:transform .55s var(--ease), border-color .55s var(--ease), background .55s var(--ease);
}
.fleet-card:hover{transform:translateY(-6px); border-color:var(--line-strong); background:var(--ink-3);}
.fleet-visual{
  aspect-ratio:16/10; position:relative; overflow:hidden;
  background:linear-gradient(150deg, var(--ink-4), var(--ink-2));
  display:flex; align-items:center; justify-content:center;
}
.fleet-visual img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease);}
.fleet-card:hover .fleet-visual img{transform:scale(1.06);}
.fleet-visual svg{width:74%; height:auto; opacity:.9; transition:transform .7s var(--ease);}
.fleet-card:hover .fleet-visual svg{transform:translateX(6px);}
.fleet-visual::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(4,7,14,.65), transparent 55%);
}
.fleet-body{padding:26px 26px 28px; display:flex; flex-direction:column; flex:1;}
.fleet-body .tag{
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--blue-bright); font-weight:700; margin-bottom:12px; display:block;
}
.fleet-body h3{margin-bottom:10px;}
.fleet-body p{font-size:.92rem; margin-bottom:22px;}
.fleet-specs{
  display:flex; gap:22px; flex-wrap:wrap; margin-top:auto;
  border-top:1px solid var(--line); padding-top:18px;
}
.fleet-specs div{font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600;}
.fleet-specs b{
  display:block; color:var(--white); font-family:var(--display);
  font-size:1.3rem; font-weight:600; letter-spacing:0; text-transform:none; margin-bottom:2px;
}

/* --------------------------------------------------------------------------
   12. Gallery + lightbox
   -------------------------------------------------------------------------- */
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.gallery-grid.feature{grid-template-columns:1.6fr 1fr; align-items:stretch;}
.gallery-item{
  position:relative; overflow:hidden; cursor:zoom-in;
  border:1px solid var(--line); background:var(--ink-2);
  aspect-ratio:4/3;
}
/* the feature item sets the row height; the rest stretch to match it */
.gallery-grid.feature .gallery-item{aspect-ratio:auto;}
.gallery-grid.feature .gallery-item:first-child{aspect-ratio:16/9;}
.gallery-item img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease);}
.gallery-item:hover img{transform:scale(1.05);}
.gallery-item::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(4,7,14,.8) 0%, transparent 48%);
}
.gallery-caption{
  position:absolute; left:20px; right:20px; bottom:16px; z-index:2;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--silver);
  display:flex; align-items:center; gap:11px; font-weight:600;
}
.gallery-caption .zoom-icon{
  width:26px; height:26px; flex-shrink:0;
  border:1px solid var(--line-strong); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.gallery-item:hover .zoom-icon{border-color:var(--blue-bright); background:rgba(74,144,217,.15);}

.lightbox-overlay{
  position:fixed; inset:0; z-index:2000; background:rgba(4,7,14,.96);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; padding:clamp(20px,5vw,56px);
  opacity:0; transition:opacity .35s var(--ease);
}
.lightbox-overlay.open{display:flex;}
.lightbox-overlay.show{opacity:1;}
.lightbox-overlay img{
  max-width:min(92vw,1200px); max-height:84vh; object-fit:contain;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
  transform:scale(.97); transition:transform .45s var(--ease-out);
}
.lightbox-overlay.show img{transform:scale(1);}
.lightbox-close{
  position:absolute; top:24px; right:26px; width:44px; height:44px;
  border:1px solid var(--line-strong); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--silver);
  transition:border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.lightbox-close:hover{border-color:var(--blue-bright); color:var(--blue-bright); transform:rotate(90deg);}

/* --------------------------------------------------------------------------
   13. Why / feature list
   -------------------------------------------------------------------------- */
.why-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px, 6vw, 84px); align-items:center;}
.why-list{display:flex; flex-direction:column; margin-top:44px;}
.why-item{display:flex; gap:22px; padding:26px 0; border-bottom:1px solid var(--line);}
.why-item:first-child{padding-top:0;}
.why-item:last-child{border-bottom:0; padding-bottom:0;}
.why-icon{
  width:46px; height:46px; flex-shrink:0; border-radius:50%;
  border:1px solid var(--line-strong); color:var(--blue-bright);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.why-item:hover .why-icon{border-color:var(--blue-bright); background:rgba(74,144,217,.1);}
.why-copy h4{font-size:1.04rem; margin-bottom:7px;}
.why-copy p{font-size:.92rem;}

.why-visual{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  border:1px solid var(--line); background:var(--ink-2);
}
.why-visual img{width:100%; height:100%; object-fit:cover;}
.why-visual .vcap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:22px 24px;
  background:linear-gradient(to top, rgba(4,7,14,.92), transparent);
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--silver); font-weight:600;
}

/* --------------------------------------------------------------------------
   14. Testimonials
   -------------------------------------------------------------------------- */
.testi-track{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.testi-card{
  background:var(--ink-2); border:1px solid var(--line); padding:34px 30px;
  display:flex; flex-direction:column; gap:20px;
  transition:border-color .5s var(--ease), transform .5s var(--ease);
}
.testi-card:hover{border-color:var(--line-strong); transform:translateY(-4px);}
.testi-stars{color:var(--blue-bright); font-size:.85rem; letter-spacing:.2em;}
.testi-quote{
  font-family:var(--display); font-size:1.2rem; font-style:italic;
  color:var(--silver); line-height:1.5;
}
.testi-person{
  display:flex; align-items:center; gap:14px; margin-top:auto;
  padding-top:18px; border-top:1px solid var(--line);
}
.testi-avatar{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg, var(--blue), var(--blue-deep));
  font-family:var(--display); font-weight:600; color:#fff; font-size:1rem;
}
.testi-person .name{font-size:.88rem; color:var(--white); font-weight:500;}
.testi-person .role{font-size:.72rem; color:var(--muted);}

/* honest empty state, used while real reviews are still being collected */
.review-empty{
  border:1px dashed var(--line-strong); background:var(--ink-2);
  padding:clamp(38px, 5vw, 62px); text-align:center; max-width:760px; margin:0 auto;
}
.review-empty h3{margin-bottom:14px;}
.review-empty p{margin:0 auto 26px; max-width:52ch;}

/* --------------------------------------------------------------------------
   15. CTA band
   -------------------------------------------------------------------------- */
.cta-band{
  position:relative; overflow:hidden;
  background:var(--ink-1);
  border-top:1px solid var(--line);
  padding:clamp(70px, 9vw, 110px) 0;
}
.cta-band::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 120% at 88% 50%, rgba(29,79,128,.3), transparent 70%);
}
.cta-inner{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(28px, 5vw, 60px); flex-wrap:wrap;
}
.cta-inner h2{max-width:min(100%, 560px); margin-top:16px;}
.cta-actions{display:flex; gap:14px; flex-wrap:wrap;}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.site-footer{background:var(--ink-0); border-top:1px solid var(--line); padding:clamp(56px, 7vw, 88px) 0 28px;}
.footer-grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr;
  gap:clamp(32px, 4vw, 54px); margin-bottom:clamp(40px, 5vw, 64px);
}
.footer-brand p{font-size:.88rem; margin-top:20px; max-width:290px;}
.footer-social{display:flex; gap:12px; margin-top:26px;}
.footer-social a{
  width:38px; height:38px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--silver-dim);
  transition:all .35s var(--ease);
}
.footer-social a:hover{border-color:var(--blue-bright); color:var(--blue-bright); transform:translateY(-3px);}
.footer-col h4{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--white); font-weight:700; margin-bottom:22px;
}
.footer-col ul li{margin-bottom:12px;}
.footer-col ul a{font-size:.88rem; color:var(--silver-dim); transition:color .3s var(--ease);}
.footer-col ul a:hover{color:var(--blue-bright);}
.footer-contact li{
  font-size:.88rem; color:var(--silver-dim); margin-bottom:15px;
  display:flex; gap:12px; align-items:flex-start; line-height:1.5;
}
.footer-contact svg{width:15px; height:15px; flex-shrink:0; margin-top:4px; color:var(--blue-bright);}
.footer-contact a:hover{color:var(--blue-bright);}
.footer-bottom{
  border-top:1px solid var(--line); padding-top:24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:.76rem; color:var(--muted);
}
.footer-bottom a:hover{color:var(--blue-bright);}

/* --------------------------------------------------------------------------
   17. Interior page hero
   -------------------------------------------------------------------------- */
.page-hero{
  position:relative; overflow:hidden;
  padding:calc(var(--header-h) + clamp(56px, 8vw, 96px)) 0 clamp(56px, 8vw, 92px);
  background:var(--ink-0);
  border-bottom:1px solid var(--line);
}
.page-hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 100% at 80% 0%, rgba(29,79,128,.32), transparent 65%);
}
.page-hero .wrap{position:relative; z-index:1;}
.page-hero .crumb{
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:22px; display:block; font-weight:600;
}
.page-hero .crumb a:hover{color:var(--blue-bright);}
.page-hero h1{max-width:min(100%, 780px); margin-top:20px;}
.page-hero p{max-width:58ch; margin-top:22px; font-size:1.02rem;}

/* --------------------------------------------------------------------------
   18. Forms
   -------------------------------------------------------------------------- */
.booking-layout{display:grid; grid-template-columns:1fr .78fr; gap:clamp(32px, 4vw, 56px); align-items:start;}
.form-panel{background:var(--ink-2); border:1px solid var(--line); padding:clamp(28px, 4vw, 48px);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.form-group{display:flex; flex-direction:column; gap:9px; margin-bottom:20px;}
.form-group label{
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-weight:700;
}
.form-group input,
.form-group select,
.form-group textarea{
  background:var(--ink-0); border:1px solid var(--line); color:var(--white);
  padding:14px 16px; font-size:.94rem; border-radius:var(--radius);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.form-group input::placeholder, .form-group textarea::placeholder{color:var(--muted);}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{outline:none; border-color:var(--blue-bright); background:var(--ink-1);}
.form-group textarea{resize:vertical; min-height:120px;}
.form-group select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238fa3bc' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
  padding-right:42px;
}
.radio-tiles{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.radio-tile{
  border:1px solid var(--line); padding:14px 16px; font-size:.86rem; cursor:pointer;
  display:flex; align-items:center; gap:10px; color:var(--silver-dim);
  transition:all .3s var(--ease);
}
.radio-tile:hover{border-color:var(--line-strong);}
.radio-tile input{accent-color:var(--blue-bright);}
.radio-tile.checked{border-color:var(--blue-bright); background:rgba(74,144,217,.09); color:var(--white);}
.form-note{font-size:.8rem; color:var(--muted); margin-top:8px;}
.form-success{display:none; text-align:center; padding:clamp(40px,6vw,70px) 20px;}
.form-success.show{display:block;}
.form-success .check{
  width:66px; height:66px; border-radius:50%; border:1px solid var(--blue-bright);
  margin:0 auto 26px; display:flex; align-items:center; justify-content:center; color:var(--blue-bright);
}
.form-error{
  display:none; margin-top:16px; padding:14px 16px;
  border:1px solid rgba(224,82,77,.5); background:rgba(224,82,77,.08);
  color:#f0b4b1; font-size:.88rem;
}
.form-error.show{display:block;}

.booking-side{display:flex; flex-direction:column; gap:20px; position:sticky; top:calc(var(--header-h) + 24px);}
.side-card{background:var(--ink-2); border:1px solid var(--line); padding:28px 30px;}
.side-card h4{font-size:1rem; margin-bottom:16px;}
.side-card ul li{font-size:.88rem; color:var(--silver-dim); margin-bottom:12px; display:flex; gap:10px;}
.side-card ul li b{color:var(--blue-bright); font-weight:600;}

/* --------------------------------------------------------------------------
   19. Contact / about
   -------------------------------------------------------------------------- */
.contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px, 5vw, 64px);}
.contact-info-card{display:flex; gap:18px; padding:24px 0; border-bottom:1px solid var(--line);}
.contact-info-card:first-child{padding-top:0;}
.map-embed{margin-top:30px; border:1px solid var(--line); aspect-ratio:16/10; overflow:hidden;}
/* invert + hue-rotate is the pair that darkens a light map without turning
   the land brown — inverting alone flips the hues too */
.map-embed iframe{
  width:100%; height:100%; border:0;
  filter:invert(1) hue-rotate(180deg) grayscale(.35) contrast(.9) brightness(.86);
}

.about-split{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px, 5vw, 76px); align-items:center;}
.about-portrait{
  aspect-ratio:3/4; position:relative; overflow:hidden;
  border:1px solid var(--line); background:linear-gradient(150deg, var(--ink-3), var(--ink-0));
  display:flex; align-items:center; justify-content:center;
}
.about-portrait img{width:100%; height:100%; object-fit:cover;}
.about-portrait svg{width:56%;}
.about-portrait .frame-badge{
  position:absolute; bottom:18px; left:18px; right:18px;
  background:rgba(4,7,14,.8); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--line); padding:16px 20px;
}
.about-portrait .frame-badge b{display:block; font-family:var(--display); color:var(--white); font-size:1.08rem;}
.about-portrait .frame-badge span{font-size:.68rem; color:var(--blue-bright); letter-spacing:.16em; text-transform:uppercase; font-weight:600;}
.about-timeline{margin-top:32px;}
.timeline-item{display:grid; grid-template-columns:92px 1fr; gap:22px; padding:20px 0; border-top:1px solid var(--line);}
.timeline-item .yr{font-family:var(--display); color:var(--blue-bright); font-size:1.2rem;}
.timeline-item p{font-size:.92rem;}

.values-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.value-item{
  text-align:center; padding:34px 24px; border:1px solid var(--line); background:var(--ink-2);
  transition:border-color .5s var(--ease), transform .5s var(--ease);
}
.value-item:hover{border-color:var(--line-strong); transform:translateY(-4px);}
.value-item .vnum{
  font-family:var(--display); font-size:1.5rem; color:var(--blue-bright);
  display:block; margin-bottom:14px;
}
.value-item h4{font-size:1rem; margin-bottom:9px;}
.value-item p{font-size:.86rem;}

/* --------------------------------------------------------------------------
   20. Video showcase
   -------------------------------------------------------------------------- */
.video-showcase{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px, 5vw, 64px); align-items:center;}
.video-frame{position:relative; overflow:hidden; border:1px solid var(--line); background:var(--ink-0);}
.video-frame video{width:100%; height:100%; object-fit:cover; display:block;}
/* The source clip was filmed in portrait but stored sideways. Stand it back
   up: container units let the video's pre-transform box take the frame's
   dimensions swapped, so the rotated result fills the frame exactly. */
.video-frame.is-rotated{
  aspect-ratio:9/16;
  max-width:340px; max-height:604px;
  margin-inline:auto;
  container-type:size;
}
.video-frame.is-rotated video{
  position:absolute; top:50%; left:50%;
  width:100cqh; height:100cqw;
  transform:translate(-50%,-50%) rotate(-90deg);
  transform-origin:center center;
}
@supports not (width: 100cqh){
  .video-frame.is-rotated video{width:604px; height:340px;}
}
.video-frame .vf-badge{
  position:absolute; top:16px; left:16px; z-index:2;
  background:rgba(4,7,14,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--line); padding:8px 14px;
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--blue-bright); font-weight:700;
  display:flex; align-items:center; gap:8px;
}
.video-frame .vf-badge .dot{width:6px; height:6px; border-radius:50%; background:#e0524d; animation:recdot 1.8s ease-in-out infinite;}
@keyframes recdot{0%,100%{opacity:1;} 50%{opacity:.25;}}
.video-copy-list{margin-top:30px;}

/* --------------------------------------------------------------------------
   21. Floating WhatsApp
   -------------------------------------------------------------------------- */
.wa-float{
  position:fixed; bottom:24px; right:24px; z-index:900;
  width:56px; height:56px; border-radius:50%;
  background:#25d366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px -8px rgba(37,211,102,.5);
  transition:transform .35s var(--ease);
}
.wa-float:hover{transform:scale(1.08);}
.wa-float svg{width:28px; height:28px; position:relative; z-index:1;}
.wa-pulse{
  position:absolute; inset:0; border-radius:50%; background:#25d366; opacity:.5;
  animation:wapulse 2.4s ease-out infinite;
}
@keyframes wapulse{0%{transform:scale(1); opacity:.5;} 100%{transform:scale(1.85); opacity:0;}}

/* --------------------------------------------------------------------------
   22. Utility
   -------------------------------------------------------------------------- */
.center{text-align:center;}
.mt-lg{margin-top:clamp(40px, 5vw, 60px);}
.divider{height:1px; background:var(--line); width:100%;}
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --------------------------------------------------------------------------
   23. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px){
  .nav-phone{display:none;}
  .primary-nav ul{gap:20px;}
}
@media (max-width: 1000px){
  :root{--header-h:74px;}
  .primary-nav{display:none;}
  .nav-cta .btn{display:none;}
  .hamburger{display:flex;}
  .fleet-grid{grid-template-columns:repeat(2,1fr);}
  .services-grid{grid-template-columns:1fr;}
  .why-grid, .about-split, .booking-layout, .contact-grid, .video-showcase{grid-template-columns:1fr;}
  .testi-track{grid-template-columns:1fr;}
  .values-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .gallery-grid, .gallery-grid.feature{grid-template-columns:1fr 1fr;}
  .gallery-grid.feature .gallery-item:first-child{grid-column:1 / -1; aspect-ratio:16/9;}
  .booking-side{position:static;}
  .statement h2{max-width:none;}
  .why-visual{aspect-ratio:16/10;}
}
@media (max-width: 700px){
  .statement-foot{grid-template-columns:1fr; gap:26px;}
  .statement-foot .sf{
    display:grid; grid-template-columns:auto 1fr; gap:6px 16px; align-items:start;
  }
  .statement-foot .sf .n{grid-row:1 / span 3;}
}
@media (max-width: 620px){
  .fleet-grid{grid-template-columns:1fr;}
  .form-row, .radio-tiles{grid-template-columns:1fr;}
  .values-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .gallery-grid, .gallery-grid.feature{grid-template-columns:1fr;}
  .gallery-grid.feature .gallery-item:first-child{aspect-ratio:4/3;}
  .cta-inner{flex-direction:column; align-items:flex-start;}
  .hero-actions .btn{flex:1 1 100%;}
  .hero{padding-bottom:96px;}
  .scroll-cue{display:none;} /* collides with the stats once they stack */
  .hero-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
  .hero-stats .stat{padding-left:12px;}
  .hero-stats span{font-size:.58rem; letter-spacing:.12em;}
  .sec-index{display:none;}
  .timeline-item{grid-template-columns:1fr; gap:6px;}
  .wa-float{width:52px; height:52px; bottom:18px; right:18px;}
}