/* Sandpiper home hero (hero-mock-6, round 6 of 2026-09-22), namespaced .hv so it coexists with site.css.
   Design frame 1900 x 900 (height clamps 830..900). Side margins 170px, top/bottom padding 100px.
   Every measurement is the client's 1672px comp scaled by 0.9200 (generated by gen_css.py), except the
   round-6 parts, which are copied from hero-mock-6/hero.css:
   - the at-a-glance bar is a glass pill, 1.3x the comp, anchored 44px off the bottom edge, sized in --bu;
   - the wooden sign is its own layer (img/hero-v2/sign*.webp), board levelled, placed in the bottom-left corner;
   - the copy block keeps the exact round-5 position (the frame still reserves the old in-flow bar height). */

@font-face{font-family:'Newsreader';src:url('../fonts/hero/newsreader-var.woff2') format('woff2');font-weight:200 800;font-display:block}
@font-face{font-family:'Lora';src:url('../fonts/hero/lora-var.woff2') format('woff2');font-weight:400 700;font-display:block}
@font-face{font-family:'Montserrat';src:url('../fonts/hero/montserrat-var.woff2') format('woff2');font-weight:100 900;font-display:block}
@font-face{font-family:'Fractis';src:url('../fonts/library/fractis/fractis-400-fixed.woff2') format('woff2');font-weight:400;font-display:block}  /* the -fixed file: the original's usWinAscent bug renders it invisible on Windows */

  .hv{
  --navy:#123B58;
  font-family:'Lora',Georgia,serif;color:var(--navy);-webkit-font-smoothing:antialiased;        /* body text, labels, menu */
  --headnavy:#0A3652;    /* headline */
  --sand:#74614B;        /* kicker */
  --teal:#013B51;        /* filled buttons */
  --white:#F4F7F8;       /* text on teal */
  --ring:rgb(187,172,149);
  --fill:rgba(255,248,238,.30);
  --divider:rgb(165,150,131);
  --bar:249,241,218;
  --glass:255,252,246;
  /* --bu: one bar pixel. 1px at the full 1900 frame, shrinking with the viewport down to 0.72 so the pill
     stays clear of the sign; --bar-b is the pill's bottom edge to the hero's bottom edge. */
  --bu:clamp(0.72px, calc(100vw / 1900), 1px);
  --bar-h:calc(91*var(--bu));
  --bar-b:44px;
  --old-bar-h:calc(76*var(--u));  /* round-5 in-flow bar height, still reserved so the copy block does not move */

  --hero-h:clamp(830px, 47.368vw, 900px);
  --margin:170px;
  --pad-y:100px;
  --frame:1900px;
  /* --u = one comp pixel. Fixed at 0.9200px at the full frame height; below that it shrinks with the
     hero height so the header, copy block and bar always fit inside the padding, and with the width
     so the header row never wraps. */
  --u:min(0.9200px, calc((var(--hero-h) - 288px) / 664), calc((100vw - 2*var(--margin)) / 601));
}


/* ---------- hero shell ----------
   The hero is the 1900px design frame itself: full width up to 1900px, then centred with the page
   background either side, so a wider screen shows the design at 1:1 instead of a cropped strip. */
.hv{position:relative;width:min(100%,var(--frame));margin:0 auto;min-height:var(--hero-h);display:flex;overflow:hidden}  /* min-height: grows only if the content ever needs more */
.hv__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:42% 60%;display:block}
/* the sign: post + ropes untouched, board levelled. 646x496 @2x; at the 1900 frame it renders 349px wide.
   Post body 56px in from the left edge (rope bulge 30px), board centre on the bar centre line, post running off the
   bottom edge past the lower rope wrap. */
.hv__sign{position:absolute;left:1.37%;width:18.35%;height:auto;display:block;pointer-events:none;
  /* bar centre line (44px + half the pill) minus the board centre's height inside the layer (129.7px at 1900) */
  bottom:calc(var(--bar-b) + 45.5*var(--bu) - 6.826vw)}
.hv__frame{
  position:relative;flex:1;min-height:var(--hero-h);max-width:var(--frame);margin:0 auto;width:100%;
  padding:var(--pad-y) var(--margin) calc(var(--pad-y) + var(--old-bar-h));
  display:flex;flex-direction:column;
}

/* ---------- header row ---------- */
.hv__head{display:flex;justify-content:space-between;align-items:flex-start}
.hv-logo{display:block;line-height:0}
.hv-logo img{width:calc(215*var(--u));height:auto}
.hv-nav{display:flex;align-items:center;justify-content:flex-end;margin-top:calc(8*var(--u));min-height:calc(53*var(--u))}  /* min-height = the removed Book Now pill, so Menu keeps its centre line and ends on the right margin */
.hv-nav__menu{display:flex;align-items:center;margin:0;padding:0;border:0;background:none;cursor:pointer;font:inherit;color:var(--navy)}
.hv-nav__menu:focus-visible,.hv-btn:focus-visible,.hv-logo:focus-visible{outline:2px solid var(--navy);outline-offset:6px;border-radius:4px}
.hv-nav__burger{display:flex;flex-direction:column;justify-content:space-between;width:calc(32*var(--u));height:calc(22*var(--u))}
.hv-nav__burger i{display:block;height:1.84px;background:var(--navy);border-radius:1px}
.hv-nav__label{margin-left:calc(23*var(--u));font-weight:500;font-size:calc(21.74*var(--u));  /* 20px at the full frame */ letter-spacing:calc(-0.6*var(--u));line-height:1;color:var(--navy);text-decoration:none}
.hv-ico{display:block;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.hv-ico--arrow{stroke-width:1.8}
.hv-ico--chev{stroke-width:2.2}

/* ---------- copy block, vertically centred between header and bar ---------- */
.hv__mid{flex:1;display:flex;align-items:center}
.hv-copy{position:relative;width:calc(533*var(--u));height:calc(422*var(--u))}
.hv-copy > *{position:absolute;margin:0;white-space:nowrap;line-height:1}
.hv-copy__kicker{left:calc(6*var(--u));top:calc(4.3*var(--u));font-family:'Montserrat';font-weight:400;font-size:calc(17*var(--u));letter-spacing:calc(4.28*var(--u));text-transform:uppercase;color:var(--sand)}
.hv-copy__title{left:0;top:calc(45.5*var(--u));width:0;height:0;font-family:'Newsreader';font-optical-sizing:auto;font-weight:450;font-size:calc(106.7*var(--u));color:var(--headnavy)}
.hv-copy__w{position:absolute;top:0;white-space:nowrap;transform:scaleX(.93);transform-origin:0 0}
.hv-copy__w1{left:0}
.hv-copy__w2{left:calc(235*var(--u))}
/* "Beach There." is live text (was a PNG cut from the comp). Fractis 400, each word fitted to its own ink box in the
   cut (the comp sets "Beach" ~3% larger than "There."), a 1.6 comp-px stroke in the fill colour to reach the cut's brush
   weight, colour = the cut's core ink. Offsets are from the h1's origin. */
.hv-copy__script{position:absolute;left:0;top:0;font-family:'Fractis',cursive;font-weight:400;line-height:1;color:#87735B;-webkit-text-stroke:calc(1.6*var(--u)) #87735B;transform:none;letter-spacing:0}
.hv-copy__s1,.hv-copy__s2{position:absolute;white-space:nowrap;transform-origin:0 0}
.hv-copy__s1{left:calc(23.1*var(--u));top:calc(119.9*var(--u));font-size:calc(78.4*var(--u));transform:scale(0.993,1.026)}
.hv-copy__s2{left:calc(311.2*var(--u));top:calc(120.6*var(--u));font-size:calc(75*var(--u));letter-spacing:calc(-2*var(--u))}
.hv-copy__lead{left:calc(8*var(--u));top:calc(270*var(--u));font-weight:500;font-size:calc(23*var(--u));line-height:calc(34*var(--u));letter-spacing:calc(-0.05*var(--u));color:var(--navy)}
.hv-copy__lead2{letter-spacing:calc(-0.33*var(--u))}
.hv-btn{display:block;top:calc(367*var(--u));height:calc(55*var(--u));border-radius:999px;text-decoration:none}
.hv-btn--solid{left:calc(8*var(--u));width:calc(234*var(--u));background:var(--teal);color:var(--white)}
.hv-btn--ghost{left:calc(263*var(--u));width:calc(261*var(--u));background:var(--fill);color:var(--navy);box-shadow:inset 0 0 0 calc(1.5*var(--u)) var(--ring)}
.hv-btn__t{position:absolute;top:calc(19.5*var(--u));font-weight:500;font-size:calc(18.3*var(--u));line-height:1;white-space:nowrap}
.hv-btn--solid .hv-btn__t{left:calc(39*var(--u));letter-spacing:calc(-0.07*var(--u))}
.hv-btn--ghost .hv-btn__t{left:calc(33*var(--u));letter-spacing:calc(-0.18*var(--u))}
.hv-btn__i{position:absolute}
.hv-btn--solid .hv-btn__i{left:calc(191*var(--u));top:calc(21*var(--u));width:calc(13*var(--u));height:calc(14*var(--u))}
.hv-btn--ghost .hv-btn__i{left:calc(213*var(--u));top:calc(22*var(--u));width:calc(8*var(--u));height:calc(14*var(--u))}

/* ---------- at-a-glance bar: glass pill, anchored to the bottom edge ---------- */
.hv-bar{
  list-style:none;margin:0;padding:0 calc(56*var(--bu));height:var(--bar-h);width:max-content;max-width:calc(100% - 2*var(--margin));
  position:absolute;bottom:var(--bar-b);z-index:2;
  /* centred (pill is 953.5 bar-px wide) unless that would run into the sign, then held 24px right of its board */
  left:max(calc(50% - 476.75*var(--bu)), calc(19.35% + 24px));
  display:flex;align-items:center;justify-content:center;
  border-radius:999px;
  /* glass: a low-opacity warm white over a blurred, slightly saturated backdrop, hairline rim, soft lift */
  background:linear-gradient(180deg, rgba(var(--glass),.34) 0%, rgba(var(--glass),.22) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);
  /* rim = the Explore Sandpiper ghost button ring (same colour and 1.5 comp px), plus the soft lift */
  box-shadow:inset 0 0 0 calc(1.5*var(--u)) var(--ring), 0 10px 30px rgba(12,40,56,.14);
}
.hv-bar__item{display:flex;align-items:center}
.hv-bar__icon{display:block;height:auto;margin-right:calc(14.4*var(--bu));fill:none;stroke:var(--navy);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;flex:none}
.hv-bar__icon--rv{width:calc(52.6*var(--bu))}
.hv-bar__icon--pool{width:calc(45.4*var(--bu))}
.hv-bar__icon--umb{width:calc(41.9*var(--bu))}
.hv-bar__label{font-weight:500;font-size:calc(18.4*var(--bu));line-height:1;white-space:nowrap;color:var(--navy);letter-spacing:-0.05px}
.hv-bar__label--2{letter-spacing:-0.44px}
.hv-bar__div{width:1px;height:calc(34.7*var(--bu));margin:0 calc(58.6*var(--bu)) 0 calc(57.4*var(--bu));background:rgba(18,59,88,.32)}

/* ---------- narrower screens: keep everything inside the frame ---------- */
@media (max-width:1100px){.hv{--margin:80px;--pad-y:72px;--bu:0.68px;--bar-b:32px}}
@media (max-width:930px){.hv{--bu:0.6px}
  .hv__sign{display:none}                       /* no room beside the pill on portrait tablets */
  .hv-bar{left:calc(50% - 476.75*var(--bu))}}
@media (max-width:760px){
  .hv{--margin:24px;--pad-y:40px;--hero-h:clamp(620px,100vh,800px);--old-bar-h:0px}
  .hv__head{align-items:center}
  .hv__photo{object-position:22% 60%}   /* keep the pale left side of the photo under the copy */
  .hv-nav__label{display:none}
  .hv-bar{position:static;transform:none;height:auto;width:auto;max-width:none;margin:0 auto;flex-wrap:wrap;padding:14px 16px;row-gap:10px;border-radius:24px}
  .hv-bar__div{display:none}
  .hv-bar__item{padding:0 10px}
  .hv-bar__label{font-size:15px}
  .hv-bar__icon--rv{width:40px}.hv-bar__icon--pool{width:35px}.hv-bar__icon--umb{width:32px}
}

/* ---------- phones: 44px tap targets, stacked buttons (site only) ---------- */
@media (max-width:760px){
  .hv-copy{height:calc(367*var(--u) + 104px)}
  .hv-btn{display:flex;align-items:center;justify-content:center;gap:10px;height:44px;width:min(100%,calc(300*var(--u)));padding:0}
  .hv-btn__t,.hv-btn__i{position:static;top:auto;left:auto;font-size:14px}
  .hv-btn__i{width:12px;height:13px}
  .hv-btn--solid{left:calc(8*var(--u))}
  .hv-btn--ghost{left:calc(8*var(--u));top:calc(367*var(--u) + 54px)}
  .hv-nav__menu{min-height:44px;min-width:44px;justify-content:flex-end}   /* burger flush with the right margin */
}