/* ── the band ───────────────────────────────────────────── */
/* the height is the hero this replaces, unchanged */
.fh{position:relative;width:100%;overflow:hidden;isolation:isolate;
  height:clamp(420px,52vh,560px);
  --fh-pan:24%;                 /* pans the picture left so the cart's windshield
                                   frame clears the Menu pill, which is a stroke
                                   only and cannot hold its own against dark tube.
                                   The clearance is not constant: the pill rides the
                                   shell, which stops at 1180, while the picture is
                                   full-bleed, so the cart is proportionally further
                                   right the wider the window. Swept across 1024 to
                                   1920, 20% is the first value that keeps the cart
                                   out of the pill everywhere; 24% leaves 49px at
                                   both ends and ~107px at 1440. */
  background:#cfd6d2;font-family:var(--text);}
.fh__art{position:absolute;top:0;bottom:0;display:block;
  left:calc(var(--fh-pan) * -1);width:calc(100% + var(--fh-pan));height:100%;
  max-width:none;                /* the site reset caps images at 100%, which would
                                    undo the widening the pan needs */
  object-fit:cover;object-position:left top;}   /* left, so that when a tall window
                                    makes cover scale by height the overflow is
                                    cropped off the right rather than undoing the pan */
/* the copy sits on the floor of the band, where the concrete is at its brightest.
   This ramp is the site's .phero__scrim inverted -- quintic smootherstep, clear
   stop written out rather than `transparent`. It runs to 72% of the band because
   the headline sits high enough that a shorter ramp had already faded out under
   it: measured off the render it was 2.73:1 at 1920, under even the 3:1 floor
   for large type, while the subhead near the floor was fine at 6.4:1. */
.fh__scrim{position:absolute;inset:auto 0 0 0;height:78%;pointer-events:none;
  background:linear-gradient(to top,
    rgba(14,36,69,0.72) 0%,
    rgba(14,36,69,0.72) 1%,
    rgba(14,36,69,0.719) 6%,
    rgba(14,36,69,0.697) 16%,
    rgba(14,36,69,0.583) 32%,
    rgba(14,36,69,0.36) 50%,
    rgba(14,36,69,0.137) 68%,
    rgba(14,36,69,0.023) 84%,
    rgba(14,36,69,0.001) 94%,
    rgba(14,36,69,0) 99%,
    rgba(14,36,69,0) 100%);}

/* the shell the rest of the page is built on */
.fh__in{position:absolute;inset:0;max-width:var(--shell);margin:0 auto;
  padding:0 clamp(20px,4vw,44px);}
/* sits on the floor of the band, on the hero this replaces: .phero--photo aligned
   its body to flex-end with padding-bottom:clamp(8px,2vh,20px) */
.fh__copy{position:absolute;left:clamp(20px,4vw,44px);right:clamp(20px,4vw,44px);
  bottom:clamp(8px,2vh,20px);}

.fh__head{
  margin:0 0 1.72vw;max-width:none;
  font-family:var(--disp);font-weight:400;font-size:4.636vw;line-height:1;
  letter-spacing:-.015em;color:#fff;white-space:nowrap;
  text-shadow:0 0 2px rgba(9,20,38,.5),0 2px 8px rgba(9,20,38,.58),0 3px 34px rgba(9,20,38,.66);
  font-feature-settings:"kern" 1,"liga" 1;
}
.fh__lead{
  margin:0;font-size:1.214vw;line-height:1.567;color:#fff;
  text-shadow:0 0 1px rgba(9,20,38,.42),0 1px 4px rgba(9,20,38,.5),0 2px 20px rgba(9,20,38,.62);
  text-wrap:nowrap;
}
.fh__lead span{display:block;}

/* ── the site header, on the comp's own grid ────────────── */
/* the comp's lockup was lifted out of the photograph, so the whole header sits on
   the site's own shell like every other page */
.has-fleet-art .hd__logo img{width:104px;filter:none;}
.has-fleet-art .hd__logo:hover img{transform:scale(1.03);}
.has-fleet-art .hd__right{gap:14px;}
.has-fleet-art .hd__menu,.has-fleet-art .hd__book{
  height:44px;padding:0 24px;border-radius:999px;font-size:14px;font-weight:600;
  letter-spacing:.01em;display:inline-flex;align-items:center;justify-content:center;gap:.53em;
  transition:transform .2s cubic-bezier(.32,.72,.3,1),box-shadow .2s ease,background .2s ease,
             color .2s ease,border-color .2s ease;
}
.has-fleet-art .hd__menu svg{flex:0 0 auto;width:17px;height:17px;}
.has-fleet-art .hd__menu{
  border:0;color:#FDFBF7;backdrop-filter:none;-webkit-backdrop-filter:none;
  min-height:48px;height:48px;padding:12px 24px;box-sizing:border-box;
  background:#16335F;box-shadow:none;
}
.has-fleet-art .hd__menu:hover,.has-fleet-art .hd__menu:focus-visible{
  color:#FDFBF7;background:#1B3C6E;box-shadow:none;transform:none;
}
.has-fleet-art .hd__book{
  border:0;color:var(--navy,#152C44);backdrop-filter:none;-webkit-backdrop-filter:none;
  min-height:48px;height:48px;padding:12px 24px;box-sizing:border-box;
  background:#FDFAF4;box-shadow:none;
}
.has-fleet-art .hd__book svg{width:16px;height:16px;flex:0 0 auto;
  transition:transform .2s cubic-bezier(.32,.72,.3,1);}
.has-fleet-art .hd__book:hover svg{transform:translateX(2px);}
.has-fleet-art .hd__book:hover{
  color:var(--navy,#152C44);background:#FFFFFF;box-shadow:none;transform:none;
}
.has-fleet-art .hd__menu:active,.has-fleet-art .hd__book:active{transform:translateY(1px) scale(.994);}

@media (prefers-reduced-motion:reduce){
  .has-fleet-art .hd__menu,.has-fleet-art .hd__book,.has-fleet-art .hd__logo img{
    transition:box-shadow .2s ease,background .2s ease,color .2s ease;}
  .has-fleet-art .hd__menu:hover,.has-fleet-art .hd__book:hover,
  .has-fleet-art .hd__logo:hover img{transform:none;}
}

/* ── narrow ─────────────────────────────────────────────── */
@media (max-width:900px){
  .fh{height:auto;background:var(--cream);}
  .fh__art{position:static;left:auto;width:100%;max-width:100%;height:clamp(230px,58vw,340px);object-position:58% center;}
  .fh__scrim{display:none;}
  .fh__in{position:static;max-width:none;padding:0;}
  .fh__copy{position:static;width:auto;padding:clamp(22px,6vw,36px) clamp(20px,5vw,44px) clamp(24px,6vw,38px);}
  .fh__head{margin:0 0 12px;font-size:clamp(36px,10vw,54px);color:var(--navy);white-space:normal;text-shadow:none;}
  .fh__lead{font-size:15.5px;line-height:1.6;color:var(--ink-soft);text-wrap:wrap;max-width:44ch;text-shadow:none;}
  .fh__lead span{display:inline;}

  .has-fleet-art .hd__in{max-width:var(--shell);align-items:center;
    padding:24px clamp(20px,4vw,44px);}
  .has-fleet-art .hd__logo img{width:clamp(76px,21vw,104px);}
  .has-fleet-art .hd__menu,.has-fleet-art .hd__book{padding:11px 21px;height:auto;}
}

/* ── rates: headline takes the Jamaica Beach page lockup (.phero h1) ── */
.fh__head--script{font-size:clamp(40px,5.6vw,74px);line-height:1.04;}
.fh__head--script .script{font-size:1.12em;margin-left:.22em;color:var(--foam-lt);}
@media (max-width:900px){
  .fh__head--script .script{color:var(--teal);white-space:nowrap;}
}