@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400..900&display=swap");

:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#101d2c;background:#f5f7fa;line-height:1.5;scroll-behavior:smooth}*{box-sizing:border-box}body{margin:0}header,footer{display:flex;align-items:center;justify-content:space-between;padding:20px max(5vw,20px);gap:14px;background:white}nav{display:flex;gap:24px;align-items:center}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}.brand{font-weight:850;letter-spacing:.03em}.brand small{font-weight:600;color:#516274}.button{display:inline-block;border:0;border-radius:999px;background:#0755b5;color:white;font:inherit;font-weight:650;padding:11px 19px;cursor:pointer}.button:hover{background:#03448f}.hero{position:relative;overflow:hidden;isolation:isolate;min-height:505px;display:grid;align-items:center;padding:60px max(8vw,24px);color:white;background:linear-gradient(106deg,#071b32 20%,#0b3857 63%,#2e7e94)}.water{position:absolute;inset:0;z-index:-1;background:repeating-radial-gradient(ellipse at 90% 112%,transparent 0 24px,#b7f3ff35 26px,transparent 30px 42px),radial-gradient(ellipse at 95% 72%,#82d8e489,transparent 50%);mask-image:linear-gradient(90deg,transparent 30%,black)}h1,h2,h3,p{margin:0 0 15px}h1{font-size:clamp(64px,10vw,130px);line-height:.87;letter-spacing:-.086em;margin-bottom:24px}h2{font-size:clamp(36px,5vw,68px);line-height:1;letter-spacing:-.065em}h3{font-size:24px;letter-spacing:-.035em}.hero p:not(.eyebrow){max-width:420px;color:#e3edf7}.eyebrow{font-weight:800;font-size:12px;letter-spacing:.15em;color:#1764af}.hero .eyebrow{color:#aeeaff}.light{background:#fff;color:#11273d}.light:hover{background:#e1f3ff}.regions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 40px;padding:22px;background:#e5edf4}.regions span,.section p,footer span{color:#495e70}.section{max-width:1250px;margin:auto;padding:76px max(5vw,20px);display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}.card{background:white;border:1px solid #dce4ec;border-radius:24px;padding:25px;box-shadow:0 10px 30px #18334b0b}.notice{font-size:14px;background:#edf4fa;border-radius:10px;padding:10px}.parts{border-top:1px solid #dce4ec}label{display:block;font-weight:650;margin-top:12px}select,input{font:inherit;width:100%;padding:11px;margin:5px 0 12px;border:1px solid #a6b6c4;border-radius:9px;background:white;color:inherit}.result{padding:12px 0;border-top:1px solid #dce4ec}.result a{color:#0755b5;text-decoration:underline}.result small{display:block;color:#495e70}#slots:not(:empty){margin-top:16px}footer{border-top:1px solid #dce4ec}@media(max-width:690px){header{flex-wrap:wrap}nav{gap:12px;flex-wrap:wrap}.section{grid-template-columns:1fr;padding-block:44px;gap:20px}.hero{min-height:440px}.regions{justify-content:flex-start}}
.hero{background:linear-gradient(90deg,#051628e8 0%,#061b2ba0 42%,#071b3026 100%),url('sunset-beach.jpg') center 55% / cover no-repeat}.water{display:none}
.brand img{display:block;width:112px;height:auto;border-radius:10px}.brand{flex:none}#matches{max-height:390px;overflow:auto;overscroll-behavior:contain}.hero{min-height:550px}@media(max-width:690px){.hero{min-height:450px;background-position:62% center}}

.lakes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:30px max(5vw,20px) 0}.lakes figure{margin:0;background:white;border-radius:17px;overflow:hidden}.lakes img{display:block;width:100%;aspect-ratio:11/7;object-fit:cover}.lakes figcaption{padding:11px 15px;font-weight:650}.credit{padding:8px max(5vw,20px);font-size:12px;color:#495e70}.credit a{text-decoration:underline}@media(max-width:690px){.lakes{grid-template-columns:1fr}}
.workbench{max-width:920px;padding:40px 20px;margin:auto}.workbench .card{margin:22px 0}.workbench nav{flex-wrap:wrap;gap:10px}.workbench button[aria-pressed=false]{background:#e5edf4;color:#132940}.workbench #records{margin-top:18px}

.marina-title{padding:40px max(5vw,20px) 0;margin:0;font-size:clamp(29px,4vw,48px)}.lakes figcaption small{display:block;color:#495e70;font-weight:500}.lakes figcaption a{text-decoration:underline}
.marina-lake{padding:24px max(5vw,20px) 0;margin:0}.marina-lake+.lakes{padding-top:12px}.marina-pending{background:white;border:1px solid #dce4ec;border-radius:17px;padding:16px;color:#132940}.marina-pending small{display:block;color:#495e70}.marina-pending a{text-decoration:underline}.marina-pending p{margin:12px 0 0;color:#495e70}
.urgent{max-width:1130px;margin:0 auto 42px;padding:24px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:#e5edf4;border:1px solid #dce4ec;border-radius:24px}.urgent h2{font-size:clamp(28px,4vw,44px)}.urgent p:last-child{margin-bottom:0}.urgent .button{flex:none}@media(max-width:1170px){.urgent{margin-inline:20px}}@media(max-width:690px){.urgent{align-items:flex-start;flex-direction:column}}
.catalog-logo{display:block;background-image:url('benny-logo.png');background-repeat:no-repeat;border-radius:3px;margin-bottom:6px}
.brand img{width:clamp(200px,24vw,300px)}
@media(max-width:740px){header{flex-wrap:wrap}.brand{flex-basis:100%}.brand img{width:min(240px,100%)}header nav{gap:12px;flex-wrap:wrap}}
body > header{position:sticky;top:0;z-index:5;display:grid;justify-items:center;justify-content:center;gap:8px;padding:8px 14px;background:#fffffff5;box-shadow:0 1px 8px #13294020}
body > header .brand img{width:clamp(145px,20vw,205px);aspect-ratio:2/1;object-fit:cover;object-position:center top}
body > header nav{justify-content:center;gap:8px 18px;font-size:14px}
body > header nav .button{padding:6px 12px}
main [id]{scroll-margin-top:170px}
.brand-choice{display:flex;align-items:center;gap:12px;width:100%;border:0;background:transparent;color:#0755b5;text-align:left;font:inherit;font-weight:700;cursor:pointer;padding:8px 4px}.brand-choice:hover,.brand-choice:focus-visible{background:#edf4fa}.brand-choice[aria-pressed=true]{color:#132940}.manufacturer-logo{width:100px;height:38px;object-fit:contain}
.maker-strip{background:#fff;padding:12px 0;color:#132940}.maker-controls{display:flex;justify-content:space-between;align-items:center;padding:0 max(5vw,20px);font-weight:650}.maker-controls button{font:inherit;background:none;border:1px solid #a6b6c4;border-radius:999px;padding:3px 12px;color:inherit;cursor:pointer}.maker-window{overflow:hidden;overflow:clip}.maker-track{display:flex;width:max-content;animation:makers-scroll 46s linear infinite}.maker-group{display:flex;flex:none;align-items:center;gap:12px;padding:12px 12px 5px 0}.maker-group a{display:grid;place-items:center;min-width:132px;min-height:55px;padding:8px 10px;white-space:nowrap;border-radius:10px;font-weight:700}.maker-group a:hover,.maker-group a:focus-visible{background:#edf4fa}.maker-group img{width:104px;height:34px;object-fit:contain}.maker-window:has(a:focus-visible) .maker-track{animation-play-state:paused}.maker-window:has(a:focus-visible){overflow-x:auto}@keyframes makers-scroll{to{transform:translateX(-50%)}}@media(prefers-reduced-motion:reduce){.maker-track{animation:none}.maker-window{overflow-x:auto}.maker-group[aria-hidden=true],#maker-pause{display:none}}
body > header:has(.maker-strip){grid-template-columns:minmax(0,1fr);justify-content:stretch;padding-bottom:0}
body > header .maker-strip{width:100%;min-width:0;grid-row:1;padding:3px 0 0;border-bottom:1px solid #dce4ec;background:#fff}
body > header .maker-controls{padding:0 4px;font-size:12px}
body > header .maker-group{padding:2px 12px 3px 0}
body > header .maker-group a{min-height:38px;font-size:13px;padding:3px 8px}
body > header .maker-group img{height:26px}
body:has(.maker-strip) main [id]{scroll-margin-top:240px}
.benny-lockup{display:flex;align-items:center;gap:10px;padding:4px 14px 4px 6px;border:1px solid #dce4ec;border-radius:12px;background:#fff;text-align:left}
.benny-emblem{flex:none;width:42px;height:42px;border-radius:50%;background:url('benny-logo.png') -60px -5px / 158px 133px no-repeat}
.benny-name{display:grid;gap:2px;line-height:1.1;letter-spacing:0}.benny-name strong{color:#113f77;font-size:clamp(15px,3.8vw,21px)}.benny-name small{color:#516274;font-size:11px}
body:has(.maker-strip) main [id]{scroll-margin-top:190px}
body > header .maker-group a{min-height:53px;gap:2px;color:#132940}
.maker-group a span{font-size:12px;line-height:1.15}
.maker-group img.light-mark,.manufacturer-logo.light-mark{background:#142b44;border-radius:5px;padding:3px 6px}
.maker-logos{display:flex;align-items:center;gap:6px}.maker-logos img{width:104px}.maker-logos img:not(:only-child){width:75px}
.benny-lockup{background:#10243b;border:1px solid #10243b;border-left:4px solid #a63d16;border-radius:10px;padding:5px 14px 5px 7px}
.benny-emblem{background-color:#f7f5ef;box-shadow:0 0 0 1px #f7f5ef}
.benny-name strong{color:#fff}.benny-name small{color:#e4dfd4}


body > header:has(.maker-strip) > .brand {
  width: 100%;
  justify-self: stretch;
}
body > header:has(.maker-strip) .benny-lockup {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "left emblem right" "left name right";
  justify-items: center;
  gap: 4px;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: linear-gradient(119deg, #0755b5 0 24%, #008292 24% 33%, #10243b 33% 67%, #008292 67% 76%, #0755b5 76%);
  text-align: center;
}
.benny-lockup::before, .benny-lockup::after {
  content: "⚓︎";
  color: white;
  font-size: clamp(24px, 5vw, 54px);
  line-height: 1;
}
.benny-lockup::before { grid-area: left; }
.benny-lockup::after { grid-area: right; }
.benny-lockup .benny-emblem { grid-area: emblem; }
.benny-lockup .benny-name { grid-area: name; padding-inline: 5px; }

/* Crop the anchor and the red monogram from the original logo artwork. */
.benny-lockup::before, .benny-lockup::after {
  content: "";
  width: clamp(31px, 5.5vw, 64px);
  aspect-ratio: 200 / 280;
  background: url('benny-logo.png') 3.4% 52% / 633.5% 382.1% no-repeat;
  clip-path: polygon(62% 0, 81% 0, 85% 7%, 80% 22%, 76% 25%, 100% 31%, 95% 42%, 69% 38%, 59% 58%, 57% 69%, 66% 73%, 74% 56%, 95% 72%, 89% 78%, 81% 76%, 73% 86%, 53% 96%, 36% 100%, 17% 86%, 5% 72%, 4% 65%, 0 65%, 22% 53%, 28% 70%, 22% 68%, 25% 77%, 35% 79%, 50% 39%, 22% 33%, 25% 21%, 57% 25%, 51% 15%, 55% 5%);
}
.benny-lockup .benny-emblem {
  width: clamp(59px, 6vw, 81px);
  height: auto;
  aspect-ratio: 1;
  background-size: 375% auto;
  background-position: 52% 5%;
}

/* Branding belongs to the logo row. The homepage canvas has no artwork. */
body:has(.maker-strip) > main {
  background: #f5f7fa;
}

body > header:has(.maker-strip) .original-art {
  display: block;
  padding: 0;
  background: linear-gradient(119deg, #0755a6 0 22%, #049ca5 22% 29%, #d0d1d1 29% 71%, #049ca5 71% 78%, #0755a6 78%);
}
.original-art::before, .original-art::after {
  display: none;
}
.original-wordmark {
  display: block;
  width: min(100%, 330px);
  height: 59px;
  margin-inline: auto;
  background: url('benny-logo.png') right 69% / 118% 435% no-repeat;
}

:root {
  font-family: "Nunito", "Arial Rounded MT Bold", system-ui, sans-serif;
}
h1, h2, h3, h4, .button, .maker-group a {
  font-weight: 900;
}
h1, h2 {
  letter-spacing: -.045em;
}

body:has(.maker-strip) main :is(h1, h2, h3, h4) {
  color: #c51227;
  -webkit-text-stroke: .045em #064b93;
  paint-order: stroke fill;
}
body:has(.maker-strip) .hero h1 {
  color: #ff6471;
  -webkit-text-stroke-width: .07em;
  text-shadow: 0 0 .08em #fff, 0 0 .045em #fff;
}

body > header:has(.maker-strip) .original-art {
  background: #064a99;
}
.original-art .original-wordmark {
  width: 100%;
  height: clamp(40px, 7vw, 60px);
  background: url('approved-banner.png') center / 100% 348% no-repeat;
}
body:has(.maker-strip) {
  color: #102949;
  font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
}
body:has(.maker-strip) main h2 {
  font-size: clamp(2rem, 4.4vw, 3.5rem);
}
body:has(.maker-strip) main :is(h3, h4) {
  color: #103e74;
  -webkit-text-stroke: 0;
}
body:has(.maker-strip) .hero h1 {
  font-size: clamp(3rem, 9vw, 7rem);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#service-request [hidden], .mobile-service-actions { display: none; }
#service-request { scroll-margin-top: 245px; }
@media (max-width: 690px) {
  body:has(.mobile-service-actions) { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .mobile-service-actions {
    position: fixed;
    inset: auto 0 0;
    z-index: 6;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: #102949;
    text-align: center;
  }
}