:root{--cobalt:#1347d6;--cobalt-d:#0c2f94;--butter:#ffd23f;--ink:#101828;--paper:#fff;--mist:#f2f5fb;--text:#26324a}
img{max-width:100%;height:auto}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:'Archivo',system-ui,sans-serif;color:var(--text);background:var(--paper);font-size:1.05rem;line-height:1.65}
h1,h2,h3{font-family:'Anton',Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1.02;color:var(--ink)}
h2{font-size:clamp(2.2rem,5vw,3.8rem);margin-bottom:1.1rem}
h3{font-size:1.7rem}
.mono{font-family:'DM Mono',monospace;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase}
.tag{display:inline-block;background:var(--cobalt);color:#fff;padding:.25rem .6rem;margin-bottom:1rem}
.tag.y{background:var(--butter);color:var(--ink)}
.sec{padding:clamp(3.5rem,8vw,6.5rem) 0}
a{color:var(--cobalt)}
.btn{border-radius:2px;font-weight:700;letter-spacing:.03em;padding:.8rem 1.5rem}
.btn-wf{background:var(--butter);color:var(--ink);border:2px solid var(--butter)}
.btn-wf:hover{background:#ffe07a;color:var(--ink)}
.btn-ink{background:var(--ink);color:#fff;border:2px solid var(--ink)}.btn-ink:hover{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.btn-line{border:2px solid #fff;color:#fff}.btn-line:hover{background:#fff;color:var(--cobalt)}
.btn-line-dark{border:2px solid var(--ink);color:var(--ink)}.btn-line-dark:hover{background:var(--ink);color:#fff}
.btn-sm{padding:.5rem 1rem}

/* nav */
.bg-nav{border-bottom:3px solid var(--cobalt);padding:.4rem 0}
.navbar-brand{display:flex;align-items:center;gap:.7rem;margin:0}
.brand-logo{height:46px;width:auto}
.brand-name{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:1.35rem;color:var(--cobalt);letter-spacing:.03em}
.navbar .nav-link{font-family:'DM Mono',monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);font-weight:500}
.navbar .nav-link:hover{color:var(--cobalt)}
@media(max-width:575px){.brand-logo{height:38px}.brand-name{font-size:1.1rem}}

/* hero */
.hero{background:var(--cobalt);color:#fff;padding:clamp(2rem,5vw,3.5rem) 0 clamp(2.5rem,5vw,4rem);position:relative;overflow:hidden}
.hero h1{color:#fff;font-size:clamp(3.4rem,9vw,7rem);margin:.8rem 0 1rem;line-height:.95}
.hero .mono{color:var(--butter)}
.hero-sub{font-size:1.2rem;max-width:34rem;margin-bottom:1.6rem}
.hero-photos{display:grid;grid-template-columns:1fr;gap:.8rem}
.hero-photos figure{margin:0;position:relative;overflow:hidden;border-radius:2px}
.hero-photos img{width:100%;height:100%;object-fit:cover;display:block}
.hp-main{grid-column:1 / -1;height:clamp(200px,28vw,300px)}
.hp-main img{object-position:50% 40%}
.hp-side{grid-column:1 / -1;height:clamp(110px,14vw,150px)}
.hero .hero-photos figcaption{color:var(--ink);position:absolute;left:0;bottom:0;background:var(--butter);color:var(--ink);padding:.2rem .6rem}
.decal{display:inline-block;margin-top:1.6rem;font-family:'Anton',sans-serif;letter-spacing:.18em;font-size:1.5rem;color:var(--butter);border:2px solid var(--butter);padding:.1rem .7rem;opacity:.9;transform:rotate(-2deg)}
.decal.sm{font-size:1rem;margin:0}

/* ticker */
.ticker{background:var(--butter);color:var(--ink);overflow:hidden;white-space:nowrap;border-block:2px solid var(--ink)}
.ticker-track{display:inline-flex;animation:tick 40s linear infinite}
.ticker span{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:1.15rem;padding:.55rem 1.6rem;letter-spacing:.05em}
.ticker span::after{content:"⚓";margin-left:3.2rem;font-size:.9rem}
@keyframes tick{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* services */
.sticky-lg{position:sticky;top:110px}
@media(max-width:991px){.sticky-lg{position:static}}
.index-list{list-style:none;padding:0;margin:0 0 1.5rem;counter-reset:none}
.index-list li{border-top:2px solid var(--ink);padding:.7rem 0;font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(1.4rem,3vw,2.1rem);color:var(--ink);transition:color .2s,padding .2s}
.index-list li:last-child{border-bottom:2px solid var(--ink)}
.index-list li:hover{color:var(--cobalt);padding-left:.6rem}
.svc-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.svc-strip img{width:100%;aspect-ratio:1/1.1;object-fit:cover;border-radius:2px}
@media(max-width:575px){.svc-strip{grid-template-columns:1fr 1fr}}

/* bands */
.band-blue{background:var(--cobalt);color:#fff}
.band-blue h2,.band-blue h3{color:#fff}
.band-blue a{color:var(--butter)}
.band-yellow{background:var(--butter)}
.band-yellow .tag{background:var(--ink)}
.band-ink{background:var(--ink);color:#dfe6f5}
.band-ink h2{color:#fff}
.lead-w{font-size:1.2rem;max-width:44rem}

/* boats */
.pic-card{display:block;background:#fff;color:var(--ink);text-decoration:none;border-radius:2px;overflow:hidden;box-shadow:8px 8px 0 var(--butter);transition:transform .2s}
.pic-card:hover{transform:translate(-3px,-3px);color:var(--ink)}
.pic-card img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.pc-body{display:block;padding:1rem 1.2rem}
.pc-body b{display:block;font-family:'Anton',sans-serif;text-transform:uppercase;font-size:1.6rem;font-weight:400}
.pc-body em{font-style:normal;color:#55607a}

/* brands */
.brand-card{background:var(--mist);border-top:4px solid var(--cobalt);padding-bottom:1.3rem;height:100%}
.bc-img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;margin-bottom:1rem}
.brand-card h3,.brand-card p,.brand-card a{margin-inline:1.2rem;display:block}
.brand-card a{font-weight:700;text-decoration:none}

/* power */
.store-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.store-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border:3px solid var(--ink)}
.store-grid img:first-child{grid-column:1 / -1;aspect-ratio:16/8}

/* efoils */
.rect{width:100%;border-radius:3px;display:block}
.foil{border:2px solid var(--ink);padding:.8rem;height:100%;font-size:.9rem;line-height:1.4}
.foil img{width:100%;aspect-ratio:3/2;object-fit:contain;margin-bottom:.5rem}
.foil b{display:block;font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:1.25rem;color:var(--ink)}
#efoils .btn{margin:.4rem .4rem 0 0}

/* mowing */
.checks{list-style:none;padding:0;margin:1.2rem 0 1.6rem}
.checks li{padding:.3rem 0 .3rem 2rem;position:relative}
.checks li::before{content:"";position:absolute;left:0;top:.7rem;width:1.1rem;height:.55rem;border-left:3px solid var(--butter);border-bottom:3px solid var(--butter);transform:rotate(-45deg)}
.mow-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;align-items:start}
.mow-grid img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px}
.mow-grid img:last-child{margin-top:2rem}

/* about */
.sig{margin-top:.8rem}.sig b{display:block;font-family:'Anton',sans-serif;font-weight:400;font-size:1.5rem;color:var(--ink);text-transform:uppercase}
.lead-b{font-size:1.3rem;color:var(--ink);font-weight:500;border-left:5px solid var(--butter);padding-left:1rem}
.sq{aspect-ratio:1/1;object-fit:cover}

/* visit */
.loc{background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.3);padding:1.5rem;height:100%}
.addr{font-size:1.25rem;font-weight:700;margin-bottom:.4rem}
.hours{list-style:none;padding:0;margin:1rem 0}
.hours li{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px dashed rgba(255,255,255,.35);padding:.35rem 0}
.loc iframe{width:100%;height:260px;border:0;display:block;margin-top:1rem}
.contact-row a{display:block;background:var(--butter);color:var(--ink);text-decoration:none;padding:1rem 1.2rem;height:100%}
.contact-row b{display:block;font-family:'Anton',sans-serif;font-weight:400;font-size:1.7rem;letter-spacing:.02em}
.contact-row a:hover{background:#fff}

/* footer */
.foot{background:var(--ink);color:#c9d3ea;padding:2.5rem 0 1.2rem}
.foot-chip{display:inline-block;background:#fff;border-radius:6px;padding:.4rem .8rem}
.foot-chip img{height:56px;width:auto;display:block}
.foot-links a{color:#fff;margin-right:1.2rem;text-decoration:none;font-family:'DM Mono',monospace;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.foot-links a:hover{color:var(--butter)}
.powered{margin:2rem 0 0;font-size:.85rem;text-align:center;opacity:.8}.powered a{color:var(--butter)}
