/* Mockup composition over the existing home video. Scoped to this preview. */
.hv2{--hv-rail:max(clamp(28px,5.4vw,90px),calc((100% - 1400px)/2));position:relative;isolation:isolate;width:100%;min-height:940px;height:clamp(880px,56.25vw,1080px);overflow:hidden;background:#faf7ef;color:#103f40}
.hv2 .hv2__poster,.hv2 .pha__video{position:absolute;inset:0;z-index:-4;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%}
.hv2 .pha__video{z-index:-3;opacity:0;transition:opacity .9s ease}.hv2 .pha__video.is-playing{opacity:1}
.hv2__veil{position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(90deg,rgba(250,247,240,.8) 0%,rgba(250,247,240,.79) 18%,rgba(250,247,240,.77) 31%,rgba(250,247,240,.66) 39%,rgba(250,247,240,.38) 46%,rgba(250,247,240,.1) 54%,rgba(250,247,240,0) 63%),linear-gradient(180deg,rgba(250,247,240,.82) 0%,rgba(250,247,240,.45) 11%,rgba(250,247,240,0) 28%)}
.hv2__palm{position:absolute;z-index:-1;left:-180px;top:20%;width:620px;max-width:none;opacity:.09;pointer-events:none;transform:rotate(-24deg);mask-image:linear-gradient(90deg,#000,transparent 90%)}
.hv2__frame{position:relative;height:100%;padding:50px var(--hv-rail) 270px}
.hv2 .pha__header{position:relative;z-index:5;align-items:flex-start;gap:34px}
.hv2 .pha__brand{width:126px;height:126px;border-radius:0;flex:none;box-shadow:none}

.hv2 .pha__nav{margin-left:auto;gap:28px;align-items:center}
/* Header button retains the reduced width, with 10% more height. */
.hv2 .pha__book{height:52.8px;padding:0 30.4px;gap:11.2px;font-size:11.2px;letter-spacing:.3em;box-shadow:0 10px 23px -12px #06223040}
.hv2 .pha__book .pha__book-shell{width:19.2px;height:17.6px}
.hv2 .pha__book-frame{inset:4px}
.hv2__copy{position:relative;z-index:2;margin-top:40px;width:650px;max-width:54%}






.hv2__shore{position:absolute;z-index:1;inset:auto 0 0;width:100%;height:450px;max-width:none;object-fit:fill;pointer-events:none}
.hv2__features{position:absolute;z-index:3;left:var(--hv-rail);right:var(--hv-rail);bottom:86px;display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin:0;padding:0}
.hv2__features li{display:flex;align-items:center;gap:23px;padding:0 30px;border-right:1px solid #b59b84;list-style:none;margin:0}.hv2__features li:first-child{padding-left:0}.hv2__features li:last-child{padding-right:0;border:0}
.hv2__features svg{width:55px;height:60px;flex:none;fill:none;stroke:#145451;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hv2 .hv2__features h2{margin:0 0 8px;font:600 11px/1.4 "HBS Montserrat",Arial,sans-serif;letter-spacing:.15em;text-transform:uppercase;color:#103f40}
.hv2 .hv2__features p{margin:0;font:400 14px/1.6 "HBS Univers",Arial,sans-serif;letter-spacing:.02em;color:#4c555b}
.hv2__motion{position:absolute;z-index:4;right:28px;bottom:290px;display:grid;place-items:center;width:36px;height:36px;border:1px solid #fffbef88;border-radius:50%;color:#fff;background:#153d4155;cursor:pointer}.hv2__motion svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}.hv2__motion[hidden]{display:none}
.hv2 a:focus-visible,.hv2 button:focus-visible{outline:2px solid #b88055;outline-offset:5px}
@media(max-width:1450px){.hv2{min-height:880px}.hv2 .pha__brand{width:118px;height:118px}.hv2 .pha__book{height:49.28px;padding:0 25.6px;font-size:10.4px}.hv2 .pha__header{gap:28px}.hv2__copy{margin-top:35px;max-width:56%}.hv2__features li{padding:0 22px;gap:16px}.hv2__features svg{width:44px;height:52px}.hv2 .hv2__features h2{font-size:10px}.hv2 .hv2__features p{font-size:13px}}
@media(max-width:1100px){.hv2 .pha__header{gap:22px}.hv2 .pha__nav{gap:22px}.hv2__copy{max-width:64%;margin-top:48px}.hv2__features li{padding:0 16px;gap:12px}.hv2__features svg{width:34px;height:46px}.hv2 .hv2__features h2{font-size:9px;letter-spacing:.1em}.hv2 .hv2__features p{font-size:12px}.hv2__veil{background:linear-gradient(90deg,rgba(250,247,240,.8) 0%,rgba(250,247,240,.77) 30%,rgba(250,247,240,.64) 46%,rgba(250,247,240,.27) 65%,transparent 83%),linear-gradient(180deg,#faf7f0b8,transparent 28%)}}
@media(max-width:900px){.hv2{--hv-rail:24px;height:auto;min-height:960px}.hv2__frame{padding:40px 24px 350px}.hv2 .pha__brand{width:100px;height:100px;border-radius:0}.hv2 .pha__book{height:42.24px;padding:0 16px;gap:8px;font-size:8.8px;letter-spacing:.24em}.hv2 .pha__book .pha__book-shell{width:16px;height:14.4px}.hv2 .pha__book-frame{inset:3px}.hv2 .pha__nav{gap:16px}.hv2__copy{max-width:80%;width:620px;margin-top:48px}.hv2__features{bottom:70px;grid-template-columns:1fr 1fr;gap:30px 0}.hv2__features li{padding:0 28px;gap:20px}.hv2__features li:nth-child(3){padding-left:0}.hv2__features li:nth-child(2){border:0;padding-right:0}.hv2__features svg{width:44px;height:52px}.hv2 .hv2__features h2{font-size:10px}.hv2 .hv2__features p{font-size:13px}.hv2__shore{height:430px}.hv2__motion{bottom:370px;right:24px}}
@media(max-width:600px){.hv2{min-height:1050px}.hv2__frame{padding-top:30px;padding-bottom:400px}.hv2 .pha__brand{width:90px;height:90px}.hv2 .pha__header{gap:20px}.hv2 .pha__nav{gap:12px}.hv2__copy{width:100%;max-width:none;margin-top:70px}.hv2__veil{background:linear-gradient(90deg,rgba(250,247,240,.77),rgba(250,247,240,.68) 57%,rgba(250,247,240,.44)),linear-gradient(180deg,#faf7f088 0%,#faf7f0cc 45%,#faf7f000 77%)}.hv2 .hv2__poster,.hv2 .pha__video{object-position:60% center}.hv2__shore{height:760px;width:200%;left:-50%;object-fit:fill}.hv2__features{bottom:60px;gap:25px 0}.hv2__features li{align-items:flex-start;gap:12px;padding:0 16px;flex-direction:column}.hv2__features svg{width:35px;height:38px}.hv2 .hv2__features h2{font-size:9px;letter-spacing:.1em;margin-bottom:7px}.hv2 .hv2__features p{font-size:12px;line-height:1.5}.hv2__features br{display:none}.hv2__palm{width:430px;left:-210px;top:35%;opacity:.08}.hv2__motion{bottom:355px;width:32px;height:32px}}
@media(max-width:480px){.hv2 .pha__book{width:38.4px;height:42.24px;padding:0;gap:0;font-size:0;letter-spacing:0}.hv2 .pha__book .pha__book-shell{width:17.6px;height:16px}.hv2 .pha__book:hover .pha__book-frame{inset:5px}}
@media(max-width:360px){.hv2{min-height:1090px}.hv2__features{bottom:65px}.hv2__copy{margin-top:65px}}
@media(prefers-reduced-motion:reduce){.hv2 .pha__video,.hv2__motion{display:none}.hv2 *{transition:none!important}}

/* Current homepage wording and responsive typography, in the preview's cream-background palette. */
.hv2 .hv2__eyebrow{margin:0 0 20px;color:#a77351;font:400 12px/1.5 "Univers Next",Arial,sans-serif;letter-spacing:.19em;text-transform:uppercase}
body .hv2 #hv2-title{margin:0;padding:0;font:400 clamp(46px,4.16vw,79px)/1.04 "Libre Baskerville",Georgia,"Times New Roman",serif;letter-spacing:0;text-transform:none;text-shadow:none;color:#103f40;-webkit-text-fill-color:currentColor}
.hv2__title-main{display:block;font:inherit;font-weight:700;letter-spacing:-.015em;white-space:nowrap;color:#103f40}
.hv2__title-accent{display:block;margin:.06em 0 0;font:inherit;font-weight:400;letter-spacing:normal;white-space:nowrap;color:#a77351}
.hv2 .hv2__lead{margin:22px 0 0;max-width:580px;font:400 clamp(18px,1.36vw,24px)/1.5 "Gulf Preview Newsreader",Georgia,serif;letter-spacing:normal;color:#46525a;text-shadow:none}
@media(max-width:900px){
 .hv2 .hv2__eyebrow{font-size:11px;margin-bottom:18px}
 body .hv2 #hv2-title{font-size:clamp(34px,9.4vw,64px)}
 .hv2 .hv2__lead{font-size:19px;max-width:530px;margin-top:20px}
}
@media(max-width:540px){
 .hv2 .hv2__eyebrow{font-size:10px;letter-spacing:.16em}
 .hv2 .hv2__lead{font-size:18px;max-width:350px}
 .hv2 .hv2__lead br{display:none}
}

/* Keep the entire composition in the first screen, including the shoreline highlights. */
.hv2{height:100vh;height:100svh;min-height:0}
.hv2__frame{display:flex;flex-direction:column;gap:clamp(18px,3svh,32px);padding:clamp(20px,4svh,50px) var(--hv-rail) clamp(30px,6svh,70px)}
.hv2 .pha__header,.hv2__copy,.hv2__features{flex-shrink:0}
/* Share the available space above and below the copy to lower it naturally. */
.hv2__copy{margin-top:auto}
.hv2__features{position:relative;left:auto;right:auto;bottom:auto;width:100%;margin-top:auto}
.hv2__shore{height:clamp(320px,48svh,450px)}
.hv2__motion{bottom:clamp(190px,28svh,290px)}
@media(max-width:900px){
 .hv2__frame{padding-top:clamp(20px,4svh,36px);padding-bottom:clamp(30px,5svh,55px)}
 .hv2__shore{height:clamp(440px,65svh,620px)}
 .hv2__features{row-gap:22px}
 .hv2__motion{bottom:clamp(240px,35svh,330px)}
}
@media(max-width:600px){
 .hv2__frame{gap:clamp(18px,4svh,32px);padding-top:clamp(18px,3.5svh,30px);padding-bottom:clamp(60px,9svh,80px)}
 .hv2__shore{height:min(660px,105svh)}
 .hv2__features{row-gap:22px}
 .hv2__features li{flex-direction:row;align-items:flex-start;gap:10px;padding:0 12px}
 .hv2__features svg{width:27px;height:32px}
 .hv2 .hv2__features p{font-size:11.5px;line-height:1.45}
 .hv2 .hv2__features h2{font-size:8.5px;letter-spacing:.08em;margin-bottom:6px}
 .hv2__motion{bottom:clamp(230px,33svh,300px)}
}
@media(max-width:600px) and (max-height:700px){
 .hv2__frame{padding-top:16px;padding-bottom:60px;gap:18px}
 .hv2 .pha__brand{width:68px;height:68px}
 .hv2 .hv2__eyebrow{margin-bottom:14px}
 .hv2 .hv2__lead{margin-top:16px;font-size:17px;line-height:1.45}
 .hv2__features{row-gap:18px}
 .hv2__features li{gap:8px;padding:0 10px}
 .hv2__features svg{width:23px;height:28px}
 .hv2__motion{bottom:220px}
}
@media(max-height:540px) and (min-width:601px){
 .hv2__frame{padding-top:14px;padding-bottom:22px;gap:14px}
 .hv2 .pha__brand{width:56px;height:56px;border-radius:0}
 body .hv2 #hv2-title{font-size:clamp(28px,7svh,38px)}
 .hv2 .hv2__eyebrow{font-size:9px;margin-bottom:10px}
 .hv2 .hv2__lead{font-size:15px;line-height:1.4;margin-top:12px;max-width:520px}
 .hv2__copy{width:650px;max-width:80%}
 .hv2__features{grid-template-columns:repeat(4,1fr);gap:0}
 .hv2__features li{padding:0 12px;gap:10px;flex-direction:row;border-right:1px solid #b59b84}
 .hv2__features li:first-child{padding-left:0}
 .hv2__features li:nth-child(3){padding-left:12px}
 .hv2__features li:last-child{padding-right:0;border:0}
 .hv2__features svg{width:24px;height:32px}
 .hv2 .hv2__features h2{font-size:8px;letter-spacing:.06em;margin-bottom:4px}
 .hv2 .hv2__features p{font-size:10px;line-height:1.35}
 .hv2__shore{width:100%;left:0;height:290px}
 .hv2__motion{bottom:130px;right:20px}
}

/* Warm, opaque sand texture keeps the menu legible as the video changes. */
body.gulf-hero-live .hv2 .pha__menu{
 display:inline-flex;align-items:center;justify-content:center;gap:12px;
 width:auto;min-width:0;height:52.8px;padding:0 20px;
 border:1px solid #d6b995;border-radius:8px;
 background-color:#ecd7ba;
 background-image:var(--sand),linear-gradient(145deg,#f4e6cf,#e2c5a3);
 background-size:220px 220px,180px 180px,100% 100%;background-blend-mode:soft-light,soft-light,normal;
 color:#3b6c6f;font:600 11px/1 "HBS Montserrat",Arial,sans-serif;letter-spacing:.16em;
 -webkit-backdrop-filter:none;backdrop-filter:none;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 5px 18px rgba(20,51,49,.06);
 filter:none;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
body.gulf-hero-live .hv2 .pha__menu-label{
 background:none;color:inherit;-webkit-text-fill-color:currentColor;
 letter-spacing:inherit;margin:0;text-shadow:none;
}
body.gulf-hero-live .hv2 .pha__menu-lines{width:23px;gap:5px;justify-items:start}
body.gulf-hero-live .hv2 .pha__menu-lines i{
 width:100%;height:2px;border-radius:1px;background:rgba(59,108,111,.9);background-image:none;
 box-shadow:none;filter:none;
}
body.gulf-hero-live .hv2 .pha__menu-lines i:nth-child(2){width:70%}
body.gulf-hero-live .hv2 .pha__menu:hover{
 background-color:#f1dfc5;background-image:var(--sand),linear-gradient(145deg,#f8ecd9,#ead0ae);
 border-color:#c9a77e;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 20px rgba(20,51,49,.09);transform:none;
}
body.gulf-hero-live .hv2 .pha__menu:hover .pha__menu-lines i:nth-child(2){width:100%}
body.gulf-hero-live .hv2 .pha__menu:focus-visible{outline:2px solid #3b6c6f;outline-offset:4px}
@media(max-width:1450px){body.gulf-hero-live .hv2 .pha__menu{height:49.28px;padding-inline:18px}}
@media(max-width:900px){body.gulf-hero-live .hv2 .pha__menu{width:44px;min-width:44px;height:44px;padding:0;gap:0;border-radius:7px}body.gulf-hero-live .hv2 .pha__menu-lines{width:22px}}

/* The sand wash rises from the bottom-left and clears before the header. */
.hv2 .hv2__veil{background:radial-gradient(ellipse 72% 105% at 0% 100%,#faf7f0 0%,#faf7f0 46%,rgba(250,247,240,.98) 60%,rgba(250,247,240,.92) 69%,rgba(250,247,240,.68) 78%,rgba(250,247,240,.28) 87%,rgba(250,247,240,.06) 95%,rgba(250,247,240,0) 100%)}
@media(max-width:1100px){.hv2 .hv2__veil{background:radial-gradient(ellipse 92% 105% at 0% 100%,#faf7f0 0%,#faf7f0 46%,rgba(250,247,240,.98) 60%,rgba(250,247,240,.92) 69%,rgba(250,247,240,.68) 78%,rgba(250,247,240,.28) 87%,rgba(250,247,240,.06) 95%,rgba(250,247,240,0) 100%)}}
@media(max-width:600px){.hv2 .hv2__veil{background:radial-gradient(ellipse 145% 94% at 0% 100%,#faf7f0 0%,#faf7f0 46%,rgba(250,247,240,.98) 60%,rgba(250,247,240,.92) 69%,rgba(250,247,240,.68) 78%,rgba(250,247,240,.28) 87%,rgba(250,247,240,.06) 95%,rgba(250,247,240,0) 100%)}}

/* Continue the same surf and palm artwork beyond the hero into the white page. */
.hv2{
 --hv-shore:clamp(320px,48svh,450px);
 --hv-bleed:clamp(110px,calc(var(--hv-shore) * .377),170px);
 --hv-fade:100px;
 overflow:visible;z-index:1;
 clip-path:inset(0 0 calc(-1 * var(--hv-bleed)) 0);
}
.hv2__shore-bleed{
 position:absolute;z-index:1;left:0;right:0;bottom:calc(-1 * var(--hv-bleed));
 height:calc(var(--hv-shore) + var(--hv-bleed));overflow:hidden;pointer-events:none;
 -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - var(--hv-fade)),rgba(0,0,0,.9) calc(100% - var(--hv-fade) * .75),rgba(0,0,0,.5) calc(100% - var(--hv-fade) * .45),rgba(0,0,0,.12) calc(100% - var(--hv-fade) * .18),transparent 100%);
 mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - var(--hv-fade)),rgba(0,0,0,.9) calc(100% - var(--hv-fade) * .75),rgba(0,0,0,.5) calc(100% - var(--hv-fade) * .45),rgba(0,0,0,.12) calc(100% - var(--hv-fade) * .18),transparent 100%);
}
.hv2 .hv2__shore{top:0;bottom:auto;height:calc(var(--hv-shore) * 1.377);object-fit:fill}
@media(max-width:900px){.hv2{--hv-shore:clamp(440px,65svh,620px);--hv-bleed:140px;--hv-fade:130px}}
@media(max-width:600px){.hv2{--hv-shore:min(660px,105svh);--hv-bleed:120px;--hv-fade:120px}}
@media(max-height:540px) and (min-width:601px){.hv2{--hv-shore:290px;--hv-bleed:110px;--hv-fade:100px}}

/* Warm sand background for the section directly beneath this preview hero. */
body.gulf-hero-live .hv2 + #coastal-comfort{background-color:#faf7f0!important}