/* ==========================================================================
   Sandpiper RV Resort, Galveston. Home page stylesheet.
   Vanilla CSS. Fade mode (seaside). Three voices: Bauer Bodoni / Univers Next / Castile-Mastah.
   ========================================================================== */

@font-face{font-family:"Bauer Bodoni";src:url("../fonts/library/bauer-bodoni/bauer-bodoni-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Univers Next";src:url("../fonts/library/univers-next-paneuropean/univers-next-paneuropean-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Castile-Mastah";src:url("../fonts/library/castile-mastah/castile-mastah-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --cream:#FAF6EF; --cream0:rgba(250,246,239,0); --cream-deep:#F1E8DA; --cream-2:#F4EDE0;
  --ink:#14302B; --ink-soft:#3E5A53; --body:#4E5652; --muted:#667069;
  --teal:#1D937B; --teal-deep:#0C4A3E; --teal-soft:rgba(29,147,123,.13); --teal-line:rgba(29,147,123,.42);
  --gold:#B3925E; --gold-deep:#9A7A45;
  --hair:rgba(20,48,43,.11);
  --display:"Bauer Bodoni",Georgia,"Times New Roman",serif;
  --text:"Univers Next",system-ui,-apple-system,"Segoe UI",sans-serif;
  --script:"Castile-Mastah","Brush Script MT",cursive;
  --wrap:1300px; --pad:clamp(24px,5vw,56px); --gap:clamp(84px,11vw,164px);
  --h2:clamp(2.05rem,3.5vw,3.05rem);
  --ease:cubic-bezier(.16,1,.3,1);
  --r:18px;
  /* the fade recipe, verbatim (fade-effect.md). Never the transparent keyword. */
  --mag-h-left:linear-gradient(to right,
    rgba(250,246,239,1) 0%, rgba(250,246,239,.99) 2%, rgba(250,246,239,.96) 4%,
    rgba(250,246,239,.92) 6%, rgba(250,246,239,.88) 8%, rgba(250,246,239,.855) 10%,
    rgba(250,246,239,.845) 20%, rgba(250,246,239,.84) 32%, rgba(250,246,239,.84) 40%,
    rgba(250,246,239,.833) 42%, rgba(250,246,239,.79) 44.5%, rgba(250,246,239,.71) 46.5%,
    rgba(250,246,239,.57) 49%, rgba(250,246,239,.42) 51%, rgba(250,246,239,.27) 53%,
    rgba(250,246,239,.13) 55.5%, rgba(250,246,239,.05) 57.5%, rgba(250,246,239,.01) 60%,
    rgba(250,246,239,0) 62%, rgba(250,246,239,0) 68%,
    rgba(250,246,239,.01) 71%, rgba(250,246,239,.06) 74.5%, rgba(250,246,239,.16) 77.5%,
    rgba(250,246,239,.32) 81%, rgba(250,246,239,.5) 84%, rgba(250,246,239,.68) 87%,
    rgba(250,246,239,.84) 90.5%, rgba(250,246,239,.94) 93.5%, rgba(250,246,239,.99) 97%,
    rgba(250,246,239,1) 100%);
  --mag-h-right:linear-gradient(to left,
    rgba(250,246,239,1) 0%, rgba(250,246,239,.99) 2%, rgba(250,246,239,.96) 4%,
    rgba(250,246,239,.92) 6%, rgba(250,246,239,.88) 8%, rgba(250,246,239,.855) 10%,
    rgba(250,246,239,.845) 20%, rgba(250,246,239,.84) 32%, rgba(250,246,239,.84) 40%,
    rgba(250,246,239,.833) 42%, rgba(250,246,239,.79) 44.5%, rgba(250,246,239,.71) 46.5%,
    rgba(250,246,239,.57) 49%, rgba(250,246,239,.42) 51%, rgba(250,246,239,.27) 53%,
    rgba(250,246,239,.13) 55.5%, rgba(250,246,239,.05) 57.5%, rgba(250,246,239,.01) 60%,
    rgba(250,246,239,0) 62%, rgba(250,246,239,0) 68%,
    rgba(250,246,239,.01) 71%, rgba(250,246,239,.06) 74.5%, rgba(250,246,239,.16) 77.5%,
    rgba(250,246,239,.32) 81%, rgba(250,246,239,.5) 84%, rgba(250,246,239,.68) 87%,
    rgba(250,246,239,.84) 90.5%, rgba(250,246,239,.94) 93.5%, rgba(250,246,239,.99) 97%,
    rgba(250,246,239,1) 100%);
  --mag-soft:linear-gradient(to bottom,
    rgba(250,246,239,1) 0%, rgba(250,246,239,.99) 3.4%, rgba(250,246,239,.94) 6.8%,
    rgba(250,246,239,.84) 10.2%, rgba(250,246,239,.68) 13.6%, rgba(250,246,239,.5) 17%,
    rgba(250,246,239,.32) 20.4%, rgba(250,246,239,.16) 23.8%, rgba(250,246,239,.06) 27.2%,
    rgba(250,246,239,.01) 30.6%, rgba(250,246,239,0) 34%, rgba(250,246,239,0) 66%,
    rgba(250,246,239,.01) 69.4%, rgba(250,246,239,.06) 72.8%, rgba(250,246,239,.16) 76.2%,
    rgba(250,246,239,.32) 79.6%, rgba(250,246,239,.5) 83%, rgba(250,246,239,.68) 86.4%,
    rgba(250,246,239,.84) 89.8%, rgba(250,246,239,.94) 93.2%, rgba(250,246,239,.99) 96.6%,
    rgba(250,246,239,1) 100%);
  /* hero: photo dominant, the bottom third eases into the page */
  --hero-ramp:linear-gradient(to bottom,
    rgba(250,246,239,0) 0%, rgba(250,246,239,0) 54%, rgba(250,246,239,.01) 57.8%,
    rgba(250,246,239,.06) 61.6%, rgba(250,246,239,.16) 65.4%, rgba(250,246,239,.32) 69.2%,
    rgba(250,246,239,.5) 73%, rgba(250,246,239,.68) 76.8%, rgba(250,246,239,.84) 80.6%,
    rgba(250,246,239,.94) 84.4%, rgba(250,246,239,.99) 88.2%, rgba(250,246,239,1) 92%,
    rgba(250,246,239,1) 100%);
}

/* ---------- base ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--cream);scrollbar-width:thin;scrollbar-color:rgba(29,147,123,.55) var(--cream-deep)}
html,body{overflow-x:hidden}
body{margin:0;font-family:var(--text);font-size:1.0625rem;line-height:1.65;color:var(--body);background:var(--cream);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--cream-deep)}
::-webkit-scrollbar-thumb{background:rgba(29,147,123,.55);border-radius:8px;border:3px solid var(--cream-deep)}
::-webkit-scrollbar-thumb:hover{background:var(--teal)}
img,picture,svg,video{display:block;max-width:100%;height:auto}
figure,blockquote{margin:0}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.06;color:var(--ink);margin:0;letter-spacing:-.005em}
h2{font-size:var(--h2);text-wrap:balance}
h3{font-size:1.35rem}
p{margin:0}
p+p{margin-top:1em}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(var(--wrap),100% - var(--pad)*2);margin-inline:auto}
main{display:block}

/* the one accent word in a heading */
.scr{font-family:var(--script);font-weight:400;font-size:1.42em;line-height:.72;color:var(--gold);vertical-align:-.08em;padding:0 .06em;white-space:nowrap}
.lead{font-size:clamp(1.05rem,1.15vw,1.19rem);line-height:1.62;color:var(--body)}
.micro{font-family:var(--text);font-size:.9rem;color:var(--muted)}

/* ---------- one pill family for every CTA ------------------------------- */
.pill{position:relative;display:inline-flex;align-items:center;gap:.7em;padding:.86em 1.35em .86em 1.6em;border-radius:999px;
  font-family:var(--text);font-size:.92rem;letter-spacing:.04em;text-decoration:none;white-space:nowrap;min-height:46px;
  border:1.5px solid var(--teal);color:var(--teal-deep);background:transparent;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease)}
.pill .chip{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;flex:0 0 auto;background:var(--teal);color:#fff;transition:transform .25s var(--ease)}
.pill .chip svg{width:13px;height:13px}
.pill:hover .chip{transform:translateX(3px)}
.pill--solid{background:var(--teal);color:#fff;border-color:var(--teal)}
.pill--solid .chip{background:rgba(255,255,255,.2)}
.pill--solid:hover{background:var(--teal-deep);border-color:var(--teal-deep)}
.pill--ghost:hover{background:var(--teal-soft)}
.pill--light{background:var(--cream);color:var(--teal-deep);border-color:var(--cream)}
.pill--light .chip{background:var(--teal)}
.pill--light:hover{background:#fff;border-color:#fff}
.pill--onDark{color:var(--cream);border-color:rgba(250,246,239,.5)}
.pill--onDark .chip{background:rgba(250,246,239,.18)}
.pill--onDark:hover{background:var(--cream);color:var(--teal-deep)}

/* ---------- header (absolute, never sticky) ----------------------------- */
.hd{position:absolute;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:clamp(14px,1.4vw,22px) clamp(20px,4vw,64px)}
.hd::before{content:"";position:absolute;inset:0 0 auto 0;height:240px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,28,24,.42) 0%,rgba(6,28,24,.3) 28%,rgba(6,28,24,.16) 58%,rgba(6,28,24,.05) 82%,rgba(6,28,24,0) 100%)}
.hd__logo{display:block;flex:0 0 auto}
.hd__logo img{width:clamp(78px,7vw,108px);height:auto;border-radius:10px;box-shadow:0 6px 22px rgba(6,28,24,.22)}
.hd__r{display:flex;align-items:center;gap:clamp(12px,1.4vw,22px)}
.hd__menu{display:inline-flex;align-items:center;gap:.65em;font-size:.84rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-deep);
  padding:.7em 1.15em .7em 1em;min-height:44px;border-radius:999px;background:rgba(250,246,239,.84);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 6px 18px -8px rgba(6,28,24,.35);transition:background .22s}
.hd__menu:hover{background:#fff}
.hd__menu .bars{display:inline-block;width:22px;height:11px;position:relative}
.hd__menu .bars i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .26s}
.hd__menu .bars i:nth-child(1){top:0}
.hd__menu .bars i:nth-child(2){bottom:0}
.hd__menu:hover .bars i:nth-child(1){transform:translateY(1.5px)}
.hd__menu:hover .bars i:nth-child(2){transform:translateY(-1.5px)}

/* ---------- menu overlay ----------------------------------------------- */
.ov{position:fixed;inset:0;z-index:100;background:var(--teal-deep);color:var(--cream);display:grid;grid-template-rows:auto 1fr auto;
  opacity:0;visibility:hidden;transition:opacity .32s var(--ease),visibility .32s}
.ov[data-open="true"]{opacity:1;visibility:visible}
.ov::after{content:"";position:absolute;right:-6%;bottom:-4%;width:min(46vw,560px);aspect-ratio:1000/499;pointer-events:none;opacity:.16;
  background:url("../art/wc-sandpiper-1000.webp") center/contain no-repeat;filter:saturate(.6) brightness(1.4)}
.ov__top{display:flex;align-items:center;justify-content:space-between;padding:clamp(16px,2vw,26px) clamp(20px,4vw,64px)}
.ov__top img{width:clamp(78px,7vw,108px);height:auto;border-radius:10px}
.ov__close{display:inline-flex;align-items:center;gap:.65em;font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;min-height:44px}
.ov__close .x{position:relative;width:18px;height:18px}
.ov__close .x i{position:absolute;top:8px;left:0;right:0;height:1.5px;background:currentColor}
.ov__close .x i:first-child{transform:rotate(45deg)}
.ov__close .x i:last-child{transform:rotate(-45deg)}
.ov__nav{align-self:center;padding:clamp(16px,3vw,40px) clamp(20px,4vw,64px);overflow-y:auto;width:100%;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(250,246,239,.4) var(--teal-deep)}
.ov__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px clamp(24px,5vw,80px);width:min(var(--wrap),100%);margin-inline:auto}
.ov__list a{font-family:var(--display);font-size:clamp(1.9rem,3.6vw,3.2rem);line-height:1.22;color:var(--cream);text-decoration:none;display:inline-block;
  transition:color .22s,transform .3s var(--ease);transform-origin:left center}
.ov__list a:hover,.ov__list a:focus-visible{color:var(--gold);transform:translateX(10px)}
.ov__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding:clamp(18px,2.4vw,32px) clamp(20px,4vw,64px);
  border-top:1px solid rgba(250,246,239,.16);font-size:.95rem;color:rgba(250,246,239,.78)}
.ov__foot a{color:inherit;text-decoration:none;padding-block:6px;display:inline-block}
.ov__foot a:hover{color:#fff}
.ov__foot .pill{color:var(--cream)}
@media (max-width:720px){.ov__list{grid-template-columns:1fr}.ov__list a{font-size:clamp(1.6rem,7vw,2.2rem);line-height:1.3}}

/* ---------- reveals ---------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  [data-rev]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  [data-rev].is-in{opacity:1;transform:none}
}

/* ==========================================================================
   1. HERO. Real photograph, dissolving into the page along its bottom third.
   ========================================================================== */
.hero{position:relative;--heroH:min(100svh,900px);overflow:hidden;background:var(--cream)}
.hero__pic{position:absolute;top:0;left:0;right:0;height:var(--heroH);z-index:0}
.hero__pic img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:contrast(.9) saturate(1.06) brightness(1)}
.hero__veil{position:absolute;top:0;left:0;right:0;height:var(--heroH);z-index:1;background:var(--hero-ramp);pointer-events:none}
.hero__copy{position:relative;z-index:2;padding:calc(var(--heroH) - 250px) 0 clamp(8px,2vh,20px)}
.hero__kick{display:inline-flex;align-items:center;gap:14px;font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);margin-bottom:18px;text-shadow:0 0 4px var(--cream),0 0 10px var(--cream),0 0 18px var(--cream)}
.hero__kick i{width:38px;height:1.5px;background:var(--gold)}
.hero__h1{font-size:clamp(2.4rem,4.7vw,4.1rem);line-height:1.04;max-width:13em;color:var(--ink)}
.hero__nl{display:block}
.hero__h1 .scr{font-size:1.36em}
.hero__lead{max-width:50ch;margin-top:22px;color:var(--ink-soft);font-size:clamp(1.05rem,1.2vw,1.22rem);line-height:1.58}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
@media (max-width:820px){
  .hero{--heroH:min(72vh,560px)}
  .hero__pic{position:relative;height:var(--heroH)}
  .hero__pic img{object-position:50% 55%}
  .hero__veil{background:linear-gradient(to bottom,rgba(250,246,239,0) 0%,rgba(250,246,239,0) 58%,rgba(250,246,239,.35) 76%,rgba(250,246,239,.8) 90%,rgba(250,246,239,1) 100%)}
  .hero__copy{padding:0 0 clamp(36px,8vw,56px);margin-top:-84px}
  .hero__h1{font-size:clamp(2.2rem,9.4vw,3rem)}
  .hero__nl{display:none}
}
@media (max-width:520px){
  .hd{padding:12px 14px;gap:10px}
  .hd__r{gap:8px}
  .hd__menu{padding:.7em .85em;font-size:.78rem;gap:.5em}
  .hd .pill{padding:.8em 1.05em;font-size:.84rem}
  .hd .pill .chip{display:none}
}

/* ==========================================================================
   2. INTRO. Names the product; copy runs horizontally; photos overlap.
   ========================================================================== */
.sec{position:relative}
.intro{padding:clamp(48px,7vw,96px) 0 0}
.intro__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:start}
.intro__copy{position:relative;z-index:2;padding-top:clamp(8px,2vw,28px)}
.intro__h2{max-width:14em}
.intro__p{margin-top:24px;max-width:58ch}
.intro__link{display:inline-flex;align-items:center;gap:.55em;margin-top:26px;color:var(--teal-deep);text-decoration:none;font-size:1rem;letter-spacing:.01em;
  border-bottom:1.5px solid var(--teal-line);padding-bottom:4px;min-height:34px;transition:border-color .22s}
.intro__link:hover{border-color:var(--teal)}
.intro__link svg{width:20px;height:14px;transition:transform .25s var(--ease)}
.intro__link:hover svg{transform:translateX(4px)}
.intro__pics{position:relative;min-height:420px;padding-top:clamp(40px,5vw,72px)}
.intro__aerial{border-radius:var(--r) 4px var(--r) var(--r);overflow:hidden;box-shadow:0 30px 60px -30px rgba(20,48,43,.35)}
.intro__aerial img{width:100%;aspect-ratio:1894/894;object-fit:cover}
.intro__card{position:absolute;left:-12%;bottom:-16%;width:44%;max-width:250px;border-radius:12px;padding:8px 8px 10px;background:#fff;
  box-shadow:0 24px 44px -20px rgba(20,48,43,.45);transform:rotate(-2.5deg)}
.intro__card img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px}
.intro__card figcaption{font-size:.78rem;color:var(--muted);padding:8px 4px 0;letter-spacing:.02em}
/* the watercolor bird, painted from the brand mark, hangs off the head of the page */
.intro__facts{display:flex;flex-wrap:wrap;gap:28px clamp(28px,4vw,56px);margin:clamp(48px,6vw,84px) 0 0;padding:clamp(26px,3vw,36px) 0 0;border-top:1px solid var(--hair);list-style:none}
.intro__facts li{display:flex;flex-direction:column;gap:2px;flex:1 1 150px}
.intro__facts b{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,2.6vw,2.5rem);line-height:1;color:var(--teal-deep);letter-spacing:-.01em}
.intro__facts span{font-size:.86rem;color:var(--muted);letter-spacing:.03em}
@media (max-width:1000px){
  .intro__grid{grid-template-columns:1fr}
  .intro__pics{min-height:0;margin-top:56px;padding:0 0 60px 8%}
  .intro__card{left:-2%;bottom:0;width:38%}
}
@media (max-width:600px){.intro__pics{padding:0 0 48px 0;margin-top:36px}.intro__card{left:2%;bottom:0;width:38%}}

/* ==========================================================================
   3. INSIDE THE GATE. Approved 1672x941 artboard, fitted to the requested
   1600x838.797 stage and cushioned by 150px above and below.
   ========================================================================== */
.gate-art{
  --frame:1900px;
  --margin:170px;
  position:relative;
  width:100%;
  margin:0;
  padding:0;
  overflow:visible;
  border:0;
  background:#FAF6EF;
  box-shadow:none;
}
.gate-art__slot{
  container-type:inline-size;
  position:relative;
  width:100%;
  aspect-ratio:1525 / 941;
  overflow:visible;
}
.gate-art__plate{
  position:absolute;
  top:0;
  width:calc(100cqw * 1672 / 1525);
  height:calc(100cqw * 941 / 1525);
  left:calc(100cqw * -91 / 1525);
  container-type:inline-size;
  --u:calc(100cqw / 1672);
}
.gate-art__plate::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:url("../img/intro-v2/gate-no-signoff-v2.png?v=2") left center/100% 100% no-repeat;
  clip-path:inset(0 calc(12.7062*var(--u)) 0 0);
  transform:translateX(calc(21.3653*var(--u))) scaleX(.9947814742);
  transform-origin:left center;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) calc(490*var(--u)),#000 calc(520*var(--u)),#000 calc(866*var(--u)),rgba(0,0,0,0) calc(896*var(--u)),rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) calc(490*var(--u)),#000 calc(520*var(--u)),#000 calc(866*var(--u)),rgba(0,0,0,0) calc(896*var(--u)),rgba(0,0,0,0) 100%);
}
.gate-art__plate::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:-1px;
  pointer-events:none;
  background:
    linear-gradient(to right,#FAF6EF 0,rgba(250,246,239,.88) calc(14*var(--u)),rgba(250,246,239,0) calc(76*var(--u))),
    linear-gradient(to left,#FAF6EF 0,rgba(250,246,239,.88) calc(14*var(--u)),rgba(250,246,239,0) calc(76*var(--u))),
    linear-gradient(to bottom,#FAF6EF 0,rgba(250,246,239,.88) calc(12*var(--u)),rgba(250,246,239,0) calc(64*var(--u))),
    linear-gradient(to top,#FAF6EF 0,rgba(250,246,239,.88) calc(12*var(--u)),rgba(250,246,239,0) calc(64*var(--u)));
}
.gate-art__image{
  position:absolute;
  z-index:0;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:contain;
  object-position:left center;
  user-select:none;
  -webkit-user-drag:none;
}
.gate-art__card-lines{position:absolute;inset:0;z-index:2;pointer-events:none}
.gate-art__card-lines i{position:absolute;top:calc(529*var(--u));height:calc(328*var(--u));border:clamp(.65px,calc(1.1*var(--u)),1.1px) solid rgba(156,127,93,.46);border-radius:calc(27*var(--u));box-sizing:border-box}
.gate-art__card-lines i:nth-child(1){left:calc(91*var(--u));width:calc(375.03*var(--u))}
.gate-art__card-lines i:nth-child(2){left:calc(485.928*var(--u));width:calc(356.132*var(--u))}
.gate-art__card-lines i:nth-child(3){left:calc(860*var(--u));width:calc(357.126*var(--u))}
.gate-art__card-lines i:nth-child(4){left:calc(1236.987*var(--u));width:calc(379.013*var(--u))}
.gate-art__map{position:absolute;inset:0;transform:translateX(calc(21.3653*var(--u))) scaleX(.9947814742);transform-origin:left center}
.gate-art__hotspot{position:absolute;z-index:1;display:block;border:0;border-radius:28px;background:transparent;color:transparent;text-decoration:none}
.gate-art__hotspot:focus-visible{outline:3px solid #0b6077;outline-offset:4px}
.gate-art__hotspot--explore{left:60.88%;top:45.70%;width:15.18%;height:5.95%}
.gate-art__hotspot--pool{left:4.19%;top:56.22%;width:22.61%;height:20%}
.gate-art__hotspot--fire{left:28.04%;top:56.22%;width:21.23%;height:20%}
.gate-art__hotspot--social{left:50.42%;top:56.22%;width:21.47%;height:20%}
.gate-art__hotspot--sites{left:73.15%;top:56.22%;width:22.73%;height:20%}
@font-face{font-family:"Gate Newsreader";src:url("../fonts/hero/newsreader-var.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Gate Fractis";src:url("../fonts/library/fractis/fractis-400-fixed.woff2") format("woff2");font-weight:400;font-display:swap}
.gt{position:absolute;z-index:2;margin:0;color:#0e4a62;user-select:text;-webkit-user-select:text}
.gt-kicker{left:calc(1012*var(--u));top:calc(72*var(--u));font:400 calc(13.5*var(--u))/1 "Univers Next",Arial,sans-serif;letter-spacing:.26em;text-transform:uppercase;color:#a48462;white-space:nowrap}
.gt-title{left:calc(1010*var(--u));top:calc(124*var(--u));margin:0;font:450 calc(72.8*var(--u))/1 "Gate Newsreader",Georgia,serif;letter-spacing:-.025em;color:#0e4a62;text-wrap:nowrap}
.gt-title .gt-line{display:block;white-space:nowrap}
.gt-title em{display:block;margin:calc(10*var(--u)) 0 0;font:400 calc(72.8*var(--u))/1 "Castile-Mastah",cursive;letter-spacing:-.01em;color:#9a8061;font-style:normal;white-space:nowrap}
.gt-lead{
  --hero-h:clamp(830px,47.368vw,900px);
  --copy-u:min(0.9200px,calc((var(--hero-h) - 288px) / 664),calc((100vw - 2 * var(--margin)) / 601));
  left:calc(1020*var(--u));
  top:calc(318*var(--u));
  width:calc(540*var(--copy-u));
  margin:0;
  font-family:'Lora',Georgia,serif;
  font-weight:500;
  color:#123b58;
  font-size:calc(23*var(--copy-u));
  line-height:calc(34*var(--copy-u));
  letter-spacing:calc(-0.05*var(--copy-u));
}
.gt-btn{left:calc(1018*var(--u));top:calc(430*var(--u));display:flex;align-items:center;justify-content:space-between;width:calc(254*var(--u));height:calc(56*var(--u));padding:0 calc(26*var(--u)) 0 calc(28*var(--u));border-radius:999px;background:#01475e;color:#fff;text-decoration:none;font:500 calc(18*var(--u))/1 "Gate Newsreader",Georgia,serif;z-index:3;user-select:none}
.gt-btn svg{width:calc(22*var(--u));height:calc(16*var(--u));flex:none}
.gt-note{position:absolute;z-index:3;user-select:text;-webkit-user-select:text}
.gt-note__icon{position:absolute;top:calc(-1*var(--u));display:grid;width:calc(66*var(--u));height:calc(66*var(--u));place-items:center;border-radius:50%;background:#f0ede6;color:#07516a;pointer-events:none}
.gt-note__icon svg{display:block;width:calc(42*var(--u));height:calc(42*var(--u));fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.gt-note h3{margin:0;font:500 calc(16.5*var(--u))/1.2 "Gate Newsreader",Georgia,serif;color:#123b52;white-space:nowrap}
.gt-note p{margin:calc(3*var(--u)) 0 0;font:400 calc(13*var(--u))/1.35 "Univers Next",Arial,sans-serif;color:#5c7380}
.gt-note--1{left:calc(208.3842*var(--u));top:calc(768*var(--u));width:calc(210*var(--u))}
.gt-note--2{left:calc(607.2916*var(--u));top:calc(768*var(--u));width:calc(200*var(--u))}
.gt-note--3{left:calc(980.3346*var(--u));top:calc(768*var(--u));width:calc(210*var(--u))}
.gt-note--4{left:calc(1365.3151*var(--u));top:calc(768*var(--u));width:calc(200*var(--u))}
.gt-note__icon{left:calc(-86*var(--u))}
/* ==========================================================================
   4. ATTRACTIONS. East-end artboard, same stage as the gate section.
   Ink x=61 and x=1595 meet the hero column. Heading matches .gt-title.
   ========================================================================== */
.ee{
  --frame:1900px;
  --margin:170px;
  position:relative;
  width:100%;
  margin:0;
  padding:150px 0 0;
  background:#FAF6EF;
  overflow:visible;
  border:0;
}
.ee > .ix-frame{position:relative;z-index:1}
.ee-slot{
  container-type:inline-size;
  position:relative;
  width:100%;
  aspect-ratio:1525 / 941;
  --ink-l:61;
  --ink-r:1595;
  --ink-span:1534;
  --u:calc(100cqw / 1525);
  overflow:visible;
}
.ee-plate{
  position:absolute;
  top:0;
  width:calc(100cqw * 1672 / var(--ink-span));
  height:calc(100cqw * 940 / var(--ink-span));
  left:calc(100cqw * -1 * var(--ink-l) / var(--ink-span));
}
.ee-plate__img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:fill;
  user-select:none;
  pointer-events:none;
  -webkit-user-drag:none;
}
.ee-title{
  position:absolute;
  z-index:2;
  left:calc(61 / 1672 * 100%);
  top:calc(84 / 940 * 100%);
  margin:0;
  color:#0e4a62;
  font:450 calc(72.8 * var(--u))/1 "Gate Newsreader",Georgia,serif;
  letter-spacing:-.025em;
  text-wrap:nowrap;
  user-select:text;
  -webkit-user-select:text;
}
.ee-line{display:block;white-space:nowrap}
.ee-title em{
  display:inline-block;
  margin:0 .08em;
  font:400 1em/1 "Castile-Mastah",cursive;
  letter-spacing:-.01em;
  color:#9a8061;
  font-style:normal;
  vertical-align:-.02em;
}
.ee-hot{
  position:absolute;
  z-index:3;
  display:block;
  border-radius:18px;
  text-decoration:none;
}
.ee-hot--bishop{left:calc(528 / 1672 * 100%);top:calc(236 / 940 * 100%);width:calc(300 / 1672 * 100%);height:calc(460 / 940 * 100%)}
.ee-hot--stewart{left:calc(824 / 1672 * 100%);top:calc(198 / 940 * 100%);width:calc(416 / 1672 * 100%);height:calc(530 / 940 * 100%)}
.ee-hot--elissa{left:calc(1246 / 1672 * 100%);top:calc(236 / 940 * 100%);width:calc(310 / 1672 * 100%);height:calc(460 / 940 * 100%)}
.ee-hot--all{
  left:calc(1318 / 1672 * 100%);
  top:calc(817 / 940 * 100%);
  width:calc(280 / 1672 * 100%);
  height:calc(60 / 940 * 100%);
  border-radius:999px;
}
.ee-hot:focus-visible{outline:2px solid #0e4a62;outline-offset:3px}

.near{padding:var(--gap) 0 0}
.near__head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px clamp(24px,4vw,64px);align-items:end}
.near__head p{max-width:46ch;margin-bottom:6px}
.near__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,56px);align-items:center;margin-top:clamp(32px,4vw,56px)}
.near__aside{display:flex;flex-direction:column;gap:22px}
.near__legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.near__legend li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;font-size:.95rem;color:var(--body);padding-bottom:10px;border-bottom:1px solid var(--hair)}
.near__legend b{font-family:var(--display);font-weight:400;font-size:1.35rem;color:var(--teal-deep);line-height:1;white-space:nowrap}
.dm{position:relative}
.dm svg{width:100%;height:auto}
.dm__land{fill:#EEE4CD;stroke:#C4B285;stroke-width:1.4}
.dm__marsh{fill:#E4E7D2}
.dm__sea{fill:none}
.dm__wave{fill:none;stroke:rgba(29,147,123,.45);stroke-width:1.2;stroke-linecap:round}
.dm__road{fill:none;stroke:#D8CBA9;stroke-width:2.2;stroke-linecap:round}
.dm__road--wall{stroke:#C6B58C;stroke-width:3}
.dm__route{fill:none;stroke:var(--teal);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:6 6;opacity:.8;transition:opacity .3s,stroke-width .3s}
.dm.is-drawn .dm__route{animation:dmDraw 2.6s var(--ease) forwards}
@keyframes dmDraw{to{stroke-dashoffset:0}}
.dm__route[data-r="stewart"]{animation-delay:.1s}.dm__route[data-r="bishop"]{animation-delay:.35s}.dm__route[data-r="elissa"]{animation-delay:.6s}
.dm__route[data-r="strand"]{animation-delay:.85s}.dm__route[data-r="pier"]{animation-delay:1.1s}.dm__route[data-r="moody"]{animation-delay:1.35s}
.dm[data-active] .dm__route{opacity:.18}
.dm[data-active="stewart"] .dm__route[data-r="stewart"],.dm[data-active="bishop"] .dm__route[data-r="bishop"],.dm[data-active="elissa"] .dm__route[data-r="elissa"],
.dm[data-active="strand"] .dm__route[data-r="strand"],.dm[data-active="pier"] .dm__route[data-r="pier"],.dm[data-active="moody"] .dm__route[data-r="moody"]{opacity:1;stroke-width:3.2}
.dm__stop circle{fill:#fff;stroke:var(--teal);stroke-width:2}
.dm__stop text{font-family:var(--text);font-size:13.5px;fill:var(--ink-soft);letter-spacing:.02em;paint-order:stroke;stroke:var(--cream);stroke-width:4px;stroke-linejoin:round}
.dm__park circle{fill:var(--gold)}
.dm__park text{font-family:var(--display);font-size:17px;fill:var(--ink);paint-order:stroke;stroke:var(--cream);stroke-width:4px;stroke-linejoin:round}
.dm__sea-label,.dm__note{font-family:var(--script);font-size:22px;fill:rgba(20,48,43,.38)}
.dm__note{font-family:var(--text);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;fill:var(--muted)}
.dm__compass{fill:none;stroke:var(--muted);stroke-width:1.2}
.dm__compass text{font-family:var(--display);font-size:12px;fill:var(--muted);stroke:none}
.near__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px);list-style:none;margin:0;padding:0}
.near__cards li:nth-child(2),.near__cards li:nth-child(5){transform:translateY(clamp(14px,2.4vw,34px))}
.ncard{position:relative;display:block;border-radius:14px;overflow:hidden;text-decoration:none;color:#fff;aspect-ratio:4/5;background:var(--teal-deep);
  box-shadow:0 22px 40px -22px rgba(20,48,43,.5)}
.ncard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.ncard:hover img{transform:scale(1.05)}
.ncard::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,36,30,.86) 0%,rgba(8,36,30,.45) 38%,rgba(8,36,30,.06) 66%,rgba(8,36,30,0) 100%)}
.ncard__chip{position:absolute;z-index:2;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;padding:6px 11px 6px 8px;border-radius:999px;
  background:rgba(250,246,239,.92);color:var(--teal-deep);font-size:.74rem;letter-spacing:.04em;backdrop-filter:blur(4px)}
.ncard__chip svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ncard__body{position:absolute;z-index:2;left:16px;right:16px;bottom:14px}
.ncard__body small{display:block;font-family:var(--display);font-style:italic;font-size:.92rem;letter-spacing:.01em;opacity:.85;margin-bottom:3px}
.ncard__body h3{color:#fff;font-size:1.28rem;line-height:1.12}
.near__cta{display:flex;justify-content:flex-end;margin-top:clamp(40px,5vw,64px)}
@media (max-width:1000px){.near__head{grid-template-columns:1fr}.near__grid{grid-template-columns:1fr}.dm{max-width:640px}.near__cta{justify-content:flex-start}}
@media (max-width:600px){.near__cards{grid-template-columns:repeat(2,minmax(0,1fr))}.near__cards li:nth-child(2),.near__cards li:nth-child(5){transform:none}.near__cards li:nth-child(2n){transform:translateY(18px)}}

/* ==========================================================================
   5. BEACH DAY. Full-width watercolor stage with copy kept on the same
   content rails as the hero and surrounding sections.
   ========================================================================== */
.beach-band{
  --frame:1900px;
  --margin:170px;
  position:relative;
  width:100%;
  margin:0;
  padding:150px 0 0;
  overflow:hidden;
  background:#EEF2F4;
  border:0;
}
.beach-band::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:
    linear-gradient(to bottom,#FAF6EF 0,rgba(250,246,239,0) 16%,rgba(250,246,239,0) 84%,#FAF6EF 100%),
    linear-gradient(to right,#FAF6EF 0,rgba(250,246,239,0) 5%,rgba(250,246,239,0) 95%,#FAF6EF 100%);
}
.beach-band__slot{
  container-type:inline-size;
  position:relative;
  width:100%;
  height:clamp(520px,36.84vw,700px);
  overflow:visible;
}
.beach-band__plate{
  position:absolute;
  top:0;
  left:calc(-1 * var(--margin));
  width:calc(100% + 2 * var(--margin));
  aspect-ratio:2066 / 761;
  overflow:visible;
}
.beach-band__img{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:fill;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.beach-band__plate::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:-2px;
  pointer-events:none;
  background:
    linear-gradient(to right,transparent 0,transparent 45%,rgba(238,242,244,.82) 53%,#EEF2F4 61%),
    linear-gradient(to bottom,rgba(238,242,244,.7) 0,transparent 16%,transparent 78%,rgba(238,242,244,.45) 90%,transparent 100%),
    linear-gradient(to right,transparent 0,transparent 7%,transparent 93%,transparent 100%);
}
.beach-band__copy{
  position:absolute;
  z-index:2;
  top:14.72%;
  right:var(--margin);
  width:clamp(344px,25.7%,488px);
  margin:0;
  color:#163e3c;
  user-select:text;
  -webkit-user-select:text;
}
.beach-band__kicker{
  display:flex;
  align-items:center;
  margin:0;
  font:500 clamp(11px,.7vw,13px)/1 "Univers Next",Arial,sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#9f7848;
}
.beach-band__title{
  margin:22px 0 0;
  color:#0e4a62;
  font-family:"Gate Newsreader",Georgia,serif;
  font-size:clamp(42px,4vw,62px);
  font-weight:450;
  line-height:.92;
  letter-spacing:-.03em;
  text-wrap:nowrap;
}
.beach-band__line{
  display:flex;
  align-items:flex-end;
  gap:.2em;
  white-space:nowrap;
}
.beach-band__line + .beach-band__line{margin-top:.08em}
.beach-band__line + .beach-band__line em{margin-left:.2em}
.beach-band__title em{
  display:inline-block;
  margin:0 .08em;
  font:400 1em/1 "Castile-Mastah",cursive;
  letter-spacing:-.01em;
  color:#9f7848;
  font-style:normal;
  vertical-align:-.04em;
}
.beach-band__copy > p.beach-band__lead{
  max-width:none;
  margin:22px 0 0;
  font:400 clamp(14px,1vw,18px)/1.62 "Univers Next",Arial,sans-serif;
  letter-spacing:0;
  color:#57706e;
}
.beach-band__button{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  width:min(100%,306px);
  min-width:220px;
  height:63px;
  min-height:52px;
  margin-top:26px;
  padding:0 6px 0 22px;
  border:0;
  border-radius:999px;
  background:#294c4c;
  color:#fff;
  font:500 calc(16 * 100cqw / var(--ink-span))/1 "Univers Next",Arial,sans-serif;
  text-decoration:none;
  user-select:none;
}
.beach-band__button > span{
  display:grid;
  width:42px;
  height:42px;
  flex:0 0 auto;
  place-items:center;
  border-radius:50%;
  background:#fff;
  color:#294c4c;
}
.beach-band__button svg{width:18px;height:14px}
.beach-band__button:focus-visible{outline:3px solid #0e4a62;outline-offset:4px}
@media (max-width:1100px){
  .beach-band{--margin:80px}
}
@media (max-width:900px){
  .beach-band__slot{height:920px}
  .beach-band__plate{height:920px;aspect-ratio:auto}
  .beach-band__img{height:clamp(280px,66vw,500px);object-fit:cover;object-position:left center}
  .beach-band__plate::before{
    background:
      linear-gradient(to bottom,transparent 0,transparent 36%,rgba(238,242,244,.55) 44%,#EEF2F4 54%,#EEF2F4 100%),
      linear-gradient(to right,transparent 0,transparent 8%,transparent 92%,transparent 100%);
  }
  .beach-band__copy{top:calc(clamp(280px,66vw,500px) + 30px);left:var(--margin);right:var(--margin);width:auto}
  .beach-band__title{font-size:clamp(40px,8vw,56px)}
  .beach-band__copy > p.beach-band__lead{font-size:16px}
}
@media (max-width:760px){
  .beach-band{--margin:24px}
  .beach-band__slot,.beach-band__plate{height:740px}
  .beach-band__copy{top:310px}
  .beach-band__title{font-size:clamp(40px,12vw,48px)}
  .beach-band__button{height:56px}
}

/* ========================================================================== 
   8. CLOSING FADE BAND. fade-effect.md engine.
   ========================================================================== */
.mag{position:relative;min-height:clamp(560px,54vw,720px);margin-top:var(--gap);display:flex;align-items:center;overflow:hidden}
.mag__bg{position:absolute;inset:-10%;z-index:0;background-size:cover;background-position:center}
.mag__veil{position:absolute;inset:0;z-index:1}
.mag:not(.mag--flip) .mag__veil{background:var(--mag-h-left),var(--mag-soft)}
.mag--flip .mag__veil{background:var(--mag-h-right),var(--mag-soft)}
.mag .wrap{position:relative;z-index:2;display:flex}
.mag__body{width:44%;max-width:470px;padding:clamp(40px,5vw,70px) 0}
.mag:not(.mag--flip) .mag__body{margin-right:auto}
.mag--flip .mag__body{margin-left:auto}
.mag__body h2{white-space:nowrap}
.mag__body h2 .scr{font-size:1.36em}
.mag__body p{margin-top:20px}
.mag__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.mag--beach .mag__bg{filter:brightness(1) contrast(.9) saturate(.96)}
.mag--close .mag__bg{filter:brightness(.99) contrast(.84) saturate(.92)}
.mag--close .mag__veil::after{content:"";position:absolute;inset:0;background:rgba(250,246,239,.14)}
.mag--close{margin-top:calc(var(--gap) * .7)}
/* the big number on the beach band */
.mag__num{display:block;font-family:var(--display);font-size:clamp(4.2rem,9vw,7.4rem);line-height:.9;color:var(--teal-deep);letter-spacing:-.02em;margin-bottom:6px}
.mag__num small{font-size:.32em;letter-spacing:.04em;color:var(--gold);vertical-align:baseline;margin-left:.15em;font-family:var(--script);font-size:.42em}
@media (max-width:820px){
  .mag{min-height:0;padding:300px 0 0;display:block}
  .mag__bg{inset:0;height:360px}
  .mag__veil{height:420px;background:linear-gradient(to bottom,rgba(250,246,239,.9) 0%,rgba(250,246,239,.35) 9%,rgba(250,246,239,.18) 30%,rgba(250,246,239,.5) 58%,rgba(250,246,239,.96) 80%,var(--cream) 100%)!important}
  .mag__body,.mag--flip .mag__body,.mag:not(.mag--flip) .mag__body{width:100%;max-width:none;margin:0;padding:10px 0 40px}
  .mag__body h2{white-space:normal}
}

/* ==========================================================================
   6. REVIEWS. Proof row + three real quotes, watercolor sea faint behind.
   ========================================================================== */
.rev{padding:var(--gap) 0 0;position:relative}
.rev__wash{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.rev__wash::before{content:"";position:absolute;left:50%;top:-6%;width:min(150vw,1500px);aspect-ratio:1100/718;transform:translateX(-50%);
  background:url("../art/wc-sun-sea-1100.webp") center/contain no-repeat;opacity:.16;filter:saturate(.85)}
.rev__wash::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,var(--cream) 0%,rgba(250,246,239,.2) 22%,rgba(250,246,239,.2) 70%,var(--cream) 100%)}
.rev .wrap{position:relative;z-index:1}
.rev__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,80px);align-items:start;margin-top:clamp(32px,4vw,56px)}
.proof{display:flex;flex-direction:column;gap:18px}
.proof__big{display:flex;align-items:baseline;gap:14px}
.proof__big b{font-family:var(--display);font-weight:400;font-size:clamp(4.4rem,7vw,6.2rem);line-height:.9;color:var(--teal-deep);letter-spacing:-.02em}
.stars{display:inline-flex;gap:2px;color:var(--gold)}
.stars svg{width:18px;height:18px;fill:currentColor}
.proof__row{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:12px 0;border-top:1px solid var(--hair);font-size:.95rem}
.proof__row b{font-family:var(--display);font-weight:400;font-size:1.5rem;color:var(--ink);line-height:1}
.proof__row span{color:var(--muted)}
.proof__link{margin-top:8px;align-self:flex-start}
.quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px) clamp(24px,4vw,56px)}
.quote{position:relative;padding:34px 0 0}
.quote::before{content:"\201C";position:absolute;left:-6px;top:-22px;font-family:var(--display);font-size:6rem;line-height:1;color:var(--gold);opacity:.55}
.quote:nth-child(1){grid-column:1/-1;max-width:62ch}
.quote:nth-child(1) p{font-family:var(--display);font-size:clamp(1.35rem,1.9vw,1.75rem);line-height:1.32;color:var(--ink)}
.quote p{font-size:1.02rem;line-height:1.6;color:var(--body)}
.quote cite{display:flex;align-items:center;gap:10px;margin-top:14px;font-style:normal;font-size:.86rem;color:var(--muted)}
.quote cite b{font-weight:400;color:var(--ink);font-family:var(--text);white-space:nowrap}
.quote cite i{flex:0 0 auto}
.quote cite i{width:22px;height:1px;background:var(--gold)}
@media (max-width:1000px){.rev__grid{grid-template-columns:1fr}.quotes{grid-template-columns:1fr}.quote:nth-child(1){grid-column:auto}}

/* ========================================================================== 
   6. GUEST REVIEWS ARTBOARD. The supplied 1840 x 855 composition is mapped
   to the same 1900px / 170px content rail as the feature sections above it.
   Its source x=134 edge lands exactly on the shared left rail; its right edge
   lands on the shared right rail. Copy remains selectable HTML over the art.
   ========================================================================== */
.reviews-band{
  --frame:1900px;
  --margin:170px;
  --paper:#FAF6EF;
  position:relative;
  width:100%;
  margin:0;
  padding:150px 0 0;
  overflow:hidden;
  border:0;
  background:var(--paper);
}
.reviews-band .ix-frame{
  position:relative;
  width:min(100%,var(--frame));
  margin:0 auto;
  padding-right:var(--margin);
  padding-left:var(--margin);
  box-sizing:border-box;
}
.reviews-band__slot{
  position:relative;
  width:100%;
  aspect-ratio:1706 / 855;
  container-type:inline-size;
  overflow:visible;
}
.reviews-band__plate{
  --g:calc(100cqw / 1706);
  --r:calc(100cqw / 1525);
  position:absolute;
  inset:0 auto auto calc(-134 * var(--g));
  width:calc(1840 * var(--g));
  height:calc(855 * var(--g));
  overflow:visible;
  isolation:isolate;
}
.reviews-band__art{
  position:absolute;
  z-index:0;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:fill;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.reviews-band__plate::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:-2px;
  pointer-events:none;
  background:
    linear-gradient(to right,var(--paper) 0,rgba(250,246,239,.78) calc(16 * var(--g)),rgba(250,246,239,0) calc(78 * var(--g))),
    linear-gradient(to left,var(--paper) 0,rgba(250,246,239,.82) calc(18 * var(--g)),rgba(250,246,239,0) calc(94 * var(--g))),
    linear-gradient(to bottom,var(--paper) 0,rgba(250,246,239,.74) calc(18 * var(--g)),rgba(250,246,239,0) calc(88 * var(--g))),
    linear-gradient(to top,var(--paper) 0,rgba(250,246,239,.8) calc(20 * var(--g)),rgba(250,246,239,0) calc(104 * var(--g)));
}
/* .reviews-band__title-mask removed 2026-09-23: the baked "Guest reviews" is painted out of
   guest-reviews-clean.webp (sources /root/sandpiper-reviews-fix/clean.py), so the shell is no longer washed out. */
.reviews-band__heading{
  position:absolute;
  z-index:3;
  left:calc(134 * var(--g));
  top:calc(116 * var(--g));
  margin:0;
  user-select:text;
  -webkit-user-select:text;
}
.reviews-band__heading h2{
  display:flex;
  align-items:baseline;
  gap:.15em;
  margin:0;
  color:#0e4a62;
  font-family:"Gate Newsreader",Georgia,serif;
  font-size:calc(67.8 * var(--g)); /* = 62px at the 1900 frame; scales with the art so "reviews" never reaches the shell */
  font-weight:450;
  line-height:.92;
  letter-spacing:-.03em;
  white-space:nowrap;
}
.reviews-band__heading em{
  display:inline-block;
  color:#9f7848;
  font:400 1em/1 "Castile-Mastah",cursive;
  font-style:normal;
  letter-spacing:-.01em;
  vertical-align:-.04em;
}
.reviews-band__selectable{
  position:absolute;
  z-index:3;
  inset:0;
  color:transparent;
  -webkit-text-fill-color:transparent;
  font-family:"Univers Next",Arial,sans-serif;
  user-select:text;
  -webkit-user-select:text;
}
.reviews-band__selectable p,
.reviews-band__selectable blockquote{
  position:absolute;
  margin:0;
}
.reviews-band__selectable-kicker{left:calc(134 * var(--g));top:calc(74 * var(--g));width:calc(440 * var(--g));font-size:calc(18 * var(--g));line-height:1.2}
.reviews-band__selectable-subtitle{left:calc(134 * var(--g));top:calc(208 * var(--g));width:calc(480 * var(--g));font-size:calc(18 * var(--g));line-height:1.3}
.reviews-band__selectable-google{left:calc(134 * var(--g));top:calc(278 * var(--g));width:calc(400 * var(--g));font-size:calc(28 * var(--g));line-height:1.75}
.reviews-band__selectable-rv{left:calc(134 * var(--g));top:calc(414 * var(--g));width:calc(400 * var(--g));font-size:calc(18 * var(--g));line-height:1.55}
.reviews-band__selectable-facebook{left:calc(134 * var(--g));top:calc(505 * var(--g));width:calc(400 * var(--g));font-size:calc(18 * var(--g));line-height:1.55}
.reviews-band__selectable-quote{left:calc(816 * var(--g));top:calc(280 * var(--g));width:calc(630 * var(--g));font:400 calc(25 * var(--g))/1.36 "Gate Newsreader",Georgia,serif}
.reviews-band__selectable-quote p{position:static}
.reviews-band__selectable-quote footer{margin-top:calc(22 * var(--g));font:400 calc(17 * var(--g))/1.35 "Univers Next",Arial,sans-serif}
.reviews-band__selectable ::selection{background:rgba(14,74,98,.82);color:#fff;-webkit-text-fill-color:#fff}
.reviews-band__google-link{
  position:absolute;
  z-index:4;
  left:calc(134 * var(--g));
  top:calc(596 * var(--g));
  width:calc(350 * var(--g));
  height:calc(66 * var(--g));
  overflow:hidden;
  border-radius:999px;
  color:transparent;
  text-decoration:none;
  user-select:text;
  -webkit-user-select:text;
}
.reviews-band__google-link:focus-visible{outline:3px solid #0e4a62;outline-offset:4px}
.reviews-mobile{display:none}
@media (max-width:1450px){.reviews-band{--margin:clamp(80px,8.947vw,170px)}}
@media (max-width:1100px){
  .reviews-band{--margin:clamp(80px,8.947vw,170px)}
  .reviews-band__slot{display:none}
  .reviews-mobile{
    position:relative;
    display:block;
    min-height:780px;
    padding:0 0 70px;
    overflow:hidden;
    isolation:isolate;
  }
  .reviews-mobile__beach{
    position:absolute;
    z-index:-1;
    top:0;
    right:-8%;
    width:52%;
    height:520px;
    background:url("../img/intro-v2/reviews-beach-mobile.png") center 44%/cover no-repeat;
    opacity:.42;
    filter:saturate(.82) contrast(.94);
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 36%,#000 82%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 16%,#000 76%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right,transparent 0,#000 36%,#000 82%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 16%,#000 76%,transparent 100%);
    mask-composite:intersect;
  }
  .reviews-mobile__kicker{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:14px;
    margin:0;
    color:#5d6e71;
    font:400 12px/1 "Univers Next",Arial,sans-serif;
    letter-spacing:.24em;
    text-transform:uppercase;
  }
  .reviews-mobile__kicker i{display:block;width:72px;height:1px;background:#b89363}
  .reviews-mobile__title{
    position:relative;
    z-index:1;
    display:flex;
    align-items:baseline;
    gap:.15em;
    margin:25px 0 0;
    color:#0e4a62;
    font-family:"Gate Newsreader",Georgia,serif;
    font-size:clamp(40px,8vw,56px);
    font-weight:450;
    line-height:.92;
    letter-spacing:-.03em;
  }
  .reviews-mobile__title em{color:#9f7848;font:400 1em/1 "Castile-Mastah",cursive;font-style:normal;letter-spacing:-.01em}
  .reviews-mobile__subtitle{position:relative;z-index:1;margin:20px 0 0;color:#5d6e71;font:400 12px/1.4 "Univers Next",Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase}
  .reviews-mobile__proof{position:relative;z-index:1;width:min(100%,420px);margin-top:40px;color:#0e4f51}
  .reviews-mobile__score{display:flex;align-items:baseline;gap:14px}
  .reviews-mobile__score b{font:450 72px/.86 "Gate Newsreader",Georgia,serif;letter-spacing:-.035em}
  .reviews-mobile__score span{color:#d69422;font:400 20px/1 Georgia,serif;letter-spacing:2px;white-space:nowrap}
  .reviews-mobile__score span i{color:#e4dac8;font-style:normal}
  .reviews-mobile__proof>p{margin:12px 0 24px;font:400 15px/1.3 "Univers Next",Arial,sans-serif}
  .reviews-mobile__proof-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;border-top:1px solid rgba(14,79,81,.2);font:400 15px/1.3 "Univers Next",Arial,sans-serif}
  .reviews-mobile__proof-row span,.reviews-mobile__proof-row span small{display:block}
  .reviews-mobile__proof-row span small{margin-top:3px;color:#68777b;font-size:14px}
  .reviews-mobile__proof-row>b{font:450 34px/1 "Gate Newsreader",Georgia,serif;white-space:nowrap}
  .reviews-mobile__proof-row>b small{font-size:.45em}
  .reviews-mobile__quote{
    position:relative;
    z-index:1;
    width:100%;
    margin:34px 0 0;
    padding:54px 44px 38px;
    border-radius:4px 18px 7px 14px;
    background:rgba(255,253,248,.92);
    color:#0e4f51;
    box-shadow:0 22px 44px -30px rgba(20,48,43,.45),inset 0 0 34px rgba(179,146,94,.05);
  }
  .reviews-mobile__quote::after{content:"";position:absolute;inset:-10px -8px;z-index:-1;border-radius:20px;background:rgba(255,253,248,.38);filter:blur(8px)}
  .reviews-mobile__quote-mark{position:absolute;left:38px;top:10px;color:#b3925e;font:400 68px/.9 "Gate Newsreader",Georgia,serif}
  .reviews-mobile__quote>p{position:static;margin:0;font:450 clamp(18px,2.7vw,23px)/1.42 "Gate Newsreader",Georgia,serif}
  .reviews-mobile__quote footer{display:flex;align-items:center;gap:14px;margin-top:24px;font:400 14px/1.3 "Univers Next",Arial,sans-serif}
  .reviews-mobile__quote footer img{width:58px;height:58px;flex:none;border-radius:50%;object-fit:cover}
  .reviews-mobile__quote footer span,.reviews-mobile__quote footer small{display:block}
  .reviews-mobile__quote footer b{font-weight:500}
  .reviews-mobile__quote footer small{margin-top:3px;color:#647074}
  .reviews-mobile__button{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    width:min(100%,350px);
    height:62px;
    margin-top:30px;
    padding:0 7px 0 24px;
    border-radius:999px;
    background:#005a55;
    color:#fff;
    font:500 16px/1 "Univers Next",Arial,sans-serif;
    text-decoration:none;
  }
  .reviews-mobile__button span{display:grid;width:46px;height:46px;place-items:center;border-radius:50%;background:#fff;color:#005a55}
  .reviews-mobile__button svg{width:19px;height:15px}
  .reviews-mobile__button:focus-visible{outline:3px solid #0e4a62;outline-offset:4px}
  .reviews-mobile__motto{position:relative;z-index:1;width:260px;margin:38px 0 0;color:#a7773d;font:400 29px/1.3 "Gate3 Fractis","Castile-Mastah",cursive;transform:rotate(-4deg)}
  .reviews-mobile__motto span{display:block;white-space:nowrap}
  .reviews-mobile__motto span+span{margin-top:4px}
}
@media (max-width:760px){
  .reviews-band{--margin:24px}
  .reviews-mobile{padding-bottom:52px}
  .reviews-mobile__beach{top:155px;right:-14%;width:72%;height:360px;opacity:.24}
  .reviews-mobile__title{font-size:clamp(40px,12vw,48px)}
  .reviews-mobile__subtitle{max-width:24em}
  .reviews-mobile__proof{margin-top:38px}
  .reviews-mobile__score b{font-size:64px}
  .reviews-mobile__quote{padding:50px 24px 30px}
  .reviews-mobile__quote-mark{left:22px}
  .reviews-mobile__quote>p{font-size:18px}
}

/* ==========================================================================
   7. GOOD SAM band. Compact, given room, correct asset.
   ========================================================================== */
.gs{margin-top:var(--gap)}
.gs__in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(20px,3vw,44px);align-items:center;padding:clamp(24px,3vw,36px) clamp(24px,3.5vw,48px);
  background:#fff;border-radius:22px;box-shadow:0 30px 60px -36px rgba(20,48,43,.35),0 0 0 1px rgba(20,48,43,.05)}
.gs__shield{width:clamp(68px,7vw,88px);height:auto;flex:0 0 auto;filter:drop-shadow(0 6px 14px rgba(20,48,43,.18))}
.gs__h{font-size:clamp(1.5rem,2.3vw,2rem);line-height:1.1}
.gs__p{margin-top:8px;color:var(--body);max-width:56ch}
.gs__rating{display:flex;gap:clamp(14px,2vw,28px);text-align:center}
.gs__rating div{display:flex;flex-direction:column;gap:3px}
.gs__rating b{font-family:var(--display);font-weight:400;font-size:2rem;line-height:1;color:var(--teal-deep)}
.gs__rating span{font-size:.86rem;color:var(--muted)}
@media (max-width:820px){.gs__in{grid-template-columns:auto minmax(0,1fr)}.gs__rating{grid-column:1/-1;justify-content:flex-start}}

/* ==========================================================================
   9. FOOTER. Light watercolor footer with the dune grass frieze. Chrome standard.
   ========================================================================== */
.ft{position:relative;margin-top:calc(var(--gap) * .6);padding:clamp(48px,6vw,80px) 0 clamp(200px,24vw,340px);background:linear-gradient(180deg,var(--cream) 0%,#F4ECDE 100%);overflow:hidden}
.ft__frieze{position:absolute;left:0;right:0;bottom:-2px;height:clamp(180px,22vw,330px);background:url("../art/wc-dunes-2000.webp") center bottom/100% auto no-repeat;opacity:.94;pointer-events:none}
.ft .wrap{position:relative;z-index:1}
.ft__top{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,1.7fr) minmax(0,1.9fr) minmax(0,2.4fr) minmax(0,2.8fr);gap:clamp(24px,3vw,44px)}
.ft__brand{max-width:340px}
.ft__logo{display:flex;align-items:flex-end;gap:0;margin-bottom:18px}
.ft__logo img.ft__mark{width:104px;height:104px;border-radius:12px;border:2px solid #fff;box-shadow:0 10px 24px -12px rgba(20,48,43,.4)}
.ft__logo img.ft__bird{width:150px;margin-left:-14px;margin-bottom:-16px;position:relative;z-index:1;
  filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 8px 12px rgba(20,48,43,.16))}
.ft__desc{font-size:.97rem;line-height:1.6;color:var(--body)}
.ft__soc{display:flex;gap:10px;margin-top:18px}
.ft__soc a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.55);color:var(--teal-deep);border:1px solid var(--hair);transition:background .22s,color .22s}
.ft__soc a:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.ft__soc svg{width:17px;height:17px}
.ft__col h3{font-family:var(--text);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin-bottom:14px}
.ft__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.ft__col a{color:var(--body);text-decoration:none;font-size:.95rem;transition:color .2s;display:inline-flex;align-items:center;min-height:32px;padding-block:2px}
.ft__col a:hover{color:var(--teal)}
.ft__col address{font-style:normal;font-size:.95rem;line-height:1.6;color:var(--body);display:flex;flex-direction:column;gap:4px}
.ft__col address a{min-height:32px;display:inline-flex;align-items:center}
.ft__hours{display:grid;grid-template-columns:auto auto;gap:6px 14px;font-size:.92rem;color:var(--body);white-space:nowrap}
.ft__hours b{font-weight:400;color:var(--ink)}
.ft__mid{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:clamp(36px,4vw,56px);padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--hair)}
.ft__pills{display:flex;flex-wrap:wrap;gap:10px}
.ft__pills span{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.4);font-size:.9rem;color:var(--ink-soft)}
.ft__pills span svg{width:15px;height:15px;stroke:var(--teal);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ft__pills a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:32px}
.ft__pills span{min-height:44px}
.ft a.ft__login{color:var(--teal-deep)}
.ft__partners{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;margin-top:clamp(28px,3vw,40px);padding:clamp(22px,2.6vw,30px) 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.ft__partners>div{display:flex;align-items:center;gap:16px}
.ft__partners>div:last-child{justify-content:flex-end}
.ft__partners small{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.ft__partners img.rvbt{width:150px;height:auto}
.ft__partners img.gs-sm{width:58px;height:auto}
.ft__partners img.cards{width:120px;height:auto}
.ft__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:20px;font-size:.82rem;color:var(--muted)}
.ft__legal ul{list-style:none;margin:0;padding:0;display:flex;gap:18px}
.ft__legal a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:32px}
.ft__legal a:hover{color:var(--teal)}
@media (max-width:1000px){.ft__top{grid-template-columns:repeat(2,minmax(0,1fr))}.ft__brand{grid-column:1/-1;max-width:none}}
@media (max-width:820px){.ft__partners{grid-template-columns:1fr;justify-items:start}.ft__partners>div:last-child{justify-content:flex-start}}
@media (max-width:560px){.ft__top{grid-template-columns:1fr}.ft__logo img.ft__bird{width:112px;margin-left:-8px;margin-bottom:-12px}}

/* map additions: the sand band and the park parcel */
.dm__sand{fill:none;stroke:#F3E6C4;stroke-width:16;stroke-linecap:round}
.dm__parcel{fill:rgba(29,147,123,.18);stroke:var(--teal);stroke-width:1}