/* ============================================================
   Salty Karts · home hero
   Built from the supplied comp (1774x887). Scoped .hc.

   The photograph ships as one image because its treatment is
   painted into the picture, not laid over it -- the soft cream
   wash behind the headline cannot be rebuilt in CSS. The comp's
   own type, lockup, pills and buttons were lifted back off it:
   the ink by tight colour masks (never box masks) filled with
   Telea inpainting and settled with a normalised-convolution
   pass confined to each band, so the boardwalk is never averaged
   with the sky above it. Residual high-pass energy measures
   1.2/255 behind the headline, 1.75 in the eyebrow band and
   3.68 across the figures.

   The copy sits in the site's own shell rather than on the
   comp's looser grid: positioned off the frame it ran up to
   186px past the margin at 1774, because a share of the frame
   keeps growing after the shell has stopped at 1180. So the
   column is a normal flow block right-aligned in .shell, and
   the type moved from vw to the site's clamped scales -- the
   headline on the live hero's own clamp(52px,5.4vw,78px) -- so
   it holds its size once the shell stops growing.
   ============================================================ */

.hc{ --hc-ink:#152C44; --hc-gold:#E5B16D; --hc-col:clamp(300px,33vw,520px); }

.hc{
  position:relative;width:100%;aspect-ratio:1816/866;overflow:hidden;isolation:isolate;
  background:#9fb2c4;font-family:var(--text);
}
.hc__art{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;object-fit:cover;}
.hc__scrim{position:absolute;inset:auto 0 0 0;height:48%;z-index:1;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 */
.hc__in{
  position:absolute;inset:0;z-index:2;max-width:var(--shell);margin:0 auto;
  padding:0 clamp(20px,4vw,44px);
  display:flex;justify-content:flex-end;align-items:stretch;
}
/* seated off the frame, not centred: the eyebrow starts where the comp starts it,
   and the figures have to clear the bright water and land on the dark boardwalk */
.hc__copy{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;align-items:flex-start;
  width:min(100%,var(--hc-col));min-height:100%;
  padding-top:calc(10.5vw - 36px);padding-bottom:clamp(48px,5.2vw,80px);
}
.hc__lock{position:relative;isolation:isolate;}
/* Off-white fog behind the headline, lead, and Book Now only. */
.hc__lock::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:-58%;right:-42%;
  top:-10%;bottom:-10%;
  background:radial-gradient(ellipse 44% 52% at 50% 46%,rgba(253,251,247,0.72) 0%,rgba(253,251,247,0.718) 3.4%,rgba(253,251,247,0.715) 6.8%,rgba(253,251,247,0.710) 10.2%,rgba(253,251,247,0.703) 13.6%,rgba(253,251,247,0.695) 17%,rgba(253,251,247,0.687) 20.4%,rgba(253,251,247,0.679) 23.8%,rgba(253,251,247,0.675) 27.2%,rgba(253,251,247,0.673) 30.6%,rgba(253,251,247,0.672) 34%,rgba(253,251,247,0.665) 40.6%,rgba(253,251,247,0.632) 47.2%,rgba(253,251,247,0.565) 53.8%,rgba(253,251,247,0.457) 60.4%,rgba(253,251,247,0.336) 67%,rgba(253,251,247,0.215) 73.6%,rgba(253,251,247,0.108) 80.2%,rgba(253,251,247,0.040) 86.8%,rgba(253,251,247,0.007) 93.4%,rgba(253,251,247,0) 100%);
}

/* ── type ───────────────────────────────────────────────── */
/* the comp's eyebrow keeps both of its rules; the leading one takes up
   whatever the line does not need, so it holds the column at any width */
.hc__eyebrow{
  position:relative;margin:0 0 clamp(10px,1.35vw,18px);display:flex;align-items:center;gap:.9em;
  font-size:clamp(11px,.75vw,13px);font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--hc-ink);-webkit-text-stroke:.3px currentColor;white-space:nowrap;
}
.hc__eyebrow i{display:block;height:2px;width:3.2em;flex:0 0 3.2em;}
.hc__eyebrow i:first-child{
  position:absolute;right:100%;margin-right:.9em;
  background:linear-gradient(to right,rgba(189,150,82,0),rgba(189,150,82,.58));
}
.hc__eyebrow i:last-child{
  background:linear-gradient(to left,rgba(189,150,82,0),rgba(189,150,82,.58));
}

.hc__head{
  margin:0 0 calc(clamp(16px,1.9vw,32px) + 3px);max-width:none;
  font-family:var(--disp);font-weight:400;font-size:clamp(46px,5.4vw,92px);line-height:.94;
  letter-spacing:-.03em;color:var(--navy);
  font-feature-settings:"kern" 1,"liga" 1;
}
.hc__head span{display:block;}
/* second line takes the same script lockup as "Jamaica Beach" in the handover */
.hc__head .script{
  width:max-content;max-width:100%;font-size:1.08em;line-height:.86;
  margin:.12em 0 0;transform:translateY(.04em);position:relative;
}
.hc__head .script:after{
  content:"";position:absolute;left:5%;right:10%;bottom:-.08em;height:2px;
  background:#bd9652;border-radius:50%;transform:rotate(-4deg);
}
.hc__lead{
  margin:0 0 calc(clamp(22px,2.3vw,39px) - 3px);
  font-size:clamp(15.5px,1.25vw,21px);line-height:1.62;color:var(--ink);
}
.hc__lead span{display:block;}

/* ── buttons: raised, with a lit top edge and a seated shadow ── */
.hc__ctas{display:flex;flex-wrap:wrap;gap:14px;}
.hc__pill{
  display:inline-flex;align-items:center;justify-content:center;gap:.62em;
  height:clamp(44px,3.4vw,56px);padding:0 clamp(20px,1.9vw,32px);
  margin:0;border-radius:999px;cursor:pointer;font-family:var(--text);font-weight:600;
  font-size:clamp(13.5px,1.05vw,16.5px);letter-spacing:.02em;white-space:nowrap;
  text-decoration:none;appearance:none;
  transition:transform .2s cubic-bezier(.32,.72,.3,1),box-shadow .2s ease,
             background .2s ease,border-color .2s ease,color .2s ease;
}
.hc__pill svg{width:1.12em;height:1.12em;flex:0 0 auto;
  transition:transform .2s cubic-bezier(.32,.72,.3,1);}
.hc__pill:hover svg,.hc__pill:focus-visible svg{transform:translateX(2px);}
.hc__pill:focus-visible{outline:2px solid var(--navy);outline-offset:3px;}
.hc__pill:active{transform:translateY(1px) scale(.994);}

.hc__pill--solid{
  border:1px solid rgba(181,137,74,.55);color:#FDFBF7;background:#16335F;box-shadow:none;
  min-height:56px;height:56px;padding:14px 32px;font-size:16px;box-sizing:border-box;
}
.hc__pill--solid:hover,.hc__pill--solid:focus-visible{
  color:#FDFBF7;background:#1B3C6E;border-color:rgba(181,137,74,.72);
  box-shadow:none;transform:none;
}
.hc__pill--solid:active{
  background:#16335F;border-color:rgba(181,137,74,.55);box-shadow:none;transform:none;
}

.hc__pill--ghost{
  border:1.5px solid var(--hc-ink);color:var(--hc-ink);
  background:linear-gradient(180deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.05) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 2px 8px rgba(9,20,38,.10);
}
.hc__pill--ghost:hover,.hc__pill--ghost:focus-visible{
  transform:translateY(-2px);border-color:var(--deep);
  background:linear-gradient(180deg,rgba(255,255,255,.52) 0%,rgba(255,255,255,.30) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 20px rgba(9,20,38,.20);
}
.hc__pill--ghost:active{
  background:rgba(255,255,255,.22);
  box-shadow:inset 0 2px 4px rgba(9,20,38,.16);
}

/* ── the three figures ──────────────────────────────────── */
/* the figures are seated off the frame, not off the copy above them: they have
   to clear the bright water and land on the dark boardwalk, which starts at
   frame row 725 whatever the type above is doing */
.hc__stats{
  position:relative;display:flex;align-items:flex-start;
  margin-top:auto;padding:0;
  list-style:none;width:max-content;max-width:100%;
}
.hc__stats li{position:relative;padding:0 clamp(16px,2vw,30px);text-align:center;}
.hc__stats li:first-child{padding-left:0;}
.hc__stats li:last-child{padding-right:0;}
.hc__stats li:not(:last-child)::after{
  content:"";position:absolute;right:0;top:6%;width:1px;height:78%;
  background:rgba(250,246,239,.30);
}
.hc__stats b{display:block;font-family:var(--disp);font-weight:400;
  font-size:clamp(36px,3.4vw,52px);line-height:1;color:#F7F1E6;}
.hc__stats span{display:block;margin-top:calc(.62em + 8px);font-size:clamp(11px,.85vw,13px);
  font-weight:600;letter-spacing:.14em;line-height:1;text-transform:uppercase;
  color:var(--hc-gold);white-space:nowrap;}

/* ── the site header, reading dark on a light sky ── */
.has-hero--art .hd__logo img{width:104px;filter:drop-shadow(0 3px 10px rgba(9,20,38,.16));}
.has-hero--art .hd__logo:hover img{transform:translateY(-2px) scale(1.025);
  filter:drop-shadow(0 8px 20px rgba(9,20,38,.24));}
.has-hero--art .hd__menu,.has-hero--art .hd__book{
  gap:8px;border-radius:999px;box-sizing:border-box;
  min-height:48px;padding:12px 24px;font-size:14px;font-weight:600;
  transition:transform .2s cubic-bezier(.32,.72,.3,1),box-shadow .2s ease,background .2s ease;
}
.has-hero--art .hd__book svg{width:16px;height:16px;flex:0 0 auto;
  transition:transform .2s cubic-bezier(.32,.72,.3,1);}
.has-hero--art .hd__book:hover svg{transform:translateX(2px);}
.has-hero--art .hd__menu{
  border:0;color:#FDFBF7;backdrop-filter:none;-webkit-backdrop-filter:none;
  background:#16335F;box-shadow:none;
}
.has-hero--art .hd__menu:hover,.has-hero--art .hd__menu:focus-visible{
  color:#FDFBF7;background:#1B3C6E;box-shadow:none;transform:none;
}
.has-hero--art .hd__book{
  border:0;color:var(--hc-ink);backdrop-filter:none;-webkit-backdrop-filter:none;
  background:#FDFAF4;box-shadow:none;
}
.has-hero--art .hd__book:hover{
  color:var(--hc-ink);background:#FFFFFF;box-shadow:none;transform:none;
}
.has-hero--art .hd__menu:active,.has-hero--art .hd__book:active{transform:none;}

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

/* ── narrow: the picture crops to the kart, the copy stacks under it ── */
@media (max-width:900px){
  .hc{aspect-ratio:auto;height:auto;background:var(--cream);}
  .hc__art{position:static;width:100%;height:clamp(300px,133vw,520px);object-position:center top;}
  .hc__in{position:static;display:block;padding:clamp(24px,6vw,40px) clamp(20px,5vw,44px)
    clamp(28px,7vw,44px);}
  .hc__copy{width:auto;padding-top:0;}
  .hc__lock::before{display:none;}
  .hc__scrim{display:none;}
  .hc__eyebrow{color:var(--navy);white-space:normal;flex-wrap:wrap;}
  .hc__eyebrow i{display:none;}
  .hc__head{line-height:1.02;}
  .hc__lead{max-width:36ch;color:var(--ink-soft);}
  .hc__lead span{display:inline;}
  .hc__stats{position:static;flex-wrap:wrap;gap:10px 0;width:auto;margin-top:clamp(20px,4vw,28px);}
  .hc__stats li{display:flex;align-items:baseline;gap:calc(.45em + 8px);text-align:left;
    padding:0 clamp(14px,4vw,26px) 0 0;}
  .hc__stats li:not(:last-child)::after{display:none;}
  .hc__stats b{color:var(--navy);}
  .hc__stats span{margin-top:0;color:#8A6B33;}
}