/* Approved waterfront reference: shared navy masthead and homepage composition. */
.utility{background:#0b335b;font-size:11px;letter-spacing:.18em}
.utility .container,.site-header .container,.reference-hero .container,.reference-benefits .container,.reference-next .container{width:min(87%,1336px)}
.utility-inner{height:37px}.utility-sep{color:#cbd9e6;padding:0 17px}
.utility a{color:#dce8f8}.site-header{height:102px;background:linear-gradient(100deg,#031b35,#0b2445);box-shadow:none;color:#fff}
.head-inner{gap:40px}.brand{background:#fff;position:relative;align-self:flex-start;width:230px;height:108px;overflow:visible;z-index:1}
.brand img{width:210px;height:108px;max-height:none;object-fit:cover}
.site-nav{gap:40px}.site-nav>a{font-size:13px;font-weight:700;letter-spacing:.025em}.site-nav>a:after{background:#2a93ff;bottom:0}
.head-cta{font-size:12px;min-height:49px;padding:15px 25px;gap:30px;letter-spacing:.08em;background:#0879f7}
.button-blue{background:#0879f7}.button{letter-spacing:.08em}.menu-toggle{background:transparent;border-color:#53708e}.menu-toggle span{background:#fff}
.reference-hero{min-height:430px;background:linear-gradient(180deg,#0b4e85 0%,#26394f 52%,#102d47 66%,#17446b 68%,#052c50 100%)}
.reference-hero .hero-image{inset:0;transform:none;background:url('assets/port-waterfront.jpg') right center/cover no-repeat}
.reference-hero .hero-scrim{background:linear-gradient(90deg,rgba(0,47,94,.74),rgba(4,39,77,.33) 36%,rgba(1,28,58,.04) 66%,transparent),linear-gradient(0deg,rgba(0,27,57,.2),transparent 55%)}
.reference-hero .hero-inner{min-height:430px;padding:40px 0 27px;justify-content:center}
.reference-hero .hero-top-label{font-size:13px;font-weight:500;letter-spacing:.32em;margin-bottom:16px;color:#e2edfa;gap:15px}
.reference-hero .hero-top-label i{width:44px;background:#248df3;height:2px}
.reference-hero h1{font-size:clamp(100px,8.35vw,130px);line-height:.8;letter-spacing:-.015em;margin:0 0 17px}
.reference-hero h1>span{color:#7db7fc}.reference-hero p{font-size:20px;line-height:1.4;max-width:485px;margin:0 0 23px;font-weight:500;color:#f2f6ff}
.reference-hero .hero-actions{gap:19px}.reference-hero .button{min-height:48px;padding:14px 27px;font-size:11px;gap:34px}
.reference-hero .button-outline{min-width:210px;justify-content:space-between;background:rgba(5,27,51,.24);border-color:#c9d7e4}
.reference-benefits{background:#e9eef4;color:#071d36;border-bottom:1px solid #d1dae4}
.reference-benefit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));min-height:122px;align-items:center;padding:15px 0}
.reference-benefit{text-align:center;position:relative;padding:0 10px;min-width:0}
.reference-benefit+.reference-benefit:before{content:'';position:absolute;left:0;top:7px;bottom:5px;width:1px;background:#b7c4d2}
.reference-benefit svg{display:block;margin:0 auto 3px;width:38px;height:38px;stroke-width:2.2}
.reference-benefit h2{font:800 13px/1.3 'DM Sans',Arial,sans-serif;letter-spacing:.13em;margin:0 0 3px}
.reference-benefit p{font-size:12px;line-height:1.5;margin:0;color:#304963}
.reference-next{background:linear-gradient(105deg,#031a32,#02172e);color:white;padding:33px 0 30px}
.reference-next-grid{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:45px;min-height:108px}
.reference-next .eyebrow{font-size:9px;letter-spacing:.28em;color:#dce8f7;margin-bottom:17px;display:flex;align-items:center;gap:14px}
.reference-next .eyebrow:before{content:'';width:44px;height:2px;background:#218df5;flex:none}
.reference-next h2{font:900 clamp(44px,5.2vw,80px)/.95 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.01em;margin:0;white-space:nowrap}
.reference-next h2 span{color:#7eb8fc}.reference-next-copy{border-left:1px solid #516980;padding-left:48px}
.reference-next-copy p{font-size:14px;line-height:1.55;margin:0 0 12px;color:#ecf2fb}
.reference-next-copy .button{min-height:41px;padding:11px 22px;font-size:10px;gap:28px}
.reference-ready{display:block;font-size:8px;letter-spacing:.28em;color:#c1d1e2;margin-top:8px}
@media(min-width:1100px){.reference-hero .hero-image{left:32%;background-position:right center;mask-image:linear-gradient(90deg,transparent,#000 19%)}.reference-hero{background-image:linear-gradient(90deg,rgba(0,55,111,.35),rgba(6,35,64,.02)),url('assets/hero-port.jpg');background-size:cover;background-position:center 52%}}
@media(max-width:1100px){.site-nav{gap:22px}.head-inner{gap:24px}.brand{width:190px}.reference-next-grid{gap:28px}.reference-next-copy{padding-left:30px}.reference-next h2{font-size:57px}.reference-hero .hero-image{background-position:65% center}.reference-hero .hero-scrim{background:linear-gradient(90deg,rgba(0,36,74,.8),rgba(0,36,74,.38) 52%,rgba(0,36,74,.03))}}
@media(max-width:820px){.site-header{height:90px}.brand{width:160px;height:94px}.brand img{width:144px;height:94px}.site-nav{color:#102943;gap:0}.site-nav.open{display:flex}.site-nav>a{padding:15px 6px}.site-nav .nav-phone-mobile{color:#0c6fd7}.head-cta{font-size:10px;gap:20px}.reference-hero .hero-inner{padding-top:44px;padding-bottom:36px}.reference-hero h1{font-size:106px}.reference-hero p{font-size:18px}.reference-benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:8px 0;gap:0}.reference-benefit{padding:15px 10px}.reference-benefit:nth-child(3):before{display:none}.reference-benefit:nth-child(-n+2){border-bottom:1px solid #c2ceda}.reference-next-grid{grid-template-columns:1fr;gap:25px}.reference-next h2{font-size:68px}.reference-next-copy{padding:20px 0 0;border-left:0;border-top:1px solid #516980}.reference-next-copy p{font-size:15px}.reference-next{padding:36px 0}}
@media(max-width:600px){.utility .container,.site-header .container,.reference-hero .container,.reference-benefits .container,.reference-next .container{width:calc(100% - 36px)}.utility{font-size:9px;letter-spacing:.05em}.utility-inner{height:32px}.utility-sep{padding:0 6px}.site-header{height:88px}.brand{width:150px;height:92px}.brand img{width:140px;height:91px}.reference-hero,.reference-hero .hero-inner{min-height:550px}.reference-hero .hero-inner{padding:58px 0 30px;justify-content:flex-end}.reference-hero .hero-image{background-position:62% center}.reference-hero .hero-scrim{background:linear-gradient(180deg,rgba(4,30,58,.12),rgba(0,28,58,.62) 43%,rgba(0,25,53,.96) 100%)}.reference-hero .hero-top-label{font-size:10px;letter-spacing:.2em;margin-bottom:20px;gap:10px}.reference-hero .hero-top-label i{width:28px}.reference-hero h1{font-size:clamp(84px,22vw,126px);line-height:.83;margin-bottom:20px}.reference-hero p{font-size:16px;max-width:330px;margin-bottom:23px}.reference-hero .hero-actions{display:grid;grid-template-columns:1fr;gap:12px;width:100%}.reference-hero .hero-actions .button{justify-content:space-between;min-height:50px;font-size:11px;padding:14px 18px}.reference-benefit h2{font-size:10px;letter-spacing:.08em}.reference-benefit p{font-size:11px;line-height:1.45}.reference-benefit svg{width:33px;height:33px;margin-bottom:7px}.reference-next h2{font-size:clamp(38px,10.8vw,65px);white-space:normal}.reference-next .eyebrow{font-size:8px;letter-spacing:.19em;margin-bottom:15px}.reference-next .eyebrow:before{width:28px}.reference-next-copy{padding-top:20px}.reference-next-copy br{display:none}.reference-ready{letter-spacing:.2em}.reference-next{padding:32px 0}}
@media(max-width:360px){.utility .container,.site-header .container,.reference-hero .container,.reference-benefits .container,.reference-next .container{width:calc(100% - 30px)}.utility-inner>span{font-size:8px}.utility a{font-size:9px}.brand{width:140px}.brand img{width:136px}.reference-hero .hero-top-label{font-size:9px;letter-spacing:.16em}.reference-benefit{padding:15px 7px}.reference-next h2{font-size:39px}}

/* Final reference photo: one uninterrupted panorama, no blended photographs. */
.reference-hero{background:#0a315b}
.reference-hero .hero-image{inset:0;left:0;background:url('assets/waterfront-reference-v2.webp') center 65%/cover no-repeat;mask-image:none}
.reference-hero .hero-scrim{background:linear-gradient(90deg,rgba(0,35,73,.28),rgba(1,27,53,.03) 57%,transparent)}
.reference-hero h1{font-size:clamp(100px,8.9vw,138px)}
@media(min-width:1100px){.reference-hero{background-image:none}.reference-hero .hero-image{left:0;mask-image:none}}
@media(max-width:820px){.reference-hero h1{font-size:106px}}
@media(max-width:600px){.reference-hero .hero-image{background-position:72% center}.reference-hero .hero-scrim{background:linear-gradient(180deg,rgba(4,30,58,.05),rgba(0,28,58,.55) 43%,rgba(0,25,53,.95) 100%)}.reference-hero h1{font-size:clamp(84px,22vw,126px)}}

/* Exact waterfront signature strip extracted from the approved artwork. */
.waterfront-banner{background:#0a233e;scroll-margin-top:24px}
.waterfront-banner-frame{width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scrollbar-color:#79b7ef #102f50;scrollbar-width:thin}
.waterfront-banner-frame:focus-visible{outline:3px solid #72b8ff;outline-offset:-3px}
.waterfront-banner-frame img{display:block;width:100%;height:auto;max-width:none}
.waterfront-banner-hint{display:none}
@media(max-width:600px){.waterfront-banner-frame img{width:1000px}.waterfront-banner-hint{display:flex;justify-content:space-between;gap:12px;margin:0;padding:10px 18px;color:#cddff2;font-size:11px;line-height:1.5;letter-spacing:.02em}}

/* Light masthead and transparent logo — owner request, 19 October 2026. */
.site-header{height:112px;background:#f6f9fd;color:#0b2445;border-bottom:1px solid #d9e3ef;box-shadow:0 1px 0 rgba(9,34,58,.03)}
.brand{width:200px;height:100%;align-self:center;background:transparent;overflow:hidden}
.brand img{width:190px;height:110px;object-fit:cover;object-position:center;max-height:none}
.site-nav{color:#0b2445}
.site-nav>a:hover,.site-nav>a:focus-visible{color:#0757b0}
.site-header .head-cta{background:#0967d2;color:#fff}
.site-header .head-cta:hover{background:#0757b0}
.menu-toggle{background:transparent;border-color:#afc1d5;border-radius:0}
.menu-toggle span{background:#0b2445}
@media(max-width:1100px){.brand{width:180px}.brand img{width:174px;height:104px}}
@media(max-width:820px){.site-header{height:96px}.brand{width:160px}.brand img{width:144px;height:92px}.site-nav{background:#f6f9fd;border-top:1px solid #d9e3ef;color:#0b2445}}
@media(max-width:600px){.site-header{height:96px}.brand{width:158px}.brand img{width:144px;height:92px}}
@media(max-width:360px){.brand{width:150px}.brand img{width:140px;height:90px}}