/* Home hero in portrait: phones (max-width:600px) and portrait tablets (max-width:900px).
   2026-11-10. Loaded last.
   The video is the whole first screen and stays almost entirely clear. Only the eyebrow and the
   heading sit on it, pinned to the bottom of the screen on a short cream wash. The intro sentence
   and the four highlights start at the fold, on solid cream, ending on the sand artwork.
   The hero grows with its content. Nothing here applies to landscape tablets or desktop. */
@media(max-width:600px),(max-width:900px) and (orientation:portrait){
  html body.gulf-hero-live.home-park-type .hv2{
    --hv-head:clamp(64px,18vw,84px);        /* logo / header height */
    --hv-top:18px;
    --hv-title:clamp(31px,9.2vw,58px);      /* heading size; its two lines are 2.24x this tall */
    --hv-fold:100svh;                       /* bottom of the first screen */
    --hv-shore:300px;--hv-bleed:110px;--hv-fade:110px;
    height:auto;min-height:100svh;
  }
  html body.gulf-hero-live.home-park-type .hv2 .hv2__frame{
    display:flex;flex-direction:column;gap:0;height:auto;min-height:100svh;
    padding:var(--hv-top) 24px 150px;
  }

  /* header: smaller logo, both buttons the same 44px square */
  html body.gulf-hero-live.home-park-type .hv2 .pha__header{align-items:flex-start;gap:16px}
  html body.gulf-hero-live.home-park-type .hv2 .pha__brand{width:var(--hv-head);height:var(--hv-head)}
  html body.gulf-hero-live.home-park-type .hv2 .pha__nav{gap:10px}
  html body.gulf-hero-live.home-park-type .hv2 .pha__menu,
  html body.gulf-hero-live.home-park-type .hv2 .pha__book{width:44px;min-width:44px;height:44px;padding:0;gap:0;font-size:0;letter-spacing:0}

  /* the video: exactly one full screen tall, whatever the hero's total height */
  html body.gulf-hero-live.home-park-type .hv2 .hv2__poster,
  html body.gulf-hero-live.home-park-type .hv2 .pha__video{
    inset:0 0 auto 0;height:var(--hv-fold);object-position:58% 50%;
  }
  /* a short cream wash at the very bottom of that screen, just tall enough for the heading */
  html body.gulf-hero-live.home-park-type .hv2 .hv2__veil{
    background:linear-gradient(180deg,
      rgba(250,247,240,.26) 0,
      rgba(250,247,240,0) 14svh,
      rgba(250,247,240,0) calc(var(--hv-fold) - var(--hv-title) * 2.24 - 190px),
      rgba(250,247,240,.2) calc(var(--hv-fold) - var(--hv-title) * 2.24 - 140px),
      rgba(250,247,240,.55) calc(var(--hv-fold) - var(--hv-title) * 2.24 - 92px),
      rgba(250,247,240,.8) calc(var(--hv-fold) - var(--hv-title) * 2.24 - 50px),
      rgba(250,247,240,.92) calc(var(--hv-fold) - var(--hv-title) * 1.4),
      rgba(250,247,240,.98) calc(var(--hv-fold) - 40px),
      #faf7f0 var(--hv-fold));
  }
  html body.gulf-hero-live.home-park-type .hv2 .hv2__palm{display:none}

  /* eyebrow + heading pinned to the bottom of the first screen; the intro starts at the fold */
  html body.gulf-hero-live.home-park-type .hv2 .hv2__copy{display:contents}
  html body.gulf-hero-live.home-park-type .hv2 :is(.hv2__eyebrow,#hv2-title,.hv2__lead){position:relative;z-index:2}
  html body.gulf-hero-live.home-park-type .hv2 .hv2__eyebrow{
    height:16px;margin:calc(var(--hv-fold) - var(--hv-top) - var(--hv-head) - 16px - 12px - var(--hv-title) * 2.24 - 30px) 0 12px;
    font-size:10.5px;line-height:16px;letter-spacing:.18em;color:#8a5a3b;
  }
  html body.gulf-hero-live.home-park-type .hv2 #hv2-title{font-size:var(--hv-title)!important;line-height:1.08!important}
  html body.gulf-hero-live.home-park-type .hv2 :is(.hv2__eyebrow,#hv2-title){text-shadow:0 0 14px #faf7f0,0 0 6px #faf7f0cc}
  html body.gulf-hero-live.home-park-type .hv2 .hv2__lead{max-width:560px;margin-top:calc(30px + 26px);font-size:18px!important;line-height:1.42!important;text-wrap:pretty}
  html body.gulf-hero-live.home-park-type .hv2 .hv2__lead br{display:none}

  /* highlights: one tidy column with hairlines, ending on the sand */
  html body.gulf-hero-live.home-park-type .hv2 .hv2__features{
    position:relative;display:grid;grid-template-columns:1fr;gap:0;width:100%;margin-top:26px;
    border-top:1px solid #d9cdbb;
  }
  html body.gulf-hero-live.home-park-type .hv2 .hv2__features li{
    display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;column-gap:14px;
    padding:12px 0;border:0;border-bottom:1px solid #d9cdbb;flex-direction:initial;
  }
  html body.gulf-hero-live.home-park-type .hv2 .hv2__features li:last-child{border-bottom:0}
  html body.gulf-hero-live.home-park-type .hv2 .hv2__features svg{width:30px;height:32px;justify-self:center}
  html body.gulf-hero-live.home-park-type .hv2 .hv2__features h2{margin:0!important;font-size:18px!important;line-height:1.2!important}
  html body.gulf-hero-live.home-park-type .hv2 .hv2__features p{margin:3px 0 0!important;font-size:15px!important;line-height:1.35!important}
  html body.gulf-hero-live.home-park-type .hv2 .hv2__features br{display:none}

  /* pause button: on the open video, clear of every word */
  html body.gulf-hero-live.home-park-type .hv2 .hv2__motion{top:38svh;bottom:auto;right:24px;width:40px;height:40px}
}
/* portrait tablets: highlights two-up, intro a little larger */
@media(min-width:601px) and (max-width:900px) and (orientation:portrait){
  html body.gulf-hero-live.home-park-type .hv2 .hv2__frame{padding-inline:40px;padding-bottom:170px}
  html body.gulf-hero-live.home-park-type .hv2 .hv2__lead{font-size:21px!important}
  html body.gulf-hero-live.home-park-type .hv2 .hv2__features{grid-template-columns:1fr 1fr;column-gap:44px;border-top:0}
  html body.gulf-hero-live.home-park-type .hv2 .hv2__features li{border-top:1px solid #d9cdbb;border-bottom:0;padding:16px 0}
  html body.gulf-hero-live.home-park-type .hv2 .hv2__features h2{font-size:20px!important}
  html body.gulf-hero-live.home-park-type .hv2 .hv2__features p{font-size:16px!important}
  html body.gulf-hero-live.home-park-type .hv2 .hv2__motion{right:40px}
  /* tablets keep the worded "Book Your Stay" button */
  html body.gulf-hero-live.home-park-type .hv2 .pha__book{width:auto;min-width:0;height:44px;padding:0 16px;gap:8px;font-size:8.8px;letter-spacing:.24em}
}
/* short phones: slimmer header */
@media(max-width:600px) and (max-height:700px){
  html body.gulf-hero-live.home-park-type .hv2{--hv-head:60px;--hv-top:14px}
  html body.gulf-hero-live.home-park-type .hv2 .hv2__frame{padding-bottom:140px}
  html body.gulf-hero-live.home-park-type .hv2 .hv2__lead{font-size:17px!important}
  html body.gulf-hero-live.home-park-type .hv2 .hv2__features li{padding:10px 0}
}

/* Play/pause button removed from the home hero at every screen size (client, 2026-11-10).
   The button stays in the markup because the video script needs it to start the video; it is only hidden. */
html body.gulf-hero-live.home-hero-v2 .hv2 .hv2__motion,
html body.gulf-hero-live.home-hero-v2 .hv2 .hv2__motion:not([hidden]){display:none!important}