/* Nyack — look and feel */
:root { --hv-brick : #AC4A38; --hv-brick-dark : #7E3324; --hv-ember : #F1A765; --hv-ember-glow : #FBD5A6; --hv-coast : #1E6F68; --hv-charcoal : #111514; --hv-charcoal-2 : #212827; --hv-charcoal-3 : #2E3735; --hv-cream : #F4F0E2; --hv-cream-2 : #EDE3D5; --hv-ink : #151A1B; --hv-muted : #6E635B; --hv-line : rgba(25,21,19,.12); --hv-gold : #E3C46E; --hv-green-ok : #2E7D51; --hv-radius : 16px; --hv-radius-lg : 26px; --hv-shadow-sm : 0 4px 14px rgba(25,21,19,.08); --hv-shadow : 0 14px 40px rgba(25,21,19,.14); --hv-shadow-lg : 0 30px 70px rgba(25,21,19,.26); --hv-wrap : 1200px; --hv-font : 'Barlow',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --hv-display : 'Oswald','Barlow Condensed',var(--hv-font); --hv-header-h : 76px }
*,*::before,*::after { box-sizing : border-box }
html { scroll-behavior : smooth; scroll-padding-top : 90px; -webkit-text-size-adjust : 100% }
body { margin : 0; font-family : var(--hv-font); color : var(--hv-ink); background : var(--hv-cream); font-size : 17px; line-height : 1.65; overflow-x : hidden; -webkit-font-smoothing : antialiased }
img { max-width : 100%; height : auto; display : block }
a { color : var(--hv-brick); text-decoration : none }
a:hover { color : var(--hv-brick-dark) }
button { font-family : inherit }
h1,h2,h3,h4 { font-family : var(--hv-display); font-weight : 700; line-height : 1.08; margin : 0 0 .5em; letter-spacing : .4px; text-transform : uppercase }
h1 { font-size : clamp(2.15rem,5.4vw,4.15rem) }
h2 { font-size : clamp(1.85rem,3.9vw,3rem) }
h3 { font-size : clamp(1.15rem,1.7vw,1.45rem) }
p { margin : 0 0 1.1em }
.channel { width : min(var(--hv-wrap),92%); margin-inline : auto }
.center-hv { text-align : center }
.sr-only-hv { position : absolute; width : 1px; height : 1px; padding : 0; margin : -1px; overflow : hidden; clip : rect(0,0,0,0); white-space : nowrap; border : 0 }
.gangway-link { position : absolute; left : -9999px; top : 0; background : var(--hv-brick); color : #fff; padding : 12px 20px; z-index : 9999 }
.gangway-link:focus { left : 10px; top : 10px }
:focus-visible { outline : 3px solid var(--hv-ember); outline-offset : 3px }
#bg-fx-hv { position : fixed; inset : 0; z-index : 0; pointer-events : none; overflow : hidden }
#emberCanvas-hv { position : absolute; inset : 0; width : 100%; height : 100%; opacity : .55 }
.orb-hv { position : absolute; border-radius : 50%; filter : blur(70px); opacity : .34; will-change : transform }
.orb-1-hv { width : 520px; height : 520px; background : radial-gradient(circle at 30% 30%,var(--hv-ember),transparent 68%); top : -140px; left : -120px; animation : float1 26s ease-in-out infinite }
.orb-2-hv { width : 640px; height : 640px; background : radial-gradient(circle at 60% 40%,var(--hv-brick),transparent 66%); top : 38%; right : -220px; animation : float2 32s ease-in-out infinite }
.orb-3-hv { width : 420px; height : 420px; background : radial-gradient(circle at 50% 50%,var(--hv-gold),transparent 65%); bottom : -120px; left : 22%; animation : float3 29s ease-in-out infinite }
@keyframes float1 { 0%,100% { transform : translate3d(0,0,0) scale(1) } 50% { transform : translate3d(90px,120px,0) scale(1.16) } }
@keyframes float2 { 0%,100% { transform : translate3d(0,0,0) scale(1.05) } 50% { transform : translate3d(-120px,-90px,0) scale(.9) } }
@keyframes float3 { 0%,100% { transform : translate3d(0,0,0) scale(.95) } 50% { transform : translate3d(70px,-110px,0) scale(1.2) } }
main,header,footer,.gunwale-bar { position : relative; z-index : 1 }
.pull { --hv-bg : var(--hv-brick); --hv-fg : #fff; display : inline-flex; align-items : center; justify-content : center; gap : .6rem; background : var(--hv-bg); color : var(--hv-fg); font-weight : 700; font-size : 1.02rem; padding : 16px 30px; border-radius : 60px; border : 0; cursor : pointer; letter-spacing : .3px; box-shadow : 0 10px 26px rgba(178,58,33,.32); transition : transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s,background .22s; position : relative; overflow : hidden; text-align : center }
.pull:hover { transform : translateY(-3px); box-shadow : 0 18px 40px rgba(178,58,33,.42); color : #fff }
.pull:active { transform : translateY(-1px) }
.pull::after { content : ""; position : absolute; top : 0; left : -60%; width : 40%; height : 100%; background : linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent); transform : skewX(-18deg); animation : sheen 4.5s ease-in-out infinite }
@keyframes sheen { 0%,72% { left : -60% } 88%,100% { left : 135% } }
.btn-ember-hv { --hv-bg : linear-gradient(135deg,var(--hv-ember),var(--hv-brick)); box-shadow : 0 10px 26px rgba(240,128,60,.4) }
.btn-ghost-hv { --hv-bg : transparent; --hv-fg : #fff; border : 2px solid rgba(255,255,255,.6); box-shadow : none }
.btn-ghost-hv:hover { background : rgba(255,255,255,.12); box-shadow : none }
.btn-dark-hv { --hv-bg : var(--hv-charcoal); box-shadow : 0 10px 26px rgba(25,21,19,.3) }
.btn-lg-hv { padding : 19px 38px; font-size : 1.12rem }
.btn-block-hv { display : flex; width : 100% }
.gunwale-bar { background : var(--hv-charcoal); color : #DCCFC2; font-size : .86rem; letter-spacing : .3px }
.gunwale-bar .channel { display : flex; flex-wrap : wrap; gap : 8px 26px; align-items : center; justify-content : space-between; padding : 9px 0 }
.gunwale-bar b { color : #fff }
.gunwale-bar .tb-item-hv { display : inline-flex; align-items : center; gap : 7px }
.dot-live-hv { width : 8px; height : 8px; border-radius : 50%; background : #49C77E; box-shadow : 0 0 0 0 rgba(73,199,126,.7); animation : pulseDot 2s infinite }
@keyframes pulseDot { 70% { box-shadow : 0 0 0 9px rgba(73,199,126,0) } 100% { box-shadow : 0 0 0 0 rgba(73,199,126,0) } }
.wheelhouse { position : sticky; top : 0; z-index : 900; background : rgba(246,240,231,.86); backdrop-filter : blur(14px); -webkit-backdrop-filter : blur(14px); border-bottom : 1px solid var(--hv-line); transition : box-shadow .3s,background .3s }
.wheelhouse.scrolled-hv { box-shadow : 0 8px 30px rgba(25,21,19,.13); background : rgba(246,240,231,.96) }
.wheelhouse .channel { width : min(1360px,94%) }
.navdeck-hv { display : flex; align-items : center; justify-content : space-between; gap : 18px; min-height : var(--hv-header-h) }
.burgee { display : flex; align-items : center; gap : 12px; color : var(--hv-ink); flex : 0 0 auto }
.burgee:hover { color : var(--hv-ink) }
.burgee-glyph { width : 46px; height : 46px; flex : 0 0 auto; filter : drop-shadow(0 4px 8px rgba(178,58,33,.3)) }
.burgee-txt { display : flex; flex-direction : column; line-height : 1.05 }
.burgee-txt strong { font-family : var(--hv-display); font-size : 1.06rem; letter-spacing : .6px; text-transform : uppercase }
.burgee-txt span { font-size : .7rem; letter-spacing : 2.4px; text-transform : uppercase; color : var(--hv-brick); font-weight : 600 }
.navmast { display : flex; align-items : center; gap : 22px; list-style : none; margin : 0; padding : 0 }
.navmast a { color : var(--hv-ink); font-weight : 600; font-size : .92rem; white-space : nowrap; position : relative; padding : 6px 0 }
.navmast a::after { content : ""; position : absolute; left : 0; bottom : 0; height : 2px; width : 0; background : var(--hv-brick); transition : width .28s }
.navmast a:hover::after,.navmast a.active-hv::after { width : 100% }
.nav-cta-hv { display : flex; align-items : center; gap : 14px; flex : 0 0 auto }
.nav-phone-hv { display : flex; flex-direction : column; line-height : 1.1; text-align : right }
.nav-phone-hv small { font-size : .68rem; text-transform : uppercase; letter-spacing : 1.4px; color : var(--hv-muted) }
.nav-phone-hv b { font-family : var(--hv-display); font-size : 1.22rem; color : var(--hv-brick) }
.trihatch { display : none; width : 48px; height : 44px; border : 1px solid var(--hv-line); background : #fff; border-radius : 12px; cursor : pointer; padding : 0; position : relative }
.trihatch span { position : absolute; left : 13px; width : 22px; height : 2px; background : var(--hv-ink); transition : .3s }
.trihatch span:nth-child(1) { top : 15px }
.trihatch span:nth-child(2) { top : 21px }
.trihatch span:nth-child(3) { top : 27px }
.trihatch[aria-expanded="true"] span:nth-child(1) { top : 21px; transform : rotate(45deg) }
.trihatch[aria-expanded="true"] span:nth-child(2) { opacity : 0 }
.trihatch[aria-expanded="true"] span:nth-child(3) { top : 21px; transform : rotate(-45deg) }
.overlook { position : relative; color : #fff; padding : clamp(56px,8vw,104px) 0 clamp(70px,9vw,120px); overflow : hidden; isolation : isolate }
.overlook-veil { position : absolute; inset : 0; z-index : -2 }
.overlook-veil img { width : 100%; height : 100%; object-fit : cover; transform : scale(1.06); animation : kenburns 24s ease-in-out infinite alternate }
@keyframes kenburns { to { transform : scale(1.17) translate3d(-1.5%,-1.5%,0) } }
.overlook::before { content : ""; position : absolute; inset : 0; z-index : -1; background : linear-gradient(100deg,rgba(18,14,12,.95) 0%,rgba(26,18,14,.86) 38%,rgba(181,57,31,.6) 74%,rgba(242,145,63,.42) 100%) }
.overlook-grid { display : grid; grid-template-columns : 1.15fr .85fr; gap : 52px; align-items : center }
.eyebrow-hv { display : inline-flex; align-items : center; gap : 9px; background : rgba(255,255,255,.12); border : 1px solid rgba(255,255,255,.26); color : #fff; padding : 8px 17px; border-radius : 60px; font-size : .79rem; font-weight : 700; letter-spacing : 1.6px; text-transform : uppercase; margin-bottom : 22px; backdrop-filter : blur(6px) }
.overlook h1 { color : #fff; text-shadow : 0 6px 30px rgba(0,0,0,.4) }
.overlook h1 .emberline { color : var(--hv-ember-glow); display : inline-block }
.overlook-sub { font-size : clamp(1.02rem,1.5vw,1.2rem); color : #EADFD4; max-width : 610px }
.overlook-moves { display : flex; flex-wrap : wrap; gap : 14px; margin : 30px 0 26px }
.overlook-vows { display : flex; flex-wrap : wrap; gap : 10px 22px; list-style : none; padding : 0; margin : 0; font-size : .92rem; color : #E6DAD0 }
.overlook-vows li { display : flex; align-items : center; gap : 8px }
.tick-hv { width : 20px; height : 20px; flex : 0 0 auto; border-radius : 50%; background : rgba(73,199,126,.2); display : grid; place-items : center }
.tick-hv svg { width : 12px; height : 12px; stroke : #6BE39C; fill : none; stroke-width : 3 }
.pledge-slip { background : linear-gradient(160deg,rgba(255,255,255,.98),rgba(246,240,231,.94)); color : var(--hv-ink); border-radius : var(--hv-radius-lg); padding : 30px 28px; box-shadow : var(--hv-shadow-lg); border : 1px solid rgba(255,255,255,.6); position : relative; animation : floaty 6.5s ease-in-out infinite }
@keyframes floaty { 0%,100% { transform : translateY(0) } 50% { transform : translateY(-13px) } }
.offer-badge-hv { position : absolute; top : -18px; right : -10px; background : var(--hv-brick); color : #fff; font-family : var(--hv-display); font-size : .82rem; letter-spacing : 1.4px; padding : 9px 16px; border-radius : 40px; box-shadow : 0 8px 20px rgba(178,58,33,.4); text-transform : uppercase; animation : wobble 5s ease-in-out infinite }
@keyframes wobble { 0%,100% { transform : rotate(-3deg) } 50% { transform : rotate(3deg) } }
.offer-price-hv { font-family : var(--hv-display); font-size : clamp(3.4rem,7vw,4.6rem); line-height : 1; color : var(--hv-brick); display : flex; align-items : flex-start; gap : 4px; justify-content : center; margin : 6px 0 2px }
.offer-price-hv sup { font-size : .42em; margin-top : .32em }
.pledge-slip h2 { font-size : 1.32rem; margin-bottom : 4px; text-align : center }
.pledge-slip .offer-kicker-hv { text-align : center; color : var(--hv-muted); font-size : .9rem; margin-bottom : 16px }
.offer-list-hv { list-style : none; margin : 0 0 20px; padding : 0; display : grid; gap : 9px; font-size : .95rem }
.offer-list-hv li { display : flex; gap : 10px; align-items : flex-start }
.offer-list-hv svg { width : 18px; height : 18px; flex : 0 0 auto; margin-top : 3px; stroke : var(--hv-brick); fill : none; stroke-width : 3 }
.offer-fine-hv { font-size : .76rem; color : var(--hv-muted); text-align : center; margin : 12px 0 0; line-height : 1.5 }
.current { background : var(--hv-charcoal-2); color : #CBBDB0; overflow : hidden; padding : 13px 0; border-block : 1px solid rgba(255,255,255,.07) }
.current-run { display : flex; gap : 52px; white-space : nowrap; width : max-content; animation : scrollX 34s linear infinite; font-family : var(--hv-display); letter-spacing : 2px; font-size : .94rem; text-transform : uppercase }
.current-run span { display : inline-flex; align-items : center; gap : 12px }
.current-run b { color : var(--hv-ember) }
@keyframes scrollX { to { transform : translateX(-50%) } }
section { padding : clamp(56px,7vw,100px) 0; position : relative }
.masthead-set { max-width : 760px; margin : 0 auto 52px }
.masthead-set.left-hv { margin-inline : 0 }
.pennant { display : inline-flex; align-items : center; gap : 9px; color : var(--hv-brick); font-weight : 800; letter-spacing : 2.4px; text-transform : uppercase; font-size : .78rem; margin-bottom : 14px }
.pennant::before { content : ""; width : 28px; height : 2px; background : var(--hv-brick) }
.currentline { font-size : 1.06rem; color : var(--hv-muted) }
.driftwood-zone { background : linear-gradient(180deg,rgba(237,227,213,.75),rgba(246,240,231,.4)) }
.nightwater-zone { background : var(--hv-charcoal); color : #DDD1C6 }
.nightwater-zone h2,.nightwater-zone h3 { color : #fff }
.nightwater-zone .currentline { color : #B7A99C }
.nightwater-zone .pennant { color : var(--hv-ember-glow) }
.nightwater-zone .pennant::before { background : var(--hv-ember) }
.sounding-row { display : grid; grid-template-columns : repeat(4,1fr); gap : 22px }
.sounding { background : #fff; border-radius : var(--hv-radius); padding : 26px 20px; text-align : center; box-shadow : var(--hv-shadow-sm); border : 1px solid var(--hv-line); transition : transform .3s,box-shadow .3s }
.sounding:hover { transform : translateY(-7px); box-shadow : var(--hv-shadow) }
.sounding b { display : block; font-family : var(--hv-display); font-size : clamp(2rem,3.6vw,2.9rem); color : var(--hv-brick); line-height : 1 }
.sounding span { font-size : .87rem; color : var(--hv-muted); letter-spacing : .6px }
.svc-grid-hv { display : grid; grid-template-columns : repeat(auto-fit,minmax(295px,1fr)); gap : 26px }
.trade-slip { background : #fff; border-radius : var(--hv-radius-lg); overflow : hidden; box-shadow : var(--hv-shadow-sm); border : 1px solid var(--hv-line); display : flex; flex-direction : column; transition : transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s }
.trade-slip:hover { transform : translateY(-10px); box-shadow : var(--hv-shadow-lg) }
.svc-media-hv { position : relative; aspect-ratio : 16/10; overflow : hidden; background : var(--hv-charcoal-3) }
.svc-media-hv img { width : 100%; height : 100%; object-fit : cover; transition : transform .7s cubic-bezier(.2,.8,.3,1) }
.trade-slip:hover .svc-media-hv img { transform : scale(1.09) }
.svc-media-hv::after { content : ""; position : absolute; inset : 0; background : linear-gradient(180deg,transparent 42%,rgba(20,16,14,.72)) }
.svc-ico-hv { position : absolute; left : 18px; bottom : 16px; z-index : 2; width : 46px; height : 46px; border-radius : 13px; background : var(--hv-brick); display : grid; place-items : center; box-shadow : 0 8px 20px rgba(178,58,33,.45) }
.svc-ico-hv svg { width : 24px; height : 24px; stroke : #fff; fill : none; stroke-width : 1.9; stroke-linecap : round; stroke-linejoin : round }
.svc-body-hv { padding : 24px 24px 26px; display : flex; flex-direction : column; flex : 1 }
.svc-body-hv h3 { margin-bottom : 8px }
.svc-body-hv p { font-size : .95rem; color : var(--hv-muted); margin-bottom : 16px }
.svc-body-hv ul { list-style : none; margin : 0 0 18px; padding : 0; font-size : .9rem; display : grid; gap : 6px }
.svc-body-hv li { display : flex; gap : 9px; align-items : flex-start; color : #4A423C }
.svc-body-hv li::before { content : ""; width : 7px; height : 7px; border-radius : 50%; background : var(--hv-ember); flex : 0 0 auto; margin-top : 8px }
.svc-link-hv { margin-top : auto; font-weight : 700; display : inline-flex; align-items : center; gap : 8px; font-size : .95rem }
.svc-link-hv svg { width : 16px; height : 16px; stroke : currentColor; fill : none; stroke-width : 2.4; transition : transform .3s }
.trade-slip:hover .svc-link-hv svg { transform : translateX(5px) }
.tide-grid { display : grid; grid-template-columns : 1fr 1fr; gap : 52px; align-items : center }
.tide-list { display : grid; gap : 14px; margin : 0; padding : 0; list-style : none }
.tide-list li { display : flex; gap : 15px; background : rgba(255,255,255,.05); border : 1px solid rgba(255,255,255,.1); border-radius : 14px; padding : 16px 18px; align-items : flex-start; transition : transform .3s,border-color .3s,background .3s }
.tide-list li:hover { transform : translateX(7px); border-color : rgba(240,128,60,.55); background : rgba(240,128,60,.08) }
.tide-list .wihv { width : 38px; height : 38px; flex : 0 0 auto; border-radius : 11px; background : rgba(240,128,60,.16); display : grid; place-items : center }
.tide-list .wihv svg { width : 20px; height : 20px; stroke : var(--hv-ember-glow); fill : none; stroke-width : 2; stroke-linecap : round; stroke-linejoin : round }
.tide-list b { display : block; color : #fff; font-family : var(--hv-display); letter-spacing : .5px; font-size : 1.02rem; text-transform : uppercase }
.tide-list span { font-size : .92rem; color : #B3A599 }
.tide-photo { position : relative; border-radius : var(--hv-radius-lg); overflow : hidden; box-shadow : var(--hv-shadow-lg) }
.tide-photo img { width : 100%; aspect-ratio : 4/5; object-fit : cover }
.tide-note { position : absolute; left : 20px; bottom : 20px; right : 20px; background : rgba(25,21,19,.82); backdrop-filter : blur(9px); border : 1px solid rgba(255,255,255,.14); border-radius : 16px; padding : 16px 18px; color : #fff }
.tide-note b { font-family : var(--hv-display); display : block; color : var(--hv-ember-glow); letter-spacing : 1px }
.tide-note span { font-size : .88rem; color : #C7B9AC }
.reaches { display : grid; grid-template-columns : repeat(4,1fr); gap : 24px; counter-reset : step; position : relative }
.reach { background : #fff; border-radius : var(--hv-radius); padding : 34px 24px 26px; box-shadow : var(--hv-shadow-sm); border : 1px solid var(--hv-line); position : relative; transition : transform .35s,box-shadow .35s }
.reach:hover { transform : translateY(-8px); box-shadow : var(--hv-shadow) }
.step-n-hv { position : absolute; top : -20px; left : 24px; width : 44px; height : 44px; border-radius : 14px; background : linear-gradient(140deg,var(--hv-ember),var(--hv-brick)); color : #fff; font-family : var(--hv-display); font-size : 1.3rem; display : grid; place-items : center; box-shadow : 0 10px 22px rgba(178,58,33,.35) }
.reach h3 { font-size : 1.12rem; margin-top : 8px }
.reach p { font-size : .93rem; color : var(--hv-muted); margin : 0 }
.lantern-wall { display : grid; grid-template-columns : repeat(4,1fr); gap : 16px }
.lantern-slide { position : relative; border-radius : 18px; overflow : hidden; box-shadow : var(--hv-shadow-sm); aspect-ratio : 1; background : var(--hv-charcoal-3) }
.lantern-slide:nth-child(1),.lantern-slide:nth-child(6) { grid-row : span 2; aspect-ratio : 1/2.06 }
.lantern-slide img { width : 100%; height : 100%; object-fit : cover; transition : transform .8s cubic-bezier(.2,.8,.3,1) }
.lantern-slide:hover img { transform : scale(1.1) }
.lantern-slide figcaption { position : absolute; inset : auto 0 0 0; padding : 34px 16px 14px; background : linear-gradient(transparent,rgba(20,16,14,.86)); color : #fff; font-size : .85rem; font-weight : 600; transform : translateY(6px); opacity : 0; transition : .35s }
.lantern-slide:hover figcaption { transform : translateY(0); opacity : 1 }
.reviews-hv { display : grid; grid-template-columns : repeat(3,1fr); gap : 24px }
.review-hv { background : #fff; border-radius : var(--hv-radius); padding : 28px 26px; box-shadow : var(--hv-shadow-sm); border : 1px solid var(--hv-line); position : relative; transition : transform .35s,box-shadow .35s }
.review-hv:hover { transform : translateY(-8px); box-shadow : var(--hv-shadow) }
.review-hv .quote-hv { position : absolute; top : 16px; right : 22px; font-family : var(--hv-display); font-size : 4.2rem; color : rgba(178,58,33,.13); line-height : 1 }
.stars-hv { display : flex; gap : 3px; margin-bottom : 12px }
.stars-hv svg { width : 18px; height : 18px; fill : var(--hv-gold) }
.review-hv p { font-size : .98rem; color : #4A423C }
.review-hv footer { display : flex; align-items : center; gap : 12px; margin-top : 16px; border-top : 1px solid var(--hv-line); padding-top : 14px }
.avatar-hv { width : 42px; height : 42px; border-radius : 50%; background : linear-gradient(140deg,var(--hv-brick),var(--hv-ember)); color : #fff; display : grid; place-items : center; font-family : var(--hv-display); font-size : 1.05rem; flex : 0 0 auto }
.review-hv footer b { display : block; font-size : .95rem }
.review-hv footer span { font-size : .8rem; color : var(--hv-muted) }
.circuit-list { display : flex; flex-wrap : wrap; gap : 11px; justify-content : center; list-style : none; padding : 0; margin : 0 0 30px }
.circuit-list li { background : #fff; border : 1px solid var(--hv-line); border-radius : 60px; padding : 10px 20px; font-size : .92rem; font-weight : 600; box-shadow : var(--hv-shadow-sm); transition : transform .25s,background .25s,color .25s,border-color .25s }
.circuit-list li:hover { transform : translateY(-4px); background : var(--hv-brick); color : #fff; border-color : var(--hv-brick) }
.wharf-set { max-width : 880px; margin-inline : auto }
.wharf-set details { background : #fff; border : 1px solid var(--hv-line); border-radius : 14px; margin-bottom : 12px; box-shadow : var(--hv-shadow-sm); overflow : hidden; transition : box-shadow .3s }
.wharf-set details[open] { box-shadow : var(--hv-shadow) }
.wharf-set summary { cursor : pointer; list-style : none; padding : 20px 58px 20px 22px; font-weight : 700; font-size : 1.03rem; position : relative }
.wharf-set summary::-webkit-details-marker { display : none }
.wharf-set summary::after { content : ""; position : absolute; right : 22px; top : 50%; width : 12px; height : 12px; border-right : 2.6px solid var(--hv-brick); border-bottom : 2.6px solid var(--hv-brick); transform : translateY(-70%) rotate(45deg); transition : transform .3s }
.wharf-set details[open] summary::after { transform : translateY(-25%) rotate(-135deg) }
.wharf-set .wharf-open { padding : 0 22px 20px; color : var(--hv-muted); font-size : .97rem }
.wharf-set .wharf-open p:last-child { margin-bottom : 0 }
.foghorn-band { position : relative; color : #fff; text-align : center; overflow : hidden; isolation : isolate }
.foghorn-band .foghorn-veil { position : absolute; inset : 0; z-index : -2 }
.foghorn-band .foghorn-veil img { width : 100%; height : 100%; object-fit : cover }
.foghorn-band::before { content : ""; position : absolute; inset : 0; z-index : -1; background : linear-gradient(120deg,rgba(140,43,22,.94),rgba(25,21,19,.9)) }
.foghorn-band h2 { color : #fff; font-size : clamp(2rem,4.4vw,3.3rem) }
.foghorn-band p { color : #EFE3D8; max-width : 660px; margin-inline : auto; font-size : 1.06rem }
.foghorn-moves { display : flex; gap : 15px; justify-content : center; flex-wrap : wrap; margin-top : 28px }
.foghorn-line { display : block; font-family : var(--hv-display); font-size : clamp(2rem,5vw,2.9rem); color : #fff; margin-top : 20px; letter-spacing : 1px }
.foghorn-line:hover { color : var(--hv-ember-glow) }
.mooring-grid { display : grid; grid-template-columns : 1fr 1fr; gap : 44px; align-items : start }
.mooring-grid>* { min-width : 0 }
.mooring-rows a,.ballast address a { overflow-wrap : anywhere }
.form-card-hv { background : #fff; border-radius : var(--hv-radius-lg); padding : 34px 32px; box-shadow : var(--hv-shadow); border : 1px solid var(--hv-line) }
.field-hv { margin-bottom : 16px }
.field-hv label { display : block; font-weight : 700; font-size : .86rem; margin-bottom : 7px; letter-spacing : .4px }
.field-hv input,.field-hv select,.field-hv textarea { width : 100%; padding : 14px 16px; border : 1.6px solid var(--hv-line); border-radius : 12px; font-size : 1rem; font-family : inherit; background : #FBF7F0; color : var(--hv-ink); transition : border-color .25s,box-shadow .25s,background .25s }
.field-hv input:focus,.field-hv select:focus,.field-hv textarea:focus { outline : none; border-color : var(--hv-brick); background : #fff; box-shadow : 0 0 0 4px rgba(178,58,33,.12) }
.field-hv textarea { resize : vertical; min-height : 110px }
.two-col-hv { display : grid; grid-template-columns : 1fr 1fr; gap : 16px }
.form-note-hv { font-size : .79rem; color : var(--hv-muted); margin-top : 12px; text-align : center }
.form-msg-hv { display : none; padding : 14px 16px; border-radius : 12px; font-size : .94rem; margin-bottom : 16px }
.form-msg-hv.okhv { display : block; background : rgba(46,125,81,.1); color : #2E7D51; border : 1px solid rgba(46,125,81,.3) }
.form-msg-hv.err-hv { display : block; background : rgba(178,58,33,.1); color : var(--hv-brick-dark); border : 1px solid rgba(178,58,33,.3) }
.mooring-rows { list-style : none; padding : 0; margin : 0 0 26px; display : grid; gap : 16px }
.mooring-rows li { display : flex; gap : 16px; align-items : flex-start }
.info-ico-hv { width : 48px; height : 48px; flex : 0 0 auto; border-radius : 14px; background : rgba(178,58,33,.1); display : grid; place-items : center }
.info-ico-hv svg { width : 22px; height : 22px; stroke : var(--hv-brick); fill : none; stroke-width : 1.9; stroke-linecap : round; stroke-linejoin : round }
.mooring-rows b { display : block; font-family : var(--hv-display); letter-spacing : .6px; text-transform : uppercase; font-size : .95rem }
.mooring-rows a,.mooring-rows span { color : var(--hv-muted); font-size : 1rem }
.mooring-rows a:hover { color : var(--hv-brick) }
.map-berth-hv { border-radius : var(--hv-radius); overflow : hidden; box-shadow : var(--hv-shadow-sm); border : 1px solid var(--hv-line); line-height : 0 }
.map-berth-hv iframe { width : 100%; height : 290px; border : 0 }
.tidetable { background : #fff; border : 1px solid var(--hv-line); border-radius : var(--hv-radius); padding : 22px 24px; box-shadow : var(--hv-shadow-sm); margin-bottom : 26px }
.tidetable dl { display : grid; grid-template-columns : auto 1fr; gap : 8px 18px; margin : 0; font-size : .95rem }
.tidetable dt { font-weight : 700 }
.tidetable dd { margin : 0; text-align : right; color : var(--hv-muted) }
.ballast { background : var(--hv-charcoal); color : #A99B8E; padding : 70px 0 0; font-size : .95rem }
.foot-grid-hv { display : grid; grid-template-columns : 1.5fr 1fr 1fr 1.2fr; gap : 38px; padding-bottom : 44px }
.ballast h4 { color : #fff; font-size : 1rem; letter-spacing : 1.6px; margin-bottom : 18px }
.ballast a { color : #A99B8E }
.ballast a:hover { color : var(--hv-ember-glow) }
.foot-links-hv { list-style : none; padding : 0; margin : 0; display : grid; gap : 10px }
.foot-brand-hv { display : flex; align-items : center; gap : 12px; margin-bottom : 16px; color : #fff }
.foot-brand-hv strong { font-family : var(--hv-display); font-size : 1.1rem; letter-spacing : .6px; text-transform : uppercase }
.foot-bottom-hv { border-top : 1px solid rgba(255,255,255,.1); padding : 20px 0; display : flex; flex-wrap : wrap; gap : 10px 24px; justify-content : space-between; font-size : .84rem }
.beacon-dial { position : fixed; right : 22px; bottom : 26px; z-index : 950; display : inline-flex; align-items : center; gap : 12px; background : linear-gradient(135deg,var(--hv-brick),var(--hv-brick-dark)); color : #fff; padding : 15px 24px 15px 17px; border-radius : 60px; font-weight : 800; letter-spacing : .4px; box-shadow : 0 16px 40px rgba(178,58,33,.5); transition : transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s }
.beacon-dial:hover { transform : scale(1.06) translateY(-3px); color : #fff; box-shadow : 0 22px 52px rgba(178,58,33,.6) }
.beacon-dial .fc-ring-hv { position : relative; width : 40px; height : 40px; border-radius : 50%; background : rgba(255,255,255,.18); display : grid; place-items : center; flex : 0 0 auto }
.beacon-dial .fc-ring-hv::before,.beacon-dial .fc-ring-hv::after { content : ""; position : absolute; inset : 0; border-radius : 50%; border : 2px solid rgba(255,255,255,.6); animation : ring 2.6s ease-out infinite }
.beacon-dial .fc-ring-hv::after { animation-delay : 1.3s }
@keyframes ring { 0% { transform : scale(1); opacity : .85 } 100% { transform : scale(2.1); opacity : 0 } }
.beacon-dial svg { width : 20px; height : 20px; stroke : #fff; fill : none; stroke-width : 2; animation : shake 3.2s ease-in-out infinite }
@keyframes shake { 0%,86%,100% { transform : rotate(0) } 90% { transform : rotate(-14deg) } 94% { transform : rotate(14deg) } }
.beacon-dial .fc-txt-hv { display : flex; flex-direction : column; line-height : 1.15 }
.beacon-dial .fc-txt-hv small { font-size : .66rem; text-transform : uppercase; letter-spacing : 1.4px; opacity : .85; font-weight : 600 }
.beacon-dial .fc-txt-hv b { font-family : var(--hv-display); font-size : 1.12rem; letter-spacing : .6px }
.deck-bar { display : none; position : fixed; left : 0; right : 0; bottom : 0; z-index : 960; background : rgba(25,21,19,.97); backdrop-filter : blur(12px); border-top : 1px solid rgba(255,255,255,.12); padding : 9px 10px calc(9px + env(safe-area-inset-bottom)) }
.deck-bar ul { list-style : none; margin : 0; padding : 0; display : grid; grid-template-columns : 1.4fr 1fr 1fr; gap : 8px }
.deck-bar a { display : flex; flex-direction : column; align-items : center; justify-content : center; gap : 3px; padding : 9px 4px; border-radius : 12px; color : #E8DCD2; font-size : .72rem; font-weight : 700; letter-spacing : .4px; text-transform : uppercase }
.deck-bar a svg { width : 19px; height : 19px; stroke : currentColor; fill : none; stroke-width : 2; stroke-linecap : round; stroke-linejoin : round }
.deck-bar .mb-call-hv { background : linear-gradient(135deg,var(--hv-brick),var(--hv-brick-dark)); color : #fff; box-shadow : 0 6px 18px rgba(178,58,33,.5); animation : mbPulse 2.4s ease-in-out infinite }
@keyframes mbPulse { 0%,100% { box-shadow : 0 6px 18px rgba(178,58,33,.5) } 50% { box-shadow : 0 6px 26px rgba(240,128,60,.85) } }
.crowsnest { position : fixed; right : 26px; bottom : 104px; z-index : 940; width : 46px; height : 46px; border-radius : 50%; background : var(--hv-charcoal); color : #fff; display : grid; place-items : center; box-shadow : var(--hv-shadow); opacity : 0; visibility : hidden; transform : translateY(10px); transition : .3s; border : 0; cursor : pointer }
.crowsnest.show-hv { opacity : 1; visibility : visible; transform : translateY(0) }
.crowsnest svg { width : 18px; height : 18px; stroke : #fff; fill : none; stroke-width : 2.6 }
.surfacing { opacity : 0; transform : translateY(34px); transition : opacity .8s cubic-bezier(.2,.8,.3,1),transform .8s cubic-bezier(.2,.8,.3,1) }
.surfacing.inhv { opacity : 1; transform : none }
.surfacing.rhv1 { transition-delay : .1s }
.surfacing.rhv2 { transition-delay : .2s }
.surfacing.rhv3 { transition-delay : .3s }
.surfacing.rhv4 { transition-delay : .4s }
.surfacing.rhv5 { transition-delay : .5s }
.surfacing.rhv6 { transition-delay : .6s }
@media (max-width:1080px) { .overlook-grid { grid-template-columns : 1fr; gap : 44px } .pledge-slip { max-width : 520px } .sounding-row { grid-template-columns : repeat(2,1fr) } .reaches { grid-template-columns : repeat(2,1fr); row-gap : 38px } .reviews-hv { grid-template-columns : 1fr } .foot-grid-hv { grid-template-columns : 1fr 1fr } .lantern-wall { grid-template-columns : repeat(3,1fr) } }
@media (max-width:1440px) { .navmast { gap : 18px } .navmast a { font-size : .9rem } .nav-phone-hv { display : none } }
@media (max-width:1240px) { .navmast { gap : 15px } .navmast a { font-size : .86rem } .navmast li:has(.nav-opt-hv) { display : none } .nav-opt-hv { display : none } }
@media (max-width:1150px) { .navmast { position : fixed; inset : var(--hv-header-h) 0 auto 0; background : var(--hv-cream); flex-direction : column; align-items : stretch; gap : 0; padding : 10px 6% 26px; border-bottom : 1px solid var(--hv-line); box-shadow : var(--hv-shadow); transform : translateY(-135%); transition : transform .4s cubic-bezier(.2,.8,.3,1); max-height : calc(100vh - var(--hv-header-h)); overflow : auto } .navmast.open-hv { transform : translateY(0) } .navmast li:has(.nav-opt-hv) { display : block } .nav-opt-hv { display : block } .navmast li { border-bottom : 1px solid var(--hv-line) } .navmast a { display : block; padding : 15px 0; font-size : 1.05rem } .trihatch { display : block } .nav-phone-hv { display : none } .nav-cta-hv .pull { padding : 12px 20px; font-size : .92rem } .tide-grid,.mooring-grid { grid-template-columns : 1fr; gap : 34px } .beacon-dial { display : none } .deck-bar { display : block } body { padding-bottom : 74px } .crowsnest { bottom : 88px; right : 16px } }
@media (max-width:640px) { body { font-size : 16px } .gunwale-bar .channel { justify-content : center; text-align : center; font-size : .8rem; gap : 6px 16px; padding : 7px 0 } .gunwale-bar .tb-hide-hv,.gunwale-bar .tb-news-hv { display : none } .nav-call-txt-hv { display : none } .nav-cta-hv .pull { padding : 12px 14px; border-radius : 50% } .nav-cta-hv { gap : 9px } .sounding-row,.reaches { grid-template-columns : 1fr 1fr; gap : 14px } .lantern-wall { grid-template-columns : repeat(2,1fr); gap : 10px } .lantern-slide:nth-child(1),.lantern-slide:nth-child(6) { grid-row : span 1; aspect-ratio : 1 } .two-col-hv { grid-template-columns : 1fr } .form-card-hv { padding : 26px 20px } .foot-grid-hv { grid-template-columns : 1fr; gap : 30px } .overlook-moves .pull { flex : 1 1 100% } .navdeck-hv { gap : 8px } .burgee { min-width : 0; gap : 9px } .burgee-glyph { width : 38px; height : 38px } .burgee-txt { min-width : 0 } .burgee-txt span { font-size : .56rem; letter-spacing : 1.2px; white-space : nowrap; overflow : hidden; text-overflow : ellipsis } .burgee-txt strong { font-size : .85rem; white-space : nowrap; overflow : hidden; text-overflow : ellipsis } .sounding-row .sounding { padding : 20px 12px } .svc-body-hv,.form-card-hv { overflow-wrap : break-word } }
@media (max-width:400px) { .channel { width : 94% } .reaches { grid-template-columns : 1fr; row-gap : 34px } .sounding-row { gap : 10px } .burgee-glyph { width : 34px; height : 34px } .burgee-txt strong { font-size : .8rem } .nav-cta-hv .pull { padding : 11px 13px } .trihatch { width : 44px } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration : .001ms!important; animation-iteration-count : 1!important; transition-duration : .001ms!important } html { scroll-behavior : auto } .surfacing { opacity : 1; transform : none } }
@media print { .wheelhouse,.beacon-dial,.deck-bar,.crowsnest,#bg-fx-hv,.current { display : none!important } body { background : #fff; color : #000 } }
.offer-free-hv { font-family : var(--hv-display); font-size : clamp(3rem,6.4vw,4.3rem); line-height : 1; color : var(--hv-brick); text-align : center; letter-spacing : 2px; margin : 8px 0 2px }
.offer-free-hv small { display : block; font-family : var(--hv-font); font-size : .31em; letter-spacing : 3.4px; color : var(--hv-coast); font-weight : 800; margin-top : 6px }
.pledge-slip .offer-list-hv svg { stroke : var(--hv-coast) }
.badge-free-hv { background : var(--hv-coast); box-shadow : 0 8px 20px rgba(30,111,104,.42) }
.tick-coast-hv { background : rgba(30,111,104,.22) }
.tick-coast-hv svg { stroke : #7FD8CE }
.tideline-note { display : flex; gap : 12px; align-items : flex-start; background : rgba(242,145,63,.1); border : 1px solid rgba(242,145,63,.34); border-radius : 14px; padding : 16px 18px; margin-top : 24px }
.tideline-note svg { width : 22px; height : 22px; flex : 0 0 auto; margin-top : 2px; stroke : var(--hv-brick); fill : none; stroke-width : 2; stroke-linecap : round; stroke-linejoin : round }
.tideline-note p { margin : 0; font-size : .94rem }
.galley-card { background : linear-gradient(158deg,var(--hv-charcoal) 0%,var(--hv-charcoal-2) 55%,#28302E 100%); color : #DCCFC3; border-radius : var(--hv-radius-lg); padding : 38px 34px; box-shadow : var(--hv-shadow-lg); border : 1px solid rgba(255,255,255,.09); position : relative; overflow : hidden }
.galley-card::before { content : ""; position : absolute; top : -90px; right : -70px; width : 260px; height : 260px; border-radius : 50%; background : radial-gradient(circle,rgba(242,145,63,.34),transparent 68%); filter : blur(14px); animation : float1 18s ease-in-out infinite }
.galley-card>* { position : relative; z-index : 1 }
.call-kicker-hv { display : inline-flex; align-items : center; gap : 9px; color : var(--hv-ember-glow); font-weight : 800; letter-spacing : 2.4px; text-transform : uppercase; font-size : .74rem; margin-bottom : 12px }
.call-kicker-hv::before { content : ""; width : 26px; height : 2px; background : var(--hv-ember) }
.galley-card h3 { color : #fff; font-size : clamp(1.4rem,2.4vw,1.9rem); margin-bottom : 10px }
.galley-card p { color : #B5A79A; font-size : .99rem }
.call-number-hv { display : block; font-family : var(--hv-display); font-size : clamp(2.1rem,4.6vw,3rem); color : #fff; letter-spacing : 1px; margin : 20px 0 18px; text-align : center; transition : color .25s,transform .25s }
.call-number-hv:hover { color : var(--hv-ember-glow); transform : scale(1.03) }
.call-hours-hv { text-align : center; font-size : .92rem; margin : 18px 0 0; color : #B5A79A }
.call-hours-hv strong { color : #fff }
.call-expect-hv { margin-top : 26px; padding-top : 22px; border-top : 1px solid rgba(255,255,255,.12) }
.call-expect-hv h4 { color : #fff; font-size : .92rem; letter-spacing : 1.8px; margin-bottom : 14px }
.call-expect-hv ol { margin : 0; padding : 0; list-style : none; counter-reset : ce; display : grid; gap : 12px }
.call-expect-hv li { counter-increment : ce; display : flex; gap : 13px; align-items : flex-start; font-size : .94rem; color : #C3B5A8 }
.call-expect-hv li::before { content : counter(ce); flex : 0 0 auto; width : 26px; height : 26px; border-radius : 8px; background : rgba(242,145,63,.18); color : var(--hv-ember-glow); font-family : var(--hv-display); font-size : .9rem; display : grid; place-items : center; margin-top : 1px }
@media (max-width:640px) { .galley-card { padding : 28px 22px } }
.review-hv p { font-size : .95rem; line-height : 1.62 }
.review-hv footer b { font-size : .92rem; line-height : 1.3 }
.review-hv .avatar-hv svg { display : block }
@media (max-width:1080px) { .reviews-hv { gap : 22px } }
.deck-bar ul.mb-two-hv { grid-template-columns : 1.7fr 1fr }
@media (max-width : 392px) { .burgee { flex : 1 1 auto; min-width : 0; overflow : hidden } .burgee-txt strong, .burgee-txt span { white-space : nowrap; overflow : hidden; text-overflow : ellipsis; display : block } .pull-ember-hv.wheelhouse-dial { padding : 9px 12px } }
.deck-bar ul { grid-template-columns : 1fr }
.reaches > * { min-width : 0 }