:root {
  --ink: #082337;
  --muted: #5a6e7b;
  --sea: #076a8c;
  --sea-deep: #034460;
  --aqua: #49b6c7;
  --foam: #eaf4f5;
  --line: #d8e4e8;
  --paper: #ffffff;
  --night: #062d45;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; line-height: 1.55; overflow-x: hidden; }
a { color: inherit; }

.site-header { position: relative; min-height: 116px; overflow: hidden; background: #fff; border-bottom: 1px solid #d8e4e8; }
.header-grid { position: absolute; inset: 0; opacity: 1; background: radial-gradient(ellipse 54% 160% at 104% 106%, transparent 48%, rgba(73,182,199,.18) 48.5% 49.1%, transparent 49.6%), radial-gradient(ellipse 54% 160% at 105% 115%, transparent 45%, rgba(7,106,140,.12) 45.5% 46.1%, transparent 46.6%), linear-gradient(90deg, rgba(255,255,255,0) 47%, rgba(234,244,245,.86) 100%); }
.header-grid::before { content: ""; position: absolute; right: -10%; bottom: 14px; width: 57%; height: 1px; background: linear-gradient(90deg, transparent, rgba(7,106,140,.25)); transform: rotate(-2deg); }
.header-inner, .section-shell, .hero-inner, .footer-inner { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.header-inner { position: relative; z-index: 1; min-height: 116px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; padding: 0; }
.brand img { display: block; width: 208px; height: auto; }
.header-contact { display: grid; justify-items: end; gap: 7px; }
.header-mark { margin: 0; color: #426271; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-align: right; text-transform: uppercase; white-space: nowrap; }
.header-area { margin: 0; color: #547887; font-family: Georgia, "Times New Roman", serif; font-size: 15px; font-style: italic; font-weight: 400; letter-spacing: .015em; text-align: right; }
.header-details { display: grid; justify-items: end; gap: 2px; color: #426271; }
.header-details a { color: var(--sea-deep); text-decoration: none; }
.header-details .header-contact-link { font-size: 12px; font-weight: 600; letter-spacing: .025em; }
.header-details .header-contact-link:hover { color: #2b667f; text-decoration: underline; text-underline-offset: 4px; }

.hero { position: relative; isolation: isolate; overflow: hidden; min-height: 615px; color: #fff; background: #062d45; border-bottom: 1px solid var(--line); }
.hero-image { position: absolute; z-index: -3; inset: 0; background: url("website-preview/3-Photo-3.jpg") center 48% / cover no-repeat; transform: scale(1.015); }
.hero::before { content: ""; position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(3,27,43,.94) 0%, rgba(3,36,56,.83) 46%, rgba(3,37,57,.38) 100%), linear-gradient(0deg, rgba(3,30,47,.55), transparent 55%); }
.hero::after { content: ""; position: absolute; z-index: -1; inset: auto -4% -1px; height: 155px; background: linear-gradient(180deg, transparent, rgba(1,25,39,.68)); clip-path: polygon(0 53%, 13% 42%, 25% 51%, 37% 36%, 49% 45%, 60% 30%, 71% 42%, 84% 27%, 100% 39%, 100% 100%, 0 100%); }
.hero-wake { position: absolute; z-index: -1; width: 46vw; min-width: 420px; height: 130px; right: -8vw; border-top: 1px solid rgba(207,245,248,.38); border-radius: 50%; transform: rotate(-9deg); }
.hero-wake-one { bottom: 34px; }
.hero-wake-two { bottom: 6px; right: -13vw; opacity: .55; }
.hero-inner { padding: clamp(96px, 12vw, 148px) 0 clamp(90px, 11vw, 126px); }
.eyebrow { margin: 0 0 15px; color: var(--sea); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.hero .eyebrow { color: #a3e1e5; }
h1, h2, h3 { margin: 0; color: var(--ink); line-height: 1.05; letter-spacing: -.04em; }
.hero h1 { color: #fff; text-shadow: 0 3px 16px rgba(0,0,0,.30); }
h1 { max-width: 760px; font-size: clamp(47px, 6vw, 80px); }
h2 { font-size: clamp(32px, 3.7vw, 53px); }
h3 { font-size: 25px; }
.hero-copy { max-width: 650px; margin: 25px 0 31px; color: rgba(255,255,255,.89); font-size: 19px; text-shadow: 0 2px 12px rgba(0,0,0,.32); }
.hero-actions, .start-primary-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; }
.start-actions { display: grid; justify-items: start; gap: 17px; }
.button { min-height: 51px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 20px; border: 1px solid transparent; border-radius: 4px; font-size: 14px; font-weight: 800; text-decoration: none; transition: transform .16s ease, background .16s ease, border-color .16s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #fff; background: var(--sea); box-shadow: 0 10px 25px rgba(3,68,96,.16); }
.button-primary:hover { background: var(--sea-deep); }
.button-secondary { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.65); backdrop-filter: blur(3px); }
.button-secondary:hover { border-color: #fff; background: rgba(255,255,255,.16); }
.hero-rule { width: 108px; height: 2px; margin: 54px 0 18px; background: linear-gradient(90deg, #a3e1e5, transparent); }
.hero-note { margin: 0; color: rgba(255,255,255,.82); font-size: 15px; font-weight: 700; }

.marina-strip { border-bottom: 1px solid #bdd7df; background: linear-gradient(100deg, #eaf4f5, #f8fcfc 52%, #e2f0f2); }
.marina-strip-inner { min-height: 116px; display: grid; grid-template-columns: 225px minmax(0, 1fr); align-items: center; gap: 34px; }
.marina-kicker { margin: 0; color: var(--sea); font-size: 11px; font-weight: 800; letter-spacing: .13em; line-height: 1.35; text-transform: uppercase; }
.marina-copy { display: grid; gap: 5px; padding: 19px 0 19px 34px; border-left: 1px solid rgba(7,106,140,.3); }
.marina-copy strong { color: var(--sea-deep); font-size: 18px; letter-spacing: -.01em; }
.marina-copy span { max-width: 800px; color: #4d6875; font-size: 15px; }

.intro-section { position: relative; overflow: hidden; padding: 115px 0; }
.intro-section::before { content: ""; position: absolute; top: 22px; right: -120px; width: 530px; height: 210px; opacity: .75; background: radial-gradient(ellipse 62% 70% at 50% 100%, transparent 61%, rgba(73,182,199,.17) 61.5% 62.4%, transparent 63%), radial-gradient(ellipse 62% 70% at 50% 118%, transparent 57%, rgba(7,106,140,.12) 57.5% 58.4%, transparent 59%); pointer-events: none; }
.section-heading { max-width: 770px; }
.intro-layout { display: grid; grid-template-columns: minmax(0, .78fr) minmax(300px, .58fr); gap: clamp(42px, 8vw, 120px); align-items: end; margin-top: 47px; }
.intro-copy { max-width: 610px; color: var(--muted); font-size: 19px; }
.intro-copy-wide { margin-top: 47px; }
.intro-copy p { margin: 0 0 18px; }
.feature-thumb { position: relative; min-height: 310px; margin: 0; overflow: hidden; border-radius: 4px; background: #dce8ea; box-shadow: 0 24px 54px rgba(8,35,55,.12); }
.feature-thumb::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(4,31,48,.72)); }
.feature-thumb img { width: 100%; height: 100%; position: absolute; inset: 0; display: block; object-fit: cover; }
.feature-thumb figcaption { position: absolute; z-index: 1; right: 21px; bottom: 17px; left: 21px; color: #fff; font-size: 13px; font-weight: 700; }

.services-section { position: relative; isolation: isolate; overflow: hidden; padding: 86px 0 88px; background: var(--foam); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.services-section::before { content: ""; position: absolute; z-index: -1; top: -120px; left: -105px; width: 440px; height: 300px; opacity: .64; background: radial-gradient(ellipse 65% 58% at 50% 95%, transparent 63%, rgba(73,182,199,.18) 63.5% 64.4%, transparent 65%), radial-gradient(ellipse 65% 58% at 50% 115%, transparent 59%, rgba(7,106,140,.10) 59.5% 60.4%, transparent 61%); transform: rotate(-8deg); pointer-events: none; }
.services-topline { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .62fr); gap: 50px; align-items: end; }
.services-topline > p { max-width: 450px; margin: 0; color: var(--muted); font-size: 17px; }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 42px; }
.service-card { position: relative; overflow: hidden; background: #fff; border: 1px solid #d2e2e4; border-radius: 4px; box-shadow: 0 12px 30px rgba(9,52,70,.06); }
.service-card::before { content: ""; position: absolute; top: 0; left: 0; width: 58px; height: 3px; background: linear-gradient(90deg, var(--aqua), rgba(73,182,199,.1)); }
.service-card-copy { min-height: 220px; padding: 26px 23px 27px; }
.service-number { margin: 0 0 22px; color: var(--aqua); font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.service-card h3 { font-size: 24px; }
.service-card p:not(.service-number) { margin: 13px 0 0; color: var(--muted); font-size: 16px; }

.core-services { padding: 118px 0 104px; }
.core-services-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .55fr); align-items: end; gap: 48px; }
.core-services-heading > p { max-width: 430px; margin: 0; color: var(--muted); font-size: 17px; }
.core-service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 55px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.core-service-grid article { min-height: 250px; padding: 29px 25px 25px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.core-service-grid h3 { font-size: 22px; }
.core-service-grid ul { margin: 26px 0 0; padding: 0; list-style: none; }
.core-service-grid li { position: relative; margin-top: 10px; padding-left: 16px; color: var(--muted); font-size: 15px; }
.core-service-grid li::before { content: ""; position: absolute; top: .65em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--aqua); }


.capability-section { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, .8fr) minmax(340px, 1fr); gap: clamp(50px, 10vw, 158px); margin: 8px auto 110px; padding: clamp(46px, 7vw, 90px); overflow: hidden; border-radius: 6px; }
.capability-section::before { content: ""; position: absolute; z-index: -2; inset: 0; background: url("website-preview/5-Photo-5.jpg") center 50% / cover no-repeat; }
.capability-section::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(2,35,54,.95) 0%, rgba(3,52,73,.88) 52%, rgba(3,45,64,.64) 100%); }
.capability-copy > p:not(.eyebrow) { margin: 21px 0 0; max-width: 520px; color: rgba(255,255,255,.83); font-size: 18px; }
.capability-section h2 { color: #fff; }
.capability-section .eyebrow { color: #a3e1e5; }
.capability-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(218,241,243,.37); }
.capability-list li { position: relative; display: grid; grid-template-columns: 42px 1fr; column-gap: 16px; padding: 23px 0 21px; border-bottom: 1px solid rgba(218,241,243,.31); }
.capability-list span { color: #a3e1e5; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.capability-list strong { color: #fff; font-size: 18px; }
.capability-list p { grid-column: 2; margin: 7px 0 0; color: rgba(255,255,255,.8); font-size: 15px; }

.start-section { padding: 0 0 108px; }
.start-panel { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 42px; padding: clamp(38px, 6vw, 72px); color: #fff; overflow: hidden; border-radius: 5px; background: #073955; }
.start-panel::before { content: ""; position: absolute; z-index: -2; inset: 0; background: url("website-preview/premium-marina-yachts.png") center 52% / cover no-repeat; }
.start-panel::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(100deg, rgba(3,39,59,.95) 0%, rgba(3,68,96,.83) 50%, rgba(3,68,96,.55) 100%); }
.start-panel > * { position: relative; }
.start-panel > div:first-child { max-width: 675px; }
.start-panel .eyebrow { color: #a3e1e5; }
.start-panel h2 { color: #fff; }
.start-panel p:not(.eyebrow) { margin: 17px 0 0; color: rgba(255,255,255,.8); font-size: 17px; }
.button-light { color: var(--sea-deep); background: #fff; white-space: nowrap; }
.button-outline-light { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.68); white-space: nowrap; }
.button-outline-light:hover { color: #fff; background: rgba(255,255,255,.17); border-color: #fff; }
.text-link { color: #fff; font-size: 14px; font-weight: 800; text-decoration-color: rgba(255,255,255,.5); text-underline-offset: 5px; white-space: nowrap; }

footer { border-top: 1px solid var(--line); background: #fbfdfe; }
.footer-inner { min-height: 136px; display: grid; grid-template-columns: 170px minmax(230px, 1fr) auto auto; align-items: center; gap: 30px; color: var(--muted); }
.footer-brand { display: inline-flex; align-items: center; }
.footer-inner img { display: block; width: 154px; height: auto; }
.footer-inner p { margin: 0; }
.footer-title { color: var(--sea-deep); font-size: 12px; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.footer-area { margin-top: 5px !important; color: #64818c; font-family: Georgia, "Times New Roman", serif; font-size: 15px; font-style: italic; }
.footer-contact { display: grid; gap: 3px; font-style: normal; text-align: right; }
.footer-contact a { color: #396172; font-size: 13px; font-weight: 600; text-decoration: none; }
.footer-contact a:hover { color: var(--sea-deep); text-decoration: underline; text-underline-offset: 4px; }
.footer-legal { color: #7d939b; font-size: 11px; letter-spacing: .045em; text-align: right; white-space: nowrap; }

body.modal-open { overflow: hidden; }
.form-modal[hidden] { display: none; }
.form-modal { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 22px; }
.form-modal-backdrop { position: absolute; inset: 0; background: rgba(2, 24, 38, .72); backdrop-filter: blur(4px); }
.form-modal-panel { position: relative; width: min(960px, 100%); height: min(88vh, 860px); overflow: hidden; border: 1px solid rgba(255,255,255,.35); border-radius: 8px; background: #fff; box-shadow: 0 26px 80px rgba(0,0,0,.35); }
.form-modal-header { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 18px 14px 22px; border-bottom: 1px solid var(--line); background: #fff; }
.form-modal-header h2 { font-size: 23px; }
.form-modal-close { appearance: none; border: 1px solid #b9ced5; border-radius: 4px; padding: 9px 12px; background: #fff; color: var(--sea-deep); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.form-modal-close:hover { background: var(--foam); }
.form-modal iframe { display: block; width: 100%; height: calc(100% - 64px); border: 0; background: #fff; }

@media (max-width: 850px) {
  .header-inner, .section-shell, .hero-inner, .footer-inner { width: min(100% - 34px, 1160px); }
  .site-header, .header-inner { min-height: 94px; }
  .brand img { width: 182px; }
  .header-contact { gap: 6px; }
  .header-mark { font-size: 10px; letter-spacing: .09em; }
  .header-area { font-size: 13px; }
  .header-details { gap: 2px; }
  .header-details .header-contact-link { font-size: 10px; }
  .hero { min-height: 555px; }
  .hero-inner { padding: 82px 0 84px; }
  .hero-image { background-position: 59% center; }
  .hero::before { background: linear-gradient(90deg, rgba(3,27,43,.93), rgba(3,36,56,.68)), linear-gradient(0deg, rgba(3,30,47,.52), transparent 55%); }
  .marina-strip-inner { grid-template-columns: 1fr; gap: 10px; padding: 25px 0; }
  .marina-copy { padding: 0; border-left: 0; }
  .intro-section, .services-section { padding: 68px 0; }
  .capability-section { margin: 8px auto 74px; padding: 58px 28px; }
  .intro-layout, .services-topline, .capability-section, .core-services-heading { grid-template-columns: 1fr; }
  .intro-layout, .services-topline { gap: 28px; margin-top: 33px; }
  .service-grid { grid-template-columns: repeat(2, 1fr); margin-top: 34px; }
  .service-card { display: block; }
  .start-section { padding-bottom: 68px; }
  .start-panel { flex-direction: column; align-items: flex-start; }
  .footer-inner { grid-template-columns: 160px 1fr; gap: 22px; padding: 25px 0; }
  .footer-contact, .footer-legal { text-align: left; }
}

@media (max-width: 520px) {
  .header-inner, .section-shell, .hero-inner, .footer-inner { width: min(100% - 30px, 1160px); }
  h1 { font-size: clamp(42px, 13vw, 57px); }
  h2 { font-size: 34px; }
  .hero-copy { font-size: 17px; }
  .hero-actions, .start-actions, .start-primary-actions { width: 100%; }
  .button { width: 100%; }
  .button-secondary { background: rgba(255,255,255,.12); }
  .marina-copy strong { font-size: 17px; }
  .marina-copy span { font-size: 14px; }
  .service-grid { grid-template-columns: 1fr; }
  .service-card { grid-template-columns: 1fr; }
  .start-panel { width: min(100% - 30px, 1160px); }
  .text-link { align-self: center; }
  .footer-inner { min-height: 0; grid-template-columns: 1fr; gap: 12px; padding: 30px 0; }
  .site-header, .header-inner { min-height: 106px; }
  .brand img { width: 158px; }
  .header-contact { gap: 4px; }
  .header-mark { font-size: 8px; letter-spacing: .055em; }
  .header-area { font-size: 11px; }
  .header-details { gap: 1px; }
  .header-details .header-contact-link { font-size: 9px; }
  .form-modal { padding: 10px; }
  .form-modal-panel { height: min(94vh, 860px); }
  .form-modal-header { min-height: 56px; padding: 10px 12px 10px 16px; }
  .form-modal-header h2 { font-size: 19px; }
  .form-modal iframe { height: calc(100% - 56px); }
}